fix: admin login CSRF, error handling, and FOUC

ddrayko · ddrayko · commit 2246f12d3dc9 · 2026-07-21T22:08:22.000+02:00
diff --git a/public/index.html b/public/index.html
@@ -15,7 +15,14 @@
 </head>
 <body>
 
-<div id="app"></div>
+<div id="app">
+  <div class="auth-page" style="display:flex;align-items:center;justify-content:center;min-height:100vh;padding:24px;">
+    <div class="auth-card" style="text-align:center;padding:48px;">
+      <span class="spinner" style="width:32px;height:32px;border-width:3px;margin:0 auto 16px;display:block;"></span>
+      <p style="color:var(--text-secondary);">Loading...</p>
+    </div>
+  </div>
+</div>
 
   <script src="/js/app.js?v=6"></script>
   <script src="/js/admin.js?v=6"></script>
diff --git a/public/js/admin.js b/public/js/admin.js
@@ -306,29 +306,33 @@ async function handleAdminLogin(e) {
   btn.innerHTML = '<span class="spinner"></span> Signing in...';
 
   try {
-      const capWidget = $a('#admin-login-form cap-widget');
-      const capToken = capWidget?.token || '';
-      const data = await adminApi('/login', {
-        method: 'POST',
-        body: JSON.stringify({
-          email: $a('#admin-email').value,
-          password: $a('#admin-password').value,
-          capToken,
-        }),
-      });
+    const capWidget = $a('#admin-login-form cap-widget');
+    const capToken = capWidget?.token || '';
+    const data = await adminApi('/login', {
+      method: 'POST',
+      body: JSON.stringify({
+        email: $a('#admin-email').value,
+        password: $a('#admin-password').value,
+        capToken,
+      }),
+    });
     adminState.token = data.token;
     adminState.user = data.user;
     localStorage.setItem(ADMIN_STORAGE_KEY, data.token);
     history.replaceState({ adminPage: 'dashboard' }, '', '/admin/dashboard');
     renderAdminLayout();
   } catch (err) {
-    if (errorEl) {
-      errorEl.textContent = err.message;
-      errorEl.classList.add('show');
+    const currentErrorEl = $a('#admin-login-form .auth-error');
+    if (currentErrorEl) {
+      currentErrorEl.textContent = err.message;
+      currentErrorEl.classList.add('show');
     }
   } finally {
-    btn.disabled = false;
-    btn.innerHTML = 'Sign In';
+    const currentBtn = $a('#admin-login-btn');
+    if (currentBtn) {
+      currentBtn.disabled = false;
+      currentBtn.innerHTML = 'Sign In';
+    }
   }
 }
 
diff --git a/server.js b/server.js
@@ -178,7 +178,7 @@ app.use((err, req, res, next) => {
 });
 app.use(cookieParser(process.env.COOKIE_SECRET));
 
-const csrfExemptPaths = ['/api/auth/login', '/api/auth/register', '/api/auth/passkey/options', '/api/auth/passkey/verify', '/api/auth/passkeys/login/begin', '/api/auth/passkeys/login/complete', '/api/auth/passkeys/register/begin', '/api/auth/passkeys/register/complete', '/api/auth/totp/verify', '/api/auth/totp/recovery'];
+const csrfExemptPaths = ['/api/auth/login', '/api/auth/register', '/api/auth/passkey/options', '/api/auth/passkey/verify', '/api/auth/passkeys/login/begin', '/api/auth/passkeys/login/complete', '/api/auth/passkeys/register/begin', '/api/auth/passkeys/register/complete', '/api/auth/totp/verify', '/api/auth/totp/recovery', '/api/admin/login'];
 app.use((req, res, next) => {
   if (!req.path.startsWith('/api/')) return next();
   if (csrfExemptPaths.includes(req.path)) return next();
