Skip to content

Commit 0ff03b3

Browse files
aferciaafercia
committed
Login and Registration: Add a "Show password" button on the login page.
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
1 parent 03fe23c commit 0ff03b3

5 files changed

Lines changed: 125 additions & 174 deletions

File tree

‎src/js/_enqueues/admin/user-profile.js‎

Lines changed: 27 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
var updateLock = false,
88

99
$pass1Row,
10-
$pass1Wrap,
1110
$pass1,
12-
$pass1Text,
13-
$pass1Label,
1411
$pass2,
1512
$weakRow,
1613
$weakCheckbox,
@@ -36,7 +33,7 @@
3633
}
3734

3835
if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
39-
$pass1Wrap.addClass( 'show-password' );
36+
$pass1.attr( 'type', 'text' );
4037
} else {
4138
$toggleButton.trigger( 'click' );
4239
}
@@ -48,28 +45,6 @@
4845
function bindPass1() {
4946
currentPass = $pass1.val();
5047

51-
$pass1Wrap = $pass1.parent();
52-
53-
$pass1Text = $( '<input type="text"/>' )
54-
.attr( {
55-
'id': 'pass1-text',
56-
'name': 'pass1-text',
57-
'autocomplete': 'off'
58-
} )
59-
.addClass( $pass1[0].className )
60-
.data( 'pw', $pass1.data( 'pw' ) )
61-
.val( $pass1.val() )
62-
.on( 'input', function () {
63-
if ( $pass1Text.val() === currentPass ) {
64-
return;
65-
}
66-
$pass2.val( $pass1Text.val() );
67-
$pass1.val( $pass1Text.val() ).trigger( 'pwupdate' );
68-
currentPass = $pass1Text.val();
69-
} );
70-
71-
$pass1.after( $pass1Text );
72-
7348
if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
7449
generatePassword();
7550
}
@@ -80,64 +55,40 @@
8055
}
8156

8257
currentPass = $pass1.val();
83-
if ( $pass1Text.val() !== currentPass ) {
84-
$pass1Text.val( currentPass );
85-
}
86-
$pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
58+
59+
$pass1.removeClass( 'short bad good strong' );
8760
showOrHideWeakPasswordCheckbox();
8861
} );
8962
}
9063

91-
function resetToggle() {
64+
function resetToggle( show ) {
9265
$toggleButton
93-
.data( 'toggle', 0 )
9466
.attr({
95-
'aria-label': userProfileL10n.ariaHide
67+
'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
9668
})
9769
.find( '.text' )
98-
.text( userProfileL10n.hide )
70+
.text( show ? userProfileL10n.show : userProfileL10n.hide )
9971
.end()
10072
.find( '.dashicons' )
101-
.removeClass( 'dashicons-visibility' )
102-
.addClass( 'dashicons-hidden' );
103-
104-
$pass1Text.focus();
105-
106-
$pass1Label.attr( 'for', 'pass1-text' );
73+
.removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
74+
.addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
10775
}
10876

10977
function bindToggleButton() {
11078
$toggleButton = $pass1Row.find('.wp-hide-pw');
11179
$toggleButton.show().on( 'click', function () {
112-
if ( 1 === parseInt( $toggleButton.data( 'toggle' ), 10 ) ) {
113-
$pass1Wrap.addClass( 'show-password' );
80+
if ( 'password' === $pass1.attr( 'type' ) ) {
81+
$pass1.attr( 'type', 'text' );
82+
resetToggle( false );
83+
} else {
84+
$pass1.attr( 'type', 'password' );
85+
resetToggle( true );
86+
}
11487

115-
resetToggle();
88+
$pass1.focus();
11689

117-
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
118-
$pass1Text[0].setSelectionRange( 0, 100 );
119-
}
120-
} else {
121-
$pass1Wrap.removeClass( 'show-password' );
122-
$toggleButton
123-
.data( 'toggle', 1 )
124-
.attr({
125-
'aria-label': userProfileL10n.ariaShow
126-
})
127-
.find( '.text' )
128-
.text( userProfileL10n.show )
129-
.end()
130-
.find( '.dashicons' )
131-
.removeClass('dashicons-hidden')
132-
.addClass('dashicons-visibility');
133-
134-
$pass1.focus();
135-
136-
$pass1Label.attr( 'for', 'pass1' );
137-
138-
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
139-
$pass1[0].setSelectionRange( 0, 100 );
140-
}
90+
if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
91+
$pass1[0].setSelectionRange( 0, 100 );
14192
}
14293
});
14394
}
@@ -147,10 +98,9 @@
14798
$generateButton,
14899
$cancelButton;
149100

