修改密码

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -5,8 +5,15 @@ import { connect } from 'dva';
 import router from 'umi/router';
 import HeaderDropdown from '../HeaderDropdown';
 import styles from './index.less';
+import ShowPassword from './ShowPassword'
 
 class AvatarDropdown extends React.Component {
+
+  constructor(props) {
+    super()
+    this.state = { visible: false }
+  }
+
   onMenuClick = event => {
     const { key } = event;
 
@@ -22,9 +29,18 @@ class AvatarDropdown extends React.Component {
       return;
     }
 
+    if (key === 'updatePassword') {
+      this.setState({ visible: true })
+      return;
+    }
+
     router.push(`/account/${key}`);
   };
 
+  onCancel = (e) => {
+    this.setState({ visible: false })
+  }
+  
   render() {
     const {
       currentUser = {
@@ -48,7 +64,10 @@ class AvatarDropdown extends React.Component {
           </Menu.Item>
         )}
         {menu && <Menu.Divider />}
-
+        <Menu.Item key="updatePassword">
+          <Icon type="key" />
+          <FormattedMessage id="menu.account.updatePassword" defaultMessage="updatePassword" />
+        </Menu.Item>   
         <Menu.Item key="logout">
           <Icon type="logout" />
           <FormattedMessage id="menu.account.logout" defaultMessage="logout" />
@@ -56,12 +75,15 @@ class AvatarDropdown extends React.Component {
       </Menu>
     );
     return currentUser && currentUser.userName ? (
-      <HeaderDropdown overlay={menuHeaderDropdown}>
-        <span className={`${styles.action} ${styles.account}`}>
-          <Avatar size="small" className={styles.avatar} src={currentUser.channelImg} alt="avatar" />
-          <span className={styles.name}>{currentUser.userName}</span>
-        </span>
-      </HeaderDropdown>
+      <>
+        <HeaderDropdown overlay={menuHeaderDropdown}>
+          <span className={`${styles.action} ${styles.account}`}>
+            <Avatar size="small" className={styles.avatar} src={currentUser.channelImg} alt="avatar" />
+            <span className={styles.name}>{currentUser.userName}</span>
+          </span>
+        </HeaderDropdown>
+        <ShowPassword visible={this.state.visible} onCancel={(e) => this.onCancel(e)} />
+      </>  
     ) : (
       <Spin
         size="small"

src/components/GlobalHeader/ShowPassword.jsx

@@ -0,0 +1,126 @@
+import React, { Component } from 'react'
+import { Modal, Button, Form, Input, Icon, notification } from 'antd'
+import request from '../../utils/request'
+import apis from '../../services/apis'
+
+
+function passwodForm(props) {
+
+
+  const openNotificationWithIcon = (type, message) => {
+    notification[type]({
+      message,
+      description:
+        '',
+    });
+  }
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    props.form.validateFieldsAndScroll((err, values) => {
+      // 两次密码比较
+      if (values.newPassword !== values.newPasswordToo) {
+        openNotificationWithIcon('error', '两次密码输入不一样,请重新输入')
+        return
+      }
+      if (!err) {
+        request({ ...apis.user.changePassword, params: { ...values } }).then(() => {
+          openNotificationWithIcon('success', '操作成功!')
+          props.form.resetFields()
+          props.onSuccess()
+        }).catch(error => {
+          // openNotificationWithIcon('error', error.message)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+    <>
+      <Form labelCol={{ span: 7 }} wrapperCol={{ span: 12 }} onSubmit={(e) => handleSubmit(e)}>
+      <Form.Item label="请输入旧密码">
+            {getFieldDecorator('originalPassword', {
+              rules: [{ required: true, message: '请输入旧密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+        <Form.Item label="新密码">
+            {getFieldDecorator('newPassword', {
+              rules: [{ required: true, message: '请输入新密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+          <Form.Item label="确认新密码">
+            {getFieldDecorator('newPasswordToo', {
+              rules: [{ required: true, message: '请确认新密码' }],
+            })(
+              <Input
+                prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
+                type="password"
+                placeholder="Password"
+              />,
+            )}
+          </Form.Item>
+          <Form.Item>
+            <Button type="primary" htmlType="submit">
+                确定
+            </Button>
+          </Form.Item>
+      </Form>
+    </>
+  )
+}
+
+const WrappedShowPasswordForm = Form.create({ name: 'passwodForm' })(passwodForm)
+
+export default class ShowPassword extends Component {
+
+  constructor(props) {
+    super(props)
+    this.state = { visible: false }
+  }
+
+  componentDidUpdate(prevProps) {
+    // 典型用法（不要忘记比较 props）：
+    console.log('接收值: ', this.props.visible, prevProps.visible)
+    if (this.props.visible !== prevProps.visible) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({ visible: this.props.visible })
+    }
+  }
+
+  handleOk = e => {
+    console.log('关闭了')
+    this.props.onCancel()
+  };
+
+  handleCancel = e => {
+    console.log('关闭了')
+    this.props.onCancel()
+  };
+
+  render() {
+    return (
+      <>
+        <Modal
+          title="修改密码"
+          visible={this.state.visible}
+          onCancel={this.handleCancel}
+          footer={null}>
+          <WrappedShowPasswordForm onSuccess={(e) => this.handleCancel(e)} />
+        </Modal>
+      </>
+    );
+  }
+}

src/locales/zh-CN/menu.js

@@ -44,7 +44,8 @@ export default {
   'menu.account.trigger': '触发报错',
   'menu.account.logout': '退出登录',
   'menu.editor': '图形编辑器',
+  'menu.account.updatePassword': '修改密码',
   'menu.editor.flow': '流程编辑器',
   'menu.editor.mind': '脑图编辑器',
-  'menu.editor.koni': '拓扑编辑器',
+  'menu.editor.koni': '拓扑编辑器', 
 };

src/pages/UserManage/index.jsx

@@ -174,7 +174,7 @@ export default (props) => {
                       <Icon type="setting" key="rights" onClick={gotoDetail(member, 3)}/>
                     </Tooltip>,
                     <Tooltip title="重置密码">
-                      <Icon type="block" key="resetpass" onClick={editPassword(member)}/>
+                      <Icon type="block" key="resetpass" onClick={resetPassword(member)}/>
                     </Tooltip>
                   ]}
                 >