translate(frontend): update namespace names, move translate keys, translate some keys into korean

frontend/pages/settings/personal/[id].js

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from "react";
 import Head from "next/head";
+import useTranslation from "next-translate/useTranslation";
 import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -26,6 +27,8 @@ export default function PersonalSettings() {
   const [backupKeyIssued, setBackupKeyIssued] = useState(false);
   const [backupKeyError, setBackupKeyError] = useState(false);
 
+  const { t } = useTranslation();
+
   useEffect(async () => {
     let user = await getUser();
     setPersonalEmail(user.email);
@@ -35,19 +38,24 @@ export default function PersonalSettings() {
   return (
     <div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
       <Head>
-        <title>Personal Settings</title>
+        <title>
+          {t("common:head-title", { title: t("settings-personal:title") })}
+        </title>
         <link rel="icon" href="/infisical.ico" />
       </Head>
       <div className="flex flex-row">
         <div className="w-full max-h-screen pb-2 overflow-y-auto">
-          <NavHeader pageName="Personal Settings" isProjectRelated={false} />
+          <NavHeader
+            pageName={t("settings-personal:title")}
+            isProjectRelated={false}
+          />
           <div className="flex flex-row justify-between items-center ml-6 mt-8 mb-6 text-xl max-w-5xl">
             <div className="flex flex-col justify-start items-start text-3xl">
               <p className="font-semibold mr-4 text-gray-200">
-                Personal Settings
+                {t("settings-personal:title")}
               </p>
               <p className="font-normal mr-4 text-gray-400 text-base">
-                View and manage your personal information here.
+                {t("settings-personal:description")}
               </p>
             </div>
           </div>
@@ -104,13 +112,13 @@ export default function PersonalSettings() {
               <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">
                   <p className="text-xl font-semibold mb-3 min-w-max">
-                    Change password
+                    {t("form-password:change")}
                   </p>
                 </div>
               </div>
               <div className="max-w-xl w-full">
                 <InputField
-                  label="Current Password"
+                  label={t("form-password:current")}
                   onChangeHandler={(password) => {
                     setCurrentPassword(password);
                   }}
@@ -118,11 +126,11 @@ export default function PersonalSettings() {
                   value={currentPassword}
                   isRequired
                   error={currentPasswordError}
-                  errorText="The current password may be wrong"
+                  errorText={t("form-password:current-wrong")}
                 />
                 <div className="py-2"></div>
                 <InputField
-                  label="New Password"
+                  label={t("form-password:new")}
                   onChangeHandler={(password) => {
                     setNewPassword(password);
                     passwordCheck(
@@ -148,7 +156,7 @@ export default function PersonalSettings() {
               passwordErrorNumber ? (
                 <div className="w-full mt-3 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md max-w-xl mb-2">
                   <div className={`text-gray-400 text-sm mb-1`}>
-                    Password should contain at least:
+                    {t("form-password:validate-base")}
                   </div>
                   <div className="flex flex-row justify-start items-center ml-1">
                     {passwordErrorLength ? (
@@ -167,7 +175,7 @@ export default function PersonalSettings() {
                         passwordErrorLength ? "text-gray-400" : "text-gray-600"
                       } text-sm`}
                     >
-                      14 characters
+                      {t("form-password:validate-length")}
                     </div>
                   </div>
                   <div className="flex flex-row justify-start items-center ml-1">
@@ -189,7 +197,7 @@ export default function PersonalSettings() {
                           : "text-gray-600"
                       } text-sm`}
                     >
-                      1 lowercase character
+                      {t("form-password:validate-case")}
                     </div>
                   </div>
                   <div className="flex flex-row justify-start items-center ml-1">
@@ -209,7 +217,7 @@ export default function PersonalSettings() {
                         passwordErrorNumber ? "text-gray-400" : "text-gray-600"
                       } text-sm`}
                     >
-                      1 number
+                      {t("form-password:validate-number")}
                     </div>
                   </div>
                 </div>
@@ -247,7 +255,7 @@ export default function PersonalSettings() {
                       passwordErrorNumber
                     )
                   }
-                  textDisabled="Change Password"
+                  textDisabled={t("password:change")}
                 />
                 <FontAwesomeIcon
                   icon={faCheck}
@@ -262,32 +270,30 @@ export default function PersonalSettings() {
               <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">
                   <p className="text-xl font-semibold mb-3 min-w-max">
-                    Emergency Kit
+                    {t("settings-personal:emergency.name")}
                   </p>
                   <p className="text-sm text-mineshaft-300 min-w-max">
-                    Your Emergency Kit contains the information you’ll need to
-                    sign in to your Infisical account.
+                    {t("settings-personal:emergency.text1")}
                   </p>
                   <p className="text-sm text-mineshaft-300 mb-5 min-w-max">
-                    Only the latest issued Emergency Kit remains valid. To get a
-                    new Emergency Kit, verify your password.
+                    {t("settings-personal:emergency.text2")}
                   </p>
                 </div>
               </div>
               <div className="w-full max-w-xl mb-4">
                 <InputField
-                  label="Current Password"
+                  label={t("password:current")}
                   onChangeHandler={setBackupPassword}
                   type="password"
                   value={backupPassword}
                   isRequired
                   error={backupKeyError}
-                  errorText="The current password is wrong"
+                  errorText={t("password:current-wrong")}
                 />
               </div>
               <div className="flex flex-row items-center mt-3 w-full w-60">
                 <Button
-                  text="Download Emergency Kit"
+                  text={t("settings-personal:emergency.download")}
                   onButtonPressed={() => {
                     issueBackupKey({
                       email: personalEmail,
@@ -300,7 +306,7 @@ export default function PersonalSettings() {
                   color="mineshaft"
                   size="md"
                   active={backupPassword != ""}
-                  textDisabled="Download Emergency Kit"
+                  textDisabled={t("settings-personal:emergency.download")}
                 />
                 <FontAwesomeIcon
                   icon={faCheck}