Coder un code PIN peut vous être utile si vous voulez réaliser par exemple une demande d’authentification à 2 facteurs ou si le mot de passe que vous demandez à votre visiteur ne serait pas trop long (max. 6 caractères ?) et pour changer quelque peu le formulaire habituel. Toujours est-il que je voulais vous partager ce petit exercice.
Coder un code PIN
L’objectif étant surtout de styliser le formulaire en question. Au niveau de la sécurité, vous trouverez le mot de passe dans le code, ce qui est donc une faille de sécurité évidemment! Vous pourriez en revanche faire appel à une base de données ou un fichier bien protégé pour éviter d’afficher publiquement le mot de passe, afin de le vérifier par la suite.
Style VS sécurité ; passons au code
Si je veux coder la demande d’un mot de passe à 4 caractères et de manière très stilysé, je dois coder 4 champs différents et très minces, sur une ligne. Voilà ce que cela donne ;
See the Pen Untitled by Merlin (@lintermediaire) on CodePen.
Là où le code est intéressant, c’est dans un premier temps à la ligne 8. La méthode « keyup » vous permet d’écouter l’action de l’utilisateur au niveau de son clavier. Je vérifie ici si la valeur du champ insérée est bien un chiffre et si ce chiffre est en dessous de 10 (soit de 0 à 9). Si c’est le cas, je passe à la suite. (ligne 20)
Ma fonction « runCode » réalise 2 choses. 1. elle additionne les valeurs des 4 champs pour ne former qu’une suite de 4 chiffres. Et 2, elle vérifie si cette suite est égale au code que j’ai choisi.
(Allez, je vous aide ; à la ligne 32 🙂 ). Après quoi, j’affiche un message d’erreur ou de réussite.
Mais ce ce n’est pas tout …
Comme indiqué plus haut, l’important de cet exercice ne se situait pas du côté « dev », qui tend sûrement à être amélioré. Mais au niveau UX (expérience utilisateur), nous pouvons encore aller plus loin.
C’est ce que je fais à la ligne 19 ; si le champ est rempli, je passe automatiquement au champ suivant.
De la même manière, de la ligne 45 à 54, je permets à l’utilisateur de supprimer les champs s’il appuie sur la flèche de direction gauche de son clavier. Pour info, chaque touche de votre clavier possède un code que vous pouvez ensuite retrouver grâce à la méthode « keydown« . Vous pouvez après vérifier ce code pour constuire une action.
Enfin, le formulaire possède un bouton « reset« , pour tout remettre à zéro.
Et le CSS ?
Eh oui, il n’est vraiment pas à oublier dans ce cas. Vous pouvez, comme je l’ai fait, ajouter des styles sur les champs en cas d’erreur ou de succès. (fond, couleur, bordure …) Montrer ou cacher des messages, jouer sur des couleurs ou des sélections. A vous de tester le formulaire plusieurs fois afin de voir comment vous pourriez l’améliorer au niveau UX. A nouveau, pour ce petit exercice, les 3 langages du web que sont l’HTML, le CSS & le Javascript s’entrecroisent à chaque action.
