fix makefile phony targets

.gitignore

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

Makefile

@@ -1,13 +1,14 @@
-.PHONY: build test clean wfa-js
+.PHONY: build build-web build-wfa-js clean clean-wfa-js ensure-dist workflow-init
 
-build: clean build-wfa-js
+build: clean ensure-dist build-web 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-wfa-js:
+build-web: ensure-dist
+	cp -rL web/ dist/web/
+
+build-wfa-js: ensure-dist
 	$(MAKE) -C WFA-JS
 	cp -f WFA-JS/dist/* web/modules
 
@@ -18,3 +19,9 @@ 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/. .

app/app.go

@@ -6,7 +6,7 @@ import (
 	"log"
 	"proxmoxaas-dashboard/app/common"
 	"proxmoxaas-dashboard/app/routes"
-	"proxmoxaas-dashboard/dist/web" // go will complain here until the first build
+	"web" // go will complain here until the first build
 
 	"github.com/gin-gonic/gin"
 	"github.com/tdewolff/minify/v2"

dev_config/.htmlvalidateignore

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

dev_config/.stylelintignore

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

dev_config/eslint.config.mjs

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

go.mod

@@ -8,9 +8,11 @@ require (
 	github.com/go-viper/mapstructure/v2 v2.5.0
 	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

package.json

@@ -1,18 +0,0 @@
-{
-	"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,6 +130,19 @@ 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;

web/go.mod

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

web/html/account.html

@@ -58,9 +58,9 @@
 				<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" required>
+						<input class="w3-input w3-border" id="new-password" name="new-password" type="password" autocomplete="new-password" required>
 						<label for="confirm-password">Confirm Password</label>
-						<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" required>
+						<input class="w3-input w3-border" id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required>
 					</form>
 				</div>
 				<div id="controls" class="w3-center w3-container">

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" required disabled>
+										<input class="w3-input w3-border container-specific none" name="password" id="password" type="password" autocomplete="new-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" required disabled>
+										<input class="w3-input w3-border container-specific none" name="confirm-password" id="confirm-password" type="password" autocomplete="new-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()
+			res(wasm)
 		}
 		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 } from "./dialog.js";
+import { dialog, error } 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) {
-				alert(`Attempted to change password but got: ${result.error}`);
+				error(`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 { alert, dialog } from "./dialog.js";
+import { error, 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) {
-					alert(`Attempted to edit backup but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to delete backup but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to delete backup but got: ${result.error}`);
+					error(`Attempted to delete backup but got: ${result.error}`);
 				}
 				refreshBackups();
 			}
@@ -116,14 +116,10 @@ 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 getBackupsFragment();
+	let backups = await requestDash(`/backups/backups?node=${node}&type=${type}&vmid=${vmid}`, "GET");
 	if (backups.status !== 200) {
-		alert("Error fetching backups.");
+		error("Error fetching backups.");
 	}
 	else {
 		backups = backups.data;
@@ -141,7 +137,7 @@ async function handleBackupAddButton () {
 			};
 			const result = await requestAPI(`/cluster/${node}/${type}/${vmid}/backup`, "POST", body);
 			if (result.status !== 200) {
-				alert(`Attempted to create backup but got: ${result.error}`);
+				error(`Attempted to create backup but got: ${result.error}`);
 			}
 			refreshBackups();
 		}

web/scripts/clientsync.js

@@ -1,4 +1,5 @@
 import { getSetting, requestAPI } from "./utils.js";
+import { error } from "./dialog.js";
 
 export async function setupClientSync (callback) {
 	const scheme = getSetting("sync-scheme");
@@ -31,12 +32,12 @@ export async function setupClientSync (callback) {
 				callback();
 			}
 			else {
-				console.error("clientsync: recieved unexpected message from server, closing socket.");
+				error("clientsync: recieved unexpected message from server, closing socket.");
 				socket.close();
 			}
 		});
 	}
 	else {
-		console.error(`clientsync: unsupported scheme ${scheme} selected.`);
+		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 { alert, dialog } from "./dialog.js";
+import { error, 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) {
-					alert(`Attempted to detach ${disk} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to attach ${this.dataset.volume} to ${disk} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to resize ${disk} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to move ${disk} to ${body.storage} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to delete ${disk} but got: ${result.error}`);
+					error(`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) {
-		alert("Error fetching instance volumes.");
+		error("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) {
-				alert(`Attempted to create ${disk} but got: ${result.error}`);
+				error(`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) {
-				alert(`Attempted to mount ${body.iso} to ${disk} but got: result.error`);
+				error(`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) {
-					alert(`Attempted to change ${net} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to delete ${net} but got: ${result.error}`);
+					error(`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) {
-		alert("Error fetching instance nets.");
+		error("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) {
-				alert(`Attempted to create ${net} but got: ${result.error}`);
+				error(`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) {
-					alert(`Attempted to add ${device} but got: ${result.error}`);
+					error(`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) {
-					alert(`Attempted to delete ${device} but got: ${result.error}`);
+					error(`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) {
-		alert("Error fetching instance devices.");
+		error("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) {
-				alert(`Attempted to add ${body.device} but got: ${result.error}`);
+				error(`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) {
-		alert("Error fetching instance boot order.");
+		error("Error fetching instance boot order.");
 	}
 	else if (type === "qemu") {
 		boot = boot.data;
-		const order = document.querySelector("#boot-order");
-		order.setHTMLUnsafe(boot);
+		const container = document.querySelector("#boot-order");
+		container.setHTMLUnsafe(boot);
 	}
 }
 
@@ -474,6 +474,6 @@ async function handleFormExit (event) {
 		goToPage("index");
 	}
 	else {
-		alert(`Attempted to set basic resources but got: ${result.error}`);
+		error(`Attempted to set basic resources but got: ${result.error}`);
 	}
 }

web/scripts/dialog.js

@@ -41,34 +41,6 @@ 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;
@@ -87,15 +59,18 @@ 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-reverse"></div>
+					<div id="errors" class="flex column"></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>
@@ -121,7 +96,7 @@ class ErrorDialog extends HTMLElement {
 				}
 				navigator.clipboard.writeText(errors);
 			}
-			this.parentElement.removeChild(this);
+			this.dialog.close();
 		});
 	}
 
@@ -141,7 +116,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,14 +1,16 @@
 import { requestPVE, requestAPI, setAppearance, getSetting, requestDash, setIconSrc, setIconAlt } from "./utils.js";
-import { alert, dialog, error } from "./dialog.js";
+import { 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();
 
-	wfaInit("modules/wfa.wasm");
+	wfa = await wfaInit("modules/wfa.wasm");
 	initInstances();
 
 	document.querySelector("#instance-add").addEventListener("click", handleInstanceAddButton);
@@ -175,7 +177,7 @@ class InstanceCard extends HTMLElement {
 							break;
 						}
 						else if (taskStatus.data.status === "stopped") { // task stopped but was not successful
-							alert(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
+							error(`Attempted to ${targetAction} ${this.vmid} but got: ${taskStatus.data.exitstatus}`);
 							break;
 						}
 						else { // task has not stopped
@@ -203,7 +205,7 @@ class InstanceCard extends HTMLElement {
 
 					const result = await requestAPI(`/cluster/${this.node.name}/${this.type}/${this.vmid}/delete`, "DELETE");
 					if (result.status !== 200) {
-						alert(`Attempted to delete ${this.vmid} but got: ${result.error}`);
+						error(`Attempted to delete ${this.vmid} but got: ${result.error}`);
 					}
 
 					this.actionLock = false;
@@ -216,12 +218,8 @@ class InstanceCard extends HTMLElement {
 
 customElements.define("instance-card", InstanceCard);
 
-async function getInstancesFragment () {
-	return await requestDash("/index/instances", "GET");
-}
-
 async function refreshInstances () {
-	let instances = await getInstancesFragment();
+	let instances = await requestDash("/index/instances", "GET");
 	if (instances.status !== 200) {
 		error(`Error fetching instances: ${instances.status} ${instances.error !== undefined ? instances.error : ""}`);
 	}
@@ -276,8 +274,8 @@ function sortInstances () {
 		};
 		criteria = (item, query) => {
 			// lower is better
-			const { score, CIGAR } = global.wfa.wfAlign(query, item, penalties, true);
-			const alignment = global.wfa.DecodeCIGAR(CIGAR);
+			const { score, CIGAR } = wfa.wfAlign(query, item, penalties, true);
+			const alignment = wfa.DecodeCIGAR(CIGAR);
 			return { score: score / item.length, alignment };
 		};
 	}
@@ -337,7 +335,7 @@ async function handleInstanceAddButton () {
 				refreshInstances();
 			}
 			else {
-				alert(`Attempted to create new instance ${vmid} but got: ${result.error}`);
+				error(`Attempted to create new instance ${vmid} but got: ${result.error}`);
 				refreshInstances();
 			}
 		}

web/scripts/login.js

@@ -1,11 +1,12 @@
 import { goToPage, setAppearance, requestAPI } from "./utils.js";
-import { alert } from "./dialog.js";
+import { error } 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();
@@ -19,18 +20,16 @@ async function init () {
 			goToPage("index");
 		}
 		else if (ticket.status === 401) {
-			alert("Authenticaton failed.");
+			error("Authenticaton failed.");
 			formSubmitButton.innerText = "LOGIN";
 		}
 		else if (ticket.status === 408) {
-			alert("Network error.");
+			error("Network error.");
 			formSubmitButton.innerText = "LOGIN";
 		}
 		else {
-			alert("An error occured.");
-			console.error(ticket);
+			error(`An error occured: ${JSON.stringify(ticket)}`);
 			formSubmitButton.innerText = "LOGIN";
-			console.error(ticket.error);
 		}
 	});
 }