Make WordPress Core

Ticket #42888: 42888.4.diff

File 42888.4.diff, 17.8 KB (added by afercia, 5 years ago)
  • src/js/_enqueues/admin/user-profile.js

     
    77        var updateLock = false,
    88
    99                $pass1Row,
    10                 $pass1Wrap,
    1110                $pass1,
    12                 $pass1Text,
    13                 $pass1Label,
    1411                $pass2,
    1512                $weakRow,
    1613                $weakCheckbox,
     
    3633                }
    3734
    3835                if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
    39                         $pass1Wrap.addClass( 'show-password' );
     36                        $pass1.attr( 'type', 'text' );
    4037                } else {
    4138                        $toggleButton.trigger( 'click' );
    4239                }
     
    4845        function bindPass1() {
    4946                currentPass = $pass1.val();
    5047
    51                 $pass1Wrap = $pass1.parent();
    52 
    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 
    7348                if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
    7449                        generatePassword();
    7550                }
     
    8055                        }
    8156
    8257                        currentPass = $pass1.val();
    83                         if ( $pass1Text.val() !== currentPass ) {
    84                                 $pass1Text.val( currentPass );
    85                         }
    86                         $pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
     58
     59                        $pass1.removeClass( 'short bad good strong' );
    8760                        showOrHideWeakPasswordCheckbox();
    8861                } );
    8962        }
    9063
    91         function resetToggle() {
     64        function resetToggle( show ) {
    9265                $toggleButton
    93                         .data( 'toggle', 0 )
    9466                        .attr({
    95                                 'aria-label': userProfileL10n.ariaHide
     67                                'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
    9668                        })
    9769                        .find( '.text' )
    98                                 .text( userProfileL10n.hide )
     70                                .text( show ? userProfileL10n.show : userProfileL10n.hide )
    9971                        .end()
    10072                        .find( '.dashicons' )
    101                                 .removeClass( 'dashicons-visibility' )
    102                                 .addClass( 'dashicons-hidden' );
    103 
    104                 $pass1Text.focus();
    105 
    106                 $pass1Label.attr( 'for', 'pass1-text' );
     73                                .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
     74                                .addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
    10775        }
    10876
    10977        function bindToggleButton() {
    11078                $toggleButton = $pass1Row.find('.wp-hide-pw');
    11179                $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                                 }
     80                        if ( 'password' === $pass1.attr( 'type' ) ) {
     81                                $pass1.attr( 'type', 'text' );
     82                                resetToggle( false );
    12083                        } 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');
     84                                $pass1.attr( 'type', 'password' );
     85                                resetToggle( true );
     86                        }
    13387
    134                                 $pass1.focus();
     88                        $pass1.focus();
    13589
    136                                 $pass1Label.attr( 'for', 'pass1' );
    137 
    138                                 if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
    139                                         $pass1[0].setSelectionRange( 0, 100 );
    140                                 }
     90                        if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
     91                                $pass1[0].setSelectionRange( 0, 100 );
    14192                        }
    14293                });
    14394        }
     
    14798                        $generateButton,
    14899                        $cancelButton;
    149100
    150                 $pass1Row = $('.user-pass1-wrap');
    151                 $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
     101                $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
    152102
    153                 // hide this
     103                // Hide the confirm password field when JavaScript support is enabled.
    154104                $('.user-pass2-wrap').hide();
    155105
    156106                $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
     
    168118                $pass1 = $('#pass1');
    169119                if ( $pass1.length ) {
    170120                        bindPass1();
     121                } else {
     122                        // Password field for the login form.
     123                        $pass1 = $( '#user_pass' );
    171124                }
    172125
    173126                /**
     
    189142                if ( $pass1.is( ':hidden' ) ) {
    190143                        $pass1.prop( 'disabled', true );
    191144                        $pass2.prop( 'disabled', true );
    192                         $pass1Text.prop( 'disabled', true );
    193145                }
    194146
    195147                $passwordWrapper = $pass1Row.find( '.wp-pwd' );
     
    211163                        // Enable the inputs when showing.
    212164                        $pass1.attr( 'disabled', false );
    213165                        $pass2.attr( 'disabled', false );
    214                         $pass1Text.attr( 'disabled', false );
    215166
    216                         if ( $pass1Text.val().length === 0 ) {
     167                        if ( $pass1.val().length === 0 ) {
    217168                                generatePassword();
    218169                        }
    219 
    220                         _.defer( function() {
    221                                 $pass1Text.focus();
    222                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    223                                         $pass1Text[0].setSelectionRange( 0, 100 );
    224                                 }
    225                         }, 0 );
    226170                } );
    227171
    228172                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
     
    230174                        updateLock = false;
    231175
    232176                        // Clear any entered password.
    233                         $pass1Text.val( '' );
     177                        $pass1.val( '' );
    234178
    235179                        // Generate a new password.
    236180                        wp.ajax.post( 'generate-password' )
     
    248192                        // Disable the inputs when hiding to prevent autofill and submission.
    249193                        $pass1.prop( 'disabled', true );
    250194                        $pass2.prop( 'disabled', true );
    251                         $pass1Text.prop( 'disabled', true );
    252195
    253                         resetToggle();
     196                        resetToggle( false );
    254197
    255198                        if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
    256199                                // Clear password field to prevent update
     
    265208                        $pass1.prop( 'disabled', false );
    266209                        $pass2.prop( 'disabled', false );
    267210                        $pass2.val( $pass1.val() );
    268                         $pass1Wrap.removeClass( 'show-password' );
    269211                });
    270212        }
    271213
     
    305247                var passStrength = $('#pass-strength-result')[0];
    306248
    307249                if ( passStrength.className ) {
    308                         $pass1.add( $pass1Text ).addClass( passStrength.className );
     250                        $pass1.addClass( passStrength.className );
    309251                        if ( $( passStrength ).is( '.short, .bad' ) ) {
    310252                                if ( ! $weakCheckbox.prop( 'checked' ) ) {
    311253                                        $submitButtons.prop( 'disabled', true );
  • src/wp-admin/css/forms.css

     
    14751475                position: relative;
    14761476        }
    14771477
    1478         .wp-pwd [type="text"],
    1479         .wp-pwd [type="password"] {
    1480                 padding-right: 88px;
     1478        /* Needs higher specificity than normal input type text and password. */
     1479        #profile-page .form-table #pass1 {
     1480                padding-right: 90px;
    14811481        }
    14821482
    14831483        .wp-pwd button.button {
  • src/wp-admin/css/install.css

     
    301301                box-sizing: border-box;
    302302        }
    303303
     304        .wp-pwd #pass1 {
     305                padding-right: 50px;
     306        }
     307
     308        .wp-pwd .button.wp-hide-pw {
     309                right: 0;
     310        }
     311
     312        #pass-strength-result {
     313                width: 100%;
     314        }
    304315}
    305316
    306317body.language-chooser {
  • src/wp-admin/css/login.css

     
    3737                0 0 2px 1px rgba(30, 140, 190, 0.8);
    3838}
    3939
    40 .ie8 a:focus {
    41         outline: #5b9dd9 solid 1px;
    42 }
    43 
    4440p {
    4541        line-height: 1.5;
    4642}
     
    7571        padding: 0;
    7672}
    7773
    78 .login .password-input-wrapper {
    79         position: relative;
    80 }
    81 
    82 .login .input.password-input {
    83         margin: 0;
    84 }
    85 
    8674.login .input::-ms-clear {
    8775        display: none;
    8876}
     
    10290        padding: 5px 9px;
    10391        position: absolute;
    10492        right: 0;
    105         top: 0;
     93        top: 3px;
    10694}
    10795
    10896.login .button.button-secondary:hover {
     
    121109        transform: none;
    122110}
    123111
     112.login .wp-pwd {
     113        position: relative;
     114}
     115
     116.no-js .hide-if-no-js {
     117        display: none;
     118}
     119
    124120.login form {
    125121        margin-top: 20px;
    126122        margin-left: 0;
     
    195191        font-size: 14px;
    196192}
    197193
    198 .login form .forgetmenot label {
    199         font-size: 12px;
    200         line-height: 1.58333333;
     194.login .forgetmenot label,
     195.login .pw-weak label {
     196        line-height: 1.5;
     197        vertical-align: baseline;
    201198}
    202199
    203200.login h1 {
     
    270267}
    271268
    272269.login form .input,
    273 .login input[type="text"] {
     270.login input[type="text"],
     271.login input[type="password"] {
    274272        font-size: 24px;
    275273        width: 100%;
    276274        padding: 5px;
    277         margin: 2px 6px 16px 0;
     275        margin: 3px 6px 16px 0;
    278276}
    279277
     278.login input[type="password"],
    280279.login-action-rp form .input,
    281280.login-action-rp input[type="text"] {
    282281        padding: 5px 45px 5px 5px;
     
    288287        background: #fbfbfb;
    289288}
    290289
    291 .ie7 .login form .input,
    292 .ie8 .login form .input {
    293         font-family: sans-serif;
    294 }
    295 
    296 .login-action-rp input[type="text"] {
     290.login-action-rp input[type="text"],
     291.login-action-rp input[type="password"] {
    297292        box-shadow: none;
    298         margin: 0;
     293        margin-bottom: 0;
    299294}
    300295
    301296.login #pass-strength-result {
  • src/wp-login.php

     
    190190
    191191        ?>
    192192        </head>
    193         <body class="login <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
     193        <body class="login no-js <?php echo esc_attr( implode( ' ', $classes ) ); ?>">
     194        <script type="text/javascript">
     195                document.body.className = document.body.className.replace( 'no-js', 'js' );
     196        </script>
    194197        <?php
    195198        /**
    196199         * Fires in the login page header after the body tag is opened.
     
    827830                ?>
    828831
    829832                <form name="lostpasswordform" id="lostpasswordform" action="<?php echo esc_url( network_site_url( 'wp-login.php?action=lostpassword', 'login_post' ) ); ?>" method="post">
    830                         <p>
    831                                 <label for="user_login" ><?php _e( 'Username or Email Address' ); ?><br />
    832                                 <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" /></label>
    833                         </p>
     833
     834                        <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     835                        <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" />
    834836                        <?php
    835837
    836838                        /**
     
    842844
    843845                        ?>
    844846                        <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    845                         <p class="submit">
     847                        <div class="submit">
    846848                                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Get New Password' ); ?>" />
    847                         </p>
     849                        </div>
    848850                </form>
    849851
    850                 <p id="nav">
     852                <div id="nav">
    851853                        <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    852854                        <?php
    853855
     
    861863                        }
    862864
    863865                        ?>
    864                 </p>
     866                </div>
    865867                <?php
    866868
    867869                login_footer( 'user_login' );
     
    938940                        <input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
    939941
    940942                        <div class="user-pass1-wrap">
    941                                 <p>
    942                                         <label for="pass1"><?php _e( 'New password' ); ?></label>
    943                                 </p>
    944943
     944                                <label for="pass1"><?php _e( 'New password' ); ?></label>
     945
    945946                                <div class="wp-pwd">
    946                                         <div class="password-input-wrapper">
    947                                                 <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" />
    948                                                 <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js">
    949                                                         <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    950                                                 </button>
    951                                         </div>
     947                                        <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" />
     948
     949                                        <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' ); ?>">
     950                                                <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
     951                                        </button>
    952952                                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    953953                                </div>
    954954                                <div class="pw-weak">
    955                                         <label>
    956                                                 <input type="checkbox" name="pw_weak" class="pw-checkbox" />
    957                                                 <?php _e( 'Confirm use of weak password' ); ?>
    958                                         </label>
     955                                        <input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
     956                                        <label for="pw-weak"><?php _e( 'Confirm use of weak password' ); ?></label>
    959957                                </div>
    960958                        </div>
    961959
    962                         <p class="user-pass2-wrap">
    963                                 <label for="pass2"><?php _e( 'Confirm new password' ); ?></label><br />
     960                        <div class="user-pass2-wrap">
     961                                <label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
    964962                                <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
    965                         </p>
     963                        </div>
    966964
    967965                        <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    968966                        <br class="clear" />
     
    980978
    981979                        ?>
    982980                        <input type="hidden" name="rp_key" value="<?php echo esc_attr( $rp_key ); ?>" />
    983                         <p class="submit">
     981                        <div class="submit">
    984982                                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Reset Password' ); ?>" />
    985                         </p>
     983                        </div>
    986984                </form>
    987985
    988                 <p id="nav">
     986                <div id="nav">
    989987                        <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    990988                        <?php
    991989
     
    999997                        }
    1000998
    1001999                        ?>
    1002                 </p>
     1000                </div>
    10031001                <?php
    10041002
    10051003                login_footer( 'user_pass' );
     
    10591057
    10601058                ?>
    10611059                <form name="registerform" id="registerform" action="<?php echo esc_url( site_url( 'wp-login.php?action=register', 'login_post' ) ); ?>" method="post" novalidate="novalidate">
    1062                         <p>
    1063                                 <label for="user_login"><?php _e( 'Username' ); ?><br />
    1064                                 <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>
    1065                         </p>
    1066                         <p>
    1067                                 <label for="user_email"><?php _e( 'Email' ); ?><br />
    1068                                 <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" /></label>
    1069                         </p>
     1060                        <div>
     1061                                <label for="user_login"><?php _e( 'Username' ); ?></label>
     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" />
     1063                        </div>
     1064                        <div>
     1065                                <label for="user_email"><?php _e( 'Email' ); ?></label>
     1066                                <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" />
     1067                        </div>
    10701068                        <?php
    10711069
    10721070                        /**
     
    10821080                        </p>
    10831081                        <br class="clear" />
    10841082                        <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    1085                         <p class="submit">
     1083                        <div class="submit">
    10861084                                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Register' ); ?>" />
    1087                         </p>
     1085                        </div>
    10881086                </form>
    10891087
    1090                 <p id="nav">
     1088                <div id="nav">
    10911089                        <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    10921090                                <?php echo esc_html( $login_link_separator ); ?>
    10931091                        <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
    1094                 </p>
     1092                </div>
    10951093                <?php
    10961094
    10971095                login_footer( 'user_login' );
     
    13311329                        $aria_describedby_error = '';
    13321330                }
    13331331
     1332                wp_enqueue_script( 'user-profile' );
    13341333                ?>
    13351334
    13361335                <form name="loginform" id="loginform" action="<?php echo esc_url( site_url( 'wp-login.php', 'login_post' ) ); ?>" method="post">
    1337                         <p>
    1338                                 <label for="user_login"><?php _e( 'Username or Email Address' ); ?><br />
    1339                                 <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>
    1340                         </p>
    1341                         <p>
    1342                                 <label for="user_pass"><?php _e( 'Password' ); ?><br />
    1343                                 <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input" value="" size="20" /></label>
    1344                         </p>
     1336                        <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     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" />
     1338
     1339                        <div class="user-pass-wrap">
     1340                                <label for="user_pass"><?php _e( 'Password' ); ?></label>
     1341                                <div class="wp-pwd">
     1342                                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
     1343                                        <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' ); ?>">
     1344                                                <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
     1345                                        </button>
     1346                                </div>
     1347                        </div>
    13451348                        <?php
    13461349
    13471350                        /**
     
    13521355                        do_action( 'login_form' );
    13531356
    13541357                        ?>
    1355                         <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>
    1356                         <p class="submit">
     1358                        <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>
     1359                        <div class="submit">
    13571360                                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In' ); ?>" />
    13581361                                <?php
    13591362
     
    13751378
    13761379                                ?>
    13771380                                <input type="hidden" name="testcookie" value="1" />
    1378                         </p>
     1381                        </div>
    13791382                </form>
    13801383
    13811384                <?php
     
    13821385
    13831386                if ( ! $interim_login ) {
    13841387                        ?>
    1385                         <p id="nav">
     1388                        <div id="nav">
    13861389                                <?php
    13871390
    13881391                                if ( ! isset( $_GET['checkemail'] ) || ! in_array( $_GET['checkemail'], array( 'confirm', 'newpass' ), true ) ) {
     
    14011404                                }
    14021405
    14031406                                ?>
    1404                         </p>
     1407                        </div>
    14051408                        <?php
    14061409                }
    14071410