diff --git a/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx b/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx index fa3e78a11..5f62a2211 100644 --- a/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx +++ b/apps/trust/src/pages/auth/VerifyMagicLinkPage.tsx @@ -1,14 +1,12 @@ import { formatError } from "@probo/helpers"; import { usePageTitle } from "@probo/hooks"; import { useTranslate } from "@probo/i18n"; -import { Button, Field, useToast } from "@probo/ui"; -import { useEffect, useRef } from "react"; +import { useToast } from "@probo/ui"; +import { useCallback, useEffect, useRef } from "react"; import { useMutation } from "react-relay"; -import { useSearchParams } from "react-router"; +import { Link, useSearchParams } from "react-router"; import { graphql } from "relay-runtime"; -import { z } from "zod"; -import { useFormWithSchema } from "#/hooks/useFormWithSchema"; import { getPathPrefix } from "#/utils/pathPrefix"; import type { VerifyMagicLinkPageMutation } from "./__generated__/VerifyMagicLinkPageMutation.graphql"; @@ -21,10 +19,6 @@ const verifyMagicLinkMutation = graphql` } `; -const verifyMagicLinkSchema = z.object({ - token: z.string().min(1, "Please enter a magic token"), -}); - export default function VerifyMagicLinkPagePageMutation() { const { __ } = useTranslate(); const { toast } = useToast(); @@ -33,22 +27,16 @@ export default function VerifyMagicLinkPagePageMutation() { usePageTitle(__("Verify Magic Link")); - const form = useFormWithSchema(verifyMagicLinkSchema, { - defaultValues: { - token: searchParams.get("token") ?? "", - }, - }); - const [verifyMagicLink] = useMutation( verifyMagicLinkMutation, ); - const handleSubmit = form.handleSubmit((data) => { + const handleVerifyMagicToken = useCallback((token: string) => { + if (submittedRef.current) return; + verifyMagicLink({ variables: { - input: { - token: data.token.trim(), - }, + input: { token }, }, onCompleted: (_, errors) => { if (errors) { @@ -76,47 +64,32 @@ export default function VerifyMagicLinkPagePageMutation() { }); }, }); - }); + }, [__, toast, verifyMagicLink]); useEffect(() => { - if (!submittedRef.current && searchParams.get("token")) { - void handleSubmit(); + const token = searchParams.get("token"); + if (!submittedRef.current && token) { + void handleVerifyMagicToken(token.trim()); submittedRef.current = true; } - }); + }, [handleVerifyMagicToken, searchParams]); return (

{__("Email Confirmation")}

- {__("Confirm your email address to complete registration")} + {__("Confirming your email address to complete registration…")}

- -
void handleSubmit(e)} className="space-y-6"> - - - - + {__("Go back")} + +
); }