mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 07:30:20 +00:00
feat(frontend): update translate library
This commit is contained in:
+13
-1
@@ -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
|
||||
|
||||
@@ -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"]);
|
||||
|
||||
@@ -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
@@ -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"]);
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
|
||||
@@ -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
@@ -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",
|
||||
]);
|
||||
|
||||
@@ -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",
|
||||
]);
|
||||
|
||||
Reference in New Issue
Block a user