From 77a30d9defc9903af3487e0800e3130d73065c9e Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Tue, 2 Feb 2021 18:11:26 +0000
Subject: [PATCH] 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.

git-svn-id: https://develop.svn.wordpress.org/trunk@50153 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/user-profile.js | 13 ++++++++++++-
 src/wp-admin/admin-ajax.php            |  2 ++
 src/wp-admin/includes/ajax-actions.php | 12 ++++++++++--
 src/wp-login.php                       |  7 ++++---
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/js/_enqueues/admin/user-profile.js b/src/js/_enqueues/admin/user-profile.js
index c8f8d03261..dfec0fdba2 100644
--- a/src/js/_enqueues/admin/user-profile.js
+++ b/src/js/_enqueues/admin/user-profile.js
@@ -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);
diff --git a/src/wp-admin/admin-ajax.php b/src/wp-admin/admin-ajax.php
index 30e9a414b5..087a11993d 100644
--- a/src/wp-admin/admin-ajax.php
+++ b/src/wp-admin/admin-ajax.php
@@ -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'] : '';
diff --git a/src/wp-admin/includes/ajax-actions.php b/src/wp-admin/includes/ajax-actions.php
index 06c09f6e92..6f91c3a7ea 100644
--- a/src/wp-admin/includes/ajax-actions.php
+++ b/src/wp-admin/includes/ajax-actions.php
@@ -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.
  *
diff --git a/src/wp-login.php b/src/wp-login.php
index 128e3b254c..301424f687 100644
--- a/src/wp-login.php
+++ b/src/wp-login.php
@@ -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>