From bd704bf2cee46a8e5418b54315543fe423a46959 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 30 Nov 2016 08:42:25 -0300
Subject: [PATCH 1/6] User Settings, Restricted User, Banned User, Bio and User
 actions and Reducers

---
 .../coral-embed-stream/src/CommentStream.js   | 310 +++++++++---------
 client/coral-embed-stream/style/default.css   |   1 +
 client/coral-framework/actions/user.js        |  16 +
 .../components/RestrictedContent.css          |   4 +
 .../components/RestrictedContent.js           |  20 ++
 client/coral-framework/constants/user.js      |   3 +
 client/coral-framework/reducers/user.js       |  20 ++
 client/coral-framework/translations.json      |   6 +-
 client/coral-plugin-commentbox/CommentBox.js  |   8 +-
 client/coral-settings/components/Bio.js       |   6 +-
 .../coral-settings/components/NotLoggedIn.css |  15 +
 .../coral-settings/components/NotLoggedIn.js  |  17 +
 .../components/SettingsHeader.js              |   6 +-
 .../containers/SettingsContainer.js           |  24 +-
 client/coral-sign-in/components/UserBox.js    |   7 +-
 client/coral-sign-in/components/styles.css    |  10 +-
 client/coral-sign-in/translations.js          |   4 +
 client/coral-ui/components/Button.css         |  10 +
 client/coral-ui/components/TabBar.css         |   1 +
 client/coral-ui/index.js                      |   1 +
 models/user.js                                |   4 +-
 21 files changed, 313 insertions(+), 180 deletions(-)
 create mode 100644 client/coral-framework/actions/user.js
 create mode 100644 client/coral-framework/components/RestrictedContent.css
 create mode 100644 client/coral-framework/components/RestrictedContent.js
 create mode 100644 client/coral-framework/constants/user.js
 create mode 100644 client/coral-framework/reducers/user.js
 create mode 100644 client/coral-settings/components/NotLoggedIn.css
 create mode 100644 client/coral-settings/components/NotLoggedIn.js

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index be40ecff6..870ea93ad 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -1,11 +1,18 @@
 import React, {Component, PropTypes} from 'react';
+import Pym from 'pym.js';
+import {connect} from 'react-redux';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations.json';
+const lang = new I18n(translations);
+
 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,27 +20,25 @@ 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';
 
 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 mapStateToProps = state => ({
+  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)),
@@ -43,12 +48,9 @@ const mapDispatchToProps = (dispatch) => ({
   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()),
+  deleteAction: (item, action, user, itemType) => 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 {
@@ -94,12 +96,6 @@ class CommentStream extends Component {
         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
@@ -113,145 +109,149 @@ class CommentStream extends Component {
       {
         rootItem
         ? <div>
-
           <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}/>
-                      <PermalinkButton
-                        comment_id={commentId}
-                        asset_id={comment.asset_id}/>
-                  </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}
-                      premod={this.props.config.moderation}
-                      showReply={comment.showReply}/>
-                    {
-                      comment.children &&
-                      comment.children.map((replyId) => {
-                        let reply = this.props.items.comments[replyId];
-                        return <div className="reply" key={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
+          {loggedIn && <UserBox user={user} logout={this.props.logout} />}
+          {/* Add to the restricted param a boolean if the user is suspended*/}
+          <RestrictedContent restricted={false} message={lang.t('suspendedAccountMsg')}>
+            <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];
+                  // This should be a return Comment Component
+                  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}/>
+                        <PermalinkButton
+                          comment_id={commentId}
+                          asset_id={comment.asset_id}/>
+                    </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}
+                        premod={this.props.config.moderation}
+                        showReply={comment.showReply}/>
+                      {
+                        comment.children &&
+                        comment.children.map((replyId) => {
+                          let reply = this.props.items.comments[replyId];
+                          // This should be a Reply Component
+                          return <div className="reply" key={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}
                                 updateItem={this.props.updateItem}
-                                id={replyId}
+                                id={rootItemId}
+                                author={user}
+                                parent_id={commentId}
+                                child_id={replyId}
+                                premod={this.props.config.moderation}
                                 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}
-                              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>;
+                        })
+                    }
+                  </div>;
+                })
+              }
+              <Notification
+                notifLength={4500}
+                clearNotification={this.props.clearNotification}
+                notification={this.props.notification}
+              />
+            </TabContent>
+            <TabContent show={activeTab === 1}>
+                <SettingsContainer loggedIn={loggedIn} user={user} />
+            </TabContent>
+          </RestrictedContent>
         </div>
