Make WordPress Core

Changeset 59046


Ignore:
Timestamp:
09/18/2024 12:12:52 AM (7 weeks ago)
Author:
jeremyfelt
Message:

Application Passwords: Add copy button when adding new password.

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

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/_enqueues/admin/user-profile.js

    r58455 r59046  
    33 */
    44
    5 /* global ajaxurl, pwsL10n, userProfileL10n */
     5/* global ajaxurl, pwsL10n, userProfileL10n, ClipboardJS */
    66(function($) {
    77    var updateLock = false,
    88        isSubmitting = false,
    99        __ = wp.i18n.__,
     10        clipboard = new ClipboardJS( '.application-password-display .copy-button' ),
    1011        $pass1Row,
    1112        $pass1,
     
    1920        $form,
    2021        originalFormContent,
    21         $passwordWrapper;
     22        $passwordWrapper,
     23        successTimeout;
    2224
    2325    function generatePassword() {
     
    347349    }
    348350
     351    // Debug information copy section.
     352    clipboard.on( 'success', function( e ) {
     353        var triggerElement = $( e.trigger ),
     354            successElement = $( '.success', triggerElement.closest( '.application-password-display' ) );
     355
     356        // Clear the selection and move focus back to the trigger.
     357        e.clearSelection();
     358
     359        // Show success visual feedback.
     360        clearTimeout( successTimeout );
     361        successElement.removeClass( 'hidden' );
     362
     363        // Hide success visual feedback after 3 seconds since last success.
     364        successTimeout = setTimeout( function() {
     365            successElement.addClass( 'hidden' );
     366        }, 3000 );
     367
     368        // Handle success audible feedback.
     369        wp.a11y.speak( __( 'Application password has been copied to your clipboard.' ) );
     370    } );
     371
    349372    $( function() {
    350373        var $colorpicker, $stylesheet, user_id, current_user_id,
  • trunk/src/wp-admin/css/common.css

    r59022 r59046  
    917917}
    918918
     919.application-password-display .success {
     920    color: #007017;
     921    margin-left: 0.5rem;
     922}
     923
    919924/*------------------------------------------------------------------------------
    920925  3.0 - Actions
  • trunk/src/wp-admin/css/forms.css

    r58927 r59046  
    10031003
    10041004.application-password-display input.code {
     1005    margin-bottom: 6px;
    10051006    width: 19em;
    10061007}
  • trunk/src/wp-admin/user-edit.php

    r58820 r59046  
    985985                </label>
    986986                <input id="new-application-password-value" type="text" class="code" readonly="readonly" value="{{ data.password }}" />
     987                <button type="button" class="button copy-button" data-clipboard-text="{{ data.password }}"><?php _e( 'Copy' ); ?></button>
     988                <span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
    987989            </p>
    988990            <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

    r59033 r59046  
    12141214    $scripts->set_translations( 'auth-app' );
    12151215
    1216     $scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter', 'wp-util' ), false, 1 );
     1216    $scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'clipboard', 'jquery', 'password-strength-meter', 'wp-util', 'wp-a11y' ), false, 1 );
    12171217    $scripts->set_translations( 'user-profile' );
    12181218    $user_id = isset( $_GET['user_id'] ) ? (int) $_GET['user_id'] : 0;
  • trunk/tests/e2e/specs/profile/applications-passwords.test.js

    r56926 r59046  
    3232            successMessage
    3333        ).toContainText(
    34             `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.`
     34            `Your new password for ${TEST_APPLICATION_NAME} is:`
     35        );
     36        await expect(
     37            successMessage
     38        ).toContainText(
     39            `Be sure to save this in a safe location. You will not be able to retrieve it.`
    3540        );
    3641    } );
Note: See TracChangeset for help on using the changeset viewer.