peworkshop/app/(auth)/login/page.js

'use client'; // Mark as a Client Component
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();
        setIsLoading(true);
        setError('');

        try {
            const result = await signIn('credentials', {
                redirect: false,
                username,
                password,
            });

            if (result?.error) {
                setError('Invalid username or password');
                setIsLoading(false);
            } 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);
            setIsLoading(false);
        }
    };

    return (
        <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"
                            value={username}
                            onChange={(e) => setUsername(e.target.value)}
                            required
                            className="auth-input"
                        />
                    </div>
                    <div className="input-container">
                        <input
                            type="password"
                            placeholder="Password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            className="auth-input"
                        />
                    </div>
                    {error && <div className="error-message">{error}</div>}
                    <button
                        onClick={handleLogin}
                        className="auth-button"
                        disabled={isLoading}
                    >
                        {isLoading ? 'Logging in...' : 'Log In'}
                    </button>
                    <div className="auth-link">
                        Don't have an account? <Link href="/register">Register</Link>
                    </div>
                </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>
    );
}