Using The Included Password Strength Meter Script In WordPress

In WordPress, a very effective password strength script is used which indicates if the password that you have entered into the WordPress system, is not the same, or weak, medium, or strong. It always checks the password strength while creating a WordPress account for the first time as a new user or even when you may have forgotten your password or just want to reset the password to your admin.

I will try to achieve a few things from this post. I want to tell you how to use this particular password strength script of WordPress in the forms that you have on your site.

The Password Strength Script

At this point, to achieve this, we will need to go a little further in the WordPress system to find what we need, the strength meter script. It is located inside the WordPress at:
wp-admin/js/password-strength-meter.js
Do you remember we open up the template of the theme that we want to edit in our child theme directory, after copying it from the parent theme directory? We are going to open functions.php in the child theme directory:
wp_enqueue_script( 'password-strength-meter' );

What is in the Script?

If you think the script will do everything for us and the job is done after locating them, then you are mistaken. The purpose of the script is that it leaves us with two JavaScript functions. The first of them is the basic function that we are going to use:
wp.passwordStrength.meter( password1, blacklist, password2 ).
This one looks at two strings and then comes up with the strength of them individually as a number varying from 1 till 5. 1 indicating that it is weak, and 5 indicating that it’s strong. Not only this, this script will further use a list of blacklisted words and make them weak words.

The second function produces a list of words that are supposed to be weak words in the passwords. This function looks like this:
wp.passwordStrength.userInputBlacklist( ).
It combines these words found in the URL, or site’s title, or even the tagline and then the compilation takes place. Not only that, but it also checks for a certain kind of input and adds the ones found on the current page to the list being compiled.

While measuring the strength of the password could be possible by the two functions above, the script does not allow for a result which we would be able to display, hence we will have to take the route of creating a function ourselves, to create it.

Our Strength Meter Form

<form>
<input type="password" name="password" />
<input type="password" name="password_retyped" />
<span id="password-strength"></span>
<input type="submit" disabled="disabled" value="Submit" />
</form>
In the function above, let’s take this as our first step in implementing the strength meter function. And the first, form part as the mere starting. Names and ids will also be a part of the function that we will build. There are really three things that we are looking for to happen once the function is created.

a)      We would be able to check the strength of the password as in when something is typed in the password field.

b)      We would be able to display the password strength in the same fashion as that of the WordPress

c)      We would also put a submit clickable button if the password is strong enough

Our Strength Meter Function

There is a long jQuery function which we will use to make that happen. The different parts of the function will be discussed in detail a little later.

1. Arguments and Resetting form

The function will carry all the information from all the places that we will need or change. The jQuery function objects will be having a $ sign before them which will make them stand apart and differentiate them from the rest of the JavaScript functions, hence making it so much easier to spot from the crowd.
var pass1 = $pass1.val();
var pass2 = $pass2.val();

// Reset the form & meter
$submitButton.attr( 'disabled', 'disabled' );
$strengthResult.removeClass( 'short bad good strong' );
You can actually see from the first few lines that it is quite easy and simple. Basically, it’s just that what you are thinking, which is getting the passwords and then resetting the form. Always remember to disable the form in the beginning and enable them once a good and strong set of passwords with a good score is received.

Not only that, but we will also be adding styles to the strength meter so that it gives and displays the different classes of names based on the score of the password. In the beginning, we are just going to delete the style.

2. The Blacklist Array

Usually, the blacklist array of the script’s meter is enough and therefore fine, however, you may want to add additional items to it. In any case, our function has the capability to cater to both categories. Here is a glimpse of what the function looks like:
// Extend our blacklist array with those from the inputs & site data
blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() );
In either case, both of them are merged at this point to be entered into the meter function.

3. Calling the meter function

// Get the password strength
var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
We will have to call the meter function to let us know about how strong the password is, its strength score. Once that is known, it will be decided based on that information how to treat the result.

4. Displaying the Meter Results

// Add the strength meter results
switch ( strength ) {
case 2:
$strengthResult.addClass( 'bad' ).html( pwsL10n.bad );
break;
case 3:
$strengthResult.addClass( 'good' ).htm1( pwsL10n.good );
break;
case 4:
$strengthResult.addClass( 'strong' ).html( pwsL10n.strong );
break;
case 5:
$strengthResult.addClass( 'short' ).html( pwsL10n.mismatch );
break;
default:
$strengthResult.addClass( 'short' ).html( pwsL10n.short );
}
As you might be aware, we already have a strong core. Now we only are left to display it.

pwsL10n

Right above us is a JavaScript object which is given by WordPress in which the labels for every strength core are included. Just under the password field, we will display the label inside the following:

<span>

With every label, we will also allocate a style class to that label.

5. Enabling the Submit Button

// The meter function returns a result even if pass2 is empty,
// enable only the submit button if the password is strong and
// both passwords are filled up
if ( 4 === strength && " !== pass2.trim() ) {
$submitButton.removeAttr( 'disabled' );
}
As pretty clear from the results of the function above, the end part of the function is the part devoted to enabling the button for submitting, based on having a strong password only.

6. Triggering on Keyup

jQuery( document ).ready( function( $ ) {
$('body' ).on( 'keyup', 'input[name=password1], input[name=password2]',
function( event ) {
checkPasswordStrength(
$('input[name=password]' ), // First password field
$('input[name=password_retyped]' ), // Second password field
$('password-strength' ), // Strength meter
$('input[type=submit]' ), // Submit button
['black', 'listed', 'word'] // Blacklisted words
);
}
);
});
We don’t always need a password checker, we only need it for new users or in situations when the password is reset by the user either because he may have forgotten it or he just wants to reset it because of the privacy issues. Nonetheless, we need a trigger for situations like these in which the password strength meter check is run. We simply bind up a handler to the ‘keyup’ events to the password fields. This will ensure that whenever such keyup event will arise, and that too before the password field, it will automatically signal the password strength checker and it will show up.

Changing the Strength Labels

WordPress loads the strength checker and its labels under the following object:

pwsL10n

In order to change the labels, and also to localize it, you will just have to make the script localized in functions.php after the following:
wp_enqueue_script
The following has been extracted when the script has been localized in the functions.php:

wp_localize_script( 'password-strength-meter', 'pwsL10n', array(
'empty' => __( 'Strength indicator' ),
'short' => __( 'Very weak' ),
'bad' => __( 'Weak' ),
'good' => _x( 'Medium', 'password strength' ),
'strong' => __( 'Strong' ),
'mismatch' => __( 'Mismatch' )
));

Conclusion

We learned how to make the changes in the password strength scripts that come with WordPress. Not only that, but in this article, we also saw how to make it accept only the strong passwords, how to make changes in the styles of these scripts, etc.