use progress to show a meter instead of text (bug 662927)

media/css/zamboni/developers.css

@@ -124,6 +124,7 @@ form .char-count:after {
 
 .devhub-form .tip,
 .addon-submission-process .tip,
+ul.errorlist li span.tip,
 a.remove,
 span.remove {
     -moz-border-radius: 20px;

media/css/zamboni/zamboni.css

@@ -3513,14 +3513,10 @@ input.ui-autocomplete-loading {
     padding: 10px 0px 10px 50px;
 }
 
-ul.errorlist li.password-strong {
-    color: green;
+ul.errorlist li progress {
+    margin-left: 1em;
 }
 
-ul.errorlist li.password-medium {
-    color: orange;
-}
-
-ul.errorlist li.password-weak {
-    color: #c00;
+ul.errorlist li.strength {
+    color: #444444;
 }

media/js/zamboni/password-strength.js

@@ -6,13 +6,7 @@ function initStrength(nodes) {
         if (text.match(/[0-9]/)) { score++; }
         if (text.match(/[a-z]/) && text.match(/[A-Z]/)) { score++; }
         if (text.match(/[^a-zA-Z0-9]/)) { score++; }
-        if (score < 3) {
-            return [gettext('Password strength: weak.'), 'weak'];
-        } else if (score < 4) {
-            return [gettext('Password strength: medium.'), 'medium'];
-        } else {
-            return [gettext('Password strength: strong.'), 'strong'];
-        }
+        return score;
     }
     $(nodes).each(function() {
         var $el = $(this),
@@ -22,7 +16,9 @@ function initStrength(nodes) {
             $el.after($err);
         }
         var $count = $('<li>'),
-            $strength = $('<li>', {'text':'', 'class':'strength'});
+            $strength = $('<li>', {'class':'strength'})
+                         .append($('<span>', {'text':gettext('Password strength:')}))
+                         .append($('<progress>', {'value':0, 'max':100, 'text':'0%'}));
         $err.append($count).append($strength);
         $el.bind('keyup blur', function() {
             var diff = $el.attr('data-min-length') - $el.val().length;
@@ -32,10 +28,8 @@ function initStrength(nodes) {
             } else {
                 $count.hide();
             }
-            var rating = complexity($el.val());
-            $strength.text(rating[0])
-                     .removeClass('password-weak password-medium password-strong')
-                     .addClass('password-'+rating[1]);
+            var val = (complexity($el.val()) / 5) * 100;
+            $strength.children('progress').attr('value', val).text(format('{0}%', val));
         });
     });
 }

media/js/zamboni/tests/password_test.js

@@ -21,15 +21,15 @@ $(document).ready(function(){
     });
 
     test('Complexity', function() {
-        var $strength = this.$node.parent().find('ul.errorlist li.strength');
+        var $strength = this.$node.parent().find('ul.errorlist li.strength progress');
 
         this.$node.val('123').trigger('blur');
-        equal($strength.hasClass('password-weak'), true);
+        equal($strength.attr('value'), 20);
 
         this.$node.val('123abcDEF').trigger('blur');
-        equal($strength.hasClass('password-medium'), true);
+        equal($strength.attr('value'), 60);
 
         this.$node.val('АзәрбајҹанA13').trigger('blur');
-        equal($strength.hasClass('password-strong'), true);
+        equal($strength.attr('value'), 80);
     });
 });