feat(frontend): update translate library

This commit is contained in:
이강준
2022-12-11 10:54:53 +09:00
parent 96ebe3e3d2
commit 0e53b78708
53 changed files with 645 additions and 550 deletions
+13 -1
View File
@@ -1,5 +1,6 @@
import { useEffect } from "react";
import { useRouter } from "next/router";
import { appWithTranslation } from "next-i18next";
import { config } from "@fortawesome/fontawesome-svg-core";
import { initPostHog } from "~/components/analytics/posthog";
@@ -18,6 +19,17 @@ const App = ({ Component, pageProps, ...appProps }) => {
const router = useRouter();
const posthog = initPostHog();
// useEffect(() => {
// const storedLang = localStorage.getItem("lang");
// console.log(router.locale);
// console.log(storedLang);
// if (router.locale ?? "en" !== storedLang ?? "en") {
// router.push(router.pathname, router.pathname, {
// locale: storedLang ?? "en",
// });
// }
// }, [router.locale, router.pathname]);
useEffect(() => {
// Init for auto capturing
const posthog = initPostHog();
@@ -56,7 +68,7 @@ const App = ({ Component, pageProps, ...appProps }) => {
);
};
export default App;
export default appWithTranslation(App);
{
/* <Script
+4 -1
View File
@@ -2,7 +2,7 @@ import React, { Fragment, useCallback, useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import {
faArrowDownAZ,
faArrowDownZA,
@@ -35,6 +35,7 @@ import getSecretsForProject from "~/components/utilities/secrets/getSecretsForPr
import pushKeys from "~/components/utilities/secrets/pushKeys";
import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
import guidGenerator from "~/utilities/randomId";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import { envMapping } from "../../public/data/frequentConstants";
import getWorkspaceIntegrations from "../api/integrations/getWorkspaceIntegrations";
@@ -810,3 +811,5 @@ export default function Dashboard() {
}
Dashboard.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps(["dashboard"]);
+6 -1
View File
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import {
faArrowRight,
faCheck,
@@ -17,6 +17,7 @@ import NavHeader from "~/components/navigation/NavHeader";
import getSecretsForProject from "~/components/utilities/secrets/getSecretsForProject";
import pushKeysIntegration from "~/components/utilities/secrets/pushKeysIntegration";
import guidGenerator from "~/utilities/randomId";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import {
envMapping,
@@ -398,3 +399,7 @@ export default function Integrations() {
}
Integrations.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"integrations",
]);
+14 -6
View File
@@ -2,9 +2,8 @@ import React, { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import Link from "next/link";
import { useRouter } from "next/router";
import setLanguage from "next-translate/setLanguage";
import useTranslation from "next-translate/useTranslation";
import Router, { useRouter } from "next/router";
import { useTranslation } from "next-i18next";
import { faWarning } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -13,16 +12,23 @@ import Error from "~/components/basic/Error";
import InputField from "~/components/basic/InputField";
import ListBox from "~/components/basic/Listbox";
import attemptLogin from "~/utilities/attemptLogin";
import { getTranslatedStaticProps } from "~/utilities/withTranslateProps";
import getWorkspaces from "./api/workspace/getWorkspaces";
export default function Login() {
export default function Login(props) {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [errorLogin, setErrorLogin] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const router = useRouter();
const { t, lang } = useTranslation("");
const { t } = useTranslation();
const lang = router.locale ?? "en";
const setLanguage = async (to) => {
Router.push("/login", "/login", { locale: to });
localStorage.setItem("lang", to);
};
useEffect(async () => {
let userWorkspace;
@@ -132,7 +138,7 @@ export default function Login() {
<ListBox
selected={lang}
onChange={setLanguage}
data={["en-US", "ko-KR"]}
data={["en", "ko"]}
width="full"
text={`${t("common:language")}: `}
/>
@@ -150,3 +156,5 @@ export default function Login() {
</div>
);
}
export const getStaticProps = getTranslatedStaticProps(["auth", "login"]);
+7 -1
View File
@@ -1,10 +1,11 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import useTranslation from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import Plan from "~/components/billing/Plan";
import NavHeader from "~/components/navigation/NavHeader";
import { STRIPE_PRODUCT_PRO, STRIPE_PRODUCT_STARTER } from "~/utilities/config";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import getOrganizationSubscriptions from "../../api/organization/GetOrgSubscription";
import getOrganizationUsers from "../../api/organization/GetOrgUsers";
@@ -112,3 +113,8 @@ export default function SettingsBilling() {
}
SettingsBilling.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"billing",
]);
+9 -1
View File
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from "react";
import Head from "next/head";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import {
faMagnifyingGlass,
faPlus,
@@ -17,6 +17,7 @@ import InputField from "~/components/basic/InputField";
import UserTable from "~/components/basic/table/UserTable";
import NavHeader from "~/components/navigation/NavHeader";
import guidGenerator from "~/utilities/randomId";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import addUserToOrg from "../../api/organization/addUserToOrg";
import deleteIncidentContact from "../../api/organization/deleteIncidentContact";
@@ -383,3 +384,10 @@ export default function SettingsOrg() {
}
SettingsOrg.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-org",
"section-incident",
"section-members",
]);
+21 -14
View File
@@ -1,7 +1,7 @@
import React, { useCallback, useEffect, useState } from "react";
import Head from "next/head";
import { useTranslation } from "next-i18next";
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";
@@ -12,6 +12,7 @@ import NavHeader from "~/components/navigation/NavHeader";
import changePassword from "~/components/utilities/cryptography/changePassword";
import issueBackupKey from "~/components/utilities/cryptography/issueBackupKey";
import passwordCheck from "~/utilities/checks/PasswordCheck";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import getUser from "../../api/user/getUser";
@@ -118,7 +119,7 @@ export default function PersonalSettings() {
<ListBox
selected={lang}
onChange={setLanguage}
data={["en-US", "ko-KR"]}
data={["en", "ko"]}
width="full"
text={`${t("common:language")}: `}
/>
@@ -129,13 +130,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">
{t("form-password:change")}
{t("section-password:change")}
</p>
</div>
</div>
<div className="max-w-xl w-full">
<InputField
label={t("form-password:current")}
label={t("section-password:current")}
onChangeHandler={(password) => {
setCurrentPassword(password);
}}
@@ -143,11 +144,11 @@ export default function PersonalSettings() {
value={currentPassword}
isRequired
error={currentPasswordError}
errorText={t("form-password:current-wrong")}
errorText={t("section-password:current-wrong")}
/>
<div className="py-2"></div>
<InputField
label={t("form-password:new")}
label={t("section-password:new")}
onChangeHandler={(password) => {
setNewPassword(password);
passwordCheck(
@@ -173,7 +174,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`}>
{t("form-password:validate-base")}
{t("section-password:validate-base")}
</div>
<div className="flex flex-row justify-start items-center ml-1">
{passwordErrorLength ? (
@@ -192,7 +193,7 @@ export default function PersonalSettings() {
passwordErrorLength ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
{t("form-password:validate-length")}
{t("section-password:validate-length")}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
@@ -214,7 +215,7 @@ export default function PersonalSettings() {
: "text-gray-600"
} text-sm`}
>
{t("form-password:validate-case")}
{t("section-password:validate-case")}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
@@ -234,7 +235,7 @@ export default function PersonalSettings() {
passwordErrorNumber ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
{t("form-password:validate-number")}
{t("section-password:validate-number")}
</div>
</div>
</div>
@@ -243,7 +244,7 @@ export default function PersonalSettings() {
)}
<div className="flex flex-row items-center mt-3 w-52 pr-3">
<Button
text={t("form-password:change")}
text={t("section-password:change")}
onButtonPressed={() => {
if (
!passwordErrorLength &&
@@ -272,7 +273,7 @@ export default function PersonalSettings() {
passwordErrorNumber
)
}
textDisabled={t("form-password:change")}
textDisabled={t("section-password:change")}
/>
<FontAwesomeIcon
icon={faCheck}
@@ -299,13 +300,13 @@ export default function PersonalSettings() {
</div>
<div className="w-full max-w-xl mb-4">
<InputField
label={t("form-password:current")}
label={t("section-password:current")}
onChangeHandler={setBackupPassword}
type="password"
value={backupPassword}
isRequired
error={backupKeyError}
errorText={t("form-password:current-wrong")}
errorText={t("section-password:current-wrong")}
/>
</div>
<div className="flex flex-row items-center mt-3 w-full w-60">
@@ -341,3 +342,9 @@ export default function PersonalSettings() {
}
PersonalSettings.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-personal",
"section-password",
]);
+8 -1
View File
@@ -1,7 +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 { useTranslation } from "next-i18next";
import { faCheck, faPlus } from "@fortawesome/free-solid-svg-icons";
import Button from "~/components/basic/buttons/Button";
@@ -9,6 +9,7 @@ import AddServiceTokenDialog from "~/components/basic/dialog/AddServiceTokenDial
import InputField from "~/components/basic/InputField";
import ServiceTokenTable from "~/components/basic/table/ServiceTokenTable";
import NavHeader from "~/components/navigation/NavHeader";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import getServiceTokens from "../../api/serviceToken/getServiceTokens";
import deleteWorkspace from "../../api/workspace/deleteWorkspace";
@@ -280,3 +281,9 @@ export default function SettingsBasic() {
}
SettingsBasic.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-project",
"section-token",
]);
+28 -15
View File
@@ -20,8 +20,8 @@ import checkEmailVerificationCode from "./api/auth/CheckEmailVerificationCode";
import completeAccountInformationSignup from "./api/auth/CompleteAccountInformationSignup";
import sendVerificationEmail from "./api/auth/SendVerificationEmail";
import getWorkspaces from "./api/workspace/getWorkspaces";
import useTranslation from "next-translate/useTranslation";
import Trans from "next-translate/Trans";
import { Trans, useTranslation } from "next-i18next";
import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
// const ReactCodeInput = dynamic(import("react-code-input"));
const nacl = require("tweetnacl");
@@ -369,9 +369,11 @@ export default function SignUp() {
type="name"
value={firstName}
isRequired
errorText={t("common:validate-required", {
name: t("common:first-name"),
})}
errorText={
t("common:validate-required", {
name: t("common:first-name"),
}) as string
}
error={firstNameError}
/>
</div>
@@ -382,15 +384,17 @@ export default function SignUp() {
type="name"
value={lastName}
isRequired
errorText={t("common:validate-required", {
name: t("common:last-name"),
})}
errorText={
t("common:validate-required", {
name: t("common:last-name"),
}) as string
}
error={lastNameError}
/>
</div>
<div className="mt-2 flex flex-col items-center justify-center w-full md:p-2 rounded-lg max-h-60">
<InputField
label={t("form-password:password")}
label={t("section-password:password")}
onChangeHandler={(password: string) => {
setPassword(password);
passwordCheck({
@@ -413,7 +417,7 @@ export default function SignUp() {
passwordErrorNumber ? (
<div className="w-full mt-4 bg-white/5 px-2 flex flex-col items-start py-2 rounded-md">
<div className={`text-gray-400 text-sm mb-1`}>
{t("form-password:validate-base")}
{t("section-password:validate-base")}
</div>
<div className="flex flex-row justify-start items-center ml-1">
{passwordErrorLength ? (
@@ -432,7 +436,7 @@ export default function SignUp() {
passwordErrorLength ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
{t("form-password:validate-length")}
{t("section-password:validate-length")}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
@@ -452,7 +456,7 @@ export default function SignUp() {
passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
{t("form-password:validate-case")}
{t("section-password:validate-case")}
</div>
</div>
<div className="flex flex-row justify-start items-center ml-1">
@@ -472,7 +476,7 @@ export default function SignUp() {
passwordErrorNumber ? "text-gray-400" : "text-gray-600"
} text-sm`}
>
{t("form-password:validate-number")}
{t("section-password:validate-number")}
</div>
</div>
</div>
@@ -544,8 +548,11 @@ export default function SignUp() {
<title>{t("common:head-title", { title: t("signup:title") })}</title>
<link rel="icon" href="/infisical.ico" />
<meta property="og:image" content="/images/message.png" />
<meta property="og:title" content={t("signup:og-title")} />
<meta name="og:description" content={t("signup:og-description")} />
<meta property="og:title" content={t("signup:og-title") as string} />
<meta
name="og:description"
content={t("signup:og-description") as string}
/>
</Head>
<div className="flex flex-col justify-center items-center">
<Link href="/">
@@ -563,3 +570,9 @@ export default function SignUp() {
</div>
);
}
export const getStaticProps = getTranslatedStaticProps([
"auth",
"signup",
"section-password",
]);
+9 -1
View File
@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
import Head from "next/head";
import Image from "next/image";
import { useRouter } from "next/router";
import useTranslation from "next-translate/useTranslation";
import { useTranslation } from "next-i18next";
import { appWithTranslation } from "next-i18next";
import { faMagnifyingGlass, faPlus } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -11,6 +12,7 @@ import AddProjectMemberDialog from "~/components/basic/dialog/AddProjectMemberDi
import UserTable from "~/components/basic/table/UserTable";
import NavHeader from "~/components/navigation/NavHeader";
import guidGenerator from "~/utilities/randomId";
import { getTranslatedServerSideProps } from "~/utilities/withTranslateProps";
import getOrganizationUsers from "../api/organization/GetOrgUsers";
import getUser from "../api/user/getUser";
@@ -211,3 +213,9 @@ export default function Users() {
}
Users.requireAuth = true;
export const getServerSideProps = getTranslatedServerSideProps([
"settings",
"settings-members",
"section-members",
]);