3 files changed, 89 insertions, 0 deletions
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Login.js b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
new file mode 100644
index 00000000..2f9726bf
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Login.js
@@ -0,0 +1,62 @@
+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,
+        })
+    }
+
+    onAuthFailure(error) {
+        console.error(error)
+    }
+
+    render() {
+        if (!this.props.visible) {
+            return <span />
+        }
+
+        return (
+            <GoogleLogin
+                clientId={process.env.REACT_APP_OAUTH_CLIENT_ID}
+                onSuccess={this.onAuthResponse.bind(this)}
+                onFailure={this.onAuthFailure.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
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/Logout.js b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
new file mode 100644
index 00000000..22400381
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/auth/Logout.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import { logOut } from '../../actions/auth'
+import LogoutButton from '../../components/navigation/LogoutButton'
+
+const mapDispatchToProps = (dispatch) => {
+    return {
+        onLogout: () => dispatch(logOut()),
+    }
+}
+
+const Logout = connect(undefined, mapDispatchToProps)(LogoutButton)
+
+export default Logout
diff --git a/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
new file mode 100644
index 00000000..06da75ab
--- /dev/null
+++ b/opendc-web/opendc-web-ui/src/containers/auth/ProfileName.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+const mapStateToProps = (state) => {
+    return {
+        text: state.auth.givenName + ' ' + state.auth.familyName,
+    }
+}
+
+const SpanElement = ({ text }) => <span>{text}</span>
+
+const ProfileName = connect(mapStateToProps)(SpanElement)
+
+export default ProfileName