[Summary view] [Print] [Text view]

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