ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

FormHelperComponent: add field ID prefix to prevent conflicts

Browse Source 
Fixes #20
This commit is contained in:
Alice Gaudon 2021-01-25 17:26:14 +01:00
parent 744923dc78
commit 5caa0be862
3 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/FormHelperComponent.ts
View File

@ -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();
});

2
views/auth/auth.njk
View File

@ -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) }}

13
views/macros.njk
View File

@ -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) }}