text: import React from 'react';
  import Avatar from '@material-ui/core/Avatar';
  import Button from '@material-ui/core/Button';
  import CssBaseline from '@material-ui/core/CssBaseline';
  import TextField from '@material-ui/core/TextField';
  import FormControlLabel from '@material-ui/core/FormControlLabel';
  import Checkbox from '@material-ui/core/Checkbox';
  import Link from '@material-ui/core/Link';
  import Grid from '@material-ui/core/Grid';
  import Box from '@material-ui/core/Box';
  import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
  import Typography from '@material-ui/core/Typography';
  import { withStyles } from '@material-ui/core/styles';
  import Container from '@material-ui/core/Container';
  import { connect } from "react-redux";
  import { loginUser } from "../../actions/auth"
  import { withRouter, Redirect } from 'react-router-dom';
  
  
  function Copyright() {
    return (
      <Typography variant="body2" color="textSecondary" align="center">
        {'Copyright © '}
        <Link color="primary" href="https://material-ui.com/">
          LifTOvers
        </Link>{' '}
        {new Date().getFullYear()}
        {'.'}
      </Typography>
    );
  }
  
  const styles = theme => ({
    '@global': {
      body: {
        backgroundColor: theme.palette.common.white,
      },
    },
    paper: {
      marginTop: theme.spacing(10),
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main,
    },
    form: {
      width: '100%', // Fix IE 11 issue.
      marginTop: theme.spacing(1),
    },
    submit: {
      margin: theme.spacing(3, 0, 2),
    },
  });
  
  class Login extends React.Component {
    constructor() {
      super();
      this.state = {
        email: "",
        password: "", 
      };
    }
  
    componentDidMount() {
      if (this.props.auth.isAuthenticated) { 
          this.props.history.push(this.path);
      }
    }
  
    // componentWillReceiveProps(nextProps) {
    //   if (nextProps.auth.isAuthenticated) {
    //       this.props.history.push(this.path);
    //   }
    // }
  
    onChange = (e) => {
      this.setState({ [e.target.id]: e.target.value })
    }
  
    onSubmit = (e) => {
      e.preventDefault();
      const user = { 
        email: this.state.email,
        password: this.state.password
      };
      this.props.loginUser(user);
    }
  
    sendAlert = (e) => {
      e.preventDefault()
      alert('Please contact liftover admins')
    }
  
    render() {
      if (this.props.auth.isAuthenticated) {
        if (this.props.auth.user === {}) {
          return <Redirect to={'/login'}></Redirect>;
        } else if (this.props.auth.user.role === "admin") {
          return <Redirect to={'/dashboard'}></Redirect>;
        } else {
          return <Redirect to={'/requests'}></Redirect>;
        }
      }
      const { classes } = this.props;
      return (
        <Container component="main" maxWidth="xs">
          <CssBaseline />
          <div className={classes.paper}>
            <Avatar className={classes.avatar}>
              <LockOutlinedIcon />
            </Avatar>
            <Typography component="h1" variant="h5">
              Sign in
            </Typography>
            <form className={classes.form} onSubmit={ this.onSubmit } noValidate>
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                id="email"
                label="Email"
                name="email"
                autoComplete="email"
                autoFocus
                onChange={ this.onChange }
              />
              <TextField
                variant="outlined"
                margin="normal"
                required
                fullWidth
                name="password"
                label="Password"
                type="password"
                id="password"
                autoComplete="current-password"
                onChange={this.onChange}
              />
              <FormControlLabel
                control={<Checkbox value="remember" color="primary" />}
                label="Remember me"
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
              >
                Sign In
              </Button>
              <Grid container>
                <Grid item xs>
                  <Link href="#" onClick={this.sendAlert} variant="body2">
                    Forgot password?
                  </Link>
                </Grid>
                <Grid item>
                  <Link href="signup" variant="body2">
                    {"Don't have an account? Sign Up"}
                  </Link>
                </Grid>
              </Grid>
            </form>
          </div>
          <Box mt={8}>
            <Copyright />
          </Box>
  
        </Container>
      )
    }
    
  }
  
  const mapStateToProps = state => ({
    auth: state.auth,
  });
  
  export default withRouter(connect(mapStateToProps, {loginUser})(withStyles(styles, { withTheme: true })(Login)));
  