WP Password Strength Meter

(@futurehasnobounds)

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)

sunriseweb
(@sunriseweb)

13 years, 2 months ago

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 http://marcopololand.sunriseweb.ca/manage-reservations/ – just click on “Please REGISTER by clicking here.”.
sunriseweb
(@sunriseweb)

13 years, 2 months ago
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).
haggismac
(@haggismac)

13 years ago

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.

sunriseweb
(@sunriseweb)

13 years ago

You’re welcome.

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

Fask
(@fask)

12 years, 10 months ago

very good! thanks sunriseweb, works very well.

S Kumar I S
(@sandeepblygmailcom)

12 years, 5 months ago

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)

12 years, 5 months ago

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)

12 years, 5 months ago

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
http://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)

12 years, 5 months ago

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)

12 years, 5 months ago

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

S Kumar I S
(@sandeepblygmailcom)

12 years, 5 months ago

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

sunriseweb
(@sunriseweb)

12 years, 5 months ago

Maybe you can post your code here?

davit_
(@davit_)

12 years, 3 months ago

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

sunriseweb
(@sunriseweb)

12 years, 3 months ago

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 brad@sunriseweb.ca and I’ll send you the code.

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

It looks pretty good.