improve form hidden fields

fixes #130

Author: lovasoa

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG.md
 
+## unreleased
+
+ - Add special handling of hidden inputs in [forms](https://sql.ophir.dev/documentation.sql?component=form#component). Hidden inputs are now completely invisible to the end user, facilitating the implementation of multi-step forms, csrf protaction, and other complex forms.
+ - 18 new icons available (see https://github.com/tabler/tabler-icons/releases/tag/v2.40.0)
+
 ## 0.15.2 (2023-11-12)
 
  - Several improvements were made to the **map** component

examples/official-site/sqlpage/migrations/01_documentation.sql

@@ -336,6 +336,19 @@ In this example, depending on what the user clicks, the target `index.sql` page
     '{"name": "fruit", "type": "radio", "value": 2, "description": "Oranges are a good source of vitamin C", "label": "Orange", "checked": true}, '||
     '{"name": "fruit", "type": "radio", "value": 3, "description": "Bananas are a good source of potassium", "label": "Banana"}'||
     ']')),
+    ('form', 'When you want to include some information in the form data, but not display it to the user, you can use a hidden field.
+
+This can be used to track simple data such as the current user''s id,
+or to implement more complex flows, such as a multi-step form,
+where the user is redirected to a different page after each step.
+
+This can also be used to implement [CSRF protection](https://en.wikipedia.org/wiki/Cross-site_request_forgery#Synchronizer_token_pattern),
+if your website has authenticated users that can perform sensitive actions through forms.
+', json('[{"component":"form", "validate": "Delete", "validate_color": "red"}, 
+    {"type": "hidden", "name": "user_id", "value": "place id here"},
+    {"type": "hidden", "name": "csrf_token", "value": "place token here"},
+    {"name": "confirm", "label": "Please type \"sensitive resource\" here to confirm the deletion", "required": true}
+    ]')),
     ('form', 'This example illustrates the use of custom validation buttons and half-width fields.',
     json('[{"component":"form", "title": "User", "validate": "Create new user", "validate_color": "green", "reset": "Clear"},
     {"name": "first_name", "label": "First name", "placeholder": "John", "width": 4},

sqlpage/templates/form.handlebars

@@ -30,6 +30,9 @@
                         </div>
                     </label>
                 </div>
+            {{else}}
+            {{~#if (eq type "hidden")}}
+                <input type="hidden" name="{{name}}" value="{{value}}">
             {{else}}
                 <label class="form-label mb-2 col-md-{{default width 12}}">
                     {{default label name}}
@@ -85,12 +88,13 @@
                             {{~#if autofocus}}autofocus {{/if~}}  
                         >
                     {{/if}}
-                {{/if}}
-                {{#if description}}
-                    <small class="form-hint mt-0">{{description}}</small>
-                {{/if}}
-            </label>
-        {{/if}}
+                    {{/if}}
+                    {{#if description}}
+                        <small class="form-hint mt-0">{{description}}</small>
+                    {{/if}}
+                </label>
+            {{/if}}
+            {{/if}}
         {{/each_row}}
         </div>
         {{#if (ne validate '')}}