118 lines
4.4 KiB
JavaScript
118 lines
4.4 KiB
JavaScript
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>
|
|
)
|
|
}
|