1import {useTranslation} from 'next-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)(({theme}) => ({
20  [`&.${classes.successCard}`]: {
21    textAlign: 'center',
22  },
23
24  [`& .${classes.successIcon}`]: {
25    fontSize: theme.spacing(14),
26  },
27
28  [`& .${classes.actions}`]: {
29    justifyContent: 'center',
30  },
31}));
32
33const Success = ({email}) => {
34  const {t} = useTranslation();
35
36  return (
37    <StyledCard className={classes.successCard}>
38      <CardContent>
39        <Icon size="large" color="primary" className={classes.successIcon}>
40          done
41        </Icon>
42      </CardContent>
43      <CardContent>
44        <Typography variant="body1" gutterBottom>
45          {t('lost_password.sent', {email})}
46        </Typography>
47      </CardContent>
48      <CardActions className={classes.actions}>
49        <Link href="/auth/login" passHref>
50          <Button id="LostPasswordRegister" color="primary" variant="contained">
51            {t('lost_password.actions.login')}
52          </Button>
53        </Link>
54      </CardActions>
55    </StyledCard>
56  );
57};
58
59export default Success;