1import Link from 'next/link';
 2import Card from '@mui/material/Card';
 3import CardContent from '@mui/material/CardContent';
 4import Typography from '@mui/material/Typography';
 5import Box from '@mui/material/Box';
 6import Divider from '@mui/material/Divider';
 7import Button from '@mui/material/Button';
 8import CardMedia from '@mui/material/CardMedia';
 9import {useTheme} from '@mui/material/styles';
10import {useTranslation} from 'react-i18next';
11import Layout from '../../../layouts/Centered';
12import Logo from '../../../components/Logo';
13import LanguagesIcon from '../../../containers/Languages/Icon';
14import SignUpActions from '../../../containers/MailSignUpForm/SignupActions';
15import LoginGoogle from '../../../containers/LoginGoogle';
16import Markdown from '../../../components/Markdown';
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              width: '100%',
45              padding: {sm: theme.spacing(0, 6), xs: 0},
46            }}
47          >
48            <Link href="/auth/register/mail" passHref>
49              <Button
50                color="primary"
51                variant="contained"
52                fullWidth
53                sx={{
54                  margin: theme.spacing(8, 1, 4, 1),
55                }}
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            <Markdown
70              sx={{
71                marginBottom: theme.spacing(5), 
72                '& a': {
73                  color: theme.palette.primary.main,
74                },
75              }}
76              variant="body1"
77              align="center"
78            >
79              {t('signup.conditions')}
80            </Markdown>
81
82            <Divider />
83          </Box>
84          <Typography align="center" variant="body2">
85            {t('signup.account_already')}
86          </Typography>
87        </CardContent>
88        <SignUpActions />
89        <LanguagesIcon />
90      </Card>
91    </Layout>
92  );
93};
94
95
96export const getServerSideProps = pageUtils.getServerSideProps();
97
98export default MailSignup;