mirror of
https://github.com/wassname/talk.git
synced 2026-07-20 12:40:47 +08:00
Merge pull request #603 from coralproject/coral-plugin-auth
Coral plugin Auth
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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)));
|
||||
};
|
||||
|
||||
@@ -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"/>
|
||||
);
|
||||
@@ -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
|
||||
);
|
||||
+31
-18
@@ -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>
|
||||
);
|
||||
+38
-24
@@ -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>
|
||||
);
|
||||
+3
-6
@@ -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);
|
||||
+76
-86
@@ -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);
|
||||
+28
-19
@@ -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>
|
||||
+44
-47
@@ -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);
|
||||
@@ -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"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
module.exports = {};
|
||||
@@ -566,7 +566,6 @@ module.exports = class UsersService {
|
||||
// endpoint.
|
||||
return;
|
||||
}
|
||||
|
||||
let redirectDomain;
|
||||
try {
|
||||
redirectDomain = url.parse(loc).hostname;
|
||||
|
||||
Reference in New Issue
Block a user