Sign in a restricted rout

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

@@ -1,11 +1,14 @@
 import React, {Component, PropTypes} from 'react';
+import Pym from 'pym.js';
+import {connect} from 'react-redux';
+
 import {
   itemActions,
   Notification,
   notificationActions,
   authActions,
 } from '../../coral-framework';
-import {connect} from 'react-redux';
+
 import CommentBox from '../../coral-plugin-commentbox/CommentBox';
 import InfoBox from '../../coral-plugin-infobox/InfoBox';
 import Content from '../../coral-plugin-commentcontent/CommentContent';
@@ -13,44 +16,20 @@ import PubDate from '../../coral-plugin-pubdate/PubDate';
 import Count from '../../coral-plugin-comment-count/CommentCount';
 import AuthorName from '../../coral-plugin-author-name/AuthorName';
 import {ReplyBox, ReplyButton} from '../../coral-plugin-replies';
-import Pym from 'pym.js';
 import FlagButton from '../../coral-plugin-flags/FlagButton';
 import LikeButton from '../../coral-plugin-likes/LikeButton';
 import PermalinkButton from '../../coral-plugin-permalinks/PermalinkButton';
 import SignInContainer from '../../coral-sign-in/containers/SignInContainer';
 import UserBox from '../../coral-sign-in/components/UserBox';
-import {TabBar, Tab, TabContent} from '../../coral-ui';
+import {TabBar, Tab, TabContent, Spinner} from '../../coral-ui';
 import SettingsContainer from '../../coral-settings/containers/SettingsContainer';
+import RestrictedContent from '../../coral-framework/components/RestrictedContent';
+import SuspendedAccount from '../../coral-framework/components/SuspendedAccount';
 
 const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appendItemArray} = itemActions;
 const {addNotification, clearNotification} = notificationActions;
 const {logout} = authActions;
 
