frontend/pages/auth/register/index.tsx (view raw)
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;