Use global state to share email between auth pages

This commit is contained in:
Luke Vella 2023-08-09 16:37:00 +01:00
parent b9ca609236
commit c07600aeb1
3 changed files with 22 additions and 10 deletions

View file

@ -1,16 +1,18 @@
import { trpc } from "@rallly/backend"; import { trpc } from "@rallly/backend";
import { ArrowRightIcon } from "@rallly/icons";
import { Button } from "@rallly/ui/button"; import { Button } from "@rallly/ui/button";
import Link from "next/link"; import Link from "next/link";
import { Trans, useTranslation } from "next-i18next"; import { Trans, useTranslation } from "next-i18next";
import React from "react"; import React from "react";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { createGlobalState } from "react-use";
import { usePostHog } from "@/utils/posthog"; import { usePostHog } from "@/utils/posthog";
import { requiredString, validEmail } from "../../utils/form-validation"; import { requiredString, validEmail } from "../../utils/form-validation";
import { TextInput } from "../text-input"; import { TextInput } from "../text-input";
export const useDefaultEmail = createGlobalState("");
const VerifyCode: React.FunctionComponent<{ const VerifyCode: React.FunctionComponent<{
email: string; email: string;
onSubmit: (code: string) => Promise<void>; onSubmit: (code: string) => Promise<void>;
@ -130,12 +132,12 @@ type RegisterFormData = {
export const RegisterForm: React.FunctionComponent<{ export const RegisterForm: React.FunctionComponent<{
onClickLogin?: React.MouseEventHandler; onClickLogin?: React.MouseEventHandler;
onRegistered?: () => void; onRegistered?: () => void;
defaultValues?: Partial<RegisterFormData>; }> = ({ onClickLogin, onRegistered }) => {
}> = ({ onClickLogin, onRegistered, defaultValues }) => { const [defaultEmail, setDefaultEmail] = useDefaultEmail();
const { t } = useTranslation(); const { t } = useTranslation();
const { register, handleSubmit, getValues, setError, formState } = const { register, handleSubmit, getValues, setError, formState } =
useForm<RegisterFormData>({ useForm<RegisterFormData>({
defaultValues, defaultValues: { email: defaultEmail },
}); });
const queryClient = trpc.useContext(); const queryClient = trpc.useContext();
const requestRegistration = trpc.auth.requestRegistration.useMutation(); const requestRegistration = trpc.auth.requestRegistration.useMutation();
@ -266,7 +268,10 @@ export const RegisterForm: React.FunctionComponent<{
<Link <Link
href="/login" href="/login"
className="text-link" className="text-link"
onClick={onClickLogin} onClick={(e) => {
setDefaultEmail(getValues("email"));
onClickLogin?.(e);
}}
/> />
), ),
}} }}
@ -284,9 +289,13 @@ export const LoginForm: React.FunctionComponent<{
onAuthenticated?: () => void; onAuthenticated?: () => void;
}> = ({ onAuthenticated, onClickRegister }) => { }> = ({ onAuthenticated, onClickRegister }) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [defaultEmail, setDefaultEmail] = useDefaultEmail();
const { register, handleSubmit, getValues, formState, setError } = useForm<{ const { register, handleSubmit, getValues, formState, setError } = useForm<{
email: string; email: string;
}>(); }>({
defaultValues: { email: defaultEmail },
});
const requestLogin = trpc.auth.requestLogin.useMutation(); const requestLogin = trpc.auth.requestLogin.useMutation();
const authenticateLogin = trpc.auth.authenticateLogin.useMutation(); const authenticateLogin = trpc.auth.authenticateLogin.useMutation();
@ -294,6 +303,7 @@ export const LoginForm: React.FunctionComponent<{
const queryClient = trpc.useContext(); const queryClient = trpc.useContext();
const [token, setToken] = React.useState<string>(); const [token, setToken] = React.useState<string>();
const posthog = usePostHog(); const posthog = usePostHog();
if (token) { if (token) {
return ( return (
<VerifyCode <VerifyCode
@ -410,11 +420,13 @@ export const LoginForm: React.FunctionComponent<{
<Link <Link
href="/register" href="/register"
onClick={(e) => { onClick={(e) => {
onClickRegister?.(e, getValues("email")); React.startTransition(() => {
setDefaultEmail(getValues("email"));
onClickRegister?.(e, getValues("email"));
});
}} }}
> >
{t("createAnAccount")} {t("createAnAccount")}
<ArrowRightIcon className="h-4 w-4" />
</Link> </Link>
</Button> </Button>
</div> </div>

View file

@ -4,8 +4,8 @@ import { useRouter } from "next/router";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import React from "react"; import React from "react";
import { LoginForm } from "@/components/auth/auth-forms";
import { AuthLayout } from "@/components/auth/auth-layout"; import { AuthLayout } from "@/components/auth/auth-layout";
import { LoginForm } from "@/components/auth/login-form";
import { StandardLayout } from "@/components/layouts/standard-layout"; import { StandardLayout } from "@/components/layouts/standard-layout";
import { PageDialog } from "@/components/page-dialog"; import { PageDialog } from "@/components/page-dialog";
import { useWhoAmI } from "@/contexts/whoami"; import { useWhoAmI } from "@/contexts/whoami";

View file

@ -5,8 +5,8 @@ import { useTranslation } from "next-i18next";
import { StandardLayout } from "@/components/layouts/standard-layout"; import { StandardLayout } from "@/components/layouts/standard-layout";
import { NextPageWithLayout } from "@/types"; import { NextPageWithLayout } from "@/types";
import { RegisterForm } from "../components/auth/auth-forms";
import { AuthLayout } from "../components/auth/auth-layout"; import { AuthLayout } from "../components/auth/auth-layout";
import { RegisterForm } from "../components/auth/login-form";
import { getStaticTranslations } from "../utils/with-page-translations"; import { getStaticTranslations } from "../utils/with-page-translations";
const Page: NextPageWithLayout = () => { const Page: NextPageWithLayout = () => {