Added "Register" form

static/main/js/validation.js

@@ -0,0 +1,95 @@
+$(document).ready(function() {
+    let register_form = $("#register-form")
+    let username = $("#username")
+    let password = $("#password")
+    let confirm_password = $("#confirm-password")
+    let check_block = $("#check-block")
+    let valid_username = false
+    let valid_password = false
+    let valid_password_match = false
+
+    const CHECKS = {
+        length: "^.{10,}",
+        uppercase: "[A-Z]",
+        lowercase: "[a-z]",
+        numbers: "[0-9]",
+        symbol: "[^A-Za-z0-9]",
+    }
+
+    const TEXT = {
+        length: "10 Characters",
+        uppercase: "1 Uppercase Letter",
+        lowercase: "1 Lowercase Letter",
+        numbers: "1 Digit",
+        symbol: "1 Symbol",
+    }
+
+    username.change(function() {
+        if (username.val() === "") {
+            valid_username = false
+        } else {
+            valid_username = true
+        }
+        submit()
+    })
+
+    password.change(function() {
+        valid_password = true
+        check_block.empty()
+        check_block.append($("<p>").text("Password must consist of:"))
+        check_block.append($("<ul>", { id: "check-list" }))
+        for (let item in CHECKS) {
+            if (!new RegExp(CHECKS[item]).test(password.val())) {
+                $("#check-list").append(
+                    $("<li>", { id: item, class: "not-valid" }).text(TEXT[item])
+                )
+                valid_password = false
+            } else {
+                $("#check-list").append(
+                    $("<li>", { id: item, class: "valid" }).text(TEXT[item])
+                )
+            }
+        }
+        check_password_match()
+        submit()
+    })
+
+    confirm_password.change(function() {
+        check_password_match()
+    })
+
+    function check_password_match() {
+        $("#password-match").remove()
+        if (password.val() != confirm_password.val()) {
+            check_block.append(
+                $("<p>", { id: "password-match", class: "not-valid" }).text(
+                    "Passwords do not match"
+                )
+            )
+            valid_password_match = false
+        } else {
+            valid_password_match = true
+        }
+        submit()
+    }
+
+    function submit() {
+        $("#submit-btn").remove()
+        if (valid_username && valid_password && valid_password_match) {
+            register_form.append(
+                $("<input>", {
+                    type: "submit",
+                    value: "Register",
+                    id: "submit-btn",
+                    class: "btn btn-primary",
+                })
+            )
+        } else {
+            $("#submit-btn").remove()
+        }
+    }
+})
+
+register_form.submit(function(e) {
+    e.preventDefault()
+})