150-
$pass1Row = $('.user-pass1-wrap');
151-
$pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
101+
$pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
152102

153-
// hide this
103+
// Hide the confirm password field when JavaScript support is enabled.
154104
$('.user-pass2-wrap').hide();
155105

156106
$submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
@@ -168,6 +118,9 @@
168118
$pass1 = $('#pass1');
169119
if ( $pass1.length ) {
170120
bindPass1();
121+
} else {
122+
// Password field for the login form.
123+
$pass1 = $( '#user_pass' );
171124
}
172125

173126
/**
@@ -189,7 +142,6 @@
189142
if ( $pass1.is( ':hidden' ) ) {
190143
$pass1.prop( 'disabled', true );
191144
$pass2.prop( 'disabled', true );
192-
$pass1Text.prop( 'disabled', true );
193145
}
194146

195147
$passwordWrapper = $pass1Row.find( '.wp-pwd' );
@@ -211,26 +163,18 @@
211163
// Enable the inputs when showing.
212164
$pass1.attr( 'disabled', false );
213165
$pass2.attr( 'disabled', false );
214-
$pass1Text.attr( 'disabled', false );
215166

216-
if ( $pass1Text.val().length === 0 ) {
167+
if ( $pass1.val().length === 0 ) {
217168
generatePassword();
218169
}
219-
220-
_.defer( function() {
221-
$pass1Text.focus();
222-
if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
223-
$pass1Text[0].setSelectionRange( 0, 100 );
224-
}
225-
}, 0 );
226170
} );
227171

228172
$cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
229173
$cancelButton.on( 'click', function () {
230174
updateLock = false;
231175

232176
// Clear any entered password.
233-
$pass1Text.val( '' );
177+
$pass1.val( '' );
234178

235179
// Generate a new password.
236180
wp.ajax.post( 'generate-password' )
@@ -248,9 +192,8 @@
248192
// Disable the inputs when hiding to prevent autofill and submission.
249193
$pass1.prop( 'disabled', true );
250194
$pass2.prop( 'disabled', true );
251-
$pass1Text.prop( 'disabled', true );
252195

253-
resetToggle();
196+
resetToggle( false );
254197

255198
if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
256199
// Clear password field to prevent update
@@ -265,7 +208,6 @@
265208
$pass1.prop( 'disabled', false );
266209
$pass2.prop( 'disabled', false );
267210
$pass2.val( $pass1.val() );
268-
$pass1Wrap.removeClass( 'show-password' );
269211
});
270212
}
271213

@@ -305,7 +247,7 @@
305247
var passStrength = $('#pass-strength-result')[0];
306248

307249
if ( passStrength.className ) {
308-
$pass1.add( $pass1Text ).addClass( passStrength.className );
250+
$pass1.addClass( passStrength.className );
309251
if ( $( passStrength ).is( '.short, .bad' ) ) {
310252
if ( ! $weakCheckbox.prop( 'checked' ) ) {
311253
$submitButtons.prop( 'disabled', true );

‎src/wp-admin/css/forms.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1500,9 +1500,9 @@ table.form-table td .updated p {
15001500
position: relative;
15011501
}
15021502

1503-
.wp-pwd [type="text"],
1504-
.wp-pwd [type="password"] {
1505-
padding-right: 88px;
1503+
/* Needs higher specificity than normal input type text and password. */
1504+
#profile-page .form-table #pass1 {
1505+
padding-right: 90px;
15061506
}
15071507

15081508
.wp-pwd button.button {

‎src/wp-admin/css/install.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -301,6 +301,17 @@ body.rtl,
301301
box-sizing: border-box;
302302
}
303303

