code cleanup

.gitignore

@@ -1,3 +1,5 @@
 **/config.json
+**/package-lock.json
+**/node_modules
 dist/*
 go.sum

Makefile

@@ -1,14 +1,13 @@
-.PHONY: build build-web build-wfa-js clean clean-wfa-js ensure-dist workflow-init
+.PHONY: build test clean wfa-js
 
-build: clean ensure-dist build-web build-wfa-js
+build: clean build-wfa-js
 	@echo "======================== Building Binary ======================="
+	mkdir -p dist
 # resolve symbolic links in web by copying it into dist/web/
+	cp -rL web/ dist/web/
 	CGO_ENABLED=0 go build -tags release -ldflags="-s -w" -v -o dist/ .
 
-build-web: ensure-dist
+build-wfa-js:
-	cp -rL web/ dist/web/
-
-build-wfa-js: ensure-dist
 	$(MAKE) -C WFA-JS
 	cp -f WFA-JS/dist/* web/modules
 
@@ -19,9 +18,3 @@ clean: clean-wfa-js
 
 clean-wfa-js:
 	$(MAKE) clean -C WFA-JS
-
-ensure-dist:
-	mkdir -p dist
-
-workflow-init: ensure-dist build-web
-	cp -r dev_config/. .

README.md

@@ -13,7 +13,7 @@ ProxmoxAAS Dashboard provides users of a proxmox based compute on demand service
 
 ## ProxmoxAAS System Installation Overview
 
-The ProxmoxAAS project is large and is split into multiple components. There are four required components, the Dashboard, API, Fabric, and access-manager-api. The installation order should start with the Dashboard and then proceed to the other backend components. This will require some foresight into the setup process.
+The ProxmoxAAS project is large and is split into multiple components. There are four required components, the Dashboard, API, Fabric, and access-manager-api. The instalation order should start with the Dashboard and then proceed to the other backend components. This will require some foresight into the setup process.
 
 The supported setup is to use a reverse proxy to serve both the original Proxmox web interface and ProxmoxAAS components. It is possible other setups can work. Rather than provide specific steps to duplicate a certain setup, the steps included are intended as a guideline of steps required for proper function in most setups. Consequently, the examples provided are only to highlight key settings and do not represent complete working configurations. The instructions also assume you have your own domain name which will substitute `domain.net` in some of the configs. 
 

app/app.go

@@ -6,7 +6,7 @@ import (
 	"log"
 	"proxmoxaas-dashboard/app/common"
 	"proxmoxaas-dashboard/app/routes"
-	"web" // go will complain here until the first build
+	"proxmoxaas-dashboard/dist/web" // go will complain here until the first build
 
 	"github.com/gin-gonic/gin"
 	"github.com/tdewolff/minify/v2"
@@ -18,11 +18,9 @@ func Run() {
 
 	common.Global = common.GetConfig(*configPath)
 
-	// setup gin
+	// setup static resources
 	gin.SetMode(gin.ReleaseMode)
 	router := gin.Default()
-
-	// setup static resources
 	m := common.InitMinify()
 	ServeStatic(router, m)
 	html := common.MinifyStatic(m, web.Templates)

dev_config/.htmlvalidateignore

@@ -1,3 +0,0 @@
-web/modules/*
-WFA-JS/*
-dist/*

dev_config/.stylelintignore

@@ -1,3 +0,0 @@
-web/modules/*
-WFA-JS/*
-dist/*

dev_config/eslint.config.mjs

@@ -1,33 +1,29 @@
-import { defineConfig, globalIgnores } from "eslint/config";
+import { defineConfig } from "eslint/config";
 import globals from "globals";
 import js from "@eslint/js";
 
-export default defineConfig([
+export default defineConfig([js.configs.recommended,{
-    js.configs.recommended,
+    languageOptions: {
-    globalIgnores(["dist/", "web/modules", "WFA-JS"]),
+        globals: {
-    {
+            ...globals.browser,
-        languageOptions: {
-            globals: {
-                ...globals.browser,
-            },
-            ecmaVersion: "latest",
-            sourceType: "module",
         },
-        rules: {
+        ecmaVersion: "latest",
-            "no-tabs": ["error", {
+        sourceType: "module",
-                allowIndentationTabs: true,
+    },
-            }],
+    rules: {
-            indent: ["error", "tab"],
+        "no-tabs": ["error", {
-            "linebreak-style": ["error", "unix"],
+            allowIndentationTabs: true,
-            quotes: ["error", "double"],
+        }],
-            semi: ["error", "always"],
+        indent: ["error", "tab"],
-            "brace-style": ["error", "stroustrup", { allowSingleLine: false }],
+        "linebreak-style": ["error", "unix"],
-            "no-unused-vars": ["warn", { 
+        quotes: ["error", "double"],
-                "argsIgnorePattern": "^_",
+        semi: ["error", "always"],
-                "varsIgnorePattern": "^_",
+        "brace-style": ["error", "stroustrup", { allowSingleLine: false }],
-                "caughtErrorsIgnorePattern": "^_"
+        "no-unused-vars": ["warn", { 
-            }],
+            "argsIgnorePattern": "^_",
-            "prefer-const": ["error"]
+            "varsIgnorePattern": "^_",
-        },
+            "caughtErrorsIgnorePattern": "^_"
-    }
+        }],
-]);
+		"prefer-const": ["error"]
+    },
+}]);

go.mod

@@ -1,26 +1,23 @@
 module proxmoxaas-dashboard
 
-go 1.27.0
+go 1.26.5
 
 require (
 	github.com/gerow/go-color v0.0.0-20140219113758-125d37f527f1
 	github.com/gin-gonic/gin v1.12.0
 	github.com/go-viper/mapstructure/v2 v2.5.0
-	github.com/tdewolff/minify/v2 v2.24.17
+	github.com/tdewolff/minify/v2 v2.24.13
 	proxmoxaas-common-lib v0.0.0
-	web v0.0.0
 )
 
 replace proxmoxaas-common-lib => ./proxmoxaas-common-lib
 
-replace web => ./dist/web
-
 require (
 	github.com/bytedance/gopkg v0.1.4 // indirect
 	github.com/bytedance/sonic v1.15.2 // indirect
-	github.com/bytedance/sonic/loader v0.5.2 // indirect
+	github.com/bytedance/sonic/loader v0.5.1 // indirect
 	github.com/cloudwego/base64x v0.1.7 // indirect
-	github.com/gabriel-vasile/mimetype v1.4.15 // indirect
+	github.com/gabriel-vasile/mimetype v1.4.13 // indirect
 	github.com/gin-contrib/sse v1.1.1 // indirect
 	github.com/go-playground/locales v0.14.1 // indirect
 	github.com/go-playground/universal-translator v0.18.1 // indirect
@@ -29,21 +26,21 @@ require (
 	github.com/goccy/go-yaml v1.19.2 // indirect
 	github.com/json-iterator/go v1.1.12 // indirect
 	github.com/klauspost/cpuid/v2 v2.4.0 // indirect
-	github.com/leodido/go-urn v1.5.0 // indirect
+	github.com/leodido/go-urn v1.4.0 // indirect
-	github.com/mattn/go-isatty v0.0.24 // indirect
+	github.com/mattn/go-isatty v0.0.23 // indirect
 	github.com/modern-go/concurrent v0.0.0-20180306012644-bacd9c7ef1dd // indirect
 	github.com/modern-go/reflect2 v1.0.2 // indirect
 	github.com/pelletier/go-toml/v2 v2.4.3 // indirect
 	github.com/quic-go/qpack v0.6.0 // indirect
-	github.com/quic-go/quic-go v0.61.0 // indirect
+	github.com/quic-go/quic-go v0.60.0 // indirect
-	github.com/tdewolff/parse/v2 v2.8.16 // indirect
+	github.com/tdewolff/parse/v2 v2.8.13 // indirect
 	github.com/twitchyliquid64/golang-asm v0.15.1 // indirect
-	github.com/ugorji/go/codec v1.3.2 // indirect
+	github.com/ugorji/go/codec v1.3.1 // indirect
-	go.mongodb.org/mongo-driver/v2 v2.8.1 // indirect
+	go.mongodb.org/mongo-driver/v2 v2.8.0 // indirect
-	golang.org/x/arch v0.30.0 // indirect
+	golang.org/x/arch v0.29.0 // indirect
-	golang.org/x/crypto v0.55.0 // indirect
+	golang.org/x/crypto v0.54.0 // indirect
-	golang.org/x/net v0.58.0 // indirect
+	golang.org/x/net v0.57.0 // indirect
 	golang.org/x/sys v0.47.0 // indirect
-	golang.org/x/text v0.41.0 // indirect
+	golang.org/x/text v0.40.0 // indirect
-	google.golang.org/protobuf v1.36.12 // indirect
+	google.golang.org/protobuf v1.36.11 // indirect
 )

package.json

@@ -0,0 +1,18 @@
+{
+	"name": "proxmoxaas-dashboard",
+	"version": "1.0.0",
+	"description": "Front-end for ProxmoxAAS",
+	"type": "module",
+	"scripts": {
+		"lint": "html-validate --config dev_config/.htmlvalidate.json web/html/*; stylelint --config dev_config/.stylelintrc.json --formatter verbose --fix web/css/*.css; DEBUG=eslint:cli-engine eslint --config dev_config/eslint.config.mjs --fix web/scripts/"
+	},
+	"devDependencies": {
+		"@eslint/eslintrc": "^3.3.5",
+		"@eslint/js": "^10.0.1",
+		"eslint": "^10.2.1",
+		"globals": "^17.5.0",
+		"html-validate": "^9.4.0",
+		"stylelint": "^15.9.0",
+		"stylelint-config-standard": "^33.0.0"
+	}
+}

web/css/style.css

@@ -130,19 +130,6 @@ hr {
 	align-items: center;
 }
 
-.row-reverse {
-	flex-direction: row-reverse;
-	row-gap: 10px;
-	align-items: center;
-}
-
-
-.column {
-	flex-direction: column;
-	row-gap: 10px;
-	align-items: center;
-}
-
 .column-reverse {
 	flex-direction: column-reverse;
 	row-gap: 10px;
@@ -191,18 +178,18 @@ hr {
 }
 
 /* add hide large class similar to w3-hide-medium and w3-hide-small */
