Ticket #32886: 32886.7.diff

src/wp-admin/css/forms.css

@@ -503 +503 @@
         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;

src/wp-admin/css/install.css

@@ -278 +278 @@
         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,
 .rtl textarea,

src/wp-admin/install.php

@@ -137 +137 @@
                                 </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' ); ?>">
+                                        <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>"  />
+                                        <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
                                                 <span class="dashicons dashicons-visibility"></span>
                                                 <span class="text"><?php _e( 'Hide' ); ?></span>
                                         </button>
-                                        <div id="pass-strength-result" aria-live="polite"></div>
+                                        <div id="pass-strength-result"></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">

src/wp-admin/js/user-profile.js

@@ -1 @@
-/* global ajaxurl, pwsL10n, userProfileL10n */
+/* global ajaxurl, pwsL10n */
 (function($){
         $(function(){
                 var pw_new = $('.user-pass1-wrap'),
@@ -13 +13 @@
                         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 );
@@ -22 +43 @@
                         } 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 +51 @@
                 pw_line.hide();
                 pw_togglebtn.show();
                 pw_generatebtn.show();
-
                 if ( pw_field.data( 'reveal' ) == 1 ) {
                         generatePassword();
                 }
@@ -38 +57 @@
 
                 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');
+                                pwFieldText.val( pw_field.val() );
                                 pw_field.removeClass( 'short bad good strong' );
                                 if ( 'undefined' !== typeof cssClass ) {
                                         pw_field.addClass( cssClass );
@@ -88 +113 @@
                         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);
+
                 });
         });