From 88d8d1b8486a0daf3b79901fc4bd5d842bbfc3be Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 10 Feb 2025 15:08:03 +0100
Subject: [PATCH 1/2] Forms: Properly support checkbox type

Fixes #6592.
---
 .../Views/Shared/Forms/InputElement.cshtml    | 53 +++++++++++++------
 BTCPayServer/Views/UIForms/Modify.cshtml      |  9 +++-
 BTCPayServer/wwwroot/js/form-editor.js        |  2 +-
 3 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/BTCPayServer/Views/Shared/Forms/InputElement.cshtml b/BTCPayServer/Views/Shared/Forms/InputElement.cshtml
index 5b7b1e795..c3fe0dc4d 100644
--- a/BTCPayServer/Views/Shared/Forms/InputElement.cshtml
+++ b/BTCPayServer/Views/Shared/Forms/InputElement.cshtml
@@ -1,6 +1,7 @@
 @model BTCPayServer.Abstractions.Form.Field
 @{
 	var isInvalid = ViewContext.ModelState[Model.Name]?.ValidationState is Microsoft.AspNetCore.Mvc.ModelBinding.ModelValidationState.Invalid;
+    var isCheckbox = Model.Type == "checkbox";
 	var errors = isInvalid ? ViewContext.ModelState[Model.Name].Errors : null;
 }
 @if (Model.Type == "hidden")
@@ -8,21 +9,43 @@
     <input id="@Model.Name" type="@Model.Type" name="@Model.Name" value="@Model.Value" />
     return;
 }
