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