Login and Registration: Improve the UX of the Reset Password screen.

Previously, it was unclear that the displayed password is only being suggested and should be saved by clicking the Reset Password button.

This adds separate Generate Password and Save Password buttons, for clarity.

Props xkon, estelaris, jaymanpandya, hedgefield, audrasjb, erichmond, magicroundabout, lukecavanagh, knutsp, tinodidriksen, nico_martin, markhowellsmead, kara.mcnair, e_baker, pixelverbieger, souri_wpaustria, megabyterose, poena, whyisjake.
Fixes #39638.
Built from https://develop.svn.wordpress.org/trunk@50153


git-svn-id: http://core.svn.wordpress.org/trunk@49832 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
Sergey Biryukov 2021-02-02 18:13:04 +00:00
parent 230c1c5c8a
commit 87f1e31871
6 changed files with 30 additions and 8 deletions

View File

@ -164,6 +164,8 @@ if ( ! empty( $_POST['action'] ) && in_array( $_POST['action'], $core_actions_po
add_action( 'wp_ajax_' . $_POST['action'], 'wp_ajax_' . str_replace( '-', '_', $_POST['action'] ), 1 );
}
add_action( 'wp_ajax_nopriv_generate-password', 'wp_ajax_nopriv_generate_password' );
add_action( 'wp_ajax_nopriv_heartbeat', 'wp_ajax_nopriv_heartbeat', 1 );
$action = ( isset( $_REQUEST['action'] ) ) ? $_REQUEST['action'] : '';

View File

@ -12,8 +12,7 @@
//
/**
* Ajax handler for the Heartbeat API in
* the no-privilege context.
* Ajax handler for the Heartbeat API in the no-privilege context.
*
* Runs when the user is not logged in.
*
@ -3976,6 +3975,15 @@ function wp_ajax_generate_password() {
wp_send_json_success( wp_generate_password( 24 ) );
}
/**
* Ajax handler for generating a password in the no-privilege context.
*
* @since 5.7.0
*/
function wp_ajax_nopriv_generate_password() {
wp_send_json_success( wp_generate_password( 24 ) );
}
/**
* Ajax handler for saving the user's WordPress.org username.
*

View File

@ -157,7 +157,7 @@
var $generateButton,
$cancelButton;
$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap, .reset-pass-submit' );
// Hide the confirm password field when JavaScript support is enabled.
$('.user-pass2-wrap').hide();
@ -461,4 +461,15 @@
}
} );
/*
* We need to generate a password as soon as the Reset Password page is loaded,
* to avoid double clicking the button to retrieve the first generated password.
* See ticket #39638.
*/
$( document ).ready( function() {
if ( $( '.reset-pass-submit' ).length ) {
$( '.reset-pass-submit button.wp-generate-pw' ).trigger( 'click' );
}
});
})(jQuery);

File diff suppressed because one or more lines are too long

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.7-alpha-50152';
$wp_version = '5.7-alpha-50153';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.

View File

@ -852,7 +852,7 @@ switch ( $action ) {
wp_enqueue_script( 'utils' );
wp_enqueue_script( 'user-profile' );
login_header( __( 'Reset Password' ), '<p class="message reset-pass">' . __( 'Enter your new password below.' ) . '</p>', $errors );
login_header( __( 'Reset Password' ), '<p class="message reset-pass">' . __( 'Enter your new password below or generate one.' ) . '</p>', $errors );
?>
<form name="resetpassform" id="resetpassform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=resetpass', 'login_post' ) ); ?>" method="post" autocomplete="off">
@ -898,8 +898,9 @@ switch ( $action ) {
?>
<input type="hidden" name="rp_key" value="<?php echo esc_attr( $rp_key ); ?>" />
<p class="submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Reset Password' ); ?>" />
<p class="submit reset-pass-submit">
<button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="true"><?php _e( 'Generate Password' ); ?></button>
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Save Password' ); ?>" />
</p>
</form>