91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { FadeIn } from "@/components/landing/fade-in";
|
|
import Link from "next/link";
|
|
import * as React from "react";
|
|
import { ErrorBanner, WarnBanner } from "../../banners";
|
|
import { EmailCode } from "../email-code";
|
|
import { MixSignIn } from "../mix-signin";
|
|
import { OAuthSignIn } from "../oauth-signin";
|
|
import toast from "react-hot-toast";
|
|
import initTranslations from "@/app/i18n";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
|
|
export default function SignInPage({ params: { locale } }: { params: { locale: string } }) {
|
|
|
|
const { t } = useTranslation();
|
|
|
|
const [verify, setVerify] = React.useState(false);
|
|
const [accountNotFound, setAccountNotFound] = React.useState(false);
|
|
const [error, setError] = React.useState<string | null>(null);
|
|
const [username, setUsername] = React.useState("");
|
|
const [password, setPassword] = React.useState("");
|
|
|
|
return (
|
|
<div className="flex flex-col gap-10">
|
|
{accountNotFound ? (
|
|
<WarnBanner>
|
|
<div className="flex items-center justify-between w-full gap-2">
|
|
<p className="text-xs">{t("auth.account_not_found")}</p>
|
|
|
|
<Link href={`/auth/sign-up?email=${encodeURIComponent(username)}`}>
|
|
<div className="border text-center text-xs border-transparent hover:border-[#FFD55D]/50 text-[#FFD55D] duration-200 p-1 rounded-lg ">
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
</WarnBanner>
|
|
) : null}
|
|
|
|
{error ? <ErrorBanner>{error}</ErrorBanner> : null}
|
|
|
|
{verify ? (
|
|
<FadeIn>
|
|
<EmailCode setError={setError} />
|
|
</FadeIn>
|
|
) : (
|
|
<>
|
|
<div className="flex flex-col ">
|
|
<h1 className="text-4xl text-black">{t("login")}</h1>
|
|
</div>
|
|
<div className="grid w-full gap-6">
|
|
<div className="w-full">
|
|
<MixSignIn
|
|
setError={setError}
|
|
verification={setVerify}
|
|
setAccountNotFound={setAccountNotFound}
|
|
username={setUsername}
|
|
// password={setPassword}
|
|
usernameValue={username}
|
|
passwordValue={password}
|
|
/>
|
|
<p className="mt-4 text-left text-sm text-md text-black/50 ">
|
|
<Link href="/auth/sign-up" className="ml-2 underline text-black hover:underline" onClick={(e) => {
|
|
e.preventDefault();
|
|
toast.success('coming soon')
|
|
}}>
|
|
{t("auth.frogot_password")}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
|
|
{/* <OAuthSignIn /> */}
|
|
<div className="relative">
|
|
<div className="absolute inset-0 flex items-center">
|
|
<span className="w-full border-t border-black/20" />
|
|
</div>
|
|
<div className="relative flex justify-center text-sm">
|
|
<span className="px-4 bg-white text-black/90"> {t("auth.or")} </span>
|
|
</div>
|
|
</div>
|
|
|
|
<Link href="/auth/sign-up" className="h-10 leading-10 ml-2 text-center border border-black text-black ">
|
|
{t("auth.creat_account")}
|
|
</Link>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|