portico: Explain why password is weak to user.

frontend_tests/node_tests/password.js

@@ -2,11 +2,14 @@ add_dependencies({
     zxcvbn: 'node_modules/zxcvbn/dist/zxcvbn.js',
 });
 
+set_global('i18n', global.stub_i18n);
+
 var common = require("js/common.js");
 
 (function test_basics() {
     var accepted;
     var password;
+    var warning;
 
     var bar = (function () {
         var self = {};
@@ -60,21 +63,28 @@ var common = require("js/common.js");
     assert(!accepted);
     assert.equal(bar.w, '39.7%');
     assert.equal(bar.added_class, 'bar-danger');
-
+    warning = common.password_warning(password, password_field(10));
+    assert.equal(warning, 'translated: Password should be at least 10 characters long');
 
     password = 'foo';
     accepted = common.password_quality(password, bar, password_field(2, 0.001));
     assert(accepted);
     assert.equal(bar.w, '10.390277164940581%');
     assert.equal(bar.added_class, 'bar-success');
+    warning = common.password_warning(password, password_field(2));
+    assert.equal(warning, 'translated: Password is too weak');
 
     password = 'aaaaaaaa';
     accepted = common.password_quality(password, bar, password_field(6, 1000));
     assert(!accepted);
     assert.equal(bar.added_class, 'bar-danger');
+    warning = common.password_warning(password, password_field(6));
+    assert.equal(warning, 'Repeats like "aaa" are easy to guess');
 
     delete global.zxcvbn;
     password = 'aaaaaaaa';
     accepted = common.password_quality(password, bar, password_field(6, 1000));
     assert(accepted === undefined);
+    warning = common.password_warning(password, password_field(6));
+    assert(warning === undefined);
 }());

static/js/common.js

@@ -62,6 +62,23 @@ exports.password_quality = function (password, bar, password_field) {
     return acceptable;
 };
 
+exports.password_warning = function (password, password_field) {
+    if (typeof zxcvbn === 'undefined') {
+        return undefined;
+    }
+
+    var min_length = 6;
+
+    if (password_field) {
+        min_length = password_field.data('minLength') || min_length;
+    }
+
+    if (password.length < min_length) {
+        return i18n.t('Password should be at least __length__ characters long', {length: min_length});
+    }
+    return zxcvbn(password).feedback.warning || i18n.t("Password is too weak");
+};
+
 return exports;
 
 }());

static/js/portico/signup.js

@@ -1,10 +1,13 @@
 $(function () {
     // NB: this file is included on multiple pages.  In each context,
     // some of the jQuery selectors below will return empty lists.
+    var password_field = $('#id_password, #id_new_password1');
 
     $.validator.addMethod('password_strength', function (value) {
-        return common.password_quality(value, undefined, $('#id_password, #id_new_password1'));
-    }, "Password is too weak.");
+        return common.password_quality(value, undefined, password_field);
+    }, function () {
+        return common.password_warning(password_field.val(), password_field);
+    });
 
     function highlight(class_to_add) {
         // Set a class on the enclosing control group.
@@ -35,7 +38,7 @@ $(function () {
         unhighlight: highlight('success'),
     });
 
-    $('#id_password, #id_new_password1').on('change keyup', function () {
+    password_field.on('change keyup', function () {
         // Update the password strength bar even if we aren't validating
         // the field yet.
         common.password_quality($(this).val(), $('#pw_strength .bar'), $(this));