From 4e40b028fe4101d957eb3d0897fd576677fb50e9 Mon Sep 17 00:00:00 2001
From: Justin Campbell <campb303@w2vm4.ecn.purdue.edu>
Date: Fri, 13 Nov 2020 15:09:53 -0500
Subject: [PATCH] Create base LoginForm -- nonfunctional

---
 src/components/LoginForm/LoginForm.js | 100 ++++++++++++++++++++++++++
 src/components/LoginForm/LoginForm.md |  11 +++
 src/components/LoginForm/index.js     |   1 +
 3 files changed, 112 insertions(+)
 create mode 100644 src/components/LoginForm/LoginForm.js
 create mode 100644 src/components/LoginForm/LoginForm.md
 create mode 100644 src/components/LoginForm/index.js

diff --git a/src/components/LoginForm/LoginForm.js b/src/components/LoginForm/LoginForm.js
new file mode 100644
index 0000000..ee4e902
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.js
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import { Box, Paper, TextField, Button, Avatar, Typography, useTheme, makeStyles } from "@material-ui/core";
+import { Redirect } from "react-router-dom";
+import { useLogin } from "../AuthProvider/";
+
+export default function LoginForm() {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleUsernameChange = (event) => setUsername(event.target.value);
+    const handlePasswordChange = (event) => setPassword(event.target.value);
+
+    const handleSubmit = (event) => {
+        event.preventDefault();
+        return true;
+    }
+
+    const theme = useTheme();
+    const useStyles = makeStyles({
+        "box_root": {
+            background: `linear-gradient(120deg, ${theme.palette.secondary.main}30 0%, ${theme.palette.primary.main}10 100%)`,
+            width: "100%",
+            height: "100vh",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center"
+        },
+        "avatar_root": {
+            padding: theme.spacing(1),
+            width: theme.spacing(10),
+            height: theme.spacing(10)
+        },
+        "paper_root": {
+            minWidth: theme.breakpoints.values.sm/2,
+            padding: theme.spacing(3),
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        "button_root": {
+            marginTop: theme.spacing(2)
+        }
+    })
+    const classes = useStyles();
+
+    const isLoggedIn = useLogin();
+    if (isLoggedIn) {
+        return <Redirect to="/"/>
+    }
+
+    return (
+        <Box classes={{ root: classes.box_root }}>
+            <form onSubmit={handleSubmit}>
+                <Paper classes={{ root: classes.paper_root }}>
+                    <Avatar 
+                        src={process.env.PUBLIC_URL + "/logo512.png"}
+                        classes={{ root: classes.avatar_root }}
+                    />
+                    <Typography variant="h4">
+                        Sign In
+                    </Typography>
+                    <TextField 
+                        type="text" 
+                        id="username" 
+                        name="username" 
+                        label="Username" 
+                        fullWidth
+                        value={username}
+                        onChange={handleUsernameChange}
+                        autoFocus 
+                        margin="normal"
+                        variant="outlined"     
+                    />
+                    <TextField 
+                        type="password" 
+                        id="password" 
+                        name="password" 
+                        label="Password" 
+                        fullWidth
+                        value={password}
+                        onChange={handlePasswordChange}
+                        margin="normal" 
+                        variant="outlined"
+                    />
+                    <Button  
+                        color="primary" 
+                        size="large" 
+                        variant="contained"
+                        fullWidth
+                        classes={{ root: classes.button_root }}
+                        type="submit"
+                    >
+                        Sign In
+                    </Button>
+                </Paper>
+            </form>
+        </Box>
+    );
+};
\ No newline at end of file
diff --git a/src/components/LoginForm/LoginForm.md b/src/components/LoginForm/LoginForm.md
new file mode 100644
index 0000000..7e0553c
--- /dev/null
+++ b/src/components/LoginForm/LoginForm.md
@@ -0,0 +1,11 @@
+The LoginForm acts as the only public facing page for the webqueue2. If any part of the app is access without access tokens, the user will be redirected here. It takes a username and password, attempts to login an, if successful, sets access tokens and redirects users to webqueue2.
+
+---
+```jsx
+import LoginForm from "./LoginForm";
+
+<LoginForm />
+```
+```jsx static
+<LoginForm />
+```
\ No newline at end of file
diff --git a/src/components/LoginForm/index.js b/src/components/LoginForm/index.js
new file mode 100644
index 0000000..3789b92
--- /dev/null
+++ b/src/components/LoginForm/index.js
@@ -0,0 +1 @@
+export { default } from "./LoginForm";
\ No newline at end of file