import React, { useState } from "react"; import Link from "next/link"; 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"; // ui import { Button, Input } from "@plane/ui"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // types import { IEmailCheckData, IMagicSignInData } from "@plane/types"; type Props = { email: string; handleEmailClear: () => void; onSubmit: (isPasswordAutoset: boolean) => Promise; }; type TUniqueCodeFormValues = { email: string; token: string; }; const defaultValues: TUniqueCodeFormValues = { email: "", token: "", }; // services const authService = new AuthService(); const userService = new UserService(); export const SignUpUniqueCodeForm: React.FC = (props) => { const { email, handleEmailClear, onSubmit } = props; // states const [isRequestingNewCode, setIsRequestingNewCode] = useState(false); // toast alert const { setToastAlert } = useToast(); // 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 () => { const currentUser = await userService.currentUser(); await onSubmit(currentUser.is_password_autoset); }) .catch((err) => 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 && ( )}
)} />
( )} />

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

); };