用户密码重置和忘记密码调整

This commit is contained in:
fan 2022-09-15 13:05:11 +08:00
parent aef684e320
commit 2eca40ba41
4 changed files with 321 additions and 2 deletions

View File

@ -238,3 +238,34 @@ export function registerUser(data) {
data
});
}
/** 超管重置用户密码 */
export function adminResetUserPassword(userId) {
return request({
url: `/api/userinfo/${userId}/reset/pwd`,
method: 'put'
});
}
/** 找回密码 */
export function findPassword(data) {
return request({
url: `/api/userinfo/retrieve/pwd`,
method: 'put',
data
});
}
/** 发送手机验证码 */
export function sendPhoneVfcode(data) {
return request({
url: '/api/userinfo/mobile/code',
method: 'post',
data
});
}
/** 发送邮箱验证码 */
export function sendEmailVfcode(params) {
return request({
url: '/api/userinfo/email/code',
method: 'post',
params
});
}

View File

@ -0,0 +1,262 @@
<template>
<el-dialog
:title="title"
:visible.sync="dialogShow"
width="500px"
:before-close="doClose"
:z-index="9000"
:show-close="false"
:close-on-click-modal="false"
top="25vh"
>
<el-form ref="ruleForm" :model="form" :rules="rules" label-width="110px" class="demo-ruleForm">
<el-form-item prop="type">
<template slot="label">
<span>找回途径</span>
</template>
<el-radio-group v-model="form.type" size="small">
<el-radio label="phone" border>手机号找回</el-radio>
<el-radio label="email" border>邮箱找回</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.type === 'email'" prop="email">
<template slot="label">
<span>&emsp;&emsp;</span>
</template>
<el-input v-model="form.email" size="small" style="width: 200px;" />
</el-form-item>
<el-form-item v-if="form.type === 'phone'" prop="phone">
<template slot="label">
<span>手机号</span>
</template>
<el-input v-model="form.phone" size="small" style="width: 200px;" />
</el-form-item>
<el-form-item label="密码:" prop="password">
<template slot="label">
<span>&emsp;&emsp;</span>
</template>
<el-input v-model="form.password" size="small" autocomplete="new-password" show-password style="width: 200px;" />
</el-form-item>
<el-form-item label="密码确认:" prop="repeatPassword">
<el-input v-model="form.repeatPassword" size="small" autocomplete="new-password" show-password style="width: 200px;" />
</el-form-item>
<el-form-item prop="vfCode">
<template slot="label">
<span>验证码</span>
</template>
<el-input v-model="form.vfCode" size="small" style="display: inline-block;width: 200px" />
<el-button
size="small"
type="primary"
style="margin-top: 10px; margin-right: 10px;"
:disabled="passWordCodeTime != 0"
@click="sendVfcode"
>
{{ $t('global.sendCode') }}
<span
v-if="passWordCodeTime"
>{{ passWordCodeTime }}</span>
</el-button>
</el-form-item>
<div style="display: flex;justify-content: space-around;">
<el-button type="primary" size="small" @click="submitForm()">找回</el-button>
<el-button size="small" @click="doClose()">返回登录</el-button>
</div>
</el-form>
</el-dialog>
</template>
<script>
import { findPassword, sendPhoneVfcode, sendEmailVfcode } from '@/api/management/user';
import md5 from 'js-md5';
import {clearInterval, setInterval} from 'timers';
export default {
name: 'ForgetPassword',
data() {
var validateEmail = (rule, value, callback) => {
const regu = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
const re = new RegExp(regu);
if (!re.test(value) ) {
callback(new Error('邮箱格式不正确'));
} else {
callback();
}
};
var validatePhone = (rule, value, callback) => {
const regu = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
const re = new RegExp(regu);
if (!re.test(value)) {
callback(new Error('手机号格式不正确'));
} else {
callback();
}
};
var validatePassword = (rule, value, callback) => {
if (this.form.repeatPassword) {
this.$refs.ruleForm.validateField('repeatPassword');
}
callback();
};
var validateRepeatPassword = (rule, value, callback) => {
if (value !== this.form.password) {
callback(new Error('两次密码不相同,请确认密码'));
} else {
callback();
}
};
var validateVfCode = (rule, value, callback) => {
if (this.form.vfCode.length !== 4) {
callback(new Error('验证码长度错误'));
} else {
callback();
}
};
return {
dialogShow: false,
message: '',
operation: '',
title: '密码找回',
passWordTime: null,
form: {
type: 'phone',
phone: '',
email: '',
password: '',
repeatPassword: '',
vfCode: ''
},
passWordCodeTime: 0,
rules: {
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ validator: validatePhone, trigger: 'blur' }
],
email: [
{ required: true, message: '请输入邮箱', trigger: 'blur' },
{ validator: validateEmail, trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ validator: validatePassword, trigger: 'blur' },
{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
],
repeatPassword: [
{ required: true, message: '请重复输入密码', trigger: 'blur' },
{ validator: validateRepeatPassword, trigger: 'blur' },
{ min: 5, max: 20, message: '长度在 5 到 20 个字符', trigger: 'blur' }
],
vfCode: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ validator: validateVfCode, trigger: 'blur' }
]
}
};
},
computed: {
},
mounted() {
},
methods: {
doShow() {
this.form = {
type: 'phone',
phone: '',
email: '',
password: '',
repeatPassword: '',
vfCode: ''
};
this.dialogShow = true;
},
doClose() {
this.dialogShow = false;
this.form = {
type: 'phone',
phone: '',
email: '',
password: '',
repeatPassword: '',
vfCode: ''
};
this.$refs.ruleForm.clearValidate();
},
async sendVfcode() {
const reguEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
const reguPhone = /^1(3[0-9]|4[5,7]|5[0,1,2,3,5,6,7,8,9]|6[2,5,6,7]|7[0,1,7,8]|8[0-9]|9[1,8,9])\d{8}$/;
const rePhone = new RegExp(reguPhone);
const reEmail = new RegExp(reguEmail);
if (this.form.type === 'phone' && this.form.phone && rePhone.test(this.form.phone)) {
const random = Math.floor(Math.random() * 10000 + 1);
const timeCount = Date.parse(new Date()) / 1000;
const pass = `${timeCount}86${this.form.phone}${random}`;
const param = {
mobile: this.form.phone,
nationCode: '86',
rd: random + '',
time: timeCount + '',
token: md5(pass)
};
try {
this.passWordCodeTime = 60;
this.passWordTime = setInterval(() => {
this.passWordCodeTime--;
if (this.passWordCodeTime <= 0) {
this.passWordCodeTime = 0;
clearInterval(this.mobileTime);
this.passWordTime = null;
}
}, 1000);
await sendPhoneVfcode(param);
} catch (error) {
this.$message.info(this.$t('global.codeFaile'));
}
} else if (this.form.type === 'email' && this.form.email && reEmail.test(this.form.email)) {
const param = { email: this.form.email };
try {
this.passWordCodeTime = 60;
this.passWordTime = setInterval(() => {
this.passWordCodeTime--;
if (this.passWordCodeTime <= 0) {
this.passWordCodeTime = 0;
clearInterval(this.mobileTime);
this.passWordTime = null;
}
}, 1000);
await sendEmailVfcode(param);
} catch (error) {
this.$message.info(this.$t('global.codeFaile'));
}
} else {
this.$refs.ruleForm.validateField('email');
this.$refs.ruleForm.validateField('phone');
}
},
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (valid) {
const data = { email: this.form.email, mobile: this.form.phone, newPwd: md5(this.form.password), vfCode: this.form.vfCode };
findPassword(data).then(resp => {
this.$message.success('设置密码成功!' );
this.doClose();
}).catch(error => {
this.$message.error('设置密码失败:' + error.message);
});
}
});
}
}
};
</script>
<style scoped>
.confirm-control-speed .context {
padding-bottom: 40px !important;
border: 1px solid lightgray;
}
.ningbo-01__systerm .el-dialog .el-button{
display: block;
margin: 0 auto;
}
</style>

