sakura/resources/views/yuuno/auth/register.twig

{% extends 'master.twig' %}

{% set title = 'Register' %}

{% block js %}
    <script>
        function yuunoAttemptRegistration(form) {
            var client = new Sakura.AJAX,
                regBtn = Sakura.DOM.ID('reg-btn');

            regBtn.disabled = true;
            regBtn.innerHTML = '<i class="fa fa-spinner fa-spin"></i>';
            Sakura.DOM.AddClass(regBtn, ['input__button--disabled']);

            client.SetUrl("{{ route('auth.register') }}");
            client.SetFormData(new FormData(form));
            client.AddCallback(200, function () {
                regBtn.disabled = false;
                regBtn.innerHTML = '<i class="fa fa-magic"></i> Register';
                Sakura.DOM.RemoveClass(regBtn, ['input__button--disabled']);

                var result = client.JSON();

                if (result.error || result.text) {
                    var dialogue = new Sakura.Dialogue;
                    dialogue.Title = "Registration";
                    dialogue.Text = result.error || result.text;
                    dialogue.AddCallback(Sakura.DialogueButton.Ok, function () {
                        this.Close();

                        if (result.go) {
                            window.location.assign(result.go);
                        }
                    });
                    dialogue.Display();
                } else if (result.go) {
                    window.location.assign(result.go);
                }
            });
            client.Start(Sakura.HTTPMethod.POST);
        }
    </script>
{% endblock %}

{% block content %}
    <div class="auth content content--auth">
        <div class="content__header">
            Register
        </div>
        {% if config('user.disable_registration') %}
            <div class="fa fa-remove fa-5x auth__blocked"></div>
            <h1>You can't create an account right now!</h1>
            <p>Please try again later, sorry for the inconvenience.</p>
        {% else %}
            <form id="registerForm" method="post" action="javascript:void(0)" onsubmit="yuunoAttemptRegistration(this)">
                <input type="hidden" name="session" value="{{ session_id() }}">
                <label>
                    <div class="auth__label">Username</div>
                    <input class="input__text" type="text" name="username" required autofocus placeholder="Any character">
                </label>
                <label>
                    <div class="auth__label">E-mail</div>
                    <input class="input__text" type="text" name="email" required placeholder="Used for e.g. password retrieval">
                </label>
                <label>
                    <div class="auth__label">Password</div>
                    <input class="input__text" type="password" name="password" required placeholder="Using special characters is recommended">
                </label>
                <button class="input__button auth__button" id="reg-btn">
                    <i class="fa fa-magic"></i> Register
                </button>
                <div class="auth__subtext">
                    By creating an account you agree to the <a href="{{ route('info.terms') }}">Terms of Service</a>.<br>
                    You are only allowed to make a single account.<br>
                    Didn't get your activation e-mail? <a href="{{ route('auth.activate') }}">Click here to resend it</a>!
                </div>
            </form>
        {% endif %}
    </div>
{% endblock %}