-@media screen and (width >= 993px) {
+@media screen and (width >=993px) {
 	.hide-large {display: none !important;}
 }
 
 /* fixes edge case in w3-hide-medium where width between 992 and 993 */
-@media screen and (width <= 993px) and (width >= 601px){
+@media screen and (width <=993px) and (width >=601px){
 	.hide-large {display: none !important;}
 	.hide-medium {display:none !important}
 }
 
 /* fixes edge case in w3-hide-small when width between 600 and 601 */
-@media screen and (width <= 601px) and (width >= 440px) {
+@media screen and (width <=601px) {
 	.hide-large {display: none !important;}
 	.hide-medium {display:none !important}
 	.hide-small {display:none !important}

web/go.mod

@@ -1,3 +0,0 @@
-module web
-
-go 1.26.0

web/html/account.html

@@ -58,14 +58,14 @@
 				<div id="body">
 					<form method="dialog" class="input-grid" style="grid-template-columns: auto 1fr;" id="form">
 						<label for="new-password">New Password</label>
-						<input class="w3-input w3-border" id="new-password" name="new-password" type="password" autocomplete="new-password" required>
+						<input class="w3-input w3-border" id="new-password" name="new-password" type="password" required>
 						<label for="confirm-password">Confirm Password</label>
-						<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required>
+						<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" required>
 					</form>
 				</div>
 				<div id="controls" class="w3-center w3-container">
 					<button id="cancel" type="submit" value="cancel" form="form" class="w3-button w3-margin"  formnovalidate>CANCEL</button>
-					<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin">CONFIRM</button>
+					<button id="confirm" type="submit" value="confirm" form="form" class="w3-button w3-margin" >CONFIRM</button>
 				</div>
 			</dialog>
 		</template>

web/html/index.html

@@ -114,9 +114,9 @@
 										<label class="container-specific none" for="rootfs-size">ROOTFS Size (GiB)</label>
 										<input class="w3-input w3-border container-specific none" name="rootfs-size" id="rootfs-size" type="number" min="0" max="131072" required disabled>
 										<label class="container-specific none" for="password">Password</label>
-										<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" autocomplete="new-password" required disabled>
+										<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" required disabled>
 										<label class="container-specific none" for="confirm-password">Confirm Password</label>
-										<input class="w3-input w3-border container-specific none" name="confirm-password" id="confirm-password" type="password" autocomplete="new-password" required disabled>
+										<input class="w3-input w3-border container-specific none" name="confirm-password" id="confirm-password" type="password" required disabled>
 									</form>
 								</div>
 								<div id="controls" class="w3-center w3-container">

web/modules/wfa.js

@@ -560,7 +560,7 @@ export default function init (path) {
 			const wasm = obj.instance;
 			global.wfa = wasm
 			go.run(wasm);
-			res(wasm)
+			res()
 		}
 		if ('instantiateStreaming' in WebAssembly) {
 			WebAssembly.instantiateStreaming(fetch(path), go.importObject).then(function (obj) {

web/scripts/account.js

@@ -1,5 +1,5 @@
 import { requestAPI, setAppearance } from "./utils.js";
-import { dialog, error } from "./dialog.js";
+import { dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -15,7 +15,7 @@ function handlePasswordChangeButton () {
 		if (result === "confirm") {
 			const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
 			if (result.status !== 200) {
-				error(`Attempted to change password but got: ${result.error}`);
+				alert(`Attempted to change password but got: ${result.error}`);
 			}
 		}
 	});

web/scripts/backups.js

@@ -1,5 +1,5 @@
 import { requestAPI, getURIData, setAppearance, requestDash } from "./utils.js";
-import { error, dialog } from "./dialog.js";
+import { alert, dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -74,7 +74,7 @@ class BackupCard extends HTMLElement {
 				};
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/notes`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to edit backup but got: ${result.error}`);
+					alert(`Attempted to edit backup but got: ${result.error}`);
 				}
 				refreshBackups();
 			}
@@ -90,7 +90,7 @@ class BackupCard extends HTMLElement {
 				};
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "DELETE", body);
 				if (result.status !== 200) {
-					error(`Attempted to delete backup but got: ${result.error}`);
+					alert(`Attempted to delete backup but got: ${result.error}`);
 				}
 				refreshBackups();
 			}
@@ -106,7 +106,7 @@ class BackupCard extends HTMLElement {
 				};
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup/restore`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to delete backup but got: ${result.error}`);
+					alert(`Attempted to delete backup but got: ${result.error}`);
 				}
 				refreshBackups();
 			}