View File

@ -100,6 +100,9 @@
{{ $t('login.login') }}
</el-button>
</el-form-item>
<div style="display: inline-block;width: 100%;">
<div class="popover_box active" style="bottom: 50px;" @click="forgetPassword">忘记密码</div>
</div>
</el-form>
</div>
<float-part v-if="isProject && !versionBaseNoShow.includes(project)" />
@ -128,6 +131,7 @@
<!--</div>-->
</div>
<register ref="register" />
<forget-password ref="forgetPassword" />
</div>
</template>
@ -156,10 +160,11 @@ import { getSimulationInfoNew } from '@/api/simulation';
import { getSimulationInfoByGroup } from '@/api/rtSimulation';
import { getSessionStorage } from '@/utils/auth';
import Register from './register';
import ForgetPassword from './forgetPassword';
export default {
name: 'Login',
components: { QrcodeVue, FloatPart, Register },
components: { QrcodeVue, FloatPart, Register, ForgetPassword },
data() {
const validateName = (rule, value, callback) => {
if (value) {
@ -623,6 +628,9 @@ export default {
// },
registerUser() {
this.$refs.register.doShow();
},
forgetPassword() {
this.$refs.forgetPassword.doShow();
}
}
};
@ -762,7 +770,7 @@ export default {
.popover_box {
position: absolute;
right: 80px;
bottom: 106px;
bottom: 124px;
cursor: pointer;
color: #225592;
font-size: 14px;

View File

@ -15,6 +15,7 @@ import DictionaryEdit from './edit';
import CreateUser from './createUser';
import CreateSingleUser from './createSingleUser';
import BindCompany from './bindCompany';
import {adminResetUserPassword} from '@/api/management/user';
export default {
name: 'UserControl',
@ -163,6 +164,10 @@ export default {
name: '绑定组织管理员',
handleClick: this.handleBind
},
{
name: '重置密码',
handleClick: this.resetPassword
},
{
name: '删除',
handleClick: this.handleDelete
@ -222,6 +227,19 @@ export default {
handleBind(index, row) {
this.$refs.bindCompany.doShow(row);
},
resetPassword(index, row) {
this.$confirm('操作会将改用户密码重置为初始密码,是否继续', this.$t('global.tips'), {
confirmButtonText: this.$t('global.confirm'),
cancelButtonText: this.$t('global.cancel'),
type: 'warning'
}).then(() => {
adminResetUserPassword(row.id).then(response => {
this.$message.success('重置密码成功!');
}).catch(() => {
this.$message.error('重置密码失败!');
});
});
},
handleDelete(index, row) {
deleteUserInLogic(row.id).then(resp=> {
//