diff --git a/src/wp-admin/css/forms.css b/src/wp-admin/css/forms.css index 8e931a6e55..785f3ea377 100644 --- a/src/wp-admin/css/forms.css +++ b/src/wp-admin/css/forms.css @@ -479,19 +479,19 @@ fieldset label, opacity: 1; } -#pass1.short { +#pass1.short, #pass1-text.short { border-color: #e35b5b; } -#pass1.bad { +#pass1.bad, #pass1-text.bad { border-color: #f78b53; } -#pass1.good { +#pass1.good, #pass1-text.good { border-color: #ffc733; } -#pass1.strong { +#pass1.strong, #pass1-text.strong { border-color: #83c373; } @@ -503,6 +503,20 @@ fieldset label, padding-top: 8px; } +#pass1-text, +.show-password #pass1 { + display: none; +} + +.show-password #pass1-text +{ + display: inline-block; +} + +.form-table span.description.important { + font-size: 12px; +} + p.search-box { float: right; margin: 0; diff --git a/src/wp-admin/css/install.css b/src/wp-admin/css/install.css index 149f7c4627..a9f49912ad 100644 --- a/src/wp-admin/css/install.css +++ b/src/wp-admin/css/install.css @@ -205,13 +205,14 @@ submit { background-color: #eee; border: 1px solid #ddd; color: #23282d; + margin: -2px 5px 5px 0px; + padding: 3px 5px; + text-align: center; + width: 218px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0; - padding: 3px 5px; - text-align: center; - width: 218px; } #pass-strength-result.short { @@ -238,19 +239,19 @@ submit { opacity: 1; } -[name="admin_password"].short { +#pass1.short, #pass1-text.short { border-color: #e35b5b; } -[name="admin_password"].bad { +#pass1.bad, #pass1-text.bad { border-color: #f78b53; } -[name="admin_password"].good { +#pass1.good, #pass1-text.good { border-color: #ffc733; } -[name="admin_password"].strong { +#pass1.strong, #pass1-text.strong { border-color: #83c373; } @@ -278,6 +279,20 @@ submit { direction: ltr; } +#pass1-text, +.show-password #pass1 { + display: none; +} + +.show-password #pass1-text +{ + display: inline-block; +} + +.form-table span.description.important { + font-size: 12px; +} + /* localization */ body.rtl, diff --git a/src/wp-admin/install.php b/src/wp-admin/install.php index aef4c269e3..b8a0b533b4 100644 --- a/src/wp-admin/install.php +++ b/src/wp-admin/install.php @@ -137,8 +137,7 @@ function display_setup_form( $error = null ) { - -
+
-

+

+

diff --git a/src/wp-admin/js/user-profile.js b/src/wp-admin/js/user-profile.js index 71ac46df4c..e00d92ea78 100644 --- a/src/wp-admin/js/user-profile.js +++ b/src/wp-admin/js/user-profile.js @@ -1,4 +1,4 @@ -/* global ajaxurl, pwsL10n, userProfileL10n */ +/* global ajaxurl, pwsL10n */ (function($){ $(function(){ var pw_new = $('.user-pass1-wrap'), @@ -13,17 +13,37 @@ pw_submitbtn_edit = $('#submit'), pw_submitbtn_new = $( '#createusersub' ), pw_checkbox = $('.pw-checkbox'), - pw_weak = $('.pw-weak') - ; + pw_weak = $('.pw-weak'), + // Set up a text version of the password input + newField = document.createElement( 'input'); + newField.type = 'text'; + var pwFieldText = $( newField ); + + if ( pw_field.length > 0 ) { + pwFieldText + .attr( { + 'id': 'pass1-text', + 'name': 'pass1-text', + 'autocomplete': 'off' + } ) + .addClass( pw_field[0].className ) + .data( 'pw', pw_field.data( 'pw' ) ) + .val( pw_field.val() ); + + pw_field + .wrap( '' ) + .after( pwFieldText ); + } + + var pwWrapper = pw_field.parent(); var generatePassword = window.generatePassword = function() { if ( typeof zxcvbn !== 'function' ) { setTimeout( generatePassword, 50 ); } else { pw_field.val( pw_field.data( 'pw' ) ); pw_field.trigger( 'propertychange' ); - pw_field.attr( 'type', 'text' ).focus(); - pw_field[0].setSelectionRange(100, 100); + pwWrapper.addClass( 'show-password' ); } }; @@ -31,23 +51,28 @@ pw_line.hide(); pw_togglebtn.show(); pw_generatebtn.show(); - if ( pw_field.data( 'reveal' ) == 1 ) { generatePassword(); } parentform.on('submit', function(){ pw_field2.val( pw_field.val() ); - pw_field.attr('type', 'password'); + pwWrapper.removeClass( 'show-password' ); }); + pwFieldText.on( 'input', function(){ + pw_field.val( pwFieldText.val() ); + pw_field.trigger( 'propertychange' ); + } ); + pw_field.on('input propertychange', function(){ setTimeout( function(){ var cssClass = pw_strength.attr('class'); - pw_field.removeClass( 'short bad good strong' ); + pwFieldText.val( pw_field.val() ); + pw_field.add(pwFieldText).removeClass( 'short bad good strong' ); if ( 'undefined' !== typeof cssClass ) { - pw_field.addClass( cssClass ); + pw_field.add(pwFieldText).addClass( cssClass ); if ( cssClass == 'short' || cssClass == 'bad' ) { if ( ! pw_checkbox.attr( 'checked' ) ) { pw_submitbtn_new.attr( 'disabled','disabled' ); @@ -88,23 +113,37 @@ pw_generatebtn.hide(); pw_line.show(); generatePassword(); + _.defer( function() { + pwFieldText.focus(); + if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) { + pwFieldText[0].setSelectionRange( 0, 100 ); + } + }, 0 ); + }); + pw_togglebtn.on( 'click', function() { var show = pw_togglebtn.attr( 'data-toggle' ); if ( show == 1 ) { - pw_field.attr( 'type', 'text' ); + pwWrapper.addClass( 'show-password' ); pw_togglebtn.attr({ 'data-toggle': 0, 'aria-label': userProfileL10n.ariaHide }) .find( '.text' ).text( userProfileL10n.hide ) ; + pwFieldText.focus(); + if ( ! _.isUndefined( pwFieldText[0].setSelectionRange ) ) { + pwFieldText[0].setSelectionRange( 0, 100 ); + } } else { - pw_field.attr( 'type', 'password' ); + pwWrapper.removeClass( 'show-password' ); pw_togglebtn.attr({ 'data-toggle': 1, 'aria-label': userProfileL10n.ariaShow }) - .find( '.text' ).text( userProfileL10n.show ) - ; + .find( '.text' ).text( userProfileL10n.show ); + pw_field.focus(); + if ( ! _.isUndefined( pw_field[0].setSelectionRange ) ) { + pw_field[0].setSelectionRange( 0, 100 ); + } } - pw_field.focus(); - pw_field[0].setSelectionRange(100, 100); + }); });