Trying to add password strength to signup form

In trying to add wordpress' built-in password strengh meter, I found this article at Tuts+

https://code.tutsplus.com/articles/using-the-included-password-strength-meter-script-in-wordpress--wp-34736

It appears to be a very good way to go about forcing users to create strong passwords, if only I could get it to work. I'm using the Set Password on Sign-up plugin, so hoping I can get some help from you good folks. :slight_smile:

I have added

wp_enqueue_script( 'password-strength-meter' );
to the functions.php file of my theme, and

<span id="password-strength"></span></code>

just beneath the password fields in signup-password.php, but I'm confused about how and/or where to add the actual script. provided in the article.

By the way, I'm also open to any other suggestions. The method in the Tuts+ article just seems like the best option I've seen so far.

  • Vinod Dalvi

    Hi @Tedster,

    I hope you are well today and thank you for your question.

    To display password strength indicator on sign up form by forcing users to create strong passwords using Set Password plugin just add the following code in the functions.php file of your child theme.

    function add_scripts_styles(){
    	wp_enqueue_script( 'password-strength-meter' );
    	wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array( 'jquery', 'password-strength-meter' ), '1.0.0', true );
    }
    add_action( 'wp_enqueue_scripts', 'add_scripts_styles' );
    
    function signup_password_custom_fields(){ ?>
    	<span id="password-strength"></span>
    <?php }
    add_action('signup_extra_fields', 'signup_password_custom_fields', 99);

    Then create custom-script.js file containing following code and add that file in your theme folder inside js folder( Create it if it doesn't exist ).

    function checkPasswordStrength( $pass1,
                                    $pass2,
                                    $strengthResult,
                                    $submitButton,
                                    blacklistArray ) {
            var pass1 = $pass1.val();
        var pass2 = $pass2.val();
    
        // Reset the form & meter
        $submitButton.attr( 'disabled', 'disabled' );
            $strengthResult.removeClass( 'short bad good strong' );
    
        // Extend our blacklist array with those from the inputs & site data
        blacklistArray = blacklistArray.concat( wp.passwordStrength.userInputBlacklist() )
    
        // Get the password strength
        var strength = wp.passwordStrength.meter( pass1, blacklistArray, pass2 );
    
        // Add the strength meter results
        switch ( strength ) {
    
            case 2:
                $strengthResult.addClass( 'bad' ).html( pwsL10n.bad );
                break;
    
            case 3:
                $strengthResult.addClass( 'good' ).html( 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 );
    
        }
    
        // 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' );
        }
    
        return strength;
    }
    
    jQuery( document ).ready( function( $ ) {
        // Binding to trigger checkPasswordStrength
        $( 'body' ).on( 'keyup', 'input[name=password_1], input[name=password_2]',
            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
                );
            }
        );
    });

    Best Regards,
    Vinod Dalvi

  • Tedster

    Sorry, I spoke too soon. :slight_smile:

    I wish to use Anit-Splog to rename wp-signup.php but then the password strength meter stops working. The script makes no reference to which file provides the submit button, nor to which directory the signup file is located. Why would it work for

    /wp-signup.php

    but not for

    /wp-content/plugins/anti-splog/includes/ust-wp-signup.php

    Thanks again for helping me sort this out.

  • Vaughan

    Hi @Tedster,

    My guess would be that the JS isn't being loaded correctly on that page.

    Could you try pressing ctrl+shift+J (using chrome/firefox) and see if any errors are listed when viewing the custom wp-login page you created.

    If you could also grant support access from the dashboard plugin so we can take a look? See https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Thanks

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.