fixed a bit

app/(auth)/login/page.js

@@ -2,52 +2,86 @@
 import { useState } from 'react';
 import { signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 export default function Login() {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
 
     const handleLogin = async (e) => {
         e.preventDefault();
-        const result = await signIn('credentials', {
-            redirect: false,
-            username,
-            password,
-        });
+        setIsLoading(true);
+        setError('');
 
-        if (result.error) {
-            setError(result.error);
-        } else {
-            router.push('/team-selection'); // Redirect to the team selection page after login
+        try {
+            const result = await signIn('credentials', {
+                redirect: false,
+                username,
+                password,
+            });
+
+            if (result.error) {
+                setError('Invalid username or password');
+            } else {
+                // Fetch the user role to redirect appropriately
+                const response = await fetch('/api/user');
+                const userData = await response.json();
+
+                if (userData.role === 'admin') {
+                    router.push('/admin');
+                } else {
+                    router.push('/team-selection');
+                }
+            }
+        } catch (err) {
+            setError('An unexpected error occurred');
+            console.error(err);
+        } finally {
+            setIsLoading(false);
         }
     };
 
     return (
-        <div>
-            <h1>Login</h1>
-            <form onSubmit={handleLogin}>
-                <input
-                    type="text"
-                    placeholder="Username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    required
-                />
-                <input
-                    type="password"
-                    placeholder="Password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                />
-                <button type="submit">Log In</button>
-            </form>
-            {error && <p className="error">{error}</p>}
-            <p>
-                Don't have an account? <a href="/register">Register</a>
-            </p>
+        <div className="auth-container">
+            <div className="auth-card">
+                <h1>Login</h1>
+                <form onSubmit={handleLogin}>
+                    <div className="form-group">
+                        <input
+                            type="text"
+                            placeholder="Username"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                            className="auth-input"
+                        />
+                    </div>
+                    <div className="form-group">
+                        <input
+                            type="password"
+                            placeholder="Password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                            className="auth-input"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        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>
     );
 }

app/(auth)/register/page.js

@@ -1,54 +1,79 @@
 'use client'; // Mark as a Client Component
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { query } from '../../../lib/db';
-import bcrypt from 'bcryptjs';
+import { registerUser } from '../../actions/auth';
+import Link from 'next/link';
 
 export default function Register() {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
 
-    const handleRegister = async (e) => {
+    async function handleSubmit(e) {
         e.preventDefault();
-        const hashedPassword = bcrypt.hashSync(password, 10);
+        setIsLoading(true);
+        setError('');
 
         try {
-            await query(
-                'INSERT INTO users (username, password, role) VALUES (?, ?, ?)',
-                [username, hashedPassword, 'user']
-            );
-            router.push('/login'); // Redirect to the login page after registration
+            const formData = new FormData();
+            formData.append('username', username);
+            formData.append('password', password);
+
+            const result = await registerUser(formData);
+
+            if (result.success) {
+                router.push('/login');
+            } else {
+                setError(result.error || 'Registration failed');
+            }
         } catch (err) {
-            setError('Registration failed. Username may already exist.');
+            setError('An unexpected error occurred');
+            console.error(err);
+        } finally {
+            setIsLoading(false);
         }
-    };
+    }
 
     return (
-        <div>
-            <h1>Register</h1>
-            <form onSubmit={handleRegister}>
-                <input
-                    type="text"
-                    placeholder="Username"
-                    value={username}
-                    onChange={(e) => setUsername(e.target.value)}
-                    required
-                />
-                <input
-                    type="password"
-                    placeholder="Password"
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    required
-                />
-                <button type="submit">Register</button>
-            </form>
-            {error && <p className="error">{error}</p>}
-            <p>
-                Already have an account? <a href="/login">Login</a>
-            </p>
+        <div className="auth-container">
+            <div className="auth-card">
+                <h1>Register</h1>
+                <form onSubmit={handleSubmit}>
+                    <div className="form-group">
+                        <input
+                            type="text"
+                            placeholder="Username"
+                            value={username}
+                            onChange={(e) => setUsername(e.target.value)}
+                            required
+                            className="auth-input"
+                        />
+                    </div>
+                    <div className="form-group">
+                        <input
+                            type="password"
+                            placeholder="Password"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                            className="auth-input"
+                        />
+                    </div>
+                    <button
+                        type="submit"
+                        className="auth-button"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Registering...' : 'Register'}
+                    </button>
+                </form>
+                {error && <p className="error">{error}</p>}
+                <p className="auth-link">
+                    Already have an account? <Link href="/login">Login</Link>
+                </p>
+            </div>
         </div>
     );
 }