feat(frontend): add change language button in personal setting

Infisical · Dec 2, 2022 · 6cebe17 · 6cebe17
1 parent 9685af2
commit 6cebe17
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 11 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -4,7 +4,6 @@
     "simple-import-sort"
   ],
   "rules": {
-    "i18n-ally-translation-missing": "off",
     "react-hooks/exhaustive-deps": "off",
     "simple-import-sort/exports": "warn",
     "simple-import-sort/imports": [

diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -2,5 +2,6 @@
 	"i18n-ally.localesPaths": [
 		"locales",
 		"public/locales"
-	]
+	],
+	"i18n-ally.sourceLanguage": "en-US"
 }
diff --git a/frontend/components/basic/dialog/AddServiceTokenDialog.js b/frontend/components/basic/dialog/AddServiceTokenDialog.js
@@ -168,7 +168,7 @@ const AddServiceTokenDialog = ({
                           "Testing",
                         ]}
                         width="full"
-                        text={`t("common:environment"): `}
+                        text={`${t("common:environment")}: `}
                       />
                     </div>
                     <div className="max-h-28">
@@ -177,7 +177,7 @@ const AddServiceTokenDialog = ({
                         onChange={setServiceTokenExpiresIn}
                         data={["1 day", "7 days", "1 month"]}
                         width="full"
-                        text={`t("common:expired-in"): `}
+                        text={`${t("common:expired-in")}: `}
                       />
                     </div>
                     <div className="max-w-max">

diff --git a/frontend/i18n.js b/frontend/i18n.js
@@ -20,7 +20,7 @@ module.exports = {
       "section-incident",
       "section-members",
     ],
-    "/settings/personal/[id]": ["settings-personal"],
+    "/settings/personal/[id]": ["settings-personal", "form-password"],
     "/settings/billing/[id]": ["billing"],
     "/integrations/[id]": ["integrations"],
   },

diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
@@ -30,7 +30,8 @@
     "custom-pricing": "Custom Pricing",
     "schedule-demo": "Schedule a Demo",
     "environment": "Environment",
-    "expired-in": "Expires in"
+    "expired-in": "Expires in",
+    "language": "Language"
   },
   "form-password": {
     "password": "Password",
@@ -132,7 +133,8 @@
       "text1": "Your Emergency Kit contains the information you’ll need to sign in to your Infisical account.",
       "text2": "Only the latest issued Emergency Kit remains valid. To get a new Emergency Kit, verify your password.",
       "download": "Download Emergency Kit"
-    }
+    },
+    "change-language": "Change Language"
   },
   "settings-project": {
     "title": "Project Settings",

diff --git a/frontend/locales/ko-KR.json b/frontend/locales/ko-KR.json
@@ -28,7 +28,10 @@
     "upgrade": "Upgrade",
     "learn-more": "Learn More",
     "custom-pricing": "Custom Pricing",
-    "schedule-demo": "Schedule a Demo"
+    "schedule-demo": "Schedule a Demo",
+    "environment": "환경",
+    "expired-in": "만료 기한:",
+    "language": "언어"
   },
   "form-password": {
     "password": "비밀번호",
@@ -130,7 +133,8 @@
       "text1": "긴급복구 키트는 Infisical계정에 로그인 할 수 있는 정보를 가지고 있어요.",
       "text2": "오직 마지막으로 발급한 긴급복구 키트만 사용 가능해요. 새로운 긴급복구 키트를 받으려면, 비밀번호를 입력하세요.",
       "download": "긴급복구 키트 다운로드"
-    }
+    },
+    "change-language": "언어 변경하기"
   },
   "settings-project": {
     "title": "프로젝트 설정",

diff --git a/frontend/pages/settings/personal/[id].js b/frontend/pages/settings/personal/[id].js
@@ -1,11 +1,13 @@
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import Head from "next/head";
+import setLanguage from "next-translate/setLanguage";
 import useTranslation from "next-translate/useTranslation";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import Button from "~/components/basic/buttons/Button";
 import InputField from "~/components/basic/InputField";
+import ListBox from "~/components/basic/Listbox";
 import NavHeader from "~/components/navigation/NavHeader";
 import changePassword from "~/components/utilities/cryptography/changePassword";
 import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey";
@@ -27,7 +29,11 @@ export default function PersonalSettings() {
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
   const [backupKeyError, setBackupKeyError] = useState(false);
 
-  const { t } = useTranslation();
+  const { t, lang } = useTranslation();
+
+  const changeLanguage = useCallback((code) => {
+    setLanguage(code);
+  }, []);
 
   useEffect(async () => {
     let user = await getUser();
@@ -108,6 +114,21 @@ export default function PersonalSettings() {
 								</div> */}
               </div>
             </div>
+            <div className="bg-white/5 rounded-md px-6 pt-6 pb-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
+              <p className="text-xl font-semibold self-start">
+                {t("settings-personal:change-language")}
+              </p>
+              <div className="max-h-28 w-ful mt-4">
+                <ListBox
+                  selected={lang}
+                  onChange={setLanguage}
+                  data={["en-US", "ko-KR"]}
+                  width="full"
+                  text={`${t("common:language")}: `}
+                />
+              </div>
+            </div>
+
             <div className="bg-white/5 rounded-md px-6 pt-5 pb-6 flex flex-col items-start flex flex-col items-start w-full mb-6">
               <div className="flex flex-row max-w-5xl justify-between items-center w-full">
                 <div className="flex flex-col justify-between w-full max-w-3xl">