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

This commit is contained in:
이강준
2022-12-02 20:52:26 +09:00
parent 914a78fb15
commit 9685af21f3
17 changed files with 531 additions and 229 deletions
+29 -24
View File
@@ -1,5 +1,6 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import useTranslation from "next-translate/useTranslation";
import Plan from "~/components/billing/Plan";
import NavHeader from "~/components/navigation/NavHeader";
@@ -12,36 +13,38 @@ export default function SettingsBilling() {
let [currentPlan, setCurrentPlan] = useState("");
let [numUsers, setNumUsers] = useState("");
const { t } = useTranslation();
const plans = [
{
key: 1,
name: "Starter",
price: "Free",
priceExplanation: "up to 5 team members",
text: "Manage any project with 5 members for free!",
subtext: "$5 per member/month afterwards.",
buttonTextMain: "Downgrade",
buttonTextSecondary: "Learn More",
name: t("common:starter"),
price: t("common:free"),
priceExplanation: t("billing:starter.price-explanation"),
text: t("billing:starter.text"),
subtext: t("billing:starter.subtext"),
buttonTextMain: t("common:downgrade"),
buttonTextSecondary: t("common:learn-more"),
current: currentPlan == STRIPE_PRODUCT_STARTER,
},
{
key: 2,
name: "Professional",
name: t("common:professional"),
price: "$9",
priceExplanation: "/member/month",
subtext: "Includes unlimited projects & members.",
text: "Keep up with key management as you grow.",
buttonTextMain: "Upgrade",
buttonTextSecondary: "Learn More",
priceExplanation: t("billing:professional.price-explanation"),
subtext: t("billing:professional.subtext"),
text: t("billing:professional.text"),
buttonTextMain: t("common:upgrade"),
buttonTextSecondary: t("common:learn-more"),
current: currentPlan == STRIPE_PRODUCT_PRO,
},
{
key: 3,
name: "Enterprise",
price: "Custom Pricing",
text: "More control for advanced organizations.",
buttonTextMain: "Schedule a Demo",
buttonTextSecondary: "Learn More",
name: t("common:enterprise"),
price: t("common:custom-pricing"),
text: t("billing:enterprise.text"),
buttonTextMain: t("common:schedule-demo"),
buttonTextSecondary: t("common:learn-more"),
current: false,
},
];
@@ -61,30 +64,32 @@ export default function SettingsBilling() {
return (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
<title>Settings - Billing</title>
<title>{t("common:head-title", { title: t("billing: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="Usage & Billing" />
<NavHeader pageName={t("billing:title")} />
<div className="flex flex-row justify-between items-center ml-6 my-8 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">
Usage & Billing
{t("billing:title")}
</p>
<p className="font-normal mr-4 text-gray-400 text-base">
View and manage your {"organization's"} subscription here.
{t("billing:description")}
</p>
</div>
</div>
<div className="flex flex-col ml-6 text-mineshaft-50">
<p className="text-xl font-semibold">Subscription</p>
<p className="text-xl font-semibold">{t("billing:subscription")}</p>
<div className="flex flex-row mt-4 overflow-x-auto">
{plans.map((plan) => (
<Plan key={plan.name} plan={plan} />
))}
</div>
<p className="text-xl font-bold mt-12">Current Usage</p>
<p className="text-xl font-bold mt-12">
{t("billing:current-usage")}
</p>
<div className="flex flex-row">
<div className="mr-4 mt-8 text-gray-300 w-60 pt-6 pb-10 rounded-md bg-white/5 flex justify-center items-center flex flex-col">
<p className="text-6xl font-bold">{numUsers}</p>
+10 -8
View File
@@ -159,12 +159,14 @@ export default function SettingsOrg() {
return (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
<title>{t("settings:meta.org.head-title")}</title>
<title>
{t("common:head-title", { title: t("settings-org: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={t("settings:meta.org.title")} />
<NavHeader pageName={t("settings-org:title")} />
<AddIncidentContactDialog
isOpen={isAddIncidentContactOpen}
closeModal={closeAddIncidentContactModal}
@@ -175,10 +177,10 @@ export default function SettingsOrg() {
<div className="flex flex-row justify-between items-center ml-6 my-8 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">
{t("settings:meta.org.title")}
{t("settings-org:title")}
</p>
<p className="font-normal mr-4 text-gray-400 text-base">
{t("settings:meta.org.description")}
{t("settings-org:description")}
</p>
</div>
</div>
@@ -278,15 +280,15 @@ export default function SettingsOrg() {
<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">
{t("settings:incident-contacts")}
{t("section-incident:incident-contacts")}
</p>
<p className="text-xs text-gray-500 mb-2 min-w-max">
{t("settings:incident-contacts-description")}
{t("section-incident:incident-contacts-description")}
</p>
</div>
<div className="mt-4 mb-2 min-w-max flex flex-row items-end justify-end justify-center">
<Button
text={t("common:add-contact")}
text={t("section-incident:add-contact")}
onButtonPressed={openAddIncidentContactModal}
color="mineshaft"
size="md"
@@ -332,7 +334,7 @@ export default function SettingsOrg() {
) : (
<div className="w-full flex flex-row justify-center mt-6 max-w-4xl ml-6">
<p className="text-gray-400">
{t("settings:no-incident-contacts")}
{t("section-incident:no-incident-contacts")}
</p>
</div>
)}
+28 -22
View File
@@ -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}
+33 -26
View File
@@ -1,6 +1,7 @@
import React, { useEffect, useRef, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import Button from "~/components/basic/buttons/Button";
@@ -25,6 +26,8 @@ export default function SettingsBasic() {
let [isAddServiceTokenDialogOpen, setIsAddServiceTokenDialogOpen] =
useState(false);
const { t } = useTranslation();
useEffect(async () => {
let userWorkspaces = await getWorkspaces();
userWorkspaces.map((userWorkspace) => {
@@ -89,7 +92,9 @@ export default function SettingsBasic() {
return (
<div className="bg-bunker-800 max-h-screen flex flex-col justify-between text-white">
<Head>
<title>Settings</title>
<title>
{t("common:head-title", { title: t("settings-project:title") })}
</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<AddServiceTokenDialog
@@ -100,14 +105,17 @@ export default function SettingsBasic() {
/>
<div className="flex flex-row mr-6 max-w-5xl">
<div className="w-full max-h-screen pb-2 overflow-y-auto">
<NavHeader pageName="Project Settings" isProjectRelated={true} />
<NavHeader
pageName={t("settings-project:title")}
isProjectRelated={true}
/>
<div className="flex flex-row justify-between items-center ml-6 my-8 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">
Project Settings
{t("settings-project:title")}
</p>
<p className="font-normal mr-4 text-gray-400 text-base">
These settings only apply to the currently selected Project.
{t("settings-project:description")}
</p>
</div>
</div>
@@ -115,7 +123,9 @@ export default function SettingsBasic() {
<div className="flex flex-col">
<div className="min-w-md mt-2 flex flex-col items-start">
<div className="bg-white/5 rounded-md px-6 pt-6 pb-4 flex flex-col items-start flex flex-col items-start w-full mb-6 pt-2">
<p className="text-xl font-semibold mb-4">Display Name</p>
<p className="text-xl font-semibold mb-4">
{t("common:display-name")}
</p>
<div className="max-h-28 w-full max-w-md mr-auto">
<InputField
onChangeHandler={modifyWorkspaceName}
@@ -128,7 +138,7 @@ export default function SettingsBasic() {
<div className="flex justify-start w-full">
<div className={`flex justify-start max-w-sm mt-4 mb-2`}>
<Button
text="Save Changes"
text={t("common:save-changes")}
onButtonPressed={() => submitChanges(workspaceName)}
color="mineshaft"
size="md"
@@ -140,15 +150,14 @@ export default function SettingsBasic() {
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-6 pb-2 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4">
<p className="text-xl font-semibold self-start">Project ID</p>
<p className="text-xl font-semibold self-start">
{t("common:project-id")}
</p>
<p className="text-base text-gray-400 font-normal self-start mt-4">
To integrate Infisical into your code base and get automatic
injection of environmental variables, you should use the
following Project ID.
{t("settings-project:project-id-description")}
</p>
<p className="text-base text-gray-400 font-normal self-start">
For more guidance, including code snipets for various
languages and frameworks, see{" "}
{t("settings-project:project-id-description2")}
{/* eslint-disable-next-line react/jsx-no-target-blank */}
<a
href="https://infisical.com/docs/getting-started/introduction"
@@ -156,7 +165,7 @@ export default function SettingsBasic() {
rel="noopener"
className="text-primary hover:opacity-80 duration-200"
>
Infisical Docs.
{t("settings-project:docs")}
</a>
</p>
<div className="max-h-28 w-ful">
@@ -166,7 +175,7 @@ export default function SettingsBasic() {
placeholder=""
isRequired
static
text="This is your project's auto-generated unique identifier. It can't be changed."
text={t("settings-project:auto-generated")}
/>
</div>
</div>
@@ -174,16 +183,15 @@ export default function SettingsBasic() {
<div className="flex flex-row justify-between w-full">
<div className="flex flex-col w-full">
<p className="text-xl font-semibold mb-3">
Service Tokens
{t("section-token:service-tokens")}
</p>
<p className="text-base text-gray-400 mb-4">
Every service token is specific to you, a certain
project and a certain environment within this project.
{t("section-token:service-tokens-description")}
</p>
</div>
<div className="w-48">
<Button
text="Add New Token"
text={t("section-token:add-new")}
onButtonPressed={() => {
setIsAddServiceTokenDialogOpen(true);
}}
@@ -237,15 +245,15 @@ export default function SettingsBasic() {
</div>
</div>
<div className="bg-white/5 rounded-md px-6 pt-6 pb-6 border-l border-red pl-6 flex flex-col items-start flex flex-col items-start w-full mb-6 mt-4 pb-4 pt-2">
<p className="text-xl font-bold text-red">Danger Zone</p>
<p className="text-xl font-bold text-red">
{t("settings-project:danger-zone")}
</p>
<p className="mt-2 text-md text-gray-400">
As soon as you delete this project, you will not be able to undo
it. This will immediately remove all the keys. If you still want
to do that, please enter the name of the project below.
{t("settings-project:danger-zone-note")}
</p>
<div className="max-h-28 w-full max-w-md mr-auto mt-4">
<InputField
label="Project to be Deleted"
label={t("settings-project:project-to-delete")}
onChangeHandler={setWorkspaceToBeDeletedName}
type="varName"
value={workspaceToBeDeletedName}
@@ -258,11 +266,10 @@ export default function SettingsBasic() {
className="max-w-md mt-6 w-full inline-flex justify-center rounded-md border border-transparent bg-gray-800 px-4 py-2.5 text-sm font-medium text-gray-400 hover:bg-red hover:text-white hover:font-semibold hover:text-semibold duration-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
onClick={executeDeletingWorkspace}
>
Delete Project
{t("settings-project:delete-project")}
</button>
<p className="mt-0.5 ml-1 text-xs text-gray-500">
Note: You can only delete a project in case you have more than
one.
{t("settings-project:delete-project-note")}
</p>
</div>
</div>