WordPress.org
Get WordPress

Make WordPress Core

Changeset 56008


Ignore:
Timestamp:
06/23/2023 11:07:10 PM (3 years 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:
1 added
8 edited

Legend:

Unmodified
Added
Removed

  • trunk/Gruntfile.js

    r55494 r56008  
    318318                                        [ WORKING_DIR + 'wp-admin/js/nav-menu.js' ]: [ './src/js/_enqueues/lib/nav-menu.js' ],
    319319                                        [ WORKING_DIR + 'wp-admin/js/password-strength-meter.js' ]: [ './src/js/_enqueues/wp/password-strength-meter.js' ],
     320                                        [ WORKING_DIR + 'wp-admin/js/password-toggle.js' ]: [ './src/js/_enqueues/admin/password-toggle.js' ],
    320321                                        [ WORKING_DIR + 'wp-admin/js/plugin-install.js' ]: [ './src/js/_enqueues/admin/plugin-install.js' ],
    321322                                        [ WORKING_DIR + 'wp-admin/js/post.js' ]: [ './src/js/_enqueues/admin/post.js' ],

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

    r55989 r56008  
    548548.wp-generate-pw {
    549549        margin-top: 1em;
     550        position: relative;
     551}
     552
     553.wp-pwd button {
     554        height: min-content;
     555}
     556
     557.wp-pwd button.pwd-toggle .dashicons {
     558        position: relative;
     559        top: 0.25rem;
    550560}
    551561
    … …  
    639649        border-color: #68de7c;
    640650        opacity: 1;
     651}
     652
     653.password-input-wrapper {
     654        display: inline-block;
    641655}
    642656
    … …  
    16311645        }
    16321646
     1647        .password-input-wrapper {
     1648                display: block;
     1649        }
     1650
    16331651        p.search-box {
    16341652                float: none;

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

    r51727 r56008  
    132132        text-align: left;
    133133        padding: 10px 20px 10px 0;
    134         width: 140px;
     134        width: 115px;
    135135        vertical-align: top;
    136136}
    … …  
    144144        margin: 4px 0 0;
    145145        font-size: 11px;
     146}
     147
     148.form-table .setup-description {
     149        margin: 4px 0 0;
     150        line-height: 1.6;
    146151}
    147152
    … …  
    150155        font-size: 15px;
    151156        padding: 3px 5px;
     157}
     158
     159.wp-pwd {
     160        margin-top: 0;
     161}
     162
     163.form-table .wp-pwd {
     164        display: flex;
     165        column-gap: 4px;
     166}
     167
     168.form-table .password-input-wrapper {
     169        width: 100%;
    152170}
    153171
    … …  
    162180.form-table input[type=password],
    163181#pass-strength-result {
    164         width: 218px;
     182        width: 100%;
    165183}
    166184
    … …  
    287305        }
    288306
     307        #pwd {
     308                padding-right: 2.5rem;
     309        }
     310
    289311        .wp-pwd #pass1 {
    290312                padding-right: 50px;

  • trunk/src/wp-admin/install.php

    r55933 r56008  
    141141                                <div class="wp-pwd">
    142142                                        <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
    143                                         <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" />
     143                                        <div class="password-input-wrapper">
     144                                                <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" />
     145                                                <div id="pass-strength-result" aria-live="polite"></div>
     146                                        </div>
    144147                                        <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' ); ?>">
    145148                                                <span class="dashicons dashicons-hidden"></span>
    146149                                                <span class="text"><?php _e( 'Hide' ); ?></span>
    147150                                        </button>
    148                                         <div id="pass-strength-result" aria-live="polite"></div>
    149151                                </div>
    150152                                <p><span class="description important hide-if-no-js">

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

    r55990 r56008  
    224224                <tr>
    225225                        <th scope="row"><label for="dbname"><?php _e( 'Database Name' ); ?></label></th>
    226                         <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/></td>
    227                         <td id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></td>
     226                        <td><input name="dbname" id="dbname" type="text" aria-describedby="dbname-desc" size="25" placeholder="wordpress"<?php echo $autofocus; ?>/>
     227                        <p id="dbname-desc"><?php _e( 'The name of the database you want to use with WordPress.' ); ?></p></td>
    228228                </tr>
    229229                <tr>
    230230                        <th scope="row"><label for="uname"><?php _e( 'Username' ); ?></label></th>
    231                         <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>
    232                         <td id="uname-desc"><?php _e( 'Your database username.' ); ?></td>
     231                        <td><input name="uname" id="uname" type="text" aria-describedby="uname-desc" size="25" placeholder="<?php echo htmlspecialchars( _x( 'username', 'example username' ), ENT_QUOTES ); ?>" />
     232                        <p id="uname-desc"><?php _e( 'Your database username.' ); ?></p></td>
    233233                </tr>
    234234                <tr>
    235235                        <th scope="row"><label for="pwd"><?php _e( 'Password' ); ?></label></th>
    236                         <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>
    237                         <td id="pwd-desc"><?php _e( 'Your database password.' ); ?></td>
     236                        <td>
     237                                <div class="wp-pwd">
     238                                        <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" />
     239                                        <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' ); ?>">
     240                                                <span class="dashicons dashicons-visibility"></span>
     241                                                <span class="text"><?php _e( 'Show' ); ?></span>
     242                                        </button>
     243                                </div>
     244                                <p id="pwd-desc"><?php _e( 'Your database password.' ); ?></p>
     245                        </td>
    238246                </tr>
    239247                <tr>
    240248                        <th scope="row"><label for="dbhost"><?php _e( 'Database Host' ); ?></label></th>
    241                         <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" /></td>
    242                         <td id="dbhost-desc">
     249                        <td><input name="dbhost" id="dbhost" type="text" aria-describedby="dbhost-desc" size="25" value="localhost" />
     250                        <p id="dbhost-desc">
    243251                        <?php
    244252                                /* translators: %s: localhost */
    245253                                printf( __( 'You should be able to get this info from your web host, if %s does not work.' ), '<code>localhost</code>' );
    246254                        ?>
    247                         </td>
     255                        </p></td>
    248256                </tr>
    249257                <tr>
    250258                        <th scope="row"><label for="prefix"><?php _e( 'Table Prefix' ); ?></label></th>
    251                         <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" /></td>
    252                         <td id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></td>
     259                        <td><input name="prefix" id="prefix" type="text" aria-describedby="prefix-desc" value="wp_" size="25" />
     260                        <p id="prefix-desc"><?php _e( 'If you want to run multiple WordPress installations in a single database, change this.' ); ?></p></td>
    253261                </tr>
    254262        </table>
    … …  
    261269</form>
    262270                <?php
     271                wp_print_scripts( 'password-toggle' );
    263272                break;
    264273

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

    r55988 r56008  
    644644                                                                        <button type="button" class="button wp-generate-pw hide-if-no-js" aria-expanded="false"><?php _e( 'Set New Password' ); ?></button>
    645645                                                                        <div class="wp-pwd hide-if-js">
    646                                                                                 <span class="password-input-wrapper">
     646                                                                                <div class="password-input-wrapper">
    647647                                                                                        <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" />
    648                                                                                 </span>
     648                                                                                        <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
     649                                                                                </div>
    649650                                                                                <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    650651                                                                                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    … …  
    655656                                                                                        <span class="text"><?php _e( 'Cancel' ); ?></span>
    656657                                                                                </button>
    657                                                                                 <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    658658                                                                        </div>
    659659                                                                </td>

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

    r55988 r56008  
    571571                        <div class="wp-pwd">
    572572                                <?php $initial_password = wp_generate_password( 24 ); ?>
    573                                 <span class="password-input-wrapper">
     573                                <div class="password-input-wrapper">
    574574                                        <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" />
    575                                 </span>
     575                                        <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
     576                                </div>
    576577                                <button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
    577578                                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    578579                                        <span class="text"><?php _e( 'Hide' ); ?></span>
    579580                                </button>
    580                                 <div style="display:none" id="pass-strength-result" aria-live="polite"></div>
    581581                        </div>
    582582                </td>

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

    r56002 r56008  
    11721172        $scripts->set_translations( 'password-strength-meter' );
    11731173
     1174        $scripts->add( 'password-toggle', "/wp-admin/js/password-toggle$suffix.js", array(), false, 1 );
     1175        $scripts->set_translations( 'password-toggle' );
     1176
    11741177        $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 );
    11751178        $scripts->set_translations( 'application-passwords' );
Note: See TracChangeset for help on using the changeset viewer.