-        : 'Loading'
+        :
+        <Spinner/>
       }
     </div>;
   }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index 2da0c09c4..d6fc43dff 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -79,6 +79,7 @@ hr {
 .coral-plugin-commentbox-textarea {
   flex: 1;
   padding: 5px;
+  min-height: 100px;
 }
 
 .coral-plugin-commentbox-button-container {
diff --git a/client/coral-framework/actions/user.js b/client/coral-framework/actions/user.js
new file mode 100644
index 000000000..5afbee14d
--- /dev/null
+++ b/client/coral-framework/actions/user.js
@@ -0,0 +1,16 @@
+import * as actions from '../constants/user';
+import {base, handleResp, getInit} from '../helpers/response';
+
+const saveBioRequest = () => ({type: actions.SAVE_BIO_REQUEST});
+const saveBioSuccess = bio => ({type: actions.SAVE_BIO_SUCCESS, bio});
+const saveBioFailure = error => ({type: actions.SAVE_BIO_FAILURE, error});
+
+export const saveBio = (formData) => dispatch => {
+  dispatch(saveBioRequest());
+  fetch(`${base}/auth/local`, getInit('POST', formData))
+    .then(handleResp)
+    .then(({user}) => {
+      dispatch(saveBioSuccess(user));
+    })
+    .catch(error => dispatch(saveBioFailure(error)));
+};
diff --git a/client/coral-framework/components/RestrictedContent.css b/client/coral-framework/components/RestrictedContent.css
new file mode 100644
index 000000000..47ced7b0b
--- /dev/null
+++ b/client/coral-framework/components/RestrictedContent.css
@@ -0,0 +1,4 @@
+.message {
+  background: #D8D8D8;
+  padding: 25px;
+}
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
new file mode 100644
index 000000000..8d019c996
--- /dev/null
+++ b/client/coral-framework/components/RestrictedContent.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import styles from './RestrictedContent.css';
+
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from 'coral-framework/translations.json';
+const lang = new I18n(translations);
+
+export default ({children, restricted, message = lang.t('contentNotAvailable'), restrictedComp}) => {
+  if (restricted) {
+    return restrictedComp ? restrictedComp() : messageBox(message);
+  } else {
+    return (
+      <div>
+        {children}
+      </div>
+    );
+  }
+};
+
+const messageBox = (message) => <div className={styles.message}>{message}</div>;
diff --git a/client/coral-framework/constants/user.js b/client/coral-framework/constants/user.js
new file mode 100644
index 000000000..0c316d48a
--- /dev/null
+++ b/client/coral-framework/constants/user.js
@@ -0,0 +1,3 @@
+export const SAVE_BIO_REQUEST = 'SAVE_BIO_REQUEST';
+export const SAVE_BIO_SUCCESS = 'SAVE_BIO_SUCCESS';
+export const SAVE_BIO_FAILURE = 'SAVE_BIO_FAILURE';
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
new file mode 100644
index 000000000..42a71df3b
--- /dev/null
+++ b/client/coral-framework/reducers/user.js
@@ -0,0 +1,20 @@
+import {Map} from 'immutable';
+import {FETCH_SIGNIN_SUCCESS} from '../constants/auth';
+import * as actions from '../constants/user';
+
+const initialState = Map({
+  bio: ''
+});
+
+export default function user (state = initialState, action) {
+  switch (action.type) {
+  case FETCH_SIGNIN_SUCCESS :
+    return state
+      .set('bio', action.user.bio);
+  case actions.SAVE_BIO_SUCCESS :
+    return state
+      .set('bio', action.bio);
+  default :
+    return state;
+  }
+}
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index 4abd1ed03..e2193f726 100644
--- a/client/coral-framework/translations.json
+++ b/client/coral-framework/translations.json
@@ -1,5 +1,7 @@
 {
   "en": {
+    "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": {
       "email": "Not a valid E-Mail",
       "password": "Password must be at least 8 characters",
@@ -10,6 +12,8 @@
     }
   },
   "es": {
+    "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": {
       "email": "No es un email válido",
       "password": "La contraseña debe tener por lo menos 8 caracteres",
@@ -19,4 +23,4 @@
       "emailInUse": "Email address already in use"
     }
   }
-}
\ No newline at end of file
+}
diff --git a/client/coral-plugin-commentbox/CommentBox.js b/client/coral-plugin-commentbox/CommentBox.js
index 79641d856..9ae524652 100644
--- a/client/coral-plugin-commentbox/CommentBox.js
+++ b/client/coral-plugin-commentbox/CommentBox.js
@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import {I18n} from '../coral-framework';
 import translations from './translations.json';
+import {Button} from 'coral-ui';
 
 const name = 'coral-plugin-commentbox';
 
@@ -75,12 +76,11 @@ class CommentBox extends Component {
         </div>
         <div className={`${name}-button-container`}>
           { author && (
-              <button
-                className={`${name}-button`}
-                style={styles && styles.button}
+              <Button
+                cStyle='darkGrey'
                 onClick={this.postComment}>
                 {lang.t('post')}
-              </button>
+              </Button>
             )
           }
       </div>
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
index b82587322..7310db114 100644
--- a/client/coral-settings/components/Bio.js
+++ b/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 () => (
+export default ({user, handleSaveBio}) => (
   <div className={styles.bio}>
     <h1>Bio</h1>
     <p>Tell the community about yourself</p>
-    <textarea />
+    <textarea defaultValue={user.bio}/>
     <div className={styles.actions}>
       <Button cStyle='cancel' raised>Cancel</Button>
-      <Button cStyle='success'>Save Changes</Button>
+      <Button cStyle='success' onClick={handleSaveBio}>Save Changes</Button>
     </div>
   </div>
 );
diff --git a/client/coral-settings/components/NotLoggedIn.css b/client/coral-settings/components/NotLoggedIn.css
new file mode 100644
index 000000000..f65e96507
--- /dev/null
+++ b/client/coral-settings/components/NotLoggedIn.css
@@ -0,0 +1,15 @@
+.message {
+  padding: 10px 0 20px;
+  letter-spacing: 0.1px;
+  font-size: 13px;
+  line-height: 33px;
+}
+
+.message a {
+  color: black;
+  font-weight: bold;
+  cursor: pointer;
+  margin: 0px;
+  padding-bottom: 2px;
+  border-bottom: solid 1px black;
+}
diff --git a/client/coral-settings/components/NotLoggedIn.js b/client/coral-settings/components/NotLoggedIn.js
new file mode 100644
index 000000000..d80aed8ab
--- /dev/null
+++ b/client/coral-settings/components/NotLoggedIn.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './NotLoggedIn.css';
+
+export default () => (
+  <div className={styles.message}>
+    <div>
+      <a>Sign In</a> to access Settings
+    </div>
+    <div>
+      From the Settings Page you can
+      <ul>
+        <li>See your comment history</li>
+        <li>Write a bio about yourself to display to the community</li>
+      </ul>
+    </div>
+  </div>
+);
diff --git a/client/coral-settings/components/SettingsHeader.js b/client/coral-settings/components/SettingsHeader.js
index 24d68af9a..c48f13cf4 100644
--- a/client/coral-settings/components/SettingsHeader.js
+++ b/client/coral-settings/components/SettingsHeader.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './SettingsHeader.css';
 
-export default () => (
+export default ({user}) => (
   <div className={styles.header}>
-    <h1>Jackson</h1>
-    <h2>jackson_persona@gmail.com</h2>
+    <h1>{user.displayName}</h1>
+    <h2>{user.profiles.map(profile => profile.id)}</h2>
   </div>
 );
 
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index 224eb6c6a..ecd3747df 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -1,11 +1,13 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
-import {TabBar, Tab} from '../../coral-ui';
+import {TabBar, Tab, TabContent} from '../../coral-ui';
 
 import Bio from '../components/Bio';
 import CommentHistory from '../components/CommentHistory';
 import SettingsHeader from '../components/SettingsHeader';
+import NotLoggedIn from '../components/NotLoggedIn';
+import RestrictedContent from 'coral-framework/components/RestrictedContent';
 
 class SignInContainer extends Component {
   constructor (props) {
@@ -29,18 +31,22 @@ class SignInContainer extends Component {
   }
 
   render() {
-    //const {embedStream} = this.props;
+    const {loggedIn} = this.props;
     const {activeTab} = this.state;
     return (
-      <div>
-        <SettingsHeader />
+      <RestrictedContent restricted={!loggedIn} restrictedComp={NotLoggedIn}>
+        <SettingsHeader {...this.props} />
         <TabBar onChange={this.handleTabChange} activeTab={activeTab} cStyle='material'>
           <Tab>All Comments (120)</Tab>
           <Tab>Profile Settings</Tab>
         </TabBar>
-        { activeTab === 0 && <CommentHistory {...this.props}/> }
-        { activeTab === 1 && <Bio {...this.props}/> }
-      </div>
+        <TabContent show={activeTab === 0}>
+          <CommentHistory {...this.props}/>
+        </TabContent>
+        <TabContent show={activeTab === 1}>
+          <Bio {...this.props} />
+        </TabContent>
+      </RestrictedContent>
     );
   }
 }
@@ -49,10 +55,8 @@ const mapStateToProps = () => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  getBio: () => dispatch(),
+  handleSaveBio: () => dispatch(),
   getHistory: () => dispatch(),
-  handleSaveChanges: () => dispatch(),
-  handleCancel: () => dispatch()
 });
 
 export default connect(
diff --git a/client/coral-sign-in/components/UserBox.js b/client/coral-sign-in/components/UserBox.js
index 17c8453fb..11badfaef 100644
--- a/client/coral-sign-in/components/UserBox.js
+++ b/client/coral-sign-in/components/UserBox.js
@@ -1,12 +1,15 @@
 import React from 'react';
 import styles from './styles.css';
+import I18n from 'coral-framework/modules/i18n/i18n';
+import translations from '../translations';
+const lang = new I18n(translations);
 
 const UserBox = ({className, user, logout, ...props}) => (
   <div
-    className={`${styles.userBox} ${className}`}
+    className={`${styles.userBox} ${className ? className : ''}`}
     {...props}
   >
-    Signed in as <a>{user.displayName}</a>. Not you? <a onClick={logout}>Sign out</a>
+    {lang.t('signIn.loggedInAs')} <a>{user.displayName}</a>. {lang.t('signIn.notYou')} <a onClick={logout}>{lang.t('signIn.logout')}</a>
   </div>
 );
 
diff --git a/client/coral-sign-in/components/styles.css b/client/coral-sign-in/components/styles.css
index 1561f557b..a37972116 100644
--- a/client/coral-sign-in/components/styles.css
+++ b/client/coral-sign-in/components/styles.css
@@ -103,10 +103,18 @@ input.error{
     color: #B71C1C;
 }
 
+.userBox {
+  padding: 10px 0 20px;
+  letter-spacing: 0.1px;
+}
+
 .userBox a {
-    color: #2c69b6;
+    color: black;
+    font-weight: bold;
     cursor: pointer;
     margin: 0px;
+    padding-bottom: 2px;
+    border-bottom: solid 1px black;
 }
 
 .attention {
diff --git a/client/coral-sign-in/translations.js b/client/coral-sign-in/translations.js
index 4e1d35805..200cb91f1 100644
--- a/client/coral-sign-in/translations.js
+++ b/client/coral-sign-in/translations.js
@@ -1,6 +1,8 @@
 export default {
   en: {
     'signIn': {
+      notYou: 'Not you?',
+      loggedInAs: 'Logged in as',
       facebookSignIn: 'Sign in with Facebook',
       facebookSignUp: 'Sign up with Facebook',
       logout: 'Logout',
@@ -24,6 +26,8 @@ export default {
   },
   es: {
     'signIn': {
+      notYou: 'No eres tu?',
+      loggedInAs: 'Entraste como',
       facebookSignIn: 'Entrar con Facebook',
       facebookSignUp: 'Regístrate con Facebook',
       logout: 'Salir',
diff --git a/client/coral-ui/components/Button.css b/client/coral-ui/components/Button.css
index d03a34713..3a3a4221e 100644
--- a/client/coral-ui/components/Button.css
+++ b/client/coral-ui/components/Button.css
@@ -67,6 +67,16 @@
   background: #4f5c67;
 }
 
+.type--darkGrey {
+  color: white;
+  background: #696969;
+}
+
+.type--darkGrey:hover {
+  color: white;
+  background: #696969;
+}
+
 .full {
   width: 100%;
   margin: 0;
diff --git a/client/coral-ui/components/TabBar.css b/client/coral-ui/components/TabBar.css
index 7f9336726..33a4c6d8b 100644
--- a/client/coral-ui/components/TabBar.css
+++ b/client/coral-ui/components/TabBar.css
@@ -15,6 +15,7 @@
   padding: 8px 10px;
   margin-right: -1px;
   user-select: none;
+  font-size: 13px;
 }
 
 .base li:hover {
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 6f2192cc4..39d17f2ca 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -5,3 +5,4 @@ export {default as TabBar} from './components/TabBar';
 export {default as Tab} from './components/Tab';
 export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
+export {default as Spinner} from './components/Spinner';
diff --git a/models/user.js b/models/user.js
index 845b84d19..ff615b74a 100644
--- a/models/user.js
+++ b/models/user.js
@@ -74,7 +74,9 @@ const UserSchema = new mongoose.Schema({
 
   // Roles provides an array of roles (as strings) that is associated with a
   // user.
-  roles: [String]
+  roles: [String],
+  // User's bio
+  bio: String,
 }, {
 
   // This will ensure that we have proper timestamps available on this model.

From 2607c608f5cdb4129a4ba98cd8c863efd7b3bb7f Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 30 Nov 2016 10:20:03 -0300
Subject: [PATCH 2/6] D ividing userData from userAuth

---
 .../coral-embed-stream/src/CommentStream.js   | 47 ++++++++++---------
 client/coral-framework/actions/user.js        |  6 +--
 client/coral-framework/reducers/auth.js       | 11 +++--
 client/coral-framework/reducers/index.js      |  2 +
 client/coral-framework/reducers/user.js       | 28 ++++++++---
 client/coral-settings/components/Bio.js       |  6 +--
 .../components/SettingsHeader.js              |  6 +--
 .../coral-settings/containers/BioContainer.js | 35 ++++++++++++++
 .../containers/SettingsContainer.js           | 14 +++---
 models/user.js                                | 31 +++++++++++-
 routes/api/user/index.js                      | 19 ++++++++
 11 files changed, 157 insertions(+), 48 deletions(-)
 create mode 100644 client/coral-settings/containers/BioContainer.js

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 870ea93ad..cf8df6e0d 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/client/coral-embed-stream/src/CommentStream.js
@@ -33,26 +33,6 @@ const {addItem, updateItem, postItem, getStream, postAction, deleteAction, appen
 const {addNotification, clearNotification} = notificationActions;
 const {logout} = authActions;
 
-const mapStateToProps = state => ({
-  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) => 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) {
@@ -105,6 +85,7 @@ 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
@@ -246,7 +227,10 @@ class CommentStream extends Component {
               />
             </TabContent>
             <TabContent show={activeTab === 1}>
-                <SettingsContainer loggedIn={loggedIn} user={user} />
+                <SettingsContainer
+                  loggedIn={loggedIn}
+                  userData={this.props.userData}
+                />
             </TabContent>
           </RestrictedContent>
         </div>
@@ -257,4 +241,25 @@ class CommentStream extends Component {
   }
 }
 
+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)),
+  logout: () => dispatch(logout())
+});
+
 export default connect(mapStateToProps, mapDispatchToProps)(CommentStream);
diff --git a/client/coral-framework/actions/user.js b/client/coral-framework/actions/user.js
index 5afbee14d..04d5c9238 100644
--- a/client/coral-framework/actions/user.js
+++ b/client/coral-framework/actions/user.js
@@ -2,12 +2,12 @@ import * as actions from '../constants/user';
 import {base, handleResp, getInit} from '../helpers/response';
 
 const saveBioRequest = () => ({type: actions.SAVE_BIO_REQUEST});
-const saveBioSuccess = bio => ({type: actions.SAVE_BIO_SUCCESS, bio});
+const saveBioSuccess = user => ({type: actions.SAVE_BIO_SUCCESS, user});
 const saveBioFailure = error => ({type: actions.SAVE_BIO_FAILURE, error});
 
-export const saveBio = (formData) => dispatch => {
+export const saveBio = (user_id, formData) => dispatch => {
   dispatch(saveBioRequest());
-  fetch(`${base}/auth/local`, getInit('POST', formData))
+  fetch(`${base}/${user_id}/bio`, getInit('POST', formData))
     .then(handleResp)
     .then(({user}) => {
       dispatch(saveBioSuccess(user));
diff --git a/client/coral-framework/reducers/auth.js b/client/coral-framework/reducers/auth.js
index a445fc663..a4803fa96 100644
--- a/client/coral-framework/reducers/auth.js
+++ b/client/coral-framework/reducers/auth.js
@@ -13,6 +13,11 @@ const initialState = Map({
   successSignUp: false
 });
 
+const purge = user => {
+  const {settings, profiles, ...userData} = user; // eslint-disable-line
+  return userData;
+};
+
 export default function auth (state = initialState, action) {
   switch (action.type) {
   case actions.SHOW_SIGNIN_DIALOG :
@@ -44,11 +49,11 @@ export default function auth (state = initialState, action) {
   case actions.CHECK_LOGIN_SUCCESS:
     return state
       .set('loggedIn', true)
-      .set('user', action.user);
+      .set('user', purge(action.user));
   case actions.FETCH_SIGNIN_SUCCESS:
     return state
       .set('loggedIn', true)
-      .set('user', action.user);
+      .set('user', purge(action.user));
   case actions.FETCH_SIGNIN_FAILURE:
     return state
       .set('isLoading', false)
@@ -56,7 +61,7 @@ export default function auth (state = initialState, action) {
       .set('user', null);
   case actions.FETCH_SIGNIN_FACEBOOK_SUCCESS:
     return state
-      .set('user', action.user)
+      .set('user', purge(action.user))
       .set('loggedIn', true);
   case actions.FETCH_SIGNIN_FACEBOOK_FAILURE:
     return state
diff --git a/client/coral-framework/reducers/index.js b/client/coral-framework/reducers/index.js
index 90eaa7cb7..a2f439028 100644
--- a/client/coral-framework/reducers/index.js
+++ b/client/coral-framework/reducers/index.js
@@ -5,6 +5,7 @@ import config from './config';
 import items from './items';
 import notification from './notification';
 import auth from './auth';
+import user from './user';
 
 /**
  * Expose the combined main reducer
@@ -15,4 +16,5 @@ export default combineReducers({
   items,
   notification,
   auth,
+  user
 });
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
index 42a71df3b..96307b293 100644
--- a/client/coral-framework/reducers/user.js
+++ b/client/coral-framework/reducers/user.js
@@ -1,19 +1,35 @@
 import {Map} from 'immutable';
-import {FETCH_SIGNIN_SUCCESS} from '../constants/auth';
+import * as authActions from '../constants/auth';
 import * as actions from '../constants/user';
 
 const initialState = Map({
-  bio: ''
+  displayName: '',
+  profiles: [],
+  settings: []
 });
 
+const purge = user => {
+  const {_id, created_at, updated_at, __v, roles, ...userData} = user; // eslint-disable-line
+  return userData;
+};
+
 export default function user (state = initialState, action) {
   switch (action.type) {
-  case FETCH_SIGNIN_SUCCESS :
+  case authActions.CHECK_LOGIN_SUCCESS:
+    return state.merge(Map(purge(action.user)));
+  case authActions.CHECK_LOGIN_FAILURE:
+    return initialState;
+  case authActions.FETCH_SIGNIN_SUCCESS:
+    return state.merge(Map(purge(action.user)));
+  case authActions.FETCH_SIGNIN_FAILURE:
+    return initialState;
+  case authActions.FETCH_SIGNIN_FACEBOOK_SUCCESS:
+    return state.merge(Map(purge(action.user)));
+  case authActions.FETCH_SIGNIN_FACEBOOK_FAILURE:
+    return initialState;
+  case actions.SAVE_BIO_SUCCESS:
     return state
       .set('bio', action.user.bio);
-  case actions.SAVE_BIO_SUCCESS :
-    return state
-      .set('bio', action.bio);
   default :
     return state;
   }
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
index 7310db114..36c3855df 100644
--- a/client/coral-settings/components/Bio.js
+++ b/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 ({user, handleSaveBio}) => (
+export default ({userData, bio, handleSave, handleChange}) => (
   <div className={styles.bio}>
     <h1>Bio</h1>
     <p>Tell the community about yourself</p>
-    <textarea defaultValue={user.bio}/>
+    <textarea defaultValue={userData.bio} value={bio} onChange={handleChange} />
     <div className={styles.actions}>
       <Button cStyle='cancel' raised>Cancel</Button>
-      <Button cStyle='success' onClick={handleSaveBio}>Save Changes</Button>
+      <Button cStyle='success' onClick={handleSave}>Save Changes</Button>
     </div>
   </div>
 );
diff --git a/client/coral-settings/components/SettingsHeader.js b/client/coral-settings/components/SettingsHeader.js
index c48f13cf4..b55f008ad 100644
--- a/client/coral-settings/components/SettingsHeader.js
+++ b/client/coral-settings/components/SettingsHeader.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import styles from './SettingsHeader.css';
 
-export default ({user}) => (
+export default ({userData}) => (
   <div className={styles.header}>
-    <h1>{user.displayName}</h1>
-    <h2>{user.profiles.map(profile => profile.id)}</h2>
+    <h1>{userData.displayName}</h1>
+    <h2>{userData.profiles.map(profile => profile.id)}</h2>
   </div>
 );
 
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
new file mode 100644
index 000000000..d3a04e14b
--- /dev/null
+++ b/client/coral-settings/containers/BioContainer.js
@@ -0,0 +1,35 @@
+import React, {Component} from 'react';
+import Bio from '../components/Bio';
+
+export default class BioContainer extends Component {
+  constructor (props) {
+    super(props);
+
+    this.state = {
+      bio: ''
+    };
+
+    this.handleSave = this.handleSave.bind(this);
+    this.handleBioChange = this.handleBioChange.bind(this);
+  }
+
+  handleBioChange(e) {
+    this.setState({
+      bio: e.target.value
+    });
+  }
+
+  handleSave () {
+    // const {bio} = this.state;
+    // this.props.saveBio(user_id, bio);
+  }
+
+  render () {
+    return <Bio
+      handleSave={this.handleSave}
+      handleChange={this.handleChange}
+      {...this.props}
+      {...this.state}
+    />;
+  }
+}
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index ecd3747df..1013f7a39 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -1,26 +1,26 @@
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 
-import {TabBar, Tab, TabContent} from '../../coral-ui';
+import {saveBio} from 'coral-framework/actions/user';
 
-import Bio from '../components/Bio';
+import BioContainer from './BioContainer';
+import NotLoggedIn from '../components/NotLoggedIn';
+import {TabBar, Tab, TabContent} from '../../coral-ui';
 import CommentHistory from '../components/CommentHistory';
 import SettingsHeader from '../components/SettingsHeader';
-import NotLoggedIn from '../components/NotLoggedIn';
 import RestrictedContent from 'coral-framework/components/RestrictedContent';
 
 class SignInContainer extends Component {
   constructor (props) {
     super(props);
     this.state = {
-      activeTab: 0
+      activeTab: 0,
     };
 
     this.handleTabChange = this.handleTabChange.bind(this);
   }
 
   componentWillMount () {
-    // Get Bio
     // Fetch commentHistory
   }
 
@@ -44,7 +44,7 @@ class SignInContainer extends Component {
           <CommentHistory {...this.props}/>
         </TabContent>
         <TabContent show={activeTab === 1}>
-          <Bio {...this.props} />
+          <BioContainer handleSave={this.handleSave} {...this.props} />
         </TabContent>
       </RestrictedContent>
     );
@@ -55,7 +55,7 @@ const mapStateToProps = () => ({
 });
 
 const mapDispatchToProps = dispatch => ({
-  handleSaveBio: () => dispatch(),
+  saveBio: (user_id, formData) => dispatch(saveBio(user_id, formData)),
   getHistory: () => dispatch(),
 });
 
diff --git a/models/user.js b/models/user.js
index ff615b74a..6e9300ec0 100644
--- a/models/user.js
+++ b/models/user.js
@@ -75,8 +75,20 @@ const UserSchema = new mongoose.Schema({
   // Roles provides an array of roles (as strings) that is associated with a
   // user.
   roles: [String],
-  // User's bio
-  bio: String,
+
+  // User's settings
+  settings: [
+    new mongoose.Schema({
+      id: {
+        type: String,
+        required: true
+      },
+      value: {
+        type: String,
+        required: true
+      }
+    })
+  ]
 }, {
 
   // This will ensure that we have proper timestamps available on this model.
@@ -524,3 +536,18 @@ UserService.count = () => {
 UserService.all = () => {
   return UserModel.find();
 };
+
+/**
+ * Adds a new User bio
+ * @return {Promise}
+ */
+
+UserService.addBio = (id, bio) => (
+  UserModel.update({
+    id
+  }, {
+    $addToSet: {
+      bio
+    }
+  })
+);
diff --git a/routes/api/user/index.js b/routes/api/user/index.js
index 43d3b8ac0..3c7e651bb 100644
--- a/routes/api/user/index.js
+++ b/routes/api/user/index.js
@@ -140,4 +140,23 @@ router.post('/request-password-reset', (req, res, next) => {
     });
 });
 
+router.post('/:user_id/bio', (req, res, next) => {
+  const {user_id} = req.params;
+  const {bio} = req.body;
+
+  if (!bio) {
+    return next('You must submit a new bio');
+  }
+
+  User
+    .addBio(user_id, bio)
+    .then(() => {
+      res.status(204).end();
+    })
+    .catch(error => {
+      const errorMsg = typeof error === 'string' ? error : error.message;
+      res.status(500).json({error: errorMsg});
+    });
+});
+
 module.exports = router;

From 6e7926ab30a86c52f3bf2b56c6097112d2f06b0b Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 30 Nov 2016 12:41:50 -0300
Subject: [PATCH 3/6] Working bios

---
 client/coral-framework/actions/user.js        |  8 ++---
 client/coral-framework/reducers/user.js       |  6 ++--
 client/coral-settings/components/Bio.js       | 14 +++++----
 .../coral-settings/containers/BioContainer.js | 29 +++++++++----------
 .../containers/SettingsContainer.js           |  4 +--
 models/user.js                                | 26 +++++++----------
 routes/api/user/index.js                      |  6 ++--
 7 files changed, 43 insertions(+), 50 deletions(-)

diff --git a/client/coral-framework/actions/user.js b/client/coral-framework/actions/user.js
index 04d5c9238..0000acc5c 100644
--- a/client/coral-framework/actions/user.js
+++ b/client/coral-framework/actions/user.js
@@ -2,15 +2,15 @@ import * as actions from '../constants/user';
 import {base, handleResp, getInit} from '../helpers/response';
 
 const saveBioRequest = () => ({type: actions.SAVE_BIO_REQUEST});
-const saveBioSuccess = user => ({type: actions.SAVE_BIO_SUCCESS, user});
+const saveBioSuccess = settings => ({type: actions.SAVE_BIO_SUCCESS, settings});
 const saveBioFailure = error => ({type: actions.SAVE_BIO_FAILURE, error});
 
 export const saveBio = (user_id, formData) => dispatch => {
   dispatch(saveBioRequest());
-  fetch(`${base}/${user_id}/bio`, getInit('POST', formData))
+  fetch(`${base}/user/${user_id}/bio`, getInit('PUT', formData))
     .then(handleResp)
-    .then(({user}) => {
-      dispatch(saveBioSuccess(user));
+    .then(({settings}) => {
+      dispatch(saveBioSuccess(settings));
     })
     .catch(error => dispatch(saveBioFailure(error)));
 };
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
index 96307b293..f1d02a42c 100644
--- a/client/coral-framework/reducers/user.js
+++ b/client/coral-framework/reducers/user.js
@@ -4,8 +4,8 @@ import * as actions from '../constants/user';
 
 const initialState = Map({
   displayName: '',
-  profiles: [],
-  settings: []
+  profiles: null,
+  settings: null
 });
 
 const purge = user => {
@@ -29,7 +29,7 @@ export default function user (state = initialState, action) {
     return initialState;
   case actions.SAVE_BIO_SUCCESS:
     return state
-      .set('bio', action.user.bio);
+      .set('settings', action.settings);
   default :
     return state;
   }
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
index 36c3855df..c142ee5bc 100644
--- a/client/coral-settings/components/Bio.js
+++ b/client/coral-settings/components/Bio.js
@@ -2,15 +2,17 @@ import React from 'react';
 import styles from './Bio.css';
 import {Button} from '../../coral-ui';
 
-export default ({userData, bio, handleSave, handleChange}) => (
+export default ({bio, handleSave, handleInput}) => (
   <div className={styles.bio}>
     <h1>Bio</h1>
     <p>Tell the community about yourself</p>
-    <textarea defaultValue={userData.bio} value={bio} onChange={handleChange} />
-    <div className={styles.actions}>
-      <Button cStyle='cancel' raised>Cancel</Button>
-      <Button cStyle='success' onClick={handleSave}>Save Changes</Button>
-    </div>
+    <form onSubmit={handleSave}>
+      <textarea defaultValue={bio} ref={handleInput} />
+      <div className={styles.actions}>
+        <Button cStyle='cancel' raised>Cancel</Button>
+        <Button cStyle='success' type="submit">Save Changes</Button>
+      </div>
+    </form>
   </div>
 );
 
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
index d3a04e14b..b045b71f9 100644
--- a/client/coral-settings/containers/BioContainer.js
+++ b/client/coral-settings/containers/BioContainer.js
@@ -5,31 +5,28 @@ export default class BioContainer extends Component {
   constructor (props) {
     super(props);
 
-    this.state = {
-      bio: ''
-    };
-
     this.handleSave = this.handleSave.bind(this);
-    this.handleBioChange = this.handleBioChange.bind(this);
+    this.handleInput = this.handleInput.bind(this);
   }
 
-  handleBioChange(e) {
-    this.setState({
-      bio: e.target.value
+  handleInput(input) {
+    this.bioInput = input;
+  }
+
+  handleSave (e) {
+    e.preventDefault();
+    const {userData, saveBio} = this.props;
+    saveBio(userData.id, {
+      bio: this.bioInput.value
     });
   }
 
-  handleSave () {
-    // const {bio} = this.state;
-    // this.props.saveBio(user_id, bio);
-  }
-
   render () {
     return <Bio
+      bio={this.props.bio}
+      userData={this.props.userData}
       handleSave={this.handleSave}
-      handleChange={this.handleChange}
-      {...this.props}
-      {...this.state}
+      handleInput={this.handleInput}
     />;
   }
 }
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index 1013f7a39..fc196b9e7 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/client/coral-settings/containers/SettingsContainer.js
@@ -31,7 +31,7 @@ class SignInContainer extends Component {
   }
 
   render() {
-    const {loggedIn} = this.props;
+    const {loggedIn, userData} = this.props;
     const {activeTab} = this.state;
     return (
       <RestrictedContent restricted={!loggedIn} restrictedComp={NotLoggedIn}>
@@ -44,7 +44,7 @@ class SignInContainer extends Component {
           <CommentHistory {...this.props}/>
         </TabContent>
         <TabContent show={activeTab === 1}>
-          <BioContainer handleSave={this.handleSave} {...this.props} />
+          <BioContainer bio={userData.settings.bio} handleSave={this.handleSave} {...this.props} />
         </TabContent>
       </RestrictedContent>
     );
diff --git a/models/user.js b/models/user.js
index 6e9300ec0..86908ab42 100644
--- a/models/user.js
+++ b/models/user.js
@@ -77,18 +77,12 @@ const UserSchema = new mongoose.Schema({
   roles: [String],
 
   // User's settings
-  settings: [
-    new mongoose.Schema({
-      id: {
-        type: String,
-        required: true
-      },
-      value: {
-        type: String,
-        required: true
-      }
-    })
-  ]
+  settings: {
+    bio: {
+      type: String,
+      default: ''
+    }
+  }
 }, {
 
   // This will ensure that we have proper timestamps available on this model.
@@ -543,11 +537,13 @@ UserService.all = () => {
  */
 
 UserService.addBio = (id, bio) => (
-  UserModel.update({
+  UserModel.findOneAndUpdate({
     id
   }, {
-    $addToSet: {
-      bio
+    $set: {
+      'settings.bio': bio
     }
+  }, {
+    new: true
   })
 );
diff --git a/routes/api/user/index.js b/routes/api/user/index.js
index 3c7e651bb..1765809ad 100644
--- a/routes/api/user/index.js
+++ b/routes/api/user/index.js
@@ -140,7 +140,7 @@ router.post('/request-password-reset', (req, res, next) => {
     });
 });
 
-router.post('/:user_id/bio', (req, res, next) => {
+router.put('/:user_id/bio', (req, res, next) => {
   const {user_id} = req.params;
   const {bio} = req.body;
 
@@ -150,9 +150,7 @@ router.post('/:user_id/bio', (req, res, next) => {
 
   User
     .addBio(user_id, bio)
-    .then(() => {
-      res.status(204).end();
-    })
+    .then(user => res.status(200).send(user))
     .catch(error => {
       const errorMsg = typeof error === 'string' ? error : error.message;
       res.status(500).json({error: errorMsg});

From d90a158298ee629770b72148eac7bbef4ff1cd09 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 30 Nov 2016 17:09:34 -0300
Subject: [PATCH 4/6] Bio Tooltips

---
 client/coral-admin/src/reducers/auth.js       |  5 +-
 client/coral-embed-stream/style/default.css   |  1 +
 client/coral-framework/reducers/user.js       |  4 +-
 client/coral-plugin-author-name/AuthorName.js | 46 ++++++++++++++++---
 .../coral-settings/containers/BioContainer.js |  5 +-
 client/coral-ui/components/Tooltip.css        | 36 +++++++++++++++
 client/coral-ui/components/Tooltip.js         |  6 +++
 client/coral-ui/index.js                      |  1 +
 8 files changed, 90 insertions(+), 14 deletions(-)
 create mode 100644 client/coral-ui/components/Tooltip.css
 create mode 100644 client/coral-ui/components/Tooltip.js

diff --git a/client/coral-admin/src/reducers/auth.js b/client/coral-admin/src/reducers/auth.js
index f897c1bae..095ef7aac 100644
--- a/client/coral-admin/src/reducers/auth.js
+++ b/client/coral-admin/src/reducers/auth.js
@@ -24,10 +24,7 @@ export default function auth (state = initialState, action) {
       .set('isAdmin', action.isAdmin)
       .set('user', action.user);
   case actions.LOGOUT_SUCCESS:
-    return state
-      .set('loggedIn', false)
-      .set('user', null)
-      .set('isAdmin', false);
+    return initialState;
   default :
     return state;
   }
diff --git a/client/coral-embed-stream/style/default.css b/client/coral-embed-stream/style/default.css
index d6fc43dff..26992699e 100644
--- a/client/coral-embed-stream/style/default.css
+++ b/client/coral-embed-stream/style/default.css
@@ -106,6 +106,7 @@ hr {
 
 /* Comment styles */
 .comment {
+  position: relative;
   margin-bottom: 10px;
 }
 
diff --git a/client/coral-framework/reducers/user.js b/client/coral-framework/reducers/user.js
index f1d02a42c..11b57fc15 100644
--- a/client/coral-framework/reducers/user.js
+++ b/client/coral-framework/reducers/user.js
@@ -4,8 +4,8 @@ import * as actions from '../constants/user';
 
 const initialState = Map({
   displayName: '',
-  profiles: null,
-  settings: null
+  profiles: [],
+  settings: {}
 });
 
 const purge = user => {
diff --git a/client/coral-plugin-author-name/AuthorName.js b/client/coral-plugin-author-name/AuthorName.js
index aef819468..56b868726 100644
--- a/client/coral-plugin-author-name/AuthorName.js
+++ b/client/coral-plugin-author-name/AuthorName.js
@@ -1,9 +1,43 @@
-import React from 'react';
+import React, {Component} from 'react';
+import {Tooltip} from 'coral-ui';
 const packagename = 'coral-plugin-author-name';
 
-const AuthorName = ({author}) =>
-<div className={`${packagename}-text`}>
-  {author && author.displayName}
-</div>;
+export default class AuthorName extends Component {
+  constructor (props) {
+    super(props);
 
-export default AuthorName;
+    this.state = {
+      showTooltip: false
+    };
+
+    this.handleMouseOver = this.handleMouseOver.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+  }
+
+  handleMouseOver () {
+    this.setState({
+      showTooltip: true
+    });
+  }
+
+  handleMouseLeave () {
+    this.setState({
+      showTooltip: false
+    });
+  }
+
+  render () {
+    const {author} = this.props;
+    const {showTooltip} = this.state;
+    return (
+      <div
+        className={`${packagename}-text`}
+        onMouseOver={this.handleMouseOver}
+        onMouseLeave={this.handleMouseLeave}
+      >
+        {author && author.displayName}
+        { showTooltip && <Tooltip>{author.settings.bio}</Tooltip>}
+      </div>
+    );
+  }
+}
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
index b045b71f9..ca4373644 100644
--- a/client/coral-settings/containers/BioContainer.js
+++ b/client/coral-settings/containers/BioContainer.js
@@ -22,9 +22,10 @@ export default class BioContainer extends Component {
   }
 
   render () {
+    const {bio, userData} = this.props;
     return <Bio
-      bio={this.props.bio}
-      userData={this.props.userData}
+      bio={bio}
+      userData={userData}
       handleSave={this.handleSave}
       handleInput={this.handleInput}
     />;
diff --git a/client/coral-ui/components/Tooltip.css b/client/coral-ui/components/Tooltip.css
new file mode 100644
index 000000000..cf849b7cb
--- /dev/null
+++ b/client/coral-ui/components/Tooltip.css
@@ -0,0 +1,36 @@
+.tooltip {
+  display: inline-block;
+  position: absolute;
+  width: 100%;
+  border: solid 1px #2376D8;
+  top: 33px;
+  left: 0;
+  box-sizing: border-box;
+  background: white;
+  border-radius: 3px;
+  padding: 20px 10px;
+  z-index: 3;
+  /*box-shadow: 1px 1px 4px rgba(0,105,255,.5);*/
+}
+
+.tooltip:before{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: white;
+  position: absolute;
+  left: 2em;
+  top: -19px;
+  transform: rotate(180deg);
+  z-index: 2;
+}
+
+.tooltip:after{
+  content: '';
+  border: 10px solid transparent;
+  border-top-color: #2376D8;
+  position: absolute;
+  left: 2em;
+  top: -20px;
+  transform: rotate(180deg);
+  z-index: 1;
+}
diff --git a/client/coral-ui/components/Tooltip.js b/client/coral-ui/components/Tooltip.js
new file mode 100644
index 000000000..833d76552
--- /dev/null
+++ b/client/coral-ui/components/Tooltip.js
@@ -0,0 +1,6 @@
+import React from 'react';
+import styles from './Tooltip.css';
+
+export default ({children}) => (
+  <span className={styles.tooltip}>{children}</span>
+);
diff --git a/client/coral-ui/index.js b/client/coral-ui/index.js
index 39d17f2ca..ffdb3bbd2 100644
--- a/client/coral-ui/index.js
+++ b/client/coral-ui/index.js
@@ -6,3 +6,4 @@ export {default as Tab} from './components/Tab';
 export {default as TabContent} from './components/TabContent';
 export {default as Button} from './components/Button';
 export {default as Spinner} from './components/Spinner';
+export {default as Tooltip} from './components/Tooltip';

From 990782a5423780e70b066a61de064809e5fcc8d5 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 1 Dec 2016 11:17:07 -0300
Subject: [PATCH 5/6] Sign in a restricted rout

---
 .../coral-embed-stream/src/CommentStream.js   | 294 +++++++++---------
 client/coral-framework/actions/user.js        |  11 +-
 .../components/RestrictedContent.js           |   2 +-
 .../components/SuspendedAccount.js            |   8 +
 client/coral-framework/translations.json      |   2 +
 client/coral-settings/components/Bio.js       |   6 +-
 .../coral-settings/components/NotLoggedIn.js  |   4 +-
 .../coral-settings/containers/BioContainer.js |  26 +-
 .../containers/SettingsContainer.js           |   4 +-
 .../containers/SignInContainer.js             |   6 +-
 10 files changed, 196 insertions(+), 167 deletions(-)
 create mode 100644 client/coral-framework/components/SuspendedAccount.js

diff --git a/client/coral-embed-stream/src/CommentStream.js b/client/coral-embed-stream/src/CommentStream.js
index 7265c76b5..26142a311 100644
--- a/client/coral-embed-stream/src/CommentStream.js
+++ b/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);
diff --git a/client/coral-framework/actions/user.js b/client/coral-framework/actions/user.js
index 0000acc5c..72075e6db 100644
--- a/client/coral-framework/actions/user.js
+++ b/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)));
diff --git a/client/coral-framework/components/RestrictedContent.js b/client/coral-framework/components/RestrictedContent.js
index 8d019c996..32aaf632d 100644
--- a/client/coral-framework/components/RestrictedContent.js
+++ b/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>
diff --git a/client/coral-framework/components/SuspendedAccount.js b/client/coral-framework/components/SuspendedAccount.js
new file mode 100644
index 000000000..5a23b77a2
--- /dev/null
+++ b/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>
+);
diff --git a/client/coral-framework/translations.json b/client/coral-framework/translations.json
index e2193f726..ab65ba565 100644
--- a/client/coral-framework/translations.json
+++ b/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": {
diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
index c142ee5bc..01489999f 100644
--- a/client/coral-settings/components/Bio.js
+++ b/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>
diff --git a/client/coral-settings/components/NotLoggedIn.js b/client/coral-settings/components/NotLoggedIn.js
index d80aed8ab..d7bf467e8 100644
--- a/client/coral-settings/components/NotLoggedIn.js
+++ b/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
diff --git a/client/coral-settings/containers/BioContainer.js b/client/coral-settings/containers/BioContainer.js
index ca4373644..b7c9611d4 100644
--- a/client/coral-settings/containers/BioContainer.js
+++ b/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}
     />;
   }
 }
diff --git a/client/coral-settings/containers/SettingsContainer.js b/client/coral-settings/containers/SettingsContainer.js
index fc196b9e7..96020a10c 100644
--- a/client/coral-settings/containers/SettingsContainer.js
+++ b/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>
diff --git a/client/coral-sign-in/containers/SignInContainer.js b/client/coral-sign-in/containers/SignInContainer.js
index c2b8c7836..c201a3863 100644
--- a/client/coral-sign-in/containers/SignInContainer.js
+++ b/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}

From 647fb06c9925c70161d7cf7798e139214dc80705 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 1 Dec 2016 12:58:37 -0300
Subject: [PATCH 6/6] HandleSave on Submit

---
 client/coral-settings/components/Bio.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/client/coral-settings/components/Bio.js b/client/coral-settings/components/Bio.js
index 01489999f..cd1347781 100644
--- a/client/coral-settings/components/Bio.js
+++ b/client/coral-settings/components/Bio.js
@@ -6,11 +6,11 @@ export default ({bio, handleSave, handleInput, handleCancel}) => (
   <div className={styles.bio}>
     <h1>Bio</h1>
     <p>Tell the community about yourself</p>
-    <form onSubmit={handleSave}>
+    <form>
       <textarea value={bio} onChange={handleInput} />
       <div className={styles.actions}>
         <Button cStyle='cancel' type="button" onClick={handleCancel} raised>Cancel</Button>
-        <Button cStyle='success' type="submit">Save Changes</Button>
+        <Button cStyle='success' type="submit" onClick={handleSave}>Save Changes</Button>
       </div>
     </form>
   </div>