I have enqueued wordpress default password strength meter but don’t know how to use it. Currently the codex page doesn’t give any link to its documentation. Does any one have any links to its demo page or documentation?
Resolved
HTML is quite simple. There will be two password box. One div to show the password result and a hidden filed to get the username. And off course you have enqueue jquery and wp_enqueue_script('password-strength-meter'); before the jQuery code. Here is the jQuery code to make it work:
jQuery(document).ready(function(){
if(jQuery("#pass-strength-result").length > 0){
jQuery("#pass1").bind("keyup", function(){
var pass1 = jQuery("#pass1").val();
var pass2 = jQuery("#pass2").val();
var username = jQuery("#username").val();
var strength = passwordStrength(pass1, username, pass2);
updateStrength(strength);
});
jQuery("#pass2").bind("keyup", function(){
var pass1 = jQuery("#pass1").val();
var pass2 = jQuery("#pass2").val();
var username = jQuery("#username").val();
var strength = passwordStrength(pass1, username, pass2);
updateStrength(strength);
});
}
});
function updateStrength(strength){
var status = new Array('short', 'bad', 'good', 'strong', 'mismatch');
var dom = jQuery("#pass-strength-result");
switch(strength){
case 1:
dom.removeClass().addClass(status[0]).text('Too Short');
break;
case 2:
dom.removeClass().addClass(status[1]).text("Bad Password");
break;
case 3:
dom.removeClass().addClass(status[2]).text("Good Password");
break;
case 4:
dom.removeClass().addClass(status[3]).text("Strong Password");
break;
case 5:
dom.removeClass().addClass(status[4]).text("Mismatch");
break;
default:
//alert('something is wrong!');
}
}
Thanks to @krembo99 to send me in right direction. Here is the source code for the strength meter if anyone need to see it. Its inside wp-admin/js/password-strength-meter.dev.js.
Good Question 🙂
I can not exactly help you with documentation – but I can give a little background on how it works .
wordpress uses a jQuery script called password-strength-meter.js (found in the wp-admin/js) directory .
It is actually only a function (called passwordStrength(f,i,d) where f = password1, i = user_login and d = password2. ) that returns the “stregth” (or mismatch) as integer. to call and use that function, you need a second javascript (for example – user-profile.js found in the same directory – but also specific to the edit-profile page)
In shorts – you can copy the password-strength-meter.js and use it as a “jQuery plugin” of sorts – but IMHO – you will need to write another javascript to use it – depending on what exactly you want to achieve – how , and also where .
(you can take the user-profile.js as reference , copy and modify for your needs)
If no one else gives you a better answer (and I hope someone will) It might be the case to just use some other Jquery password strength plugin that is maybe easier to implement and better documented.
If you choose that option – You can find a list here :
http://www.webresourcesdepot.com/10-password-strength-meter-scripts-for-a-better-registration-interface/
http://www.articlediary.com/article/10-password-strength-meter-scripts-to-check-password-strength-178.html
you can also find a simple nice tutorial here that might let you better understand the process:
http://net.tutsplus.com/tutorials/javascript-ajax/build-a-simple-password-strength-checker/