diff --git a/apps/web/src/components/auth/login-form.tsx b/apps/web/src/components/auth/auth-forms.tsx similarity index 94% rename from apps/web/src/components/auth/login-form.tsx rename to apps/web/src/components/auth/auth-forms.tsx index b43bab6be..a04e09f88 100644 --- a/apps/web/src/components/auth/login-form.tsx +++ b/apps/web/src/components/auth/auth-forms.tsx @@ -1,16 +1,18 @@ import { trpc } from "@rallly/backend"; -import { ArrowRightIcon } from "@rallly/icons"; import { Button } from "@rallly/ui/button"; import Link from "next/link"; import { Trans, useTranslation } from "next-i18next"; import React from "react"; import { useForm } from "react-hook-form"; +import { createGlobalState } from "react-use"; import { usePostHog } from "@/utils/posthog"; import { requiredString, validEmail } from "../../utils/form-validation"; import { TextInput } from "../text-input"; +export const useDefaultEmail = createGlobalState(""); + const VerifyCode: React.FunctionComponent<{ email: string; onSubmit: (code: string) => Promise; @@ -130,12 +132,12 @@ type RegisterFormData = { export const RegisterForm: React.FunctionComponent<{ onClickLogin?: React.MouseEventHandler; onRegistered?: () => void; - defaultValues?: Partial; -}> = ({ onClickLogin, onRegistered, defaultValues }) => { +}> = ({ onClickLogin, onRegistered }) => { + const [defaultEmail, setDefaultEmail] = useDefaultEmail(); const { t } = useTranslation(); const { register, handleSubmit, getValues, setError, formState } = useForm({ - defaultValues, + defaultValues: { email: defaultEmail }, }); const queryClient = trpc.useContext(); const requestRegistration = trpc.auth.requestRegistration.useMutation(); @@ -266,7 +268,10 @@ export const RegisterForm: React.FunctionComponent<{ { + setDefaultEmail(getValues("email")); + onClickLogin?.(e); + }} /> ), }} @@ -284,9 +289,13 @@ export const LoginForm: React.FunctionComponent<{ onAuthenticated?: () => void; }> = ({ onAuthenticated, onClickRegister }) => { const { t } = useTranslation(); + const [defaultEmail, setDefaultEmail] = useDefaultEmail(); + const { register, handleSubmit, getValues, formState, setError } = useForm<{ email: string; - }>(); + }>({ + defaultValues: { email: defaultEmail }, + }); const requestLogin = trpc.auth.requestLogin.useMutation(); const authenticateLogin = trpc.auth.authenticateLogin.useMutation(); @@ -294,6 +303,7 @@ export const LoginForm: React.FunctionComponent<{ const queryClient = trpc.useContext(); const [token, setToken] = React.useState(); const posthog = usePostHog(); + if (token) { return ( { - onClickRegister?.(e, getValues("email")); + React.startTransition(() => { + setDefaultEmail(getValues("email")); + onClickRegister?.(e, getValues("email")); + }); }} > {t("createAnAccount")} - diff --git a/apps/web/src/pages/login.tsx b/apps/web/src/pages/login.tsx index d6ea5ad06..30aa04cac 100644 --- a/apps/web/src/pages/login.tsx +++ b/apps/web/src/pages/login.tsx @@ -4,8 +4,8 @@ import { useRouter } from "next/router"; import { useTranslation } from "next-i18next"; import React from "react"; +import { LoginForm } from "@/components/auth/auth-forms"; import { AuthLayout } from "@/components/auth/auth-layout"; -import { LoginForm } from "@/components/auth/login-form"; import { StandardLayout } from "@/components/layouts/standard-layout"; import { PageDialog } from "@/components/page-dialog"; import { useWhoAmI } from "@/contexts/whoami"; diff --git a/apps/web/src/pages/register.tsx b/apps/web/src/pages/register.tsx index 5a4eeb5f7..fc4e6d9ce 100644 --- a/apps/web/src/pages/register.tsx +++ b/apps/web/src/pages/register.tsx @@ -5,8 +5,8 @@ import { useTranslation } from "next-i18next"; import { StandardLayout } from "@/components/layouts/standard-layout"; import { NextPageWithLayout } from "@/types"; +import { RegisterForm } from "../components/auth/auth-forms"; import { AuthLayout } from "../components/auth/auth-layout"; -import { RegisterForm } from "../components/auth/login-form"; import { getStaticTranslations } from "../utils/with-page-translations"; const Page: NextPageWithLayout = () => {