diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index dc3c68058..0fab869eb 100644 --- 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: \ No newline at end of file + infisical-dev: diff --git a/frontend/locales/en-US/common.json b/frontend/locales/en-US/common.json index 5fa086df6..d6592fe7e 100644 --- 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": "We've sent a verification email to{{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 index 37d47e424..0967ef424 100644 --- 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 index 2a7f3f1ee..4f5d4f335 100644 --- 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 index dfc928e57..966774642 100644 --- a/frontend/pages/login.js +++ b/frontend/pages/login.js @@ -55,13 +55,13 @@ export default function Login() { return (
- Login + {t("meta.login.title")} - + @@ -76,25 +76,25 @@ export default function Login() {

- Log In {t("test")} + {t("auth.login")}

- Need an Infisical account? + {t("auth.need-account")}

)}
diff --git a/frontend/pages/signup.js b/frontend/pages/signup.js index 6f0f07f24..eed571b5b 100644 --- a/frontend/pages/signup.js +++ b/frontend/pages/signup.js @@ -19,6 +19,8 @@ import attemptLogin from "../components/utilities/attemptLogin"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCheck, faX, faWarning } from "@fortawesome/free-solid-svg-icons"; import issueBackupKey from "../components/utilities/issueBackupKey"; +import useTranslation from "next-translate/useTranslation"; +import Trans from "next-translate/Trans"; const ReactCodeInput = dynamic(import("react-code-input")); const nacl = require("tweetnacl"); @@ -73,7 +75,8 @@ export default function SignUp() { const [passwordErrorNumber, setPasswordErrorNumber] = useState(false); const [passwordErrorUpperCase, setPasswordErrorUpperCase] = useState(false); const [passwordErrorLowerCase, setPasswordErrorLowerCase] = useState(false); - const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] = useState(false); + const [passwordErrorSpecialChar, setPasswordErrorSpecialChar] = + useState(false); const [emailError, setEmailError] = useState(false); const [emailErrorMessage, setEmailErrorMessage] = useState(""); const [step, setStep] = useState(1); @@ -84,6 +87,8 @@ export default function SignUp() { const [verificationToken, setVerificationToken] = useState(); const [backupKeyIssued, setBackupKeyIssued] = useState(false); + const { t } = useTranslation("common"); + useEffect(async () => { let userWorkspace; try { @@ -108,7 +113,7 @@ export default function SignUp() { // Checking if the code matches the email. const response = await checkEmailVerificationCode(email, code); if (response.status == "200" || code == "111222") { - setVerificationToken((await response.json()).token) + setVerificationToken((await response.json()).token); setStep(3); } else { setCodeError(true); @@ -180,7 +185,14 @@ export default function SignUp() { const { ciphertext, iv, tag } = Aes256Gcm.encrypt( PRIVATE_KEY, - password.slice(0, 32).padStart(32 + (password.slice(0, 32).length - new Blob([password]).size), "0") + password + .slice(0, 32) + .padStart( + 32 + + (password.slice(0, 32).length - + new Blob([password]).size), + "0" + ) ); localStorage.setItem("PRIVATE_KEY", PRIVATE_KEY); @@ -191,19 +203,21 @@ export default function SignUp() { }, async () => { client.createVerifier(async (err, result) => { - const response = await completeAccountInformationSignup({ - email, - firstName, - lastName, - organizationName: firstName + "'s organization", - publicKey: PUBLIC_KEY, - ciphertext, - iv, - tag, - salt: result.salt, - verifier: result.verifier, - token: verificationToken - }); + const response = await completeAccountInformationSignup( + { + email, + firstName, + lastName, + organizationName: firstName + "'s organization", + publicKey: PUBLIC_KEY, + ciphertext, + iv, + tag, + salt: result.salt, + verifier: result.verifier, + token: verificationToken, + } + ); // if everything works, go the main dashboard page. if (!errorCheck && response.status == "200") { @@ -243,20 +257,20 @@ export default function SignUp() { const step1 = (

- Let's get started + {t("auth.step1-start")}

-
@@ -285,12 +303,19 @@ export default function SignUp() { // Step 2 of the signup process (enter the email verification code) const step2 = (
-

- We've sent a verification email to{" "} -

-

- {email}{" "} -

+ + ), + email: ( +

+ ), + }} + values={{ email }} + /> +

- {codeError && ( - - )} + {codeError && }
-
{/* @@ -324,7 +351,7 @@ export default function SignUp() { */}

- Make sure to check your spam inbox. + {t("auth.step2-spam-alert")}

@@ -334,33 +361,37 @@ export default function SignUp() { const step3 = (

- Almost there! + {t("auth.step3-message")}

{ setPassword(password); passwordCheck( @@ -374,61 +405,128 @@ export default function SignUp() { type="password" value={password} isRequired - error={passwordErrorLength && passwordErrorNumber && passwordErrorLowerCase} + error={ + passwordErrorLength && + passwordErrorNumber && + passwordErrorLowerCase + } /> - {(passwordErrorLength || passwordErrorLowerCase || passwordErrorNumber) ?
-
Password should contain at least:
-
- {passwordErrorLength - ? - : } -
14 characters
+ {passwordErrorLength || + passwordErrorLowerCase || + passwordErrorNumber ? ( +
+
+ {t("password-validate")} +
+
+ {passwordErrorLength ? ( + + ) : ( + + )} +
+ {t("password-validate-length")} +
+
+
+ {passwordErrorLowerCase ? ( + + ) : ( + + )} +
+ {t("password-validate-case")} +
+
+
+ {passwordErrorNumber ? ( + + ) : ( + + )} +
+ {t("password-validate-number")} +
+
-
- {passwordErrorLowerCase - ? - : } -
1 lowercase character
-
-
- {passwordErrorNumber - ? - : } -
1 number
-
-
:
} + ) : ( +
+ )}
-
); - // Step 4 of the sign up process (download the emergency kit pdf) const step4 = (

- Save your Emergency Kit + {t("auth.step4-message")}

-
If you get locked out of your account, your Emergency Kit is the only way to sign in.
-
We recommend you download it and keep it somewhere safe.
+
{t("auth.step4-description1")}
+
{t("auth.step4-description2")}
- - It contains your Secret Key which we cannot access or recover for you if you lose it. + + {t("auth.step4-description3")}
-
); diff --git a/frontend/yarn.lock b/frontend/yarn.lock index ee806392b..11af0ee60 100644 --- a/frontend/yarn.lock +++ b/frontend/yarn.lock @@ -1791,6 +1791,11 @@ nanoid@^3.3.4: resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz" integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== +next-translate@^1.6.0: + version "1.6.0" + resolved "https://registry.yarnpkg.com/next-translate/-/next-translate-1.6.0.tgz#28329d9970030c573c529a1a6d5c6b4e75146164" + integrity sha512-rmRBYOwPHvokN+5uH3O/SZqfRUVORLkgt/097mSaq3+CWcEtXEjkVrfBZpYwZ8W3og4QVd+uphYX//qegnIbRg== + next@^12.2.5: version "12.3.1" resolved "https://registry.npmjs.org/next/-/next-12.3.1.tgz"