From b07e0b2cfa9c9597234c9c840d5fa5574863242e Mon Sep 17 00:00:00 2001 From: Adam Silverstein Date: Tue, 20 Oct 2020 18:24:40 +0000 Subject: [PATCH] Users: improve password generation feature. On the user edit screen improve handling and clarify language: rename the "Generate Password" and "Show password" buttons to "Set New Password". Clicking it always generates a password. Also: improve inline code comments and descriptions. Props afercia, bookdude13, michaelarestad, pento. Fixes #42852. git-svn-id: https://develop.svn.wordpress.org/trunk@49248 602fd350-edb4-49c9-b593-d223f7449a82 --- src/js/_enqueues/admin/user-profile.js | 87 +++++++++++++------------- src/wp-admin/css/forms.css | 8 +++ src/wp-admin/user-edit.php | 14 +++-- src/wp-admin/user-new.php | 11 ++-- 4 files changed, 64 insertions(+), 56 deletions(-) diff --git a/src/js/_enqueues/admin/user-profile.js b/src/js/_enqueues/admin/user-profile.js index ef3e1afcc9..14c10b63bd 100644 --- a/src/js/_enqueues/admin/user-profile.js +++ b/src/js/_enqueues/admin/user-profile.js @@ -14,27 +14,30 @@ $toggleButton, $submitButtons, $submitButton, - currentPass; + currentPass, + $passwordWrapper; function generatePassword() { if ( typeof zxcvbn !== 'function' ) { setTimeout( generatePassword, 50 ); return; - } else if ( ! $pass1.val() ) { - // zxcvbn loaded before user entered password. + } else if ( ! $pass1.val() || $passwordWrapper.hasClass( 'is-open' ) ) { + // zxcvbn loaded before user entered password, or generating new password. $pass1.val( $pass1.data( 'pw' ) ); $pass1.trigger( 'pwupdate' ); showOrHideWeakPasswordCheckbox(); - } - else { + } else { // zxcvbn loaded after the user entered password, check strength. check_pass_strength(); showOrHideWeakPasswordCheckbox(); } + // Install screen. if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) { + // Show the password not masked if admin_password hasn't been posted yet. $pass1.attr( 'type', 'text' ); } else { + // Otherwise, mask the password. $toggleButton.trigger( 'click' ); } @@ -56,6 +59,7 @@ currentPass = $pass1.val(); + // Refresh password strength area. $pass1.removeClass( 'short bad good strong' ); showOrHideWeakPasswordCheckbox(); } ); @@ -84,18 +88,11 @@ $pass1.attr( 'type', 'password' ); resetToggle( true ); } - - $pass1.focus(); - - if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) { - $pass1[0].setSelectionRange( 0, 100 ); - } }); } function bindPasswordForm() { - var $passwordWrapper, - $generateButton, + var $generateButton, $cancelButton; $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' ); @@ -123,7 +120,7 @@ $pass1 = $( '#user_pass' ); } - /** + /* * Fix a LastPass mismatch issue, LastPass only changes pass2. * * This fixes the issue by copying any changes from the hidden @@ -149,57 +146,59 @@ bindToggleButton(); - if ( $generateButton.length ) { - $passwordWrapper.hide(); - } + // Generate the first password and cache it, but don't set it yet. + wp.ajax.post( 'generate-password' ) + .done( function( data ) { + // Cache password. + $pass1.data( 'pw', data ); + } ); $generateButton.show(); $generateButton.on( 'click', function () { updateLock = true; - $generateButton.hide(); - $passwordWrapper.show(); + // Make sure the password fields are shown. + $generateButton.attr( 'aria-expanded', 'true' ); + $passwordWrapper + .show() + .addClass( 'is-open' ); // Enable the inputs when showing. $pass1.attr( 'disabled', false ); $pass2.attr( 'disabled', false ); - if ( $pass1.val().length === 0 ) { - generatePassword(); - } + // Set the password to the generated value. + generatePassword(); + + // Show generated password in plaintext by default. + resetToggle ( false ); + + // Generate the next password and cache. + wp.ajax.post( 'generate-password' ) + .done( function( data ) { + $pass1.data( 'pw', data ); + } ); } ); $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' ); $cancelButton.on( 'click', function () { updateLock = false; - // Clear any entered password. - $pass1.val( '' ); - - // Generate a new password. - wp.ajax.post( 'generate-password' ) - .done( function( data ) { - $pass1.data( 'pw', data ); - } ); - - $generateButton.show().focus(); - $passwordWrapper.hide(); - - $weakRow.hide( 0, function () { - $weakCheckbox.removeProp( 'checked' ); - } ); - // Disable the inputs when hiding to prevent autofill and submission. $pass1.prop( 'disabled', true ); $pass2.prop( 'disabled', true ); + // Clear password field and update the UI. + $pass1.val( '' ).trigger( 'pwupdate' ); resetToggle( false ); - if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) { - // Clear password field to prevent update. - $pass1.val( '' ).trigger( 'pwupdate' ); - $submitButtons.prop( 'disabled', false ); - } + // Hide password controls. + $passwordWrapper + .hide() + .removeClass( 'is-open' ); + + // Stop an empty password from being submitted as a change. + $submitButtons.prop( 'disabled', false ); } ); $pass1Row.closest( 'form' ).on( 'submit', function () { @@ -399,7 +398,7 @@ window.generatePassword = generatePassword; - /* Warn the user if password was generated but not saved */ + // Warn the user if password was generated but not saved. $( window ).on( 'beforeunload', function () { if ( true === updateLock ) { return __( 'Your new password has not been saved.' ); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 2f03173491..5e18f508c1 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -533,6 +533,14 @@ fieldset label, margin: 0 0 1em; } +.wp-generate-pw { + margin-top: 1em; +} + +.wp-pwd { + margin-top: 1em; +} + #misc-publishing-actions label { vertical-align: baseline; } diff --git a/src/wp-admin/user-edit.php b/src/wp-admin/user-edit.php index 29e8f1a994..37869521a5 100644 --- a/src/wp-admin/user-edit.php +++ b/src/wp-admin/user-edit.php @@ -632,7 +632,7 @@ endif; - +
@@ -641,7 +641,7 @@ endif; - @@ -652,8 +652,12 @@ endif; - -

+ + +

+ +

+ @@ -661,7 +665,7 @@ endif; diff --git a/src/wp-admin/user-new.php b/src/wp-admin/user-new.php index 09ffdfeace..82d4cca985 100644 --- a/src/wp-admin/user-new.php +++ b/src/wp-admin/user-new.php @@ -560,8 +560,8 @@ if ( current_user_can( 'create_users' ) ) { - -
+ +
@@ -570,10 +570,6 @@ if ( current_user_can( 'create_users' ) ) { -
@@ -581,7 +577,8 @@ if ( current_user_can( 'create_users' ) ) { - + +