Sign up popup

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 {
                : <p>{asset.settings.closedMessage}</p>
             }
 
-            <Button id='coralSignInButton' onClick={this.runPopUpLogin} full>Sign in to comment</Button>
+            {!loggedIn && <Button id='coralSignInButton' onClick={this.signIn} full>Sign in to comment</Button>}
 
-            {loggedIn &&  user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
+            {loggedIn && user && <ChangeUsernameContainer loggedIn={loggedIn} offset={signInOffset} user={user} />}
             {loggedIn && <ModerationLink assetId={asset.id} isAdmin={isAdmin} />}
 
             {/* the highlightedComment is isolated after the user followed a permalink */}
@@ -299,7 +299,6 @@ class Embed extends React.Component {
             <ProfileContainer
               loggedIn={loggedIn}
               userData={this.props.userData}
-              showSignInDialog={this.props.showSignInDialog}
             />
           </TabContent>
           <TabContent show={activeTab === 2}>
@@ -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),
 });
 

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

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}) => (
   <div className={styles.message}>
-    <SignInContainer noButton={true} requireEmailConfirmation={requireEmailConfirmation}/>
     <div>
-      <a onClick={() => {
-        showSignInDialog();
-      }}>{lang.t('signIn')}</a> {lang.t('toAccess')}
+      <a onClick={signIn}>{lang.t('signIn')}</a> {lang.t('toAccess')}
     </div>
     <div>
       {lang.t('fromSettingsPage')}

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 <NotLoggedIn showSignInDialog={showSignInDialog} requireEmailConfirmation={asset.settings.requireEmailConfirmation}/>;
-    }
+    openSignInPopUp(() => {
+      checkLogin();
+      refetch();
+    });
+  }
+
+  render() {
+    const {loggedIn, asset, data, myIgnoredUsersData, stopIgnoringUser} = this.props;
+    const {me} = this.props.data;
 
     if (data.loading) {
       return <Spinner/>;
     }
 
+    if (!loggedIn || !me) {
+      return <NotLoggedIn signIn={this.signIn} />;
+    }
+
     const localProfile = this.props.user.profiles.find(p => p.provider === 'local');
     const emailAddress = localProfile && localProfile.id;
 
@@ -81,7 +94,6 @@ class ProfileContainer extends Component {
           :
             <p>{lang.t('userNoComment')}</p>
         }
-
       </div>
     );
   }
@@ -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),

client/coral-sign-in/containers/SignInContainer.js

@@ -156,9 +156,6 @@ class SignInContainer extends Component {
 
     return (
       <div>
-        {/*{!noButton && <Button id='coralSignInButton' onClick={showSignInDialog} full>*/}
-          {/*Sign in to comment*/}
-        {/*</Button>}*/}
         <SignDialog
           open={true}
           view={auth.view}