From 7f7423aed830ab9bdff0587e15841023d1c36d01 Mon Sep 17 00:00:00 2001
From: Anand Roy <itsanand.roy11@gmail.com>
Date: Wed, 18 Dec 2024 17:46:44 +0000
Subject: [PATCH] reset password link added

---
 .../Pages/Auth/Login/Components/EmailStep.jsx | 40 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx
index f78193186..08ae51c4f 100644
--- a/Client/src/Pages/Auth/Login/Components/EmailStep.jsx
+++ b/Client/src/Pages/Auth/Login/Components/EmailStep.jsx
@@ -1,8 +1,9 @@
-import { useRef, useEffect  } from "react";
+import { useRef, useEffect } from "react";
 import { Box, Button, Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import TextInput from "../../../../Components/Inputs/TextInput";
 import PropTypes from "prop-types";
+import { useNavigate } from "react-router";
 
 /**
  * Renders the email step of the login process which includes an email field.
@@ -18,6 +19,7 @@ import PropTypes from "prop-types";
 const EmailStep = ({ form, errors, onSubmit, onChange }) => {
 	const theme = useTheme();
 	const inputRef = useRef(null);
+	const navigate = useNavigate();
 
 	useEffect(() => {
 		if (inputRef.current) {
@@ -25,11 +27,19 @@ const EmailStep = ({ form, errors, onSubmit, onChange }) => {
 		}
 	}, []);
 
+	const handleNavigate = () => {
+		if (form.email !== "" && !errors.email) {
+			sessionStorage.setItem("email", form.email);
+		}
+		navigate("/forgot-password");
+	};
+
 	return (
 		<>
 			<Stack
 				gap={{ xs: theme.spacing(12), sm: theme.spacing(16) }}
 				textAlign="center"
+				position="relative"
 			>
 				<Box>
 					<Typography component="h1">Log In</Typography>
@@ -80,6 +90,32 @@ const EmailStep = ({ form, errors, onSubmit, onChange }) => {
 						</Button>
 					</Stack>
 				</Box>
+				<Box
+					textAlign="center"
+					sx={{
+						position: "absolute",
+						bottom: 0,
+						left: "50%",
+						transform: `translate(-50%, 150%)`,
+					}}
+				>
+					<Typography
+						className="forgot-p"
+						display="inline-block"
+						color={theme.palette.primary.main}
+					>
+						Forgot password?
+					</Typography>
+					<Typography
+						component="span"
+						color={theme.palette.primary.main}
+						ml={theme.spacing(2)}
+						sx={{ userSelect: "none" }}
+						onClick={handleNavigate}
+					>
+						Reset password
+					</Typography>
+				</Box>
 			</Stack>
 		</>
 	);
@@ -92,4 +128,4 @@ EmailStep.propTypes = {
 	onChange: PropTypes.func.isRequired,
 };
 
-export default EmailStep;
\ No newline at end of file
+export default EmailStep;