add in front end (bug 531868)

media/css/zamboni/zamboni.css

@@ -3507,3 +3507,15 @@ input.ui-autocomplete-loading {
 #contribute-box .error {
     padding: 10px 0px 10px 50px;
 }
+
+ul.errorlist li.password-strong {
+    color: green;
+}
+
+ul.errorlist li.password-medium {
+    color: orange;
+}
+
+ul.errorlist li.password-weak {
+    color: #c00;
+}

media/js/zamboni/password-strength.js

@@ -0,0 +1,48 @@
+function initStrength(nodes) {
+    function complexity(text) {
+        var score = 0;
+        if (text.length > 7) { score++; }
+        if (text.length > 12) { score++; }
+        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'];
+        }
+    }
+    $(nodes).each(function() {
+        var $el = $(this),
+            $err = $el.next('ul.errorlist');
+        if (!$err.length) {
+            $err = $('<ul>', {'class':'errorlist'});
+            $el.after($err);
+        }
+        var $count = $('<li>'),
+            $strength = $('<li>', {'text':'', 'class':'strength'});
+        $err.append($count).append($strength);
+        $el.bind('keyup blur', function() {
+            var diff = $el.attr('data-min-length') - $el.val().length;
+            if (diff > 0) {
+                $count.show().text(format(ngettext('At least {0} character left.',
+                                                   'At least {0} characters left.', diff), diff));
+            } else {
+                $count.hide();
+            }
+            var rating = complexity($el.val());
+            $strength.text(rating[0])
+                     .removeClass('password-weak password-medium password-strong')
+                     .addClass('password-'+rating[1]);
+        }).trigger('blur');
+    });
+}
+
+$(document).ready(function() {
+    var passwords = $('input[type=password].password-strength');
+    if (passwords.exists()) {
+        initStrength(passwords);
+    }
+});

media/js/zamboni/tests/password_test.js

@@ -0,0 +1,35 @@
+$(document).ready(function(){
+    var password = {
+        setup: function() {
+            this.sandbox = tests.createSandbox('#password-strength');
+            this.$node = this.sandbox.find('input[type=password]');
+            initStrength(this.$node);
+        },
+        teardown: function() {
+            this.sandbox.remove();
+        }
+    };
+
+    module('Passwords', password);
+
+    test('Length', function() {
+        this.$node.val('123457890').trigger('blur');
+        equal(this.$node.parent().find('ul.errorlist li:hidden').exists(), true);
+
+        this.$node.val('123').trigger('blur');
+        equal(this.$node.parent().find('ul.errorlist li:hidden').exists(), false);
+    });
+
+    test('Complexity', function() {
+        var $strength = this.$node.parent().find('ul.errorlist li.strength');
+
+        this.$node.val('123').trigger('blur');
+        equal($strength.hasClass('password-weak'), true);
+
+        this.$node.val('123abcDEF').trigger('blur');
+        equal($strength.hasClass('password-medium'), true);
+
+        this.$node.val('АзәрбајҹанA13').trigger('blur');
+        equal($strength.hasClass('password-strong'), true);
+    });
+});

media/js/zamboni/tests/suite.json

@@ -11,6 +11,7 @@
         "js/zamboni/editors.js",
         "js/zamboni/upload.js",
         "js/zamboni/files.js",
-        "js/zamboni/contributions.js"
+        "js/zamboni/contributions.js",
+        "js/zamboni/password-strength.js"
     ]
 }

settings.py

@@ -483,6 +483,9 @@ MINIFY_BUNDLES = {
 
             # Hover delay for global header
             'js/global/menu.js',
+
+            # Password length and strength
+            'js/zamboni/password-strength.js'
         ),
         'impala': (
             'js/lib/jquery-1.6.min.js',

templates/qunit.html

@@ -286,7 +286,9 @@
             <a href="/paykey?src=direct" class="suggested-amount">Contribute</a>
         </div>
     </div>
-
+    <div id="password-strength">
+        <input type="password" data-min-length="8" />
+    </div>
 
   <script src="{{ static(url('jsi18n')) }}"></script>
   {{ js('common') }}