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

created createAccount page

Browse Source
This commit is contained in:
Hawk
2020-04-25 00:52:31 +02:00
parent e2a9aca39f
commit 6951038aba
4 changed files with 173 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/App.js
View File

@@ -9,6 +9,7 @@ import {
} from "react-router-dom";
import Login from './components/login/login';
import CreateAccount from './components/login/createAccount';
import "./App.css";
@@ -34,6 +35,7 @@ class App extends Component {
<BrowserRouter basename="/simcompanies">
<Switch>
<Route exact path="/login" component={Login} />
<Route exact path="/login/createuser" component={CreateAccount} />
<Route path="/*" component={Navbar} />
</Switch>

1
frontend/src/components/content.js
View File

@@ -24,6 +24,7 @@ export default function Content() {
<div className={classes.root}>
<Route exact path="/" component={Overview} />
<Route path="/resources" component={SelectResource} />
<Route path="/resourcechart/:id" render={() => <ResourceChart day={new Date().toUTCString()}></ResourceChart>} />
</div>

152
frontend/src/components/login/createAccount.js Normal file
View File

@@ -0,0 +1,152 @@
import React from 'react';
import { Link } from "react-router-dom";
import { makeStyles, withStyles } from '@material-ui/core/styles';
import Card from '@material-ui/core/Card';
import CardContent from '@material-ui/core/CardContent';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import Logo from "../../img/logo.png";
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
const url = "/simcompanies/API/user/create"
const useStyles = makeStyles(theme => ({
card: {
backgroundColor: "#0B1929",
display: "flex"
},
logo: {
maxWidth: "50%",
height: "auto"
},
input: {
color: "#9daac1"
},
grid: {
display: "flex"
}
}));
const CssTextField = withStyles({
root: {
'& label.Mui-focused': {
color: 'white',
},
'&:hover label': {
color: '#FFC800',
},
'& label': {
color: 'white',
},
'& .MuiOutlinedInput-root': {
'& input': {
color: "white"
},
'& fieldset': {
borderColor: 'white',
color: "white"
},
'&:hover fieldset': {
borderColor: "#FFC800",
},
'&.Mui-focused fieldset': {
borderColor: 'white',
},
},
},
})(TextField);
const putCreateAccount = async (url, data) => {
const response = await fetch(url, {
method: 'PUT',
mode: 'cors',
cache: 'no-cache',
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
});
}
export default function CreateAccount() {
const classes = useStyles();
const [username, setUsername] = React.useState("");
const [password, setPassword] = React.useState("");
const handleClick = (e) => {
if (username !== "" && password !== "") {
putCreateAccount(url, { email: username, password: password })
setUsername("")
setPassword("")
}
}
const handleChangeUSR = (e) => {
setUsername(e.target.value)
}
const handleChangePW = (e) => {
setPassword(e.target.value)
}
return (
<Box className="loginBackground" display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
<Card className={classes.card} raised>
<CardContent>
<Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
<img src={Logo} alt="SC Dashboard Logo" className={classes.logo} />
</Box >
<form>
<Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
<Grid container spacing={2} >
<Grid item xs={12} >
<Box display="flex" justifyContent="center" >
<Typography variant="h4" color="secondary">
Create new Account
</Typography>
</Box >
</Grid>
<Grid item xs={12} >
<Box display="flex" justifyContent="center" >
<CssTextField
id="usernameInput"
label="Username"
variant="outlined"
onChange={handleChangeUSR}
className={classes.input}
/>
</Box >
</Grid>
<Grid item xs={12}>
<Box display="flex" justifyContent="center" >
<CssTextField
id="passwordInput"
type="password"
label="Password"
autoComplete="current-password"
variant="outlined"
onChange={handleChangePW}
className={classes.input}
/>
</Box >
</Grid>
<Grid item xs={12}>
<Box display="flex" justifyContent="center" >
<Button variant="contained" color="secondary" onClick={handleClick}>
Create Account
</Button>
</Box >
</Grid>
</Grid>
</Box >
</form>
</CardContent>
</Card>
</Box >
)
}

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

@@ -9,6 +9,8 @@ import Button from '@material-ui/core/Button';
import Logo from "../../img/logo.png";
import TextField from '@material-ui/core/TextField';
import Grid from '@material-ui/core/Grid';
import Link1 from '@material-ui/core/Link';
import CreateAccount from './createAccount';
const useStyles = makeStyles(theme => ({
@@ -69,6 +71,13 @@ export default function Login() {
<form>
<Box display="flex" justifyContent="center" alignItems="center" m={1} p={1} >
<Grid container spacing={2} >
<Grid item xs={12} >
<Box display="flex" justifyContent="center" >
<Typography variant="h4" color="secondary">
Login
</Typography>
</Box >
</Grid>
<Grid item xs={12} >
<Box display="flex" justifyContent="center" >
<CssTextField
@@ -91,6 +100,15 @@ export default function Login() {
/>
</Box >
</Grid>
<Grid item xs={12}>
<Box display="flex" justifyContent="center" >
<Typography variant="subtitle2" >
<Link1 to="/login/createuser" component={Link} color="secondary">
Create new Account
</Link1>
</Typography>
</Box >
</Grid>
<Grid item xs={12}>
<Box display="flex" justifyContent="center" >
<Button variant="contained" color="secondary">