i18n

i18n.json

 {
   "en": {
-    "Apps" : "Apps"
+    "Login": "Login",
+    "Username": "Username"
   },
   "zh": {
-    "Apps" : "应用"
+    "Login": "登录",
+    "Username": "用户名"
   }
 }
\ No newline at end of file

src/components/EmailForm.js

@@ -23,7 +23,7 @@ class EmailForm extends React.Component {
         
         const { email, password } = values
 
-        dispatch({type: "user/updateAccount", payload: { email, password, user_id: id }})
+        dispatch({type: "user/updateEmail", payload: { email, password, user_id: id }})
       }
     });
   }

src/components/SendEmail.js

 import React from 'react';
-import styles from './SendEmail.css';
-
-function SendEmail() {
-  return (
-    <div className={styles.normal}>
-      Component: SendEmail
-    </div>
-  );
+import styles from './EmailForm.css';
+import {connect} from 'react-redux'
+import { Form, Input, Icon, Button } from 'antd'
+const FormItem = Form.Item;
+import SubmitButton from './SubmitButton'
+
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 15 },
 }
 
-export default SendEmail;
+
+class EmailForm extends React.Component {
+
+  onSubmit = (e) => {
+    const { form, dispatch, data: {id} } = this.props
+
+    e && e.preventDefault();
+    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 }})
+      }
+    });
+  }
+
+  render(){
+
+    const {form, dispatch, data, checkEmail, isEmailExists} = this.props
+    const {getFieldDecorator} = form
+    const {id, email} = data
+
+    const emailProps = {
+      fromItem: {
+        label: "email",
+        hasFeedback: true,
+        validateStatus: checkEmail,
+        help: isEmailExists ? 'email exists' : '',
+        ...formItemLayout
+      },
+      decorator: {
+        initialValue: email                        
+      },
+      input: {
+        placeholder: "email"
+      }
+    }
+
+    const passwordProps = {
+      fromItem: {
+        label: "passwrod",        
+        ...formItemLayout
+      },
+      decorator: {
+        rules: [
+          { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }
+        ]
+      },
+      input: {
+        placeholder: "password",
+        type: 'password'
+      }
+    }
+    
+    return (
+      <Form onSubmit={this.onSubmit}>
+        <FormItem {...emailProps.fromItem}>
+          {getFieldDecorator(`email`, {...emailProps.decorator})(
+            <Input 
+              {...emailProps.input} 
+              onBlur = {() => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue(), id} })}/>
+          )}
+        </FormItem>
+
+        <FormItem {...passwordProps.fromItem}>
+          {getFieldDecorator(`password`, {...passwordProps.decorator})(
+            <Input {...passwordProps.input} />
+          )}
+        </FormItem>
+
+        <FormItem>
+          <SubmitButton />
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+
+
+function mapStateToProps(state, props) {
+  const {
+    user: {data},
+    auth: {isEmailExists, checkEmail}
+  } = state
+  return {
+    data,
+    checkEmail,
+    isEmailExists
+  };
+}
+
+const WrapperEmailForm = Form.create()(EmailForm)
+
+export default connect(mapStateToProps)(WrapperEmailForm);
+

src/index.js

@@ -53,8 +53,10 @@ const messages = localeData[languageWithoutRegionCode] || localeData[language] |
 const App = app.start();
 ReactDOM.render(
   <IntlProvider locale={ language } messages={ messages }>
-    <App />
+    <App/>
   </IntlProvider>,
   document.getElementById('root'),
 );
 
+
+console.log(language)
\ No newline at end of file

src/models/auth.js

