From 1ef8f64ed0664fc6da52bf67ca58629fa1cedd60 Mon Sep 17 00:00:00 2001
From: kjuulh <contact@kjuulh.io>
Date: Fri, 15 Oct 2021 21:53:27 +0200
Subject: [PATCH] Add login page

---
 .idea/prettier.xml                  |  6 --
 components/layout/defaultLayout.tsx | 94 +++++++++++++----------------
 features/auth/loginFrame.tsx        | 44 ++++++++++++++
 features/auth/signUpFrame.tsx       |  1 +
 pages/auth/index.tsx                | 19 ++++++
 pages/auth/login.tsx                |  4 +-
 pages/auth/sign-up.tsx              |  4 +-
 7 files changed, 113 insertions(+), 59 deletions(-)
 delete mode 100644 .idea/prettier.xml
 create mode 100644 features/auth/loginFrame.tsx
 create mode 100644 features/auth/signUpFrame.tsx
 create mode 100644 pages/auth/index.tsx

diff --git a/.idea/prettier.xml b/.idea/prettier.xml
deleted file mode 100644
index b0ab31a..0000000
--- a/.idea/prettier.xml
+++ /dev/null
@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="PrettierConfiguration">
-    <option name="myRunOnSave" value="true" />
-  </component>
-</project>
\ No newline at end of file
diff --git a/components/layout/defaultLayout.tsx b/components/layout/defaultLayout.tsx
index 3f60196..2c1ced8 100644
--- a/components/layout/defaultLayout.tsx
+++ b/components/layout/defaultLayout.tsx
@@ -1,55 +1,47 @@
-import React, { FC } from "react";
-import {
-  AppBar,
-  Box,
-  Button,
-  Container,
-  Link as MuiLink,
-  Toolbar,
-  Typography,
-} from "@mui/material";
-import { Styling } from "../general/styling";
-import { BreadCrumbs } from "./breadCrumbs";
+import React, {FC} from "react";
+import {AppBar, Box, Button, Container, Link as MuiLink, Toolbar, Typography,} from "@mui/material";
+import {Styling} from "../general/styling";
+import {BreadCrumbs} from "./breadCrumbs";
 import Link from "next/link";
 
