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

Login and Registration: Add a "Show password" button on the login page.

Browse Source 
The ability for users to see the password they're typing improves usability and accessibility of the login users flow.

- brings the login screen in line with the same feature already used in the New User, Edit User, and Reset Password pages
- improves association of labels and input fields by using explicit association with `for` / `id` attributes
- slightly increases the "Remember me" label font size

Props johnbillion, Iceable, audrasjb, joyously, adamsilverstein, boemedia, DrewAPicture, shadyvb, birgire, peterwilsoncc, pento, anevins, davidbaumwald, whyisjake, afercia.
Fixes #42888.


git-svn-id: https://develop.svn.wordpress.org/trunk@46256 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia
2019-09-23 18:05:16 +00:00
parent 03fe23cc8a
commit 0ff03b3290
5 changed files with 124 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
src/js/_enqueues/admin/user-profile.js
View File

@@ -7,10 +7,7 @@
var updateLock = false,
$pass1Row,
$pass1Wrap,
$pass1,
$pass1Text,
$pass1Label,
$pass2,
$weakRow,
$weakCheckbox,
@@ -36,7 +33,7 @@
}
if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
$pass1Wrap.addClass( 'show-password' );
$pass1.attr( 'type', 'text' );
} else {
$toggleButton.trigger( 'click' );
}
@@ -48,28 +45,6 @@
function bindPass1() {
currentPass = $pass1.val();
$pass1Wrap = $pass1.parent();
$pass1Text = $( '<input type="text"/>' )
.attr( {
'id': 'pass1-text',
'name': 'pass1-text',
'autocomplete': 'off'
} )
.addClass( $pass1[0].className )
.data( 'pw', $pass1.data( 'pw' ) )
.val( $pass1.val() )
.on( 'input', function () {
if ( $pass1Text.val() === currentPass ) {
return;
}
$pass2.val( $pass1Text.val() );
$pass1.val( $pass1Text.val() ).trigger( 'pwupdate' );
currentPass = $pass1Text.val();
} );
$pass1.after( $pass1Text );
if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
generatePassword();
}
@@ -80,64 +55,40 @@
}
currentPass = $pass1.val();
if ( $pass1Text.val() !== currentPass ) {
$pass1Text.val( currentPass );
}
$pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
$pass1.removeClass( 'short bad good strong' );
showOrHideWeakPasswordCheckbox();
} );
}
function resetToggle() {
function resetToggle( show ) {
$toggleButton
.data( 'toggle', 0 )
.attr({
'aria-label': userProfileL10n.ariaHide
'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
})
.find( '.text' )
.text( userProfileL10n.hide )
.text( show ? userProfileL10n.show : userProfileL10n.hide )
.end()
.find( '.dashicons' )
.removeClass( 'dashicons-visibility' )
.addClass( 'dashicons-hidden' );
$pass1Text.focus();
$pass1Label.attr( 'for', 'pass1-text' );
.removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
.addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
}
function bindToggleButton() {
$toggleButton = $pass1Row.find('.wp-hide-pw');
$toggleButton.show().on( 'click', function () {
if ( 1 === parseInt( $toggleButton.data( 'toggle' ), 10 ) ) {
$pass1Wrap.addClass( 'show-password' );
resetToggle();
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
$pass1Text[0].setSelectionRange( 0, 100 );
}
if ( 'password' === $pass1.attr( 'type' ) ) {
$pass1.attr( 'type', 'text' );
resetToggle( false );
} else {
$pass1Wrap.removeClass( 'show-password' );
$toggleButton
.data( 'toggle', 1 )
.attr({
'aria-label': userProfileL10n.ariaShow
})
.find( '.text' )
.text( userProfileL10n.show )
.end()
.find( '.dashicons' )
.removeClass('dashicons-hidden')
.addClass('dashicons-visibility');
$pass1.attr( 'type', 'password' );
resetToggle( true );
}
$pass1.focus();
$pass1.focus();
$pass1Label.attr( 'for', 'pass1' );
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
$pass1[0].setSelectionRange( 0, 100 );
}
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
$pass1[0].setSelectionRange( 0, 100 );
}
});
}
@@ -147,10 +98,9 @@
$generateButton,
$cancelButton;
$pass1Row = $('.user-pass1-wrap');
$pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
// hide this
// Hide the confirm password field when JavaScript support is enabled.
$('.user-pass2-wrap').hide();
$submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
@@ -168,6 +118,9 @@
$pass1 = $('#pass1');
if ( $pass1.length ) {
bindPass1();
} else {
// Password field for the login form.
$pass1 = $( '#user_pass' );
}
/**
@@ -189,7 +142,6 @@
if ( $pass1.is( ':hidden' ) ) {
$pass1.prop( 'disabled', true );
$pass2.prop( 'disabled', true );
$pass1Text.prop( 'disabled', true );
}
$passwordWrapper = $pass1Row.find( '.wp-pwd' );
@@ -211,18 +163,10 @@
// Enable the inputs when showing.
$pass1.attr( 'disabled', false );
$pass2.attr( 'disabled', false );
$pass1Text.attr( 'disabled', false );
if ( $pass1Text.val().length === 0 ) {
if ( $pass1.val().length === 0 ) {
generatePassword();
}
_.defer( function() {
$pass1Text.focus();
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
$pass1Text[0].setSelectionRange( 0, 100 );
}
}, 0 );
} );
$cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
@@ -230,7 +174,7 @@
updateLock = false;
// Clear any entered password.
$pass1Text.val( '' );
$pass1.val( '' );
// Generate a new password.
wp.ajax.post( 'generate-password' )
@@ -248,9 +192,8 @@
// Disable the inputs when hiding to prevent autofill and submission.
$pass1.prop( 'disabled', true );
$pass2.prop( 'disabled', true );
$pass1Text.prop( 'disabled', true );
resetToggle();
resetToggle( false );
if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
// Clear password field to prevent update
@@ -265,7 +208,6 @@
$pass1.prop( 'disabled', false );
$pass2.prop( 'disabled', false );
$pass2.val( $pass1.val() );
$pass1Wrap.removeClass( 'show-password' );
});
}
@@ -305,7 +247,7 @@
var passStrength = $('#pass-strength-result')[0];
if ( passStrength.className ) {
$pass1.add( $pass1Text ).addClass( passStrength.className );
$pass1.addClass( passStrength.className );
if ( $( passStrength ).is( '.short, .bad' ) ) {
if ( ! $weakCheckbox.prop( 'checked' ) ) {
$submitButtons.prop( 'disabled', true );