added login feedback snackbar

2020-04-30 20:27:19 +02:00
parent 35f848aca0
commit 6d24cb5c53
5 changed files with 115 additions and 49 deletions
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1292,6 +1292,18 @@
        "@babel/runtime": "^7.4.4"
      }
    },
+    "@material-ui/lab": {
+      "version": "4.0.0-alpha.51",
+      "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-4.0.0-alpha.51.tgz",
+      "integrity": "sha512-X/qv/sZQGhXhKDn83L94gNahGDQj2Rd6r7/9tPpQbSn2A1LAt1+jlTiWD1HUgDXZEPqTsJMajOjWSEmTL7/q7w==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@material-ui/utils": "^4.9.6",
+        "clsx": "^1.0.4",
+        "prop-types": "^15.7.2",
+        "react-is": "^16.8.0"
+      }
+    },
    "@material-ui/styles": {
      "version": "4.9.10",
      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,41 +1,42 @@
 {
-  "name": "simcompanies-dashboard",
-  "version": "0.1.0",
-  "homepage": "https://projects.oliver.boehlk.io/simcompanies/",
-  "private": true,
-  "dependencies": {
-    "@material-ui/core": "^4.9.8",
-    "@material-ui/icons": "^4.9.1",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.4.0",
-    "@testing-library/user-event": "^7.2.1",
-    "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.0",
-    "typeface-roboto": "0.0.75",
-    "recharts": "^1.8.5"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": "react-app"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "proxy": "http://127.0.0.1:3001"
-}
+    "name": "simcompanies-dashboard",
+    "version": "0.1.0",
+    "homepage": "https://projects.oliver.boehlk.io/simcompanies/",
+    "private": true,
+    "dependencies": {
+        "@material-ui/core": "^4.9.8",
+        "@material-ui/icons": "^4.9.1",
+        "@material-ui/lab": "^4.0.0-alpha.51",
+        "@testing-library/jest-dom": "^4.2.4",
+        "@testing-library/react": "^9.4.0",
+        "@testing-library/user-event": "^7.2.1",
+        "react": "^16.12.0",
+        "react-dom": "^16.12.0",
+        "react-router-dom": "^5.1.2",
+        "react-scripts": "3.4.0",
+        "recharts": "^1.8.5",
+        "typeface-roboto": "0.0.75"
+    },
+    "scripts": {
+        "start": "react-scripts start",
+        "build": "react-scripts build",
+        "test": "react-scripts test",
+        "eject": "react-scripts eject"
+    },
+    "eslintConfig": {
+        "extends": "react-app"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "proxy": "http://127.0.0.1:3001"
+}
--- a/frontend/src/components/login/createAccount.js
+++ b/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"} />
    )

--- a/frontend/src/components/login/login.js
+++ b/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='/' />
    )

--- a/frontend/src/components/login/loginfeedback.js
+++ b/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>
+
+    )
+
+}