Users: improve password generation feature.
On the user edit screen improve handling and clarify language: rename the "Generate Password" and "Show password" buttons to "Set New Password". Clicking it always generates a password. Also: improve inline code comments and descriptions. Props afercia, bookdude13, michaelarestad, pento. Fixes #42852. git-svn-id: https://develop.svn.wordpress.org/trunk@49248 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
parent
6537dacf41
commit
b07e0b2cfa
@ -14,27 +14,30 @@
|
||||
$toggleButton,
|
||||
$submitButtons,
|
||||
$submitButton,
|
||||
currentPass;
|
||||
currentPass,
|
||||
$passwordWrapper;
|
||||
|
||||
function generatePassword() {
|
||||
if ( typeof zxcvbn !== 'function' ) {
|
||||
setTimeout( generatePassword, 50 );
|
||||
return;
|
||||
} else if ( ! $pass1.val() ) {
|
||||
// zxcvbn loaded before user entered password.
|
||||
} else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) {
|
||||
// zxcvbn loaded before user entered password, or generating new password.
|
||||
$pass1.val( $pass1.data( 'pw' ) );
|
||||
$pass1.trigger( 'pwupdate' );
|
||||
showOrHideWeakPasswordCheckbox();
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
// zxcvbn loaded after the user entered password, check strength.
|
||||
check_pass_strength();
|
||||
showOrHideWeakPasswordCheckbox();
|
||||
}
|
||||
|
||||
// Install screen.
|
||||
if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
|
||||
// Show the password not masked if admin_password hasn't been posted yet.
|
||||
$pass1.attr( 'type', 'text' );
|
||||
} else {
|
||||
// Otherwise, mask the password.
|
||||
$toggleButton.trigger( 'click' );
|
||||
}
|
||||
|
||||
@ -56,6 +59,7 @@
|
||||
|
||||
currentPass = $pass1.val();
|
||||
|
||||
// Refresh password strength area.
|
||||
$pass1.removeClass( 'short bad good strong' );
|
||||
showOrHideWeakPasswordCheckbox();
|
||||
} );
|
||||
@ -84,18 +88,11 @@
|
||||
$pass1.attr( 'type', 'password' );
|
||||
resetToggle( true );
|
||||
}
|
||||
|
||||
$pass1.focus();
|
||||
|
||||
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
|
||||
$pass1[0].setSelectionRange( 0, 100 );
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function bindPasswordForm() {
|
||||
var $passwordWrapper,
|
||||
$generateButton,
|
||||
var $generateButton,
|
||||
$cancelButton;
|
||||
|
||||
$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
|
||||
@ -123,7 +120,7 @@
|
||||
$pass1 = $( '#user_pass' );
|
||||
}
|
||||
|
||||
/**
|
||||
/*
|
||||
* Fix a LastPass mismatch issue, LastPass only changes pass2.
|
||||
*
|
||||
* This fixes the issue by copying any changes from the hidden
|
||||
@ -149,57 +146,59 @@
|
||||
|
||||
bindToggleButton();
|
||||
|
||||
if ( $generateButton.length ) {
|
||||
$passwordWrapper.hide();
|
||||
}
|
||||
// Generate the first password and cache it, but don't set it yet.
|
||||
wp.ajax.post( 'generate-password' )
|
||||
.done( function( data ) {
|
||||
// Cache password.
|
||||
$pass1.data( 'pw', data );
|
||||
} );
|
||||
|
||||
$generateButton.show();
|
||||
$generateButton.on( 'click', function () {
|
||||
updateLock = true;
|
||||
|
||||
$generateButton.hide();
|
||||
$passwordWrapper.show();
|
||||
// Make sure the password fields are shown.
|
||||
$generateButton.attr( 'aria-expanded', 'true' );
|
||||
$passwordWrapper
|
||||
.show()
|
||||
.addClass( 'is-open' );
|
||||
|
||||
// Enable the inputs when showing.
|
||||
$pass1.attr( 'disabled', false );
|
||||
$pass2.attr( 'disabled', false );
|
||||
|
||||
if ( $pass1.val().length === 0 ) {
|
||||
// Set the password to the generated value.
|
||||
generatePassword();
|
||||
}
|
||||
|
||||
// Show generated password in plaintext by default.
|
||||
resetToggle ( false );
|
||||
|
||||
// Generate the next password and cache.
|
||||
wp.ajax.post( 'generate-password' )
|
||||
.done( function( data ) {
|
||||
$pass1.data( 'pw', data );
|
||||
} );
|
||||
} );
|
||||
|
||||
$cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
|
||||
$cancelButton.on( 'click', function () {
|
||||
updateLock = false;
|
||||
|
||||
// Clear any entered password.
|
||||
$pass1.val( '' );
|
||||
|
||||
// Generate a new password.
|
||||
wp.ajax.post( 'generate-password' )
|
||||
.done( function( data ) {
|
||||
$pass1.data( 'pw', data );
|
||||
} );
|
||||
|
||||
$generateButton.show().focus();
|
||||
$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 );
|
||||
|
||||
// Clear password field and update the UI.
|
||||
$pass1.val( '' ).trigger( 'pwupdate' );
|
||||
resetToggle( false );
|
||||
|
||||
if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
|
||||
// Clear password field to prevent update.
|
||||
$pass1.val( '' ).trigger( 'pwupdate' );
|
||||
// Hide password controls.
|
||||
$passwordWrapper
|
||||
.hide()
|
||||
.removeClass( 'is-open' );
|
||||
|
||||
// Stop an empty password from being submitted as a change.
|
||||
$submitButtons.prop( 'disabled', false );
|
||||
}
|
||||
} );
|
||||
|
||||
$pass1Row.closest( 'form' ).on( 'submit', function () {
|
||||
@ -399,7 +398,7 @@
|
||||
|
||||
window.generatePassword = generatePassword;
|
||||
|
||||
/* Warn the user if password was generated but not saved */
|
||||
// Warn the user if password was generated but not saved.
|
||||
$( window ).on( 'beforeunload', function () {
|
||||
if ( true === updateLock ) {
|
||||
return __( 'Your new password has not been saved.' );
|
||||
|
@ -533,6 +533,14 @@ fieldset label,
|
||||
margin: 0 0 1em;
|
||||
}
|
||||
|
||||
.wp-generate-pw {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.wp-pwd {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#misc-publishing-actions label {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
@ -632,7 +632,7 @@ endif;
|
||||
<th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
|
||||
<td>
|
||||
<input class="hidden" value=" " /><!-- #24364 workaround -->
|
||||
<button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate Password' ); ?></button>
|
||||
<button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
|
||||
<div class="wp-pwd hide-if-js">
|
||||
<span class="password-input-wrapper">
|
||||
<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
|
||||
@ -641,7 +641,7 @@ endif;
|
||||
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
</button>
|
||||
<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
|
||||
<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel' ); ?>">
|
||||
<span class="dashicons dashicons-no" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Cancel' ); ?></span>
|
||||
</button>
|
||||
@ -652,8 +652,12 @@ endif;
|
||||
<tr class="user-pass2-wrap hide-if-js">
|
||||
<th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
|
||||
<td>
|
||||
<input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
|
||||
<p class="description"><?php _e( 'Type your new password again.' ); ?></p>
|
||||
<input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" aria-describedby="pass2-desc" />
|
||||
<?php if ( IS_PROFILE_PAGE ) : ?>
|
||||
<p class="description" id="pass2-desc"><?php _e( 'Type your new password again.' ); ?></p>
|
||||
<?php else : ?>
|
||||
<p class="description" id="pass2-desc"><?php _e( 'Type the new password again.' ); ?></p>
|
||||
<?php endif; ?>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="pw-weak">
|
||||
@ -661,7 +665,7 @@ endif;
|
||||
<td>
|
||||
<label>
|
||||
<input type="checkbox" name="pw_weak" class="pw-checkbox" />
|
||||
<span id="pw-weak-text-label"><?php _e( 'Confirm use of potentially weak password' ); ?></span>
|
||||
<span id="pw-weak-text-label"><?php _e( 'Confirm use of weak password' ); ?></span>
|
||||
</label>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -560,8 +560,8 @@ if ( current_user_can( 'create_users' ) ) {
|
||||
</th>
|
||||
<td>
|
||||
<input class="hidden" value=" " /><!-- #24364 workaround -->
|
||||
<button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
|
||||
<div class="wp-pwd hide-if-js">
|
||||
<button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate password' ); ?></button>
|
||||
<div class="wp-pwd">
|
||||
<?php $initial_password = wp_generate_password( 24 ); ?>
|
||||
<span class="password-input-wrapper">
|
||||
<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
|
||||
@ -570,10 +570,6 @@ if ( current_user_can( 'create_users' ) ) {
|
||||
<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Hide' ); ?></span>
|
||||
</button>
|
||||
<button type="button" class="button wp-cancel-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Cancel password change' ); ?>">
|
||||
<span class="dashicons dashicons-no" aria-hidden="true"></span>
|
||||
<span class="text"><?php _e( 'Cancel' ); ?></span>
|
||||
</button>
|
||||
<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
|
||||
</div>
|
||||
</td>
|
||||
@ -581,7 +577,8 @@ if ( current_user_can( 'create_users' ) ) {
|
||||
<tr class="form-field form-required user-pass2-wrap hide-if-js">
|
||||
<th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php _e( '(required)' ); ?></span></label></th>
|
||||
<td>
|
||||
<input name="pass2" type="password" id="pass2" autocomplete="off" />
|
||||
<input name="pass2" type="password" id="pass2" autocomplete="off" aria-describedby="pass2-desc" />
|
||||
<p class="description" id="pass2-desc"><?php _e( 'Type the password again.' ); ?></p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="pw-weak">
|
||||
|
Loading…
Reference in New Issue
Block a user