:3

templates/register.html

@@ -0,0 +1,71 @@
+{% extends "base.html" %}
+
+{% block title %}Register{% endblock %}
+{% block headers %}
+
+{% endblock %}
+
+
+{% block content %}
+    <h1>Login</h1>
+    <form action="/api/user/register" method="POST">
+        <div>
+            <label for="email">Email:</label>
+            <input type="text" id="email" name="email">
+            <span id="email_error" style="color:red; margin-left:5px;"></span>
+        </div>
+        <div>
+            <label for="username">Username:</label>
+            <input type="text" id="username" name="username">
+            <span id="username_error" style="color:red; margin-left:5px;"></span>
+        </div>
+        <div>
+            <label for="username">Password:</label>
+            <input type="password" id="password" name="password">
+            <span id="password_error" style="color:red; margin-left:5px;"></span>
+        </div>
+        <div>
+            <label for="password">Password:</label>
+            <input type="password" id="password2">
+            <span id="confirm_error" style="color:red; margin-left:5px;"></span>
+        </div>
+        <button type="submit" id="submit_btn">Register</button>
+    </form>
+
+    
+    <script>
+        const password = document.getElementById('password');
+        const password2 = document.getElementById('password2');
+        const submit_btn = document.getElementById('submit_btn');
+        const username = document.getElementById('username');
+        const email = document.getElementById('email');
+
+        // const password_error = document.getElementById('password_error');
+        // const password2_error = document.getElementById('confirm_error');
+
+        function validate() {
+            submit_btn.disabled = false;
+            if (!(password.value && password2.value) || password.value !== password2.value) {
+                submit_btn.disabled = true;
+            } else {
+
+            }
+            if (password.length < 8) {
+                submit_btn.disabled = true;
+            }
+            if (username.length < 3) {
+                submit_btn.disabled = true;
+            }
+            if (email.length < 5) {
+                submit_btn.disabled = true;
+            }
+        }
+
+        // check on every key press
+        password.addEventListener('input', validate);
+        confirmPassword.addEventListener('input', validate);
+        username.addEventListener("input", validate);
+        email.addEventListener("input", validate);
+
+    </script>
+{% endblock %}