fix(frontend): show password complexity errors and inline checklist (EVO-992)#46
Merged
Conversation
…EVO-992) Map backend 422 `codes` array to localized error toasts instead of a generic message. Add real-time complexity checklist below the new-password field (ticks as each rule is met). Correct frontend min-length guard from 6 to 8 characters to match backend policy. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Reviewer's GuideThis PR aligns the profile password change flow with backend password policies by tightening client-side validation, surfacing backend validation codes as localized toasts, and adding a real-time password complexity checklist driven by new i18n strings in English and Brazilian Portuguese. Sequence diagram for updated password change flow with backend validation codessequenceDiagram
actor User
participant ProfilePage
participant Toast
participant BackendAuthService
User->>ProfilePage: Fill current_password, password, password_confirmation
User->>ProfilePage: Click changePassword
alt missing required fields
ProfilePage->>Toast: toast.error(password.validation.allFields)
else password and confirmation mismatch
ProfilePage->>Toast: toast.error(password.validation.passwordMatch)
else password shorter than 8 chars
ProfilePage->>Toast: toast.error(password.validation.minLength)
else client side validation passed
ProfilePage->>BackendAuthService: POST /password/change
alt success
BackendAuthService-->>ProfilePage: 200 OK
ProfilePage->>Toast: toast.success(notifications.passwordChangeSuccess)
else validation error with codes
BackendAuthService-->>ProfilePage: 422 VALIDATION_ERROR details[ { field: password, codes } ]
ProfilePage->>ProfilePage: extractError(error)
alt password field has codes
loop for each code in codes
ProfilePage->>Toast: toast.error(password.errors.<mapped_from_code>)
end
else no password codes in details
ProfilePage->>Toast: toast.error(notifications.passwordChangeError)
end
else other error
BackendAuthService-->>ProfilePage: 5xx or network error
ProfilePage->>Toast: toast.error(notifications.passwordChangeError)
end
end
Flow diagram for real-time password complexity checklist evaluationflowchart TD
A[User types in new password field] --> B[Update newPassword state]
B --> C[Evaluate complexityRules
minLength: length >= 8
uppercase: has A-Z
lowercase: has a-z
number: has 0-9
specialChar: has non-alphanumeric]
C --> D{newPassword.length > 0?}
D -->|No| E[Hide complexity checklist]
D -->|Yes| F[Render checklist below field]
F --> G[For each rule
met = true or false]
G --> H{met?}
H -->|Yes| I[Show rule with Check icon
and green text]
H -->|No| J[Show rule with X icon
and muted text]
I --> K[User adjusts password until all rules are met]
J --> K[User adjusts password until all rules are met]
K --> L[User submits form when satisfied]
File-Level Changes
Tips and commandsInteracting with Sourcery
Customizing Your ExperienceAccess your dashboard to:
Getting Help
|
There was a problem hiding this comment.
Hey - I've left some high level feedback:
- When mapping backend validation
codesto toasts, you currently fire one toast per code; consider aggregating the messages into a single toast or a short list to avoid overwhelming users with multiple sequential notifications. - The error-code-to-i18n key mapping uses
password.errors.${code.replace('password.', '')}without checking for missing translations; you might want to guard against unknown codes (e.g., fallback to the generic error message ift(key)resolves to the key itself). - The password complexity rules are defined inline inside
renderSenha; if these rules need to stay in sync with backend policy, consider extracting them into a shared helper (and possibly reusing them in the submit-time validation) to reduce divergence risk.
Prompt for AI Agents
Please address the comments from this code review:
## Overall Comments
- When mapping backend validation `codes` to toasts, you currently fire one toast per code; consider aggregating the messages into a single toast or a short list to avoid overwhelming users with multiple sequential notifications.
- The error-code-to-i18n key mapping uses `password.errors.${code.replace('password.', '')}` without checking for missing translations; you might want to guard against unknown codes (e.g., fallback to the generic error message if `t(key)` resolves to the key itself).
- The password complexity rules are defined inline inside `renderSenha`; if these rules need to stay in sync with backend policy, consider extracting them into a shared helper (and possibly reusing them in the submit-time validation) to reduce divergence risk.Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.
dpaes
approved these changes
May 11, 2026
dpaes
left a comment
Contributor
There was a problem hiding this comment.
Aprovado via /evo-code-review (EVO-992). Débito conhecido: ausência de testes para handleChangePassword e mapeamento de codes; toast multiplicado em falhas multi-regra; chave i18n password.errors.too_long ausente. Aprovação consciente do owner (Davidson).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
codesarray (e.g.password.missing_special_char) to localized error toasts instead of a generic messagepassword.errors.*) and rule labels (password.rules.*) inenandpt-BRValidation
evo-ai-frontend-community: pnpm exec tsc -b --noEmit✓evo-ai-frontend-community: pnpm exec eslint src/pages/Shared/Profile/Profile.tsx— 0 new errors ✓Changed Files
src/pages/Shared/Profile/Profile.tsxsrc/i18n/locales/en/profile.jsonsrc/i18n/locales/pt-BR/profile.jsonRelated PRs
Linked Issue
🤖 Generated with Claude Code
Summary by Sourcery
Align password change UX with backend validation by surfacing detailed complexity feedback and localized errors.
New Features:
Bug Fixes:
Enhancements: