WordPress.org
Get WordPress

Make WordPress Core

Ticket #42888: 42888.3.diff

File 42888.3.diff, 22.4 KB (added by afercia, 5 years ago)

  • src/js/_enqueues/admin/user-profile.js

     
    55/* global ajaxurl, pwsL10n, userProfileL10n */
    66(function($) {
    77        var updateLock = false,
    8 
    98                $pass1Row,
    10                 $pass1Wrap,
    119                $pass1,
    12                 $pass1Text,
    13                 $pass1Label,
    1410                $pass2,
    1511                $weakRow,
    1612                $weakCheckbox,
    … …  
    3632                }
    3733
    3834                if ( 1 !== parseInt( $toggleButton.data( 'start-masked' ), 10 ) ) {
    39                         $pass1Wrap.addClass( 'show-password' );
     35                        $pass1.attr( 'type', 'text' );
    4036                } else {
    4137                        $toggleButton.trigger( 'click' );
    4238                }
    … …  
    4844        function bindPass1() {
    4945                currentPass = $pass1.val();
    5046
    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 
    7347                if ( 1 === parseInt( $pass1.data( 'reveal' ), 10 ) ) {
    7448                        generatePassword();
    7549                }
    … …  
    8054                        }
    8155
    8256                        currentPass = $pass1.val();
    83                         if ( $pass1Text.val() !== currentPass ) {
    84                                 $pass1Text.val( currentPass );
    85                         }
    86                         $pass1.add( $pass1Text ).removeClass( 'short bad good strong' );
     57
     58                        $pass1.removeClass( 'short bad good strong' );
    8759                        showOrHideWeakPasswordCheckbox();
    8860                } );
    8961        }
    9062
    91         function resetToggle() {
     63        function resetToggle( show ) {
    9264                $toggleButton
    93                         .data( 'toggle', 0 )
    9465                        .attr({
    95                                 'aria-label': userProfileL10n.ariaHide
     66                                'aria-label': show ? userProfileL10n.ariaShow : userProfileL10n.ariaHide
    9667                        })
    9768                        .find( '.text' )
    98                                 .text( userProfileL10n.hide )
     69                                .text( show ? userProfileL10n.show : userProfileL10n.hide )
    9970                        .end()
    10071                        .find( '.dashicons' )
    101                                 .removeClass( 'dashicons-visibility' )
    102                                 .addClass( 'dashicons-hidden' );
    103 
    104                 $pass1Text.focus();
    105 
    106                 $pass1Label.attr( 'for', 'pass1-text' );
     72                                .removeClass( show ? 'dashicons-hidden' : 'dashicons-visibility' )
     73                                .addClass( show ? 'dashicons-visibility' : 'dashicons-hidden' );
    10774        }
    10875
    10976        function bindToggleButton() {
    11077                $toggleButton = $pass1Row.find('.wp-hide-pw');
    11178                $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                                 }
     79                        if ( 'password' === $pass1.attr( 'type' ) ) {
     80                                $pass1.attr( 'type', 'text' );
     81                                resetToggle( false );
    12082                        } 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');
     83                                $pass1.attr( 'type', 'password' );
     84                                resetToggle( true );
    13385
    134                                 $pass1.focus();
    135 
    136                                 $pass1Label.attr( 'for', 'pass1' );
    137 
    13886                                if ( ! _.isUndefined( $pass1[0].setSelectionRange ) ) {
    13987                                        $pass1[0].setSelectionRange( 0, 100 );
    14088                                }
    14189                        }
     90                        $pass1.focus();
    14291                });
    14392        }
    14493
    … …  
    14796                        $generateButton,
    14897                        $cancelButton;
    14998
    150                 $pass1Row = $('.user-pass1-wrap');
    151                 $pass1Label = $pass1Row.find('th label').attr( 'for', 'pass1-text' );
     99                $pass1Row = $( '.user-pass1-wrap, .user-pass-wrap' );
    152100
    153                 // hide this
     101                // Hide the confirm password field when JavaScript support is enabled.
    154102                $('.user-pass2-wrap').hide();
    155103
    156104                $submitButton = $( '#submit, #wp-submit' ).on( 'click', function () {
    … …  
    168116                $pass1 = $('#pass1');
    169117                if ( $pass1.length ) {
    170118                        bindPass1();
     119                } else {
     120                        // Password field for the login form.
     121                        $pass1 = $( '#user_pass' );
    171122                }
    172123
    173124                /**
    … …  
    189140                if ( $pass1.is( ':hidden' ) ) {
    190141                        $pass1.prop( 'disabled', true );
    191142                        $pass2.prop( 'disabled', true );
    192                         $pass1Text.prop( 'disabled', true );
    193143                }
    194144
    195145                $passwordWrapper = $pass1Row.find( '.wp-pwd' );
    … …  
    211161                        // Enable the inputs when showing.
    212162                        $pass1.attr( 'disabled', false );
    213163                        $pass2.attr( 'disabled', false );
    214                         $pass1Text.attr( 'disabled', false );
    215164
    216                         if ( $pass1Text.val().length === 0 ) {
     165                        if ( $pass1.val().length === 0 ) {
    217166                                generatePassword();
    218167                        }
    219 
    220                         _.defer( function() {
    221                                 $pass1Text.focus();
    222                                 if ( ! _.isUndefined( $pass1Text[0].setSelectionRange ) ) {
    223                                         $pass1Text[0].setSelectionRange( 0, 100 );
    224                                 }
    225                         }, 0 );
    226168                } );
    227169
    228170                $cancelButton = $pass1Row.find( 'button.wp-cancel-pw' );
    … …  
    230172                        updateLock = false;
    231173
    232174                        // Clear any entered password.
    233                         $pass1Text.val( '' );
     175                        $pass1.val( '' );
    234176
    235177                        // Generate a new password.
    236178                        wp.ajax.post( 'generate-password' )
    … …  
    248190                        // Disable the inputs when hiding to prevent autofill and submission.
    249191                        $pass1.prop( 'disabled', true );
    250192                        $pass2.prop( 'disabled', true );
    251                         $pass1Text.prop( 'disabled', true );
    252193
    253                         resetToggle();
     194                        resetToggle( false );
    254195
    255196                        if ( $pass1Row.closest( 'form' ).is( '#your-profile' ) ) {
    256197                                // Clear password field to prevent update
    … …  
    265206                        $pass1.prop( 'disabled', false );
    266207                        $pass2.prop( 'disabled', false );
    267208                        $pass2.val( $pass1.val() );
    268                         $pass1Wrap.removeClass( 'show-password' );
    269209                });
    270210        }
    271211
    … …  
    305245                var passStrength = $('#pass-strength-result')[0];
    306246
    307247                if ( passStrength.className ) {
    308                         $pass1.add( $pass1Text ).addClass( passStrength.className );
     248                        $pass1.addClass( passStrength.className );
    309249                        if ( $( passStrength ).is( '.short, .bad' ) ) {
    310250                                if ( ! $weakCheckbox.prop( 'checked' ) ) {
    311251                                        $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/install.css

     
    212212        font-family: Consolas, Monaco, monospace;
    213213}
    214214
     215.password-input-wrapper {
     216        position: relative;
     217}
     218
    215219.wp-hide-pw > .dashicons {
    216         line-height: inherit;
     220        position: relative;
     221        top: 3px;
    217222}
    218223
    219224#pass-strength-result {
    … …  
    220225        background-color: #eee;
    221226        border: 1px solid #ddd;
    222227        color: #23282d;
    223         margin: -2px 5px 5px 0px;
     228        margin: -2px 5px 5px 0;
    224229        padding: 3px 5px;
    225230        text-align: center;
    226231        width: 218px;
    … …  
    374379                box-sizing: border-box;
    375380        }
    376381
     382        .wp-core-ui .wp-hide-pw {
     383                background: transparent;
     384                border: 1px solid transparent;
     385                box-shadow: none;
     386                line-height: 2;
     387                margin: 0;
     388                padding: 5px 9px;
     389                position: absolute;
     390                right: 0;
     391                top: 0;
     392        }
     393
     394        .button.wp-hide-pw .text {
     395                display: none;
     396        }
     397
     398        #pass-strength-result {
     399                width: 100%;
     400                box-sizing: border-box;
     401                margin: -1px 0 5px;
     402                padding: 8px;
     403        }
    377404}
    378405
    379406body.language-chooser {

  • src/wp-admin/css/login.css

     
    4040                0 0 2px 1px rgba(30, 140, 190, 0.8);
    4141}
    4242
    43 .ie8 a:focus {
    44         outline: #5b9dd9 solid 1px;
    45 }
    46 
    4743p {
    4844        line-height: 1.5;
    4945}
    … …  
    8278        position: relative;
    8379}
    8480
    85 .login .input.password-input {
    86         margin: 0;
    87 }
    88 
    8981.login .input::-ms-clear {
    9082        display: none;
    9183}
    … …  
    10597        padding: 5px 9px;
    10698        position: absolute;
    10799        right: 0;
    108         top: 0;
     100        top: 3px;
    109101}
    110102
    111103.login .button.button-secondary:hover {
    … …  
    124116        transform: none;
    125117}
    126118
     119.login .wp-pwd {
     120        position: relative;
     121}
     122
     123.no-js .hide-if-no-js {
     124        display: none;
     125}
     126
    127127.login form {
    128128        margin-top: 20px;
    129129        margin-left: 0;
    … …  
    157157        font-size: 14px;
    158158}
    159159
    160 .login form .forgetmenot label {
    161         font-size: 12px;
    162         line-height: 1.58333333;
     160.login form .forgetmenot label,
     161.login form .pw-weak label {
     162        line-height: 1.5;
     163        vertical-align: baseline;
    163164}
    164165
    165166.login h1 {
    … …  
    232233}
    233234
    234235.login form .input,
    235 .login input[type="text"] {
     236.login input[type="text"],
     237.login input[type="password"] {
    236238        font-size: 24px;
    237239        width: 100%;
    238240        padding: 5px;
    239         margin: 2px 6px 16px 0;
     241        margin: 3px 6px 16px 0;
    240242}
    241243
     244.login input[type="password"],
    242245.login-action-rp form .input,
    243246.login-action-rp input[type="text"] {
    244247        padding: 5px 45px 5px 5px;
    … …  
    250253        background: #fbfbfb;
    251254}
    252255
    253 .ie7 .login form .input,
    254 .ie8 .login form .input {
    255         font-family: sans-serif;
     256.login-action-rp input[type="text"],
     257.login-action-rp input[type="password"] {
     258        box-shadow: none;
     259        margin-bottom: 0;
    256260}
    257261
     262
    258263.login-action-rp input[type="text"] {
    259264        box-shadow: none;
    260         margin: 0;
    261265}
    262266
    263267.login #pass-strength-result {

  • src/wp-admin/install.php

     
    142142                                </label>
    143143                        </th>
    144144                        <td>
    145                                 <div class="">
     145                                <div class="password-input-wrapper">
    146146                                        <?php $initial_password = isset( $_POST['admin_password'] ) ? stripslashes( $_POST['admin_password'] ) : wp_generate_password( 18 ); ?>
    147147                                        <input type="password" name="admin_password" id="pass1" class="regular-text" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
    148148                                        <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' ); ?>">

  • 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.
    … …  
    431434                $errors->add(
    432435                        'retrieve_password_email_failure',
    433436                        sprintf(
     437                                /* translators: %s: URL to support page for resetting your password */
    434438                                __( '<strong>ERROR</strong>: The email could not be sent. Your site may not be correctly configured to send emails. <a href="%s">Get support for resetting your password</a>.' ),
    435439                                esc_url( $support )
    436440                        )
    … …  
    467471        }
    468472
    469473        $url = dirname( set_url_scheme( 'http://' . $_SERVER['HTTP_HOST'] . $_SERVER['PHP_SELF'] ) );
    470         if ( $url != get_option( 'siteurl' ) ) {
     474        if ( get_option( 'siteurl' ) != $url ) {
    471475                update_option( 'siteurl', $url );
    472476        }
    473477}
    … …  
    620624                ?>
    621625
    622626        <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>
     627
     628                <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     629                <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( $user_login ); ?>" size="20" autocapitalize="off" />
    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>
    726726
     727                <label for="pass1"><?php _e( 'New password' ); ?></label>
     728
    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">
     732
     733                                <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' ); ?>">
    731734                                        <span class="dashicons dashicons-hidden" aria-hidden="true"></span>
    732735                                </button>
     736
    733737                        </div>
    734738                        <div id="pass-strength-result" class="hide-if-no-js" aria-live="polite"><?php _e( 'Strength indicator' ); ?></div>
    735739                </div>
    736740                <div class="pw-weak">
    737                         <label>
    738                                 <input type="checkbox" name="pw_weak" class="pw-checkbox" />
    739                                 <?php _e( 'Confirm use of weak password' ); ?>
    740                         </label>
     741                        <input type="checkbox" name="pw_weak" id="pw-weak" class="pw-checkbox" />
     742                        <label for="pw-weak"><?php _e( 'Confirm use of weak password' ); ?></label>
    741743                </div>
    742744        </div>
    743745
    744         <p class="user-pass2-wrap">
    745                 <label for="pass2"><?php _e( 'Confirm new password' ); ?></label><br />
     746        <div class="user-pass2-wrap">
     747                <label for="pass2"><?php _e( 'Confirm new password' ); ?></label>
    746748                <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
    747         </p>
     749        </div>
    748750
    749751        <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    750752        <br class="clear" />
    … …  
    760762                do_action( 'resetpass_form', $user );
    761763                ?>
    762764        <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>
     765        <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>
    764766        </form>
    765767
    766         <p id="nav">
    767         <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
     768        <div id="nav">
     769                <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    768770                <?php
    769771                if ( get_option( 'users_can_register' ) ) :
    770772                        $registration_url = sprintf( '<a href="%s">%s</a>', esc_url( wp_registration_url() ), __( 'Register' ) );
    … …  
    773775
    774776                        /** This filter is documented in wp-includes/general-template.php */
    775777                        echo apply_filters( 'register', $registration_url );
    776         endif;
     778                endif;
    777779                ?>
    778         </p>
     780        </div>
    779781
    780782                <?php
    781783                login_footer( 'user_pass' );
    … …  
    832834                login_header( __( 'Registration Form' ), '<p class="message register">' . __( 'Register For This Site' ) . '</p>', $errors );
    833835                ?>
    834836        <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>
     837        <div>
     838                <label for="user_login"><?php _e( 'Username' ); ?></label>
     839                <input type="text" name="user_login" id="user_login" class="input" value="<?php echo esc_attr( wp_unslash( $user_login ) ); ?>" size="20" autocapitalize="off" />
     840        </div>
     841        <div>
     842                <label for="user_email"><?php _e( 'Email' ); ?></label>
     843                <input type="email" name="user_email" id="user_email" class="input" value="<?php echo esc_attr( wp_unslash( $user_email ) ); ?>" size="25" />
     844        </div>
    843845                <?php
    844846                /**
    845847                 * Fires following the 'Email' field in the user registration form.
    … …  
    851853        <p id="reg_passmail"><?php _e( 'Registration confirmation will be emailed to you.' ); ?></p>
    852854        <br class="clear" />
    853855        <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>
     856        <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>
    855857        </form>
    856858
    857         <p id="nav">
    858         <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
     859        <div id="nav">
     860                <a href="<?php echo esc_url( wp_login_url() ); ?>"><?php _e( 'Log in' ); ?></a>
    859861                <?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>
     862                <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
     863        </div>
    862864
    863865                <?php
    864866                login_footer( 'user_login' );
    … …  
    997999                                exit;
    9981000                        }
    9991001
    1000                         if ( ( empty( $redirect_to ) || $redirect_to == 'wp-admin/' || $redirect_to == admin_url() ) ) {
     1002                        if ( ( empty( $redirect_to ) || 'wp-admin/' == $redirect_to || admin_url() == $redirect_to ) ) {
    10011003                                // If the user doesn't belong to a blog, send them to user admin. If the user can't edit posts, send them to their profile.
    10021004                                if ( is_multisite() && ! get_active_blog_for_user( $user->ID ) && ! is_super_admin( $user->ID ) ) {
    10031005                                        $redirect_to = user_admin_url();
    … …  
    10741076                } else {
    10751077                        $aria_describedby_error = '';
    10761078                }
     1079
     1080                wp_enqueue_script( 'user-profile' );
    10771081                ?>
    10781082
    10791083        <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>
     1084
     1085                <label for="user_login"><?php _e( 'Username or Email Address' ); ?></label>
     1086                <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" />
     1087
     1088                <div class="user-pass-wrap">
     1089                        <label for="user_pass"><?php _e( 'Password' ); ?></label>
     1090                        <div class="wp-pwd">
     1091                                <div class="password-input-wrapper">
     1092                                        <input type="password" name="pwd" id="user_pass"<?php echo $aria_describedby_error; ?> class="input password-input" value="" size="20" />
     1093                                        <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' ); ?>">
     1094                                                <span class="dashicons dashicons-visibility" aria-hidden="true"></span>
     1095                                        </button>
     1096                                </div>
     1097                        </div>
     1098                </div>
    10881099                <?php
    10891100                /**
    10901101                 * Fires following the 'Password' field in the login form.
    … …  
    10931104                 */
    10941105                do_action( 'login_form' );
    10951106                ?>
    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">
     1107        <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>
     1108        <div class="submit">
    10981109                <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="<?php esc_attr_e( 'Log In' ); ?>" />
    1099                 <?php   if ( $interim_login ) { ?>
     1110                <?php if ( $interim_login ) { ?>
    11001111                <input type="hidden" name="interim-login" value="1" />
    1101         <?php   } else { ?>
     1112                <?php } else { ?>
    11021113                <input type="hidden" name="redirect_to" value="<?php echo esc_attr( $redirect_to ); ?>" />
    1103         <?php } ?>
     1114                <?php } ?>
    11041115                <?php if ( $customize_login ) : ?>
    11051116                <input type="hidden" name="customize-login" value="1" />
    1106         <?php endif; ?>
     1117                <?php endif; ?>
    11071118                <input type="hidden" name="testcookie" value="1" />
    1108         </p>
     1119        </div>
    11091120        </form>
    11101121
    11111122                <?php if ( ! $interim_login ) { ?>
    1112         <p id="nav">
     1123                <div id="nav">
    11131124                        <?php
    11141125                        if ( ! isset( $_GET['checkemail'] ) || ! in_array( $_GET['checkemail'], array( 'confirm', 'newpass' ) ) ) :
    11151126                                if ( get_option( 'users_can_register' ) ) :
    … …  
    11211132                                        echo esc_html( $login_link_separator );
    11221133                                endif;
    11231134                                ?>
    1124                 <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
     1135                        <a href="<?php echo esc_url( wp_lostpassword_url() ); ?>"><?php _e( 'Lost your password?' ); ?></a>
    11251136                        <?php endif; ?>
    1126         </p>
    1127         <?php } ?>
     1137                </div>
     1138                <?php } ?>
    11281139
    11291140        <script type="text/javascript">
    11301141        function wp_attempt_focus(){