-<div class="form-group">
-    <label class="form-label" for="@Model.Name"@(Model.Required ? " data-required" : "")>
-        @Safe.Raw(Model.Label)
-    </label>
-    <input id="@Model.Name" type="@Model.Type" class="form-control @(errors is null ? "" : "is-invalid")"
-           name="@Model.Name" value="@Model.Value" data-val="true" readonly="@Model.Constant"
-           @if (!string.IsNullOrEmpty(Model.HelpText))
-           {
-               @Safe.Raw($" aria-describedby=\"HelpText-{Model.Name}\"")
-           }
-           @if (Model.Required)
-           {
-               @Safe.Raw($" data-val-required=\"{Model.Label} is required.\" required")
-           }
-    />
+<div class="form-@(isCheckbox ? "check" : "group")">
+    @if (isCheckbox)
+    {
+        <input id="@Model.Name" type="@Model.Type" class="form-check-input @(errors is null ? "" : "is-invalid")"
+               name="@Model.Name" value="true" data-val="true" readonly="@Model.Constant"
+               @if (Model.Value == "true")
+               {
+                   @Safe.Raw(" checked")
+               }
+               @if (!string.IsNullOrEmpty(Model.HelpText))
+               {
+                   @Safe.Raw($" aria-describedby=\"HelpText-{Model.Name}\"")
+               }
+               @if (Model.Required)
+               {
+                   @Safe.Raw($" data-val-required=\"{Model.Label} is required.\" required")
+               } />
+        <label class="form-check-label" for="@Model.Name"@(Model.Required ? " data-required" : "")>
+            @Safe.Raw(Model.Label)
+        </label>
+    }
+    else
+    {
+        <label class="form-label" for="@Model.Name"@(Model.Required ? " data-required" : "")>
+            @Safe.Raw(Model.Label)
+        </label>
+        <input id="@Model.Name" type="@Model.Type" class="form-control @(errors is null ? "" : "is-invalid")"
+               name="@Model.Name" value="@Model.Value" data-val="true" readonly="@Model.Constant"
+               @if (!string.IsNullOrEmpty(Model.HelpText))
+               {
+                   @Safe.Raw($" aria-describedby=\"HelpText-{Model.Name}\"")
+               }
+               @if (Model.Required)
+               {
+                   @Safe.Raw($" data-val-required=\"{Model.Label} is required.\" required")
+               } />
+    }
     <span class="text-danger" data-valmsg-for="@Model.Name" data-valmsg-replace="true">@(isInvalid && errors.Any() ? errors.First().ErrorMessage : string.Empty)</span>
     @if (!string.IsNullOrEmpty(Model.HelpText))
     {
diff --git a/BTCPayServer/Views/UIForms/Modify.cshtml b/BTCPayServer/Views/UIForms/Modify.cshtml
index c87e8ab6e..daef1b321 100644
--- a/BTCPayServer/Views/UIForms/Modify.cshtml
+++ b/BTCPayServer/Views/UIForms/Modify.cshtml
@@ -149,7 +149,12 @@
         </div>
     </template>
     <template id="field-type-input">
-        <div class="form-group mb-0">
+        <div class="form-check mb-0" v-if="type === 'checkbox'">
+            <input class="form-check-input" :id="name" :name="name" :type="type" v-model="value" />
+            <label class="form-check-label" :for="name" :data-required="required" v-sanitize="label"></label>
+            <div v-if="helpText" :id="`HelpText-{name}`" class="form-text" v-sanitize="helpText"></div>
+        </div>
+        <div class="form-groupcheck mb-0" v-else>
             <label class="form-label" :for="name" :data-required="required" v-sanitize="label"></label>
             <input class="form-control" :id="name" :name="name" :type="type" v-model="value" />
             <div v-if="helpText" :id="`HelpText-{name}`" class="form-text" v-sanitize="helpText"></div>
@@ -208,7 +213,7 @@
             </h2>
         </nav>
         <div>
-			<button id="page-primary" type="submit" class="btn btn-primary order-sm-1">Save</button>
+            <button id="page-primary" type="submit" class="btn btn-primary order-sm-1">Save</button>
             @if (!isNew)
             {
                 <a class="btn btn-secondary" asp-action="ViewPublicForm" asp-route-formId="@formId" id="ViewForm" text-translate="true">View</a>
diff --git a/BTCPayServer/wwwroot/js/form-editor.js b/BTCPayServer/wwwroot/js/form-editor.js
index 1a3873435..18dbadade 100644
--- a/BTCPayServer/wwwroot/js/form-editor.js
+++ b/BTCPayServer/wwwroot/js/form-editor.js
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', () => {
     let config = parseConfig($config.value) || {}
     
     const specialFieldTypeOptions = ['fieldset', 'textarea', 'select', 'mirror']
-    const inputFieldTypeOptions = ['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'hidden']
+    const inputFieldTypeOptions = ['text', 'number', 'password', 'email', 'url', 'tel', 'date', 'datetime-local', 'color', 'checkbox', 'hidden']
     const fieldTypeOptions = inputFieldTypeOptions.concat(specialFieldTypeOptions)
 
     const getFieldComponent = type => `field-type-${specialFieldTypeOptions.includes(type) ? type : 'input'}`

From 1d44cad84788167e3cc907d544ecf4259398be1e Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Mon, 10 Feb 2025 15:08:58 +0100
Subject: [PATCH 2/2] Forms: Remove unsupported input types

---
 BTCPayServer/Forms/HtmlInputFormProvider.cs | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/BTCPayServer/Forms/HtmlInputFormProvider.cs b/BTCPayServer/Forms/HtmlInputFormProvider.cs
index 9709e1791..f8dad8ed3 100644
--- a/BTCPayServer/Forms/HtmlInputFormProvider.cs
+++ b/BTCPayServer/Forms/HtmlInputFormProvider.cs
@@ -11,13 +11,9 @@ public class HtmlInputFormProvider : FormComponentProviderBase
     {
         foreach (var t in new[] {
             "text",
-            "radio",
             "checkbox",
             "password",
-            "file",
             "hidden",
-            "button",
-            "submit",
             "color",
             "date",
             "datetime-local",
@@ -25,13 +21,9 @@ public class HtmlInputFormProvider : FormComponentProviderBase
             "week",
             "time",
             "email",
-            "image",
             "number",
-            "range",
-            "search",
             "url",
-            "tel",
-            "reset"})
+            "tel"})
             typeToComponentProvider.Add(t, this);
     }
     public override string View => "Forms/InputElement";