Changeset 56008

Timestamp:

06/23/2023 11:07:10 PM (18 months ago)

Author:

joedolson

Message:

Upgrade/Install: Show/hide toggle on password fields.

Add a show/hide toggle for new passwords in initial user creation and database access during install and setup process using the same model as on user profiles. Add a new password toggle script. Change setup config table to two columns, matching the install table layout.

Props xmarcos, matt, markjaquith, nazgul, akbigdog, intoxination, rob1n, MichaelH, empireoflight, rmccue, markoheijnen, r0uter, amansurov, bi0xid, DrewAPicture, Narthur, wpnook, markparnell, costdev, clorith, ryokuhi, sabernhardt, bgoewert, ironprogrammer, adeltahri, joedolson, mukesh27, audrasjb, sergeybiryukov.
Fixes #3534.

Location:

trunk

Files:

• Gruntfile.js (modified) (1 diff)
• src/js/_enqueues/admin/password-toggle.js (added)
• src/wp-admin/css/forms.css (modified) (3 diffs)
• src/wp-admin/css/install.css (modified) (5 diffs)
• src/wp-admin/install.php (modified) (1 diff)
• src/wp-admin/setup-config.php (modified) (2 diffs)
• src/wp-admin/user-edit.php (modified) (2 diffs)
• src/wp-admin/user-new.php (modified) (1 diff)
• src/wp-includes/script-loader.php (modified) (1 diff)

trunk/Gruntfile.js

@@ -318 +318 @@
                     [ WORKING_DIR + 'wp-admin/js/nav-menu.js' ]: [ './src/js/_enqueues/lib/nav-menu.js' ],
                     [ WORKING_DIR + 'wp-admin/js/password-strength-meter.js' ]: [ './src/js/_enqueues/wp/password-strength-meter.js' ],
+                    [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ],
                     [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ],
                     [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ],

trunk/src/wp-admin/css/forms.css

@@ -548 +548 @@
 .wp-generate-pw {
     margin-top: 1em;
+    position: relative;
+}
+
+.wp-pwd button {
+    height: min-content;
+}
+
+.wp-pwd button.pwd-toggle .dashicons {
+    position: relative;
+    top: 0.25rem;
 }
 
@@ -639 +649 @@
     border-color: #68de7c;
     opacity: 1;
+}
+
+.password-input-wrapper {
+    display: inline-block;
 }
 
@@ -1631 +1645 @@
     }
 
+    .password-input-wrapper {
+        display: block;
+    }
+
     p.search-box {
         float: none;

trunk/src/wp-admin/css/install.css

@@ -132 +132 @@
     text-align: left;
     padding: 10px 20px 10px 0;
-    width: 140px;
+    width: 115px;
     vertical-align: top;
 }
@@ -144 +144 @@
     margin: 4px 0 0;
     font-size: 11px;
+}
+
+.form-table .setup-description {
+    margin: 4px 0 0;
+    line-height: 1.6;
 }
 
@@ -150 +155 @@
     font-size: 15px;
     padding: 3px 5px;
+}
+
+.wp-pwd {
+    margin-top: 0;
+}
+
+.form-table .wp-pwd {
+    display: flex;
+    column-gap: 4px;
+}
+
+.form-table .password-input-wrapper {
+    width: 100%;
 }
 
@@ -162 +180 @@
 .form-table input[type=password],
 #pass-strength-result {
-    width: 218px;
+    width: 100%;
 }
 
@@ -287 +305 @@
     }
 
+    #pwd {
+        padding-right: 2.5rem;
+    }
+
     .wp-pwd #pass1 {
         padding-right: 50px;

trunk/src/wp-admin/install.php

@@ -141 +141 @@
                 <div class="wp-pwd">
                     <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
-                    <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+                    <div class="password-input-wrapper">
+                        <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
+                        <div id="pass-strength-result" aria-live="polite"></div>
+                    </div>
                     <button type="button" class="button wp-hide-pw hide-if-no-js" data-start-masked="<?php echo (int) isset( $_POST['admin_password'] ); ?>" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                         <span class="dashicons dashicons-hidden"></span>
                         <span class="text"><?php _e( 'Hide' ); ?></span>
                     </button>
-                    <div id="pass-strength-result" aria-live="polite"></div>
                 </div>
                 <p><span class="description important hide-if-no-js">

trunk/src/wp-admin/setup-config.php

@@ -224 +224 @@
         <tr>
             <th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th>
-            <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/></td>
-            <td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
+            <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/>
+            <p id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></p></td>
         </tr>
         <tr>
             <th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th>
-            <td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" /></td>
-            <td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>
+            <td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" />
+            <p id="uname-desc"><?php _e( 'Your database username.' ); ?></p></td>
         </tr>
         <tr>
             <th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
-            <td><input name="pwd" id="pwd" type="text" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" /></td>
-            <td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
+            <td>
+                <div class="wp-pwd">
+                    <input name="pwd" id="pwd" type="password" class="regular-text" data-reveal="1" aria-describedby="pwd-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'password', 'example password' ), ENT_QUOTES ); ?>" autocomplete="off" spellcheck="false" />
+                    <button type="button" class="button pwd-toggle hide-if-no-js" data-toggle="0" data-start-masked="1" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
+                        <span class="dashicons dashicons-visibility"></span>
+                        <span class="text"><?php _e( 'Show' ); ?></span>
+                    </button>
+                </div>
+                <p id="pwd-desc"><?php _e( 'Your database password.' ); ?></p>
+            </td>
         </tr>
         <tr>
             <th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>
-            <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /></td>
-            <td id="dbhost-desc">
+            <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" />
+            <p id="dbhost-desc">
             <?php
                 /* translators: %s: localhost */
                 printf( __( 'You should be able to get this info from your web host, if %s does not work.' ), '<code>localhost</code>' );
             ?>
-            </td>
+            </p></td>
         </tr>
         <tr>
             <th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th>
-            <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /></td>
-            <td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
+            <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" />
+            <p id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></p></td>
         </tr>
     </table>
@@ -261 +269 @@
 </form>
         <?php
+        wp_print_scripts( 'password-toggle' );
         break;
 

trunk/src/wp-admin/user-edit.php

@@ -644 +644 @@
                                     <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
                                     <div class="wp-pwd hide-if-js">
-                                        <span class="password-input-wrapper">
+                                        <div class="password-input-wrapper">
                                             <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="new-password" spellcheck="false" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
-                                        </span>
+                                            <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
+                                        </div>
                                         <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                                             <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
@@ -655 +656 @@
                                             <span class="text"><?php _e( 'Cancel' ); ?></span>
                                         </button>
-                                        <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
                                     </div>
                                 </td>

trunk/src/wp-admin/user-new.php

@@ -571 +571 @@
             <div class="wp-pwd">
                 <?php $initial_password = wp_generate_password( 24 ); ?>
-                <span class="password-input-wrapper">
+                <div class="password-input-wrapper">
                     <input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
-                </span>
+                    <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
+                </div>
                 <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
                     <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
                     <span class="text"><?php _e( 'Hide' ); ?></span>
                 </button>
-                <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
             </div>
         </td>

trunk/src/wp-includes/script-loader.php

@@ -1172 +1172 @@
     $scripts->set_translations( 'password-strength-meter' );
 
+    $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 );
+    $scripts->set_translations( 'password-toggle' );
+
     $scripts->add( 'application-passwords', "/wp-admin/js/application-passwords$suffix.js", array( 'jquery', 'wp-util', 'wp-api-request', 'wp-date', 'wp-i18n', 'wp-hooks' ), false, 1 );
     $scripts->set_translations( 'application-passwords' );