changing check box to toggle in various setting views (#5769)

* Resolves: check box to toggle in various setting views * resolve conflicts * Notification logic reversal * remove transform property in the toggle * Handle email tls certificate check * Unifications and fixes --------- Co-authored-by: Dennis Reimann <mail@dennisreimann.de>
btcpayserver · Mar 14, 2024 · d0e11f1 · d0e11f1
1 parent 912a706
commit d0e11f1
Show file tree

Hide file tree

Showing 19 changed files with 140 additions and 119 deletions.
diff --git a/BTCPayServer.Client/Models/EmailSettingsData.cs b/BTCPayServer.Client/Models/EmailSettingsData.cs
@@ -1,3 +1,5 @@
+using Newtonsoft.Json;
+
 namespace BTCPayServer.Client.Models;
 
 public class EmailSettingsData
@@ -26,4 +28,11 @@ public string From
         get; set;
     }
     public bool DisableCertificateCheck { get; set; }
+
+    [JsonIgnore]
+    public bool EnabledCertificateCheck
+    {
+        get => !DisableCertificateCheck;
+        set { DisableCertificateCheck = !value; }
+    }
 }
diff --git a/BTCPayServer/Controllers/UIManageController.Notifications.cs b/BTCPayServer/Controllers/UIManageController.Notifications.cs
@@ -26,7 +26,7 @@ public async Task<IActionResult> NotificationSettings([FromServices] IEnumerable
                 new List<string>();
             var notifications = notificationHandlers.SelectMany(handler => handler.Meta.Select(tuple =>
                     new SelectListItem(tuple.name, tuple.identifier,
-                        disabledNotifications.Contains(tuple.identifier, StringComparer.InvariantCultureIgnoreCase))))
+                        !disabledNotifications.Contains(tuple.identifier, StringComparer.InvariantCultureIgnoreCase))))
                 .ToList();
 
             return View(new NotificationSettingsViewModel { DisabledNotifications = notifications });