@@ -116,10 +116,14 @@ class BackupCard extends HTMLElement {
 
 customElements.define("backup-card", BackupCard);
 
+async function getBackupsFragment () {
+	return await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
+}
+
 async function refreshBackups () {
-	let backups = await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
+	let backups = await getBackupsFragment();
 	if (backups.status !== 200) {
-		error("Error fetching backups.");
+		alert("Error fetching backups.");
 	}
 	else {
 		backups = backups.data;
@@ -137,7 +141,7 @@ async function handleBackupAddButton () {
 			};
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body);
 			if (result.status !== 200) {
-				error(`Attempted to create backup but got: ${result.error}`);
+				alert(`Attempted to create backup but got: ${result.error}`);
 			}
 			refreshBackups();
 		}

web/scripts/clientsync.js

@@ -1,5 +1,4 @@
 import { getSetting, requestAPI } from "./utils.js";
-import { error } from "./dialog.js";
 
 export async function setupClientSync (callback) {
 	const scheme = getSetting("sync-scheme");
@@ -32,12 +31,12 @@ export async function setupClientSync (callback) {
 				callback();
 			}
 			else {
-				error("clientsync: recieved unexpected message from server, closing socket.");
+				console.error("clientsync: recieved unexpected message from server, closing socket.");
 				socket.close();
 			}
 		});
 	}
 	else {
-		error(`clientsync: unsupported scheme ${scheme} selected.`);
+		console.error(`clientsync: unsupported scheme ${scheme} selected.`);
 	}
 }

