From 4c94ddd1b2635143ef93c941962c2bd29dfdd828 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EA=B0=95=EC=A4=80?= <me@gangjun.dev>
Date: Fri, 2 Dec 2022 21:14:28 +0900
Subject: [PATCH] feat(frontend): add change language button in login page

---
 frontend/pages/login.js                  | 112 +++++++++++++----------
 frontend/pages/settings/personal/[id].js |   4 -
 2 files changed, 64 insertions(+), 52 deletions(-)

diff --git a/frontend/pages/login.js b/frontend/pages/login.js
index 24f8d9e75..c626a0370 100644
--- a/frontend/pages/login.js
+++ b/frontend/pages/login.js
@@ -3,6 +3,7 @@ import Head from "next/head";
 import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
+import setLanguage from "next-translate/setLanguage";
 import useTranslation from "next-translate/useTranslation";
 import { faWarning } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -10,6 +11,7 @@ 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 ListBox from "~/components/basic/Listbox";
 import attemptLogin from "~/utilities/attemptLogin";
 
 import getWorkspaces from "./api/workspace/getWorkspaces";
@@ -20,7 +22,7 @@ export default function Login() {
   const [errorLogin, setErrorLogin] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
   const router = useRouter();
-  const { t } = useTranslation("");
+  const { t, lang } = useTranslation("");
 
   useEffect(async () => {
     let userWorkspace;
@@ -71,59 +73,73 @@ export default function Login() {
           />
         </div>
       </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">
-          {t("login:login")}
-        </p>
-        <div className="flex flex-row items-center justify-center">
-          <p className="text-md flex justify-center mt-2 text-gray-400">
-            {t("login:need-account")}
+      <div className="w-full max-w-md mx-auto">
+        <div className="bg-bunker w-full 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">
+            {t("login:login")}
           </p>
+          <div className="flex flex-row items-center justify-center">
+            <p className="text-md flex justify-center mt-2 text-gray-400">
+              {t("login: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">
+                  {t("login: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={t("common:email")}
+              onChangeHandler={setEmail}
+              type="email"
+              value={email}
+              placeholder=""
+              isRequired
+            />
+          </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={t("common:password")}
+              onChangeHandler={setPassword}
+              type="password"
+              value={password}
+              placeholder=""
+              isRequired
+            />
+          </div>
+          {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
+                text={t("login:login")}
+                onButtonPressed={loginCheck}
+                loading={isLoading}
+                size="lg"
+              />
+            </div>
+          </div>
+          {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
+          <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>
-        <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">
-                {t("login: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={t("common:email")}
-            onChangeHandler={setEmail}
-            type="email"
-            value={email}
-            placeholder=""
-            isRequired
-          />
-        </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={t("common:password")}
-            onChangeHandler={setPassword}
-            type="password"
-            value={password}
-            placeholder=""
-            isRequired
-          />
-        </div>
-        {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
-              text={t("login:login")}
-              onButtonPressed={loginCheck}
-              loading={isLoading}
-              size="lg"
+        <div className="mt-4 flex items-center justify-center w-full">
+          <div className="w-1/2 ">
+            <ListBox
+              selected={lang}
+              onChange={setLanguage}
+              data={["en-US", "ko-KR"]}
+              width="full"
+              text={`${t("common:language")}: `}
             />
           </div>
         </div>
-        {/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
-          <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 && (
         <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" />
diff --git a/frontend/pages/settings/personal/[id].js b/frontend/pages/settings/personal/[id].js
index 15604aed3..35c924803 100644
--- a/frontend/pages/settings/personal/[id].js
+++ b/frontend/pages/settings/personal/[id].js
@@ -31,10 +31,6 @@ export default function PersonalSettings() {
 
   const { t, lang } = useTranslation();
 
-  const changeLanguage = useCallback((code) => {
-    setLanguage(code);
-  }, []);
-
   useEffect(async () => {
     let user = await getUser();
     setPersonalEmail(user.email);