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..a3c53a2 100644 --- a/assets/html/index.html +++ b/assets/html/index.html @@ -14,22 +14,24 @@
-
+ diff --git a/assets/html/logout.html b/assets/html/logout.html index 615f2b3..a6c5c14 100644 --- a/assets/html/logout.html +++ b/assets/html/logout.html @@ -14,13 +14,15 @@
-
+ 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;