Règle de gestion des mots de passe

2026-06-15 22:44:17 +02:00
parent ceda5bcf1b
commit 01526a5551
6 changed files with 105 additions and 1 deletions
@@ -0,0 +1,94 @@
+/**
+ * PasswordStrength — indicateur de complexité de mot de passe.
+ *
+ * Props :
+ *   password : string  — valeur en cours de saisie
+ *
+ * Affiche uniquement quand password est non vide.
+ */
+
+const RULES = [
+  { id: 'len',     label: '8 caractères minimum',          test: p => p.length >= 8 },
+  { id: 'upper',   label: 'Une lettre majuscule (A–Z)',     test: p => /[A-Z]/.test(p) },
+  { id: 'lower',   label: 'Une lettre minuscule (a–z)',     test: p => /[a-z]/.test(p) },
+  { id: 'digit',   label: 'Un chiffre (0–9)',               test: p => /[0-9]/.test(p) },
+  { id: 'special', label: 'Un caractère spécial (!@#…)',    test: p => /[^A-Za-z0-9]/.test(p) },
+];
+
+const LEVELS = [
+  { min: 0, label: 'Très faible', color: '#ef4444' },
+  { min: 1, label: 'Faible',      color: '#f97316' },
+  { min: 2, label: 'Moyen',       color: '#eab308' },
+  { min: 3, label: 'Bon',         color: '#84cc16' },
+  { min: 4, label: 'Fort',        color: '#22c55e' },
+  { min: 5, label: 'Très fort',   color: '#10b981' },
+];
+
+function getLevel(score) {
+  // score = nombre de règles respectées (0..5)
+  for (let i = LEVELS.length - 1; i >= 0; i--) {
+    if (score >= LEVELS[i].min) return LEVELS[i];
+  }
+  return LEVELS[0];
+}
+
+export default function PasswordStrength({ password }) {
+  if (!password) return null;
+
+  const results = RULES.map(r => ({ ...r, ok: r.test(password) }));
+  const score   = results.filter(r => r.ok).length;
+  const level   = getLevel(score);
+  const pct     = Math.round((score / RULES.length) * 100);
+
+  return (
+    <div style={{ marginTop: 8 }}>
+      {/* Barre de progression */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
+        <div style={{
+          flex: 1, height: 5, borderRadius: 3,
+          background: 'var(--border, #e5e7eb)',
+          overflow: 'hidden',
+        }}>
+          <div style={{
+            height: '100%',
+            width: `${pct}%`,
+            background: level.color,
+            borderRadius: 3,
+            transition: 'width .25s ease, background .25s ease',
+          }} />
+        </div>
+        <span style={{
+          fontSize: 12, fontWeight: 600, whiteSpace: 'nowrap',
+          color: level.color,
+          minWidth: 64, textAlign: 'right',
+          transition: 'color .25s ease',
+        }}>
+          {level.label}
+        </span>
+      </div>
+
+      {/* Liste des règles */}
+      <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 4 }}>
+        {results.map(r => (
+          <li key={r.id} style={{
+            display: 'flex', alignItems: 'center', gap: 7,
+            fontSize: 12,
+            color: r.ok ? '#16a34a' : 'var(--text-muted)',
+            transition: 'color .2s ease',
+          }}>
+            {r.ok ? (
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#16a34a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="20 6 9 17 4 12"/>
+              </svg>
+            ) : (
+              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <circle cx="12" cy="12" r="10"/>
+              </svg>
+            )}
+            {r.label}
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}