diff --git a/package.json b/package.json index 4cf5ada4761752ff7316aec90f5414aa842e126a..8849ee95129b96a173a03ee070b8893e8145fb47 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", diff --git a/src/assets/languages/en.json b/src/assets/languages/en.json index 35f5069a735732efdcb9d91c4a54ce523f5d9d01..64bc68ed5889e28fe5f72bd5fbeeb3abf28de773 100644 --- a/src/assets/languages/en.json +++ b/src/assets/languages/en.json @@ -1625,6 +1625,19 @@ "desc": "Event Description :" } }, + "desktopSigningPage":{ + "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 c99c208ac786ac12d6e8ef5203916ba5ea692887..0fea0a746a9084269fc0e44d8dd5cb4f94ddd71b 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 0000000000000000000000000000000000000000..8e7bc012465469754900f50bd56b9803b888e186 --- /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 DesktopSignIn 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('desktopSigningPage.signIn')}

+

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

+
+
+

{t('desktopSigningPage.line2Txt')}

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

{t('desktopSigningPage.signedIn')}

+

{t('desktopSigningPage.successMsg')}

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

{t('desktopSigningPage.invalidUUIDTitle')}

+

{t('desktopSigningPage.invalidUUIDTxt')}

+
+ + ) + } + return null; + } + + render() { + const { classes, t } = this.props; + console.log('STATE',this.state); + return ( +
+ +
+
+ logo +
+
+ { + this.state.displaySocialAuthMsg + ? + : this.renderInfoComponent() + } +
+
+
+ ); + } +} + +DesktopSignIn.propTypes = { + classes: PropTypes.object.isRequired, + t: PropTypes.func.isRequired +}; + +export default connect( + null, + mapDispatchToProps +)(withStyles(styles)(withTranslation()(DesktopSignIn))); \ 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 0000000000000000000000000000000000000000..ee4820012c0f06055daeb045dd50f2330f049f28 --- /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 1cdede90c624f8a11ba4210cf9d7058b24cc70ac..f77c7f1173c9534da6a4ba465a40d7483a96c0ac 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 257173ef708762b6e409530e0f81e9e34dc7a912..07028b27315b19b49337032db9382f28f194a667 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) => +