From 6951038aba096b10d24bbad88d6a3873dcd34ca5 Mon Sep 17 00:00:00 2001
From: Hawk <falk.ba@gmx.de>
Date: Sat, 25 Apr 2020 00:52:31 +0200
Subject: [PATCH] created createAccount page

---
 frontend/src/App.js                           |   2 +
 frontend/src/components/content.js            |   1 +
 .../src/components/login/createAccount.js     | 152 ++++++++++++++++++
 frontend/src/components/login/login.js        |  18 +++
 4 files changed, 173 insertions(+)
 create mode 100644 frontend/src/components/login/createAccount.js

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3a95573..3ee77e8 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -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>
 
diff --git a/frontend/src/components/content.js b/frontend/src/components/content.js
index 857f5da..7c544aa 100644
--- a/frontend/src/components/content.js
+++ b/frontend/src/components/content.js
@@ -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>
diff --git a/frontend/src/components/login/createAccount.js b/frontend/src/components/login/createAccount.js
new file mode 100644
index 0000000..b6e65ee
--- /dev/null
+++ b/frontend/src/components/login/createAccount.js
@@ -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 >
+    )
+
+}
diff --git a/frontend/src/components/login/login.js b/frontend/src/components/login/login.js
index 352c356..68355ba 100644
--- a/frontend/src/components/login/login.js
+++ b/frontend/src/components/login/login.js
@@ -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">