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

Auth view: merge register forms in one with js switch

Browse Source
This commit is contained in:
Alice Gaudon 2021-01-25 17:25:07 +01:00
parent 4745ae4e17
commit 744923dc78
1 changed files with 60 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
views/auth/auth.njk
View File

@ -16,7 +16,7 @@
{% endif %} {% endif %}
<section class="panel"> <section class="panel">
<h2>Log in</h2> <h2><i data-feather="log-in"></i> Log in</h2>
<form action="{{ route('login') + queryStr }}" method="POST" id="login-form"> <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') }} {{ macros.field(_locals, 'text', 'identifier', query.identifier or '', 'Your email address or username', null, 'required') }}
@ -32,7 +32,7 @@
</section> </section>
<section class="panel"> <section class="panel">
<h2>Register with email</h2> <h2><i data-feather="user-plus"></i> Register</h2>
<form action="{{ route('register') + queryStr }}" method="POST" id="register-form"> <form action="{{ route('register') + queryStr }}" method="POST" id="register-form">
<input type="hidden" name="auth_method" value="magic_link"> <input type="hidden" name="auth_method" value="magic_link">
@ -42,38 +42,69 @@
{{ macros.field(_locals, 'text', 'name', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }} {{ macros.field(_locals, 'text', 'name', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
{% endif %} {% endif %}
{{ macros.field(_locals, 'email', 'identifier', null, 'Your email address', null, 'required') }} <div id="register-magic_link_method_fields">
{{ macros.field(_locals, 'email', 'identifier', null, 'Your email address', null, 'required') }}
<a href="javascript: void(0);">Use password instead</a>
</div>
<div id="register-password_method_fields" class="hidden">
{{ macros.field(_locals, 'password', 'password', null, 'Choose a password', null, 'required disabled') }}
{{ macros.field(_locals, 'password', 'password_confirmation', null, 'Confirm your password', null, 'required disabled') }}
<a href="javascript: void(0);">Use email address instead</a>
</div>
{{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.' | safe, null, 'required') }} {{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.' | safe, null, 'required') }}
<button type="submit" class="primary">Register</button> <button type="submit" class="primary">Register</button>
</form> </form>
</section> </section>
{% if register_with_password %}
<section class="panel">
<h2>Register with password</h2>
<form action="{{ route('register') + queryStr }}" method="POST" id="register-form">
<input type="hidden" name="auth_method" value="password">
{{ macros.csrf(getCsrfToken) }}
<section class="sub-panel">
<h3>Username</h3>
{{ macros.field(_locals, 'text', 'identifier', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
</section>
<section class="sub-panel">
<h3>Password</h3>
{{ macros.field(_locals, 'password', 'password', null, 'Choose a password', null, 'required') }}
{{ macros.field(_locals, 'password', 'password_confirmation', null, 'Confirm your password', null, 'required') }}
</section>
{{ macros.field(_locals, 'checkbox', 'terms', null, 'I accept the <a href="/terms-of-services" target="_blank">Terms Of Services</a>.' | safe, null, 'required') }}
<button type="submit" class="primary">Register</button>
</form>
</section>
{% endif %}
</div> </div>
{% endblock %} {% endblock %}
{% block scripts %}
<script>
// Register form dynamics
document.addEventListener('DOMContentLoaded', () => {
const form = document.getElementById('register-form');
const authMethodField = form.querySelector('input[name=auth_method]');
const usernameField = form.querySelector('input[name=name]');
const magicLinkFields = document.getElementById('register-magic_link_method_fields');
const passwordFields = document.getElementById('register-password_method_fields');
let switchToPassword;
magicLinkFields.querySelector('a').addEventListener('click', switchToPassword = () => {
authMethodField.value = 'password';
usernameField.name = 'identifier';
magicLinkFields.classList.add('hidden');
magicLinkFields.querySelectorAll('input').forEach(el => {
el.disabled = true;
});
passwordFields.classList.remove('hidden');
passwordFields.querySelectorAll('input').forEach(el => {
el.disabled = false;
});
});
passwordFields.querySelector('a').addEventListener('click', () => {
authMethodField.value = 'magic_link';
usernameField.name = 'name';
magicLinkFields.classList.remove('hidden');
magicLinkFields.querySelectorAll('input').forEach(el => {
el.disabled = false;
});
passwordFields.classList.add('hidden');
passwordFields.querySelectorAll('input').forEach(el => {
el.disabled = true;
});
});
if (`{{ _locals.previousFormData()['auth_method'] | default('') }}` === 'password') {
switchToPassword();
}
});
</script>
{% endblock %}