From 15e9f25ff70780da2219fba47e4563f43b8e303e Mon Sep 17 00:00:00 2001
From: yyhouc <792163605@qq.com>
Date: Mon, 10 Jul 2023 11:02:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BF=AE=E6=94=B9=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/response/administrator.js             |  26 ++
 .../navBars/breadcrumb/updatePassword.vue     | 238 ++++++++++++++++++
 src/layout/navBars/breadcrumb/user.vue        |  15 +-
 3 files changed, 275 insertions(+), 4 deletions(-)
 create mode 100644 src/layout/navBars/breadcrumb/updatePassword.vue

diff --git a/src/api/response/administrator.js b/src/api/response/administrator.js
index 3cdfee0..aac24ad 100644
--- a/src/api/response/administrator.js
+++ b/src/api/response/administrator.js
@@ -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,
+           
+        }
+    });
+}
\ No newline at end of file
diff --git a/src/layout/navBars/breadcrumb/updatePassword.vue b/src/layout/navBars/breadcrumb/updatePassword.vue
new file mode 100644
index 0000000..0d78d87
--- /dev/null
+++ b/src/layout/navBars/breadcrumb/updatePassword.vue
@@ -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>
diff --git a/src/layout/navBars/breadcrumb/user.vue b/src/layout/navBars/breadcrumb/user.vue
index 47f65c0..66f1140 100644
--- a/src/layout/navBars/breadcrumb/user.vue
+++ b/src/layout/navBars/breadcrumb/user.vue
@@ -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(() => {