text: import React from "react";
  import Loader from "react-loader-spinner";
  import { connect } from "react-redux";
  import { login } from "../../../actions/loginActions";
  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 Paper from "@material-ui/core/Paper";
  import Grid from "@material-ui/core/Grid";
  import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
  import Typography from "@material-ui/core/Typography";
  import withStyles from "@material-ui/core/styles/withStyles";
  import { SignInFormStyles } from "./styles";
  import NavBar from "../NavBar";
  import "./login.css";
  
  class Login extends React.Component {
    state = {
      credentials: {
        username: "",
        password: ""
      }
    };
  
    handleChange = e => {
      e.preventDefault();
      this.setState({
        credentials: {
          ...this.state.credentials,
          [e.target.name]: e.target.value
        }
      });
    };
  
    loginChange = e => {
      e.preventDefault();
      this.props.login(this.state.credentials).then(res => {
        if (res) {
          this.props.history.push("/dashboard");
        }
      });
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        <div>
          <NavBar />
        <Grid container component="main" className={classes.root}>
          <CssBaseline />
          <Grid item xs={false} sm={4} md={7} className={classes.image} />
          <Grid item xs={12} sm={8} md={5} component={Paper} elevation={0} square>
            <div className={classes.paper}>
              <Avatar className={classes.avatar}>
                <LockOutlinedIcon />
              </Avatar>
              <Typography component="h1" variant="h5">
                Log in
              </Typography>
              <form
                className={classes.form}
                onSubmit={this.loginChange}
                noValidate
              >
                <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  id="username"
                  label="Username"
                  name="username"
                  autoComplete="username"
                  autoFocus
                  value={this.state.credentials.username}
                  onChange={this.handleChange}
                />
                <TextField
                  variant="outlined"
                  margin="normal"
                  required
                  fullWidth
                  name="password"
                  label="Password"
                  type="password"
                  id="password"
                  autoComplete="current-password"
                  value={this.state.credentials.password}
                  onChange={this.handleChange}
                />
                <Button
                  type="submit"
                  fullWidth
                  variant="contained"
                  color="primary"
                  className={classes.submit}
                >
                  {this.props.loggingIn ? (
                    <Loader
                      type="ThreeDots"
                      color="#ffffff"
                      height={12}
                      width={26}
                    />
                  ) : (
                    "Login"
                  )}
                </Button>
                <Grid container>
                  <Grid item>
                    <Button
                      onClick={() => this.props.history.push("/signup")}
                      color="default"
                    >
                      {"Don't have an account? Sign Up"}
                    </Button>
                  </Grid>
                </Grid>
              </form>
            </div>
          </Grid>
        </Grid>
        </div>
      );
    }
  }
  
  //import state from loginReducer from rootReducer
  const mapStateToProps = state => ({
    error: state.login.error,
    loggingIn: state.login.loggingIn
  });
  
  export default connect(
    mapStateToProps,
    { login }
  )(withStyles(SignInFormStyles)(Login));
  