Disable form and show warning on mismatch when updating password

Author: Yeray Diaz Diaz

warehouse/static/js/warehouse/controllers/password_controller.js

@@ -11,21 +11,41 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  static targets = ["showPassword", "password"];
+  static targets = ["showPassword", "password", "newPassword", "confirmPassword", "passwordsMatch", "submit"];
 
   connect() {
     // Reset these so they don't persist between page reloads
     // We assume that both targets above exist
     this.showPasswordTarget.checked = false;
     this.togglePasswords();
+    this.checkPasswordsMatch();
   }
 
   togglePasswords() {
     for (let field of this.passwordTargets) {
       field.type = this.showPasswordTarget.checked ? "text" : "password";
     }
   }
+
+  checkPasswordsMatch() {
+    if (this.passwordTargets.every(field => field.value === "")) {
+      this.passwordsMatchTarget.classList.add("hidden");
+      this.submitTarget.setAttribute("disabled", "");
+    } else {
+      this.passwordsMatchTarget.classList.remove("hidden");
+      if (this.newPasswordTarget.value === this.confirmPasswordTarget.value) {
+        this.passwordsMatchTarget.innerHTML = "Passwords match";
+        this.passwordsMatchTarget.classList.add("form-error--valid");
+        this.submitTarget.removeAttribute("disabled");
+      } else {
+        this.passwordsMatchTarget.innerHTML = "Passwords do not match";
+        this.passwordsMatchTarget.classList.remove("form-error--valid");
+        this.submitTarget.setAttribute("disabled", "");
+      }
+    }
+  }
 }

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

@@ -46,4 +46,17 @@
       max-width: 100%;
     }
   }
+
+  .form-error {
+    &--valid {
+      color: $success-color;
+
+      &:before {
+        font-family: "FontAwesome";
+        content: "\f00c"; // Check / Tick
+        margin-right: 5px;
+        color: $success-color;
+      }
+    }
+  }
 }

warehouse/templates/manage/account.html

@@ -215,25 +215,42 @@ <h2 class="sub-title">Change Password</h2>
             id="show-password" type="checkbox" tabindex="4">&nbsp;Show passwords
         </label>
       </div>
-      {{ change_password_form.password(placeholder="Your current password", required="required", class_="form-group__input", data_target="password.password") }}
+      {{ change_password_form.password(
+          placeholder="Your current password",
+          required="required",
+          class_="form-group__input",
+          data_target="password.password password.oldPassword")}}
       {{ field_errors(change_password_form.password) }}
     </div>
     <div class="form-group">
       <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") }}
+          {{ change_password_form.new_password(
+            placeholder="Select a new password",
+            required="required",
+            class_="form-group__input",
+            data_target="password.password password.newPassword",
+            data_action="keyup->password#checkPasswordsMatch") }}
       </div>
       {{ field_errors(change_password_form.new_password) }}
       {{ password_strength_gauge() }}
     </div>
     <div class="form-group">
       <label class="form-group__label" for="name">Confirm New Password</label>
-      {{ change_password_form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.password") }}
+      {{ change_password_form.password_confirm(
+          placeholder="Confirm password",
+          required="required",
+          class_="form-group__input",
+          data_target="password.password password.confirmPassword",
+          data_action="keyup->password#checkPasswordsMatch") }}
       {{ field_errors(change_password_form.password_confirm) }}
     </div>
+    <ul class="form-errors">
+      <li data-target="password.passwordsMatch" class="hidden"></li>
+    </ul>
     <div>
-      <input value="Update Password" class="button button--primary" type="submit">
+      <input value="Update Password" class="button button--primary" type="submit" data-target="password.submit">
     </div>
   </form>