3534 Password Toggle Text Variation

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' ],

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' );
+		}
+	}
+} )();

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;
 }

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 {

src/wp-admin/install.php

@@ -140,12 +140,14 @@ function display_setup_form( $error = null ) {
 			<td>
 				<div class="wp-pwd">
 					<?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
-					<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+					<span class="password-input-wrapper">
+						<input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+						<div id="pass-strength-result" aria-live="polite"></div>
+					</span>
 					<button type="button" class="button wp-hide-pw hide-if-no-js" data-start-masked="<?php echo (int) isset( $_POST['admin_password'] ); ?>" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
 						<span class="dashicons dashicons-hidden"></span>
 						<span class="text"><?php _e( 'Hide' ); ?></span>
 					</button>
-					<div id="pass-strength-result" aria-live="polite"></div>
 				</div>
 				<p><span class="description important hide-if-no-js">
 				<strong><?php _e( 'Important:' ); ?></strong>

src/wp-admin/setup-config.php

@@ -223,7 +223,15 @@ function setup_config_display_header( $body_classes = array() ) {
 		</tr>
 		<tr>
 			<th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
-			<td><input name="pwd" id="pwd" type="text" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" /></td>
+			<td>
+				<div class="wp-pwd">
+					<input name="pwd" id="pwd" type="password" class="regular-text" data-reveal="1" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" />
+					<button type="button" class="button pwd-toggle hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
+						<span class="dashicons dashicons-visibility"></span>
+						<span class="text"><?php _e( 'Show' ); ?></span>
+					</button>
+				</div>
+			</td>
 			<td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
 		</tr>
 		<tr>
@@ -250,6 +258,7 @@ function setup_config_display_header( $body_classes = array() ) {
 	<p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p>
 </form>
 		<?php
+		wp_print_scripts( 'password-toggle' );
 		break;
 
 	case 2:

src/wp-admin/user-new.php

@@ -572,12 +572,12 @@
 				<?php $initial_password = wp_generate_password( 24 ); ?>
 				<span class="password-input-wrapper">
 					<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+					<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
 				</span>
 				<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
 					<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
 					<span class="text"><?php _e( 'Hide' ); ?></span>
 				</button>
-				<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
 			</div>
 		</td>
 	</tr>

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' );