working implementation of auth and then getting an email with gapi
This commit is contained in:
talksik
+6
-13
@@ -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"
|
||||
}
|
||||
|
||||
Vendored
+25
-23
@@ -1,32 +1,34 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1, shrink-to-fit=no"
|
||||
/>
|
||||
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="/styles.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png"
|
||||
type="image/png"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
|
||||
/>
|
||||
<link rel="stylesheet" type="text/css" href="/styles.css" />
|
||||
<link
|
||||
rel="icon"
|
||||
href="https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png"
|
||||
type="image/png"
|
||||
/>
|
||||
|
||||
<title>DoEverythingBar</title>
|
||||
</head>
|
||||
<title>DoEverythingBar</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Need to change
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Need to change
|
||||
dev: /bundle.js
|
||||
prod: ./bundle.js XXXX discovered that need the dev /bundle.js for history api fallback in prod. Also, it works in AWS, but not opening up the html file local
|
||||
-->
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
|
||||
<script src="https://apis.google.com/js/api.js"></script>
|
||||
<script src="/bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Generated
+50
-16
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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 (
|
||||
<div className={styles.searchCont}>
|
||||
{googleAccessToken == null ? null : ( // /> // scope={'https://mail.google.com/'} // cookiePolicy={'single_host_origin'} // onFailure={responseGoogle} // onSuccess={responseGoogle} // buttonText="Login" // clientId={envVars.OAUTH2_CLIENT_ID} // <GoogleLogin
|
||||
<React.Fragment>
|
||||
<div className={styles.commandIcon}>
|
||||
<img className={styles.icon} src={envVars.DEFAULT_LOGO} />
|
||||
</div>
|
||||
<input
|
||||
className={styles.searchBar}
|
||||
placeholder="Do Everything You Want"
|
||||
/>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default MainCommand;
|
||||
+12
-15
@@ -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 (
|
||||
<React.Fragment>
|
||||
{/* Toast for notifications */}
|
||||
return (
|
||||
<React.Fragment>
|
||||
{/* Toast for notifications */}
|
||||
|
||||
<div className={styles.mainCont}>
|
||||
<input
|
||||
className={styles.searchBar}
|
||||
placeholder="Do Everything You Want"
|
||||
/>
|
||||
<div className={styles.mainCont}>
|
||||
<MainCommand />
|
||||
|
||||
<img className={styles.backgroundImage} src={backgroundImage} />
|
||||
</div>
|
||||
<img className={styles.backgroundImage} src={backgroundImage} />
|
||||
</div>
|
||||
|
||||
<Switch />
|
||||
</React.Fragment>
|
||||
);
|
||||
<Switch />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
|
||||
+57
-33
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user