From ed7c79df7844c679c8247110bb52dfbc9a7f63b4 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Tue, 18 Apr 2023 20:08:59 +0000 Subject: [PATCH] improve login style and logic Signed-off-by: Arthur Lu --- css/style.css | 5 +++++ login.html | 18 ++++++++---------- scripts/dialog.js | 19 +++++++++++++++++++ scripts/login.js | 21 +++++++++------------ 4 files changed, 41 insertions(+), 22 deletions(-) diff --git a/css/style.css b/css/style.css index d31a7a4..514781e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,8 @@ +:root { + --fail-color: #f00; + --success-color: #0f0; +} + h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select { font-family: monospace; } diff --git a/login.html b/login.html index a3cd3cb..a8f8633 100644 --- a/login.html +++ b/login.html @@ -10,18 +10,16 @@ -
-
- -
+
+
-
+

Proxmox VE Login

-
+ @@ -34,7 +32,7 @@
- +
diff --git a/scripts/dialog.js b/scripts/dialog.js index 4876211..a10a00e 100644 --- a/scripts/dialog.js +++ b/scripts/dialog.js @@ -41,4 +41,23 @@ export class Dialog extends HTMLElement { } } +export function alert (message) { + let form = document.createElement("form"); + form.method = "dialog"; + form.innerHTML = ` +

${message}

+
+ +
+ `; + + let dialog = document.createElement("dialog"); + dialog.classList.add("w3-card-4"); + dialog.classList.add("w3-container"); + dialog.append(form); + + document.body.append(dialog); + dialog.showModal(); +} + customElements.define("dialog-form", Dialog); \ No newline at end of file diff --git a/scripts/login.js b/scripts/login.js index c70ee1f..cf94b91 100644 --- a/scripts/login.js +++ b/scripts/login.js @@ -1,11 +1,11 @@ import {requestTicket, setTicket, ResponseError, NetworkError, goToPage, deleteAllCookies, requestPVE} from "./utils.js"; +import {alert} from "./dialog.js"; window.addEventListener("DOMContentLoaded", init); async function init (){ deleteAllCookies(); let formSubmitButton = document.querySelector("#submit"); - let status = document.querySelector("#status"); let realms = await requestPVE("/access/domains", "GET"); let realmSelect = document.querySelector("#realm"); realms.data.forEach((element) => { @@ -15,31 +15,28 @@ async function init (){ } }); formSubmitButton.addEventListener("click", async (e) => { - status.innerText = ""; - status.style.color = "var(--content-txt-color)"; e.preventDefault(); let form = document.querySelector("form"); let formData = new FormData(form); try { - status.innerText = "Authenticating..."; + formSubmitButton.innerText = "Authenticating..."; let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm")); setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username")); - status.innerText = "Authentication successful!" - status.style.color = "var(--success-color)"; + formSubmitButton.innerText = "LOGIN"; goToPage("index.html"); } catch (error) { if(error instanceof ResponseError) { // response error is usually 401 auth failed - status.innerText = "Authentication failed."; - status.style.color = "var(--fail-color)"; + alert("Authenticaton failed."); + formSubmitButton.innerText = "LOGIN"; } else if (error instanceof NetworkError) { - status.innerText = "Encountered a network error."; - status.style.color = "var(--fail-color)"; + alert("Network error."); + formSubmitButton.innerText = "LOGIN"; } else { - status.innerText = "An error occured."; - status.style.color = "var(--fail-color)"; + alert("An error."); + formSubmitButton.innerText = "LOGIN"; console.error(error); } }