Skip to content

fix(frontend): show password complexity errors and inline checklist (EVO-992)#46

Merged
dpaes merged 1 commit into
developfrom
fix/EVO-992
May 11, 2026
Merged

fix(frontend): show password complexity errors and inline checklist (EVO-992)#46
dpaes merged 1 commit into
developfrom
fix/EVO-992

Conversation

@marcelogorutuba

@marcelogorutuba marcelogorutuba commented May 7, 2026

Copy link
Copy Markdown
Member

Summary

  • Map backend 422 codes array (e.g. password.missing_special_char) to localized error toasts instead of a generic message
  • Add real-time complexity checklist below the new-password field — each rule ticks green as the user types
  • Correct frontend min-length guard from 6 to 8 characters to match backend policy
  • Add i18n keys for error codes (password.errors.*) and rule labels (password.rules.*) in en and pt-BR

Validation

  • 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.tsx
  • src/i18n/locales/en/profile.json
  • src/i18n/locales/pt-BR/profile.json

Related PRs

Linked Issue

  • EVO-992

🤖 Generated with Claude Code

Summary by Sourcery

Align password change UX with backend validation by surfacing detailed complexity feedback and localized errors.

New Features:

  • Add a real-time password complexity checklist beneath the new password field with visual indicators for each rule.

Bug Fixes:

  • Increase the client-side minimum password length from 6 to 8 characters to match backend policy.
  • Map backend password validation error codes to specific localized toast messages instead of a generic error.

Enhancements:

  • Extend i18n resources in English and Brazilian Portuguese with password error messages and complexity rule labels for the profile page.

…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>
@sourcery-ai

sourcery-ai Bot commented May 7, 2026

Copy link
Copy Markdown

Reviewer's Guide

This 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 codes

sequenceDiagram
  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
Loading

Flow diagram for real-time password complexity checklist evaluation

flowchart 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]
Loading

File-Level Changes

Change Details Files
Handle backend password validation error codes and show localized toasts instead of a generic error message.
  • Wrap password change error handling with extractError to parse backend responses.
  • Detect VALIDATION_ERROR with field=password and iterate its codes array.
  • Map each backend code (e.g. password.missing_special_char) to an i18n key under password.errors.* and show a toast per code.
  • Fallback to the existing generic password change error toast when the structure or codes are missing.
src/pages/Shared/Profile/Profile.tsx
Add an inline, real-time password complexity checklist under the new-password field.
  • Refactor renderSenha from an implicit return to a function body that derives newPassword and a complexityRules array.
  • Compute rule satisfaction for length>=8, uppercase, lowercase, numeric, and special character using regexes.
  • Render a conditional
      under the new-password input when the user has typed any characters, showing each rule with a Check/X icon and localized label from password.rules.*.
    • Style rule items with green text when met and muted text when unmet, keeping them compact and inline with the form.
src/pages/Shared/Profile/Profile.tsx
Align client-side minimum password length and add localized strings for password rules and errors in both locales.
  • Update the frontend min-length guard from 6 to 8 characters before submitting a password change.
  • Add/adjust i18n keys for password validation messages under password.validation., error codes under password.errors., and checklist rule labels under password.rules.* in English.
  • Mirror the same password-related i18n keys and messages in Brazilian Portuguese, ensuring parity with the English locale and backend error codes.
src/pages/Shared/Profile/Profile.tsx
src/i18n/locales/en/profile.json
src/i18n/locales/pt-BR/profile.json

Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

@sourcery-ai sourcery-ai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey - I've left some high level feedback:

  • 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.
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.

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.

@dpaes dpaes left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

@dpaes dpaes merged commit c4cdd5e into develop May 11, 2026
1 check passed
@dpaes dpaes deleted the fix/EVO-992 branch May 11, 2026 16:33
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