Make WordPress Core

Ticket #42888: 42888.2.diff

File 42888.2.diff, 18.6 KB (added by shadyvb, 6 years ago)
  • src/js/_enqueues/admin/user-profile.js

     
    99                $pass1Row,
    1010                $pass1Wrap,
    1111                $pass1,
    12                 $pass1Text,
    13                 $pass1Label,
    1412                $pass2,
    1513                $weakRow,
    1614                $weakCheckbox,
     
    3634                }
    3735
    3836                if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
    39                         $pass1Wrap.addClass( 'show-password' );
     37                        $pass1.attr( 'type', 'text' );
    4038                } else {
    4139                        $toggleButton.trigger( 'click' );
    4240                }
     
    5048
    5149                $pass1Wrap = $pass1.parent();
    5250
    53                 $pass1Text = $( '<input type="text"/>' )
    54                         .attr( {
    55                                 'id':           'pass1-text',
    56                                 'name':         'pass1-text',
    57                                 'autocomplete': 'off'
    58                         } )
    59                         .addClass( $pass1[0].className )
    60                         .data( 'pw', $pass1.data( 'pw' ) )
    61                         .val( $pass1.val() )
    62                         .on( 'input', function () {
    63                                 if ( $pass1Text.val() === currentPass ) {
    64                                         return;
    65                                 }
    66                                 $pass2.val( $pass1Text.val() );
    67                                 $pass1.val( $pass1Text.val() ).trigger( 'pwupdate' );
    68                                 currentPass = $pass1Text.val();
    69                         } );
    70 
    71                 $pass1.after( $pass1Text );
    72 
    7351                if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
    7452                        generatePassword();
    7553                }
     
    8058                        }
    8159
    8260                        currentPass = $pass1.val();
    83                         if ( $pass1Text.val() !== currentPass ) {
    84                                 $pass1Text.val( currentPass );
    85                         }
    86                         $pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
     61
     62                        $pass1.removeClass( 'short bad good strong' );
    8763                        showOrHideWeakPasswordCheckbox();
    8864                } );
    8965        }
    9066
    91         function resetToggle() {
     67        function resetToggle( show ) {
    9268                $toggleButton
    93                         .data( 'toggle', 0 )
    9469                        .attr({
    95                                 'aria-label': userProfileL10n.ariaHide
     70                                'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
    9671                        })
    9772                        .find( '.text' )
    98                                 .text( userProfileL10n.hide )
     73                                .text( show ? userProfileL10n.show : userProfileL10n.hide )
    9974                        .end()
    10075                        .find( '.dashicons' )
    101                                 .removeClass( 'dashicons-visibility' )
    102                                 .addClass( 'dashicons-hidden' );
    103 
    104                 $pass1Text.focus();
    105 
    106                 $pass1Label.attr( 'for', 'pass1-text' );
     76                                .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
     77                                .addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
    10778        }
    10879
    10980        function bindToggleButton() {
    11081                $toggleButton = $pass1Row.find('.wp-hide-pw');
    11182                $toggleButton.show().on( 'click', function () {
    112                         if ( 1 === parseInt( $toggleButton.data( 'toggle' ), 10 ) ) {
    113                                 $pass1Wrap.addClass( 'show-password' );
    114 
    115                                 resetToggle();
    116 
    117                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    118                                         $pass1Text[0].setSelectionRange( 0, 100 );
    119                                 }
     83                        if ( 'password' === $pass1.attr( 'type' ) ) {
     84                                $pass1.attr( 'type', 'text' );
     85                                resetToggle( false );
    12086                        } else {
    121                                 $pass1Wrap.removeClass( 'show-password' );
    122                                 $toggleButton
    123                                         .data( 'toggle', 1 )
    124                                         .attr({
    125                                                 'aria-label': userProfileL10n.ariaShow
    126                                         })
    127                                         .find( '.text' )
    128                                                 .text( userProfileL10n.show )
    129                                         .end()
    130                                         .find( '.dashicons' )
    131                                                 .removeClass('dashicons-hidden')
    132                                                 .addClass('dashicons-visibility');
    133 
    134                                 $pass1.focus();
    135 
    136                                 $pass1Label.attr( 'for', 'pass1' );
     87                                $pass1.attr( 'type', 'password' );
     88                                resetToggle( true );
    13789
    13890                                if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
    13991                                        $pass1[0].setSelectionRange( 0, 100 );
    14092                                }
    14193                        }
     94                        $pass1.focus();
    14295                });
    14396        }
    14497
     
    147100                        $generateButton,
    148101                        $cancelButton;
    149102
    150                 $pass1Row = $('.user-pass1-wrap');
    151                 $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
     103                $pass1Row = $('.user-pass1-wrap, .user-pass-wrap');
    152104
    153105                // hide this
    154106                $('.user-pass2-wrap').hide();
     
    168120                $pass1 = $('#pass1');
    169121                if ( $pass1.length ) {
    170122                        bindPass1();
     123                } else {
     124                        // Password field for the login form
     125                        $pass1 = $('#user_pass');
    171126                }
    172127
    173128                /**
     
    189144                if ( $pass1.is( ':hidden' ) ) {
    190145                        $pass1.prop( 'disabled', true );
    191146                        $pass2.prop( 'disabled', true );
    192                         $pass1Text.prop( 'disabled', true );
    193147                }
    194148
    195149                $passwordWrapper = $pass1Row.find( '.wp-pwd' );
     
    211165                        // Enable the inputs when showing.
    212166                        $pass1.attr( 'disabled', false );
    213167                        $pass2.attr( 'disabled', false );
    214                         $pass1Text.attr( 'disabled', false );
    215168
    216                         if ( $pass1Text.val().length === 0 ) {
     169                        if ( $pass1.val().length === 0 ) {
    217170                                generatePassword();
    218171                        }
    219172
    220                         _.defer( function() {
    221                                 $pass1Text.focus();
    222                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    223                                         $pass1Text[0].setSelectionRange( 0, 100 );
    224                                 }
    225                         }, 0 );
    226173                } );
    227174
    228175                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
     
    230177                        updateLock = false;
    231178
    232179                        // Clear any entered password.
    233                         $pass1Text.val( '' );
     180                        $pass1.val( '' );
    234181
    235182                        // Generate a new password.
    236183                        wp.ajax.post( 'generate-password' )
     
    248195                        // Disable the inputs when hiding to prevent autofill and submission.
    249196                        $pass1.prop( 'disabled', true );
    250197                        $pass2.prop( 'disabled', true );
    251                         $pass1Text.prop( 'disabled', true );
    252198
    253                         resetToggle();
     199                        resetToggle( false );
    254200
    255201                        if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
    256202                                // Clear password field to prevent update
     
    265211                        $pass1.prop( 'disabled', false );
    266212                        $pass2.prop( 'disabled', false );
    267213                        $pass2.val( $pass1.val() );
    268                         $pass1Wrap.removeClass( 'show-password' );
    269214                });
    270215        }
    271216
     
    305250                var passStrength = $('#pass-strength-result')[0];
    306251
    307252                if ( passStrength.className ) {
    308                         $pass1.add( $pass1Text ).addClass( passStrength.className );
     253                        $pass1.addClass( passStrength.className );
    309254                        if ( $( passStrength ).is( '.short, .bad' ) ) {
    310255                                if ( ! $weakCheckbox.prop( 'checked' ) ) {
    311256                                        $submitButtons.prop( 'disabled', true );
  • src/wp-admin/css/forms.css

     
    13701370                box-sizing: border-box;
    13711371        }
    13721372
     1373        #profile-page .form-table #pass1 {
     1374                padding-right: 88px;
     1375        }
     1376
    13731377        .form-table .form-required.form-invalid td:after {
    13741378                float: right;
    13751379                margin: -30px 3px 0 0;
  • src/wp-admin/css/login.css

     
    8080
    8181.login .password-input-wrapper {
    8282        position: relative;
     83        margin: 2px 0 16px 0;
    8384}
    8485
    8586.login .input.password-input {
     87        padding-right: 40px;
    8688        margin: 0;
    8789}
    8890
     
    124126        transform: none;
    125127}
    126128
     129.login .wp-hide-pw-wrap {
     130        vertical-align: middle;
     131        height: 28px;
     132}
     133
     134.login .wp-pwd {
     135        position: relative;
     136}
     137
     138.login .wp-pwd .button {
     139        background: 0 0;
     140        border: none;
     141        box-shadow: none;
     142        line-height: 2;
     143        margin: 0;
     144        padding: 5px 10px;
     145        position: absolute;
     146        right: 0;
     147        top: 0;
     148}
     149
     150.login .wp-pwd .button span.dashicons {
     151        vertical-align: middle;
     152        top: 0;
     153}
     154
     155.no-js .hide-if-no-js{
     156        display: none;
     157}
     158
    127159.login form {
    128160        margin-top: 20px;
    129161        margin-left: 0;
     
    262294
    263295.login #pass-strength-result {
    264296        font-weight: 600;
    265         margin: -1px 5px 16px 0;
     297        margin: -17px 5px 16px 0;
    266298        padding: 6px 5px;
    267299        text-align: center;
    268300        width: 100%;
  • src/wp-login.php

     
    186186
    187187        ?>
    188188        </head>
    189         <body class="login <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
     189        <body class="login no-js <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
     190        <script type="text/javascript">
     191                document.body.className = document.body.className.replace('no-js','js');
     192        </script>
    190193        <?php
    191194        /**
    192195         * Fires in the login page header after the body tag is opened.
     
    620623                ?>
    621624
    622625        <form name="lostpasswordform" id="lostpasswordform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=lostpassword', 'login_post' ) ); ?>" method="post">
    623         <p>
    624                 <label for="user_login" ><?php _e( 'Username or Email Address' ); ?><br />
    625                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" /></label>
    626         </p>
     626        <div>
     627                <label for="user_login" ><?php _e( 'Username or Email Address' ); ?></label>
     628                <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" />
     629        </div>
    627630                <?php
    628631                /**
    629632                 * Fires inside the lostpassword form tags, before the hidden fields.
     
    633636                do_action( 'lostpassword_form' );
    634637                ?>
    635638                <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    636                 <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Get New Password' ); ?>" /></p>
     639                <div class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Get New Password' ); ?>" /></div>
    637640        </form>
    638641
    639         <p id="nav">
    640         <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
     642        <div id="nav">
     643                <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    641644                <?php
    642645                if ( get_option( 'users_can_register' ) ) :
    643646                        $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );
     
    646649
    647650                        /** This filter is documented in wp-includes/general-template.php */
    648651                        echo apply_filters( 'register', $registration_url );
    649         endif;
     652                endif;
    650653                ?>
    651         </p>
     654        </div>
    652655
    653656                <?php
    654657                login_footer( 'user_login' );
     
    720723        <input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
    721724
    722725        <div class="user-pass1-wrap">
    723                 <p>
    724                         <label for="pass1"><?php _e( 'New password' ); ?></label>
    725                 </p>
     726
     727                <label for="pass1"><?php _e( 'New password' ); ?></label>
    726728
    727729                <div class="wp-pwd">
    728730                        <div class="password-input-wrapper">
    729731                                <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" />
    730                                 <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
    731                                         <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    732                                 </button>
     732
     733                                <div class="wp-hide-pw-wrap hide-if-no-js">
     734                                        <button type="button" class="button button-secondary wp-hide-pw" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
     735                                                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
     736                                        </button>
     737                                </div>
     738
    733739                        </div>
    734740                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    735741                </div>
     
    741747                </div>
    742748        </div>
    743749
    744         <p class="user-pass2-wrap">
    745                 <label for="pass2"><?php _e( 'Confirm new password' ); ?></label><br />
     750        <div class="user-pass2-wrap">
     751                <label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
    746752                <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
    747         </p>
     753        </div>
    748754
    749755        <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    750756        <br class="clear" />
     
    760766                do_action( 'resetpass_form', $user );
    761767                ?>
    762768        <input type="hidden" name="rp_key" value="<?php echo esc_attr( $rp_key ); ?>" />
    763         <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Reset Password' ); ?>" /></p>
     769        <div class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Reset Password' ); ?>" /></div>
    764770        </form>
    765771
    766         <p id="nav">
    767         <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
     772        <div id="nav">
     773                <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    768774                <?php
    769775                if ( get_option( 'users_can_register' ) ) :
    770776                        $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );
     
    773779
    774780                        /** This filter is documented in wp-includes/general-template.php */
    775781                        echo apply_filters( 'register', $registration_url );
    776         endif;
     782                endif;
    777783                ?>
    778         </p>
     784        </div>
    779785
    780786                <?php
    781787                login_footer( 'user_pass' );
     
    832838                login_header( __( 'Registration Form' ), '<p class="message register">' . __( 'Register For This Site' ) . '</p>', $errors );
    833839                ?>
    834840        <form name="registerform" id="registerform" action="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login_post' ) ); ?>" method="post" novalidate="novalidate">
    835         <p>
    836                 <label for="user_login"><?php _e( 'Username' ); ?><br />
    837                 <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>
    838         </p>
    839         <p>
    840                 <label for="user_email"><?php _e( 'Email' ); ?><br />
    841                 <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" /></label>
    842         </p>
     841        <div>
     842                <label for="user_login"><?php _e( 'Username' ); ?></label>
     843                <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( wp_unslash( $user_login ) ); ?>" size="20" autocapitalize="off" />
     844        </div>
     845        <div>
     846                <label for="user_email"><?php _e( 'Email' ); ?></label>
     847                <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" />
     848        </div>
    843849                <?php
    844850                /**
    845851                 * Fires following the 'Email' field in the user registration form.
     
    851857        <p id="reg_passmail"><?php _e( 'Registration confirmation will be emailed to you.' ); ?></p>
    852858        <br class="clear" />
    853859        <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    854         <p class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Register' ); ?>" /></p>
     860        <div class="submit"><input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Register' ); ?>" /></div>
    855861        </form>
    856862
    857         <p id="nav">
    858         <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
     863        <div id="nav">
     864                <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    859865                <?php echo esc_html( $login_link_separator ); ?>
    860         <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
    861         </p>
     866                <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
     867        </div>
    862868
    863869                <?php
    864870                login_footer( 'user_login' );
     
    10741080                } else {
    10751081                        $aria_describedby_error = '';
    10761082                }
     1083
     1084                wp_enqueue_script( 'user-profile' );
    10771085                ?>
    10781086
    10791087        <form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
    1080         <p>
    1081                 <label for="user_login"><?php _e( 'Username or Email Address' ); ?><br />
    1082                 <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>
    1083         </p>
    1084         <p>
    1085                 <label for="user_pass"><?php _e( 'Password' ); ?><br />
    1086                 <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input" value="" size="20" /></label>
    1087         </p>
     1088        <div>
     1089                <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     1090                <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" />
     1091        </div>
     1092                <div class="user-pass-wrap">
     1093                        <label for="user_pass"><?php _e( 'Password' ); ?></label>
     1094                        <div class="wp-pwd">
     1095                                <div class="password-input-wrapper">
     1096                                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
     1097                                        <div class="wp-hide-pw-wrap hide-if-no-js" style="">
     1098                                                <button type="button" class="button button-secondary wp-hide-pw" data-toggle="0" title="<?php esc_attr_e( 'Show password' ); ?>" aria-label="<?php esc_attr_e( 'Show password' ); ?>">
     1099                                                        <span class="dashicons dashicons-visibility"></span>
     1100                                                </button>
     1101                                        </div>
     1102                                </div>
     1103                        </div>
     1104                </div>
    10881105                <?php
    10891106                /**
    10901107                 * Fires following the 'Password' field in the login form.
     
    10931110                 */
    10941111                do_action( 'login_form' );
    10951112                ?>
    1096         <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>
    1097         <p class="submit">
     1113        <div class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" <?php checked( $rememberme ); ?> /> <?php esc_html_e( 'Remember Me' ); ?></label></div>
     1114        <div class="submit">
    10981115                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In' ); ?>" />
    10991116                <?php   if ( $interim_login ) { ?>
    11001117                <input type="hidden" name="interim-login" value="1" />
     
    11051122                <input type="hidden" name="customize-login" value="1" />
    11061123        <?php endif; ?>
    11071124                <input type="hidden" name="testcookie" value="1" />
    1108         </p>
     1125        </div>
    11091126        </form>
    11101127
    1111                 <?php if ( ! $interim_login ) { ?>
    1112         <p id="nav">
    1113                         <?php
    1114                         if ( ! isset( $_GET['checkemail'] ) || ! in_array( $_GET['checkemail'], array( 'confirm', 'newpass' ) ) ) :
    1115                                 if ( get_option( 'users_can_register' ) ) :
    1116                                         $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );
     1128        <?php if ( ! $interim_login ) { ?>
     1129        <div id="nav">
     1130                <?php
     1131                if ( ! isset( $_GET['checkemail'] ) || ! in_array( $_GET['checkemail'], array( 'confirm', 'newpass' ) ) ) :
     1132                        if ( get_option( 'users_can_register' ) ) :
     1133                                $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );
    11171134
    1118                                         /** This filter is documented in wp-includes/general-template.php */
    1119                                         echo apply_filters( 'register', $registration_url );
     1135                                /** This filter is documented in wp-includes/general-template.php */
     1136                                echo apply_filters( 'register', $registration_url );
    11201137
    1121                                         echo esc_html( $login_link_separator );
    1122                                 endif;
    1123                                 ?>
     1138                                echo esc_html( $login_link_separator );
     1139                        endif;
     1140                        ?>
    11241141                <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
    1125                         <?php endif; ?>
    1126         </p>
     1142                <?php endif; ?>
     1143        </div>
    11271144        <?php } ?>
    11281145
    11291146        <script type="text/javascript">