rainbox.email/views/register.njk

{% extends 'layouts/base.njk' %}

{% set title = 'Example App - Hello world!' %}

{% block scripts %}
    <script src="/js/register.js"></script>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="panel center">
            <h1>Register</h1>

            <form action="{{ route('register') }}" method="POST">
                <section class="sub-panel">
                    <h2>Username</h2>
                    {{ macros.field(_locals, 'text', 'username', null, 'Choose your username', 'This cannot be changed later.', 'pattern="[0-9a-z_-]+" required') }}
                </section>

                <section class="sub-panel">
                    <h2>Email</h2>
                    {{ macros.field(_locals, 'checkbox', 'create_email', null, 'Create an email address') }}

                    <div class="inline-fields">
                        <span id="email_username">@</span>
                        {{ macros.field(_locals, 'select', 'domain', null, 'Choose your domain', null, 'disabled', ['toot.party']) }}
                    </div>
                    {{ macros.fieldError(_locals, 'email') }}
                    <div class="hint"><i data-feather="info"></i> You won't be able to change this again.</div>
                </section>

                <section class="sub-panel">
                    <h2>Recovery email</h2>
                    {{ macros.field(_locals, 'email', 'recovery_email', null, 'Your email address', 'Optional') }}
                </section>

                <section class="sub-panel">
                    <h2>Password</h2>
                    {{ 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 terms of services', null, 'required') }}

                <button type="submit"><i data-feather="user-plus"></i>Register</button>

                {{ macros.csrf(getCSRFToken) }}
            </form>
        </div>
    </div>
{% endblock %}