How to Add Password Strength Meter in Magento ?

In this tutorial I will be creating password strength meter in Magento. Why  password strength meter is important?
- Strong password protects our personal information that we share everyday online
- Strong password protects our sensitive information like credit card info, social security, bank account, etc.

Creating password strength meter in Magento will determine the complexity of a password and move a meter accordingly with the help of a simple Javascript function to achieve this functionality in the customer registration form. First, you must add the required UI Elements under the password Field. A Few div tags to show the password strength messages.

<div id="password-strength-container" style="display:none">
<div id="password-strength-text" style= "font-weight:bold">
</div>
<div id="password-indicator" style="background: #C4C4C4; height: 0.5em;width: 100%;>
<div id="strength-indicator" style="width: 10%; height: 0.5em;"></div>
</div>
</div> 

Then you need to write the Javascript function. Since Magento uses the prototype javascript library we follow the prototype style code implementation.This Custom Javascript code will be implemented under the form tag. You need to handle the Events. Whenever a User enters some value in the password field our function should get executed.

<script type="text/javascript">
Event.observe("password","keydown", function() {
$("password-strength-container").show();
var passinput = $("password").value;
if(passinput.length < 6) {
$("password-strength-text").update("Weak");
$("strength-indicator").setStyle({
backgroundColor: '#EB34OA',
width: '15%'
});
}
else if( passinput.length > 6 && passinput.match(/[^a-zA-Z0-9] +/) ) {
$("password-strength-text").update("Strong");
$("strength-indicator").setStyle({
backgroundColor: '#47C965',
width: '75%'
});
}
else {
$("password-strength-text").update("Medium");
$("strength-indicator").setStyle({
backgroundColor: '#FFFF00',
width: '35%'
});
}
});
Event.observe("password","keydown", function() {
$("password-strength-container").hide();
});
</script> 

That code snippet above gives hints about the strength of the password he entered. if the password contains less than 6 characters it would indicate the password strength as Weak, if the password is more than 6 characters and also have lower case and uppercase characters with numeric digits it is considered as strong password.

Magento Hosting Recommendation

HostForLIFEASP.NET is a reliable web hosting company specializing in Magento hosting services. They offer Shared, Reseller, Cloud, and Dedicated server packages for both beginners and professionals alike. They promise 99.9% uptime, and scale server resources to handle spikes in traffic. HostForLIFEASP.NET is Microsoft No #1 Recommended Magento Hosting in European Continent. Their service is ranked the highest top #1 spot in several European countries, such as: Germany, Italy, Netherlands, France, Belgium, United Kingdom, Sweden, Finland, Switzerland and many top European countries. More details at http://hostforlife.eu/European-Magento-Hosting