Update dependency typescript-eslint to v8.52.0

.gitignore

@@ -1,4 +1,2 @@
 target/
-cache/
+cache/
-tokens.bin
-.auth_key

frontend/pnpm-lock.yaml

@@ -59,7 +59,7 @@ importers:
         version: 5.9.3
       typescript-eslint:
         specifier: ^8.48.1
-        version: 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+        version: 8.52.0(eslint@9.39.1)(typescript@5.9.3)
       vite:
         specifier: npm:rolldown-vite@7.2.5
         version: rolldown-vite@7.2.5(@types/node@24.10.1)
@@ -368,63 +368,63 @@ packages:
   '@types/react@19.2.7':
     resolution: {integrity: sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==}
 
-  '@typescript-eslint/eslint-plugin@8.53.0':
+  '@typescript-eslint/eslint-plugin@8.52.0':
-    resolution: {integrity: sha512-eEXsVvLPu8Z4PkFibtuFJLJOTAV/nPdgtSjkGoPpddpFk3/ym2oy97jynY6ic2m6+nc5M8SE1e9v/mHKsulcJg==}
+    resolution: {integrity: sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
-      '@typescript-eslint/parser': ^8.53.0
+      '@typescript-eslint/parser': ^8.52.0
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/parser@8.53.0':
+  '@typescript-eslint/parser@8.52.0':
-    resolution: {integrity: sha512-npiaib8XzbjtzS2N4HlqPvlpxpmZ14FjSJrteZpPxGUaYPlvhzlzUZ4mZyABo0EFrOWnvyd0Xxroq//hKhtAWg==}
+    resolution: {integrity: sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/project-service@8.53.0':
+  '@typescript-eslint/project-service@8.52.0':
-    resolution: {integrity: sha512-Bl6Gdr7NqkqIP5yP9z1JU///Nmes4Eose6L1HwpuVHwScgDPPuEWbUVhvlZmb8hy0vX9syLk5EGNL700WcBlbg==}
+    resolution: {integrity: sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/scope-manager@8.53.0':
+  '@typescript-eslint/scope-manager@8.52.0':
-    resolution: {integrity: sha512-kWNj3l01eOGSdVBnfAF2K1BTh06WS0Yet6JUgb9Cmkqaz3Jlu0fdVUjj9UI8gPidBWSMqDIglmEXifSgDT/D0g==}
+    resolution: {integrity: sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/tsconfig-utils@8.53.0':
+  '@typescript-eslint/tsconfig-utils@8.52.0':
-    resolution: {integrity: sha512-K6Sc0R5GIG6dNoPdOooQ+KtvT5KCKAvTcY8h2rIuul19vxH5OTQk7ArKkd4yTzkw66WnNY0kPPzzcmWA+XRmiA==}
+    resolution: {integrity: sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/type-utils@8.53.0':
+  '@typescript-eslint/type-utils@8.52.0':
-    resolution: {integrity: sha512-BBAUhlx7g4SmcLhn8cnbxoxtmS7hcq39xKCgiutL3oNx1TaIp+cny51s8ewnKMpVUKQUGb41RAUWZ9kxYdovuw==}
+    resolution: {integrity: sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/types@8.53.0':
+  '@typescript-eslint/types@8.52.0':
-    resolution: {integrity: sha512-Bmh9KX31Vlxa13+PqPvt4RzKRN1XORYSLlAE+sO1i28NkisGbTtSLFVB3l7PWdHtR3E0mVMuC7JilWJ99m2HxQ==}
+    resolution: {integrity: sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@typescript-eslint/typescript-estree@8.53.0':
+  '@typescript-eslint/typescript-estree@8.52.0':
-    resolution: {integrity: sha512-pw0c0Gdo7Z4xOG987u3nJ8akL9093yEEKv8QTJ+Bhkghj1xyj8cgPaavlr9rq8h7+s6plUJ4QJYw2gCZodqmGw==}
+    resolution: {integrity: sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/utils@8.53.0':
+  '@typescript-eslint/utils@8.52.0':
-    resolution: {integrity: sha512-XDY4mXTez3Z1iRDI5mbRhH4DFSt46oaIFsLg+Zn97+sYrXACziXSQcSelMybnVZ5pa1P6xYkPr5cMJyunM1ZDA==}
+    resolution: {integrity: sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  '@typescript-eslint/visitor-keys@8.53.0':
+  '@typescript-eslint/visitor-keys@8.52.0':
-    resolution: {integrity: sha512-LZ2NqIHFhvFwxG0qZeLL9DvdNAHPGCY5dIRwBhyYeU+LfLhcStE1ImjsuTG/WaVh3XysGaeLW8Rqq7cGkPCFvw==}
+    resolution: {integrity: sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@vitejs/plugin-react@5.1.2':
@@ -1007,8 +1007,8 @@ packages:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
 
-  typescript-eslint@8.53.0:
+  typescript-eslint@8.52.0:
-    resolution: {integrity: sha512-xHURCQNxZ1dsWn0sdOaOfCSQG0HKeqSj9OexIxrz6ypU6wHYOdX2I3D2b8s8wFSsSOYJb+6q283cLiLlkEsBYw==}
+    resolution: {integrity: sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
     peerDependencies:
       eslint: ^8.57.0 || ^9.0.0
@@ -1370,14 +1370,14 @@ snapshots:
     dependencies:
       csstype: 3.2.3
 
-  '@typescript-eslint/eslint-plugin@8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/eslint-plugin@8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.2
-      '@typescript-eslint/parser': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/type-utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/type-utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.52.0
       eslint: 9.39.1
       ignore: 7.0.5
       natural-compare: 1.4.0
@@ -1386,41 +1386,41 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/visitor-keys': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.52.0
       debug: 4.4.3
       eslint: 9.39.1
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.53.0(typescript@5.9.3)':
+  '@typescript-eslint/project-service@8.52.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
       debug: 4.4.3
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/scope-manager@8.53.0':
+  '@typescript-eslint/scope-manager@8.52.0':
     dependencies:
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/visitor-keys': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.52.0
 
-  '@typescript-eslint/tsconfig-utils@8.53.0(typescript@5.9.3)':
+  '@typescript-eslint/tsconfig-utils@8.52.0(typescript@5.9.3)':
     dependencies:
       typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/type-utils@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
       debug: 4.4.3
       eslint: 9.39.1
       ts-api-utils: 2.4.0(typescript@5.9.3)
@@ -1428,14 +1428,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/types@8.53.0': {}
+  '@typescript-eslint/types@8.52.0': {}
 
-  '@typescript-eslint/typescript-estree@8.53.0(typescript@5.9.3)':
+  '@typescript-eslint/typescript-estree@8.52.0(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/project-service': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/tsconfig-utils': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/visitor-keys': 8.53.0
+      '@typescript-eslint/visitor-keys': 8.52.0
       debug: 4.4.3
       minimatch: 9.0.5
       semver: 7.7.3
@@ -1445,20 +1445,20 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.53.0(eslint@9.39.1)(typescript@5.9.3)':
+  '@typescript-eslint/utils@8.52.0(eslint@9.39.1)(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.9.1(eslint@9.39.1)
-      '@typescript-eslint/scope-manager': 8.53.0
+      '@typescript-eslint/scope-manager': 8.52.0
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
-      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
       eslint: 9.39.1
       typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/visitor-keys@8.53.0':
+  '@typescript-eslint/visitor-keys@8.52.0':
     dependencies:
-      '@typescript-eslint/types': 8.53.0
+      '@typescript-eslint/types': 8.52.0
       eslint-visitor-keys: 4.2.1
 
   '@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
@@ -1961,12 +1961,12 @@ snapshots:
     dependencies:
       prelude-ls: 1.2.1
 
-  typescript-eslint@8.53.0(eslint@9.39.1)(typescript@5.9.3):
+  typescript-eslint@8.52.0(eslint@9.39.1)(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.53.0(@typescript-eslint/parser@8.53.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/eslint-plugin': 8.52.0(@typescript-eslint/parser@8.52.0(eslint@9.39.1)(typescript@5.9.3))(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/parser': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
-      '@typescript-eslint/typescript-estree': 8.53.0(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.52.0(typescript@5.9.3)
-      '@typescript-eslint/utils': 8.53.0(eslint@9.39.1)(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.52.0(eslint@9.39.1)(typescript@5.9.3)
       eslint: 9.39.1
       typescript: 5.9.3
     transitivePeerDependencies:

frontend/src/App.tsx

@@ -41,15 +41,6 @@ function App() {
     _setTheme(ev.data as string);
   };
 
-  const addToast = useCallback((message: string, type: ToastType = "info") => {
-    const id = Date.now();
-    setToasts((prev) => [...prev, { id, message, type }]);
-  }, []);
-
-  const removeToast = (id: number) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  };
-
   useEffect(() => {
     if (theme !== "default" && theme !== "sakura") {
       document.body.classList.remove("sakura-theme");
@@ -82,6 +73,15 @@ function App() {
     return () => window.removeEventListener("unauthorized", handleUnauthorized);
   }, [addToast]);
 
+  const addToast = useCallback((message: string, type: ToastType = "info") => {
+    const id = Date.now();
+    setToasts((prev) => [...prev, { id, message, type }]);
+  }, []);
+
+  const removeToast = (id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  };
+
   const fetchPeople = () => {
     if (!token) return;
     setIsLoading(true);

frontend/src/Login.tsx

@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState } from "react";
 import { LoginRequest, LoginResponse } from "../items";
 
 interface LoginProps {
@@ -6,18 +6,11 @@ interface LoginProps {
 }
 
 export function Login({ onLogin }: LoginProps) {
-  const usernameInputRef = useRef<HTMLInputElement>(null);
   const [username, setUsername] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState("");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
-  const [isSuccess, setIsSuccess] = useState(false);
-  const [shakeCard, setShakeCard] = useState(false);
-
-  useEffect(() => {
-    usernameInputRef.current?.focus();
-  }, []);
 
   const validateForm = () => {
     const errors: { username?: string, password?: string } = {};
@@ -31,11 +24,7 @@ export function Login({ onLogin }: LoginProps) {
     e.preventDefault();
     setError("");
 
-    if (!validateForm()) {
+    if (!validateForm()) return;
-      setShakeCard(true);
-      setTimeout(() => setShakeCard(false), 500);
-      return;
-    }
 
     setIsSubmitting(true);
 
@@ -55,364 +44,110 @@ export function Login({ onLogin }: LoginProps) {
       const response = LoginResponse.decode(new Uint8Array(buffer));
 
       if (response.success) {
-        setIsSuccess(true);
         onLogin(response.token);
       } else {
         setError(response.message || "Login failed");
-        setShakeCard(true);
-        setTimeout(() => setShakeCard(false), 500);
       }
     } catch (err) {
       console.error("Login error:", err);
       setError("An unexpected error occurred. Please try again.");
-      setShakeCard(true);
-      setTimeout(() => setShakeCard(false), 500);
     } finally {
       setIsSubmitting(false);
     }
   };
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") {
-      handleSubmit(e);
-    }
-  };
-
   return (
-    <div
+    <div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
-      className="card login-card"
+      <h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
-      style={{
+      <form onSubmit={handleSubmit} className="form-group">
-        maxWidth: "420px",
+        <div className="form-group">
-        margin: "6rem auto",
+          <label>Username</label>
-        padding: "2.5rem",
+          <input
-        background: "linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
+            type="text"
-        position: "relative"
+            value={username}
-      }}
+            onChange={(e) => {
-    >
+              setUsername(e.target.value);
-      {isSubmitting && (
+              if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
-        <div
+            }}
-          style={{
+            placeholder="Enter your username"
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            borderRadius: "16px",
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            zIndex: 10,
-            backdropFilter: "blur(2px)"
-          }}
-        >
-          <div
             style={{
-              width: "48px",
+              borderColor: fieldErrors.username ? "#f44336" : undefined,
-              height: "48px",
+              borderWidth: fieldErrors.username ? "2px" : undefined
-              border: "4px solid rgba(255, 255, 255, 0.2)",
-              borderTopColor: "white",
-              borderRadius: "50%",
-              animation: "spin 0.8s linear infinite"
             }}
           />
-        </div>
-      )}
-
-      {isSuccess && (
-        <div
-          style={{
-            position: "absolute",
-            top: "50%",
-            left: "50%",
-            transform: "translate(-50%, -50%)",
-            display: "flex",
-            flexDirection: "column",
-            alignItems: "center",
-            gap: "1rem",
-            animation: "fadeInScale 0.5s ease forwards",
-            zIndex: 10
-          }}
-        >
-          <div
-            style={{
-              width: "64px",
-              height: "64px",
-              borderRadius: "50%",
-              backgroundColor: "#4caf50",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: "2rem",
-              color: "white",
-              boxShadow: "0 0 20px rgba(76, 175, 80, 0.5)"
-            }}
-          >
-            ✓
-          </div>
-          <span style={{ color: "#4caf50", fontWeight: 600, fontSize: "1.1rem" }}>
-            Success!
-          </span>
-        </div>
-      )}
-
-      <h2
-        style={{
-          textAlign: "center",
-          marginBottom: "0.5rem",
-          fontSize: "2rem",
-          fontWeight: 700
-        }}
-      >
-        🎮 Login
-      </h2>
-      <p
-        style={{
-          textAlign: "center",
-          color: "var(--text-muted)",
-          marginBottom: "2rem",
-          fontSize: "0.95rem"
-        }}
-      >
-        Welcome back! Please sign in to continue.
-      </p>
-
-      <form onSubmit={handleSubmit} className="form-group">
-        <div className="form-group" style={{ marginBottom: "1.5rem" }}>
-          <label
-            style={{
-              display: "block",
-              marginBottom: "0.5rem",
-              fontWeight: 500,
-              color: "var(--text-color)",
-              fontSize: "0.95rem"
-            }}
-          >
-            Username
-          </label>
-          <div
-            style={{
-              position: "relative",
-              display: "flex",
-              alignItems: "center"
-            }}
-          >
-            <span
-              style={{
-                position: "absolute",
-                left: "0.75rem",
-                color: "var(--text-muted)",
-                pointerEvents: "none",
-                fontSize: "1.1rem"
-              }}
-            >
-              👤
-            </span>
-            <input
-              ref={usernameInputRef}
-              type="text"
-              value={username}
-              onChange={(e) => {
-                setUsername(e.target.value);
-                if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
-              }}
-              onKeyDown={handleKeyDown}
-              placeholder="Enter your username"
-              aria-label="Username"
-              aria-invalid={!!fieldErrors.username}
-              aria-describedby={fieldErrors.username ? "username-error" : undefined}
-              style={{
-                width: "100%",
-                paddingLeft: "2.75rem",
-                paddingRight: "0.75rem",
-                paddingTop: "0.75rem",
-                paddingBottom: "0.75rem",
-                borderColor: fieldErrors.username ? "#f44336" : undefined,
-                borderWidth: fieldErrors.username ? "2px" : "1px",
-                fontSize: "1rem"
-              }}
-            />
-          </div>
           {fieldErrors.username && (
-            <span
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              id="username-error"
+              {fieldErrors.username}
-              role="alert"
-              style={{
-                color: "#ff6b6b",
-                fontSize: "0.85rem",
-                marginTop: "0.5rem",
-                display: "flex",
-                alignItems: "center",
-                gap: "0.25rem"
-              }}
-            >
-              ⚠️ {fieldErrors.username}
             </span>
           )}
         </div>
-
+        <div className="form-group">
-        <div className="form-group" style={{ marginBottom: "2rem" }}>
+          <label>Password</label>
-          <label
+          <input
-            style={{
+            type="password"
-              display: "block",
+            value={password}
-              marginBottom: "0.5rem",
+            onChange={(e) => {
-              fontWeight: 500,
+              setPassword(e.target.value);
-              color: "var(--text-color)",
+              if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
-              fontSize: "0.95rem"
             }}
-          >
+            placeholder="Enter your password"
-            Password
-          </label>
-          <div
             style={{
-              position: "relative",
+              borderColor: fieldErrors.password ? "#f44336" : undefined,
-              display: "flex",
+              borderWidth: fieldErrors.password ? "2px" : undefined
-              alignItems: "center"
             }}
-          >
+          />
-            <span
-              style={{
-                position: "absolute",
-                left: "0.75rem",
-                color: "var(--text-muted)",
-                pointerEvents: "none",
-                fontSize: "1.1rem"
-              }}
-            >
-              🔒
-            </span>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => {
-                setPassword(e.target.value);
-                if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
-              }}
-              onKeyDown={handleKeyDown}
-              placeholder="Enter your password"
-              aria-label="Password"
-              aria-invalid={!!fieldErrors.password}
-              aria-describedby={fieldErrors.password ? "password-error" : undefined}
-              style={{
-                width: "100%",
-                paddingLeft: "2.75rem",
-                paddingRight: "0.75rem",
-                paddingTop: "0.75rem",
-                paddingBottom: "0.75rem",
-                borderColor: fieldErrors.password ? "#f44336" : undefined,
-                borderWidth: fieldErrors.password ? "2px" : "1px",
-                fontSize: "1rem"
-              }}
-            />
-          </div>
           {fieldErrors.password && (
-            <span
+            <span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
-              id="password-error"
+              {fieldErrors.password}
-              role="alert"
-              style={{
-                color: "#ff6b6b",
-                fontSize: "0.85rem",
-                marginTop: "0.5rem",
-                display: "flex",
-                alignItems: "center",
-                gap: "0.25rem"
-              }}
-            >
-              ⚠️ {fieldErrors.password}
             </span>
           )}
         </div>
-
         <button
           type="submit"
-          style={{
+          style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
-            marginTop: "0.5rem",
-            width: "100%",
-            padding: "0.875rem",
-            fontSize: "1rem",
-            fontWeight: 600,
-            opacity: isSubmitting ? 0.7 : 1,
-            cursor: isSubmitting ? "not-allowed" : "pointer",
-            background: "linear-gradient(135deg, var(--accent-color) 0%, var(--secondary-accent) 100%)",
-            border: "none",
-            transition: "transform 0.1s, box-shadow 0.2s"
-          }}
           disabled={isSubmitting}
-          onMouseEnter={(e) => {
-            if (!isSubmitting) {
-              e.currentTarget.style.transform = "translateY(-1px)";
-              e.currentTarget.style.boxShadow = "0 4px 12px rgba(9, 109, 192, 0.4)";
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (!isSubmitting) {
-              e.currentTarget.style.transform = "translateY(0)";
-              e.currentTarget.style.boxShadow = "none";
-            }
-          }}
-          onMouseDown={(e) => {
-            if (!isSubmitting) {
-              e.currentTarget.style.transform = "translateY(0)";
-            }
-          }}
         >
-          Login
+          {isSubmitting ? (
+            <>
+              <span
+                style={{
+                  width: "14px",
+                  height: "14px",
+                  border: "2px solid rgba(255,255,255,0.3)",
+                  borderTopColor: "white",
+                  borderRadius: "50%",
+                  animation: "spin 0.8s linear infinite",
+                  display: "inline-block",
+                  marginRight: "0.5rem"
+                }}
+              ></span>
+              Logging in...
+            </>
+          ) : (
+            "Login"
+          )}
         </button>
       </form>
-
       {error && (
         <div
-          role="alert"
           style={{
-            backgroundColor: "rgba(244, 67, 54, 0.15)",
+            backgroundColor: "rgba(244, 67, 54, 0.1)",
-            border: "1px solid rgba(244, 67, 54, 0.4)",
+            border: "1px solid rgba(244, 67, 54, 0.3)",
             color: "#ff6b6b",
-            padding: "0.875rem 1rem",
+            padding: "1rem",
             borderRadius: "8px",
-            marginTop: "1.5rem",
+            marginTop: "1rem",
             textAlign: "center",
-            fontSize: "0.9rem",
+            fontSize: "0.9rem"
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            gap: "0.5rem"
           }}
         >
           ⚠️ {error}
         </div>
       )}
-
       <style>{`
         @keyframes spin {
           to { transform: rotate(360deg); }
         }
-
-        @keyframes fadeInScale {
-          from {
-            opacity: 0;
-            transform: translate(-50%, -40%) scale(0.8);
-          }
-          to {
-            opacity: 1;
-            transform: translate(-50%, -50%) scale(1);
-          }
-        }
-
-        .login-card {
-          animation: ${shakeCard ? "shake 0.5s ease" : "none"};
-        }
-
-        @keyframes shake {
-          0%, 100% {
-            transform: translateX(0);
-          }
-          20%, 60% {
-            transform: translateX(-8px);
-          }
-          40%, 80% {
-            transform: translateX(8px);
-          }
-        }
       `}</style>
     </div>
   );