1import Link from 'next/link';
 2import Cookies from 'cookies';
 3import Card from '@mui/material/Card';
 4import CardContent from '@mui/material/CardContent';
 5import Typography from '@mui/material/Typography';
 6import Box from '@mui/material/Box';
 7import Divider from '@mui/material/Divider';
 8import Button from '@mui/material/Button';
 9import CardMedia from '@mui/material/CardMedia';
10import {useTheme} from '@mui/material/styles';
11import {useTranslation} from 'next-i18next';
12import Layout from '../../../layouts/Centered';
13import Logo from '../../../components/Logo';
14import LanguagesIcon from '../../../containers/Languages/Icon';
15import SignUpActions from '../../../containers/MailSignUpForm/SignupActions';
16import LoginGoogle from '../../../containers/LoginGoogle';
17import pageUtils from '../../../lib/pageUtils';
18
19const MailSignup = () => {
20  const {t} = useTranslation();
21  const theme = useTheme();
22
23  return (
24    <Layout menuTitle={t('signup.title')} displayMenu={false}>
25      <Card>
26        <CardMedia component={Logo} />
27        <CardContent
28          sx={{
29            display: 'flex',
30            flexDirection: 'column',
31            alignItems: 'center',
32            width: '100%',
33            padding: theme.spacing(0, 6),
34          }}
35        >
36          <Typography variant="h6" align="center">
37            {t('signup.create')}
38          </Typography>
39          <Box
40            sx={{
41              display: 'flex',
42              flexDirection: 'column',
43              alignItems: 'center',
44              justifyContent: 'center',
45              width: '100%',
46              maxWidth: '15rem',
47              mt: 4,
48            }}
49          >
50            <Link href="/auth/register/mail" passHref style={{width: '100%'}}>
51              <Button
52                color="primary"
53                variant="contained"
54                fullWidth
55                sx={{mb: 2}}
56              >
57                {t('signup.with_mail')}
58              </Button>
59            </Link>
60            <LoginGoogle />
61          </Box>
62          <Box
63            sx={{
64              width: '100%',
65              textAlign: 'center',
66              margin: theme.spacing(5, 0, 2, 0),
67            }}
68          >
69            <Divider />
70          </Box>
71          <Typography align="center" variant="body2">
72            {t('signup.account_already')}
73          </Typography>
74        </CardContent>
75        <SignUpActions />
76        <LanguagesIcon />
77      </Card>
78    </Layout>
79  );
80};
81
82export const getServerSideProps = async (context: any) => {
83  return pageUtils.getServerSideProps(async ctx => {
84    const redirectPath = ctx.query?.redirectPath;
85    if (redirectPath) {
86      const cookies = new Cookies(ctx.req, ctx.res);
87      cookies.set('redirectPath', redirectPath);
88    }
89  })(context);
90};
91
92export default MailSignup;