Show my password, please

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 Password</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 Password';
  } else {
    passwordInput.type = 'password';
    toggle.innerHTML = 'Show Password';
  }
}

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

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

See the Pen Show Password by Matt Smith (@AllThingsSmitty) on CodePen.

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.