修改密码

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 = {
@@ -49,6 +65,10 @@ class AvatarDropdown extends React.Component {
         )}
         {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 +76,17 @@ 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.avatar} 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.avatar} 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,99 @@
+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 (!err) {
+        request({ ...apis.user.updatePassword, params: { ...values } }).then(() => {
+          openNotificationWithIcon('success', '操作成功!')
+          props.form.resetFields()
+          props.onSuccess()
+        }).catch(error => {
+          openNotificationWithIcon('error', error)
+        })
+      }
+    });
+  }
+
+  const { getFieldDecorator } = props.form
+  return (
+    <>
+      <Form layout="horizontal" onSubmit={(e) => handleSubmit(e)}>
+        <Form.Item>
+            {getFieldDecorator('newPassword', {
+              rules: [{ required: true, message: 'Please input your Password!' }],
+            })(
+              <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/en-US/menu.js

@@ -43,6 +43,7 @@ export default {
   'menu.account.settings': 'Account Settings',
   'menu.account.trigger': 'Trigger Error',
   'menu.account.logout': 'Logout',
+  'menu.account.updatePassword': 'update password',
   'menu.editor': 'Graphic Editor',
   'menu.editor.flow': 'Flow Editor',
   'menu.editor.mind': 'Mind Editor',

src/locales/zh-CN/menu.js

@@ -43,6 +43,7 @@ export default {
   'menu.account.settings': '个人设置',
   'menu.account.trigger': '触发报错',
   'menu.account.logout': '退出登录',
+  'menu.account.updatePassword': '修改密码',
   'menu.editor': '图形编辑器',
   'menu.editor.flow': '流程编辑器',
   'menu.editor.mind': '脑图编辑器',

src/services/apis.js

@@ -14,6 +14,11 @@ export default {
     },
   },
   user: {
+    updatePassword: {
+      method: 'PUT',
+      url: `${prefix}/update/password`,
+      action: 'admin.update.password',
+    },
     current: {
       method: 'GET',
       url: `${prefix}/taUser/current`,