Add password match feature to register and reset password forms

Author: Yeray Diaz Diaz

warehouse/templates/accounts/register.html

@@ -23,7 +23,7 @@
     <div class="site-container">
       <h1 class="page-title">Create an account on PyPI</h1>
 
-      <form method="POST" action="{{ request.current_route_path() }}">
+      <form method="POST" action="{{ request.current_route_path() }}" data-controller="password password-match">
         <input name="csrf_token" type="hidden" value="{{ request.session.get_csrf_token() }}">
 
         {% if form.errors.__all__ %}
@@ -70,7 +70,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
           {% endif %}
         </div>
 
-        <div data-controller="password">
+        <div>
           <div class="form-group">
             <div class="split-layout">
               <label for="password" class="form-group__label">Password</label>
@@ -81,7 +81,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") }}
+              {{ 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") }}
             </div>
             {% if form.new_password.errors %}
             <ul class="form-errors">
@@ -95,7 +95,7 @@ <h1 class="page-title">Create an account on PyPI</h1>
 
           <div class="form-group">
             <label for="password_confirm" class="form-group__label">Confirm Password</label>
-            {{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.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") }}
             {% if form.password_confirm.errors %}
             <ul class="form-errors">
               {% for error in form.password_confirm.errors %}
@@ -106,11 +106,15 @@ <h1 class="page-title">Create an account on PyPI</h1>
           </div>
         </div>
 
+        <ul class="form-errors">
+          <li data-target="password-match.matchMessage" class="hidden"></li>
+        </ul>
+
         <div class="form-group">
           {{ recaptcha_html(request, form) }}
         </div>
 
-        <input type="submit" value="Create Account" class="button button--primary">
+        <input type="submit" value="Create Account" class="button button--primary" data-target="password-match.submit">
       </form>
     </div>
   </section>

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" method="POST" action="{{ request.current_route_path() }}">
+      <form data-controller="password password-match" 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") }}
+            {{ 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>
           {% if form.new_password.errors %}
           <ul class="form-errors">
@@ -53,7 +53,7 @@ <h1 class="page-title">Reset Your Password</h1>
 
         <div class="form-group">
           <label for="password_confirm" class="form-group__label">Confirm Password</label>
-          {{ form.password_confirm(placeholder="Confirm password", required="required", class_="form-group__input", data_target="password.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") }}
           {% if form.password_confirm.errors %}
           <ul class="form-errors">
             {% for error in form.password_confirm.errors %}
@@ -63,7 +63,11 @@ <h1 class="page-title">Reset Your Password</h1>
           {% endif %}
         </div>
 
-        <input type="submit" value="Reset Password" class="button button--primary">
+        <ul class="form-errors">
+          <li data-target="password-match.matchMessage" class="hidden"></li>
+        </ul>
+
+        <input type="submit" value="Reset Password" class="button button--primary" data-target="password-match.submit">
       </form>
     </div>
   </section>