update

src/components/EmailForm.js

+import React from 'react';
+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 },
+}
+
+
+class EmailForm extends React.Component {
+
+  onUpdateEmail = (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.onUpdateEmail}>
+        <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/components/PasswordForm.js

+import React from 'react';
+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 },
+}
+
+
+class EmailForm extends React.Component {
+
+  checkPassword = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value && value !== form.getFieldValue('new_password')) {
+      callback('两次密码输入不符');
+    } else {
+      callback();
+    }
+  }
+
+  checkConfirm = (rule, value, callback) => {
+    const form = this.props.form;
+    if (value) {
+      form.validateFields(['confirm'], { force: true });
+    }
+    callback();
+  }
+
+  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 } = this.props
+    const {getFieldDecorator} = form
+
+    const passwordProps = {
+      fromItem: {
+        label: "passwrod",        
+        ...formItemLayout
+      },
+      decorator: {
+        rules: [
+          { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ },
+          { validator: this.checkConfirm }
+        ]
+      },
+      input: {
+        placeholder: "password",
+        type: 'password'
+      }
+    }
+
+    const confirmProps = {
+      fromItem: {
+        label: "comfirm",        
+        ...formItemLayout
+      },
+      decorator: {
+        rules: [
+          { required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/}, 
+          { validator: this.checkPassword}
+        ]
+      },
+      input: {
+        placeholder: "confirm",
+        type: 'password'
+      }
+    }
+    
+    return (
+      <Form onSubmit={this.onSubmit}>          
+        <FormItem {...passwordProps.fromItem} label="old password">
+          {getFieldDecorator(`old_password`, {...passwordProps.decorator})(
+            <Input {...passwordProps.input} />
+          )}
+        </FormItem>
+
+        <FormItem {...passwordProps.fromItem} label="new password">
+          {getFieldDecorator(`new_password`, {...passwordProps.decorator})(
+            <Input {...passwordProps.input} />
+          )}
+        </FormItem>
+
+        <FormItem {...confirmProps.fromItem}>
+          {getFieldDecorator(`confirm`, {...confirmProps.decorator})(
+            <Input {...confirmProps.input} />
+          )}
+        </FormItem>
+
+        <FormItem>
+          <SubmitButton />
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+
+
+
+function mapStateToProps(state, props) {
+  const {
+    user: {data}
+  } = state
+  return {
+    data,
+  };
+}
+
+const WrapperEmailForm = Form.create()(EmailForm)
+
+export default connect(mapStateToProps)(WrapperEmailForm);
+

src/components/SubmitButton.css

+.wrapSubmit{
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file

src/components/SubmitButton.js

+import React from 'react';
+import styles from './SubmitButton.css';
+import {Button} from 'antd'
+
+function SubmitButton() {
+  return (
+      <div className={styles.wrapSubmit}>
+        <Button type="primary" htmlType="submit" size="large">提交</Button>                  
+      </div>
+  );
+}
+
+export default SubmitButton;

src/components/UserNameForm.css

+
+.normal {
+}

src/components/UserNameForm.js

+import React from 'react';
+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 },
+}
+
+
+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 { username, password } = values
+
+        dispatch({type: "user/updateAccount", payload: { username, password, user_id: id }})
+      }
+    });
+  }
+
+  render(){
+
+    const {form, dispatch, data, checkUsername, isUserNameExists} = this.props
+    const {getFieldDecorator} = form
+    const {id, username} = data
+
+    const usernameProps = {
+      fromItem: {
+        label: "username",
+        hasFeedback: true,
+        validateStatus: checkUsername,
+        help: isUserNameExists ? 'username exists' : '',
+        ...formItemLayout
+      },
+      decorator: {
+        initialValue: username                        
+      },
+      input: {
+        placeholder: "username",
+        onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue(), user_id: id } }),
+      }
+    }
+
+    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 {...usernameProps.fromItem}>
+          {getFieldDecorator(`username`, {...usernameProps.decorator})(
+            <Input {...usernameProps.input}/>
+          )}
+        </FormItem>
+
+        <FormItem {...passwordProps.fromItem}>
+          {getFieldDecorator(`password`, {...passwordProps.decorator})(
+            <Input {...passwordProps.input} />
+          )}
+        </FormItem>
+
+        <FormItem>
+          <SubmitButton />
+        </FormItem>
+      </Form>
+    );
+  }
+}
+
+
+
+function mapStateToProps(state, props) {
+  const {
+    user: {data},
+    auth: {isUserNameExists, checkUsername}
+  } = state
+  return {
+    data,
+    checkUsername,
+    isUserNameExists
+  };
+}
+
+const WrapperEmailForm = Form.create()(EmailForm)
+
+export default connect(mapStateToProps)(WrapperEmailForm);
+

