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
?
-
Settings
-
-
-
- {
- rootItem.comments && rootItem.comments.map((commentId) => {
- const comment = comments[commentId];
- return
-
-
-
-
-
-
-
-
-
- {
- comment.children &&
- comment.children.map((replyId) => {
- let reply = this.props.items.comments[replyId];
- return
-
-
-
-
-
-
}
+ {/* Add to the restricted param a boolean if the user is suspended*/}
+
+
+
+ {
+ rootItem.comments && rootItem.comments.map(commentId => {
+ const comment = comments[commentId];
+ // This should be a return Comment Component
+ return
+
+
+
+
+
+
+
+
+
+ {
+ comment.children &&
+ comment.children.map((replyId) => {
+ let reply = this.props.items.comments[replyId];
+ // This should be a Reply Component
+ return
-
-
- ;
- })
- }
- ;
- })
- }
-
-
-
-
-
+ ;
+ })
+ }
+ ;
+ })
+ }
+
+
+
+
+
+
- : 'Loading'
+ :
+
}
;
}
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 (
+
+ {children}
+
+ );
+ }
+};
+
+const messageBox = (message) => {message}
;
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 {
{ author && (
-
{lang.t('post')}
-
+
)
}
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}) => (
Bio
Tell the community about yourself
-
+
);
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 () => (
+
+
+
+ From the Settings Page you can
+
+ See your comment history
+ Write a bio about yourself to display to the community
+
+
+
+);
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}) => (
-
Jackson
- jackson_persona@gmail.com
+ {user.displayName}
+ {user.profiles.map(profile => profile.id)}
);
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 (
-
-
+
+
All Comments (120)
Profile Settings
- { activeTab === 0 && }
- { activeTab === 1 && }
-
+
+
+
+
+
+
+
);
}
}
@@ -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}) => (
);
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.