113 lines
4.9 KiB
Plaintext
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 %}
|