How to enforce password policies on custom login, password reset & other pages

Melapress Login Security enables you to set and enforce a number of login-related policies, including password policies. Password policies, in particular, are enforced on eligible users via the login, user profile, and password reset pages. This works out of the box when using the default WordPress pages. The plugin also supports a number of third-party plugins, including WooCommerce and LearnDash, through its one-click support functionality.

However, if you use a custom solution or a plugin that does not support one-click integration, you can integrate the plugin to enforce any applicable password policies manually. This article explains how.

How manual Melapress Login Security integrations work

Melapress Login Security needs to be integrated at both the client-side and server side as follows;

Client-side

Client-side integration uses JavaScript to display password hints to the user, such as the password must contain so many characters, etc., as set up by your policy settings, as well as display the ‘password score so that users can see if it’s a good or bad password as they interact with the password field.

Sever-side

Server-side integration is required for validation, which allows for the actual enforcement of your policies and where blocking of any submissions takes place.

Part 1: Client-side integration

Client-side integration can be done via PHP or shortcode as long as you are integrating a single form. If you want to integrate with multiple forms, then the integration must happen via PHP.

We will first look at integration via PHP, and then we will look at integration via shortcode.

1.1 Integrating a single form using PHP

To integrate a single form via PHP, we need to use the ppm_enable_custom_form hook.
This method helps your users set passwords that comply with the policies set in Melapress Login Security.
See the example below, which you can add to a custom plugin or functions.php file:

function example_ppm_enable_custom_form( $args ) {
     $args = array(
          'element' => '#user_password',
          'button_class' => '#submit_password',
          'elements_to_hide' => '#old_pw_hints',
     );
     return $args;
}
 
add_filter( 'ppm_enable_custom_form', 'example_ppm_enable_custom_form' );

How can I use the hook?

If you’re not familiar with PHP code, don’t let the above code daunt you. Let’s take a closer look to see what it’s doing and how we can customize it to suit specific needs.

As you can see, the code itself is a simple function that is passed onto our plugin so that it knows what is needed and where to target. Let’s look at example_ppm_enable_custom_form and see what we need to change to suit specific requirements.

The function is a simple array of arguments for specifying the ID/class for the password fields and submit buttons you wish to apply our script to. The first argument is ”element”, in the line:

'element' => '#user_password',

This is where you pass the ID/class for the input field you wish to modify. The second argument is ”button_class” in the below line:

'button_class' => '#submit_password',

Finally, we have another argument that allows you to hide elements on your password page where the JS is being applied:

'elements_to_hide' => '#old_pw_hints',

Here you can provide any IDs/classes you wish to hide on the same page as your form. This can be useful for hiding password hints being generated elsewhere and much more.

We will now detail how you would locate this class or ID on your page using your browser’s developer tools.

Where do I locate this ID or class?

In this example, we are going to use WooCommerce as an example.

To start, head to your user’s account page. This will be the front-facing page your users go to to change account details such as their name, email address, and, more crucially, their passwords. Using a web browser such as Chrome, locate the “new password” fields, right-click the field, and select “Inspect.”

You will see a panel in your browser – this is your page’s source. First, ensure the field is the password field by confirming that it has the type=”password” attribute. Once you know it’s the right field, locate the unique ID (or a unique class if your specific form does not have an ID on this element). Let’s take a closer look at our example and what its HTML markup looks like.

In this example, we can determine this particular input has the id password_1. So we would add this to our custom functions ‘element’ argument, just like you can see in the example above. Have more than one password input you wish to use? No problem; use a comma-separated list such as ‘#custom_id_1, .custom_pw_class, #another_id’.

1.2 Integrating multiple forms using PHP

You can also use the PHP method to integrate multiple forms. The code itself works the same way as it does for the ‘Single form’ method covered above. However, by supplying an additional parameter, it is possible to support multiple forms by adding a new array item for each.

Let’s take a look at an example of a function you could use in your functions.php file:

function example_ppm_enable_custom_form_array( $args ) {
	$new = array(
		array(
			'form_selector'        => '.lost_reset_password',
			'pw_field_selector'    => '#password_1',
			'form_submit_selector' => '#submit_password',
			'elements_to_hide'     => '#old_pw_hints',
		),
	);
	return array_merge( $args, $new );
}
add_filter( 'ppm_enable_custom_forms_array', 'example_ppm_enable_custom_form' );

