How to show users their plain-text passwords

Written by

Walter G.

Published on

October 18 2021

Modified on

May 17 2022

Filed under

web-design

A common feature that many websites now implement, is the ability to toggle on and off the password visibility on a signup form.

You might see this as a checkbox typically that once clicked, switches over from password view to plain-text view.

While showing a user their plain-text password (typically) isn't a great security best practice, it can be very helpful as passwords can often be a complex mix of numbers, symbols and characters.

Things can get more complicated these days with more users using mobile browsers. Regardless of how modern your smartphone may be, it's still kind of a pain to type on that tiny virtual keyboard exact characters.

Assuming you have the following <input> element on your web page set to the 'password' type:

<input type='password' id='pw1' />

You can add the following checkbox to your forms in order to toggle the input type.

<input type='checkbox' id='cbToggle' onclick='togglePw("pw1")' />

And the event handler method would be the following:

function togglePw(id){
    document.getElementById(id).type = document.getElementById(id).type === 'password' ? 'text' : 'password';
}

Essentially, you are toggling between the 'text' input type and the 'password' input type whenever you click on the given checkbox.

Note that regardless of the type being set (text or password), you should always transmit your password information through an HTTPS connection as that will prevent any malicious middle-party from accessing your data.

And lastly, I personally prefer to toggle back to password mode once I've moved focus away from the input field. Especially if there are more fields to fill out on the form.

The least amount of time your passwords are exposed, the better.

<input type='password' id='pw1' onblur='showPw()' />

And the JavaScript method:

function showPw(id){
    document.getElementById(id).type = 'password';
    
    document.getElementById('cbToggle').checked = false;
}

You'll also need to uncheck the checkbox used for the toggling as well.

Comments

No messages posted yet

Add comment