function RouteComponent() {
const navigate = useNavigate({from: "/login"});
const sendMagicLinkMutation = useMutation(
orpc.auth.sendMagicLink.mutationOptions({
onSuccess: () => {
navigate({to: "/magic-link-sent"});
},
onError: (error) => {
toast.error(error.message || "Failed to send magic link");
},
}),
);
const form = useForm({
defaultValues: {email: ""},
validators: {
onSubmitAsync: ({value: {email}}) => {
return withValidationErrors(sendMagicLinkMutation.mutateAsync({email}));
},
onSubmit: z.object({email: z.email("Invalid email address")}),
},
});
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center gap-2 text-center">
<h1 className="text-2xl font-bold">Welcome</h1>
<p className="text-muted-foreground text-sm text-balance">
New here or coming back? Just enter your email to get started.
</p>
</div>
<form
onSubmit={(event) => {
event.preventDefault();
event.stopPropagation();
form.handleSubmit();
}}
>
{/* */}
</form>
</div>
);
}
function RouteComponent() {
const navigate = useNavigate({from: "/login"});
const sendMagicLinkMutation = useMutation(
orpc.auth.sendMagicLink.mutationOptions({
onSuccess: () => {
navigate({to: "/magic-link-sent"});
},
onError: (error) => {
toast.error(error.message || "Failed to send magic link");
},
}),
);
const form = useForm({
defaultValues: {email: ""},
validators: {
onSubmitAsync: ({value: {email}}) => {
return withValidationErrors(sendMagicLinkMutation.mutateAsync({email}));
},
onSubmit: z.object({email: z.email("Invalid email address")}),
},
});
return (
<div className="flex flex-col gap-6">
<div className="flex flex-col items-center gap-2 text-center">
<h1 className="text-2xl font-bold">Welcome</h1>
<p className="text-muted-foreground text-sm text-balance">
New here or coming back? Just enter your email to get started.
</p>
</div>
<form
onSubmit={(event) => {
event.preventDefault();
event.stopPropagation();
form.handleSubmit();
}}
>
{/* */}
</form>
</div>
);
}