mise a jour

frontend/src/App.jsx

@@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthProvider } from './context/AuthContext.jsx'
 import Layout from './components/Layout.jsx'
 import ProtectedRoute from './components/ProtectedRoute.jsx'
+import CookieBanner from './components/CookieBanner.jsx'
 import Connexion from './pages/Connexion'
 import Inscription from './pages/Inscription'
 import Accueil from './pages/Accueil'
@@ -24,7 +25,7 @@ export default function App() {
     <BrowserRouter>
     <AuthProvider>
       <Routes>
-        <Route path="/" element={<Navigate to="/connexion" replace />} />
+        <Route path="/" element={<Navigate to="/accueil" replace />} />
         <Route path="/connexion" element={<Connexion />} />
         <Route path="/inscription" element={<Inscription />} />
 
@@ -75,6 +76,7 @@ export default function App() {
 
         <Route path="*" element={<NotFound />} />
       </Routes>
+      <CookieBanner />
     </AuthProvider>
     </BrowserRouter>
   )

frontend/src/components/CookieBanner.jsx

@@ -0,0 +1,41 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+export default function CookieBanner() {
+  const [visible, setVisible] = useState(() => !localStorage.getItem('cookieConsent'))
+
+  if (!visible) return null
+
+  const handleChoice = (choice) => {
+    localStorage.setItem('cookieConsent', choice)
+    setVisible(false)
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 px-4 py-4 bg-white border-t border-gray-200 shadow-lg">
+      <div className="max-w-5xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
+        <div className="flex-1">
+          <p className="text-sm font-semibold text-gray-800 mb-1">Ce site utilise des cookies</p>
+          <p className="text-xs text-gray-500 leading-relaxed">
+            Nous utilisons des cookies essentiels au fonctionnement du site. En continuant votre navigation, vous acceptez leur utilisation conformément à notre{' '}
+            <Link to="/confidentialite" className="text-[#006B6B] hover:underline">politique de confidentialité</Link>.
+          </p>
+        </div>
+        <div className="flex gap-2 flex-shrink-0 w-full sm:w-auto">
+          <button
+            onClick={() => handleChoice('refused')}
+            className="flex-1 sm:flex-none border border-gray-300 text-gray-600 hover:bg-gray-50 text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
+          >
+            Refuser
+          </button>
+          <button
+            onClick={() => handleChoice('accepted')}
+            className="flex-1 sm:flex-none bg-[#006B6B] hover:bg-[#005959] text-white text-sm font-medium px-4 py-2.5 rounded-lg transition-colors"
+          >
+            Accepter
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

frontend/src/hooks/useHandleAuthError.js

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../context/AuthContext'
 
@@ -5,12 +6,12 @@ export function useHandleAuthError() {
   const { logout } = useAuth()
   const navigate = useNavigate()
 
-  return function handleAuthError(err) {
+  return useCallback((err) => {
     if (err.status === 401) {
       logout()
       navigate('/connexion')
       return true
     }
     return false
-  }
+  }, [logout, navigate])
 }

frontend/src/pages/Admin.jsx

@@ -1,24 +1,44 @@
 import { useState, useEffect } from 'react'
 import { getStatsApi, getUsersApi, drawWinnerApi, getWinnerApi } from '../services/admin'
+import { searchTicketApi, deliverClaimApi } from '../services/employee'
+import { useHandleAuthError } from '../hooks/useHandleAuthError'
 
 function StatCard({ label, value, sub }) {
   return (
     <div className="bg-white rounded-xl shadow p-4 text-center">
-      <p className="text-2xl sm:text-3xl font-bold text-green-700">{value ?? '—'}</p>
+      <p className="text-2xl sm:text-3xl font-bold text-[#006B6B]">{value ?? '—'}</p>
       <p className="text-xs sm:text-sm text-gray-500 mt-1">{label}</p>
       {sub && <p className="text-xs text-gray-400 mt-0.5">{sub}</p>}
     </div>
   )
 }
 
+function formatDate(dateStr) {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: '2-digit', month: 'long', year: 'numeric',
+    hour: '2-digit', minute: '2-digit',
+  })
+}
+
 export default function Admin() {
-  const [stats, setStats] = useState(null)
-  const [users, setUsers] = useState([])
-  const [winner, setWinner] = useState(undefined)
-  const [drawing, setDrawing] = useState(false)
+  const handleAuthError = useHandleAuthError()
+  const [stats, setStats]       = useState(null)
+  const [users, setUsers]       = useState([])
+  const [winner, setWinner]     = useState(undefined)
+  const [drawing, setDrawing]   = useState(false)
   const [drawError, setDrawError] = useState('')
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState('')
+  const [loading, setLoading]   = useState(true)
+  const [error, setError]       = useState('')
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  // Remise de lot
+  const [ticketCode, setTicketCode]     = useState('')
+  const [ticketResult, setTicketResult] = useState(null)
+  const [ticketSearching, setTicketSearching] = useState(false)
+  const [ticketDelivering, setTicketDelivering] = useState(false)
+  const [ticketSearchErr, setTicketSearchErr] = useState('')
+  const [ticketDeliverErr, setTicketDeliverErr] = useState('')
+  const [ticketSuccess, setTicketSuccess] = useState(false)
 
   useEffect(() => {
     Promise.all([getStatsApi(), getUsersApi(), getWinnerApi()])
@@ -27,24 +47,66 @@ export default function Admin() {
         setUsers(u.users)
         setWinner(w)
       })
-      .catch((e) => setError(e.message))
+      .catch((e) => {
+        if (!handleAuthError(e)) setError(e.message)
+      })
       .finally(() => setLoading(false))
   }, [])
 
   const handleDraw = async () => {
-    if (!window.confirm('Lancer le tirage au sort ? Cette action est irréversible.')) return
+    setShowConfirm(false)
     setDrawing(true)
     setDrawError('')
     try {
       const data = await drawWinnerApi()
       setWinner(data)
     } catch (e) {
-      setDrawError(e.message)
+      if (!handleAuthError(e)) setDrawError(e.message)
     } finally {
       setDrawing(false)
     }
   }
 
+  const handleTicketSearch = async (e) => {
+    e.preventDefault()
+    setTicketResult(null)
+    setTicketSearchErr('')
+    setTicketDeliverErr('')
+    setTicketSuccess(false)
+    setTicketSearching(true)
+    try {
+      const data = await searchTicketApi(ticketCode.trim())
+      setTicketResult(data)
+    } catch (err) {
+      if (!handleAuthError(err)) setTicketSearchErr(err.message)
+    } finally {
+      setTicketSearching(false)
+    }
+  }
+
+  const handleTicketDeliver = async () => {
+    if (!ticketResult?.claim?.id) return
+    setTicketDeliverErr('')
+    setTicketDelivering(true)
+    try {
+      await deliverClaimApi(ticketResult.claim.id)
+      setTicketResult((prev) => ({
+        ...prev,
+        claim: { ...prev.claim, status: 'DELIVERED', claimedAt: new Date().toISOString() },
+      }))
+      setTicketSuccess(true)
+      setStats((prev) => prev ? {
+        ...prev,
+        claimsPending: Math.max(0, (prev.claimsPending ?? 1) - 1),
+        claimsDelivered: (prev.claimsDelivered ?? 0) + 1,
+      } : prev)
+    } catch (err) {
+      if (!handleAuthError(err)) setTicketDeliverErr(err.message)
+    } finally {
+      setTicketDelivering(false)
+    }
+  }
+
   if (loading) return (
     <div className="min-h-screen bg-gray-50 flex items-center justify-center">
       <p className="text-gray-400">Chargement...</p>
@@ -57,6 +119,8 @@ export default function Admin() {
     </div>
   )
 
+  const winnerUser = winner?.winner?.user
+
   return (
     <div className="min-h-screen bg-gray-50 p-4 sm:p-6">
       <div className="max-w-5xl mx-auto space-y-6">
@@ -98,7 +162,7 @@ export default function Admin() {
                       <td className="py-2.5 px-4 sm:px-0 font-medium text-gray-800 text-xs sm:text-sm">{lot.name}</td>
                       <td className="py-2.5 px-4 sm:px-0 text-center text-gray-500 text-xs sm:text-sm">{lot.percentage}%</td>
                       <td className="py-2.5 px-4 sm:px-0 text-center text-gray-600 text-xs sm:text-sm">{lot._count.tickets.toLocaleString('fr-FR')}</td>
-                      <td className="py-2.5 px-4 sm:px-0 text-center text-green-700 font-semibold text-xs sm:text-sm">{lot._count.participations}</td>
+                      <td className="py-2.5 px-4 sm:px-0 text-center text-[#006B6B] font-semibold text-xs sm:text-sm">{lot._count.participations}</td>
                     </tr>
                   ))}
                 </tbody>
@@ -107,31 +171,147 @@ export default function Admin() {
           </div>
         )}
 
