diff --git a/Gruntfile.js b/Gruntfile.js index 7f7d7fa66190..8e100ff450cc 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -276,6 +276,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 000000000000..6971a2612e47 --- /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.2.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 5a9cb7224cfb..2c36026ab707 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -551,6 +551,17 @@ fieldset label, .wp-pwd { margin-top: 1em; + position: relative; +} + +.wp-pwd button { + height: min-content; + width: 4.875rem; +} + +.wp-pwd button.pwd-toggle .dashicons { + position: relative; + top: 0.25rem } #misc-publishing-actions label { @@ -593,6 +604,10 @@ fieldset label, opacity: 1; } +.password-input-wrapper { + display: inline-block; +} + .password-input-wrapper input { font-family: Consolas, Monaco, monospace; } diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 62a596f0fe1f..1714fe20ae06 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; } @@ -151,6 +151,10 @@ textarea { padding: 3px 5px; } +.wp-pwd { + margin-top: 0; +} + input, submit { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -161,7 +165,7 @@ submit { .form-table input[type=url], .form-table input[type=password], #pass-strength-result { - width: 218px; + width: 230px; } .form-table th p { @@ -242,6 +246,12 @@ body.rtl, } } +@media screen and (min-width: 783px) { + .wp-pwd input#pwd { + width: calc(230px - 5.125rem); + } +} + @media screen and (max-width: 782px) { .form-table { diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php index 2fc046c42cee..658f85763f27 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 7f9ff5269087..f2d60e66a28a 100644 --- a/src/wp-admin/setup-config.php +++ b/src/wp-admin/setup-config.php @@ -223,7 +223,15 @@ function setup_config_display_header( $body_classes = array() ) { - + +

+ + +
+ @@ -250,6 +258,7 @@ function setup_config_display_header( $body_classes = array() ) {

+ - diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php index de5257893698..b912d1312f2a 100644 --- a/src/wp-includes/script-loader.php +++ b/src/wp-includes/script-loader.php @@ -1162,6 +1162,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' );