Login.js

import React, { Component } from "react"
import GoogleLogin from "react-google-login"
import { processLogin } from "../../utils/login-utils.js"

import "./Login.scss"
import logo from "../../images/logo.svg"

type Props = {
  onLoginSuccess: func,
  onLoginFailure: func,
  onLoginRequest: func,
  clientID: string,
};

class Login extends Component {

  props: Props;

  render() {
    return (
      <div className="Login">

        <div className="Login--Header">

          <div className="Login--Header--Top">
            <img className="Login--Header--Logo" src={logo} />
            <h1 className="Login--Header--Title">Office</h1>
          </div>

          <p className="Login--Header--Text Login--Header--Text__Upper">
            Not Logged In
          </p>

          <p className="Login--Header--Text Login--Header--Text__Lower">
            Log in using your NewAperio/Google account to continue.
          </p>

        </div>

        <GoogleLogin
          buttonText="Login"
          className="Login--Button"
          clientId={this.props.clientID}
          onSuccess={this.props.onLoginSuccess}
          onFailure={this.props.onLoginFailure}
          onRequest={this.props.onLoginRequest}
        />

      </div>
    )
  }
}

export default Login