[Summary view] [Print] [Text view]

   1  /**
   2   * @output wp-admin/js/password-toggle.js
   3   */
   4  
   5  /**
   6   * Adds functionality for password visibility buttons to toggle between text and password input types.
   7   *
   8   * @since 6.3.0
   9   */
  10  ( function () {
  11      var toggleElements, status, input, icon, label, __ = wp.i18n.__;
  12  
  13      toggleElements = document.querySelectorAll( '.pwd-toggle' );
  14  
  15      toggleElements.forEach( function (toggle) {
  16          toggle.classList.remove( 'hide-if-no-js' );
  17          toggle.addEventListener( 'click', togglePassword );
  18      } );
  19  
  20      /**
  21       * Toggles the password input field visibility.
  22       */
  23  	function togglePassword() {
  24          status = this.getAttribute( 'data-toggle' );
  25          input = this.parentElement.children.namedItem( 'pwd' );
  26          icon = this.getElementsByClassName( 'dashicons' )[ 0 ];
  27          label = this.getElementsByClassName( 'text' )[ 0 ];
  28  
  29          if ( 0 === parseInt( status, 10 ) ) {
  30              this.setAttribute( 'data-toggle', 1 );
  31              this.setAttribute( 'aria-label', __( 'Hide password' ) );
  32              input.setAttribute( 'type', 'text' );
  33              label.innerHTML = __( 'Hide' );
  34              icon.classList.remove( 'dashicons-visibility' );
  35              icon.classList.add( 'dashicons-hidden' );
  36          } else {
  37              this.setAttribute( 'data-toggle', 0 );
  38              this.setAttribute( 'aria-label', __( 'Show password' ) );
  39              input.setAttribute( 'type', 'password' );
  40              label.innerHTML = __( 'Show' );
  41              icon.classList.remove( 'dashicons-hidden' );
  42              icon.classList.add( 'dashicons-visibility' );
  43          }
  44      }
  45  } )();