add working login page / remember me / clock

djlearn/pages/static/css/login.css

@@ -19,10 +19,10 @@
 
 .login-form {
     display: flex;
+    min-height: 15vh;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    margin: 2em;
 }
 
 .login-input {
@@ -30,6 +30,11 @@
     margin: 0.1em;
 }
 
+.login-error {
+    color: red;
+    padding-bottom: 1em;
+}
+
 .spaced {
     width: 100%;
     display: flex;

djlearn/pages/static/js/base.js

@@ -0,0 +1,19 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    clock();
+  })
+
+function clock() {
+    const today = new Date();
+    let h = today.getHours();
+    let m = today.getMinutes();
+    let s = today.getSeconds();
+    m = checkTime(m);
+    s = checkTime(s);
+    document.getElementById('clock').innerHTML =  h + ":" + m + ":" + s;
+    setTimeout(clock, 1000);
+  }
+  
+function checkTime(i) {
+    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
+    return i;
+}

djlearn/pages/static/js/login.js

@@ -0,0 +1,24 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+
+  const rmCheck = document.getElementById("remember_me"),
+  emailInput = document.getElementById("id_username");
+
+  if (localStorage.checkbox && localStorage.checkbox !== "") {
+    rmCheck.setAttribute("checked", "checked");
+    emailInput.value = localStorage.username;
+  } else {
+    rmCheck.removeAttribute("checked");
+    emailInput.value = "";
+  }
+
+})
+
+function lsRememberMe() {
+  if (rmCheck.checked && emailInput.value !== "") {
+    localStorage.username = emailInput.value;
+    localStorage.checkbox = rmCheck.value;
+  } else {
+    localStorage.username = "";
+    localStorage.checkbox = "";
+  }
+}