web/scripts/config.js

@@ -1,5 +1,5 @@
 import { requestPVE, requestAPI, goToPage, getURIData, setAppearance, setIconSrc, requestDash } from "./utils.js";
-import { error, dialog } from "./dialog.js";
+import { alert, dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
@@ -59,7 +59,7 @@ class VolumeAction extends HTMLElement {
 				this.setStatusLoading();
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/detach`, "POST");
 				if (result.status !== 200) {
-					error(`Attempted to detach ${disk} but got: ${result.error}`);
+					alert(`Attempted to detach ${disk} but got: ${result.error}`);
 				}
 				refreshVolumes();
 				refreshBoot();
@@ -80,7 +80,7 @@ class VolumeAction extends HTMLElement {
 				const disk = `${prefix}${device}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/attach`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
+					alert(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
 				}
 				refreshVolumes();
 				refreshBoot();
@@ -98,7 +98,7 @@ class VolumeAction extends HTMLElement {
 				};
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/resize`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to resize ${disk} but got: ${result.error}`);
+					alert(`Attempted to resize ${disk} but got: ${result.error}`);
 				}
 				refreshVolumes();
 				refreshBoot();
@@ -117,7 +117,7 @@ class VolumeAction extends HTMLElement {
 				};
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/move`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
+					alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
 				}
 				refreshVolumes();
 				refreshBoot();
@@ -141,7 +141,7 @@ class VolumeAction extends HTMLElement {
 				this.setStatusLoading();
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/delete`, "DELETE");
 				if (result.status !== 200) {
-					error(`Attempted to delete ${disk} but got: ${result.error}`);
+					alert(`Attempted to delete ${disk} but got: ${result.error}`);
 				}
 				refreshVolumes();
 				refreshBoot();
@@ -162,7 +162,7 @@ async function initVolumes () {
 async function refreshVolumes () {
 	let volumes = await requestDash(`/config/volumes?node=${node}&type=${type}&vmid=${vmid}`, "GET");
 	if (volumes.status !== 200) {
-		error("Error fetching instance volumes.");
+		alert("Error fetching instance volumes.");
 	}
 	else {
 		volumes = volumes.data;
@@ -186,7 +186,7 @@ async function handleDiskAdd () {
 			const disk = `${prefix}${id}`;
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
 			if (result.status !== 200) {
-				error(`Attempted to create ${disk} but got: ${result.error}`);
+				alert(`Attempted to create ${disk} but got: ${result.error}`);
 			}
 			refreshVolumes();
 			refreshBoot();
@@ -214,7 +214,7 @@ async function handleCDAdd () {
 			const disk = `ide${form.get("device")}`;
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/disk/${disk}/create`, "POST", body);
 			if (result.status !== 200) {
-				error(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
+				alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
 			}
 			refreshVolumes();
 			refreshBoot();
@@ -263,7 +263,7 @@ class NetworkAction extends HTMLElement {
 				const net = `${netID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/modify`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to change ${net} but got: ${result.error}`);
+					alert(`Attempted to change ${net} but got: ${result.error}`);
 				}
 				refreshNetworks();
 				refreshBoot();
@@ -281,7 +281,7 @@ class NetworkAction extends HTMLElement {
 				const net = `${netID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/delete`, "DELETE");
 				if (result.status !== 200) {
-					error(`Attempted to delete ${net} but got: ${result.error}`);
+					alert(`Attempted to delete ${net} but got: ${result.error}`);
 				}
 				refreshNetworks();
 				refreshBoot();
@@ -299,7 +299,7 @@ async function initNetworks () {
 async function refreshNetworks () {
 	let nets = await requestDash(`/config/nets?node=${node}&type=${type}&vmid=${vmid}`, "GET");
 	if (nets.status !== 200) {
-		error("Error fetching instance nets.");
+		alert("Error fetching instance nets.");
 	}
 	else {
 		nets = nets.data;
@@ -324,7 +324,7 @@ async function handleNetworkAdd () {
 			const net = `net${id}`;
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/net/${net}/create`, "POST", body);
 			if (result.status !== 200) {
-				error(`Attempted to create ${net} but got: ${result.error}`);
+				alert(`Attempted to create ${net} but got: ${result.error}`);
 			}
 			refreshNetworks();
 			refreshBoot();
@@ -367,7 +367,7 @@ class DeviceAction extends HTMLElement {
 				const device = `${deviceID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/modify`, "POST", body);
 				if (result.status !== 200) {
-					error(`Attempted to add ${device} but got: ${result.error}`);
+					alert(`Attempted to add ${device} but got: ${result.error}`);
 				}
 				refreshDevices();
 			}
@@ -389,7 +389,7 @@ class DeviceAction extends HTMLElement {
 				const device = `${deviceID}`;
 				const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${device}/delete`, "DELETE");
 				if (result.status !== 200) {
-					error(`Attempted to delete ${device} but got: ${result.error}`);
+					alert(`Attempted to delete ${device} but got: ${result.error}`);
 				}
 				refreshDevices();
 			}
@@ -408,7 +408,7 @@ async function initDevices () {
 async function refreshDevices () {
 	let devices = await requestDash(`/config/devices?node=${node}&type=${type}&vmid=${vmid}`, "GET");
 	if (devices.status !== 200) {
-		error("Error fetching instance devices.");
+		alert("Error fetching instance devices.");
 	}
 	else {
 		devices = devices.data;
@@ -431,7 +431,7 @@ async function handleDeviceAdd () {
 			const deviceID = `hostpci${hostpci}`;
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/pci/${deviceID}/create`, "POST", body);
 			if (result.status !== 200) {
-				error(`Attempted to add ${body.device} but got: ${result.error}`);
+				alert(`Attempted to add ${body.device} but got: ${result.error}`);
 			}
 			refreshDevices();
 		}
@@ -447,12 +447,12 @@ async function handleDeviceAdd () {
 async function refreshBoot () {
 	let boot = await requestDash(`/config/boot?node=${node}&type=${type}&vmid=${vmid}`, "GET");
 	if (boot.status !== 200) {
-		error("Error fetching instance boot order.");
+		alert("Error fetching instance boot order.");
 	}
 	else if (type === "qemu") {
 		boot = boot.data;
-		const container = document.querySelector("#boot-order");
+		const order = document.querySelector("#boot-order");
-		container.setHTMLUnsafe(boot);
+		order.setHTMLUnsafe(boot);
 	}
 }
 
@@ -474,6 +474,6 @@ async function handleFormExit (event) {
 		goToPage("index");
 	}
 	else {
-		error(`Attempted to set basic resources but got: ${result.error}`);
+		alert(`Attempted to set basic resources but got: ${result.error}`);
 	}
 }

web/scripts/dialog.js

@@ -41,6 +41,34 @@ export function dialog (template, onclose = async (_result, _form) => { }) {
 	return dialog;
 }
 
+export function alert (message) {
+	const dialog = document.querySelector("#alert-dialog");
+	if (dialog == null) {
+		const dialog = document.createElement("dialog");
+		dialog.id = "alert-dialog";
+		dialog.innerHTML = `
+			<form method="dialog">
+				<p class="w3-large" id="prompt">Alert</p>
+				<p class="w3-center" style="margin-bottom: 0;">${message}</p>
+				<div class="w3-center">
+					<button class="w3-button w3-margin" id="submit">OK</button>
+				</div>
+			</form>
+		`;
+		dialog.className = "w3-container w3-card w3-border-0";
+		document.body.append(dialog);
+		dialog.showModal();
+		dialog.addEventListener("close", () => {
+			dialog.parentElement.removeChild(dialog);
+		});
+		return dialog;
+	}
+	else {
+		console.error("Attempted to create a new alert while one already exists!");
+		return null;
+	}
+}
+
 class ErrorDialog extends HTMLElement {
 	shadowRoot = null;
 	dialog = null;
@@ -59,18 +87,15 @@ class ErrorDialog extends HTMLElement {
 					max-height: 20lh; 
 					min-height: 20lh; 
 					overflow-y: scroll;
-					padding-left: 12px;
-					padding-right: 12px;
 				}
 				#errors * {
 					margin: 0;
-					width: 100%;
 				}
 			</style>
 			<dialog class="w3-container w3-card w3-border-0">
 				<form method="dialog">
 					<p class="w3-large" id="prompt">Error</p>
-					<div id="errors" class="flex column"></div>
+					<div id="errors" class="flex column-reverse"></div>
 					<div class="w3-center" id="controls">
 						<button class="w3-button w3-margin" type="submit" value="ok">OK</button>
 						<button class="w3-button w3-margin" type="submit" value="copy">Copy</button>
@@ -96,7 +121,7 @@ class ErrorDialog extends HTMLElement {
 				}
 				navigator.clipboard.writeText(errors);
 			}
