i18n

i18n.json

@@ -68,12 +68,16 @@
     "Please input your account!":"Please input your email or username!",
     "Please input your Password!":"Please input your Password!",
 
-    "verify email":"verify email",
+    "verify-email":"verify email",
     "account-info":"Account Info",
     "reset-username":"Reset Username",
     "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": {
     "language": "english",
@@ -84,7 +88,7 @@
     "user-info": "用户信息",
     "reset-info": "修改信息",
     "avatar": "头像",
-    "nickname": "昵称[选填]",
+    "nickname": "昵称",
     "reset-account-info": "修改账户信息",
     "current_password": "原密码",
     "password-again": "再次输入密码",
@@ -144,13 +148,17 @@
     "Please input your account!":"请填写你的邮箱或用户名!",
     "Please input your Password!":"请填写你的密码!",
 
-    "verify email":"验证邮箱",
+    "verify-email":"验证邮箱",
     "account-info":"账户信息",
     "reset-username":"修改用户名",
     "reset-email":"修改邮箱",
     "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位",
+    "没毛用":"防逗号报错,上线删"
   }
 }

src/components/EmailForm.js

-import React from 'react';
+import React, { PropTypes } from 'react';
 import styles from './EmailForm.css';
 import {connect} from 'react-redux'
 import { Form, Input, Icon, Button } from 'antd'
@@ -13,6 +13,9 @@ const formItemLayout = {
 
 class EmailForm extends React.Component {
 
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  }
   onSubmit = (e) => {
     const { form, dispatch, data: {id} } = this.props
 
@@ -20,7 +23,7 @@ class EmailForm extends React.Component {
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
-        
+
         const { email, password } = values
 
         dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }})
