Make WordPress Core

Ticket #3534: 3534.3.diff

File 3534.3.diff, 12.9 KB (added by joedolson, 20 months ago)

Updated patch

  • src/js/_enqueues/admin/password-toggle.js

     
     1/**
     2 * Adds functionality for password visibility buttons to toggle between text and password input types.
     3 *
     4 * @since 6.3.0
     5 * @output wp-admin/js/password-toggle.js
     6 */
     7
     8( function () {
     9        var toggleElements, status, input, icon, label, __ = wp.i18n.__;
     10
     11        toggleElements = document.querySelectorAll( '.pwd-toggle' );
     12
     13        toggleElements.forEach( function (toggle) {
     14                toggle.classList.remove( 'hide-if-no-js' );
     15                toggle.addEventListener( 'click', togglePassword );
     16        } );
     17
     18        function togglePassword() {
     19                status = this.getAttribute( 'data-toggle' );
     20                input = this.parentElement.children.namedItem( 'pwd' );
     21                icon = this.getElementsByClassName( 'dashicons' )[ 0 ];
     22                label = this.getElementsByClassName( 'text' )[ 0 ];
     23
     24                if ( 0 === parseInt( status, 10 ) ) {
     25                        this.setAttribute( 'data-toggle', 1 );
     26                        this.setAttribute( 'aria-label', __( 'Hide password' ) );
     27                        input.setAttribute( 'type', 'text' );
     28                        label.innerHTML = __( 'Hide' );
     29                        icon.classList.remove( 'dashicons-visibility' );
     30                        icon.classList.add( 'dashicons-hidden' );
     31                } else {
     32                        this.setAttribute( 'data-toggle', 0 );
     33                        this.setAttribute( 'aria-label', __( 'Show password' ) );
     34                        input.setAttribute( 'type', 'password' );
     35                        label.innerHTML = __( 'Show' );
     36                        icon.classList.remove( 'dashicons-hidden' );
     37                        icon.classList.add( 'dashicons-visibility' );
     38                }
     39        }
     40} )();
  • src/wp-admin/css/forms.css

    Property changes on: src/js/_enqueues/admin/password-toggle.js
    ___________________________________________________________________
    Added: svn:eol-style
    ## -0,0 +1 ##
    +native
    \ No newline at end of property
     
    547547
    548548.wp-generate-pw {
    549549        margin-top: 1em;
     550        position: relative;
    550551}
    551552
     553.wp-pwd button {
     554        height: min-content;
     555}
     556
     557.wp-pwd button.pwd-toggle .dashicons {
     558        position: relative;
     559        top: 0.25rem;
     560}
     561
    552562.wp-pwd {
    553563        margin-top: 1em;
    554564        position: relative;
     
    640650        opacity: 1;
    641651}
    642652
     653.password-input-wrapper {
     654        display: inline-block;
     655}
     656
    643657.password-input-wrapper input {
    644658        font-family: Consolas, Monaco, monospace;
    645659}
     
    16301644                padding: 8px;
    16311645        }
    16321646
     1647        .password-input-wrapper {
     1648                display: block;
     1649        }
     1650
    16331651        p.search-box {
    16341652                float: none;
    16351653                position: absolute;
  • src/wp-admin/css/install.css

     
    131131        font-size: 14px;
    132132        text-align: left;
    133133        padding: 10px 20px 10px 0;
    134         width: 140px;
     134        width: 115px;
    135135        vertical-align: top;
    136136}
    137137
     
    145145        font-size: 11px;
    146146}
    147147
     148.form-table .setup-description {
     149        margin: 4px 0 0;
     150        line-height: 1.6;
     151}
     152
    148153.form-table input {
    149154        line-height: 1.33333333;
    150155        font-size: 15px;
     
    151156        padding: 3px 5px;
    152157}
    153158
     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%;
     170}
     171
    154172input,
    155173submit {
    156174        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
     
    161179.form-table input[type=url],
    162180.form-table input[type=password],
    163181#pass-strength-result {
    164         width: 218px;
     182        width: 100%;
    165183}
    166184
    167185.form-table th p {
     
    286304                box-sizing: border-box;
    287305        }
    288306
     307        #pwd {
     308                padding-right: 2.5rem;
     309        }
     310
    289311        .wp-pwd #pass1 {
    290312                padding-right: 50px;
    291313        }
  • src/wp-admin/install.php

     
    140140                        <td>
    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">
    151153                                <strong><?php _e( 'Important:' ); ?></strong>
  • src/wp-admin/setup-config.php

     
    223223        <table class="form-table" role="presentation">
    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>
    255263                <?php
     
    260268        <p class="step"><input name="submit" type="submit" value="<?php echo htmlspecialchars( __( 'Submit' ), ENT_QUOTES ); ?>" class="button button-large" /></p>
    261269</form>
    262270                <?php
     271                wp_print_scripts( 'password-toggle' );
    263272                break;
    264273
    265274        case 2:
  • src/wp-admin/user-edit.php

     
    643643                                                                        <input type="hidden" value=" " /><!-- #24364 workaround -->
    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>
    651652                                                                                        <span class="text"><?php _e( 'Hide' ); ?></span>
     
    654655                                                                                        <span class="dashicons dashicons-no" 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>
    660660                                                        </tr>
  • src/wp-admin/user-new.php

     
    570570                        <button type="button" class="button wp-generate-pw hide-if-no-js"><?php _e( 'Generate password' ); ?></button>
    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>
    583583        </tr>
  • src/wp-includes/script-loader.php

     
    11711171        );
    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' );
    11761179