-        {/* Tirage au sort */}
+        {/* ── Remise de lot ── */}
         <div className="bg-white rounded-xl shadow p-4 sm:p-6">
-          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-3">Grand tirage au sort</h2>
+          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Remise de lot</h2>
 
-          {winner?.winner ? (
-            <div className="bg-green-50 border border-green-200 rounded-lg p-4">
-              <p className="text-green-700 font-semibold mb-1">🏆 Gagnant tiré au sort</p>
-              <p className="text-gray-800 font-medium">
-                {winner.winner.user.firstname} {winner.winner.user.lastname}
-              </p>
-              <p className="text-gray-500 text-sm">{winner.winner.user.email}</p>
-              <p className="text-gray-400 text-xs mt-1">
-                Lot : {winner.winner.prize}
-              </p>
+          <form onSubmit={handleTicketSearch} className="flex gap-2 mb-4">
+            <input
+              type="text"
+              value={ticketCode}
+              onChange={(e) => setTicketCode(e.target.value.toUpperCase())}
+              placeholder="Code ticket (10 caractères)"
+              maxLength={10}
+              className="flex-1 border border-gray-200 rounded-lg px-4 py-2.5 text-sm font-mono uppercase tracking-widest focus:outline-none focus:ring-2 focus:ring-[#006B6B] focus:border-[#006B6B]"
+            />
+            <button
+              type="submit"
+              disabled={ticketSearching || ticketCode.trim().length === 0}
+              className="bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-4 py-2.5 rounded-lg transition-colors text-sm whitespace-nowrap"
+            >
+              {ticketSearching ? 'Recherche…' : 'Rechercher'}
+            </button>
+          </form>
+
+          {ticketSearchErr && (
+            <p className="text-red-500 text-sm mb-3">{ticketSearchErr}</p>
+          )}
+
+          {ticketResult && (
+            <div className="border border-gray-100 rounded-xl overflow-hidden">
+              {ticketSuccess && (
+                <div className="bg-green-500 px-4 py-2.5 flex items-center gap-2">
+                  <svg className="w-4 h-4 text-white flex-shrink-0" fill="none" stroke="currentColor" strokeWidth={2.5} viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                  </svg>
+                  <p className="text-white text-sm font-medium">Lot remis avec succès.</p>
+                </div>
+              )}
+
+              <div className="px-4 py-3 flex items-start justify-between gap-3 border-b border-gray-100">
+                <div>
+                  <p className="font-semibold text-gray-900 text-sm">{ticketResult.lot.name}</p>
+                  <p className="text-gray-400 text-xs mt-0.5">{ticketResult.lot.description}</p>
+                  {ticketResult.lot.value && <p className="text-[#006B6B] text-xs font-semibold mt-1">{ticketResult.lot.value} €</p>}
+                </div>
+                <span className={`flex-shrink-0 text-xs font-semibold px-2.5 py-1 rounded-full ${
+                  ticketResult.claim?.status === 'DELIVERED' ? 'bg-green-100 text-green-700'
+                  : ticketResult.claim?.status === 'CANCELLED' ? 'bg-gray-100 text-gray-500'
+                  : 'bg-yellow-100 text-yellow-700'
+                }`}>
+                  {ticketResult.claim?.status === 'DELIVERED' ? 'Remis'
+                   : ticketResult.claim?.status === 'CANCELLED' ? 'Expiré'
+                   : 'À remettre'}
+                </span>
+              </div>
+
+              <div className="px-4 py-3 flex items-center gap-3 border-b border-gray-100">
+                <div className="w-8 h-8 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-xs font-bold flex-shrink-0">
+                  {(ticketResult.client.firstname?.[0] ?? '?').toUpperCase()}{(ticketResult.client.lastname?.[0] ?? '?').toUpperCase()}
+                </div>
+                <div>
+                  <p className="text-sm font-medium text-gray-800">{ticketResult.client.firstname} {ticketResult.client.lastname}</p>
+                  <p className="text-xs text-gray-500">{ticketResult.client.email}</p>
+                </div>
+              </div>
+
+              <div className="px-4 py-3 space-y-2">
+                {ticketDeliverErr && <p className="text-red-500 text-xs">{ticketDeliverErr}</p>}
+
+                {ticketResult.claim?.status === 'PENDING' && !ticketSuccess && (
+                  <button
+                    onClick={handleTicketDeliver}
+                    disabled={ticketDelivering}
+                    className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold py-2.5 rounded-lg transition-colors text-sm"
+                  >
+                    {ticketDelivering ? 'Confirmation…' : 'Confirmer la remise du lot'}
+                  </button>
+                )}
+                <button
+                  onClick={() => { setTicketCode(''); setTicketResult(null); setTicketSuccess(false); setTicketSearchErr(''); setTicketDeliverErr('') }}
+                  className="w-full border border-gray-200 text-gray-500 hover:bg-gray-50 py-2 rounded-lg transition-colors text-sm"
+                >
+                  Rechercher un autre code
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* ── Tirage au sort ── */}
+        <div className="bg-white rounded-xl shadow p-4 sm:p-6">
+          <h2 className="text-base sm:text-lg font-bold text-gray-800 mb-4">Grand tirage au sort</h2>
+
+          {winnerUser ? (
+            /* Gagnant déjà tiré */
+            <div className="space-y-4">
+              <div className="flex items-center gap-4 p-4 bg-[#006B6B]/5 rounded-xl border border-[#006B6B]/20">
+                <div className="w-14 h-14 rounded-full bg-[#006B6B] flex items-center justify-center text-white text-lg font-bold flex-shrink-0">
+                  {(winnerUser.firstname?.[0] ?? '?').toUpperCase()}{(winnerUser.lastname?.[0] ?? '?').toUpperCase()}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <p className="text-xs text-[#006B6B] font-semibold uppercase tracking-wider mb-0.5">Gagnant du grand tirage</p>
+                  <p className="font-bold text-gray-900 text-base">{winnerUser.firstname} {winnerUser.lastname}</p>
+                  <p className="text-gray-500 text-sm truncate">{winnerUser.email}</p>
+                </div>
+                <div className="flex-shrink-0">
+                  <svg className="w-8 h-8 text-yellow-400" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
+                  </svg>
+                </div>
+              </div>
+              {winner?.winner?.createdAt && (
+                <p className="text-xs text-gray-400 text-right">
+                  Tirage effectué le {formatDate(winner.winner.createdAt)}
+                </p>
+              )}
             </div>
           ) : (
-            <div className="space-y-2">
+            /* Pas encore de tirage */
+            <div className="space-y-3">
+              <div className="p-4 bg-gray-50 rounded-xl border border-gray-200">
+                <p className="text-sm text-gray-600 mb-1">
+                  <span className="font-semibold text-gray-800">{stats?.participations ?? 0}</span> participations enregistrées
+                </p>
+                <p className="text-sm text-gray-600">
+                  <span className="font-semibold text-gray-800">{stats?.users ?? 0}</span> participants éligibles
+                </p>
+              </div>
+
+              {drawError && (
+                <p className="text-red-500 text-sm px-1">{drawError}</p>
+              )}
+
               <button
-                onClick={handleDraw}
-                disabled={drawing}
-                className="bg-green-700 hover:bg-green-800 disabled:opacity-60 text-white font-semibold px-5 py-2.5 rounded-lg transition-colors text-sm"
+                onClick={() => setShowConfirm(true)}
+                disabled={drawing || (stats?.users ?? 0) === 0}
+                className="flex items-center gap-2 bg-[#006B6B] hover:bg-[#005959] disabled:opacity-50 text-white font-semibold px-5 py-3 rounded-xl transition-colors text-sm"
               >
-                {drawing ? 'Tirage en cours...' : 'Lancer le tirage'}
+                <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
+                </svg>
+                {drawing ? 'Tirage en cours…' : 'Lancer le tirage au sort'}
               </button>
-              {drawError && <p className="text-red-500 text-xs">{drawError}</p>}
             </div>
           )}
         </div>
@@ -164,7 +344,7 @@ export default function Admin() {
                       {user.firstname} {user.lastname}
                     </td>
                     <td className="py-3 px-4 sm:px-0 text-gray-500 text-xs">{user.email}</td>
-                    <td className="py-3 px-4 sm:px-0 text-right text-green-700 font-semibold text-xs sm:text-sm">
+                    <td className="py-3 px-4 sm:px-0 text-right text-[#006B6B] font-semibold text-xs sm:text-sm">
                       {user._count.participations}
                     </td>
                   </tr>
@@ -175,6 +355,51 @@ export default function Admin() {
         </div>
 
       </div>
+
+      {/* ── Modal de confirmation du tirage ── */}
+      {showConfirm && (
+        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4">
+          <div className="bg-white rounded-2xl w-full max-w-sm shadow-xl p-6">
+
+            <div className="flex justify-center mb-4">
+              <div className="w-14 h-14 rounded-full bg-yellow-100 flex items-center justify-center">
+                <svg className="w-7 h-7 text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
+                  <path d="M12 2l2.4 7.4H22l-6.2 4.5 2.4 7.4L12 17l-6.2 4.3 2.4-7.4L2 9.4h7.6z" />
+                </svg>
+              </div>
+            </div>
+
+            <h3 className="text-lg font-bold text-gray-900 text-center mb-1">Lancer le tirage au sort ?</h3>
+            <p className="text-sm text-gray-500 text-center mb-4">
+              Un gagnant sera sélectionné aléatoirement parmi les <strong>{stats?.users}</strong> participants.
+            </p>
+
+            <div className="bg-red-50 border border-red-200 rounded-xl px-4 py-3 mb-5 flex gap-2 items-start">
+              <svg className="w-4 h-4 text-red-500 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+              </svg>
+              <p className="text-xs text-red-600">Cette action est <strong>irréversible</strong>. Le tirage ne peut être effectué qu'une seule fois.</p>
+            </div>
+
+            <div className="flex gap-3">
+              <button
+                onClick={() => setShowConfirm(false)}
+                className="flex-1 border border-gray-200 text-gray-600 hover:bg-gray-50 font-medium py-2.5 rounded-xl transition-colors text-sm"
+              >
+                Annuler
+              </button>
+              <button
+                onClick={handleDraw}
+                className="flex-1 bg-[#006B6B] hover:bg-[#005959] text-white font-semibold py-2.5 rounded-xl transition-colors text-sm"
+              >
+                Confirmer le tirage
+              </button>
+            </div>
+
+          </div>
+        </div>
+      )}
+
     </div>
   )
 }

frontend/src/pages/Inscription.jsx

@@ -1,32 +1,30 @@
-import { useState, useEffect } from 'react'
+import { useState, useRef } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
-import { registerApi } from '../services/auth'
+import { registerApi, verifyCodeApi } from '../services/auth'
+import { useAuth } from '../context/AuthContext'
 
 export default function Inscription() {
   const navigate = useNavigate()
-  const [form, setForm] = useState({ email: '', lastName: '', firstName: '', password: '' })
+  const { login } = useAuth()
+
+  // Étape : 'form' | 'verify'
+  const [step, setStep]           = useState('form')
+  const [email, setEmail]         = useState('')
+  const [form, setForm]           = useState({ email: '', lastName: '', firstName: '', password: '' })
   const [acceptedTerms, setAcceptedTerms] = useState(false)
-  const [showPassword, setShowPassword] = useState(false)
-  const [error, setError] = useState('')
-  const [loading, setLoading] = useState(false)
-  const [successName, setSuccessName] = useState(null)
-  const [countdown, setCountdown] = useState(5)
+  const [showPassword, setShowPassword]   = useState(false)
+  const [error, setError]         = useState('')
+  const [loading, setLoading]     = useState(false)
 
-  useEffect(() => {
-    if (successName === null) return
-    if (countdown === 0) {
-      navigate('/connexion', { state: { registered: true } })
-      return
-    }
-    const t = setTimeout(() => setCountdown((c) => c - 1), 1000)
-    return () => clearTimeout(t)
-  }, [successName, countdown, navigate])
+  // Code à 4 chiffres
+  const [digits, setDigits]       = useState(['', '', '', ''])
+  const [codeError, setCodeError] = useState('')
+  const [codeLoading, setCodeLoading] = useState(false)
+  const inputRefs = [useRef(), useRef(), useRef(), useRef()]
 
-  const handleChange = (e) => {
-    const { name, value } = e.target
-    setForm({ ...form, [name]: value })
-  }
+  const handleChange = (e) => setForm({ ...form, [e.target.name]: e.target.value })
 
+  // Étape 1 — Inscription
   const handleSubmit = async (e) => {
     e.preventDefault()
     setError('')
@@ -38,7 +36,8 @@ export default function Inscription() {
         lastname: form.lastName,
         password: form.password,
       })
-      setSuccessName(form.firstName)
+      setEmail(form.email)
+      setStep('verify')
     } catch (err) {
       setError(err.message)
     } finally {
@@ -46,9 +45,106 @@ export default function Inscription() {
     }
   }
 
+  // Étape 2 — Saisie du code
+  const handleDigit = (index, value) => {
+    if (!/^\d?$/.test(value)) return
+    const next = [...digits]
+    next[index] = value
+    setDigits(next)
+    if (value && index < 3) inputRefs[index + 1].current?.focus()
+  }
+
+  const handleDigitKeyDown = (index, e) => {
+    if (e.key === 'Backspace' && !digits[index] && index > 0) {
+      inputRefs[index - 1].current?.focus()
+    }
+  }
+
+  const handleVerify = async (e) => {
+    e.preventDefault()
+    const code = digits.join('')
+    if (code.length !== 4) return
+    setCodeError('')
+    setCodeLoading(true)
+    try {
+      const data = await verifyCodeApi({ email, code })
+      login(data.user, data.token)
+      navigate('/saisir-code-unique')
+    } catch (err) {
+      setCodeError(err.message)
+      setDigits(['', '', '', ''])
+      inputRefs[0].current?.focus()
+    } finally {
+      setCodeLoading(false)
+    }
+  }
+
+  // ── Étape 2 : Vérification du code ──
+  if (step === 'verify') {
+    return (
+      <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
+        <div className="mb-8 text-center">
+          <div className="w-14 h-14 rounded-full bg-[#006B6B]/10 flex items-center justify-center mx-auto mb-4">
+            <svg className="w-7 h-7 text-[#006B6B]" fill="none" stroke="currentColor" strokeWidth={1.5} viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
+            </svg>
+          </div>
+          <h1 className="text-2xl font-bold italic font-serif text-[#006B6B]">Vérifiez votre email</h1>
+          <p className="text-gray-500 text-sm mt-2">
+            Un code à 4 chiffres a été envoyé à<br />
+            <span className="font-medium text-gray-700">{email}</span>
+          </p>
+        </div>
+
+        {codeError && (
+          <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm text-center">
+            {codeError}
+          </div>
+        )}
+
+        <form onSubmit={handleVerify} className="space-y-6">
+          <div className="flex justify-center gap-3">
+            {digits.map((d, i) => (
+              <input
+                key={i}
+                ref={inputRefs[i]}
+                type="text"
+                inputMode="numeric"
+                maxLength={1}
+                value={d}
+                onChange={(e) => handleDigit(i, e.target.value)}
+                onKeyDown={(e) => handleDigitKeyDown(i, e)}
+                className="w-14 h-14 text-center text-2xl font-bold border-2 border-gray-200 rounded-xl focus:outline-none focus:border-[#006B6B] focus:ring-1 focus:ring-[#006B6B] transition-colors"
+              />
+            ))}
+          </div>
+
+          <button
+            type="submit"
+            disabled={codeLoading || digits.join('').length !== 4}
+            className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
+          >
+            {codeLoading ? 'Vérification…' : 'Valider le code'}
+          </button>
+        </form>
+
+        <p className="text-center text-xs text-gray-400 mt-6">
+          Le code expire dans 15 minutes.{' '}
+          <button
+            type="button"
+            onClick={() => { setStep('form'); setDigits(['', '', '', '']); setCodeError('') }}
+            className="text-[#006B6B] hover:underline"
+          >
+            Recommencer
+          </button>
+        </p>
+      </div>
+    )
+  }
+
+  // ── Étape 1 : Formulaire d'inscription ──
   return (
     <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
-
       <div className="mb-8">
         <h1 className="text-4xl font-bold italic font-serif text-[#006B6B]">S'inscrire</h1>
         <p className="text-gray-500 mt-1 text-sm">Créer votre compte</p>
@@ -62,70 +158,30 @@ export default function Inscription() {
 
       <form onSubmit={handleSubmit} className="space-y-5">
         <div>
-          <label className="block text-sm font-medium text-gray-800 mb-1">
-            Adresse email <span className="text-gray-800">*</span>
-          </label>
-          <input
-            type="email"
-            name="email"
-            value={form.email}
-            onChange={handleChange}
-            required
-            placeholder="Votre email"
-            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
-          />
+          <label className="block text-sm font-medium text-gray-800 mb-1">Adresse email <span className="text-gray-800">*</span></label>
+          <input type="email" name="email" value={form.email} onChange={handleChange} required placeholder="Votre email"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]" />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-800 mb-1">
-            Nom <span className="text-gray-800">*</span>
-          </label>
-          <input
-            type="text"
-            name="lastName"
-            value={form.lastName}
-            onChange={handleChange}
-            required
-            placeholder="Votre nom"
-            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
-          />
+          <label className="block text-sm font-medium text-gray-800 mb-1">Nom <span className="text-gray-800">*</span></label>
+          <input type="text" name="lastName" value={form.lastName} onChange={handleChange} required placeholder="Votre nom"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]" />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-800 mb-1">
-            Prénom <span className="text-gray-800">*</span>
-          </label>
-          <input
-            type="text"
-            name="firstName"
-            value={form.firstName}
-            onChange={handleChange}
-            required
-            placeholder="Votre prénom"
-            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
-          />
+          <label className="block text-sm font-medium text-gray-800 mb-1">Prénom <span className="text-gray-800">*</span></label>
+          <input type="text" name="firstName" value={form.firstName} onChange={handleChange} required placeholder="Votre prénom"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]" />
         </div>
 
         <div>
-          <label className="block text-sm font-medium text-gray-800 mb-1">
-            Mot de passe <span className="text-gray-800">*</span>
-          </label>
+          <label className="block text-sm font-medium text-gray-800 mb-1">Mot de passe <span className="text-gray-800">*</span></label>
           <div className="relative">
-            <input
-              type={showPassword ? 'text' : 'password'}
-              name="password"
-              value={form.password}
-              onChange={handleChange}
-              required
-              placeholder="Votre mot de passe"
-              className="w-full border border-gray-200 rounded-lg px-4 py-3 pr-12 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
-            />
-            <button
-              type="button"
-              onClick={() => setShowPassword(!showPassword)}
-              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-              aria-label="Afficher/masquer le mot de passe"
-            >
+            <input type={showPassword ? 'text' : 'password'} name="password" value={form.password} onChange={handleChange} required placeholder="Votre mot de passe"
+              className="w-full border border-gray-200 rounded-lg px-4 py-3 pr-12 text-sm text-gray-700 placeholder-gray-300 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]" />
+            <button type="button" onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600" aria-label="Afficher/masquer">
               <div className="w-6 h-6 rounded-full border-2 border-gray-400 flex items-center justify-center">
                 {showPassword && <div className="w-1.5 h-1.5 rounded-full bg-gray-400" />}
               </div>
@@ -134,31 +190,19 @@ export default function Inscription() {
         </div>
 
         <label className="flex items-start gap-3 cursor-pointer">
-          <input
-            type="checkbox"
-            checked={acceptedTerms}
-            onChange={(e) => setAcceptedTerms(e.target.checked)}
-            required
-            className="mt-0.5 w-4 h-4 accent-[#006B6B] flex-shrink-0"
-          />
+          <input type="checkbox" checked={acceptedTerms} onChange={(e) => setAcceptedTerms(e.target.checked)} required
+            className="mt-0.5 w-4 h-4 accent-[#006B6B] flex-shrink-0" />
           <span className="text-xs text-gray-500 leading-relaxed">
             J'accepte les{' '}
-            <Link to="/mentions-legales" className="text-[#006B6B] hover:underline font-medium">
-              conditions d'utilisation
-            </Link>{' '}
+            <Link to="/mentions-legales" className="text-[#006B6B] hover:underline font-medium">conditions d'utilisation</Link>{' '}
             et la{' '}
-            <Link to="/confidentialite" className="text-[#006B6B] hover:underline font-medium">
-              politique de confidentialité
-            </Link>
+            <Link to="/confidentialite" className="text-[#006B6B] hover:underline font-medium">politique de confidentialité</Link>
           </span>
         </label>
 
-        <button
-          type="submit"
-          disabled={loading || !acceptedTerms}
-          className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
-        >
-          {loading ? 'Inscription...' : "S'inscrire"}
+        <button type="submit" disabled={loading || !acceptedTerms}
+          className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors">
+          {loading ? 'Inscription…' : "S'inscrire"}
         </button>
       </form>
 
@@ -183,28 +227,6 @@ export default function Inscription() {
         Vous avez déjà un compte ?{' '}
         <Link to="/connexion" className="text-gray-700 font-medium hover:underline">Se connecter</Link>
       </p>
-
-      {/* Modal succès */}
-      {successName !== null && (
-        <div className="fixed inset-0 bg-black/40 flex items-center justify-center z-50 px-6">
-          <div className="bg-white rounded-2xl p-8 w-full max-w-sm text-center shadow-xl">
-            <div className="flex justify-center mb-5">
-              <div className="w-16 h-16 bg-green-500 rounded-full flex items-center justify-center">
-                <svg className="w-9 h-9 text-white" fill="none" stroke="currentColor" strokeWidth={3} viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-                </svg>
-              </div>
-            </div>
-            <h2 className="text-2xl font-bold text-gray-900 mb-2">
-              Bienvenue {successName}&nbsp;!!
-            </h2>
-            <p className="text-gray-500 text-sm leading-relaxed">
-              Votre compte a été créé avec succès. Un email de validation vous a été envoyé. Vous serez redirigé vers la connexion dans{' '}
-              <span className="font-semibold text-[#006B6B]">{countdown}</span> secondes.
-            </p>
-          </div>
-        </div>
-      )}
     </div>
   )
 }

frontend/src/pages/Profile.jsx

@@ -1,12 +1,20 @@
 import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import UserNav from '../components/UserNav'
-import { changePasswordApi } from '../services/auth'
+import { changePasswordApi, deleteAccountApi } from '../services/auth'
 import { useHandleAuthError } from '../hooks/useHandleAuthError'
+import { useAuth } from '../context/AuthContext'
 
 export default function Profile() {
   const user = JSON.parse(localStorage.getItem('user') || '{}')
   const initials = `${(user.firstname || '?')[0]}${(user.lastname || '?')[0]}`.toUpperCase()
   const handleAuthError = useHandleAuthError()
+  const { logout } = useAuth()
+  const navigate = useNavigate()
+
+  const [showDeleteModal, setShowDeleteModal] = useState(false)
+  const [deleting, setDeleting]               = useState(false)
+  const [deleteError, setDeleteError]         = useState('')
 
   const [pwForm, setPwForm] = useState({ currentPassword: '', newPassword: '', confirmPassword: '' })
   const [showPw, setShowPw] = useState({ current: false, new: false, confirm: false })

frontend/src/pages/SaisirCodeUnique.jsx

@@ -47,7 +47,7 @@ export default function SaisirCodeUnique() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex flex-col justify-center px-8 py-12 max-w-sm mx-auto">
+    <div className="min-h-screen bg-gray-50 flex flex-col px-8 py-12 max-w-sm mx-auto">
       <UserNav active="code" />
 
       <div className="mb-8">

frontend/src/services/auth.js

@@ -28,6 +28,28 @@ export async function registerApi({ email, firstname, lastname, password }) {
   return data
 }
 
+export async function verifyCodeApi({ email, code }) {
+  const res = await fetch(`${BASE}/verify-code`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, code }),
+  })
+  const data = await res.json()
+  if (!res.ok) throw apiError(data.message || 'Code invalide.', res.status)
+  return data
+}
+
+export async function deleteAccountApi() {
+  const token = localStorage.getItem('token')
+  const res = await fetch(`${BASE}/account`, {
+    method: 'DELETE',
+    headers: { Authorization: `Bearer ${token}` },
+  })
+  const data = await res.json()
+  if (!res.ok) throw apiError(data.message || 'Erreur lors de la suppression.', res.status)
+  return data
+}
+
 export async function changePasswordApi({ currentPassword, newPassword }) {
   const token = localStorage.getItem('token')
   const res = await fetch(`${BASE}/change-password`, {