Show me my password!

Have you ever found yourself in a situation where you need to create a password for a new account, and you are not quite sure of what you typed, because the letters are being replaced by dots or asterisks as you go?

The situation is even more challenging when the website asks you to re-enter your new password a second time. If the second entry doesn’t match the first, you don’t know which box has an error in it.

Many users of one of my websites had that problem: when they tried to subscribe to the website, they kept getting an error message saying that the two password fields didn’t match.

Now I could of course have changed these fields into regular “text” input fields, so that the passwords would always be visible, but that raises security concerns because someone could be looking over the user’s shoulder and see the password that is supposed to be secret.

Note that this problem doesn’t really exist if the user is using a password manager like LastPass to generate their passwords, but unfortunately, many users don’t.

What I did

I decided to give the user the option of making the password visible temporarily, so that they can check what they actually typed in.

I am going to show how I added a password visibility icon to my website. First, let’s have a look at the same form with the icon added:

Now if you click the “eye” icon next to the password field, both the “password” and the “retype password” fields display the passwords as cleartext.

The icon changes shape, and if you click it again, the passwords are hidden again.

How I did it

First, I created two small images:

  • eye.png the “show passwords” icon
  • eyex.png the “hide passwords” icon

Both images are included in the downloadable file at the end of this article. You can use mine, or you can use one of the free icons available at https://icons8.com/icons/set/eye

Second, I created a Javascript function that toggles the visibility of the passwords:

function eyeIconToggle( eye, pwd, pwd2 ) {	
  if ( document.getElementById(pwd).getAttribute("type") == "password" ) {
    document.getElementById(pwd).setAttribute("type", "text");
    document.getElementById(pwd2).setAttribute("type", "text");
    eye.src = eye.src.replace("eye.png", "eyex.png");
  } else {
    document.getElementById(pwd).setAttribute("type", "password");
    document.getElementById(pwd2).setAttribute("type", "password");
    eye.src = eye.src.replace("eyex.png", "eye.png");
  }
}

And last but not least, I added some code to my input fields. I simplified the following code snippet for clarity. If you want to apply this to your website, you’ll have to adapt this to your environment.

<?php
wp_enqueue_script( 'password_eye', get_stylesheet_directory_uri() . '/password_eye/password_eye.js' );
$eye_icon = get_stylesheet_directory_uri() . '/password_eye/eye.png';
?>
...
<td><input type="password" id="pwd" />
<img style="vertical-align:middle;cursor:pointer" 
  src="<?php echo $eye_icon; ?>" 
  onclick="eyeIconToggle(this,'pwd','pwd_re');" /></td>
...
<td><input type="password" id="pwd_re" /></td>

Get the code

I hope this may be useful to you if you want to add a “show password” icon to your PHP form.

You can download the code here: password_eye.zip

Leave a Reply

Your email address will not be published. Required fields are marked *