Create base LoginForm -- nonfunctional

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>
+    );
+};

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 />
+```

src/components/LoginForm/index.js

@@ -0,0 +1 @@
+export { default } from "./LoginForm";