Spry/tools/spry/templates/register.html

<!DOCTYPE html>
<html lang="en">
<head>
    <pstm-uri>/register</pstm-uri>
    <pstm-template>main</pstm-template>
    <script>
        // Surface error notifications inline instead of via alert().
        if (window.statum) {
            statum.onNotifyHandler = function (kind, message) {
                var area = document.getElementById('register-error');
                if (kind === 'error' && area) {
                    area.hidden = false;
                    area.textContent = message;
                    return;
                }
                window.alert(message);
            };
        }
    </script>
</head>
<body>
    <section class="stack" style="max-width: 26rem;">
        <h2>Create an account</h2>
        <p id="register-error" class="alert alert-danger" hidden></p>
        <form stm-action="page.register" class="stack">
            <label class="field">
                <span class="label">Username</span>
                <input class="input" name="username" required autocomplete="username">
            </label>
            <label class="field">
                <span class="label">Email</span>
                <input class="input" type="email" name="email" required autocomplete="email">
            </label>
            <label class="field">
                <span class="label">First name</span>
                <input class="input" name="forename" required autocomplete="given-name">
            </label>
            <label class="field">
                <span class="label">Last name</span>
                <input class="input" name="surname" required autocomplete="family-name">
            </label>
            <label class="field">
                <span class="label">Date of birth</span>
                <input class="input" type="date" name="date_of_birth" required autocomplete="bday">
            </label>
            <label class="field">
                <span class="label">Password</span>
                <input class="input" type="password" name="password" required autocomplete="new-password">
            </label>
            <label class="field">
                <span class="label">Confirm password</span>
                <input class="input" type="password" name="confirm_password" required autocomplete="new-password">
            </label>
            <div><button class="btn btn-primary" type="submit">Create account</button></div>
        </form>
        <p>Already registered? <a href="/login">Log in</a>.</p>
    </section>
</body>
</html>