Implement admin back-pass flow and guarded admin actions

wwwroot/js/app-admin-handlers.js

@@ -3,7 +3,7 @@ import { t } from "./i18n.js";
 import { state } from "./state.js";
 import { $, toast } from "./dom.js";
 import {
-    openConfirmModal,
+    openPasswordConfirmModal,
     openResultsRelockModal,
     renderPhasePill,
 } from "./ui.js";
@@ -13,8 +13,10 @@ async function adminAction(fn, successMessage, runSerializedRefresh) {
         await fn();
         toast(successMessage);
         await runSerializedRefresh();
+        return true;
     } catch (err) {
         toast(err.message, true);
+        return false;
     }
 }
 
@@ -32,24 +34,56 @@ function setupAdminPanelToggle() {
 }
 
 function setupResetButtons(runSerializedRefresh) {
+    const askPasswordThenRun = ({
+        title,
+        body,
+        confirmLabel,
+        action,
+        done,
+    }) => {
+        openPasswordConfirmModal({
+            title,
+            body,
+            confirmLabel,
+            onConfirm: async (password, close) => {
+                const success = await adminAction(
+                    () => action(password),
+                    done,
+                    runSerializedRefresh,
+                );
+                if (success) close();
+            },
+        });
+    };
+
     $("reset").addEventListener("click", () =>
-        adminAction(adminApi.reset, t("admin.resetDone"), runSerializedRefresh),
+        askPasswordThenRun({
+            title: t("admin.reset"),
+            body: t("admin.resetConfirmBody"),
+            confirmLabel: t("admin.reset"),
+            action: (password) => adminApi.reset(password),
+            done: t("admin.resetDone"),
+        }),
     );
+
     $("factory-reset").addEventListener("click", () =>
-        adminAction(
-            adminApi.factoryReset,
-            t("admin.factoryResetDone"),
-            runSerializedRefresh,
-        ),
+        askPasswordThenRun({
+            title: t("admin.factoryReset"),
+            body: t("admin.factoryResetConfirmBody"),
+            confirmLabel: t("admin.factoryReset"),
+            action: (password) => adminApi.factoryReset(password),
+            done: t("admin.factoryResetDone"),
+        }),
     );
 }
 
 function setupResultsToggle(runSerializedRefresh) {
-    const resultsToggle = $("results-open");
+    const resultsToggle = $("results-open-toggle");
     if (!resultsToggle) return;
 
-    resultsToggle.addEventListener("change", async (e) => {
-        const desired = !!e.target.checked;
+    resultsToggle.addEventListener("click", async () => {
+        const desired = !state.resultsOpen;
+        resultsToggle.disabled = true;
         try {
             const resp = await adminApi.setResultsOpen(desired);
             const wasResultsOpen = state.resultsOpen;
@@ -62,8 +96,9 @@ function setupResultsToggle(runSerializedRefresh) {
             toast(t("admin.resultsUpdated"));
             await runSerializedRefresh();
         } catch (err) {
-            e.target.checked = !desired;
             toast(err.message, true);
+        } finally {
+            resultsToggle.disabled = false;
         }
     });
 }
@@ -92,6 +127,45 @@ function setupPlayerTableActions(runSerializedRefresh) {
     const playerTable = $("admin-player-table");
     if (!playerTable) return;
 
+    const syncSelectFocusState = () => {
+        state.adminStatusMenuOpen = !!playerTable.querySelector(
+            ".admin-status-select:focus",
+        );
+    };
+
+    playerTable.addEventListener("focusin", (e) => {
+        if (e.target.closest(".admin-status-select")) {
+            state.adminStatusMenuOpen = true;
+        }
+    });
+
+    playerTable.addEventListener("focusout", () => {
+        window.setTimeout(syncSelectFocusState, 0);
+    });
+
+    playerTable.addEventListener("change", async (e) => {
+        const statusSelect = e.target.closest(".admin-status-select");
+        if (!statusSelect || statusSelect.disabled) return;
+
+        const playerId = statusSelect.dataset.playerPhase;
+        const currentPhase = statusSelect.dataset.currentPhase;
+        const desiredPhase = statusSelect.value;
+        if (!playerId || !desiredPhase || desiredPhase === currentPhase) return;
+
+        statusSelect.disabled = true;
+        try {
+            await adminApi.setPlayerPhase(playerId, desiredPhase);
+            toast(t("admin.statusUpdated"));
+            await runSerializedRefresh();
+        } catch (err) {
+            statusSelect.value = currentPhase ?? statusSelect.value;
+            toast(err.message, true);
+        } finally {
+            statusSelect.disabled = false;
+            state.adminStatusMenuOpen = false;
+        }
+    });
+
     playerTable.addEventListener("click", async (e) => {
         const grantBtn = e.target.closest("[data-grant-joker]");
         const deleteBtn = e.target.closest("[data-delete-player]");
@@ -107,13 +181,13 @@ function setupPlayerTableActions(runSerializedRefresh) {
         } else if (deleteBtn) {
             const playerId = deleteBtn.dataset.deletePlayer;
             const name = deleteBtn.dataset.name || "";
-            openConfirmModal({
+            openPasswordConfirmModal({
                 title: t("admin.deleteTitle"),
                 body: t("admin.deleteBody", { name }),
                 confirmLabel: t("admin.deleteConfirm"),
-                onConfirm: async (close) => {
+                onConfirm: async (password, close) => {
                     try {
-                        await adminApi.deletePlayer(playerId);
+                        await adminApi.deletePlayer(playerId, password);
                         toast(t("admin.deleteDone"));
                         close();
                         await runSerializedRefresh();