Ajout de la possibilité de voir le mot de passe

frontend/src/pages/InvitationRegister.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react';
 import PasswordStrength from '../components/PasswordStrength.jsx';
+import PasswordInput from '../components/PasswordInput.jsx';
 import { useParams, useNavigate, Link } from 'react-router-dom';
 
 // Wrap défini en dehors du composant pour éviter le remontage à chaque frappe
@@ -173,13 +174,13 @@ 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={appInfo.minPasswordLength || 8} autoComplete="new-password" placeholder="••••••••" value={form.password} onChange={e => set('password', e.target.value)} style={{ width: '100%' }} />
+          <PasswordInput className="form-input" required minLength={appInfo.minPasswordLength || 8} autoComplete="new-password" placeholder="••••••••" value={form.password} onChange={e => set('password', e.target.value)} style={{ width: '100%' }} />
           <PasswordStrength password={form.password} minLength={appInfo.minPasswordLength || 8} />
         </div>
 
         <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
           <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>Confirmer le mot de passe</label>
-          <input className="form-input" type="password" required minLength={appInfo.minPasswordLength || 8} autoComplete="new-password" placeholder="••••••••" value={form.confirm} onChange={e => set('confirm', e.target.value)} style={{ width: '100%' }} />
+          <PasswordInput className="form-input" required minLength={appInfo.minPasswordLength || 8} autoComplete="new-password" placeholder="••••••••" value={form.confirm} onChange={e => set('confirm', e.target.value)} style={{ width: '100%' }} />
         </div>
 
         <button type="submit" disabled={busy} style={{ marginTop: 4, width: '100%', padding: '11px 0', background: busy ? 'var(--text-muted)' : 'var(--primary, #1e40af)', color: '#fff', border: 'none', borderRadius: 8, fontSize: 15, fontWeight: 600, cursor: busy ? 'not-allowed' : 'pointer', transition: 'background 0.15s' }}>

frontend/src/pages/Login.jsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import { api } from '../api.js';
 import AuthBgCol from '../components/AuthBgCol.jsx';
