WordPress.org

Ready to get started?Download WordPress

Forums

WP Password Strength Meter (15 posts)

  1. FutureHasNoBounds
    Member
    Posted 3 years ago #

    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;
    }
  2. sunriseweb
    Member
    Posted 3 years 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.".

  3. sunriseweb
    Member
    Posted 3 years 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).

  4. haggismac
    Member
    Posted 2 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.

  5. sunriseweb
    Member
    Posted 2 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.".

  6. Fask
    Member
    Posted 2 years ago #

    very good! thanks sunriseweb, works very well.

  7. sandeep.bly@gmail.com
    Member
    Posted 2 years 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

  8. sunriseweb
    Member
    Posted 2 years 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.

  9. sandeep.bly@gmail.com
    Member
    Posted 2 years 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. ;)

  10. sandeep.bly@gmail.com
    Member
    Posted 2 years 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

  11. sunriseweb
    Member
    Posted 2 years ago #

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

  12. sandeep.bly@gmail.com
    Member
    Posted 2 years ago #

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

  13. sunriseweb
    Member
    Posted 2 years ago #

    Maybe you can post your code here?

  14. davit_
    Member
    Posted 2 years 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

  15. sunriseweb
    Member
    Posted 2 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic