Integrate API login and error handling

src/components/LoginForm/LoginForm.js

@@ -1,17 +1,31 @@
 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/";
+import { Alert } from '@material-ui/lab';
+import { useLogin, useLoginSetter, useTokenSetter } from "../AuthProvider/";
+import { login } from "../../auth/";
 
 export default function LoginForm() {
     const [username, setUsername] = useState("");
     const [password, setPassword] = useState("");
+    const [error, setError] = useState(false);
 
     const handleUsernameChange = (event) => setUsername(event.target.value);
     const handlePasswordChange = (event) => setPassword(event.target.value);
 
-    const handleSubmit = (event) => {
+    const setLogin = useLoginSetter();
+    const setToken = useTokenSetter();
+    const handleSubmit = async (event) => {
         event.preventDefault();
+        let access_token = await login(username, password);
+
+        if (!access_token){
+            setError(true);
+            return false;
+        }
+
+        setLogin(true);
+        setToken(access_token);
         return true;
     }
 
@@ -30,6 +44,9 @@ export default function LoginForm() {
             width: theme.spacing(10),
             height: theme.spacing(10)
         },
+        "alert_root": {
+            marginTop: theme.spacing(2)
+        },
         "paper_root": {
             minWidth: theme.breakpoints.values.sm/2,
             padding: theme.spacing(3),
@@ -49,6 +66,14 @@ export default function LoginForm() {
         return <Redirect to="/"/>
     }
 
+    const LoginErrorAlert = _ => {
+        return (
+            <Alert severity="error" classes={{ root: classes.alert_root }}>
+                Username or password is incorrect.
+            </Alert>
+        );
+    }
+
     return (
         <Box classes={{ root: classes.box_root }}>
             <form onSubmit={handleSubmit}>
@@ -60,6 +85,7 @@ export default function LoginForm() {
                     <Typography variant="h4">
                         Sign In
                     </Typography>
+                    { error && <LoginErrorAlert /> }
                     <TextField 
                         type="text" 
                         id="username"