添加修改密码
This commit is contained in:
yyhouc
parent
4d63084f45
commit
15e9f25ff7
|
|
@ -91,3 +91,29 @@ export const updatePassword = (email,newPassword,tenantId,code) => {
|
|||
}
|
||||
});
|
||||
}
|
||||
//根据用户名与租户Id验证密码是否正确
|
||||
export const checkPassword = (account,password,tenantId) => {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/administrator/checkPassword',
|
||||
method: 'get',
|
||||
params: {
|
||||
account,
|
||||
tenantId,
|
||||
password
|
||||
}
|
||||
});
|
||||
}
|
||||
//根据用户名、租户ID、旧密码修改密码
|
||||
export const updatePasswordByOldPassword = (account,oldPassword,newPassword,tenantId) => {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/administrator/updatePasswordByOldPassword',
|
||||
method: 'put',
|
||||
params: {
|
||||
account,
|
||||
tenantId,
|
||||
oldPassword,
|
||||
newPassword,
|
||||
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<template>
|
||||
|
||||
<el-dialog
|
||||
v-model="state.dialogVisible"
|
||||
title="Edit Password"
|
||||
width="30%"
|
||||
>
|
||||
<el-form size="large" class="login-content-form" :rules="rules" :model="state.ruleForm">
|
||||
<el-form-item class="login-animation1" prop="userName" >
|
||||
<el-input text placeholder="Please input email," v-model="state.ruleForm.userName" clearable autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation3" prop="oldPassword">
|
||||
<el-input :type="state.isShowPassword2 ? 'text' : 'password'" placeholder="Please input new Old password" v-model="state.ruleForm.oldPassword" autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i
|
||||
class="iconfont el-input__icon login-content-password"
|
||||
:class="state.isShowPassword2 ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||||
@click="state.isShowPassword2 = !state.isShowPassword2"
|
||||
>
|
||||
</i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2" prop="password">
|
||||
<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="Please input new password" v-model="state.ruleForm.password" autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i
|
||||
class="iconfont el-input__icon login-content-password"
|
||||
:class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||||
@click="state.isShowPassword = !state.isShowPassword"
|
||||
>
|
||||
</i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation2" prop="password1">
|
||||
<el-input :type="state.isShowPassword1 ? 'text' : 'password'" placeholder="Please enter a confirmation password" v-model="state.ruleForm.password1" autocomplete="off">
|
||||
<template #prefix>
|
||||
<el-icon class="el-input__icon"><ele-Unlock /></el-icon>
|
||||
</template>
|
||||
<template #suffix>
|
||||
<i
|
||||
class="iconfont el-input__icon login-content-password"
|
||||
:class="state.isShowPassword1 ? 'icon-yincangmima' : 'icon-xianshimima'"
|
||||
@click="state.isShowPassword1 = !state.isShowPassword1"
|
||||
>
|
||||
</i>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="login-animation4">
|
||||
<el-button type="primary" class="login-content-submit" round v-waves @click="onSignIn" :loading="state.loading.signIn">
|
||||
<span>Edit</span>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup name="updatePassword">
|
||||
import { reactive, computed, onMounted,ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useThemeConfig } from '/@/stores/themeConfig';
|
||||
import {checkAccountOrEmail,checkPassword,updatePasswordByOldPassword} from '/@/api/response/administrator';
|
||||
//引入Session
|
||||
import { Local as Session } from '/@/utils/storage';
|
||||
// 定义变量内容
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { website } = storeToRefs(storesThemeConfig);
|
||||
const sendRef = ref(null);
|
||||
//定义组件消息
|
||||
const e =defineEmits(["success"]);
|
||||
const state = reactive({
|
||||
isShowPassword: false,
|
||||
ruleForm: {
|
||||
//租户ID
|
||||
tenantId: website.value.tenantId,
|
||||
//用户名
|
||||
userName: "792163605@qq.com",
|
||||
//密码
|
||||
password: "",
|
||||
//账号类型
|
||||
type: "account",
|
||||
//验证码key
|
||||
key: "",
|
||||
//验证码code
|
||||
code: "",
|
||||
},
|
||||
loading: {
|
||||
signIn: false,
|
||||
},
|
||||
send:"Send",
|
||||
captchaMode: website.value.captchaMode,
|
||||
//验证码localStroage key
|
||||
captchaKey: "captchaKey",
|
||||
dialogVisible: false,
|
||||
});
|
||||
const rules = reactive({
|
||||
userName: [
|
||||
{ required: true, message: "Please enter your email", trigger: "blur" },
|
||||
{ type: "email", message: "Please enter the email", trigger: "blur" },
|
||||
//自定义验证是否存在
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
checkAccountOrEmail(value,website.value.tenantId).then((res) => {
|
||||
//判断res.data 是否存在 或者等于false 或者空
|
||||
if (res.data || res.data == false || res.data == "") {
|
||||
//提示是否注册
|
||||
callback(new Error("The email is not registered"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: "Please enter a new password", trigger: "blur" },
|
||||
{ min: 6, max: 20, message: "The password length is 6-20 characters", trigger: "blur" },
|
||||
],
|
||||
password1: [
|
||||
{ required: true, message: "Please enter a confirmation password", trigger: "blur" },
|
||||
{ min: 6, max: 20, message: "The password length is 6-20 characters", trigger: "blur" },
|
||||
//验证是否与password一致
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
if (value != state.ruleForm.password) {
|
||||
callback(new Error("The password is inconsistent"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
oldPassword: [
|
||||
{ required: true, message: "Please enter the verification code", trigger: "blur" },
|
||||
//自定义验证请求后台密码是否正确
|
||||
{
|
||||
validator: (rule, value, callback) => {
|
||||
//判断是否存在
|
||||
if (value) {
|
||||
//判断是否存在
|
||||
if (state.ruleForm.userName) {
|
||||
//请求后台验证
|
||||
checkPassword(state.ruleForm.userName,value,website.value.tenantId).then((res) => {
|
||||
//如果res.data存在并且等于true则验证通过。否则使用英语提示旧密码不正确，如果忘记密码请退出系统后，点击登录页面的忘记密码,进行密码重置。
|
||||
if (res && res == true) {
|
||||
callback();
|
||||
} else {
|
||||
callback(new Error("The old password is incorrect"));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
callback(new Error("Please enter your email"));
|
||||
}
|
||||
} else {
|
||||
callback(new Error("Please enter the verification code"));
|
||||
}
|
||||
},
|
||||
trigger: "blur",
|
||||
},
|
||||
|
||||
],
|
||||
})
|
||||
const show = () => {
|
||||
state.dialogVisible = true;
|
||||
};
|
||||
const onSignIn = () => {
|
||||
state.loading.signIn = true;
|
||||
updatePasswordByOldPassword(
|
||||
state.ruleForm.userName,
|
||||
state.ruleForm.oldPassword,
|
||||
state.ruleForm.password,
|
||||
website.value.tenantId
|
||||
).then((res) => {
|
||||
state.loading.signIn = false;
|
||||
if (res) {
|
||||
ElMessage.success("Password reset successfully");
|
||||
state.dialogVisible = false;
|
||||
e.success();
|
||||
}
|
||||
});
|
||||
};
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.login-content-form {
|
||||
margin-top: 12px;
|
||||
@for $i from 1 through 4 {
|
||||
.login-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
.login-content-password {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
.login-content-code {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
.login-content-submit {
|
||||
width: 100%;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 300;
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
.el-form-item--large {
|
||||
margin-bottom: 14px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
<div class="layout-navbars-breadcrumb-user-icon mr10"
|
||||
@click="onScreenfullClick">
|
||||
<i class="iconfont"
|
||||
:title="state.isScreenfull ? '关全屏' : '开全屏'"
|
||||
:title="state.isScreenfull ? 'Off full screen' : 'Full screen'"
|
||||
:class="!state.isScreenfull ? 'icon-fullscreen' : 'icon-tuichuquanping'"></i>
|
||||
</div>
|
||||
|
||||
|
|
@ -87,14 +87,15 @@
|
|||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="/home">Dashboard</el-dropdown-item>
|
||||
<el-dropdown-item divided
|
||||
command="logOut">Sign out</el-dropdown-item>
|
||||
<el-dropdown-item @Click="editPassword">Edit Password</el-dropdown-item>
|
||||
<!-- <el-dropdown-item command="/home">Dashboard</el-dropdown-item> -->
|
||||
<el-dropdown-item divided command="logOut">Sign out</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
|
||||
<Search ref="searchRef" />
|
||||
<updatePassword ref="updatePasswordRef"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -110,10 +111,12 @@ import mittBus from '/@/utils/mitt';
|
|||
import { Session, Local } from '/@/utils/storage';
|
||||
import { refreshToken } from '/@/api/system/user.js'
|
||||
import { useTranslate } from '/@/stores/translate';
|
||||
//引入updatePassword
|
||||
import other from '/@/utils/other';
|
||||
// 引入组件
|
||||
const UserNews = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/userNews.vue'));
|
||||
const Search = defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/search.vue'));
|
||||
const updatePassword =defineAsyncComponent(() => import('/@/layout/navBars/breadcrumb/updatePassword.vue'));
|
||||
const useTranslateStore = useTranslate()
|
||||
const onLanguageChange = (lang) => {
|
||||
if (lang == "en") {
|
||||
|
|
@ -133,12 +136,16 @@ const { userInfos } = storeToRefs(stores);
|
|||
const { themeConfig, website } = storeToRefs(storesThemeConfig);
|
||||
|
||||
const searchRef = ref();
|
||||
const updatePasswordRef = ref();
|
||||
const state = reactive({
|
||||
isScreenfull: false,
|
||||
disabledSize: 'large',
|
||||
setIntervalId: null,
|
||||
disabledI18n: "en",
|
||||
});
|
||||
const editPassword = () => {
|
||||
updatePasswordRef.value.show()
|
||||
}
|
||||
|
||||
// 设置分割样式
|
||||
const layoutUserFlexNum = computed(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue