From 89aa66ef539caaba49d7b1a6365ec4b0e0312a59 Mon Sep 17 00:00:00 2001 From: talksik Date: Sun, 23 Jun 2019 11:10:02 -0700 Subject: [PATCH] working implementation of auth and then getting an email with gapi --- config.dev.json | 19 ++---- dist/index.html | 48 +++++++------- package-lock.json | 66 ++++++++++++++----- package.json | 1 + src/components/MainCommand.js | 118 ++++++++++++++++++++++++++++++++++ src/components/Root.js | 27 ++++---- src/components/root.less | 90 ++++++++++++++++---------- 7 files changed, 269 insertions(+), 100 deletions(-) create mode 100644 src/components/MainCommand.js diff --git a/config.dev.json b/config.dev.json index bfe50ea..96e1dbd 100644 --- a/config.dev.json +++ b/config.dev.json @@ -1,17 +1,10 @@ { - "server_url": "http://localhost:5000", + "server_url": "http://localhost:5000", - "STRIPE_KEY": "pk_test_xPZzi9Y8uYGaHIBprkNe4jDr", - "STRIPE_CONNECT_ID": "ca_EeCxc3WY624dMuO6B5JGlizTZfYiqdrp", + "DEFAULT_LOGO": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png", - "DEFAULT_LOGO": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png", - - "DEFAULT_CHARITY_PROFILE_PIC": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultCharityProfilePic.png", - "DEFAULT_CHARITY_COVER_PIC": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultCharityCoverPic.jpg", - - "DEFAULT_DONOR_PROFILE_PIC": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultDonorProfilePic.png", - - "TERMS_PDF": "https://s3-us-west-1.amazonaws.com/charify-assets/terms.pdf", - - "STRIPE_LOGO": "https://s3-us-west-1.amazonaws.com/charify-assets/powered_by_stripe.png" + "GOOGLE_API_KEY": "AIzaSyCZCgZY7ZlSMk1DW0NEEoHZ9qwdSL4AR1k", + "OAUTH2_CLIENT_ID": "951578952608-6v55t0skirb80r8rtcvelhj4lfnpp2iq.apps.googleusercontent.com", + "OAUTH2_CLIENT_SECRET": "8qVGMfiIN6a1q2YoG4WhpTyJ", + "OAUTH2_CALLBACK": "http://localhost:8080/auth/google/callback" } diff --git a/dist/index.html b/dist/index.html index 4b265f5..df41225 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,32 +1,34 @@ - - - + + + - - - + + + - DoEverythingBar - + DoEverythingBar + - -
- - - + + + + diff --git a/package-lock.json b/package-lock.json index 1d4c88e..246fc2d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -555,7 +555,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", - "dev": true + "dev": true, + "optional": true }, "assign-symbols": { "version": "1.0.0", @@ -2145,6 +2146,7 @@ "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz", "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==", "dev": true, + "optional": true, "requires": { "delayed-stream": "~1.0.0" } @@ -2587,7 +2589,8 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", - "dev": true + "dev": true, + "optional": true }, "depd": { "version": "1.1.2", @@ -3124,7 +3127,8 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", - "dev": true + "dev": true, + "optional": true }, "fast-deep-equal": { "version": "2.0.1", @@ -3432,7 +3436,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -3453,12 +3458,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -3473,17 +3480,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -3600,7 +3610,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -3612,6 +3623,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -3626,6 +3638,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -3633,12 +3646,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -3657,6 +3672,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3737,7 +3753,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3749,6 +3766,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3834,7 +3852,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3870,6 +3889,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3889,6 +3909,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3932,12 +3953,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -4752,7 +4775,8 @@ "version": "0.1.1", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", - "dev": true + "dev": true, + "optional": true }, "jsesc": { "version": "1.3.0", @@ -6120,6 +6144,15 @@ "warning": "^4.0.1" } }, + "react-google-login": { + "version": "5.0.4", + "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.0.4.tgz", + "integrity": "sha512-XNgm3pNQMaZiHTeZ4Qa5cWfdj/p5ppwgI/adYQrjD6fj6CK6ut76CGlh2xo+4r3XRSIeaWanFjUxU9kmBCGXZQ==", + "requires": { + "@types/react": "*", + "prop-types": "^15.6.0" + } + }, "react-hot-loader": { "version": "4.6.3", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.6.3.tgz", @@ -7454,7 +7487,8 @@ "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", - "dev": true + "dev": true, + "optional": true }, "type-is": { "version": "1.6.18", diff --git a/package.json b/package.json index fa8a059..aa5ddab 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "express": "^4.17.1", "react": "^16.7.0", "react-dom": "^16.7.0", + "react-google-login": "^5.0.4", "react-router-dom": "^4.3.1", "redux-persist": "^5.10.0" }, diff --git a/src/components/MainCommand.js b/src/components/MainCommand.js new file mode 100644 index 0000000..03cd9b5 --- /dev/null +++ b/src/components/MainCommand.js @@ -0,0 +1,118 @@ +import React, { Component } from 'react'; +import styles from './root.less'; + +const envVars = require('config'); + +import { GoogleLogin } from 'react-google-login'; + +class MainCommand extends Component { + state = { + googleAccessToken: null + }; + + initClient = () => { + gapi.client + .init({ + apiKey: envVars.GOOGLE_API_KEY, + clientId: envVars.OAUTH2_CLIENT_ID, + discoveryDocs: [ + 'https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest' + ], + scope: 'profile email https://mail.google.com/' + }) + .then( + function() { + // Listen for sign-in state changes. + console.log(gapi.auth2.getAuthInstance()); + }, + function(error) { + appendPre(JSON.stringify(error, null, 2)); + } + ); + }; + + componentWillMount() { + gapi.load('client:auth2', () => { + gapi.client + .init({ + apiKey: envVars.GOOGLE_API_KEY, + clientId: envVars.OAUTH2_CLIENT_ID, + discoveryDocs: [ + 'https://www.googleapis.com/discovery/v1/apis/gmail/v1/rest' + ], + scope: 'profile email https://mail.google.com/' + }) + .then( + function() { + console.log('properly initialized gapi and client and auth2'); + gapi.auth2 + .getAuthInstance() + .signIn() + .then(() => { + gapi.client.gmail.users.labels + .list({ + userId: 'me' + }) + .then(function(response) { + var labels = response.result.labels; + console.log(labels); + }); + + // var messageRequest = gapi.client.gmail.users.messages.get({ + // userId: 'me', + // id: '16b854db03a69932', + // format: 'full' + // }); + // messageRequest.execute(function(response) { + // console.log(response); + // }); + gapi.client.gmail.users.messages + .send({ + userId: 'me', + requestBody: { + // same response with any of these + raw: reallyEncodedMessage + // raw: encodedMessage + // raw: message + } + }) + .then(function() { + console.log('done!'); + }); + }); + }, + function(error) { + appendPre(JSON.stringify(error, null, 2)); + } + ); + }); + } + + render() { + const responseGoogle = response => { + console.log(response); + this.setState({ googleAccessToken: response.accessToken }, () => + console.log(this.state) + ); + }; + + const { googleAccessToken } = this.state; + return ( +
+ {googleAccessToken == null ? null : ( // /> // scope={'https://mail.google.com/'} // cookiePolicy={'single_host_origin'} // onFailure={responseGoogle} // onSuccess={responseGoogle} // buttonText="Login" // clientId={envVars.OAUTH2_CLIENT_ID} // +
+ +
+ + + )} +
+ ); + } +} + +export default MainCommand; diff --git a/src/components/Root.js b/src/components/Root.js index ce2f5a2..eb600ec 100644 --- a/src/components/Root.js +++ b/src/components/Root.js @@ -2,27 +2,24 @@ import React from 'react'; import { Switch, Route } from 'react-router-dom'; import styles from './root.less'; -import PrivateRoute from './PrivateRoute'; - import backgroundImage from '../assets/images/mainbg.jpg'; +import MainCommand from './MainCommand'; + const Root = props => { - return ( - - {/* Toast for notifications */} + return ( + + {/* Toast for notifications */} -
- +
+ - -
+ +
- - - ); + + + ); }; export default Root; diff --git a/src/components/root.less b/src/components/root.less index 1aa66fd..39edc71 100644 --- a/src/components/root.less +++ b/src/components/root.less @@ -1,38 +1,62 @@ .mainCont { - position: relative; - overflow: hidden; - flex: 1; - display: flex; - justify-content: center; - align-items: center; + position: relative; + overflow: hidden; + flex: 1; + display: flex; + justify-content: center; + align-items: center; - .searchBar { - display: block; - margin: 0; - padding: var(--inputPaddingV) var(--inputPaddingH); - color: inherit; - font-family: inherit; - font-size: var(--inputFontSize); - font-weight: inherit; - line-height: var(--inputLineHeight); - border: none; - border-radius: 0.4rem; - transition: box-shadow var(--transitionDuration); - padding: 1em; - box-shadow: 0 0 8px #666; - width: 400px; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, - Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; - } + .searchCont { + display: flex; + justify-content: center; + align-items: center; - .backgroundImage { - position: absolute; - left: 0; - top: 0; - width: 100%; - height: 100%; - opacity: 0.7; + .commandIcon { + display: flex; + justify-content: center; + align-items: center; + height: 40px; + width: 40px; + flex: 1; + border-radius: 0.4rem; + margin: 0 10px; - z-index: -1; - } + background-color: azure; + + .icon { + height: inherit; + width: inherit; + } + } + .searchBar { + display: block; + margin: 0; + padding: var(--inputPaddingV) var(--inputPaddingH); + padding-left: 10px; + color: inherit; + font-family: inherit; + font-size: var(--inputFontSize); + font-weight: inherit; + line-height: var(--inputLineHeight); + border: none; + border-radius: 0.4rem; + transition: box-shadow var(--transitionDuration); + box-shadow: 0 0 8px #666; + width: 400px; + height: 40px; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, + Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; + } + } + + .backgroundImage { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + opacity: 0.7; + + z-index: -1; + } }