之前的一篇文章里,寫(xiě)過(guò)關(guān)于忘記密碼這部分的業(yè)務(wù),今天這個(gè)主要是詳細(xì)寫(xiě)密碼編輯這一塊功能,需求也很明確,考慮到密碼未輸入,密碼輸入錯(cuò)誤以及確認(rèn)密碼等情況,代碼里面會(huì)添加注釋.總結(jié)一點(diǎn),寫(xiě)react組件概括就是封裝函數(shù),將函數(shù)調(diào)用到不同的生命周期鉤子觸發(fā)響應(yīng)事件
`import React from 'react';`
`import message from 'antd/lib/message';`
import { View } from 'core'; //組件繼承傳值封裝
import { Log, Toolkit } from 'util'; //工具封裝
export default class EditPassWordView extends View {
constructor(props) {
super(props);
this.state = {
showSuccessWin: false,//密碼修改成功提示框顯示開(kāi)關(guān)
password: '', //輸入密碼
showError: false, // 密碼輸入錯(cuò)誤顯示
showError1: false, // 新密碼未輸入錯(cuò)誤顯示
showError2: false, //新密碼和確認(rèn)密碼輸入錯(cuò)誤顯示
errorMsg: '', //錯(cuò)誤信息
newpassword: '', //輸入新密碼
surepassword: '', //輸入確認(rèn)密碼
};
this.validateCallBack = this.validateCallBack.bind(this);
this.handleCloseWin = this.handleCloseWin.bind(this);
}
/*
*檢查舊密碼是否正確
*/
_checkPassword() {
if (!this.state.password) {
return false;
}
this.props.action.checkPassword({
oldPassword: this.state.password,
uid: this.props.uid, //找到唯一鍵值
}).then((respData) => {
if (respData.code === 0) {
this.setState({
showError: false,
});
} else {
this.setState({
showError: true,
showError1: false,
showError2: false,
errorMsg: respData.msg,
});
}
}, (error) => {
Log.error(error.reason);
});
return false;
}
/**
* 校驗(yàn)密碼強(qiáng)度回調(diào)函數(shù)
* @param {*string} validateFlag 校驗(yàn)結(jié)果
* @param {*string} errTips 錯(cuò)誤提示語(yǔ)
*/
validateCallBack(validateFlag, errTips) {
// 校驗(yàn)失敗
if (!validateFlag) {
this.setState({
showError: false,
showError2: false,
showError1: true,
errorMsg: errTips,
});
}
}
/*
*修改密碼
*/
_editPassword() {
const { password, newpassword, surepassword } = this.state;
// if (!this.validatePassWord(password)) {
// return false;
// }
if (!password) {
this.setState({
showError: true,
showError2: false,
showError1: false,
errorMsg: '請(qǐng)輸入密碼',
});
return false;
}
if (!Toolkit.validatePassWord(newpassword, this.validateCallBack)) {
return false;
}
if (newpassword !== surepassword) {
this.setState({
showError2: true,
showError: false,
showError1: false,
errorMsg: '兩次密碼輸入不一致!',
});
return false;
}
const data = {
oldPassword: password,
newPassword: newpassword,
uid: this.props.uid,
};
this.props.action.editPassword(data).then((respData) => {
if (respData.code === 0) {
this.setState({
showError2: false,
showSuccessWin: true,
});
} else {
message.error(respData.msg || respData.reason);
}
}, (error) => {
message.error(error.msg || error.reason);
Log.error(error.reason);
});
return false;
}
/**
* 關(guān)閉彈出框事件
*/
handleCloseWin() {
this.setState({
showSuccessWin: false,
password: '',
newpassword: '',
surepassword: '',
});
}
/**
* 渲染密碼修改成功的提示彈出框
*/
_renderPopWin() {
const { showSuccessWin } = this.state;
if (showSuccessWin) {
return (
<div className="stopPropa dyModal pop-win-box">
<div className="wrap">
<div className="dyModalBg" />
<div className="modalContent">
<div className="header">
<h3>提示</h3>
<i className="close-icon" onClick={this.handleCloseWin} />
</div>
<div className="content">
<div className="tips">
<p style={{ fontWeight: 'bold' }}>密碼修改成功</p>
<p className="sub">請(qǐng)使用新密碼重新登錄一次</p>
</div>
<div className="btn-box">
<a className="btn-sure" href={this.props.logoutUrl}>確定</a>
</div>
</div>
</div>
</div>
</div>
);
}
return '';
}
_render() {
return (
<div>
{this._renderPopWin()}
<div className="change_password">
<h1>修改密碼</h1>
<ul>
<li>
<span>原密碼：</span>
<input
type="password"
name="password"
value={this.state.password}
onChange={(evt) => {
this.setState({
showError: false,
showError2: false,
});
this.state.password = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
<strong
className="password"
style={{ display: this.state.showError ? 'block' : 'none' }}
>{this.state.errorMsg}</strong>
</li>
<li>
<span>新密碼：</span>
<input
type="password"
name="newpassword"
value={this.state.newpassword}
onChange={(evt) => {
this.setState({
showError1: false,
showError2: false,
});
this.state.newpassword = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
<strong
className="password"
style={{ display: this.state.showError1 ? 'block' : 'none' }}
>{this.state.errorMsg}</strong>
</li>
<li>
<span>確認(rèn)密碼：</span>
<input
type="password"
name="surepassword"
value={this.state.surepassword}
onChange={(evt) => {
this.setState({
showError2: false,
});
this.state.surepassword = evt.target.value;
}}
onKeyUp={
(evt) => {
if (evt.keyCode === 13) {
this._editPassword();
}
}
}
/>
<strong
className="password"
style={{ display: this.state.showError2 ? 'block' : 'none' }}
>{this.state.errorMsg}</strong>
</li>
</ul>
<button
onClick={this._editPassword.bind(this)}
>修改密碼</button>
</div>
</div>
);
}
}
