added front-end for registration

journalmarks/journalmarks.py

@@ -51,14 +51,19 @@ def login_required(f):
     return decorated_function
 
 
-@journalmarks.route('/register', methods=['POST'])
+@journalmarks.route('/register', methods=['GET'])
 def register():
-    if len(request.form) != 3:
+    return render_template('register.html')
+
+@journalmarks.route('/register', methods=['POST'])
+def process_registration():
+    print(request.json)
+    if len(request.json) != 3:
         return ('wrong number of fields', 400, None)
     try:
-        token = request.form['token']
-        username = request.form['username']
-        password_hash = request.form['password_hash']
+        token = request.json['token']
+        username = request.json['username']
+        password_hash = request.json['password_hash']
     except ValueError:
         return ('invalid field names', 400, None)
     if not re.match('^[a-zA-Z0-9]*$', token):

journalmarks/templates/register.html

@@ -0,0 +1,95 @@
+{% 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 %}