« Change your Joomla database prefix  |  New versions of Morph & Configurator »

New jQuery plugin targeting usability for password masking on forms

Last month, Jakob Nielsen wrote a blog post titled “Stop Password Masking” – a usability related article on how password masking on web forms, while providing a degree of “over the shoulder” security, is a step backwards regarding usability. Especially with the ever-apparent increase in the use of mobile devices to access online features.

While working on Configurator, the backend UI for our new Template Management System, Morph, we decided on including an option for users to show their password on the login form. This seemingly easy script however was not available as a jQuery plugin, and the only script we could find online used regular Javascript to add a “show password” option to login forms. So I opted to write my own script, and offer it as a jQuery plugin – this satisfied all our criteria. 1. Keep to using the jQuery Framework for our TMS 2. Avoid the use of bloated code 3. Give back to the public and to jQuery The plugin I wrote, when uncompressed, weighs in at around 2kb and compressed around 1kb. This is quite a drastic difference compared to the original script ) that we found online, which when compressed weighs around 4kb, and 12kb uncompressed. My plugin also has a few customizable features which the original script lacks, namely:
  • The ability to change the position of the checkbox
    • Either directly after the password input, or
    • In a specified element
  • The ability to specify custom text for the checkbox as opposed to the standard “show password” text
  • The ability to specify a class for the checkbox as well as a name attribute for usability
All of this and it only weighs in at 2kb uncompressed. Impressive, I know – anyway, lets get onto the point of this post.

The plugin

The plugin aptly named showPassword can be downloaded by clicking on the download link above. The download contains the demo, as well as the unpacked, and compressed versions of the plugin. To use the plugin, is as simple as jQuery is to Javascript. All you need to do is add an ID to your password input: 
<input type="password" id="showpassword" name="password" />
And then invoking the plugin is as simple as adding the following in your head tag or external JS file: 
$(document).ready(function(){
    $('#showpassword').showPassword();
});
That will give you the most basic option: A show password checkbox directly after the input. To customize, you can add the following 2 options to the call. 
$('#showpassword').showPassword(element, options);
The element option allows you to inject the checkbox into any specified element, and the options object allows you to insert 3 additional options, “name”, “className” (for the checkbox, not the injected element) and custom text. For example in the demo I have used a div with class of “checker” and I have specified custom text “Custom Show Password Text” and a custom name attribute “showmypassword” and for the purposes of the post, I have added the className call as well. 
$('#showpassword').showPassword('.checker', {
    text: 'Custom Show Password Text',
    className: 'mycustomclass',
    name: 'showmypass'
});
As it goes with any web development of any type, I have tried my best to include as much as I can, and make it as usable and accessible as possible, but if you come across any problems, or have any extra ideas, please let me know in the comments. Update: An issue was found in Safari 4 due to their stricter JS parsing engine, and the plugin has been updated to reflect these changes. Please let me know if you find any other issues. Update 2: Another issue was found with the plugin – if you did not click the checkbox, strict browsers would not pass the data via POST as there were 2 inputs with the same name. This has been resolved and uploaded to the download and demo. Version 1.1 will be released next week, with a slight rewrite to how options are passed as well as a new feature as seen on mobile device forms.
Related blog posts:
  • How to recover your lost admin password in Joomla

    At some point in your life you will do something silly and somehow not be able to login to your Joomla install with your......

  • New versions of Morph & Configurator

    Yesterday we released the latest versions of Morph & Configurator for Joomla to our beta testers. Most of the changes are once again in......

  • New stable version of Morph, Configurator and Vanilla now available

    Hi guys and gals! It’s been a busy week for us and we’re happy to announce the availability of the new stable versions of......

    • Tags: , , , , ,

    56 Comments

    Leave a Comment |  RSS feed for comments on this post.

    Trackbacks / Pingbacks

    Leave a Reply