import React, { useEffect, 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"; // hooks import useToast from "hooks/use-toast"; // ui import { Button, Input } from "@plane/ui"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // types import { IPasswordSignInData } from "types/auth"; // constants import { ESignInSteps } from "components/account"; type Props = { email: string; updateEmail: (email: string) => void; handleStepChange: (step: ESignInSteps) => void; handleSignInRedirection: () => Promise; }; type TPasswordFormValues = { email: string; password: string; }; const defaultValues: TPasswordFormValues = { email: "", password: "", }; const authService = new AuthService(); export const PasswordForm: React.FC = (props) => { const { email, updateEmail, handleStepChange, handleSignInRedirection } = props; // states const [isSendingUniqueCode, setIsSendingUniqueCode] = useState(false); const [isSendingResetPasswordLink, setIsSendingResetPasswordLink] = useState(false); // toast alert const { setToastAlert } = useToast(); // form info const { control, formState: { dirtyFields, errors, isSubmitting, isValid }, getValues, handleSubmit, setError, setFocus, } = useForm({ defaultValues: { ...defaultValues, email, }, mode: "onChange", reValidateMode: "onChange", }); const handleFormSubmit = async (formData: TPasswordFormValues) => { updateEmail(formData.email); const payload: IPasswordSignInData = { email: formData.email, password: formData.password, }; await authService .passwordSignIn(payload) .then(async () => await handleSignInRedirection()) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ); }; const handleForgotPassword = async () => { const emailFormValue = getValues("email"); const isEmailValid = checkEmailValidity(emailFormValue); if (!isEmailValid) { setError("email", { message: "Email is invalid" }); return; } setIsSendingResetPasswordLink(true); authService .sendResetPasswordLink({ email: emailFormValue }) .then(() => handleStepChange(ESignInSteps.SET_PASSWORD_LINK)) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ) .finally(() => setIsSendingResetPasswordLink(false)); }; const handleSendUniqueCode = async () => { const emailFormValue = getValues("email"); const isEmailValid = checkEmailValidity(emailFormValue); if (!isEmailValid) { setError("email", { message: "Email is invalid" }); return; } setIsSendingUniqueCode(true); await authService .generateUniqueCode({ email: emailFormValue }) .then(() => handleStepChange(ESignInSteps.USE_UNIQUE_CODE_FROM_PASSWORD)) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ) .finally(() => setIsSendingUniqueCode(false)); }; useEffect(() => { setFocus("password"); }, [setFocus]); return ( <>

Get on your flight deck

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

When you click Go to workspace above, you agree with our{" "} terms and conditions of service.

); };