Add copy button when creating new application password

[desrosj]

After creating a new application password, it's displayed on the screen for the person to take note. However, in order to copy the password you need to highlight the whole thing before copying.

It would be nice to have a copy icon that can be clicked to easily copy the password.

I may be misremembering this, but I think there are a few instances of this functionality in core already. But the only one I could remember was on the Site Health Info tab, which has a "Copy site info to clipboard" button.

[dhruvang21]

Hi @desrosj,

I’ve worked on the new enhancement for adding the copy icon. Although I couldn’t get the copy icon, I have added a copy button instead. I’ve also created a patch and will attach it along with images showing the working functionality.

Please review the patch, and if everything looks good, I’d be happy to proceed with creating a PR for this.

Thank you!

Trac ticket: https://core.trac.wordpress.org/ticket/62019

Updating the existing patch to capitalize the button text 'copy > 'Copy' and making the text translatable.

Things are looking good so far, @circlecube, thanks!

A couple more notes:

1. We should apply these changes to wp-admin/profile.php as well. I think folks are more likely to be adding application passwords through that screen rather than while editing another user.
2. We can probably add a bit of spacing above "Copy" on mobile. (See screenshot)

1. We should apply these changes to wp-admin/profile.php as well. I think folks are more likely to be adding application passwords through that screen rather than while editing another user.

The wp-admin/profile.php file loads up wp-admin/user-edit/php i.e. these changes are on the profile page now.

2. We can probably add a bit of spacing above "Copy" on mobile.

Good catch, looking at this now.

The wp-admin/profile.php file loads up wp-admin/user-edit/php i.e. these changes are on the profile page now.

Ha! I swear this was not working, but there it is. My fault!

[ironprogrammer]

Thanks for the suggestion, @desrosj, and for the patch, @circlecube!

Test Report

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7382

Steps to Test

1. Ensure that WP_ENVIRONMENT_TYPE is set to local or that HTTPS is enabled for the test site to enable application passwords functionality.
2. Login and navigate to your profile page, /wp-admin/profile.php.
3. Scroll down to Application Passwords and enter a new application password name.
4. Click "Add New Application Password".
5. There should be a "Copy" button after the generated password field.
6. Clicking the "Copy" button should copy the generated password to the clipboard.

Environment

• Hardware: MacBook Pro Apple M1 Pro
• OS: macOS 14.6.1
• Browser: Safari 17.6
• Server: nginx/1.27.1
• PHP: 8.2.23
• MySQL: 8.0.27
• WordPress: 6.7-alpha-58576-src

Actual Results

• ✅ Application password field included a "Copy" button, which copied the password to the clipboard when clicked.

Supplemental Artifacts

Before patch:

After patch and clicking "Copy":

[jeremyfelt]

In 59046:

Application Passwords: Add copy button when adding new password.

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

Screenshots of the mobile layout with a tiny CSS tweak:

[sumitbagthariya16]

Test report ✅

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7382 using WordPress Playground.​https://playground.wordpress.net/wordpress.html?pr=7382

The application password field now includes a "Copy" button, allowing the password to be copied to the clipboard with a single click.✅

​https://prnt.sc/1gAG9gI5umPy

[severinepozzo]

Test Report

This report validates that the indicated patch addresses the issue.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/7382

Environment

• OS: Windows 11
• PHP: 7.4.31
• WordPress: 6.7
• Browser: Chrome Firefox, Edge
• Theme: Twenty Twenty-Four
• Active Plugins: none

using WordPress playground

Actual Results

• ✅ New Application Password name presents "Copy" button, which copies the password to the clipboard