chore(frontend): update some files about translate

2026-10-14 03:29:35 +00:00 · 2022-12-26 22:14:42 +09:00
parent 5b8337ac41
commit 991e4b7bc6
6 changed files with 119 additions and 92 deletions
@@ -1,24 +1,34 @@
-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 { faWarning } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+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 { useTranslation } from "next-i18next";
+import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

-import Button from '~/components/basic/buttons/Button';
-import Error from '~/components/basic/Error';
-import InputField from '~/components/basic/InputField';
-import attemptLogin from '~/utilities/attemptLogin';
+import Button from "~/components/basic/buttons/Button";
+import Error from "~/components/basic/Error";
+import InputField from "~/components/basic/InputField";
+import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";
+import attemptLogin from "~/utilities/attemptLogin";

-import getWorkspaces from './api/workspace/getWorkspaces';
+import getWorkspaces from "./api/workspace/getWorkspaces";
+import ListBox from "~/components/basic/Listbox";

 export default function Login() {
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
  const [errorLogin, setErrorLogin] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
  const router = useRouter();
+  const { t } = useTranslation();
+  const lang = router.locale ?? "en";
+
+  const setLanguage = async (to: string) => {
+    router.push("/login", "/login", { locale: to });
+    localStorage.setItem("lang", to);
+  };

  useEffect(() => {
    const redirectToDashboard = async () => {
@@ -26,9 +36,9 @@ export default function Login() {
      try {
        const userWorkspaces = await getWorkspaces();
        userWorkspace = userWorkspaces[0]._id;
-        router.push('/dashboard/' + userWorkspace);
+        router.push("/dashboard/" + userWorkspace);
      } catch (error) {
-        console.log('Error - Not logged in yet');
+        console.log("Error - Not logged in yet");
      }
    };
    redirectToDashboard();
@@ -49,7 +59,7 @@ export default function Login() {
      setErrorLogin,
      router,
      false,
-      true,
+      true
    ).then(() => {
      setTimeout(function () {
        setIsLoading(false);
@@ -60,14 +70,11 @@ export default function Login() {
  return (
    <div className="bg-bunker-800 h-screen flex flex-col justify-start px-6">
      <Head>
-        <title>Login</title>
+        <title>{t("common:head-title", { title: t("login:title") })}</title>
        <link rel="icon" href="/infisical.ico" />
        <meta property="og:image" content="/images/message.png" />
-        <meta property="og:title" content="Log In to Infisical" />
-        <meta
-          name="og:description"
-          content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
-        />
+        <meta property="og:title" content={t("login:og-title") ?? ""} />
+        <meta name="og:description" content={t("login:og-description") ?? ""} />
      </Head>
      <Link href="/">
        <div className="flex justify-center mb-8 mt-20 cursor-pointer">
@@ -80,15 +87,16 @@ export default function Login() {
        </div>
      </Link>
      <form
-        onChange={() => setErrorLogin(false)} onSubmit={(e) => e.preventDefault()}
+        onChange={() => setErrorLogin(false)}
+        onSubmit={(e) => e.preventDefault()}
      >
        <div className="bg-bunker w-full max-w-md mx-auto h-7/12 py-4 pt-8 px-6 rounded-xl drop-shadow-xl">
          <p className="text-3xl w-max mx-auto flex justify-center font-semibold text-bunker-100 mb-6">
-            Log in to your account
+            {t("login:login-to")}
          </p>
          <div className="flex items-center justify-center w-full md:p-2 rounded-lg mt-4 md:mt-0 max-h-24 md:max-h-28">
            <InputField
-              label="Email"
+              label={t("common:email")}
              onChangeHandler={setEmail}
              type="email"
              value={email}
@@ -99,7 +107,7 @@ export default function Login() {
          </div>
          <div className="relative flex items-center justify-center w-full md:p-2 rounded-lg md:mt-2 mt-6 max-h-24 md:max-h-28">
            <InputField
-              label="Password"
+              label={t("common:password")}
              onChangeHandler={setPassword}
              type="password"
              value={password}
@@ -112,12 +120,14 @@ export default function Login() {
              <Link href="/verify-email">Forgot password?</Link>
            </div>
          </div>
-          {!isLoading && errorLogin && <Error text="Your email and/or password are wrong." />}
+          {!isLoading && errorLogin && (
+            <Error text="Your email and/or password are wrong." />
+          )}
          <div className="flex flex-col items-center justify-center w-full md:p-2 max-h-20 max-w-md mt-4 mx-auto text-sm">
            <div className="text-l mt-6 m-8 px-8 py-3 text-lg">
              <Button
                type="submit"
-                text="Log In"
+                text={t("login:login") ?? ""}
                onButtonPressed={loginCheck}
                loading={isLoading}
                size="lg"
@@ -131,21 +141,33 @@ export default function Login() {
        {false && (
          <div className="w-full p-2 flex flex-row items-center bg-white/10 text-gray-300 rounded-md max-w-md mx-auto mt-4">
            <FontAwesomeIcon icon={faWarning} className="ml-2 mr-6 text-6xl" />
-            We are experiencing minor technical difficulties. We are working on
-            solving it right now. Please come back in a few minutes.
+            {t("common:maintenance-alert")}
          </div>
        )}
        <div className="flex flex-row items-center justify-center md:pb-4 mt-4">
          <p className="text-sm flex justify-center text-gray-400 w-max">
-            Need an Infisical account?
+            {t("login:need-account")}
          </p>
          <Link href="/signup">
            <button className="text-primary-700 hover:text-primary duration-200 font-normal text-sm underline-offset-4 ml-1.5">
-              Sign up here.
+              {t("login:create-account")}
            </button>
          </Link>
        </div>
      </form>
+      <div className="mt-4 flex items-center justify-center w-full">
+        <div className="w-48 mx-auto">
+          <ListBox
+            selected={lang}
+            onChange={setLanguage}
+            data={["en", "ko"]}
+            isFull
+            text={`${t("common:language")}: `}
+          />
+        </div>
+      </div>
    </div>
  );
 }
+
+export const getStaticProps = getTranslatedStaticProps(["auth", "login"]);
@@ -1,34 +1,35 @@
-import React, { useState } from 'react';
-import Image from 'next/image';
-import { useRouter } from 'next/router';
-import { faCheck, faX } from '@fortawesome/free-solid-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import React, { useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/router";
+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 passwordCheck from '~/components/utilities/checks/PasswordCheck';
-import Aes256Gcm from '~/components/utilities/cryptography/aes-256-gcm';
+import Button from "~/components/basic/buttons/Button";
+import InputField from "~/components/basic/InputField";
+import passwordCheck from "~/components/utilities/checks/PasswordCheck";
+import Aes256Gcm from "~/components/utilities/cryptography/aes-256-gcm";

-import EmailVerifyOnPasswordReset from './api/auth/EmailVerifyOnPasswordReset';
-import getBackupEncryptedPrivateKey from './api/auth/getBackupEncryptedPrivateKey';
-import resetPasswordOnAccountRecovery from './api/auth/resetPasswordOnAccountRecovery';
+import EmailVerifyOnPasswordReset from "./api/auth/EmailVerifyOnPasswordReset";
+import getBackupEncryptedPrivateKey from "./api/auth/getBackupEncryptedPrivateKey";
+import resetPasswordOnAccountRecovery from "./api/auth/resetPasswordOnAccountRecovery";
+import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";

-const queryString = require('query-string');
-const nacl = require('tweetnacl');
-const jsrp = require('jsrp');
-nacl.util = require('tweetnacl-util');
+const queryString = require("query-string");
+const nacl = require("tweetnacl");
+const jsrp = require("jsrp");
+nacl.util = require("tweetnacl-util");
 const client = new jsrp.client();

 export default function PasswordReset() {
  const router = useRouter();
-  const parsedUrl = queryString.parse(router.asPath.split('?')[1]);
+  const parsedUrl = queryString.parse(router.asPath.split("?")[1]);
  const token = parsedUrl.token;
-  const email = parsedUrl.to?.replace(' ', '+').trim();
-  const [verificationToken, setVerificationToken] = useState('');
+  const email = parsedUrl.to?.replace(" ", "+").trim();
+  const [verificationToken, setVerificationToken] = useState("");
  const [step, setStep] = useState(1);
-  const [backupKey, setBackupKey] = useState('');
-  const [privateKey, setPrivateKey] = useState('');
-  const [newPassword, setNewPassword] = useState('');
+  const [backupKey, setBackupKey] = useState("");
+  const [privateKey, setPrivateKey] = useState("");
+  const [newPassword, setNewPassword] = useState("");
  const [backupKeyError, setBackupKeyError] = useState(false);
  const [passwordErrorLength, setPasswordErrorLength] = useState(false);
  const [passwordErrorNumber, setPasswordErrorNumber] = useState(false);
@@ -43,7 +44,7 @@ export default function PasswordReset() {
          ciphertext: result.encryptedPrivateKey,
          iv: result.iv,
          tag: result.tag,
-          secret: backupKey
+          secret: backupKey,
        })
      );
      setStep(3);
@@ -60,7 +61,7 @@ export default function PasswordReset() {
      setPasswordErrorLength,
      setPasswordErrorNumber,
      setPasswordErrorLowerCase,
-      currentErrorCheck: errorCheck
+      currentErrorCheck: errorCheck,
    });

    if (!errorCheck) {
@@ -72,14 +73,14 @@ export default function PasswordReset() {
          .padStart(
            32 +
              (newPassword.slice(0, 32).length - new Blob([newPassword]).size),
-            '0'
-          )
+            "0"
+          ),
      }) as { ciphertext: string; iv: string; tag: string };

      client.init(
        {
          username: email,
-          password: newPassword
+          password: newPassword,
        },
        async () => {
          client.createVerifier(
@@ -90,12 +91,12 @@ export default function PasswordReset() {
                iv,
                tag,
                salt: result.salt,
-                verifier: result.verifier
+                verifier: result.verifier,
              });

              // if everything works, go the main dashboard page.
              if (response?.status === 200) {
-                router.push('/login');
+                router.push("/login");
              }
            }
          );
@@ -122,14 +123,14 @@ export default function PasswordReset() {
          onButtonPressed={async () => {
            const response = await EmailVerifyOnPasswordReset({
              email,
-              code: token
+              code: token,
            });
            if (response.status == 200) {
              setVerificationToken((await response.json()).token);
              setStep(2);
            } else {
-              console.log('ERROR', response);
-              router.push('/email-not-verified');
+              console.log("ERROR", response);
+              router.push("/email-not-verified");
            }
          }}
          size="lg"
@@ -195,7 +196,7 @@ export default function PasswordReset() {
              setPasswordErrorLength,
              setPasswordErrorNumber,
              setPasswordErrorLowerCase,
-              currentErrorCheck: false
+              currentErrorCheck: false,
            });
          }}
          type="password"
@@ -224,7 +225,7 @@ export default function PasswordReset() {
            )}
            <div
              className={`${
-                passwordErrorLength ? 'text-gray-400' : 'text-gray-600'
+                passwordErrorLength ? "text-gray-400" : "text-gray-600"
              } text-sm`}
            >
              14 characters
@@ -241,7 +242,7 @@ export default function PasswordReset() {
            )}
            <div
              className={`${
-                passwordErrorLowerCase ? 'text-gray-400' : 'text-gray-600'
+                passwordErrorLowerCase ? "text-gray-400" : "text-gray-600"
              } text-sm`}
            >
              1 lowercase character
@@ -258,7 +259,7 @@ export default function PasswordReset() {
            )}
            <div
              className={`${
-                passwordErrorNumber ? 'text-gray-400' : 'text-gray-600'
+                passwordErrorNumber ? "text-gray-400" : "text-gray-600"
              } text-sm`}
            >
              1 number
@@ -288,3 +289,5 @@ export default function PasswordReset() {
    </div>
  );
 }
+
+export const getServerSideProps = getTranslatedStaticProps([]);
@@ -1,15 +1,16 @@
-import React, { useState } from 'react';
-import Head from 'next/head';
-import Image from 'next/image';
-import Link from 'next/link';
+import React, { useState } from "react";
+import Head from "next/head";
+import Image from "next/image";
+import Link from "next/link";

-import Button from '~/components/basic/buttons/Button';
-import InputField from '~/components/basic/InputField';
+import Button from "~/components/basic/buttons/Button";
+import InputField from "~/components/basic/InputField";
+import { getTranslatedStaticProps } from "~/components/utilities/withTranslateProps";

-import SendEmailOnPasswordReset from './api/auth/SendEmailOnPasswordReset';
+import SendEmailOnPasswordReset from "./api/auth/SendEmailOnPasswordReset";

 export default function VerifyEmail() {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState("");
  const [step, setStep] = useState(1);

  /**
@@ -92,3 +93,5 @@ export default function VerifyEmail() {
    </div>
  );
 }
+
+export const getServerSideProps = getTranslatedStaticProps([]);