mirror of
https://github.com/wassname/talk.git
synced 2026-08-12 12:30:39 +08:00
Merge branch 'master' into i18n-refactor
Conflicts: client/coral-sign-in/components/FakeComment.js client/coral-sign-in/components/UserBox.js
This commit is contained in:
Chi Vinh Le
@@ -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,142 @@
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import errorMsj from 'coral-framework/helpers/error';
|
||||
import validate from 'coral-framework/helpers/validate';
|
||||
import CreateUsernameDialog from './CreateUsernameDialog';
|
||||
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
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.auth.user && props.auth.user.username) || ''
|
||||
},
|
||||
errors: {},
|
||||
showErrors: false
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(next) {
|
||||
if (!this.props.auth.showCreateUsernameDialog && next.auth.showCreateUsernameDialog) {
|
||||
this.setState({
|
||||
formData: {
|
||||
username: (this.props.auth.user && this.props.auth.user.username) || '',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
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, t('createdisplay.required_field'));
|
||||
} 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.auth.user.id, this.state.formData);
|
||||
validForm();
|
||||
} else {
|
||||
invalidForm(t('createdisplay.check_the_form'));
|
||||
}
|
||||
};
|
||||
|
||||
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 = ({auth}) => ({
|
||||
auth: auth.toJS()
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators(
|
||||
{
|
||||
createUsername,
|
||||
showCreateUsernameDialog,
|
||||
hideCreateUsernameDialog,
|
||||
invalidForm,
|
||||
validForm
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(
|
||||
ChangeUsernameContainer
|
||||
);
|
||||
@@ -0,0 +1,66 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
import {Dialog, Alert, TextField} from 'coral-ui';
|
||||
import {FakeComment} from './FakeComment';
|
||||
import Button from 'coral-ui/components/Button';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const CreateUsernameDialog = ({
|
||||
open,
|
||||
handleClose,
|
||||
formData,
|
||||
handleSubmitUsername,
|
||||
handleChange,
|
||||
...props
|
||||
}) => (
|
||||
<Dialog
|
||||
className={styles.dialogusername}
|
||||
id="createUsernameDialog"
|
||||
open={open}
|
||||
>
|
||||
<span className={styles.close} onClick={handleClose}>×</span>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{t('createdisplay.write_your_username')}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p className={styles.yourusername}>
|
||||
{t('createdisplay.your_username')}
|
||||
</p>
|
||||
<FakeComment
|
||||
className={styles.fakeComment}
|
||||
username={formData.username}
|
||||
created_at={Date.now()}
|
||||
body={t('createdisplay.fake_comment_body')}
|
||||
/>
|
||||
<p className={styles.ifyoudont}>
|
||||
{t('createdisplay.if_you_dont_change_your_name')}
|
||||
</p>
|
||||
{props.auth.error && <Alert>{props.auth.error}</Alert>}
|
||||
<form id="saveUsername" onSubmit={handleSubmitUsername}>
|
||||
{props.errors.username &&
|
||||
<span className={styles.hint}>
|
||||
{' '}{t('createdisplay.special_characters')}{' '}
|
||||
</span>}
|
||||
<div className={styles.saveusername}>
|
||||
<TextField
|
||||
id="username"
|
||||
style={{fontSize: 16}}
|
||||
type="string"
|
||||
label={t('createdisplay.username')}
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Button id="save" type="submit" className={styles.saveButton}>
|
||||
{t('createdisplay.save')}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
export default CreateUsernameDialog;
|
||||
@@ -0,0 +1,70 @@
|
||||
import React from 'react';
|
||||
import {ReplyButton} from 'coral-plugin-replies';
|
||||
import PubDate from 'coral-plugin-pubdate/PubDate';
|
||||
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';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
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'}>
|
||||
{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`}
|
||||
>
|
||||
{t('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`}
|
||||
>
|
||||
{t('report')}
|
||||
</span>
|
||||
<i
|
||||
className={`${'coral-plugin-flags'}-icon material-icons`}
|
||||
aria-hidden={true}
|
||||
>
|
||||
flag
|
||||
</i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
import Button from 'coral-ui/components/Button';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
class ForgotContent extends React.Component {
|
||||
handleSubmit = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.fetchForgotPassword(this.emailInput.value);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {changeView, auth} = this.props;
|
||||
const {passwordRequestSuccess, passwordRequestFailure} = auth;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>{t('sign_in.recover_password')}</h1>
|
||||
</div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className={styles.textField}>
|
||||
<label htmlFor="email">{t('sign_in.email')}</label>
|
||||
<input
|
||||
ref={(input) => (this.emailInput = input)}
|
||||
type="text"
|
||||
style={{fontSize: 16}}
|
||||
id="email"
|
||||
name="email"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
type="submit"
|
||||
cStyle="black"
|
||||
className={styles.signInButton}
|
||||
full
|
||||
>
|
||||
{t('sign_in.recover_password')}
|
||||
</Button>
|
||||
{passwordRequestSuccess
|
||||
? <p className={styles.passwordRequestSuccess}>
|
||||
{passwordRequestSuccess}
|
||||
</p>
|
||||
: null}
|
||||
{passwordRequestFailure
|
||||
? <p className={styles.passwordRequestFailure}>
|
||||
{passwordRequestFailure}
|
||||
</p>
|
||||
: null}
|
||||
</form>
|
||||
<div className={styles.footer}>
|
||||
<span>
|
||||
{t('sign_in.need_an_account')}
|
||||
{' '}
|
||||
<a onClick={() => changeView('SIGNUP')}>
|
||||
{t('sign_in.register')}
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
{t('sign_in.already_have_an_account')}
|
||||
{' '}
|
||||
<a onClick={() => changeView('SIGNIN')}>
|
||||
{t('sign_in.sign_in')}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ForgotContent;
|
||||
@@ -0,0 +1,18 @@
|
||||
import React from 'react';
|
||||
import {Dialog} from 'coral-ui';
|
||||
import styles from './styles.css';
|
||||
|
||||
import SignInContent from './SignInContent';
|
||||
import SignUpContent from './SignUpContent';
|
||||
import ForgotContent from './ForgotContent';
|
||||
|
||||
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} />}
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
export default SignDialog;
|
||||
@@ -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);
|
||||
@@ -0,0 +1,208 @@
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import {pym} from 'coral-framework';
|
||||
import SignDialog from './SignDialog';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
import errorMsj from 'coral-framework/helpers/error';
|
||||
import validate from 'coral-framework/helpers/validate';
|
||||
|
||||
import {
|
||||
changeView,
|
||||
fetchSignUp,
|
||||
fetchSignIn,
|
||||
hideSignInDialog,
|
||||
fetchSignInFacebook,
|
||||
fetchSignUpFacebook,
|
||||
fetchForgotPassword,
|
||||
requestConfirmEmail,
|
||||
facebookCallback,
|
||||
invalidForm,
|
||||
validForm,
|
||||
checkLogin
|
||||
} from 'coral-framework/actions/auth';
|
||||
|
||||
class SignInContainer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
formData: {
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
},
|
||||
emailToBeResent: '',
|
||||
errors: {},
|
||||
showErrors: false
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.props.checkLogin();
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('storage', this.handleAuth);
|
||||
|
||||
const {formData} = this.state;
|
||||
const errors = Object.keys(formData).reduce((map, prop) => {
|
||||
map[prop] = t('sign_in.required_field');
|
||||
return map;
|
||||
}, {});
|
||||
this.setState({errors});
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('storage', this.handleAuth);
|
||||
}
|
||||
|
||||
handleAuth = (e) => {
|
||||
|
||||
// Listening to FB changes
|
||||
// FB localStorage key is 'auth'
|
||||
const authCallback = this.props.facebookCallback;
|
||||
|
||||
if (e.key === 'auth') {
|
||||
const {err, data} = JSON.parse(e.newValue);
|
||||
authCallback(err, data);
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
const {name, value} = e.target;
|
||||
this.setState(
|
||||
(state) => ({
|
||||
...state,
|
||||
formData: {
|
||||
...state.formData,
|
||||
[name]: value
|
||||
}
|
||||
}),
|
||||
() => {
|
||||
this.validation(name, value);
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
handleChangeEmail = (e) => {
|
||||
const {value} = e.target;
|
||||
this.setState({emailToBeResent: value});
|
||||
};
|
||||
|
||||
handleResendVerification = (e) => {
|
||||
e.preventDefault();
|
||||
this.props
|
||||
.requestConfirmEmail(
|
||||
this.state.emailToBeResent,
|
||||
pym.parentUrl || location.href
|
||||
)
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
|
||||
// allow success UI to be shown for a second, and then close the modal
|
||||
this.props.hideSignInDialog();
|
||||
}, 2500);
|
||||
});
|
||||
};
|
||||
|
||||
addError = (name, error) => {
|
||||
return this.setState((state) => ({
|
||||
errors: {
|
||||
...state.errors,
|
||||
[name]: error
|
||||
}
|
||||
}));
|
||||
};
|
||||
|
||||
validation = (name, value) => {
|
||||
const {addError} = this;
|
||||
const {formData} = this.state;
|
||||
|
||||
if (!value.length) {
|
||||
addError(name, t('sign_in.required_field'));
|
||||
} else if (
|
||||
name === 'confirmPassword' &&
|
||||
formData.confirmPassword !== formData.password
|
||||
) {
|
||||
addError('confirmPassword', t('sign_in.passwords_dont_match'));
|
||||
} 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});
|
||||
};
|
||||
|
||||
handleSignUp = (e) => {
|
||||
e.preventDefault();
|
||||
const {errors} = this.state;
|
||||
const {fetchSignUp, validForm, invalidForm} = this.props;
|
||||
this.displayErrors();
|
||||
if (this.isCompleted() && !Object.keys(errors).length) {
|
||||
fetchSignUp(this.state.formData, pym.parentUrl || location.href);
|
||||
validForm();
|
||||
} else {
|
||||
invalidForm(t('sign_in.check_the_form'));
|
||||
}
|
||||
};
|
||||
|
||||
handleSignIn = (e) => {
|
||||
e.preventDefault();
|
||||
this.props.fetchSignIn(this.state.formData);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {auth} = this.props;
|
||||
const {requireEmailConfirmation, emailVerificationLoading, emailVerificationSuccess} = auth;
|
||||
|
||||
return (
|
||||
<SignDialog
|
||||
open={true}
|
||||
view={auth.view}
|
||||
emailVerificationEnabled={requireEmailConfirmation}
|
||||
emailVerificationLoading={emailVerificationLoading}
|
||||
emailVerificationSuccess={emailVerificationSuccess}
|
||||
{...this}
|
||||
{...this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth.toJS()
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators(
|
||||
{
|
||||
checkLogin,
|
||||
facebookCallback,
|
||||
fetchSignUp,
|
||||
fetchSignIn,
|
||||
fetchSignInFacebook,
|
||||
fetchSignUpFacebook,
|
||||
fetchForgotPassword,
|
||||
requestConfirmEmail,
|
||||
changeView,
|
||||
hideSignInDialog,
|
||||
invalidForm,
|
||||
validForm
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(SignInContainer);
|
||||
@@ -0,0 +1,121 @@
|
||||
import React, {PropTypes} from 'react';
|
||||
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
|
||||
import styles from './styles.css';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const SignInContent = ({
|
||||
handleChange,
|
||||
handleChangeEmail,
|
||||
emailToBeResent,
|
||||
handleResendVerification,
|
||||
emailVerificationLoading,
|
||||
emailVerificationSuccess,
|
||||
formData,
|
||||
changeView,
|
||||
handleSignIn,
|
||||
auth,
|
||||
fetchSignInFacebook
|
||||
}) => {
|
||||
return (
|
||||
<div className="coral-sign-in">
|
||||
<div className={`${styles.header} header`}>
|
||||
<h1>
|
||||
{auth.emailVerificationFailure
|
||||
? t('sign_in.email_verify_cta')
|
||||
: t('sign_in.sign_in_to_join')}
|
||||
</h1>
|
||||
</div>
|
||||
{auth.error && <Alert>{auth.error}</Alert>}
|
||||
{auth.emailVerificationFailure
|
||||
? <form onSubmit={handleResendVerification}>
|
||||
<p>{t('sign_in.request_new_verify_email')}</p>
|
||||
<TextField
|
||||
id="confirm-email"
|
||||
type="email"
|
||||
label={t('sign_in.email')}
|
||||
value={emailToBeResent}
|
||||
onChange={handleChangeEmail}
|
||||
/>
|
||||
<Button id="resendConfirmEmail" type="submit" cStyle="black" full>
|
||||
Send Email
|
||||
</Button>
|
||||
{emailVerificationLoading && <Spinner />}
|
||||
{emailVerificationSuccess && <Success />}
|
||||
</form>
|
||||
: <div>
|
||||
<div className={`${styles.socialConnections} social-connections`}>
|
||||
<Button cStyle="facebook" onClick={fetchSignInFacebook} full>
|
||||
{t('sign_in.facebook_sign_in')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{t('sign_in.or')}
|
||||
</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignIn}>
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
label={t('sign_in.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
type="password"
|
||||
label={t('sign_in.password')}
|
||||
value={formData.password}
|
||||
style={{fontSize: 16}}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className={styles.action}>
|
||||
{!auth.isLoading
|
||||
? <Button
|
||||
id="coralLogInButton"
|
||||
type="submit"
|
||||
cStyle="black"
|
||||
className={styles.signInButton}
|
||||
full
|
||||
>
|
||||
{t('sign_in.sign_in')}
|
||||
</Button>
|
||||
: <Spinner />}
|
||||
</div>
|
||||
</form>
|
||||
</div>}
|
||||
<div className={`${styles.footer} footer`}>
|
||||
<span>
|
||||
<a onClick={() => changeView('FORGOT')}>
|
||||
{t('sign_in.forgot_your_pass')}
|
||||
</a>
|
||||
</span>
|
||||
<span>
|
||||
{t('sign_in.need_an_account')}
|
||||
<a onClick={() => changeView('SIGNUP')} id="coralRegister">
|
||||
{t('sign_in.register')}
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
SignInContent.propTypes = {
|
||||
auth: PropTypes.shape({
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
error: PropTypes.string,
|
||||
emailVerificationFailure: PropTypes.bool
|
||||
}).isRequired,
|
||||
fetchSignInFacebook: PropTypes.func.isRequired,
|
||||
handleSignIn: PropTypes.func.isRequired,
|
||||
changeView: PropTypes.func.isRequired,
|
||||
emailVerificationLoading: PropTypes.bool.isRequired,
|
||||
emailVerificationSuccess: PropTypes.bool.isRequired,
|
||||
handleResendVerification: PropTypes.func.isRequired,
|
||||
handleChangeEmail: PropTypes.func.isRequired,
|
||||
emailToBeResent: PropTypes.string.isRequired
|
||||
};
|
||||
|
||||
export default SignInContent;
|
||||
@@ -0,0 +1,139 @@
|
||||
import styles from './styles.css';
|
||||
import React from 'react';
|
||||
import {Button, TextField, Spinner, Success, Alert} from 'coral-ui';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
class SignUpContent extends React.Component {
|
||||
|
||||
componentWillReceiveProps(next) {
|
||||
if (
|
||||
!this.props.emailVerificationEnabled &&
|
||||
!this.props.auth.successSignUp &&
|
||||
next.auth.successSignUp
|
||||
) {
|
||||
setTimeout(() => {
|
||||
this.props.changeView('SIGNIN');
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
handleChange,
|
||||
formData,
|
||||
emailVerificationEnabled,
|
||||
auth,
|
||||
errors,
|
||||
showErrors,
|
||||
changeView,
|
||||
handleSignUp,
|
||||
fetchSignUpFacebook
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{t('sign_in.sign_up')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{auth.error && <Alert>{auth.error}</Alert>}
|
||||
{!auth.successSignUp &&
|
||||
<div>
|
||||
<div className={styles.socialConnections}>
|
||||
<Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
|
||||
{t('sign_in.facebook_sign_up')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{t('sign_in.or')}
|
||||
</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignUp}>
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
label={t('sign_in.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
showErrors={showErrors}
|
||||
errorMsg={errors.email}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="username"
|
||||
type="text"
|
||||
label={t('sign_in.username')}
|
||||
value={formData.username}
|
||||
showErrors={showErrors}
|
||||
style={{fontSize: 16}}
|
||||
errorMsg={errors.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
type="password"
|
||||
label={t('sign_in.password')}
|
||||
value={formData.password}
|
||||
showErrors={showErrors}
|
||||
style={{fontSize: 16}}
|
||||
errorMsg={errors.password}
|
||||
onChange={handleChange}
|
||||
minLength="8"
|
||||
/>
|
||||
{errors.password &&
|
||||
<span className={styles.hint}>
|
||||
{' '}Password must be at least 8 characters.{' '}
|
||||
</span>}
|
||||
<TextField
|
||||
id="confirmPassword"
|
||||
type="password"
|
||||
label={t('sign_in.confirm_password')}
|
||||
value={formData.confirmPassword}
|
||||
style={{fontSize: 16}}
|
||||
showErrors={showErrors}
|
||||
errorMsg={errors.confirmPassword}
|
||||
onChange={handleChange}
|
||||
minLength="8"
|
||||
/>
|
||||
<div className={styles.action}>
|
||||
<Button
|
||||
type="submit"
|
||||
cStyle="black"
|
||||
id="coralSignUpButton"
|
||||
className={styles.signInButton}
|
||||
full
|
||||
>
|
||||
{t('sign_in.sign_up')}
|
||||
</Button>
|
||||
{auth.isLoading && <Spinner />}
|
||||
</div>
|
||||
</form>
|
||||
</div>}
|
||||
{auth.successSignUp &&
|
||||
<div>
|
||||
<Success />
|
||||
{emailVerificationEnabled &&
|
||||
<p>
|
||||
{t('sign_in.verify_email')}
|
||||
<br />
|
||||
<br />
|
||||
{t('sign_in.verify_email2')}
|
||||
</p>}
|
||||
</div>}
|
||||
<div className={styles.footer}>
|
||||
{t('sign_in.already_have_an_account')} <a
|
||||
id="coralSignInViewTrigger"
|
||||
onClick={() => changeView('SIGNIN')}
|
||||
>
|
||||
{t('sign_in.sign_in')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SignUpContent;
|
||||
@@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
import {logout} from 'coral-framework/actions/auth';
|
||||
|
||||
const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
|
||||
<div>
|
||||
{
|
||||
loggedIn ? (
|
||||
<div className={styles.userBox}>
|
||||
{t('sign_in.logged_in_as')}
|
||||
<a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
|
||||
<a className={styles.logout} onClick={() => logout()}>
|
||||
{t('sign_in.logout')}
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = ({auth}) => ({
|
||||
loggedIn: auth.toJS().loggedIn,
|
||||
user: auth.toJS().user
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators({logout}, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
|
||||
@@ -0,0 +1,163 @@
|
||||
.dialog {
|
||||
border: none;
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
|
||||
width: 280px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.header h1, .separator h1{
|
||||
text-align: center;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin: 20px auto 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer span {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
color: #2c69b6;
|
||||
cursor: pointer;
|
||||
margin: 0 5px;
|
||||
}
|
||||
|
||||
.socialConnections {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.signInButton {
|
||||
margin-top: 10px;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.close {
|
||||
font-size: 20px;
|
||||
line-height: 14px;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
position: absolute;
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
color: #363636;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close:hover {
|
||||
color: #6b6b6b;
|
||||
}
|
||||
|
||||
input.error{
|
||||
border: solid 2px #f44336;
|
||||
}
|
||||
|
||||
.errorMsg, .hint {
|
||||
color: grey;
|
||||
font-weight: 600;
|
||||
padding: 3px 0 16px;
|
||||
}
|
||||
|
||||
.userBox {
|
||||
padding: 10px 0 20px;
|
||||
letter-spacing: 0.1px;
|
||||
}
|
||||
|
||||
.userBox a {
|
||||
color: black;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
margin: 0px;
|
||||
margin-left: 4px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
||||
.userBox .logout {
|
||||
border-bottom: solid 1px black;
|
||||
}
|
||||
|
||||
.attention {
|
||||
display: inline-block;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: #B71C1C;
|
||||
color: #FFEBEE;
|
||||
font-weight: bolder;
|
||||
padding: 4px;
|
||||
vertical-align: middle;
|
||||
border-radius: 20px;
|
||||
box-sizing: border-box;
|
||||
font-size: 9px;
|
||||
line-height: 7px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.passwordRequestSuccess {
|
||||
border: 1px solid green;
|
||||
background-color: lightgreen;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.passwordRequestFailure {
|
||||
border: 1px solid orange;
|
||||
background-color: 1px solid coral;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.emailConfirmDialog {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.confirmLabel {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Change username Dialog*/
|
||||
|
||||
.dialogusername {
|
||||
border: none;
|
||||
box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
|
||||
width: 400px;
|
||||
top: 10px;
|
||||
}
|
||||
|
||||
.yourusername {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.example {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.ifyoudont {
|
||||
display: block;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.saveusername {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.savebutton {
|
||||
display: inline;
|
||||
background-color: rgb(105,105,105);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.fakeComment {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import UserBox from './components/UserBox';
|
||||
import SignInButton from './components/SignInButton';
|
||||
import SignInContainer from './components/SignInContainer';
|
||||
import ChangeUserNameContainer from './components/ChangeUsername';
|
||||
import translations from './translations.yml';
|
||||
|
||||
export default {
|
||||
translations,
|
||||
slots: {
|
||||
stream: [UserBox, SignInButton, ChangeUserNameContainer],
|
||||
login: [SignInContainer]
|
||||
}
|
||||
};
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
en:
|
||||
sign_in:
|
||||
email_verify_cta: "Please verify your email address."
|
||||
request_new_verify_email: "Request another email:"
|
||||
verify_email: "Thank you for creating an account! We sent an email to the address you provided to verify your account."
|
||||
verify_email2: "You must verify your account before engaging with the community."
|
||||
not_you: "Not you?"
|
||||
logged_in_as: "Logged in as"
|
||||
facebook_sign_in: "Sign in with Facebook"
|
||||
facebook_sign_up: "Sign up with Facebook"
|
||||
logout: "Logout"
|
||||
sign_in: "Sign in"
|
||||
sign_in_to_join: "Sign in to join the conversation"
|
||||
or: "Or"
|
||||
email: "E-mail Address"
|
||||
password: "Password"
|
||||
forgot_your_pass: "Forgot your password?"
|
||||
need_an_account: "Need an account?"
|
||||
register: "Register"
|
||||
sign_up: "Sign Up"
|
||||
confirm_password: "Confirm Password"
|
||||
username: "Username"
|
||||
already_have_an_account: "Already have an account?"
|
||||
recover_password: "Recover password"
|
||||
email_in_use: "Email address already in use"
|
||||
email_or_username_in_use: "Email address or Username already in use"
|
||||
required_field: "This field is required"
|
||||
passwords_dont_match: "Passwords don't match."
|
||||
special_characters: "Usernames can contain letters, numbers and _ only"
|
||||
sign_in_to_comment: "Sign in to comment"
|
||||
check_the_form: "Invalid Form. Please, check the fields"
|
||||
createdisplay:
|
||||
check_the_form: "Invalid Form. Please check the fields"
|
||||
continue: "Continue with the same Facebook username"
|
||||
error_create: "Error when changing username"
|
||||
fake_comment_body: "This is an example comment. Readers can share their thoughts and opinions with newsrooms in the comments section."
|
||||
fake_comment_date: "1 minute ago"
|
||||
if_you_dont_change_your_name: "If you don't change your username at this step your Facebook display name will appear alongside of all your comments."
|
||||
required_field: "Required field"
|
||||
save: Save
|
||||
special_characters: "Usernames can contain letters numbers and _ only"
|
||||
username: Username
|
||||
write_your_username: "Edit your username"
|
||||
your_username: "Your username appears on every comment you post."
|
||||
es:
|
||||
sign_in:
|
||||
email_verify_cta: "Por favor confirme su correo."
|
||||
request_new_verify_email: "Enviar otro correo:"
|
||||
verify_email: "¡Gracias por crear una cuenta! Le enviamos un correo a la direcció\
|
||||
n que dio para confirmar su cuenta."
|
||||
verify_email2: "Debe confirmarla antes de poder involucrarse en la comunidad."
|
||||
not_you: "¿No eres tu?"
|
||||
logged_in_as: "Entraste como"
|
||||
facebook_sign_in: "Entrar con Facebook"
|
||||
facebook_sign_up: "Registrarse con Facebook"
|
||||
logout: "Salir"
|
||||
sign_in: "Entrar"
|
||||
sign_in_to_join: "Entrar para unirte a la conversación"
|
||||
or: "O"
|
||||
email: "Dirección de Correo"
|
||||
password: "Contraseña"
|
||||
forgot_your_pass: "¿Has olvidado tu contraseña?"
|
||||
need_an_account: "¿Necesitas una cuenta?"
|
||||
register: "Registrar"
|
||||
sign_up: "Registro"
|
||||
confirm_password: "Confirmar Contraseña"
|
||||
username: "Nombre"
|
||||
already_have_an_account: "¿Ya tienes una cuenta?"
|
||||
recover_password: "Recuperar la contraseña"
|
||||
email_in_use: "Este correo se encuentra en uso"
|
||||
email_or_username_in_use: "Este correo ó nombre de usuario se encuentran en uso"
|
||||
required_field: "Este campo es requerido"
|
||||
passwords_dont_match: "Las contraseñas no coinciden."
|
||||
special_characters: "Los nombres pueden contener letras, números y _"
|
||||
sign_in_to_comment: "Entrar para comentar"
|
||||
check_the_form: "Formulario Inválido. Por favor, completa los campos"
|
||||
createdisplay:
|
||||
check_the_form: "Formulario Inválido. Por favor verifica los campos"
|
||||
continue: "Continuar con el mismo nombre que aparece en Facebook"
|
||||
error_create: "Hubo un error al cambiar el nombre de usuario"
|
||||
fake_comment_body: "Este es un comentario de ejemplo. Las lectoras pueden compartir\
|
||||
\ sus ideas y opiniones con los periodistas en la sección de comentarios."
|
||||
fake_comment_date: "hace un minuto"
|
||||
if_you_dont_change_your_name: "Si no modificas tu nombre de usuario en este paso\
|
||||
\ tu nombre de Facebook aparecerá al lado de cada comentario que publiques."
|
||||
required_field: "Campo requerido"
|
||||
save: Guardar
|
||||
special_characters: "Los nombres sólo pueden contener letras números y _"
|
||||
username: Nombre
|
||||
write_your_username: "Edita tu nombre"
|
||||
your_username: "Tu nombre aparece en cada comentario que publiques."
|
||||
@@ -0,0 +1,2 @@
|
||||
module.exports = {};
|
||||
|
||||
@@ -1,17 +1,16 @@
|
||||
import React, { Component } from 'react';
|
||||
import React, {Component} from 'react';
|
||||
import styles from './style.css';
|
||||
import Icon from './Icon';
|
||||
|
||||
import t from 'coral-framework/services/i18n';
|
||||
import cn from 'classnames';
|
||||
import { getMyActionSummary, getTotalActionCount } from 'coral-framework/utils';
|
||||
import {getMyActionSummary, getTotalActionCount} from 'coral-framework/utils';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const name = 'coral-plugin-like';
|
||||
|
||||
class LikeButton extends Component {
|
||||
handleClick = () => {
|
||||
const { postLike, showSignInDialog, deleteAction } = this.props;
|
||||
const { root: { me }, comment } = this.props;
|
||||
const {postLike, showSignInDialog, deleteAction} = this.props;
|
||||
const {root: {me}, comment} = this.props;
|
||||
|
||||
const myLikeActionSummary = getMyActionSummary(
|
||||
'LikeActionSummary',
|
||||
@@ -40,7 +39,7 @@ class LikeButton extends Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const { comment } = this.props;
|
||||
const {comment} = this.props;
|
||||
|
||||
if (!comment) {
|
||||
return null;
|
||||
@@ -54,7 +53,7 @@ class LikeButton extends Component {
|
||||
<button
|
||||
className={cn(
|
||||
styles.button,
|
||||
{ [styles.liked]: myLike },
|
||||
{[styles.liked]: myLike},
|
||||
`${name}-button`
|
||||
)}
|
||||
onClick={this.handleClick}
|
||||
@@ -66,7 +65,7 @@ class LikeButton extends Component {
|
||||
className={cn(
|
||||
styles.icon,
|
||||
'material-icons',
|
||||
{ [styles.liked]: myLike },
|
||||
{[styles.liked]: myLike},
|
||||
`${name}-icon`
|
||||
)}
|
||||
aria-hidden={true}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import get from 'lodash/get';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { compose, gql, graphql } from 'react-apollo';
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import {compose, gql, graphql} from 'react-apollo';
|
||||
import LikeButton from '../components/LikeButton';
|
||||
import withFragments from 'coral-framework/hocs/withFragments';
|
||||
import { showSignInDialog } from 'coral-framework/actions/auth';
|
||||
import{showSignInDialog} from 'coral-framework/actions/auth';
|
||||
|
||||
const isLikeAction = a => a.__typename === 'LikeActionSummary';
|
||||
const isLikeAction = (a) => a.__typename === 'LikeActionSummary';
|
||||
|
||||
const COMMENT_FRAGMENT = gql`
|
||||
fragment LikeButton_updateFragment on Comment {
|
||||
@@ -32,17 +32,17 @@ const withDeleteAction = graphql(
|
||||
}
|
||||
`,
|
||||
{
|
||||
props: ({ mutate }) => ({
|
||||
props: ({mutate}) => ({
|
||||
deleteAction: (id, commentId) => {
|
||||
return mutate({
|
||||
variables: { id },
|
||||
variables: {id},
|
||||
optimisticResponse: {
|
||||
deleteAction: {
|
||||
__typename: 'DeleteActionResponse',
|
||||
errors: null
|
||||
}
|
||||
},
|
||||
update: proxy => {
|
||||
update: (proxy) => {
|
||||
const fragmentId = `Comment_${commentId}`;
|
||||
|
||||
// Read the data from our cache for this query.
|
||||
@@ -93,10 +93,10 @@ const withPostLike = graphql(
|
||||
}
|
||||
`,
|
||||
{
|
||||
props: ({ mutate }) => ({
|
||||
postLike: like => {
|
||||
props: ({mutate}) => ({
|
||||
postLike: (like) => {
|
||||
return mutate({
|
||||
variables: { like },
|
||||
variables: {like},
|
||||
optimisticResponse: {
|
||||
createLike: {
|
||||
__typename: 'CreateLikeResponse',
|
||||
@@ -125,6 +125,7 @@ const withPostLike = graphql(
|
||||
}
|
||||
|
||||
if (idx < 0) {
|
||||
|
||||
// Add initial action when it doesn't exist.
|
||||
data.action_summaries.push({
|
||||
__typename: 'LikeActionSummary',
|
||||
@@ -153,8 +154,8 @@ const withPostLike = graphql(
|
||||
}
|
||||
);
|
||||
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators({ showSignInDialog }, dispatch);
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators({showSignInDialog}, dispatch);
|
||||
|
||||
const enhance = compose(
|
||||
withFragments({
|
||||
|
||||
@@ -12,7 +12,7 @@ class LoveButton extends React.Component {
|
||||
showSignInDialog,
|
||||
alreadyReacted
|
||||
} = this.props;
|
||||
const {root: {me}, comment} = this.props;
|
||||
const {root: {me}} = this.props;
|
||||
|
||||
// If the current user does not exist, trigger sign in dialog.
|
||||
if (!me) {
|
||||
|
||||
@@ -16,8 +16,8 @@ module.exports = {
|
||||
__resolveType: {
|
||||
post({action_type}) {
|
||||
switch (action_type) {
|
||||
case 'LOVE':
|
||||
return 'LoveAction';
|
||||
case 'LOVE':
|
||||
return 'LoveAction';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -26,8 +26,8 @@ module.exports = {
|
||||
__resolveType: {
|
||||
post({action_type}) {
|
||||
switch (action_type) {
|
||||
case 'LOVE':
|
||||
return 'LoveActionSummary';
|
||||
case 'LOVE':
|
||||
return 'LoveActionSummary';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css'
|
||||
import styles from './styles.css';
|
||||
|
||||
export default (props) => (
|
||||
<div className={styles.box}>
|
||||
Comment Status: {props.comment.status}
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import Box from './Box';
|
||||
import {Button} from 'coral-ui'
|
||||
import {Button} from 'coral-ui';
|
||||
import styles from './styles.css';
|
||||
|
||||
export default class Footer extends React.Component {
|
||||
@@ -13,9 +13,9 @@ export default class Footer extends React.Component {
|
||||
}
|
||||
|
||||
handleClick = () => {
|
||||
this.setState(state => ({
|
||||
this.setState((state) => ({
|
||||
show: !state.show
|
||||
}))
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
@@ -1,4 +1,2 @@
|
||||
const {readFileSync} = require('fs');
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {};
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ class OffTopicCheckbox extends React.Component {
|
||||
|
||||
handleChange = (e) => {
|
||||
if (e.target.checked) {
|
||||
this.props.addTag(this.label)
|
||||
this.props.addTag(this.label);
|
||||
} else {
|
||||
const idx = this.props.commentBox.tags.indexOf(this.label);
|
||||
this.props.removeTag(idx);
|
||||
@@ -27,14 +27,13 @@ class OffTopicCheckbox extends React.Component {
|
||||
{t('off_topic')}
|
||||
</label>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const mapStateToProps = ({commentBox}) => ({commentBox});
|
||||
|
||||
const mapDispatchToProps = dispatch =>
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators({addTag, removeTag}, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(OffTopicCheckbox);
|
||||
|
||||
@@ -4,8 +4,8 @@ import styles from './styles.css';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const isOffTopic = (tags) => {
|
||||
return !!tags.filter(tag => tag.name === 'OFF_TOPIC').length
|
||||
}
|
||||
return !!tags.filter((tag) => tag.name === 'OFF_TOPIC').length;
|
||||
};
|
||||
|
||||
export default (props) => (
|
||||
<span>
|
||||
|
||||
Reference in New Issue
Block a user