vhad/wordpress-develop
1
0
Fork 0
mirror of https://github.com/gosticks/wordpress-develop.git synced 2026-10-04 06:37:06 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Upgrade/Install: Show/hide toggle on password fields.

Browse Source 
Add a show/hide toggle for new passwords in initial user creation and database access during install and setup process using the same model as on user profiles. Add a new password toggle script. Change setup config table to two columns, matching the install table layout.

Props xmarcos, matt, markjaquith, nazgul, akbigdog, intoxination, rob1n, MichaelH, empireoflight, rmccue, markoheijnen, r0uter, amansurov, bi0xid, DrewAPicture, Narthur, wpnook, markparnell, costdev, clorith, ryokuhi, sabernhardt, bgoewert, ironprogrammer, adeltahri, joedolson, mukesh27, audrasjb, sergeybiryukov.
Fixes #3534.

git-svn-id: https://develop.svn.wordpress.org/trunk@56008 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson
2023-06-23 23:07:10 +00:00
parent e5be84482e
commit e97a67e7b8
9 changed files with 116 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/_enqueues/admin/password-toggle.js
+40
View File
@@ -0,0 +1,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' );
}
}
} )();