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);
+
});
});