SimCompanies/dashboard
2
1
Fork 0
Code Issues 17 Pull Requests Releases Activity

added login feedback snackbar

Browse Source
This commit is contained in:
Hawk
2020-04-30 20:27:19 +02:00
parent 35f848aca0
commit 6d24cb5c53
5 changed files with 115 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
frontend/package-lock.json generated
View File

@@ -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",

79
frontend/package.json
View File

@@ -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"
}

8
frontend/src/components/login/createAccount.js
View File

@@ -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"} />
)

12
frontend/src/components/login/login.js
View File

@@ -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='/' />
)

51
frontend/src/components/login/loginfeedback.js Normal file
View File

@@ -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>
)
}