110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
/* eslint-disable @next/next/no-img-element */
|
|
import {ToastContainer} from "react-toastify";
|
|
import {useState} from "react";
|
|
import Head from "next/head";
|
|
import useUser from "@/hooks/useUser";
|
|
import Link from "next/link";
|
|
import clsx from "clsx";
|
|
import {Tab} from "@headlessui/react";
|
|
import RegisterIndividual from "./(register)/RegisterIndividual";
|
|
import RegisterCorporate from "./(register)/RegisterCorporate";
|
|
import EmailVerification from "./(auth)/EmailVerification";
|
|
import {sendEmailVerification} from "@/utils/email";
|
|
|
|
export const getServerSideProps = (context: any) => {
|
|
const {code} = context.query;
|
|
|
|
return {
|
|
props: {code: code || null},
|
|
};
|
|
};
|
|
|
|
export default function Register({code: queryCode}: {code: string}) {
|
|
const [isLoading, setIsLoading] = useState(false);
|
|
|
|
const {user, mutateUser} = useUser({
|
|
redirectTo: "/",
|
|
redirectIfFound: true,
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Register | EnCoach</title>
|
|
<meta name="description" content="Generated by create next app" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<link rel="icon" href="/favicon.ico" />
|
|
</Head>
|
|
<main className="w-full h-[100vh] flex bg-white text-black">
|
|
<ToastContainer />
|
|
<section className="h-full w-fit min-w-fit relative hidden lg:flex">
|
|
<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
|
|
<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
|
|
</section>
|
|
<section className="h-full w-full flex flex-col items-center justify-center gap-4">
|
|
<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
|
|
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
|
|
<h1 className="font-bold text-2xl lg:text-4xl">Create new account</h1>
|
|
</div>
|
|
{!user && (
|
|
<>
|
|
<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-2/3">
|
|
<Tab.Group>
|
|
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
|
|
<Tab
|
|
className={({selected}) =>
|
|
clsx(
|
|
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
|
|
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
|
|
"transition duration-300 ease-in-out",
|
|
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
|
|
)
|
|
}>
|
|
Individual
|
|
</Tab>
|
|
<Tab
|
|
className={({selected}) =>
|
|
clsx(
|
|
"w-full rounded-lg py-2.5 text-sm font-medium leading-5 text-mti-purple-light",
|
|
"ring-white ring-opacity-60 ring-offset-2 ring-offset-mti-purple-light focus:outline-none focus:ring-2",
|
|
"transition duration-300 ease-in-out",
|
|
selected ? "bg-white shadow" : "text-blue-100 hover:bg-white/[0.12] hover:text-mti-purple-dark",
|
|
)
|
|
}>
|
|
Corporate
|
|
</Tab>
|
|
</Tab.List>
|
|
|
|
<Tab.Panels>
|
|
<Tab.Panel>
|
|
<RegisterIndividual
|
|
isLoading={isLoading}
|
|
setIsLoading={setIsLoading}
|
|
mutateUser={mutateUser}
|
|
sendEmailVerification={sendEmailVerification}
|
|
queryCode={queryCode}
|
|
/>
|
|
</Tab.Panel>
|
|
<Tab.Panel>
|
|
<RegisterCorporate
|
|
isLoading={isLoading}
|
|
setIsLoading={setIsLoading}
|
|
mutateUser={mutateUser}
|
|
sendEmailVerification={sendEmailVerification}
|
|
/>
|
|
</Tab.Panel>
|
|
</Tab.Panels>
|
|
</Tab.Group>
|
|
</div>
|
|
<Link className="text-mti-purple-light text-sm font-normal" href="/login">
|
|
Sign in instead
|
|
</Link>
|
|
</>
|
|
)}
|
|
{user && !user.isVerified && <EmailVerification user={user} isLoading={isLoading} setIsLoading={setIsLoading} />}
|
|
</section>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|