From 8edca1eed0bde653aa4bb351495d880b2994dbc8 Mon Sep 17 00:00:00 2001
From: Arthur Lu <learthurgo@gmail.com>
Date: Wed, 3 May 2023 21:06:27 +0000
Subject: [PATCH] improve account style, add allowed nodes to account page,
 reduce use of innerHTML

Signed-off-by: Arthur Lu <learthurgo@gmail.com>
---
 account.html       | 37 +++++++++++++++++++------------------
 scripts/account.js |  7 ++++---
 scripts/config.js  |  4 ++--
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/account.html b/account.html
index 0dfe55b..631329f 100644
--- a/account.html
+++ b/account.html
@@ -27,24 +27,25 @@
 			<section class="w3-container">
 				<h2>Account</h2>
 				<div class="w3-card w3-padding">
-					<div class="flex row wrap">
-						<p id="username">Username: </p>
-						<p id="pool">Pool: </p>
-						<p id="vmid">VMID Range: </p>
-					</div>
-					<div class="">
-						<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
-							<thead>
-								<tr class="w3-black">
-									<th>Resource</th>
-									<th>Used</th>
-									<th>Free</th>
-									<th>Total</th>
-								</tr>
-							</thead>
-							<tbody></tbody>
-						</table>
-					</div>
+					<h3>Account Details</h3>
+					<p id="username">Username:</p>
+					<p id="pool">Pool:</p>
+					<p id="vmid">VMID Range:</p>
+					<p id="nodes">Nodes:</p>
+				</div>
+				<div class="w3-card w3-padding w3-margin-top">
+					<h3>Cluster Resources</h3>
+					<table id="resource-table" class="w3-table w3-table-all" style="overflow-x: auto;">
+						<thead>
+							<tr class="w3-black">
+								<th>Resource</th>
+								<th>Used</th>
+								<th>Free</th>
+								<th>Total</th>
+							</tr>
+						</thead>
+						<tbody></tbody>
+					</table>
 				</div>
 			</section>
 		</main>
diff --git a/scripts/account.js b/scripts/account.js
index 6627683..06deacb 100644
--- a/scripts/account.js
+++ b/scripts/account.js
@@ -19,9 +19,10 @@ async function init () {
 	let user = await requestAPI("/user");
 	let resources = user.resources;
 	let instances = user.instances;
-	document.querySelector("#username").innerHTML += getCookie("username");
-	document.querySelector("#pool").innerHTML += instances.pool;
-	document.querySelector("#vmid").innerHTML += `[${instances.vmid.min},${instances.vmid.max}]`;
+	document.querySelector("#username").innerText = `Username: ${getCookie("username")}`;
+	document.querySelector("#pool").innerText = `Pool: ${instances.pool}`;
+	document.querySelector("#vmid").innerText = `VMID Range: ${instances.vmid.min} - ${instances.vmid.max}`;
+	document.querySelector("#nodes").innerText = `Nodes: ${user.nodes.toString()}`;
 	buildResourceTable(resources, "#resource-table");
 }
 
diff --git a/scripts/config.js b/scripts/config.js
index 7e876b9..9492694 100644
--- a/scripts/config.js
+++ b/scripts/config.js
@@ -53,7 +53,7 @@ function addResourceLine (fieldset, iconHref, labelText, inputAttr, unitText=nul
 	field.append(icon);
 
 	let label = document.createElement("label");
-	label.innerHTML = labelText;
+	label.innerText = labelText;
 	label.htmlFor = labelText;
 	field.append(label);
 
@@ -120,7 +120,7 @@ function addDiskLine (fieldset, busPrefix, busName, device, diskDetails) {
 
 	// Add a label for the disk bus and device number
 	let diskLabel = document.createElement("label");
-	diskLabel.innerHTML = diskName;
+	diskLabel.innerText = diskName;
 	diskLabel.dataset.disk = diskID;
 	field.append(diskLabel);