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, Trans} from 'react-i18next';
9import {useState} from 'react';
10import pageUtils from '../../../lib/pageUtils';
11import CommonConfirm from '../../../layouts/ConfirmLayout';
12import {useUpdateMeMutation} from '../../../generated/graphql';
13import router from 'next/router';
14import useSettings from '../../../hooks/useSettings';
15import moment from 'moment';
16
17const Confirm = () => {
18 const theme = useTheme();
19 const {t} = useTranslation();
20 const settings = useSettings();
21 const [updateMe] = useUpdateMeMutation();
22
23 const [newsletterConsent, setNewsletterConsent] = useState(false);
24 const [tosConsent, setTosConsent] = useState(false);
25
26 const onSubmit = async () => {
27 const tosAcceptationDate = tosConsent ? moment().toISOString() : null;
28 await updateMe({
29 variables: {userUpdate: {newsletterConsent, tosAcceptationDate}},
30 });
31 router.push('/dashboard');
32 };
33
34 return (
35 <CommonConfirm>
36 <Typography variant="h6" align="center">
37 {t('signup.create')}
38 </Typography>
39 <Typography variant="h5" align="center">
40 {t('confirm.google.title')}
41 </Typography>
42 <Typography align="center" sx={{margin: theme.spacing(5, 0)}}>
43 <Icon fontSize="large">mail</Icon>
44 </Typography>
45 <FormControlLabel
46 sx={{width: '100%', my: 2, mx: 0}}
47 control={
48 <Checkbox
49 sx={{p: 0, mr: 2}}
50 color="primary"
51 value={newsletterConsent}
52 onChange={({target: {checked = false}}) =>
53 setNewsletterConsent(checked)
54 }
55 />
56 }
57 label={t('signup.newsletter.consent')}
58 />
59 <FormControlLabel
60 sx={{width: '100%', my: 2, mx: 0}}
61 label={
62 <Trans
63 i18nKey="signup.tos.consent"
64 components={{
65 'tos-link': <a href={settings.tos_link} target="_blank" />,
66 'data-privacy-link': (
67 <a href={settings.tos_link} target="_blank" />
68 ),
69 }}
70 />
71 }
72 control={
73 <Checkbox
74 sx={{p: 0, mr: 2}}
75 value={tosConsent}
76 onChange={e => setTosConsent(e.target.checked)}
77 />
78 }
79 />
80 <Box sx={{textAlign: 'center'}} mt={2}>
81 <Button
82 variant="contained"
83 color="secondary"
84 onClick={onSubmit}
85 disabled={!tosConsent}
86 >
87 {t('generic.confirm')}
88 </Button>
89 </Box>
90 </CommonConfirm>
91 );
92};
93
94export default Confirm;
95
96export const getServerSideProps = pageUtils.getServerSideProps();