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.

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.

It has happened too often to me to get stuck with a ‘form to email’ script. Everything appears right but the email sent by the script never reaches the destination address.

This article takes you through the steps to troubleshoot the problem.

Email : background

email is one of the earliest communication systems evolved on the internet. Though email is still the most prevalent communication system on the internet, email spam has grown to be a huge problem.

About 100 billion spam emails are being sent every single day (yeah, not a typo; 100 billion, every day!). Over 94% of all email sent is spam. Every email server gets a fair share of that 100 billion and has to cope with the bombardment of such a huge amount of spam. Therefore, email servers (MTA: Mail Transfer Agents) have equipped themselves with methods to scrutinize the email messages and reject the email if it suspects the message to be spam.

This is the reason why your script should craft the email carefully to avoid the message being rejected.

The ‘From’ field and source address spoofing

An email message has two parts: a header and the message itself. The header contains a few pieces of identifying information. The ‘From’ field is one of the email header fields. The purpose of ‘From’ field is to indicate who sent the email. However, the email sender can set the ‘From’ field to be any address of his choice.
Spammers exploit this aspect of the protocol. For example, a spammer can send an email making it appear like the email is coming from security@bank.com and ask the victim to give the bank log-in details. The spammer does not need access to the bank server to do this. Adding a “From: security@bank.com” header to the email will make the users think that the email is coming from the bank.
For details see email source address spoofing

The cure: SPF

Sender Policy Framework (SPF) was introduced to prevent email source address spoofing.
Here is how it works:
Let’s say a spammer is sending you a fake message.

• Your email server receives the message from the spammer.
• The email server looks for the ‘From’ address in the email header.
  Suppose ‘From’ field is ’security@bank.com’
• Your email server requests for the DNS records of bank.com domain ( in simple terms, DNS is for resolving a domain name like bank.com to an IP address ). The DNS records of a domain can contain SPF records. The SPF records will indicate which IP addresses can send email on its behalf. Most of the time, it will only be the main mail server (example: bank.com in this case). Since the spammer’s IP address is different, the email gets rejected.

Imagine you received a phone call and the caller claimed that he is calling from the bank. You can verify it by looking up the incoming call’s phone number in the telephone directory. The SPF system follows the same method.

Setting the ‘From’ field right

Have a ‘From’ field in the emails that you sent through the script. The From address should belong to the domain from where you are running the script. If your script is running on your-website.com then the From address should be like someone@your-website.com.

Sample PHP code:

$headers = "From: someone@your-website.com";
mail($to,$subj,$body,$headers);

What if you want to have some-other.com as the from address?
You have update the SPF records of some-other.com to indicate that your-website.com can send emails on behalf of some-other.com. See: openspf.org for details.

Replying to the visitor who submitted a form

When sending email from a ‘form to email’ script, it will be convenient to have the website visitor’s email address in the ‘From’ field. You can reply to the message by just pressing the ‘Reply’ button in the email client. However, this can result in the email not reaching you.

For example, suppose this is the form to email code:

$visitor_email = $_POST['email'];
 
$headers = "From: $visitor_email\r\n";
mail($to,$subj,$body,$headers);

Now, if someone submits their email address as ’someone@a-company.com’, when the email server receives this email message, it checks whether your website can send emails on behalf of a-company.com domain and ends up rejecting the email.

The right alternative is to use the ‘Reply-To’ email header. Set the ‘From’ to be an address belonging to your web site domain and add a ‘Reply-To’ header with the web site visitor’s email address.

Example code:

$headers = "From: name@your-website.com";
$headers .= "Reply-To: $visitor_email";
mail($to,$subj,$body,$headers);

Keep in mind that you need to sanitize all the values used in the header attribute of the mail().

Make sure the php.ini is configured right

If you are still not receiving the emails, the problem could be in the PHP setup. The mail should be configured in the PHP configuration file php.ini.

The following code shows a typical PHP mail configuration (using sendmail)

[mail function]
; Setup for Linux systems
sendmail_path = /usr/sbin/sendmail -t
sendmail_from = me@myserver.com

The following code shows SMTP configuration in php.ini

[mail function]
; Setup for Windows systems
SMTP = smtp.my.isp.net
sendmail_from = me@myserver.com

Note that you can update the php.ini only if you are running your own web server. Instead, if you are hosting the website with a web hosting service, contact the service provider to setup php mail right.

A simple script to test your PHP –> mail configuration

Download this php email script. Edit the file and update the $from_add and $to_add variables. (see the instructions in the code). Upload the script to your web site. Access the page. You will see a submit button on the page. Press the submit button to send an email to yourself.
If you are not getting the email still, get help from your hosting service provider/network admin. Point them to this sample script that fails to send email.