fix missing translation keys and raw error strings across auth and da…#393
fix missing translation keys and raw error strings across auth and da…#393ViktorSvertoka merged 3 commits intodevelopfrom
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
📝 WalkthroughWalkthroughRefactors auth form error handling to stop parsing response bodies, using HTTP status codes and translated fallbacks; and replaces many hardcoded validation and error strings with i18n translation keys across auth fields and the dashboard profile card, with updated locale files (en/pl/uk). Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
frontend/components/dashboard/ProfileCard.tsx (1)
67-70:⚠️ Potential issue | 🟡 MinorRaw error strings contradict PR objective.
The error handlers still use hardcoded English strings (
'Failed to update name','Something went wrong'), which contradicts the PR goal of fixing "raw error strings across auth and dashboard flows."Suggested fix using translations
try { const result = await updateName(formData); if (!result.success) { - toast.error(result.error || 'Failed to update name'); + toast.error(result.error || t('errors.updateNameFailed')); } } catch { - toast.error('Something went wrong'); + toast.error(t('errors.generic')); } finally {Note: Similar changes are needed in
handleUpdatePassword(lines 86, 89).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/components/dashboard/ProfileCard.tsx` around lines 67 - 70, Replace hardcoded English toast messages in ProfileCard.tsx with i18n translation keys: in the handleUpdateName and handleUpdatePassword functions, swap toast.error('Failed to update name') and toast.error('Something went wrong') (and the similar lines at the noted locations) for calls that use the translation function (e.g., t('dashboard.updateNameFailed') or t('common.somethingWentWrong')), and include the server error when present (e.g., toast.error(result.error || t('...'))). Ensure the component uses the existing i18n hook (useTranslation or t) already used elsewhere in the file or import it if missing, and pick consistent translation keys matching your locale files.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/components/auth/ResetPasswordForm.tsx`:
- Around line 78-80: In ResetPasswordForm.tsx inside the submit/confirm handler
where the fetch response is checked (the branch using res.ok and setError),
don't map every non-ok response to errors.resetFailed; instead, inspect
res.status and call setError(t('errors.resetFailed')) only for 400 responses
(invalid/expired token), and for other non-400 failures call setError with a
neutral retry message (e.g., t('errors.retry') or t('errors.serverError')) so
transient server 5xx errors don't get blamed on the token.
In `@frontend/components/dashboard/ProfileCard.tsx`:
- Around line 329-336: The onInvalid handler for the newPassword input currently
only checks validity.valueMissing and so the browser's default untranslated
message appears when the minLength (8) constraint fails; update the onInvalid
callback on the newPassword input in ProfileCard.tsx to also check
e.currentTarget.validity.tooShort and call
e.currentTarget.setCustomValidity(tFields('passwordTooShort')) in that case,
keeping the existing valueMissing branch, and ensure the existing onInput
handler still clears the custom validity
(e.currentTarget.setCustomValidity('')).
In `@frontend/messages/en.json`:
- Line 1171: The message key "passwordTooLongBytes" currently reads "Password
must not exceed {PASSWORD_MAX_BYTES} characters" but the forms (SignupForm and
ResetPasswordForm) enforce a byte limit via utf8ByteLength(...), so update this
English copy and the corresponding validation.passwordRequirements strings in
every locale to reference bytes/encoded size instead of characters (e.g.,
"Password must not exceed {PASSWORD_MAX_BYTES} bytes" or similar), ensuring the
placeholder {PASSWORD_MAX_BYTES} remains and translations are updated
consistently across locales to avoid misleading users for multibyte passwords.
---
Outside diff comments:
In `@frontend/components/dashboard/ProfileCard.tsx`:
- Around line 67-70: Replace hardcoded English toast messages in ProfileCard.tsx
with i18n translation keys: in the handleUpdateName and handleUpdatePassword
functions, swap toast.error('Failed to update name') and toast.error('Something
went wrong') (and the similar lines at the noted locations) for calls that use
the translation function (e.g., t('dashboard.updateNameFailed') or
t('common.somethingWentWrong')), and include the server error when present
(e.g., toast.error(result.error || t('...'))). Ensure the component uses the
existing i18n hook (useTranslation or t) already used elsewhere in the file or
import it if missing, and pick consistent translation keys matching your locale
files.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: bf22d4de-88c3-43bd-80a2-24dee6fca2d3
📒 Files selected for processing (10)
frontend/components/auth/LoginForm.tsxfrontend/components/auth/ResetPasswordForm.tsxfrontend/components/auth/SignupForm.tsxfrontend/components/auth/fields/EmailField.tsxfrontend/components/auth/fields/NameField.tsxfrontend/components/auth/fields/PasswordField.tsxfrontend/components/dashboard/ProfileCard.tsxfrontend/messages/en.jsonfrontend/messages/pl.jsonfrontend/messages/uk.json
frontend/messages/en.json
Outdated
| "passwordRequirements": "{PASSWORD_MIN_LEN}-{PASSWORD_MAX_BYTES} characters, at least one capital letter, and at least one special character", | ||
| "invalidPassword": "Password must meet requirements: {passwordRequirementsText}", | ||
| "passwordTooShort": "Password must be at least {minLength} characters", | ||
| "passwordTooLongBytes": "Password must not exceed {PASSWORD_MAX_BYTES} characters", |
There was a problem hiding this comment.
This still advertises a character limit, but the forms enforce a byte limit.
SignupForm and ResetPasswordForm reject passwords when utf8ByteLength(...) > PASSWORD_MAX_BYTES, so multibyte passwords can fail well below the advertised “72 characters”. That is especially misleading for the non-ASCII locales this PR is improving. Please switch this copy—and the matching validation.passwordRequirements strings in each locale—to bytes / encoded size instead of characters.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/messages/en.json` at line 1171, The message key
"passwordTooLongBytes" currently reads "Password must not exceed
{PASSWORD_MAX_BYTES} characters" but the forms (SignupForm and
ResetPasswordForm) enforce a byte limit via utf8ByteLength(...), so update this
English copy and the corresponding validation.passwordRequirements strings in
every locale to reference bytes/encoded size instead of characters (e.g.,
"Password must not exceed {PASSWORD_MAX_BYTES} bytes" or similar), ensuring the
placeholder {PASSWORD_MAX_BYTES} remains and translations are updated
consistently across locales to avoid misleading users for multibyte passwords.
There was a problem hiding this comment.
🧹 Nitpick comments (1)
frontend/components/dashboard/ProfileCard.tsx (1)
326-342: Consider extracting theminLengthconstant to avoid duplication.The
minLengthvalue8is hardcoded in both the input attribute (line 326) and the validation message (lines 337-338). If these ever diverge, the error message would be misleading.♻️ Suggested refactor to use a shared constant
+const PASSWORD_MIN_LENGTH = 8; + <input type="password" name="newPassword" placeholder={t('newPassword')} - minLength={8} + minLength={PASSWORD_MIN_LENGTH} className="..." required onInvalid={e => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity( tFields('validation.required') ); } else if (e.currentTarget.validity.tooShort) { e.currentTarget.setCustomValidity( tFields('validation.passwordTooShort', { - minLength: 8, + minLength: PASSWORD_MIN_LENGTH, }) ); } }} onInput={e => e.currentTarget.setCustomValidity('')} />Alternatively, import
PASSWORD_MIN_LENfrom@/lib/auth/signup-constraintsif it's appropriate to share with the signup flow (as done inResetPasswordForm.tsx).🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/components/dashboard/ProfileCard.tsx` around lines 326 - 342, The hardcoded minLength (8) is duplicated in the ProfileCard password input; extract a single constant (e.g., PASSWORD_MIN_LEN) and use it for the input prop and in the validation message to keep them in sync. Define or import PASSWORD_MIN_LEN (matching ResetPasswordForm.tsx's export from `@/lib/auth/signup-constraints` if applicable) and replace the literal 8 in the minLength attribute and in the tFields('validation.passwordTooShort', { minLength: 8 }) call so both read from PASSWORD_MIN_LEN; ensure the value used in JSX is a number and passed into the translation object.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@frontend/components/dashboard/ProfileCard.tsx`:
- Around line 326-342: The hardcoded minLength (8) is duplicated in the
ProfileCard password input; extract a single constant (e.g., PASSWORD_MIN_LEN)
and use it for the input prop and in the validation message to keep them in
sync. Define or import PASSWORD_MIN_LEN (matching ResetPasswordForm.tsx's export
from `@/lib/auth/signup-constraints` if applicable) and replace the literal 8 in
the minLength attribute and in the tFields('validation.passwordTooShort', {
minLength: 8 }) call so both read from PASSWORD_MIN_LEN; ensure the value used
in JSX is a number and passed into the translation object.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 4dbe600a-48ac-4c45-aa45-4c2217c5f439
📒 Files selected for processing (5)
frontend/components/auth/ResetPasswordForm.tsxfrontend/components/dashboard/ProfileCard.tsxfrontend/messages/en.jsonfrontend/messages/pl.jsonfrontend/messages/uk.json
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/messages/en.json
- frontend/messages/uk.json
…shboard flows
Summary by CodeRabbit
New Features
Bug Fixes