From 6cebe171d986340751ef93e8e7e8cdb528bb45df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EA=B0=95=EC=A4=80?= Date: Fri, 2 Dec 2022 21:09:51 +0900 Subject: [PATCH] feat(frontend): add change language button in personal setting --- frontend/.eslintrc.json | 1 - frontend/.vscode/settings.json | 3 ++- .../basic/dialog/AddServiceTokenDialog.js | 4 +-- frontend/i18n.js | 2 +- frontend/locales/en-US.json | 6 +++-- frontend/locales/ko-KR.json | 8 ++++-- frontend/pages/settings/personal/[id].js | 25 +++++++++++++++++-- 7 files changed, 38 insertions(+), 11 deletions(-) diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json index 821ea5f1f5..0c5504b90d 100644 --- 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 index c4742cc40a..1a6546263e 100644 --- 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" } \ No newline at end of file diff --git a/frontend/components/basic/dialog/AddServiceTokenDialog.js b/frontend/components/basic/dialog/AddServiceTokenDialog.js index 64bb37e7e6..33b07125df 100644 --- 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")}: `} />
@@ -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")}: `} />
diff --git a/frontend/i18n.js b/frontend/i18n.js index 4390cab6b6..cb65ce2198 100644 --- 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 index c360c4a49c..d8057d398a 100644 --- 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 index b8bba2e77f..4b34e974c7 100644 --- 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 index 04c6d57b67..15604aed39 100644 --- 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() {
*/} +
+

+ {t("settings-personal:change-language")} +

+
+ +
+
+