More i18n work
This commit is contained in:
vjrj
parent
3ef6f3c80b
commit
2ad4972115
16 changed files with 286 additions and 90 deletions
|
|
@ -1,3 +1,5 @@
|
|||
@import '../../stylesheets/colors';
|
||||
|
||||
.carousel-item {
|
||||
height: 65vh;
|
||||
min-height: 300px;
|
||||
|
|
@ -134,5 +136,6 @@
|
|||
}
|
||||
|
||||
.participe-btn {
|
||||
background-color: #FD593A
|
||||
background-color: $todos-palette1;
|
||||
color: white;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,11 +8,12 @@ import { Bert } from 'meteor/themeteorchef:bert';
|
|||
import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButtons';
|
||||
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
|
||||
import validate from '../../../modules/validate';
|
||||
|
||||
import { translate } from 'react-i18next';
|
||||
|
||||
class Login extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.t = props.t;
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
|
|
@ -31,11 +32,11 @@ class Login extends React.Component {
|
|||
},
|
||||
messages: {
|
||||
emailAddress: {
|
||||
required: 'Need an email address here.',
|
||||
email: 'Is this email address correct?',
|
||||
required: this.t("Necesitamos un correo aquí."),
|
||||
email: this.t("¿Es este correo correcto?"),
|
||||
},
|
||||
password: {
|
||||
required: 'Need a password here.',
|
||||
required: this.t("Necesitamos una contraseña aquí."),
|
||||
},
|
||||
},
|
||||
submitHandler() { component.handleSubmit(); },
|
||||
|
|
@ -49,7 +50,7 @@ class Login extends React.Component {
|
|||
if (error) {
|
||||
Bert.alert(error.reason, 'danger');
|
||||
} else {
|
||||
Bert.alert('Welcome back!', 'success');
|
||||
Bert.alert(this.t('Bienvenid@ de nuevo'), 'success');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -58,21 +59,21 @@ class Login extends React.Component {
|
|||
return (<div className="Login">
|
||||
<Row>
|
||||
<Col xs={12} sm={6} md={5} lg={4}>
|
||||
<h4 className="page-header">Log In</h4>
|
||||
<h4 className="page-header">{this.t("Iniciar sesión")}</h4>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<OAuthLoginButtons
|
||||
services={['google']}
|
||||
emailMessage={{
|
||||
offset: 100,
|
||||
text: 'Log In with an Email Address',
|
||||
text: this.t('o inicia sesión con un correo'),
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
|
||||
<FormGroup>
|
||||
<ControlLabel>Email Address</ControlLabel>
|
||||
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
|
|
@ -82,8 +83,8 @@ class Login extends React.Component {
|
|||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel className="clearfix">
|
||||
<span className="pull-left">Password</span>
|
||||
<Link className="pull-right" to="/recover-password">Forgot password?</Link>
|
||||
<span className="pull-left">{this.t("Contraseña")}</span>
|
||||
<Link className="pull-right" to="/recover-password">{this.t("¿Olvidaste tu contraseña?")}</Link>
|
||||
</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
|
|
@ -92,9 +93,9 @@ class Login extends React.Component {
|
|||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">Log In</Button>
|
||||
<Button type="submit" bsStyle="success">{this.t("Iniciar sesión")}</Button>
|
||||
<AccountPageFooter>
|
||||
<p>{'Don\'t have an account?'} <Link to="/signup">Sign Up</Link>.</p>
|
||||
<p>{this.t("¿No tienes una cuenta?")} <Link to="/signup">{this.t("Regístrate")}</Link>.</p>
|
||||
</AccountPageFooter>
|
||||
</form>
|
||||
</Col>
|
||||
|
|
@ -107,4 +108,4 @@ Login.propTypes = {
|
|||
history: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default Login;
|
||||
export default translate([], { wait: true })(Login);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React from 'react';
|
||||
import Icon from '../../components/Icon/Icon';
|
||||
import { translate, Trans } from 'react-i18next';
|
||||
|
||||
import './Logout.scss';
|
||||
|
||||
|
|
@ -11,16 +12,11 @@ class Logout extends React.Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="Logout">
|
||||
<img
|
||||
src="https://s3-us-west-2.amazonaws.com/cleverbeagle-assets/graphics/email-icon.png"
|
||||
alt="Clever Beagle"
|
||||
/>
|
||||
<h1>Stay safe out there.</h1>
|
||||
<p>{'Don\'t forget to like and follow Clever Beagle elsewhere on the web:'}</p>
|
||||
<h1><Trans parent="span">Gracias por Participar</Trans></h1>
|
||||
<p><Trans parent="span">También puedes seguirnos en la web</Trans></p>
|
||||
<ul className="FollowUsElsewhere">
|
||||
<li><a href="https://facebook.com/cleverbeagle"><Icon icon="facebook-official" /></a></li>
|
||||
<li><a href="https://twitter.com/clvrbgl"><Icon icon="twitter" /></a></li>
|
||||
<li><a href="https://github.com/cleverbeagle"><Icon icon="github" /></a></li>
|
||||
<li><a href="https://twitter.com/TsContraElFuego"><Icon icon="twitter" /></a></li>
|
||||
<li><a href="https://github.com/comunes/todos-contra-el-fuego"><Icon icon="github" /></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -29,4 +25,4 @@ class Logout extends React.Component {
|
|||
|
||||
Logout.propTypes = {};
|
||||
|
||||
export default Logout;
|
||||
export default translate([], { wait: true })(Logout);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
@import '../../stylesheets/colors';
|
||||
|
||||
.Logout {
|
||||
padding: 20px;
|
||||
background: $cb-blue;
|
||||
margin: 20px;
|
||||
background: $todos-palette3;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
p {
|
||||
font-size: 18px;
|
||||
color: lighten($cb-blue, 25%);
|
||||
color: lighten($todos-palette3, 25%);
|
||||
}
|
||||
|
||||
ul {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { Bert } from 'meteor/themeteorchef:bert';
|
|||
import { createContainer } from 'meteor/react-meteor-data';
|
||||
import InputHint from '../../components/InputHint/InputHint';
|
||||
import validate from '../../../modules/validate';
|
||||
import { translate } from 'react-i18next';
|
||||
|
||||
import './Profile.scss';
|
||||
|
||||
|
|
@ -18,6 +19,7 @@ class Profile extends React.Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.t = this.props.t;
|
||||
this.getUserType = this.getUserType.bind(this);
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
this.renderOAuthUser = this.renderOAuthUser.bind(this);
|
||||
|
|
@ -31,14 +33,14 @@ class Profile extends React.Component {
|
|||
validate(component.form, {
|
||||
rules: {
|
||||
firstName: {
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
lastName: {
|
||||
required: true,
|
||||
required: true
|
||||
},
|
||||
emailAddress: {
|
||||
required: true,
|
||||
email: true,
|
||||
email: true
|
||||
},
|
||||
currentPassword: {
|
||||
required() {
|
||||
|
|
@ -55,20 +57,20 @@ class Profile extends React.Component {
|
|||
},
|
||||
messages: {
|
||||
firstName: {
|
||||
required: 'What\'s your first name?',
|
||||
required: this.t("¿Cuál es tu nombre?"),
|
||||
},
|
||||
lastName: {
|
||||
required: 'What\'s your last name?',
|
||||
required: this.t("¿Cuál es tu apellido?"),
|
||||
},
|
||||
emailAddress: {
|
||||
required: 'Need an email address here.',
|
||||
email: 'Is this email address correct?',
|
||||
required: this.t("Necesitamos una contraseña aquí."),
|
||||
email: this.t("¿Es correcto este correo?"),
|
||||
},
|
||||
currentPassword: {
|
||||
required: 'Need your current password if changing.',
|
||||
required: this.t("Necesito tu contraseña si la quieres cambiar."),
|
||||
},
|
||||
newPassword: {
|
||||
required: 'Need your new password if changing.',
|
||||
required: this.t("Necesito tu nueva contraseña si la quieres cambiar."),
|
||||
},
|
||||
},
|
||||
submitHandler() { component.handleSubmit(); },
|
||||
|
|
@ -97,7 +99,7 @@ class Profile extends React.Component {
|
|||
if (error) {
|
||||
Bert.alert(error.reason, 'danger');
|
||||
} else {
|
||||
Bert.alert('Profile updated!', 'success');
|
||||
Bert.alert(this.t("¡Perfíl actualizado!"), 'success');
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -127,7 +129,7 @@ class Profile extends React.Component {
|
|||
github: 'https://github.com/settings/profile',
|
||||
}[service]}
|
||||
target="_blank"
|
||||
>Edit Profile on {_.capitalize(service)}</Button>
|
||||
>{this.t("Editar perfíl en")} {_.capitalize(service)}</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>) : <div />;
|
||||
|
|
@ -138,7 +140,7 @@ class Profile extends React.Component {
|
|||
<Row>
|
||||
<Col xs={6}>
|
||||
<FormGroup>
|
||||
<ControlLabel>First Name</ControlLabel>
|
||||
<ControlLabel>{this.t("Nombre")}</ControlLabel>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
|
|
@ -150,7 +152,7 @@ class Profile extends React.Component {
|
|||
</Col>
|
||||
<Col xs={6}>
|
||||
<FormGroup>
|
||||
<ControlLabel>Last Name</ControlLabel>
|
||||
<ControlLabel>{this.t("Apellidos")}</ControlLabel>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
|
|
@ -162,7 +164,7 @@ class Profile extends React.Component {
|
|||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<ControlLabel>Email Address</ControlLabel>
|
||||
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
|
|
@ -172,7 +174,7 @@ class Profile extends React.Component {
|
|||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel>Current Password</ControlLabel>
|
||||
<ControlLabel>{this.t("Contraseña actual")}</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
name="currentPassword"
|
||||
|
|
@ -181,16 +183,16 @@ class Profile extends React.Component {
|
|||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel>New Password</ControlLabel>
|
||||
<ControlLabel>{this.t("Nueva contraseña")}</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
ref={newPassword => (this.newPassword = newPassword)}
|
||||
className="form-control"
|
||||
/>
|
||||
<InputHint>Use at least six characters.</InputHint>
|
||||
<InputHint>{this.t("Usa al menos seis caracteres.")}</InputHint>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">Save Profile</Button>
|
||||
<Button type="submit" bsStyle="success">{this.t("Guardar perfíl")}</Button>
|
||||
</div>) : <div />;
|
||||
}
|
||||
|
||||
|
|
@ -206,7 +208,7 @@ class Profile extends React.Component {
|
|||
return (<div className="Profile">
|
||||
<Row>
|
||||
<Col xs={12} sm={6} md={4}>
|
||||
<h4 className="page-header">Edit Profile</h4>
|
||||
<h4 className="page-header">{this.t("Editar perfíl")}</h4>
|
||||
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
|
||||
{this.renderProfileForm(loading, user)}
|
||||
</form>
|
||||
|
|
@ -218,14 +220,14 @@ class Profile extends React.Component {
|
|||
|
||||
Profile.propTypes = {
|
||||
loading: PropTypes.bool.isRequired,
|
||||
user: PropTypes.object.isRequired,
|
||||
user: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
export default createContainer(() => {
|
||||
export default translate([], { wait: true })(createContainer(() => {
|
||||
const subscription = Meteor.subscribe('users.editProfile');
|
||||
|
||||
return {
|
||||
loading: !subscription.ready(),
|
||||
user: Meteor.user(),
|
||||
user: Meteor.user()
|
||||
};
|
||||
}, Profile);
|
||||
}, Profile));
|
||||
|
|
|
|||
|
|
@ -7,10 +7,12 @@ import { Accounts } from 'meteor/accounts-base';
|
|||
import { Bert } from 'meteor/themeteorchef:bert';
|
||||
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
|
||||
import validate from '../../../modules/validate';
|
||||
import { translate } from 'react-i18next';
|
||||
|
||||
class RecoverPassword extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.t = props.t;
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
|
|
@ -37,12 +39,13 @@ class RecoverPassword extends React.Component {
|
|||
handleSubmit() {
|
||||
const { history } = this.props;
|
||||
const email = this.emailAddress.value;
|
||||
const t = this.props.t;
|
||||
|
||||
Accounts.forgotPassword({ email }, (error) => {
|
||||
Accounts.forgotPassword({ email, t }, (error) => {
|
||||
if (error) {
|
||||
Bert.alert(error.reason, 'danger');
|
||||
} else {
|
||||
Bert.alert(`Check ${email} for a reset link!`, 'success');
|
||||
Bert.alert(t("checkResetEmail", {email: email}), 'success');
|
||||
history.push('/login');
|
||||
}
|
||||
});
|
||||
|
|
@ -52,13 +55,13 @@ class RecoverPassword extends React.Component {
|
|||
return (<div className="RecoverPassword">
|
||||
<Row>
|
||||
<Col xs={12} sm={6} md={5} lg={4}>
|
||||
<h4 className="page-header">Recover Password</h4>
|
||||
<h4 className="page-header">{this.t("Recupera tu contraseña")}</h4>
|
||||
<Alert bsStyle="info">
|
||||
Enter your email address below to receive a link to reset your password.
|
||||
{this.t("Introduce tu correo abajo para recibir un enlace para resetear tu contraseña.")}
|
||||
</Alert>
|
||||
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
|
||||
<FormGroup>
|
||||
<ControlLabel>Email Address</ControlLabel>
|
||||
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
|
|
@ -66,9 +69,9 @@ class RecoverPassword extends React.Component {
|
|||
className="form-control"
|
||||
/>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">Recover Password</Button>
|
||||
<Button type="submit" bsStyle="success">{this.t("Recupera tu contraseña")}</Button>
|
||||
<AccountPageFooter>
|
||||
<p>Remember your password? <Link to="/login">Log In</Link>.</p>
|
||||
<p>{this.t("¿Recuerdas tu contraseña?")} <Link to="/login">{this.t("Iniciar sesión")}</Link>.</p>
|
||||
</AccountPageFooter>
|
||||
</form>
|
||||
</Col>
|
||||
|
|
@ -81,4 +84,4 @@ RecoverPassword.propTypes = {
|
|||
history: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default RecoverPassword;
|
||||
export default translate([], { wait: true })(RecoverPassword);
|
||||
|
|
|
|||
|
|
@ -10,10 +10,14 @@ import OAuthLoginButtons from '../../components/OAuthLoginButtons/OAuthLoginButt
|
|||
import InputHint from '../../components/InputHint/InputHint';
|
||||
import AccountPageFooter from '../../components/AccountPageFooter/AccountPageFooter';
|
||||
import validate from '../../../modules/validate';
|
||||
import Icon from '../../components/Icon/Icon';
|
||||
import './Signup.scss';
|
||||
import { translate } from 'react-i18next';
|
||||
|
||||
class Signup extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.t = this.props.t;
|
||||
this.handleSubmit = this.handleSubmit.bind(this);
|
||||
}
|
||||
|
||||
|
|
@ -84,14 +88,21 @@ class Signup extends React.Component {
|
|||
return (<div className="Signup">
|
||||
<Row>
|
||||
<Col xs={12} sm={6} md={5} lg={4}>
|
||||
<h4 className="page-header">Sign Up</h4>
|
||||
<h4 className="page-header">{this.t("Registrarse")}</h4>
|
||||
<Row>
|
||||
<Col xs={12}>
|
||||
<button
|
||||
className={`btn btn-block btn-raised btn-primary OAuthLoginButtonDis OAuthLoginButton-telegram`}
|
||||
type="button" onClick={() => handleLogin(service, callback)}>
|
||||
<span><Icon icon="telegram" /> Usa nuestro bot de Telegram</span>
|
||||
</button>
|
||||
</Col>
|
||||
<Col xs={12}>
|
||||
<OAuthLoginButtons
|
||||
services={['google']}
|
||||
services={['telegram', 'google']}
|
||||
emailMessage={{
|
||||
offset: 97,
|
||||
text: 'Sign Up with an Email Address',
|
||||
text: this.t('o regístrate con un correo'),
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
|
|
@ -100,7 +111,7 @@ class Signup extends React.Component {
|
|||
<Row>
|
||||
<Col xs={6}>
|
||||
<FormGroup>
|
||||
<ControlLabel>First Name</ControlLabel>
|
||||
<ControlLabel>{this.t("Nombre")}</ControlLabel>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
|
|
@ -111,7 +122,7 @@ class Signup extends React.Component {
|
|||
</Col>
|
||||
<Col xs={6}>
|
||||
<FormGroup>
|
||||
<ControlLabel>Last Name</ControlLabel>
|
||||
<ControlLabel>{this.t("Apellidos")}</ControlLabel>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
|
|
@ -122,7 +133,7 @@ class Signup extends React.Component {
|
|||
</Col>
|
||||
</Row>
|
||||
<FormGroup>
|
||||
<ControlLabel>Email Address</ControlLabel>
|
||||
<ControlLabel>{this.t("Correo electrónico")}</ControlLabel>
|
||||
<input
|
||||
type="email"
|
||||
name="emailAddress"
|
||||
|
|
@ -131,18 +142,18 @@ class Signup extends React.Component {
|
|||
/>
|
||||
</FormGroup>
|
||||
<FormGroup>
|
||||
<ControlLabel>Password</ControlLabel>
|
||||
<ControlLabel>{this.t("Contraseña")}</ControlLabel>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
ref={password => (this.password = password)}
|
||||
className="form-control"
|
||||
/>
|
||||
<InputHint>Use at least six characters.</InputHint>
|
||||
<InputHint>{this.t("Usa al menos seis caracteres.")}</InputHint>
|
||||
</FormGroup>
|
||||
<Button type="submit" bsStyle="success">Sign Up</Button>
|
||||
<Button type="submit" bsStyle="success">{this.t("Registrarse")}</Button>
|
||||
<AccountPageFooter>
|
||||
<p>Already have an account? <Link to="/login">Log In</Link>.</p>
|
||||
<p>{this.t("¿Ya tienes un cuenta?")} <Link to="/login">{this.t("Iniciar sesión")}</Link>.</p>
|
||||
</AccountPageFooter>
|
||||
</form>
|
||||
</Col>
|
||||
|
|
@ -155,4 +166,4 @@ Signup.propTypes = {
|
|||
history: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default Signup;
|
||||
export default translate([], { wait: true })(Signup)
|
||||
|
|
|
|||
3
imports/ui/pages/Signup/Signup.scss
Normal file
3
imports/ui/pages/Signup/Signup.scss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
.OAuthLoginButton-telegram {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue