Commit 871ea484 authored by 2breakegg's avatar 2breakegg

i18n

parent 35196841
This diff is collapsed.
...@@ -68,12 +68,16 @@ ...@@ -68,12 +68,16 @@
"Please input your account!":"Please input your email or username!", "Please input your account!":"Please input your email or username!",
"Please input your Password!":"Please input your Password!", "Please input your Password!":"Please input your Password!",
"verify email":"verify email", "verify-email":"verify email",
"account-info":"Account Info", "account-info":"Account Info",
"reset-username":"Reset Username", "reset-username":"Reset Username",
"reset-email":"Reset Email", "reset-email":"Reset Email",
"reset-password":"Reset Password" "reset-password":"Reset Password",
"old-password":"old password",
"new-password":"new password",
"Password length must be between 8 and 24 characters":"Password length must be between 8 and 24 characters",
"没毛用":"防逗号报错,上线删"
}, },
"zh": { "zh": {
"language": "english", "language": "english",
...@@ -84,7 +88,7 @@ ...@@ -84,7 +88,7 @@
"user-info": "用户信息", "user-info": "用户信息",
"reset-info": "修改信息", "reset-info": "修改信息",
"avatar": "头像", "avatar": "头像",
"nickname": "昵称[选填]", "nickname": "昵称",
"reset-account-info": "修改账户信息", "reset-account-info": "修改账户信息",
"current_password": "原密码", "current_password": "原密码",
"password-again": "再次输入密码", "password-again": "再次输入密码",
...@@ -144,13 +148,17 @@ ...@@ -144,13 +148,17 @@
"Please input your account!":"请填写你的邮箱或用户名!", "Please input your account!":"请填写你的邮箱或用户名!",
"Please input your Password!":"请填写你的密码!", "Please input your Password!":"请填写你的密码!",
"verify email":"验证邮箱", "verify-email":"验证邮箱",
"account-info":"账户信息", "account-info":"账户信息",
"reset-username":"修改用户名", "reset-username":"修改用户名",
"reset-email":"修改邮箱", "reset-email":"修改邮箱",
"reset-password":"修改密码", "reset-password":"修改密码",
"old-password":"原密码",
"new-password":"新密码",
"Password length must be between 8 and 24 characters":"密码必须为8-24位",
"密码至少为8-24位":"密码至少为8-24位" "密码至少为8-24位":"密码至少为8-24位",
"没毛用":"防逗号报错,上线删"
} }
} }
import React from 'react'; import React, { PropTypes } from 'react';
import styles from './EmailForm.css'; import styles from './EmailForm.css';
import {connect} from 'react-redux' import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd' import { Form, Input, Icon, Button } from 'antd'
...@@ -13,6 +13,9 @@ const formItemLayout = { ...@@ -13,6 +13,9 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, data: {id} } = this.props const { form, dispatch, data: {id} } = this.props
...@@ -20,7 +23,7 @@ class EmailForm extends React.Component { ...@@ -20,7 +23,7 @@ class EmailForm extends React.Component {
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { email, password } = values const { email, password } = values
dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }}) dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }})
...@@ -32,47 +35,48 @@ class EmailForm extends React.Component { ...@@ -32,47 +35,48 @@ class EmailForm extends React.Component {
const {form, dispatch, data, checkEmail, isEmailExists} = this.props const {form, dispatch, data, checkEmail, isEmailExists} = this.props
const {getFieldDecorator} = form const {getFieldDecorator} = form
const {id, email} = data const {id, email} = data;
const { intl: {messages} } = this.context;
const emailProps = { const emailProps = {
fromItem: { fromItem: {
label: "email", label: messages.email,
hasFeedback: true, hasFeedback: true,
validateStatus: checkEmail, validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '', help: isEmailExists ? 'email exists' : '',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
initialValue: email initialValue: email
}, },
input: { input: {
placeholder: "email" placeholder: messages.email
} }
} }
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: messages.password,
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ } { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }
] ]
}, },
input: { input: {
placeholder: "password", placeholder: messages.password,
type: 'password' type: 'password'
} }
} }
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<FormItem {...emailProps.fromItem}> <FormItem {...emailProps.fromItem}>
{getFieldDecorator(`email`, {...emailProps.decorator})( {getFieldDecorator(`email`, {...emailProps.decorator})(
<Input <Input
{...emailProps.input} {...emailProps.input}
onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/> onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/>
)} )}
</FormItem> </FormItem>
......
import React from 'react'; import React, { PropTypes } from 'react';
import styles from './EmailForm.css'; import styles from './EmailForm.css';
import {connect} from 'react-redux' import {connect} from 'react-redux'
import { Form, Input, Icon, Button } from 'antd' import { Form, Input, Icon, Button } from 'antd';
import SubmitButton from './SubmitButton';
const FormItem = Form.Item; const FormItem = Form.Item;
import SubmitButton from './SubmitButton'
const formItemLayout = { const formItemLayout = {
labelCol: { span: 4 }, labelCol: { span: 4 },
...@@ -13,6 +16,9 @@ const formItemLayout = { ...@@ -13,6 +16,9 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
checkPassword = (rule, value, callback) => { checkPassword = (rule, value, callback) => {
const form = this.props.form; const form = this.props.form;
if (value && value !== form.getFieldValue('new_password')) { if (value && value !== form.getFieldValue('new_password')) {
...@@ -37,7 +43,7 @@ class EmailForm extends React.Component { ...@@ -37,7 +43,7 @@ class EmailForm extends React.Component {
form.validateFieldsAndScroll((err, values) => { form.validateFieldsAndScroll((err, values) => {
if (!err) { if (!err) {
console.log('Received values of form: ', values); console.log('Received values of form: ', values);
const { new_password, password } = values const { new_password, password } = values
dispatch({type: "user/updateAccount", payload: { new_password, password, user_id: id }}) dispatch({type: "user/updateAccount", payload: { new_password, password, user_id: id }})
...@@ -48,53 +54,58 @@ class EmailForm extends React.Component { ...@@ -48,53 +54,58 @@ class EmailForm extends React.Component {
render(){ render(){
const {form } = this.props const {form } = this.props
const {getFieldDecorator} = form const {getFieldDecorator} = form;
const { intl: { messages } } = this.context
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: 'old passwrod',
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }, { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ },
{ validator: this.checkConfirm } { validator: this.checkConfirm }
] ]
}, },
input: { input: {
placeholder: "password", placeholder: messages['old-password'],
type: 'password'
},
input2: {
placeholder: messages['new-password'],
type: 'password' type: 'password'
} }
} }
const confirmProps = { const confirmProps = {
fromItem: { fromItem: {
label: "comfirm", label: messages['password-again'],
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/}, { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/},
{ validator: this.checkPassword} { validator: this.checkPassword}
] ]
}, },
input: { input: {
placeholder: "confirm", placeholder: messages['password-again'],
type: 'password' type: 'password'
} }
} }
return ( return (
<Form onSubmit={this.onSubmit}> <Form onSubmit={this.onSubmit}>
<FormItem {...passwordProps.fromItem} label="old password"> <FormItem {...passwordProps.fromItem} label={messages['old-password']}>
{getFieldDecorator(`password`, {...passwordProps.decorator})( {getFieldDecorator(`password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} /> <Input {...passwordProps.input} />
)} )}
</FormItem> </FormItem>
<FormItem {...passwordProps.fromItem} label="new password"> <FormItem {...passwordProps.fromItem} label={messages['new-password']}>
{getFieldDecorator(`new_password`, {...passwordProps.decorator})( {getFieldDecorator(`new_password`, {...passwordProps.decorator})(
<Input {...passwordProps.input} /> <Input {...passwordProps.input2} />
)} )}
</FormItem> </FormItem>
......
import React from 'react'; import React, { PropTypes } from 'react';
import styles from './EmailForm.css'; import styles from './EmailForm.css';
import { connect } from 'react-redux' import { connect } from 'react-redux'
import { Form, Input, Icon, Button, Modal } from 'antd' import { Form, Input, Icon, Button, Modal } from 'antd'
...@@ -13,6 +13,10 @@ const formItemLayout = { ...@@ -13,6 +13,10 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, data: { id } } = this.props const { form, dispatch, data: { id } } = this.props
...@@ -33,10 +37,11 @@ class EmailForm extends React.Component { ...@@ -33,10 +37,11 @@ class EmailForm extends React.Component {
const { form, dispatch, data, checkEmail, isEmailExists, isSendEmailActive } = this.props const { form, dispatch, data, checkEmail, isEmailExists, isSendEmailActive } = this.props
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, email } = data; const { id, email } = data;
const { intl: { messages } } = this.context;
const emailProps = { const emailProps = {
fromItem: { fromItem: {
label: "email", label: messages.email,
hasFeedback: true, hasFeedback: true,
validateStatus: checkEmail, validateStatus: checkEmail,
help: isEmailExists ? 'email exists' : '', help: isEmailExists ? 'email exists' : '',
...@@ -46,22 +51,22 @@ class EmailForm extends React.Component { ...@@ -46,22 +51,22 @@ class EmailForm extends React.Component {
initialValue: email initialValue: email
}, },
input: { input: {
placeholder: "email" placeholder: messages.email
} }
} }
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: "passwrod", label: messages.passwrod,
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ } { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }
] ]
}, },
input: { input: {
placeholder: "password", placeholder: messages.password,
type: 'password' type: 'password'
} }
} }
......
import { Form, Input } from 'antd'; import { Form, Input } from 'antd';
import React from 'react'; import React, { PropTypes } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import SubmitButton from './SubmitButton'; import SubmitButton from './SubmitButton';
const FormItem = Form.Item; const FormItem = Form.Item;
...@@ -12,6 +12,9 @@ const formItemLayout = { ...@@ -12,6 +12,9 @@ const formItemLayout = {
class EmailForm extends React.Component { class EmailForm extends React.Component {
static contextTypes = {
intl: PropTypes.object.isRequired,
}
onSubmit = (e) => { onSubmit = (e) => {
const { form, dispatch, data: { id } } = this.props; const { form, dispatch, data: { id } } = this.props;
...@@ -32,10 +35,11 @@ class EmailForm extends React.Component { ...@@ -32,10 +35,11 @@ class EmailForm extends React.Component {
const { form, dispatch, data, checkUsername, isUserNameExists } = this.props; const { form, dispatch, data, checkUsername, isUserNameExists } = this.props;
const { getFieldDecorator } = form; const { getFieldDecorator } = form;
const { id, username } = data; const { id, username } = data;
const { intl: {messages} } = this.context;
const usernameProps = { const usernameProps = {
fromItem: { fromItem: {
label: 'username', label: messages.username,
hasFeedback: true, hasFeedback: true,
validateStatus: checkUsername, validateStatus: checkUsername,
help: isUserNameExists ? 'username exists' : '', help: isUserNameExists ? 'username exists' : '',
...@@ -45,23 +49,23 @@ class EmailForm extends React.Component { ...@@ -45,23 +49,23 @@ class EmailForm extends React.Component {
initialValue: username, initialValue: username,
}, },
input: { input: {
placeholder: 'username', placeholder: messages.username,
onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }), onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
}, },
}; };
const passwordProps = { const passwordProps = {
fromItem: { fromItem: {
label: 'passwrod', label: messages.password,
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
rules: [ rules: [
{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }, { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ },
], ],
}, },
input: { input: {
placeholder: 'password', placeholder: messages.password,
type: 'password', type: 'password',
}, },
}; };
......
export default { export default {
apiRoot: 'http://localhost:3000', // apiRoot: 'http://localhost:3000',
apiRoot: 'http://192.168.1.9:3000',
}; };
...@@ -51,13 +51,11 @@ addLocaleData([...en, ...zh]); ...@@ -51,13 +51,11 @@ addLocaleData([...en, ...zh]);
/*eslint-disable */ /*eslint-disable */
let language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage; let language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
/*eslint-enable */ /*eslint-enable */
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
if(localStorage.getItem('locale')){ if(localStorage.getItem('locale')){
language = JSON.parse(localStorage.getItem('locale')) language = localStorage.getItem('locale');
} }
const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
const App = app.start(); const App = app.start();
ReactDOM.render( ReactDOM.render(
......
...@@ -16,7 +16,7 @@ class Active extends React.Component { ...@@ -16,7 +16,7 @@ class Active extends React.Component {
return ( return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100%' }}> <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100%' }}>
<Button type="primary" icon="poweroff" loading={loading} onClick={this.handleClick}> <Button type="primary" icon="poweroff" loading={loading} onClick={this.handleClick}>
<Format id={'verify email'} /> <Format id={'verify-email'} />
</Button> </Button>
</div> </div>
); );
......
...@@ -51,8 +51,8 @@ class Login extends React.Component { ...@@ -51,8 +51,8 @@ class Login extends React.Component {
<Form onSubmit={this.onSubmitLogin} className="login-form"> <Form onSubmit={this.onSubmitLogin} className="login-form">
<Steps size="large" current={0}> <Steps size="large" current={0}>
<Step title="Sent Email" icon={<Icon type="solution" />} /> <Step title={messages['send-email']} icon={<Icon type="solution" />} />
<Step title="Verify Email" icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps> </Steps>
<FormItem style={{ marginTop: '28px'}}> <FormItem style={{ marginTop: '28px'}}>
...@@ -62,13 +62,12 @@ class Login extends React.Component { ...@@ -62,13 +62,12 @@ class Login extends React.Component {
<Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']} />, <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']} />,
)} )}
</FormItem> </FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'send-email'} /> <Format id={'send-email'} />
</Button> </Button>
<FormItem> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'} /></Link>
</FormItem> </div>
</Form> </Form>
</Spin> </Spin>
</div> </div>
......
...@@ -53,15 +53,15 @@ class Login extends React.Component { ...@@ -53,15 +53,15 @@ class Login extends React.Component {
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-in'} /> <Format id={'sign-in'} />
</Button> </Button>
</FormItem> </FormItem>
<Form> <div>
<Link to="/signup"><Format id={'sign-up'} /></Link> <Link to="/signup"><Format id={'sign-up'} /></Link>
<Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link> <Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link>
</Form> </div>
</Form> </Form>
</Spin> </Spin>
</div> </div>
......
...@@ -45,14 +45,14 @@ class Profiles extends React.Component { ...@@ -45,14 +45,14 @@ class Profiles extends React.Component {
const nameProps = { const nameProps = {
fromItem: { fromItem: {
label: 'name', label: messages['nickname'],
...formItemLayout ...formItemLayout
}, },
decorator: { decorator: {
initialValue: name initialValue: name
}, },
input: { input: {
placeholder: 'name', placeholder: messages['nickname'],
} }
} }
......
...@@ -78,15 +78,15 @@ class Register extends React.Component { ...@@ -78,15 +78,15 @@ class Register extends React.Component {
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}> <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
<Spin spinning={loading} delay={100}> <Spin spinning={loading} delay={100}>
<Steps size="large" current={0}> <Steps size="large" current={0}>
<Step title="register" icon={<Icon type="solution" />} /> <Step title={messages['sign-up']} icon={<Icon type="solution" />} />
<Step title="verify Email" icon={<Icon type="mail" />} /> <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
</Steps> </Steps>
<Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px'}}> <Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px'}}>
<FormItem {...emailProps} > <FormItem {...emailProps} >
{getFieldDecorator('email', { {getFieldDecorator('email', {
rules: [{ rules: [{
required: true, required: true,
...@@ -118,7 +118,7 @@ class Register extends React.Component { ...@@ -118,7 +118,7 @@ class Register extends React.Component {
<FormItem hasFeedback> <FormItem hasFeedback>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }], rules: [{ required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }],
}, { }, {
validator: this.checkConfirm, validator: this.checkConfirm,
})( })(
...@@ -132,7 +132,7 @@ class Register extends React.Component { ...@@ -132,7 +132,7 @@ class Register extends React.Component {
<FormItem hasFeedback> <FormItem hasFeedback>
{getFieldDecorator('confirm', { {getFieldDecorator('confirm', {
rules: [{ rules: [{
required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/, required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/,
}, { }, {
validator: this.checkPassword, validator: this.checkPassword,
}], }],
...@@ -148,9 +148,9 @@ class Register extends React.Component { ...@@ -148,9 +148,9 @@ class Register extends React.Component {
<Button type="primary" htmlType="submit" className="login-form-button"> <Button type="primary" htmlType="submit" className="login-form-button">
<Format id={'sign-up'} /> <Format id={'sign-up'} />
</Button> </Button>
<FormItem> <div>
<Link to="/signin"><Format id={'sign-in'} /></Link> <Link to="/signin"><Format id={'sign-in'} /></Link>
</FormItem> </div>
</Form> </Form>
</Spin> </Spin>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment