Port password strength gauge to Stimulus

Author: Yeray Diaz Diaz

warehouse/static/js/warehouse/controllers/password_strength_gauge_controller.js

@@ -0,0 +1,41 @@
+/**
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/* global zxcvbn */
+
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["password", "strengthGauge"];
+
+  checkPasswordStrength() {
+    let password = this.passwordTarget.value;
+    if (password === "") {
+      this.strengthGaugeTarget.setAttribute("class", "password-strength__gauge");
+      this.setScreenReaderMessage("Password field is empty");
+    } else {
+      // following recommendations on the zxcvbn JS docs
+      // the zxcvbn function is available by loading `vendor/zxcvbn.js`
+      // in the register, account and reset password templates
+      let zxcvbnResult = zxcvbn(password);
+      this.strengthGaugeTarget.setAttribute("class", `password-strength__gauge password-strength__gauge--${zxcvbnResult.score}`);
+      this.strengthGaugeTarget.setAttribute("data-zxcvbn-score", zxcvbnResult.score);
+      this.setScreenReaderMessage(zxcvbnResult.feedback.suggestions.join(" ") || "Password is strong");
+    }
+  }
+
+  setScreenReaderMessage(msg) {
+    this.strengthGaugeTarget.querySelector(".sr-only").innerHTML = msg;
+  }
+}

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

@@ -50,50 +50,24 @@ export function submitTriggers() {
   }
 }
 
-/* global zxcvbn */
-
 const tooltipClasses = ["tooltipped", "tooltipped-s", "tooltipped-immediate"];
 let passwordFormRoot = document;
 
