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.
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.