41 lines
1.3 KiB
JavaScript
41 lines
1.3 KiB
JavaScript
/**
|
|
* 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' );
|
|
}
|
|
}
|
|
} )();
|