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