WordPress Plugin - Password Strength Indicator Using jQuery and XML

Bryian Tan
Jun 03, 2013

5.6k
0
0
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

Wordpress password strength indicator plugins using jQuery and XML

Table of Contents

Introduction
Getting Started
Programming the Plugin
How to modify the password policy
How to install the plugin
How to un-install the plugin
Limitation
Conclusion
History
Watch this script in action
Download
Resources

Introduction

The purpose of the password strength indicator using jQuery and XML plugin is to help the user to enter a strong password and to ensure they do. For the past couple of years, I have written a couple of articles on how to integrate this plugin with ASP.NET/MVC and classic ASP applications. I have been using WordPress open source CMS for a while now and recently decided to expand the plugin to WordPress. In this article I will briefly describe how I create the WordPress plugin and utilize it. This is my first WordPress plugin, all comments are appreciated.

Getting Started

Shown in Figure 1 is the folder structure of the WordPress plugin.

Figure 1

The Wordpress plugins folder structure is:

PasswordPolicy.xml: Contains password strength property
Password.xslt: To transform the PasswordPoclicy.xml file into HTML format
jQuery.password-strength.js: This is the jQuery plugin I created. Get the latest version from here
ysa-jquery-password-strength.php: This is the plugin file

The first step is always easy, include a Readme file, plugin and license information in the plugin header. You can get more details from WordPress.

Programming the Plugin

There are three functions in the plugin, namely "ysa_password_strength_scripts", "ysa_validate_password", "ysa_plugin_scripts" and "ysa_get_xml_url" respectively.

The ysa_password_strength_scripts function is responsible for initializing the jQuery Password Strength plugin by passing the TextBox ID to the script. In this version, the ID is hardcoded and thus the plugin will only work in a WordPress user profile and add new user page. For some reason, I wasn't able to find a way to remove the WordPress default password strength indicator box. I ended up setting its visibility to false on page load. This function will also inject a hyperlink link to the password policy XML file.

Listing 1