-const passwordStrengthValidator = (value) => {
-  const zxcvbnResult = zxcvbn(value);
-  return zxcvbnResult.score < 2 ?
-    zxcvbnResult.feedback.suggestions.join(" ") : null;
+const passwordStrengthValidator = () => {
+  let passwordGauge = document.querySelector(".password-strength__gauge");
+  let score = parseInt(passwordGauge.getAttribute("data-zxcvbn-score"));
+  if (!isNaN(score) && score < 2) {
+    return passwordGauge.querySelector(".sr-only").innerHTML;
+  } else {
+    return null;
+  }
 };
 
 const fieldRequiredValidator = (value) => {
   return value === ""?
     "Please fill out this field" : null;
 };
 
-const checkPasswordStrength = (event) => {
-  let result = passwordFormRoot.querySelector(".password-strength__gauge");
-  if (event.target.value === "") {
-    result.setAttribute("class", "password-strength__gauge");
-    // Feedback for screen readers
-    result.querySelector(".sr-only").innerHTML = "Password field is empty";
-  } 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", `password-strength__gauge password-strength__gauge--${zxcvbnResult.score}`);
-
-    // Feedback for screen readers
-    result.querySelector(".sr-only").innerHTML = zxcvbnResult.feedback.suggestions.join(" ") || "Password is strong";
-  }
-};
-
-const setupPasswordStrengthGauge = () => {
-  let password = passwordFormRoot.querySelector("#new_password");
-  if (password === null) return;
-  password.addEventListener(
-    "input",
-    checkPasswordStrength,
-    false
-  );
-};
-
 const attachTooltip = (field, message) => {
   let parentNode = field.parentNode;
   parentNode.classList.add.apply(parentNode.classList, tooltipClasses);
@@ -121,14 +95,6 @@ const validateForm = (event) => {
   }
 
   let password = passwordFormRoot.querySelector("#new_password");
-  let passwordConfirm = passwordFormRoot.querySelector("#password_confirm");
-  if (password.value !== passwordConfirm.value) {
-    let message = "Passwords do not match";
-    attachTooltip(password, message);
-    event.preventDefault();
-    return false;
-  }
-
   let passwordStrengthMessage = passwordStrengthValidator(password.value);
   if (passwordStrengthMessage !== null) {
     attachTooltip(password, passwordStrengthMessage);
@@ -138,12 +104,11 @@ const validateForm = (event) => {
 };
 
 export function registerFormValidation() {
-  const passwordStrengthNode = document.querySelector(".password-strength");
-  if (passwordStrengthNode === null) return;
+  const newPasswordNode = document.querySelector("#new_password");
+  if (newPasswordNode === null) return;
   passwordFormRoot = document.evaluate(
-    "./ancestor::form", passwordStrengthNode, null,
+    "./ancestor::form", newPasswordNode, null,
     XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
-  setupPasswordStrengthGauge();
   const submitButton = passwordFormRoot.querySelector("input[type='submit']");
   submitButton.addEventListener("click", validateForm, false);
 }

warehouse/templates/accounts/register.html

@@ -21,7 +21,7 @@
     <div class="site-container">
       <h1 class="page-title">Create an account on PyPI</h1>
 
-      <form method="POST" action="{{ request.current_route_path() }}" data-controller="password password-match">
+      <form method="POST" action="{{ request.current_route_path() }}" data-controller="password password-match password-strength-gauge">
         <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
 
         {% if form.errors.__all__ %}
@@ -85,7 +85,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
             </div>
             {# the password field needs to be wrapped in a div to properly place tooltips #}
             <div>
-              {{ form.new_password(placeholder="Select a password", required="required", class_="form-group__input", autocomplete="new-password", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
+              {{ form.new_password(placeholder="Select a password", required="required", class_="form-group__input", autocomplete="new-password", data_target="password.password password-match.passwordMatch password-strength-gauge.password", data_action="keyup->password-match#checkPasswordsMatch keyup->password-strength-gauge#checkPasswordStrength") }}
             </div>
             {% if form.new_password.errors %}
             <ul class="form-errors">
@@ -94,7 +94,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
               {% endfor %}
             </ul>
             {% endif %}
-            {{ password_strength_gauge() }}
+            {{ password_strength_gauge(data_target="password-strength-gauge.strengthGauge") }}
           </div>
 
           <div class="form-group">

warehouse/templates/accounts/reset-password.html

@@ -19,7 +19,7 @@
   <section class="horizontal-section">
     <div class="site-container">
       <h1 class="page-title">Reset Your Password</h1>
-      <form data-controller="password password-match" method="POST" action="{{ request.current_route_path() }}">
+      <form data-controller="password password-match password-strength-gauge" method="POST" action="{{ request.current_route_path() }}">
         <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
         {% if form.errors.__all__ %}
           <ul class="errors">
@@ -39,7 +39,7 @@ <h1 class="page-title">Reset Your Password</h1>
           </div>
           {# the password field needs to be wrapped in a div to properly place tooltips #}
           <div>
-            {{ form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
+            {{ form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch password-strength-gauge.password", data_action="keyup->password-match#checkPasswordsMatch keyup->password-strength-gauge#checkPasswordStrength") }}
           </div>
           {% if form.new_password.errors %}
           <ul class="form-errors">
@@ -48,7 +48,7 @@ <h1 class="page-title">Reset Your Password</h1>
             {% endfor %}
           </ul>
           {% endif %}
-          {{ password_strength_gauge() }}
+          {{ password_strength_gauge(data_target="password-strength-gauge.strengthGauge") }}
         </div>
 
         <div class="form-group">

warehouse/templates/base.html

@@ -18,14 +18,14 @@
 </time>
 {%- endmacro %}
 
-{% macro password_strength_gauge() -%}
+{% macro password_strength_gauge(data_target=None) -%}
 <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">
   <strong>Password strength:</strong>
   <span class="password-strength">
-    <span class="password-strength__gauge">
+    <span class="password-strength__gauge"{% if data_target %} data-target="{{ data_target }}"{% endif %}>
       <span class="sr-only">Password field is empty</span>
     </span>
   </span>

warehouse/templates/manage/account.html

@@ -203,7 +203,7 @@ <h2 class="sub-title">Account Emails</h2>
 
   <h2 class="sub-title">Change Password</h2>
   {{ form_error_anchor(change_password_form) }}
-  <form data-controller="password password-match" method="POST" action="#errors">
+  <form data-controller="password password-match password-strength-gauge" method="POST" action="#errors">
     <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
     {{ form_errors(change_password_form) }}
     <div class="form-group">
@@ -221,10 +221,10 @@ <h2 class="sub-title">Change Password</h2>
       <label class="form-group__label" for="name">New Password</label>
       {# the password field needs to be wrapped in a div to properly place tooltips #}
       <div>
-        {{ change_password_form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
+        {{ change_password_form.new_password(placeholder="Select a new password", required="required", class_="form-group__input", data_target="password.password password-match.passwordMatch password-strength-gauge.password", data_action="keyup->password-match#checkPasswordsMatch keyup->password-strength-gauge#checkPasswordStrength") }}
       </div>
       {{ field_errors(change_password_form.new_password) }}
-      {{ password_strength_gauge() }}
+      {{ password_strength_gauge(data_target="password-strength-gauge.strengthGauge") }}
     </div>
     <div class="form-group">
       <label class="form-group__label" for="name">Confirm New Password</label>