[TECH] Ajouter un composant local de gestion des règles de mot de passe (PIX-14149)

[er-lim]

🦄 Problème

Le component input avec mot de passe, utilisé sur les pages d'inscription, n'est pas complètement accessible. On s'est aperçu que:

• la progression n'est pas clairement énoncée lorsque l'utilisateur saisit un mot de passe
• les règles ne sont présentes uniquement dans le label.

🤖 Proposition

• Ajouter un component PasswordCheckListInput permettant de gérer ces cas en s'inspirant de ce qui a été fait sur le codepen fourni par Tanaguru.

🌈 Remarques

• Le message d'erreur, lors de la sortie d'input, n'est pas vocalisé par le lecteur d'écran. Il manque sans doute un aria-live=polite sur le message d'erreur sur le composant pix-ui PixInputPassword (A faire dans un autre ticket).
• Le dernier commit est à retirer lors du merge de la PR !

💯 Pour tester

Cas nominal

• Aller sur la page /connexion
• Tester chaque règle du composant (saisir un chiffre, une minuscule, une majuscule, 8 caractères)
• Vérifier que le picto correspondant à la règle en question se met bien à jour lors de la saisie dans le champ

Cas d'erreur

• Enlever des caractères dans votre saisie
• Vérifier que le picto correspondant à la règle en question se met bien à jour
• Sortir du focus du champ en cliquant par exemple à côté.
• Vérifier que le message d'erreur Le mot de passe saisi est erroné. Votre mot de passe doit être supérieur à 8 caractères et contenir au minimum un chiffre, une minuscule et une majuscule. s'affiche bien.

Accessibilité

• Ouvrir un logiciel de lecteur d'écran
• Aller sur le nouveau composant Input (par clic ou tabulation)
• Vérifier que les règles sont bien énoncées par le lecteur d'écran
• Saisir un mot de passe correspondant aux règles mentionées
• Vérifier que la progression est vocalisée (X sur Y règles complétées)

[pix-bot-github]

Une fois les applications déployées, elles seront accessibles via les liens suivants :

• App (.fr)
• App (.org)
• Orga (.fr)
• Orga (.org)
• Certif (.fr)
• Certif (.org)
• Junior
• Admin
• API
• Audit Logger

Les variables d'environnement seront accessibles via les liens suivants :

• scalingo front
• scalingo api
• scalingo audit-logger

[gitguardian]

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
Once a secret has been leaked into a git repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

---

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}}

[bpetetot]

✅ Testé et validé. A11y testé avec Voice over.

[lego-technix]

✅ Lu et testé fonctionnellement avec succès avec Firefox