mirror of
https://github.com/wassname/talk.git
synced 2026-08-12 12:30:39 +08:00
External plugin auth fully working, now refactor
This commit is contained in:
Belen Curcio
@@ -0,0 +1,136 @@
|
||||
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 './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 && 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 => ({
|
||||
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,56 @@
|
||||
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 translations from '../translations';
|
||||
const lang = new I18n(translations);
|
||||
|
||||
const CreateUsernameDialog = ({open, handleClose, formData, handleSubmitUsername, handleChange, ...props}) => {
|
||||
return (
|
||||
<Dialog
|
||||
className={styles.dialogusername}
|
||||
id="createUsernameDialog"
|
||||
open={open}>
|
||||
<span className={styles.close} onClick={handleClose}>×</span>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{lang.t('createdisplay.writeyourusername')}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<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> }
|
||||
<form id="saveUsername" onSubmit={handleSubmitUsername}>
|
||||
{ props.errors.username && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
|
||||
<div className={styles.saveusername}>
|
||||
<TextField
|
||||
id="username"
|
||||
style={{fontSize: 16}}
|
||||
type="string"
|
||||
label={lang.t('createdisplay.username')}
|
||||
value={formData.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateUsernameDialog;
|
||||
@@ -0,0 +1,66 @@
|
||||
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;
|
||||
@@ -0,0 +1,61 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
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) {
|
||||
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>{lang.t('signIn.recoverPassword')}</h1>
|
||||
</div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<div className={styles.textField}>
|
||||
<label htmlFor="email">{lang.t('signIn.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>
|
||||
{lang.t('signIn.recoverPassword')}
|
||||
</Button>
|
||||
{
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default ForgotContent;
|
||||
@@ -0,0 +1,21 @@
|
||||
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, handleClose, ...props}) => (
|
||||
<Dialog
|
||||
className={styles.dialog}
|
||||
id="signInDialog"
|
||||
open={open}>
|
||||
<span className={styles.close} onClick={handleClose}>×</span>
|
||||
{view === 'SIGNIN' && <SignInContent {...props} />}
|
||||
{view === 'SIGNUP' && <SignUpContent {...props} />}
|
||||
{view === 'FORGOT' && <ForgotContent {...props} />}
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
export default SignDialog;
|
||||
@@ -16,7 +16,9 @@ const SignInButton = ({loggedIn, showSignInDialog}) => (
|
||||
</div>
|
||||
);
|
||||
|
||||
const mapStateToProps = ({auth}) => ({loggedIn: auth.loggedIn});
|
||||
const mapStateToProps = ({auth}) => ({
|
||||
loggedIn: auth.toJS().loggedIn
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch =>
|
||||
bindActionCreators({showSignInDialog}, dispatch);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React, {Component, PropTypes} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
import SignDialog from './SignDialog';
|
||||
import validate from 'coral-framework/helpers/validate';
|
||||
import errorMsj from 'coral-framework/helpers/error';
|
||||
import I18n from 'coral-framework/modules/i18n/i18n';
|
||||
@@ -181,7 +182,16 @@ class SignInContainer extends Component {
|
||||
|
||||
return (
|
||||
<div>
|
||||
This is my login
|
||||
<SignDialog
|
||||
open={true}
|
||||
view={auth.view}
|
||||
emailVerificationEnabled={requireEmailConfirmation}
|
||||
emailVerificationLoading={emailVerificationLoading}
|
||||
emailVerificationSuccess={emailVerificationSuccess}
|
||||
{...this}
|
||||
{...this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
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 translations from '../translations';
|
||||
const lang = new I18n(translations);
|
||||
|
||||
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 ? lang.t('signIn.emailVerifyCTA') : lang.t('signIn.signIn')}
|
||||
</h1>
|
||||
</div>
|
||||
{ auth.error && <Alert>{auth.error}</Alert> }
|
||||
{
|
||||
auth.emailVerificationFailure
|
||||
? <form onSubmit={handleResendVerification}>
|
||||
<p>{lang.t('signIn.requestNewVerifyEmail')}</p>
|
||||
<TextField
|
||||
id="confirm-email"
|
||||
type="email"
|
||||
label={lang.t('signIn.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>
|
||||
{lang.t('signIn.facebookSignIn')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{lang.t('signIn.or')}
|
||||
</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignIn}>
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
label={lang.t('signIn.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
type="password"
|
||||
label={lang.t('signIn.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>
|
||||
{lang.t('signIn.signIn')}
|
||||
</Button>
|
||||
:
|
||||
<Spinner />
|
||||
}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
<div className={`${styles.footer} footer`}>
|
||||
<span><a onClick={() => changeView('FORGOT')}>{lang.t('signIn.forgotYourPass')}</a></span>
|
||||
<span>
|
||||
{lang.t('signIn.needAnAccount')}
|
||||
<a onClick={() => changeView('SIGNUP')} id='coralRegister'>
|
||||
{lang.t('signIn.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,153 @@
|
||||
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 translations from '../translations';
|
||||
const lang = new I18n(translations);
|
||||
|
||||
class SignUpContent extends React.Component {
|
||||
|
||||
constructor (props) {
|
||||
super(props);
|
||||
this.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 () {
|
||||
|
||||
const {
|
||||
handleChange,
|
||||
formData,
|
||||
emailVerificationEnabled,
|
||||
auth,
|
||||
errors,
|
||||
showErrors,
|
||||
changeView,
|
||||
handleSignUp,
|
||||
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) {
|
||||
setTimeout(() => {
|
||||
changeView('SIGNIN');
|
||||
}, 1000);
|
||||
this.successfulSignup = true;
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{lang.t('signIn.signUp')}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{ auth.error && <Alert>{auth.error}</Alert> }
|
||||
{ beforeSignup &&
|
||||
<div>
|
||||
<div className={styles.socialConnections}>
|
||||
<Button cStyle="facebook" onClick={fetchSignUpFacebook} full>
|
||||
{lang.t('signIn.facebookSignUp')}
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles.separator}>
|
||||
<h1>
|
||||
{lang.t('signIn.or')}
|
||||
</h1>
|
||||
</div>
|
||||
<form onSubmit={handleSignUp}>
|
||||
<TextField
|
||||
id="email"
|
||||
type="email"
|
||||
label={lang.t('signIn.email')}
|
||||
value={formData.email}
|
||||
style={{fontSize: 16}}
|
||||
showErrors={showErrors}
|
||||
errorMsg={errors.email}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="username"
|
||||
type="text"
|
||||
label={lang.t('signIn.username')}
|
||||
value={formData.username}
|
||||
showErrors={showErrors}
|
||||
style={{fontSize: 16}}
|
||||
errorMsg={errors.username}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<TextField
|
||||
id="password"
|
||||
type="password"
|
||||
label={lang.t('signIn.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={lang.t('signIn.confirmPassword')}
|
||||
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>
|
||||
{lang.t('signIn.signUp')}
|
||||
</Button>
|
||||
{ auth.isLoading && <Spinner /> }
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
successfulSignup &&
|
||||
<div>
|
||||
<Success />
|
||||
{
|
||||
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.signIn')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default SignUpContent;
|
||||
@@ -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,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;
|
||||
}
|
||||
@@ -1,9 +1,11 @@
|
||||
import SignInButton from './components/SignInButton';
|
||||
import SignInContainer from './components/SignInContainer';
|
||||
import UserBox from './components/UserBox';
|
||||
import ChangeUserNameContainer from './components/ChangeUserNameContainer';
|
||||
|
||||
export default {
|
||||
slots: {
|
||||
stream: [SignInButton],
|
||||
stream: [UserBox, SignInButton, ChangeUserNameContainer],
|
||||
login: [SignInContainer]
|
||||
}
|
||||
};
|
||||
@@ -1,10 +1,102 @@
|
||||
{
|
||||
"en": {
|
||||
"like": "Like",
|
||||
"liked": "Liked"
|
||||
"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": {
|
||||
"like": "Me Gusta",
|
||||
"liked": "Me Gustó"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user