import { ReactElement } from "react"; import Image from "next/image"; import { useRouter } from "next/router"; import { Controller, useForm } from "react-hook-form"; // services import { AuthService } from "services/auth.service"; // hooks import useToast from "hooks/use-toast"; import useTimer from "hooks/use-timer"; // layouts import DefaultLayout from "layouts/default-layout"; // components import { LatestFeatureBlock } from "components/common"; // ui import { Button, Input } from "@plane/ui"; // images import BluePlaneLogoWithoutText from "public/plane-logos/blue-without-text.png"; // helpers import { checkEmailValidity } from "helpers/string.helper"; // type import { NextPageWithLayout } from "lib/types"; type TForgotPasswordFormValues = { email: string; }; const defaultValues: TForgotPasswordFormValues = { email: "", }; // services const authService = new AuthService(); const ForgotPasswordPage: NextPageWithLayout = () => { // router const router = useRouter(); const { email } = router.query; // toast const { setToastAlert } = useToast(); // timer const { timer: resendTimerCode, setTimer: setResendCodeTimer } = useTimer(0); // form info const { control, formState: { errors, isSubmitting, isValid }, handleSubmit, } = useForm({ defaultValues: { ...defaultValues, email: email?.toString() ?? "", }, }); const handleForgotPassword = async (formData: TForgotPasswordFormValues) => { await authService .sendResetPasswordLink({ email: formData.email, }) .then(() => { setToastAlert({ type: "success", title: "Email sent", message: "Check your inbox for a link to reset your password. If it doesn't appear within a few minutes, check your spam folder.", }); setResendCodeTimer(30); }) .catch((err) => setToastAlert({ type: "error", title: "Error!", message: err?.error ?? "Something went wrong. Please try again.", }) ); }; return (
Plane Logo Plane

Get on your flight deck

Get a link to reset your password

checkEmailValidity(value) || "Email is invalid", }} render={({ field: { value, onChange, ref } }) => ( )} />
); }; ForgotPasswordPage.getLayout = function getLayout(page: ReactElement) { return {page}; }; export default ForgotPasswordPage;