changement

2026-09-14 22:30:40 +02:00
parent 8a6355cde1
commit 2201446ee6
54 changed files with 2495 additions and 139 deletions
--- a/frontend/src/pages/MotDePasseOublie.jsx
+++ b/frontend/src/pages/MotDePasseOublie.jsx
@@ -0,0 +1,117 @@
+import { useRef, useState } from 'react'
+import { Link, useLocation } from 'react-router-dom'
+import { forgotPasswordApi } from '../services/auth'
+import usePageMeta from '../hooks/usePageMeta'
+import Captcha from '../components/Captcha'
+import { CAPTCHA_ENABLED } from '../config/captcha'
+
+// Demande d'un lien de réinitialisation. La réponse est volontairement la même
+// que le compte existe ou non, pour ne pas révéler quels emails sont inscrits.
+export default function MotDePasseOublie() {
+  usePageMeta({
+    title: 'Mot de passe oublié | Thé Tip Top',
+    description: 'Recevez par email un lien pour choisir un nouveau mot de passe pour votre compte Thé Tip Top.',
+  })
+
+  // L'email déjà saisi sur la page de connexion est repris.
+  const { state } = useLocation()
+  const [email, setEmail] = useState(state?.email ?? '')
+  const [sent, setSent] = useState('')
+  const [error, setError] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [captchaToken, setCaptchaToken] = useState('')
+  const captchaRef = useRef()
+
+  const handleSubmit = async (e) => {
+    e.preventDefault()
+    setError('')
+    setLoading(true)
+    try {
+      const data = await forgotPasswordApi({ email, captchaToken })
+      setSent(data.message)
+    } catch (err) {
+      setError(err.message)
+      // Le jeton a été consommé par le backend : on en redemande un.
+      captchaRef.current?.reset()
+      setCaptchaToken('')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (sent) {
+    return (
+      <div className="min-h-screen bg-white flex flex-col justify-center px-8 py-12 max-w-sm mx-auto text-center">
+        <h1 className="text-3xl font-bold italic font-serif text-[#006B6B] mb-4">Vérifiez vos emails</h1>
+        <div className="mb-4 px-4 py-3 rounded-lg bg-green-50 border border-green-200 text-green-700 text-sm" role="status">
+          {sent}
+        </div>
+        <p className="text-sm text-gray-500 mb-6">
+          Le lien est valable 30 minutes. Pensez à regarder dans vos courriers indésirables.
+        </p>
+        <button
+          type="button"
+          onClick={() => { setSent(''); setCaptchaToken('') }}
+          className="text-sm text-gray-500 hover:text-[#006B6B] hover:underline mb-3"
+        >
+          Je n'ai rien reçu, renvoyer un lien
+        </button>
+        <Link to="/connexion" className="text-sm text-[#006B6B] font-medium hover:underline">
+          Retour à la connexion
+        </Link>
+      </div>
+    )
+  }
+
+  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]">Mot de passe oublié</h1>
+        <p className="text-gray-500 mt-2 text-sm">
+          Saisissez l'adresse email de votre compte : nous vous enverrons un lien pour choisir un nouveau mot de passe.
+        </p>
+      </div>
+
+      {error && (
+        <div className="mb-4 px-4 py-3 rounded-lg bg-red-50 border border-red-200 text-red-600 text-sm" role="alert">
+          {error}
+        </div>
+      )}
+
+      <form onSubmit={handleSubmit} className="space-y-5">
+        <div>
+          <label htmlFor="forgot-email" className="block text-sm font-medium text-gray-800 mb-1">
+            Adresse email <span className="text-gray-800">*</span>
+          </label>
+          <input
+            type="email"
+            id="forgot-email"
+            name="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            required
+            autoComplete="email"
+            placeholder="Votre email"
+            className="w-full border border-gray-200 rounded-lg px-4 py-3 text-sm text-gray-700 placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-[#006B6B] focus:border-[#006B6B]"
+          />
+        </div>
+
+        <Captcha ref={captchaRef} onToken={setCaptchaToken} />
+
+        <button
+          type="submit"
+          disabled={loading || (CAPTCHA_ENABLED && !captchaToken)}
+          className="w-full bg-[#006B6B] hover:bg-[#005959] disabled:opacity-60 text-white font-medium py-3 rounded-lg transition-colors"
+        >
+          {loading ? 'Envoi…' : 'Recevoir le lien'}
+        </button>
+      </form>
+
+      <p className="text-center text-sm text-gray-500 mt-8">
+        <Link to="/connexion" className="text-gray-700 font-medium hover:underline">
+          Retour à la connexion
+        </Link>
+      </p>
+    </div>
+  )
+}