Update frontend/src/pages/SuperAdminLogin.jsx

frontend/src/pages/SuperAdminLogin.jsx

@@ -1,104 +1,104 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../components/AuthContext';
-
-export const SuperAdminLogin = () => {
-  const [adminPassword, setAdminPassword] = useState('');
-  const [adminError, setAdminError] = useState('');
-  const [showPassword, setShowPassword] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const navigate = useNavigate();
-  const { login } = useAuth();
-
-  const handleAdminAccess = async (e) => {
-    e.preventDefault();
-    setIsLoading(true);
-    setAdminError('');
-    try {
-      const res = await fetch('/api/auth/login', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ email: 'superadmin@gmail.com', password: adminPassword })
-      });
-      const data = await res.json();
-      if (res.ok) {
-        login(data.access_token || data.token, data.refresh_token, data.user);
-        sessionStorage.setItem('superAdminAuth', 'true');
-        navigate('/super-admin');
-      } else {
-        setAdminError(data.message || 'Incorrect password');
-      }
-    } catch {
-      setAdminError('Could not connect to API');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="bg-surface text-on-surface font-body-md min-h-screen flex items-center justify-center selection:bg-primary/10 relative overflow-hidden">
-      {/* Background aesthetics */}
-      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-container-max h-full -z-10 pointer-events-none opacity-50">
-        <div className="absolute top-[-100px] left-[10%] w-[500px] h-[500px] bg-[radial-gradient(circle,rgba(0,74,198,0.07)_0%,transparent_70%)] rounded-full blur-3xl"></div>
-        <div className="absolute bottom-[-100px] right-[10%] w-[500px] h-[500px] bg-[radial-gradient(circle,rgba(37,99,235,0.05)_0%,transparent_70%)] rounded-full blur-3xl"></div>
-      </div>
-
-      <div className="bg-surface-container-lowest p-2xl rounded-3xl w-full max-w-md border border-outline-variant shadow-2xl animate-fade-in mx-gutter relative">
-        <div className="flex justify-center mb-xl">
-          <div className="w-16 h-16 flex items-center justify-center">
-            <img src="/logo.png" alt="LarShield Logo" className="w-full h-full object-contain" />
-          </div>
-        </div>
-
-        <div className="text-center mb-xl">
-          <h1 className="font-headline-lg text-on-surface font-extrabold mb-sm text-[28px] tracking-tight brand-gradient">Global Management</h1>
-          <p className="text-on-surface-variant text-[14px] leading-relaxed">Enter the master password to access LarShield Global Management.</p>
-        </div>
-
-        <form onSubmit={handleAdminAccess} className="flex flex-col gap-lg">
-          <div className="flex flex-col gap-xs">
-            <div className="relative w-full">
-              <input
-                type={showPassword ? "text" : "password"}
-                value={adminPassword}
-                onChange={(e) => setAdminPassword(e.target.value)}
-                placeholder="Master Password"
-                autoFocus
-                className="w-full border border-outline-variant rounded-xl py-md pl-lg pr-12 focus:ring-2 focus:ring-primary focus:border-primary bg-surface-container text-on-surface text-[15px] outline-none transition-all"
-              />
-              <button
-                type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors bg-transparent border-0 cursor-pointer flex items-center justify-center p-1"
-                aria-label={showPassword ? "Hide password" : "Show password"}
-              >
-                <span className="material-symbols-outlined text-[20px]">
-                  {showPassword ? 'visibility_off' : 'visibility'}
-                </span>
-              </button>
-            </div>
-            {adminError && <p className="text-error font-semibold text-[13px] mt-1 text-center">{adminError}</p>}
-          </div>
-
-          <button
-            type="submit"
-            disabled={isLoading || !adminPassword}
-            className="w-full bg-primary text-white py-md rounded-xl font-bold hover:brightness-110 active:scale-[0.98] transition-all border-0 cursor-pointer text-[15px] shadow-lg shadow-primary/20 flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed"
-          >
-            {isLoading ? (
-              <span className="material-symbols-outlined animate-spin text-[20px]">sync</span>
-            ) : (
-              'Authenticate'
-            )}
-          </button>
-        </form>
-
-        <div className="mt-xl text-center">
-          <button onClick={() => navigate('/')} className="text-on-surface-variant hover:text-primary transition-colors text-[13px] font-semibold bg-transparent border-0 cursor-pointer">
-            ← Return to Public Site
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../components/AuthContext';
+
+export const SuperAdminLogin = () => {
+  const [adminPassword, setAdminPassword] = useState('');
+  const [adminError, setAdminError] = useState('');
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const navigate = useNavigate();
+  const { login } = useAuth();
+
+  const handleAdminAccess = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setAdminError('');
+    try {
+      const res = await fetch('/api/auth/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email: 'superadmin@gmail.com', password: adminPassword })
+      });
+      const data = await res.json();
+      if (res.ok) {
+        login(data.access_token || data.token, data.refresh_token, data.user);
+        sessionStorage.setItem('superAdminAuth', 'true');
+        navigate('/super-admin');
+      } else {
+        setAdminError(data.message || 'Incorrect password');
+      }
+    } catch {
+      setAdminError('Could not connect to API');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="bg-surface text-on-surface font-body-md min-h-screen flex items-center justify-center selection:bg-primary/10 relative overflow-hidden">
+      {/* Background aesthetics */}
+      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-container-max h-full -z-10 pointer-events-none opacity-50">
+        <div className="absolute top-[-100px] left-[10%] w-[500px] h-[500px] bg-[radial-gradient(circle,rgba(0,74,198,0.07)_0%,transparent_70%)] rounded-full blur-3xl"></div>
+        <div className="absolute bottom-[-100px] right-[10%] w-[500px] h-[500px] bg-[radial-gradient(circle,rgba(37,99,235,0.05)_0%,transparent_70%)] rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="bg-surface-container-lowest p-2xl rounded-3xl w-full max-w-md border border-outline-variant shadow-2xl animate-fade-in mx-gutter relative">
+        <div className="flex justify-center mb-xl">
+          <div className="w-16 h-16 flex items-center justify-center">
+            <img src="/logo.png" alt="LarShield Logo" className="w-full h-full object-contain" />
+          </div>
+        </div>
+
+        <div className="text-center mb-xl">
+          <h1 className="font-headline-lg text-on-surface font-extrabold mb-sm text-[28px] tracking-tight brand-gradient">Global Management</h1>
+          <p className="text-on-surface-variant text-[14px] leading-relaxed">Enter the master password to access LarShield Global Management.</p>
+        </div>
+
+        <form onSubmit={handleAdminAccess} className="flex flex-col gap-lg">
+          <div className="flex flex-col gap-xs">
+            <div className="relative w-full">
+              <input
+                type={showPassword ? "text" : "password"}
+                value={adminPassword}
+                onChange={(e) => setAdminPassword(e.target.value)}
+                placeholder="Master Password"
+                autoFocus
+                className="w-full border border-outline-variant rounded-xl py-md pl-lg pr-12 focus:ring-2 focus:ring-primary focus:border-primary bg-surface-container text-on-surface text-[15px] outline-none transition-all"
+              />
+              <button
+                type="button"
+                onClick={() => setShowPassword(!showPassword)}
+                className="absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant hover:text-primary transition-colors bg-transparent border-0 cursor-pointer flex items-center justify-center p-1"
+                aria-label={showPassword ? "Hide password" : "Show password"}
+              >
+                <span className="material-symbols-outlined text-[20px]">
+                  {showPassword ? 'visibility_off' : 'visibility'}
+                </span>
+              </button>
+            </div>
+            {adminError && <p className="text-error font-semibold text-[13px] mt-1 text-center">{adminError}</p>}
+          </div>
+
+          <button
+            type="submit"
+            disabled={isLoading || !adminPassword}
+            className="w-full bg-primary text-white py-md rounded-xl font-bold hover:brightness-110 active:scale-[0.98] transition-all border-0 cursor-pointer text-[15px] shadow-lg shadow-primary/20 flex items-center justify-center disabled:opacity-70 disabled:cursor-not-allowed"
+          >
+            {isLoading ? (
+              <span className="material-symbols-outlined animate-spin text-[20px]">sync</span>
+            ) : (
+              'Authenticate'
+            )}
+          </button>
+        </form>
+
+        <div className="mt-xl text-center">
+          <button onClick={() => navigate('/')} className="text-on-surface-variant hover:text-primary transition-colors text-[13px] font-semibold bg-transparent border-0 cursor-pointer">
+            ← Return to Public Site
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};