Hide password in setup-config.php

Gruntfile.js

@@ -275,6 +275,7 @@ module.exports = function(grunt) {
 					[ 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' ],
+					[ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ],
 					[ WORKING_DIR + 'wp-admin/js/revisions.js' ]: [ './src/js/_enqueues/wp/revisions.js' ],
 					[ WORKING_DIR + 'wp-admin/js/set-post-thumbnail.js' ]: [ './src/js/_enqueues/admin/set-post-thumbnail.js' ],
 					[ WORKING_DIR + 'wp-admin/js/svg-painter.js' ]: [ './src/js/_enqueues/wp/svg-painter.js' ],

src/js/_enqueues/admin/password-toggle.js

@@ -0,0 +1,38 @@
+/**
+ * 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;
+
+	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', this.getAttribute( 'data-hide-label' ) );
+			input.setAttribute( 'type', 'text' );
+			icon.classList.remove( 'dashicons-visibility' );
+			icon.classList.add( 'dashicons-hidden' );
+		} else {
+			this.setAttribute( 'data-toggle', 0 );
+			this.setAttribute( 'aria-label', this.getAttribute( 'data-show-label' ) );
+			input.setAttribute( 'type', 'password' );
+			icon.classList.remove( 'dashicons-hidden' );
+			icon.classList.add( 'dashicons-visibility' );
+		}
+	}
+} )();

src/wp-admin/css/forms.css

@@ -551,6 +551,46 @@ fieldset label,
 
 .wp-pwd {
 	margin-top: 1em;
+	position: relative;
+}
+
+.wp-pwd button.pwd-toggle {
+	background: transparent;
+	border: 1px solid transparent;
+	box-shadow: none;
+	font-size: 14px;
+	line-height: 2;
+	width: 2rem;
+	min-width: 40px;
+	margin: 0;
+	padding: 0;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.wp-pwd button.pwd-toggle:hover {
+	background: transparent;
+	border-color: transparent;
+}
+
+.wp-pwd button.pwd-toggle:focus {
+	background: transparent;
+	border-color: #3582c4;
+	border-radius: 4px;
+	box-shadow: 0 0 0 1px #3582c4;
+	/* Only visible in Windows High Contrast mode */
+	outline: 2px solid transparent;
+}
+
+.wp-pwd button.pwd-toggle:active {
+	background: transparent;
+	box-shadow: none;
+	transform: none;
+}
+
+.wp-pwd button.pwd-toggle .dashicons {
+	line-height: 1.375;
 }
 
 #misc-publishing-actions label {

src/wp-admin/css/install.css

@@ -151,6 +151,14 @@ textarea {
 	padding: 3px 5px;
 }
 
+.wp-pwd {
+	margin-top: 0;
+}
+
+.wp-pwd input#pwd {
+	padding-right: 2.5rem;
+}
+
 input,
 submit {
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

src/wp-admin/setup-config.php

@@ -223,7 +223,14 @@ 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" /></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" />
+					<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' ); ?>" data-show-label="<?php esc_attr_e( 'Show password' ); ?>" data-hide-label="<?php esc_attr_e( 'Hide password' ); ?>" >
+						<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+					</button>
+				</div>
+			</td>
 			<td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
 		</tr>
 		<tr>
@@ -250,6 +257,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-includes/script-loader.php

@@ -1178,6 +1178,8 @@ function wp_default_scripts( $scripts ) {
 		)
 	);
 
+	$scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 );
+
 	$scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
 
 	$scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );