i18n

src/components/EmailForm.js

@@ -62,7 +62,7 @@ class EmailForm extends React.Component {
       },
       decorator: {
         rules: [
-          { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }
+          { required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }
         ]
       },
       input: {

src/components/PasswordForm.js

@@ -21,8 +21,9 @@ class EmailForm extends React.Component {
   }
   checkPassword = (rule, value, callback) => {
     const form = this.props.form;
+    const { intl: { messages } } = this.context;
     if (value && value !== form.getFieldValue('new_password')) {
-      callback('两次密码输入不符');
+      callback(messages['Incorrect-password.2']);
     } else {
       callback();
     }
@@ -64,7 +65,7 @@ class EmailForm extends React.Component {
       },
       decorator: {
         rules: [
-          { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ },
+          { required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ },
           { validator: this.checkConfirm }
         ],
       },
@@ -85,7 +86,7 @@ class EmailForm extends React.Component {
       },
       decorator: {
         rules: [
-          { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/},
+          { required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/},
           { validator: this.checkPassword}
         ],
       },

src/components/SendEmail.js

@@ -62,7 +62,7 @@ class EmailForm extends React.Component {
       },
       decorator: {
         rules: [
-          { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }
+          { required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }
         ]
       },
       input: {

src/components/UserNameForm.js

@@ -61,7 +61,7 @@ class EmailForm extends React.Component {
       },
       decorator: {
         rules: [
-          { required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ },
+          { required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ },
         ],
       },
       input: {

src/models/auth.js

-import { login, forgot, register, reset, activate, checkUserExists } from '../services/auth'
-import { message } from 'antd'
-import { routerRedux } from 'dva/router'
-
+import { message } from 'antd';
+import { routerRedux } from 'dva/router';
+import { activate, checkUserExists, forgot, login, register, reset } from '../services/auth';
 
 
 export default {
   namespace: 'auth',
   state: {
-    input:{},
+    input: {},
     activateState: false,
     checkEmail: '',
     checkUsername: '',
@@ -19,7 +18,7 @@ export default {
     isForgotSubmit: false,
     isSpinSubmit: false,
     isActivateSubmit: false,
-    register: {}
+    register: {},
   },
   reducers: {
     change(state, action) {
@@ -105,133 +104,137 @@ export default {
     forgotSuccess(state, action) {
       return {
         ...state, ...{
-          isForgotSubmit: false
+          isForgotSubmit: false,
         }
-      }
+      };
     },
     forgotFail(state, action) {
       return {
         ...state, ...{
-          isForgotSubmit: false
+          isForgotSubmit: false,
         }
-      }
+      };
     },
     reset(state, action) {
       return {
         ...state, ...{
-          isResetSubmit: true
+          isResetSubmit: true,
         }
-      }
+      };
     },
     resetSuccess(state, action) {
       return {
         ...state, ...{
-          isResetSubmit: false
+          isResetSubmit: false,
         }
-      }
+      };
     },
     resetFail(state, action) {
       return {
         ...state, ...{
-          isResetSubmit: false
+          isResetSubmit: false,
         }
-      }
+      };
     },
   },
   effects: {
-    *activate({ payload }, { call, put }) {
+    *activate({ payload }, { call, put, select }) {
+      const { messages } = yield select(state => state.common);
       try {
-        const { data } = yield call(activate, payload)
-        if(data) {
-          message.success("激活成功")
+        const { data } = yield call(activate, payload);
+        if (data) {
+          message.success(messages['Your account has been successfully activated!'], 5);
         }
       } catch (error) {
-        message.error(error.message)
+        message.error(error.message);
       }
     },
     *checkEmail({ payload }, { call, put }) {
 
-      if(!payload.email){
-          yield put({ type: 'check', payload: { checkEmail: 'error' } })      
-          return   
+      if (!payload.email) {
+        yield put({ type: 'check', payload: { checkEmail: 'error' } });
+        return;
       }
 
       try {
-        const { data } = yield call(checkUserExists, {email: payload.email})
+        const { data } = yield call(checkUserExists, { email: payload.email });
         if (data) {
-          yield put({ type: 'check', payload: { isEmailExists: true, checkEmail: 'warning' } })
+          yield put({ type: 'check', payload: { isEmailExists: true, checkEmail: 'warning' } });
         }
       } catch (error) {
-        yield put({ type: 'check', payload: { isEmailExists: false, checkEmail: 'success' } })
+        yield put({ type: 'check', payload: { isEmailExists: false, checkEmail: 'success' } });
       }
     },
     *checkUsername({ payload }, { call, put }) {
-      if(!payload.username){
-          yield put({ type: 'check', payload: { checkUsername: 'error' } })      
-          return   
+      if (!payload.username) {
+        yield put({ type: 'check', payload: { checkUsername: 'error' } });
+        return;
       }
 
       try {
-        const { data } = yield call(checkUserExists, { username: payload.username})
+        const { data } = yield call(checkUserExists, { username: payload.username });
         if (data) {
-          yield put({ type: 'check', payload: { isUserNameExists: true, checkUsername: 'warning' } })
+          yield put({ type: 'check', payload: { isUserNameExists: true, checkUsername: 'warning' } });
         }
       } catch (error) {
-        yield put({ type: 'check', payload: { isUserNameExists: false, checkUsername: 'success' } })
+        yield put({ type: 'check', payload: { isUserNameExists: false, checkUsername: 'success' } });
       }
     },
     *login({ payload }, { call, put, select }) {
-      const { messages } = yield select(state => state.common)      
+      const { messages } = yield select(state => state.common);
       try {
-        const { data } = yield call(login, payload)
+        const { data } = yield call(login, payload);
 
         if (data) {
-          yield put({ type: 'loginSuccess', payload: { input: payload } })          
-          yield put({ type: 'user/loginSuccess', payload: { data } })
+          yield put({ type: 'loginSuccess', payload: { input: payload } });
+          yield put({ type: 'user/loginSuccess', payload: { data } });
         }
       } catch (error) {
-        yield put({ type: 'loginFail' })
-        message.error(messages[error.message])
+        yield put({ type: 'loginFail' });
+        message.error(messages[error.message]);
       }
     },
-    *forgot({ payload }, { call, put }) {
-        try {
-          const { data } = yield call(forgot, payload)
-          if(data){
-            yield put({ type: 'forgotSuccess' })
-            message.info("已发送密码重置邮件", 3)
-          }
-        } catch (error) {
-          yield put({ type: 'forgotFail' })
-          message.error(error.message)
+    *forgot({ payload }, { call, put, select }) {
+      const { messages } = yield select(state => state.common);
+      try {
+        const { data } = yield call(forgot, payload);
+        if (data) {
+          yield put({ type: 'forgotSuccess' });
+          message.info(messages['A password reset email has been sent to you.'], 5);
         }
+      } catch (error) {
+        yield put({ type: 'forgotFail' });
+        message.error(messages[error.message], 3);
+      }
     },
-    *register({ payload }, { call, put }) {
+    *register({ payload }, { call, put, select }) {
+      const { messages } = yield select(state => state.common);
       try {
-        const { data } = yield call(register, payload)
+        const { data } = yield call(register, payload);
         if (data) {
-          yield put({ type: 'registerSuccess' })
+          yield put({ type: 'registerSuccess' });
 
-          yield put({ type: 'user/loginSuccess', payload: { data } })
-          yield put({ type: 'loginSuccess', payload: { input: payload } })                    
-          message.info("注册成功, 请验证激活邮件~", 3)
-          yield put(routerRedux.replace("/verify"))
+          yield put({ type: 'user/loginSuccess', payload: { data } });
+          yield put({ type: 'loginSuccess', payload: { input: payload } });
+          message.info(messages['Your account has been created.'], 5);
+          yield put(routerRedux.replace('/verify'));
         }
       } catch (error) {
-        yield put({ type: 'registerFail' })
-        message.error(error.message, 3)
+        yield put({ type: 'registerFail' });
+        message.error(messages[error.message], 3);
       }
     },
-    *reset({ payload }, { call, put }) {
+    *reset({ payload }, { call, put, select }) {
+      const { messages } = yield select(state => state.common);
       try {
-        const { data } = yield call(reset, payload)        
+        const { data } = yield call(reset, payload);
         if (data) {
-          yield put({ type: 'resetSuccess' })
-          message.info("重置成功")
+          yield put({ type: 'resetSuccess' });
+          message.info(messages.update_success, 3);
         }
       } catch (error) {
-         yield put({ type: 'resetFail' })
-         message.error(error.message, 3)
+        yield put({ type: 'resetFail' });
+        message.error(messages[error.message], 3);
       }
     },
   },

src/models/user.js

@@ -91,56 +91,55 @@ export default {
 
       if(user && user.active) {
         yield put(routerRedux.replace("/profiles"))
-        // message.info("登录成功")        
+        // message.info("登录成功")
       } else {
-        yield put(routerRedux.replace(`/verify`))        
+        yield put(routerRedux.replace(`/verify`))
       }
-      
+
     },
     *preLogin({ payload }, { call, put }) {
       let token = localStorage.getItem("token")
 
       try {
-        let { data } =  yield call(getAuthUser, { token }) 
+        let { data } =  yield call(getAuthUser, { token })
         if (data ) {
           yield put({ type: 'preLoginSuccess', payload: { user: data, token }})
 
           if(data.active) {
-            // yield put(routerRedux.replace("/profiles")) 
-          }         
-        }       
+            // yield put(routerRedux.replace("/profiles"))
+          }
+        }
       } catch (error) {
-        message.error("自动登录失败")
+        message.error(error.message)
       }
     },
     *updateProfile({ payload }, { call, put, select }) {
       message.destroy()
       try {
-        let token = yield select(state => state.user.token)        
+        let token = yield select(state => state.user.token)
         let { messages } = yield select(state => state.common)
 
         let { data } = yield call(updateProfile, {...payload, token})
-        
+
         if (data) {
           yield put({ type: 'updateProfileSuccess', payload: { user: data, token } })
-          
-          message.info(messages["i_update_success"])          
+
+          message.info(messages["update_success"])
         }
       } catch (error) {
         yield put({ type: 'updateProfileFail' })
-        message.error(messages[error.message])
+        message.error(error.message)
       }
     },
     *updateEmail({ payload }, { call, put, select }) {
+      let { messages } = yield select(state => state.common)
       try {
-
-        let token = yield select(state => state.user.token)      
-        let { messages } = yield select(state => state.common)          
+        let token = yield select(state => state.user.token)
         let { data } = yield call(updateAccount, {...payload, token})
 
         if (data) {
           yield put({ type: 'updateAccountSuccess', payload: { user: data, token } })
-          message.info("验证邮件已发送")
+          message.info(messages['A-verification-email-has-been-sent-to-you,please-check-the-mail-to-complete.'])
         }
       } catch (error) {
         yield put({ type: 'updateAccountFail' })
@@ -149,16 +148,14 @@ export default {
     },
 
     *updateAccount({ payload }, { call, put, select }) {
+      let { messages } = yield select(state => state.common)
       try {
-        
         let token = yield select(state => state.user.token)
-        let { messages } = yield select(state => state.common)
-
         let { data } = yield call(updateAccount, {...payload, token})
 
         if (data) {
           yield put({ type: 'updateAccountSuccess', payload: { user: data, token } })
-          message.info(messages["i_update_success"])
+          message.info(messages["update_success"])
         }
       } catch (error) {
         yield put({ type: 'updateAccountFail' })

src/routes/Login.js

@@ -47,7 +47,7 @@ class Login extends React.Component {
             </FormItem>
             <FormItem>
               {getFieldDecorator('password', {
-                rules: [{ required: true, message: messages['Please input your Password!'] }],
+                rules: [{ required: true, message: messages['Please-input-your-Password!'] }],
               })(
                 <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder={messages.password} />,
               )}

src/routes/Register.js

@@ -34,7 +34,7 @@ class Register extends React.Component {
   checkPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && value !== form.getFieldValue('password')) {
-      callback(this.context.intl.messages['Incorrect password.2']);
+      callback(this.context.intl.messages['Incorrect-password.2']);
     } else {
       callback();
     }
@@ -90,7 +90,7 @@ class Register extends React.Component {
               {getFieldDecorator('email', {
                 rules: [{
                   required: true,
-                  message: messages['Please use a correct E-Mail address.'],
+                  message: messages['Please-use-a-correct-E-Mail-address.'],
                   pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/,
                 }],
               }, {})(
@@ -102,7 +102,7 @@ class Register extends React.Component {
               {getFieldDecorator('username', {
                 rules: [{
                   required: true,
-                  message: messages['You can not use this username.'],
+                  message: messages['You-can-not-use-this-username.'],
                   pattern: /^[A-Za-z0-9_\u4E00-\u9FD5\u3400-\u4DBF\u{20000}-\u{2A6DF}\u{2A700}-\u{2CEAF}\uF900–\uFAFF\u{2F800}-\u{2FA1D}\uAC00–\uD7AF\u3040-\u30FF\u31F0–\u31FF\u{1B000}–\u{1B0FF}\u3005]+$/u,
                 }],
               }, {})(
@@ -112,7 +112,7 @@ class Register extends React.Component {
 
             <FormItem hasFeedback>
               {getFieldDecorator('password', {
-                rules: [{ required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/ }],
+                rules: [{ required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/ }],
               }, {
                 validator: this.checkConfirm,
               })(
@@ -126,7 +126,7 @@ class Register extends React.Component {
             <FormItem hasFeedback>
               {getFieldDecorator('confirm', {
                 rules: [{
-                  required: true, message: messages['Password length must be between 8 and 24 characters'], pattern: /^.{8,24}$/,
+                  required: true, message: messages['Password-length-must-be-between-8-and-24-characters.'], pattern: /^.{8,24}$/,
                 }, {
                   validator: this.checkPassword,
                 }],

src/routes/Reset.js

@@ -71,7 +71,7 @@ class Reset extends React.Component {
             <FormItem>
               {getFieldDecorator('confirm', {
                 rules: [{
-                  required: true, message: messages['Incorrect password.2'],
+                  required: true, message: messages['Incorrect-password.2'],
                 }, {
                   validator: this.checkPassword,
                 }],

src/routes/Verify.js

-import React from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'dva';
+import { FormattedMessage as Format } from 'react-intl';
 import styles from './Verify.css';
 import { Form, Input, Steps, Icon, Spin, Alert, Tag } from 'antd';
 import { routerRedux } from 'dva/router'
 const FormItem = Form.Item;
-import SubmitButton from '../components/SubmitButton'
+import SubmitButton from '../components/SubmitButton';
 
 const Step = Steps.Step
 
 class Verify extends React.Component {
 
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  }
   state = {
     isChangeEmail: false
   }
@@ -37,58 +41,59 @@ class Verify extends React.Component {
     dispatch({ type: 'user/updateEmail', payload: { email, password, user_id: id } });
   };
 
-  render() {
+  render(select) {
     const { form, dispatch, user, checkEmail, isEmailExists, loading, input } = this.props
     const { getFieldDecorator } = form;
     const { id, email } = user;
+    const { intl: { messages } } = this.context
 
     const emailProps = {
       fromItem: {
-        label: "修改邮箱",
+        label: messages['reset-email'],
         hasFeedback: true,
         validateStatus: checkEmail,
-        help: isEmailExists ? 'email exists' : '',
+        help: isEmailExists ? messages.email_exists : '',
       },
       decorator: {
         initialValue: email
       },
       input: {
-        placeholder: "email"
+        placeholder: messages.email,
       }
     }
-    
+
 
     return (
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
 
         <Spin spinning={loading} delay={100}>
           <Steps size="large" current={1}>
-            <Step title="Register" icon={<Icon type="solution" />} />
-            <Step title="Verify Email" icon={<Icon type="mail" />} />
+            <Step title={messages['sign-up']} icon={<Icon type="solution" />} />
+            <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
           </Steps>
 
-          {id && input["password"]  ? 
+          {id && input["password"]  ?
           <Alert
             style={{ marginTop: '24px' }}
             message={
               <div>
-                <span style={{marginRight: '10px'}}>验证邮件已发送，请查收~</span>
-                <Tag color="blue" onClick={this.onReSend}>重发</Tag>                
+                <span style={{marginRight: '10px'}}><Format id={'Your-account-has-been-created.'} /></span>
+                <Tag color="blue" onClick={this.onReSend}><Format id={'send-email2'} /></Tag>
                 <Tag color="orange" onClick={() => this.setState({ isChangeEmail: true })}>
-                  修改邮箱
+                  <Format id={'reset-email'} />
                 </Tag>
               </div>
             }
             type="warning"
             showIcon
           />
-          : 
+          :
           <Alert
             style={{ marginTop: '24px' }}
             message={
               <div>
-                <span style={{marginRight: '10px'}}>您尚未登录，请先登录</span>
-                <Tag color="blue" onClick={ () => dispatch(routerRedux.replace("/signin"))}>登录</Tag>                
+                <span style={{marginRight: '10px'}}><Format id={'Please-sign-in'} /></span>
+                <Tag color="blue" onClick={ () => dispatch(routerRedux.replace("/signin"))}><Format id={'sign-in'} /></Tag>
               </div>
             }
             type="warning"
@@ -97,7 +102,7 @@ class Verify extends React.Component {
           }
 
           {
-            this.state.isChangeEmail && 
+            this.state.isChangeEmail &&
             <Form onSubmit={this.onSubmit} className="login-form" style={{ marginTop: '24px' }}>
               <FormItem {...emailProps.fromItem}>
                 {getFieldDecorator('email', { ...emailProps.decorator })(
@@ -112,7 +117,7 @@ class Verify extends React.Component {
               </FormItem>
             </Form>
           }
-          
+
         </Spin>
       </div>
     );
@@ -130,7 +135,7 @@ function mapStateToProps(state, props) {
   return {
     input,
     user,
-    loading,    
+    loading,
     checkEmail,
     isEmailExists,
   };