File: password-toggle.js

package info (click to toggle)
wordpress 6.9%2Bdfsg1-1
  • links: PTS, VCS
  • area: main
  • in suites: forky, sid
  • size: 136,360 kB
  • sloc: javascript: 534,044; php: 301,426; cs: 6,126; sh: 457; xml: 22; makefile: 14
file content (40 lines) | stat: -rw-r--r-- 1,339 bytes parent folder | download | duplicates (2)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/**
 * 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' );
		}
	}
} )();