i18n support for client #1604
i18n support for client #1604
Conversation
![llamapreview[bot]](https://avatars.githubusercontent.com/in/1023541?s=60&v=4){kind=small}
There was a problem hiding this comment.
Auto Pull Request Review from LlamaPReview
Large PR Notification
Dear contributor,
Thank you for your substantial contribution to this project. LlamaPReview has detected that this Pull Request contains a large volume of changes, which exceeds our current processing capacity.
Details:
- PR and related contents total size: Approximately 81,296 characters
- Current limit: 50,000 characters
Next steps:
- Consider breaking this PR into smaller, more focused changes if possible.
- For manual review, please reach out to your team members or maintainers.
We appreciate your understanding and commitment to improving this project. Your contributions are valuable, and we want to ensure they receive the attention they deserve.
LlamaPReview is continuously evolving to better serve the community. Share your thoughts on handling large PRs in our GitHub Discussions - your feedback helps us improve and expand our capabilities.
If you have any questions or need assistance, our community and support team are here to help.
Best regards,
LlamaPReview Team
WalkthroughThe pull request introduces comprehensive internationalization (i18n) support for the client application. It adds localization files for multiple languages, implements translation mechanisms using i18next, and modifies various components to use dynamic translations. The changes include environment configuration, package dependencies, translation fetching scripts, and updates to multiple authentication-related components to support multilingual text rendering. Changes
Sequence DiagramsequenceDiagram
participant User
participant App
participant I18nService
participant TranslationAPI
User->>App: Select Language
App->>I18nService: Change Language
I18nService->>TranslationAPI: Fetch Translations
TranslationAPI-->>I18nService: Return Translations
I18nService->>App: Update UI Language
App->>User: Display Translated Content
📜 Recent review detailsConfiguration used: .coderabbit.yaml 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 12
🔭 Outside diff range comments (6)
Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx (1)
Line range hint
25-34: There's vomit on his sweater: Add proper ARIA attributes!The clickable text needs proper accessibility attributes and keyboard support.
<Typography component="span" color={theme.palette.primary.main} ml={theme.spacing(2)} - sx={{ userSelect: "none" }} + sx={{ userSelect: "none", cursor: "pointer" }} + role="button" + tabIndex={0} + onKeyDown={(e) => e.key === 'Enter' && handleNavigate()} onClick={handleNavigate} + aria-label={t("authForgotPasswordResetPassword")} >Client/src/Pages/Auth/CheckEmail.jsx (1)
Line range hint
183-183: Missed translation opportunityThe "Open email app" string is hardcoded and should be translated.
- Open email app + {t("authCheckEmailOpenApp")}Client/src/Pages/Auth/ForgotPassword.jsx (2)
Line range hint
43-44: Error messages should be internationalizedThe error messages in toast notifications are hardcoded in English. Consider using translation keys for consistency with the i18n implementation.
- const err = error.details && error.details.length > 0 - ? error.details[0].message - : "Error validating data."; + const err = error.details && error.details.length > 0 + ? error.details[0].message + : t("common.errorValidatingData"); createToast({ - body: err, + body: t("common.validationError", { message: err }), }); // Similarly for other error messages createToast({ - body: `Instructions sent to ${form.email}.`, + body: t("authForgotPasswordInstructionsSent", { email: form.email }), }); createToast({ - body: "Unknown error.", + body: t("common.unknownError"), });Also applies to: 52-53, 61-62, 66-67
Yo, we need some test coverage up in here! 🍝
The search results confirm there's no test coverage for the ForgotPassword component. Critical features that need testing:
- Form validation (email format checks)
- Error handling (API errors, validation errors)
- Success flow (navigation to check-email page)
- Session storage interactions
🔗 Analysis chain
Line range hint
1-224: Add comprehensive test coverageThe component lacks test coverage for critical functionality such as:
- Form validation
- Error handling
- API integration
- Success scenarios
Let me help you verify the current test coverage:
Would you like me to generate comprehensive test cases for this component?
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for existing test files related to forgot password fd -e test.jsx -e spec.jsx -e test.js -e spec.js | rg -i "forgot.*password"Length of output: 77
Script:
#!/bin/bash # Search for auth-related test files echo "=== Auth Test Files ===" fd -e test.jsx -e spec.jsx -e test.js -e spec.js | rg -i "auth" # Search for test setup files echo -e "\n=== Test Setup Files ===" fd -e test.jsx -e spec.jsx -e test.js -e spec.js | rg -i "setup|config" # Search for any files containing test patterns related to forgot password echo -e "\n=== Test Patterns ===" rg -i "describe.*forgot.*password|test.*forgot.*password|it.*forgot.*password" -g "*.{test,spec}.{js,jsx}"Length of output: 475
Script:
#!/bin/bash # Search for React testing patterns in client directory echo "=== React Testing Patterns ===" rg -i "render|screen|fireEvent|waitFor|act" --type js --type jsx Client/src/Pages/Auth -A 5 # Check if there's a test configuration file in the client directory echo -e "\n=== Client Test Config ===" fd jest.config -e js -e json -e mjsLength of output: 299
🧰 Tools
🪛 Biome (1.9.4)
[error] 186-186: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
Client/src/Pages/Auth/SetNewPassword.jsx (1)
Line range hint
53-55: Translate success messagesThe success message in the password reset confirmation is hardcoded in English.
if (action.payload.success) { navigate("/new-password-confirmed"); createToast({ - body: "Your password was reset successfully.", + body: t("authSetNewPasswordResetSuccess"), });Client/src/Pages/Auth/Register/Register.jsx (1)
Line range hint
214-223: Yo, let's make these error messages multilingual! 🌍The success and error messages should use translations for better i18n support:
-body: "Welcome! Your account was created successfully.", +body: t("authRegisterSuccessMessage"), -body: "Unknown error.", +body: t("commonUnknownError"),
🧹 Nitpick comments (11)
Client/src/Pages/Auth/Register/StepThree/index.jsx (1)
43-44: Yo dawg, we need to keep our translation keys consistent! 🎯I'm seeing some inconsistency in the translation key naming patterns:
- Some keys have prefixes like "auth" or "common"
- Others are standalone like "signUp" and "createPassword"
Let's maintain a consistent naming convention across all keys to keep it real!
Example pattern to follow:
- <Typography component="h1">{t("signUp")}</Typography> - <Typography>{t("createPassword")}</Typography> + <Typography component="h1">{t("auth.signUp")}</Typography> + <Typography>{t("auth.createPassword")}</Typography>Also applies to: 68-68, 70-70, 81-81, 83-83
Client/src/Utils/i18n.js (1)
6-6: Mom's spaghetti moment: Consider language persistence!The primary language is hardcoded without any persistence mechanism. Consider storing user's language preference in localStorage.
-const primaryLanguage = 'en'; +const primaryLanguage = localStorage.getItem('i18nextLng') || 'en';Client/src/main.jsx (1)
Line range hint
1-13: Arms are heavy: Clean up those imports!Move that export statement after all imports to maintain consistent code organization.
import "./Utils/i18n"; import ReactDOM from "react-dom/client"; import App from "./App.jsx"; import "./index.css"; import { BrowserRouter as Router } from "react-router-dom"; import { Provider } from "react-redux"; import { persistor, store } from "./store"; import { PersistGate } from "redux-persist/integration/react"; import NetworkServiceProvider from "./Utils/NetworkServiceProvider.jsx"; import { networkService } from "./Utils/NetworkService"; import { Suspense } from "react"; -export { networkService }; + +export { networkService };Client/src/Pages/Auth/Register/StepTwo/index.jsx (2)
46-47: Consider consistent namespacing across componentsWhile these keys are more specific than those in EmailStep, consider using consistent namespacing (e.g., "authSignUp", "authEnterEmail") to match other components.
94-94: Inconsistent key naming pattern"commonBack" follows good namespacing practice, but "continue" is generic. Consider using "commonContinue" for consistency.
Also applies to: 110-110
Client/src/Pages/Auth/Login/Components/PasswordStep.jsx (1)
61-61: Inconsistent key naming in the same fileWhile other keys in this file use proper namespacing (e.g., "authLoginTitle"), the "password" key is generic.
- label={t("password")} + label={t("authLoginPassword")}Client/src/Pages/Auth/ForgotPassword.jsx (1)
181-189: Internationalize the placeholder text and optimize error handlingTwo improvements needed:
- The placeholder text is hardcoded in English
- The error boolean expression can be simplified
<TextInput type="email" id="forgot-password-email-input" label={t("common.email")} isRequired={true} - placeholder="Enter your email" + placeholder={t("authForgotPasswordEmailPlaceholder")} value={form.email} onChange={handleChange} - error={errors.email ? true : false} + error={!!errors.email} helperText={errors.email} fullWidth sx={{ mb: theme.spacing(8) }} />🧰 Tools
🪛 Biome (1.9.4)
[error] 186-186: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
Client/src/Pages/Auth/SetNewPassword.jsx (1)
165-166: Optimize error handling expressionsThe error handling expressions can be simplified using optional chaining and removing unnecessary boolean conversions.
-error={errors.password && errors.password[0] ? true : false} -helperText={errors.password && errors.password[0]} +error={!!errors.password?.[0]} +helperText={errors.password?.[0]} -error={errors.confirm && errors.confirm[0] ? true : false} -helperText={errors.confirm && errors.confirm[0]} +error={!!errors.confirm?.[0]} +helperText={errors.confirm?.[0]}Also applies to: 179-180
🧰 Tools
🪛 Biome (1.9.4)
[error] 165-165: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with(lint/complexity/noUselessTernary)
[error] 165-165: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 166-166: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Client/public/locales/tr.json (1)
54-56: Nervous, but looks calm and ready! 🍝 Template variable needs documentation!The email template variable
{{email}}should be documented to ensure consistent usage across translations.Consider adding a comment in both translation files:
"check-email": { "title": "E-postanızı kontrol edin", + // Variables: {{email}} - User's email address "description": "{{email}} adresine şifre sıfırlama bağlantısı gönderdik",Client/src/Pages/Auth/Register/Register.jsx (1)
Line range hint
353-355: Yo dawg, let's clean up this commented code! 🧹Remove these commented props as they're not being used and just add noise to the codebase:
-/* form={form} -errors={errors} */ -/* onChange={handleChange} */Client/src/Utils/NetworkService.js (1)
27-41: Yo, let's make this language switch real smooth! 🔄The language header implementation is solid, but we should subscribe to language changes to update the header dynamically:
constructor(store, dispatch, navigate) { + this.languageChangeCallback = () => { + const currentLanguage = i18next.language || 'en'; + this.axiosInstance.defaults.headers['Accept-Language'] = currentLanguage; + }; + i18next.on('languageChanged', this.languageChangeCallback); } cleanup() { if (this.unsubscribe) { this.unsubscribe(); } + i18next.off('languageChanged', this.languageChangeCallback); }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
Client/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (23)
Client/.env.production(1 hunks)Client/package.json(3 hunks)Client/public/locales/ar.json(1 hunks)Client/public/locales/cs.json(1 hunks)Client/public/locales/de.json(1 hunks)Client/public/locales/en.json(1 hunks)Client/public/locales/es.json(1 hunks)Client/public/locales/fr.json(1 hunks)Client/public/locales/pt.json(1 hunks)Client/public/locales/tr.json(1 hunks)Client/scripts/fetch-translations.js(1 hunks)Client/src/Pages/Auth/CheckEmail.jsx(6 hunks)Client/src/Pages/Auth/ForgotPassword.jsx(6 hunks)Client/src/Pages/Auth/Login/Components/EmailStep.jsx(5 hunks)Client/src/Pages/Auth/Login/Components/ForgotPasswordLabel.jsx(3 hunks)Client/src/Pages/Auth/Login/Components/PasswordStep.jsx(6 hunks)Client/src/Pages/Auth/Register/Register.jsx(5 hunks)Client/src/Pages/Auth/Register/StepThree/index.jsx(8 hunks)Client/src/Pages/Auth/Register/StepTwo/index.jsx(5 hunks)Client/src/Pages/Auth/SetNewPassword.jsx(3 hunks)Client/src/Utils/NetworkService.js(2 hunks)Client/src/Utils/i18n.js(1 hunks)Client/src/main.jsx(3 hunks)
✅ Files skipped from review due to trivial changes (6)
- Client/public/locales/fr.json
- Client/public/locales/es.json
- Client/public/locales/ar.json
- Client/public/locales/pt.json
- Client/public/locales/cs.json
- Client/public/locales/de.json
🧰 Additional context used
🪛 Biome (1.9.4)
Client/src/Pages/Auth/SetNewPassword.jsx
[error] 165-165: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 165-165: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 166-166: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 179-179: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
[error] 179-179: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
[error] 180-180: Change to an optional chain.
Unsafe fix: Change to an optional chain.
(lint/complexity/useOptionalChain)
Client/src/Pages/Auth/ForgotPassword.jsx
[error] 186-186: Unnecessary use of boolean literals in conditional expression.
Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with
(lint/complexity/noUselessTernary)
Client/public/locales/tr.json
[error] 11-11: The key authLoginTitle was already declared.
This where a duplicated key was declared again.
If a key is defined multiple times, only the last definition takes effect. Previous definitions are ignored.
(lint/suspicious/noDuplicateObjectKeys)
[error] 16-16: The key authForgotPasswordTitle was already declared.
This where a duplicated key was declared again.
If a key is defined multiple times, only the last definition takes effect. Previous definitions are ignored.
(lint/suspicious/noDuplicateObjectKeys)
🔇 Additional comments (13)
Client/src/Pages/Auth/Register/StepThree/index.jsx (1)
9-9: Yo, the i18n setup is straight fire! 🔥The
useTranslationhook is properly imported and initialized at the component level. Clean implementation, dawg!Also applies to: 27-27
Client/src/Pages/Auth/Login/Components/EmailStep.jsx (3)
6-6: LGTM! Clean i18n setup 🍝The implementation follows react-i18next best practices.
Also applies to: 22-22
53-53: Same namespace issue as aboveThe "email" key should follow the same namespacing pattern.
82-82: Same namespace issue as aboveThe "continue" key should follow the same namespacing pattern.
Client/src/Pages/Auth/Register/StepTwo/index.jsx (1)
2-2: LGTM! Clean i18n setup 🍝The implementation follows react-i18next best practices.
Also applies to: 31-31
Client/src/Pages/Auth/Login/Components/PasswordStep.jsx (3)
10-10: LGTM! Excellent i18n implementation 🍝The implementation follows best practices with proper namespacing of translation keys.
Also applies to: 27-27, 43-44
92-92: LGTM! Good use of common prefix 🍝The "commonBack" key follows the recommended pattern for shared translations.
109-109: Same naming pattern issue as other filesConsider using "commonContinue" for consistency.
Client/src/Pages/Auth/CheckEmail.jsx (2)
13-13: LGTM! Clean i18n setup 🍝The implementation follows react-i18next best practices.
Also applies to: 19-19
165-167: LGTM! Excellent key namespacing 🍝The translation keys follow the recommended namespacing pattern.
Client/src/Pages/Auth/ForgotPassword.jsx (1)
16-16: Clean implementation of i18n hook!The
useTranslationhook is properly imported and initialized at the component level.Also applies to: 22-22
Client/package.json (1)
8-8: Knees weak, arms heavy! 🍝 The build script needs error handling!The
fetch-translationsscript runs before build, but what happens if it fails?Let's check if the script has proper error handling:
Also applies to: 12-12
✅ Verification successful
Yo dawg, your error handling is on point! 🍝
The fetch-translations script already has solid error handling with try-catch, error logging, and proper exit codes. The build chain using
&&ensures the build fails if translations fail. No changes needed - this pasta is cooked just right!🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check if fetch-translations.js handles errors properly ast-grep --pattern 'try { $$$ } catch (error) { $$$ }'Length of output: 67926
Client/src/Pages/Auth/Register/Register.jsx (1)
18-18: Yo, the i18n implementation is straight fire! 🔥The translation setup is clean and follows best practices:
- Proper hook usage with
useTranslation- Consistent translation key naming pattern (e.g.,
commonAppName,authRegisterAlreadyHaveAccount)- All hardcoded strings replaced with translation calls
Also applies to: 122-122, 311-311, 371-373, 382-382
| <Typography component="h1">{t("signUp")}</Typography> | ||
| <Typography>{t("createPassword")}</Typography> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Yo, we need some fallback game! 🎮
Add fallback texts to handle cases where translations might be missing:
- {t("signUp")}
+ {t("signUp", "Sign Up")}Also, consider using the namespace feature of i18next for better organization:
const { t } = useTranslation('auth'); // Specify the namespaceAlso applies to: 68-68, 70-70, 81-81, 83-83, 95-121, 145-145, 165-165
| isRequired={true} | ||
| placeholder="Create a password" | ||
| placeholder={t("createAPassword")} | ||
| autoComplete="current-password" |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Secure the password fields like your mom's spaghetti! 🍝
Change autoComplete="current-password" to autoComplete="new-password" for registration forms. This helps browsers distinguish between login and registration flows.
- autoComplete="current-password"
+ autoComplete="new-password"Also applies to: 84-84
| fallbackLng: primaryLanguage, | ||
| debug: import.meta.env.MODE === 'development', |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Yo! Add error handling for translation loading failures!
The i18n setup needs some error handling love for when translations can't be loaded. Also, that debug mode in development might spill some secrets!
.init({
fallbackLng: primaryLanguage,
debug: import.meta.env.MODE === 'development',
+ returnNull: false,
+ saveMissing: true,
+ missingKeyHandler: (lng, ns, key) => {
+ console.warn(`Missing translation key: ${key} for language: ${lng}`);
+ },
backend: {Committable suggestion skipped: line range outside the PR's diff.
| <Suspense fallback="Loading..."> | ||
| <App /> | ||
| </Suspense> |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Knees weak: That fallback's looking pretty basic!
Replace the simple "Loading..." text with a proper loading component that matches your app's design.
- <Suspense fallback="Loading...">
+ <Suspense fallback={<LoadingSpinner />}>
<App />
</Suspense>Committable suggestion skipped: line range outside the PR's diff.
Client/scripts/fetch-translations.js
Outdated
| const LOCALES_DIR = path.join(process.cwd(), './public/locales'); | ||
|
|
||
| async function fetchLanguages() { | ||
| console.log({ API_TOKEN, PROJECT_ID }) |
There was a problem hiding this comment.
Mom's spaghetti alert: Remove sensitive data logging!
Logging API tokens to the console is a security risk. Remove or mask sensitive information.
- console.log({ API_TOKEN, PROJECT_ID })
+ console.log('Fetching languages for project:', PROJECT_ID)📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| console.log({ API_TOKEN, PROJECT_ID }) | |
| console.log('Fetching languages for project:', PROJECT_ID) |
| @@ -96,7 +98,7 @@ const SetNewPassword = () => { | |||
| gap={theme.spacing(4)} | |||
| > | |||
| <Logo style={{ borderRadius: theme.shape.borderRadius }} /> | |||
| <Typography sx={{ userSelect: "none" }}>BlueWave Uptime</Typography> | |||
| <Typography sx={{ userSelect: "none" }}>{t("commonAppName")}</Typography> | |||
There was a problem hiding this comment.
🛠️ Refactor suggestion
Maintain consistent translation key format
The translation key format differs from other components:
- Here:
t("commonAppName") - In ForgotPassword:
t("common.appName")
This inconsistency could lead to maintenance issues.
-<Typography sx={{ userSelect: "none" }}>{t("commonAppName")}</Typography>
+<Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Typography sx={{ userSelect: "none" }}>{t("commonAppName")}</Typography> | |
| <Typography sx={{ userSelect: "none" }}>{t("common.appName")}</Typography> |
| VITE_POEDITOR_API_TOKEN= | ||
| VITE_POEDITOR_PROJECT_ID= |
There was a problem hiding this comment.
Yo! These environment variables need some love! 🍝
The POEditor environment variables are empty, which could break the translation fetching script. Also, we should be careful about committing API tokens to version control.
Consider:
- Adding placeholder values with clear format instructions
- Adding these variables to
.env.exampleinstead - Documenting the required format in README.md
| "i18next": "^24.2.1", | ||
| "i18next-http-backend": "^3.0.1", |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Mom's spaghetti! 🍝 Let's pin these dependency versions!
Using caret (^) for version ranges in i18next packages could lead to breaking changes. Consider pinning the versions:
- "i18next": "^24.2.1",
- "i18next-http-backend": "^3.0.1",
- "react-i18next": "^15.4.0"
+ "i18next": "24.2.1",
+ "i18next-http-backend": "3.0.1",
+ "react-i18next": "15.4.0"Also applies to: 33-33
| { | ||
| "dontHaveAccount": "Don't have account", | ||
| "email": "E-mail", | ||
| "forgotPassword": "Forgot Password", | ||
| "password": "password", | ||
| "signUp": "Sign up", | ||
| "submit": "Submit", | ||
| "title": "Title", | ||
| "continue": "Continue", | ||
| "enterEmail": "Enter your email", | ||
| "authLoginTitle": "Log In", | ||
| "authLoginEnterPassword": "Enter your password", | ||
| "commonPassword": "Password", | ||
| "createPassword": "Create your password", | ||
| "createAPassword": "Create a password", | ||
| "commonBack": "Back", | ||
| "authForgotPasswordTitle": "Forgot password?", | ||
| "authForgotPasswordResetPassword": "Reset password", | ||
| "authRegisterAlreadyHaveAccount": "Already have an account?", | ||
| "commonAppName": "BlueWave Uptime", | ||
| "authLoginEnterEmail": "Enter your email", | ||
| "authRegisterTitle": "Create an account", | ||
| "authRegisterStepOneTitle": "Create your account", | ||
| "authRegisterStepOneDescription": "Enter your details to get started", | ||
| "authRegisterStepTwoTitle": "Set up your profile", | ||
| "authRegisterStepTwoDescription": "Tell us more about yourself", | ||
| "authRegisterStepThreeTitle": "Almost done!", | ||
| "authRegisterStepThreeDescription": "Review your information", | ||
| "authForgotPasswordDescription": "No worries, we'll send you reset instructions.", | ||
| "authForgotPasswordSendInstructions": "Send instructions", | ||
| "authForgotPasswordBackTo": "Back to", | ||
| "authCheckEmailTitle": "Check your email", | ||
| "authCheckEmailDescription": "We sent a password reset link to {{email}}", | ||
| "authCheckEmailResendEmail": "Resend email", | ||
| "authCheckEmailBackTo": "Back to", | ||
| "goBackTo": "Go back to", | ||
| "authCheckEmailDidntReceiveEmail": "Didn't receive the email?", | ||
| "authCheckEmailClickToResend": "Click to resend", | ||
| "authSetNewPasswordTitle": "Set new password", | ||
| "authSetNewPasswordDescription": "Your new password must be different from previously used passwords.", | ||
| "authSetNewPasswordNewPassword": "New password", | ||
| "authSetNewPasswordConfirmPassword": "Confirm password", | ||
| "confirmPassword": "Confirm your password", | ||
| "authSetNewPasswordResetPassword": "Reset password", | ||
| "authSetNewPasswordBackTo": "Back to", | ||
| "authPasswordMustBeAtLeast": "Must be at least", | ||
| "authPasswordCharactersLong": "8 characters long", | ||
| "authPasswordMustContainAtLeast": "Must contain at least", | ||
| "authPasswordSpecialCharacter": "one special character", | ||
| "authPasswordOneNumber": "one number", | ||
| "authPasswordUpperCharacter": "one upper character", | ||
| "authPasswordLowerCharacter": "one lower character", | ||
| "authPasswordConfirmAndPassword": "Confirm password and password", | ||
| "authPasswordMustMatch": "must match" | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
There's vomit on his sweater already! 🍝 Let's fix this structure!
The translation file mixes flat and nested key structures, which could lead to maintenance issues. Consider using a consistent nested structure throughout.
Example restructure:
{
- "dontHaveAccount": "Don't have account",
- "email": "E-mail",
+ "common": {
+ "email": "E-mail",
+ "password": "Password",
+ "appName": "BlueWave Uptime"
+ },
+ "auth": {
+ "login": {
+ "noAccount": "Don't have account",
+ "title": "Log In"
+ }
}
}Committable suggestion skipped: line range outside the PR's diff.
| "title": "Başlık", | ||
| "continue": "Devam et", | ||
| "enterEmail": "E-posta adresinizi girin", | ||
| "authLoginTitle": "Giriş Yap", |
There was a problem hiding this comment.
Palms are sweaty! 🍝 We've got duplicate keys!
The following keys are duplicated:
authLoginTitle(lines 11 and 68)authForgotPasswordTitle(lines 16 and 78)
This could cause confusion and maintenance issues.
Remove the duplicate entries and use the nested structure consistently:
- "authLoginTitle": "Giriş Yap",
"auth": {
"login": {
"title": "Giriş Yap"
}
}
- "authLoginTitle": "Giriş Yap"Also applies to: 68-68, 16-16, 78-78
🧰 Tools
🪛 Biome (1.9.4)
[error] 11-11: The key authLoginTitle was already declared.
This where a duplicated key was declared again.
If a key is defined multiple times, only the last definition takes effect. Previous definitions are ignored.
(lint/suspicious/noDuplicateObjectKeys)
|
Hi @Cihatata , Just wanted to check in here, what is the status of this PR? Is it ready to be reviewed? If so, can you please resolve merge conflicts and update your PR? Thank you! |
Describe your changes
This pull request implements internationalization (i18n) support for the client-side application using POEditor. The key changes include:
Translation Fetching: A script (fetch-translations.js) has been added to retrieve translations from POEditor during the build process. This ensures that the latest translations are incorporated into the application.
Language Detection Middleware: A middleware has been introduced to detect the user's language preference from the Accept-Language header in incoming requests. This allows the application to serve content in the user's preferred language.
Dynamic Message Rendering: The application now dynamically renders messages based on the detected language, enhancing the user experience for non-English speakers.
Implementation Details
fetch-translations.js: This script connects to the POEditor API, fetches the latest translations, and integrates them into the application's localization files.
Middleware: The newly added middleware processes incoming requests to determine the user's language preference, which is then used to select the appropriate language bundle for message rendering.
Note
I have only replaced the texts on the login pages with translation keys for now. Replacing all the texts across the application would have taken too much time. If you approve the architecture, we can proceed with the migration page by page.
Issue number
Mention the issue number(s) this PR addresses (e.g., #123).
Please ensure all items are checked off before requesting a review: