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