src/containers/auth/Login.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

import PropTypes from "prop-types";
import React from "react";
import GoogleLogin from "react-google-login";
import { connect } from "react-redux";
import { logIn } from "../../actions/auth";

class LoginContainer extends React.Component {
  static propTypes = {
    visible: PropTypes.bool.isRequired,
    onLogin: PropTypes.func.isRequired
  };

  onAuthResponse(response) {
    this.props.onLogin({
      email: response.getBasicProfile().getEmail(),
      givenName: response.getBasicProfile().getGivenName(),
      familyName: response.getBasicProfile().getFamilyName(),
      googleId: response.googleId,
      authToken: response.getAuthResponse().id_token,
      expiresAt: response.getAuthResponse().expires_at
    });
  }

  render() {
    if (!this.props.visible) {
      return <span />;
    }

    return (
      <GoogleLogin
        clientId={process.env.REACT_APP_OAUTH_CLIENT_ID}
        onSuccess={this.onAuthResponse.bind(this)}
        onFailure={this.onAuthResponse.bind(this)}
        render={renderProps => (
          <span onClick={renderProps.onClick} className="login btn btn-primary">
            <span className="fa fa-google" /> Login with Google
          </span>
        )}
      >
      </GoogleLogin>
    );
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    visible: ownProps.visible
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onLogin: payload => dispatch(logIn(payload))
  };
};

const Login = connect(mapStateToProps, mapDispatchToProps)(LoginContainer);

export default Login;