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

password-widget-1

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?

form password show/hide

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.

Strength meter.

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!

Password widget demo page

Download

PasswordWidget.zip

The download contains the source and some samples.

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

License


The Password widget is shared under LGPL license. You can freely use it on commercial or non-commercial websites.

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.

Comments on this entry are closed.

  • is exellent, I will be use

  • excellent and very useful…….

  • I was wondering if you know where I can find info on how to create a web form calculator. something like this:
    http://www.canadamortgage.com/webcalcs/realtylink/options.cgi?p=%24719%2C900%2E00&cf=434.63&tx=227.166666667&office=000720&mls_num=V890438
    The final value is calculated using the info the user enters to the form
    Thanks!

  • I love this widget, definitely want to use it in my site.
    I’m having a bit of trouble posting the value though, when I get to the posted page, whether I try $_POST[‘regpwd’] or $_POST[‘regpwd_id’] I somehow don’t get the value passed through.
    Could you give me some help with this part of it….
    Thanks!

  • Hey, this has been very useful! I am encountering a feature I’d like to turn off and am confused on how to do so.
     
    Right now a password is being auto-generated after a certain amount of time. How do I turn this off?
    It is running right now on http://www.LosAngelesHeights.com (hover over ‘Join Los Angeles Heights’)
     
    Thank you!

  • Just tried your extension and to be fair – the only thing I liked about it is the design.

    Here’s a couple of suggestions you might want to implement:
    – integrate with jquery
    – allow the user to specify not just the id, but the whole selector/xpath to the container and the element separately
    – do not change any element (like renaming my input box id), as I might have some other js code handling other box which depends on this one (example: password and confirm password input fields)
    – you can use the jquery.tmpl for the markup – concatenation is ugly to say the least
    – do not place functions to the global space, as I might already have a function named “getRand”, thus overlapping it

    Do you have a github repo?
    I can set some commits in my spare time, so we can move this project further.