frontend/containers/LostPassword/Success.js (view raw)
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;