mirror of
https://github.com/wassname/talk.git
synced 2026-09-09 11:38:08 +08:00
Moves create displayname dialog to sign-in plugin.
This commit is contained in:
gaba
@@ -12,6 +12,9 @@ export const createDisplayNameRequest = () => ({type: actions.CREATE_DISPLAYNAME
|
||||
export const showCreateDisplayNameDialog = () => ({type: actions.SHOW_CREATEDISPLAYNAME_DIALOG});
|
||||
export const hideCreateDisplayNameDialog = () => ({type: actions.HIDE_CREATEDISPLAYNAME_DIALOG});
|
||||
|
||||
const createDisplayNameSuccess = () => ({type: actions.CREATEDISPLAYNAME_SUCCESS});
|
||||
const createDisplayNameFailure = error => ({type: actions.CREATEDISPLAYNAME_FAILURE, error});
|
||||
|
||||
export const updateDisplayName = displayName => ({type: actions.UPDATE_DISPLAYNAME, displayName});
|
||||
|
||||
export const createDisplayName = (userId, formData) => dispatch => {
|
||||
@@ -27,9 +30,6 @@ export const createDisplayName = (userId, formData) => dispatch => {
|
||||
});
|
||||
};
|
||||
|
||||
const createDisplayNameSuccess = () => ({type: actions.CREATEDISPLAYNAME_SUCCESS});
|
||||
const createDisplayNameFailure = error => ({type: actions.CREATEDISPLAYNAME_FAILURE, error});
|
||||
|
||||
export const changeView = view => dispatch =>
|
||||
dispatch({
|
||||
type: actions.CHANGE_VIEW,
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
|
||||
const Alert = ({cStyle = 'error', children, className, ...props}) => (
|
||||
<div
|
||||
className={`${styles.alert} ${styles[`alert--${cStyle}`]} ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default Alert;
|
||||
@@ -1,48 +0,0 @@
|
||||
import React from 'react';
|
||||
import FormField from './FormField';
|
||||
import Alert from './Alert';
|
||||
import Button from 'coral-ui/components/Button';
|
||||
import {Dialog} 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 CreateDisplayNameDialog = ({open, handleClose, offset, formData, handleSubmitDisplayName, handleChange, ...props}) => (
|
||||
<Dialog
|
||||
className={styles.dialog}
|
||||
id="createDisplayNameDialog"
|
||||
open={open}
|
||||
style={{
|
||||
position: 'relative',
|
||||
top: offset !== 0 && offset
|
||||
}}>
|
||||
<span className={styles.close} onClick={handleClose}>×</span>
|
||||
<div>
|
||||
<div className={styles.header}>
|
||||
<h1>
|
||||
{lang.t('createdisplay.writeyourusername')}
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<p>{lang.t('createdisplay.yourusername')}</p>
|
||||
{ props.auth.error && <Alert>{props.auth.error}</Alert> }
|
||||
<form id="saveDisplayName" onSubmit={handleSubmitDisplayName}>
|
||||
<FormField
|
||||
id="displayName"
|
||||
type="string"
|
||||
label={lang.t('createdisplay.displayName')}
|
||||
value={formData.displayName}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
{ props.errors.displayName && <span className={styles.hint}> {lang.t('createdisplay.specialCharacters')} </span> }
|
||||
<div className={styles.action}>
|
||||
<Button id="save" type="submit" className={styles.saveButton}>{lang.t('createdisplay.save')}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
|
||||
export default CreateDisplayNameDialog;
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react';
|
||||
import styles from './styles.css';
|
||||
|
||||
const FormField = ({className, showErrors = false, errorMsg, label, ...props}) => (
|
||||
<div className={`${styles.formField} ${className ? className : ''}`}>
|
||||
<label htmlFor={props.id}>
|
||||
{label}
|
||||
</label>
|
||||
<input
|
||||
className={showErrors && errorMsg ? styles.error : ''}
|
||||
name={props.id}
|
||||
{...props}
|
||||
/>
|
||||
{showErrors && errorMsg && <span className={styles.errorMsg}><span className={styles.attention}>!</span>{errorMsg}</span>}
|
||||
</div>
|
||||
);
|
||||
|
||||
export default FormField;
|
||||
@@ -1,140 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
.formField {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.formField label {
|
||||
font-size: 1.08em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.formField input {
|
||||
width: 100%;
|
||||
display: block;
|
||||
border: none;
|
||||
outline: none;
|
||||
border: 1px solid rgba(0,0,0,.12);
|
||||
padding: 10px 6px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 10px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.alert--success {
|
||||
border: solid 1px #1ec00e;
|
||||
background: #cbf1b8;
|
||||
color: #006900;
|
||||
}
|
||||
|
||||
.alert--error {
|
||||
background: #FFEBEE;
|
||||
color: #B71C1C;
|
||||
}
|
||||
|
||||
.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;
|
||||
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: 15px;
|
||||
}
|
||||
@@ -1,139 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {connect} from 'react-redux';
|
||||
|
||||
import validate from 'coral-framework/helpers/validate';
|
||||
import errorMsj from 'coral-framework/helpers/error';
|
||||
|
||||
import CreateDisplayNameDialog from '../components/CreateDisplayNameDialog';
|
||||
|
||||
import I18n from 'coral-framework/modules/i18n/i18n';
|
||||
import translations from '../translations';
|
||||
const lang = new I18n(translations);
|
||||
|
||||
import {
|
||||
showCreateDisplayNameDialog,
|
||||
hideCreateDisplayNameDialog,
|
||||
invalidForm,
|
||||
validForm,
|
||||
createDisplayName
|
||||
} from '../../coral-framework/actions/auth';
|
||||
|
||||
class ChangeDisplayNameContainer extends Component {
|
||||
initialState = {
|
||||
formData: {
|
||||
displayName: '',
|
||||
},
|
||||
errors: {},
|
||||
showErrors: false
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = this.initialState;
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
this.handleSubmitDisplayName = this.handleSubmitDisplayName.bind(this);
|
||||
this.handleClose = this.handleClose.bind(this);
|
||||
this.addError = this.addError.bind(this);
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.authCallback = this.props.facebookCallback;
|
||||
}
|
||||
|
||||
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});
|
||||
}
|
||||
|
||||
handleSubmitDisplayName(e) {
|
||||
e.preventDefault();
|
||||
const {errors} = this.state;
|
||||
const {validForm, invalidForm} = this.props;
|
||||
this.displayErrors();
|
||||
if (this.isCompleted() && !Object.keys(errors).length) {
|
||||
this.props.createDisplayName(this.props.user.id, this.state.formData);
|
||||
validForm();
|
||||
} else {
|
||||
invalidForm(lang.t('createdisplay.checkTheForm'));
|
||||
}
|
||||
}
|
||||
|
||||
handleClose() {
|
||||
this.props.hideCreateDisplayNameDialog();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {loggedIn, auth, offset} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<CreateDisplayNameDialog
|
||||
open={auth.showCreateDisplayNameDialog}
|
||||
offset={offset}
|
||||
handleClose={this.handleClose}
|
||||
loggedIn={loggedIn}
|
||||
handleSubmitDisplayName={this.handleSubmitDisplayName}
|
||||
{...this}
|
||||
{...this.state}
|
||||
{...this.props}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
auth: state.auth.toJS()
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
createDisplayName: (userid, formData) => dispatch(createDisplayName(userid, formData)),
|
||||
showCreateDisplayNameDialog: () => dispatch(showCreateDisplayNameDialog()),
|
||||
hideCreateDisplayNameDialog: () => dispatch(hideCreateDisplayNameDialog()),
|
||||
invalidForm: error => dispatch(invalidForm(error)),
|
||||
validForm: () => dispatch(validForm())
|
||||
});
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(ChangeDisplayNameContainer);
|
||||
@@ -4,16 +4,6 @@
|
||||
"successBioUpdate": "Your Bio has been updated",
|
||||
"contentNotAvailable": "This content is not available",
|
||||
"suspendedAccountMsg": "Your account is currently suspended. This means that you cannot Like, Flag, or write comments. Please contact moderator@fakeurl.com for more information",
|
||||
"createdisplay": {
|
||||
"writeyourusername": "Write your username",
|
||||
"yourusername": "Your username is publicly visible on all comments you post. A username is needed before you can post your first comment.",
|
||||
"displayName": "Display Name",
|
||||
"save": "Save",
|
||||
"requiredField": "Required field",
|
||||
"errorCreate": "Error when changing display name",
|
||||
"checkTheForm": "Invalid Form. Please, check the fields",
|
||||
"specialCharacters": "Display names can contain letters, numbers and _ only"
|
||||
},
|
||||
"error": {
|
||||
"emailNotVerified": "Email address {0} not verified.",
|
||||
"email": "Not a valid E-Mail",
|
||||
@@ -37,16 +27,6 @@
|
||||
"successBioUpdate": "Tu bio fue actualizada",
|
||||
"contentNotAvailable": "El contenido no se encuentra disponible",
|
||||
"suspendedAccountMsg": "Tu cuenta se encuentra suspendida. Esto significa que no puedes dar Like, Marcar o escribir commentarios. Por favor, contacta moderator@fakeurl for more information",
|
||||
"createdisplay": {
|
||||
"writeyourusername": "Escribe tu nombre",
|
||||
"yourusername": "Tu nombre es visible publicamente en todos los comentarios que publiques. Es necesario tener un nombre de usuario antes de poder publicar tu primer comentario.",
|
||||
"displayName": "Nombre a mostrar",
|
||||
"save": "Guardar",
|
||||
"requiredField": "Campo necesario",
|
||||
"errorCreate": "Hubo un error al cambiar el nombre de usuario",
|
||||
"checkTheForm": "Formulario Invalido. Por favor, verifica los campos",
|
||||
"specialCharacters": "Sólo pueden contener letras, números y _"
|
||||
},
|
||||
"error": {
|
||||
"emailNotVerified": "Dirección de correo electrónico {0} no verificada.",
|
||||
"email": "No es un email válido",
|
||||
|
||||
Reference in New Issue
Block a user