-export const DefaultLayout: FC = ({ children }) => (
-  <Styling>
-    <Box
-      sx={{
-        display: "flex",
-        width: "100%",
-        minHeight: "100vh",
-        bgcolor: "background.default",
-        color: "text.primary",
-        flexDirection: "column",
-      }}
-    >
-      <AppBar position="sticky">
-        <Toolbar>
-          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-            OpenFood
-          </Typography>
-          <Box sx={{ display: "flex", gap: 2 }}>
-            <Link href="/auth/login" passHref>
-              <MuiLink>
-                <Button>Login</Button>
-              </MuiLink>
-            </Link>
-            <Link href="/auth/sign-up" passHref>
-              <MuiLink>
-                <Button>Sign up</Button>
-              </MuiLink>
-            </Link>
-          </Box>
-        </Toolbar>
-      </AppBar>
-      <Box sx={{ flexGrow: 1, pt: 2 }}>
-        <Container maxWidth="sm">
-          <BreadCrumbs />
+export const DefaultLayout: FC = ({children}) => (
+    <Styling>
+        <Box
+            sx={{
+                display: "flex",
+                width: "100%",
+                minHeight: "100vh",
+                bgcolor: "background.default",
+                color: "text.primary",
+                flexDirection: "column",
+            }}
+        >
+            <AppBar position="sticky">
+                <Toolbar>
+                    <Typography variant="h6" component="div" sx={{flexGrow: 1}}>
+                        OpenFood
+                    </Typography>
+                    <Box sx={{display: "flex", gap: 2}}>
+                        <Link href="/auth/login" passHref>
+                            <MuiLink>
+                                <Button>Login</Button>
+                            </MuiLink>
+                        </Link>
+                        <Link href="/auth/sign-up" passHref>
+                            <MuiLink>
+                                <Button>Sign up</Button>
+                            </MuiLink>
+                        </Link>
+                    </Box>
+                </Toolbar>
+            </AppBar>
+            <Box sx={{flexGrow: 1, pt: 2}}>
+                <Container maxWidth="md">
+                    <BreadCrumbs/>
 
-          <Box sx={{ p: 2 }}>{children}</Box>
-        </Container>
-      </Box>
-    </Box>
-  </Styling>
+                    <Box sx={{p: 2, mt: 2}}>{children}</Box>
+                </Container>
+            </Box>
+        </Box>
+    </Styling>
 );
diff --git a/features/auth/loginFrame.tsx b/features/auth/loginFrame.tsx
new file mode 100644
index 0000000..fd1f9df
--- /dev/null
+++ b/features/auth/loginFrame.tsx
@@ -0,0 +1,44 @@
+import {Box, Button, Container, Grid, TextField, Typography} from "@mui/material";
+
+const AuthScreen = ({children}) => (
+    <Container maxWidth="sm">
+        <Box sx={{bgcolor: "action.hover", borderRadius: 2, p: 3}}>
+            <Typography textAlign="center" variant="h6" component="h4" sx={{mb: 1}}>
+                Sign in to your account
+            </Typography>
+            <Box sx={{py: 2}}>{children}</Box>
+        </Box>
+    </Container>
+);
+
+export const LoginFrame = () => (
+
+
+    <AuthScreen>
+        <form>
+            <Grid container spacing={2}>
+                <Grid item xs={12}>
+                    <TextField
+                        type="email"
+                        required
+                        placeholder="Email"
+                        fullWidth
+                        label="Email"
+                    />
+                </Grid>
+                <Grid item xs={12}>
+                    <TextField
+                        required
+                        placeholder="Password"
+                        type="password"
+                        fullWidth
+                        label="Password"
+                    />
+                </Grid>
+                <Grid item xs={12}>
+                    <Button variant="contained" fullWidth sx={{mt: 2}}>Sign in</Button>
+                </Grid>
+            </Grid>
+        </form>
+    </AuthScreen>
+);
diff --git a/features/auth/signUpFrame.tsx b/features/auth/signUpFrame.tsx
new file mode 100644
index 0000000..41c79be
--- /dev/null
+++ b/features/auth/signUpFrame.tsx
@@ -0,0 +1 @@
+export const SignUpFrame = () => <div>Sign up frame</div>;
diff --git a/pages/auth/index.tsx b/pages/auth/index.tsx
new file mode 100644
index 0000000..0cc4370
--- /dev/null
+++ b/pages/auth/index.tsx
@@ -0,0 +1,19 @@
+import { Grid } from "@mui/material";
+import { LoginFrame } from "../../features/auth/loginFrame";
+import { SignUpFrame } from "../../features/auth/signUpFrame";
+
+const AuthPage = () => {
+  return (
+    <Grid container>
+      <Grid item xs={12} sm={6}>
+        <LoginFrame />
+      </Grid>
+
+      <Grid item xs={12} sm={6}>
+        <SignUpFrame />
+      </Grid>
+    </Grid>
+  );
+};
+
+export default AuthPage;
diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx
index 1f0f5f3..276c243 100644
--- a/pages/auth/login.tsx
+++ b/pages/auth/login.tsx
@@ -1,5 +1,7 @@
+import { LoginFrame } from "../../features/auth/loginFrame";
+
 const LoginPage = () => {
-  return <div>Login page</div>;
+  return <LoginFrame />;
 };
 
 export default LoginPage;
diff --git a/pages/auth/sign-up.tsx b/pages/auth/sign-up.tsx
index 7adae56..bcc5ce5 100644
--- a/pages/auth/sign-up.tsx
+++ b/pages/auth/sign-up.tsx
@@ -1,5 +1,7 @@
+import { SignUpFrame } from "../../features/auth/signUpFrame";
+
 const SignUpPage = () => {
-  return <div>Sign up page</div>;
+  return <SignUpFrame />;
 };
 
 export default SignUpPage;