✨ feat: Add login page

Author: plzfday

src/app/login/SubmitBox.tsx

@@ -0,0 +1,25 @@
+'use client';
+import { FormEvent } from 'react';
+import { Box } from '@mui/material';
+
+// This file holds the handling logic for the login form submission.
+export default function LoginSubmitBox({
+  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: 1 }}>
+      {children}
+    </Box>
+  );
+}

src/app/login/page.tsx

@@ -0,0 +1,83 @@
+import {
+  Avatar,
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  Grid,
+  TextField,
+  Typography,
+} from '@mui/material';
+import { LockOutlined } from '@mui/icons-material';
+import Copyright from '@/components/Copyright';
+import CustomLink from '@/components/CustomLink';
+import LoginSubmitBox from './SubmitBox';
+
+export default function Login() {
+  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'>
+          Login
+        </Typography>
+        <LoginSubmitBox>
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            id='email'
+            label='Email Address'
+            name='email'
+            autoComplete='email'
+            autoFocus
+          />
+          <TextField
+            margin='normal'
+            required
+            fullWidth
+            name='password'
+            label='Password'
+            type='password'
+            id='password'
+            autoComplete='current-password'
+          />
+          <FormControlLabel
+            control={<Checkbox value='remember' color='primary' />}
+            label='Remember me'
+          />
+          <Button
+            type='submit'
+            fullWidth
+            variant='contained'
+            sx={{ mt: 3, mb: 2 }}
+          >
+            Login
+          </Button>
+          <Grid container>
+            <Grid item xs>
+              <CustomLink href='#' variant='body2'>
+                Forgot password?
+              </CustomLink>
+            </Grid>
+            <Grid item>
+              <CustomLink href='/register' variant='body2'>
+                {"Don't have an account? Sign Up"}
+              </CustomLink>
+            </Grid>
+          </Grid>
+        </LoginSubmitBox>
+      </Box>
+      <Copyright sx={{ mt: 8, mb: 4 }} />
+    </>
+  );
+}

src/components/Copyright.tsx

@@ -0,0 +1,20 @@
+import { Typography } from '@mui/material';
+import CustomLink from '@/components/CustomLink';
+
+export default function Copyright(props: any) {
+  return (
+    <Typography
+      variant='body2'
+      color='text.secondary'
+      align='center'
+      {...props}
+    >
+      {'Copyright © '}
+      <CustomLink color='inherit' href='https://mui.com/'>
+        Bibimbap
+      </CustomLink>{' '}
+      {new Date().getFullYear()}
+      {'.'}
+    </Typography>
+  );
+}