Règle de gestion des mots de passe

frontend/src/pages/InvitationRegister.jsx

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import PasswordStrength from '../components/PasswordStrength.jsx';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 
 // Wrap défini en dehors du composant pour éviter le remontage à chaque frappe
@@ -173,6 +174,7 @@ export default function InvitationRegister() {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>Mot de passe <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>(8 car. min.)</span></label>
           <input className="form-input" type="password" required minLength={8} autoComplete="new-password" placeholder="••••••••" value={form.password} onChange={e => set('password', e.target.value)} style={{ width: '100%' }} />
+          <PasswordStrength password={form.password} />
         </div>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>

frontend/src/pages/MonCompte.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
+import PasswordStrength from '../components/PasswordStrength.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import { useUi }  from '../context/UiContext.jsx';
@@ -470,6 +471,7 @@ function SecurityForm() {
             <input type="password" required autoComplete="new-password"
               value={pwdForm.newPassword}
               onChange={e => setPwdForm({ ...pwdForm, newPassword: e.target.value })} />
+            <PasswordStrength password={pwdForm.newPassword} />
           </div>
           <div>
             <label>Confirmer le nouveau mot de passe</label>

frontend/src/pages/Register.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
+import PasswordStrength from '../components/PasswordStrength.jsx';
 
 export default function Register() {
   const { register } = useAuth();
@@ -205,7 +206,7 @@ export default function Register() {
 
             <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
               <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
-                Mot de passe <span style={{ color: 'var(--text-muted)', fontWeight: 400 }}>(8 car. min.)</span>
+                Mot de passe
               </label>
               <input
                 className="form-input"
@@ -217,6 +218,7 @@ export default function Register() {
                 onChange={set('password')}
                 style={{ width: '100%' }}
               />
+              <PasswordStrength password={form.password} />
             </div>
 
             <button

frontend/src/pages/ResetPassword.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import PasswordStrength from '../components/PasswordStrength.jsx';
 
 export default function ResetPassword() {
   const [params]    = useSearchParams();
@@ -192,6 +193,7 @@ export default function ResetPassword() {
                     onChange={e => { setPassword(e.target.value); setStatus(null); }}
                     style={{ width: '100%' }}
                   />
+                  <PasswordStrength password={password} />
                 </div>
 
                 <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>

frontend/src/pages/admin/UsersSection.jsx

@@ -4,6 +4,7 @@ import { api } from '../../api.js';
 import ConfirmModal from '../../components/ConfirmModal.jsx';
 import Modal from '../../components/Modal.jsx';
 import ResultBanner from '../../components/ResultBanner.jsx';
+import PasswordStrength from '../../components/PasswordStrength.jsx';
 import { fmt, Badge, UserStatusBadge } from './adminHelpers.jsx';
 
 // ── Helpers ────────────────────────────────────────────────────────────────
@@ -356,6 +357,7 @@ function CreateUserModal({ open, onClose, onCreated }) {
         <div>
           <label>Mot de passe *</label>
           <input type="password" required minLength={8} autoComplete="new-password" value={form.password} onChange={e => set('password', e.target.value)} placeholder="8 caractères minimum" />
+          <PasswordStrength password={form.password} />
         </div>
         <div>
           <label>Rôle</label>