@@ -32,47 +35,48 @@ class EmailForm extends React.Component {
 
     const {form, dispatch, data, checkEmail, isEmailExists} = this.props
     const {getFieldDecorator} = form
-    const {id, email} = data
+    const {id, email} = data;
+    const { intl: {messages} } = this.context;
 
 
     const emailProps = {
       fromItem: {
-        label: "email",
+        label: messages.email,
         hasFeedback: true,
         validateStatus: checkEmail,
         help: isEmailExists ? 'email exists' : '',
         ...formItemLayout
       },
       decorator: {
-        initialValue: email                        
+        initialValue: email
       },
       input: {
-        placeholder: "email"
+        placeholder: messages.email
       }
     }
 
     const passwordProps = {
       fromItem: {
-        label: "passwrod",        
+        label: messages.password,
         ...formItemLayout
       },
       decorator: {
         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: {
-        placeholder: "password",
+        placeholder: messages.password,
         type: 'password'
       }
     }
-    
+
     return (
       <Form onSubmit={this.onSubmit}>
         <FormItem {...emailProps.fromItem}>
           {getFieldDecorator(`email`, {...emailProps.decorator})(
-            <Input 
-              {...emailProps.input} 
+            <Input
+              {...emailProps.input}
               onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/>
           )}
         </FormItem>

src/components/PasswordForm.js

-import React from 'react';
+import React, { PropTypes } from 'react';
 import styles from './EmailForm.css';
 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;
-import SubmitButton from './SubmitButton'
+
 
 const formItemLayout = {
   labelCol: { span: 4 },
@@ -13,6 +16,9 @@ const formItemLayout = {
 
 class EmailForm extends React.Component {
 
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  }
   checkPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && value !== form.getFieldValue('new_password')) {
@@ -37,7 +43,7 @@ class EmailForm extends React.Component {
     form.validateFieldsAndScroll((err, values) => {
       if (!err) {
         console.log('Received values of form: ', values);
-        
+
         const { new_password, password } = values
 
         dispatch({type: "user/updateAccount", payload: { new_password, password, user_id: id }})
@@ -48,53 +54,58 @@ class EmailForm extends React.Component {
   render(){
 
     const {form } = this.props
-    const {getFieldDecorator} = form
+    const {getFieldDecorator} = form;
+    const { intl: { messages } } = this.context
 
     const passwordProps = {
       fromItem: {
-        label: "passwrod",        
+        label: 'old passwrod',
         ...formItemLayout
       },
       decorator: {
         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 }
         ]
       },
       input: {
-        placeholder: "password",
+        placeholder: messages['old-password'],
+        type: 'password'
+      },
+      input2: {
+        placeholder: messages['new-password'],
         type: 'password'
       }
     }
 
     const confirmProps = {
       fromItem: {
-        label: "comfirm",        
+        label: messages['password-again'],
         ...formItemLayout
       },
       decorator: {
         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}
         ]
       },
       input: {
-        placeholder: "confirm",
+        placeholder: messages['password-again'],
         type: 'password'
       }
     }
-    
+
     return (
-      <Form onSubmit={this.onSubmit}>          
-        <FormItem {...passwordProps.fromItem} label="old password">
+      <Form onSubmit={this.onSubmit}>
+        <FormItem {...passwordProps.fromItem} label={messages['old-password']}>
           {getFieldDecorator(`password`, {...passwordProps.decorator})(
             <Input {...passwordProps.input} />
           )}
         </FormItem>
 
-        <FormItem {...passwordProps.fromItem} label="new password">
+        <FormItem {...passwordProps.fromItem} label={messages['new-password']}>
           {getFieldDecorator(`new_password`, {...passwordProps.decorator})(
-            <Input {...passwordProps.input} />
+            <Input {...passwordProps.input2} />
           )}
         </FormItem>
 

src/components/SendEmail.js

-import React from 'react';
+import React, { PropTypes } from 'react';
 import styles from './EmailForm.css';
 import { connect } from 'react-redux'
 import { Form, Input, Icon, Button, Modal } from 'antd'
@@ -13,6 +13,10 @@ const formItemLayout = {
 
 class EmailForm extends React.Component {
 
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  }
+
   onSubmit = (e) => {
     const { form, dispatch, data: { id } } = this.props
 
@@ -33,10 +37,11 @@ class EmailForm extends React.Component {
     const { form, dispatch, data, checkEmail, isEmailExists, isSendEmailActive } = this.props
     const { getFieldDecorator } = form;
     const { id, email } = data;
+    const { intl: { messages } } = this.context;
 
     const emailProps = {
       fromItem: {
-        label: "email",
+        label: messages.email,
         hasFeedback: true,
         validateStatus: checkEmail,
         help: isEmailExists ? 'email exists' : '',
@@ -46,22 +51,22 @@ class EmailForm extends React.Component {
         initialValue: email
       },
       input: {
-        placeholder: "email"
+        placeholder: messages.email
       }
     }
 
     const passwordProps = {
       fromItem: {
-        label: "passwrod",
+        label: messages.passwrod,
         ...formItemLayout
       },
       decorator: {
         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: {
-        placeholder: "password",
+        placeholder: messages.password,
         type: 'password'
       }
     }

src/components/UserNameForm.js

 import { Form, Input } from 'antd';
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { connect } from 'react-redux';
 import SubmitButton from './SubmitButton';
 const FormItem = Form.Item;
@@ -12,6 +12,9 @@ const formItemLayout = {
 
 class EmailForm extends React.Component {
 
+  static contextTypes = {
+    intl: PropTypes.object.isRequired,
+  }
   onSubmit = (e) => {
     const { form, dispatch, data: { id } } = this.props;
 
@@ -32,10 +35,11 @@ class EmailForm extends React.Component {
     const { form, dispatch, data, checkUsername, isUserNameExists } = this.props;
     const { getFieldDecorator } = form;
     const { id, username } = data;
+    const { intl: {messages} } = this.context;
 
     const usernameProps = {
       fromItem: {
-        label: 'username',
+        label: messages.username,
         hasFeedback: true,
         validateStatus: checkUsername,
         help: isUserNameExists ? 'username exists' : '',
@@ -45,23 +49,23 @@ class EmailForm extends React.Component {
         initialValue: username,
       },
       input: {
-        placeholder: 'username',
+        placeholder: messages.username,
         onBlur: () => dispatch({ type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
       },
     };
 
     const passwordProps = {
       fromItem: {
-        label: 'passwrod',
+        label: messages.password,
         ...formItemLayout
       },
       decorator: {
         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: {
-        placeholder: 'password',
+        placeholder: messages.password,
         type: 'password',
       },
     };

src/config.js

 export default {
-  apiRoot: 'http://localhost:3000',
+  // apiRoot: 'http://localhost:3000',
+  apiRoot: 'http://192.168.1.9:3000',
 };

src/index.js

@@ -51,13 +51,11 @@ addLocaleData([...en, ...zh]);
 /*eslint-disable */
 let language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
 /*eslint-enable */
-const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
-
-const messages = localeData[languageWithoutRegionCode] || localeData[language] || localeData.zh;
-
 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();
 ReactDOM.render(

src/routes/Activate.js

@@ -16,7 +16,7 @@ class Active extends React.Component {
     return (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100%' }}>
         <Button type="primary" icon="poweroff" loading={loading} onClick={this.handleClick}>
-          <Format id={'verify email'} />
+          <Format id={'verify-email'} />
         </Button>
       </div>
     );

src/routes/Forgot.js

@@ -51,8 +51,8 @@ class Login extends React.Component {
           <Form onSubmit={this.onSubmitLogin} className="login-form">
 
             <Steps size="large" current={0}>
-              <Step title="Sent Email" icon={<Icon type="solution" />} />
-              <Step title="Verify Email" icon={<Icon type="mail" />} />
+              <Step title={messages['send-email']} icon={<Icon type="solution" />} />
+              <Step title={messages['verify-email']} icon={<Icon type="mail" />} />
             </Steps>
 
             <FormItem style={{ marginTop: '28px'}}>
@@ -62,13 +62,12 @@ class Login extends React.Component {
                 <Input prefix={<Icon type="user" style={{ fontSize: 13 }}/>} placeholder={messages['email-address-or-username']} />,
               )}
             </FormItem>
-
             <Button type="primary" htmlType="submit" className="login-form-button">
               <Format id={'send-email'} />
             </Button>
-            <FormItem>
-              <Link to="/signin"><Format id={'sign-in'} /></Link>                       
-            </FormItem>
+            <div>
+              <Link to="/signin"><Format id={'sign-in'} /></Link>
+            </div>
           </Form>
         </Spin>
       </div>

src/routes/Login.js

@@ -53,15 +53,15 @@ class Login extends React.Component {
               )}
             </FormItem>
             <FormItem>
-              
+
               <Button type="primary" htmlType="submit" className="login-form-button">
                 <Format id={'sign-in'} />
               </Button>
             </FormItem>
-            <Form>
+            <div>
               <Link to="/signup"><Format id={'sign-up'} /></Link>
               <Link to="/forgot" className="login-form-forgot"><Format id={'forgot-password'} /></Link>
-            </Form>
+            </div>
           </Form>
         </Spin>
       </div>

src/routes/Profiles.js

@@ -45,14 +45,14 @@ class Profiles extends React.Component {
 
     const nameProps = {
       fromItem: {
-        label: 'name',
+        label: messages['nickname'],
         ...formItemLayout
       },
       decorator: {
         initialValue: name
       },
       input: {
-        placeholder: 'name',
+        placeholder: messages['nickname'],
       }
     }
 

src/routes/Register.js

@@ -78,15 +78,15 @@ class Register extends React.Component {
 
     return (
       <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%' }}>
-        
+
         <Spin spinning={loading} delay={100}>
           <Steps size="large" current={0}>
-            <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>
 
           <Form onSubmit={this.onSubmitLogin} className="login-form" style={{ marginTop: '24px'}}>
-            <FormItem {...emailProps}  >
+            <FormItem  {...emailProps} >
               {getFieldDecorator('email', {
                 rules: [{
                   required: true,
@@ -118,7 +118,7 @@ class Register extends React.Component {
 
             <FormItem hasFeedback>
               {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,
               })(
@@ -132,7 +132,7 @@ class Register extends React.Component {
             <FormItem hasFeedback>
               {getFieldDecorator('confirm', {
                 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,
                 }],
@@ -148,9 +148,9 @@ class Register extends React.Component {
             <Button type="primary" htmlType="submit" className="login-form-button">
               <Format id={'sign-up'} />
             </Button>
-            <FormItem>
+            <div>
               <Link to="/signin"><Format id={'sign-in'} /></Link>
-            </FormItem>
+            </div>
           </Form>
         </Spin>
       </div>