1import Card from '@material-ui/core/Card';
 2import CardMedia from '@material-ui/core/CardMedia';
 3import {useTranslation} from 'react-i18next';
 4import Layout from '../../../layouts/Centered';
 5import Logo from '../../../components/Logo';
 6import LanguagesIcon from '../../../containers/Languages/Icon';
 7import CardContent from '@material-ui/core/CardContent';
 8import SignUpActions from '../../../containers/MailSignUpForm/SignupActions';
 9import Typography from '@material-ui/core/Typography';
10import {makeStyles} from '@material-ui/core/styles';
11import Box from '@material-ui/core/Box';
12import Divider from '@material-ui/core/Divider';
13import Button from '@material-ui/core/Button';
14import LoginGoogle from '../../../containers/LoginGoogle';
15import Link from 'next/link';
16import Markdown from '../../../components/Markdown';
17
18const MailSignup = () => {
19  const {t} = useTranslation();
20  const classes = useStyles();
21
22  return (
23    <Layout menuTitle={t('signup.title')} displayMenu={false}>
24      <Card>
25        <CardMedia component={Logo} />
26        <CardContent className={classes.content}>
27          <Typography variant="overline" component="h5" align="center">
28            {t('signup.create')}
29          </Typography>
30          <Box className={classes.content}>
31            <Link href="/auth/register/mail" passHref>
32              <Button
33                color="primary"
34                variant="contained"
35                fullWidth
36                className={classes.button}
37              >
38                {t('signup.with_mail')}
39              </Button>
40            </Link>
41            <LoginGoogle />
42          </Box>
43          <Box className={classes.divider}>
44            <Markdown
45              className={classes.conditions}
46              variant="overline"
47              align="center"
48            >
49              {t('signup.conditions')}
50            </Markdown>
51
52            <Divider />
53          </Box>
54          <Typography align="center" variant="body2">
55            {t('signup.account_already')}
56          </Typography>
57        </CardContent>
58        <SignUpActions />
59        <LanguagesIcon />
60      </Card>
61    </Layout>
62  );
63};
64
65const useStyles = makeStyles(theme => ({
66  content: {
67    display: 'flex',
68    flexDirection: 'column',
69    alignItems: 'center',
70    width: '100%',
71    padding: theme.spacing(0, 6),
72  },
73  button: {
74    margin: theme.spacing(8, 1, 4, 1),
75  },
76  divider: {
77    width: '100%',
78    textAlign: 'center',
79    margin: theme.spacing(10, 0, 2, 0),
80  },
81  conditions: {
82    '& a': {
83      color: 'inherit',
84    },
85  },
86}));
87
88export default MailSignup;