function ysa_validate_password($errors, $update, $user) {

if (isset($user->user_pass)) {

//read from XML

$xml = simplexml_load_file(plugins_url('PasswordPolicy.xml', __FILE__))

or die("Error: Cannot create object");

foreach($xml->children() as $PasswordPolicy=> $data){

$minLength = $data->minLength;

$maxLength = $data->maxLength;

$numsLength = $data->numsLength;

$upperLength = $data->upperLength;

$specialLength = $data->specialLength;

$specialChars = $data->specialChars;

}

function ysa_password_strength_scripts() {

$pwdPolicyText = "Password policy";

$xmlPath = ysa_get_xml_url();

$html = '';

$html .='<script type="text/javascript">';

$html .='/* <![CDATA[ */';

$html .=' jQuery(document).ready(function() {';

$html .=' if (jQuery("[id=\'pass-strength-result\']").length>0) {';

$html .='setTimeout(function() {';

$html .='jQuery("#pass-strength-result").css({\'visibility\':\'hidden\',\'display\':\'none\'});';

$html .='jQuery("#pass-strength-result").html("");';

$html .='}, 1000);';

$html .=' }';

$html .='if (jQuery(".indicator-hint").length>0) {';

$html .=' jQuery(".indicator-hint").append(" <br/><a id=\'passwordPolicy\' href=\'#\'>'. $pwdPolicyText.'</a>");';

$html .='}';

$html .='jQuery("[id$=\'passwordPolicy\']").click(function(event) {';

$html .='var width = 350, height = 300, left = (screen.width / 2) - (width / 2),';

$html .='top = (screen.height / 2) - (height / 2);';

$html .='window.open("' . $xmlPath . '", "'. $pwdPolicyText .'", \'width=\' + width + \',height=\' + height + \',left=\' + left + \',top=\' + top);';

$html .='event.preventDefault();';

$html .='return false;';

$html .='});';

$html .='var myPSPlugin = jQuery("[id=\'pass1\']").password_strength();';

$html .=' });';

$html .='/* ]]> */ ';

$html .='</script>

'; echo $html; } $passwordReg ="(?=^.{".$minLength.",".$maxLength."}$)(?=(?:.*?\d){".$numsLength."})(?=.*[a-z])(?=(?:.*?[A-Z]){".$upperLength."})(?=(?:.*?[".$specialChars."]){".$specialLength."})(?!.*\s)[0-9a-zA-Z".$specialChars."]*$";

if (!preg_match("/$passwordReg/", $user->user_pass, $matches)) { $errors->add( 'weak-password',

__( '<strong>ERROR</strong>: Password does not meet Password Policy.' )); } } }

function ysa_plugin_scripts() { wp_enqueue_script('ysa_password_strength_scripts',

plugins_url('scripts/jquery.password-strength.js', __FILE__), array('jquery'), '1.0',

true); wp_enqueue_script('ysa-jquery-password-strength'); }

Shown in Listing 2 is the function to validate the password strength using a regular expression. The regular expression is generated dynamically based on the password policy defined in the "PasswordPolicy.xml" file. The function will return an error message "Password does not meet Password Policy" if the password entered does not meet the requirements.

Listing 2

function ysa_validate_password($errors, $update, $user) {

if (isset($user->user_pass)) {

//read from XML

$xml = simplexml_load_file(plugins_url('PasswordPolicy.xml', __FILE__))

or die("Error: Cannot create object");

foreach($xml->children() as $PasswordPolicy=> $data){

$minLength = $data->minLength;

$maxLength = $data->maxLength;

$numsLength = $data->numsLength;

$upperLength = $data->upperLength;

$specialLength = $data->specialLength;

$specialChars = $data->specialChars;

}

$passwordReg ="(?=^.{".$minLength.",".$maxLength."}$)(?=(?:.*?\d){".$numsLength."})(?=.*[a-z])(?=(?:.*?[A-Z]){".$upperLength."})(?=(?:.*?[".$specialChars."]){".$specialLength."})(?!.*\s)[0-9a-zA-Z".$specialChars."]*$";

if (!preg_match("/$passwordReg/", $user->user_pass, $matches)) {

$errors->add( 'weak-password', __( '<strong>ERROR</strong>: Password does not meet Password Policy.' ));

}

function ysa_plugin_scripts() {

wp_enqueue_script('ysa_password_strength_scripts', plugins_url('scripts/jquery.password-strength.js', __FILE__), array('jquery'), '1.0', true);

wp_enqueue_script('ysa-jquery-password-strength');

}

The final step is to hook the function to a specific action. The first action will load the jQuery plugin script when a user accesses the admin area. Then initialize the plugin by calling the "ysa_password_strength_scripts" function. This plugin depends on jQuery the library, so we want to make sure the initialization script is placed after the jQuery library script tag. In this WordPress plugin, the priority was set to 9999 to ensure the script is created at the end. Finally, display the error message to the user if the password does not comply with the password policy.

Listing 3

add_action('admin_init', 'ysa_plugin_scripts', 100, 1);

add_action('admin_footer', 'ysa_password_strength_scripts', 9999, 1);

add_action('user_profile_update_errors', 'ysa_validate_password', 999, 3);

How to modify the password policy

By default the minimum password length is 12 and the maximum length is 25 characters. The password must contain two numbers, one upper case and one special character. Shown below is the list of allowable special characters.

(

)

}

{

;

The password policy is stored in a XML file. To edit the password policy, go to the Dashboard, then click on the "Plugins" link under the left navigation menu. Look for the "ysa-jquery-password-strength", click on the "Edit" link. Refer to Figure 2.

Figure 2

Wordpress plugins edit XML

Search for the plugin file "ysa-jquery-password-strength/PasswordPolicy.xml" and click on it. Here you can modify the password strength property. When editing the special characters list, don't forget to escape the XML special character. For instance, an ampersand should be entered as "&" instead of "&". You might find the XML – Special Characters Conversion List helpful.

Figure 3

Wordpress plugins edit XML

How to install the plugin

Download the plugin from http://download.ysatech.com/wordpress/plugins/ysa-jquery-password-strength-v1.zip
Extract the zip file and upload the ysa-jquery-password-strength folder to your WordPress wp-content/plugins/ directory or go to the PLugins page and upload the zip file.
Activate the Plugin from the Plugins page.
Try the plugin on a WordPress user profile and add a new user page.

How to un-install the plugin

http://codex.wordpress.org/Managing_Plugins

Limitation

Short code is not available in this version
Currently this plugin only works in the WordPress user profile and the add new user page

Conclusion

I hope someone will find this information useful and make your programming job easier. If you find any bugs or disagree with the contents or want to help improve this article, please drop me a line and I'll work with you to correct it. I would suggest downloading the demo and explore it in order to grasp the full concept of it because I might have missed some important information in this article. Please send me an email if you want to help improve this article.

Tested on: Internet Explorer 9.0, Firefox 19.0, Google Chrome 25.0 and Apple Safari 5.1.7, WordPress v3.5.1