-const mapStateToProps = (state) => {
-  return {
-    config: state.config.toJS(),
-    items: state.items.toJS(),
-    notification: state.notification.toJS(),
-    auth: state.auth.toJS()
-  };
-};
-
-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()),
-  postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)),
-  deleteAction: (item, action, user, itemType) => {
-    return dispatch(deleteAction(item, action, user, itemType));
-  },
-  appendItemArray: (item, property, value, addToFront, itemType) =>
-    dispatch(appendItemArray(item, property, value, addToFront, itemType)),
-  logout: () => dispatch(logout()),
-});
-
 class CommentStream extends Component {
 
   constructor (props) {
@@ -89,17 +68,11 @@ class CommentStream extends Component {
 
   render () {
     if (Object.keys(this.props.items).length === 0) {
-        // Loading mock asset
+      // Loading mock asset
       this.props.postItem({
         comments: [],
         url: 'http://coralproject.net'
       }, 'asset', 'assetTest');
-
-      // Loading mock user
-      //this.props.postItem({name: 'Ban Ki-Moon'}, 'user', 'user_8989')
-      //  .then((id) => {
-      //    this.props.setLoggedInUser(id);
-      //  });
     }
 
     // TODO: Replace teststream id with id from params
@@ -109,71 +82,73 @@ class CommentStream extends Component {
     const {actions, users, comments} = this.props.items;
     const {loggedIn, user, showSignInDialog} = this.props.auth;
     const {activeTab} = this.state;
+
     return <div className={showSignInDialog ? 'expandForSignin' : ''}>
       {
         rootItem
-        ? <div className="commentStream">
+          ? <div className="commentStream">
           <TabBar onChange={this.changeTab} activeTab={activeTab}>
             <Tab><Count id={rootItemId} items={this.props.items}/></Tab>
             <Tab>Settings</Tab>
           </TabBar>
-
-          <TabContent show={activeTab === 0}>
-            <div id="commentBox">
-              <InfoBox
-                content={this.props.config.infoBoxContent}
-                enable={this.props.config.infoBoxEnable}
-              />
-              {loggedIn && <UserBox user={user} logout={this.props.logout} />}
-              <CommentBox
-                addNotification={this.props.addNotification}
-                postItem={this.props.postItem}
-                appendItemArray={this.props.appendItemArray}
-                updateItem={this.props.updateItem}
-                id={rootItemId}
-                premod={this.props.config.moderation}
-                reply={false}
-                author={user}
-              />
-              {!loggedIn && <SignInContainer />}
-            </div>
-            {
-              rootItem.comments && rootItem.comments.map((commentId) => {
-                const comment = comments[commentId];
-                return <div className="comment" key={commentId}>
-                  <hr aria-hidden={true}/>
-                  <AuthorName author={users[comment.author_id]}/>
-                  <PubDate created_at={comment.created_at}/>
-                  <Content body={comment.body}/>
-                  <div className="commentActionsLeft">
-                    <ReplyButton
-                      updateItem={this.props.updateItem}
-                      id={commentId}
-                      showReply={comment.showReply}/>
-                    <LikeButton
-                      addNotification={this.props.addNotification}
-                      id={commentId}
-                      like={actions[comment.like]}
-                      postAction={this.props.postAction}
-                      deleteAction={this.props.deleteAction}
-                      addItem={this.props.addItem}
-                      updateItem={this.props.updateItem}
-                      currentUser={this.props.auth.user}/>
-                  </div>
-                  <div className="commentActionsRight">
-                    <FlagButton
-                      addNotification={this.props.addNotification}
-                      id={commentId}
-                      flag={actions[comment.flag]}
-                      postAction={this.props.postAction}
-                      deleteAction={this.props.deleteAction}
-                      addItem={this.props.addItem}
-                      updateItem={this.props.updateItem}
-                      currentUser={this.props.auth.user}/>
+          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          {/* Add to the restricted param a boolean if the user is suspended*/}
+          <RestrictedContent restricted={false} restrictedComp={<SuspendedAccount />}>
+            <TabContent show={activeTab === 0}>
+              <div id="commentBox">
+                <InfoBox
+                  content={this.props.config.infoBoxContent}
+                  enable={this.props.config.infoBoxEnable}
+                />
+                <CommentBox
+                  addNotification={this.props.addNotification}
+                  postItem={this.props.postItem}
+                  appendItemArray={this.props.appendItemArray}
+                  updateItem={this.props.updateItem}
+                  id={rootItemId}
+                  premod={this.props.config.moderation}
+                  reply={false}
+                  author={user}
+                />
+                {!loggedIn && <SignInContainer />}
+              </div>
+              {
+                rootItem.comments && rootItem.comments.map((commentId) => {
+                  const comment = comments[commentId];
+                  return <div className="comment" key={commentId} id={`c_${commentId}`}>
+                    <hr aria-hidden={true}/>
+                    <AuthorName author={users[comment.author_id]}/>
+                    <PubDate created_at={comment.created_at}/>
+                    <Content body={comment.body}/>
+                    <div className="commentActionsLeft">
+                      <ReplyButton
+                        updateItem={this.props.updateItem}
+                        id={commentId}
+                        showReply={comment.showReply}/>
+                      <LikeButton
+                        addNotification={this.props.addNotification}
+                        id={commentId}
+                        like={actions[comment.like]}
+                        postAction={this.props.postAction}
+                        deleteAction={this.props.deleteAction}
+                        addItem={this.props.addItem}
+                        updateItem={this.props.updateItem}
+                        currentUser={this.props.auth.user}/>
+                    </div>
+                    <div className="commentActionsRight">
+                      <FlagButton
+                        addNotification={this.props.addNotification}
+                        id={commentId}
+                        flag={actions[comment.flag]}
+                        postAction={this.props.postAction}
+                        deleteAction={this.props.deleteAction}
+                        addItem={this.props.addItem}
+                        updateItem={this.props.updateItem}
+                        currentUser={this.props.auth.user}/>
                       <PermalinkButton
-                        comment_id={commentId}
-                        asset_id={comment.asset_id}/>
-                  </div>
+                        commentId={commentId}
+                        articleURL={this.path}/>
+                    </div>
                     <ReplyBox
                       addNotification={this.props.addNotification}
                       postItem={this.props.postItem}
@@ -188,72 +163,101 @@ class CommentStream extends Component {
                       comment.children &&
                       comment.children.map((replyId) => {
                         let reply = this.props.items.comments[replyId];
-                        return <div className="reply" key={replyId}>
+                        return <div className="reply" key={replyId} id={`c_${replyId}`}>
                           <hr aria-hidden={true}/>
                           <AuthorName author={users[reply.author_id]}/>
                           <PubDate created_at={reply.created_at}/>
                           <Content body={reply.body}/>
                           <div className="replyActionsLeft">
-                              <ReplyButton
-                                updateItem={this.props.updateItem}
-                                id={replyId}
-                                showReply={reply.showReply}/>
-                              <LikeButton
-                                addNotification={this.props.addNotification}
-                                id={replyId}
-                                like={this.props.items.actions[reply.like]}
-                                postAction={this.props.postAction}
-                                deleteAction={this.props.deleteAction}
-                                addItem={this.props.addItem}
-                                updateItem={this.props.updateItem}
-                                currentUser={this.props.auth.user}/>
-                            </div>
-                            <div className="replyActionsRight">
-                              <FlagButton
-                                addNotification={this.props.addNotification}
-                                id={replyId}
-                                flag={this.props.items.actions[reply.flag]}
-                                postAction={this.props.postAction}
-                                deleteAction={this.props.deleteAction}
-                                addItem={this.props.addItem}
-                                updateItem={this.props.updateItem}
-                                currentUser={this.props.auth.user}/>
-                                <PermalinkButton
-                                  comment_id={reply.parent_id}
-                                  asset_id={rootItemId}
-                                  />
-                            </div>
-                            <ReplyBox
-                              addNotification={this.props.addNotification}
-                              postItem={this.props.postItem}
-                              appendItemArray={this.props.appendItemArray}
+                            <ReplyButton
                               updateItem={this.props.updateItem}
-                              id={rootItemId}
-                              author={user}
-                              parent_id={commentId}
-                              child_id={replyId}
-                              premod={this.props.config.moderation}
+                              id={replyId}
                               showReply={reply.showReply}/>
+                            <LikeButton
+                              addNotification={this.props.addNotification}
+                              id={replyId}
+                              like={this.props.items.actions[reply.like]}
+                              postAction={this.props.postAction}
+                              deleteAction={this.props.deleteAction}
+                              addItem={this.props.addItem}
+                              updateItem={this.props.updateItem}
+                              currentUser={this.props.auth.user}/>
+                          </div>
+                          <div className="replyActionsRight">
+                            <FlagButton
+                              addNotification={this.props.addNotification}
+                              id={replyId}
+                              flag={this.props.items.actions[reply.flag]}
+                              postAction={this.props.postAction}
+                              deleteAction={this.props.deleteAction}
+                              addItem={this.props.addItem}
+                              updateItem={this.props.updateItem}
+                              currentUser={this.props.auth.user}/>
+                            <PermalinkButton
+                              commentId={reply.parent_id}
+                              articleURL={this.path}
+                            />
+                          </div>
+                          <ReplyBox
+                            addNotification={this.props.addNotification}
+                            postItem={this.props.postItem}
+                            appendItemArray={this.props.appendItemArray}
+                            updateItem={this.props.updateItem}
+                            id={rootItemId}
+                            author={user}
+                            parent_id={commentId}
+                            child_id={replyId}
+                            premod={this.props.config.moderation}
+                            showReply={reply.showReply}/>
                         </div>;
                       })
-                  }
-                </div>;
-              })
-            }
-            <Notification
-              notifLength={4500}
-              clearNotification={this.props.clearNotification}
-              notification={this.props.notification}
-            />
-          </TabContent>
-          <TabContent show={activeTab === 1}>
-            <SettingsContainer/>
-          </TabContent>
+                    }
+                  </div>;
+                })
+              }
+            </TabContent>
+            <TabContent show={activeTab === 1}>
+              <SettingsContainer
+                loggedIn={loggedIn}
+                userData={this.props.userData}
+                showSignInDialog={this.props.handleSignInDialog}
+              />
+              {!loggedIn && <SignInContainer noButton/>}
+            </TabContent>
+          </RestrictedContent>
+          <Notification
+            notifLength={4500}
+            clearNotification={this.props.clearNotification}
+            notification={this.props.notification}
+          />
         </div>
-        : 'Loading'
+          :
+          <Spinner/>
       }
     </div>;
   }
 }
 
+const mapStateToProps = state => ({
+  config: state.config.toJS(),
+  items: state.items.toJS(),
+  notification: state.notification.toJS(),
+  auth: state.auth.toJS(),
+  userData: state.user.toJS()
+});
+
+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()),
+  postAction: (item, action, user, itemType) => dispatch(postAction(item, action, user, itemType)),
+  deleteAction: (item, action, user, itemType) => dispatch(deleteAction(item, action, user, itemType)),
+  appendItemArray: (item, property, value, addToFront, itemType) => dispatch(appendItemArray(item, property, value, addToFront, itemType)),
+  handleSignInDialog: () => dispatch(authActions.showSignInDialog()),
+  logout: () => dispatch(logout()),
+});
+
 export default connect(mapStateToProps, mapDispatchToProps)(CommentStream);

