From 8b9cbec5fb7bdf8cd08c8aeab5807bd3ed387295 Mon Sep 17 00:00:00 2001
From: Arthur Lu <root@tronnet.net>
Date: Mon, 3 Apr 2023 22:59:36 +0000
Subject: [PATCH] use css vars for coloring

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 css/style.css     | 19 ++-----------------
 index.html        |  2 +-
 login.html        | 40 +++++++++++++++++++---------------------
 scripts/config.js |  2 +-
 scripts/login.js  | 10 +++++-----
 5 files changed, 28 insertions(+), 45 deletions(-)

diff --git a/css/style.css b/css/style.css
index 376d09d..085fb27 100644
--- a/css/style.css
+++ b/css/style.css
@@ -5,7 +5,9 @@
 	--content-txt-color: black;
 	--form-disabled-color: #606060;
 	--button-accept: #0F0;
+	--success-color: #0F0;
 	--button-cancel: #F00;
+	--fail-color: #F00;
 }
 
 * {
@@ -110,23 +112,6 @@ p {
 	text-align: left;
 }
 
-@media screen and (min-width: 480px) {
-.center-div {
-	min-width: 480px;
-	max-width: 50%;
-	width: fit-content;
-	margin-left: auto;
-	margin-right: auto;
-}
-}
-@media screen and (max-width: 480px) {
-.center-div {
-	width: 100%;
-	margin-left: auto;
-	margin-right: auto;
-}
-}
-
 .hidden {
 	visibility: hidden;	
 }
diff --git a/index.html b/index.html
index 5818543..3764e02 100644
--- a/index.html
+++ b/index.html
@@ -19,7 +19,7 @@
 			}
 			instance-obj:after, instance-obj:first-child:before {
 				content: " ";
-				border-bottom: 1px solid black;
+				border-bottom: 1px solid var(--content-txt-color);
 				grid-column: 1 / span 3;
 			}
 		</style>
diff --git a/login.html b/login.html
index adc6272..cb604b0 100644
--- a/login.html
+++ b/login.html
@@ -17,27 +17,25 @@
 			</nav>
 		</header>
 		<main>
-			<div class="center-div">
-				<form style="margin-left: auto; margin-right: auto;">
-					<fieldset>
-						<legend>Proxmox VE Login</legend>
-						<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
-							<label for="username">Username</label>
-							<input type="text" id="username" name="username">
-							<label for="password">Password</label>
-							<input type="password" id="password" name="password">
-							<label for="realm">Realm</label>
-							<select id="realm" name="realm"></select>
-						</div>
-					</fieldset>
-					<fieldset class="fieldset-no-border">
-						<div class="btn-group">
-							<button id="submit">LOGIN</button>
-						</div>
-					</fieldset>
-				</form>
-				<p id="status"></p>
-			</div>
+			<form style="margin-left: auto; margin-right: auto;">
+				<fieldset>
+					<legend>Proxmox VE Login</legend>
+					<div class="input-grid" style="grid-template-columns: repeat(2, auto);">
+						<label for="username">Username</label>
+						<input type="text" id="username" name="username">
+						<label for="password">Password</label>
+						<input type="password" id="password" name="password">
+						<label for="realm">Realm</label>
+						<select id="realm" name="realm"></select>
+					</div>
+				</fieldset>
+				<fieldset class="fieldset-no-border">
+					<div class="btn-group">
+						<button id="submit">LOGIN</button>
+					</div>
+				</fieldset>
+			</form>
+			<p id="status" style="text-align: center;"></p>
 		</main>
 		<footer><p>&copy; tronnet</p></footer>
 	</body>
diff --git a/scripts/config.js b/scripts/config.js
index c95bcb8..fe7868e 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -325,7 +325,7 @@ async function handleDiskDelete () {
 	document.body.append(dialog);
 
 	dialog.header = `Delete ${this.dataset.disk}`;
-	dialog.formBody = `<p style="color: #FF0000;">Are you sure you want to <strong>delete</strong> disk</p><p style="color: #FF0000;">${this.dataset.disk}</p>`;
+	dialog.formBody = `<p>Are you sure you want to <strong>delete</strong> disk</p><p>${this.dataset.disk}</p>`;
 
 	dialog.callback = async (result, form) => {
 		if (result === "confirm") {
diff --git a/scripts/login.js b/scripts/login.js
index 50fbed6..c70ee1f 100644
--- a/scripts/login.js
+++ b/scripts/login.js
@@ -16,7 +16,7 @@ async function init (){
 	});
 	formSubmitButton.addEventListener("click", async (e) => {
 		status.innerText = "";
-		status.style.color = "#000000";
+		status.style.color = "var(--content-txt-color)";
 		e.preventDefault();
 		let form = document.querySelector("form");
 		let formData = new FormData(form);
@@ -25,21 +25,21 @@ async function init (){
 			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 = "#00ff00";
+			status.style.color = "var(--success-color)";
 			goToPage("index.html");
 		}
 		catch (error) {
 			if(error instanceof ResponseError) { // response error is usually 401 auth failed
 				status.innerText = "Authentication failed.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 			}
 			else if (error instanceof NetworkError) {
 				status.innerText = "Encountered a network error.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 			}
 			else {
 				status.innerText = "An error occured.";
-				status.style.color = "#ff0000";
+				status.style.color = "var(--fail-color)";
 				console.error(error);
 			}
 		}