journalmarks/journalmarks/templates/login.html

{% extends "base.html" %}
{% block script %}
<script>
function run() {
    document.getElementById('login').addEventListener('click', function() {
        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;
        sha256(password).then(function(pwhash) {
            var credentials = {username: username, password_hash: pwhash}
            post_object('{{ url_for('journalmarks.login') }}', credentials)
            .then(journalmarks_initkey(username, password)).then(function() {
                window.location.href = '{{ next }}';
            }).catch(function(error) {
                document.getElementById('login-failed').style.display = 'block';
                console.log('login error', error);
            });
        });
    });

    document.getElementById('password').addEventListener('keyup', function(e) {
        if(e.keyCode == 13)
            document.getElementById('login').click();
    });
}

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>
.login-form, .login-form p {
    text-align: center;
}
#username, #password {
    margin-left: auto;
    margin-right: auto;
}
</style>
{% endblock %}
{% block body %}
<h1>Welcome!</h1>

<div class="login-form pure-form pure-form-aligned">
    <p id="login-failed" class="errmsg">
    <i>Login failed.</i>
    </p>

    <fieldset class="pure-group">
        <input class="pure-input-1-2" id="username" type="text" placeholder="Username">
        <input class="pure-input-1-2" id="password" type="password" placeholder="Passphrase">
    </fieldset>

    <div clas="pure-controls">
        <button id="login" class="pure-input-1-2 pure-button pure-button-primary">Login</button>
    </div>

    <p>
    <a href="{{ url_for('journalmarks.register') }}">Create new account</a>
    </p>
</div>
{% endblock %}