import React, { useState } from "react"; import { Controller, useForm } from "react-hook-form"; import { XCircle } from "lucide-react"; // services import { AuthService } from "services/auth.service"; import { UserService } from "services/user.service"; // hooks import useToast from "hooks/use-toast"; import useTimer from "hooks/use-timer"; import { useEventTracker } from "hooks/store"; // ui import { Button, Input } from "@plane/ui"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // types import { IEmailCheckData, IMagicSignInData } from "@plane/types"; // constants import { CODE_VERIFIED } from "constants/event-tracker"; type Props = { email: string; onSubmit: (isPasswordAutoset: boolean) => Promise; handleEmailClear: () => void; submitButtonText: string; }; type TUniqueCodeFormValues = { email: string; token: string; }; const defaultValues: TUniqueCodeFormValues = { email: "", token: "", }; // services const authService = new AuthService(); const userService = new UserService(); export const SignInUniqueCodeForm: React.FC = (props) => { const { email, onSubmit, handleEmailClear, submitButtonText } = props; // states const [isRequestingNewCode, setIsRequestingNewCode] = useState(false); // toast alert const { setToastAlert } = useToast(); // store hooks const { captureEvent } = useEventTracker(); // timer const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(30); // form info const { control, formState: { errors, isSubmitting, isValid }, getValues, handleSubmit, reset, } = useForm({ defaultValues: { ...defaultValues, email, }, mode: "onChange", reValidateMode: "onChange", }); const handleUniqueCodeSignIn = async (formData: TUniqueCodeFormValues) => { const payload: IMagicSignInData = { email: formData.email, key: `magic_${formData.email}`, token: formData.token, }; await authService .magicSignIn(payload) .then(async () => { captureEvent(CODE_VERIFIED, { state: "SUCCESS", }); const currentUser = await userService.currentUser(); await onSubmit(currentUser.is_password_autoset); }) .catch((err) => { captureEvent(CODE_VERIFIED, { state: "FAILED", }); setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }); }); }; const handleSendNewCode = async (formData: TUniqueCodeFormValues) => { const payload: IEmailCheckData = { email: formData.email, }; await authService .generateUniqueCode(payload) .then(() => { setResendCodeTimer(30); setToastAlert({ type: "success", title: "Success!", message: "A new unique code has been sent to your email.", }); reset({ email: formData.email, token: "", }); }) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ); }; const handleRequestNewCode = async () => { setIsRequestingNewCode(true); await handleSendNewCode(getValues()) .then(() => setResendCodeTimer(30)) .finally(() => setIsRequestingNewCode(false)); }; const isRequestNewCodeDisabled = isRequestingNewCode || resendTimerCode > 0; return ( <>

Moving to the runway

Paste the code you got at
{email} below.

checkEmailValidity(value) || "Email is invalid", }} render={({ field: { value, onChange, ref } }) => (
{value.length > 0 && ( )}
)} />
( )} />
); };