client/coral-framework/actions/user.js

@@ -1,5 +1,10 @@
 import * as actions from '../constants/user';
-import {base, handleResp, getInit} from '../helpers/response';
+import {addNotification} from '../actions/notification';
+import coralApi from '../helpers/response';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from './../translations';
+const lang = new I18n(translations);
 
 const saveBioRequest = () => ({type: actions.SAVE_BIO_REQUEST});
 const saveBioSuccess = settings => ({type: actions.SAVE_BIO_SUCCESS, settings});
@@ -7,9 +12,9 @@ const saveBioFailure = error => ({type: actions.SAVE_BIO_FAILURE, error});
 
 export const saveBio = (user_id, formData) => dispatch => {
   dispatch(saveBioRequest());
-  fetch(`${base}/user/${user_id}/bio`, getInit('PUT', formData))
-    .then(handleResp)
+  coralApi(`/user/${user_id}/bio`, {method: 'PUT', body: formData})
     .then(({settings}) => {
+      dispatch(addNotification('success', lang.t('successBioUpdate')));
       dispatch(saveBioSuccess(settings));
     })
     .catch(error => dispatch(saveBioFailure(error)));

client/coral-framework/components/RestrictedContent.js

@@ -7,7 +7,7 @@ const lang = new I18n(translations);
 
 export default ({children, restricted, message = lang.t('contentNotAvailable'), restrictedComp}) => {
   if (restricted) {
-    return restrictedComp ? restrictedComp() : messageBox(message);
+    return restrictedComp ? restrictedComp : messageBox(message);
   } else {
     return (
       <div>

client/coral-framework/components/SuspendedAccount.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations.json';
+const lang = new I18n(translations);
+
+export default () => (
+  <span>{lang.t('suspendedAccountMsg')}</span>
+);

client/coral-framework/translations.json

@@ -1,5 +1,6 @@
 {
   "en": {
+    "successBioUpdate": "Your Bio has been updated",
     "contentNotAvailable": "This content is not available",
     "suspendedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Flag, or write comments. Please contact moderator@fakeurl.com for more information",
     "error": {
@@ -12,6 +13,7 @@
     }
   },
   "es": {
+    "successBioUpdate": "Tu bio fue actualizada",
     "contentNotAvailable": "El contenido no se encuentra disponible",
     "suspendedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios. Por favor, contacta moderator@fakeurl for more information",
     "error": {

client/coral-settings/components/Bio.js

@@ -2,14 +2,14 @@ import React from 'react';
 import styles from './Bio.css';
 import {Button} from '../../coral-ui';
 
-export default ({bio, handleSave, handleInput}) => (
+export default ({bio, handleSave, handleInput, handleCancel}) => (
   <div className={styles.bio}>
     <h1>Bio</h1>
     <p>Tell the community about yourself</p>
     <form onSubmit={handleSave}>
-      <textarea defaultValue={bio} ref={handleInput} />
+      <textarea value={bio} onChange={handleInput} />
       <div className={styles.actions}>
-        <Button cStyle='cancel' raised>Cancel</Button>
+        <Button cStyle='cancel' type="button" onClick={handleCancel} raised>Cancel</Button>
         <Button cStyle='success' type="submit">Save Changes</Button>
       </div>
     </form>

client/coral-settings/components/NotLoggedIn.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './NotLoggedIn.css';
 
-export default () => (
+export default ({showSignInDialog}) => (
   <div className={styles.message}>
     <div>
-      <a>Sign In</a> to access Settings
+      <a onClick={showSignInDialog}>Sign In</a> to access Settings
     </div>
     <div>
       From the Settings Page you can

client/coral-settings/containers/BioContainer.js

@@ -5,29 +5,41 @@ export default class BioContainer extends Component {
   constructor (props) {
     super(props);
 
+    this.state = {
+      bio: props.bio
+    };
+
     this.handleSave = this.handleSave.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.handleCancel = this.handleCancel.bind(this);
   }
 
-  handleInput(input) {
-    this.bioInput = input;
+  handleInput(e) {
+    this.setState({
+      bio: e.target.value
+    });
   }
 
   handleSave (e) {
     e.preventDefault();
     const {userData, saveBio} = this.props;
-    saveBio(userData.id, {
-      bio: this.bioInput.value
+    const {bio} = this.state;
+    saveBio(userData.id, {bio});
+  }
+
+  handleCancel () {
+    this.setState({
+      bio: this.props.bio
     });
   }
 
   render () {
-    const {bio, userData} = this.props;
     return <Bio
-      bio={bio}
-      userData={userData}
+      bio={this.state.bio}
+      userData={this.props.userData}
       handleSave={this.handleSave}
       handleInput={this.handleInput}
+      handleCancel={this.handleCancel}
     />;
   }
 }

client/coral-settings/containers/SettingsContainer.js

@@ -31,10 +31,10 @@ class SignInContainer extends Component {
   }
 
   render() {
-    const {loggedIn, userData} = this.props;
+    const {loggedIn, userData, showSignInDialog} = this.props;
     const {activeTab} = this.state;
     return (
-      <RestrictedContent restricted={!loggedIn} restrictedComp={NotLoggedIn}>
+      <RestrictedContent restricted={!loggedIn} restrictedComp={<NotLoggedIn showSignInDialog={showSignInDialog} />}>
         <SettingsHeader {...this.props} />
         <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
           <Tab>All Comments (120)</Tab>

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

@@ -129,12 +129,10 @@ class SignInContainer extends Component {
   }
 
   render() {
-    const {auth, showSignInDialog} = this.props;
+    const {auth, showSignInDialog, noButton} = this.props;
     return (
       <div>
-        <Button onClick={showSignInDialog} full>
-          Sign in to comment
-        </Button>
+        {!noButton && <Button onClick={showSignInDialog} full> Sign in to comment</Button>}
         <SignDialog
           open={auth.showSignInDialog}
           view={auth.view}