fix: 401-401 retry on non-401, move login DOM bindings into page lifecycle, add abort support

webui/static/hoover/api.js

@@ -180,6 +180,13 @@ export async function apiFetch(url, options = {}) {
                 if (retryRes.ok) {
                     return { ok: json.ok, data: json.ok ? json.data : json, error: null, status: retryRes.status };
                 }
+                if (retryRes.status === 401) {
+                    redirectLogin();
+                    return { ok: false, data: null, error: 'Session expired', status: 401 };
+                }
+                if (!retryRes.ok) {
+                    return { ok: false, data: null, error: json.error || `HTTP ${retryRes.status}`, status: retryRes.status };
+                }
             }
             redirectLogin();
             return { ok: false, data: null, error: 'Session expired', status: 401 };

webui/static/pages/login.js

@@ -5,15 +5,18 @@
  * On success: stores tokens and navigates to dashboard.
  */
 
-import { h, definePage } from '/static/hoover/index.js?v=11';
-import { apiFetch, toast, setAuthToken, getAuthToken } from '/static/hoover/api.js?v=12';
 import {
+    h,
+    definePage,
+    html,
+    apiFetch,
+    toast,
+    setAuthToken,
+    getAuthToken,
     handleLoginSuccess,
     webauthnSupported,
     startAuthentication,
-} from '/static/hoover/components/auth.js';
+} from '/static/hoover/index.js?v=12';
-
-import { html } from '/static/hoover/html.js?v=9';
 
 function LoginPage() {
     const hasWebAuthn = webauthnSupported();
@@ -56,21 +59,18 @@ function LoginPage() {
     `;
 }
 
-let _loginFormBound = false;
-let _passkeyBound = false;
-
 function handleLogin() {
-    if (_loginFormBound) return;
-    _loginFormBound = true;
-
     const form = document.getElementById('loginForm');
     if (!form) return;
 
-    form.addEventListener('submit', async (e) => {
+    form.removeEventListener('submit', loginFormHandler);
+    form.addEventListener('submit', loginFormHandler);
+}
+
+const loginFormHandler = async (e) => {
     e.preventDefault();
     await doPasswordLogin();
-    });
+};
-}
 
 async function doPasswordLogin() {
     const username = document.getElementById('loginUsername').value.trim();
@@ -96,18 +96,34 @@ async function doPasswordLogin() {
 }
 
 function setupPasskeyButton() {
-    if (_passkeyBound) return;
-    _passkeyBound = true;
-
     const passkeyBtn = document.getElementById('passkeyBtn');
     if (!passkeyBtn) return;
 
-    const usernameInput = document.getElementById('loginUsername');
+    passkeyBtnRef.btn = passkeyBtn;
-    const passwordGroup = document.getElementById('loginPasswordGroup');
+    passkeyBtnRef.usernameInput = document.getElementById('loginUsername');
-    const loginBtn = document.getElementById('loginBtn');
+    passkeyBtnRef.passwordGroup = document.getElementById('loginPasswordGroup');
-    const errEl = document.getElementById('loginError');
+    passkeyBtnRef.errEl = document.getElementById('loginError');
+
+    passkeyBtn.removeEventListener('click', passkeyClickHandler);
+    passkeyBtn.addEventListener('click', passkeyClickHandler);
+
+    passkeyBtn.removeEventListener('mouseenter', passkeyMouseEnterHandler);
+    passkeyBtn.removeEventListener('mouseleave', passkeyMouseLeaveHandler);
+    passkeyBtn.addEventListener('mouseenter', passkeyMouseEnterHandler);
+    passkeyBtn.addEventListener('mouseleave', passkeyMouseLeaveHandler);
+}
+
+const passkeyBtnRef = {
+    btn: null,
+    usernameInput: null,
+    passwordGroup: null,
+    errEl: null,
+};
+
+const passkeyClickHandler = async () => {
+    const { btn, usernameInput, passwordGroup, errEl } = passkeyBtnRef;
+    if (!btn) return;
 
-    passkeyBtn.addEventListener('click', async () => {
     errEl.textContent = '';
     const username = usernameInput.value.trim();
     if (!username) {
@@ -116,8 +132,8 @@ function setupPasskeyButton() {
         return;
     }
 
-        passkeyBtn.disabled = true;
+    btn.disabled = true;
-        passkeyBtn.textContent = 'Checking...';
+    btn.textContent = 'Checking...';
 
     try {
         const beginRes = await apiFetch('/api/auth/webauthn/authenticate-begin', {
@@ -127,24 +143,24 @@ function setupPasskeyButton() {
 
         if (!beginRes.ok) {
             errEl.textContent = beginRes.error || 'Failed to start authentication';
-                passkeyBtn.disabled = false;
+            btn.disabled = false;
-                passkeyBtn.textContent = 'Sign in with passkey';
+            btn.textContent = 'Sign in with passkey';
             return;
         }
 
         if (beginRes.data && beginRes.data.no_webauthn) {
             errEl.textContent = 'No passkey registered for this account';
-                passkeyBtn.disabled = false;
+            btn.disabled = false;
-                passkeyBtn.textContent = 'Sign in with passkey';
+            btn.textContent = 'Sign in with passkey';
             return;
         }
 
         const authOptions = beginRes.data;
-            passkeyBtn.textContent = 'Waiting for authenticator...';
+        btn.textContent = 'Waiting for authenticator...';
 
         const assertionResponse = await startAuthentication(authOptions);
 
-            passkeyBtn.textContent = 'Verifying...';
+        btn.textContent = 'Verifying...';
 
         const finishRes = await apiFetch('/api/auth/webauthn/authenticate-finish', {
             method: 'POST',
@@ -168,23 +184,24 @@ function setupPasskeyButton() {
             errEl.textContent = err.message || 'Passkey authentication failed';
         }
     } finally {
-            passkeyBtn.disabled = false;
+        btn.disabled = false;
-            passkeyBtn.textContent = 'Sign in with passkey';
+        btn.textContent = 'Sign in with passkey';
     }
-    });
+};
 
-    passkeyBtn.addEventListener('mouseenter', () => {
+const passkeyMouseEnterHandler = () => {
+    const { passwordGroup } = passkeyBtnRef;
     if (passwordGroup) {
         passwordGroup.style.display = 'none';
     }
-    });
+};
 
-    passkeyBtn.addEventListener('mouseleave', () => {
+const passkeyMouseLeaveHandler = () => {
+    const { passwordGroup } = passkeyBtnRef;
     if (passwordGroup) {
         passwordGroup.style.display = '';
     }
-    });
+};
-}
 
 const Page = definePage({
     init() {
@@ -192,6 +209,9 @@ const Page = definePage({
     },
 
     async load(state, abortController) {
+        handleLogin();
+        setupPasskeyButton();
+
         if (getAuthToken()) {
             try {
                 const res = await apiFetch('/api/auth/session');
@@ -210,7 +230,4 @@ const Page = definePage({
     },
 });
 
-handleLogin();
-setupPasskeyButton();
-
 export default Page;

webui/static/pages/passkeys.js

@@ -23,28 +23,38 @@ import {
     Badge,
     startRegistration,
     webauthnSupported,
+    isModalProcessing,
+    setModalProcessing,
 } from '/static/hoover/index.js?v=12';
-import { isModalProcessing, setModalProcessing } from '/static/hoover/components/modal.js?v=9';
 
 const state = reactive({ credentials: [], loading: true, refreshing: false, error: null });
 
-async function loadCredentials() {
+async function loadCredentials(abortController) {
+    if (abortController?.signal?.aborted) return;
     if (state.credentials.length) state.refreshing = true;
     else state.loading = true;
     state.error = null;
 
     try {
-        const res = await apiFetch('/api/auth/webauthn/credentials');
+        const res = await apiFetch('/api/auth/webauthn/credentials', {
+            signal: abortController?.signal,
+        });
+        if (abortController?.signal?.aborted) return;
         if (res.ok) {
             state.credentials = res.data || [];
         } else {
             state.error = res.error || 'Failed to load credentials';
         }
     } catch (e) {
+        if (!abortController?.signal?.aborted) {
             state.error = e.message || 'Failed to load credentials';
         }
+    } finally {
+        if (!abortController?.signal?.aborted) {
             state.loading = false;
             state.refreshing = false;
+        }
+    }
 }
 
 function addCredentialModal() {
@@ -277,7 +287,7 @@ const Page = definePage({
     },
 
     async load(s, abortController) {
-        await loadCredentials();
+        await loadCredentials(abortController);
     },
 
     render() {