Skip to content

Fix password change validation feedback - display clear error messages instead of browser icon#1009

Merged
maebeale merged 7 commits intomainfrom
copilot/fix-password-reset-issue
Feb 17, 2026
Merged

Fix password change validation feedback - display clear error messages instead of browser icon#1009
maebeale merged 7 commits intomainfrom
copilot/fix-password-reset-issue

Conversation

Copy link
Contributor

Copilot AI commented Feb 15, 2026

What is the goal of this PR and why is this important?

Users were reporting that when trying to change their password, they only saw a "circle-backslash symbol" (browser's default HTML5 validation icon 🚫) without any explanation of why their password was rejected. This made it impossible for users to understand what they needed to do to successfully change their password.

This PR fixes the issue by providing clear, visible password requirements and enhanced error messages so users understand exactly what's wrong and how to fix it.

How did you approach the change?

1. Added Clear Password Requirements

  • Added visible hint text "Password must be at least 5 characters long" below password input fields
  • Added HTML5 minlength="5" attribute for browser-level validation
  • Applied to both user change password form (/users/change_password) and Devise password reset form

2. Enhanced Error Message Display

  • Redesigned the password errors partial (app/views/users/_password_errors.html.erb) with:
    • Visual error icon for better recognition
    • Clear heading: "There was a problem with your password:"
    • Improved spacing and styling for better readability
    • Proper ARIA role="alert" for accessibility

3. Created Consistent Error Handling

  • Created custom Devise error messages partial (app/views/devise/shared/_error_messages.html.erb)
  • Ensures all password-related errors are displayed consistently across the application
  • Makes validation failures obvious and actionable

4. Added Comprehensive Tests

  • Created view specs for users/change_password form
  • Created view specs for devise/passwords/edit form
  • Tests verify requirements are displayed and error messages appear correctly

Anything else to add?

Screenshot:

Password change form with clear error messages

The form now clearly shows:

  • ✅ Password requirements displayed upfront
  • ✅ Clear, specific error messages when validation fails
  • ✅ Visual indicators that draw attention to problems
  • ✅ No more confusing circle-backslash icon without explanation

Testing:

  • ✅ All view specs pass
  • ✅ Code review completed with no issues
  • ✅ Security scan completed with no vulnerabilities

The changes are minimal and focused, directly addressing the user's complaint while improving the overall UX for password changes throughout the application.


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

@maebeale
Copy link
Collaborator

@copilot try again

@maebeale maebeale marked this pull request as ready for review February 15, 2026 21:28
Copy link
Contributor Author

Copilot AI commented Feb 15, 2026

@copilot try again

Fixed in commit 819b6ad. The password change forms now display clear password requirements and show specific error messages instead of just the browser's circle-backslash icon.

Changes:

  • Added "Password must be at least 5 characters long" hint text below password fields
  • Enhanced error display with icon and clear heading "There was a problem with your password:"
  • Applied to both change password and password reset forms
  • Added tests to verify the requirements are displayed

Screenshot showing the improved form

Copilot AI changed the title [WIP] Fix issue preventing new password creation Fix password change validation feedback - display clear error messages instead of browser icon Feb 15, 2026
@maebeale maebeale force-pushed the copilot/fix-password-reset-issue branch from ec2bc9f to 8d996c5 Compare February 16, 2026 23:43
Copilot AI and others added 5 commits February 16, 2026 19:28
- Add visible password requirement hint (5 characters minimum) on change password form
- Add visible password requirement hint on Devise password reset form
- Enhance password error display with icon and clearer formatting
- Create custom Devise error messages partial with better styling
- Add HTML5 minlength validation to prevent browser default error icon

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
- Add spec for users/change_password view to verify password requirements display
- Add spec for devise/passwords/edit view to verify password requirements display
- Test error message display and formatting

Co-authored-by: maebeale <7607813+maebeale@users.noreply.github.com>
@maebeale maebeale force-pushed the copilot/fix-password-reset-issue branch from d815c8e to c73097c Compare February 17, 2026 00:35
@maebeale maebeale merged commit 9086b2f into main Feb 17, 2026
3 checks passed
@maebeale maebeale deleted the copilot/fix-password-reset-issue branch February 17, 2026 00:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants