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

1 files changed, 40 insertions, 0 deletions

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