WIP dding alert display

Author: Emile Frey

README.md

@@ -4,11 +4,15 @@
 - [ ] Readme (setup and how to remove remnants of dummy stuff)
 - [x] Material UI Theme
 - [ ] Auto Logout with Failed Request
-- [ ] Auto Generation of Left Nav based on Routes
+- [ ] Auto Generation of Left Nav based on Routes?
 - [x] Fix NGINX Docker Compose
 - [ ] Create Axios Interfaces (like in TS)
 - [ ] Password Reset Email?
-- [ ] Scripting?
+- [ ] Scripting for setup?
 - [ ] Are we in good shape to deploy?
 - [ ] Update and Pin versions (remove anything unused)
-- [x] fix django admin not serving css files on admin page
+- [x] fix django admin not serving css files on admin page
+- [ ] error context
+- [ ] show password errors
+- [ ] loading icon on login
+- [ ] forgot password

frontend/package-lock.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "@material-ui/core": "^4.11.0",
     "@material-ui/icons": "^4.9.1",
+    "@material-ui/lab": "^4.0.0-alpha.57",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",

frontend/package.json

@@ -11,6 +11,14 @@ export interface AuthProps {
   setAuthenticatedIfRequired: Function
   onAuth: Function
   token: string
+  error: {
+    message: string
+    response: {
+      data: {
+        non_field_errors: string[]
+      }
+    }
+  }
 }
 
 export interface AppProps extends AuthProps, PrivateRouteProps { }
@@ -34,15 +42,24 @@ function App(props: AppProps) {
 
 interface MapStateToPropsInterface {
   auth: {
-    token: string
+    token: string,
+    error: {
+      message: string
+      response: {
+        data: {
+          non_field_errors: string[]
+        }
+      }
+    }
   }
 }
 
 //This means that one or more of the redux states in the store are available as props
 const mapStateToProps = (state: MapStateToPropsInterface) => {
   return {
     isAuthenticated: state.auth.token !== null && typeof state.auth.token !== 'undefined',
-    token: state.auth.token
+    token: state.auth.token,
+    error: state.auth.error
   }
 }
 

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import Popper from '@material-ui/core/Popper';
 import MenuList from '@material-ui/core/MenuList';
 import { Children } from '../../interfaces/Children'
 import { IconButton } from '@material-ui/core';
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 
 interface DropdownMenuProps {
   children: Children
@@ -54,6 +55,7 @@ export default function DropdownMenu(props: DropdownMenuProps) {
         ref={anchorRef}
       >
         {props.dropdownButtonIcon}
+        <ArrowDropDownIcon />
       </IconButton>
       <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal>
         {({ TransitionProps, placement }) => (

frontend/src/components/Layout/DropdownMenu.tsx

@@ -1,4 +1,4 @@
-import React, { Dispatch, useState } from 'react';
+import React, { Dispatch, useState, useEffect } from 'react';
 import Avatar from '@material-ui/core/Avatar';
 import Button from '@material-ui/core/Button';
 import CssBaseline from '@material-ui/core/CssBaseline';
@@ -14,6 +14,7 @@ import * as actions from '../../auth/authActions';
 
 import { useHistory, useLocation } from "react-router-dom";
 import { AppProps } from '../../App';
+import MuiAlert from '@material-ui/lab/Alert';
 
 
 const useStyles = makeStyles((theme) => ({
@@ -47,15 +48,20 @@ function Login(props: AppProps) {
   const classes = useStyles();
   const [username, setuserName] = useState("");
   const [password, setPassword] = useState("");
+  const [validationErrors, setValidationErrors] = useState<string[]>([])
 
   let history = useHistory();
   let location = useLocation<LocationState>();
   let { from } = location.state || { from: { pathname: "/" } };
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (props.isAuthenticated) { history.replace(from) };
   });
 
+  useEffect(() => {
+    setValidationErrors(props.error.response.data.non_field_errors)
+  }, [props.error])
+
 
   const handleFormFieldChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     switch (event.target.id) {
@@ -71,6 +77,13 @@ function Login(props: AppProps) {
     props.onAuth(username, password);
   }
 
+  const validationErrorMessages = (
+		validationErrors.map((value, index) => (
+			<MuiAlert key={index} elevation={6} variant="filled" severity="warning" id="Validation-Message">{value}</MuiAlert>
+		))
+	);
+
+
   return (
     <Container component="main" maxWidth="xs">
       <CssBaseline />