talksik/deb_client
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

working implementation of auth and then getting an email with gapi

Browse Source
This commit is contained in:
talksik
2019-06-23 11:10:02 -07:00
parent 8dee3c1ddc
commit 89aa66ef53
7 changed files with 269 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config.dev.json
+6 -13
View File
@@ -1,17 +1,10 @@
{ {
"server_url": "http://localhost:5000", "server_url": "http://localhost:5000",
"STRIPE_KEY": "pk_test_xPZzi9Y8uYGaHIBprkNe4jDr", "DEFAULT_LOGO": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png",
"STRIPE_CONNECT_ID": "ca_EeCxc3WY624dMuO6B5JGlizTZfYiqdrp",
"DEFAULT_LOGO": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png", "GOOGLE_API_KEY": "AIzaSyCZCgZY7ZlSMk1DW0NEEoHZ9qwdSL4AR1k",
"OAUTH2_CLIENT_ID": "951578952608-6v55t0skirb80r8rtcvelhj4lfnpp2iq.apps.googleusercontent.com",
"DEFAULT_CHARITY_PROFILE_PIC": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultCharityProfilePic.png", "OAUTH2_CLIENT_SECRET": "8qVGMfiIN6a1q2YoG4WhpTyJ",
"DEFAULT_CHARITY_COVER_PIC": "https://s3-us-west-1.amazonaws.com/charify-assets/defaultCharityCoverPic.jpg", "OAUTH2_CALLBACK": "http://localhost:8080/auth/google/callback"
"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"
} }
dist/index.html
Vendored
+25 -23
View File
@@ -1,32 +1,34 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta <meta
name="viewport" name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" content="width=device-width, initial-scale=1, shrink-to-fit=no"
/> />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
/> />
<link rel="stylesheet" type="text/css" href="/styles.css" /> <link rel="stylesheet" type="text/css" href="/styles.css" />
<link <link
rel="icon" rel="icon"
href="https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png" href="https://s3-us-west-1.amazonaws.com/charify-assets/defaultLogo.png"
type="image/png" type="image/png"
/> />
<title>DoEverythingBar</title> <title>DoEverythingBar</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<!-- Need to change <!-- Need to change
dev: /bundle.js 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 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> </html>
package-lock.json
Generated
+50 -16
View File
@@ -555,7 +555,8 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz", "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=", "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"dev": true "dev": true,
"optional": true
}, },
"assign-symbols": { "assign-symbols": {
"version": "1.0.0", "version": "1.0.0",
@@ -2145,6 +2146,7 @@
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz", "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.7.tgz",
"integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==", "integrity": "sha512-brWl9y6vOB1xYPZcpZde3N9zDByXTosAeMDo4p1wzo6UMOX4vumB+TP1RZ76sfE6Md68Q0NJSrE/gbezd4Ul+w==",
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"delayed-stream": "~1.0.0" "delayed-stream": "~1.0.0"
} }
@@ -2587,7 +2589,8 @@
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=", "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
"dev": true "dev": true,
"optional": true
}, },
"depd": { "depd": {
"version": "1.1.2", "version": "1.1.2",
@@ -3124,7 +3127,8 @@
"version": "1.3.0", "version": "1.3.0",
"resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz", "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.3.0.tgz",
"integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=", "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU=",
"dev": true "dev": true,
"optional": true
}, },
"fast-deep-equal": { "fast-deep-equal": {
"version": "2.0.1", "version": "2.0.1",
@@ -3432,7 +3436,8 @@
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"aproba": { "aproba": {
"version": "1.2.0", "version": "1.2.0",
@@ -3453,12 +3458,14 @@
"balanced-match": { "balanced-match": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"balanced-match": "^1.0.0", "balanced-match": "^1.0.0",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@@ -3473,17 +3480,20 @@
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
@@ -3600,7 +3610,8 @@
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"ini": { "ini": {
"version": "1.3.5", "version": "1.3.5",
@@ -3612,6 +3623,7 @@
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"number-is-nan": "^1.0.0" "number-is-nan": "^1.0.0"
} }
@@ -3626,6 +3638,7 @@
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"brace-expansion": "^1.1.7" "brace-expansion": "^1.1.7"
} }
@@ -3633,12 +3646,14 @@
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"minipass": { "minipass": {
"version": "2.3.5", "version": "2.3.5",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"safe-buffer": "^5.1.2", "safe-buffer": "^5.1.2",
"yallist": "^3.0.0" "yallist": "^3.0.0"
@@ -3657,6 +3672,7 @@
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
@@ -3737,7 +3753,8 @@
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
@@ -3749,6 +3766,7 @@
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"wrappy": "1" "wrappy": "1"
} }
@@ -3834,7 +3852,8 @@
"safe-buffer": { "safe-buffer": {
"version": "5.1.2", "version": "5.1.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"safer-buffer": { "safer-buffer": {
"version": "2.1.2", "version": "2.1.2",
@@ -3870,6 +3889,7 @@
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"code-point-at": "^1.0.0", "code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0", "is-fullwidth-code-point": "^1.0.0",
@@ -3889,6 +3909,7 @@
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "bundled": true,
"dev": true, "dev": true,
"optional": true,
"requires": { "requires": {
"ansi-regex": "^2.0.0" "ansi-regex": "^2.0.0"
} }
@@ -3932,12 +3953,14 @@
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
}, },
"yallist": { "yallist": {
"version": "3.0.3", "version": "3.0.3",
"bundled": true, "bundled": true,
"dev": true "dev": true,
"optional": true
} }
} }
}, },
@@ -4752,7 +4775,8 @@
"version": "0.1.1", "version": "0.1.1",
"resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz", "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=", "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
"dev": true "dev": true,
"optional": true
}, },
"jsesc": { "jsesc": {
"version": "1.3.0", "version": "1.3.0",
@@ -6120,6 +6144,15 @@
"warning": "^4.0.1" "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": { "react-hot-loader": {
"version": "4.6.3", "version": "4.6.3",
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.6.3.tgz", "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.6.3.tgz",
@@ -7454,7 +7487,8 @@
"version": "0.14.5", "version": "0.14.5",
"resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=", "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
"dev": true "dev": true,
"optional": true
}, },
"type-is": { "type-is": {
"version": "1.6.18", "version": "1.6.18",
package.json
+1
View File
@@ -27,6 +27,7 @@
"express": "^4.17.1", "express": "^4.17.1",
"react": "^16.7.0", "react": "^16.7.0",
"react-dom": "^16.7.0", "react-dom": "^16.7.0",
"react-google-login": "^5.0.4",
"react-router-dom": "^4.3.1", "react-router-dom": "^4.3.1",
"redux-persist": "^5.10.0" "redux-persist": "^5.10.0"
}, },
src/components/MainCommand.js
+118
View File
@@ -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;
src/components/Root.js
+12 -15
View File
@@ -2,27 +2,24 @@ import React from 'react';
import { Switch, Route } from 'react-router-dom'; import { Switch, Route } from 'react-router-dom';
import styles from './root.less'; import styles from './root.less';
import PrivateRoute from './PrivateRoute';
import backgroundImage from '../assets/images/mainbg.jpg'; import backgroundImage from '../assets/images/mainbg.jpg';
import MainCommand from './MainCommand';
const Root = props => { const Root = props => {
return ( return (
<React.Fragment> <React.Fragment>
{/* Toast for notifications */} {/* Toast for notifications */}
<div className={styles.mainCont}> <div className={styles.mainCont}>
<input <MainCommand />
className={styles.searchBar}
placeholder="Do Everything You Want"
/>
<img className={styles.backgroundImage} src={backgroundImage} /> <img className={styles.backgroundImage} src={backgroundImage} />
</div> </div>
<Switch /> <Switch />
</React.Fragment> </React.Fragment>
); );
}; };
export default Root; export default Root;
src/components/root.less
+57 -33
View File
@@ -1,38 +1,62 @@
.mainCont { .mainCont {
position: relative; position: relative;
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.searchBar { .searchCont {
display: block; display: flex;
margin: 0; justify-content: center;
padding: var(--inputPaddingV) var(--inputPaddingH); align-items: center;
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;
}
.backgroundImage { .commandIcon {
position: absolute; display: flex;
left: 0; justify-content: center;
top: 0; align-items: center;
width: 100%; height: 40px;
height: 100%; width: 40px;
opacity: 0.7; 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;
}
} }