GrlCodeUNC · snz1210 · Mar 7, 2018 · Mar 7, 2018 · Mar 7, 2018
diff --git a/client/build/index.html b/client/build/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.cacbacc7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.cacbacc7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>ript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>
diff --git a/client/package.json b/client/package.json
@@ -6,6 +6,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "bulma": "^0.6.2",
+    "prop-types": "^15.6.1",
     "react": "^16.0.0",
     "react-bulma-components": "1.2.0",
     "react-dom": "^16.0.0",

diff --git a/client/public/index.html b/client/public/index.html
@@ -25,7 +25,8 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root"></div>
+    <div id="root">
+    </div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/client/src/components/GoogleButton/GoogleButton.js b/client/src/components/GoogleButton/GoogleButton.js
@@ -1,22 +1,209 @@
-import React from "react";
+import React, { Component } from 'react';
 import "bulma/css/bulma.css";
 //importing the react bulma components
 import Button from "react-bulma-components/lib/components/button";
 import Section from "react-bulma-components/lib/components/section";
 import Box from "react-bulma-components/lib/components/box";
+import PropTypes from 'prop-types';
 
-const GoogleButton = () => (
-// <span className= "googleButton">
-<div className="google has-text-centered">
-<Section>
-    <Box>
-        <Button color="light">
-        Google Sign-in
-        </Button>
-    </Box>
-</Section>
-</div>
-)
-
-export default GoogleButton;
+class GoogleLogin extends Component {
+  constructor(props) {
+    super(props)
+    this.signIn = this.signIn.bind(this)
+    this.enableButton = this.enableButton.bind(this)
+    this.state = {
+      disabled: true
+    }
+  }
+  componentDidMount() {
+    const { clientId, loginHint, hostedDomain, autoLoad, isSignedIn, fetchBasicProfile, redirectUri, discoveryDocs, onFailure, uxMode, scope, responseType } = this.props
+      ; ((d, s, id, cb) => {
+        const element = d.getElementsByTagName(s)[0]
+        const fjs = element
+        let js = element
+        js = d.createElement(s)
+        js.id = id
+        js.src = '//apis.google.com/js/client:platform.js'
+        fjs.parentNode.insertBefore(js, fjs)
+        js.onload = cb
+      })(document, 'script', 'google-login', () => {
+        const params = {
+          client_id: "1071904739843-5tl56tqp05ap4td8gsahf9uj0nrkrvhu.apps.googleusercontent.com",
+          login_hint: loginHint,
+          hosted_domain: hostedDomain,
+          fetch_basic_profile: fetchBasicProfile,
+          discoveryDocs,
+          ux_mode: uxMode,
+          redirect_uri: redirectUri,
+          scope
+        }
+
+        if (responseType === 'code') {
+          params.access_type = 'offline'
+        }
+
+        window.gapi.load('auth2', () => {
+          this.enableButton()
+          if (!window.gapi.auth2.getAuthInstance()) {
+            window.gapi.auth2.init(params).then(
+              res => {
+                if (isSignedIn && res.isSignedIn.get()) {
+                  this._handleSigninSuccess(res.currentUser.get())
+                }
+              },
+              err => onFailure(err)
+            )
+          }
+          if (autoLoad) {
+            this.signIn()
+          }
+        })
+      })
+  }
+  componentWillUnmount() {
+    this.enableButton = () => {}
+  }
+  enableButton() {
+    this.setState({
+      disabled: false
+    })
+  }
+  signIn(e) {
+    if (e) {
+      e.preventDefault() // to prevent submit if used within form
+    }
+    if (!this.state.disabled) {
+      const auth2 = window.gapi.auth2.getAuthInstance()
+      const { onSuccess, onRequest, onFailure, prompt, responseType } = this.props
+      const options = {
+        prompt
+      }
+      onRequest()
+      if (responseType === 'code') {
+        auth2.grantOfflineAccess(options).then(res => onSuccess(res), err => onFailure(err))
+      } else {
+        auth2.signIn(options).then(res => this._handleSigninSuccess(res), err => onFailure(err))
+      }
+    }
+  }
+  _handleSigninSuccess(res) {
+    /*
+      offer renamed response keys to names that match use
+    */
+    const basicProfile = res.getBasicProfile()
+    const authResponse = res.getAuthResponse()
+    res.googleId = basicProfile.getId()
+    res.tokenObj = authResponse
+    res.tokenId = authResponse.id_token
+    res.accessToken = authResponse.access_token
+    res.profileObj = {
+      googleId: basicProfile.getId(),
+      imageUrl: basicProfile.getImageUrl(),
+      email: basicProfile.getEmail(),
+      name: basicProfile.getName()
+    }
+    console.log(res.profileObj.imageUrl);
+  }
+
+  render() {
+    const { tag, type, style, className, disabledStyle, buttonText, children } = this.props
+    const disabled = this.state.disabled || this.props.disabled
+    const initialStyle = {
+      display: 'inline-block',
+      background: '#5F9EA0',
+      color: '#fff',
+      width: 190,
+      paddingTop: 10,
+      paddingBottom: 10,
+      borderRadius: 2,
+      border: '1px solid transparent',
+      fontSize: 16,
+      fontWeight: 'bold',
+      fontFamily: 'Roboto'
+    }
+    const styleProp = (() => {
+      return initialStyle
+    })()
+    const defaultStyle = (() => {
+      return styleProp
+    })()
+
+    const googleLoginButton = React.createElement(
+      tag,
+      {
+        onClick: this.signIn,
+        style: defaultStyle,
+        type,
+        className
+      },
+      children || buttonText
+    )
+    return googleLoginButton
+  }
+}
+
+// GoogleLogin.propTypes = {
+//   onSuccess: PropTypes.func.isRequired,
+//   onFailure: PropTypes.func.isRequired,
+//   clientId: PropTypes.string.isRequired,
+//   onRequest: PropTypes.func,
+//   buttonText: PropTypes.string,
+//   scope: PropTypes.string,
+//   className: PropTypes.string,
+//   redirectUri: PropTypes.string,
+//   loginHint: PropTypes.string,
+//   hostedDomain: PropTypes.string,
+//   children: PropTypes.node,
+//   style: PropTypes.object,
+//   disabledStyle: PropTypes.object,
+//   fetchBasicProfile: PropTypes.bool,
+//   prompt: PropTypes.string,
+//   tag: PropTypes.string,
+//   autoLoad: PropTypes.bool,
+//   disabled: PropTypes.bool,
+//   discoveryDocs: PropTypes.array,
+//   uxMode: PropTypes.string,
+//   isSignedIn: PropTypes.bool,
+//   responseType: PropTypes.string,
+//   type: PropTypes.string
+// }
+
+GoogleLogin.defaultProps = {
+  type: 'button',
+  tag: 'button',
+  buttonText: 'Login with Google',
+  scope: 'profile email',
+  prompt: '',
+  fetchBasicProfile: true,
+  isSignedIn: false,
+  uxMode: 'popup',
+  // disabledStyle: {
+  //   opacity: 0.6
+  // },
+  onRequest: () => { }
+}
+
+export default GoogleLogin
+
+
+
+
+
+
+
+
+
+// const GoogleButton = () =>
+// // <span className= "googleButton">
+// <div className="google has-text-centered">
+// <Section>
+//     <Box>
+//         <Button color="primary">
+//         Google Sign-in
+//         </Button>
+//     </Box>
+// </Section>
+// </div>
+
+// export default GoogleButton;
 
diff --git a/client/yarn.lock b/client/yarn.lock
@@ -5470,7 +5470,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.4, prop-types@^15.6.0:
+prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.cacbacc7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>
		<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.cacbacc7.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>ript><div id="root"></div><script type="text/javascript" src="/static/js/main.8e48232b.js"></script></body></html>