Added "Register" form

kristofersxyz/apps/main/urls.py

@@ -6,4 +6,5 @@ urlpatterns = [
     path("", views.index, name="home"),
     path("karbs", views.karbs, name="karbs"),
     path("lightsaber", views.lightsaber, name="lightsaber"),
+    path("validation", views.validation, name="validation"),
 ]

kristofersxyz/apps/main/views.py

@@ -16,3 +16,7 @@ def projects(request):
 def karbs(request):
     """Karbs install script"""
     return redirect("/projects/karbs")
+
+
+def validation(request):
+    return render(request, "main/validation.html", {"title": "Validation"})

kristofersxyz/apps/projects/urls.py

@@ -6,5 +6,5 @@ urlpatterns = [
     path("", views.projects, name="projects"),
     path("karbs", views.karbs, name="karbs"),
     path("karbs/instructions", views.instructions, name="instructions"),
-    path("traffic-light-detector", views.traffic_light_detector, name="traffic-light-detector")
+    path("traffic-light-detector", views.traffic_light_detector, name="traffic-light-detector"),
 ]

static/main/css/button.css

@@ -13,7 +13,6 @@
     appearance: none;
     text-decoration: none;
     transition-property: color, background-color, border-color;
-    max-width: 3rem;
 }
 
 .btn {

static/main/css/validation.css

@@ -0,0 +1,21 @@
+.valid {
+    color: green;
+}
+
+.not-valid {
+    color: red;
+}
+
+#check-list li {
+    list-style: square;
+}
+
+#register-form {
+    display: grid;
+    place-items: center;
+    margin-top: 5rem;
+}
+
+#register-form > input {
+    margin-top: 1rem;
+}

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()
+})

templates/main/validation.html

@@ -0,0 +1,32 @@
+{% extends "layout.html" %}
+{% load static %}
+{% block title %}{{ title }}{% endblock %}
+{% block meta %}
+    <link rel="stylesheet"
+          type="text/css"
+          href="{% static 'main/css/validation.css' %}"/>
+    <script src="{% static 'main/js/validation.js' %}" defer></script>
+{% endblock %}
+{% block content %}
+    <form id="register-form" action="https://www.w3schools.com/action_page.php">
+        <input type="text"
+               id="username"
+               name="username"
+               placeholder="Username"
+               class="btn">
+        <br>
+        <input type="password"
+               id="password"
+               name="password"
+               placeholder="Password"
+               class="btn">
+        <br>
+        <input type="password"
+               id="confirm-password"
+               name="confirm-password"
+               placeholder="Repeat password"
+               class="btn">
+        <br>
+        <div id="check-block"></div>
+    </form>
+{% endblock %}

templates/projects/projects.html

@@ -88,6 +88,18 @@
                     </div>
                 </div>
             </a>
+            <a class="card" href="{% url 'validation' %}">
+                <div class="card-content">
+                    <div class="card-info-wrapper">
+                        <div class="card-info-title">
+                            <h2>Register</h2>
+                        </div>
+                        <div class="card-info-text">
+                            <p>Subject to change.</p>
+                        </div>
+                    </div>
+                </div>
+            </a>
         </div>
     </div>
 {% endblock %}