fixed a bit

app/(auth)/login/page.js

@@ -23,8 +23,9 @@ export default function Login() {
                 password,
             });
 
-            if (result.error) {
+            if (result?.error) {
                 setError('Invalid username or password');
+                setIsLoading(false);
             } else {
                 // Fetch the user role to redirect appropriately
                 const response = await fetch('/api/user');
@@ -39,17 +40,21 @@ export default function Login() {
         } catch (err) {
             setError('An unexpected error occurred');
             console.error(err);
-        } finally {
             setIsLoading(false);
         }
     };
 
     return (
-        <div className="auth-container">
-            <div className="auth-card">
-                <h1>Login</h1>
-                <form onSubmit={handleLogin}>
-                    <div className="form-group">
+        <div className="auth-page">
+            <div className="page-header">
+                <div className="back-button">←</div>
+                <div className="page-title">Login</div>
+                <div className="placeholder"></div>
+            </div>
+
+            <div className="auth-container">
+                <div className="auth-card">
+                    <div className="input-container">
                         <input
                             type="text"
                             placeholder="Username"
@@ -59,7 +64,7 @@ export default function Login() {
                             className="auth-input"
                         />
                     </div>
-                    <div className="form-group">
+                    <div className="input-container">
                         <input
                             type="password"
                             placeholder="Password"
@@ -69,18 +74,30 @@ export default function Login() {
                             className="auth-input"
                         />
                     </div>
+                    {error && <div className="error-message">{error}</div>}
                     <button
-                        type="submit"
+                        onClick={handleLogin}
                         className="auth-button"
                         disabled={isLoading}
                     >
                         {isLoading ? 'Logging in...' : 'Log In'}
                     </button>
-                </form>
-                {error && <p className="error">{error}</p>}
-                <p className="auth-link">
-                    Don't have an account? <Link href="/register">Register</Link>
-                </p>
+                </div>
+            </div>
+
+            <div className="nav-bar">
+                <div className="nav-item">
+                    <div className="nav-icon">🏠</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">📊</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">🏆</div>
+                </div>
+                <div className="nav-item">
+                    <div className="nav-icon">👤</div>
+                </div>
             </div>
         </div>
     );