304+
.wp-pwd #pass1 {
305+
padding-right: 50px;
306+
}
307+
308+
.wp-pwd .button.wp-hide-pw {
309+
right: 0;
310+
}
311+
312+
#pass-strength-result {
313+
width: 100%;
314+
}
304315
}
305316

306317
body.language-chooser {

‎src/wp-admin/css/login.css‎

Lines changed: 31 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,6 @@ a:focus {
3737
0 0 2px 1px rgba(30, 140, 190, 0.8);
3838
}
3939

40-
.ie8 a:focus {
41-
outline: #5b9dd9 solid 1px;
42-
}
43-
4440
p {
4541
line-height: 1.5;
4642
}
@@ -75,14 +71,6 @@ p {
7571
padding: 0;
7672
}
7773

78-
.login .password-input-wrapper {
79-
position: relative;
80-
}
81-
82-
.login .input.password-input {
83-
margin: 0;
84-
}
85-
8674
.login .input::-ms-clear {
8775
display: none;
8876
}
@@ -91,7 +79,7 @@ p {
9179
margin-bottom: 15px;
9280
}
9381

94-
.login .button.button-secondary {
82+
.login .button.wp-hide-pw {
9583
background: transparent;
9684
border: 1px solid transparent;
9785
box-shadow: none;
@@ -102,25 +90,37 @@ p {
10290
padding: 5px 9px;
10391
position: absolute;
10492
right: 0;
105-
top: 0;
93+
top: 3px;
10694
}
10795

108-
.login .button.button-secondary:hover {
96+
.login .button.wp-hide-pw:hover {
10997
background: transparent;
11098
}
11199

112-
.login .button.button-secondary:focus {
100+
.login .button.wp-hide-pw:focus {
113101
background: transparent;
114102
border-color: #5b9dd9;
115103
box-shadow: 0 0 3px rgba(0, 115, 170, 0.8);
116104
}
117105

118-
.login .button.button-secondary:active {
106+
.login .button.wp-hide-pw:active {
119107
background: transparent;
120108
box-shadow: none;
121109
transform: none;
122110
}
123111

112+
.login .button.wp-hide-pw .dashicons {
113+
top: 4px;
114+
}
115+
116+
.login .wp-pwd {
117+
position: relative;
118+
}
119+
120+
.no-js .hide-if-no-js {
121+
display: none;
122+
}
123+
124124
.login form {
125125
margin-top: 20px;
126126
margin-left: 0;
@@ -195,9 +195,10 @@ p {
195195
font-size: 14px;
196196
}
197197

198-
.login form .forgetmenot label {
199-
font-size: 12px;
200-
line-height: 1.58333333;
198+
.login .forgetmenot label,
199+
.login .pw-weak label {
200+
line-height: 1.5;
201+
vertical-align: baseline;
201202
}
202203

203204
.login h1 {
@@ -270,16 +271,18 @@ p {
270271
}
271272

272273
.login form .input,
273-
.login input[type="text"] {
274+
.login input[type="text"],
275+
.login input[type="password"] {
274276
font-size: 24px;
275277
width: 100%;
276278
padding: 5px;
277-
margin: 2px 6px 16px 0;
279+
margin: 3px 6px 16px 0;
278280
}
279281

280-
.login-action-rp form .input,
281-
.login-action-rp input[type="text"] {
282-
padding: 5px 45px 5px 5px;
282+
.js.login input.password-input,
283+
.js.login-action-rp form .input,
284+
.js.login-action-rp input[type="text"] {
285+
padding-right: 45px;
283286
}
284287

285288
.login form .input,
@@ -288,14 +291,9 @@ p {
288291
background: #fbfbfb;
289292
}
290293

291-
.ie7 .login form .input,
292-
.ie8 .login form .input {
293-
font-family: sans-serif;
294-
}
295-
296-
.login-action-rp input[type="text"] {
297-
box-shadow: none;
298-
margin: 0;
294+
.js.login-action-rp input[type="text"],
295+
.js.login-action-rp input[type="password"] {
296+
margin-bottom: 0;
299297
}
300298

301299
.login #pass-strength-result {

0 commit comments

Comments
 (0)