From 405996cf314990e6a006d34a4cd1a723e9d94cd2 Mon Sep 17 00:00:00 2001
From: bt90 <btom1990@googlemail.com>
Date: Tue, 15 Aug 2023 13:55:13 +0000
Subject: [PATCH 1/3] Rename divs

---
 assets/css/style.css    | 4 ++--
 assets/html/index.html  | 6 +++---
 assets/html/logout.html | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)
diff --git a/assets/css/style.css b/assets/css/style.css
index 3dfb44a..f6293de 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -15,7 +15,7 @@ body {
   height: 100vh;
 }
 
-.form {
+.login-mask {
   background-color: #fff;
   padding: 2em;
   border-radius: 5px;
@@ -28,7 +28,7 @@ h1 {
   margin-bottom: 1em;
 }
 
-.form-control {
+.login-mask-control {
   margin-bottom: 1em;
   display: flex;
   flex-direction: column;
diff --git a/assets/html/index.html b/assets/html/index.html
index 3bddc31..d9f1ec7 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -14,16 +14,16 @@
   </head>
   <body>
     <div class="container">
-      <div class="form" id="form">
+      <div class="login-mask" id="login-mask">
         <div class="alert">
           <p id="alert-message"></p>
         </div>
         <h1>Login</h1>
-        <div class="form-control">
+        <div class="login-mask-control">
           <label for="username">Username</label>
           <input type="text" id="username" name="username" autocomplete="username" required autofocus>
         </div>
-        <div class="form-control">
+        <div class="login-mask-control">
           <label for="password">Password</label>
           <input type="password" id="password" name="password" autocomplete="current-password" required>
         </div>
diff --git a/assets/html/logout.html b/assets/html/logout.html
index 615f2b3..bda86f1 100644
--- a/assets/html/logout.html
+++ b/assets/html/logout.html
@@ -14,7 +14,7 @@
   </head>
   <body>
     <div class="container">
-      <div class="form">
+      <div class="login-mask">
         <div class="alert">
           <p id="alert-message"></p>
         </div>

From 6190362d7f837034a24bb82cb98fcc152b9f5f75 Mon Sep 17 00:00:00 2001
From: bt90 <btom1990@googlemail.com>
Date: Tue, 15 Aug 2023 14:38:47 +0000
Subject: [PATCH 2/3] Use forms

---
 assets/css/style.css    |  6 +++---
 assets/html/index.html  | 24 +++++++++++++-----------
 assets/html/logout.html |  4 +++-
 assets/js/logout.js     | 12 ++++++++----
 assets/js/script.js     | 32 ++++++++++----------------------
 5 files changed, 37 insertions(+), 41 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index f6293de..6c3450b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -57,7 +57,7 @@ input[type="password"]:focus {
   background-color: #e8e8e8;
 }
 
-button {
+input[type="submit"] {
   width: 100%;
   padding: 1em;
   border: none;
@@ -72,11 +72,11 @@ button {
   transition: all 0.3s ease;
 }
 
-button:hover {
+input[type="submit"]:hover {
   background-color: #ffbd2f;
 }
 
-button:focus {
+input[type="submit"]:focus {
   outline: none;
 }
 
diff --git a/assets/html/index.html b/assets/html/index.html
index d9f1ec7..9444e08 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -19,17 +19,19 @@
           <p id="alert-message"></p>
         </div>
         <h1>Login</h1>
-        <div class="login-mask-control">
-          <label for="username">Username</label>
-          <input type="text" id="username" name="username" autocomplete="username" required autofocus>
-        </div>
-        <div class="login-mask-control">
-          <label for="password">Password</label>
-          <input type="password" id="password" name="password" autocomplete="current-password" required>
-        </div>
-        <div class="button-container">
-          <button id="submit">Submit</button>
-        </div>
+        <form>
+          <div class="login-mask-control">
+            <label for="username">Username</label>
+            <input type="text" id="username" name="username" autocomplete="username" required autofocus>
+          </div>
+          <div class="login-mask-control">
+            <label for="password">Password</label>
+            <input type="password" id="password" name="password" autocomplete="current-password" required>
+          </div>
+          <div class="button-container">
+            <input id="submit" type="submit" value="Submit">
+          </div>
+        </form>
       </div>
   </body>
 </html>
diff --git a/assets/html/logout.html b/assets/html/logout.html
index bda86f1..afdfb2c 100644
--- a/assets/html/logout.html
+++ b/assets/html/logout.html
@@ -20,7 +20,9 @@
         </div>
         <h1>Authorized</h1>
         <div class="button-container">
-          <button id="submit">Logout</button>
+          <form>
+            <input id="submit" type="submit" value="Logout">
+          </form>
         </div>
       </div>
   </body>
diff --git a/assets/js/logout.js b/assets/js/logout.js
index f18cac8..2751a0e 100644
--- a/assets/js/logout.js
+++ b/assets/js/logout.js
@@ -20,6 +20,7 @@ const handleError = (err) => {
   // Unexpected error occurred, show alert
   displayAlert("Unexpected error occurred.", "error");
   console.log("Error occurred", err);
+  setFieldsDisabled(false);
 };
 
 const handleResponse = (res) => {
@@ -43,7 +44,10 @@ const handleResponse = (res) => {
 };
 
 // Logout function
-const logout = () => {
+const logout = (event) => {
+  // override default form behaviour
+  event.preventDefault();
+
   // Disable fields until after request
   setFieldsDisabled(true);
 
@@ -62,9 +66,9 @@ const setFieldsDisabled = (disabled) => {
   document.getElementById("submit").disabled = disabled;
 };
 
-// Configure submit button click to trigger login
-const submitButton = document.getElementById("submit");
-submitButton.onclick = logout;
+// Configure form to trigger logout
+var form = document.querySelector("form");
+form.onsubmit = logout;
 
 // Set banner if just logged in
 if (params.success) {
diff --git a/assets/js/script.js b/assets/js/script.js
index 3429b3c..8b8fcce 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -16,9 +16,11 @@ const displayAlert = (msg, variant) => {
   }, 10);
 };
 
-const handleError = () => {
+const handleError = (err) => {
   // Unexpected error occurred, show alert
   displayAlert("Unexpected error occurred.", "error");
+  console.log("Error occurred", err);
+  setFieldsDisabled(false);
 };
 
 const handleResponse = (res) => {
@@ -47,17 +49,14 @@ const handleResponse = (res) => {
 };
 
 // Login function
-const login = () => {
+const login = (event) => {
+  // override default form behaviour
+  event.preventDefault();
+
   // Get form values
   const username = document.getElementById("username").value;
   const password = document.getElementById("password").value;
 
-  // Validation
-  if (username == "" || password == "") {
-    alert("Please make sure all fields are filled.");
-    return;
-  }
-
   // Create data object to send
   const data = {
     username,
@@ -84,17 +83,6 @@ const setFieldsDisabled = (disabled) => {
   document.getElementById("submit").disabled = disabled;
 };
 
-// Configure submit button click to trigger login
-const submitButton = document.getElementById("submit");
-submitButton.onclick = login;
-
-// Configure ENTER key-press to trigger login
-const form = document.getElementById("form");
-form.addEventListener('keydown', (e) => {
-  // Listen to 'keydown' event and check if Enter key
-  if (e.key === 'Enter') {
-    // Prevent default and trigger login
-    e.preventDefault();
-    login();
-  }
-});
+// Configure form to trigger login
+var form = document.querySelector("form");
+form.onsubmit = login;

From da39e5c6596a5cd4d36c1d3312a98aa291d0f4cb Mon Sep 17 00:00:00 2001
From: bt90 <btom1990@googlemail.com>
Date: Sat, 19 Aug 2023 13:31:25 +0000
Subject: [PATCH 3/3] Switch back to a button

---
 assets/css/style.css    | 6 +++---
 assets/html/index.html  | 2 +-
 assets/html/logout.html | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index 6c3450b..f6293de 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -57,7 +57,7 @@ input[type="password"]:focus {
   background-color: #e8e8e8;
 }
 
-input[type="submit"] {
+button {
   width: 100%;
   padding: 1em;
   border: none;
@@ -72,11 +72,11 @@ input[type="submit"] {
   transition: all 0.3s ease;
 }
 
-input[type="submit"]:hover {
+button:hover {
   background-color: #ffbd2f;
 }
 
-input[type="submit"]:focus {
+button:focus {
   outline: none;
 }
 
diff --git a/assets/html/index.html b/assets/html/index.html
index 9444e08..a3c53a2 100644
--- a/assets/html/index.html
+++ b/assets/html/index.html
@@ -29,7 +29,7 @@ <h1>Login</h1>
             <input type="password" id="password" name="password" autocomplete="current-password" required>
           </div>
           <div class="button-container">
-            <input id="submit" type="submit" value="Submit">
+            <button id="submit" type="submit">Submit</button>
           </div>
         </form>
       </div>
diff --git a/assets/html/logout.html b/assets/html/logout.html
index afdfb2c..a6c5c14 100644
--- a/assets/html/logout.html
+++ b/assets/html/logout.html
@@ -21,7 +21,7 @@
         <h1>Authorized</h1>
         <div class="button-container">
           <form>
-            <input id="submit" type="submit" value="Logout">
+            <button id="submit" type="submit">Logout</button>
           </form>
         </div>
       </div>
