WordPress.org

Make WordPress Core

Changeset 33023


Ignore:
Timestamp:
07/01/15 14:47:24 (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.