1import {useTranslation} from 'react-i18next';
 2import { styled } from '@mui/material/styles';
 3import Button from '@mui/material/Button';
 4import Icon from '@mui/material/Icon';
 5import CardContent from '@mui/material/CardContent';
 6import Card from '@mui/material/Card';
 7import Typography from '@mui/material/Typography';
 8import CardActions from '@mui/material/CardActions';
 9import Link from 'next/link';
10
11const PREFIX = 'Success';
12
13const classes = {
14  successCard: `${PREFIX}-successCard`,
15  successIcon: `${PREFIX}-successIcon`,
16  actions: `${PREFIX}-actions`
17};
18
19const StyledCard = styled(Card)((
20  {
21    theme
22  }
23) => ({
24  [`&.${classes.successCard}`]: {
25    textAlign: 'center',
26  },
27
28  [`& .${classes.successIcon}`]: {
29    fontSize: theme.spacing(14),
30  },
31
32  [`& .${classes.actions}`]: {
33    justifyContent: 'center',
34  }
35}));
36
37const Success = ({email}) => {
38  const {t} = useTranslation();
39
40
41  return (
42    <StyledCard className={classes.successCard}>
43      <CardContent>
44        <Icon size="large" color="primary" className={classes.successIcon}>
45          done
46        </Icon>
47      </CardContent>
48      <CardContent>
49        <Typography variant="body1" gutterBottom>
50          {t('lost_password.sent', {email})}
51        </Typography>
52      </CardContent>
53      <CardActions className={classes.actions}>
54        <Link href="/auth/login" passHref>
55          <Button id="LostPasswordRegister" color="primary" variant="contained">
56            {t('lost_password.actions.login')}
57          </Button>
58        </Link>
59      </CardActions>
60    </StyledCard>
61  );
62};
63
64export default Success;