Add copy button when creating new application password Fix/62019

src/js/_enqueues/admin/user-profile.js

@@ -2,11 +2,12 @@
  * @output wp-admin/js/user-profile.js
  */
 
-/* global ajaxurl, pwsL10n, userProfileL10n */
+/* global ajaxurl, pwsL10n, userProfileL10n, ClipboardJS */
 (function($) {
 	var updateLock = false,
 		isSubmitting = false,
 		__ = wp.i18n.__,
+		clipboard = new ClipboardJS( '.application-password-display .copy-button' ),
 		$pass1Row,
 		$pass1,
 		$pass2,
@@ -18,7 +19,8 @@
 		currentPass,
 		$form,
 		originalFormContent,
-		$passwordWrapper;
+		$passwordWrapper,
+		successTimeout;
 
 	function generatePassword() {
 		if ( typeof zxcvbn !== 'function' ) {
@@ -346,6 +348,27 @@
 		}
 	}
 
+	// Debug information copy section.
+	clipboard.on( 'success', function( e ) {
+		var triggerElement = $( e.trigger ),
+			successElement = $( '.success', triggerElement.closest( '.application-password-display' ) );
+
+		// Clear the selection and move focus back to the trigger.
+		e.clearSelection();
+
+		// Show success visual feedback.
+		clearTimeout( successTimeout );
+		successElement.removeClass( 'hidden' );
+
+		// Hide success visual feedback after 3 seconds since last success.
+		successTimeout = setTimeout( function() {
+			successElement.addClass( 'hidden' );
+		}, 3000 );
+
+		// Handle success audible feedback.
+		wp.a11y.speak( __( 'Application password has been copied to your clipboard.' ) );
+	} );
+
 	$( function() {
 		var $colorpicker, $stylesheet, user_id, current_user_id,
 			select       = $( '#display_name' ),

src/wp-admin/css/common.css

@@ -916,6 +916,11 @@ a#remove-post-thumbnail:hover,
 	border: none;
 }
 
+.application-password-display .success {
+    color: #007017;
+    margin-left: 0.5rem;
+}
+
 /*------------------------------------------------------------------------------
   3.0 - Actions
 ------------------------------------------------------------------------------*/

src/wp-admin/css/forms.css

@@ -1002,6 +1002,7 @@ table.form-table td .updated p {
 }
 
 .application-password-display input.code {
+	margin-bottom: 6px;
 	width: 19em;
 }
 

src/wp-admin/user-edit.php

@@ -984,6 +984,8 @@
 					?>
 				</label>
 				<input id="new-application-password-value" type="text" class="code" readonly="readonly" value="{{ data.password }}" />
+				<button type="button" class="button copy-button" data-clipboard-text="{{ data.password }}"><?php _e( 'Copy' ); ?></button>
+				<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
 			</p>
 			<p><?php _e( 'Be sure to save this in a safe location. You will not be able to retrieve it.' ); ?></p>
 			<button type="button" class="notice-dismiss">

src/wp-includes/script-loader.php

@@ -1213,7 +1213,7 @@ function wp_default_scripts( $scripts ) {
 	$scripts->add( 'auth-app', "/wp-admin/js/auth-app$suffix.js", array( 'jquery', 'wp-api-request', 'wp-i18n', 'wp-hooks' ), false, 1 );
 	$scripts->set_translations( 'auth-app' );
 
-	$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter', 'wp-util' ), false, 1 );
+	$scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'clipboard', 'jquery', 'password-strength-meter', 'wp-util', 'wp-a11y' ), false, 1 );
 	$scripts->set_translations( 'user-profile' );
 	$user_id = isset( $_GET['user_id'] ) ? (int) $_GET['user_id'] : 0;
 	did_action( 'init' ) && $scripts->localize(

tests/e2e/specs/profile/applications-passwords.test.js

@@ -23,7 +23,7 @@
 		await applicationPasswords.create();
 
 		const [ app ] = await applicationPasswords.get();
 		expect( app['name']).toBe( TEST_APPLICATION_NAME );
 
 		const successMessage = page.getByRole( 'alert' );
 
@@ -31,7 +31,12 @@
 		await expect(
 			successMessage
 		).toContainText(
-			`Your new password for ${TEST_APPLICATION_NAME} is: \n\nBe sure to save this in a safe location. You will not be able to retrieve it.`
+			`Your new password for ${TEST_APPLICATION_NAME} is:`
+		);
+		await expect(
+			successMessage
+		).toContainText(
+			`Be sure to save this in a safe location. You will not be able to retrieve it.`
 		);
 	} );
 
@@ -107,7 +112,7 @@
 	}
 
 	async create(applicationName = TEST_APPLICATION_NAME) {
 		await this.admin.visitAdminPage( '/profile.php' );
 
 		const newPasswordField = this.page.getByRole( 'textbox', { name: 'New Application Password Name' } );
 		await expect( newPasswordField ).toBeVisible();