journalmarks/journalmarks/templates/register.html

{% extends "base.html" %}
{% block script %}
<script>
function run() {
    document.getElementById('register').addEventListener('click', function() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        var password2 = document.getElementById('password2').value;
        var token = document.getElementById('token').value;
        document.querySelectorAll('.errmsg').forEach(function(elem) {
            elem.style.display = 'none';
        });
        if((username == '') || (password == '') || (token == '')) {
            document.getElementById('err-fill-all-fields').style.display = 'block';
            return;
        }
        if(password != password2) {
            document.getElementById('err-passwords-dont-match').style.display = 'block';
            return;
        }
        sha256(password).then(function(pwhash) {
            var reg = {username: username, password_hash: pwhash, token: token}
            console.log(reg);
            post_object('{{ url_for('journalmarks.process_registration') }}', reg)
            .then(function() {
                document.getElementById('registration-form').style.display = 'none';
                document.getElementById('registration-ok').style.display = 'block';
            }).catch(function(error) {
                document.getElementById('err-registration-failed').style.display = 'block';
                document.getElementById('err-registration-failed-detail').innerText = error.message;
            });
        });
    });
}

if (document.readyState!='loading') run();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', run);
else document.attachEvent('onreadystatechange', function(){
    if (document.readyState=='complete') run();
});
</script>
<style>
#registration-ok {
    display: none;
}
</style>
{% endblock %}
{% block body %}
<h1>Registration</h1>

<div id='registration-form' class="pure-form pure-form-aligned">
    <p id="err-passwords-dont-match" class="errmsg">
    Passwords do not match.
    </p>

    <p id="err-fill-all-fields" class="errmsg">
    Please fill all fields.
    </p>

    <p id="err-registration-failed" class="errmsg">
    Registration failed:
    <span id="err-registration-failed-detail"></span>
    </p>

    <fieldset>
        <div class="pure-control-group">
            <label for="name">Username</label>
            <input id="username" type="text" placeholder="Username">
        </div>

        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>

        <div class="pure-control-group">
            <label for="password2">Password (again)</label>
            <input id="password2" type="password" placeholder="Password (again)">
        </div>

        <div class="pure-control-group">
            <label for="token">Access Token</label>
            <input id="token" type="text" placeholder="Access Token">
        </div>

        <div class="pure-controls">
            <button id="register" class="pure-button pure-button-primary">Register</button>
        </div>
    </fieldset>
</div>

<div id="registration-ok">
Registration successful. Click <a href="{{ url_for('journalmarks.login') }}">here</a> to log in.
</div>
{% endblock %}