import React, { useEffect, useState } from "react"; import { Controller, useForm } from "react-hook-form"; // ui import { Button, Input } from "@plane/ui"; // services import { AuthService } from "services/auth.service"; // hooks import useToast from "hooks/use-toast"; import useTimer from "hooks/use-timer"; // icons import { XCircle } from "lucide-react"; import { useTheme } from "next-themes"; // types type EmailCodeFormValues = { email: string; key?: string; token?: string; }; const authService = new AuthService(); 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 [sentEmail, setSentEmail] = useState(""); const { setToastAlert } = useToast(); const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer(); const { handleSubmit, control, setError, setValue, getValues, watch, 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 authService .emailCode({ email }) .then((res) => { console.log(res); setSentEmail(email); 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 authService .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(() => { const submitForm = (e: KeyboardEvent) => { if (!codeSent && e.key === "Enter") { e.preventDefault(); handleSubmit(onSubmit)().then(() => { setResendCodeTimer(30); }); } else if ( codeSent && sentEmail != getValues("email") && getValues("email").length > 0 && (e.key === "Enter" || e.key === "Tab") ) { e.preventDefault(); console.log("resend"); onSubmit({ email: getValues("email") }).then(() => { setCodeResent(true); }); } }; window.addEventListener("keydown", submitForm); return () => { window.removeEventListener("keydown", submitForm); }; // eslint-disable-next-line react-hooks/exhaustive-deps }, [handleSubmit, codeSent, sentEmail]); return ( <> {codeSent || codeResent ? ( <>

Moving to the runway

Paste the code you got at

{sentEmail} below.
) : ( <>

Let’s get you prepped!

This whole thing will take less than two minutes.

Promise!

)}
/^(([^<>()[\]\\.,;:\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 address is not valid", }} render={({ field: { value, onChange, ref } }) => (
{value.length > 0 && ( setValue("email", "")} /> )}
)} />
{codeSent && ( <>
{codeResent && sentEmail === getValues("email") ? (
You got a new code at {sentEmail}.
) : sentEmail != getValues("email") && getValues("email").length > 0 ? (
Hit enter or Tab to get a new code
) : (
)}
( )} />
)} {codeSent ? (
{" "}

When you click the button above, you agree with our{" "} terms and conditions of service. {" "}

) : ( )} ); };