Disable form and show warning on mismatch when updating password (#3197)

Author: Yeray Diaz Diaz

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

@@ -11,6 +11,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 import { Controller } from "stimulus";
 
 export default class extends Controller {

warehouse/static/js/warehouse/controllers/password_match_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.
+ */
+
+import { Controller } from "stimulus";
+
+export default class extends Controller {
+  static targets = ["passwordMatch", "matchMessage", "submit"];
+
+  connect() {
+    this.checkPasswordsMatch();
+  }
+
+  checkPasswordsMatch() {
+    if (this.passwordMatchTargets.every(field => field.value === "")) {
+      this.matchMessageTarget.classList.add("hidden");
+      this.submitTarget.setAttribute("disabled", "");
+    } else {
+      this.matchMessageTarget.classList.remove("hidden");
+      if (this.passwordMatchTargets.every((field, i, arr) => field.value === arr[0].value)) {
+        this.matchMessageTarget.innerHTML = "Passwords match";
+        this.matchMessageTarget.classList.add("form-error--valid");
+        this.submitTarget.removeAttribute("disabled");
+      } else {
+        this.matchMessageTarget.innerHTML = "Passwords do not match";
+        this.matchMessageTarget.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

@@ -203,37 +203,39 @@ <h2 class="sub-title">Account Emails</h2>
 
   <h2 class="sub-title">Change Password</h2>
   {{ form_error_anchor(change_password_form) }}
-  <form data-controller="password" method="POST" action="#errors">
+  <form data-controller="password password-match" 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">
-
       <div class="split-layout">
         <label class="form-group__label" for="name">Old Password</label>
         <label for="show-password">
           <input data-action="change->password#togglePasswords" data-target="password.showPassword"
             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")}}
       {{ 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-match.passwordMatch", data_action="keyup->password-match#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-match.passwordMatch", data_action="keyup->password-match#checkPasswordsMatch") }}
       {{ field_errors(change_password_form.password_confirm) }}
     </div>
+    <ul class="form-errors">
+      <li data-target="password-match.matchMessage" 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-match.submit">
     </div>
   </form>