Index: src/js/_enqueues/admin/user-profile.js =================================================================== --- src/js/_enqueues/admin/user-profile.js (revision 45562) +++ src/js/_enqueues/admin/user-profile.js (working copy) @@ -5,12 +5,8 @@ /* global ajaxurl, pwsL10n, userProfileL10n */ (function($) { var updateLock = false, - $pass1Row, - $pass1Wrap, $pass1, - $pass1Text, - $pass1Label, $pass2, $weakRow, $weakCheckbox, @@ -36,7 +32,7 @@ } if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) { - $pass1Wrap.addClass( 'show-password' ); + $pass1.attr( 'type', 'text' ); } else { $toggleButton.trigger( 'click' ); } @@ -48,28 +44,6 @@ function bindPass1() { currentPass = $pass1.val(); - $pass1Wrap = $pass1.parent(); - - $pass1Text = $( '' ) - .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,65 +54,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(); - - $pass1Label.attr( 'for', 'pass1' ); - if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) { $pass1[0].setSelectionRange( 0, 100 ); } } + $pass1.focus(); }); } @@ -147,10 +96,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 +116,9 @@ $pass1 = $('#pass1'); if ( $pass1.length ) { bindPass1(); + } else { + // Password field for the login form. + $pass1 = $( '#user_pass' ); } /** @@ -189,7 +140,6 @@ if ( $pass1.is( ':hidden' ) ) { $pass1.prop( 'disabled', true ); $pass2.prop( 'disabled', true ); - $pass1Text.prop( 'disabled', true ); } $passwordWrapper = $pass1Row.find( '.wp-pwd' ); @@ -211,18 +161,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 +172,7 @@ updateLock = false; // Clear any entered password. - $pass1Text.val( '' ); + $pass1.val( '' ); // Generate a new password. wp.ajax.post( 'generate-password' ) @@ -248,9 +190,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 +206,6 @@ $pass1.prop( 'disabled', false ); $pass2.prop( 'disabled', false ); $pass2.val( $pass1.val() ); - $pass1Wrap.removeClass( 'show-password' ); }); } @@ -305,7 +245,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 ); Index: src/wp-admin/css/forms.css =================================================================== --- src/wp-admin/css/forms.css (revision 45562) +++ src/wp-admin/css/forms.css (working copy) @@ -1370,6 +1370,10 @@ box-sizing: border-box; } + #profile-page .form-table #pass1 { + padding-right: 88px; + } + .form-table .form-required.form-invalid td:after { float: right; margin: -30px 3px 0 0; Index: src/wp-admin/css/install.css =================================================================== --- src/wp-admin/css/install.css (revision 45562) +++ src/wp-admin/css/install.css (working copy) @@ -212,8 +212,13 @@ font-family: Consolas, Monaco, monospace; } +.password-input-wrapper { + position: relative; +} + .wp-hide-pw > .dashicons { - line-height: inherit; + position: relative; + top: 3px; } #pass-strength-result { @@ -220,7 +225,7 @@ background-color: #eee; border: 1px solid #ddd; color: #23282d; - margin: -2px 5px 5px 0px; + margin: -2px 5px 5px 0; padding: 3px 5px; text-align: center; width: 218px; @@ -374,6 +379,28 @@ box-sizing: border-box; } + .wp-core-ui .wp-hide-pw { + background: transparent; + border: 1px solid transparent; + box-shadow: none; + line-height: 2; + margin: 0; + padding: 5px 9px; + position: absolute; + right: 0; + top: 0; + } + + .button.wp-hide-pw .text { + display: none; + } + + #pass-strength-result { + width: 100%; + box-sizing: border-box; + margin: -1px 0 5px; + padding: 8px; + } } body.language-chooser { Index: src/wp-admin/css/login.css =================================================================== --- src/wp-admin/css/login.css (revision 45562) +++ src/wp-admin/css/login.css (working copy) @@ -40,10 +40,6 @@ 0 0 2px 1px rgba(30, 140, 190, 0.8); } -.ie8 a:focus { - outline: #5b9dd9 solid 1px; -} - p { line-height: 1.5; } @@ -82,10 +78,6 @@ position: relative; } -.login .input.password-input { - margin: 0; -} - .login .input::-ms-clear { display: none; } @@ -105,7 +97,7 @@ padding: 5px 9px; position: absolute; right: 0; - top: 0; + top: 3px; } .login .button.button-secondary:hover { @@ -124,6 +116,14 @@ transform: none; } +.login .wp-pwd { + position: relative; +} + +.no-js .hide-if-no-js { + display: none; +} + .login form { margin-top: 20px; margin-left: 0; @@ -157,9 +157,10 @@ font-size: 14px; } -.login form .forgetmenot label { - font-size: 12px; - line-height: 1.58333333; +.login form .forgetmenot label, +.login form .pw-weak label { + line-height: 1.5; + vertical-align: baseline; } .login h1 { @@ -232,13 +233,15 @@ } .login form .input, -.login input[type="text"] { +.login input[type="text"], +.login input[type="password"] { font-size: 24px; width: 100%; padding: 5px; - margin: 2px 6px 16px 0; + margin: 3px 6px 16px 0; } +.login input[type="password"], .login-action-rp form .input, .login-action-rp input[type="text"] { padding: 5px 45px 5px 5px; @@ -250,14 +253,15 @@ background: #fbfbfb; } -.ie7 .login form .input, -.ie8 .login form .input { - font-family: sans-serif; +.login-action-rp input[type="text"], +.login-action-rp input[type="password"] { + box-shadow: none; + margin-bottom: 0; } + .login-action-rp input[type="text"] { box-shadow: none; - margin: 0; } .login #pass-strength-result { Index: src/wp-admin/install.php =================================================================== --- src/wp-admin/install.php (revision 45562) +++ src/wp-admin/install.php (working copy) @@ -142,7 +142,7 @@ -
+
+
- + +
-

-
+

+ -

+


@@ -760,11 +762,11 @@ do_action( 'resetpass_form', $user ); ?> -

+
- ' . __( 'Register For This Site' ) . '

', $errors ); ?>
-

- -

-

- -

+
+ + +
+
+ + +


-

+
- ID ) && ! is_super_admin( $user->ID ) ) { $redirect_to = user_admin_url(); @@ -1074,17 +1076,26 @@ } else { $aria_describedby_error = ''; } + + wp_enqueue_script( 'user-profile' ); ?>
-

- -

-

- -

+ + + class="input" value="" size="20" autocapitalize="off" /> + +
+ +
+
+ class="input password-input" value="" size="20" /> + +
+
+
-

-

+

/>
+
- + - + - + - + -

+
- +