Localize Web UI #39

[gangjun06]

Check Lists

• Setup localization module
• Move texts to json file
• Translate english into korean
• Resolve Conflict
• Language select in Login page and setting page

What changed and added?

package.json

• next-translate for support multi languages.

Locale files in frontend/locales

All language files are located under frontend/locales/{language}.json.
Language file is like this;

{
  "namespace": {
     "key": "value",
     "nested-key": {
       "key": "nested-value"
    }
  }
}

Texts in frontend/pages/ and frontend/components

import useTranslation from "next-translate/useTranslation";
......
 const { t } = useTranslation("");
 ......
 <div>{t("common:hello")}</div>
 ......

Define namespaces and locales in frontend/i18n.js

Defines the namespaces to use per page

docker-compose.dev.yml

https://github.com/gangjun06/infisical/blob/4c94ddd1b2635143ef93c941962c2bd29dfdd828/docker-compose.dev.yml#L52-53
To change language files without recreate full container with just restart, Added this lines.

Translate key convention?

I didn't make it clearly, but i followed some rules.

• use - for space in key.
• seperate namespace by page and section.
• make keys simple as possible

ETC

For vscode, i18n-ally is very useful plugin for translated file.
It can be able to preview value of the translate key.

[gangjun06]

I'm sorry that it is taking a long time and little delayed.
I'll make it mergeable without conflict in a few days.

[vmatsiiako]

Hi @gangjun06! Don't worry about it! Just take as much time as you need! We really appreciate your contributions. Thank you.

[gangjun06]

I didn't translated all texts, but It seems almost done and ready to merge. If possible, I'll create translate part2 later.

[vmatsiiako]

HI @gangjun06! This is really awesome! I'm still looking into this, it's a lot of code 😃

Do you think you could fix the merge conflicts?

[gangjun06]

I fixed conflicts 5910bfb

[vmatsiiako]

Quick question. Why did you decide to use next-translate instead of next-i18next?

[gitguardian]

⚠️ GitGuardian has uncovered 4 secrets following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secrets in your pull request

GitGuardian id	Secret	Commit	Filename
-	Generic High Entropy Secret	5b8337a	.env.example	View secret
-	Generic High Entropy Secret	5b8337a	.env.example	View secret
-	Generic High Entropy Secret	5b8337a	.env.example	View secret
-	Generic High Entropy Secret	5b8337a	.env.example	View secret

🛠 Guidelines to remediate hardcoded secrets

1. Understand the implications of revoking this secret by investigating where it is used in your code.
2. Replace and store your secrets safely. Learn here the best practices.
3. Revoke and rotate these secrets.
4. If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

• following these best practices for managing and storing secrets including API keys and other credentials
• install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

---

<sup>🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!</sup>

[gangjun06]

Updated module to next-i18next and resolved all merge conflicts.

Some Notes

Apply translation to page

Next-i18next needs getServersideProps for all pages.
So more convenient, I created some utility on frontend/components/utilities/withTranslateProps.ts
You can use it like this:

import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
export const getServerSideProps = getTranslatedServerSideProps(["dashboard"]);
---
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
export const getStaticProps = getTranslatedStaticProps(["auth", "login"]);

Too many locale files

I couldn't find good way for manage namespaces in one file. So, I just created lots of file in locales/{language}.
Maybe make all locale texts to same namespace will be better way. (But I created multiple namespaces because next-i18next doesn't cache locale text, just load all texts in every time page load.)

How language change works?

I believe next-i18next doesn't have language change function. It's just working with dynamic locale path. (/en/... , /ko/.......)
So, I save locale on the localStorage, and if the URL doesn't match with current locale, It will be redirect to correct url by useEffect in _app. I can't sure it's good way, Actually I didn't looked up much about this library.

---

Currently, this PR doesn't cover all texts. If no one contributes to this, I'll create new PR later when I am free(Maybe Jan 3rd week~).

Also, I'm so sorry for being late

[vmatsiiako]

Sounds good! Thank you so much, I will have a look soon!

Quick question. If a translation is not available, does the text default to English?

[gangjun06]

Yes, default locale is English.
/login -> English
/en/login -> English
/{registered-locale}/login -> Registered locale
/other-wrong-locale/login -> 404 Page Not Found

[vmatsiiako]

Do you maybe know why this error occurs on all pages? Trying to look into this right now

[gangjun06]

Do you maybe know why this error occurs on all pages? Trying to look into this right now

@mv-turtle
Oooops It was my mistake... I fixed it by using router.asPath instead of router.pathname in _app.js.

[vmatsiiako]

I think all of this makes sense! Thank you so much for the contribution ❤️
Would you be able to help fix the merge conflicts? there seem to be quite a lot :)

[vmatsiiako]

I solved all the merge conflicts! Merging now :)
Thank you so much for the contribution!!! 🚀❤️

@gangjun06 I will work on adding translation to some part of the app where it's missing right now. Would you be able to help translating them to Korean when you have time? Also, do you think you could help translate our Readme? 😃 I think we should try to do something like Supabase does (https://github.com/supabase/supabase/blob/master/i18n/languages.md)