Skip to Content

Better UI: Display passwords

Posted on 2 mins read

Signup for one service and one common thing you’ll see is a masked password box. This provides security because bystanders can’t read the password. It comes with a downside though: Your user will be annoyed if he makes a typo. This is especially annoying if the password needs to be typed two times to prevent typos and you have to type both passwords again.

But there is a simple solution to this problem: Provide an “unmask” function.

All you need to do is to change the type of the field from password to text.

To demonstrate this, I’ll be using bootstrap and jQuery, but it can obviously be done with plain javascript and without any framework.

The checkbox will be appended to the password field to make it look good and easy for the user to understand.

<div class="form-group"> <label class="col-md-4 control-label" for="password">Password</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox" class="showPassword"><label>Show</label> </span> <input id="password" name="password" class="form-control" type="password" placeholder="" required=""> </div> </div> </div>

To make this usable you just need to add a simple handler that changes the type of it on click.

<script> $('.showPassword').on('change', function () { var cache = $(this).parent().next(); if (cache.attr('type') == 'text') { cache.attr('type', 'password') } else { cache.attr('type', 'text') } }); </script>

It doesn’t work on IE <9 and I haven’t split tested it yet, so use it with caution.

Demo:

Related to this: Please don’t prevent pasting of passwords (at least at the signin page): It provides no security at all and discourages user to use a password manager, which could mean they use insecure passwords.

And if your security certificate requires this, you might think about getting rid of it because it provides no value at all.