@@ -46,7 +46,7 @@ public async Task<IActionResult> NotificationSettings(NotificationSettingsViewMo
             }
             else if (command == "update")
             {
-                var disabled = vm.DisabledNotifications.Where(item => item.Selected).Select(item => item.Value)
+                var disabled = vm.DisabledNotifications.Where(item => !item.Selected).Select(item => item.Value)
                     .ToArray();
                 user.DisabledNotifications = disabled.Any()
                     ? string.Join(';', disabled) + ";"

diff --git a/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml b/BTCPayServer/Views/Shared/Crowdfund/UpdateCrowdfund.cshtml
@@ -80,7 +80,7 @@
                 <div class="d-flex align-items-center">
                     <input asp-for="Enabled" type="checkbox" class="btcpay-toggle me-3"/>
                     <div>
-                        <label asp-for="Enabled" class="form-label mb-0"></label>
+                        <label asp-for="Enabled" class="form-check-label"></label>
                         <span asp-validation-for="Enabled" class="text-danger"></span>
                         <div class="text-muted">The crowdfund will be visible to anyone.</div>
                     </div>
@@ -146,7 +146,7 @@
                 <div class="d-flex align-items-center mb-3">
                     <input asp-for="IsRecurring" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#ResetEverySettings" aria-expanded="@(Model.IsRecurring)" aria-controls="ResetEverySettings" />
                     <div>
-                        <label asp-for="IsRecurring" class="form-label mb-0">Recurring Goal</label>
+                        <label asp-for="IsRecurring" class="form-check-label">Recurring Goal</label>
                         <span asp-validation-for="IsRecurring" class="text-danger"></span>
                         <div class="text-muted">Reset goal after a specific period of time, based on your crowdfund's start date.</div>
                     </div>
@@ -178,30 +178,30 @@
     <div class="row">
         <div class="col-xl-8 col-xxl-constrain">
             <h3 class="mt-5 mb-4">Contributions</h3>
-            <div class="form-check mb-3">
-                <input asp-for="SortPerksByPopularity" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="SortPerksByPopularity" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="SortPerksByPopularity" class="form-check-label"></label>
                 <span asp-validation-for="SortPerksByPopularity" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="DisplayPerksRanking" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="DisplayPerksRanking" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="DisplayPerksRanking" class="form-check-label"></label>
                 <span asp-validation-for="DisplayPerksRanking" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="DisplayPerksValue" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="DisplayPerksValue" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="DisplayPerksValue" class="form-check-label"></label>
                 <span asp-validation-for="DisplayPerksValue" class="text-danger"></span>
             </div>
-            <div class="form-check mb-3">
-                <input asp-for="EnforceTargetAmount" type="checkbox" class="form-check-input" />
+            <div class="d-flex mb-3">
+                <input asp-for="EnforceTargetAmount" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="EnforceTargetAmount" class="form-check-label"></label>
                 <span asp-validation-for="EnforceTargetAmount" class="text-danger"></span>
             </div>
 
             <h3 class="mt-5 mb-4">Crowdfund Behavior</h3>
-            <div class="form-check">
-                <input asp-for="UseAllStoreInvoices" type="checkbox" class="form-check-input" />
+            <div class="d-flex">
+                <input asp-for="UseAllStoreInvoices" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="UseAllStoreInvoices" class="form-check-label"></label>
                 <span asp-validation-for="UseAllStoreInvoices" class="text-danger"></span>
             </div>
@@ -228,7 +228,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="SoundsEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#SoundsEnabledSettings" aria-expanded="@Model.SoundsEnabled" aria-controls="SoundsEnabledSettings"/>
-                                        <label asp-for="SoundsEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="SoundsEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="SoundsEnabled" class="text-danger"></span>
                                     </div>
                                 </div>
@@ -254,7 +254,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="AnimationsEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#AnimationsEnabledSettings" aria-expanded="@Model.AnimationsEnabled" aria-controls="AnimationsEnabledSettings"/>
-                                        <label asp-for="AnimationsEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="AnimationsEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="AnimationsEnabled" class="text-danger"></span>
                                     </div>
                                 </div>
@@ -280,7 +280,7 @@
                                 <div class="form-group mb-0">
                                     <div class="d-flex align-items-center">
                                         <input asp-for="DisqusEnabled" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#DisqusEnabledSettings" aria-expanded="@Model.DisqusEnabled" aria-controls="DisqusEnabledSettings"/>
-                                        <label asp-for="DisqusEnabled" class="form-label mb-0"></label>
+                                        <label asp-for="DisqusEnabled" class="form-check-label"></label>
                                         <span asp-validation-for="DisqusEnabled" class="text-danger"></span>
                                     </div>
                                 </div>

diff --git a/BTCPayServer/Views/Shared/EmailsBody.cshtml b/BTCPayServer/Views/Shared/EmailsBody.cshtml
@@ -68,11 +68,9 @@
             </button>
             <div id="AdvancedSettings" class="collapse">
                 <div class="pt-3 pb-1">
-                    <div class="form-group">
-                        <div class="form-check">
-                            <input asp-for="Settings.DisableCertificateCheck" class="form-check-input" />
-                            <label asp-for="Settings.DisableCertificateCheck" class="form-check-label">Disable TLS certificate security checks</label>
-                        </div>
+                    <div class="d-flex">
+                        <input asp-for="Settings.EnabledCertificateCheck" type="checkbox" class="btcpay-toggle me-3" />
+                        <label asp-for="Settings.EnabledCertificateCheck" class="form-check-label">TLS certificate security checks</label>
                     </div>
                 </div>
             </div>
@@ -83,6 +81,7 @@
 
 <script>
     document.addEventListener("DOMContentLoaded", function () {
+
         delegate('click', '#quick-fill .dropdown-menu a', function (e) {
             e.preventDefault();
             

diff --git a/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml b/BTCPayServer/Views/Shared/PointOfSale/UpdatePointOfSale.cshtml
@@ -140,20 +140,20 @@
                 <legend class="h5 mb-3 fw-semibold">Cart</legend>
                 <div class="form-group d-flex align-items-center pt-2">
                     <input asp-for="ShowSearch" type="checkbox" class="btcpay-toggle me-3" />
-                    <label asp-for="ShowSearch" class="form-label mb-0"></label>
+                    <label asp-for="ShowSearch" class="form-check-label"></label>
                     <span asp-validation-for="ShowSearch" class="text-danger"></span>
                 </div>
                 <div class="form-group d-flex align-items-center">
                     <input asp-for="ShowCategories" type="checkbox" class="btcpay-toggle me-3" />
-                    <label asp-for="ShowCategories" class="form-label mb-0"></label>
+                    <label asp-for="ShowCategories" class="form-check-label"></label>
                     <span asp-validation-for="ShowCategories" class="text-danger"></span>
                 </div>
             </fieldset>
             <fieldset id="tips" class="mt-2">
                 <legend class="h5 mb-3 fw-semibold">Tips</legend>
                 <div class="form-group d-flex align-items-center pt-2">
                     <input asp-for="EnableTips" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomTipsSettings" aria-expanded="@Model.EnableTips" aria-controls="CustomTipsSettings" />
-                    <label asp-for="EnableTips" class="form-label mb-0"></label>
+                    <label asp-for="EnableTips" class="form-check-label"></label>
                     <span asp-validation-for="EnableTips" class="text-danger"></span>
                 </div>
                 <div class="collapse @(Model.EnableTips ? "show" : "")" id="CustomTipsSettings">
@@ -174,7 +174,7 @@
                 <div class="form-group d-flex align-items-center">
                     <input asp-for="ShowDiscount" type="checkbox" class="btcpay-toggle me-3" />
                     <div>
-                        <label asp-for="ShowDiscount" class="form-label mb-0"></label>
+                        <label asp-for="ShowDiscount" class="form-check-label"></label>
                         <div class="text-muted">Not recommended for customer self-checkout.</div>
                     </div>
                     <span asp-validation-for="ShowDiscount" class="text-danger"></span>
@@ -184,7 +184,7 @@
                 <legend class="h5 mb-3 fw-semibold">Custom Payments</legend>
                 <div class="form-group mb-4 d-flex align-items-center">
                     <input asp-for="ShowCustomAmount" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomAmountSettings" aria-expanded="@Model.ShowCustomAmount" aria-controls="CustomAmountSettings"/>
-                    <label asp-for="ShowCustomAmount" class="form-label mb-0"></label>
+                    <label asp-for="ShowCustomAmount" class="form-check-label"></label>
                     <span asp-validation-for="ShowCustomAmount" class="text-danger"></span>
                 </div>
                 <div class="collapse @(Model.ShowCustomAmount ? "show" : "")" id="CustomAmountSettings">

diff --git a/BTCPayServer/Views/Shared/TemplateEditor.cshtml b/BTCPayServer/Views/Shared/TemplateEditor.cshtml
@@ -71,8 +71,8 @@
                 <input id="BuyButtonText" type="text" class="form-control mb-2" v-model="editingItem && editingItem.buyButtonText" />
             </div>
             <div class="form-group d-flex align-items-center">
-                <input type="checkbox" id="Disabled" class="btcpay-toggle me-3" v-model="editingItem && editingItem.disabled" />
-                <label for="Disabled" class="form-label mb-0">Disabled</label>
+                <input type="checkbox" id="Disabled" class="btcpay-toggle me-3" :checked="editingItem && !editingItem.disabled" v-on:change="$event => editingItem.disabled = !$event.target.checked" />
+                <label for="Disabled" class="form-check-label">Enable</label>
             </div>
             <vc:ui-extension-point location="app-template-editor-item-detail" model="Model"></vc:ui-extension-point>
             <div class="text-danger mb-3" v-for="error of errors">{{error}}</div>

diff --git a/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml b/BTCPayServer/Views/UILightningAutomatedPayoutProcessors/Configure.cshtml
@@ -18,8 +18,8 @@
             <div asp-validation-summary="All"></div>
         }
         <form method="post">
-            <div class="form-check">
-                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ProcessNewPayoutsInstantly" class="form-check-label">Process approved payouts instantly</label>
                 <span asp-validation-for="ProcessNewPayoutsInstantly" class="text-danger"></span>
             </div>

diff --git a/BTCPayServer/Views/UIManage/NotificationSettings.cshtml b/BTCPayServer/Views/UIManage/NotificationSettings.cshtml
@@ -9,36 +9,43 @@
         <form method="post" asp-action="NotificationSettings">
             @if (Model.All)
             {
-                <div>
-                    All notifications are disabled.
-                    <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable</button>
-                </div>
+                <p>All notifications are disabled.</p>
+                <button type="submit" class="btn btn-primary" name="command" value="enable-all">Enable notifications</button>
             }
             else
             {
-                <div class="form-group">
-                    <p>Do not receive notifications for</p>
-                    <div class="card">
-                        <ul class="list-group list-group-flush">
-                            @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
-                            {
-                                var item = Model.DisabledNotifications[index];
-                                <li class="list-group-item">
-                                    <input type="hidden"  asp-for="DisabledNotifications[index].Value"/> 
-                                    <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="form-check-input form-check-inline"/>
-                                    <label class="mb-0 cursor-pointer" asp-for="DisabledNotifications[index].Selected">
-                                        @item.Text
-                                    </label>
-                                </li>
-                            }
-                        </ul>
+                <p>To disable notification for a feature, kindly toggle off the specified feature.</p>
+                @for (var index = 0; index < Model.DisabledNotifications.Count; index++)
+                {
+                    var item = Model.DisabledNotifications[index];
+                    <div class="d-flex align-items-center my-3">
+                        <input type="hidden" asp-for="DisabledNotifications[index].Value" />
+                        <input type="checkbox" asp-for="DisabledNotifications[index].Selected" class="btcpay-toggle me-3" />
+                        <label class="form-check-label cursor-pointer" asp-for="DisabledNotifications[index].Selected">
+                            @item.Text
+                        </label>
                     </div>
-                </div>
-                <div class="form-group mt-4">
+                }
+                <div class="mt-4">
                     <button type="submit" class="btn btn-primary" name="command" value="update">Save</button>
-                    <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all</button>
+                    <button type="submit" class="btn btn-secondary ms-3" name="command" value="disable-all">Disable all notifications</button>
                 </div>
             }
         </form>
     </div>
 </div>
+
+<script>
+    function toggleAllCheckboxes(checkbox) {
+        var checkboxes = document.querySelectorAll('.btcpay-toggle');
+        var label = document.getElementById('toggleAllLabel');
+        var isChecked = checkbox.checked;
+
+        checkboxes.forEach(function (item) {
+            item.checked = isChecked;
+        });
+
+        label.textContent = isChecked ? 'Disable All' : 'Enable All';
+    }
+</script>
+
diff --git a/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml b/BTCPayServer/Views/UIOnChainAutomatedPayoutProcessors/Configure.cshtml
@@ -19,8 +19,8 @@
             <div asp-validation-summary="All"></div>
         }
         <form method="post">
-            <div class="form-check">
-                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="form-check-input" />
+            <div class="d-flex my-3">
+                <input asp-for="ProcessNewPayoutsInstantly" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="ProcessNewPayoutsInstantly" class="form-check-label">Process approved payouts instantly</label>
                 <span asp-validation-for="ProcessNewPayoutsInstantly" class="text-danger"></span>
             </div>

diff --git a/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml b/BTCPayServer/Views/UIPaymentRequest/EditPaymentRequest.cshtml
@@ -66,8 +66,8 @@
                     <span asp-validation-for="Currency" class="text-danger"></span>
                 </div>
             </div>
-            <div class="form-group form-check">
-                <input asp-for="AllowCustomPaymentAmounts" type="checkbox" class="form-check-input" />
+            <div class="form-group d-flex">
+                <input asp-for="AllowCustomPaymentAmounts" type="checkbox" class="btcpay-toggle me-3" />
                 <label asp-for="AllowCustomPaymentAmounts" class="form-check-label"></label>
                 <span asp-validation-for="AllowCustomPaymentAmounts" class="text-danger"></span>
             </div>

diff --git a/BTCPayServer/Views/UIServer/Branding.cshtml b/BTCPayServer/Views/UIServer/Branding.cshtml
@@ -68,7 +68,7 @@
             <div class="d-flex align-items-center mb-3">
                 <input asp-for="CustomTheme" type="checkbox" class="btcpay-toggle me-3" data-bs-toggle="collapse" data-bs-target="#CustomThemeSettings" aria-expanded="@(Model.CustomTheme)" aria-controls="CustomThemeSettings" />
                 <div>
-                    <label asp-for="CustomTheme" class="form-label"></label>
+                    <label asp-for="CustomTheme" class="form-check-label"></label>
                     <div class="text-muted">
                         <a href="https://docs.btcpayserver.org/Development/Theme/#1-custom-themes" target="_blank" rel="noreferrer noopener">Adjust the design</a>
                         of your BTCPay Server instance to your needs.

diff --git a/BTCPayServer/Views/UIServer/Emails.cshtml b/BTCPayServer/Views/UIServer/Emails.cshtml
@@ -9,7 +9,7 @@
         <div class="d-flex align-items-center">
             <input asp-for="EnableStoresToUseServerEmailSettings" type="checkbox" class="btcpay-toggle me-3"/>
             <div>
-                <label asp-for="EnableStoresToUseServerEmailSettings" class="form-label mb-0"></label>
+                <label asp-for="EnableStoresToUseServerEmailSettings" class="form-check-label"></label>
                 <div class="text-muted">
                     This can be overridden at the Store level.
                     <a href="https://docs.btcpayserver.org/Notifications/#server-emails" target="_blank" rel="noreferrer noopener">