1. Objectif de la page

Cette page permet à l’utilisateur de créer un nouveau mot de passe lors d’une procédure de réinitialisation.

Elle répond aux besoins suivants :

• Saisir un nouveau mot de passe conforme aux règles de sécurité
• Confirmer le nouveau mot de passe
• Valider la réinitialisation du mot de passe
• Empêcher la réutilisation d’anciens mots de passe

2. Contexte d’accès

L’utilisateur arrive sur cette page après :

• Avoir demandé une réinitialisation de mot de passe
• Avoir validé un OTP ou un lien de réinitialisation
• Avoir été redirigé automatiquement vers la page Nouveau mot de passe

3. Structure de la page

3.1. En‑tête

• Icône retour ←
• Titre : Nouveau mot de passe

3.2. Section principale : Créer un nouveau mot de passe

a) Icône

• Icône illustrant la sécurité ou un cadenas rotatif

b) Titre

• Créer un nouveau mot de passe

c) Sous‑titre

• Votre nouveau mot de passe doit être différent des précédents mots de passe utilisés.

3.3. Champs de saisie

a) Champ 1 : Nouveau mot de passe

• Label : Nouveau mot de passe
• Placeholder : Entrez votre nouveau mot de passe
• Icône de visibilité (œil)

Règles :

• Saisie masquée par défaut
• Possibilité d’afficher le mot de passe
• Validation dynamique possible

b) Champ 2 : Confirmer le mot de passe

• Label : Confirmer le mot de passe
• Placeholder : Confirmez votre nouveau mot de passe
• Icône de visibilité (œil)

Règles :

• Doit être identique au champ « Nouveau mot de passe »
• Vérification instantanée possible

3.4. Bouton d’action

• Bouton : Réinitialiser le mot de passe
• Largeur totale
• Couleur : dégradé bleu
• État activé seulement lorsque :
  • Les deux mots de passe sont valides
  • Les deux mots de passe sont identiques
  • Les règles de sécurité sont respectées

3.5. Section : Exigences du mot de passe

Bloc de règles affichées sous les champs :

• Au moins 8 caractères
• Au moins une lettre majuscule
• Au moins une lettre minuscule
• Idéalement un caractère spécial (si applicable dans l’app)

4. Comportements fonctionnels

✔ Créer un nouveau mot de passe

1. L’utilisateur saisit un nouveau mot de passe
2. L’utilisateur saisit la confirmation
3. Le système vérifie :
   • La conformité aux règles
   • L’égalité des deux champs
   • L’unicité (ne pas réutiliser l’ancien mot de passe)
4. Si tout est correct, l’utilisateur clique sur Réinitialiser le mot de passe
5. Le système :
   • Met à jour le mot de passe dans la base
   • Termine la procédure de réinitialisation
   • Redirige l’utilisateur (souvent vers la page de connexion)

✔ Affichage / Masquage du mot de passe

• L’icône (œil) permet de basculer entre affiché et masqué
• Le comportement s’applique à chaque champ indépendamment

5. Règles métier

→ RB01 – Respect des exigences

Le mot de passe doit respecter toutes les règles listées.

→ RB02 – Correspondance obligatoire

Le champ « confirmer le mot de passe » doit être identique au champ « nouveau mot de passe ».

→ RB03 – Unicité / Sécurité

Le nouveau mot de passe doit être différent des précédents mots de passe utilisés.

→ RB04 – Activation du bouton

Le bouton Réinitialiser le mot de passe n’est actif que lorsque :

• Le mot de passe est valide
• Les deux champs correspondent

→ RB05 – Sécurité

Le mot de passe ne doit pas être affiché par défaut (champ masqué).

6. Résultat attendu

• Permettre une réinitialisation simple, claire et sécurisée
• Donner des indications immédiates sur la conformité du mot de passe
• Rediriger l’utilisateur après succès
• Empêcher les erreurs courantes (mots de passe faibles, incohérents, anciens mots de passe)