From 9e699c4dd45fdfd0f42b11d04ca0466688f70556 Mon Sep 17 00:00:00 2001
From: BOHA <boha@boha.cz>
Date: Fri, 24 Apr 2026 11:31:00 +0200
Subject: [PATCH] fix: React hooks rules violation in Login.tsx causing crash
 on load

useCallback hooks were placed AFTER conditional early returns.
When authLoading toggled from true -> false, the hook count changed
between renders (14 hooks vs 17 hooks), triggering React's
"Rendered more hooks than during the previous render" error.

Moved all useCallback definitions before the conditional returns.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/admin/pages/Login.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/admin/pages/Login.tsx b/src/admin/pages/Login.tsx
index 74d5660..12e1893 100644
--- a/src/admin/pages/Login.tsx
+++ b/src/admin/pages/Login.tsx
@@ -43,20 +43,6 @@ export default function Login() {
     }
   }, [show2FA, useBackupCode]);
 
-  if (authLoading) {
-    return (
-      <div className="admin-login">
-        <div className="admin-loading">
-          <div className="admin-spinner" />
-        </div>
-      </div>
-    );
-  }
-
-  if (isAuthenticated && !animatingOut) {
-    return <Navigate to="/" replace />;
-  }
-
   const handleSubmit = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
@@ -143,6 +129,20 @@ export default function Login() {
     setUseBackupCode(false);
   }, [setShow2FA, setLoginToken, setTotpCode, setUseBackupCode]);
 
+  if (authLoading) {
+    return (
+      <div className="admin-login">
+        <div className="admin-loading">
+          <div className="admin-spinner" />
+        </div>
+      </div>
+    );
+  }
+
+  if (isAuthenticated && !animatingOut) {
+    return <Navigate to="/" replace />;
+  }
+
   return (
     <motion.div
       className="admin-login"