Ticket #32886: 32886.10.diff

diff --git src/wp-admin/css/forms.css src/wp-admin/css/forms.css
index 8e931a6..785f3ea 100644
--- src/wp-admin/css/forms.css
+++ 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 src/wp-admin/css/install.css src/wp-admin/css/install.css
index 149f7c4..a9f4991 100644
--- src/wp-admin/css/install.css
+++ 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 src/wp-admin/install.php src/wp-admin/install.php
index aef4c26..0f25ef3 100644
--- src/wp-admin/install.php
+++ src/wp-admin/install.php
@@ -137,17 +137,17 @@ function display_setup_form( $error = null ) {
                                </label>
                        </th>
                        <td>
-                               <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
-                               <div class="wp-pwd hide-if-js">
+                               <div class="">
                                        <?php $initial_password = wp_generate_password( 24 ); ?>
                                        <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                                                <span class="dashicons dashicons-visibility"></span>
                                                <span class="text"><?php _e( 'Hide' ); ?></span>
                                        </button>
                                        <div id="pass-strength-result" aria-live="polite"></div>
                                </div>
-                               <p><span class="description hide-if-no-js"><?php _e( 'A password reset link will be sent to you via email.' ); ?></span></p>
+                               <p><span class="description important hide-if-no-js">
+                               <strong><?php _e( 'Important:' )?></strong> <?php _e( 'You will need this password to log in, please store it in a secure location.' ); ?></span></p>
                        </td>
                </tr>
                <tr class="form-field form-required user-pass2-wrap hide-if-js">
diff --git src/wp-admin/js/user-profile.js src/wp-admin/js/user-profile.js
index 71ac46d..e00d92e 100644
--- src/wp-admin/js/user-profile.js
+++ 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( '<span class="password-input-wrapper"></span>' )
+                               .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);
+
                });
        });