From 04aeddce8c6b8a8b04be6c7df1070fa04e58b539 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Thu, 22 Jun 2023 00:30:41 +0000
Subject: [PATCH] Administration: Hide password in options/writing.

Hide the password for the "Post via e-mail" settings in writing options. Use the same password hiding mechanisms in use elsewhere in core.

Props mastrup, denis-de-bernardy, ryan, brookedot, wojtek.szkutnik, dd32, sabreuse, sergeybiryukov, costdev, peterwilsoncc, zgrkaralar, clorith, renyot, sabernhardt, boniu91, ironprogrammer, bgoewert.
Fixes #9883.

git-svn-id: https://develop.svn.wordpress.org/trunk@55974 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/_enqueues/admin/user-profile.js | 40 ++++++++++++---------
 src/wp-admin/css/forms.css             | 48 ++++++++++++++++++++++++++
 src/wp-admin/options-writing.php       | 22 +++++++++---
 3 files changed, 88 insertions(+), 22 deletions(-)

diff --git a/src/js/_enqueues/admin/user-profile.js b/src/js/_enqueues/admin/user-profile.js
index f83c7b89080f1..466d115fc2129 100644
--- a/src/js/_enqueues/admin/user-profile.js
+++ b/src/js/_enqueues/admin/user-profile.js
@@ -52,7 +52,9 @@
 		$( '#pw-weak-text-label' ).text( __( 'Confirm use of weak password' ) );
 
 		// Focus the password field.
-		$( $pass1 ).trigger( 'focus' );
+		if ( 'mailserver_pass' !== $pass1.prop('id' ) ) {
+			$( $pass1 ).trigger( 'focus' );
+		}
 	}
 
 	function bindPass1() {
@@ -171,7 +173,7 @@
 		var $generateButton,
 			$cancelButton;
 
-		$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap, .reset-pass-submit' );
+		$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap, .mailserver-pass-wrap, .reset-pass-submit' );
 
 		// Hide the confirm password field when JavaScript support is enabled.
 		$('.user-pass2-wrap').hide();
@@ -188,7 +190,7 @@
 			$submitButtons.prop( 'disabled', ! $weakCheckbox.prop( 'checked' ) );
 		} );
 
-		$pass1 = $('#pass1');
+		$pass1 = $('#pass1, #mailserver_pass');
 		if ( $pass1.length ) {
 			bindPass1();
 		} else {
@@ -314,23 +316,27 @@
 	}
 
 	function showOrHideWeakPasswordCheckbox() {
-		var passStrength = $('#pass-strength-result')[0];
+		var passStrengthResult = $('#pass-strength-result');
 
-		if ( passStrength.className ) {
-			$pass1.addClass( passStrength.className );
-			if ( $( passStrength ).is( '.short, .bad' ) ) {
-				if ( ! $weakCheckbox.prop( 'checked' ) ) {
-					$submitButtons.prop( 'disabled', true );
-				}
-				$weakRow.show();
-			} else {
-				if ( $( passStrength ).is( '.empty' ) ) {
-					$submitButtons.prop( 'disabled', true );
-					$weakCheckbox.prop( 'checked', false );
+		if ( passStrengthResult.length ) {
+			var passStrength = passStrengthResult[0];
+
+			if ( passStrength.className ) {
+				$pass1.addClass( passStrength.className );
+				if ( $( passStrength ).is( '.short, .bad' ) ) {
+					if ( ! $weakCheckbox.prop( 'checked' ) ) {
+						$submitButtons.prop( 'disabled', true );
+					}
+					$weakRow.show();
 				} else {
-					$submitButtons.prop( 'disabled', false );
+					if ( $( passStrength ).is( '.empty' ) ) {
+						$submitButtons.prop( 'disabled', true );
+						$weakCheckbox.prop( 'checked', false );
+					} else {
+						$submitButtons.prop( 'disabled', false );
+					}
+					$weakRow.hide();
 				}
-				$weakRow.hide();
 			}
 		}
 	}
diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css
index e490a6002660f..bca4ea3badd4c 100644
--- a/src/wp-admin/css/forms.css
+++ b/src/wp-admin/css/forms.css
@@ -551,6 +551,54 @@ fieldset label,
 
 .wp-pwd {
 	margin-top: 1em;
+	position: relative;
+}
+
+.mailserver-pass-wrap .wp-pwd {
+	display: inline-block;
+	margin-top: 0;
+}
+
+/* rtl:ignore */
+#mailserver_pass {
+	direction: ltr;
+	padding-right: 2.5rem;
+}
+
+/* rtl:ignore */
+.mailserver-pass-wrap .button.wp-hide-pw {
+	background: transparent;
+	border: 1px solid transparent;
+	box-shadow: none;
+	font-size: 14px;
+	line-height: 2;
+	width: 2.5rem;
+	min-width: 40px;
+	margin: 0;
+	padding: 0 9px;
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.mailserver-pass-wrap .button.wp-hide-pw:hover {
+	background: transparent;
+	border-color: transparent;
+}
+
+.mailserver-pass-wrap .button.wp-hide-pw: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;
+}
+
+.mailserver-pass-wrap .button.wp-hide-pw:active {
+	background: transparent;
+	box-shadow: none;
+	transform: none;
 }
 
 #misc-publishing-actions label {
diff --git a/src/wp-admin/options-writing.php b/src/wp-admin/options-writing.php
index 9d6489bf8b8e3..b65f19ebf996b 100644
--- a/src/wp-admin/options-writing.php
+++ b/src/wp-admin/options-writing.php
@@ -54,6 +54,8 @@
 	'<p>' . __( '<a href="https://wordpress.org/support/forums/">Support forums</a>' ) . '</p>'
 );
 
+wp_enqueue_script( 'user-profile' );
+
 require_once ABSPATH . 'wp-admin/admin-header.php';
 ?>
 
@@ -168,11 +170,21 @@
 <th scope="row"><label for="mailserver_login"><?php _e( 'Login Name' ); ?></label></th>
 <td><input name="mailserver_login" type="text" id="mailserver_login" value="<?php form_option( 'mailserver_login' ); ?>" class="regular-text ltr" /></td>
 </tr>
-<tr>
-<th scope="row"><label for="mailserver_pass"><?php _e( 'Password' ); ?></label></th>
-<td>
-<input name="mailserver_pass" type="text" id="mailserver_pass" value="<?php form_option( 'mailserver_pass' ); ?>" class="regular-text ltr" />
-</td>
+<tr class="mailserver-pass-wrap">
+	<th scope="row">
+		<label for="mailserver_pass">
+			<?php _e( 'Password' ); ?>
+		</label>
+	</th>
+	<td>
+		<input type="hidden" value=" " /><!-- #24364 workaround -->
+		<span class="wp-pwd">
+			<input type="text" name="mailserver_pass" id="mailserver_pass" class="regular-text ltr" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( get_option( 'mailserver_pass' ) ); ?>" />
+			<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
+				<span class="dashicons dashicons-visibility" aria-hidden="true"></span>
+			</button>
+		</span>
+	</td>
 </tr>
 <tr>
 <th scope="row"><label for="default_email_category"><?php _e( 'Default Mail Category' ); ?></label></th>