mirror of
https://github.com/lukevella/rallly.git
synced 2025-07-25 12:17:26 +02:00
✨ Use global state to share email between auth pages
This commit is contained in:
parent
b9ca609236
commit
c07600aeb1
3 changed files with 22 additions and 10 deletions
|
@ -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>
|
|
@ -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";
|
||||||
|
|
|
@ -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 = () => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue