feat(auth): LoginPage + RegisterPage (Sprint 1 étape 3)

src/features/auth/pages/LoginPage.tsx

@@ -0,0 +1,135 @@
+/**
+ * Page de connexion.
+ *
+ * Formulaire email + mot de passe, appel de `signIn` (Supabase via auth-client).
+ * Si la session devient active (arrivée déjà connecté OU succès de signIn),
+ * `useAuth` propage l'état et le useEffect redirige vers /dashboard. On évite
+ * ainsi un double `navigate` concurrent depuis le handler de submit.
+ */
+
+import { useEffect, useState, type FormEvent } from 'react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Loader2 } from 'lucide-react'
+
+import { Button } from '@/shared/components/ui/button'
+import { Input } from '@/shared/components/ui/input'
+import { Label } from '@/shared/components/ui/label'
+import { signIn } from '@/shared/lib/auth-client'
+import { useAuth } from '../hooks/useAuth'
+
+function mapSignInError(message: string | undefined): string {
+  if (!message) return 'Connexion impossible. Réessayez dans quelques instants.'
+  if (message === 'Invalid login credentials') {
+    return 'Email ou mot de passe incorrect.'
+  }
+  if (message.includes('Email not confirmed')) {
+    return 'Email non confirmé. Vérifiez votre boîte mail.'
+  }
+  return 'Connexion impossible. Réessayez dans quelques instants.'
+}
+
+export function LoginPage() {
+  const navigate = useNavigate()
+  const { isAuthenticated, isLoading } = useAuth()
+
+  const [email, setEmail] = useState('')
+  const [password, setPassword] = useState('')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!isLoading && isAuthenticated) {
+      navigate('/dashboard', { replace: true })
+    }
+  }, [isLoading, isAuthenticated, navigate])
+
+  if (isLoading || isAuthenticated) {
+    return (
+      <div
+        className="flex min-h-screen items-center justify-center bg-canvas text-ink-4"
+        role="status"
+        aria-live="polite"
+        aria-label="Chargement de la session"
+      >
+        <Loader2 className="size-6 animate-spin" aria-hidden="true" />
+      </div>
+    )
+  }
+
+  async function handleSubmit(e: FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    setError(null)
+    setIsSubmitting(true)
+    try {
+      const { error: signInError } = await signIn(email, password)
+      if (signInError) {
+        setError(mapSignInError(signInError.message))
+      }
+    } finally {
+      setIsSubmitting(false)
+    }
+  }
+
+  return (
+    <main className="flex min-h-screen items-center justify-center bg-canvas px-4 py-8">
+      <section className="w-full max-w-sm rounded-lg border border-line bg-surface p-6 shadow-sm">
+        <h1 className="text-2xl font-semibold text-ink-1">Se connecter</h1>
+        <p className="mt-1 text-sm text-ink-3">Accédez à votre espace Expria.</p>
+
+        {error && (
+          <div
+            role="alert"
+            className="mt-4 rounded-md border border-danger/40 bg-danger-bg px-3 py-2 text-sm text-danger"
+          >
+            {error}
+          </div>
+        )}
+
+        <form onSubmit={handleSubmit} className="mt-6 space-y-4" noValidate>
+          <div className="space-y-2">
+            <Label htmlFor="email">Email</Label>
+            <Input
+              id="email"
+              type="email"
+              autoComplete="email"
+              required
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="password">Mot de passe</Label>
+            <Input
+              id="password"
+              type="password"
+              autoComplete="current-password"
+              required
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              disabled={isSubmitting}
+            />
+          </div>
+
+          <Button type="submit" className="w-full" disabled={isSubmitting}>
+            {isSubmitting ? (
+              <Loader2 className="animate-spin" aria-hidden="true" />
+            ) : (
+              'Se connecter'
+            )}
+          </Button>
+        </form>
+
+        <p className="mt-6 text-center text-sm text-ink-3">
+          Pas encore de compte ?{' '}
+          <Link to="/register" className="text-expria underline-offset-4 hover:underline">
+            Créer un compte
+          </Link>
+        </p>
+      </section>
+    </main>
+  )
+}
+
+export default LoginPage