Table of Contents
Introduction
The purpose of the Password strength indicator using jQuery and XML plugin is to help and ensure user to enter strong password. For the past couple of years, I had written couple of article on how to integrate this plugin with ASP.NET/MVC and classic ASP application. 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
- 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 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 inside 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 to initialize 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 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_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;
}
Shown in listing 2 is the function to validate the password strength using 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 not meeting the requirements.
Listing 2
function ysa_validate_password($errors, $update, $user) {
if (isset($user->user_pass)) {
$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 hooks 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 library, so we want to make sure the initialization script is place 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 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 maximum length is 25 characters. 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 store in a XML file. To edit the password policy, go to the Dashboard, click on the Plugins link under the left navigation menu. Look for ysa-jquery-password-strength, click on the Edit link. Refer to figure 2.
Figure 2
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, ampersand should be enter as "&" instead of "&". You might find the XML – Special Characters Conversion List helpful.
Figure 3
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 WordPress user profile and add new user page
How to un-install the plugin
Limitations
- Short code is not available in this version
- Currently this plugin only works in WordPress user profile and 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 miss 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
History
- 06/01/2013 – Initial version.
Watch this script in action
Download
Resources
