Cleanup, and UserBox with Logout

client/coral-embed-stream/src/CommentStream.js

@@ -16,10 +16,11 @@ import Pym from 'pym.js';
 import FlagButton from '../../coral-plugin-flags/FlagButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
+import UserBox from '../../coral-sign-in/components/UserBox';
 
 const {addItem, updateItem, postItem, getStream, postAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
-const {setLoggedInUser} = authActions;
+const {logout} = authActions;
 
 const mapStateToProps = (state) => {
   return {
@@ -30,37 +31,19 @@ const mapStateToProps = (state) => {
   };
 };
 
-const mapDispatchToProps = (dispatch) => {
-  return {
-    addItem: (item, itemType) => {
-      return dispatch(addItem(item, itemType));
-    },
-    updateItem: (id, property, value, itemType) => {
-      return dispatch(updateItem(id, property, value, itemType));
-    },
-    postItem: (data, type, id) => {
-      return dispatch(postItem(data, type, id));
-    },
-    getStream: (rootId) => {
-      return dispatch(getStream(rootId));
-    },
-    addNotification: (type, text) => {
-      return dispatch(addNotification(type, text));
-    },
-    clearNotification: () => {
-      return dispatch(clearNotification());
-    },
-    setLoggedInUser: (user_id) => {
-      return dispatch(setLoggedInUser(user_id));
-    },
-    postAction: (item, action, user, itemType) => {
-      return dispatch(postAction(item, action, user, itemType));
-    },
-    appendItemArray: (item, property, value, addToFront, itemType) => {
-      return dispatch(appendItemArray(item, property, value, addToFront, itemType));
-    }
-  };
-};
+const mapDispatchToProps = (dispatch) => ({
+  addItem: (item, itemType) => dispatch(addItem(item, itemType)),
+  updateItem: (id, property, value, itemType) => dispatch(updateItem(id, property, value, itemType)),
+  postItem: (data, type, id) => dispatch(postItem(data, type, id)),
+  getStream: (rootId) => dispatch(getStream(rootId)),
+  addNotification: (type, text) => dispatch(addNotification(type, text)),
+  clearNotification: () => dispatch(clearNotification()),
+  setLoggedInUser: (user_id) => dispatch(setLoggedInUser(user_id)),
+  postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)),
+  appendItemArray: (item, property, value, addToFront, itemType) =>
+    dispatch(appendItemArray(item, property, value, addToFront, itemType)),
+  logout: () => dispatch(logout())
+});
 
 class CommentStream extends Component {
 
@@ -96,6 +79,7 @@ class CommentStream extends Component {
 
     const rootItemId = 'assetTest';
     const rootItem = this.props.items.assets && this.props.items.assets[rootItemId];
+    const {loggedIn, user} = this.props.auth;
     return <div>
       {
         rootItem
@@ -104,6 +88,7 @@ class CommentStream extends Component {
             <Count
               id={rootItemId}
               items={this.props.items}/>
+            {loggedIn && <UserBox user={user} logout={this.props.logout} />}
             <CommentBox
               addNotification={this.props.addNotification}
               postItem={this.props.postItem}
@@ -111,8 +96,10 @@ class CommentStream extends Component {
               updateItem={this.props.updateItem}
               id={rootItemId}
               premod={this.props.config.moderation}
-              reply={false}/>
-            <SignInContainer />
+              reply={false}
+              canPost={loggedIn}
+            />
+            {!loggedIn && <SignInContainer />}
           </div>
           {
             rootItem.comments.map((commentId) => {

client/coral-framework/actions/auth.js

@@ -30,8 +30,8 @@ export const fetchSignIn = () => dispatch => {
 // Sign In - Facebook
 
 const signInFacebookRequest = () => ({type: actions.FETCH_SIGNIN_FACEBOOK_REQUEST});
-const signInFacebookSuccess = () => ({type: actions.FETCH_SIGNIN_FACEBOOK_SUCCESS});
-const signInFacebookFailure = () => ({type: actions.FETCH_SIGNIN_FACEBOOK_FAILURE});
+const signInFacebookSuccess = (user) => ({type: actions.FETCH_SIGNIN_FACEBOOK_SUCCESS, user});
+const signInFacebookFailure = (error) => ({type: actions.FETCH_SIGNIN_FACEBOOK_FAILURE, error});
 
 export const fetchSignInFacebook = () => dispatch => {
   dispatch(signInFacebookRequest());
@@ -83,13 +83,17 @@ export const fetchForgotPassword = () => dispatch => {
     .catch(error => dispatch(forgotPassowordFailure(error)));
 };
 
-// LogOut
+// LogOut Actions
+
+const logOutRequest = () => ({type: actions.LOGOUT_REQUEST});
+const logOutSuccess = () => ({type: actions.LOGOUT_SUCCESS});
+const logOutFailure = () => ({type: actions.LOGOUT_FAILURE});
 
 export const logout = () => dispatch => {
-  dispatch(signInRequest());
+  dispatch(logOutRequest());
   fetch(`${base}/auth`, getInit('DELETE'))
     .then(handleResp)
-    .then(() => dispatch(signInSuccess()))
-    .catch(error => dispatch(signInFailure(error)));
+    .then(() => dispatch(logOutSuccess()))
+    .catch(error => dispatch(logOutFailure(error)));
 };
 

client/coral-framework/constants/auth.js

@@ -19,3 +19,7 @@ export const FETCH_SIGNIN_FACEBOOK_SUCCESS = 'FETCH_SIGNIN_FACEBOOK_SUCCESS';
 export const FETCH_FORGOT_PASSWORD_REQUEST = 'FETCH_FORGOT_PASSWORD_REQUEST';
 export const FETCH_FORGOT_PASSWORD_SUCCESS = 'FETCH_FORGOT_PASSWORD_SUCCESS';
 export const FETCH_FORGOT_PASSWORD_FAILURE = 'FETCH_FORGOT_PASSWORD_FAILURE';
+
+export const LOGOUT_REQUEST = 'LOGOUT_REQUEST';
+export const LOGOUT_SUCCESS = 'LOGOUT_SUCCESS';
+export const LOGOUT_FAILURE = 'LOGOUT_FAILURE';

client/coral-framework/reducers/auth.js

@@ -7,7 +7,10 @@ import {
   CLEAN_STATE,
   FETCH_SIGNIN_REQUEST,
   FETCH_SIGNIN_FAILURE,
-  FETCH_SIGNIN_SUCCESS
+  FETCH_SIGNIN_SUCCESS,
+  FETCH_SIGNIN_FACEBOOK_SUCCESS,
+  FETCH_SIGNIN_FACEBOOK_FAILURE,
+  LOGOUT_SUCCESS
 } from '../constants/auth';
 
 const initialState = Map({
@@ -15,7 +18,7 @@ const initialState = Map({
   isLoading: false,
   loggedIn: false,
   error: '',
-  user: {},
+  user: null,
   showSignInDialog: false,
   view: 'SIGNIN'
 });
@@ -43,6 +46,19 @@ export default function auth (state = initialState, action) {
   case FETCH_SIGNIN_SUCCESS:
     return state
       .set('isLoading', false);
+  case FETCH_SIGNIN_FACEBOOK_SUCCESS:
+    return state
+      .set('user', action.user)
+      .set('loggedIn', true)
+      .set('showSignInDialog', false);
+  case FETCH_SIGNIN_FACEBOOK_FAILURE:
+    return state
+      .set('error', action.error)
+      .set('user', null);
+  case LOGOUT_SUCCESS:
+    return state
+      .set('loggedIn', false)
+      .set('user', null);
   default :
     return state;
   }

client/coral-plugin-commentbox/CommentBox.js

@@ -11,7 +11,8 @@ class CommentBox extends Component {
     updateItem: PropTypes.func,
     id: PropTypes.string,
     comments: PropTypes.array,
-    reply: PropTypes.bool
+    reply: PropTypes.bool,
+    canPost: PropTypes.bool
   }
 
   state = {
@@ -51,7 +52,7 @@ class CommentBox extends Component {
   }
 
   render () {
-    const {styles, reply} = this.props;
+    const {styles, reply, canPost} = this.props;
     // How to handle language in plugins? Should we have a dependency on our central translation file?
     return <div>
         <div className={`${name}-container`}>
@@ -81,12 +82,15 @@ class CommentBox extends Component {
             rows={3}/>
         </div>
         <div className={`${name}-button-container`}>
-          <button
-            className={`${name}-button`}
-            style={styles && styles.button}
-            onClick={this.postComment}>
-            {lang.t('post')}
-          </button>
+          { canPost && (
+              <button
+                className={`${name}-button`}
+                style={styles && styles.button}
+                onClick={this.postComment}>
+                {lang.t('post')}
+              </button>
+            )
+          }
       </div>
     </div>;
   }

client/coral-sign-in/components/UserBox.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from './styles.css';
+
+const UserBox = ({className, user, logout, ...props}) => (
+  <div
+    className={`${styles.userBox} ${className}`}
+    {...props}
+  >
+    Signed in as <a>{user.displayName}</a>. Not you? <a onClick={logout}>Sign out</a>
+  </div>
+);
+
+export default UserBox;

client/coral-sign-in/components/styles.css

@@ -99,4 +99,10 @@ input.error{
     border: solid 1px #f44336;
     background: #F1A097;
     color: #741818;
+}
+
+.userBox a {
+    color: #2c69b6;
+    cursor: pointer;
+    margin: 0 5px;
 }