Exercice 18 - Formulaire de réinitialisation de mot de passe

Dans cet exercice, on va créer un formulaire de réinitialisation de mot de passe. L'usager va être invité à choisir un nouveau mot de passe qui correspond à un format qu'on va lui indiquer. Ensuite, il devra le saisir à nouveau pour le confirmer et finalement cliquer sur un bouton réinitialisation. Je vais vous fournir un template de base via un lien Github Classroom dans un devoir Teams.

Version finale de l'interface au chargement

Version avec les validations

L'interface

Essayez de reproduire de votre mieux l'interface que je vous présente.

• Pour les deux inputs, ajoutez une icône qui va afficher le mot de passe quand on clique dessus. Vous pouvez vous aider de cette page Créer un bouton qui affiche le mot de passe
• Sous le input du nouveau mot de passe, il y a une barre de couleur qui affiche la force du mot de passe. (Voir plus bas pour plus de détail)
• Dans la section où il y a trois phrases qui renseignent sur le format demandé, c'est une icône de Font Awesome qui est placé au-devant de la phrase. Aucune icône lors du chargement de la page, fas fa-check quand c'est valide et fas fa-ban quand ça ne l'est pas.
• Toute cette section est dans un formulaire, mais on ne traitera pas l'envoi. Utilisez l'attribut action="#" et la méthode que vous voulez.

La validation

Le nouveau mot de passe

La validation se fera dès qu'un changement est fait dans la zone de saisie du nouveau mot de passe, utilisez l'événement input. Pour les validations à faire lors de la saisie :

• Le texte doit contenir au minimum 8 caractères.
• Le mot de passe doit contenir au moins une majuscule et une minuscule.
• Le mot de passe doit contenir un caractère spécial. Pour cette validation vous pouvez utiliser l'expression régulière suivante :

const caractereSpecial_regex = /[!@#$%^&*(),.?":{}|<>]/;

Astuce

Vous pouvez facilement tester si un texte correspond aux exigences d'une expression régulière avec la fonction test(). La fonction prend le texte en paramètre et retourne True ou False selon le résultat. Pour plus de détail : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test

Pour les trois validations, affichez l'icône correspondant et la bonne couleur si c'est vrai ou faux.

Vous devez aussi afficher une barre de couleur selon la force du mot de passe. Pour connaître sa force, je vous ai fourni dans le template de base une librairie appelée zxcvbn. Vous pouvez l'utiliser comme ceci dans votre script JS :

const resultatForce = zxcvbn("mon_mot_de_passe");
// resultatForce.score va retourner une valeur de 0 (faible) à 4 (fort)
console.log(resultatForce.score); 

La barre va être divisée en 5 sections. Le nombre de sections colorées correspond au score +1 (1 section colorée pour un score de 0 et toutes les sections pour un score de 4). La couleur des sections va aussi changer selon le score :

< 2 : rouge

== 2 : jaune

\> 2 : vert

Pour la barre à vous de voir comment la faire. J'ai utilisé 5 div côte à côte disposées en Flex avec une hauteur et une largeur fixe. Je change ensuite la couleur de fond des divs qui doivent être affichées.

Le bouton Réinitialiser

Quand on clique sur le bouton "Réinitialiser", on doit empêcher l'envoi du formulaire si les validations ne sont pas respectées. En plus des trois qu'on fait lors de la modification du texte, on doit aussi avoir un mot de passe avec un score de force de 3 ou 4.

Le mot de passe inscrit dans le input "Confirmer votre mot de passe" doit aussi correspondre. S'il est différent, affichez un message d'erreur sous celui-ci.