import React from 'react'; import ajax from 'jquery/src/ajax/xhr.js' import $ from 'jquery/src/ajax'; import { Modal, Button, Icon, Input, message } from 'antd'; import './changeModal.less'; const ChangePw = React.createClass({ getInitialState() { return { visible: false }; }, showModal() { this.setState({ visible: true, }); }, logOut() { $.ajax({ method: "get", dataType: "json", url: globalConfig.context + "/login", }).done(function (data) { window.location.href = globalConfig.context + "/user/login.html" }); }, handleOk() { if (this.state.newPw.length < 6 || this.state.newPw.length > 20) { message.warning('请使用长度为6-20位的密码!'); } else if (this.state.confirmPw !== this.state.newPw) { message.warning('两次密码输入不相同!'); } else if (this.state.confirmPw === this.state.newPw) { $.ajax({ method: "POST", dataType: "json", crossDomain: false, url: globalConfig.context + "/api/user/pwd", data: { "password": this.state.oldPw, "newPassword": this.state.newPw } }).done(function (data) { if (!data.error.length) { message.success('修改成功!'); this.setState({ visible: false, }); this.logOut(); } else { message.warning(data.error[0].message); } }.bind(this)); }; }, handleCancel(e) { this.setState({ visible: false, }); }, oldPwChange(e) { this.state.oldPw = e.target.value; }, newPwChange(e) { this.state.newPw = e.target.value; }, confirmPwChange(e) { this.state.confirmPw = e.target.value; }, render() { return ( <div style={{ 'float': 'left', 'marginTop': '0' }}> <Button type="primary" onClick={this.showModal}>修改密码</Button> <Modal maskClosable={false} className="change-modal" title="设置新密码" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} width={360} footer={[ <Button key="submit" type="primary" size="large" loading={this.state.loading} onClick={this.handleOk}>确认</Button>, <Button key="back" type="ghost" size="large" onClick={this.handleCancel}>取消</Button> ]} > <p className="modal-intro"><Icon type="info-circle" />密码长度为6-20个字符,区分大小写</p> <p><span>原密码:</span><Input type="password" onChange={this.oldPwChange} /></p> <p><span>新密码:</span><Input type="password" onChange={this.newPwChange} /></p> <p><span>确认密码:</span><Input type="password" onChange={this.confirmPwChange} /></p> </Modal> </div> ); }, }); export default ChangePw;