WordPress.org

Make WordPress Core

Changeset 33023


Ignore:
Timestamp:
07/01/2015 02:47:24 PM (3 years ago)
Author:
markjaquith
Message:

New password change/set UI.

  • Generate the password for the user
  • More tightly integrate password strength meter
  • Warn on weak passwords

see #32589

props MikeHansenMe, adamsilverstein, binarykitten

Location:
trunk/src
Files:
10 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/wp-admin/css/forms.css

    r32984 r33023  
    402402}
    403403
     404button.wp-hide-pw > .dashicons {
     405    position: relative;
     406    top: 3px;
     407}
     408
    404409label,
    405410#your-profile label + a {
     
    435440    background-color: #eee;
    436441    border: 1px solid #ddd;
    437     float: left;
    438     margin: 13px 5px 5px 1px;
     442    margin: -2px 5px 5px 1px;
    439443    padding: 3px 5px;
    440444    text-align: center;
    441     width: 200px;
    442     display: none;
     445    width: 25em;
     446    box-sizing: border-box;
     447    opacity: 0;
    443448}
    444449
    445450#pass-strength-result.short {
     451    opacity: 1;
    446452    background-color: #ffa0a0;
    447453    border-color: #f04040;
     
    449455
    450456#pass-strength-result.bad {
     457    opacity: 1;
    451458    background-color: #ffb78c;
    452459    border-color: #ff853c;
     
    454461
    455462#pass-strength-result.good {
     463    opacity: 1;
    456464    background-color: #ffec8b;
    457465    border-color: #fc0;
     
    459467
    460468#pass-strength-result.strong {
     469    opacity: 1;
    461470    background-color: #c3ff88;
    462471    border-color: #8dff1c;
     472}
     473
     474#pass1.short {
     475    border-color: #f04040;
     476}
     477
     478#pass1.bad {
     479    border-color: #ff853c;
     480}
     481
     482#pass1.good {
     483    border-color: #fc0;
     484}
     485
     486#pass1.strong {
     487    border-color: #8dff1c;
     488}
     489
     490.pw-weak{
     491    display:none;
    463492}
    464493
  • trunk/src/wp-admin/includes/user.php

    r32654 r33023  
    177177    } else {
    178178        $user_id = wp_insert_user( $user );
    179         wp_new_user_notification( $user_id, isset( $_POST['send_password'] ) ? wp_unslash( $pass1 ) : '' );
     179        wp_new_user_notification( $user_id );
    180180    }
    181181    return $user_id;
  • trunk/src/wp-admin/js/user-profile.js

    r31483 r33023  
    11/* global ajaxurl, pwsL10n */
    22(function($){
     3    $(function(){
     4        var pw_new = $('.user-pass1-wrap'),
     5            pw_line = pw_new.find('.wp-pwd'),
     6            pw_field = $('#pass1'),
     7            pw_field2 = $('#pass2'),
     8            pw_togglebtn = pw_new.find('.wp-hide-pw'),
     9            pw_generatebtn = pw_new.find('button.wp-generate-pw'),
     10            pw_2 = $('.user-pass2-wrap'),
     11            parentform = pw_new.closest('form'),
     12            pw_strength = $('#pass-strength-result'),
     13            pw_submitbtn_edit = $('#submit'),
     14            pw_submitbtn_new = $( '#createusersub' ),
     15            pw_checkbox = $('.pw-checkbox'),
     16            pw_weak = $('.pw-weak')
     17        ;
     18
     19        generatePassword = function() {
     20            pw_field.val( pw_field.data( 'pw' ) );
     21            pw_field.trigger( 'propertychange' );
     22            pw_field.attr( 'type', 'text' ).focus();
     23            pw_field[0].setSelectionRange(100, 100);
     24        };
     25
     26        pw_2.hide();
     27        pw_line.hide();
     28        pw_togglebtn.show();
     29        pw_generatebtn.show();
     30
     31        if ( pw_field.data( 'reveal' ) == 1 ) {
     32            generatePassword();
     33        }
     34
     35        parentform.on('submit', function(){
     36            pw_field2.val( pw_field.val() );
     37            pw_field.attr('type', 'password');
     38        });
     39
     40
     41        pw_field.on('input propertychange', function(){
     42            setTimeout( function(){
     43                var cssClass = pw_strength.attr('class');
     44                pw_field.removeClass( 'short bad good strong' );
     45                if ( 'undefined' !== typeof cssClass ) {
     46                    pw_field.addClass( cssClass );
     47                    if ( cssClass == 'short' || cssClass == 'bad' ) {
     48                        if ( ! pw_checkbox.attr( 'checked' ) ) {
     49                            pw_submitbtn_new.attr( 'disabled','disabled' );
     50                            pw_submitbtn_edit.attr( 'disabled','disabled' );
     51                        }
     52                        pw_weak.show();
     53                    } else {
     54                        pw_submitbtn_new.removeAttr( 'disabled' );
     55                        pw_submitbtn_edit.removeAttr( 'disabled' );
     56                        pw_weak.hide();
     57                    }
     58                }
     59            }, 1 );
     60        } );
     61
     62        pw_checkbox.change( function() {
     63            if ( pw_checkbox.attr( 'checked' ) ) {
     64                pw_submitbtn_new.removeAttr( 'disabled' );
     65                pw_submitbtn_edit.removeAttr( 'disabled' );
     66            } else {
     67                pw_submitbtn_new.attr( 'disabled','disabled' );
     68                pw_submitbtn_edit.attr( 'disabled','disabled' );
     69            }
     70        } );
     71
     72        /**
     73         * Fix a LastPass mismatch issue, LastPass only changes pass2.
     74         *
     75         * This fixes the issue by copying any changes from the hidden
     76         * pass2 field to the pass1 field.
     77         */
     78        pw_field2.on( 'input propertychange', function() {
     79            pw_field.val( pw_field2.val() );
     80            pw_field.trigger( 'propertychange' );
     81        } );
     82
     83        pw_new.on( 'click', 'button.wp-generate-pw', function(){
     84            pw_generatebtn.hide();
     85            pw_line.show();
     86            generatePassword();
     87        });
     88
     89        pw_togglebtn.on( 'click', function() {
     90            var show = pw_togglebtn.attr( 'data-toggle' );
     91            if ( show == 1 ) {
     92                pw_field.attr( 'type', 'text' );
     93                pw_togglebtn.attr( 'data-toggle', 0 )
     94                    .find( '.text' )
     95                        .text( 'hide' )
     96                ;
     97            } else {
     98                pw_field.attr( 'type', 'password' );
     99                pw_togglebtn.attr( 'data-toggle', 1 )
     100                    .find( '.text' )
     101                        .text( 'show' )
     102                ;
     103            }
     104            pw_field.focus();
     105            pw_field[0].setSelectionRange(100, 100);
     106        });
     107    });
    3108
    4109    function check_pass_strength() {
  • trunk/src/wp-admin/user-edit.php

    r32974 r33023  
    463463    <td>
    464464        <input class="hidden" value=" " /><!-- #24364 workaround -->
    465         <input type="password" name="pass1" id="pass1" class="regular-text" size="16" value="" autocomplete="off" />
    466         <p class="description"><?php _e( 'If you would like to change the password type a new one. Otherwise leave this blank.' ); ?></p>
     465        <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
     466        <div class="wp-pwd hide-if-js">
     467            <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" />
     468            <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     469                <span class="dashicons dashicons-visibility"></span>
     470                <span class="text">hide</span>
     471            </button>
     472            <div style="display:none" id="pass-strength-result"></div>
     473        </div>
    467474    </td>
    468475</tr>
    469 <tr class="user-pass2-wrap">
     476<tr class="user-pass2-wrap hide-if-js">
    470477    <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
    471478    <td>
    472     <input name="pass2" type="password" id="pass2" class="regular-text" size="16" value="" autocomplete="off" />
     479    <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
    473480    <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
    474     <br />
    475     <div id="pass-strength-result"><?php _e( 'Strength indicator' ); ?></div>
    476     <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    477481    </td>
    478482</tr>
    479 <?php endif; ?>
    480 
    481 <?php
    482 // This is a temporary hook for WordPress 4.3 development. Do not use it or document it.
    483 do_action( '__temp_password_field', $profileuser );
    484 ?>
     483<tr class="pw-weak">
     484    <th><label for="pw-weak"><?php _e( 'Confirm Password' ); ?></label></th>
     485    <td>
     486    <input type="checkbox" name="pw-weak" class="pw-checkbox" />
     487    <?php _e( 'Confirm use of weak password' ); ?>
     488    </td>
     489</tr>
     490<?php endif; ?>
    485491
    486492<?php
  • trunk/src/wp-admin/user-new.php

    r32974 r33023  
    191191
    192192wp_enqueue_script('wp-ajax-response');
    193 wp_enqueue_script('user-profile');
     193wp_enqueue_script( 'user-profile' );
    194194
    195195/**
     
    356356$new_user_uri = $creating && isset( $_POST['url'] ) ? wp_unslash( $_POST['url'] ) : '';
    357357$new_user_role = $creating && isset( $_POST['role'] ) ? wp_unslash( $_POST['role'] ) : '';
    358 $new_user_send_password = $creating && isset( $_POST['send_password'] ) ? wp_unslash( $_POST['send_password'] ) : '';
     358$new_user_send_password = $creating && isset( $_POST['send_password'] ) ? wp_unslash( $_POST['send_password'] ) : true;
    359359$new_user_ignore_pass = $creating && isset( $_POST['noconfirmation'] ) ? wp_unslash( $_POST['noconfirmation'] ) : '';
    360360
     
    391391 */
    392392if ( apply_filters( 'show_password_fields', true ) ) : ?>
    393     <tr class="form-field form-required">
    394         <th scope="row"><label for="pass1"><?php _e('Password'); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
     393    <tr class="form-field form-required user-pass1-wrap">
     394        <th scope="row">
     395            <label for="pass1">
     396                <?php _e( 'Password' ); ?>
     397                <span class="description hide-if-js"><?php /* translators: password input field */_e( '(required)' ); ?></span>
     398            </label>
     399        </th>
    395400        <td>
    396401            <input class="hidden" value=" " /><!-- #24364 workaround -->
    397             <input name="pass1" type="password" id="pass1" autocomplete="off" />
     402            <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Show password' ); ?></button>
     403            <div class="wp-pwd hide-if-js">
     404                <?php $initial_password = wp_generate_password( 24 ); ?>
     405                <input type="password" name="pass1" id="pass1" class="regular-text" value="<?php echo esc_attr( $initial_password ); ?>" autocomplete="off" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" />
     406                <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     407                    <span class="dashicons dashicons-visibility"></span>
     408                    <span class="text">hide</span>
     409                </button>
     410                <div style="display:none" id="pass-strength-result"></div>
     411            </div>
     412            <p><span class="description"><?php _e( 'A password reset link will be sent to the user via email' ); ?></span></p>
    398413        </td>
    399414    </tr>
    400     <tr class="form-field form-required">
    401         <th scope="row"><label for="pass2"><?php _e('Repeat Password'); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
     415    <tr class="form-field form-required user-pass2-wrap hide-if-js">
     416        <th scope="row"><label for="pass2"><?php _e( 'Repeat Password' ); ?> <span class="description"><?php /* translators: password input field */_e('(required)'); ?></span></label></th>
    402417        <td>
    403418        <input name="pass2" type="password" id="pass2" autocomplete="off" />
    404         <br />
    405         <div id="pass-strength-result"><?php _e('Strength indicator'); ?></div>
    406         <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    407419        </td>
    408420    </tr>
    409     <tr>
    410         <th scope="row"><?php _e('Send Password?') ?></th>
    411         <td><label for="send_password"><input type="checkbox" name="send_password" id="send_password" value="1" <?php checked( $new_user_send_password ); ?> /> <?php _e('Send this password to the new user by email.'); ?></label></td>
     421    <tr class="pw-weak">
     422        <th><label for="pw-weak"><?php _e( 'Confirm Password' ); ?></label></th>
     423        <td>
     424            <input type="checkbox" name="pw-weak" class="pw-checkbox" />
     425            <?php _e( 'Confirm use of weak password' ); ?>
     426        </td>
    412427    </tr>
    413428<?php endif; ?>
  • trunk/src/wp-includes/default-constants.php

    r32935 r33023  
    9393        define('SHORTINIT', false);
    9494
     95    // Constants for features added to WP that should short-circuit their plugin implementations
     96    define( 'WP_FEATURE_BETTER_PASSWORDS', true );
     97
    9598    // Constants for expressing human-readable intervals
    9699    // in their respective number of seconds.
  • trunk/src/wp-includes/pluggable.php

    r33017 r33023  
    16911691 *
    16921692 * @param int    $user_id        User ID.
    1693  * @param string $plaintext_pass Optional. The user's plaintext password. Default empty.
    1694  */
    1695 function wp_new_user_notification($user_id, $plaintext_pass = '') {
     1693 */
     1694function wp_new_user_notification($user_id) {
     1695    global $wpdb;
    16961696    $user = get_userdata( $user_id );
    16971697
     
    17061706    @wp_mail(get_option('admin_email'), sprintf(__('[%s] New User Registration'), $blogname), $message);
    17071707
    1708     if ( empty($plaintext_pass) )
    1709         return;
    1710 
    1711     $message  = sprintf(__('Username: %s'), $user->user_login) . "\r\n";
    1712     $message .= sprintf(__('Password: %s'), $plaintext_pass) . "\r\n";
     1708    // Generate something random for a password reset key.
     1709    $key = wp_generate_password( 20, false );
     1710
     1711    do_action( 'retrieve_password_key', $user->user_login, $key );
     1712
     1713    // Now insert the key, hashed, into the DB.
     1714    if ( empty( $wp_hasher ) ) {
     1715        require_once ABSPATH . WPINC . '/class-phpass.php';
     1716        $wp_hasher = new PasswordHash( 8, true );
     1717    }
     1718    $hashed = time() . ':' . $wp_hasher->HashPassword( $key );
     1719    $wpdb->update( $wpdb->users, array( 'user_activation_key' => $hashed ), array( 'user_login' => $user->user_login ) );
     1720
     1721    $message = sprintf(__('Username: %s'), $user->user_login) . "\r\n\r\n";
     1722    $message .= __('To set your password, visit the following address:') . "\r\n\r\n";
     1723    $message .= '<' . network_site_url("wp-login.php?action=rp&key=$key&login=" . rawurlencode($user->user_login), 'login') . ">\r\n\r\n";
     1724
    17131725    $message .= wp_login_url() . "\r\n";
    17141726
    1715     wp_mail($user->user_email, sprintf(__('[%s] Your username and password'), $blogname), $message);
     1727    wp_mail($user->user_email, sprintf(__('[%s] Your username and password info'), $blogname), $message);
    17161728
    17171729}
  • trunk/src/wp-includes/script-loader.php

    r32994 r33023  
    366366    $scripts->add( 'password-strength-meter', "/wp-admin/js/password-strength-meter$suffix.js", array( 'jquery', 'zxcvbn-async' ), false, 1 );
    367367    did_action( 'init' ) && $scripts->localize( 'password-strength-meter', 'pwsL10n', array(
    368         'empty' => __('Strength indicator'),
     368        'empty' => __('&nbsp;'),
    369369        'short' => __('Very weak'),
    370370        'bad' => __('Weak'),
  • trunk/src/wp-includes/user.php

    r33019 r33023  
    24102410 */
    24112411function wp_get_password_hint() {
    2412     $hint = __( 'Hint: The password should be at least seven characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ &amp; ).' );
     2412    $hint = __( 'Hint: The password should be at least twelve characters long. To make it stronger, use upper and lower case letters, numbers, and symbols like ! " ? $ % ^ &amp; ).' );
    24132413
    24142414    /**
     
    26162616    update_user_option( $user_id, 'default_password_nag', true, true ); //Set up the Password change nag.
    26172617
    2618     wp_new_user_notification( $user_id, $user_pass );
     2618    wp_new_user_notification( $user_id );
    26192619
    26202620    return $user_id;
  • trunk/src/wp-login.php

    r33019 r33023  
    653653    <input type="hidden" id="user_login" value="<?php echo esc_attr( $rp_login ); ?>" autocomplete="off" />
    654654
    655     <p>
    656         <label for="pass1"><?php _e('New password') ?><br />
    657         <input type="password" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" /></label>
     655    <p class="user-pass1-wrap">
     656        <label for="pass1"><?php _e('New password') ?></label><br />
     657        <div class="wp-pwd">
     658            <input type="password" data-reveal="1" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" name="pass1" id="pass1" class="input" size="20" value="" autocomplete="off" />
     659        </div>
    658660    </p>
    659     <p>
    660         <label for="pass2"><?php _e('Confirm new password') ?><br />
    661         <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" /></label>
     661    <p class="user-pass2-wrap">
     662        <label for="pass2"><?php _e('Confirm new password') ?></label><br />
     663        <input type="password" name="pass2" id="pass2" class="input" size="20" value="" autocomplete="off" />
    662664    </p>
    663665
Note: See TracChangeset for help on using the changeset viewer.