1 /**

     2  * Adds functionality for password visibility buttons to toggle between text and password input types.

     3  *

     4  * @since 6.3.0

     5  * @output wp-admin/js/password-toggle.js

     6  */

     7 

     8 ( function () {

     9 	var toggleElements, status, input, icon, label, __ = wp.i18n.__;

    10 

    11 	toggleElements = document.querySelectorAll( '.pwd-toggle' );

    12 

    13 	toggleElements.forEach( function (toggle) {

    14 		toggle.classList.remove( 'hide-if-no-js' );

    15 		toggle.addEventListener( 'click', togglePassword );

    16 	} );

    17 

    18 	function togglePassword() {

    19 		status = this.getAttribute( 'data-toggle' );

    20 		input = this.parentElement.children.namedItem( 'pwd' );

    21 		icon = this.getElementsByClassName( 'dashicons' )[ 0 ];

    22 		label = this.getElementsByClassName( 'text' )[ 0 ];

    23 

    24 		if ( 0 === parseInt( status, 10 ) ) {

    25 			this.setAttribute( 'data-toggle', 1 );

    26 			this.setAttribute( 'aria-label', __( 'Hide password' ) );

    27 			input.setAttribute( 'type', 'text' );

    28 			label.innerHTML = __( 'Hide' );

    29 			icon.classList.remove( 'dashicons-visibility' );

    30 			icon.classList.add( 'dashicons-hidden' );

    31 		} else {

    32 			this.setAttribute( 'data-toggle', 0 );

    33 			this.setAttribute( 'aria-label', __( 'Show password' ) );

    34 			input.setAttribute( 'type', 'password' );

    35 			label.innerHTML = __( 'Show' );

    36 			icon.classList.remove( 'dashicons-hidden' );

    37 			icon.classList.add( 'dashicons-visibility' );

    38 		}

    39 	}

    40 } )();