Skip to content

Commit a1431bb

Browse files
plzfdayplzfday
authored
Merge pull request #11 from Bibimbap-Team/5-create-registration-page
Create registration page
2 parents e1ac5df + 1a53986 commit a1431bb

File tree

4 files changed

+240
-1
lines changed

4 files changed

+240
-1
lines changed

‎src/app/login/SubmitBox.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,12 @@ export default function LoginSubmitBox({ children }: { children: React.ReactNode
1414
};
1515

1616
return (
17-
<Box component='form' onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
17+
<Box
18+
component='form'
19+
onSubmit={handleSubmit}
20+
noValidate
21+
sx={{ mt: 1, maxWidth: { xs: '75vw', sm: '50vw' }, width: '100%' }}
22+
>
1823
{children}
1924
</Box>
2025
);

‎src/app/register/SubmitBox.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
import { FormEvent } from 'react';
3+
import { Box } from '@mui/material';
4+
5+
export default function RegisterSubmitBox({
6+
children,
7+
}: {
8+
children: React.ReactNode;
9+
}) {
10+
const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
11+
event.preventDefault();
12+
const data = new FormData(event.currentTarget);
13+
console.log({
14+
email: data.get('email'),
15+
password: data.get('password'),
16+
});
17+
};
18+
return (
19+
<Box
20+
component='form'
21+
onSubmit={handleSubmit}
22+
noValidate
23+
sx={{ mt: 3, maxWidth: { xs: '75vw', sm: '50vw' }, width: '100%' }}
24+
>
25+
{children}
26+
</Box>
27+
);
28+
}

‎src/app/register/page.tsx‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
import {
2+
Avatar,
3+
Box,
4+
Button,
5+
Checkbox,
6+
Grid,
7+
TextField,
8+
Typography,
9+
FormControlLabel,
10+
} from '@mui/material';
11+
import { LockOutlined } from '@mui/icons-material';
12+
import Copyright from '@/components/Copyright';
13+
import CustomLink from '@/components/CustomLink';
14+
import RegisterSubmitBox from './SubmitBox';
15+
import TACModal from '@/components/TACModal';
16+
17+
export default function SignUp() {
18+
return (
19+
<>
20+
<Box
21+
sx={{
22+
mt: 8,
23+
display: 'flex',
24+
flexDirection: 'column',
25+
alignItems: 'center',
26+
}}
27+
>
28+
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
29+
<LockOutlined />
30+
</Avatar>
31+
<Typography component='h1' variant='h5'>
32+
Register
33+
</Typography>
34+
<RegisterSubmitBox>
35+
<TextField
36+
margin='normal'
37+
autoComplete='given-name'
38+
name='firstName'
39+
required
40+
fullWidth
41+
id='firstName'
42+
label='First Name'
43+
autoFocus
44+
/>
45+
<TextField
46+
margin='normal'
47+
required
48+
fullWidth
49+
id='lastName'
50+
label='Last Name'
51+
name='lastName'
52+
autoComplete='family-name'
53+
/>
54+
<TextField
55+
margin='normal'
56+
required
57+
fullWidth
58+
id='email'
59+
label='Email Address'
60+
name='email'
61+
autoComplete='email'
62+
/>
63+
<TextField
64+
margin='normal'
65+
required
66+
fullWidth
67+
id='username'
68+
label='Username'
69+
name='username'
70+
autoComplete='username'
71+
/>
72+
<TextField
73+
margin='normal'
74+
required
75+
fullWidth
76+
name='password'
77+
label='Password'
78+
type='password'
79+
id='password'
80+
autoComplete='new-password'
81+
/>
82+
<TextField
83+
margin='normal'
84+
required
85+
fullWidth
86+
name='confirmPassword'
87+
label='Confirm Password'
88+
type='password'
89+
id='confirmPassword'
90+
autoComplete='new-password'
91+
/>
92+
<Grid container justifyContent='space-between' alignItems='center'>
93+
<FormControlLabel
94+
control={<Checkbox value='agreeTAC' color='primary' />}
95+
label='I agree to the terms and conditions.'
96+
/>
97+
<TACModal />
98+
</Grid>
99+
{/* <FormControlLabel
100+
control={<Checkbox value='allowExtraEmails' color='primary' />}
101+
label='I want to receive inspiration, marketing promotions and updates via email.'
102+
/> */}
103+
<Button
104+
type='submit'
105+
fullWidth
106+
variant='contained'
107+
sx={{ mt: 3, mb: 2 }}
108+
>
109+
Register
110+
</Button>
111+
<Grid container justifyContent='flex-end'>
112+
<Grid item>
113+
<CustomLink href='#' variant='body2'>
114+
Already have an account? Login
115+
</CustomLink>
116+
</Grid>
117+
</Grid>
118+
</RegisterSubmitBox>
119+
</Box>
120+
<Copyright sx={{ mt: 5, mb: 4 }} />
121+
</>
122+
);
123+
}

‎src/components/TACModal.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client';
2+
import { Box, Button, Modal, Typography } from '@mui/material';
3+
import { useState } from 'react';
4+
5+
const style = {
6+
position: 'absolute' as 'absolute',
7+
top: '50%',
8+
left: '50%',
9+
transform: 'translate(-50%, -50%)',
10+
width: { xs: '80%', sm: '60%' },
11+
bgcolor: 'background.paper',
12+
border: '2px solid #000',
13+
boxShadow: 24,
14+
p: 4,
15+
};
16+
17+
export default function TACModal() {
18+
const [open, setOpen] = useState(false);
19+
const handleOpen = () => setOpen(true);
20+
const handleClose = () => setOpen(false);
21+
22+
return (
23+
<div>
24+
<Button onClick={handleOpen}>View Terms and Conditions</Button>
25+
<Modal
26+
open={open}
27+
onClose={handleClose}
28+
aria-labelledby='modal-modal-title'
29+
aria-describedby='modal-modal-description'
30+
>
31+
<Box sx={style}>
32+
<Typography
33+
id='modal-modal-title'
34+
variant='h6'
35+
component='h2'
36+
align='center'
37+
>
38+
Terms and Conditions
39+
</Typography>
40+
<Typography id='modal-modal-description' sx={{ mt: 2 }}>
41+
<ol className='list-decimal'>
42+
<li>You can use Polygon to develop problems only.</li>
43+
<li>
44+
You should use your real name and all information about you
45+
should be correct and accurate.
46+
</li>
47+
<li>
48+
You should not submit files containing malicious code:
49+
<ul className='list-disc list-inside'>
50+
<li>trojan horses;</li>
51+
<li>rootkits;</li>
52+
<li>backdoors;</li>
53+
<li>viruses.</li>
54+
</ul>
55+
</li>
56+
<li>
57+
Your code not allowed to:
58+
<ul className='list-disc list-inside'>
59+
<li>access the network;</li>
60+
<li>
61+
work with any files except those explicitly specified in the
62+
problem statement;
63+
</li>
64+
<li>attack system security;</li>
65+
<li>execute other programs and create new processes;</li>
66+
<li>change file system permissions;</li>
67+
<li>work with subdirectories;</li>
68+
<li>
69+
create or manipulate any GUI items (windows, dialog boxes,
70+
etc);
71+
</li>
72+
<li>work with external devices (sound, printer, etc);</li>
73+
<li>work with OS registry;</li>
74+
<li>do anything else that can stir Polygon functioning.</li>
75+
</ul>
76+
</li>
77+
</ol>
78+
</Typography>
79+
</Box>
80+
</Modal>
81+
</div>
82+
);
83+
}

0 commit comments

Comments
 (0)