rich password widget for your web forms

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

Need a strong password quickly? Generate it.

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.

Download

PasswordWidget

Usage

The usage is simple.

First, link to the style sheet and the JavaScript file:

<link rel="STYLESHEET" type="text/css" href="pwdwidget.css" />
<script src="pwdwidget.js" type="text/javascript"></script>

Instead of the password field, use the code below.

<label for='regpwd'>Password:</label> <br />
<div class='pwdwidgetdiv' id='thepwddiv'></div>
<script  type="text/javascript" >
var pwdwidget = new PasswordWidget('thepwddiv','regpwd');
pwdwidget.MakePWDWidget();
</script>
<noscript>
<div><input type='password' id='regpwd' name='regpwd' /></div>
</noscript>

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);

More options

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();

rich password widget for your web forms