Merge branch 'f/frontend-login' into 'develop'

✨ added login page

See merge request fia72-dev/eva_lernsituation!18

Frontend/src/components/App.js

@@ -5,7 +5,6 @@ import Login from "./Login.js";
 import { Box } from "@material-ui/core";
 import Aufnahmeantrag from "./Aufnahmeantrag.js";
 import { createMuiTheme, MuiThemeProvider } from "@material-ui/core";
-import { green, yellow } from "@material-ui/core/colors";
 
 const theme = createMuiTheme({
   palette: {

Frontend/src/components/Login.js

@@ -1,36 +1,80 @@
 import React, { Component } from "react";
-import TextField from "@material-ui/core/TextField";
+import { TextField, Typography, Grid, Fab, Container } from "@material-ui/core";
+import SendIcon from "@material-ui/icons/Send";
+import { withStyles, createStyles } from "@material-ui/styles";
+
+const useStyles = createStyles(theme => ({
+  textField: {
+    margingLeft: theme.spacing(1),
+    marginRight: theme.spacing(1)
+  },
+  fab: {
+    margin: theme.spacing(1)
+  },
+  form: {
+    backgroundColor: "#f5f5f5",
+    borderRadius: "5px",
+    margin: "20px",
+    padding: "20px",
+    boxShadow: "0px 0px 5px 0px lightgrey",
+    border: "1px solid lightgrey"
+  }
+}));
 
 class Login extends Component {
-  state = {};
+  state = { username: "", password: "" };
+
+  handleChange = name => event => {
+    this.setState({ [name]: event.target.value });
+  };
+
   render() {
+    const classes = this.props.classes;
+
     return (
-      <form>
-        <TextField
-          variant="outlined"
-          margin="normal"
-          required
-          fullWidth
-          id="email"
-          label="Email Address"
-          name="email"
-          autoComplete="email"
-          autoFocus
-        />
-        <TextField
-          type="password"
-          variant="outlined"
-          margin="normal"
-          required
-          fullWidth
-          id="password"
-          label="Password"
-          name="password"
-          autoComplete="password"
-        />
-      </form>
+      <Container maxWidth="md">
+        <div className={classes.form}>
+          <Grid container direction="row" justify="center" alignItems="center">
+            <Grid container spacing={1}>
+              <Grid item xs={12}>
+                <Typography align="center" variant="h4">
+                  Login
+                </Typography>
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Username"
+                  className={classes.textField}
+                  value={this.state.username}
+                  onChange={this.handleChange("username")}
+                  margin="normal"
+                  variant="outlined"
+                />
+              </Grid>
+              <Grid item xs={12}>
+                <TextField
+                  fullWidth={true}
+                  id="outlined-name"
+                  label="Password"
+                  className={classes.textField}
+                  value={this.state.password}
+                  onChange={this.handleChange("password")}
+                  margin="normal"
+                  variant="outlined"
+                  type="password"
+                />
+              </Grid>
+            </Grid>
+            <Fab color="primary" aria-label="Send" className={classes.fab}>
+              <SendIcon />
+            </Fab>
+          </Grid>
+        </div>
+      </Container>
     );
   }
 }
 
-export default Login;
+export default withStyles(useStyles)(Login);