swaf/assets/views/auth/auth.njk

{% 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 %}