From 991e4b7bc6e2a4d6c7e113e4a64e3c4246ef82b6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EA=B0=95=EC=A4=80?= Date: Mon, 26 Dec 2022 22:14:42 +0900 Subject: [PATCH] chore(frontend): update some files about translate --- .../basic/dialog/AddIncidentContactDialog.js | 4 +- .../basic/dialog/AddProjectMemberDialog.js | 3 +- frontend/pages/login.tsx | 88 ++++++++++++------- frontend/pages/password-reset.tsx | 75 ++++++++-------- frontend/pages/verify-email.tsx | 19 ++-- frontend/public/locales/en/section-token.json | 22 ++--- 6 files changed, 119 insertions(+), 92 deletions(-) diff --git a/frontend/components/basic/dialog/AddIncidentContactDialog.js b/frontend/components/basic/dialog/AddIncidentContactDialog.js index d4929720f2..535004045d 100644 --- a/frontend/components/basic/dialog/AddIncidentContactDialog.js +++ b/frontend/components/basic/dialog/AddIncidentContactDialog.js @@ -1,5 +1,5 @@ import { Fragment, useState } from "react"; -import useTranslate from "next-translate/useTranslation"; +import { useTranslation } from "next-i18next"; import { Dialog, Transition } from "@headlessui/react"; import addIncidentContact from "~/pages/api/organization/addIncidentContact"; @@ -15,7 +15,7 @@ const AddIncidentContactDialog = ({ setIncidentContacts, }) => { let [incidentContactEmail, setIncidentContactEmail] = useState(""); - const { t } = useTranslate(); + const { t } = useTranslation(); const submit = () => { setIncidentContacts( diff --git a/frontend/components/basic/dialog/AddProjectMemberDialog.js b/frontend/components/basic/dialog/AddProjectMemberDialog.js index 13e39baff5..e8dd610de6 100644 --- a/frontend/components/basic/dialog/AddProjectMemberDialog.js +++ b/frontend/components/basic/dialog/AddProjectMemberDialog.js @@ -1,7 +1,6 @@ import { Fragment, useState } from "react"; import { useRouter } from "next/router"; -import Trans from "next-translate/Trans"; -import { useTranslation } from "next-i18next"; +import { Trans, useTranslation } from "next-i18next"; import { Dialog, Transition } from "@headlessui/react"; import Button from "../buttons/Button"; diff --git a/frontend/pages/login.tsx b/frontend/pages/login.tsx index 036902de00..252aeb7159 100644 --- a/frontend/pages/login.tsx +++ b/frontend/pages/login.tsx @@ -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 (
- Login + {t("common:head-title", { title: t("login:title") })} - - + +
@@ -80,15 +87,16 @@ export default function Login() {
setErrorLogin(false)} onSubmit={(e) => e.preventDefault()} + onChange={() => setErrorLogin(false)} + onSubmit={(e) => e.preventDefault()} >

- Log in to your account + {t("login:login-to")}

Forgot password?
- {!isLoading && errorLogin && } + {!isLoading && errorLogin && ( + + )}
)}

- Need an Infisical account? + {t("login:need-account")}

+
+
+ +
+
); } + +export const getStaticProps = getTranslatedStaticProps(["auth", "login"]); diff --git a/frontend/pages/password-reset.tsx b/frontend/pages/password-reset.tsx index a09b85ab08..0bf3f609ae 100644 --- a/frontend/pages/password-reset.tsx +++ b/frontend/pages/password-reset.tsx @@ -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() { )}
14 characters @@ -241,7 +242,7 @@ export default function PasswordReset() { )}
1 lowercase character @@ -258,7 +259,7 @@ export default function PasswordReset() { )}
1 number @@ -288,3 +289,5 @@ export default function PasswordReset() {
); } + +export const getServerSideProps = getTranslatedStaticProps([]); diff --git a/frontend/pages/verify-email.tsx b/frontend/pages/verify-email.tsx index 7dfc1427eb..f063f05392 100644 --- a/frontend/pages/verify-email.tsx +++ b/frontend/pages/verify-email.tsx @@ -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() {
); } + +export const getServerSideProps = getTranslatedStaticProps([]); diff --git a/frontend/public/locales/en/section-token.json b/frontend/public/locales/en/section-token.json index 03e4b14594..d12bd202c1 100644 --- a/frontend/public/locales/en/section-token.json +++ b/frontend/public/locales/en/section-token.json @@ -1,13 +1,13 @@ { - "title": "Project Settings", - "description": "These settings only apply to the currently selected Project.", - "danger-zone": "Danger Zone", - "delete-project": "Delete Project", - "project-to-delete": "Project to be Deleted", - "danger-zone-note": "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.", - "delete-project-note": "Note: You can only delete a project in case you have more than one", - "project-id-description": "To integrate Infisical into your code base and get automatic injection of environmental variables, you should use the following Project ID.", - "project-id-description2": "For more guidance, including code snipets for various languages and frameworks, see ", - "auto-generated": "This is your project's auto-generated unique identifier. It can't be changed.", - "docs": "Infisical Docs" + "service-tokens": "Service Tokens", + "service-tokens-description": "Every service token is specific to you, a certain project and a certain environment within this project.", + "add-new": "Add New Token", + "add-dialog": { + "title": "Add a service token for {{target}}", + "description": "Specify the name, environment, and expiry period. When a token is generated, you will only be able to see it once before it disappears. Make sure to save it somewhere.", + "name": "Service Token Name", + "add": "Add Service Token", + "copy-service-token": "Copy your service token", + "copy-service-token-description": "Once you close this popup, you will never see your service token again" + } }