Merge pull request #11 from Bibimbap-Team/5-create-registration-page

Create registration page

src/app/login/SubmitBox.tsx

@@ -14,7 +14,12 @@ export default function LoginSubmitBox({ children }: { children: React.ReactNode
   };
 
   return (
-    <Box component='form' onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+    <Box
+      component='form'
+      onSubmit={handleSubmit}
+      noValidate
+      sx={{ mt: 1, maxWidth: { xs: '75vw', sm: '50vw' }, width: '100%' }}
+    >
       {children}
     </Box>
   );

src/app/register/SubmitBox.tsx

@@ -0,0 +1,28 @@
+'use client';
+import { FormEvent } from 'react';
+import { Box } from '@mui/material';
+
+export default function RegisterSubmitBox({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    console.log({
+      email: data.get('email'),
+      password: data.get('password'),
+    });
+  };
+  return (
+    <Box
+      component='form'
+      onSubmit={handleSubmit}
+      noValidate
+      sx={{ mt: 3, maxWidth: { xs: '75vw', sm: '50vw' }, width: '100%' }}
+    >
+      {children}
+    </Box>
+  );
+}

src/app/register/page.tsx

@@ -0,0 +1,123 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  Grid,
+  TextField,
+  Typography,
+  FormControlLabel,
+} from '@mui/material';
+import { LockOutlined } from '@mui/icons-material';
+import Copyright from '@/components/Copyright';
+import CustomLink from '@/components/CustomLink';
+import RegisterSubmitBox from './SubmitBox';
+import TACModal from '@/components/TACModal';
+
+export default function SignUp() {
+  return (
+    <>
+      <Box
+        sx={{
+          mt: 8,
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+        }}
+      >
+        <Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
+          <LockOutlined />
+        </Avatar>
+        <Typography component='h1' variant='h5'>
+          Register
+        </Typography>
+        <RegisterSubmitBox>
+          <TextField
+            margin='normal'
+            autoComplete='given-name'
+            name='firstName'
+            required
+            fullWidth
+            id='firstName'
+            label='First Name'
+            autoFocus
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            id='lastName'
+            label='Last Name'
+            name='lastName'
+            autoComplete='family-name'
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            id='email'
+            label='Email Address'
+            name='email'
+            autoComplete='email'
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            id='username'
+            label='Username'
+            name='username'
+            autoComplete='username'
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            name='password'
+            label='Password'
+            type='password'
+            id='password'
+            autoComplete='new-password'
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            name='confirmPassword'
+            label='Confirm Password'
+            type='password'
+            id='confirmPassword'
+            autoComplete='new-password'
+          />
+          <Grid container justifyContent='space-between' alignItems='center'>
+            <FormControlLabel
+              control={<Checkbox value='agreeTAC' color='primary' />}
+              label='I agree to the terms and conditions.'
+            />
+            <TACModal />
+          </Grid>
+          {/* <FormControlLabel
+            control={<Checkbox value='allowExtraEmails' color='primary' />}
+            label='I want to receive inspiration, marketing promotions and updates via email.'
+          /> */}
+          <Button
+            type='submit'
+            fullWidth
+            variant='contained'
+            sx={{ mt: 3, mb: 2 }}
+          >
+            Register
+          </Button>
+          <Grid container justifyContent='flex-end'>
+            <Grid item>
+              <CustomLink href='#' variant='body2'>
+                Already have an account? Login
+              </CustomLink>
+            </Grid>
+          </Grid>
+        </RegisterSubmitBox>
+      </Box>
+      <Copyright sx={{ mt: 5, mb: 4 }} />
+    </>
+  );
+}

src/components/TACModal.tsx

@@ -0,0 +1,83 @@
+'use client';
+import { Box, Button, Modal, Typography } from '@mui/material';
+import { useState } from 'react';
+
+const style = {
+  position: 'absolute' as 'absolute',
+  top: '50%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: { xs: '80%', sm: '60%' },
+  bgcolor: 'background.paper',
+  border: '2px solid #000',
+  boxShadow: 24,
+  p: 4,
+};
+
+export default function TACModal() {
+  const [open, setOpen] = useState(false);
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <div>
+      <Button onClick={handleOpen}>View Terms and Conditions</Button>
+      <Modal
+        open={open}
+        onClose={handleClose}
+        aria-labelledby='modal-modal-title'
+        aria-describedby='modal-modal-description'
+      >
+        <Box sx={style}>
+          <Typography
+            id='modal-modal-title'
+            variant='h6'
+            component='h2'
+            align='center'
+          >
+            Terms and Conditions
+          </Typography>
+          <Typography id='modal-modal-description' sx={{ mt: 2 }}>
+            <ol className='list-decimal'>
+              <li>You can use Polygon to develop problems only.</li>
+              <li>
+                You should use your real name and all information about you
+                should be correct and accurate.
+              </li>
+              <li>
+                You should not submit files containing malicious code:
+                <ul className='list-disc list-inside'>
+                  <li>trojan horses;</li>
+                  <li>rootkits;</li>
+                  <li>backdoors;</li>
+                  <li>viruses.</li>
+                </ul>
+              </li>
+              <li>
+                Your code not allowed to:
+                <ul className='list-disc list-inside'>
+                  <li>access the network;</li>
+                  <li>
+                    work with any files except those explicitly specified in the
+                    problem statement;
+                  </li>
+                  <li>attack system security;</li>
+                  <li>execute other programs and create new processes;</li>
+                  <li>change file system permissions;</li>
+                  <li>work with subdirectories;</li>
+                  <li>
+                    create or manipulate any GUI items (windows, dialog boxes,
+                    etc);
+                  </li>
+                  <li>work with external devices (sound, printer, etc);</li>
+                  <li>work with OS registry;</li>
+                  <li>do anything else that can stir Polygon functioning.</li>
+                </ul>
+              </li>
+            </ol>
+          </Typography>
+        </Box>
+      </Modal>
+    </div>
+  );
+}