259 lines
11 KiB
TypeScript
259 lines
11 KiB
TypeScript
"use client";
|
|
import { useState, useEffect, Suspense } from "react";
|
|
import { useSearchParams, useRouter } from "next/navigation";
|
|
import Link from "next/link";
|
|
import { ROUTES, API_BASE_URL } from "@/utils/constants";
|
|
|
|
function ResetPasswordForm() {
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
const token = searchParams.get("token");
|
|
|
|
const [password, setPassword] = useState("");
|
|
const [confirmPassword, setConfirmPassword] = useState("");
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
const [isSuccess, setIsSuccess] = useState(false);
|
|
const [error, setError] = useState("");
|
|
const [showPassword, setShowPassword] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!token) {
|
|
setError("Token de réinitialisation manquant. Veuillez demander un nouveau lien.");
|
|
}
|
|
}, [token]);
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setError("");
|
|
|
|
// Validation
|
|
if (password.length < 8) {
|
|
setError("Le mot de passe doit contenir au moins 8 caractères");
|
|
return;
|
|
}
|
|
|
|
if (password !== confirmPassword) {
|
|
setError("Les mots de passe ne correspondent pas");
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE_URL}/auth/reset-password`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ token, password, confirmPassword }),
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
setIsSuccess(true);
|
|
// Redirection après 3 secondes
|
|
setTimeout(() => {
|
|
router.push(ROUTES.LOGIN);
|
|
}, 3000);
|
|
} else {
|
|
setError(data.message || 'Une erreur est survenue');
|
|
}
|
|
} catch (err) {
|
|
setError('Erreur de connexion au serveur');
|
|
console.error('Reset password error:', err);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
if (isSuccess) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
|
<div className="w-full max-w-md">
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">Mot de passe modifié !</h1>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-xl shadow-md p-8">
|
|
<div className="text-center">
|
|
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-4">
|
|
<svg className="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h2 className="text-xl font-bold text-gray-900 mb-2">
|
|
Votre mot de passe a été réinitialisé
|
|
</h2>
|
|
|
|
<p className="text-gray-600 mb-6">
|
|
Vous allez être redirigé vers la page de connexion...
|
|
</p>
|
|
|
|
<Link
|
|
href={ROUTES.LOGIN}
|
|
className="inline-flex items-center justify-center w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] text-white font-bold px-8 py-4 rounded-lg transition-all"
|
|
>
|
|
Se connecter maintenant
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
|
|
<div className="w-full max-w-md">
|
|
|
|
{/* Title */}
|
|
<div className="text-center mb-8">
|
|
<h1 className="text-4xl font-bold text-gray-900 mb-2">Nouveau mot de passe</h1>
|
|
<p className="text-gray-600">
|
|
Choisissez un nouveau mot de passe sécurisé
|
|
</p>
|
|
</div>
|
|
|
|
{/* Main Card */}
|
|
<div className="bg-white rounded-xl shadow-md overflow-hidden">
|
|
<div className="p-8">
|
|
|
|
{/* Error Message */}
|
|
{error && (
|
|
<div className="mb-4 p-4 bg-red-50 border-l-4 border-red-500 text-red-700">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
|
|
{/* New Password */}
|
|
<div>
|
|
<label htmlFor="password" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Nouveau mot de passe <span className="text-red-500">*</span>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
id="password"
|
|
type={showPassword ? "text" : "password"}
|
|
required
|
|
minLength={8}
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
placeholder="Minimum 8 caractères"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent pr-12"
|
|
disabled={!token}
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowPassword(!showPassword)}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
|
|
>
|
|
{showPassword ? (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Confirm Password */}
|
|
<div>
|
|
<label htmlFor="confirmPassword" className="block text-sm font-semibold text-gray-700 mb-2">
|
|
Confirmer le mot de passe <span className="text-red-500">*</span>
|
|
</label>
|
|
<input
|
|
id="confirmPassword"
|
|
type={showPassword ? "text" : "password"}
|
|
required
|
|
minLength={8}
|
|
value={confirmPassword}
|
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
|
placeholder="Répétez le mot de passe"
|
|
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#1a4d2e] focus:border-transparent"
|
|
disabled={!token}
|
|
/>
|
|
</div>
|
|
|
|
{/* Password Requirements */}
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
<p className="text-sm font-semibold text-gray-700 mb-2">Le mot de passe doit contenir :</p>
|
|
<ul className="text-sm text-gray-600 space-y-1">
|
|
<li className={`flex items-center gap-2 ${password.length >= 8 ? 'text-green-600' : ''}`}>
|
|
{password.length >= 8 ? (
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
Au moins 8 caractères
|
|
</li>
|
|
<li className={`flex items-center gap-2 ${password === confirmPassword && password.length > 0 ? 'text-green-600' : ''}`}>
|
|
{password === confirmPassword && password.length > 0 ? (
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v3.586L7.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 10.586V7z" clipRule="evenodd" />
|
|
</svg>
|
|
)}
|
|
Les mots de passe correspondent
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Submit Button */}
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitting || !token}
|
|
className="w-full bg-[#1a4d2e] hover:bg-[#2d5a3d] disabled:bg-gray-400 text-white font-bold px-8 py-4 rounded-lg transition-all"
|
|
>
|
|
{isSubmitting ? "Modification en cours..." : "Réinitialiser le mot de passe"}
|
|
</button>
|
|
|
|
{/* Back to Login */}
|
|
<div className="text-center">
|
|
<Link
|
|
href={ROUTES.LOGIN}
|
|
className="text-sm text-[#1a4d2e] hover:text-[#f59e0b] hover:underline font-semibold transition-colors"
|
|
>
|
|
Retour à la connexion
|
|
</Link>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function ResetPasswordPage() {
|
|
return (
|
|
<Suspense fallback={
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
|
<div className="text-center">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#1a4d2e] mx-auto mb-4"></div>
|
|
<p className="text-gray-600">Chargement...</p>
|
|
</div>
|
|
</div>
|
|
}>
|
|
<ResetPasswordForm />
|
|
</Suspense>
|
|
);
|
|
}
|