Mot de passe temporaire à la création d'un membre, visible admin, changement forcé

- Nouveau membre créé avec email : un mot de passe temporaire aléatoire
  (~69 bits, sans caractères ambigus) est généré et haché ; il est retourné
  à l'admin et reste lisible en clair (users.temp_password) tant que le
  membre ne l'a pas changé
- Colonnes users.temp_password / must_change_password (migration
  ALTER TABLE IF NOT EXISTS, appliquée au démarrage par le bootstrap)
- POST /api/admin/members/:id/reset-access : régénère l'accès (création
  s'il n'existait pas, ou réinitialisation si le membre a perdu son mot
  de passe) ; login/me exposent mustChangePassword ; change-password
  efface systématiquement le mot de passe temporaire et lève le blocage
- Frontend : colonne « Accès » dans la liste des membres (mot de passe
  visible + copier + réinitialiser, ou « Défini », ou « Créer l'accès »),
  modal de confirmation après création/réinitialisation, écran de
  changement de mot de passe obligatoire avant tout accès au portail ou
  au back-office

Vérifié : cycle complet (création → mot de passe visible côté admin →
connexion → changement forcé → effacement automatique → réinitialisation
admin en cas de perte) via 21 tests e2e dédiés + parcours navigateur ;
34 tests existants toujours au vert.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o

web/src/App.jsx

@@ -14,9 +14,10 @@ export default function App() {
   const { user } = useAuth();
   // The admin backend (shown inside /espace-membre once an admin logs in)
   // uses its own full-height sidebar layout, without the public header/footer.
+  // A forced password change is still shown inside the normal site layout.
   const isAdminBackend =
     location.pathname.startsWith('/admin') ||
-    (location.pathname === '/espace-membre' && user?.role === 'admin');
+    (location.pathname === '/espace-membre' && user?.role === 'admin' && !user?.mustChangePassword);
 
   useEffect(() => {
     window.scrollTo(0, 0);

web/src/components/admin/AdminTabs.jsx

@@ -26,9 +26,13 @@ function MemberFormModal({ member, categories, onClose, onSaved }) {
       site: form.site, presentation: form.presentation,
     };
     try {
-      if (member) await api.put(`/api/admin/members/${member.id}`, body);
-      else await api.post('/api/admin/members', body);
-      onSaved();
+      if (member) {
+        await api.put(`/api/admin/members/${member.id}`, body);
+        onSaved();
+      } else {
+        const result = await api.post('/api/admin/members', body);
+        onSaved({ ...result, email: body.email });
+      }
     } catch (err) {
       setError(err.message);
     }
@@ -84,10 +88,101 @@ function MemberFormModal({ member, categories, onClose, onSaved }) {
   );
 }
 
+// Shows a just-generated temporary password so the admin can relay it to
+// the member (copy button). It also stays readable in the members table
+// below until the member changes it.
+function CredentialsModal({ email, tempPassword, onClose }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(tempPassword);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable (non-HTTPS, older browser) — password stays selectable */
+    }
+  };
+  return (
+    <Modal onClose={onClose} maxWidth={440} header={{ kicker: 'Accès membre', title: 'Mot de passe temporaire généré' }}>
+      <div style={{ padding: '26px 30px' }}>
+        <p style={{ fontSize: 14, color: 'var(--gray)', lineHeight: 1.6, marginBottom: 18 }}>
+          Communiquez ces identifiants à <strong>{email}</strong>. Ce mot de passe devra être
+          changé dès la première connexion.
+        </p>
+        <div style={{ display: 'flex', alignItems: 'center', gap: 10, background: 'var(--admin-bg)', borderRadius: 6, padding: '14px 16px' }}>
+          <code style={{ fontSize: 18, fontWeight: 700, letterSpacing: '.02em', flex: 1, userSelect: 'all' }}>{tempPassword}</code>
+          <button type="button" className="btn btn-outline-soft btn-sm" style={{ fontSize: 13, padding: '8px 14px' }} onClick={copy}>
+            {copied ? '✓ Copié' : 'Copier'}
+          </button>
+        </div>
+        <p style={{ fontSize: 12.5, color: 'var(--gray-light)', lineHeight: 1.55, marginTop: 12 }}>
+          Ce mot de passe reste visible dans la liste des membres tant qu'il n'a pas été changé.
+        </p>
+        <button type="button" className="btn btn-dark btn-sm" style={{ width: '100%', marginTop: 20, fontSize: 14 }} onClick={onClose}>
+          Fermer
+        </button>
+      </div>
+    </Modal>
+  );
+}
+
+function AccessCell({ member, onGenerate }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async (text) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch {
+      /* clipboard unavailable */
+    }
+  };
+
+  if (!member.email) {
+    return (
+      <span style={{ fontSize: 12.5, color: 'var(--gray-light)' }} title="Ajoutez un email pour créer un accès">
+        —
+      </span>
+    );
+  }
+  if (!member.has_login) {
+    return (
+      <button type="button" className="btn-link" style={{ fontSize: 12.5 }} onClick={() => onGenerate(member)}>
+        Créer l'accès
+      </button>
+    );
+  }
+  if (member.must_change_password && member.temp_password) {
+    return (
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
+        <code style={{ fontSize: 12, background: 'var(--admin-bg)', padding: '4px 8px', borderRadius: 3, fontWeight: 600 }}>
+          {member.temp_password}
+        </code>
+        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => copy(member.temp_password)}>
+          {copied ? '✓' : 'copier'}
+        </button>
+        <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => onGenerate(member)}>
+          réinitialiser
+        </button>
+      </div>
+    );
+  }
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
+      <span className="badge badge-green">Défini</span>
+      <button type="button" className="btn-link-gray" style={{ fontSize: 11.5 }} onClick={() => onGenerate(member)}>
+        réinitialiser
+      </button>
+    </div>
+  );
+}
+
 export function MembersTab() {
   const [members, setMembers] = useState([]);
   const [categories, setCategories] = useState([]);
   const [modal, setModal] = useState(null); // null | 'new' | member
+  const [credentials, setCredentials] = useState(null); // { email, tempPassword }
+  const [accessError, setAccessError] = useState('');
   const season = seasonLabel();
 
   const reload = () =>
@@ -107,6 +202,17 @@ export function MembersTab() {
     reload();
   };
 
+  const generateAccess = async (m) => {
+    setAccessError('');
+    try {
+      const d = await api.post(`/api/admin/members/${m.id}/reset-access`);
+      setCredentials({ email: m.email, tempPassword: d.tempPassword });
+      reload();
+    } catch (err) {
+      setAccessError(err.message);
+    }
+  };
+
   const actifs = members.filter((m) => m.valide).length;
 
   return (
@@ -129,11 +235,12 @@ export function MembersTab() {
           être inscrit aux rencontres. La saison court du 1<sup>er</sup> septembre au 31 août.
         </span>
       </div>
+      {accessError && <p className="error-text" style={{ padding: '12px 24px 0' }}>{accessError}</p>}
       <div style={{ overflowX: 'auto' }}>
         <table className="table">
           <thead>
             <tr>
-              <th>Entreprise</th><th>Secteur</th><th>Dirigeant</th><th>Saison</th><th></th>
+              <th>Entreprise</th><th>Secteur</th><th>Dirigeant</th><th>Saison</th><th>Accès</th><th></th>
             </tr>
           </thead>
           <tbody>
@@ -147,6 +254,9 @@ export function MembersTab() {
                     {m.valide ? `Validé ${season}` : 'Non validé'}
                   </span>
                 </td>
+                <td>
+                  <AccessCell member={m} onGenerate={generateAccess} />
+                </td>
                 <td style={{ textAlign: 'right', whiteSpace: 'nowrap' }}>
                   <button className="btn-link-gray" style={{ color: 'var(--gray)', marginRight: 14 }} onClick={() => toggle(m)}>
                     {m.valide ? 'Suspendre' : 'Valider'}
@@ -163,7 +273,22 @@ export function MembersTab() {
           member={modal === 'new' ? null : modal}
           categories={categories}
           onClose={() => setModal(null)}
-          onSaved={() => { setModal(null); reload(); }}
+          onSaved={(result) => {
+            setModal(null);
+            reload();
+            if (result?.tempPassword) {
+              setCredentials({ email: result.email, tempPassword: result.tempPassword });
+            } else if (result?.accessError) {
+              setAccessError(`Membre créé, mais accès non créé : ${result.accessError}`);
+            }
+          }}
+        />
+      )}
+      {credentials && (
+        <CredentialsModal
+          email={credentials.email}
+          tempPassword={credentials.tempPassword}
+          onClose={() => setCredentials(null)}
         />
       )}
     </div>

web/src/lib/AuthContext.jsx

@@ -29,8 +29,16 @@ export function AuthProvider({ children }) {
     }
   };
 
+  // Re-fetches the current user — used after a forced password change so
+  // mustChangePassword flips to false without a full re-login.
+  const refreshUser = async () => {
+    const d = await api.get('/api/auth/me');
+    setUser(d.user);
+    return d.user;
+  };
+
   return (
-    <AuthContext.Provider value={{ user, loading, login, logout }}>
+    <AuthContext.Provider value={{ user, loading, login, logout, refreshUser }}>
       {children}
     </AuthContext.Provider>
   );

web/src/pages/Espace.jsx

@@ -88,6 +88,71 @@ function PasswordCard() {
   );
 }
 
+// Blocking gate shown right after login when the account still carries a
+// temporary password (new member, or an admin reset). The temporary
+// password itself doubles as "mot de passe actuel" here.
+function ForcedPasswordChange() {
+  const { logout, refreshUser } = useAuth();
+  const [form, setForm] = useState({ currentPassword: '', newPassword: '' });
+  const [confirm, setConfirm] = useState('');
+  const [error, setError] = useState('');
+  const [busy, setBusy] = useState(false);
+
+  const submit = async (e) => {
+    e.preventDefault();
+    setError('');
+    if (form.newPassword !== confirm) {
+      setError('Les deux mots de passe ne correspondent pas.');
+      return;
+    }
+    setBusy(true);
+    try {
+      await api.post('/api/auth/change-password', form);
+      await refreshUser();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <section style={{ minHeight: 'calc(100vh - 76px)', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '60px 24px', background: 'var(--dark)' }}>
+      <div style={{ width: '100%', maxWidth: 440 }}>
+        <div style={{ textAlign: 'center', marginBottom: 28 }}>
+          <div className="kicker on-dark" style={{ marginBottom: 14 }}>Première connexion</div>
+          <h1 className="serif" style={{ fontWeight: 500, fontSize: 30, color: '#fff', lineHeight: 1.25 }}>
+            Choisissez votre mot de passe
+          </h1>
+          <p style={{ fontSize: 14, color: '#B7AFA6', marginTop: 12, lineHeight: 1.6 }}>
+            Votre mot de passe temporaire doit être remplacé avant de continuer.
+          </p>
+        </div>
+        <form onSubmit={submit} style={{ background: '#fff', borderRadius: 8, padding: '32px 30px' }}>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+            <label className="field">Mot de passe temporaire
+              <input type="password" value={form.currentPassword} onChange={(e) => setForm({ ...form, currentPassword: e.target.value })} required autoComplete="current-password" />
+            </label>
+            <label className="field">Nouveau mot de passe
+              <input type="password" value={form.newPassword} onChange={(e) => setForm({ ...form, newPassword: e.target.value })} required minLength={10} autoComplete="new-password" />
+            </label>
+            <label className="field">Confirmer le nouveau mot de passe
+              <input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} required minLength={10} autoComplete="new-password" />
+            </label>
+          </div>
+          {error && <p className="error-text" style={{ marginTop: 14 }}>{error}</p>}
+          <button type="submit" className="btn btn-red" style={{ width: '100%', marginTop: 22, padding: 14, borderRadius: 3 }} disabled={busy}>
+            {busy ? 'Enregistrement…' : 'Valider mon mot de passe'}
+          </button>
+          <button type="button" onClick={logout} className="btn-link-gray" style={{ width: '100%', textAlign: 'center', marginTop: 14 }}>
+            Se déconnecter
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+}
+
 function Portal() {
   const { logout } = useAuth();
   const [member, setMember] = useState(null);
@@ -275,6 +340,7 @@ export default function Espace() {
 
   if (loading) return <main style={{ minHeight: '60vh' }} />;
   if (!user) return <main><LoginSection /></main>;
+  if (user.mustChangePassword) return <main><ForcedPasswordChange /></main>;
   if (user.role === 'admin') return <AdminShell />;
   return <main><Portal /></main>;
 }