WordPress.org
Get WordPress

Make WordPress Core


Ignore:
Timestamp:
09/23/2019 06:05:16 PM (5 years ago)
Author:
afercia
Message:

Login and Registration: Add a "Show password" button on the login page.

The ability for users to see the password they're typing improves usability and accessibility of the login users flow.

  • brings the login screen in line with the same feature already used in the New User, Edit User, and Reset Password pages
  • improves association of labels and input fields by using explicit association with for / id attributes
  • slightly increases the "Remember me" label font size

Props johnbillion, Iceable, audrasjb, joyously, adamsilverstein, boemedia, DrewAPicture, shadyvb, birgire, peterwilsoncc, pento, anevins, davidbaumwald, whyisjake, afercia.
Fixes #42888.

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/wp-login.php

    r46229 r46256  
    826826
    827827        <form name="lostpasswordform" id="lostpasswordform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=lostpassword', 'login_post' ) ); ?>" method="post">
    828             <p>
    829                 <label for="user_login" ><?php _e( 'Username or Email Address' ); ?><br />
    830                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" /></label>
    831             </p>
     828
     829            <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     830            <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" />
    832831            <?php
    833832
    … …  
    841840            ?>
    842841            <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    843             <p class="submit">
     842            <div class="submit">
    844843                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Get New Password' ); ?>" />
    845             </p>
     844            </div>
    846845        </form>
    847846
    848         <p id="nav">
     847        <div id="nav">
    849848            <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    850849            <?php
    … …  
    860859
    861860            ?>
    862         </p>
     861        </div>
    863862        <?php
    864863
    … …  
    937936
    938937            <div class="user-pass1-wrap">
    939                 <p>
    940                     <label for="pass1"><?php _e( 'New password' ); ?></label>
    941                 </p>
     938
     939                <label for="pass1"><?php _e( 'New password' ); ?></label>
    942940
    943941                <div class="wp-pwd">
    944                     <div class="password-input-wrapper">
    945                         <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
    946                         <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
    947                             <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    948                         </button>
    949                     </div>
     942                    <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 16 ) ); ?>" name="pass1" id="pass1" class="input password-input" size="24" value="" autocomplete="off" aria-describedby="pass-strength-result" />
     943
     944                    <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' ); ?>">
     945                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
     946                    </button>
    950947                    <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    951948                </div>
    952949                <div class="pw-weak">
    953                     <label>
    954                         <input type="checkbox" name="pw_weak" class="pw-checkbox" />
    955                         <?php _e( 'Confirm use of weak password' ); ?>
    956                     </label>
     950                    <input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
     951                    <label for="pw-weak"><?php _e( 'Confirm use of weak password' ); ?></label>
    957952                </div>
    958953            </div>
    959954
    960             <p class="user-pass2-wrap">
    961                 <label for="pass2"><?php _e( 'Confirm new password' ); ?></label><br />
     955            <div class="user-pass2-wrap">
     956                <label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
    962957                <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
    963             </p>
     958            </div>
    964959
    965960            <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    … …  
    979974            ?>
    980975            <input type="hidden" name="rp_key" value="<?php echo esc_attr( $rp_key ); ?>" />
    981             <p class="submit">
     976            <div class="submit">
    982977                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Reset Password' ); ?>" />
    983             </p>
     978            </div>
    984979        </form>
    985980
    986         <p id="nav">
     981        <div id="nav">
    987982            <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    988983            <?php
    … …  
    998993
    999994            ?>
    1000         </p>
     995        </div>
    1001996        <?php
    1002997
    … …  
    10581053        ?>
    10591054        <form name="registerform" id="registerform" action="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login_post' ) ); ?>" method="post" novalidate="novalidate">
    1060             <p>
    1061                 <label for="user_login"><?php _e( 'Username' ); ?><br />
    1062                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( wp_unslash( $user_login ) ); ?>" size="20" autocapitalize="off" /></label>
    1063             </p>
    1064             <p>
    1065                 <label for="user_email"><?php _e( 'Email' ); ?><br />
    1066                 <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" /></label>
    1067             </p>
     1055            <div>
     1056                <label for="user_login"><?php _e( 'Username' ); ?></label>
     1057                <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( wp_unslash( $user_login ) ); ?>" size="20" autocapitalize="off" />
     1058            </div>
     1059            <div>
     1060                <label for="user_email"><?php _e( 'Email' ); ?></label>
     1061                <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" />
     1062            </div>
    10681063            <?php
    10691064
    … …  
    10811076            <br class="clear" />
    10821077            <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    1083             <p class="submit">
     1078            <div class="submit">
    10841079                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Register' ); ?>" />
    1085             </p>
     1080            </div>
    10861081        </form>
    10871082
    1088         <p id="nav">
     1083        <div id="nav">
    10891084            <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    10901085                <?php echo esc_html( $login_link_separator ); ?>
    10911086            <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
    1092         </p>
     1087        </div>
    10931088        <?php
    10941089
    … …  
    13301325        }
    13311326
     1327        wp_enqueue_script( 'user-profile' );
    13321328        ?>
    13331329
    13341330        <form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
    1335             <p>
    1336                 <label for="user_login"><?php _e( 'Username or Email Address' ); ?><br />
    1337                 <input type="text" name="log" id="user_login"<?php echo $aria_describedby_error; ?> class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" /></label>
    1338             </p>
    1339             <p>
    1340                 <label for="user_pass"><?php _e( 'Password' ); ?><br />
    1341                 <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input" value="" size="20" /></label>
    1342             </p>
     1331            <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     1332            <input type="text" name="log" id="user_login"<?php echo $aria_describedby_error; ?> class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" />
     1333
     1334            <div class="user-pass-wrap">
     1335                <label for="user_pass"><?php _e( 'Password' ); ?></label>
     1336                <div class="wp-pwd">
     1337                    <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
     1338                    <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
     1339                        <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
     1340                    </button>
     1341                </div>
     1342            </div>
    13431343            <?php
    13441344
    … …  
    13511351
    13521352            ?>
    1353             <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" <?php checked( $rememberme ); ?> /> <?php esc_html_e( 'Remember Me' ); ?></label></p>
    1354             <p class="submit">
     1353            <div class="forgetmenot"><input name="rememberme" type="checkbox" id="rememberme" value="forever" <?php checked( $rememberme ); ?> /> <label for="rememberme"><?php esc_html_e( 'Remember Me' ); ?></label></div>
     1354            <div class="submit">
    13551355                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In' ); ?>" />
    13561356                <?php
    … …  
    13741374                ?>
    13751375                <input type="hidden" name="testcookie" value="1" />
    1376             </p>
     1376            </div>
    13771377        </form>
    13781378
    … …  
    13811381        if ( ! $interim_login ) {
    13821382            ?>
    1383             <p id="nav">
     1383            <div id="nav">
    13841384                <?php
    13851385
    … …  
    14001400
    14011401                ?>
    1402             </p>
     1402            </div>
    14031403            <?php
    14041404        }
Note: See TracChangeset for help on using the changeset viewer.