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

<p>
Please fill in the following fields to register a new account. You should choose a strong passphrase, as it is used to encrypt your Journalmarks. Unfortunatelly, there's no possibility yet to change your passphrase later on. However, you won't have to enter it often, sessions are remembered for some time.
</p>

<div id='registration-form' class="pure-form pure-form-aligned">
    <p id="err-passwords-dont-match" class="errmsg">
    Passphrases 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">Passphrase</label>
            <input id="password" type="password" placeholder="Passphrase">
        </div>

        <div class="pure-control-group">
            <label for="password2">Passphrase (again)</label>
            <input id="password2" type="password" placeholder="Passphrase (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 %}