WIP login page and authentication code

2019-05-14 22:47:04 +01:00
parent f93804c240
commit c74c287e21
8 changed files with 337 additions and 27 deletions
--- a/interface/src/containers/LoginPage.js
+++ b/interface/src/containers/LoginPage.js
@@ -0,0 +1,104 @@
+import React, { Component } from 'react';
+
+import { withStyles } from '@material-ui/core/styles';
+import { TextValidator, ValidatorForm } from 'react-material-ui-form-validator';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import Fab from '@material-ui/core/Fab';
+import { APP_NAME } from '../constants/App';
+import ForwardIcon from '@material-ui/icons/Forward';
+
+const styles = theme => ({
+  loginPage: {
+    padding: theme.spacing.unit * 2,
+    height: "100vh",
+    display: "flex"
+  },
+  loginPanel: {
+    margin: "auto",
+    padding: theme.spacing.unit * 2,
+    paddingTop: "200px",
+    backgroundImage: 'url("/app/icon.png")',
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "50% "+ theme.spacing.unit * 2 +"px",
+    backgroundSize: "auto 150px",
+    textAlign: "center"
+  },
+  extendedIcon: {
+    marginRight: theme.spacing.unit,
+  },
+  loadingSettings: {
+    margin: theme.spacing.unit,
+  },
+  loadingSettingsDetails: {
+    margin: theme.spacing.unit * 4,
+    textAlign: "center"
+  },
+  textField: {
+    width: "100%"
+  },
+  button: {
+    marginRight: theme.spacing.unit * 2,
+    marginTop: theme.spacing.unit * 2,
+  }
+});
+
+class LoginPage extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      username: '',
+      password: ''
+    };
+  }
+
+  handleValueChange = name => event => {
+    this.setState({ [name]: event.target.value });
+  };
+
+  onSubmit = event => {
+    // TODO
+  };
+
+  render() {
+    const { username, password } = this.state;
+    const { classes } = this.props;
+    return (
+      <div className={classes.loginPage}>
+        <Paper className={classes.loginPanel}>
+          <Typography variant="h4">{APP_NAME}</Typography>
+          <ValidatorForm onSubmit={this.onSubmit}>
+            <TextValidator
+              validators={['required']}
+              errorMessages={['Username is required']}
+              name="username"
+              label="Username"
+              className={classes.textField}
+              value={username}
+              onChange={this.handleValueChange('username')}
+              margin="normal"
+            />
+            <TextValidator
+              validators={['required']}
+              errorMessages={['Password is required']}
+              name="password"
+              label="Password"
+              className={classes.textField}
+              value={password}
+              onChange={this.handleValueChange('password')}
+              margin="normal"
+            />
+            <Fab variant="extended" color="primary" className={classes.button} type="submit">
+              <ForwardIcon className={classes.extendedIcon} />
+              Login
+            </Fab>
+          </ValidatorForm>
+        </Paper>
+      </div>
+    );
+  }
+
+}
+
+export default withStyles(styles)(LoginPage);