About page: Cache our zxcvbn calls and limit the variation of the animation.

Merges [25884] to the 3.7 branch.

Diff is mostly whitespace.

props jorbin, azaozz.
fixes #25603.

Built from https://develop.svn.wordpress.org/branches/3.7@25887


git-svn-id: http://core.svn.wordpress.org/branches/3.7@25799 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Andrew Nacin 2013-10-23 19:55:09 +00:00
parent 1ba8a7f373
commit c7e5a7da23
2 changed files with 72 additions and 58 deletions

View File

@ -1,66 +1,80 @@
(function($){ (function($){
var password = 'Gosh, WordPress is grand.', var password = 'Gosh, WordPress is grand.',
$input = $('#pass'), $input = $('#pass'),
shouldAnimate = true, shouldAnimate = true,
indicatorString = $('#pass-strength-result').text(); timesForAnimation = [280, 300, 305, 310, 315, 325, 330, 345, 360, 370, 380, 400, 450, 500, 600],
resultsCache = {},
indicatorString = $('#pass-strength-result').text();
function updateResult(){ function updateResult(){
var strength = wp.passwordStrength.meter($input.val(), [], $input.val()); var strength;
$('#pass-strength-result').removeClass('short bad good strong'); if ( typeof( resultsCache[ $input.val() ]) === 'undefined') {
switch ( strength ) { strength = wp.passwordStrength.meter($input.val(), [], $input.val());
case 2: resultsCache[ $input.val() ] = strength;
$('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] ); } else {
break; strength = resultsCache[ $input.val() ];
case 3: }
$('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
break;
case 4:
$('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
break;
default:
$('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
}
}
function resetMeter(){
$input.val('');
$('#pass-strength-result').text(indicatorString);
$('#pass-strength-result').removeClass('short bad good strong');
}
function animate(){ $('#pass-strength-result').removeClass('short bad good strong');
if (shouldAnimate === false) switch ( strength ) {
return; case 2:
if ($input.val().length < password.length){ $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
$input.val( password.substr(0, $input.val().length + 1) ); break;
updateResult(); case 3:
} else { $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
resetMeter(); break;
} case 4:
// Look like real typing by changing the speed new letters are added each time $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) ); break;
} default:
// $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
function begin(){ }
// we async load zxcvbn, so we need to make sure it's loaded before starting }
if (typeof(zxcvbn) !== 'undefined') function resetMeter(){
animate(); $input.val('');
else $('#pass-strength-result').text(indicatorString);
setTimeout(begin,800); $('#pass-strength-result').removeClass('short bad good strong');
} }
// Turn off the animation on focus function animate(){
$input.on('focus', function(){ if (shouldAnimate === false)
shouldAnimate = false; return;
resetMeter(); if ($input.val().length < password.length){
}); $input.val( password.substr(0, $input.val().length + 1) );
updateResult();
// Act like a normal password strength meter // Look like real typing by changing the speed new letters are added each time
$input.on('keyup', function(){ setTimeout( animate, ( timesForAnimation[ Math.floor( Math.random() * timesForAnimation.length ) ] ) );
updateResult(); } else {
}); resetMeter();
// Start the animation // When we reset, let's wait a bit longer than normal to start again
begin(); setTimeout(animate, 700);
}
}
function begin(){
// we async load zxcvbn, so we need to make sure it's loaded before starting
if (typeof(zxcvbn) !== 'undefined')
animate();
else
setTimeout(begin,800);
}
// Turn off the animation on focus
$input.on('focus', function(){
shouldAnimate = false;
resetMeter();
});
// Act like a normal password strength meter
$input.on('keyup', function(){
updateResult();
});
// Start the animation
begin();
})(jQuery); })(jQuery);

View File

@ -1 +1 @@
!function(a){function b(){var b=wp.passwordStrength.meter(g.val(),[],g.val());switch(a("#pass-strength-result").removeClass("short bad good strong"),b){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}function c(){g.val(""),a("#pass-strength-result").text(i),a("#pass-strength-result").removeClass("short bad good strong")}function d(){h!==!1&&(g.val().length<f.length?(g.val(f.substr(0,g.val().length+1)),b()):c(),setTimeout(d,220+Math.floor(580*Math.random())))}function e(){"undefined"!=typeof zxcvbn?d():setTimeout(e,800)}var f="Gosh, WordPress is grand.",g=a("#pass"),h=!0,i=a("#pass-strength-result").text();g.on("focus",function(){h=!1,c()}),g.on("keyup",function(){b()}),e()}(jQuery); !function(a){function b(){var b;switch("undefined"==typeof j[g.val()]?(b=wp.passwordStrength.meter(g.val(),[],g.val()),j[g.val()]=b):b=j[g.val()],a("#pass-strength-result").removeClass("short bad good strong"),b){case 2:a("#pass-strength-result").addClass("bad").html(pwsL10n.bad);break;case 3:a("#pass-strength-result").addClass("good").html(pwsL10n.good);break;case 4:a("#pass-strength-result").addClass("strong").html(pwsL10n.strong);break;default:a("#pass-strength-result").addClass("short").html(pwsL10n["short"])}}function c(){g.val(""),a("#pass-strength-result").text(k),a("#pass-strength-result").removeClass("short bad good strong")}function d(){h!==!1&&(g.val().length<f.length?(g.val(f.substr(0,g.val().length+1)),b(),setTimeout(d,i[Math.floor(Math.random()*i.length)])):(c(),setTimeout(d,700)))}function e(){"undefined"!=typeof zxcvbn?d():setTimeout(e,800)}var f="Gosh, WordPress is grand.",g=a("#pass"),h=!0,i=[280,300,305,310,315,325,330,345,360,370,380,400,450,500,600],j={},k=a("#pass-strength-result").text();g.on("focus",function(){h=!1,c()}),g.on("keyup",function(){b()}),e()}(jQuery);