frontend/pages/auth/confirm/google.tsx (view raw)
1import Typography from '@mui/material/Typography';
2import {useTheme} from '@mui/material/styles';
3import Icon from '@mui/material/Icon';
4import FormControlLabel from '@mui/material/FormControlLabel';
5import Checkbox from '@mui/material/Checkbox';
6import Button from '@mui/material/Button';
7import Box from '@mui/material/Box';
8import {useTranslation} from 'react-i18next';
9import {useState} from 'react';
10import pageUtils from '../../../lib/pageUtils';
11import CommonConfirm from '../../../layouts/ConfirmLayout';
12import {useUpdateMeMutation} from '../../../generated/graphql';
13import useRedirectUrlStore from '../../../stores/useRedirectUrl';
14import router from 'next/router';
15
16const Confirm = () => {
17 const theme = useTheme();
18 const {t} = useTranslation();
19
20 const [newsletterConsent, setNewsletterConsent] = useState(false);
21 const [updateMe] = useUpdateMeMutation();
22 const getRedirectUrl = useRedirectUrlStore(s => s.getRedirectUrl);
23 const onSubmit = async () => {
24 await updateMe({variables: {userUpdate: {newsletterConsent}}});
25 const callbackUrl = getRedirectUrl() || '/';
26 router.push(callbackUrl);
27 };
28
29 return (
30 <CommonConfirm>
31 <Typography variant="h6" align="center">
32 {t('signup.create')}
33 </Typography>
34 <Typography variant="h5" align="center">
35 {t('confirm.google.title')}
36 </Typography>
37 <Typography align="center" sx={{margin: theme.spacing(5, 0)}}>
38 <Icon fontSize="large">mail</Icon>
39 </Typography>
40 <FormControlLabel
41 sx={{width: '100%', margin: theme.spacing(2, 0)}}
42 control={
43 <Checkbox
44 sx={{padding: 0, marginRight: theme.spacing(2)}}
45 color="primary"
46 value={newsletterConsent}
47 onChange={({target: {checked = false}}) =>
48 setNewsletterConsent(checked)
49 }
50 />
51 }
52 label={t('signup.newsletter.consent')}
53 />
54 <Box sx={{textAlign: 'center'}}>
55 <Button variant="contained" color="secondary" onClick={onSubmit}>
56 {t('generic.confirm')}
57 </Button>
58 </Box>
59 </CommonConfirm>
60 );
61};
62
63export default Confirm;
64
65export const getServerSideProps = pageUtils.getServerSideProps();