WordPress Password Strength Meter

If you want to set up front end registration on your site to use something like the WordPress Password Strength Meter, here ‘s one way to do it.  This post was initiated over a year ago in the thread http://wordpress.org/support/topic/wp-password-strength-meter?replies=15 .
I decided to put it into a plugin after a request from Mark Krasnov to add a password strength meter to his site – click here to see it in action.  However the plugin is quick and dirty (e.g. not set up to allow multiple languages), and requires some customization depending on what ID you give the User Name and password fields.  Also the password strength meter is put in using a custom hook via the add_action function and you need to put a matching do_action function in your theme where you want the password strength meter to appear (thanks to Mark Krasnov for this!).
<?php
do_action_ref_array( 'psm_register_form', array( &$template ) ); //PSM hook
?>

Original Code From Reservation System Plugin

Here’s the code.   I used “swr” to make the id’s unique where required so it wouldn’t conflict with the WP core code; it stands for SunriseWeb Reservations – because I implemented it originally in a Reservations system plugin.

php/HTML (sample)

It will depend on your implementation how you do this exactly, but of course you’ll have the full form – not just the user name and password fields – I included these because they are the only ones needed for the strenth indicator scripts.
<?php
require_once( ABSPATH . WPINC . '/registration.php' );
wp_enqueue_script('user-profile');
wp_enqueue_script('password-strength-meter');
?>

<input name="user_name" type="hidden" id="user_name" value="<?php echo $_POST['user_name']; ?>">
<input type="password" name="new_password" id="new_password" size="16" value="" autocomplete="off" /><br />
<input type="password" name="pwd2" id="pwd2" size="16" value="" autocomplete="off" />Type the password again.
<div id="swr-pass-strength-result">Strength indicator</div>

CSS (use your own colors, and styling as desired)

#swr-pass-strength-result {text-align: center; max-width: 200px; font-weight: bold; background-color:#eee;border-color:#ddd!important;}
#swr-pass-strength-result.bad {background-color:#ffb78c;border-color:#ff853c!important;}
#swr-pass-strength-result.good {background-color:#ffec8b;border-color:#fc0!important;}
#swr-pass-strength-result.short {background-color:#ffa0a0;border-color:#f04040!important;}
#swr-pass-strength-result.strong {background-color:#c3ff88;border-color:#8dff1c!important;}

 

user-profile.js

(function(swra){
  function swrb(){
    var e=swra("#new_password").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("#new_password").val("").keyup(swrb);
    swra("#pwd2").val("").keyup(swrb);
  })
})(jQuery);

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

password-strength-meter.js

function passwordStrength(f,i,d){
  var k=1,h=2,b=3,a=4,c=5,g=0,j,e;
  if((f!=d)&&d.length>0){
    return c
  }
  if(f.length<4){
    return k
  }
  if(f.toLowerCase()==i.toLowerCase()){
    return h
  }
  if(f.match(/[0-9]/)){
    g+=10
  }
  if(f.match(/[a-z]/)){
    g+=26
  }
  if(f.match(/[A-Z]/)){
    g+=26
  }
  if(f.match(/[^a-zA-Z0-9]/)){
    g+=31
  }
  j=Math.log(Math.pow(g,f.length));
  e=j/Math.LN2;
  if(e<40){
    return h
  }
  if(e<56){
    return b
  }
  return a
};

 

Subscribe to the SunriseWeb Blog

Sign up to receive email updates.