split login page into server/client

'use client';

import { useState, useEffect } from 'react';

import { useRouter } from 'next/navigation';

export default function LoginClient({ demo = false }: { demo?: boolean }) {

    const [username, setUsername] = useState('');

    const [password, setPassword] = useState('');

    const [error, setError] = useState<string | null>(null);

    const router = useRouter();

    const demoMode = demo;

    console.log('Demo mode from client:', demo);

    // Check for access_token cookie on the client side

    useEffect(() => {

        const cookies = document.cookie.split(';').map(cookie => cookie.trim());

        const accessTokenCookie = cookies.find(cookie => cookie.startsWith('access_token='));

        const access_token = accessTokenCookie ? accessTokenCookie.split('=')[1] : null;

        if (access_token) {

            try {

                const payloadBase64 = access_token.split('.')[1];

                const payloadJson = atob(payloadBase64.replace(/-/g, '+').replace(/_/g, '/'));

                const payload = JSON.parse(payloadJson);

                const now = Math.floor(Date.now() / 1000);

                if (payload.exp && payload.exp > now) {

                    console.log('JWT is valid, redirecting to Admin');

                    router.push('/Admin');

                }

            } catch (e) {

                console.error('Invalid JWT:', e);

            }

        }

    }, [router]);

    const handleLogin = async (e: React.FormEvent<HTMLFormElement>) => {

        e.preventDefault();

        setError(null);

        if (!username || !password) {

            setError('Username and password are required');

            return;

        }

        console.log(JSON.stringify({ username, password }));

        try {

            const res = await fetch('/api/auth', {

                method: 'POST',

                body: JSON.stringify({ username, password }),

                headers: { 'Content-Type': 'application/json' },

            });

            const data = await res.json();

            if (res.ok) {

                router.push('/Admin');

            } else {

                console.error('Login failed:', res.statusText);

                setError(`Login failed. Please check your credentials and try again. ${JSON.stringify(data)}`);

            }

        } catch (error) {

            console.error('Error during login:', error);

            setError('An error occurred while trying to log in. Please try again later.');

        }

    };

    return (

        <div className="min-vh-100 d-flex align-items-center justify-content-center" style={{ flexDirection: 'column' }}>

            {demoMode && (

                <div className="my-5">

                    <div className="p-5 text-center bg-body-tertiary">

                        <div className="container py-5">

                            <h1 className="text-body-emphasis">Full-width jumbotron</h1>

                            <p className="col-lg-8 mx-auto lead">

                                This takes the basic jumbotron above and makes its background edge-to-edge with a <code>.container</code> inside to align content. Similar to above, it&apos;s been recreated with built-in grid and utility classes.

                            </p>

                        </div>

                    </div>

                </div>

            )}

            <div className="form-signin w-100 m-auto">

                <form onSubmit={handleLogin}>

                    <div className="form-floating">

                        <input id="floatingInput" className="form-control" value={username} onChange={(e) => setUsername(e.target.value)} placeholder="username" />

                        <label htmlFor="floatingInput">Username</label>

                    </div>

                    <div className="form-floating">

                        <input id="floatingPassword" className="form-control" value={password} type="password" onChange={(e) => setPassword(e.target.value)} placeholder="mot de passe" />

                        <label htmlFor="floatingPassword">Password</label>

                    </div>

                    <button className="btn btn-primary w-100 py-2" type="submit">Connexion</button>

                    {error && <div className="alert alert-danger mt-2">{error}</div>}

                </form>

            </div>

        </div>

    );

}