修改密码

src/components/GlobalHeader/AvatarDropdown.jsx

@@ -4,9 +4,20 @@ import React from 'react';
 import { connect } from 'dva';
 import { router } from 'umi';
 import HeaderDropdown from '../HeaderDropdown';
+import ShowPassword from './ShowPassword'
 import styles from './index.less';
 
 class AvatarDropdown extends React.Component {
+
+  constructor(props) {
+    super()
+    this.state = { visible: false }
+  }
+
+  onCancel = (e) => {
+    this.setState({ visible: false })
+  }
+
   onMenuClick = (event) => {
     const { key } = event;
 
@@ -22,6 +33,12 @@ class AvatarDropdown extends React.Component {
       return;
     }
 
+    
+    if (key === 'updatePassword') {
+      this.setState({ visible: true })
+      return;
+    }
+
     router.push(`/account/${key}`);
   };
 
@@ -49,6 +66,11 @@ 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 +78,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>
+      
+      {/* 修改密码 */}
+      <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.updatePassword, 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/en-US/menu.js

@@ -45,6 +45,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

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