import { GetServerSidePropsContext } from "next"; import { signIn } from "next-auth/react"; import { useRouter } from "next/router"; import { FormProvider, SubmitHandler, useForm } from "react-hook-form"; import { asStringOrNull } from "@lib/asStringOrNull"; import { NEXT_PUBLIC_BASE_URL } from "@lib/config/constants"; import { useLocale } from "@lib/hooks/useLocale"; import prisma from "@lib/prisma"; import { isSAMLLoginEnabled } from "@lib/saml"; import { inferSSRProps } from "@lib/types/inferSSRProps"; import { EmailField, PasswordField, TextField } from "@components/form/fields"; import { HeadSeo } from "@components/seo/head-seo"; import { Alert } from "@components/ui/Alert"; import Button from "@components/ui/Button"; import { IS_GOOGLE_LOGIN_ENABLED } from "@server/lib/constants"; import { ssrInit } from "@server/lib/ssr"; type Props = inferSSRProps; type FormValues = { username: string; email: string; password: string; passwordcheck: string; apiError: string; }; export default function Signup({ email }: Props) { const { t } = useLocale(); const router = useRouter(); const methods = useForm(); const { register, formState: { errors, isSubmitting }, } = methods; methods.setValue("email", email); const handleErrors = async (resp: Response) => { if (!resp.ok) { const err = await resp.json(); throw new Error(err.message); } }; const signUp: SubmitHandler = async (data) => { await fetch("/api/auth/signup", { body: JSON.stringify({ ...data, }), headers: { "Content-Type": "application/json", }, method: "POST", }) .then(handleErrors) .then( async () => await signIn("Cal.com", { callbackUrl: (`${NEXT_PUBLIC_BASE_URL}/${router.query.callbackUrl}` || "") as string, }) ) .catch((err) => { methods.setError("apiError", { message: err.message }); }); }; return (

{t("create_your_account")}

{/* TODO: Refactor as soon as /availability is live */}
{errors.apiError && }
{process.env.NEXT_PUBLIC_APP_URL}/ } labelProps={{ className: "block text-sm font-medium text-gray-700" }} className="block w-full min-w-0 flex-grow rounded-none rounded-r-sm border-gray-300 lowercase focus:border-black focus:ring-black sm:text-sm" {...register("username")} required /> value === methods.watch("password") || (t("error_password_mismatch") as string), })} className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm" />
); } export const getServerSideProps = async (ctx: GetServerSidePropsContext) => { const ssr = await ssrInit(ctx); const token = asStringOrNull(ctx.query.token); if (!token) { return { notFound: true, }; } const verificationRequest = await prisma.verificationRequest.findUnique({ where: { token, }, }); // for now, disable if no verificationRequestToken given or token expired if (!verificationRequest || verificationRequest.expires < new Date()) { return { notFound: true, }; } const existingUser = await prisma.user.findFirst({ where: { AND: [ { email: verificationRequest.identifier, }, { emailVerified: { not: null, }, }, ], }, }); if (existingUser) { return { redirect: { permanent: false, destination: "/auth/login?callbackUrl=" + `${NEXT_PUBLIC_BASE_URL}/${ctx.query.callbackUrl}`, }, }; } return { props: { isGoogleLoginEnabled: IS_GOOGLE_LOGIN_ENABLED, isSAMLLoginEnabled, email: verificationRequest.identifier, trpcState: ssr.dehydrate(), }, }; };