adds loading to login and password update

Author: Emile Frey

README.md

@@ -12,7 +12,7 @@
 - [ ] 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
-- [ ] error context
-- [ ] show password errors
-- [ ] loading icon on login
-- [ ] forgot password
+- [x] error context
+- [x] show password errors
+- [x] loading icon on login
+- [ ] forgot password functionality

frontend/src/components/Login/Login.tsx

@@ -15,6 +15,7 @@ import * as actions from '../../auth/authActions';
 import { useHistory, useLocation } from "react-router-dom";
 import { AppProps } from '../../App';
 import validationErrorMessages from '../../helpers/validationErrorMessages'
+import { LinearProgress } from '@material-ui/core';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -48,6 +49,7 @@ function Login(props: AppProps) {
   const [username, setuserName] = useState("");
   const [password, setPassword] = useState("");
   const [validationErrors, setValidationErrors] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(false)
 
   let history = useHistory();
   let location = useLocation<LocationState>();
@@ -59,6 +61,7 @@ function Login(props: AppProps) {
 
   useEffect(() => {
     setValidationErrors(props.error ? props.error.response.data.non_field_errors : [])
+    setIsLoading(false)
   }, [props.error])
 
   const handleFormFieldChange = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -73,6 +76,7 @@ function Login(props: AppProps) {
   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
     props.onAuth(username, password);
+    setIsLoading(true)
   }
 
   return (
@@ -111,6 +115,7 @@ function Login(props: AppProps) {
             onChange={handleFormFieldChange}
           />
           {validationErrorMessages(validationErrors)}
+          {isLoading && <LinearProgress color="secondary" />}
           <Button
             type="submit"
             fullWidth

frontend/src/components/Login/PasswordUpdate.tsx

@@ -3,7 +3,7 @@ import axios, { AxiosRequestConfig } from 'axios';
 import * as settings from '../../settings';
 
 import { makeStyles } from '@material-ui/core/styles';
-import { Avatar, Button, Container, CssBaseline, TextField, Typography } from '@material-ui/core';
+import { Avatar, Button, Container, CssBaseline, LinearProgress, TextField, Typography } from '@material-ui/core';
 import VpnKeyIcon from '@material-ui/icons/VpnKey';
 import { AuthProps } from '../../App';
 import { PasswordUpdateError } from '../../interfaces/axios/AxiosError';
@@ -39,6 +39,7 @@ function PasswordUpdate(props: AuthProps) {
   const [new_password2, setNewPassword2] = useState("");
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([])
+  const [isLoading, setIsLoading] = useState(false)
 
   const handleFormFieldChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSuccess(false);
@@ -52,6 +53,7 @@ function PasswordUpdate(props: AuthProps) {
 
   const handleSubmit = (e: React.ChangeEvent<HTMLFormElement>) => {
     e.preventDefault();
+    setIsLoading(true)
     if (new_password1 !== new_password2) {
       setValidationErrors(["Passwords don't match!"])
     } else if (new_password1 === "") {
@@ -72,6 +74,7 @@ function PasswordUpdate(props: AuthProps) {
         (error: PasswordUpdateError) => {
           console.log(error.response.data.new_password2)
           setValidationErrors(error.response.data.new_password2)
+          setIsLoading(false)
         })
     }
   }
@@ -88,7 +91,7 @@ function PasswordUpdate(props: AuthProps) {
           <>
             <Typography component="h1" variant="h5">
               Update Password
-        </Typography>
+            </Typography>
             <form className={classes.form} noValidate onSubmit={handleSubmit}>
               <TextField
                 variant="outlined"
@@ -117,6 +120,7 @@ function PasswordUpdate(props: AuthProps) {
                 helperText={new_password1 !== new_password2 ? "Passwords don't match" : null}
               />
               {validationErrorMessages(validationErrors)}
+              {isLoading && <LinearProgress color="secondary" />}
               <Button
                 type="submit"
                 fullWidth
@@ -133,7 +137,7 @@ function PasswordUpdate(props: AuthProps) {
             variant="contained"
             color="primary"
             href="/"> Return Home
-        </Button>
+          </Button>
         }
       </div >
     </Container >