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