sergiotarxz/Wordpress
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Users: improve password generation feature.

Browse Source 
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:
Adam Silverstein 2020-10-20 18:24:40 +00:00
parent 6537dacf41
commit b07e0b2cfa
4 changed files with 64 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
src/js/_enqueues/admin/user-profile.js
View File

@ -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 ) {
generatePassword();
}
// 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' );
$submitButtons.prop( 'disabled', false );
}
// 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.' );

8
src/wp-admin/css/forms.css
View File

@ -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;
}

14
src/wp-admin/user-edit.php
View File

@ -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>

11
src/wp-admin/user-new.php
View File

@ -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">