import React, { useEffect } from "react"; import { Controller, useForm } from "react-hook-form"; import { XCircle } from "lucide-react"; import { observer } from "mobx-react-lite"; // services import { AuthService } from "services/auth.service"; // hooks import useToast from "hooks/use-toast"; import { useApplication } from "hooks/store"; // ui import { Button, Input } from "@plane/ui"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // types import { IEmailCheckData } from "@plane/types"; // constants import { ESignInSteps } from "components/account"; type Props = { handleStepChange: (step: ESignInSteps) => void; updateEmail: (email: string) => void; }; type TEmailFormValues = { email: string; }; const authService = new AuthService(); export const EmailForm: React.FC = observer((props) => { const { handleStepChange, updateEmail } = props; // hooks const { setToastAlert } = useToast(); const { config: { envConfig }, } = useApplication(); const { control, formState: { errors, isSubmitting, isValid }, handleSubmit, setFocus, } = useForm({ defaultValues: { email: "", }, mode: "onChange", reValidateMode: "onChange", }); const handleFormSubmit = async (data: TEmailFormValues) => { const payload: IEmailCheckData = { email: data.email, }; // update the global email state updateEmail(data.email); await authService .emailCheck(payload) .then((res) => { // if the password has been auto set, send the user to magic sign-in if (res.is_password_autoset && envConfig?.is_smtp_configured) { handleStepChange(ESignInSteps.UNIQUE_CODE); } // if the password has not been auto set, send them to password sign-in else handleStepChange(ESignInSteps.PASSWORD); }) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ); }; useEffect(() => { setFocus("email"); }, [setFocus]); return ( <>

Get on your flight deck

Create or join a workspace. Start with your e-mail.

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