From 6d24cb5c539a1e39bfd79ace23a8c129396c5ae6 Mon Sep 17 00:00:00 2001 From: Hawk Date: Thu, 30 Apr 2020 20:27:19 +0200 Subject: [PATCH] added login feedback snackbar --- frontend/package-lock.json | 12 +++ frontend/package.json | 81 ++++++++++--------- .../src/components/login/createAccount.js | 8 +- frontend/src/components/login/login.js | 12 +-- .../src/components/login/loginfeedback.js | 51 ++++++++++++ 5 files changed, 115 insertions(+), 49 deletions(-) create mode 100644 frontend/src/components/login/loginfeedback.js diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 482ba0f..0c7b100 100644 --- 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", diff --git a/frontend/package.json b/frontend/package.json index e197578..870a97b 100644 --- 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" -} \ No newline at end of file + "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" +} diff --git a/frontend/src/components/login/createAccount.js b/frontend/src/components/login/createAccount.js index 541ea5c..f1d4c5d 100644 --- 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() { + : ) diff --git a/frontend/src/components/login/login.js b/frontend/src/components/login/login.js index 3dc4036..10ba5ca 100644 --- 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() { + @@ -169,6 +170,7 @@ export default function Login() { + : ) diff --git a/frontend/src/components/login/loginfeedback.js b/frontend/src/components/login/loginfeedback.js new file mode 100644 index 0000000..3ac61d4 --- /dev/null +++ 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 ; +} + +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 ( + + + {props.successText} + + ) + } else if (login != null) { + return ( + + + {props.errorText} + + + ) + } + } + + return ( + + {snack(login)} + + + ) + +}