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 = () => {