changePassword.jsx 2.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. import React from 'react';
  2. import ajax from 'jquery/src/ajax/xhr.js'
  3. import $ from 'jquery/src/ajax';
  4. import { Modal, Button, Icon, Input, message } from 'antd';
  5. import './changeModal.less';
  6. const ChangePw = React.createClass({
  7. getInitialState() {
  8. return { visible: false };
  9. },
  10. showModal() {
  11. this.setState({
  12. visible: true,
  13. });
  14. },
  15. handleOk() {
  16. if (this.state.newPw.length < 6 || this.state.newPw.length > 20) {
  17. message.warning('请使用长度为6-20位的密码!');
  18. } else if (this.state.confirmPw !== this.state.newPw) {
  19. message.warning('两次密码输入不相同!');
  20. } else if (this.state.confirmPw === this.state.newPw) {
  21. $.ajax({
  22. method: "POST",
  23. dataType: "json",
  24. crossDomain: false,
  25. url: globalConfig.context + "/api/user/pwd",
  26. data: {
  27. "password": this.state.oldPw,
  28. "newPassword": this.state.newPw
  29. }
  30. }).done(function (data) {
  31. if (!data.error.length) {
  32. message.success('修改成功!');
  33. this.setState({
  34. visible: false,
  35. });
  36. } else {
  37. message.warning(data.error[0].message);
  38. }
  39. }.bind(this));
  40. };
  41. },
  42. handleCancel(e) {
  43. this.setState({
  44. visible: false,
  45. });
  46. },
  47. oldPwChange(e) {
  48. this.state.oldPw = e.target.value;
  49. },
  50. newPwChange(e) {
  51. this.state.newPw = e.target.value;
  52. },
  53. confirmPwChange(e) {
  54. this.state.confirmPw = e.target.value;
  55. },
  56. render() {
  57. return (
  58. <div style={{ 'float': 'left','marginTop':'0' }}>
  59. <Button type="primary" onClick={this.showModal}>修改密码</Button>
  60. <Modal className="change-modal" title="设置新密码" visible={this.state.visible}
  61. onOk={this.handleOk} onCancel={this.handleCancel}
  62. width={360}
  63. footer={[
  64. <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>,
  65. <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button>
  66. ]}
  67. >
  68. <p className="modal-intro"><Icon type="info-circle" />密码长度为6-20个字符,区分大小写</p>
  69. <p><span>原密码:</span><Input type="password" onChange={this.oldPwChange} /></p>
  70. <p><span>新密码:</span><Input type="password" onChange={this.newPwChange} /></p>
  71. <p><span>确认密码:</span><Input type="password" onChange={this.confirmPwChange} /></p>
  72. </Modal>
  73. </div>
  74. );
  75. },
  76. });
  77. export default ChangePw;