Here is a password field widget that not only has a password strength meter but also has other essential features that your users would love to have.
Mask or unmask? Do passwords really have to look like **** ?
When you type-in your password, the password field shows a mask. This mask supposedly prevents someone from observing your screen ‘over the shoulder’ .
But, what if I am at home with the only possible observer being my pet dog? Why not leave the option of showing/masking the password to me, the user?
Need a strong password quickly? Generate it.
There are many good password managers available. For those users, it will just be good to generate a password for the web site and then let the password manager remember it for life. Having a password generator along with the password field will be handy.
Another common feature is to have a strength meter that persuades the user to have a better password rather than their pet name. Based on some basic rules (have a number and a symbol in the password) a strength value is displayed that, hopefully, will make the user create a better password.
See the widget in action !
Try it yourself!
The download contains the source and some samples.
The usage is simple.
Instead of the password field, use the code below.
Notice that noscript part makes sure that a normal password field is shown even if Java Script is disabled.
The parameters to the PasswordWidget() class are: (1)the ID of the div for the widget and (2)the name of the password field.
var pwdwidget = new PasswordWidget(id_of_div,name_of_passwordfield);
The features can be turned on/off. For example, it doesn’t make sense to have a ‘generate’ option in a log-in form. Here is the code:
var pwdwidget = new PasswordWidget('thepwddiv','regpwd'); pwdwidget.enableGenerate=false; pwdwidget.enableShowStrength=false; pwdwidget.MakePWDWidget();
Similarly, you can modify/translate the label text :
var pwdwidget = new PasswordWidget('thepwddiv','regpwd'); pwdwidget.txtShow= 'Display'; pwdwidget.txtMask= 'Hide'; pwdwidget.MakePWDWidget();
The password widget was tested on IE7, FireFox 3, Opera 9.24, and Safari 3.1.
Post your comments and suggestions. Translations and enhancements are also welcome.