changement

frontend/src/pages/DefinirMotDePasse.jsx

@@ -1,6 +1,8 @@
 import { useState } from 'react'
 import { Link, useNavigate, useParams } from 'react-router-dom'
 import { resetPasswordApi } from '../services/auth'
+import PasswordRules from '../components/PasswordRules'
+import { isPasswordValid, PASSWORD_RULES_ERROR } from '../utils/passwordRules'
 
 // Sert les deux parcours qui passent par un jeton envoyé par email :
 // la définition initiale du mot de passe après une inscription Google,
@@ -21,8 +23,8 @@ export default function DefinirMotDePasse() {
     e.preventDefault()
     setError('')
 
-    if (form.password.length < 8) {
-      setError('Le mot de passe doit contenir au moins 8 caractères.')
+    if (!isPasswordValid(form.password)) {
+      setError(PASSWORD_RULES_ERROR)
       return
     }
     if (form.password !== form.confirmPassword) {
@@ -58,15 +60,22 @@ export default function DefinirMotDePasse() {
   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</h1>
+        <h1 className="text-4xl font-bold italic font-serif text-[#006B6B]">Nouveau mot de passe</h1>
+        {/* Texte neutre : la page sert au mot de passe oublié comme au
+            premier mot de passe d'un compte Google. */}
         <p className="text-gray-500 mt-1 text-sm">
-          Choisissez un mot de passe pour accéder à votre compte sans passer par Google.
+          Choisissez le mot de passe que vous utiliserez pour vous connecter avec votre adresse email.
         </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">
+        <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}
+          {/invalide ou expiré/i.test(error) && (
+            <Link to="/mot-de-passe-oublie" className="block mt-2 font-medium text-[#006B6B] hover:underline">
+              Demander un nouveau lien
+            </Link>
+          )}
         </div>
       )}
 
@@ -82,10 +91,12 @@ export default function DefinirMotDePasse() {
             value={form.password}
             onChange={handleChange}
             required
-            minLength={8}
-            placeholder="8 caractères minimum"
+            autoComplete="new-password"
+            aria-describedby="password-rules"
+            placeholder="Votre nouveau mot de passe"
             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]"
           />
+          <PasswordRules id="password-rules" password={form.password} />
         </div>
 
         <div>