Ticket #3534: password_show_hide_fix.patch

src/wp-admin/css/install.css

@@ -448 +448 @@
         display: none;
 }
 
+#toggle-password {
+        display: inline-block;
+        padding-top: 10px;
+}
+
 /**
  * HiDPI Displays
  */

src/wp-admin/js/setup-config.js

@@ +1 @@
+/**
+ * Adds show/hide toggle for the setup config password
+ */
+
+(function() {
+        var toggle, status, input, icon, label;
+        toggle = document.getElementById('toggle-password');
+        toggle.classList.remove('hide-if-no-js');
+
+        toggle.addEventListener( 'click', togglePassword );
+
+        function togglePassword() {
+                status = toggle.getAttribute( 'data-toggle' );
+                input = document.getElementById( 'pwd' );
+                icon = toggle.getElementsByClassName('dashicons')[0];
+                label = toggle.getElementsByClassName('text')[0];
+
+                if( status == 0 ) {
+                        toggle.setAttribute( 'data-toggle', 1 );
+                        input.setAttribute( 'type', 'text' );
+                        icon.classList.remove('dashicons-visibility');
+                        icon.classList.add('dashicons-hidden');
+                        label.innerHTML = setupConfigL10n.hide;
+                        toggle.setAttribute( 'aria-label', setupConfigL10n.ariaShow );
+                } else {
+                        toggle.setAttribute( 'data-toggle', 0 );
+                        input.setAttribute( 'type', 'password' );
+                        icon.classList.remove('dashicons-hidden');
+                        icon.classList.add('dashicons-visibility');
+                        label.innerHTML = setupConfigL10n.show;
+                        toggle.setAttribute( 'aria-label', setupConfigL10n.ariaHide );
+                }
+        }
+})();
+ No newline at end of file

src/wp-admin/setup-config.php

@@ -199 +199 @@
                 </tr>
                 <tr>
                         <th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
-                        <td><input name="pwd" id="pwd" type="text" size="25" value="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" /></td>
-                        <td><?php _e( 'Your database password.' ); ?></td>
+                        <td>
+                                <input name="pwd" id="pwd" type="password" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" />
+                                <button id="toggle-password" type="button" class="button button-secondary wp-toggle-pw hide-if-no-js" data-toggle="0" aria-label="Show password">
+                                                <span class="dashicons dashicons-visibility"></span>
+                                                <span class="text"><?php _e( 'Show' ); ?></span>
+                                </button>
+                        </td>
+                        <td><?php _e( '&hellip;and your MySQL password.' ); ?></td>
                 </tr>
                 <tr>
                         <th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>

src/wp-includes/script-loader.php

@@ -397 +397 @@
                 'ariaHide' => esc_attr__( 'Hide password' ),
         ) );
 
+        $scripts->add( 'setup-config', "/wp-admin/js/setup-config$suffix.js", array(), false, 1 );
+        did_action( 'init' ) && $scripts->localize( 'setup-config', 'setupConfigL10n', array(
+                'show'     => __( 'Show' ),
+                'hide'     => __( 'Hide' ),
+                'ariaShow' => esc_attr__( 'Show password' ),
+                'ariaHide' => esc_attr__( 'Hide password' ),
+        ) );
+
         $scripts->add( 'language-chooser', "/wp-admin/js/language-chooser$suffix.js", array( 'jquery' ), false, 1 );
 
         $scripts->add( 'user-suggest', "/wp-admin/js/user-suggest$suffix.js", array( 'jquery-ui-autocomplete' ), false, 1 );