From e97a67e7b8a6cbeb88b0d376b04fd15ff926d160 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Fri, 23 Jun 2023 23:07:10 +0000 Subject: [PATCH] Upgrade/Install: Show/hide toggle on password fields. Add a show/hide toggle for new passwords in initial user creation and database access during install and setup process using the same model as on user profiles. Add a new password toggle script. Change setup config table to two columns, matching the install table layout. Props xmarcos, matt, markjaquith, nazgul, akbigdog, intoxination, rob1n, MichaelH, empireoflight, rmccue, markoheijnen, r0uter, amansurov, bi0xid, DrewAPicture, Narthur, wpnook, markparnell, costdev, clorith, ryokuhi, sabernhardt, bgoewert, ironprogrammer, adeltahri, joedolson, mukesh27, audrasjb, sergeybiryukov. Fixes #3534. git-svn-id: https://develop.svn.wordpress.org/trunk@56008 602fd350-edb4-49c9-b593-d223f7449a82 --- Gruntfile.js | 1 + src/js/_enqueues/admin/password-toggle.js | 40 +++++++++++++++++++++++ src/wp-admin/css/forms.css | 18 ++++++++++ src/wp-admin/css/install.css | 26 +++++++++++++-- src/wp-admin/install.php | 6 ++-- src/wp-admin/setup-config.php | 31 +++++++++++------- src/wp-admin/user-edit.php | 6 ++-- src/wp-admin/user-new.php | 6 ++-- src/wp-includes/script-loader.php | 3 ++ 9 files changed, 116 insertions(+), 21 deletions(-) create mode 100644 src/js/_enqueues/admin/password-toggle.js diff --git a/Gruntfile.js b/Gruntfile.js index 2a6d2b9fba..1b80ddd87e 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -317,6 +317,7 @@ module.exports = function(grunt) { [ WORKING_DIR + 'wp-admin/js/media.js' ]: [ './src/js/_enqueues/admin/media.js' ], [ WORKING_DIR + 'wp-admin/js/nav-menu.js' ]: [ './src/js/_enqueues/lib/nav-menu.js' ], [ WORKING_DIR + 'wp-admin/js/password-strength-meter.js' ]: [ './src/js/_enqueues/wp/password-strength-meter.js' ], + [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ], [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ], [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ], [ WORKING_DIR + 'wp-admin/js/postbox.js' ]: [ './src/js/_enqueues/admin/postbox.js' ], diff --git a/src/js/_enqueues/admin/password-toggle.js b/src/js/_enqueues/admin/password-toggle.js new file mode 100644 index 0000000000..5bfaa3b122 --- /dev/null +++ b/src/js/_enqueues/admin/password-toggle.js @@ -0,0 +1,40 @@ +/** + * Adds functionality for password visibility buttons to toggle between text and password input types. + * + * @since 6.3.0 + * @output wp-admin/js/password-toggle.js + */ + +( function () { + var toggleElements, status, input, icon, label, __ = wp.i18n.__; + + toggleElements = document.querySelectorAll( '.pwd-toggle' ); + + toggleElements.forEach( function (toggle) { + toggle.classList.remove( 'hide-if-no-js' ); + toggle.addEventListener( 'click', togglePassword ); + } ); + + function togglePassword() { + status = this.getAttribute( 'data-toggle' ); + input = this.parentElement.children.namedItem( 'pwd' ); + icon = this.getElementsByClassName( 'dashicons' )[ 0 ]; + label = this.getElementsByClassName( 'text' )[ 0 ]; + + if ( 0 === parseInt( status, 10 ) ) { + this.setAttribute( 'data-toggle', 1 ); + this.setAttribute( 'aria-label', __( 'Hide password' ) ); + input.setAttribute( 'type', 'text' ); + label.innerHTML = __( 'Hide' ); + icon.classList.remove( 'dashicons-visibility' ); + icon.classList.add( 'dashicons-hidden' ); + } else { + this.setAttribute( 'data-toggle', 0 ); + this.setAttribute( 'aria-label', __( 'Show password' ) ); + input.setAttribute( 'type', 'password' ); + label.innerHTML = __( 'Show' ); + icon.classList.remove( 'dashicons-hidden' ); + icon.classList.add( 'dashicons-visibility' ); + } + } +} )(); diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 59db4f14b0..54ebeea537 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -547,6 +547,16 @@ fieldset label, .wp-generate-pw { margin-top: 1em; + position: relative; +} + +.wp-pwd button { + height: min-content; +} + +.wp-pwd button.pwd-toggle .dashicons { + position: relative; + top: 0.25rem; } .wp-pwd { @@ -640,6 +650,10 @@ fieldset label, opacity: 1; } +.password-input-wrapper { + display: inline-block; +} + .password-input-wrapper input { font-family: Consolas, Monaco, monospace; } @@ -1630,6 +1644,10 @@ table.form-table td .updated p { padding: 8px; } + .password-input-wrapper { + display: block; + } + p.search-box { float: none; position: absolute; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 62a596f0fe..144f99c978 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -131,7 +131,7 @@ textarea { font-size: 14px; text-align: left; padding: 10px 20px 10px 0; - width: 140px; + width: 115px; vertical-align: top; } @@ -145,12 +145,30 @@ textarea { font-size: 11px; } +.form-table .setup-description { + margin: 4px 0 0; + line-height: 1.6; +} + .form-table input { line-height: 1.33333333; font-size: 15px; padding: 3px 5px; } +.wp-pwd { + margin-top: 0; +} + +.form-table .wp-pwd { + display: flex; + column-gap: 4px; +} + +.form-table .password-input-wrapper { + width: 100%; +} + input, submit { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -161,7 +179,7 @@ submit { .form-table input[type=url], .form-table input[type=password], #pass-strength-result { - width: 218px; + width: 100%; } .form-table th p { @@ -286,6 +304,10 @@ body.rtl, box-sizing: border-box; } + #pwd { + padding-right: 2.5rem; + } + .wp-pwd #pass1 { padding-right: 50px; } diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php index 7c7dfe5abd..66b6078214 100644 --- a/src/wp-admin/install.php +++ b/src/wp-admin/install.php @@ -140,12 +140,14 @@ function display_setup_form( $error = null ) {
- +
+ +
+
-

diff --git a/src/wp-admin/setup-config.php b/src/wp-admin/setup-config.php index 5d2ae4b895..ddcb4943c7 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -223,33 +223,41 @@ switch ( $step ) { - - + - - + - - + - - +

- - +

- +
- + +
-
diff --git a/src/wp-admin/user-new.php b/src/wp-admin/user-new.php index 5c8f71c311..901f2b7352 100644 --- a/src/wp-admin/user-new.php +++ b/src/wp-admin/user-new.php @@ -570,14 +570,14 @@ if ( current_user_can( 'create_users' ) ) {
- +
- + +
-
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index 0c8cd50e85..3ee28ce23c 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1171,6 +1171,9 @@ function wp_default_scripts( $scripts ) { ); $scripts->set_translations( 'password-strength-meter' ); + $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 ); + $scripts->set_translations( 'password-toggle' ); + $scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks' ), false, 1 ); $scripts->set_translations( 'application-passwords' );