Make login page javascript-based instead of html form (sorry)

etiquette.py

@@ -178,7 +178,7 @@ def get_register():
 @decorators.required_fields(['username', 'password'])
 def post_login():
     if session_manager.get(request):
-        flask.abort(403, 'You\'re already signed in.')
+        return jsonify.make_json_response({'error': 'You\'re already signed in'}, status=403)
 
     username = request.form['username']
     password = request.form['password']
@@ -186,43 +186,46 @@ def post_login():
         user = P.get_user(username=username)
         user = P.login(user.id, password)
     except (exceptions.NoSuchUser, exceptions.WrongLogin):
-        flask.abort(422, 'Wrong login.')
+        return jsonify.make_json_response({'error': 'Wrong login'}, status=422)
     session = sessions.Session(request, user)
     session_manager.add(session)
-    response = flask.Response('redirect', status=302, headers={'Location': '/'})
+    return jsonify.make_json_response({})
-    return response
 
 @site.route('/register', methods=['POST'])
 @session_manager.give_token
 @decorators.required_fields(['username', 'password_1', 'password_2'])
 def post_register():
     if session_manager.get(request):
-        flask.abort(403, 'You\'re already signed in.')
+        return jsonify.make_json_response({'error': 'You\'re already signed in'}, status=403)
 
     username = request.form['username']
     password_1 = request.form['password_1']
     password_2 = request.form['password_2']
 
     if password_1 != password_2:
-        flask.abort(422, 'Passwords do not match.')
+        return jsonify.make_json_response({'error': 'Passwords do not match'}, status=422)
 
     try:
         user = P.register_user(username, password_1)
     except exceptions.UsernameTooShort as e:
-        flask.abort(422, 'Username shorter than minimum of %d' % P.config['min_username_length'])
+        error = 'Username shorter than minimum of %d' % P.config['min_username_length']
     except exceptions.UsernameTooLong as e:
-        flask.abort(422, 'Username longer than maximum of %d' % P.config['max_username_length'])
+        error = 'Username longer than maximum of %d' % P.config['max_username_length']
     except exceptions.InvalidUsernameChars as e:
-        flask.abort(422, 'Username contains invalid characters %s' % e.args[0])
+        error = 'Username contains invalid characters %s' % e.args[0]
     except exceptions.PasswordTooShort as e:
-        flask.abort(422, 'Password is shorter than minimum of %d' % P.config['min_password_length'])
+        error = 'Password is shorter than minimum of %d' % P.config['min_password_length']
     except exceptions.UserExists as e:
-        flask.abort(422, 'User %s already exists' % e.args[0])
+        error = 'User %s already exists' % e.args[0]
+    else:
+        error = None
+
+    if error is not None:
+        return jsonify.make_json_response({'error': error}, status=422)
 
     session = sessions.Session(request, user)
     session_manager.add(session)
-    response = flask.Response('redirect', status=302, headers={'Location': '/'})
+    return jsonify.make_json_response({})
-    return response
 
 @site.route('/logout', methods=['GET', 'POST'])
 @session_manager.give_token

static/common.css

@@ -169,16 +169,29 @@ li
     font-family: monospace;
     line-height: 1.3;
 }
-.callback_message_positive, .callback_message_negative
+#message_area
+{
+    overflow-y: auto;
+    background-color: rgba(0, 0, 0, 0.1);
+    width: 100%;
+    height: 100%;
+    max-height: 300px;
+    display: flex;
+    flex-direction: column;
+    justify-content center;
+    align-items: center;
+    flex: 2;
+}
+.message_positive, .message_negative
 {
     width: 80%;
     margin: 4px;
 }
-.callback_message_positive
+.message_positive
 {
     background-color: #afa;
 }
-.callback_message_negative
+.message_negative
 {
     background-color: #faa;
 }

static/common.js

