Skip to content

fix missing translation keys and raw error strings across auth and da…#393

Merged
ViktorSvertoka merged 3 commits intodevelopfrom
feat/translation
Mar 6, 2026
Merged

fix missing translation keys and raw error strings across auth and da…#393
ViktorSvertoka merged 3 commits intodevelopfrom
feat/translation

Conversation

@TiZorii
Copy link
Collaborator

@TiZorii TiZorii commented Mar 6, 2026

…shboard flows

Summary by CodeRabbit

  • New Features

    • Added localized validation messages for email, password, and name fields across auth forms.
    • Expanded translation keys and multi-language support for signup, reset password, and profile updates.
  • Bug Fixes

    • Improved error handling to show specific feedback when an email is already registered.
    • Standardized server/error messages for password reset and verification flows for clearer user feedback.

@vercel
Copy link
Contributor

vercel bot commented Mar 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
devlovers-net Ignored Ignored Preview Mar 6, 2026 10:00pm

Request Review

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 6, 2026

📝 Walkthrough

Walkthrough

Refactors 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

Cohort / File(s) Summary
Auth form error handling
frontend/components/auth/LoginForm.tsx, frontend/components/auth/ResetPasswordForm.tsx, frontend/components/auth/SignupForm.tsx
Removed runtime parsing of response bodies for errors; now set errors based on HTTP status (e.g., 409 -> emailAlreadyInUse) or generic translated keys (e.g., signupFailed, resetFailed, serverError).
Auth field validation i18n
frontend/components/auth/fields/EmailField.tsx, frontend/components/auth/fields/NameField.tsx, frontend/components/auth/fields/PasswordField.tsx
Replaced hardcoded validation messages with translation lookups, passing min/max constraints (including PASSWORD_MIN_LEN / PASSWORD_MAX_BYTES) into localized strings.
Dashboard profile validation & handlers
frontend/components/dashboard/ProfileCard.tsx
Introduced auth.fields translation hook, localized save/error messages, added onInvalid/onInput handlers to set/clear custom validity, and localized tooShort handling for newPassword.
Locale files
frontend/messages/en.json, frontend/messages/pl.json, frontend/messages/uk.json
Added/renamed translation keys: signup.errors.emailAlreadyInUse, resetPassword.errors.serverError, renamed fields.validation.emailRequiredfields.validation.required, added password validation keys (passwordTooShort, passwordTooLongBytes), and new dashboard error messages (updateNameFailed, updatePasswordFailed, somethingWentWrong).
Package/manifest
package.json, manifest_file
Small manifest/package adjustments recorded alongside message changes.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested reviewers

  • AM1007
  • ViktorSvertoka

Poem

"I nibble strings and stitch them new,
Translations bloom in every view,
Status codes hum a simpler tune,
Fields now speak from morn to moon,
A rabbit cheers — forms fluent, too! 🐰"

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main objective of the changeset: replacing raw error strings and hardcoded validation messages with translation keys across authentication and dashboard components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/translation

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

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 | 🟡 Minor

Raw 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

📥 Commits

Reviewing files that changed from the base of the PR and between 27de4eb and 9d0f467.

📒 Files selected for processing (10)
  • frontend/components/auth/LoginForm.tsx
  • frontend/components/auth/ResetPasswordForm.tsx
  • frontend/components/auth/SignupForm.tsx
  • frontend/components/auth/fields/EmailField.tsx
  • frontend/components/auth/fields/NameField.tsx
  • frontend/components/auth/fields/PasswordField.tsx
  • frontend/components/dashboard/ProfileCard.tsx
  • frontend/messages/en.json
  • frontend/messages/pl.json
  • frontend/messages/uk.json

"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",
Copy link
Contributor

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
frontend/components/dashboard/ProfileCard.tsx (1)

326-342: Consider extracting the minLength constant to avoid duplication.

The minLength value 8 is 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_LEN from @/lib/auth/signup-constraints if it's appropriate to share with the signup flow (as done in ResetPasswordForm.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

📥 Commits

Reviewing files that changed from the base of the PR and between 9d0f467 and 01e7265.

📒 Files selected for processing (5)
  • frontend/components/auth/ResetPasswordForm.tsx
  • frontend/components/dashboard/ProfileCard.tsx
  • frontend/messages/en.json
  • frontend/messages/pl.json
  • frontend/messages/uk.json
🚧 Files skipped from review as they are similar to previous changes (2)
  • frontend/messages/en.json
  • frontend/messages/uk.json

@ViktorSvertoka ViktorSvertoka merged commit f928b41 into develop Mar 6, 2026
7 checks passed
@ViktorSvertoka ViktorSvertoka deleted the feat/translation branch March 6, 2026 22:11
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