Block invalid passwords from the frontend form

Author: chriscarrollsmith

main.py

@@ -59,7 +59,7 @@ async def needs_new_tokens_handler(request: Request, exc: NeedsNewTokens):
     return response
 
 
-# Handle PasswordValidationError by rendering the error page
+# Handle PasswordValidationError by rendering the validation_error page
 @app.exception_handler(PasswordValidationError)
 async def password_validation_exception_handler(request: Request, exc: PasswordValidationError):
     return templates.TemplateResponse(
@@ -73,7 +73,7 @@ async def password_validation_exception_handler(request: Request, exc: PasswordV
     )
 
 
-# Handle RequestValidationError by rendering the error page (TODO: use toast instead?)
+# Handle RequestValidationError by rendering the validation_error page
 @app.exception_handler(RequestValidationError)
 async def validation_exception_handler(request: Request, exc: RequestValidationError):
     errors = {}

templates/authentication/register.html

@@ -34,7 +34,11 @@
         <!-- Confirm Password Input -->
         <div class="mb-3">
             <label for="confirm_password" class="form-label">Confirm Password</label>
-            <input type="password" class="form-control" id="confirm_password" name="confirm_password" placeholder="Confirm your password" required>
+            <input type="password" class="form-control" id="confirm_password" name="confirm_password" 
+                   placeholder="Confirm your password" required>
+            <div class="invalid-feedback">
+                Passwords do not match.
+            </div>
         </div>
 
         <!-- Submit Button -->
@@ -47,13 +51,16 @@
     <p class="mt-3 text-center">Already have an account? <a href="{{ url_for('read_login') }}">Login here</a></p>
 </div>
 
-<style>
-    .invalid-feedback {
-        display: none;
-        color: red;
-    }
-    input:invalid:not(:placeholder-shown) + .invalid-feedback {
-        display: block;
-    }
-</style>
+<script>
+    // JavaScript to validate password match
+    document.getElementById('confirm_password').addEventListener('input', function() {
+        const password = document.getElementById('password').value;
+        const confirmPassword = this.value;
+        if (password !== confirmPassword) {
+            this.setCustomValidity('Passwords do not match.');
+        } else {
+            this.setCustomValidity('');
+        }
+    });
+</script>
 {% endblock %}

templates/authentication/reset_password.html

@@ -17,7 +17,7 @@
         <div class="mb-3">
             <label for="new_password" class="form-label">New Password</label>
             <input type="password" class="form-control" id="new_password" name="new_password" 
-                   pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}" 
+            pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@$!%*?&\{\}\<\>\.\,\\\\'#\-_=\+\(\)\[\]:;\|~])[A-Za-z\d@$!%*?&\{\}\<\>\.\,\\\\'#\-_=\+\(\)\[\]:;\|~]{8,}" 
                    title="Must contain at least one number, one uppercase and lowercase letter, one special character, and at least 8 or more characters" 
                    required>
             <div class="invalid-feedback">
@@ -29,6 +29,9 @@
         <div class="mb-3">
             <label for="confirm_new_password" class="form-label">Confirm New Password</label>
             <input type="password" class="form-control" id="confirm_new_password" name="confirm_new_password" required>
+            <div class="invalid-feedback">
+                Passwords do not match.
+            </div>
         </div>
 
         <!-- Submit Button -->
@@ -40,4 +43,17 @@
     <!-- Login Link -->
     <p class="text-center">Remember your password? <a href="{{ url_for('read_login') }}">Login here</a></p>
 </div>
+
+<script>
+    // JavaScript to validate password match
+    document.getElementById('confirm_new_password').addEventListener('input', function() {
+        const newPassword = document.getElementById('new_password').value;
+        const confirmNewPassword = this.value;
+        if (newPassword !== confirmNewPassword) {
+            this.setCustomValidity('Passwords do not match.');
+        } else {
+            this.setCustomValidity('');
+        }
+    });
+</script>
 {% endblock %}