From 298b26f388caceca9a2433476c268f9f06fb9589 Mon Sep 17 00:00:00 2001
From: Ahnaf An Nafee <ahnafnafee@gmail.com>
Date: Mon, 28 Feb 2022 14:01:02 -0500
Subject: [PATCH] slight cleanup

---
 components/SignIn.js               | 35 ++----------------------------
 components/SignUp.js               | 32 +++------------------------
 package.json                       |  1 +
 pages/_app.js                      |  5 +++++
 pages/_document.js                 | 13 +++++++++--
 pages/{auth.js => authenticate.js} | 23 ++++++++++++++++++++
 pages/index.js                     |  2 +-
 styles/global.css                  | 11 ++++++++++
 yarn.lock                          |  5 +++++
 9 files changed, 62 insertions(+), 65 deletions(-)
 create mode 100644 pages/_app.js
 rename pages/{auth.js => authenticate.js} (69%)
 create mode 100644 styles/global.css

diff --git a/components/SignIn.js b/components/SignIn.js
index dce287d..d8e4072 100644
--- a/components/SignIn.js
+++ b/components/SignIn.js
@@ -46,28 +46,16 @@ export default function SignIn() {
 
     return (
         <ThemeProvider theme={theme}>
-            <Container component="main" maxWidth="xs">
+            <Container component="main">
                 <CssBaseline />
                 <Box
                     sx={{
-                        marginTop: 8,
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
                     }}
                 >
-                    <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-                        <LockOutlinedIcon />
-                    </Avatar>
-                    <Typography component="h1" variant="h5">
-                        Sign in
-                    </Typography>
-                    <Box
-                        component="form"
-                        onSubmit={handleSubmit}
-                        noValidate
-                        sx={{ mt: 1 }}
-                    >
+                    <Box component="form" onSubmit={handleSubmit} noValidate>
                         <TextField
                             margin="normal"
                             required
@@ -88,12 +76,6 @@ export default function SignIn() {
                             id="password"
                             autoComplete="current-password"
                         />
-                        <FormControlLabel
-                            control={
-                                <Checkbox value="remember" color="primary" />
-                            }
-                            label="Remember me"
-                        />
                         <Button
                             type="submit"
                             fullWidth
@@ -102,21 +84,8 @@ export default function SignIn() {
                         >
                             Sign In
                         </Button>
-                        <Grid container>
-                            <Grid item xs>
-                                <Link href="#" variant="body2">
-                                    Forgot password?
-                                </Link>
-                            </Grid>
-                            <Grid item>
-                                <Link href="#" variant="body2">
-                                    {"Don't have an account? Sign Up"}
-                                </Link>
-                            </Grid>
-                        </Grid>
                     </Box>
                 </Box>
-                <Copyright sx={{ mt: 8, mb: 4 }} />
             </Container>
         </ThemeProvider>
     );
diff --git a/components/SignUp.js b/components/SignUp.js
index a2ed770..27fa0dd 100644
--- a/components/SignUp.js
+++ b/components/SignUp.js
@@ -39,6 +39,8 @@ export default function SignUp() {
         const data = new FormData(event.currentTarget);
         // eslint-disable-next-line no-console
         console.log({
+            name: data.get("name"),
+            username: data.get("username"),
             email: data.get("email"),
             password: data.get("password"),
         });
@@ -50,18 +52,11 @@ export default function SignUp() {
                 <CssBaseline />
                 <Box
                     sx={{
-                        marginTop: 8,
                         display: "flex",
                         flexDirection: "column",
                         alignItems: "center",
                     }}
                 >
-                    <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
-                        <LockOutlinedIcon />
-                    </Avatar>
-                    <Typography component="h1" variant="h5">
-                        Sign Up
-                    </Typography>
                     <Box
                         component="form"
                         onSubmit={handleSubmit}
@@ -87,7 +82,6 @@ export default function SignUp() {
                             label="Username"
                             name="username"
                             autoComplete="username"
-                            autoFocus
                             variant="outlined"
                         />
                         <TextField
@@ -98,7 +92,6 @@ export default function SignUp() {
                             label="Email Address"
                             name="email"
                             autoComplete="email"
-                            autoFocus
                             variant="outlined"
                         />
                         <TextField
@@ -112,35 +105,16 @@ export default function SignUp() {
                             autoComplete="current-password"
                             variant="outlined"
                         />
-                        <FormControlLabel
-                            control={
-                                <Checkbox value="remember" color="primary" />
-                            }
-                            label="Remember me"
-                        />
                         <Button
                             type="submit"
                             fullWidth
                             variant="contained"
                             sx={{ mt: 3, mb: 2 }}
                         >
-                            Sign In
+                            Sign Up
                         </Button>
-                        <Grid container>
-                            <Grid item xs>
-                                <Link href="#" variant="body2">
-                                    Forgot password?
-                                </Link>
-                            </Grid>
-                            <Grid item>
-                                <Link href="#" variant="body2">
-                                    {"Don't have an account? Sign Up"}
-                                </Link>
-                            </Grid>
-                        </Grid>
                     </Box>
                 </Box>
-                <Copyright sx={{ mt: 8, mb: 4 }} />
             </Container>
         </ThemeProvider>
     );
diff --git a/package.json b/package.json
index 4564322..2ae6e85 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
         "@mui/lab": "^5.0.0-alpha.71",
         "@mui/material": "^5.4.4",
         "formik": "^2.2.9",
+        "formik-mui": "^4.0.0-alpha.3",
         "next": "latest",
         "react": "17.0.2",
         "react-dom": "17.0.2",
diff --git a/pages/_app.js b/pages/_app.js
new file mode 100644
index 0000000..eca83b2
--- /dev/null
+++ b/pages/_app.js
@@ -0,0 +1,5 @@
+import "../styles/global.css";
+
+export default function MyApp({ Component, pageProps }) {
+    return <Component {...pageProps} />;
+}
diff --git a/pages/_document.js b/pages/_document.js
index ad7e411..b518872 100644
--- a/pages/_document.js
+++ b/pages/_document.js
@@ -8,10 +8,19 @@ class MyDocument extends Document {
 
     render() {
         return (
-            <Html>
+            <Html lang="en">
                 <Head>
                     <link
-                        href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
+                        rel="preconnect"
+                        href="https://fonts.googleapis.com"
+                    />
+                    <link
+                        rel="preconnect"
+                        href="https://fonts.gstatic.com"
+                        crossOrigin="true"
+                    />
+                    <link
+                        href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,700&display=swap"
                         rel="stylesheet"
                     />
                 </Head>
diff --git a/pages/auth.js b/pages/authenticate.js
similarity index 69%
rename from pages/auth.js
rename to pages/authenticate.js
index a5bf5f8..9053185 100644
--- a/pages/auth.js
+++ b/pages/authenticate.js
@@ -17,6 +17,7 @@ import {
     CustomTabPanel,
     CustomTabsList,
 } from "../components/CustomTab";
+import Image from "next/image";
 
 function AuthPage(props) {
     const [value, setValue] = React.useState("1");
@@ -27,6 +28,27 @@ function AuthPage(props) {
 
     return (
         <Container>
+            <Head>
+                <title>Authenticate - Bookworm</title>
+            </Head>
+            <div
+                style={{
+                    flexDirection: "column",
+                    justifyContent: "center",
+                    alignContent: "center",
+                    marginTop: 80,
+                    marginBottom: 50,
+                }}
+            >
+                <Image
+                    alt="Mountains"
+                    src="/images/bookworm-logo.png"
+                    layout="responsive"
+                    width={"200"}
+                    height={"30vh"}
+                    objectFit="contain"
+                />
+            </div>
             <TabsUnstyled defaultValue={0}>
                 <CustomTabsList>
                     <CustomTab>Sign In</CustomTab>
@@ -50,4 +72,5 @@ export async function getServerSideProps(context) {
         props: { stars: json.stargazers_count },
     };
 }
+
 export default AuthPage;
diff --git a/pages/index.js b/pages/index.js
index a33e1ea..2d56e1c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -11,7 +11,7 @@ export default function Home() {
                 <title>Welcome to Next.js!</title>
             </Head>
             <div>Welcome to Next.js!</div>
-            <Link href="/auth">
+            <Link href="/authenticate">
                 <a>Users</a>
             </Link>
             <br />
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..0deee5c
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,11 @@
+/* body {
+    font-family: "Poppins", Arial, Helvetica, sans-serif;
+} */
+
+body {
+    font-family: Poppins;
+    margin: 0;
+    padding: 0;
+    /* background: black; */
+    color: white;
+}
diff --git a/yarn.lock b/yarn.lock
index 41d5fd0..8532fc1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1164,6 +1164,11 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.5.tgz#76c8584f4fc843db64702a6bd04ab7a8bd666da3"
   integrity sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==
 
+formik-mui@^4.0.0-alpha.3:
+  version "4.0.0-alpha.3"
+  resolved "https://registry.yarnpkg.com/formik-mui/-/formik-mui-4.0.0-alpha.3.tgz#faca4b439c0653a8a33be97772da50709f0aa8c8"
+  integrity sha512-a696XpNIYulBd3LcwPt1+3BqtArdA/1hZryxMXT9azwucNwMcnnpVMR10yn6Qycd7eT//qv8V+r1XTBn0X8S1w==
+
 formik@^2.2.9:
   version "2.2.9"
   resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.9.tgz#8594ba9c5e2e5cf1f42c5704128e119fc46232d0"