WordPress.org

Make WordPress Core

Ticket #25603: 25603.5.diff

File 25603.5.diff, 3.9 KB (added by jorbin, 6 years ago)
  • src/wp-includes/script-loader.php

     
    327327                'strong' => __('Strong'),
    328328                'mismatch' => __('Mismatch')
    329329        ) );
     330        $scripts->add( 'about-animation', "/wp-admin/js/about-animation$suffix.js", array( 'jquery', 'password-strength-meter'), false, 1);
    330331
    331332        $scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
    332333
  • src/wp-admin/js/about-animation.js

     
     1(function($){
     2    var password = 'Gosh, WordPress is grand.',
     3        $input = $('#pass'),
     4        shouldAnimate = true,
     5        indicatorString = $('#pass-strength-result').text();
     6
     7    function updateResult(){
     8        var strength = wp.passwordStrength.meter($input.val(), [], $input.val());
     9
     10        $('#pass-strength-result').removeClass('short bad good strong');
     11        switch ( strength ) {
     12            case 2:
     13                $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
     14                break;
     15            case 3:
     16                $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
     17                break;
     18            case 4:
     19                $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
     20                break;
     21            default:
     22                $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
     23        }
     24    }
     25
     26    function animate(){
     27        if (shouldAnimate === false)
     28            return;
     29        if ($input.val().length < password.length){
     30            $input.val( password.substr(0, $input.val().length + 1) );
     31            updateResult();
     32        } else {
     33            $input.val('');
     34                    $('#pass-strength-result').removeClass('short bad good strong');
     35        }
     36        // Look like real typing by changing the speed new letters are added each time
     37        setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) );
     38    }
     39
     40   
     41    // Turn off the animation on focus
     42    $input.on('focus', function(){
     43        shouldAnimate = false;
     44        $('#pass-strength-result').removeClass('short bad good strong');
     45        $('#pass-strength-result').text(indicatorString);
     46        $input.val('')
     47    });
     48
     49    // Act like a normal password strength meter
     50    $input.on('keyup', function(){
     51        updateResult();
     52    });
     53
     54    // Start the animation
     55    setTimeout(animate, 1200);
     56
     57})(jQuery)
  • src/wp-admin/about.php

     
    1313
    1414list( $display_version ) = explode( '-', $wp_version );
    1515
     16wp_enqueue_script('about-animation');
     17
    1618include( ABSPATH . 'wp-admin/admin-header.php' );
    1719?>
    1820<div class="wrap about-wrap">
     
    7476                <div>
    7577                        <p><?php _e( 'Your password is your site&#8217;s first line of defense. It&#8217;s best to create passwords that are complex, long, and unique. To that end, our password meter has been updated in WordPress 3.7 to recognize common mistakes that can weaken your password: dates, names, keyboard patterns (123456789), and even pop culture references.' ); ?> <?php _e( 'Try it out on the right.' ); ?></p>
    7678                </div>
    77                 <div class="last-feature">
    78                         (Actual password meter demo)
     79                <div class="last-feature about-password-meter">
     80                        <input type="password" id="pass" size="25" value="" style="display: block;width: 100%;padding: 5px;font-size: 1.8em;"/>
     81                        <p id="pass-strength-result" style="display:block;width: 100%;padding: 17px 0;"><?php _e( 'Strength indicator' ); ?></p>
    7982                </div>
    8083        </div>
    8184</div>