@@ -29,9 +29,9 @@ function post(url, data, callback)
     {
         if (request.readyState == 4)
         {
-            var text = request.responseText;
             if (callback != null)
             {
+                var text = request.responseText;
                 console.log(text);
                 callback(JSON.parse(text));
             }

templates/login.html

@@ -8,33 +8,6 @@
     <script src="/static/common.js"></script>
 
 <style>
-#content_body
-{
-    justify-content: center;
-    align-content: center;
-    flex: 1;
-}
-#login_register_box
-{
-    margin: auto;
-    display: flex;
-    flex-direction: row;
-}
-form
-{
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    padding: 25px;
-    margin: 25px;
-    border: 1px black solid;
-    border-radius: 6px;
-}
-form > *
-{
-    margin-top: 5px;
-    margin-bottom: 5px;
-}
 input
 {
     width: 300px;
@@ -43,6 +16,42 @@ button
 {
     width: 80px;
 }
+
+#content_body
+{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#login_register_box
+{
+    display: flex;
+    flex-direction: row;
+}
+
+#login_form,
+#register_form
+{
+    padding: 10px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: column;
+    border: 1px solid black;
+    margin: 10px;
+}
+#login_form > *,
+#register_form > *
+{
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+
 </style>
 </head>
 
@@ -51,24 +60,86 @@ button
     {{header.make_header(session=session)}}
     <div id="content_body">
         <div id="login_register_box">
-        <form id="login_form" action="/login" method="post">
+            <div id="login_form" action="/login" method="post">
-            <span>Log in</span>
+                <span>Log in</span>
-            <input type="text" name="username" placeholder="username" autofocus>
+                <input type="text" id="login_input_username" name="username" placeholder="username" autofocus>
-            <input type="password" name="password" placeholder="password">
+                <input type="password" id="login_input_password" name="password" placeholder="password">
-            <button type="submit">Log in</button>
+                <button type="submit" id="login_submit_button" onclick="submit_login()">Log in</button>
-        </form>
+            </div>
-        <form id="register_form" action="/register" method="post">
+            <div id="register_form" action="/register" method="post">
-            <span>Register</span>
+                <span>Register</span>
-            <input type="text" name="username" placeholder="username">
+                <input type="text" id="register_input_username" name="username" placeholder="username">
-            <input type="password" name="password_1" placeholder="password">
+                <input type="password" id="register_input_password_1" name="password_1" placeholder="password">
-            <input type="password" name="password_2" placeholder="password again">
+                <input type="password" id="register_input_password_2" name="password_2" placeholder="password again">
-            <button type="submit">Register</button>
+                <button type="submit" id="register_input_button" onclick="submit_register()">Register</button>
-        </form>
+            </div>
+        </div>
+        <div id="message_area">
         </div>
     </div>
 </body>
 
 
 <script type="text/javascript">
+var login_input_username = document.getElementById("login_input_username");
+var login_input_password = document.getElementById("login_input_password");
+var login_submit_button = document.getElementById("login_submit_button");
+bind_box_to_button(login_input_username, login_submit_button);
+bind_box_to_button(login_input_password, login_submit_button);
+
+var register_input_username = document.getElementById("register_input_username");
+var register_input_password_1 = document.getElementById("register_input_password_1");
+var register_input_password_2 = document.getElementById("register_input_password_2");
+var register_input_button = document.getElementById("register_input_button");
+bind_box_to_button(register_input_username, register_input_button);
+bind_box_to_button(register_input_password_1, register_input_button);
+bind_box_to_button(register_input_password_2, register_input_button);
+
+var message_area = document.getElementById("message_area");
+
+function submit_login()
+{
+    var username = document.getElementById("login_input_username").value;
+    var password = document.getElementById("login_input_password").value;
+    if (username == "" || password == "")
+    {
+        create_message_bubble(message_area, "message_negative", "Fill out the form yo", 8000);
+        return;
+    }
+    var url = "/login";
+    data = new FormData();
+    data.append("username", username);
+    data.append("password", password);
+    return post(url, data, receive_callback);
+}
+function submit_register()
+{
+    var username = document.getElementById("register_input_username").value;
+    var password_1 = document.getElementById("register_input_password_1").value;
+    var password_2 = document.getElementById("register_input_password_2").value;
+    if (username == "" || password_1 == "" || password_2 == "")
+    {
+        create_message_bubble(message_area, "message_negative", "Fill out the form yo", 8000);
+        return;
+    }
+    var url = "/register";
+    data = new FormData();
+    data.append("username", username);
+    data.append("password_1", password_1);
+    data.append("password_2", password_2);
+    return post(url, data, receive_callback);
+}
+function receive_callback(response)
+{
+    if ("error" in response)
+    {
+        create_message_bubble(message_area, "message_negative", response["error"], 8000);
+    }
+    else
+    {
+        window.location.href = "/";
+    }
+}
+
 </script>
 </html>

templates/photo.html

@@ -192,13 +192,13 @@ function receive_callback(response)
     var tagname = response["tagname"];
     if ("error" in response)
     {
-        message_positivity = "callback_message_negative";
+        message_positivity = "message_negative";
         message_text = '"' + tagname + '" ' + response["error"];
     }
     else if ("action" in response)
     {
         var action = response["action"];
-        message_positivity = "callback_message_positive";
+        message_positivity = "message_positive";
         if (action == "add_tag")
         {
             message_text = "Added tag " + tagname;

templates/search.html

@@ -21,7 +21,7 @@ form
     display: flex;
     flex-direction: column;
     justify-content: center;
-    align-content: center;
+    align-items: center;
 }
 .search_warning
 {

templates/tags.html

@@ -131,13 +131,13 @@ function receive_callback(responses)
         var tagname = response["tagname"];
         if ("error" in response)
         {
-            message_positivity = "callback_message_negative";
+            message_positivity = "message_negative";
             message_text = '"' + tagname + '" ' + response["error"];
         }
         else if ("action" in response)
         {
             var action = response["action"];
-            message_positivity = "callback_message_positive";
+            message_positivity = "message_positive";
             if (action == "new_tag")
             {message_text = "Created tag " + tagname;}