Changeset 59046

Timestamp:

09/18/2024 12:12:52 AM (3 months 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.`
         );
     } );