-			this.dialog.close();
+			this.parentElement.removeChild(this);
 		});
 	}
 
@@ -116,7 +141,7 @@ customElements.define("error-dialog", ErrorDialog);
 
 export function error (message) {
 	let dialog = document.querySelector("error-dialog");
-	if (dialog === null) {
+	if (dialog == null) {
 		dialog = document.createElement("error-dialog");
 		document.body.append(dialog);
 		dialog.appendError(message);

web/scripts/index.js

@@ -1,16 +1,14 @@
 import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js";
-import { dialog, error } from "./dialog.js";
+import { alert, dialog, error } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
 import wfaInit from "../modules/wfa.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
-var wfa;
-
 async function init () {
 	setAppearance();
 
-	wfa = await wfaInit("modules/wfa.wasm");
+	wfaInit("modules/wfa.wasm");
 	initInstances();
 
 	document.querySelector("#instance-add").addEventListener("click", handleInstanceAddButton);
@@ -177,7 +175,7 @@ class InstanceCard extends HTMLElement {
 							break;
 						}
 						else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
-							error(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
+							alert(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
 							break;
 						}
 						else { // task has not stopped
@@ -205,7 +203,7 @@ class InstanceCard extends HTMLElement {
 
 					const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
 					if (result.status !== 200) {
-						error(`Attempted to delete ${this.vmid} but got: ${result.error}`);
+						alert(`Attempted to delete ${this.vmid} but got: ${result.error}`);
 					}
 
 					this.actionLock = false;
@@ -218,8 +216,12 @@ class InstanceCard extends HTMLElement {
 
 customElements.define("instance-card", InstanceCard);
 
+async function getInstancesFragment () {
+	return await requestDash("/index/instances", "GET");
+}
+
 async function refreshInstances () {
-	let instances = await requestDash("/index/instances", "GET");
+	let instances = await getInstancesFragment();
 	if (instances.status !== 200) {
 		error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`);
 	}
@@ -274,8 +276,8 @@ function sortInstances () {
 		};
 		criteria = (item, query) => {
 			// lower is better
-			const { score, CIGAR } = wfa.wfAlign(query, item, penalties, true);
+			const { score, CIGAR } = global.wfa.wfAlign(query, item, penalties, true);
-			const alignment = wfa.DecodeCIGAR(CIGAR);
+			const alignment = global.wfa.DecodeCIGAR(CIGAR);
 			return { score: score / item.length, alignment };
 		};
 	}
@@ -335,7 +337,7 @@ async function handleInstanceAddButton () {
 				refreshInstances();
 			}
 			else {
-				error(`Attempted to create new instance ${vmid} but got: ${result.error}`);
+				alert(`Attempted to create new instance ${vmid} but got: ${result.error}`);
 				refreshInstances();
 			}
 		}

web/scripts/login.js

@@ -1,12 +1,11 @@
 import { goToPage, setAppearance, requestAPI } from "./utils.js";
-import { error } from "./dialog.js";
+import { alert } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
 async function init () {
 	await deleteAllCookies();
 	setAppearance();
-
 	const formSubmitButton = document.querySelector("#submit");
 	formSubmitButton.addEventListener("click", async (e) => {
 		e.preventDefault();
@@ -20,16 +19,18 @@ async function init () {
 			goToPage("index");
 		}
 		else if (ticket.status === 401) {
-			error("Authenticaton failed.");
+			alert("Authenticaton failed.");
 			formSubmitButton.innerText = "LOGIN";
 		}
 		else if (ticket.status === 408) {
-			error("Network error.");
+			alert("Network error.");
 			formSubmitButton.innerText = "LOGIN";
 		}
 		else {
-			error(`An error occured: ${JSON.stringify(ticket)}`);
+			alert("An error occured.");
+			console.error(ticket);
 			formSubmitButton.innerText = "LOGIN";
+			console.error(ticket.error);
 		}
 	});
 }

web/templates/base.go.tmpl

@@ -1,4 +1,4 @@
-{{/* <head> common across all pages */}}
+{{/* <head> common across all pages*/}}
 {{define "head"}}
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -15,7 +15,7 @@
 <link rel="stylesheet" href="css/form.css">
 {{end}}
 
-{{/* <header> common across all pages */}}
+{{/* <header> common across all pages*/}}
 {{define "header"}}
 <header>
 	<h1>{{.global.Organization}}</h1>