revert ssr dialog interface

web/html/index.html

@@ -64,11 +64,7 @@
 			</section>
 		</main>
 
-		<modal-dialog id="create-instance-dialog">
+		<template id="create-instance-dialog">
-			<template shadowrootmode="open">
-				<link rel="stylesheet" href="modules/w3.css">
-				<link rel="stylesheet" href="css/style.css">
-				<link rel="stylesheet" href="css/form.css">
 			<dialog class="w3-container w3-card w3-border-0">
 				<p class="w3-large" id="prompt" style="text-align: center;">
 					Create New Instance
@@ -113,6 +109,5 @@
 				</div>
 			</dialog>
 		</template>
-		</modal-dialog>
 	</body>
 </html>

web/scripts/account.js

@@ -1,18 +1,17 @@
 import { requestAPI, setAppearance } from "./utils.js";
-import "./dialog.js";
+import { dialog } from "./dialog.js";
 
 window.addEventListener("DOMContentLoaded", init);
 
 async function init () {
 	setAppearance();
 
-	initPasswordChangeForm();
 	document.querySelector("#change-password").addEventListener("click", handlePasswordChangeButton);
 }
 
-function initPasswordChangeForm () {
+function handlePasswordChangeButton () {
-	const d = document.querySelector("#change-password-dialog");
+	const template = document.querySelector("#change-password-dialog");
-	d.setOnClose(async (result, form) => {
+	const d = dialog(template, async (result, form) => {
 		if (result === "confirm") {
 			const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") });
 			if (result.status !== 200) {
@@ -23,16 +22,9 @@ function initPasswordChangeForm () {
 
 	const password = d.querySelector("#new-password");
 	const confirmPassword = d.querySelector("#confirm-password");
-
 	function validatePassword () {
 		confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
 	}
-
 	password.addEventListener("change", validatePassword);
 	confirmPassword.addEventListener("keyup", validatePassword);
 }
-
-function handlePasswordChangeButton () {
-	const d = document.querySelector("#change-password-dialog");
-	d.showModal();
-}

web/scripts/dialog.js

@@ -1,85 +1,41 @@
 /**
- * Custom modal dialog with form support. Assumes the following structure:
+ * Spawn modal dialog from template node. Assumes the following structure:
- * <modal-dialog><template shadowrootmode="open">
+ * <template>
+ * <dialog>
  * <p id="prompt"></p>
  * <div id="body">
  * <form id="form"> ... </form>
  * </div>
  * <div id="controls">
- * <button value="..." form=""
+ * <button value="..." form="form"
+ * <button value="..." form="form"
+ * ...
  * </div>
- * </modal-dialog></template>
+ * </dialog>
+ * </template>
  * Where prompt is the modal dialog's prompt or header,
  * body contains an optional form or other information,
  * and controls contains a series of buttons which controls the form
  */
-class ModalDialog extends HTMLElement {
+export function dialog (template, onclose = async (result, form) => { }) {
-	shadowRoot = null;
+	const dialog = template.content.querySelector("dialog").cloneNode(true);
-	dialog = null;
+	document.body.append(dialog);
-
-	constructor () {
-		super();
-		// setup shadowDOM
-		const internals = this.attachInternals();
-		this.shadowRoot = internals.shadowRoot;
-		this.dialog = this.shadowRoot.querySelector("dialog");
-	}
-
-	showModal () {
-		this.dialog.showModal();
-	}
-
-	querySelector (query) {
-		return this.shadowRoot.querySelector(query);
-	}
-
-	querySelectorAll (query) {
-		return this.shadowRoot.querySelectorAll(query);
-	}
-
-	// it is usually not safe to call this on each dialog invocation
-	setOnClose (callback = (result, form) => {}) {
-		this.dialog.addEventListener("close", () => {
-			const formElem = this.dialog.querySelector("form");
-			const formData = formElem ? new FormData(formElem) : null;
-			callback(this.dialog.returnValue, formData);
-			formElem.reset();
-			this.dialog.close();
-		});
-	}
-}
-
-customElements.define("modal-dialog", ModalDialog);
-
-export function dialog (header, body, onclose = async (result, form) => { }) {
-	const dialog = document.createElement("dialog");
-	dialog.innerHTML = `
-		<p class="w3-large" id="prompt" style="text-align: center;"></p>
-		<div id="body"></div>
-		<div class="w3-center w3-container">
-			<button id="cancel" value="cancel" form="form" class="w3-button w3-margin" style="background-color: var(--negative-color, #f00); color: var(--lightbg-text-color, black);" formnovalidate>CANCEL</button>
-			<button id="confirm" value="confirm" form="form" class="w3-button w3-margin" style="background-color: var(--positive-color, #0f0); color: var(--lightbg-text-color, black);">CONFIRM</button>
-		</div>
-	`;
-	dialog.className = "w3-container w3-card w3-border-0";
-	dialog.querySelector("#prompt").innerText = header;
-	dialog.querySelector("#body").innerHTML = body;
 	dialog.addEventListener("close", async () => {
 		const formElem = dialog.querySelector("form");
 		const formData = formElem ? new FormData(formElem) : null;
 		await onclose(dialog.returnValue, formData);
+		formElem.reset();
+		dialog.close();
 		dialog.parentElement.removeChild(dialog);
 	});
 	if (!dialog.querySelector("form")) {
-		dialog.querySelector("#confirm").addEventListener("click", async (e) => {
+		for (const control of dialog.querySelector("#controls").childNodes) {
-			e.preventDefault();
+			control.addEventListener("click", async (e) => {
-			dialog.close(e.target.value);
-		});
-		dialog.querySelector("#cancel").addEventListener("click", async (e) => {
 				e.preventDefault();
 				dialog.close(e.target.value);
 			});
 		}
+	}
 	document.body.append(dialog);
 	dialog.showModal();
 	return dialog;

web/scripts/index.js

@@ -1,5 +1,5 @@
 import { requestPVE, requestAPI, setAppearance, getSearchSettings, requestDash, setSVGSrc, setSVGAlt } from "./utils.js";
-import { alert } from "./dialog.js";
+import { alert, dialog } from "./dialog.js";
 import { setupClientSync } from "./clientsync.js";
 import wfaInit from "../modules/wfa.js";
 
@@ -11,7 +11,6 @@ async function init () {
 	wfaInit("modules/wfa.wasm");
 	initInstances();
 
-	initInstanceAddForm();
 	document.querySelector("#instance-add").addEventListener("click", handleInstanceAddButton);
 	document.querySelector("#vm-search").addEventListener("input", sortInstances);
 
@@ -120,7 +119,6 @@ class InstanceCard extends HTMLElement {
 			nameParagraph.innerHTML = this.name ? this.name : " ";
 		}
 
-		this.initPowerForm();
 		const powerButton = this.shadowRoot.querySelector("#power-btn");
 		if (powerButton.classList.contains("clickable")) {
 			powerButton.onclick = this.handlePowerButton.bind(this);
@@ -133,7 +131,6 @@ class InstanceCard extends HTMLElement {
 			};
 		}
 
-		this.initDeleteForm();
 		const deleteButton = this.shadowRoot.querySelector("#delete-btn");
 		if (deleteButton.classList.contains("clickable")) {
 			deleteButton.onclick = this.handleDeleteButton.bind(this);
@@ -156,9 +153,10 @@ class InstanceCard extends HTMLElement {
 		setSVGAlt(powerbtn, "");
 	}
 
-	async initPowerForm () {
+	async handlePowerButton () {
-		const dialog = this.shadowRoot.querySelector("#power-dialog");
+		if (!this.actionLock) {
-		dialog.setOnClose(async (result, form) => {
+			const template = this.shadowRoot.querySelector("#power-dialog");
+			dialog(template, async (result, form) => {
 				if (result === "confirm") {
 					this.actionLock = true;
 					const targetAction = this.status === "running" ? "stop" : "start";
@@ -187,17 +185,12 @@ class InstanceCard extends HTMLElement {
 				}
 			});
 		}
-
-	async handlePowerButton () {
-		if (!this.actionLock) {
-			const dialog = this.shadowRoot.querySelector("#power-dialog");
-			dialog.showModal();
-		}
 	}
 
-	initDeleteForm () {
+	handleDeleteButton () {
-		const dialog = this.shadowRoot.querySelector("#delete-dialog");
+		if (!this.actionLock && this.status === "stopped") {
-		dialog.setOnClose(async (result, form) => {
+			const template = this.shadowRoot.querySelector("#delete-dialog");
+			dialog(template, async (result, form) => {
 				if (result === "confirm") {
 					this.actionLock = true;
 
@@ -215,12 +208,6 @@ class InstanceCard extends HTMLElement {
 				}
 			});
 		}
-
-	handleDeleteButton () {
-		if (!this.actionLock && this.status === "stopped") {
-			const dialog = this.shadowRoot.querySelector("#delete-dialog");
-			dialog.showModal();
-		}
 	}
 }
 
@@ -322,10 +309,9 @@ function sortInstances () {
 	}
 }
 
-async function initInstanceAddForm () {
+async function handleInstanceAddButton () {
-	// form submit logic
+	const template = document.querySelector("#create-instance-dialog");
-	const d = document.querySelector("#create-instance-dialog");
+	const d = dialog(template, async (result, form) => {
-	d.setOnClose(async (result, form) => {
 		if (result === "confirm") {
 			const body = {
 				name: form.get("name"),
@@ -354,19 +340,6 @@ async function initInstanceAddForm () {
 		}
 	});
 
-	// custom password validation checker
-	const password = d.querySelector("#password");
-	const confirmPassword = d.querySelector("#confirm-password");
-	function validatePassword () {
-		confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
-	}
-	password.addEventListener("change", validatePassword);
-	confirmPassword.addEventListener("keyup", validatePassword);
-}
-
-async function handleInstanceAddButton () {
-	const d = document.querySelector("#create-instance-dialog");
-
 	const templates = await requestAPI("/user/ct-templates", "GET");
 
 	const typeSelect = d.querySelector("#type");
@@ -454,5 +427,14 @@ async function handleInstanceAddButton () {
 	}
 	templateImage.selectedIndex = -1;
 
+	// setup custom password checker for containers
+	const password = d.querySelector("#password");
+	const confirmPassword = d.querySelector("#confirm-password");
+	function validatePassword () {
+		confirmPassword.setCustomValidity(password.value !== confirmPassword.value ? "Passwords Don't Match" : "");
+	}
+	password.addEventListener("change", validatePassword);
+	confirmPassword.addEventListener("keyup", validatePassword);
+
 	d.showModal();
 }

web/templates/instance-card.go.tmpl

@@ -62,8 +62,7 @@
 			</div>
 		</div>
 		
-		<modal-dialog id="power-dialog">
+		<template id="power-dialog">
-			<template shadowrootmode="open">
 			<link rel="stylesheet" href="modules/w3.css">
 			<link rel="stylesheet" href="css/style.css">
 			<link rel="stylesheet" href="css/form.css">
@@ -94,10 +93,8 @@
 				</div>
 			</dialog>
 		</template>
-		</modal-dialog>
 
-		<modal-dialog id="delete-dialog">
+		<template id="delete-dialog">
-			<template shadowrootmode="open">
 			<link rel="stylesheet" href="modules/w3.css">
 			<link rel="stylesheet" href="css/style.css">
 			<link rel="stylesheet" href="css/form.css">
@@ -118,7 +115,6 @@
 				</div>
 			</dialog>
 		</template>
-		</modal-dialog>
 	</template>
 </instance-card>
 {{end}}