gistfile1.txt

import React from 'react';
import { connect } from 'react-redux';
import { makeStyles } from '@material-ui/core/styles';
import { Box, Paper, Button, TextField } from '@material-ui/core';
import * as MainBarActionCreators from '../Reducers/main';
import * as ActionCreators from '../Reducers/Auth/login';
import * as ThunkActionCreators from '../Thunks/LoginThunk';
import { CircularProgress }from '@material-ui/core';

const useStyles = makeStyles(theme => ({
  root: {
    flexGrow: 1,
    marginTop: theme.spacing(5)
  },
  logo: {
    width: 'fit-content',
    margin: 'auto',
    padding: theme.spacing(0, 0, 4, 0)
  },
  paper: {
    padding: theme.spacing(1, 0, 2, 0),
    margin: 'auto',
    maxWidth: 400,
    flexDirection: 'column',
    textAlign: 'center',
    justifyContent: 'center'
  },
  forgotPassword: {
    fontSize: 12,
    width: 250,
    display: 'inline-flex',
    flexDirection: 'row-reverse',
    '&:hover': {
      cursor: 'pointer'
    },
  },
  textField: {
    marginTop: theme.spacing(2),
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 250
  },
  action: {
    marginTop: theme.spacing(3),
    width: 250,
    display: 'inline-flex',
    flexDirection: 'row-reverse'
  },
  error: {
    color: 'red'
  }
}));

function Login(props) {
  const classes = useStyles();

  return (
    <Box className={classes.root}>
      <Box className={classes.logo}>
        <img src={require('../Images/assettrackinglogo.png')} alt="logo" width="360" />
      </Box>
      <Paper className={classes.paper}>
        <form>
        <h2>Log In</h2>
        <TextField
          label="Username"
          autoComplete="username"
          className={classes.textField}
          value={props.username}
          onChange={(e) => props.setUsername(e.target.value)}
        />
        <TextField
          type="password"
          label="Password"
          autoComplete="current-password"
          className={classes.textField}
          value={props.password}
          onChange={(e) => props.setPassword(e.target.value)}
        />
        <Box onClick={() => props.setPath('/forgotPassword')} className={classes.forgotPassword}>Forgot your password?</Box>
        <Box>
          {props.loginErorrs.map((error, i) => (
            <p key={i} className={classes.error}>
              {error}
            </p>
          ))}
        </Box>
        <Box className={classes.action}>
          {
            props.isLoginLoading ? (
              <CircularProgress size={32} />
            ) : (
              <Button type="submit" onClick={props.login} color="primary" variant="contained">Log In</Button>
            )
          }
        </Box>
        </form>
      </Paper>
    </Box>
  );
}

const mapStateToProps = (state: State): StateProps => {
  return {
    username: state.login.username,
    password: state.login.password,
    isLoginLoading: state.login.isLoginLoading,
    loginErorrs: state.login.loginErrors
  }
};

const mapDispatchToProps = (dispatch: Redux.Dispatch<any>): DispatchProps => ({
  setPath: (...args) => dispatch(MainBarActionCreators.setPath.apply(null, args)),
  setUsername: (...args) => dispatch(ActionCreators.setUsername.apply(null, args)),
  setPassword: (...args) => dispatch(ActionCreators.setPassword.apply(null, args)),
  login: async (...args) => dispatch(await ThunkActionCreators.login.apply(null, args))
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);