feat(frontend): setup next-translate package

frontend/i18n.js

@@ -0,0 +1,7 @@
+module.exports = {
+	locales: ["en-US", "ko-KR"],
+	defaultLocale: "en-US",
+	pages: {
+		"*": ["common"],
+	},
+};

frontend/locales/en-US/common.json

@@ -0,0 +1,3 @@
+{
+	"test": "test!!"
+}

frontend/locales/ko-KR/common.json

@@ -0,0 +1,3 @@
+{
+	"test": "테스트! !!!!!!!!"
+}

frontend/next.config.js

@@ -1,12 +1,17 @@
 // next.config.js
+const nextTranslate = require("next-translate");
 
 const ContentSecurityPolicy = `
 	default-src ${process.env.NEXT_PUBLIC_WEBSITE_URL};
-	script-src ${process.env.NEXT_PUBLIC_WEBSITE_URL} https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
+	script-src ${
+		process.env.NEXT_PUBLIC_WEBSITE_URL
+	} https://app.posthog.com https://infisical.com https://assets.calendly.com/ https://js.stripe.com https://api.stripe.com 'unsafe-inline' 'unsafe-eval';
 	style-src 'self' https://rsms.me 'unsafe-inline';
 	child-src https://infisical.com https://api.stripe.com;
 	frame-src https://js.stripe.com/ https://api.stripe.com;
-	connect-src ws://${process.env.NEXT_PUBLIC_WEBSITE_URL?.split('//')[1]} ${process.env.NEXT_PUBLIC_WEBSITE_URL} https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
+	connect-src ws://${process.env.NEXT_PUBLIC_WEBSITE_URL?.split("//")[1]} ${
+	process.env.NEXT_PUBLIC_WEBSITE_URL
+} https://api.github.com/repos/Infisical/infisical-cli https://api.heroku.com/ https://id.heroku.com/oauth/authorize https://id.heroku.com/oauth/token https://checkout.stripe.com https://app.posthog.com https://infisical.com https://api.stripe.com https://vitals.vercel-insights.com/v1/vitals;
 	img-src 'self' https://*.stripe.com https://i.ytimg.com/ data:;
 	media-src;
 	font-src 'self' https://maxcdn.bootstrapcdn.com https://rsms.me https://fonts.gstatic.com;  
@@ -49,8 +54,8 @@ const securityHeaders = [
 	},
 ];
 
-module.exports = {
+module.exports = nextTranslate({
-	output: 'standalone',
+	output: "standalone",
 	async headers() {
 		return [
 			{
@@ -60,4 +65,4 @@ module.exports = {
 			},
 		];
 	},
-};
+});

frontend/pages/login.js

@@ -12,6 +12,7 @@ import getWorkspaces from "./api/workspace/getWorkspaces";
 import attemptLogin from "../components/utilities/attemptLogin";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
+import useTranslation from "next-translate/useTranslation";
 
 export default function Login() {
 	const [email, setEmail] = useState("");
@@ -19,6 +20,7 @@ export default function Login() {
 	const [errorLogin, setErrorLogin] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
 	const router = useRouter();
+	const { t } = useTranslation("common");
 
 	useEffect(async () => {
 		let userWorkspace;
@@ -36,13 +38,18 @@ export default function Login() {
 	 */
 	const loginCheck = async () => {
 		setIsLoading(true);
-		await attemptLogin(email, password, setErrorLogin, router, false, true).then(
+		await attemptLogin(
-			() => {
+			email,
+			password,
+			setErrorLogin,
+			router,
+			false,
+			true
+		).then(() => {
 			setTimeout(function () {
 				setIsLoading(false);
 			}, 2000);
-			}
+		});
-		);
 	};
 
 	return (
@@ -69,7 +76,7 @@ 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
+					Log In {t("test")}
 				</p>
 				<div className="flex flex-row items-center justify-center">
 					<p className="text-md flex justify-center mt-2 text-gray-400">
@@ -122,11 +129,17 @@ export default function Login() {
           <p className="text-gray-400">I may have <Link href="/login"><u className="text-sky-500 cursor-pointer">forgotten my password.</u></Link></p>
         </div> */}
 			</div>
-			{false &&
+			{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"/>
+					<FontAwesomeIcon
-					We are experiencing minor technical difficulties. We are working on solving it right now. Please come back in a few minutes. 
+						icon={faWarning}
-				</div>}
+						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.
+				</div>
+			)}
 		</div>
 	);
 }