TQ-Slator/assets/pages/LoginPage.tsx

import { useState } from 'react';
import { Navigate, useNavigate } from 'react-router-dom';
import { humanMessage, useAuth } from '@/auth/AuthProvider';

export function LoginPage() {
    const { user, loading, login } = useAuth();
    const navigate = useNavigate();

    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [error, setError] = useState<string | null>(null);
    const [pending, setPending] = useState(false);

    if (loading) return null;
    if (user) return <Navigate to="/projects" replace />;

    async function submit(event: React.FormEvent) {
        event.preventDefault();
        setError(null);
        setPending(true);

        try {
            await login(email, password);
            navigate('/projects', { replace: true });
        } catch (caught) {
            setError(humanMessage(caught));
        } finally {
            setPending(false);
        }
    }

    return (
        <div className="flex h-full items-center justify-center px-6">
            <div className="w-full max-w-sm">
                <div className="mb-8">
                    <h1 className="text-2xl font-semibold tracking-tight text-ink-900">TQ-Slator</h1>
                    <p className="mt-1 text-sm text-ink-500">Gestion des traductions</p>
                </div>

                <form
                    onSubmit={submit}
                    className="rounded-lg border border-ink-200 bg-white p-6 shadow-sm"
                >
                    <label className="block">
                        <span className="text-sm font-medium text-ink-700">Adresse e-mail</span>
                        <input
                            type="email"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                            required
                            autoFocus
                            autoComplete="username"
                            className="mt-1.5 w-full rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
                        />
                    </label>

                    <label className="mt-4 block">
                        <span className="text-sm font-medium text-ink-700">Mot de passe</span>
                        <input
                            type="password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                            required
                            autoComplete="current-password"
                            className="mt-1.5 w-full rounded-md border border-ink-300 px-3 py-2 text-sm outline-none focus:border-accent"
                        />
                    </label>

                    {error !== null && (
                        <p
                            role="alert"
                            className="mt-4 rounded-md bg-red-50 px-3 py-2 text-sm text-red-700"
                        >
                            {error}
                        </p>
                    )}

                    <button
                        type="submit"
                        disabled={pending}
                        className="mt-6 w-full rounded-md bg-accent px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 disabled:opacity-60"
                    >
                        {pending ? 'Connexion…' : 'Se connecter'}
                    </button>
                </form>

                <p className="mt-6 text-center text-xs text-ink-400">
                    L'accès se fait sur invitation. Contactez un administrateur du projet.
                </p>
            </div>
        </div>
    );
}