Merge pull request #1432 from Anand-Royy/reset-pass

Reset password link should be present in all pages #1403

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;
+export default EmailStep;