Merge pull request #603 from coralproject/coral-plugin-auth

Coral plugin Auth
This commit is contained in:
Belén Curcio
2017-05-25 17:09:29 -03:00
committed by GitHub
26 changed files with 749 additions and 537 deletions
+1
View File
@@ -17,6 +17,7 @@ coverage/
plugins.json
plugins/*
!plugins/coral-plugin-facebook-auth
!plugins/coral-plugin-auth
!plugins/coral-plugin-respect
!plugins/coral-plugin-offtopic
!plugins/coral-plugin-like
+4 -2
View File
@@ -1,6 +1,6 @@
import * as actions from '../constants/auth';
import * as Storage from 'coral-framework/helpers/storage';
import coralApi from 'coral-framework/helpers/response';
import * as Storage from 'coral-framework/helpers/storage';
import {handleAuthToken} from 'coral-framework/actions/auth';
//==============================================================================
@@ -52,7 +52,9 @@ const forgotPassowordFailure = () => ({
export const requestPasswordReset = (email) => (dispatch) => {
dispatch(forgotPassowordRequest(email));
return coralApi('/account/password/reset', {method: 'POST', body: {email}})
const redirectUri = location.href;
return coralApi('/account/password/reset', {method: 'POST', body: {email, loc: redirectUri}})
.then(() => dispatch(forgotPassowordSuccess()))
.catch((error) => dispatch(forgotPassowordFailure(error)));
};
+3 -3
View File
@@ -2,12 +2,12 @@ import React from 'react';
import {Router, Route, browserHistory} from 'react-router';
import Embed from './containers/Embed';
import SignInContainer from 'coral-sign-in/containers/SignInContainer';
import {LoginContainer} from 'coral-sign-in/containers/LoginContainer';
const routes = (
<div>
<Route exact path="/embed/stream/login" component={SignInContainer}/>
<Route exact path="*" component={Embed}/>
<Route exact path="/embed/stream/login" component={LoginContainer}/>
<Route path="*" component={Embed}/>
</div>
);
@@ -1,74 +1,68 @@
import React from 'react';
const lang = new I18n(translations);
import Stream from '../containers/Stream';
import Slot from 'coral-framework/components/Slot';
import {can} from 'coral-framework/services/perms';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-framework/translations';
import {can} from 'coral-framework/services/perms';
const lang = new I18n(translations);
import {TabBar, Tab, TabContent, Button} from 'coral-ui';
import Stream from '../containers/Stream';
import Count from 'coral-plugin-comment-count/CommentCount';
import UserBox from 'coral-sign-in/components/UserBox';
import ProfileContainer from 'coral-settings/containers/ProfileContainer';
import ConfigureStreamContainer from 'coral-configure/containers/ConfigureStreamContainer';
import ConfigureStreamContainer
from 'coral-configure/containers/ConfigureStreamContainer';
export default class Embed extends React.Component {
changeTab = (tab) => {
switch(tab) {
switch (tab) {
case 0:
this.props.setActiveTab('stream');
break;
case 1:
this.props.setActiveTab('profile');
// TODO: move data fetching to profile container.
// TODO: move data fetching to profile container.
this.props.data.refetch();
break;
case 2:
this.props.setActiveTab('config');
// TODO: move data fetching to config container.
// TODO: move data fetching to config container.
this.props.data.refetch();
break;
}
}
};
handleShowProfile = () => this.props.setActiveTab('profile');
render () {
const {activeTab, logout, viewAllComments, commentId} = this.props;
render() {
const {activeTab, viewAllComments, commentId} = this.props;
const {asset: {totalCommentCount}} = this.props.root;
const {loggedIn, user} = this.props.auth;
const userBox = <UserBox user={user} onLogout={logout} onShowProfile={this.handleShowProfile}/>;
const {user} = this.props.auth;
return (
<div>
<div className="commentStream">
<TabBar onChange={this.changeTab} activeTab={activeTab}>
<Tab><Count count={totalCommentCount}/></Tab>
<Tab><Count count={totalCommentCount} /></Tab>
<Tab>{lang.t('myProfile')}</Tab>
<Tab restricted={!can(user, 'UPDATE_CONFIG')}>Configure Stream</Tab>
</TabBar>
{
commentId &&
<Button
cStyle='darkGrey'
style={{float: 'right'}}
onClick={viewAllComments}
>
{lang.t('showAllComments')}
</Button>
}
{commentId &&
<Button
cStyle="darkGrey"
style={{float: 'right'}}
onClick={viewAllComments}
>
{lang.t('showAllComments')}
</Button>}
<Slot fill="embed" />
<TabContent show={activeTab === 'stream'}>
{ loggedIn ? userBox : null }
<Stream data={this.props.data} root={this.props.root} />
</TabContent>
<TabContent show={activeTab === 'profile'}>
<ProfileContainer />
</TabContent>
<TabContent show={activeTab === 'config'}>
{ loggedIn ? userBox : null }
<ConfigureStreamContainer />
</TabContent>
</div>
@@ -81,5 +75,5 @@ Embed.propTypes = {
data: React.PropTypes.shape({
loading: React.PropTypes.bool,
error: React.PropTypes.object
}).isRequired,
}).isRequired
};
@@ -1,22 +1,18 @@
import React, {PropTypes} from 'react';
import {Button} from 'coral-ui';
import LoadMore from './LoadMore';
import NewCount from './NewCount';
import Comment from '../containers/Comment';
import SuspendedAccount from './SuspendedAccount';
import Slot from 'coral-framework/components/Slot';
import InfoBox from 'coral-plugin-infobox/InfoBox';
import {can} from 'coral-framework/services/perms';
import I18n from 'coral-framework/modules/i18n/i18n';
import {ModerationLink} from 'coral-plugin-moderation';
import translations from 'coral-framework/translations';
import CommentBox from 'coral-plugin-commentbox/CommentBox';
import QuestionBox from 'coral-plugin-questionbox/QuestionBox';
import IgnoredCommentTombstone from './IgnoredCommentTombstone';
import SuspendedAccount from './SuspendedAccount';
import RestrictedMessageBox
from 'coral-framework/components/RestrictedMessageBox';
import {can} from 'coral-framework/services/perms';
import ChangeUsernameContainer
from 'coral-sign-in/containers/ChangeUsernameContainer';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from 'coral-framework/translations';
const lang = new I18n(translations);
@@ -55,7 +51,10 @@ class Stream extends React.Component {
: comment;
const banned = user && user.status === 'BANNED';
const temporarilySuspended = user && user.suspension.until && new Date(user.suspension.until) > new Date();
const temporarilySuspended =
user &&
user.suspension.until &&
new Date(user.suspension.until) > new Date();
const hasOlderComments = !!(asset &&
asset.lastComment &&
@@ -66,10 +65,15 @@ class Stream extends React.Component {
? asset.comments[0].created_at
: new Date(Date.now() - 1000 * 60 * 60 * 24 * 7).toISOString();
const commentIsIgnored = (comment) => {
return me && me.ignoredUsers && me.ignoredUsers.find((u) => u.id === comment.user.id);
return (
me &&
me.ignoredUsers &&
me.ignoredUsers.find((u) => u.id === comment.user.id)
);
};
return (
<div id="stream">
<Slot fill="stream" />
{open
? <div id="commentBox">
<InfoBox
@@ -80,52 +84,44 @@ class Stream extends React.Component {
content={asset.settings.questionBoxContent}
enable={asset.settings.questionBoxEnable}
/>
{!banned && temporarilySuspended &&
{!banned &&
temporarilySuspended &&
<RestrictedMessageBox>
{
lang.t('temporarilySuspended',
this.props.root.settings.organizationName,
lang.timeago(user.suspension.until),
)
}
</RestrictedMessageBox>
}
{lang.t(
'temporarilySuspended',
this.props.root.settings.organizationName,
lang.timeago(user.suspension.until)
)}
</RestrictedMessageBox>}
{banned &&
<SuspendedAccount
canEditName={user && user.canEditName}
editName={editName}
/>
}
{loggedIn && !banned && !temporarilySuspended &&
/>}
{loggedIn &&
!banned &&
!temporarilySuspended &&
<CommentBox
addNotification={this.props.addNotification}
postComment={this.props.postComment}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
setCommentCountCache={this.props.setCommentCountCache}
commentCountCache={commentCountCache}
assetId={asset.id}
premod={asset.settings.moderation}
isReply={false}
authorId={user.id}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
/>
}
addNotification={this.props.addNotification}
postComment={this.props.postComment}
appendItemArray={this.props.appendItemArray}
updateItem={this.props.updateItem}
setCommentCountCache={this.props.setCommentCountCache}
commentCountCache={commentCountCache}
assetId={asset.id}
premod={asset.settings.moderation}
isReply={false}
authorId={user.id}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
/>}
</div>
: <p>{asset.settings.closedMessage}</p>}
{!loggedIn &&
<Button
id="coralSignInButton"
onClick={this.props.showSignInDialog}
full
>
Sign in to comment
</Button>}
{loggedIn &&
user &&
<ChangeUsernameContainer loggedIn={loggedIn} user={user} />}
{loggedIn && <ModerationLink assetId={asset.id} isAdmin={can(user, 'MODERATE_COMMENTS')} />}
<ModerationLink
assetId={asset.id}
isAdmin={can(user, 'MODERATE_COMMENTS')}
/>}
{/* the highlightedComment is isolated after the user followed a permalink */}
{highlightedComment
@@ -163,41 +159,38 @@ class Stream extends React.Component {
setCommentCountCache={this.props.setCommentCountCache}
/>
<div className="embed__stream">
{comments.map(
(comment) => {
return (commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
data={this.props.data}
root={this.props.root}
disableReply={!open}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
addCommentTag={addCommentTag}
removeCommentTag={removeCommentTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={loadMore}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
reactKey={comment.id}
comment={comment}
pluginProps={pluginProps}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
/>
);
}
)}
{comments.map((comment) => {
return commentIsIgnored(comment)
? <IgnoredCommentTombstone key={comment.id} />
: <Comment
data={this.props.data}
root={this.props.root}
disableReply={!open}
setActiveReplyBox={this.setActiveReplyBox}
activeReplyBox={this.props.activeReplyBox}
addNotification={addNotification}
depth={0}
postComment={postComment}
asset={asset}
currentUser={user}
postFlag={postFlag}
postDontAgree={postDontAgree}
addCommentTag={addCommentTag}
removeCommentTag={removeCommentTag}
ignoreUser={ignoreUser}
commentIsIgnored={commentIsIgnored}
loadMore={loadMore}
deleteAction={deleteAction}
showSignInDialog={showSignInDialog}
key={comment.id}
reactKey={comment.id}
comment={comment}
pluginProps={pluginProps}
charCountEnable={asset.settings.charCountEnable}
maxCharCount={asset.settings.charCount}
editComment={this.props.editComment}
/>;
})}
</div>
<LoadMore
topLevel={true}
@@ -226,7 +219,7 @@ Stream.propTypes = {
ignoreUser: React.PropTypes.func,
// edit a comment, passed (id, asset_id, { body })
editComment: React.PropTypes.func,
editComment: React.PropTypes.func
};
export default Stream;
@@ -1,66 +0,0 @@
import React from 'react';
import styles from 'coral-embed-stream/src/components/Comment.css';
import AuthorName from 'coral-plugin-author-name/AuthorName';
import Content from 'coral-plugin-commentcontent/CommentContent';
import PubDate from 'coral-plugin-pubdate/PubDate';
import {ReplyButton} from 'coral-plugin-replies';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
class FakeComment extends React.Component {
constructor (props) {
super(props);
}
render () {
const {username, created_at, body} = this.props;
return (
<div
className={`comment ${styles.Comment}`}
style={{marginLeft: 0 * 30}}>
<hr aria-hidden={true} />
<AuthorName
author={{'name': username}}/>
<PubDate created_at={created_at} />
<Content body={body} />
<div className="commentActionsLeft comment__action-container">
<div className={`${'coral-plugin-likes'}-container`}>
<button className={'coral-plugin-likes-button'}>
<span className={'coral-plugin-likes-button-text'}>{lang.t('like')}</span>
<i className={`${'coral-plugin-likes'}-icon material-icons`}
aria-hidden={true}>thumb_up</i>
</button>
</div>
<ReplyButton
onClick={() => {}}
parentCommentId={'commentID'}
currentUserId={{}}
banned={false}
/>
</div>
<div className="commentActionsRight comment__action-container">
<div className="coral-plugin-permalinks-container">
<button className="coral-plugin-permalinks-button">
<span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('permalink.permalink')}</span>
<i className="coral-plugin-permalinks-icon material-icons" aria-hidden={true}>link</i>
</button>
</div>
<div className={`${'coral-plugin-flags'}-container`}>
<button className={`${'coral-plugin-flags'}-button`}>
<span className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}>{lang.t('report')}</span>
<i className={`${'coral-plugin-flags'}-icon material-icons`}
aria-hidden={true}>flag</i>
</button>
</div>
</div>
</div>
);
}
}
export default FakeComment;
@@ -1,15 +0,0 @@
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, onLogout, onShowProfile}) => (
<div className={`${styles.userBox} ${className ? className : ''}`}>
{lang.t('signIn.loggedInAs')}
<a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
<a className={styles.logout} onClick={onLogout} id='logout'>{lang.t('signIn.logout')}</a>
</div>
);
export default UserBox;
@@ -1,135 +0,0 @@
import React, {Component} from 'react';
import {connect} from 'react-redux';
import validate from 'coral-framework/helpers/validate';
import errorMsj from 'coral-framework/helpers/error';
import CreateUsernameDialog from '../components/CreateUsernameDialog';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
import {
showCreateUsernameDialog,
hideCreateUsernameDialog,
invalidForm,
validForm,
createUsername
} from '../../coral-framework/actions/auth';
class ChangeUsernameContainer extends Component {
initialState = {
formData: {
username: '',
},
errors: {},
showErrors: false
};
constructor(props) {
super(props);
this.initialState.formData.username = props.user.username;
this.state = this.initialState;
this.handleChange = this.handleChange.bind(this);
this.handleSubmitUsername = this.handleSubmitUsername.bind(this);
this.handleClose = this.handleClose.bind(this);
this.addError = this.addError.bind(this);
}
handleChange(e) {
const {name, value} = e.target;
this.setState((state) => ({
...state,
formData: {
...state.formData,
[name]: value
}
}), () => {
this.validation(name, value);
});
}
addError(name, error) {
return this.setState((state) => ({
errors: {
...state.errors,
[name]: error
}
}));
}
validation(name, value) {
const {addError} = this;
if (!value.length) {
addError(name, lang.t('createdisplay.requiredField'));
} else if (!validate[name](value)) {
addError(name, errorMsj[name]);
} else {
const { [name]: prop, ...errors } = this.state.errors; // eslint-disable-line
// Removes Error
this.setState((state) => ({...state, errors}));
}
}
isCompleted() {
const {formData} = this.state;
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
}
displayErrors(show = true) {
this.setState({showErrors: show});
}
handleSubmitUsername(e) {
e.preventDefault();
const {errors} = this.state;
const {validForm, invalidForm} = this.props;
this.displayErrors();
if (this.isCompleted() && !Object.keys(errors).length) {
this.props.createUsername(this.props.user.id, this.state.formData);
validForm();
} else {
invalidForm(lang.t('createdisplay.checkTheForm'));
}
}
handleClose() {
this.props.hideCreateUsernameDialog();
}
render() {
const {loggedIn, auth} = this.props;
return (
<div>
<CreateUsernameDialog
open={auth.showCreateUsernameDialog}
handleClose={this.handleClose}
loggedIn={loggedIn}
handleSubmitUsername={this.handleSubmitUsername}
{...this}
{...this.state}
{...this.props}
/>
</div>
);
}
}
const mapStateToProps = (state) => ({
auth: state.auth.toJS()
});
const mapDispatchToProps = (dispatch) => ({
createUsername: (userid, formData) => dispatch(createUsername(userid, formData)),
showCreateUsernameDialog: () => dispatch(showCreateUsernameDialog()),
hideCreateUsernameDialog: () => dispatch(hideCreateUsernameDialog()),
invalidForm: (error) => dispatch(invalidForm(error)),
validForm: () => dispatch(validForm())
});
export default connect(
mapStateToProps,
mapDispatchToProps
)(ChangeUsernameContainer);
@@ -0,0 +1,6 @@
import React from 'react';
import Slot from 'coral-framework/components/Slot';
export const LoginContainer = () => (
<Slot fill="login"/>
);
+14
View File
@@ -0,0 +1,14 @@
{
"presets": [
"es2015"
],
"plugins": [
"add-module-exports",
"transform-class-properties",
"transform-decorators-legacy",
"transform-object-assign",
"transform-object-rest-spread",
"transform-async-to-generator",
"transform-react-jsx"
]
}
@@ -0,0 +1,23 @@
{
"env": {
"browser": true,
"es6": true,
"mocha": true
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
}
},
"parser": "babel-eslint",
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"no-console": ["warn", { "allow": ["warn", "error"] }]
}
}
@@ -0,0 +1,132 @@
import React from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import errorMsj from 'coral-framework/helpers/error';
import validate from 'coral-framework/helpers/validate';
import CreateUsernameDialog from './CreateUsernameDialog';
const lang = new I18n(translations);
import {
showCreateUsernameDialog,
hideCreateUsernameDialog,
invalidForm,
validForm,
createUsername
} from 'coral-framework/actions/auth';
class ChangeUsernameContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
formData: {
username: props.user.username
},
errors: {},
showErrors: false
};
}
handleChange = e => {
const {name, value} = e.target;
this.setState(
state => ({
...state,
formData: {
...state.formData,
[name]: value
}
}),
() => {
this.validation(name, value);
}
);
};
addError = (name, error) => {
return this.setState(state => ({
errors: {
...state.errors,
[name]: error
}
}));
};
validation = (name, value) => {
const {addError} = this;
if (!value.length) {
addError(name, lang.t('createdisplay.requiredField'));
} else if (!validate[name](value)) {
addError(name, errorMsj[name]);
} else {
const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
// Removes Error
this.setState(state => ({...state, errors}));
}
};
isCompleted = () => {
const {formData} = this.state;
return !Object.keys(formData).filter(prop => !formData[prop].length).length;
};
displayErrors = (show = true) => {
this.setState({showErrors: show});
};
handleSubmitUsername = e => {
e.preventDefault();
const {errors} = this.state;
const {validForm, invalidForm} = this.props;
this.displayErrors();
if (this.isCompleted() && !Object.keys(errors).length) {
this.props.createUsername(this.props.user.id, this.state.formData);
validForm();
} else {
invalidForm(lang.t('createdisplay.checkTheForm'));
}
};
handleClose = () => {
this.props.hideCreateUsernameDialog();
};
render() {
const {loggedIn, auth} = this.props;
return (
<div>
<CreateUsernameDialog
open={auth.showCreateUsernameDialog && auth.user.canEditName}
handleClose={this.handleClose}
loggedIn={loggedIn}
handleSubmitUsername={this.handleSubmitUsername}
{...this}
{...this.state}
{...this.props}
/>
</div>
);
}
}
const mapStateToProps = ({auth, user}) => ({auth, user});
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
createUsername,
showCreateUsernameDialog,
hideCreateUsernameDialog,
invalidForm,
validForm
},
dispatch
);
export default connect(mapStateToProps, mapDispatchToProps)(
ChangeUsernameContainer
);
@@ -1,21 +1,26 @@
import React from 'react';
import TextField from 'coral-ui/components/TextField';
import Button from 'coral-ui/components/Button';
import {Dialog, Alert} from 'coral-ui';
import FakeComment from './FakeComment';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import {Dialog, Alert, TextField} from 'coral-ui';
import {FakeComment} from './FakeComment';
import translations from '../translations';
import Button from 'coral-ui/components/Button';
import I18n from 'coral-framework/modules/i18n/i18n';
const lang = new I18n(translations);
const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername, handleChange, ...props}) => {
return (
const CreateUsernameDialog = ({
open,
handleClose,
formData,
handleSubmitUsername,
handleChange,
...props
}) => (
<Dialog
className={styles.dialogusername}
id="createUsernameDialog"
open={open}>
open={open}
>
<span className={styles.close} onClick={handleClose}>×</span>
<div>
<div className={styles.header}>
@@ -24,17 +29,24 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
</h1>
</div>
<div>
<p className={styles.yourusername}>{lang.t('createdisplay.yourusername')}</p>
<p className={styles.yourusername}>
{lang.t('createdisplay.yourusername')}
</p>
<FakeComment
className={styles.fakeComment}
username={formData.username}
created_at={Date.now()}
body={lang.t('createdisplay.fakecommentbody')}
/>
<p className={styles.ifyoudont}>{lang.t('createdisplay.ifyoudontchangeyourname')}</p>
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
<p className={styles.ifyoudont}>
{lang.t('createdisplay.ifyoudontchangeyourname')}
</p>
{props.auth.error && <Alert>{props.auth.error}</Alert>}
<form id="saveUsername" onSubmit={handleSubmitUsername}>
{ props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
{props.errors.username &&
<span className={styles.hint}>
{' '}{lang.t('createdisplay.specialCharacters')}{' '}
</span>}
<div className={styles.saveusername}>
<TextField
id="username"
@@ -44,13 +56,14 @@ const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername
value={formData.username}
onChange={handleChange}
/>
<Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
<Button id="save" type="submit" className={styles.saveButton}>
{lang.t('createdisplay.save')}
</Button>
</div>
</form>
</form>
</div>
</div>
</Dialog>
);
};
);
export default CreateUsernameDialog;
@@ -0,0 +1,72 @@
import React from 'react';
import translations from '../translations';
import {ReplyButton} from 'coral-plugin-replies';
import PubDate from 'coral-plugin-pubdate/PubDate';
import I18n from 'coral-framework/modules/i18n/i18n';
import AuthorName from 'coral-plugin-author-name/AuthorName';
import Content from 'coral-plugin-commentcontent/CommentContent';
import styles from 'coral-embed-stream/src/components/Comment.css';
const lang = new I18n(translations);
export const FakeComment = ({username, created_at, body}) => (
<div className={`comment ${styles.Comment}`} style={{marginLeft: 0 * 30}}>
<hr aria-hidden={true} />
<AuthorName author={{name: username}} />
<PubDate created_at={created_at} />
<Content body={body} />
<div className="commentActionsLeft comment__action-container">
<div className={`${'coral-plugin-likes'}-container`}>
<button className={'coral-plugin-likes-button'}>
<span className={'coral-plugin-likes-button-text'}>
{lang.t('like')}
</span>
<i
className={`${'coral-plugin-likes'}-icon material-icons`}
aria-hidden={true}
>
thumb_up
</i>
</button>
</div>
<ReplyButton
onClick={() => {}}
parentCommentId={'commentID'}
currentUserId={{}}
banned={false}
/>
</div>
<div className="commentActionsRight comment__action-container">
<div className="coral-plugin-permalinks-container">
<button className="coral-plugin-permalinks-button">
<span
className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
>
{lang.t('permalink.permalink')}
</span>
<i
className="coral-plugin-permalinks-icon material-icons"
aria-hidden={true}
>
link
</i>
</button>
</div>
<div className={`${'coral-plugin-flags'}-container`}>
<button className={`${'coral-plugin-flags'}-button`}>
<span
className={`comment__action-button comment__action-button--nowrap ${'coral-plugin-flags'}-button-text`}
>
{lang.t('report')}
</span>
<i
className={`${'coral-plugin-flags'}-icon material-icons`}
aria-hidden={true}
>
flag
</i>
</button>
</div>
</div>
</div>
);
@@ -1,22 +1,18 @@
import React from 'react';
import styles from './styles.css';
import translations from '../translations';
import Button from 'coral-ui/components/Button';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
const lang = new I18n(translations);
class ForgotContent extends React.Component {
constructor (props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit (e) {
handleSubmit = e => {
e.preventDefault();
this.props.fetchForgotPassword(this.emailInput.value);
}
};
render () {
render() {
const {changeView, auth} = this.props;
const {passwordRequestSuccess, passwordRequestFailure} = auth;
@@ -29,29 +25,47 @@ class ForgotContent extends React.Component {
<div className={styles.textField}>
<label htmlFor="email">{lang.t('signIn.email')}</label>
<input
ref={(input) => this.emailInput = input}
ref={input => (this.emailInput = input)}
type="text"
style={{fontSize: 16}}
id="email"
name="email" />
name="email"
/>
</div>
<Button type="submit" cStyle="black" className={styles.signInButton} full>
<Button
type="submit"
cStyle="black"
className={styles.signInButton}
full
>
{lang.t('signIn.recoverPassword')}
</Button>
{
passwordRequestSuccess
? <p className={styles.passwordRequestSuccess}>{passwordRequestSuccess}</p>
: null
}
{
passwordRequestFailure
? <p className={styles.passwordRequestFailure}>{passwordRequestFailure}</p>
: null
}
{passwordRequestSuccess
? <p className={styles.passwordRequestSuccess}>
{passwordRequestSuccess}
</p>
: null}
{passwordRequestFailure
? <p className={styles.passwordRequestFailure}>
{passwordRequestFailure}
</p>
: null}
</form>
<div className={styles.footer}>
<span>{lang.t('signIn.needAnAccount')} <a onClick={() => changeView('SIGNUP')}>{lang.t('signIn.register')}</a></span>
<span>{lang.t('signIn.alreadyHaveAnAccount')} <a onClick={() => changeView('SIGNIN')}>{lang.t('signIn.signIn')}</a></span>
<span>
{lang.t('signIn.needAnAccount')}
{' '}
<a onClick={() => changeView('SIGNUP')}>
{lang.t('signIn.register')}
</a>
</span>
<span>
{lang.t('signIn.alreadyHaveAnAccount')}
{' '}
<a onClick={() => changeView('SIGNIN')}>
{lang.t('signIn.signIn')}
</a>
</span>
</div>
</div>
);
@@ -6,12 +6,9 @@ import SignInContent from './SignInContent';
import SignUpContent from './SignUpContent';
import ForgotContent from './ForgotContent';
const SignDialog = ({open, view, handleClose, ...props}) => (
<Dialog
className={styles.dialog}
id="signInDialog"
open={open}>
<span className={styles.close} onClick={handleClose}>×</span>
const SignDialog = ({open, view, hideSignInDialog, ...props}) => (
<Dialog className={styles.dialog} id="signInDialog" open={open}>
<span className={styles.close} onClick={hideSignInDialog}>×</span>
{view === 'SIGNIN' && <SignInContent {...props} />}
{view === 'SIGNUP' && <SignUpContent {...props} />}
{view === 'FORGOT' && <ForgotContent {...props} />}
@@ -0,0 +1,24 @@
import React from 'react';
import {Button} from 'coral-ui';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import {showSignInDialog} from 'coral-framework/actions/auth';
const SignInButton = ({loggedIn, showSignInDialog}) => (
<div>
{!loggedIn
? <Button id="coralSignInButton" onClick={showSignInDialog} full>
Sign in to comment
</Button>
: null}
</div>
);
const mapStateToProps = ({auth}) => ({
loggedIn: auth.toJS().loggedIn
});
const mapDispatchToProps = dispatch =>
bindActionCreators({showSignInDialog}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);
@@ -1,11 +1,13 @@
import React, {Component, PropTypes} from 'react';
import React from 'react';
import {connect} from 'react-redux';
import SignDialog from '../components/SignDialog';
import validate from 'coral-framework/helpers/validate';
import errorMsj from 'coral-framework/helpers/error';
import I18n from 'coral-framework/modules/i18n/i18n';
import translations from '../translations';
import {pym} from 'coral-framework';
import SignDialog from './SignDialog';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import errorMsj from 'coral-framework/helpers/error';
import validate from 'coral-framework/helpers/validate';
const lang = new I18n(translations);
import {
@@ -23,34 +25,22 @@ import {
checkLogin
} from 'coral-framework/actions/auth';
class SignInContainer extends Component {
initialState = {
formData: {
email: '',
username: '',
password: '',
confirmPassword: ''
},
emailToBeResent: '',
errors: {},
showErrors: false
};
class SignInContainer extends React.Component {
constructor(props) {
super(props);
this.state = this.initialState;
this.addError = this.addError.bind(this);
this.handleAuth = this.handleAuth.bind(this);
this.handleSignUp = this.handleSignUp.bind(this);
this.handleSignIn = this.handleSignIn.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleChangeEmail = this.handleChangeEmail.bind(this);
this.handleResendVerification = this.handleResendVerification.bind(this);
}
static propTypes = {
requireEmailConfirmation: PropTypes.bool.isRequired
};
this.state = {
formData: {
email: '',
username: '',
password: '',
confirmPassword: ''
},
emailToBeResent: '',
errors: {},
showErrors: false
};
}
componentWillMount() {
this.props.checkLogin();
@@ -71,8 +61,7 @@ class SignInContainer extends Component {
window.removeEventListener('storage', this.handleAuth);
}
handleAuth(e) {
handleAuth = e => {
// Listening to FB changes
// FB localStorage key is 'auth'
const authCallback = this.props.facebookCallback;
@@ -81,12 +70,12 @@ class SignInContainer extends Component {
const {err, data} = JSON.parse(e.newValue);
authCallback(err, data);
}
}
};
handleChange(e) {
handleChange = e => {
const {name, value} = e.target;
this.setState(
(state) => ({
state => ({
...state,
formData: {
...state.formData,
@@ -97,14 +86,14 @@ class SignInContainer extends Component {
this.validation(name, value);
}
);
}
};
handleChangeEmail(e) {
handleChangeEmail = e => {
const {value} = e.target;
this.setState({emailToBeResent: value});
}
};
handleResendVerification(e) {
handleResendVerification = e => {
e.preventDefault();
this.props
.requestConfirmEmail(
@@ -113,23 +102,22 @@ class SignInContainer extends Component {
)
.then(() => {
setTimeout(() => {
// allow success UI to be shown for a second, and then close the modal
this.props.handleClose();
this.props.hideSignInDialog();
}, 2500);
});
}
};
addError(name, error) {
return this.setState((state) => ({
addError = (name, error) => {
return this.setState(state => ({
errors: {
...state.errors,
[name]: error
}
}));
}
};
validation(name, value) {
validation = (name, value) => {
const {addError} = this;
const {formData} = this.state;
@@ -145,20 +133,20 @@ class SignInContainer extends Component {
} else {
const {[name]: prop, ...errors} = this.state.errors; // eslint-disable-line
// Removes Error
this.setState((state) => ({...state, errors}));
this.setState(state => ({...state, errors}));
}
}
};
isCompleted() {
isCompleted = () => {
const {formData} = this.state;
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
}
return !Object.keys(formData).filter(prop => !formData[prop].length).length;
};
displayErrors(show = true) {
displayErrors = (show = true) => {
this.setState({showErrors: show});
}
};
handleSignUp(e) {
handleSignUp = e => {
e.preventDefault();
const {errors} = this.state;
const {fetchSignUp, validForm, invalidForm} = this.props;
@@ -169,52 +157,54 @@ class SignInContainer extends Component {
} else {
invalidForm(lang.t('signIn.checkTheForm'));
}
}
};
handleSignIn(e) {
handleSignIn = e => {
e.preventDefault();
this.props.fetchSignIn(this.state.formData);
}
};
render() {
const {auth, requireEmailConfirmation} = this.props;
const {emailVerificationLoading, emailVerificationSuccess} = auth;
return (
<div>
<SignDialog
open={true}
view={auth.view}
emailVerificationEnabled={requireEmailConfirmation}
emailVerificationLoading={emailVerificationLoading}
emailVerificationSuccess={emailVerificationSuccess}
{...this}
{...this.state}
{...this.props}
/>
</div>
<SignDialog
open={true}
view={auth.view}
emailVerificationEnabled={requireEmailConfirmation}
emailVerificationLoading={emailVerificationLoading}
emailVerificationSuccess={emailVerificationSuccess}
{...this}
{...this.state}
{...this.props}
/>
);
}
}
const mapStateToProps = (state) => ({
const mapStateToProps = state => ({
auth: state.auth.toJS()
});
const mapDispatchToProps = (dispatch) => ({
checkLogin: () => dispatch(checkLogin()),
facebookCallback: (err, data) => dispatch(facebookCallback(err, data)),
fetchSignUp: (formData, url) => dispatch(fetchSignUp(formData, url)),
fetchSignIn: (formData) => dispatch(fetchSignIn(formData)),
fetchSignInFacebook: () => dispatch(fetchSignInFacebook()),
fetchSignUpFacebook: () => dispatch(fetchSignUpFacebook()),
fetchForgotPassword: (formData) => dispatch(fetchForgotPassword(formData)),
requestConfirmEmail: (email, url) =>
dispatch(requestConfirmEmail(email, url)),
changeView: (view) => dispatch(changeView(view)),
handleClose: () => dispatch(hideSignInDialog()),
invalidForm: (error) => dispatch(invalidForm(error)),
validForm: () => dispatch(validForm())
});
const mapDispatchToProps = dispatch =>
bindActionCreators(
{
checkLogin,
facebookCallback,
fetchSignUp,
fetchSignUp,
fetchSignIn,
fetchSignInFacebook,
fetchSignUpFacebook,
fetchForgotPassword,
requestConfirmEmail,
changeView,
hideSignInDialog,
invalidForm,
validForm
},
dispatch
);
export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer);
@@ -18,17 +18,17 @@ const SignInContent = ({
auth,
fetchSignInFacebook
}) => {
return (
<div className="coral-sign-in">
<div className={`${styles.header} header`}>
<h1>
{auth.emailVerificationFailure ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')}
{auth.emailVerificationFailure
? lang.t('signIn.emailVerifyCTA')
: lang.t('signIn.signIn')}
</h1>
</div>
{ auth.error && <Alert>{auth.error}</Alert> }
{
auth.emailVerificationFailure
{auth.error && <Alert>{auth.error}</Alert>}
{auth.emailVerificationFailure
? <form onSubmit={handleResendVerification}>
<p>{lang.t('signIn.requestNewVerifyEmail')}</p>
<TextField
@@ -36,8 +36,11 @@ const SignInContent = ({
type="email"
label={lang.t('signIn.email')}
value={emailToBeResent}
onChange={handleChangeEmail} />
<Button id='resendConfirmEmail' type='submit' cStyle='black' full>Send Email</Button>
onChange={handleChangeEmail}
/>
<Button id="resendConfirmEmail" type="submit" cStyle="black" full>
Send Email
</Button>
{emailVerificationLoading && <Spinner />}
{emailVerificationSuccess && <Success />}
</form>
@@ -70,23 +73,29 @@ const SignInContent = ({
onChange={handleChange}
/>
<div className={styles.action}>
{
!auth.isLoading ?
<Button id='coralLogInButton' type="submit" cStyle="black" className={styles.signInButton} full>
{lang.t('signIn.signIn')}
</Button>
:
<Spinner />
}
{!auth.isLoading
? <Button
id="coralLogInButton"
type="submit"
cStyle="black"
className={styles.signInButton}
full
>
{lang.t('signIn.signIn')}
</Button>
: <Spinner />}
</div>
</form>
</div>
}
</div>}
<div className={`${styles.footer} footer`}>
<span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
<span>
<a onClick={() => changeView('FORGOT')}>
{lang.t('signIn.forgotYourPass')}
</a>
</span>
<span>
{lang.t('signIn.needAnAccount')}
<a onClick={() => changeView('SIGNUP')} id='coralRegister'>
<a onClick={() => changeView('SIGNUP')} id="coralRegister">
{lang.t('signIn.register')}
</a>
</span>
@@ -1,39 +1,21 @@
import React, {PropTypes} from 'react';
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
import styles from './styles.css';
import I18n from 'coral-framework/modules/i18n/i18n';
import React, {PropTypes} from 'react';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
const lang = new I18n(translations);
class SignUpContent extends React.Component {
constructor() {
super();
constructor (props) {
super(props);
this.successfulSignup = false;
this.state = {
successfulSignup: false
};
}
static propTypes = {
emailVerificationEnabled: PropTypes.bool.isRequired,
fetchSignUpFacebook: PropTypes.func.isRequired,
changeView: PropTypes.func.isRequired,
handleSignUp: PropTypes.func.isRequired,
showErrors: PropTypes.bool,
errors: PropTypes.shape({
email: PropTypes.string,
username: PropTypes.string,
password: PropTypes.string,
confirmPassword: PropTypes.string,
}),
formData: PropTypes.shape({
email: PropTypes.string,
username: PropTypes.string,
password: PropTypes.string,
confirmPassword: PropTypes.string
})
}
render () {
render() {
const {
handleChange,
formData,
@@ -43,17 +25,20 @@ class SignUpContent extends React.Component {
showErrors,
changeView,
handleSignUp,
fetchSignUpFacebook} = this.props;
fetchSignUpFacebook
} = this.props;
const beforeSignup = !auth.isLoading && !auth.successSignUp;
const successfulSignup = !auth.isLoading && auth.successSignUp;
// the first time we render a successfulSignup, trigger a timer
if ((this.successfulSignup ^ successfulSignup) && !emailVerificationEnabled) {
if (this.successfulSignup ^ successfulSignup && !emailVerificationEnabled) {
setTimeout(() => {
changeView('SIGNIN');
}, 1000);
this.successfulSignup = true;
this.setState({
successfulSignup: true
});
}
return (
@@ -64,8 +49,8 @@ class SignUpContent extends React.Component {
</h1>
</div>
{ auth.error && <Alert>{auth.error}</Alert> }
{ beforeSignup &&
{auth.error && <Alert>{auth.error}</Alert>}
{beforeSignup &&
<div>
<div className={styles.socialConnections}>
<Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
@@ -109,7 +94,10 @@ class SignUpContent extends React.Component {
onChange={handleChange}
minLength="8"
/>
{ errors.password && <span className={styles.hint}> Password must be at least 8 characters. </span> }
{errors.password &&
<span className={styles.hint}>
{' '}Password must be at least 8 characters.{' '}
</span>}
<TextField
id="confirmPassword"
type="password"
@@ -122,26 +110,35 @@ class SignUpContent extends React.Component {
minLength="8"
/>
<div className={styles.action}>
<Button type="submit" cStyle="black" id='coralSignUpButton' className={styles.signInButton} full>
<Button
type="submit"
cStyle="black"
id="coralSignUpButton"
className={styles.signInButton}
full
>
{lang.t('signIn.signUp')}
</Button>
{ auth.isLoading && <Spinner /> }
{auth.isLoading && <Spinner />}
</div>
</form>
</div>
}
{
successfulSignup &&
</div>}
{successfulSignup &&
<div>
<Success />
{
emailVerificationEnabled &&
<p>{lang.t('signIn.verifyEmail')}<br /><br />{lang.t('signIn.verifyEmail2')}</p>
}
</div>
}
{emailVerificationEnabled &&
<p>
{lang.t('signIn.verifyEmail')}
<br />
<br />
{lang.t('signIn.verifyEmail2')}
</p>}
</div>}
<div className={styles.footer}>
{lang.t('signIn.alreadyHaveAnAccount')} <a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
{lang.t('signIn.alreadyHaveAnAccount')} <a
id="coralSignInViewTrigger"
onClick={() => changeView('SIGNIN')}
>
{lang.t('signIn.signIn')}
</a>
</div>
@@ -0,0 +1,34 @@
import React from 'react';
import styles from './styles.css';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import translations from '../translations';
import I18n from 'coral-framework/modules/i18n/i18n';
import {showSignInDialog, logout} from 'coral-framework/actions/auth';
const lang = new I18n(translations);
const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
<div>
{
loggedIn ? (
<div className={styles.userBox}>
{lang.t('signIn.loggedInAs')}
<a onClick={onShowProfile}>{user.username}</a>. {lang.t('signIn.notYou')}
<a className={styles.logout} onClick={() => logout()}>
{lang.t('signIn.logout')}
</a>
</div>
) : null
}
</div>
);
const mapStateToProps = ({auth, user}) => ({
loggedIn: auth.toJS().loggedIn,
user: user.toJS()
});
const mapDispatchToProps = dispatch =>
bindActionCreators({logout}, dispatch);
export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
+11
View File
@@ -0,0 +1,11 @@
import UserBox from './components/UserBox';
import SignInButton from './components/SignInButton';
import SignInContainer from './components/SignInContainer';
import ChangeUserNameContainer from './components/ChangeUsername';
export default {
slots: {
stream: [UserBox, SignInButton, ChangeUserNameContainer],
login: [SignInContainer]
}
};
@@ -0,0 +1,102 @@
{
"en": {
"signIn": {
"emailVerifyCTA": "Please verify your email address.",
"requestNewVerifyEmail": "Request another email:",
"verifyEmail": "Thank you for creating an account! We sent an email to the address you provided to verify your account.",
"verifyEmail2": "You must verify your account before engaging with the community.",
"notYou": "Not you?",
"loggedInAs": "Logged in as",
"facebookSignIn": "Sign in with Facebook",
"facebookSignUp": "Sign up with Facebook",
"logout": "Logout",
"signIn": "Sign in to join the conversation",
"or": "Or",
"email": "E-mail Address",
"password": "Password",
"forgotYourPass": "Forgot your password?",
"needAnAccount": "Need an account?",
"register": "Register",
"signUp": "Sign Up",
"confirmPassword": "Confirm Password",
"username": "Username",
"alreadyHaveAnAccount": "Already have an account?",
"recoverPassword": "Recover password",
"emailInUse": "Email address already in use",
"emailORusernameInUse": "Email address or Username already in use",
"requiredField": "This field is required",
"passwordsDontMatch": "Passwords don't match.",
"specialCharacters": "Usernames can contain letters, numbers and _ only",
"checkTheForm": "Invalid Form. Please, check the fields"
},
"createdisplay": {
"writeyourusername": "Edit your username",
"yourusername": "Your username appears on every comment you post.",
"ifyoudontchangeyourname": "If you don't change your username at this step, your Facebook display name will appear alongside of all your comments.",
"username": "Username",
"continue": "Continue with the same Facebook username",
"save": "Save",
"fakecommentdate": "1 minute ago",
"fakecommentbody": "This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section.",
"requiredField": "Required field",
"errorCreate": "Error when changing username",
"checkTheForm": "Invalid Form. Please, check the fields",
"specialCharacters": "Usernames can contain letters, numbers and _ only"
},
"permalink": {
"permalink": "Link"
},
"report": "Report",
"like": "Like"
},
"es": {
"signIn": {
"emailVerifyCTA": "Por favor verifique su e-mail.",
"requestNewVerifyEmail": "Enviar otro correo:",
"verifyEmail": "¡Gracias por crear una cuenta! Le enviamos un correo a la dirección que dio para verificar su cuenta.",
"verifyEmail2": "Debe verificarla antes de poder involucrarse en la comunidad.",
"notYou": "¿No eres tu?",
"loggedInAs": "Entraste como",
"facebookSignIn": "Entrar con Facebook",
"facebookSignUp": "Regístrate con Facebook",
"logout": "Salir",
"signIn": "Entrar para Unirte a la Conversación",
"or": "o",
"email": "E-mail",
"password": "Contraseña",
"forgotYourPass": "¿Has olvidado tu contraseña?",
"needAnAccount": "¿Necesitas una cuenta?",
"register": "Regístrate",
"signUp": "Registro",
"confirmPassword": "Confirmar Contraseña",
"username": "Nombre",
"alreadyHaveAnAccount": "¿Ya tienes una cuenta?",
"recoverPassword": "Recuperar contraseña",
"emailInUse": "Este e-mail se encuentra en uso",
"emailORusernameInUse": "Este e-mail ó nombre de usuario se encuentran en uso",
"requiredField": "Este campo es requerido",
"passwordsDontMatch": "Las contraseñas no coinciden",
"specialCharacters": "Los nombres pueden contener letras, números y _",
"checkTheForm": "Formulario Inválido. Por favor, completa los campos"
},
"createdisplay": {
"writeyourusername": "Edita tu nombre",
"yourusername": "Tu nombre aparece en cada comentario que publiques.",
"ifyoudontchangeyourname": "Si no modificas tu nombre de usuario en este paso, tu nombre de Facebook aparecera al lado de cada comentario que publiques.",
"username": "Nombre",
"continue": "Continuar con nombre de Facebook",
"save": "Guardar",
"fakecommentdate": "hace un minuto",
"fakecommentbody": "Este es un comentario de ejemplo. Las lectoras pueden compartir sus ideas y opiniones con los periodistas en la sección de comentarios.",
"requiredField": "Campo necesario",
"errorCreate": "Hubo un error al cambiar el nombre de usuario",
"checkTheForm": "Formulario Inválido. Por favor, verifica los campos",
"specialCharacters": "Sólo pueden contener letras, números y _"
},
"permalink": {
"permalink": "Enlace"
},
"report": "Marcar",
"like": "Me gusta"
}
}
+1
View File
@@ -0,0 +1 @@
module.exports = {};
-1
View File
@@ -566,7 +566,6 @@ module.exports = class UsersService {
// endpoint.
return;
}
let redirectDomain;
try {
redirectDomain = url.parse(loc).hostname;