Skip to content

Commit

Permalink
feat(frontend): add change language button in login page
Browse files Browse the repository at this point in the history
  • Loading branch information
@gangjun06
gangjun06 committed Dec 2, 2022
1 parent 6cebe17 commit 4c94ddd
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 52 deletions.
112 changes: 64 additions & 48 deletions frontend/pages/login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ 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";

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";
Expand All @@ -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;
Expand Down Expand Up @@ -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>
<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="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>
{/* <div className="flex items-center justify-center w-full md:p-2 rounded-lg max-h-24 md:max-h-28">
<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="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>

{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" />
Expand Down
4 changes: 0 additions & 4 deletions frontend/pages/settings/personal/[id].js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

0 comments on commit 4c94ddd

Please sign in to comment.