import React, { useEffect, useState } from "react"; import { useForm } from "react-hook-form"; // ui import { CheckCircleIcon } from "@heroicons/react/20/solid"; import { Input, PrimaryButton, SecondaryButton } from "components/ui"; // services import authenticationService from "services/authentication.service"; import useToast from "hooks/use-toast"; import useTimer from "hooks/use-timer"; // icons // types type EmailCodeFormValues = { email: string; key?: string; token?: string; }; export const EmailCodeForm = ({ handleSignIn }: any) => { const [codeSent, setCodeSent] = useState(false); const [codeResent, setCodeResent] = useState(false); const [isCodeResending, setIsCodeResending] = useState(false); const [errorResendingCode, setErrorResendingCode] = useState(false); const [isLoading, setIsLoading] = useState(false); const { setToastAlert } = useToast(); const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer(); const { register, handleSubmit, setError, setValue, getValues, formState: { errors, isSubmitting, isValid, isDirty }, } = useForm({ defaultValues: { email: "", key: "", token: "", }, mode: "onChange", reValidateMode: "onChange", }); const isResendDisabled = resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode; const onSubmit = async ({ email }: EmailCodeFormValues) => { setErrorResendingCode(false); await authenticationService .emailCode({ email }) .then((res) => { setValue("key", res.key); setCodeSent(true); }) .catch((err) => { setErrorResendingCode(true); setToastAlert({ title: "Oops!", type: "error", message: err?.error, }); }); }; const handleSignin = async (formData: EmailCodeFormValues) => { setIsLoading(true); await authenticationService .magicSignIn(formData) .then((response) => { handleSignIn(response); }) .catch((error) => { setIsLoading(false); setToastAlert({ title: "Oops!", type: "error", message: error?.response?.data?.error ?? "Enter the correct code to sign in", }); setError("token" as keyof EmailCodeFormValues, { type: "manual", message: error?.error, }); }); }; const emailOld = getValues("email"); useEffect(() => { setErrorResendingCode(false); }, [emailOld]); useEffect(() => { const submitForm = (e: KeyboardEvent) => { if (!codeSent && e.key === "Enter") { e.preventDefault(); handleSubmit(onSubmit)().then(() => { setResendCodeTimer(30); }); } }; if (!codeSent) { window.addEventListener("keydown", submitForm); } return () => { window.removeEventListener("keydown", submitForm); }; }, [handleSubmit, codeSent]); return ( <>
{(codeSent || codeResent) && (

{codeResent ? "Please check your mail for new code." : "Please check your mail for code."}

)}
/^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value ) || "Email ID is not valid", }} error={errors.email} placeholder="Enter your Email ID" />
{codeSent && (
)}
{codeSent ? ( {isLoading ? "Signing in..." : "Sign in"} ) : ( { handleSubmit(onSubmit)().then(() => { setResendCodeTimer(30); }); }} loading={isSubmitting || (!isValid && isDirty)} > {isSubmitting ? "Sending code..." : "Send code"} )}
); };