$pass1Wrap,
$pass1,
$pass1Text,
-
+ $pass1Label,
$pass2,
-
$weakRow,
$weakCheckbox,
-
$toggleButton,
$submitButtons,
$submitButton,
- currentPass;
+ currentPass,
+ inputEvent;
+
+ /*
+ * Use feature detection to determine whether password inputs should use
+ * the `keyup` or `input` event. Input is preferred but lacks support
+ * in legacy browsers.
+ */
+ if ( 'oninput' in document.createElement( 'input' ) ) {
+ inputEvent = 'input';
+ } else {
+ inputEvent = 'keyup';
+ }
function generatePassword() {
if ( typeof zxcvbn !== 'function' ) {
setTimeout( generatePassword, 50 );
- } else {
+ return;
+ } else if ( ! $pass1.val() ) {
+ // zxcvbn loaded before user entered password.
$pass1.val( $pass1.data( 'pw' ) );
$pass1.trigger( 'pwupdate' );
- if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
- $pass1Wrap.addClass( 'show-password' );
- } else {
- $toggleButton.trigger( 'click' );
- }
+ showOrHideWeakPasswordCheckbox();
}
+ else {
+ // zxcvbn loaded after the user entered password, check strength.
+ check_pass_strength();
+ showOrHideWeakPasswordCheckbox();
+ }
+
+ if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
+ $pass1Wrap.addClass( 'show-password' );
+ } else {
+ $toggleButton.trigger( 'click' );
+ }
+
+ // Once zxcvbn loads, passwords strength is known.
+ $( '#pw-weak-text-label' ).html( userProfileL10n.warnWeak );
}
function bindPass1() {
- var passStrength = $('#pass-strength-result')[0];
-
currentPass = $pass1.val();
$pass1Wrap = $pass1.parent();
.addClass( $pass1[0].className )
.data( 'pw', $pass1.data( 'pw' ) )
.val( $pass1.val() )
- .on( 'keyup', function () {
+ .on( inputEvent, function () {
if ( $pass1Text.val() === currentPass ) {
return;
}
generatePassword();
}
- $pass1.on( 'keyup pwupdate', function () {
+ $pass1.on( inputEvent + ' pwupdate', function () {
if ( $pass1.val() === currentPass ) {
return;
}
$pass1Text.val( currentPass );
}
$pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
-
- if ( passStrength.className ) {
- $pass1.add( $pass1Text ).addClass( passStrength.className );
- if ( 'short' === passStrength.className || 'bad' === passStrength.className ) {
- if ( ! $weakCheckbox.prop( 'checked' ) ) {
- $submitButtons.prop( 'disabled', true );
- }
- $weakRow.show();
- } else {
- $submitButtons.prop( 'disabled', false );
- $weakRow.hide();
- }
- }
+ showOrHideWeakPasswordCheckbox();
} );
}
+ function resetToggle() {
+ $toggleButton
+ .data( 'toggle', 0 )
+ .attr({
+ 'aria-label': userProfileL10n.ariaHide
+ })
+ .find( '.text' )
+ .text( userProfileL10n.hide )
+ .end()
+ .find( '.dashicons' )
+ .removeClass( 'dashicons-visibility' )
+ .addClass( 'dashicons-hidden' );
+
+ $pass1Text.focus();
+
+ $pass1Label.attr( 'for', 'pass1-text' );
+ }
+
function bindToggleButton() {
$toggleButton = $pass1Row.find('.wp-hide-pw');
$toggleButton.show().on( 'click', function () {
if ( 1 === parseInt( $toggleButton.data( 'toggle' ), 10 ) ) {
$pass1Wrap.addClass( 'show-password' );
- $toggleButton
- .data( 'toggle', 0 )
- .attr({
- 'aria-label': userProfileL10n.ariaHide
- })
- .find( '.text' )
- .text( userProfileL10n.hide )
- .end()
- .find( '.dashicons' )
- .removeClass('dashicons-visibility')
- .addClass('dashicons-hidden');
- $pass1Text.focus();
+ resetToggle();
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
$pass1Text[0].setSelectionRange( 0, 100 );
$pass1.focus();
+ $pass1Label.attr( 'for', 'pass1' );
+
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
$pass1[0].setSelectionRange( 0, 100 );
}
$cancelButton;
$pass1Row = $('.user-pass1-wrap');
+ $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
+
// hide this
$('.user-pass2-wrap').hide();
* This fixes the issue by copying any changes from the hidden
* pass2 field to the pass1 field, then running check_pass_strength.
*/
- $pass2 = $('#pass2').on( 'keyup', function () {
+ $pass2 = $('#pass2').on( inputEvent, function () {
if ( $pass2.val().length > 0 ) {
$pass1.val( $pass2.val() );
$pass2.val('');
}
} );
- $passwordWrapper = $pass1Row.find('.wp-pwd').hide();
+ // Disable hidden inputs to prevent autofill and submission.
+ if ( $pass1.is( ':hidden' ) ) {
+ $pass1.prop( 'disabled', true );
+ $pass2.prop( 'disabled', true );
+ $pass1Text.prop( 'disabled', true );
+ }
+
+ $passwordWrapper = $pass1Row.find( '.wp-pwd' );
+ $generateButton = $pass1Row.find( 'button.wp-generate-pw' );
bindToggleButton();
- $generateButton = $pass1Row.find( 'button.wp-generate-pw' ).show();
+ if ( $generateButton.length ) {
+ $passwordWrapper.hide();
+ }
+
+ $generateButton.show();
$generateButton.on( 'click', function () {
updateLock = true;
$generateButton.hide();
$passwordWrapper.show();
+ // Enable the inputs when showing.
+ $pass1.attr( 'disabled', false );
+ $pass2.attr( 'disabled', false );
+ $pass1Text.attr( 'disabled', false );
+
if ( $pass1Text.val().length === 0 ) {
generatePassword();
}
$cancelButton.on( 'click', function () {
updateLock = false;
+ // Clear any entered password.
+ $pass1Text.val( '' );
+
+ // Generate a new password.
+ wp.ajax.post( 'generate-password' )
+ .done( function( data ) {
+ $pass1.data( 'pw', data );
+ } );
+
$generateButton.show();
$passwordWrapper.hide();
+
+ $weakRow.hide( 0, function () {
+ $weakCheckbox.removeProp( 'checked' );
+ } );
+
+ // Disable the inputs when hiding to prevent autofill and submission.
+ $pass1.prop( 'disabled', true );
+ $pass2.prop( 'disabled', true );
+ $pass1Text.prop( 'disabled', true );
+
+ resetToggle();
+
+ // Clear password field to prevent update
+ $pass1.val( '' ).trigger( 'pwupdate' );
+ $submitButtons.prop( 'disabled', false );
} );
$pass1Row.closest('form').on( 'submit', function () {
updateLock = false;
+ $pass1.prop( 'disabled', false );
+ $pass2.prop( 'disabled', false );
$pass2.val( $pass1.val() );
$pass1Wrap.removeClass( 'show-password' );
});
strength = wp.passwordStrength.meter( pass1, wp.passwordStrength.userInputBlacklist(), pass1 );
switch ( strength ) {
+ case -1:
+ $( '#pass-strength-result' ).addClass( 'bad' ).html( pwsL10n.unknown );
+ break;
case 2:
$('#pass-strength-result').addClass('bad').html( pwsL10n.bad );
break;
}
}
+ function showOrHideWeakPasswordCheckbox() {
+ var passStrength = $('#pass-strength-result')[0];
+
+ if ( passStrength.className ) {
+ $pass1.add( $pass1Text ).addClass( passStrength.className );
+ if ( 'short' === passStrength.className || 'bad' === passStrength.className ) {
+ if ( ! $weakCheckbox.prop( 'checked' ) ) {
+ $submitButtons.prop( 'disabled', true );
+ }
+ $weakRow.show();
+ } else {
+ $submitButtons.prop( 'disabled', false );
+ $weakRow.hide();
+ }
+ }
+ }
+
$(document).ready( function() {
var $colorpicker, $stylesheet, user_id, current_user_id,
select = $( '#display_name' );
- $('#pass1').val('').on( 'keyup pwupdate', check_pass_strength );
+ $('#pass1').val('').on( inputEvent + ' pwupdate', check_pass_strength );
$('#pass-strength-result').show();
$('.color-palette').click( function() {
$(this).siblings('input[name="admin_color"]').prop('checked', true);
scripts.mit.edu / autoinstalls / wordpress.git / blobdiff