From 308d133e6ef31afc03f73f9c2eb9025389a003b7 Mon Sep 17 00:00:00 2001 From: Arthur Lu Date: Fri, 13 Jun 2025 00:30:54 +0000 Subject: [PATCH] implement ssr modal dialog for index and account --- ProxmoxAAS-Fabric | 1 + web/html/account.html | 25 ++++++++++ web/html/index.html | 102 ++++++++++++++++++++--------------------- web/scripts/account.js | 23 +++++----- web/scripts/index.js | 21 +++++---- 5 files changed, 99 insertions(+), 73 deletions(-) create mode 160000 ProxmoxAAS-Fabric diff --git a/ProxmoxAAS-Fabric b/ProxmoxAAS-Fabric new file mode 160000 index 0000000..81815ba --- /dev/null +++ b/ProxmoxAAS-Fabric @@ -0,0 +1 @@ +Subproject commit 81815bab820220fc91bed75f162bee712b78334d diff --git a/web/html/account.html b/web/html/account.html index eeb74d4..21577ef 100644 --- a/web/html/account.html +++ b/web/html/account.html @@ -73,5 +73,30 @@ + + + + \ No newline at end of file diff --git a/web/html/index.html b/web/html/index.html index 019acc8..2915157 100644 --- a/web/html/index.html +++ b/web/html/index.html @@ -63,56 +63,56 @@ - - - - + + + + \ No newline at end of file diff --git a/web/scripts/account.js b/web/scripts/account.js index 07c17b4..a0cfb1c 100644 --- a/web/scripts/account.js +++ b/web/scripts/account.js @@ -1,24 +1,18 @@ -import { dialog } from "./dialog.js"; import { requestAPI, setAppearance } from "./utils.js"; +import "./dialog.js"; window.addEventListener("DOMContentLoaded", init); async function init () { setAppearance(); - document.querySelector("#change-password").addEventListener("click", handlePasswordChangeForm); + initPasswordChangeForm(); + document.querySelector("#change-password").addEventListener("click", handlePasswordChangeButton); } -function handlePasswordChangeForm () { - const body = ` -
- - - - -
- `; - const d = dialog("Change Password", body, async (result, form) => { +function initPasswordChangeForm () { + const d = document.querySelector("#change-password-dialog"); + d.setOnClose(async (result, form) => { if (result === "confirm") { const result = await requestAPI("/access/password", "POST", { password: form.get("new-password") }); if (result.status !== 200) { @@ -37,3 +31,8 @@ function handlePasswordChangeForm () { password.addEventListener("change", validatePassword); confirmPassword.addEventListener("keyup", validatePassword); } + +function handlePasswordChangeButton () { + const d = document.querySelector("#change-password-dialog"); + d.showModal(); +} diff --git a/web/scripts/index.js b/web/scripts/index.js index 567a4ec..ab44f04 100644 --- a/web/scripts/index.js +++ b/web/scripts/index.js @@ -323,6 +323,7 @@ function sortInstances () { } async function initInstanceAddForm () { + // form submit logic const d = document.querySelector("#create-instance-dialog"); d.setOnClose(async (result, form) => { if (result === "confirm") { @@ -352,6 +353,15 @@ 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 () { @@ -400,6 +410,7 @@ async function handleInstanceAddButton () { nodeSelect.addEventListener("change", async () => { // change rootfs storage based on node const node = nodeSelect.value; const storage = await requestPVE(`/nodes/${node}/storage`, "GET"); + rootfsStorage.innerHTML = ""; storage.data.forEach((element) => { if (element.content.includes(rootfsContent)) { rootfsStorage.add(new Option(element.storage)); @@ -443,15 +454,5 @@ async function handleInstanceAddButton () { } templateImage.selectedIndex = -1; - 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(); }