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.line1LeftTxt')} + {t('desktopSigningPage.line1BoldTxt')} + {t('desktopSigningPage.line1RightTxt')} +
+{t('desktopSigningPage.line2Txt')}
+ + > + ) + } else { + return ( + <> +{t('desktopSigningPage.successMsg')}
+{t('desktopSigningPage.invalidUUIDTxt')}
+