Aller au contenu principal


Montrer-cacher le mot de passe

Ce billet montre comment ajouter l'interaction permettant de montrer/cacher un mot de passe dans un formulaire d'identification.

information complémentaire disponible en cliquant ici
mais cela peut facilement être appliqué à n'importe quel contenu.
Billet créé le :
18 nov 2020

Une interaction avec l'utilisateur d'un site est très souvent traitée par un script en javascript, script qui utilise une bibliothèque jQuery. Ici, le plugin "ShowHidePassword" réalise cette interaction spécifique.

La page web est donc  produite à partir des 3 fichiers habituels :

Les 2 images ci-dessous sont produites en réaction à un clic dans le champ de saisie du mot de passe.

les fichiers

Cliquez sur le bouton pour copier le code 
dans le presse papier
    
             <!DOCTYPE html>
             <html lang="fr">
                <head>
                    <meta charset="UTF-8">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/sunny/theme.min.css">
                    <link rel="stylesheet" href="css/example.wink.css">
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/hideshowpassword/2.1.1/hideShowPassword.min.js"></script>
                    <script src="index.js"></script>
                    <title>Montrer-cacher le mot de passe</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                </head>
                <body>
                    <main class="wrap">
                        <div >
                            <form id="IdForm" action="">
                                <label for="Login">Votre identifiant : </label>
                                <input type="text" placeholder="Saisissez votre identifiant" id="Login" /><br />
                                <label for="Pwd">Votre mot de passe : </label>
                                <input type="password" placeholder="Saisissez votre mot de passe" id="Pwd" /><br />
                                <button> Envoi </button>    
                            </form>
                        </div>
                    </main>
                </body>
            </html>
            
Cliquez sur le bouton pour copier le code 
dans le presse papier
     
            $(function(){
                    $('#Pwd').hideShowPassword({
                        show: false,
                        innerToggle: 'focus',
                        toggle: {
                            className: 'hideShowPassword-toggle',
                        },
                        states: {
                            shown: {
                              className: 'hideShowPassword-shown',
                              toggle: {
                                className: 'hideShowPassword-toggle-hide',
                                attr: {
                                  title: 'Cacher le MdP',
                                }
                              }
                            },
                            hidden: {
                              className: 'hideShowPassword-hidden',
                              toggle: {
                                className: 'hideShowPassword-toggle-show',
                                attr: {
                                  title: 'Montrer le MdP',
                                }
                              }
                            }
                          }
                    });
                    $('#Pwd')
                      .on('passwordShown', function(){
                        console.log('mot de passe visible');
                      })
                      .on('passwordHidden', function(){
                        console.log('mot de passe invisible');
                      });   
                });
            

Cliquer ici pour afficher ces fichiers dans une fenêtre surgissante

Le code HTML

Le code html est très simple.
Dans l'entête de la page figure les appels vers les feuilles de style, les bibliothèques jQuery, le plugin HideShowPassword et notre script index.js

Notons que la plupart des éléments du DOM sont identifiés bien que seul l'identification "id=Pwd" soit utile au script.

Le script

Par $(function(){....}), on applique le jQuery sur le DOM de la page.
Puis on applique la méthode hideShowPassword() du plugin sur l'élément identifié "Pwd" (ie : le champ de saisie du mot de passe) par $('#Pwd').hideShowPassword().

Avec la documentation de cette méthode, on peut étudier ses paramètres (ils se trouvent entre les accolades). Ici j'utilise :

  • show (initialisé à false -- pour cacher le mot de passe lors de l'ouverture de la page) ;

  • innerToggle (initialisé à 'toogle' -- pour n'afficher le bouton "montrer-cacher" que lorsque l'on clique sur le champ de saisie du mot de passe ;

  • toogle (initialisé avec uniquement le paramètre className qui a pour valeur le nom de la classe du fichier CSS que je souhaite appliquer au champ de saisie du mot de passe) ;

  • states (initialisé avec 2 paramètres : show et hidden qui permettent de caractériser le champ "mot de passe" suivant son état visible ou caché. Ces paramètres sont également paramétrables. Ils ont tous deux, les mêmes paramètres ; j'ai utilisé :

    • className
    • toggle avec pour paramètres

      • className

      • attr avec pour seul paramètre

        • title (initialisé avec le texte qui apparaîtra dans l'info-bulle : ici "visualiser le Mdp" ou "Cacher le Mdp"). Indispensable pour une version française de la page.