tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve login style and logic

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu 2023-04-18 20:08:59 +00:00
parent 16be63e98f
commit 9be45c952f
4 changed files with 41 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
css/style.css
View File

@ -1,3 +1,8 @@
:root {
--fail-color: #f00;
--success-color: #0f0;
}
h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select { h1, h2, h3, h3, h4, h5, h6, p, a, label, button, input, select {
font-family: monospace; font-family: monospace;
} }

8
login.html
View File

@ -10,18 +10,16 @@
<script src="scripts/login.js" type="module"></script> <script src="scripts/login.js" type="module"></script>
</head> </head>
<body class="w3-display-container" style="min-height: 100vh;"> <body class="w3-display-container" style="min-height: 100vh;">
<header>
<header class="w3-black w3-bar"> <header class="w3-black w3-bar">
<nav class="w3-large w3-bar" id="nav"> <nav class="w3-large w3-bar" id="nav">
<h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1> <h1 class="w3-bar-item w3-mobile w3-hide-small" style="font-size: 18px; margin: 0px; background-color: #0f0; color: #000;">tronnet</h1>
<a class="w3-bar-item w3-mobile w3-button w3-hide-small" href="login.html" aria-current="true">Login</a> <a class="w3-bar-item w3-mobile w3-button w3-hide-small" href="login.html" aria-current="true">Login</a>
</nav> </nav>
</header> </header>
</header>
<main class="w3-container w3-display-middle w3-mobile"> <main class="w3-container w3-display-middle w3-mobile">
<div class="w3-card-4 w3-margin"> <div class="w3-card-4 w3-margin w3-container">
<h2 class="w3-center">Proxmox VE Login</h2> <h2 class="w3-center">Proxmox VE Login</h2>
<form class="w3-container"> <form>
<label for="username"><b>Username</b></label> <label for="username"><b>Username</b></label>
<input class="w3-input w3-border" id="username" name="username" type="text"> <input class="w3-input w3-border" id="username" name="username" type="text">
<label for="password"><b>Password</b></label> <label for="password"><b>Password</b></label>
@ -34,7 +32,7 @@
</form> </form>
</div> </div>
<div class="w3-container w3-center w3-margin"> <div class="w3-container w3-center w3-margin">
<output id="status"></output> <output id="status"> </output>
</div> </div>
</main> </main>
</body> </body>

19
scripts/dialog.js
View File

@ -41,4 +41,23 @@ export class Dialog extends HTMLElement {
} }
} }
export function alert (message) {
let form = document.createElement("form");
form.method = "dialog";
form.innerHTML = `
<p class="w3-center" style="margin-bottom: 0px;">${message}</p>
<div class="w3-center">
<button class="w3-button w3-margin" id="submit">OK</button>
</div>
`;
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); customElements.define("dialog-form", Dialog);

21
scripts/login.js
View File

@ -1,11 +1,11 @@
import {requestTicket, setTicket, ResponseError, NetworkError, goToPage, deleteAllCookies, requestPVE} from "./utils.js"; import {requestTicket, setTicket, ResponseError, NetworkError, goToPage, deleteAllCookies, requestPVE} from "./utils.js";
import {alert} from "./dialog.js";
window.addEventListener("DOMContentLoaded", init); window.addEventListener("DOMContentLoaded", init);
async function init (){ async function init (){
deleteAllCookies(); deleteAllCookies();
let formSubmitButton = document.querySelector("#submit"); let formSubmitButton = document.querySelector("#submit");
let status = document.querySelector("#status");
let realms = await requestPVE("/access/domains", "GET"); let realms = await requestPVE("/access/domains", "GET");
let realmSelect = document.querySelector("#realm"); let realmSelect = document.querySelector("#realm");
realms.data.forEach((element) => { realms.data.forEach((element) => {
@ -15,31 +15,28 @@ async function init (){
} }
}); });
formSubmitButton.addEventListener("click", async (e) => { formSubmitButton.addEventListener("click", async (e) => {
status.innerText = "";
status.style.color = "var(--content-txt-color)";
e.preventDefault(); e.preventDefault();
let form = document.querySelector("form"); let form = document.querySelector("form");
let formData = new FormData(form); let formData = new FormData(form);
try { try {
status.innerText = "Authenticating..."; formSubmitButton.innerText = "Authenticating...";
let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm")); let ticket = await requestTicket(formData.get("username"), formData.get("password"), formData.get("realm"));
setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username")); setTicket(ticket.data.ticket, ticket.data.CSRFPreventionToken, formData.get("username"));
status.innerText = "Authentication successful!" formSubmitButton.innerText = "LOGIN";
status.style.color = "var(--success-color)";
goToPage("index.html"); goToPage("index.html");
} }
catch (error) { catch (error) {
if(error instanceof ResponseError) { // response error is usually 401 auth failed if(error instanceof ResponseError) { // response error is usually 401 auth failed
status.innerText = "Authentication failed."; alert("Authenticaton failed.");
status.style.color = "var(--fail-color)"; formSubmitButton.innerText = "LOGIN";
} }
else if (error instanceof NetworkError) { else if (error instanceof NetworkError) {
status.innerText = "Encountered a network error."; alert("Network error.");
status.style.color = "var(--fail-color)"; formSubmitButton.innerText = "LOGIN";
} }
else { else {
status.innerText = "An error occured."; alert("An error.");
status.style.color = "var(--fail-color)"; formSubmitButton.innerText = "LOGIN";
console.error(error); console.error(error);
} }
} }