Afficher / Cacher sur un champ de mot de passe

Le formulaire de connexion est le formulaire que nous retrouvons le plus sur les sites internet. Créer un formulaire de connexion qui donne le choix à l'utilisateur d'afficher ou de cacher son mot de passe est donc un élément qui améliorera considérablement la vie de vos utilisateurs. Voyons dans cet article comment faire !

Envie de voir le code en live ?

Rendez-vous directement sur ce lien : démonstration

 

1ère étape

Le code HTML

<label>
  <input type="password" placeholder="Mot de passe">

  <div class="password-icon">
    <i data-feather="eye"></i>
    <i data-feather="eye-off"></i>
  </div>
</label>

<!-- ICON SCRIPT -->
<script src="https://unpkg.com/feather-icons"></script>
<script>
  feather.replace();
</script>

Dans l’étape précédente, nous utilisons unpkg et sa collection d’icônes.

C’est une solution rapide pour facilement mettre des icones : eye et eye-off qui sont les icones qui nous permettent d’afficher un oeil et un oeil barré.

 

2ème étape

Stylisons maintenant le label et l'input.

label {
  position: relative;
}

label input {
  font-size: 1em;
  color: #f9f9f9;
  background: transparent;
  padding: 1rem 1.2rem;
  width: 350px;
  border-radius: 5px;
  border: 2px solid #7a7a7a;
  transition: all 0.2s;
}

 

3ème étape

Stylisons maintenant l'input au focus / clic.

label input:focus {
  border-color: #ff4754;
}

 

4ème étape

Nous devons maintenant styliser l'icône Afficher et Cacher.

label .password-icon {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  width: 20px;
  color: #f9f9f9;
  transition: all 0.2s;
}

 

5ème étape

Stylisons maintenant l'icône au survol et cachons l'icône de l'oeil barré pour ne laisser que l'icône de l'oeil "normal".

label .password-icon:hover {
  cursor: pointer;
  color: #ff4754;
}

label .password-icon .feather-eye-off {
  display: none;
}

La classe .feather-eye-off est une classe générée automatiquement par la collection d'icône que nous avons importé.

 

6ème étape

Passons au JavaScript et sélectionnons les éléments.

const eye = document.querySelector(".feather-eye");
const eyeoff = document.querySelector(".feather-eye-off");
const passwordField = document.querySelector("input[type=password]");

Nous sélectionnons les deux classes créées par unpkg / feather et l’input de type password pour ensuite pouvoir détecter les clics et transformer le type de l’input.

 

7ème étape

Détectons maintenant le clic sur l'oeil et sur l'oeil barré.

eye.addEventListener("click", () => {
  eye.style.display = "none";
  eyeoff.style.display = "block";
  passwordField.type = "text";
});

eyeoff.addEventListener("click", () => {
  eyeoff.style.display = "none";
  eye.style.display = "block";
  passwordField.type = "password";
});

Lorsque l’utilisateur vient cliquer sur l’oeil, alors on cache l’icône de l’oeil “normale” et on affiche l’icône de l’oeil “barré”.

Nous en profitons pour changer le type de l’input de “password” à “text”.

Enfin, nous faisons l’inverse pour pouvoir revenir à un input “caché”.