|
<!doctype html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>#1144 — PasswordChangeForm (états) — after</title>
|
|
<style>
|
|
:root{
|
|
--color-brand-50:#ecfdf5; --color-brand-600:#059669; --color-brand-700:#047857;
|
|
--color-surface:#ffffff; --color-surface-muted:#f1f5f9;
|
|
--color-border:#e2e8f0; --color-border-strong:#cbd5e1;
|
|
--color-text-primary:#0f172a; --color-text-secondary:#334155; --color-text-muted:#475569;
|
|
--color-success-fg:#15803d; --color-success-bg:#e7f6ec;
|
|
--color-danger-fg:#b91c1c; --color-danger-bg:#fcebeb;
|
|
--font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
|
|
}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
body{background:var(--color-surface-muted);font-family:var(--font-sans);color:var(--color-text-primary);
|
|
-webkit-font-smoothing:antialiased;padding:28px 24px;line-height:1.5}
|
|
.page-title{font-size:13px;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
|
|
.page-sub{font-size:13px;color:var(--color-text-muted);margin-bottom:22px}
|
|
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
|
|
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:24px}
|
|
.state-tag{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
|
|
color:var(--color-text-muted);background:var(--color-surface-muted);border:1px solid var(--color-border);
|
|
border-radius:9999px;padding:2px 10px;margin-bottom:14px}
|
|
h2{font-size:17px;font-weight:600;color:var(--color-text-primary)}
|
|
.desc{font-size:13px;color:var(--color-text-muted);margin:4px 0 16px}
|
|
.field{margin-bottom:14px}
|
|
label{display:block;font-size:12px;font-weight:500;color:var(--color-text-secondary);margin-bottom:5px}
|
|
.input{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:6px;
|
|
padding:9px 12px;font-size:14px;color:var(--color-text-primary)}
|
|
.input.placeholder{color:var(--color-text-muted)}
|
|
.input.error{border-color:var(--color-danger-fg)}
|
|
.input.focus{outline:2px solid var(--color-brand-600);outline-offset:1px;border-color:var(--color-brand-600)}
|
|
.helper{font-size:11.5px;margin-top:5px;color:var(--color-text-muted)}
|
|
.helper.ok{color:var(--color-success-fg)}
|
|
.helper.err{color:var(--color-danger-fg)}
|
|
.banner{border-radius:6px;padding:10px 12px;font-size:13px;font-weight:500;margin-bottom:16px;display:flex;gap:8px;align-items:center}
|
|
.banner.success{background:var(--color-success-bg);color:var(--color-success-fg)}
|
|
.banner.danger{background:var(--color-danger-bg);color:var(--color-danger-fg);border:1px solid rgba(185,28,28,.3)}
|
|
.btn{width:100%;background:var(--color-brand-600);color:#fff;border:none;border-radius:6px;padding:10px;
|
|
font-size:14px;font-weight:600;cursor:pointer}
|
|
.btn.loading{background:var(--color-brand-700);opacity:.85}
|
|
.spinner{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.45);
|
|
border-top-color:#fff;border-radius:50%;margin-right:7px;vertical-align:-2px}
|
|
.legend{font-size:12px;color:var(--color-text-muted);margin-top:18px}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-title">#1144 · PasswordChangeForm · §MC.4 — maquette des états</div>
|
|
<div class="page-sub">Molecule dans la page « Mon compte » · tokens §2 réutilisés · aucune nouvelle teinte</div>
|
|
|
|
<div class="grid">
|
|
|
|
<!-- 1. REPOS -->
|
|
<div class="card">
|
|
<span class="state-tag">1 · Repos</span>
|
|
<h2>Mot de passe</h2>
|
|
<p class="desc">Choisissez un mot de passe fort. Reconnexion requise après modification.</p>
|
|
<div class="field"><label>Mot de passe actuel</label><input class="input placeholder" value="••••••••••" disabled></div>
|
|
<div class="field"><label>Nouveau mot de passe</label><input class="input placeholder" value="" placeholder=""></div>
|
|
<div class="field"><label>Confirmer le nouveau mot de passe</label><input class="input placeholder" value=""></div>
|
|
<button class="btn">Modifier le mot de passe</button>
|
|
</div>
|
|
|
|
<!-- 2. SAISIE + VALIDATION -->
|
|
<div class="card">
|
|
<span class="state-tag">2 · Saisie + validation</span>
|
|
<h2>Mot de passe</h2>
|
|
<p class="desc">Choisissez un mot de passe fort. Reconnexion requise après modification.</p>
|
|
<div class="field"><label>Mot de passe actuel</label><input class="input" value="••••••••••" disabled></div>
|
|
<div class="field"><label>Nouveau mot de passe</label>
|
|
<input class="input focus" value="••••••••••••••">
|
|
<div class="helper ok">✓ 12 caractères, majuscule, chiffre et symbole</div>
|
|
</div>
|
|
<div class="field"><label>Confirmer le nouveau mot de passe</label>
|
|
<input class="input error" value="••••••••••" aria-invalid="true">
|
|
<div class="helper err">Les deux mots de passe ne correspondent pas.</div>
|
|
</div>
|
|
<button class="btn">Modifier le mot de passe</button>
|
|
</div>
|
|
|
|
<!-- 3. ERREUR SERVEUR -->
|
|
<div class="card">
|
|
<span class="state-tag">3 · Erreur serveur</span>
|
|
<h2>Mot de passe</h2>
|
|
<p class="desc">Choisissez un mot de passe fort. Reconnexion requise après modification.</p>
|
|
<div class="banner danger" role="alert">⚠ Le mot de passe actuel est incorrect.</div>
|
|
<div class="field"><label>Mot de passe actuel</label><input class="input error" value="••••••" aria-invalid="true"></div>
|
|
<div class="field"><label>Nouveau mot de passe</label>
|
|
<input class="input" value="••••••••••••••">
|
|
<div class="helper ok">✓ 12 caractères, majuscule, chiffre et symbole</div>
|
|
</div>
|
|
<div class="field"><label>Confirmer le nouveau mot de passe</label><input class="input" value="••••••••••••••"></div>
|
|
<button class="btn">Modifier le mot de passe</button>
|
|
</div>
|
|
|
|
<!-- 4. SUCCES + EMAIL -->
|
|
<div class="card">
|
|
<span class="state-tag">4 · Succès (email de confirmation)</span>
|
|
<h2>Mot de passe</h2>
|
|
<p class="desc">Choisissez un mot de passe fort. Reconnexion requise après modification.</p>
|
|
<div class="banner success" role="status">✓ Mot de passe modifié — un email de confirmation vous a été envoyé.</div>
|
|
<div class="field"><label>Mot de passe actuel</label><input class="input placeholder" value="" placeholder=""></div>
|
|
<div class="field"><label>Nouveau mot de passe</label><input class="input placeholder" value=""></div>
|
|
<div class="field"><label>Confirmer le nouveau mot de passe</label><input class="input placeholder" value=""></div>
|
|
<button class="btn loading"><span class="spinner"></span>Modification…</button>
|
|
<div class="legend">Bouton en état <strong>loading</strong> pendant la mutation ; champs réinitialisés après succès.</div>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
