WP Password Strength Meter

  • Hi, trying to incorporate wp password strength meter. It is the one you can see in dashboard/user/your profile. It’s not working (strength meter does nothing), but i’ll show you what i’ve done so far in hope someone can point me in the right direction. Thanks.

    /* Found in my static page – taken from wp-admin/user-edit.php*/

    <table class="form-table">
		<?php
		wp_enqueue_script( 'password-strength-meter', ABSPATH . 'wp-content/themes/twentyten/js/password-strength-meter.js');
		wp_enqueue_script( 'jquery' );
		$show_password_fields = apply_filters('show_password_fields', true, $profileuser);
		if ( $show_password_fields ) :
		?>
		<tr id="password">
			<th><label for="pass1"><?php _e('New Password'); ?></label></th>
			<td><input type="password" name="pass1" id="pass1" size="16" value="" autocomplete="off" /> <span class="description"><?php _e("Type your new password."); ?></span>
				<input type="password" name="pass2" id="pass2" size="16" value="" autocomplete="off" /> <span class="description"><?php _e("Confirm your new password again."); ?></span>
				<div id="pass-strength-result"><?php _e('Strength indicator'); ?></div>
				<p class="description indicator-hint"><?php _e('Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers and symbols like ! " ? $ % ^ & ).'); ?></p>
			</td>
		</tr>
		</table>
		<?php endif; ?>

    /* In my css file – taken from wp-admin/css/colors.classic.css */

    #pass-strength-result{
	background-color:#eee;border-color:#ddd!important;
}
#pass-strength-result.bad{
	background-color:#ffb78c;
	border-color:#ff853c!important;
}
#pass-strength-result.good{
	background-color:#ffec8b;
	border-color:#fc0!important;
}
#pass-strength-result.short{
	background-color:#ffa0a0;
	border-color:#f04040!important;
}
#pass-strength-result.strong{
	background-color:#c3ff88;border-color:#8dff1c!important;
}

Viewing 14 replies - 1 through 14 (of 14 total)

  • Your problem is that the password-strength-meter.js file (found in the wp-admin/js) directory includes only the function passwordStrength(f,i,d) where f=password1, i=user_login and d=password2.

    passwordStrength(f,i,d) returns an integer that indicates the strength of the password1 and/or whether it is a mismatch with password2. A second javascript is needed to call and use the results of passwordStrength(f,i,d). In the case of wp-admin/user-edit.php the user-profile.js file contains the javascript that does this (also found in wp-admin/js).

    user-profile.js uses jquery and classes, objects and arrays specific to the wp-admin/user-edit.php page. It can’t be used as-is on other pages, especially outside WP Admin.

    I also wanted to use the password meter in a plugin I’m building. I have this working by not using wp_enqueue_script() at all and just including a copy of password-strength-meter.js and an editted user-profile.js in all page headers using add_action(‘wp_head’, ‘my_add_styles_and_scripts_function’).

    You can see it in action on https://marcopololand.sunriseweb.ca/manage-reservations/ – just click on “Please REGISTER by clicking here.”.

    Here is the editted user-profile.js code that is specific to my implementation:

    (function(swra){
  function swrb(){
    var e=swra("#pwd1").val(),d=swra("#user_name").val(),c=swra("#pwd2").val(),f;
    swra("#swr-pass-strength-result").removeClass("short bad good strong");
    if(!e){swra("#swr-pass-strength-result").html("Strength indicator");return}
    f=passwordStrength(e,d,c);
    switch(f){
      case 2:swra("#swr-pass-strength-result").addClass("bad").html("Weak");
      break;
      case 3:swra("#swr-pass-strength-result").addClass("good").html("Medium");
      break;
      case 4:swra("#swr-pass-strength-result").addClass("strong").html("Strong");
      break;
      case 5:swra("#swr-pass-strength-result").addClass("short").html("Mismatch");
      break;
      default:swra("#swr-pass-strength-result").addClass("short").html("Very weak")
    }
  }
  swra(document).ready(function(){
    swra("#pwd1").val("").keyup(swrb);
    swra("#pwd2").val("").keyup(swrb);
  })
})(jQuery);

    I changed the “a” and “b” function names to “swra” and “swrb”, changed the “#pass-strength-result” ID to “#swr-pass-strength-result” and replaced the object/array values for message display with the literal text (preferrable to implement with object/arrays though).

    What did you modify in your custom user-profile.js file? I’m getting some scripting errors calling to pwsL10n. Otherwise this works perfectly, thanks sunriseweb!

    EDIT: It helps to read more carefully. Duh.

    You’re welcome.

    Noticed that my previous example link is not valid – now you can see it in action at https://marcopololand.ca/manage-reservations/ – just click on “Please REGISTER by clicking here.”.

    very good! thanks sunriseweb, works very well.

    S Kumar I S

    (@sandeepblygmailcom)

    HI Sunrise,

    I created profile exactly like wp registration page and tried to add password strength meter js exactly like how u explained above its not working for me, could you please spot out what i might have left

    sunriseweb

    (@sunriseweb)

    Sandeep – any other info like error messages, output, sample link, code, etc.? It’s pretty hard to guess what might be the problem with no info.

    S Kumar I S

    (@sandeepblygmailcom)

    Hi Sunrise,
    Thanks for your kind reply, I created custom registration form which is identical to normal registration but am having additional functionalities, I’m registering a user meanwhile creating a custom post
    so I went for custom registration form using wp_create_user() and wp_insert_post() now I just called above js with same fields, there is no error but nothing seems to be working, it just submits without any error,
    it creates user in user table and creates a post under custom post type.

    I wanted to make exact replica of your registration form
    https://marcopololand.ca/manage-reservations/ registration
    with create custom post under custom post type. Could you please advise me to develop a plugin like your form with my features.

    Thanks a lot with anticipation. ??

    S Kumar I S

    (@sandeepblygmailcom)

    One more thing I’m creating this for MU environment with two different registration forms one for super user and other for guest user with above mentioned functionalities. Please guide me to develop this

    sunriseweb

    (@sunriseweb)

    Send me a link to your page and I’ll have a look.

    S Kumar I S

    (@sandeepblygmailcom)

    oh sorry! its in my local system. You want me to brief in depth about my requirement.

    sunriseweb

    (@sunriseweb)

    Maybe you can post your code here?

    Hello sunriseweb , I saw your Sites Registration form. It looks great!
    Did you write the entire registration block or used any plugins? I like how it does not redirect (uses jquery to hide the form?). is it posible to share the user-profile.js and how to use it? Thanks

    Thanks davit_ .

    The registration block is custom code based on snippets I collected from a couple of other sites that I’d have to look up again. At one point I hacked the core code too – but I’m pretty sure I removed this since it was such a bad idea.

    Pop me off an email to [email protected] and I’ll send you the code.

    You may also want to check this out:
    https://digwp.com/2010/12/login-register-password-code/

    It looks pretty good.

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘WP Password Strength Meter’ is closed to new replies.