add form buttons icons, closes #821 (#1210)

Author: setop

CONTRIBUTING.md

@@ -111,6 +111,7 @@ In a separate terminal, run the tests:
 ```bash
 cd tests/end-to-end
 npm install
+npx playwright install chromium
 npm run test
 ```
 

examples/official-site/sqlpage/migrations/73_form_buttons_icons.sql

@@ -0,0 +1,7 @@
+INSERT INTO parameter(component, name, description, type, top_level, optional) SELECT 'form', * FROM (VALUES
+    -- top level
+    ('validate_icon', 'Name of an icon to be displayed on the left side of the submit button.', 'ICON', TRUE, TRUE),
+    ('reset_icon', 'Name of an icon to be displayed on the left side of the reset button.', 'ICON', TRUE, TRUE),
+    ('reset_color', 'The color of the button at the bottom of the form that resets the form to its original state. Omit this property to use the default color.', 'COLOR', TRUE, TRUE)
+    )
+

sqlpage/templates/form.handlebars

@@ -163,23 +163,32 @@
         {{/each_row}}
         </div>
         {{#if (and (ne validate '') (not auto_submit))}}
-            <input class="btn
+            <button class="btn
             btn-{{default validate_color "primary"}}
             {{#if validate_shape}} btn-{{validate_shape}} {{/if}}
             {{#if validate_outline}} btn-outline-{{validate_outline}} {{/if}}
             {{#if validate_size}} btn-{{validate_size}} {{/if}}"
             {{flush_delayed}}
-            type="submit"
-            {{#if validate}}value="{{validate}}"{{/if}}>
+            type="submit">
+            {{~#if validate_icon~}}
+                <span {{~#if (not narrow)}} class="me-1"{{/if}}>{{~icon_img validate_icon~}}</span>
+            {{~/if~}}
+            <span>{{#if validate}}{{validate}}{{else}}Submit Query{{/if}}</span>
+            </button>
+
         {{/if}}
         {{#if reset}}
-            <input class="btn 
+            <button class="btn
             {{#if reset_color}} btn-{{reset_color}} {{/if}}
             {{#if reset_shape}} btn-{{reset_shape}} {{/if}}
             {{#if reset_outline}} btn-outline-{{reset_outline}} {{/if}}
             {{#if reset_size}} btn-{{reset_size}} {{/if}}"
-            type="reset" 
-            value="{{reset}}">
+            type="reset">
+            {{~#if reset_icon~}}
+                <span {{~#if (not narrow)}} class="me-1"{{/if}}>{{~icon_img reset_icon~}}</span>
+            {{~/if~}}
+            <span>{{reset}}</span>
+            </button>
         {{/if}}
     </fieldset>
 </form>