Changeset 59046

Timestamp:

09/18/2024 12:12:52 AM (2 years ago)

Author:

jeremyfelt

Message:

Application Passwords: Add copy button when adding new password.

Props circlecube, dhruvang21, ironprogrammer, desrosj.
Fixes #62019.

Location:

trunk

Files:

• src/js/_enqueues/admin/user-profile.js (modified) (3 diffs)
• src/wp-admin/css/common.css (modified) (1 diff)
• src/wp-admin/css/forms.css (modified) (1 diff)
• src/wp-admin/user-edit.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)
• tests/e2e/specs/profile/applications-passwords.test.js (modified) (1 diff)

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

@@ -3 +3 @@
  */
 
-/* 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,
@@ -19 +20 @@
                 $form,
                 originalFormContent,
-                $passwordWrapper;
+                $passwordWrapper,
+                successTimeout;
 
         function generatePassword() {
@@ -347 +349 @@
         }
 
+        // 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,

trunk/src/wp-admin/css/common.css

@@ -917 +917 @@
 }
 
+.application-password-display .success {
+    color: #007017;
+    margin-left: 0.5rem;
+}
+
 /*------------------------------------------------------------------------------
   3.0 - Actions

trunk/src/wp-admin/css/forms.css

@@ -1003 +1003 @@
 
 .application-password-display input.code {
+        margin-bottom: 6px;
         width: 19em;
 }

trunk/src/wp-admin/user-edit.php

@@ -985 +985 @@
                                 </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>

trunk/src/wp-includes/script-loader.php

@@ -1214 +1214 @@
         $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;

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

@@ -32 +32 @@
                         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.`
                 );
         } );