added login feedback snackbar

frontend/src/components/login/createAccount.js

@@ -10,6 +10,7 @@ import Logo from "../../img/logo.png";
 import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import { Redirect } from "react-router-dom";
+import LoginFeedback from './loginfeedback';
 
 const url = "/simcompanies/API/user/create"
 
@@ -59,14 +60,12 @@ const CssTextField = withStyles({
     },
 })(TextField);
 
-
-
 export default function CreateAccount() {
     const classes = useStyles();
     const [username, setUsername] = React.useState("");
     const [password, setPassword] = React.useState("");
     const [login, setLogin] = React.useState(true);
-
+    const [status, setStatus] = React.useState(null);
 
     const putCreateAccount = async (url, data) => {
         const response = await fetch(url, {
@@ -80,7 +79,7 @@ export default function CreateAccount() {
             referrerPolicy: 'no-referrer',
             body: JSON.stringify(data)
         });
-
+        setStatus(response.status)
         if (response.status == "200") {
             setLogin(false)
         }
@@ -157,6 +156,7 @@ export default function CreateAccount() {
                         </form>
                     </CardContent>
                 </Card>
+                <LoginFeedback login={status} successText="Account created successfully" errorText="Oops something went wrong"></LoginFeedback>
             </Box > : <Redirect to={"/login"} />
     )
 

frontend/src/components/login/login.js

@@ -11,6 +11,7 @@ import TextField from '@material-ui/core/TextField';
 import Grid from '@material-ui/core/Grid';
 import Link1 from '@material-ui/core/Link';
 import { Redirect } from "react-router-dom";
+import LoginFeedback from './loginfeedback';
 
 
 const useStyles = makeStyles(theme => ({
@@ -33,7 +34,7 @@ const useStyles = makeStyles(theme => ({
 const CssTextField = withStyles({
     root: {
         '& label.Mui-focused': {
-            color: 'white',
+            color: "#FFC800",
         },
         '&:hover label': {
             color: '#FFC800',
@@ -53,7 +54,7 @@ const CssTextField = withStyles({
                 borderColor: "#FFC800",
             },
             '&.Mui-focused fieldset': {
-                borderColor: 'white',
+                borderColor: "#FFC800",
             },
         },
     },
@@ -66,7 +67,7 @@ export default function Login() {
     const [username, setUsername] = React.useState("");
     const [password, setPassword] = React.useState("");
     const [login, setLogin] = React.useState(true);
-
+    const [status, setStatus] = React.useState(null);
 
     const postLogin = async (url, data) => {
         const response = await fetch(url, {
@@ -80,7 +81,7 @@ export default function Login() {
             referrerPolicy: 'no-referrer',
             body: JSON.stringify(data)
         });
-
+        setStatus(response.status)
         if (response.status == "200") {
             setLogin(false)
         }
@@ -161,7 +162,7 @@ export default function Login() {
                                         <Box display="flex" justifyContent="center"  >
                                             <Button variant="contained" color="secondary" onClick={handleClick}>
                                                 Login
-                                    </Button>
+                                            </Button>
                                         </Box >
                                     </Grid>
                                 </Grid>
@@ -169,6 +170,7 @@ export default function Login() {
                         </form>
                     </CardContent>
                 </Card>
+                <LoginFeedback login={status} successText="Login Successful" errorText="Wrong Username or Password"></LoginFeedback>
             </Box > : <Redirect to='/' />
     )
 

frontend/src/components/login/loginfeedback.js

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import MuiAlert from '@material-ui/lab/Alert';
+
+function Alert(props) {
+    return <MuiAlert elevation={6} variant="filled" {...props} />;
+}
+
+export default function LoginFeedback(props) {
+    const [login, setLogin] = React.useState(null);
+    const [open, setOpen] = React.useState(true);
+    const [open1, setOpen1] = React.useState(true);
+    useEffect(() => {
+        if (login != props.login) {
+            setLogin(props.login)
+        }
+    }, [login, setLogin, props.login]);
+    const handleClose = (event, reason) => {
+        setOpen(false);
+    };
+    const handleClose1 = (event, reason) => {
+        setOpen1(false);
+    };
+
+    const snack = (login) => {
+        if (login == "200") {
+            return (
+                <Snackbar open={open} autoHideDuration={2000} onClose={handleClose}>
+                    <Alert onClose={handleClose} severity="success">
+                        {props.successText}
+                    </Alert>
+                </Snackbar>)
+        } else if (login != null) {
+            return (
+                <Snackbar open={open1} autoHideDuration={3000} onClose={handleClose1}>
+                    <Alert onClose={handleClose1} severity="error">
+                        {props.errorText}
+                    </Alert>
+                </Snackbar>
+            )
+        }
+    }
+
+    return (
+        <React.Fragment>
+            {snack(login)}
+        </React.Fragment>
+
+    )
+
+}