src/config.js

 export default {
-  apiRoot: 'http://localhost:8081',
+  apiRoot: 'http://localhost:3000',
 }
\ No newline at end of file

src/models/auth.js

-import { login, forgot, register, reset } from '../services/auth'
+import { login, forgot, register, reset, activate, checkUserExists } from '../services/auth'
 import { message } from 'antd'
 
 
 export default {
   namespace: 'auth',
   state: {
-    isSubmit: false,
-    register:{}
+    activateState: false,
+    checkEmail: '',
+    checkUsername: '',
+    isEmailExists: false,
+    isUserNameExists: false,
+    isRegisterSubmit: false,
+    isLoginSubmit: false,
+    isForgotSubmit: false,
+    isSpinSubmit: false,
+    register: {}
   },
   reducers: {
     change(state, action) {
       return {
         ...state, ...action.payload
       }
-    }
+    },
+    checkEmail(state, action) {
+      return {
+        ...state, ...{
+          checkEmail: 'validating'
+        }
+      }
+    },
+    checkUsername(state, action) {
+      return {
+        ...state, ...{
+          checkUsername: 'validating'
+        }
+      }
+    },
+    activate(state, action) {
+      return {
+        ...state, ...{
+          activateState: true
+        }
+      }
+    },
+    check(state, action) {
+      return {
+        ...state, ...action.payload
+      }
+    },
+    register(state, action) {
+      return {
+        ...state, ...{
+          isRegisterSubmit: true
+        }
+      }
+    },
+    registerSuccess(state, action) {
+      return {
+        ...state, ...{
+          isRegisterSubmit: false
+        }
+      }
+    },
+    registerFail(state, action) {
+      return {
+        ...state, ...{
+          isRegisterSubmit: false
+        }
+      }
+    },
+    login(state, action) {
+      return {
+        ...state, ...{
+          isLoginSubmit: true
+        }
+      }
+    },
+    loginSuccess(state, action) {
+      return {
+        ...state, ...{
+          isLoginSubmit: false
+        }
+      }
+    },
+    loginFail(state, action) {
+      return {
+        ...state, ...{
+          isLoginSubmit: false
+        }
+      }
+    },
+    forgot(state, action) {
+      return {
+        ...state, ...{
+          isForgotSubmit: true
+        }
+      }
+    },
+    forgotSuccess(state, action) {
+      return {
+        ...state, ...{
+          isForgotSubmit: false
+        }
+      }
+    },
+    forgotFail(state, action) {
+      return {
+        ...state, ...{
+          isForgotSubmit: false
+        }
+      }
+    },
+    reset(state, action) {
+      return {
+        ...state, ...{
+          isResetSubmit: true
+        }
+      }
+    },
+    resetSuccess(state, action) {
+      return {
+        ...state, ...{
+          isResetSubmit: false
+        }
+      }
+    },
+    resetFail(state, action) {
+      return {
+        ...state, ...{
+          isResetSubmit: false
+        }
+      }
+    },
   },
   effects: {
+    *activate({ payload }, { call, put }) {
+      const { data } = yield call(activate, payload)
+    },
+    *checkEmail({ payload }, { call, put }) {
+      const { data } = yield call(checkUserExists, payload)
+
+      if(data) {
+        yield put({ type: 'check', payload: { isEmailExists: true , checkEmail: 'warning'}})
+      } else {
+        yield put({ type: 'check', payload: { isEmailExists: false , checkEmail: 'success'}})
+      }
+    },
+    *checkUsername({ payload }, { call, put }) {
+      const { data } = yield call(checkUserExists, payload)
+
+      if(data) {
+        yield put({ type: 'check', payload: { isUserNameExists: true , checkUsername: 'warning'}})
+      } else {
+        yield put({ type: 'check', payload: { isUserNameExists: false , checkUsername: 'success'}})
+      }
+    },
     *login({ payload }, { call, put }) {
         const {data} = yield call(login, payload)
         
         if(data){
-          yield put({ type: 'loginSuccess'})   
-          message.info(data["message"])
+          yield put({ type: 'loginSuccess' })   
+          yield put({ type: 'user/loginSuccess', payload: { data } })
+          message.info("登录成功")
         } else {
-          yield put({ type: 'loginFail'})   
+          yield put({ type: 'loginFail' })
           message.error("登陆失败")
         }
     },
     *forgot({ payload }, { call, put }) {
         const { data } = yield call(forgot, payload)
       
-        if(data)
-        {
-          yield put({ type: 'forgotSuccess'})
-          message.info(data["message"])
+        if(data){
+          yield put({ type: 'forgotSuccess' })
+          message.info("已发送密码重置邮件")
         }else {
           yield put({ type: 'forgotFail' })
-          message.error("邮件发送失败")      
+          message.error("密码重置邮件发送失败")      
         }
     },
     *register({ payload }, { call, put }) {
-        const { data } = yield call(register, payload)
+        const {data} = yield call(register, payload)
 
         if(data) {
-          yield put({ type: 'change', payload: { register: data}})
+          yield put({ type: 'registerSuccess'})
+          message.info("注册成功")
+        } else {
+          yield put({ type: 'registerFail' })
+          message.error("注册失败")
         }
-        // if(data){
-        //   yield put({ type: 'registerSuccess' })
-        //   message.info(data["message"])   
-        // }
     },
     *reset({ payload }, { call, put }) {
         const { data } = yield call(reset, payload)
       
-        if(data)
-        {
+        if(data){
           yield put({ type: 'resetSuccess' })
-          message.info(data["message"])
+          message.info("重置成功")
         }else{
           yield put({ type: 'resetFail' })
           message.error("重置失败")          

src/models/user.js

+import { routerRedux } from 'dva/router'
+import { updateProfile, updateAccount } from '../services/user'
+import { message } from 'antd'
+
 
 export default {
   namespace: 'user',
   state: {
-    
+    data: {},
+    isUpdateSubmit: false
+  },
+  reducers: {
+    loginFromStorage(state, action) {
+      return {
+        ...state, ...action.payload
+      }
+    },
+    loginSuccess(state, action) {
+      return {
+        ...state, ...action.payload
+      }
+    },
+    updateProfile(state, action) {
+      return {
+        ...state, ...{
+          isUpdateSubmit: true
+        }
+      }
+    },
+    updateProfileSuccess(state, action) {
+      return {
+        ...state, ...action.payload, ...{
+          isUpdateSubmit: false
+        }
+      }
+    },
+    updateProfileFail(state, action) {
+      return {
+        ...state, ...{
+          isUpdateSubmit: false
+        }
+      }
+    },
+    updateAccount(state, action) {
+      return {
+        ...state, ...{
+          isUpdateSubmit: true
+        }
+      }
+    },
+    updateAccountSuccess(state, action) {
+      return {
+        ...state, ...action.payload, ...{
+          isUpdateSubmit: false
+        }
+      }
+    },
+    updateAccountFail(state, action) {
+      return {
+        ...state, ...{
+          isUpdateSubmit: false
+        }
+      }
+    },
   },
-  reducers: {},
   effects: {
+    *loginSuccess({ payload }, { call, put }) {
+
+      localStorage.setItem("user", JSON.stringify(payload.data))
+
+      yield put(routerRedux.replace("/profiles"))
+    },
+    *preLogin({ payload }, { call, put }) {
+      let user = localStorage.getItem("user")
+
+      if(!user){
+        yield put(routerRedux.replace("/login"))       
+      }
+
+      yield put({type: 'loginFromStorage', payload: { data: JSON.parse(user) }})
+    },
+    *updateProfile({ payload }, { call, put }) {
+
+      let { data } = yield call(updateProfile, payload )
+      
+      if(data){
+          yield put({ type: 'updateProfileSuccess', payload: { data } })
+          
+          message.info("更新成功")
+        }else {
+          yield put({ type: 'updateProfileFail' })
+          message.error("更新失败")      
+        }
+    },
+    *updateAccount({ payload }, { call, put }) {
+
+      let { data } = yield call(updateAccount, payload )
+      
+      if(data){
+          yield put({ type: 'updateAccountSuccess', payload: { data } })
+          message.info("更新成功")
+        }else {
+          yield put({ type: 'updateAccountFail' })
+          message.error("更新失败")      
+        }
+    },
+  },
+  subscriptions: {
+    setup({ dispatch, history }) {
+      return history.listen(({ pathname, query}) => {
+        if(pathname == '/profiles') {
+
+          dispatch({ type: 'preLogin', payload: query})
+          
+        }
+      })
+    }
   },
-  subscriptions: {},
 };

src/router.js

@@ -12,6 +12,8 @@ import Reset from "./routes/Reset.js";
 
 import Profiles from "./routes/Profiles.js";
 
+import Active from "./routes/Activate.js";
+
 function RouterConfig({ history }) {
   return (
     <Router history={history}>
@@ -23,6 +25,7 @@ function RouterConfig({ history }) {
         <Route path="/reset" component={Reset} />
         <Route path="/profiles" component={Profiles} />
       </Route>
+      <Route path="/activate" component={Active} />
     </Router>
   );
 }

src/routes/Activate.css

+
+.normal {
+}

src/routes/Activate.js

+import React from 'react';
+import { connect } from 'dva';
+import styles from './Activate.css';
+import { Button } from 'antd';
+
+class Active extends React.Component {
+  
+  handleClick = () => {
+    const { dispatch, location: { query: { key } } } = this.props
+
+    dispatch({ type: 'auth/active', payload: { key }})
+  }
+
+  render() {
+    const { activateState } = this.props
+    return (
+      <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', minHeight: '100%'}}>
+        <Button type="primary" icon="poweroff" loading={activateState} onClick={this.handleClick}>
+          激活
+        </Button>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  const {
+    auth: { activateState }
+  } = state
+  return {
+    activateState
+  };
+}
+
+export default connect(mapStateToProps)(Active);

src/routes/Forgot.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router'
 import styles from './Login.less';
-import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -30,22 +30,24 @@ class Login extends React.Component {
         
         const {email} = values
 
-
-        dispatch({type: "auth/forgot", payload: {emailOrUsername: email}})
+        dispatch({type: "auth/forgot", payload: {account: email}})
       }
     });
   }
 
   render() {
     const { getFieldDecorator, dispatch } = this.props.form;
+    const {isForgotSubmit=false} = this.props
+
     return (
       <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
+        <Spin spinning={isForgotSubmit} delay={500}>
         <Form onSubmit={this.onSubmitLogin} className="login-form">
           <FormItem>
             {getFieldDecorator('email', {
-              rules: [{ required: true, message: 'Please input your email!' }],
+              rules: [{ required: true, message: 'Please input your username or email!' }],
             })(
-              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="email" />
+              <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="username or email" />
             )}
           </FormItem>
         
@@ -54,13 +56,19 @@ class Login extends React.Component {
           </Button>
           Or <Link to="/login">Sign In</Link>
         </Form>
+        </Spin>
       </div>
     )
   }
 }
 
-function mapStateToProps() {
-  return {};
+function mapStateToProps(state) {
+  const {
+    auth: {isForgotSubmit}
+  } = state
+  return {
+    isForgotSubmit
+  };
 }
 
 const WrapperLogin = Form.create()(Login)

src/routes/Login.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router'
 import styles from './Login.less';
-import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -28,22 +28,25 @@ class Login extends React.Component {
       if (!err) {
         console.log('Received values of form: ', values);
         
-        const {username, password} = values
+        const {account, password} = values
 
 
-        dispatch({type: "auth/login", payload: {emailOrUsername: username, password}})
+        dispatch({type: "auth/login", payload: {account: account, password}})
       }
     });
   }
 
   render() {
-    const { getFieldDecorator, dispatch } = this.props.form;
+    const { getFieldDecorator, dispatch} = this.props.form;
+    const { isLoginSubmit=false } = this.props
+
     return (
       <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
+      <Spin spinning={isLoginSubmit} delay={500}>
         <Form onSubmit={this.onSubmitLogin} className="login-form">
           <FormItem>
-            {getFieldDecorator('username', {
-              rules: [{ required: true, message: 'Please input your username!' }],
+            {getFieldDecorator('account', {
+              rules: [{ required: true, message: 'Please input your account!' }],
             })(
               <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
             )}
@@ -69,13 +72,19 @@ class Login extends React.Component {
             Or <Link to="/register">register now!</Link>
           </FormItem>
         </Form>
+      </Spin>
       </div>
     )
   }
 }
 
-function mapStateToProps() {
-  return {};
+function mapStateToProps(state) {
+  const {
+    auth: {isLoginSubmit}
+  } = state
+  return {
+    isLoginSubmit
+  };
 }
 
 const WrapperLogin = Form.create()(Login)

src/routes/Profiles.js

 import React from 'react';
 import { connect } from 'dva';
-import styles from './Profiles.css';
-
-function Profiles({ dispatch, text }) {
-  return (
-    <div className={styles.normal} onClick={() => dispatch({type: 'haha/change', payload: {  text: Math.random() }})}>
-      Route Component: {text}
-    </div>
-  );
+import { Link } from 'dva/router'
+import styles from './Profiles.less';
+import { Form, Input, Icon, Radio, Tag, Tooltip, Button, Select, Tabs, Upload, Modal, Table, Popconfirm, Row, Col, Card, Spin } from 'antd'
+const FormItem = Form.Item;
+const RadioButton = Radio.Button;
+const RadioGroup = Radio.Group;
+const Option = Select.Option;
+const TabPane = Tabs.TabPane;
+const Dragger = Upload.Dragger;
+
+import EmailForm from '../components/EmailForm'
+import PasswordForm from '../components/PasswordForm'
+import UserNameForm from '../components/UserNameForm'
+
+
+const formItemLayout = {
+  labelCol: { span: 4 },
+  wrapperCol: { span: 15 },
 }
 
-function mapStateToProps(state) {
+class Profiles extends React.Component {
+
+  onUpdateSubmit = (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 { username, nickname, password } = values
+
+
+        dispatch({type: "user/updateProfile", payload: { username, nickname, password, user_id: id }})
+      }
+    });
+  }
+
+  render() {
+    const { dispatch, form, data, isUpdateSubmit=false, checkUsername, isUserNameExists } = this.props
+    const { getFieldDecorator } = form;    
+    const { username, nickname, id } = data
+
+    const nicknameProps = {
+      fromItem: {
+        label: "nickname",
+        ...formItemLayout
+      },
+      decorator: {
+        initialValue: nickname                        
+      },
+      input: {
+        placeholder: "nickname",
+      }
+    }
+
+    return (
+      <Spin spinning={isUpdateSubmit} delay={500}>
+        <Tabs defaultActiveKey="1" className="app-detail-nav">
+          <TabPane tab={<span><Icon type="setting" /> 基本信息 </span>} key="1">
+            <Form onSubmit={this.onUpdateSubmit}>          
+
+              <FormItem {...nicknameProps.fromItem}>
+                {getFieldDecorator(`nickname`, {...nicknameProps.decorator})(
+                  <Input {...nicknameProps.input}/>
+                )}
+              </FormItem>
+
+              <FormItem>
+                <div className={styles.wrapSubmit}>
+                  <Button type="primary" htmlType="submit" size="large">提交</Button>                  
+                </div>
+              </FormItem>
+            </Form>
+          </TabPane>
+
+          <TabPane tab={<span><Icon type="setting" /> 账户信息 </span>} key="2">
+
+            <Tabs type="card" className="app-detail-nav">
+              <TabPane tab={"修改用户名"} key={0}>
+                <UserNameForm />
+              </TabPane>  
+
+              <TabPane tab={"修改邮箱"} key={1}>
+                <EmailForm />
+              </TabPane>  
+
+              <TabPane tab={"修改密码"} key={2}>
+                <PasswordForm />
+              </TabPane>          
+            </Tabs>
+            
+          </TabPane>
+        </Tabs>
+      </Spin>      
+    )
+  }
+}
+
+function mapStateToProps(state, props) {
   const {
-    haha: {text}
+    user: {data, isUpdateSubmit},
+    auth: {checkUsername, isEmailExists, isUserNameExists,}
   } = state
   return {
-    text
+    data,    
+    checkUsername,
+    isEmailExists, 
+    isUserNameExists,
+    isUpdateSubmit
   };
 }
 
-export default connect(mapStateToProps)(Profiles);
+const WrapperProfiles = Form.create()(Profiles)
+
+export default connect(mapStateToProps)(WrapperProfiles);

src/routes/Profiles.less

+:global {
+  .app-detail-nav{
+  }
+  .ant-card {
+    margin: 2vh 0;
+  }
+  .app-detail-nav .ant-tabs-nav-scroll {
+    display: flex;
+    justify-content: center;
+  }
+  .ant-upload-select-picture-card i {
+    font-size: 28px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #666;
+  }
+}
+
+.wrapSubmit{
+  display: flex;
+  justify-content: center;
+}
\ No newline at end of file

src/routes/Register.js

@@ -2,27 +2,15 @@ import React from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router'
 import styles from './Login.less';
-import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
 
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 6 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 14 },
-  },
-};
-
-class Login extends React.Component {
-
+class Register extends React.Component {
 
   onSubmitLogin = (e) => {
-    const { form, dispatch, isSubmit, params: { id }} = this.props
+    const { form, dispatch, params: { id }} = this.props
 
     e && e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
@@ -32,15 +20,16 @@ class Login extends React.Component {
         const {email, username, nickname, password, confirm} = values
 
 
-        dispatch({type: "auth/register", payload: {email, username, nickname, password, password2: confirm, submit: isSubmit}})
+        dispatch({type: "auth/register", payload: {email, username, nickname, password }})
       }
     });
   }
+  
 
   checkPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && value !== form.getFieldValue('password')) {
-      callback('Two passwords that you enter is inconsistent!');
+      callback('两次密码输入不符');
     } else {
       callback();
     }
@@ -54,49 +43,58 @@ class Login extends React.Component {
     callback();
   }
 
-  checkUsername = (rule, value, callback) => {
-    const { form, dispatch } = this.props
+  render() {
+    const { dispatch, register, form, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit } = this.props
+    const { getFieldDecorator, } = form
+    const {email={}, username={}, password={} } = register
+
+    const emailProps = {
+      hasFeedback: true,
+      validateStatus: checkEmail,
+      help: isEmailExists ? 'email exists' : ''
+    }
 
-    callback();
-  }
+    const emailInputProps = {
+      onBlur: () => dispatch({type: 'auth/checkEmail', payload: { ...form.getFieldsValue()} }),
+      placeholder: "Email",
+    }
 
-  checkEmail= (rule, value, callback) => {
-    const form = this.props.form;
-    if (value && value !== form.getFieldValue('password')) {
-      callback('Two passwords that you enter is inconsistent!');
-    } else {
-      callback();
-    }   
-  }
+    const usernameProps = {
+      hasFeedback: true,
+      validateStatus: checkUsername,
+      help: isUserNameExists ? 'username exists' : ''      
+    }
+
+    const usernameInputProps = {
+      onBlur: () => dispatch({type: 'auth/checkUsername', payload: { ...form.getFieldsValue()} }),
+      placeholder: "Username"
+    }
 
-  render() {
-    const { getFieldDecorator, dispatch } = this.props.form;
     return (
       <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
+        <Spin spinning={isRegisterSubmit} delay={500}>
         <Form onSubmit={this.onSubmitLogin} className="login-form">
-          <FormItem hasFeedback  >
+          <FormItem {...emailProps}  >
             {getFieldDecorator('email', {
-              rules: [{ required: true, message: 'Please input your email!' }],
+              rules: [{ required: true, message: '邮箱格式不对!', pattern: /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/ }],
             }, {
-              validator: this.checkEmail
             })(
-              <Input  placeholder="Email" />
+              <Input {...emailInputProps} />
             )}
           </FormItem>
 
-          <FormItem hasFeedback >
+          <FormItem {...usernameProps}>
             {getFieldDecorator('username', {
-              rules: [{ required: true, message: 'Please input your username!' }],
+              rules: [{ required: true, message: '用户名格式有误!', 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 }],
             }, {
-              validator: this.checkUsername
             })(
-              <Input  placeholder="Username" />
+                
+              <Input {...usernameInputProps}/>
             )}
           </FormItem>
 
-          <FormItem hasFeedback >
+          <FormItem >
             {getFieldDecorator('nickname', {
-              rules: [{ required: true, message: 'Please input your nickname!' }],
             })(
               <Input  placeholder="nickname[optional]" />
             )}
@@ -104,23 +102,30 @@ class Login extends React.Component {
 
           <FormItem hasFeedback >
             {getFieldDecorator('password', {
-              rules: [{ required: true, message: 'Please input your Password!' }],
+              rules: [{ required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/ }],
             }, {
               validator: this.checkConfirm
             })(
-              <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
+              <Input 
+                prefix={<Icon type="lock" style={{ fontSize: 13 }} />} 
+                type="password" 
+                placeholder="Password" />
             )}
           </FormItem>
 
           <FormItem hasFeedback >
             {getFieldDecorator('confirm', {
               rules: [{
-                required: true, message: 'Please confirm your password!',
+                required: true, message: '密码至少为8-24位', pattern: /^.{8,24}$/
               }, {
                 validator: this.checkPassword,
               }],
             })(
-              <Input type="password" onBlur={this.handleConfirmBlur} placeholder="Password Again" />
+              <Input 
+                prefix={<Icon type="lock" style={{ fontSize: 13 }} />}
+                type="password" 
+                onBlur={this.handleConfirmBlur} 
+                placeholder="Password Again" />
             )}
           </FormItem>
             
@@ -129,6 +134,7 @@ class Login extends React.Component {
           </Button>
           Or <Link to="/login">Sign in!</Link>
         </Form>
+        </Spin>
       </div>
     )
   }
@@ -136,14 +142,18 @@ class Login extends React.Component {
 
 function mapStateToProps(state) {
   const {
-    auth: { isSubmit, register }
+    auth: { register, checkEmail, checkUsername, isEmailExists, isUserNameExists, isRegisterSubmit }
   } = state
   return {
-    isSubmit,
-    register
+    register,
+    checkEmail,
+    checkUsername,
+    isEmailExists, 
+    isUserNameExists,
+    isRegisterSubmit
   };
 }
 
-const WrapperLogin = Form.create()(Login)
+const WrapperRegister = Form.create()(Register)
 
-export default connect(mapStateToProps)(WrapperLogin);
+export default connect(mapStateToProps)(WrapperRegister);

src/routes/Register.less

+:global {
+  .app-detail-nav{
+  }
+  .ant-card {
+    margin: 2vh 0;
+  }
+  .app-detail-nav .ant-tabs-nav-scroll {
+    display: flex;
+    justify-content: center;
+  }
+  .ant-upload-select-picture-card i {
+    font-size: 28px;
+    color: #999;
+  }
+
+  .ant-upload-select-picture-card .ant-upload-text {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #666;
+  }
+}

src/routes/Reset.js

@@ -2,26 +2,15 @@ import React from 'react';
 import { connect } from 'dva';
 import { Link } from 'dva/router'
 import styles from './Login.less';
-import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button } from 'antd';
+import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, Spin } from 'antd';
 const FormItem = Form.Item;
 const Option = Select.Option;
 
 
-const formItemLayout = {
-  labelCol: {
-    xs: { span: 24 },
-    sm: { span: 6 },
-  },
-  wrapperCol: {
-    xs: { span: 24 },
-    sm: { span: 14 },
-  },
-};
-
 class Reset extends React.Component {
 
   onSubmitReset = (e) => {
-    const { form, dispatch, location: { query: { key, user_id  }}} = this.props
+    const { form, dispatch, location: { query: { key, user_id  }} } = this.props
 
     e && e.preventDefault();
     form.validateFieldsAndScroll((err, values) => {
@@ -53,9 +42,11 @@ class Reset extends React.Component {
   }
 
   render() {
-    const { getFieldDecorator, dispatch } = this.props.form;
+    const { getFieldDecorator } = this.props.form;
+    const { isResetSubmit=false } = this.props
     return (
       <div style={{ display: 'flex', justifyContent:'center', alignItems: 'center', height: '100%'}}>
+        <Spin spinning={isResetSubmit} delay={500}>
         <Form onSubmit={this.onSubmitReset} className="login-form">
 
           <FormItem>
@@ -84,13 +75,19 @@ class Reset extends React.Component {
             Submit
           </Button>
         </Form>
+        </Spin>
       </div>
     )
   }
 }
 
 function mapStateToProps(state, props) {
-  return {};
+  const {
+    auth: {isResetSubmit}
+  } = state
+  return {
+    isResetSubmit
+  };
 }
 
 const WrapperReset = Form.create()(Reset)

src/services/auth.js

@@ -2,32 +2,60 @@ import request from '../utils/request';
 import config from '../config'
 
 export async function login(params) {
-  return request(`/sign_in.php`, {
+  return request(`/signin`, {
     method: 'POST',
     body: JSON.stringify(params)
   })
 }
 
 export async function forgot(params) {
-  return request(`/forgot_password.php`, {
+  return request(`/forgot`, {
     method: 'POST',
     body: JSON.stringify(params)
   })
 }
 
 export async function register(params) {
-  return request(`/sign_up.php`, {
+  return request(`/signup`, {
     method: 'POST',
     body: JSON.stringify(params)
   })
 }
 
 export async function reset(params) {
-  return request(`/reset_password.php`, {
+  return request(`/reset`, {
+    method: 'PATCH',
+    body: JSON.stringify(params)
+  })
+}
+
+export async function activate(params) {
+  return request(`/activate`, {
     method: 'POST',
     body: JSON.stringify(params)
   })
 }
 
+// deprecated
+export async function getUserByEmail(params) {
+  return request(`/user/${params.email}`, {
+    method: 'GET'
+  })
+}
+
+// deprecated
+export async function getUserByUsername(params) {
+  return request(`/user/${params.username}`, {
+    method: 'GET'
+  })
+}
+
+export async function checkUserExists(params) {
+  return request(`/user/exists`, {
+    method: "POST",
+    body: JSON.stringify(params)
+  })
+}
+
 
 

src/services/user.js

+import request from '../utils/request';
+import config from '../config'
+
+export async function updateProfile(params) {
+  return request(`/user/profiles`, {
+    method: 'PATCH',
+    body: JSON.stringify(params)
+  })
+}
+
+export async function updateAccount(params) {
+  return request(`/user/account`, {
+    method: 'PATCH',
+    body: JSON.stringify(params)
+  })
+}
+