More complex validation of registration form toggling the submit

button accordingly.

Checks presence of all required values and verifies the zxcvbn score is > 2

Author: Yeray Diaz Diaz

warehouse/static/js/warehouse/index.js

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

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

@@ -52,21 +52,65 @@ export function submitTriggers() {
 
 /* global zxcvbn */
 
+const disableSubmitButton = () => {
+  let submitBtn = document.querySelector("#submit");
+  submitBtn.setAttribute("disabled", "disabled");
+};
+
+const enableSubmitButton = () => {
+  let submitBtn = document.querySelector("#submit");
+  submitBtn.removeAttribute("disabled");
+};
+
 const checkPasswordStrength = (event) => {
   let result = document.querySelector(".pw-strength-guage");
   if (event.target.value === "") {
     result.setAttribute("class", "pw-strength-guage");
+    result.setAttribute("score", 0);
   } 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}`);
+    result.setAttribute("score", zxcvbnResult.score);
+  }
+};
+
+const currentZxcvbnScore = () => {
+  let result = document.querySelector(".pw-strength-guage");
+  return parseInt(result.getAttribute("score"));
+};
+
+const passwordsMatch = () => {
+  let password = document.querySelector("#password");
+  let passwordConfirmation = document.querySelector("#password_confirm");
+  return password.value === passwordConfirmation.value;
+};
+
+const requiredFieldsHaveValues = () => {
+  let inputFields = document.querySelectorAll("#content input");
+  let inputFieldsArray = Array.prototype.slice.call(inputFields);
+  return inputFieldsArray.every(inputField => inputField.value !== "");
+};
+
+const checkRequiredFields = () => {
+  if (requiredFieldsHaveValues() && currentZxcvbnScore() >= 2 && passwordsMatch()) {
+    enableSubmitButton();
+  } else {
+    disableSubmitButton();
   }
 };
 
-export function passwordStrength() {
+export function registrationFormValidation() {
   let password = document.querySelector("#password");
   if (password === null) return;
+  disableSubmitButton();
+  let inputFields = document.querySelectorAll("#content input");
+  inputFields.forEach(input => {
+    if (input.hasAttribute("required")) {
+      input.addEventListener("input", checkRequiredFields, false);
+    }
+  });
   password.addEventListener("input", checkPasswordStrength, false);
 }

warehouse/templates/accounts/register.html

@@ -36,7 +36,7 @@ <h2>Create an account on PyPI</h2>
 
         <div class="form-group">
           <label for="full_name" class="form-group__label">Name</label>
-          {{ form.full_name(placeholder="Your name", class_="form-group__input") }}
+          {{ form.full_name(placeholder="Your name", required="required", class_="form-group__input") }}
           {% if form.full_name.errors %}
           <ul class="form-errors">
             {% for error in form.full_name.errors %}
@@ -108,7 +108,7 @@ <h2>Create an account on PyPI</h2>
           {{ recaptcha_html(request, form) }}
         </div>
 
-        <input type="submit" value="Create Account" class="button button--highlight">
+        <input type="submit" value="Create Account" id="submit" class="button button--highlight">
       </form>
     </div>
   </section>