@@ -170,14 +170,15 @@ export default {
         }
     },
     *forgot({ payload }, { call, put }) {
-        const { data } = yield call(forgot, payload)
-
-        if(data){
-          yield put({ type: 'forgotSuccess' })
-          message.info("已发送密码重置邮件")
-        }else {
+        try {
+          const { data } = yield call(forgot, payload)
+          if(data){
+            yield put({ type: 'forgotSuccess' })
+            message.info("已发送密码重置邮件")
+          }
+        } catch (error) {
           yield put({ type: 'forgotFail' })
-          message.error("密码重置邮件发送失败")
+          message.error(error.message) 
         }
     },
     *register({ payload }, { call, put }) {

src/models/common.js

 export default {
   namespace: 'common',
-  state: {},
-  reducers: {},
+  state: {
+    language: 'zh-CN'
+  },
+  reducers: {
+    init(state, action){
+      return {
+        ...state, ...action.payload
+      }
+    }
+  },
   effects: {},
-  subscriptions: {},
+  subscriptions: {
+    setup({ dispatch, history }) {
+      const language = navigator.language || (navigator.languages && navigator.languages[0]) || navigator.userLanguage;
+      const languageWithoutRegionCode = language.toLowerCase().split(/[_-]+/)[0];
+
+      dispatch({type: "init", payload: { language: languageWithoutRegionCode }})
+    }
+  },
 };

src/models/user.js

@@ -73,47 +73,62 @@ export default {
     *preLogin({ payload }, { call, put }) {
       let user = localStorage.getItem("user")
 
-      if(!user){
-        yield put(routerRedux.replace("/login"))       
+      if (!user) {
+        yield put(routerRedux.replace("/login"))
       }
 
-      yield put({type: 'loginFromStorage', payload: { data: JSON.parse(user) }})
+      yield put({ type: 'loginFromStorage', payload: { data: JSON.parse(user) } })
     },
     *updateProfile({ payload }, { call, put }) {
 
-      let { data } = yield call(updateProfile, payload )
-      
-      if(data){
+      try {
+        let { data } = yield call(updateProfile, payload)
+        if (data) {
           yield put({ type: 'updateProfileSuccess', payload: { data } })
-          
+
           message.info("更新成功")
-        }else {
-          yield put({ type: 'updateProfileFail' })
-          message.error("更新失败")      
         }
+      } catch (error) {
+        yield put({ type: 'updateProfileFail' })
+        message.error("更新失败")
+      }
     },
+    *updateEmail({ payload }, { call, put }) {
+      try {
+
+        let { data } = yield call(updateAccount, payload)
+
+        if (data) {
+          yield put({ type: 'updateAccountSuccess', payload: { data } })
+          message.info("验证邮件已发送")
+        }
+      } catch (error) {
+        yield put({ type: 'updateAccountFail' })
+        message.error(error.message)
+      }
+    },
+
     *updateAccount({ payload }, { call, put }) {
       try {
-        
-        let { data } = yield call(updateAccount, payload )   
 
-        if(data){
+        let { data } = yield call(updateAccount, payload)
+
+        if (data) {
           yield put({ type: 'updateAccountSuccess', payload: { data } })
           message.info("更新成功")
-        }     
+        }
       } catch (error) {
-          yield put({ type: 'updateAccountFail' })
-          message.error(error.message)
+        yield put({ type: 'updateAccountFail' })
+        message.error(error.message)
       }
     },
   },
   subscriptions: {
     setup({ dispatch, history }) {
-      return history.listen(({ pathname, query}) => {
-        if(pathname == '/profiles') {
+      return history.listen(({ pathname, query }) => {
+        if (pathname == '/profiles') {
 
-          dispatch({ type: 'preLogin', payload: query})
-          
+          dispatch({ type: 'preLogin', payload: query })
         }
       })
     }

src/routes/Login.js

 import { Button, Checkbox, Form, Icon, Input, Spin } from 'antd';
+import { FormattedMessage as Format } from 'react-intl'
+import languages from '../../i18n.json'
 import { connect } from 'dva';
 import { Link } from 'dva/router';
 import React from 'react';
+import "./Login.less"
 
 const FormItem = Form.Item;
 
@@ -25,7 +28,8 @@ class Login extends React.Component {
 
   render() {
     const { getFieldDecorator } = this.props.form;
-    const { isLoginSubmit = false } = this.props;
+    const { isLoginSubmit = false, language } = this.props;
+    const lan = languages[language]
 
     return (
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }}>
@@ -35,7 +39,7 @@ class Login extends React.Component {
               {getFieldDecorator('account', {
                 rules: [{ required: true, message: 'Please input your account!' }],
               })(
-                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />,
+                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder={lan["Username"]} />,
               )}
             </FormItem>
             <FormItem>
@@ -54,7 +58,7 @@ class Login extends React.Component {
               )}
               <Link to="/forgot" className="login-form-forgot">Forgot password</Link>
               <Button type="primary" htmlType="submit" className="login-form-button">
-                Log in
+                <Format id={"Login"} /> 
               </Button>
               Or <Link to="/register">register now!</Link>
             </FormItem>
@@ -67,9 +71,11 @@ class Login extends React.Component {
 
 function mapStateToProps(state) {
   const {
+    common: { language },
     auth: { isLoginSubmit },
   } = state;
   return {
+    language,
     isLoginSubmit,
   };
 }

src/routes/Profiles.js

@@ -27,29 +27,28 @@ class Profiles extends React.Component {
 
         const { username, nickname, password } = values;
 
-
-        dispatch({ type: 'user/updateProfile', payload: { username, nickname, password, user_id: id } });
+        dispatch({type: "user/updateProfile", payload: { username, name, password, user_id: id }})
       }
     });
   };
 
   render() {
-    const { form, data, isUpdateSubmit = false } = this.props;
-    const { getFieldDecorator } = form;
-    const { nickname } = data;
+    const { dispatch, form, data, isUpdateSubmit=false, checkUsername, isUserNameExists } = this.props
+    const { getFieldDecorator } = form;    
+    const { username, name, id } = data
 
-    const nicknameProps = {
+    const nameProps = {
       fromItem: {
-        label: 'nickname',
+        label: "name",
         ...formItemLayout
       },
       decorator: {
-        initialValue: nickname,
+        initialValue: name                        
       },
       input: {
-        placeholder: 'nickname',
-      },
-    };
+        placeholder: "name",
+      }
+    }
 
     return (
       <Spin spinning={isUpdateSubmit} delay={500}>
@@ -57,9 +56,9 @@ class Profiles extends React.Component {
           <TabPane tab={<span><Icon type="setting" /> 基本信息 </span>} key="1">
             <Form onSubmit={this.onUpdateSubmit}>
 
-              <FormItem {...nicknameProps.fromItem}>
-                {getFieldDecorator('nickname', { ...nicknameProps.decorator })(
-                  <Input {...nicknameProps.input} />,
+              <FormItem {...nameProps.fromItem}>
+                {getFieldDecorator(`name`, {...nameProps.decorator})(
+                  <Input {...nameProps.input}/>
                 )}
               </FormItem>