diff --git a/src/js/_enqueues/admin/user-profile.js b/src/js/_enqueues/admin/user-profile.js index 54215c7b420b8..2aebe62a91f94 100644 --- a/src/js/_enqueues/admin/user-profile.js +++ b/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' ), diff --git a/src/wp-admin/css/common.css b/src/wp-admin/css/common.css index 287f2ee7b4958..8d5486e797606 100644 --- a/src/wp-admin/css/common.css +++ b/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 ------------------------------------------------------------------------------*/ diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 41d592d148811..ffe2c1711e7a1 100644 --- a/src/wp-admin/css/forms.css +++ b/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; } diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php index 860a0a6e07340..55ed2749f6447 100644 --- a/src/wp-admin/user-edit.php +++ b/src/wp-admin/user-edit.php @@ -984,6 +984,8 @@ ?> + +