+import PasswordInput from '../components/PasswordInput.jsx';
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 const DEVICE_KEY = 'cl_device_token';
@@ -217,7 +218,7 @@ export default function Login() {
                     <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>Mot de passe</label>
                     <Link to="/forgot-password" style={{ fontSize: 13, color: 'var(--text-muted)', textDecoration: 'underline' }}>Mot de passe oublié ?</Link>
                   </div>
-                  <input className="form-input" type="password" required autoComplete="current-password" placeholder="••••••••"
+                  <PasswordInput className="form-input" required autoComplete="current-password" placeholder="••••••••"
                     value={password} onChange={e => setPassword(e.target.value)} style={{ width: '100%' }} />
                 </div>
 

frontend/src/pages/MonCompte.jsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import PasswordStrength from '../components/PasswordStrength.jsx';
+import PasswordInput from '../components/PasswordInput.jsx';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import { useUi }  from '../context/UiContext.jsx';
@@ -143,7 +144,7 @@ function EmailChangeForm({ onDone }) {
       </div>
       <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
         <label className="profile-label">Mot de passe actuel (confirmation)</label>
-        <input className="profile-input" type="password" required value={pwd} onChange={e => setPwd(e.target.value)} placeholder="••••••••" />
+        <PasswordInput className="profile-input" required value={pwd} onChange={e => setPwd(e.target.value)} placeholder="••••••••" />
       </div>
       <div style={{ display: 'flex', gap: 8 }}>
         <button type="submit" className="btn btn-primary" disabled={busy} style={{ fontSize: 13 }}>
@@ -389,7 +390,7 @@ function TwoFASection({ user }) {
           <div style={{ display: 'flex', gap: 10, alignItems: 'flex-end' }}>
             <div style={{ flex: 1 }}>
               <label style={{ display: 'block', marginBottom: 4, fontSize: 13, fontWeight: 500 }}>Mot de passe actuel</label>
-              <input type="password" required value={disablePwd}
+              <PasswordInput required value={disablePwd}
                 onChange={e => setDisablePwd(e.target.value)}
                 autoComplete="current-password" placeholder="••••••••" />
             </div>
@@ -469,20 +470,20 @@ function SecurityForm() {
         <div style={{ display: 'flex', flexDirection: 'column', gap: 12, maxWidth: 400 }}>
           <div>
             <label>Mot de passe actuel</label>
-            <input type="password" required autoComplete="current-password"
+            <PasswordInput required autoComplete="current-password"
               value={pwdForm.currentPassword}
               onChange={e => setPwdForm({ ...pwdForm, currentPassword: e.target.value })} />
           </div>
           <div>
             <label>Nouveau mot de passe</label>
-            <input type="password" required autoComplete="new-password"
+            <PasswordInput required autoComplete="new-password"
               value={pwdForm.newPassword}
               onChange={e => setPwdForm({ ...pwdForm, newPassword: e.target.value })} />
             <PasswordStrength password={pwdForm.newPassword} minLength={minPasswordLength} />
           </div>
           <div>
             <label>Confirmer le nouveau mot de passe</label>
-            <input type="password" required autoComplete="new-password"
+            <PasswordInput required autoComplete="new-password"
               value={pwdForm.confirm}
               onChange={e => setPwdForm({ ...pwdForm, confirm: e.target.value })} />
           </div>

frontend/src/pages/Register.jsx

@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '../context/AuthContext.jsx';
 import PasswordStrength from '../components/PasswordStrength.jsx';
 import AuthBgCol from '../components/AuthBgCol.jsx';
+import PasswordInput from '../components/PasswordInput.jsx';
 
 export default function Register() {
   const { register } = useAuth();
@@ -178,9 +179,9 @@ export default function Register() {
               <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
                 Mot de passe
               </label>
-              <input
+              <PasswordInput
                 className="form-input"
-                type="password" required
+                required
                 minLength={appInfo.minPasswordLength || 8}
                 autoComplete="new-password"
                 placeholder="••••••••"

frontend/src/pages/ResetPassword.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import PasswordStrength from '../components/PasswordStrength.jsx';
 import AuthBgCol from '../components/AuthBgCol.jsx';
+import PasswordInput from '../components/PasswordInput.jsx';
 
 export default function ResetPassword() {
   const [params]    = useSearchParams();
@@ -154,9 +155,9 @@ export default function ResetPassword() {
                   <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
                     Nouveau mot de passe
                   </label>
-                  <input
+                  <PasswordInput
                     className="form-input"
-                    type="password" required minLength={appInfo.minPasswordLength || 8}
+                    required minLength={appInfo.minPasswordLength || 8}
                     autoComplete="new-password"
                     placeholder="••••••••"
                     value={password}
@@ -170,9 +171,9 @@ export default function ResetPassword() {
                   <label style={{ fontSize: 14, fontWeight: 500, color: 'var(--text)' }}>
                     Confirmer le mot de passe
                   </label>
-                  <input
+                  <PasswordInput
                     className="form-input"
-                    type="password" required minLength={appInfo.minPasswordLength || 8}
+                    required minLength={appInfo.minPasswordLength || 8}
                     autoComplete="new-password"
                     placeholder="••••••••"
                     value={password2}

frontend/src/pages/admin/UsersSection.jsx

@@ -5,6 +5,7 @@ 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 PasswordInput from '../../components/PasswordInput.jsx';
 import { fmt, Badge, UserStatusBadge } from './adminHelpers.jsx';
 
 // ── Helpers ────────────────────────────────────────────────────────────────
@@ -363,7 +364,7 @@ function CreateUserModal({ open, onClose, onCreated }) {
         </div>
         <div>
           <label>Mot de passe *</label>
-          <input type="password" required minLength={minPasswordLength} autoComplete="new-password" value={form.password} onChange={e => set('password', e.target.value)} placeholder={`${minPasswordLength} caractères minimum`} />
+          <PasswordInput required minLength={minPasswordLength} autoComplete="new-password" value={form.password} onChange={e => set('password', e.target.value)} placeholder={`${minPasswordLength} caractères minimum`} />
           <PasswordStrength password={form.password} minLength={minPasswordLength} />
         </div>
         <div>