const eyeIcons = {
   open: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="eye-icon"><path d="M12 15a3 3 0 100-6 3 3 0 000 6z" /><path fill-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" clip-rule="evenodd" /></svg>',
   closed: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="eye-icon"><path d="M3.53 2.47a.75.75 0 00-1.06 1.06l18 18a.75.75 0 101.06-1.06l-18-18zM22.676 12.553a11.249 11.249 0 01-2.631 4.31l-3.099-3.099a5.25 5.25 0 00-6.71-6.71L7.759 4.577a11.217 11.217 0 014.242-.827c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113z" /><path d="M15.75 12c0 .18-.013.357-.037.53l-4.244-4.243A3.75 3.75 0 0115.75 12zM12.53 15.713l-4.243-4.244a3.75 3.75 0 004.243 4.243z" /><path d="M6.75 12c0-.619.107-1.213.304-1.764l-3.1-3.1a11.25 11.25 0 00-2.63 4.31c-.12.362-.12.752 0 1.114 1.489 4.467 5.704 7.69 10.675 7.69 1.5 0 2.933-.294 4.242-.827l-2.477-2.477A5.25 5.25 0 016.75 12z" /></svg>'
};
 
function addListeners() {
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!toggleButton) {
      return;
   }
   
   toggleButton.addEventListener("click", togglePassword);
}
 
function togglePassword() {
   const passwordField = document.querySelector("#password-field");
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!passwordField || !toggleButton) {
      return;
   }
   
   toggleButton.classList.toggle("open");
   
   const isEyeOpen = toggleButton.classList.contains("open");
 
   toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
   passwordField.type = isEyeOpen ? "text" : "password";
}
 
document.addEventListener("DOMContentLoaded", addListeners);

Demo

En el siguiente demo, incluyo un formulario para iniciar sesión donde la contraseña puede verse y esconderse al dar click en el botón con el ícono de ojo.

See the Pen Show password when click on an eye button by Roel Magdaleno (@roelmagdaleno) on CodePen.

Contexto

Digamos que estás desarrollando tu aplicación web, la cual contiene el clásico formulario para iniciar sesión. Este formulario contiene dos <input />, uno para usuario y otro para contraseña.

Hasta ahí todo bien, pero los usuarios se empiezan a frustrar porque los caracteres escritos dentro del <input type="password" /> (campo de contraseña) están escondidos.

¿Por qué el usuario se puede frustrar por la acción anterior?

No puedes negarlo, como usuarios, nos gusta confirmar lo que estamos escribiendo por dos motivos (en lo personal, así lo veo):

1. Quiero acceder rápidamente, hay un ligero sentimiento de frustración al ver el mensaje de que tu contraseña es incorrecta.
2. Quiero evitar algún tipo de bloqueo por parte de la plataforma, esto pasa mayormente en páginas de banco e inversiones.

Explicación

Para empezar, dentro del callback del evento DOMContentLoaded debemos encontrar el botón que mostrará o esconderá la contraseña y a ese mismo botón le asignaremos un evento click.

function addListeners() {
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!toggleButton) {
      return;
   }
   
   toggleButton.addEventListener("click", togglePassword);
}
 
document.addEventListener("DOMContentLoaded", addListeners);

La función togglePassword se ejecutará cuando se haga click en el botón. Aquí es donde sucede la magia.

function togglePassword() {
   const passwordField = document.querySelector("#password-field");
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!passwordField || !toggleButton) {
      return;
   }
   
   toggleButton.classList.toggle("open");
   
   const isEyeOpen = toggleButton.classList.contains("open");
 
   toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
   passwordField.type = isEyeOpen ? "text" : "password";
}

La parte más importante es agregar/quitar a toggleButton (o el botón que sirve para mostrar u ocultar la contraseña) la clase CSS: open.

Con la clase CSS open decidiremos si debemos mostrar o no la contraseña. El resultado tenemos que asignarlo a la constante isEyeOpen.

function togglePassword() {
   const passwordField = document.querySelector("#password-field");
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!passwordField || !toggleButton) {
      return;
   }
   
   toggleButton.classList.toggle("open"); 
   
   const isEyeOpen = toggleButton.classList.contains("open"); 
 
   toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open;
   passwordField.type = isEyeOpen ? "text" : "password";
}

Para mostrar la contraseña hay que acceder al “tipo” del campo de la contraseña (la constante passwordField) – por default es password.

Al hacer click en el botón, hay que convertir el campo de contraseña a tipo text, solo si isEyeOpen es verdadero. ¡Ese es el truco!

function togglePassword() {
   const passwordField = document.querySelector("#password-field");
   const toggleButton = document.querySelector(".toggle-button");
   
   if (!passwordField || !toggleButton) {
      return;
   }
   
   toggleButton.classList.toggle("open");
   
   const isEyeOpen = toggleButton.classList.contains("open");
 
   toggleButton.innerHTML = isEyeOpen ? eyeIcons.closed : eyeIcons.open; 
   passwordField.type = isEyeOpen ? "text" : "password"; 
}

Y listo. En unas cuantas líneas de código hemos podido mostrar y ocultar la contraseña de nuestro campo.