diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js index 31457787a..3fa989dcc 100644 --- a/client/coral-embed-stream/src/CommentStream.js +++ b/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
{ rootItem @@ -104,6 +88,7 @@ class CommentStream extends Component { + {loggedIn && } - + reply={false} + canPost={loggedIn} + /> + {!loggedIn && }
{ rootItem.comments.map((commentId) => { diff --git a/client/coral-framework/actions/auth.js b/client/coral-framework/actions/auth.js index 184f6b1d6..3981d8021 100644 --- a/client/coral-framework/actions/auth.js +++ b/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))); }; diff --git a/client/coral-framework/constants/auth.js b/client/coral-framework/constants/auth.js index c48894cc5..06558d513 100644 --- a/client/coral-framework/constants/auth.js +++ b/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'; diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js index 5e54d70b6..89e7c8012 100644 --- a/client/coral-framework/reducers/auth.js +++ b/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; } diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js index 9032ad328..9f1ea39c6 100644 --- a/client/coral-plugin-commentbox/CommentBox.js +++ b/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
@@ -81,12 +82,15 @@ class CommentBox extends Component { rows={3}/>
- + { canPost && ( + + ) + }
; } diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js new file mode 100644 index 000000000..17c8453fb --- /dev/null +++ b/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}) => ( +
+ Signed in as {user.displayName}. Not you? Sign out +
+); + +export default UserBox; diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css index 3800f53e1..3a83d0985 100644 --- a/client/coral-sign-in/components/styles.css +++ b/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; } \ No newline at end of file