a.js

import "react-app-polyfill/ie9"; // For IE 9-11 support
import "react-app-polyfill/ie11"; // For IE 11 support
import "./polyfill";
import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import Amplify, { Auth } from "aws-amplify";
import { Authenticator, Greetings, SignUp, SignIn } from "aws-amplify-react";
import { Col, Row, Button, Label, FormGroup, InputGroup, InputGroupAddon, InputGroupText, Input, CardImg } from "reactstrap";

import awsconfig from "./config/aws";

Amplify.configure(awsconfig);

class CustomSignIn extends Component {
  changeInputHandler = (e) => {
    e.target
  }

  render() {
    return (
      <div>
        { this.props.authState === 'signIn' && 
          <Row >
            <Col style={{backgroundColor: 'red'}} xs="12" md={{size: 4, offset: 2}} lg={{size: 4, offset: 2}} xl={{size: 4, offset: 2}}>
              <p>Welcome to the power of champions</p>
              <FormGroup>
                <InputGroup>
                  <InputGroupAddon addonType="prepend">@</InputGroupAddon>
                  <Input placeholder="username" onChange={(e) => console.log(e.target.value)}/>
                </InputGroup>
                <InputGroup>
                  <InputGroupAddon addonType="prepend">@</InputGroupAddon>
                  <Input placeholder="password" />
                </InputGroup>
              </FormGroup>

              <a>forgotten your password?</a>
              <FormGroup>
                <Button>Log In</Button>
              </FormGroup>
              <span>or</span>
              <FormGroup>
                <Button>Log In with Facebook</Button>
              </FormGroup>

            </Col>

            <Col style={{backgroundColor: 'blue'}} xs="12" md={{size: 4, offset: 0}} lg={{size: 4, offset: 0}} xl={{size: 4, offset: 0}}>
              <CardImg src={require(`./assets/img/brand/login-image.png`)} />
            </Col>
          </Row>
        }
      </div>
    );
  }
}

class Wrapper extends Component {
  handleWindowClose = async e => {
    e.preventDefault();
    Auth.signOut()
      .then()
      .catch(err => console.log(err));
  };

  componentWillMount() {
    window.addEventListener("beforeunload", this.handleWindowClose);
  }

  componentWillUnMount() {
    window.removeEventListener("beforeunload", this.handleWindowClose);
  }

  render() {
    return (
      <Authenticator hide={[Greetings, SignUp, SignIn]}>
        <CustomSignIn override={'SignIn'} />
        <App />
      </Authenticator>
    );
  }
}

ReactDOM.render(<Wrapper />, document.getElementById("root"));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();