83 lines
2.8 KiB
JavaScript
83 lines
2.8 KiB
JavaScript
import { ArrowBackOutlined } from '@mui/icons-material';
|
||
import { Box, Card, Grid, Typography } from '@mui/material';
|
||
import { useNavigate } from 'react-router-dom';
|
||
import ForgotPasswordForm from './ForgotPasswordForm';
|
||
import { useStyles } from './forgotPasswordStyles';
|
||
import { useState } from 'react';
|
||
|
||
function ForgotPassword() {
|
||
const navigate = useNavigate();
|
||
const classes = useStyles();
|
||
const [resetPasswordLinkSend, setResetPasswordLinkSend] = useState(false);
|
||
const [email, setEmail] = useState('');
|
||
|
||
const handleFormSubmit = () => {
|
||
setResetPasswordLinkSend(true);
|
||
};
|
||
const handleGoBackClick = () => {
|
||
navigate('/auth/login');
|
||
};
|
||
return (
|
||
<Box className={classes.root}>
|
||
<Card className={classes.card}>
|
||
<Grid container display="flex" justifyContent="center">
|
||
{!resetPasswordLinkSend ? (
|
||
<Grid item xs={12}>
|
||
<Box
|
||
display="flex"
|
||
alignItems="center"
|
||
className={classes.forgotPasswordHeader}
|
||
>
|
||
<Grid item xs={2}>
|
||
<ArrowBackOutlined
|
||
className={classes.icon}
|
||
onClick={handleGoBackClick}
|
||
/>
|
||
</Grid>
|
||
<Grid item xs={10}>
|
||
<Typography variant="Inter-bold" className={classes.heading}>
|
||
Reset your Password
|
||
</Typography>
|
||
</Grid>
|
||
</Box>
|
||
<ForgotPasswordForm
|
||
onSubmit={handleFormSubmit}
|
||
setEmail={setEmail}
|
||
/>
|
||
</Grid>
|
||
) : (
|
||
<Box className={classes.emailSentMainDiv}>
|
||
{/* <Box width="90%"> */}
|
||
<Typography
|
||
variant="Gilroy-SemiBold"
|
||
className={classes.heading}
|
||
marginBottom="20px"
|
||
>
|
||
Email Sent
|
||
</Typography>
|
||
<Typography
|
||
variant="Gilroy-normal"
|
||
className={classes.subheading}
|
||
// marginBottom="30px"
|
||
>
|
||
{/* {` An email with instructions on how to reset your password has
|
||
been sent to ${email}. It is valid for next 24 hrs.
|
||
Check your spam or junk folder if you don’t see the email in
|
||
your inbox.`} */}
|
||
{`An email with instructions on how to reset your password has
|
||
been sent to `}
|
||
<span style={{ fontWeight: 'bold' }}>{email}</span>
|
||
{`. It is valid for the next 24 hrs. Check your spam or junk folder if you don’t see the email in
|
||
your inbox.`}
|
||
</Typography>
|
||
{/* </Box> */}
|
||
</Box>
|
||
)}
|
||
</Grid>
|
||
</Card>
|
||
</Box>
|
||
);
|
||
}
|
||
|
||
export default ForgotPassword;
|