Application password UX improvements

src/js/_enqueues/admin/auth-app.js

@@ -2,19 +2,50 @@
  * @output wp-admin/js/auth-app.js
  */
 
-/* global authApp */
+/* global authApp, ClipboardJS */
 
 ( function( $, authApp ) {
 	var $appNameField = $( '#app_name' ),
 		$approveBtn = $( '#approve' ),
 		$rejectBtn = $( '#reject' ),
 		$form = $appNameField.closest( 'form' ),
+		clipboard = new ClipboardJS( '.application-password-display .copy-button' ),
 		context = {
 			userLogin: authApp.user_login,
-			successUrl: authApp.success,
-			rejectUrl: authApp.reject
+			successUrl: authApp.success
 		};
 
+	// Bound at module scope so it covers both the no-JS server-rendered button and the one inserted after the AJAX request.
+	clipboard.on( 'success', function( e ) {
+		var $successElement = $( '.success', $( e.trigger ).parent() );
+
+		e.clearSelection();
+		$successElement.removeClass( 'hidden' );
+
+		setTimeout( function() {
+			$successElement.addClass( 'hidden' );
+		}, 3000 );
+
+		wp.a11y.speak( wp.i18n.__( 'Application password has been copied to your clipboard.' ) );
+	} );
+
+	// If redirecting to an external site, gate the approve button behind the confirmation checkbox.
+	if ( authApp.successHost ) {
+		var $checkbox = $( 'input[name="confirm_external_redirect"]' );
+
+		// Start the approve button in a disabled state.
+		$approveBtn.prop( 'aria-disabled', true ).addClass( 'disabled' );
+
+		// Toggle the approve button when the checkbox state changes.
+		$checkbox.on( 'change', function() {
+			if ( $checkbox.prop( 'checked' ) ) {
+				$approveBtn.removeProp( 'aria-disabled' ).removeClass( 'disabled' );
+			} else {
+				$approveBtn.prop( 'aria-disabled', true ).addClass( 'disabled' );
+			}
+		} );
+	}
+
 	$approveBtn.on( 'click', function( e ) {
 		var name = $appNameField.val(),
 			appId = $( 'input[name="app_id"]', $form ).val();
@@ -25,8 +56,8 @@
 			return;
 		}
 
-		if ( 0 === name.length ) {
-			$appNameField.trigger( 'focus' );
+		if ( ! $form[ 0 ].checkValidity() ) {
+			$form[ 0 ].reportValidity();
 			return;
 		}
 
@@ -44,12 +75,12 @@
 		 * Filters the request data used to Authorize an Application Password request.
 		 *
 		 * @since 5.6.0
+		 * @since x.y.z A reject URL is no longer supported or used.
 		 *
 		 * @param {Object} request            The request data.
 		 * @param {Object} context            Context about the Application Password request.
 		 * @param {string} context.userLogin  The user's login username.
 		 * @param {string} context.successUrl The URL the user will be redirected to after approving the request.
-		 * @param {string} context.rejectUrl  The URL the user will be redirected to after rejecting the request.
 		 */
 		request = wp.hooks.applyFilters( 'wp_application_passwords_approve_app_request', request, context );
 
@@ -89,17 +120,25 @@
 					/* translators: %s: Application name. */
 					'<label for="new-application-password-value">' + wp.i18n.__( 'Your new password for %s is:' ) + '</label>',
 					'<strong></strong>'
-				) + ' <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="" />';
+				);
 				$notice = $( '<div></div>' )
 					.attr( 'role', 'alert' )
 					.attr( 'tabindex', -1 )
 					.addClass( 'notice notice-success notice-alt' )
 					.append( $( '<p></p>' ).addClass( 'application-password-display' ).html( message ) )
+					.append(
+						$( '<p></p>' )
+							.addClass( 'application-password-display' )
+							.append( '<input id="new-application-password-value" type="text" class="code" readonly="readonly" value="" />' )
+							.append( ' <button type="button" class="button copy-button">' + wp.i18n.__( 'Copy' ) + '</button>' )
+							.append( '<span class="success hidden" aria-hidden="true"> ' + wp.i18n.__( 'Copied!' ) + '</span>' )
+					)
 					.append( '<p>' + wp.i18n.__( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ) + '</p>' );
 
 				// We're using .text() to write the variables to avoid any chance of XSS.
 				$( 'strong', $notice ).text( response.name );
 				$( 'input', $notice ).val( response.password );
+				$( '.copy-button', $notice ).attr( 'data-clipboard-text', response.password );
 
 				$form.replaceWith( $notice );
 				$notice.trigger( 'focus' );
@@ -147,16 +186,22 @@
 		 * Fires when an Authorize Application Password request has been rejected by the user.
 		 *
 		 * @since 5.6.0
+		 * @since x.y.z A reject URL is no longer supported or used.
 		 *
 		 * @param {Object} context            Context about the Application Password request.
 		 * @param {string} context.userLogin  The user's login username.
 		 * @param {string} context.successUrl The URL the user will be redirected to after approving the request.
-		 * @param {string} context.rejectUrl  The URL the user will be redirected to after rejecting the request.
 		 */
 		wp.hooks.doAction( 'wp_application_passwords_reject_app', context );
 
-		// @todo: Make a better way to do this so it feels like less of a semi-open redirect.
-		window.location = authApp.reject;
+		var $notice = $( '<div></div>' )
+			.attr( 'role', 'alert' )
+			.attr( 'tabindex', -1 )
+			.addClass( 'notice notice-info' )
+			.append( $( '<p></p>' ).text( wp.i18n.__( 'You have not approved this connection. No data has been shared with the application.' ) ) );
+
+		$form.replaceWith( $notice );
+		$notice.trigger( 'focus' );
 	} );
 
 	$form.on( 'submit', function( e ) {