新增个人修改密码

This commit is contained in:
red-deng-deng 2021-12-08 11:35:43 +08:00
parent 770846f67b
commit d05a266b85
8 changed files with 171 additions and 12 deletions

View File

@ -633,9 +633,10 @@ export const getVerify = (params) => {
export const getUserinfo= (params) => { export const getUserinfo= (params) => {
return req('get', baseurl + "/auth/admin/userinfo",params) return req('get', baseurl + "/auth/admin/userinfo",params)
} }
//设置登录密码
export const putmodifySelf = (data) => {
return req('put', baseurl + "/auth/admin/setPassword",data)
}

View File

@ -1,5 +1,5 @@
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-label { .zent-form-horizontal[data-zv="9.11.0"] .zent-form-label {
flex-basis: 110px!important; flex-basis: 118px!important;
justify-content: flex-start!important; justify-content: flex-start!important;
} }
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content{ .zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content{

View File

@ -0,0 +1,115 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import {
Form,
FormStrategy,
Notify,
Validators,
FormInputField,
Button,
Icon
} from 'zent';
import {putmodifySelf,handelResponse} from "../../assets/api.js"
import "../../assets/comm.css"
import './modifySelf.less'
import _ from "lodash"
function equalsPassword(value, ctx) {
if (value !== ctx.getSectionValue('password').password) {
return {
name: 'passwordEqual',
message: '两次填写的密码不一致',
};
}
return null;
}
const Modifypwd=(props)=>{
const form = Form.useForm(FormStrategy.View);
const [pwdType, setPwdType] = React.useState('password')
const [repwdType, setRePwdType] = React.useState('password')
const onSubmit = React.useCallback(form => {
const value = form.getValue();
if(value){
let data=_.cloneDeep(value);
let parmas={
password:data.password
}
putmodifySelf(parmas).then(res=>{
handelResponse(res,(response,msg)=>{
Notify.clear();
Notify.success(msg);
setTimeout(()=>{
window.location.href='/login';
sessionStorage.clear();
},2000);
},err=>{
Notify.clear();
Notify.error(res.data.message);
});
}).catch(err=>{
});
}
}, []);
const cancelFn=()=>{
props.visibleShow(false);
}
const changepwdType=()=>{
if(pwdType=='password'){
setPwdType('text');
}else{
setPwdType('password');
}
}
const rechangepwdType=()=>{
if(repwdType=='password'){
setRePwdType('text');
}else{
setRePwdType('password');
}
}
return (
<Form
form={form}
layout="horizontal"
scrollToError
onSubmit={onSubmit}
>
<FormInputField
name="password"
label="新密码"
className="selfpwd"
required
after={<Icon type={pwdType=='password'?'eye-o':'closed-eye'} onClick={changepwdType}/>}
helpDesc=''
validators={[
Validators.required('请输入新密码'),
Validators.pattern(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/, '6-16位字符,数字+字母组成,(字母区分大小写)'),
]}
notice="6-16位字符,数字+字母组成,字母(区分大小写)"
props={{
type: pwdType=='password'?'password':'text',maxLength:16,autoComplete:'new-password'
}}
/>
<FormInputField
name="old_password"
label="再次输入新密码"
required
className="selfpwd"
notice="必须与新密码输入一致"
after={<Icon type={repwdType=='password'?'eye-o':'closed-eye'} onClick={rechangepwdType}/>}
validators={[ Validators.required('请确认密码'),equalsPassword]}
props={{
type:repwdType=='password'?'password':'text',maxLength:16,autoComplete:'new-password'
}}
/>
<p className="dflexajce">
<Button type="primary" htmlType="submit">确定</Button>,
<Button onClick={cancelFn} >取消</Button>
</p>
</Form>
);
}
export default Modifypwd;

View File

@ -18,9 +18,12 @@ import {
Avatar, Avatar,
Pop, Pop,
Sweetalert, Sweetalert,
Dialog,
Icon, Icon,
Notify Notify,
Button
} from 'zent'; } from 'zent';
import ModifySelfpwd from './ModifySelfpwd'
import extension from '../extension/main/main'; import extension from '../extension/main/main';
import overview from '../overview/main/main'; import overview from '../overview/main/main';
import newplan from '../newplan/main'; import newplan from '../newplan/main';
@ -82,6 +85,7 @@ export default class App extends Component {
} }
state = { state = {
visible:false,
isShowSub:true, isShowSub:true,
noShowSubMenu:["/home/extension","/home/overview","/home/plan-create","/home/mytempMould","/home/edittemplate"], noShowSubMenu:["/home/extension","/home/overview","/home/plan-create","/home/mytempMould","/home/edittemplate"],
pathname:'', pathname:'',
@ -163,6 +167,15 @@ export default class App extends Component {
}) })
}).catch(err=>{ }).catch(err=>{
}); });
}
//修改密码
modifyFn(){
this.setState({visible:true});
}
//修改密码
modifyPwdFn(){
} }
//退出登录 //退出登录
exitFn(){ exitFn(){
@ -193,7 +206,9 @@ export default class App extends Component {
}); });
} }
setVisible = visible => {
this.setState({ visible });
};
componentWillMount(e){ componentWillMount(e){
let activeMenuList=JSON.parse(sessionStorage.getItem('activeMenu')); let activeMenuList=JSON.parse(sessionStorage.getItem('activeMenu'));
this.setState({'navlist':activeMenuList}); this.setState({'navlist':activeMenuList});
@ -298,13 +313,28 @@ export default class App extends Component {
</p> </p>
</p> </p>
<p onClick={()=>{this.exitFn()}} className="exit-btn">退出</p> <p className="dflexaj">
<span onClick={()=>{this.exitFn()}} className="exit-btn">退出</span>
<span onClick={()=>{this.modifyFn()}} className="modify-btn">修改密码</span>
</p>
</div> </div>
</div>}> </div>}>
{/* */} {/* */}
<div className="nameItem">{this.state.userInfo.real_name}&nbsp;<Icon type="down" className="exitIcon" /></div> <div className="nameItem">{this.state.userInfo.real_name}&nbsp;<Icon type="down" className="exitIcon" /></div>
</Pop> </Pop>
</div> </div>
<Dialog
visible={this.state.visible}
className="questModal"
onClose={() => this.setVisible(false)}
title="修改密码"
>
<ModifySelfpwd visibleShow={(visible)=>this.setVisible(visible) }/>
<div>
</div>
</Dialog>
<aside className="mainbody" > <aside className="mainbody" >
{ {

View File

@ -86,7 +86,8 @@
font-size: 14px; font-size: 14px;
margin-left: 15px; margin-left: 15px;
} }
.exit-btn{ .exit-btn,.modify-btn{
flex: 1;
display: flex; display: flex;
align-items: center; align-items: center;
padding:10px; padding:10px;
@ -95,6 +96,12 @@
color: #939599; color: #939599;
cursor: pointer; cursor: pointer;
} }
.exit-btn:hover,.modify-btn:hover{
color: #296bef;
}
.modify-btn{
border-left: 1px solid #e0e0e0;
}
.userImg{ .userImg{
cursor: pointer; cursor: pointer;
} }

View File

@ -0,0 +1,7 @@
.selfpwd{
.zenticon{
font-size: 22px;
line-height: 32px!important;
margin-left: 5px;
}
}

View File

@ -1,5 +1,5 @@
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-label { .zent-form-horizontal[data-zv="9.11.0"] .zent-form-label {
flex-basis: 110px!important; flex-basis: 118px!important;
justify-content: flex-start!important; justify-content: flex-start!important;
} }
.zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content{ .zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content{

View File

@ -36,7 +36,6 @@ const Modifypwd=(props)=>{
},err=>{ },err=>{
Notify.clear(); Notify.clear();
Notify.error(res.data.message); Notify.error(res.data.message);
return false;
}); });
}).catch(err=>{ }).catch(err=>{