mirror of
https://github.com/wassname/talk.git
synced 2026-08-02 13:10:23 +08:00
replaced eslint:recommended with prettier
This commit is contained in:
Wyatt Johnson
@@ -1,13 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {connect} from 'react-redux';
|
||||
import {compose} from 'react-apollo';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { compose } from 'react-apollo';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import errorMsj from 'coral-framework/helpers/error';
|
||||
import validate from 'coral-framework/helpers/validate';
|
||||
import CreateUsernameDialog from './CreateUsernameDialog';
|
||||
import {withSetUsername} from 'coral-framework/graphql/mutations';
|
||||
import {forEachError} from 'plugin-api/beta/client/utils';
|
||||
import { withSetUsername } from 'coral-framework/graphql/mutations';
|
||||
import { forEachError } from 'plugin-api/beta/client/utils';
|
||||
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
@@ -25,32 +25,36 @@ class ChangeUsernameContainer extends React.Component {
|
||||
|
||||
this.state = {
|
||||
formData: {
|
||||
username: (props.auth.user && props.auth.user.username) || ''
|
||||
username: (props.auth.user && props.auth.user.username) || '',
|
||||
},
|
||||
errors: {},
|
||||
showErrors: false
|
||||
showErrors: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(next) {
|
||||
if (!this.props.auth.showCreateUsernameDialog && next.auth.showCreateUsernameDialog) {
|
||||
if (
|
||||
!this.props.auth.showCreateUsernameDialog &&
|
||||
next.auth.showCreateUsernameDialog
|
||||
) {
|
||||
this.setState({
|
||||
formData: {
|
||||
username: (this.props.auth.user && this.props.auth.user.username) || '',
|
||||
username:
|
||||
(this.props.auth.user && this.props.auth.user.username) || '',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
handleChange = (e) => {
|
||||
const {name, value} = e.target;
|
||||
handleChange = e => {
|
||||
const { name, value } = e.target;
|
||||
this.setState(
|
||||
(state) => ({
|
||||
state => ({
|
||||
...state,
|
||||
formData: {
|
||||
...state.formData,
|
||||
[name]: value
|
||||
}
|
||||
[name]: value,
|
||||
},
|
||||
}),
|
||||
() => {
|
||||
this.validation(name, value);
|
||||
@@ -59,16 +63,16 @@ class ChangeUsernameContainer extends React.Component {
|
||||
};
|
||||
|
||||
addError = (name, error) => {
|
||||
return this.setState((state) => ({
|
||||
return this.setState(state => ({
|
||||
errors: {
|
||||
...state.errors,
|
||||
[name]: error
|
||||
}
|
||||
[name]: error,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
validation = (name, value) => {
|
||||
const {addError} = this;
|
||||
const { addError } = this;
|
||||
|
||||
if (!value.length) {
|
||||
addError(name, t('createdisplay.required_field'));
|
||||
@@ -77,23 +81,28 @@ class ChangeUsernameContainer extends React.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 = () => {
|
||||
const {formData} = this.state;
|
||||
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
|
||||
const { formData } = this.state;
|
||||
return !Object.keys(formData).filter(prop => !formData[prop].length).length;
|
||||
};
|
||||
|
||||
displayErrors = (show = true) => {
|
||||
this.setState({showErrors: show});
|
||||
this.setState({ showErrors: show });
|
||||
};
|
||||
|
||||
async setUsernameAndClose(username, props = this.props) {
|
||||
const {validForm, invalidForm, setUsername, hideCreateUsernameDialog, updateUsername} = props;
|
||||
const {
|
||||
validForm,
|
||||
invalidForm,
|
||||
setUsername,
|
||||
hideCreateUsernameDialog,
|
||||
updateUsername,
|
||||
} = props;
|
||||
try {
|
||||
|
||||
// Perform mutation
|
||||
await setUsername(this.props.auth.user.id, username);
|
||||
|
||||
@@ -102,18 +111,17 @@ class ChangeUsernameContainer extends React.Component {
|
||||
|
||||
hideCreateUsernameDialog();
|
||||
validForm();
|
||||
}
|
||||
catch(error) {
|
||||
} catch (error) {
|
||||
const msgs = [];
|
||||
forEachError(error, ({msg}) => msgs.push(msg));
|
||||
forEachError(error, ({ msg }) => msgs.push(msg));
|
||||
invalidForm(t(msgs.join(', ')));
|
||||
}
|
||||
}
|
||||
|
||||
handleSubmitUsername = (e) => {
|
||||
handleSubmitUsername = e => {
|
||||
e.preventDefault();
|
||||
const {errors, formData: {username}} = this.state;
|
||||
const {invalidForm} = this.props;
|
||||
const { errors, formData: { username } } = this.state;
|
||||
const { invalidForm } = this.props;
|
||||
this.displayErrors();
|
||||
if (this.isCompleted() && !Object.keys(errors).length) {
|
||||
this.setUsernameAndClose(username);
|
||||
@@ -127,7 +135,7 @@ class ChangeUsernameContainer extends React.Component {
|
||||
};
|
||||
|
||||
render() {
|
||||
const {loggedIn, auth} = this.props;
|
||||
const { loggedIn, auth } = this.props;
|
||||
return (
|
||||
<div>
|
||||
<CreateUsernameDialog
|
||||
@@ -153,11 +161,11 @@ ChangeUsernameContainer.propTypes = {
|
||||
changeUsername: PropTypes.func,
|
||||
};
|
||||
|
||||
const mapStateToProps = ({auth}) => ({
|
||||
auth: auth
|
||||
const mapStateToProps = ({ auth }) => ({
|
||||
auth: auth,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators(
|
||||
{
|
||||
showCreateUsernameDialog,
|
||||
|
||||
@@ -1,8 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './styles.css';
|
||||
import {Dialog, Alert, TextField, Button} from 'plugin-api/beta/client/components/ui';
|
||||
import {FakeComment} from './FakeComment';
|
||||
import {
|
||||
Dialog,
|
||||
Alert,
|
||||
TextField,
|
||||
Button,
|
||||
} from 'plugin-api/beta/client/components/ui';
|
||||
import { FakeComment } from './FakeComment';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const CreateUsernameDialog = ({
|
||||
@@ -18,12 +23,12 @@ const CreateUsernameDialog = ({
|
||||
id="createUsernameDialog"
|
||||
open={open}
|
||||
>
|
||||
<span className={styles.close} onClick={handleClose}>×</span>
|
||||
<span className={styles.close} onClick={handleClose}>
|
||||
×
|
||||
</span>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{t('createdisplay.write_your_username')}
|
||||
</h1>
|
||||
<h1>{t('createdisplay.write_your_username')}</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p className={styles.yourusername}>
|
||||
@@ -40,14 +45,16 @@ const CreateUsernameDialog = ({
|
||||
</p>
|
||||
{props.auth.error && <Alert>{props.auth.error}</Alert>}
|
||||
<form id="saveUsername" onSubmit={handleSubmitUsername}>
|
||||
{props.errors.username &&
|
||||
{props.errors.username && (
|
||||
<span className={styles.hint}>
|
||||
{' '}{t('createdisplay.special_characters')}{' '}
|
||||
</span>}
|
||||
{' '}
|
||||
{t('createdisplay.special_characters')}{' '}
|
||||
</span>
|
||||
)}
|
||||
<div className={styles.saveusername}>
|
||||
<TextField
|
||||
id="username"
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
type="string"
|
||||
label={t('createdisplay.username')}
|
||||
value={formData.username}
|
||||
|
||||
@@ -1,25 +1,19 @@
|
||||
import React from 'react';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
import {ReplyButton} from 'talk-plugin-replies';
|
||||
import { ReplyButton } from 'talk-plugin-replies';
|
||||
import styles from './FakeComment.css';
|
||||
import {Icon} from 'plugin-api/beta/client/components/ui';
|
||||
import {CommentTimestamp} from 'plugin-api/beta/client/components';
|
||||
import { Icon } from 'plugin-api/beta/client/components/ui';
|
||||
import { CommentTimestamp } from 'plugin-api/beta/client/components';
|
||||
|
||||
export const FakeComment = ({username, created_at, body}) => (
|
||||
export const FakeComment = ({ username, created_at, body }) => (
|
||||
<div className={styles.root}>
|
||||
<span className={styles.authorName}>
|
||||
{username}
|
||||
</span>
|
||||
<span className={styles.authorName}>{username}</span>
|
||||
<CommentTimestamp created_at={created_at} />
|
||||
<div className={styles.body}>
|
||||
{body}
|
||||
</div>
|
||||
<div className={styles.body}>{body}</div>
|
||||
<div className={styles.footer}>
|
||||
<div>
|
||||
<button className={styles.button}>
|
||||
<span className={styles.label}>
|
||||
{t('like')}
|
||||
</span>
|
||||
<span className={styles.label}>{t('like')}</span>
|
||||
<Icon name="thumb_up" className={styles.icon} />
|
||||
</button>
|
||||
<ReplyButton
|
||||
@@ -30,19 +24,14 @@ export const FakeComment = ({username, created_at, body}) => (
|
||||
</div>
|
||||
<div>
|
||||
<button className={styles.button}>
|
||||
<span className={styles.label}>
|
||||
{t('permalink')}
|
||||
</span>
|
||||
<span className={styles.label}>{t('permalink')}</span>
|
||||
<Icon name="link" className={styles.icon} />
|
||||
</button>
|
||||
<button className={styles.button}>
|
||||
<span className={styles.label}>
|
||||
{t('report')}
|
||||
</span>
|
||||
<span className={styles.label}>{t('report')}</span>
|
||||
<Icon name="flag" className={styles.icon} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './styles.css';
|
||||
import {Button, TextField} from 'plugin-api/beta/client/components/ui';
|
||||
import { Button, TextField } from 'plugin-api/beta/client/components/ui';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
class ForgotContent extends React.Component {
|
||||
|
||||
state = {value: ''};
|
||||
state = { value: '' };
|
||||
|
||||
handleSubmit = (e) => {
|
||||
handleSubmit = e => {
|
||||
e.preventDefault();
|
||||
this.props.fetchForgotPassword(this.state.value);
|
||||
};
|
||||
|
||||
handleChangeEmail = (e) => {
|
||||
const {value} = e.target;
|
||||
this.setState({value});
|
||||
}
|
||||
handleChangeEmail = e => {
|
||||
const { value } = e.target;
|
||||
this.setState({ value });
|
||||
};
|
||||
|
||||
render() {
|
||||
const {changeView, auth} = this.props;
|
||||
const {passwordRequestSuccess, passwordRequestFailure} = auth;
|
||||
const { changeView, auth } = this.props;
|
||||
const { passwordRequestSuccess, passwordRequestFailure } = auth;
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -31,7 +30,7 @@ class ForgotContent extends React.Component {
|
||||
<div className={styles.textField}>
|
||||
<TextField
|
||||
type="email"
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
id="email"
|
||||
name="email"
|
||||
label={t('sign_in.email')}
|
||||
@@ -47,31 +46,25 @@ class ForgotContent extends React.Component {
|
||||
>
|
||||
{t('sign_in.recover_password')}
|
||||
</Button>
|
||||
{passwordRequestSuccess
|
||||
? <p className={styles.passwordRequestSuccess}>
|
||||
{passwordRequestSuccess ? (
|
||||
<p className={styles.passwordRequestSuccess}>
|
||||
{passwordRequestSuccess}
|
||||
</p>
|
||||
: null}
|
||||
{passwordRequestFailure
|
||||
? <p className={styles.passwordRequestFailure}>
|
||||
) : null}
|
||||
{passwordRequestFailure ? (
|
||||
<p className={styles.passwordRequestFailure}>
|
||||
{passwordRequestFailure}
|
||||
</p>
|
||||
: null}
|
||||
) : null}
|
||||
</form>
|
||||
<div className={styles.footer}>
|
||||
<span>
|
||||
{t('sign_in.need_an_account')}
|
||||
{' '}
|
||||
<a onClick={() => changeView('SIGNUP')}>
|
||||
{t('sign_in.register')}
|
||||
</a>
|
||||
{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>
|
||||
{t('sign_in.already_have_an_account')}{' '}
|
||||
<a onClick={() => changeView('SIGNIN')}>{t('sign_in.sign_in')}</a>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,27 +1,38 @@
|
||||
import React from 'react';
|
||||
import {Button, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
|
||||
import {
|
||||
Button,
|
||||
Spinner,
|
||||
Success,
|
||||
Alert,
|
||||
} from 'plugin-api/beta/client/components/ui';
|
||||
import PropTypes from 'prop-types';
|
||||
import styles from './ResendVerification.css';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
class ResendVerification extends React.Component {
|
||||
render() {
|
||||
const {resendVerification, error, loading, success, email} = this.props;
|
||||
const { resendVerification, error, loading, success, email } = this.props;
|
||||
return (
|
||||
<div className="talk-resend-verification">
|
||||
<h1 className={styles.header}>
|
||||
{t('sign_in.email_verify_cta')}
|
||||
</h1>
|
||||
<h1 className={styles.header}>{t('sign_in.email_verify_cta')}</h1>
|
||||
|
||||
{error &&
|
||||
{error && (
|
||||
<Alert>
|
||||
{error.translation_key ? t(`error.${error.translation_key}`) : error.toString()}
|
||||
</Alert>}
|
||||
{error.translation_key
|
||||
? t(`error.${error.translation_key}`)
|
||||
: error.toString()}
|
||||
</Alert>
|
||||
)}
|
||||
<div className={styles.notVerified}>
|
||||
{t('error.email_not_verified', email)}
|
||||
</div>
|
||||
<div>
|
||||
<Button id="resendConfirmEmail" cStyle="black" onClick={resendVerification} full>
|
||||
<Button
|
||||
id="resendConfirmEmail"
|
||||
cStyle="black"
|
||||
onClick={resendVerification}
|
||||
full
|
||||
>
|
||||
{t('sign_in.request_new_verify_email')}
|
||||
</Button>
|
||||
{loading && <Spinner />}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import {Dialog} from 'plugin-api/beta/client/components/ui';
|
||||
import { Dialog } from 'plugin-api/beta/client/components/ui';
|
||||
import styles from './styles.css';
|
||||
|
||||
import SignInContent from './SignInContent';
|
||||
@@ -7,20 +7,25 @@ import SignUpContent from './SignUpContent';
|
||||
import ForgotContent from './ForgotContent';
|
||||
import ResendVerification from './ResendVerification';
|
||||
|
||||
const SignDialog = ({open, view, resetSignInDialog, ...props}) => (
|
||||
const SignDialog = ({ open, view, resetSignInDialog, ...props }) => (
|
||||
<Dialog className={styles.dialog} id="signInDialog" open={open}>
|
||||
{view !== 'SIGNIN' && <span className={styles.close} onClick={resetSignInDialog}>×</span>}
|
||||
{view !== 'SIGNIN' && (
|
||||
<span className={styles.close} onClick={resetSignInDialog}>
|
||||
×
|
||||
</span>
|
||||
)}
|
||||
{view === 'SIGNIN' && <SignInContent {...props} />}
|
||||
{view === 'SIGNUP' && <SignUpContent {...props} />}
|
||||
{view === 'FORGOT' && <ForgotContent {...props} />}
|
||||
{view === 'RESEND_VERIFICATION' &&
|
||||
{view === 'RESEND_VERIFICATION' && (
|
||||
<ResendVerification
|
||||
resendVerification={props.resendVerification}
|
||||
error={props.auth.emailVerificationFailure}
|
||||
success={props.auth.emailVerificationSuccess}
|
||||
loading={props.auth.emailVerificationLoading}
|
||||
email={props.auth.email}
|
||||
/>}
|
||||
/>
|
||||
)}
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
|
||||
@@ -1,25 +1,25 @@
|
||||
import React from 'react';
|
||||
import {Button} from 'plugin-api/beta/client/components/ui';
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import {showSignInDialog} from 'coral-embed-stream/src/actions/auth';
|
||||
import { Button } from 'plugin-api/beta/client/components/ui';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import { showSignInDialog } from 'coral-embed-stream/src/actions/auth';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
const SignInButton = ({loggedIn, showSignInDialog}) => (
|
||||
const SignInButton = ({ loggedIn, showSignInDialog }) => (
|
||||
<div className="talk-stream-auth-sign-in-button">
|
||||
{!loggedIn
|
||||
? <Button id="coralSignInButton" onClick={showSignInDialog} full>
|
||||
{!loggedIn ? (
|
||||
<Button id="coralSignInButton" onClick={showSignInDialog} full>
|
||||
{t('sign_in.sign_in_to_comment')}
|
||||
</Button>
|
||||
: null}
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = ({auth}) => ({
|
||||
loggedIn: auth.loggedIn
|
||||
const mapStateToProps = ({ auth }) => ({
|
||||
loggedIn: auth.loggedIn,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators({showSignInDialog}, dispatch);
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators({ showSignInDialog }, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(SignInButton);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import { connect } from 'react-redux';
|
||||
import SignDialog from './SignDialog';
|
||||
import {bindActionCreators} from 'redux';
|
||||
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';
|
||||
@@ -30,49 +30,48 @@ class SignInContainer extends React.Component {
|
||||
email: '',
|
||||
username: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
confirmPassword: '',
|
||||
},
|
||||
errors: {},
|
||||
showErrors: false
|
||||
showErrors: false,
|
||||
};
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener('storage', this.handleAuth);
|
||||
|
||||
const {formData} = this.state;
|
||||
const { formData } = this.state;
|
||||
const errors = Object.keys(formData).reduce((map, prop) => {
|
||||
map[prop] = t('sign_in.required_field');
|
||||
return map;
|
||||
}, {});
|
||||
this.setState({errors});
|
||||
this.setState({ errors });
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('storage', this.handleAuth);
|
||||
}
|
||||
|
||||
handleAuth = (e) => {
|
||||
|
||||
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);
|
||||
const { err, data } = JSON.parse(e.newValue);
|
||||
authCallback(err, data);
|
||||
}
|
||||
};
|
||||
|
||||
handleChange = (e) => {
|
||||
const {name, value} = e.target;
|
||||
handleChange = e => {
|
||||
const { name, value } = e.target;
|
||||
this.setState(
|
||||
(state) => ({
|
||||
state => ({
|
||||
...state,
|
||||
formData: {
|
||||
...state.formData,
|
||||
[name]: value
|
||||
}
|
||||
[name]: value,
|
||||
},
|
||||
}),
|
||||
() => {
|
||||
this.validation(name, value);
|
||||
@@ -81,29 +80,26 @@ class SignInContainer extends React.Component {
|
||||
};
|
||||
|
||||
resendVerification = () => {
|
||||
this.props
|
||||
.requestConfirmEmail(this.props.auth.email)
|
||||
.then(() => {
|
||||
setTimeout(() => {
|
||||
|
||||
// allow success UI to be shown for a second, and then close the modal
|
||||
this.props.resetSignInDialog();
|
||||
}, 2500);
|
||||
});
|
||||
this.props.requestConfirmEmail(this.props.auth.email).then(() => {
|
||||
setTimeout(() => {
|
||||
// allow success UI to be shown for a second, and then close the modal
|
||||
this.props.resetSignInDialog();
|
||||
}, 2500);
|
||||
});
|
||||
};
|
||||
|
||||
addError = (name, error) => {
|
||||
return this.setState((state) => ({
|
||||
return this.setState(state => ({
|
||||
errors: {
|
||||
...state.errors,
|
||||
[name]: error
|
||||
}
|
||||
[name]: error,
|
||||
},
|
||||
}));
|
||||
};
|
||||
|
||||
validation = (name, value) => {
|
||||
const {addError} = this;
|
||||
const {formData} = this.state;
|
||||
const { addError } = this;
|
||||
const { formData } = this.state;
|
||||
|
||||
if (!value.length) {
|
||||
addError(name, t('sign_in.required_field'));
|
||||
@@ -117,23 +113,23 @@ class SignInContainer extends React.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 = () => {
|
||||
const {formData} = this.state;
|
||||
return !Object.keys(formData).filter((prop) => !formData[prop].length).length;
|
||||
const { formData } = this.state;
|
||||
return !Object.keys(formData).filter(prop => !formData[prop].length).length;
|
||||
};
|
||||
|
||||
displayErrors = (show = true) => {
|
||||
this.setState({showErrors: show});
|
||||
this.setState({ showErrors: show });
|
||||
};
|
||||
|
||||
handleSignUp = (e) => {
|
||||
handleSignUp = e => {
|
||||
e.preventDefault();
|
||||
const {errors} = this.state;
|
||||
const {fetchSignUp, validForm, invalidForm} = this.props;
|
||||
const { errors } = this.state;
|
||||
const { fetchSignUp, validForm, invalidForm } = this.props;
|
||||
this.displayErrors();
|
||||
if (this.isCompleted() && !Object.keys(errors).length) {
|
||||
fetchSignUp(this.state.formData);
|
||||
@@ -143,14 +139,18 @@ class SignInContainer extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
handleSignIn = (e) => {
|
||||
handleSignIn = e => {
|
||||
e.preventDefault();
|
||||
this.props.fetchSignIn(this.state.formData);
|
||||
};
|
||||
|
||||
render() {
|
||||
const {auth} = this.props;
|
||||
const {requireEmailConfirmation, emailVerificationLoading, emailVerificationSuccess} = auth;
|
||||
const { auth } = this.props;
|
||||
const {
|
||||
requireEmailConfirmation,
|
||||
emailVerificationLoading,
|
||||
emailVerificationSuccess,
|
||||
} = auth;
|
||||
|
||||
return (
|
||||
<SignDialog
|
||||
@@ -167,11 +167,11 @@ class SignInContainer extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state) => ({
|
||||
auth: state.auth
|
||||
const mapStateToProps = state => ({
|
||||
auth: state.auth,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators(
|
||||
{
|
||||
facebookCallback,
|
||||
@@ -185,7 +185,7 @@ const mapDispatchToProps = (dispatch) =>
|
||||
hideSignInDialog,
|
||||
resetSignInDialog,
|
||||
invalidForm,
|
||||
validForm
|
||||
validForm,
|
||||
},
|
||||
dispatch
|
||||
);
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Button, TextField, Spinner, Alert} from 'plugin-api/beta/client/components/ui';
|
||||
import {
|
||||
Button,
|
||||
TextField,
|
||||
Spinner,
|
||||
Alert,
|
||||
} from 'plugin-api/beta/client/components/ui';
|
||||
import styles from './styles.css';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
@@ -10,19 +15,20 @@ const SignInContent = ({
|
||||
changeView,
|
||||
handleSignIn,
|
||||
auth,
|
||||
fetchSignInFacebook
|
||||
fetchSignInFacebook,
|
||||
}) => {
|
||||
return (
|
||||
<div className="coral-sign-in">
|
||||
<div className={`${styles.header} header`}>
|
||||
<h1>
|
||||
{t('sign_in.sign_in_to_join')}
|
||||
</h1>
|
||||
<h1>{t('sign_in.sign_in_to_join')}</h1>
|
||||
</div>
|
||||
{auth.error &&
|
||||
{auth.error && (
|
||||
<Alert>
|
||||
{auth.error.translation_key ? t(`error.${auth.error.translation_key}`) : auth.error.toString()}
|
||||
</Alert>}
|
||||
{auth.error.translation_key
|
||||
? t(`error.${auth.error.translation_key}`)
|
||||
: auth.error.toString()}
|
||||
</Alert>
|
||||
)}
|
||||
<div>
|
||||
<div className={`${styles.socialConnections} social-connections`}>
|
||||
<Button cStyle="facebook" onClick={fetchSignInFacebook} full>
|
||||
@@ -30,9 +36,7 @@ const SignInContent = ({
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{t('sign_in.or')}
|
||||
</h1>
|
||||
<h1>{t('sign_in.or')}</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignIn}>
|
||||
<TextField
|
||||
@@ -40,7 +44,7 @@ const SignInContent = ({
|
||||
type="email"
|
||||
label={t('sign_in.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
@@ -48,12 +52,12 @@ const SignInContent = ({
|
||||
type="password"
|
||||
label={t('sign_in.password')}
|
||||
value={formData.password}
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<div className={styles.action}>
|
||||
{!auth.isLoading
|
||||
? <Button
|
||||
{!auth.isLoading ? (
|
||||
<Button
|
||||
id="coralLogInButton"
|
||||
type="submit"
|
||||
cStyle="black"
|
||||
@@ -62,7 +66,9 @@ const SignInContent = ({
|
||||
>
|
||||
{t('sign_in.sign_in')}
|
||||
</Button>
|
||||
: <Spinner />}
|
||||
) : (
|
||||
<Spinner />
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@@ -87,7 +93,7 @@ SignInContent.propTypes = {
|
||||
auth: PropTypes.shape({
|
||||
isLoading: PropTypes.bool.isRequired,
|
||||
error: PropTypes.string,
|
||||
emailVerificationFailure: PropTypes.bool
|
||||
emailVerificationFailure: PropTypes.bool,
|
||||
}).isRequired,
|
||||
fetchSignInFacebook: PropTypes.func.isRequired,
|
||||
handleSignIn: PropTypes.func.isRequired,
|
||||
|
||||
@@ -1,10 +1,15 @@
|
||||
import styles from './styles.css';
|
||||
import React from 'react';
|
||||
import {Button, TextField, Spinner, Success, Alert} from 'plugin-api/beta/client/components/ui';
|
||||
import {
|
||||
Button,
|
||||
TextField,
|
||||
Spinner,
|
||||
Success,
|
||||
Alert,
|
||||
} from 'plugin-api/beta/client/components/ui';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
|
||||
class SignUpContent extends React.Component {
|
||||
|
||||
componentWillReceiveProps(next) {
|
||||
if (
|
||||
!this.props.emailVerificationEnabled &&
|
||||
@@ -27,19 +32,17 @@ class SignUpContent extends React.Component {
|
||||
showErrors,
|
||||
changeView,
|
||||
handleSignUp,
|
||||
fetchSignUpFacebook
|
||||
fetchSignUpFacebook,
|
||||
} = this.props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{t('sign_in.sign_up')}
|
||||
</h1>
|
||||
<h1>{t('sign_in.sign_up')}</h1>
|
||||
</div>
|
||||
|
||||
{auth.error && <Alert>{auth.error}</Alert>}
|
||||
{!auth.successSignUp &&
|
||||
{!auth.successSignUp && (
|
||||
<div>
|
||||
<div className={styles.socialConnections}>
|
||||
<Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
|
||||
@@ -47,9 +50,7 @@ class SignUpContent extends React.Component {
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{t('sign_in.or')}
|
||||
</h1>
|
||||
<h1>{t('sign_in.or')}</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignUp}>
|
||||
<TextField
|
||||
@@ -57,7 +58,7 @@ class SignUpContent extends React.Component {
|
||||
type="email"
|
||||
label={t('sign_in.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
showErrors={showErrors}
|
||||
errorMsg={errors.email}
|
||||
onChange={handleChange}
|
||||
@@ -68,7 +69,7 @@ class SignUpContent extends React.Component {
|
||||
label={t('sign_in.username')}
|
||||
value={formData.username}
|
||||
showErrors={showErrors}
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
errorMsg={errors.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
@@ -78,21 +79,23 @@ class SignUpContent extends React.Component {
|
||||
label={t('sign_in.password')}
|
||||
value={formData.password}
|
||||
showErrors={showErrors}
|
||||
style={{fontSize: 16}}
|
||||
style={{ fontSize: 16 }}
|
||||
errorMsg={errors.password}
|
||||
onChange={handleChange}
|
||||
minLength="8"
|
||||
/>
|
||||
{errors.password &&
|
||||
{errors.password && (
|
||||
<span className={styles.hint}>
|
||||
{' '}Password must be at least 8 characters.{' '}
|
||||
</span>}
|
||||
{' '}
|
||||
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}}
|
||||
style={{ fontSize: 16 }}
|
||||
showErrors={showErrors}
|
||||
errorMsg={errors.confirmPassword}
|
||||
onChange={handleChange}
|
||||
@@ -111,23 +114,24 @@ class SignUpContent extends React.Component {
|
||||
{auth.isLoading && <Spinner />}
|
||||
</div>
|
||||
</form>
|
||||
</div>}
|
||||
{auth.successSignUp &&
|
||||
</div>
|
||||
)}
|
||||
{auth.successSignUp && (
|
||||
<div>
|
||||
<Success />
|
||||
{emailVerificationEnabled &&
|
||||
{emailVerificationEnabled && (
|
||||
<p>
|
||||
{t('sign_in.verify_email')}
|
||||
<br />
|
||||
<br />
|
||||
{t('sign_in.verify_email2')}
|
||||
</p>}
|
||||
</div>}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className={styles.footer}>
|
||||
{t('sign_in.already_have_an_account')} <a
|
||||
id="coralSignInViewTrigger"
|
||||
onClick={() => changeView('SIGNIN')}
|
||||
>
|
||||
{t('sign_in.already_have_an_account')}{' '}
|
||||
<a id="coralSignInViewTrigger" onClick={() => changeView('SIGNIN')}>
|
||||
{t('sign_in.sign_in')}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -1,32 +1,34 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
import {connect} from 'react-redux';
|
||||
import {bindActionCreators} from 'redux';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
import t from 'coral-framework/services/i18n';
|
||||
import {logout} from 'coral-embed-stream/src/actions/auth';
|
||||
import { logout } from 'coral-embed-stream/src/actions/auth';
|
||||
|
||||
const UserBox = ({loggedIn, user, logout, onShowProfile}) => (
|
||||
const UserBox = ({ loggedIn, user, logout, onShowProfile }) => (
|
||||
<div>
|
||||
{
|
||||
loggedIn ? (
|
||||
<div className={`${styles.userBox} talk-stream-auth-userbox`}>
|
||||
<span className={styles.userBoxLoggedIn}>{t('sign_in.logged_in_as')}</span>
|
||||
<a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
|
||||
<a className={`${styles.logout} talk-stream-userbox-logout`} onClick={() => logout()}>
|
||||
{t('sign_in.logout')}
|
||||
</a>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{loggedIn ? (
|
||||
<div className={`${styles.userBox} talk-stream-auth-userbox`}>
|
||||
<span className={styles.userBoxLoggedIn}>
|
||||
{t('sign_in.logged_in_as')}
|
||||
</span>
|
||||
<a onClick={onShowProfile}>{user.username}</a>. {t('sign_in.not_you')}
|
||||
<a
|
||||
className={`${styles.logout} talk-stream-userbox-logout`}
|
||||
onClick={() => logout()}
|
||||
>
|
||||
{t('sign_in.logout')}
|
||||
</a>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = ({auth}) => ({
|
||||
const mapStateToProps = ({ auth }) => ({
|
||||
loggedIn: auth.loggedIn,
|
||||
user: auth.user
|
||||
user: auth.user,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) =>
|
||||
bindActionCreators({logout}, dispatch);
|
||||
const mapDispatchToProps = dispatch => bindActionCreators({ logout }, dispatch);
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(UserBox);
|
||||
|
||||
Reference in New Issue
Block a user