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
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 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;
src/components/root.less
+57 -33
View File
@@ -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;
}
}