swaf/views/auth/auth.njk

113 lines
4.9 KiB
Plaintext

{% extends 'layouts/base.njk' %}
{% import 'macros.njk' as macros %}
{% set title = 'Authentication / Registration' %}
{% set decription = 'Join ' + app.name + ' and share your files!' %}
{% set h1 = 'Authentication and registration' %}
{% block body %}
<div class="container">
{% set queryStr = '' %}
{% set previousUrl = getPreviousUrl() %}
{% if query.redirect_uri | length %}
{% set queryStr = '?' + querystring.stringify({redirect_uri: query.redirect_uri}) %}
{% elif previousUrl | length %}
{% set queryStr = '?' + querystring.stringify({redirect_uri: previousUrl}) %}
{% endif %}
<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') }}
{{ macros.field(_locals, 'password', 'password', null, 'Your password', 'Do not fill to log in via magic link.') }}
{{ macros.field(_locals, 'checkbox', 'persist_session', null, 'Stay logged in on this computer.') }}
<button type="submit">Authenticate</button>
{{ macros.csrf(getCsrfToken) }}
</form>
</section>
<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) }}
{% if has_username %}
{{ macros.field(_locals, 'text', 'name', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
{% endif %}
<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') }}
<button type="submit" class="primary">Register</button>
</form>
</section>
</div>
{% 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 %}