FormHelperComponent: add field ID prefix to prevent conflicts

Fixes #20

src/components/FormHelperComponent.ts

@@ -23,6 +23,15 @@ export default class FormHelperComponent extends ApplicationComponent {
 
                 return _previousFormData;
             };
+
+            let _formPrefix: string | null;
+            res.locals.getFormPrefix = () => {
+                return _formPrefix;
+            };
+            res.locals.setFormPrefix = (formPrefix: string) => {
+                _formPrefix = formPrefix;
+                return '';
+            };
             next();
         });
 

views/auth/auth.njk

@@ -18,6 +18,7 @@
         <section class="panel">
             <h2><i data-feather="log-in"></i> Log in</h2>
 
+            {{ setFormPrefix('login-') }}
             <form action="{{ route('login') + queryStr }}" method="POST" id="login-form">
                 {{ macros.field(_locals, 'text', 'identifier', query.identifier or '', 'Your email address or username', null, 'required') }}
 
@@ -34,6 +35,7 @@
         <section class="panel">
             <h2><i data-feather="user-plus"></i> Register</h2>
 
+            {{ setFormPrefix('register-') }}
             <form action="{{ route('register') + queryStr }}" method="POST" id="register-form">
                 <input type="hidden" name="auth_method" value="magic_link">
                 {{ macros.csrf(getCsrfToken) }}

views/macros.njk

@@ -37,6 +37,7 @@
     {% set validation = validation[name] if validation[name] or null %}
     {% set previousFormData = _locals.previousFormData() %}
     {% set value = previousFormData[name] or value or validation.value or '' %}
+    {% set prefix = _locals.getFormPrefix() | default('no-') %}
 
     {% if type == 'hidden' %}
         {% if validation %}
@@ -63,16 +64,16 @@
                                 {% else %}
                                     {% set v = (value % 60) if f == 's' else (((value - value % 60) / 60 % 60) if f == 'm' else ((value - value % 3600) / 3600 if f == 'h')) %}
                                 {% endif %}
-                                <input type="number" name="{{ name }}[{{ f }}]" id="field-{{ name }}-{{ f }}"
+                                <input type="number" name="{{ name }}[{{ f }}]" id="field-{{ prefix }}{{ name }}-{{ f }}"
                                        value="{{ v }}"
                                        min="0" {{ 'max=60' if (f == 's' or f == 'm') }}
                                         {{ validation_attributes }}>
-                                <label for="field-{{ name }}-{{ f }}">{{ f }}</label>
+                                <label for="field-{{ prefix }}{{ name }}-{{ f }}">{{ f }}</label>
                             </div>
                         {% endfor %}
                     </div>
                 {% elseif type == 'select' %}
-                    <select name="{{ name }}" id="field-{{ name }}" {{ validation_attributes|safe }}>
+                    <select name="{{ name }}" id="field-{{ prefix }}{{ name }}" {{ validation_attributes|safe }}>
                         {% for option in extraData %}
                             <option value="{% if option.display === undefined or option.value !== undefined %}{{ option.value | default(option) }}{% endif %}"
                                     {{ 'selected' if value == (option.value | default(option)) }}>{{ option.display | default(option) }}</option>
@@ -80,16 +81,16 @@
                     </select>
                     <i data-feather="chevron-down"></i>
                 {% elseif type == 'textarea' %}
-                    <textarea name="{{ name }}" id="field-{{ name }}"
+                    <textarea name="{{ name }}" id="field-{{ prefix }}{{ name }}"
                     {{ validation_attributes|safe }} value="{{ value }}">{{ value }}</textarea>
                 {% else %}
-                    <input type="{{ type }}" name="{{ name }}" id="field-{{ name }}"
+                    <input type="{{ type }}" name="{{ name }}" id="field-{{ prefix }}{{ name }}"
                             {% if type != 'checkbox' %} value="{{ value }}" {% endif %}
                             {{ 'checked' if (type == 'checkbox' and value == 'on') }}
                             {{ validation_attributes|safe }}>
                 {% endif %}
 
-                <label for="field-{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
+                <label for="field-{{ prefix }}{{ name }}{{ '-' + extraData[0] if type == 'duration' }}">{{ placeholder }}</label>
             </div>
 
             {{ fieldError(_locals, name) }}