From 2e5e49a3781cba65abff090fe31e5af1510f5e17 Mon Sep 17 00:00:00 2001 From: Bheem Date: Wed, 10 Jun 2020 20:19:36 +0530 Subject: [PATCH 1/4] added google login using browser --- src/assets/languages/en.json | 13 ++ .../Auth/components/LoginWithGoogleButton.js | 77 +++++-- src/containers/DesktopSignIn/DesktopSignIn.js | 217 ++++++++++++++++++ .../DesktopSignIn/DesktopSigninScreenStyle.js | 83 +++++++ src/core/configs/OAuth.config.js | 46 ++++ src/routes.js | 3 +- 6 files changed, 419 insertions(+), 20 deletions(-) create mode 100644 src/containers/DesktopSignIn/DesktopSignIn.js create mode 100644 src/containers/DesktopSignIn/DesktopSigninScreenStyle.js diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index 35f5069a7..ce164f059 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -1625,6 +1625,19 @@ "desc": "Event Description :" } }, + "desktopSigingPage":{ + "pageTitle": "Browser Based Auth | Nynja", + "signIn": "Sign In", + "signinBtn": "Continue to Sign In", + "line1LeftTxt": "You're trying to ", + "line1BoldTxt": "Sign In to Nynja. ", + "line1RightTxt": " If you did not initiate this, do not continue.", + "line2Txt": "Signing in to Nynja on Deshtop App.", + "signedIn": "You're signed in", + "successMsg": "Just open up the Nynja Desktop App and you'll be good to go.", + "invalidUUIDTitle": "Your request invalid", + "invalidUUIDTxt": "Please try signing in again." + }, "confirm-invitation": "Your response has been submitted.", "safariV13_1Warning": "We are sorry, Safari ver.13.1 is not supported for audio and video conferencing. It will be supported later this week. Please use current supported browsers, Chrome and Firefox." } \ No newline at end of file diff --git a/src/containers/Auth/components/LoginWithGoogleButton.js b/src/containers/Auth/components/LoginWithGoogleButton.js index c99c208ac..0fea0a746 100644 --- a/src/containers/Auth/components/LoginWithGoogleButton.js +++ b/src/containers/Auth/components/LoginWithGoogleButton.js @@ -11,6 +11,7 @@ import { notificationActions } from "Resource/notification"; import { withTranslation } from 'react-i18next'; import Button from '@material-ui/core/Button'; import { trackEvent, EVENT_NAMES, EVENT_PROPS } from '../../../core/managers/eventsTrackingManager'; +import firebase from 'firebase'; const mapDispatchToProps = dispatch => ({ navigateToSignUp: (gResponse, sidType) => dispatch(authActions.gVerificationTokenRequest(gResponse, sidType)), @@ -34,30 +35,68 @@ class LoginWithGoogleButton extends Component { doLogin = () => { this.props.startSocialAuth(); this.props.displaySocialAuthMsg(true); - if (this.popup) { - this.popup.close(); - } - this.popup = window.open(`https://accounts.google.com/o/oauth2/v2/auth?client_id=${OAuthConfig.googleClientId}&redirect_uri=${OAuthConfig.googleRedirectUri}&response_type=code&state=${this.stateStr}&scope=https://www.googleapis.com/auth/userinfo.profile`, - 'Google', 'height=550, width=550'); + /* @Bheem + * Login process for desktop + */ + if(isElectron && isElectron()){ + // firbase code start + const id = new Date().getTime(); + + // Initialize Firebase + const firebaseConfig = OAuthConfig.firebaseConfig; + firebase.initializeApp(firebaseConfig); + + await firebase.database().ref(`ot-auth-codes/${id}`).set({ authToken: 0, type:'google' }); + const oneTimeCodeRef = firebase.database().ref(`ot-auth-codes/${id}`) + oneTimeCodeRef.on('value', async snapshot => { + const resData = snapshot.val(); + console.log('[DT] authToken::Res::',resData); + if(resData.authToken!==0){ + console.log('[DT] authToken::',resData.authToken); - this.timer = setInterval(() => { - //Clear Interval if the popup is closed by user - if (this.popup && this.popup.closed) { - clearInterval(this.timer); - this.popup = null; - if (this.props && this.props.endSocialAuth) { - if (this.props.displaySocialAuthMsg) { - this.props.displaySocialAuthMsg(false); - } - this.props.endSocialAuth(); + //remove firebase ref key after success authenticate + oneTimeCodeRef.remove() + .then(function() { + console.log("[DT] Remove succeeded.") + }) + .catch(function(error) { + console.log("[DT] Remove failed: " + error.message) + }); + + this.props.navigateToSignUp(resData.authToken, 'GOOGLEPLUS'); } + }); + + const googleLink = `/desktop-sign-in?ot-auth-code=${id}`; + this.popup = window.open(googleLink, 'Google', 'height=550, width=550'); + + // firbase code end + } else { + if (this.popup) { + this.popup.close(); } - }, 1000); + this.popup = window.open(`https://accounts.google.com/o/oauth2/v2/auth?client_id=${OAuthConfig.googleClientId}&redirect_uri=${OAuthConfig.googleRedirectUri}&response_type=code&state=${this.stateStr}&scope=https://www.googleapis.com/auth/userinfo.profile`, + 'Google', 'height=550, width=550'); - if (this.popup) { - window.addEventListener("message", this.handleMessage, false); + this.timer = setInterval(() => { + //Clear Interval if the popup is closed by user + if (this.popup && this.popup.closed) { + clearInterval(this.timer); + this.popup = null; + if (this.props && this.props.endSocialAuth) { + if (this.props.displaySocialAuthMsg) { + this.props.displaySocialAuthMsg(false); + } + this.props.endSocialAuth(); + } + } + }, 1000); + + if (this.popup) { + window.addEventListener("message", this.handleMessage, false); + } + trackEvent(EVENT_NAMES.loginStart, { [EVENT_PROPS.loginType]: 'Google' }); } - trackEvent(EVENT_NAMES.loginStart, { [EVENT_PROPS.loginType]: 'Google' }); }; handleMessage = (event) => { diff --git a/src/containers/DesktopSignIn/DesktopSignIn.js b/src/containers/DesktopSignIn/DesktopSignIn.js new file mode 100644 index 000000000..31d0ec024 --- /dev/null +++ b/src/containers/DesktopSignIn/DesktopSignIn.js @@ -0,0 +1,217 @@ +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/styles'; +import { connect } from 'react-redux'; +import stylesFunc from './DesktopSigninScreenStyle'; +import googleIcon from 'Assets/img/icons/google-icon.png'; +import logoImage from 'Assets/img/logo_avatar.svg'; +import OAuthConfig from 'Core/configs/OAuth.config'; +import { authActions } from 'Core/resource/auth'; +import { bindActionCreators } from "redux"; +import { notificationActions } from "Resource/notification"; +import { withTranslation } from 'react-i18next'; +import { trackEvent, EVENT_NAMES, EVENT_PROPS } from '../../core/managers/eventsTrackingManager'; +import CustomScroll from 'react-custom-scrollbars'; +import { LoadingSpinner, NynjaHelmet } from '../../componets'; +import firebase from 'firebase'; + +const styles = theme => (stylesFunc(theme)); +const mapDispatchToProps = dispatch => ({ + navigateToSignUp: (gResponse, sidType) => dispatch(authActions.gVerificationTokenRequest(gResponse, sidType)), + startSocialAuth: () => dispatch(authActions.startSocialAuth()), + endSocialAuth: () => dispatch(authActions.endSocialAuth()), + actions: bindActionCreators({ + openMessageModal: notificationActions.openMessageModal, + closeMessageModal: notificationActions.closeMessageModal, + }, dispatch), +}); + +class DesktopSigIn extends Component { + constructor(props) { + super(props); + this.state = { + displaySocialAuthMsg: false, + isSuccess: false, + validOneTimeCode: true, + }; + this.popup = null; + this.timer = null; + this.stateStr = "koiu7869bvfvyu9KJ678HGtgybO8"; + } + + componentDidMount(){ + const _this = this; + + //showing loader + this.displaySocialAuthMsg(true); + + // Initialize Firebase + const firebaseConfig = OAuthConfig.firebaseConfig; + firebase.initializeApp(firebaseConfig); + + //get firebase ref + const oneTimeCodeRef = firebase.database().ref(`ot-auth-codes/${this.getOneTimeCode()}`) + + //check oneTimeCode exist in firbase + oneTimeCodeRef.once('value').then(function(dataSnapshot) { + if(dataSnapshot.val()==null){ + _this.setState({ validOneTimeCode: false }); + } + + //hide loader + _this.displaySocialAuthMsg(false); + }); + } + + displaySocialAuthMsg = (toShow) => { + this.setState({ displaySocialAuthMsg: toShow }); + }; + setResponseFlag = (flag) => { + this.setState({ isSuccess: flag }); + }; + doLogin = () => { + this.props.startSocialAuth(); + this.displaySocialAuthMsg(true); + if (this.popup) { + this.popup.close(); + } + this.popup = window.open(`https://accounts.google.com/o/oauth2/v2/auth?client_id=${OAuthConfig.googleClientId}&redirect_uri=${OAuthConfig.googleRedirectUri}&response_type=code&state=${this.stateStr}&scope=https://www.googleapis.com/auth/userinfo.profile`,'Google', 'height=550, width=550'); + //this.popup = window.open(`https://accounts.google.com/o/oauth2/v2/auth?client_id=${OAuthConfig.googleClientId}&redirect_uri=${OAuthConfig.googleRedirectUri}&response_type=code&state=${this.stateStr}&scope=https://www.googleapis.com/auth/userinfo.profile`,'_self'); + + this.timer = setInterval(() => { + //Clear Interval if the popup is closed by user + if (this.popup && this.popup.closed) { + clearInterval(this.timer); + this.popup = null; + if (this.props && this.props.endSocialAuth) { + if (this.displaySocialAuthMsg) { + this.displaySocialAuthMsg(false); + } + this.props.endSocialAuth(); + } + } + }, 1000); + + if (this.popup) { + window.addEventListener("message", this.handleMessage, false); + } + trackEvent(EVENT_NAMES.loginStart, { [EVENT_PROPS.loginType]: 'Google' }); + }; + + handleMessage = async (event) => { + if (!this.popup) { + return; + } + this.popup.close(); + this.popup = undefined; + clearInterval(this.timer); + window.removeEventListener('message', this.handleMessage); + + this.displaySocialAuthMsg(false); + if (event.data.code) { + this.setResponseFlag(true); + + /* start store token in firbase */ + await firebase.database().ref(`ot-auth-codes/${this.getOneTimeCode()}`).set({ authToken: event.data.code, type:event.data.type }) + console.log('event.data',event.data); + /* end store token in firbase */ + + //this.props.navigateToSignUp(event.data.code, 'GOOGLEPLUS'); + } else { + // handle error + this.props.actions.openMessageModal(this.props.t('login-with-google-fail')); + this.setResponseFlag(false); + setTimeout(() => { + this.props.actions.closeMessageModal(); + }, 3000); + } + }; + + getOneTimeCode = () =>{ + const params = new URLSearchParams(this.props.location.search) + return params.get("ot-auth-code") + } + + componentWillUnmount() { + if (this.popup) { + this.popup.close(); + this.popup = undefined; + } + if (this.timer) { + clearInterval(this.timer); + } + window.removeEventListener('message', this.handleMessage); + } + + renderInfoComponent = ()=> { + + const { classes, t } = this.props; + if(this.state.validOneTimeCode){ + if(!this.state.isSuccess){ + return ( + <> +

{t('desktopSigingPage.signIn')}

+

+ {t('desktopSigingPage.line1LeftTxt')} + {t('desktopSigingPage.line1BoldTxt')} + {t('desktopSigingPage.line1RightTxt')} +

+
+
+

{t('desktopSigingPage.line2Txt')}

+ + + ) + } else { + return ( + <> +

{t('desktopSigingPage.signedIn')}

+

{t('desktopSigingPage.successMsg')}

+
+ + ) + } + } else { + return ( + <> +

{t('desktopSigingPage.invalidUUIDTitle')}

+

{t('desktopSigingPage.invalidUUIDTxt')}

+
+ + ) + } + return null; + } + + render() { + const { classes, t } = this.props; + console.log('STATE',this.state); + return ( +
+ +
+
+ logo +
+
+ { + this.state.displaySocialAuthMsg + ? + : this.renderInfoComponent() + } +
+
+
+ ); + } +} + +DesktopSigIn.propTypes = { + classes: PropTypes.object.isRequired, + t: PropTypes.func.isRequired +}; + +export default connect( + null, + mapDispatchToProps +)(withStyles(styles)(withTranslation()(DesktopSigIn))); \ No newline at end of file diff --git a/src/containers/DesktopSignIn/DesktopSigninScreenStyle.js b/src/containers/DesktopSignIn/DesktopSigninScreenStyle.js new file mode 100644 index 000000000..ee4820012 --- /dev/null +++ b/src/containers/DesktopSignIn/DesktopSigninScreenStyle.js @@ -0,0 +1,83 @@ +export default ( + theme, + appStoreImage, + playStoreImage, + arrowImage, + mountainImage, + mountainImage4k, + screensImage, + screensImage4k, + bambooImage, + bambooImage4k, + bgImageMob +) => ({ + wrapper: { + position: 'relative', + background: '#F5F5F5', + fontSize: '14px', + fontFamily: '"noto_sansregular", Arial, Tahoma, sans-serif', + }, + conentBox:{ + background: '#fff', + textAlign: 'center', + position: 'absolute', + left: 0, + right: 0, + top: '15%', + margin: '0 auto', + width: '25%', + padding: '45px', + minHeight: 'auto !important', + boxShadow: '0 2px 4px 0 rgba(0,0,0,.2)', + borderRadius: '3px', + '@media (max-width: 786px)': { + width: '90%', + } + }, + content:{ + marginTop: '22px', + '& h3':{ + fontWeight: '500', + fontSize: '18px', + marginBottom: '18px', + marginTop: '24px', + } + }, + logoParent: { + position: 'absolute', + background: '#ffffff', + top: '-45px', + left: 0, + right: 0, + margin: '0 auto', + width: '99px', + height: '99px', + padding: '23px 16px', + borderRadius: '50%', + overflow: 'hidden', + }, + logoImg:{ + width: '70px' + }, + signInBtn: { + color: '#c90010', + border: '2px solid #c90010', + background: 'none', + fontSize: '16px', + height: 'auto', + borderRadius: '27px', + width: '70%', + display: ' inline-block', + transition: 'all 0.3s ease-out', + marginTop: '15px', + lineHeight: 2, + '&:hover': { + borderColor: '#ffffff', + background: '#ffffff', + boxShadow: '0 3px 8px 0 rgba(0, 0, 0, 0.4)', + }, + '@media (max-width: 420px)': { + width: '75%', + } + }, +}); diff --git a/src/core/configs/OAuth.config.js b/src/core/configs/OAuth.config.js index 1cdede90c..f77c7f117 100644 --- a/src/core/configs/OAuth.config.js +++ b/src/core/configs/OAuth.config.js @@ -38,10 +38,56 @@ function getGoogleClientId() { } } +function getFirebaseConfig() { + const firebaseConfig = { + 'PROD':{ + apiKey: "AIzaSyAkYWAfciFhM35qkDKTFaVst3g2xPpOMcU", + authDomain: "nynja-178111.firebaseapp.com", + databaseURL: "https://nynja-178111.firebaseio.com", + projectId: "nynja-178111", + storageBucket: "nynja-178111.appspot.com", + messagingSenderId: "13807320472", + appId: "1:13807320472:web:b6d5c4aadf1cdb99aa3fed" + }, + 'STAGING':{ + apiKey: "AIzaSyAkYWAfciFhM35qkDKTFaVst3g2xPpOMcU", + authDomain: "nynja-178111.firebaseapp.com", + databaseURL: "https://nynja-178111.firebaseio.com", + projectId: "nynja-178111", + storageBucket: "nynja-178111.appspot.com", + messagingSenderId: "13807320472", + appId: "1:13807320472:web:b6d5c4aadf1cdb99aa3fed" + }, + 'DEV':{ + apiKey: "AIzaSyAkYWAfciFhM35qkDKTFaVst3g2xPpOMcU", + authDomain: "nynja-178111.firebaseapp.com", + databaseURL: "https://nynja-178111.firebaseio.com", + projectId: "nynja-178111", + storageBucket: "nynja-178111.appspot.com", + messagingSenderId: "13807320472", + appId: "1:13807320472:web:b6d5c4aadf1cdb99aa3fed" + } + }; + + if (process && process.env && process.env.NODE_ENV === 'development') { + return firebaseConfig['STAGING']; + } + + const host = location.hostname; + if (host.indexOf('dev.nynja') > -1) { + return firebaseConfig['DEV']; // Nynja - Dev + } else if (host.indexOf('staging') > -1) { + return firebaseConfig['STAGING']; // Nynja - Staging + } else { + return firebaseConfig['PROD']; // Nynja - Production + } +} + export default ({ facebookClientId: getFbClientId(), facebookRedirectUrl: `${getHost()}/oauth/facebook/index.html`, // facebookRedirectUrl: 'https://web.dev-eu.nynja.net/oauth/facebook/', googleClientId: getGoogleClientId(), googleRedirectUri: `${getHost()}/oauth/google/index.html`, + firebaseConfig: getFirebaseConfig(), }); diff --git a/src/routes.js b/src/routes.js index 257173ef7..07028b273 100644 --- a/src/routes.js +++ b/src/routes.js @@ -13,7 +13,7 @@ import EventSignupHistory from './layouts/EventSignupHistory/EventSignupHistory' import EventSignupNew from './layouts/EventSignupNew/EventSignupNew'; import EventSignupInvitation from './layouts/EventSignupInvitation/EventSignupInvitation'; import EventInvitation from './containers/EventInvitation/InvitationScreen'; - +import DesktopSignIn from './containers/DesktopSignIn/DesktopSignIn'; export default (dispatch) => /** @@ -29,6 +29,7 @@ export default (dispatch) => + -- GitLab From 1241732b9698afd9a79ceda9650713fe2f054e59 Mon Sep 17 00:00:00 2001 From: Bheem Date: Wed, 10 Jun 2020 20:36:17 +0530 Subject: [PATCH 2/4] added firebase package --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4cf5ada47..8849ee951 100644 --- a/package.json +++ b/package.json @@ -34,6 +34,7 @@ "dotenv-webpack": "^1.7.0", "emoji-mart": "^2.11.2", "file-saver": "^2.0.0-rc.4", + "firebase": "^7.15.0", "i18next": "^18.0.1", "i18next-browser-languagedetector": "^4.0.1", "image-compressor.js": "^1.1.4", -- GitLab From f5748ea1bc7ff6e064d891eed01b898cd7332b83 Mon Sep 17 00:00:00 2001 From: Bheem Date: Thu, 11 Jun 2020 14:48:26 +0530 Subject: [PATCH 3/4] corrected typo --- src/assets/languages/en.json | 2 +- src/containers/DesktopSignIn/DesktopSignIn.js | 26 +++++++++---------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index ce164f059..64bc68ed5 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -1625,7 +1625,7 @@ "desc": "Event Description :" } }, - "desktopSigingPage":{ + "desktopSigningPage":{ "pageTitle": "Browser Based Auth | Nynja", "signIn": "Sign In", "signinBtn": "Continue to Sign In", diff --git a/src/containers/DesktopSignIn/DesktopSignIn.js b/src/containers/DesktopSignIn/DesktopSignIn.js index 31d0ec024..f68e76770 100644 --- a/src/containers/DesktopSignIn/DesktopSignIn.js +++ b/src/containers/DesktopSignIn/DesktopSignIn.js @@ -26,7 +26,7 @@ const mapDispatchToProps = dispatch => ({ }, dispatch), }); -class DesktopSigIn extends Component { +class DesktopSignIn extends Component { constructor(props) { super(props); this.state = { @@ -150,23 +150,23 @@ class DesktopSigIn extends Component { if(!this.state.isSuccess){ return ( <> -

{t('desktopSigingPage.signIn')}

+

{t('desktopSigningPage.signIn')}

- {t('desktopSigingPage.line1LeftTxt')} - {t('desktopSigingPage.line1BoldTxt')} - {t('desktopSigingPage.line1RightTxt')} + {t('desktopSigningPage.line1LeftTxt')} + {t('desktopSigningPage.line1BoldTxt')} + {t('desktopSigningPage.line1RightTxt')}



-

{t('desktopSigingPage.line2Txt')}

- +

{t('desktopSigningPage.line2Txt')}

+ ) } else { return ( <> -

{t('desktopSigingPage.signedIn')}

-

{t('desktopSigingPage.successMsg')}

+

{t('desktopSigningPage.signedIn')}

+

{t('desktopSigningPage.successMsg')}


) @@ -174,8 +174,8 @@ class DesktopSigIn extends Component { } else { return ( <> -

{t('desktopSigingPage.invalidUUIDTitle')}

-

{t('desktopSigingPage.invalidUUIDTxt')}

+

{t('desktopSigningPage.invalidUUIDTitle')}

+

{t('desktopSigningPage.invalidUUIDTxt')}


) @@ -188,7 +188,7 @@ class DesktopSigIn extends Component { console.log('STATE',this.state); return (
- +
logo @@ -214,4 +214,4 @@ DesktopSigIn.propTypes = { export default connect( null, mapDispatchToProps -)(withStyles(styles)(withTranslation()(DesktopSigIn))); \ No newline at end of file +)(withStyles(styles)(withTranslation()(DesktopSignIn))); \ No newline at end of file -- GitLab From 73a4fd4393091bf8573824d400db6c9549ba23f7 Mon Sep 17 00:00:00 2001 From: Bheem Date: Thu, 11 Jun 2020 14:51:05 +0530 Subject: [PATCH 4/4] corrected typo --- src/containers/DesktopSignIn/DesktopSignIn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/DesktopSignIn/DesktopSignIn.js b/src/containers/DesktopSignIn/DesktopSignIn.js index f68e76770..8e7bc0124 100644 --- a/src/containers/DesktopSignIn/DesktopSignIn.js +++ b/src/containers/DesktopSignIn/DesktopSignIn.js @@ -206,7 +206,7 @@ class DesktopSignIn extends Component { } } -DesktopSigIn.propTypes = { +DesktopSignIn.propTypes = { classes: PropTypes.object.isRequired, t: PropTypes.func.isRequired }; -- GitLab