Make WordPress Core

Ticket #32589: 32589.2.diff

File 32589.2.diff, 7.7 KB (added by MikeHansenMe, 7 years ago)

additional focus and confirmation of weak password

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

     
    401401        color: #777;
    402402}
    403403
     404button.wp-hide-pw > .dashicons {
     405        position: relative;
     406        top: 3px;
     407}
     408
    404409label,
    405410#your-profile label + a {
    406411        vertical-align: middle;
     
    434439#pass-strength-result {
    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;
    448454}
    449455
    450456#pass-strength-result.bad {
     457        opacity: 1;
    451458        background-color: #ffb78c;
    452459        border-color: #ff853c;
    453460}
    454461
    455462#pass-strength-result.good {
     463        opacity: 1;
    456464        background-color: #ffec8b;
    457465        border-color: #fc0;
    458466}
    459467
    460468#pass-strength-result.strong {
     469        opacity: 1;
    461470        background-color: #c3ff88;
    462471        border-color: #8dff1c;
    463472}
    464473
     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;
     492}
     493
    465494.indicator-hint {
    466495        padding-top: 8px;
    467496}
  • src/wp-admin/js/user-profile.js

     
    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 = $('#submit'),
     14                                pw_checkbox = $('.pw-checkbox'),
     15                                pw_weak = $('.pw-weak')
     16                ;
    317
     18                pw_2.hide();
     19                pw_line.hide();
     20                pw_togglebtn.show();
     21                pw_generatebtn.show();
     22
     23                parentform.on('submit', function(){
     24                        pw_field2.val( pw_field.val() );
     25                        pw_field.attr('type', 'password');
     26                });
     27
     28
     29                pw_field.on('input propertychange', function(){
     30                        setTimeout( function(){
     31                                var cssClass = pw_strength.attr('class');
     32                                console.log( cssClass );
     33                                pw_field.removeClass( 'short bad good strong' );
     34                                if ( 'undefined' !== typeof cssClass ) {
     35                                        pw_field.addClass( cssClass );
     36                                        if ( cssClass == 'short' || cssClass == 'bad' ) {
     37                                                if ( ! pw_checkbox.attr( 'checked' ) ) {
     38                                                        pw_submitbtn.attr( 'disabled','disabled' );
     39                                                }
     40                                                pw_weak.show();
     41                                        } else {
     42                                                pw_submitbtn.removeAttr( 'disabled' );
     43                                                pw_weak.hide();
     44                                        }
     45                                }
     46                        }, 1 );
     47                } );
     48
     49                pw_checkbox.change( function() {
     50                        if ( pw_checkbox.attr( 'checked' ) ) {
     51                                pw_submitbtn.removeAttr( 'disabled' );
     52                        } else {
     53                                pw_submitbtn.attr( 'disabled','disabled' );
     54                        }
     55                } );
     56
     57                /**
     58                 * Fix a LastPass mismatch issue, LastPass only changes pass2.
     59                 *
     60                 * This fixes the issue by copying any changes from the hidden
     61                 * pass2 field to the pass1 field.
     62                 */
     63                pw_field2.on( 'input propertychange', function() {
     64                        pw_field.val( pw_field2.val() );
     65                        pw_field.trigger( 'propertychange' );
     66                } );
     67
     68                pw_new.on( 'click', 'button.wp-generate-pw', function() {
     69                        pw_generatebtn.hide();
     70                        pw_line.show();
     71                        pw_field.val( pw_field.data( 'pw' ) ).attr( 'type', 'text' );
     72                        pw_field.trigger( 'propertychange' );
     73                        pw_field.focus();
     74                });
     75
     76                pw_togglebtn.on( 'click', function() {
     77                        var show = pw_togglebtn.attr( 'data-toggle' );
     78                        if ( show == 1 ) {
     79                                pw_field.attr( 'type', 'text' );
     80                                pw_togglebtn.attr( 'data-toggle', 0 )
     81                                        .find( '.text' )
     82                                                .text( 'hide' )
     83                                ;
     84                        } else {
     85                                pw_field.attr( 'type', 'password' );
     86                                pw_togglebtn.attr( 'data-toggle', 1 )
     87                                        .find( '.text' )
     88                                                .text( 'show' )
     89                                ;
     90                        }
     91                });
     92        });
     93
    494        function check_pass_strength() {
    595                var pass1 = $('#pass1').val(), pass2 = $('#pass2').val(), strength;
    696
  • src/wp-admin/user-edit.php

     
    457457        <th><label for="pass1"><?php _e( 'New Password' ); ?></label></th>
    458458        <td>
    459459                <input class="hidden" value=" " /><!-- #24364 workaround -->
    460                 <input type="password" name="pass1" id="pass1" class="regular-text" size="16" value="" autocomplete="off" />
    461                 <p class="description"><?php _e( 'If you would like to change the password type a new one. Otherwise leave this blank.' ); ?></p>
     460                <button type="button" class="button button-secondary wp-generate-pw hide-if-no-js"><?php _e( 'Generate new password' ); ?></button>
     461                <div class="wp-pwd hide-if-js">
     462                <input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="off" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" /> <button type="button" class="button button-secondary wp-hide-pw hide-if-no-js" data-toggle="0">
     463                        <span class="dashicons dashicons-visibility"></span>
     464                        <span class="text">hide</span>
     465                </button>
     466                <div style="display:none" id="pass-strength-result"></div>
     467                </div>
    462468        </td>
    463469</tr>
    464 <tr class="user-pass2-wrap">
     470<tr class="user-pass2-wrap hide-if-js">
    465471        <th scope="row"><label for="pass2"><?php _e( 'Repeat New Password' ); ?></label></th>
    466472        <td>
    467         <input name="pass2" type="password" id="pass2" class="regular-text" size="16" value="" autocomplete="off" />
     473        <input name="pass2" type="password" id="pass2" class="regular-text" value="" autocomplete="off" />
    468474        <p class="description"><?php _e( 'Type your new password again.' ); ?></p>
    469         <br />
    470         <div id="pass-strength-result"><?php _e( 'Strength indicator' ); ?></div>
    471         <p class="description indicator-hint"><?php echo wp_get_password_hint(); ?></p>
    472475        </td>
    473476</tr>
     477<tr class="pw-weak">
     478        <th><label for="pw-weak"><?php _e( 'Confirm Password' ); ?></label></th>
     479        <td>
     480        <input type="checkbox" name="pw-weak" class="pw-checkbox" />
     481        <?php _e( 'Confirm use of weak password.' ); ?>
     482        </td>
     483</tr>
    474484<?php endif; ?>
    475485
    476486<?php
    477 // This is a temporary hook for WordPress 4.3 development. Do not use it or document it.
    478 do_action( '__temp_password_field', $profileuser );
    479 ?>
    480 
    481 <?php
    482487if ( IS_PROFILE_PAGE && count( $sessions->get_all() ) === 1 ) : ?>
    483488        <tr class="user-sessions-wrap hide-if-no-js">
    484489                <th>&nbsp;</th>
  • src/wp-includes/default-constants.php

     
    8080        if ( !defined('SHORTINIT') )
    8181                define('SHORTINIT', false);
    8282
     83        // Constants for features added to WP that should short-circuit their plugin implementations
     84        define( 'WP_FEATURE_BETTER_PASSWORDS', true );
     85
    8386        // Constants for expressing human-readable intervals
    8487        // in their respective number of seconds.
    8588        define( 'MINUTE_IN_SECONDS', 60 );
  • src/wp-includes/script-loader.php

     
    344344
    345345        $scripts->add( 'password-strength-meter', "/wp-admin/js/password-strength-meter$suffix.js", array( 'jquery', 'zxcvbn-async' ), false, 1 );
    346346        did_action( 'init' ) && $scripts->localize( 'password-strength-meter', 'pwsL10n', array(
    347                 'empty' => __('Strength indicator'),
     347                'empty' => __('&nbsp;'),
    348348                'short' => __('Very weak'),
    349349                'bad' => __('Weak'),
    350350                /* translators: password strength */