Stop me if this sounds familiar: you’re logging into a site or app on your phone, carefully entering your password, you tap the sign-in button, and… “Incorrect password, please try again.”

Ohhh, snap!

You didn’t enter the wrong password, you simply tapped a wrong key. It’s something you likely would’ve caught if the login control provided a feature allowing you to view the password you entered.

Here’s what I mean:

Why do we need this?

For a number of years we’ve seen mobile trends that suggest users are okay with the idea of removing password masking, at least to be able to see if the input is correct. Incorrectly entering lengthy, mixed-case, alphanumeric passwords on tiny virtual keypads can become a source of user frustration. That frustration can result in abandon rates going up.

Sites like Amazon, Reddit, LinkedIn, et al., have implemented some form of “show password” option (usually for just mobile users). Yet it still feels like an overlooked and optional part of user experience design. So let’s fix that by building our own.

“Unmasking” the password

In the context of a web page, the input type of the password field is changed from type="password" to type="text". A toggle function would allow a user to remove masking to see if the password was entered correctly, as well as turn masking back on.

So, given:

<input type="password" id="txtPassword" />
<button id="btnToggle">show</button>

We can create a basic function that changes the input type of the password field:

let passwordInput = document.getElementById('txtPassword'),
  toggle = document.getElementById('btnToggle');

function togglePassword() {  
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    toggle.innerHTML = 'hide';
  } else {
    passwordInput.type = 'password';
    toggle.innerHTML = 'show';
  }
}

Now we’ll call the toggle function when the “show/hide” button is clicked:

(function () {
  toggle.addEventListener('click', togglePassword, false);
})();

You can refactor this further or implement a completely different solution, but you have the general idea.

From a usability perspective, this kind of feature makes total sense. Being able to view if you entered a password correctly before attempting to sign-in is a significant improvement to the user experience.

• JavaScript
• UX