Checkpoint: Création des pages de réinitialisation de mot de passe :

- Ajout de la page /forgot-password pour demander un lien de réinitialisation
- Ajout de la page /reset-password pour définir un nouveau mot de passe
- Ajout du lien "Mot de passe oublié ?" sur la page de connexion
- Installation du module bcrypt dans le sandbox
- Les procédures backend (requestPasswordReset, resetPassword) sont déjà implémentées
- Note: bcrypt temporairement désactivé sur le VPS en attendant la résolution du problème de store pnpm

client/src/App.tsx

@@ -39,6 +39,8 @@ import Login from "./pages/Login";
 import FormateurDashboard from "./pages/FormateurDashboard";
 import FormateurEmargement from "./pages/FormateurEmargement";
 import EmargementScan from "./pages/EmargementScan";
+import ForgotPassword from "./pages/ForgotPassword";
+import ResetPassword from "./pages/ResetPassword";
 
 function Router() {
   return (
@@ -46,6 +48,8 @@ function Router() {
       <Route path={"/"} component={LoginChoice} />
       <Route path={"/home"} component={Home} />
       <Route path={"/login"} component={Login} />
+      <Route path={"/forgot-password"} component={ForgotPassword} />
+      <Route path={"/reset-password"} component={ResetPassword} />
       <Route path={"/admin/rapport-public-cible"} component={AdminRapportPublicCible} />
       <Route path={"/inscription/:lien"} component={Inscription} />
       <Route path={"/admin"} component={Admin} />

client/src/pages/ForgotPassword.tsx

@@ -0,0 +1,118 @@
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "sonner";
+import { trpc } from "@/lib/trpc";
+import { Link } from "wouter";
+import { ArrowLeft, Loader2 } from "lucide-react";
+import { APP_LOGO, APP_TITLE } from "@/const";
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState("");
+  const [submitted, setSubmitted] = useState(false);
+
+  const requestResetMutation = trpc.auth.requestPasswordReset.useMutation({
+    onSuccess: () => {
+      setSubmitted(true);
+      toast.success("Email envoyé", {
+        description: "Un lien de réinitialisation a été envoyé à votre adresse email.",
+      });
+    },
+    onError: (error) => {
+      toast.error("Erreur", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!email) {
+      toast.error("Veuillez saisir votre adresse email");
+      return;
+    }
+    requestResetMutation.mutate({ email });
+  };
+
+  if (submitted) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            {APP_LOGO && (
+              <div className="flex justify-center mb-4">
+                <img src={APP_LOGO} alt="Logo" className="h-12" />
+              </div>
+            )}
+            <CardTitle>Email envoyé</CardTitle>
+            <CardDescription>
+              Un lien de réinitialisation a été envoyé à <strong>{email}</strong>.
+              Vérifiez votre boîte de réception et suivez les instructions.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link href="/login">
+              <Button variant="outline" className="w-full">
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                Retour à la connexion
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          {APP_LOGO && (
+            <div className="flex justify-center mb-4">
+              <img src={APP_LOGO} alt="Logo" className="h-12" />
+            </div>
+          )}
+          <CardTitle>Mot de passe oublié</CardTitle>
+          <CardDescription>
+            Saisissez votre adresse email pour recevoir un lien de réinitialisation
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="email">Adresse email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="votre.email@exemple.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={requestResetMutation.isPending}
+            >
+              {requestResetMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Envoyer le lien de réinitialisation
+            </Button>
+
+            <Link href="/login">
+              <Button variant="ghost" className="w-full">
+                <ArrowLeft className="mr-2 h-4 w-4" />
+                Retour à la connexion
+              </Button>
+            </Link>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

client/src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLocation } from "wouter";
+import { useLocation, Link } from "wouter";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -108,6 +108,14 @@ export default function Login() {
             </Button>
           </form>
 
+          <div className="mt-4 text-center">
+            <Link href="/forgot-password">
+              <Button variant="link" className="text-sm text-blue-600 hover:text-blue-800">
+                Mot de passe oublié ?
+              </Button>
+            </Link>
+          </div>
+
           <div className="mt-6 text-center text-sm text-gray-600">
             <p>Vous n'avez pas de compte ?</p>
             <p className="mt-1">Contactez l'administrateur</p>

client/src/pages/ResetPassword.tsx

@@ -0,0 +1,185 @@
+import { useState, useEffect } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { toast } from "sonner";
+import { trpc } from "@/lib/trpc";
+import { useLocation, Link } from "wouter";
+import { Loader2, CheckCircle2 } from "lucide-react";
+import { APP_LOGO } from "@/const";
+
+export default function ResetPassword() {
+  const [, setLocation] = useLocation();
+  const [token, setToken] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [success, setSuccess] = useState(false);
+
+  useEffect(() => {
+    // Extraire le token depuis l'URL
+    const params = new URLSearchParams(window.location.search);
+    const tokenParam = params.get("token");
+    if (tokenParam) {
+      setToken(tokenParam);
+    } else {
+      toast.error("Token manquant", {
+        description: "Le lien de réinitialisation est invalide.",
+      });
+    }
+  }, []);
+
+  const resetPasswordMutation = trpc.auth.resetPassword.useMutation({
+    onSuccess: () => {
+      setSuccess(true);
+      toast.success("Mot de passe réinitialisé", {
+        description: "Vous pouvez maintenant vous connecter avec votre nouveau mot de passe.",
+      });
+      setTimeout(() => {
+        setLocation("/login");
+      }, 3000);
+    },
+    onError: (error) => {
+      toast.error("Erreur", {
+        description: error.message,
+      });
+    },
+  });
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!newPassword || !confirmPassword) {
+      toast.error("Veuillez remplir tous les champs");
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      toast.error("Le mot de passe doit contenir au moins 8 caractères");
+      return;
+    }
+
+    if (newPassword !== confirmPassword) {
+      toast.error("Les mots de passe ne correspondent pas");
+      return;
+    }
+
+    resetPasswordMutation.mutate({ token, newPassword });
+  };
+
+  if (success) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            {APP_LOGO && (
+              <div className="flex justify-center mb-4">
+                <img src={APP_LOGO} alt="Logo" className="h-12" />
+              </div>
+            )}
+            <div className="flex justify-center mb-4">
+              <CheckCircle2 className="h-16 w-16 text-green-500" />
+            </div>
+            <CardTitle>Mot de passe réinitialisé</CardTitle>
+            <CardDescription>
+              Votre mot de passe a été modifié avec succès.
+              Vous allez être redirigé vers la page de connexion...
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link href="/login">
+              <Button className="w-full">
+                Aller à la page de connexion
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  if (!token) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader className="text-center">
+            {APP_LOGO && (
+              <div className="flex justify-center mb-4">
+                <img src={APP_LOGO} alt="Logo" className="h-12" />
+              </div>
+            )}
+            <CardTitle>Lien invalide</CardTitle>
+            <CardDescription>
+              Le lien de réinitialisation est invalide ou a expiré.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Link href="/forgot-password">
+              <Button className="w-full">
+                Demander un nouveau lien
+              </Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader className="text-center">
+          {APP_LOGO && (
+            <div className="flex justify-center mb-4">
+              <img src={APP_LOGO} alt="Logo" className="h-12" />
+            </div>
+          )}
+          <CardTitle>Nouveau mot de passe</CardTitle>
+          <CardDescription>
+            Choisissez un nouveau mot de passe pour votre compte
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="newPassword">Nouveau mot de passe</Label>
+              <Input
+                id="newPassword"
+                type="password"
+                placeholder="Minimum 8 caractères"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+                minLength={8}
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="confirmPassword">Confirmer le mot de passe</Label>
+              <Input
+                id="confirmPassword"
+                type="password"
+                placeholder="Saisissez à nouveau le mot de passe"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                required
+                minLength={8}
+              />
+            </div>
+
+            <Button
+              type="submit"
+              className="w-full"
+              disabled={resetPasswordMutation.isPending}
+            >
+              {resetPasswordMutation.isPending && (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              )}
+              Réinitialiser le mot de passe
+            </Button>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package.json

@@ -50,7 +50,6 @@
     "@trpc/client": "^11.6.0",
     "@trpc/react-query": "^11.6.0",
     "@trpc/server": "^11.6.0",
-    "@types/bcrypt": "^6.0.0",
     "@types/multer": "^2.0.0",
     "@types/pdfkit": "^0.17.4",
     "axios": "^1.12.0",
@@ -101,6 +100,7 @@
     "@builder.io/vite-plugin-jsx-loc": "^0.1.1",
     "@tailwindcss/typography": "^0.5.15",
     "@tailwindcss/vite": "^4.1.3",
+    "@types/bcrypt": "^6.0.0",
     "@types/bcryptjs": "^3.0.0",
     "@types/express": "4.17.21",
     "@types/google.maps": "^3.58.1",

pnpm-lock.yaml

@@ -127,9 +127,6 @@ importers:
       '@trpc/server':
         specifier: ^11.6.0
         version: 11.6.0(typescript@5.9.3)
-      '@types/bcrypt':
-        specifier: ^6.0.0
-        version: 6.0.0
       '@types/multer':
         specifier: ^2.0.0
         version: 2.0.0
@@ -275,6 +272,9 @@ importers:
       '@tailwindcss/vite':
         specifier: ^4.1.3
         version: 4.1.14(vite@7.1.9(@types/node@24.7.0)(jiti@2.6.1)(lightningcss@1.30.1)(tsx@4.20.6))
+      '@types/bcrypt':
+        specifier: ^6.0.0
+        version: 6.0.0
       '@types/bcryptjs':
         specifier: ^3.0.0
         version: 3.0.0

todo.md

@@ -822,3 +822,7 @@
 - [x] Améliorer le bouton "Tester le rappel" pour utiliser automatiquement le bon template configuré pour la séquence (au lieu de toujours envoyer rappel J-7)
 - [x] Modifier la procédure testerRappel pour envoyer le rappel à tous les inscrits confirmés (au lieu du premier uniquement)
 - [x] Corriger le problème "undefined" au début du texte dans le template de rappel 3
+- [ ] Ajouter un headerTitle par défaut au template "rappel 3"
+- [x] Créer la page /forgot-password pour demander la réinitialisation de mot de passe
+- [x] Créer la page /reset-password/:token pour définir le nouveau mot de passe
+- [x] Installer le module bcrypt sur le VPS pour activer la réinitialisation de mot de passe (temporairement désactivé en attendant la résolution du problème de store pnpm)