What is each part of this array?

Let’s closely examine each part of the array so that we can better understand what the code does.

form_selector – This is the unique class or ID given to the form element itself; the following items will be child objects of this form. 

pw_field_selector – This is the selector of the form element you wish to apply the code to. 

form_submit_selector – This is the selector for the “submit” button of your form and is used to apply “disable,” which stops the form from being submitted whilst an invalid password is present. 

elements_to_hide – This is a selector for any elements you wish to remove from the users’ view. This is ideal for hiding unwanted “password hints,” leaving just the hints provided by our plugin in their place.

1.3 Integrating a single form using shortcode

Using this method, the password check is done through client-side scripting, in a similar fashion to client-side JavaScript. The only difference between these two methods is that the client-side shortcode uses a shortcode to reference the required hook instead of having to manually reference it yourself through JavaScript code.

To use the client-side shortcode, all you need to do is enter the following shortcode in the form you want to enforce password policies on:

[ppmwp-custom-form element="#user_field" button_class=".my-button" elements_to_hide=".my_div"]

The same element, button_class, and elements_to_hide arguments used in the client-side JavaScript method are applicable here where:

• ‘element’ is the input ID/class
• ‘button_class’ is the submit button
• ‘elements_to_hide’ allows you to hide elements such as old password hints, for example

Part 2: Server-side integration

Once the user enters their password, it is sent to our plugin for verification, ensuring it meets the criteria set in the policy.

We will be using Melapress Login Security’s validate_for_users() function. For this to work, we need to pass a number of variables. Let’s take a look at an example of how this would look, using the plugin Gravity Forms for reference.

function check_password_on_submission( $form ) {
     $ppmwp = new \PPM_WP_Password_Check();
     $errors = new \WP_Error;
 
     // Get the input value for the password we want to check.
     $password = $_POST['input_1'];
 
     // We need the user ID of the user making the submission.
     $user = wp_get_current_user();
 
     // Fire off validity check.
     $is_valid = $ppmwp->validate_for_user( $user->ID, $password, 'reset-form', $errors );
 
     if ( $errors->errors ) {
          // If we have errors, it means the PW did not meet policy requirements.
          // $errors contain a simple array of useful messages/reasons for failure.
          error_log( print_r( $errors->errors , true ) );
     } else {
          // Otherwise, the password is fine to use, and you can continue as normal.
          error_log( print_r( 'Password is ok.', true ) );
     }
}
 
add_action( 'gform_pre_submission_1', 'check_password_on_submission' );

An explanation of the code

To break down what’s going on above, first, we create an instance of Melapress Login Security, so we can then use its functions:

$ppmwp = new PPM_WP_Password_Check();

Then, we set the variables needed for validate_for_user() to work. These are as follows:

• $errors = new WP_Error;
• $password = $_POST[‘input_1’];
• $user = wp_get_current_user()

We then fire off the check. In return, we will want to look at $errors to see if the password fails.

$is_valid = $ppmwp->validate_for_user( $user->ID, $password, ‘reset-form’, $errors );

What does validate_for_user return?

The $errors variable is an object which contains two arrays. The one we need to focus on can be accessed via $errors->error.

If the password is good and matches all the configured policies, the $errors->error array will be empty. This means that the password is safe, and you can process your form further. Otherwise, a useful error message is returned, which details the problem or problems.

(Optional) – Invoking the JS manually

By design, the client-side JavaScript is automatically initialized and requires no further input. However, in some cases, your custom form may not be visible/present upon page load or otherwise requires manual triggering in order for our plugin’s JavaScript to appear. 

To address such situations, we have exposed the functionality needed to make it possible to create your own initialization script, which you can easily trigger on whatever event you wish (for example, on the click of a specific button etc)

An example of this function can be seen below. This is a jQuery function so it needs to reside in your theme’s custom.js file.

function trigger_mls_scripts() {
	var myForm  = { 
		form_selector: '#testform',
		pw_field_selector: '#passfield',
		form_submit_selector: '#submitbtn',
		elements_to_hide: '#old_pw_hints',
	};

	setup_custom_forms_arr( myForm, PPM_Custom_Form );
}

As you can see, we first create an array with the same selectors used in Part 1. This will let our plugin’s JavaScript know about your custom form, This is then passed over to ‘setup_custom_forms_arr’, which in turn invokes the password hints JavaScript.