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" "@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": { "@material-ui/styles": {
"version": "4.9.10", "version": "4.9.10",
"resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.9.10.tgz",

81
frontend/package.json
View File

@@ -1,41 +1,42 @@
{ {
"name": "simcompanies-dashboard", "name": "simcompanies-dashboard",
"version": "0.1.0", "version": "0.1.0",
"homepage": "https://projects.oliver.boehlk.io/simcompanies/", "homepage": "https://projects.oliver.boehlk.io/simcompanies/",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@material-ui/core": "^4.9.8", "@material-ui/core": "^4.9.8",
"@material-ui/icons": "^4.9.1", "@material-ui/icons": "^4.9.1",
"@testing-library/jest-dom": "^4.2.4", "@material-ui/lab": "^4.0.0-alpha.51",
"@testing-library/react": "^9.4.0", "@testing-library/jest-dom": "^4.2.4",
"@testing-library/user-event": "^7.2.1", "@testing-library/react": "^9.4.0",
"react": "^16.12.0", "@testing-library/user-event": "^7.2.1",
"react-dom": "^16.12.0", "react": "^16.12.0",
"react-router-dom": "^5.1.2", "react-dom": "^16.12.0",
"react-scripts": "3.4.0", "react-router-dom": "^5.1.2",
"typeface-roboto": "0.0.75", "react-scripts": "3.4.0",
"recharts": "^1.8.5" "recharts": "^1.8.5",
}, "typeface-roboto": "0.0.75"
"scripts": { },
"start": "react-scripts start", "scripts": {
"build": "react-scripts build", "start": "react-scripts start",
"test": "react-scripts test", "build": "react-scripts build",
"eject": "react-scripts eject" "test": "react-scripts test",
}, "eject": "react-scripts eject"
"eslintConfig": { },
"extends": "react-app" "eslintConfig": {
}, "extends": "react-app"
"browserslist": { },
"production": [ "browserslist": {
">0.2%", "production": [
"not dead", ">0.2%",
"not op_mini all" "not dead",
], "not op_mini all"
"development": [ ],
"last 1 chrome version", "development": [
"last 1 firefox version", "last 1 chrome version",
"last 1 safari version" "last 1 firefox version",
] "last 1 safari version"
}, ]
"proxy": "http://127.0.0.1:3001" },
} "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 TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid'; import Grid from '@material-ui/core/Grid';
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import LoginFeedback from './loginfeedback';
const url = "/simcompanies/API/user/create" const url = "/simcompanies/API/user/create"
@@ -59,14 +60,12 @@ const CssTextField = withStyles({
}, },
})(TextField); })(TextField);
export default function CreateAccount() { export default function CreateAccount() {
const classes = useStyles(); const classes = useStyles();
const [username, setUsername] = React.useState(""); const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState(""); const [password, setPassword] = React.useState("");
const [login, setLogin] = React.useState(true); const [login, setLogin] = React.useState(true);
const [status, setStatus] = React.useState(null);
const putCreateAccount = async (url, data) => { const putCreateAccount = async (url, data) => {
const response = await fetch(url, { const response = await fetch(url, {
@@ -80,7 +79,7 @@ export default function CreateAccount() {
referrerPolicy: 'no-referrer', referrerPolicy: 'no-referrer',
body: JSON.stringify(data) body: JSON.stringify(data)
}); });
setStatus(response.status)
if (response.status == "200") { if (response.status == "200") {
setLogin(false) setLogin(false)
} }
@@ -157,6 +156,7 @@ export default function CreateAccount() {
</form> </form>
</CardContent> </CardContent>
</Card> </Card>
<LoginFeedback login={status} successText="Account created successfully" errorText="Oops something went wrong"></LoginFeedback>
</Box > : <Redirect to={"/login"} /> </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 Grid from '@material-ui/core/Grid';
import Link1 from '@material-ui/core/Link'; import Link1 from '@material-ui/core/Link';
import { Redirect } from "react-router-dom"; import { Redirect } from "react-router-dom";
import LoginFeedback from './loginfeedback';
const useStyles = makeStyles(theme => ({ const useStyles = makeStyles(theme => ({
@@ -33,7 +34,7 @@ const useStyles = makeStyles(theme => ({
const CssTextField = withStyles({ const CssTextField = withStyles({
root: { root: {
'& label.Mui-focused': { '& label.Mui-focused': {
color: 'white', color: "#FFC800",
}, },
'&:hover label': { '&:hover label': {
color: '#FFC800', color: '#FFC800',
@@ -53,7 +54,7 @@ const CssTextField = withStyles({
borderColor: "#FFC800", borderColor: "#FFC800",
}, },
'&.Mui-focused fieldset': { '&.Mui-focused fieldset': {
borderColor: 'white', borderColor: "#FFC800",
}, },
}, },
}, },
@@ -66,7 +67,7 @@ export default function Login() {
const [username, setUsername] = React.useState(""); const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState(""); const [password, setPassword] = React.useState("");
const [login, setLogin] = React.useState(true); const [login, setLogin] = React.useState(true);
const [status, setStatus] = React.useState(null);
const postLogin = async (url, data) => { const postLogin = async (url, data) => {
const response = await fetch(url, { const response = await fetch(url, {
@@ -80,7 +81,7 @@ export default function Login() {
referrerPolicy: 'no-referrer', referrerPolicy: 'no-referrer',
body: JSON.stringify(data) body: JSON.stringify(data)
}); });
setStatus(response.status)
if (response.status == "200") { if (response.status == "200") {
setLogin(false) setLogin(false)
} }
@@ -161,7 +162,7 @@ export default function Login() {
<Box display="flex" justifyContent="center" > <Box display="flex" justifyContent="center" >
<Button variant="contained" color="secondary" onClick={handleClick}> <Button variant="contained" color="secondary" onClick={handleClick}>
Login Login
</Button> </Button>
</Box > </Box >
</Grid> </Grid>
</Grid> </Grid>
@@ -169,6 +170,7 @@ export default function Login() {
</form> </form>
</CardContent> </CardContent>
</Card> </Card>
<LoginFeedback login={status} successText="Login Successful" errorText="Wrong Username or Password"></LoginFeedback>
</Box > : <Redirect to='/' /> </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>
)
}