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';
17
18const MailSignup = () => {
19  const {t} = useTranslation();
20  const theme = useTheme();
21
22  return (
23    <Layout menuTitle={t('signup.title')} displayMenu={false}>
24      <Card>
25        <CardMedia component={Logo} />
26        <CardContent
27          sx={{
28            display: 'flex',
29            flexDirection: 'column',
30            alignItems: 'center',
31            width: '100%',
32            padding: theme.spacing(0, 6),
33          }}
34        >
35          <Typography variant="h6" align="center">
36            {t('signup.create')}
37          </Typography>
38          <Box
39            sx={{
40              display: 'flex',
41              flexDirection: 'column',
42              alignItems: 'center',
43              width: '100%',
44              padding: {sm: theme.spacing(0, 6), xs: 0},
45            }}
46          >
47            <Link href="/auth/register/mail" passHref>
48              <Button
49                color="primary"
50                variant="contained"
51                fullWidth
52                sx={{
53                  margin: theme.spacing(8, 1, 4, 1),
54                }}
55              >
56                {t('signup.with_mail')}
57              </Button>
58            </Link>
59            <LoginGoogle />
60          </Box>
61          <Box
62            sx={{
63              width: '100%',
64              textAlign: 'center',
65              margin: theme.spacing(5, 0, 2, 0),
66            }}
67          >
68            <Markdown
69              sx={{
70                marginBottom: theme.spacing(5), 
71                '& a': {
72                  color: theme.palette.primary.main,
73                },
74              }}
75              variant="body1"
76              align="center"
77            >
78              {t('signup.conditions')}
79            </Markdown>
80
81            <Divider />
82          </Box>
83          <Typography align="center" variant="body2">
84            {t('signup.account_already')}
85          </Typography>
86        </CardContent>
87        <SignUpActions />
88        <LanguagesIcon />
89      </Card>
90    </Layout>
91  );
92};
93
94export async function getServerSideProps(props) {
95  return props
96}
97
98export default MailSignup;