From 642aad28ac9bd74c7d0191d75d3d5c3ea20e8a49 Mon Sep 17 00:00:00 2001
From: Umar Bolatov <bolatovumar@gmail.com>
Date: Wed, 4 May 2022 01:34:40 -0700
Subject: [PATCH] Update validation of crowdfund app settings (#3708)

---
 .../Controllers/UIAppsController.Crowdfund.cs | 18 +++++-----
 .../Views/UIApps/UpdateCrowdfund.cshtml       | 34 +++++++++++++++++--
 BTCPayServer/wwwroot/main/site.js             | 13 ++++---
 3 files changed, 51 insertions(+), 14 deletions(-)

diff --git a/BTCPayServer/Controllers/UIAppsController.Crowdfund.cs b/BTCPayServer/Controllers/UIAppsController.Crowdfund.cs
index 0688bc849..19b7e6383 100644
--- a/BTCPayServer/Controllers/UIAppsController.Crowdfund.cs
+++ b/BTCPayServer/Controllers/UIAppsController.Crowdfund.cs
@@ -99,27 +99,29 @@ namespace BTCPayServer.Controllers
                 ModelState.AddModelError(nameof(vm.ResetEveryAmount), "You must reset the goal at a minimum of 1 ");
             }
 
-            if (vm.DisplayPerksRanking && !vm.SortPerksByPopularity)
+            if (vm.DisplayPerksRanking)
             {
-                ModelState.AddModelError(nameof(vm.DisplayPerksRanking), "You must sort by popularity in order to display ranking.");
+                vm.SortPerksByPopularity = true;
             }
 
-            var parsedSounds = vm.Sounds.Split(
+            var parsedSounds = vm.Sounds?.Split(
                 new[] { "\r\n", "\r", "\n" },
                 StringSplitOptions.None
             ).Select(s => s.Trim()).ToArray();
-            if (vm.SoundsEnabled && !parsedSounds.Any())
+            if (vm.SoundsEnabled && (parsedSounds == null || !parsedSounds.Any()))
             {
-                ModelState.AddModelError(nameof(vm.Sounds), "You must have at least one sound if you enable sounds");
+                vm.SoundsEnabled = false;
+                parsedSounds = new CrowdfundSettings().Sounds;
             }
 
-            var parsedAnimationColors = vm.AnimationColors.Split(
+            var parsedAnimationColors = vm.AnimationColors?.Split(
                 new[] { "\r\n", "\r", "\n" },
                 StringSplitOptions.None
             ).Select(s => s.Trim()).ToArray();
-            if (vm.AnimationsEnabled && !parsedAnimationColors.Any())
+            if (vm.AnimationsEnabled && (parsedAnimationColors == null || !parsedAnimationColors.Any()))
             {
-                ModelState.AddModelError(nameof(vm.AnimationColors), "You must have at least one animation color if you enable animations");
+                vm.AnimationsEnabled = false;
+                parsedAnimationColors = new CrowdfundSettings().AnimationColors;
             }
 
             if (!ModelState.IsValid)
diff --git a/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml b/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
index 6cb1d4a4c..0a0c84001 100644
--- a/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
+++ b/BTCPayServer/Views/UIApps/UpdateCrowdfund.cshtml
@@ -121,10 +121,10 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group mb-0">
+                <div class="form-group mb-0" id="ResetRow" hidden="@(Model.StartDate == null)">
                     <label asp-for="ResetEvery" class="form-label"></label>
                     <div class="input-group">
-                        <input type="number" inputmode="numeric" asp-for="ResetEveryAmount" placeholder="Amount" class="form-control">
+                        <input type="number" inputmode="numeric" asp-for="ResetEveryAmount" placeholder="Amount" class="form-control" min="0">
                         <select class="form-select" asp-for="ResetEvery">
                             @foreach (var opt in Model.ResetEveryValues)
                             {
@@ -132,6 +132,7 @@
                             }
                         </select>
                     </div>
+                    <span asp-validation-for="ResetEveryAmount" class="text-danger"></span>
                 </div>
             </div>
         </div>
@@ -287,3 +288,32 @@
 </div>
 
 <partial name="_Confirm" model="@(new ConfirmModel("Delete app", "This app will be removed from this store.", "Delete"))" />
+
+<script>
+    const resetRow = document.getElementById('ResetRow');
+    const startDateInputId = "StartDate";
+
+    document.addEventListener("DOMContentLoaded", () => {
+        setTimeout(() => {
+            flatpickrInstances.forEach((instance) => {
+                if (instance.element.id === startDateInputId) {
+                    instance.config.onChange.push((selectedDates) => {
+                        if (selectedDates.length) {
+                            // Show the reset row if start date is selected.
+                            // Since start date must be selected in order for the reset options to be set
+                            // we don't need to show it by default and can show it only when start date is selected
+                            resetRow.removeAttribute('hidden');
+                        }
+                    });
+                }
+            });
+        }, 0);
+
+        document.addEventListener('input-group-clear-input-value-cleared', ({ detail }) => {
+            const input = detail[0];
+            if (input.id === startDateInputId) {
+                resetRow.setAttribute('hidden', 'hidden');
+            }
+        });
+    });
+</script>
diff --git a/BTCPayServer/wwwroot/main/site.js b/BTCPayServer/wwwroot/main/site.js
index 6abc18d47..bd47aa77c 100644
--- a/BTCPayServer/wwwroot/main/site.js
+++ b/BTCPayServer/wwwroot/main/site.js
@@ -1,3 +1,5 @@
+const flatpickrInstances = [];
+
 document.addEventListener("DOMContentLoaded", function () {
     // sticky header
     const stickyHeader = document.querySelector('.sticky-header-setup + .sticky-header');
@@ -36,12 +38,12 @@ document.addEventListener("DOMContentLoaded", function () {
         // support for initializing with special options per instance
         if (fdtp) {
             var parsed = JSON.parse(fdtp);
-            element.flatpickr(parsed);
+            flatpickrInstances.push(element.flatpickr(parsed));
         } else {
             var min = element.attr("min");
             var max = element.attr("max");
             var defaultDate = element.attr("value");
-            element.flatpickr({
+            flatpickrInstances.push(element.flatpickr({
                 enableTime: true,
                 enableSeconds: true,
                 dateFormat: 'Z',
@@ -53,7 +55,7 @@ document.addEventListener("DOMContentLoaded", function () {
                 time_24hr: true,
                 defaultHour: 0,
                 static: true
-            });
+            }));
         }
     });
     
@@ -72,7 +74,10 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     $(".input-group-clear").on("click", function () {
-        $(this).parents(".input-group").find("input").val(null);
+        const input = $(this).parents(".input-group").find("input");
+        const event = new CustomEvent('input-group-clear-input-value-cleared', { detail: input });
+        input.val(null);
+        document.dispatchEvent(event);
         handleInputGroupClearButtonDisplay(this);
     });