Added vendor JS gulp step to include zxcvbn.js

Include it in the register template
Added password strength gauge in registration form.

Author: Yeray Diaz Diaz

Gulpfile.babel.js

@@ -150,6 +150,11 @@ gulp.task("dist:images", () => {
               .pipe(gulp.dest(path.join(distPath, "images")));
 });
 
+gulp.task("dist:vendor", () => {
+  return gulp.src(path.join(staticPrefix, "js", "vendor", "**", "*"))
+              .pipe(gulp.dest(path.join(distPath, "js", "vendor")));
+});
+
 
 gulp.task("dist:manifest", () => {
   let paths = [
@@ -252,7 +257,7 @@ gulp.task("dist", (cb) => {
     // any previously built files.
     "clean",
     // Build all of our static assets.
-    ["dist:font-awesome", "dist:css", "dist:js"],
+    ["dist:font-awesome", "dist:css", "dist:js", "dist:vendor"],
     // We have this here, instead of in the list above even though there is no
     // ordering dependency so that all of it's output shows up together which
     // makes it easier to read.

warehouse/static/js/vendor/zxcvbn.js

@@ -62,6 +62,7 @@ docReady(Analytics);
 
 // Handle the JS based automatic form submission.
 docReady(formUtils.submitTriggers);
+docReady(formUtils.passwordStrength);
 
 docReady(Statuspage);
 

warehouse/static/js/warehouse/index.js

@@ -49,3 +49,24 @@ export function submitTriggers() {
     );
   }
 }
+
+/* global zxcvbn */
+
+const checkPasswordStrength = (event) => {
+  let result = document.querySelector(".pw-strength-guage");
+  if (event.target.value === "") {
+    result.setAttribute("class", "pw-strength-guage");
+  } else {
+    // following recommendations on the zxcvbn JS docs
+    // the zxcvbn function is available by loading `vendor/zxcvbn.js`
+    // in the register page template only
+    let zxcvbnResult = zxcvbn(event.target.value);
+    result.setAttribute("class", `pw-strength-guage pw-strength-guage__${zxcvbnResult.score}`);
+  }
+};
+
+export function passwordStrength() {
+  let password = document.querySelector("#password");
+  if (password === null) return;
+  password.addEventListener("input", checkPasswordStrength, false);
+}

warehouse/static/js/warehouse/utils/forms.js

@@ -44,5 +44,43 @@
     max-width: 100%;
     font-size: $small-font-size;
     font-style: italic;
+
+    .pw-strength {
+      display: inline-block;
+      width: 100%;
+      height: 0.8em;
+      border: 1px solid $border-color;
+
+      .pw-strength-guage {
+        width: 0%;
+        height: 100%;
+        display: block;
+
+        &__0 {
+          width: 20%;
+          background-color: red;
+        }
+
+        &__1 {
+          width: 40%;
+          background-color: orange;
+        }
+
+        &__2 {
+          width: 60%;
+          background-color: yellow;
+        }
+
+        &__3 {
+          width: 80%;
+          background-color: #508000;
+        }
+
+        &__4 {
+          width: 100%;
+          background-color: green;
+        }
+      }
+    }
   }
 }

warehouse/static/sass/blocks/_form-group.scss

@@ -76,6 +76,9 @@ <h2>Create an account on PyPI</h2>
           <p class="form-group__help-text">
             Choose a strong password that contains letters (uppercase and lowercase), numbers and special characters. Avoid common words or repetition.
           </p>
+          <p class="form-group__help-text">
+            Password strength: <span class="pw-strength"><span class="pw-strength-guage"></span></span>
+          </p>
           {% if form.password.errors %}
           <ul class="form-errors">
             {% for error in form.password.errors %}
@@ -108,4 +111,7 @@ <h2>Create an account on PyPI</h2>
 
 {% block extra_js %}
   {{ recaptcha_src(request) }}
+  <script async
+  src="{{ request.static_path('warehouse:static/dist/js/vendor/zxcvbn.js') }}">
+</script>
 {% endblock %}