Ticket #25603: 25603.5.diff

src/wp-includes/script-loader.php

@@ -327 +327 @@
                 'strong' => __('Strong'),
                 'mismatch' => __('Mismatch')
         ) );
+        $scripts->add( 'about-animation', "/wp-admin/js/about-animation$suffix.js", array( 'jquery', 'password-strength-meter'), false, 1);
 
         $scripts->add( 'user-profile', "/wp-admin/js/user-profile$suffix.js", array( 'jquery', 'password-strength-meter' ), false, 1 );
 

src/wp-admin/js/about-animation.js

@@ +1 @@
+(function($){
+    var password = 'Gosh, WordPress is grand.',
+        $input = $('#pass'),
+        shouldAnimate = true,
+        indicatorString = $('#pass-strength-result').text();
+
+    function updateResult(){
+        var strength = wp.passwordStrength.meter($input.val(), [], $input.val());
+
+        $('#pass-strength-result').removeClass('short bad good strong');
+        switch ( strength ) {
+            case 2:
+                $('#pass-strength-result').addClass('bad').html( pwsL10n['bad'] );
+                break;
+            case 3:
+                $('#pass-strength-result').addClass('good').html( pwsL10n['good'] );
+                break;
+            case 4:
+                $('#pass-strength-result').addClass('strong').html( pwsL10n['strong'] );
+                break;
+            default:
+                $('#pass-strength-result').addClass('short').html( pwsL10n['short'] );
+        }
+    }
+
+    function animate(){
+        if (shouldAnimate === false)
+            return;
+        if ($input.val().length < password.length){
+            $input.val( password.substr(0, $input.val().length + 1) );
+            updateResult();
+        } else {
+            $input.val('');
+                    $('#pass-strength-result').removeClass('short bad good strong');
+        }
+        // Look like real typing by changing the speed new letters are added each time
+        setTimeout(animate, 220 + Math.floor(Math.random() * ( 800 - 220)) );
+    }
+
+    
+    // Turn off the animation on focus
+    $input.on('focus', function(){
+        shouldAnimate = false;
+        $('#pass-strength-result').removeClass('short bad good strong');
+        $('#pass-strength-result').text(indicatorString);
+        $input.val('')
+    });
+
+    // Act like a normal password strength meter 
+    $input.on('keyup', function(){
+        updateResult();
+    });
+
+    // Start the animation
+    setTimeout(animate, 1200);
+
+})(jQuery)

src/wp-admin/about.php

@@ -13 +13 @@
 
 list( $display_version ) = explode( '-', $wp_version );
 
+wp_enqueue_script('about-animation');
+
 include( ABSPATH . 'wp-admin/admin-header.php' );
 ?>
 <div class="wrap about-wrap">
@@ -74 +76 @@
                 <div>
                         <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>
                 </div>
-                <div class="last-feature">
-                        (Actual password meter demo)
+                <div class="last-feature about-password-meter">
+                        <input type="password" id="pass" size="25" value="" style="display: block;width: 100%;padding: 5px;font-size: 1.8em;"/>
+                        <p id="pass-strength-result" style="display:block;width: 100%;padding: 17px 0;"><?php _e( 'Strength indicator' ); ?></p>
                 </div>
         </div>
 </div>