From 6155a46e71a5c8625cc76df6fc12d7b19954c14d Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 19 Apr 2017 18:10:09 -0300 Subject: [PATCH] Sign up popup --- client/coral-embed-stream/src/Embed.js | 28 ++++++++-------- client/coral-framework/actions/auth.js | 17 +++++----- .../coral-settings/components/NotLoggedIn.js | 7 ++-- .../containers/ProfileContainer.js | 32 ++++++++++++------- .../containers/SignInContainer.js | 3 -- 5 files changed, 46 insertions(+), 41 deletions(-) diff --git a/client/coral-embed-stream/src/Embed.js b/client/coral-embed-stream/src/Embed.js index d864025e5..62a33982d 100644 --- a/client/coral-embed-stream/src/Embed.js +++ b/client/coral-embed-stream/src/Embed.js @@ -8,7 +8,7 @@ const lang = new I18n(translations); import {TabBar, Tab, TabContent, Spinner, Button} from 'coral-ui'; -const {logout, showSignInDialog, requestConfirmEmail, signInPopUp} = authActions; +const {logout, showSignInDialog, requestConfirmEmail, openSignInPopUp, checkLogin} = authActions; const {addNotification, clearNotification} = notificationActions; const {fetchAssetSuccess} = assetActions; import {NEW_COMMENT_COUNT_POLL_INTERVAL} from 'coral-framework/constants/comments'; @@ -26,7 +26,6 @@ import {ModerationLink} from 'coral-plugin-moderation'; import Count from 'coral-plugin-comment-count/CommentCount'; import CommentBox from 'coral-plugin-commentbox/CommentBox'; import UserBox from 'coral-sign-in/components/UserBox'; -import SignInContainer from 'coral-sign-in/containers/SignInContainer'; import SuspendedAccount from 'coral-framework/components/SuspendedAccount'; import ChangeUsernameContainer from '../../coral-sign-in/containers/ChangeUsernameContainer'; import ProfileContainer from 'coral-settings/containers/ProfileContainer'; @@ -78,6 +77,7 @@ class Embed extends React.Component { componentDidMount () { pym.sendMessage('childReady'); + this.props.checkLogin(); } componentWillUnmount () { @@ -126,14 +126,14 @@ class Embed extends React.Component { } } - runPopUpLogin = () => { - // const newwindow = window.open( - // 'http://localhost:3000/embed/stream/login','Login','height=420,width=310,top=200,left=500'); - // if (window.focus) { - // newwindow.focus(); - // } - // return false; - this.props.signInPopUp(); + signIn = () => { + const {refetch} = this.props.data; + const {openSignInPopUp, checkLogin} = this.props; + + openSignInPopUp(() => { + checkLogin(); + refetch(); + }); } render () { @@ -229,9 +229,9 @@ class Embed extends React.Component { :

{asset.settings.closedMessage}

} - + {!loggedIn && } - {loggedIn && user && } + {loggedIn && user && } {loggedIn && } {/* the highlightedComment is isolated after the user followed a permalink */} @@ -299,7 +299,6 @@ class Embed extends React.Component { @@ -333,7 +332,8 @@ const mapDispatchToProps = dispatch => ({ updateCountCache: (id, count) => dispatch(updateCountCache(id, count)), viewAllComments: () => dispatch(viewAllComments()), logout: () => dispatch(logout()), - signInPopUp: () => dispatch(signInPopUp()), + openSignInPopUp: cb => dispatch(openSignInPopUp(cb)), + checkLogin: () => dispatch(checkLogin()), dispatch: d => dispatch(d), }); diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index dd90f6422..7fcbefd36 100644 --- a/client/coral-framework/actions/auth.js +++ b/client/coral-framework/actions/auth.js @@ -64,12 +64,7 @@ const signInFailure = error => ({type: actions.FETCH_SIGNIN_FAILURE, error}); export const fetchSignIn = (formData) => (dispatch) => { dispatch(signInRequest()); return coralApi('/auth/local', {method: 'POST', body: formData}) - .then(({user}) => { - const isAdmin = !!user && !!user.roles.filter(i => i === 'ADMIN').length; - dispatch(signInSuccess(user, isAdmin)); - dispatch(hideSignInDialog()); - fetchMe(); - }) + .then(() => dispatch(closeSignInPopUp())) .catch(error => { if (error.metadata) { @@ -85,12 +80,18 @@ export const fetchSignIn = (formData) => (dispatch) => { // Sign In - Standalone PopUp -export const signInPopUp = () => () => { - window.open( +export const openSignInPopUp = cb => () => { + const signInPopUp = window.open( '/embed/stream/login', 'Login', 'menubar=0,resizable=0,width=500,height=500,top=200,left=500' ); + + signInPopUp.onbeforeunload = cb; +}; + +export const closeSignInPopUp = () => () => { + window.close(); }; // Sign In - Facebook diff --git a/client/coral-settings/components/NotLoggedIn.js b/client/coral-settings/components/NotLoggedIn.js index c76553c50..4dfd49555 100644 --- a/client/coral-settings/components/NotLoggedIn.js +++ b/client/coral-settings/components/NotLoggedIn.js @@ -5,13 +5,10 @@ import translations from '../translations'; import I18n from 'coral-framework/modules/i18n/i18n'; const lang = new I18n(translations); -export default ({showSignInDialog, requireEmailConfirmation}) => ( +export default ({signIn}) => (
-
- { - showSignInDialog(); - }}>{lang.t('signIn')} {lang.t('toAccess')} + {lang.t('signIn')} {lang.t('toAccess')}
{lang.t('fromSettingsPage')} diff --git a/client/coral-settings/containers/ProfileContainer.js b/client/coral-settings/containers/ProfileContainer.js index 2d756077d..7a26ed13e 100644 --- a/client/coral-settings/containers/ProfileContainer.js +++ b/client/coral-settings/containers/ProfileContainer.js @@ -2,6 +2,7 @@ import {connect} from 'react-redux'; import {compose} from 'react-apollo'; import React, {Component} from 'react'; import I18n from 'coral-framework/modules/i18n/i18n'; +import {bindActionCreators} from 'redux'; import {myCommentHistory, myIgnoredUsers} from 'coral-framework/graphql/queries'; import {stopIgnoringUser} from 'coral-framework/graphql/mutations'; @@ -12,6 +13,8 @@ import IgnoredUsers from '../components/IgnoredUsers'; import {Spinner} from 'coral-ui'; import CommentHistory from 'coral-plugin-history/CommentHistory'; +import {openSignInPopUp, checkLogin} from 'coral-framework/actions/auth'; + import translations from '../translations'; const lang = new I18n(translations); @@ -31,18 +34,28 @@ class ProfileContainer extends Component { }); } - render() { - const {loggedIn, asset, showSignInDialog, data, myIgnoredUsersData, stopIgnoringUser} = this.props; - const {me} = this.props.data; + signIn = () => { + const {refetch} = this.props.data; + const {openSignInPopUp, checkLogin} = this.props; - if (!loggedIn || !me) { - return ; - } + openSignInPopUp(() => { + checkLogin(); + refetch(); + }); + } + + render() { + const {loggedIn, asset, data, myIgnoredUsersData, stopIgnoringUser} = this.props; + const {me} = this.props.data; if (data.loading) { return ; } + if (!loggedIn || !me) { + return ; + } + const localProfile = this.props.user.profiles.find(p => p.provider === 'local'); const emailAddress = localProfile && localProfile.id; @@ -81,7 +94,6 @@ class ProfileContainer extends Component { :

{lang.t('userNoComment')}

} -
); } @@ -93,10 +105,8 @@ const mapStateToProps = state => ({ auth: state.auth.toJS() }); -const mapDispatchToProps = () => ({ - - // saveBio: (user_id, formData) => dispatch(saveBio(user_id, formData)) -}); +const mapDispatchToProps = dispatch => + bindActionCreators({openSignInPopUp, checkLogin}, dispatch); export default compose( connect(mapStateToProps, mapDispatchToProps), diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js index 01a03e49c..5d8c828ae 100644 --- a/client/coral-sign-in/containers/SignInContainer.js +++ b/client/coral-sign-in/containers/SignInContainer.js @@ -156,9 +156,6 @@ class SignInContainer extends Component { return (
- {/*{!noButton && }*/}