You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

40 lines
1.3 KiB

1 year ago
  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. ( function () {
  8. var toggleElements, status, input, icon, label, __ = wp.i18n.__;
  9. toggleElements = document.querySelectorAll( '.pwd-toggle' );
  10. toggleElements.forEach( function (toggle) {
  11. toggle.classList.remove( 'hide-if-no-js' );
  12. toggle.addEventListener( 'click', togglePassword );
  13. } );
  14. function togglePassword() {
  15. status = this.getAttribute( 'data-toggle' );
  16. input = this.parentElement.children.namedItem( 'pwd' );
  17. icon = this.getElementsByClassName( 'dashicons' )[ 0 ];
  18. label = this.getElementsByClassName( 'text' )[ 0 ];
  19. if ( 0 === parseInt( status, 10 ) ) {
  20. this.setAttribute( 'data-toggle', 1 );
  21. this.setAttribute( 'aria-label', __( 'Hide password' ) );
  22. input.setAttribute( 'type', 'text' );
  23. label.innerHTML = __( 'Hide' );
  24. icon.classList.remove( 'dashicons-visibility' );
  25. icon.classList.add( 'dashicons-hidden' );
  26. } else {
  27. this.setAttribute( 'data-toggle', 0 );
  28. this.setAttribute( 'aria-label', __( 'Show password' ) );
  29. input.setAttribute( 'type', 'password' );
  30. label.innerHTML = __( 'Show' );
  31. icon.classList.remove( 'dashicons-hidden' );
  32. icon.classList.add( 'dashicons-visibility' );
  33. }
  34. }
  35. } )();