translate(frontend): add login, signup page translate

Infisical · Nov 27, 2022 · 8dfcc1f · 8dfcc1f
1 parent 1b0e5d3
commit 8dfcc1f
Show file tree

Hide file tree

Showing 7 changed files with 242 additions and 95 deletions.
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -49,6 +49,7 @@ services:
       - ./frontend/public:/app/public
       - ./frontend/styles:/app/styles
       - ./frontend/components:/app/components
+      - ./frontend/locales:/app/locales
     env_file: .env
     environment:
       - NEXT_PUBLIC_ENV=development
@@ -91,4 +92,4 @@ volumes:
     driver: local
 
 networks:
-  infisical-dev:
+  infisical-dev:
diff --git a/frontend/locales/en-US/common.json b/frontend/locales/en-US/common.json
@@ -1,3 +1,45 @@
 {
-	"test": "test!!"
+	"meta": {
+		"login": {
+			"title": "Login | Infiscal",
+			"og-title": "Log In to Infisical",
+			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
+		},
+		"signup": {
+			"title": "Sign Up | Infiscal",
+			"og-title": "Replace .env files with 1 line of code. Sign Up for Infisical in 3 minutes.",
+			"og-description": "Infisical a simple end-to-end encrypted platform that enables teams to sync and manage API-keys and environemntal variables.  Works with Node.js, Next.js, Gatsby, Nest.js..."
+		}
+	},
+	"email": "Email",
+	"password": "Password",
+	"verify": "Verify",
+	"first-name": "First Name",
+	"last-name": "Last Name",
+	"validate-required": "Please input your {{name}}",
+	"password-validate": "Password should contain at least:",
+	"password-validate-length": "14 characters",
+	"password-validate-case": "1 lowercase character",
+	"password-validate-number": "1 number",
+	"auth": {
+		"login": "Log In",
+		"signup": "Sign Up",
+		"need-account": "Need an Infisical account?",
+		"create-account": "Create an account",
+		"already-have-account": "Have an account? Log in",
+		"forgot-password": "Forgot your password?",
+		"step1-start": "Let's get started",
+		"step1-privacy": "By creating an account, you agree to our Terms and have read and acknowledged the Privacy Policy.",
+		"step1-submit": "Get Started",
+		"step2-message": "<wrapper>We've sent a verification email to</wrapper><email>{{email}}</email>",
+		"step2-code-error": "Oops. Your code is wrong. Please try again.",
+		"step2-spam-alert": "Make sure to check your spam inbox.",
+		"step3-message": "Almost there!",
+		"step4-message": "Save your Emergency Kit",
+		"step4-description1": "If you get locked out of your account, your Emergency Kit is the only way to sign in.",
+		"step4-description2": "We recommend you download it and keep it somewhere safe.",
+		"step4-description3": "It contains your Secret Key which we cannot access or recover for you if you lose it.",
+		"step4-download": "Download PDF"
+	},
+	"maintenance-alert": "We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes."
 }
diff --git a/frontend/locales/ko-KR/common.json b/frontend/locales/ko-KR/common.json
@@ -1,3 +1 @@
-{
-	"test": "테스트! !!!!!!!!"
-}
+{}
diff --git a/frontend/package.json b/frontend/package.json
@@ -33,6 +33,7 @@
 		"jsrp": "^0.2.4",
 		"markdown-it": "^13.0.1",
 		"next": "^12.2.5",
+		"next-translate": "^1.6.0",
 		"posthog-js": "^1.34.0",
 		"query-string": "^7.1.1",
 		"react": "^17.0.2",

diff --git a/frontend/pages/login.js b/frontend/pages/login.js
@@ -55,13 +55,13 @@ 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("meta.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 property="og:title" content={t("meta.login.og-title")} />
 				<meta
 					name="og:description"
-					content="Infisical a simple end-to-end encrypted platform that enables teams to sync and manage their .env files."
+					content={t("meta.login.og-description")}
 				/>
 			</Head>
 			<Link href="/">
@@ -76,25 +76,25 @@ export default function Login() {
 			</Link>
 			<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-4xl flex justify-center font-semibold text-transparent bg-clip-text bg-gradient-to-br from-sky-400 to-primary">
-					Log In {t("test")}
+					{t("auth.login")}
 				</p>
 				<div className="flex flex-row items-center justify-center">
 					<p className="text-md flex justify-center mt-2 text-gray-400">
-						Need an Infisical account?
+						{t("auth.need-account")}
 					</p>
 				</div>
 				<div className="flex flex-col items-center justify-center w-full md:pb-4 max-h-24 max-w-md mx-auto">
 					<Link href="/signup">
 						<button className="w-full pb-3 hover:opacity-90 duration-200">
 							<u className="font-normal text-md text-sky-500">
-								Create an account
+								{t("auth.create-account")}
 							</u>
 						</button>
 					</Link>
 				</div>
 				<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("email")}
 						onChangeHandler={setEmail}
 						type="email"
 						value={email}
@@ -104,7 +104,7 @@ export default function Login() {
 				</div>
 				<div className="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("password")}
 						onChangeHandler={setPassword}
 						type="password"
 						value={password}
@@ -118,7 +118,7 @@ export default function Login() {
 				<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
-							text="Log In"
+							text={t("login")}
 							onButtonPressed={loginCheck}
 							loading={isLoading}
 							size="lg"
@@ -135,9 +135,8 @@ export default function Login() {
 						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("maintenance-alert")}
 				</div>
 			)}
 		</div>