diff --git a/Client/src/Pages/ForgotPassword/index.jsx b/Client/src/Pages/ForgotPassword/index.jsx index b94546251..c5dbb0de3 100644 --- a/Client/src/Pages/ForgotPassword/index.jsx +++ b/Client/src/Pages/ForgotPassword/index.jsx @@ -5,8 +5,60 @@ import Logomark from "../../assets/Images/key-password.png"; import EmailTextField from "../../Components/TextFields/Email/EmailTextField"; import Button from "../../Components/Button"; import LeftArrow from "../../assets/Images/arrow-left.png"; +import { useState, useEffect } from "react"; +import { recoveryValidation } from "../../Validation/validation"; +import axios from "axios"; +import { useNavigate } from "react-router-dom"; + +const BASE_URL = import.meta.env.VITE_APP_API_BASE_URL; const ForgotPassword = () => { + const navigate = useNavigate(); + + const [isLoading, setIsLoading] = useState(false); // Used to disable the button while loading so user doesn't submit multiple times + const [errors, setErrors] = useState({}); + const [form, setForm] = useState({ + email: "", + }); + + const idMap = { + "forgot-password-email-input": "email", + }; + + useEffect(() => { + const { error } = recoveryValidation.validate(form); + if (error === undefined) { + setErrors({}); + } else { + const validationErrors = error.details.reduce((acc, err) => { + return { ...acc, [err.path[0]]: err.message }; + }, {}); + setErrors(validationErrors); + } + }, [form]); + + const handleInput = (e) => { + const fieldName = idMap[e.target.id]; + setForm({ ...form, [fieldName]: e.target.value }); + }; + + const handleSubmit = async () => { + //TODO show loading spinner + setIsLoading(true); + try { + const { error } = recoveryValidation.validate(form); + if (error !== undefined) { + throw error; + } + await axios.post(`${BASE_URL}/auth/recovery/request`, form); + navigate("/check-email"); + } catch (error) { + //TODO display error (Toast?) + alert(error); + } finally { + setIsLoading(false); + } + }; return (
@@ -27,12 +79,16 @@ const ForgotPassword = () => {