feat(sj_1.0.0): 支持用户修改密码

public/iconify/ph.json

@@ -10,6 +10,9 @@
     },
     "sign-out": {
       "body": "<path fill=\"currentColor\" d=\"M120 216a8 8 0 0 1-8 8H48a8 8 0 0 1-8-8V40a8 8 0 0 1 8-8h64a8 8 0 0 1 0 16H56v160h56a8 8 0 0 1 8 8m109.66-93.66l-40-40a8 8 0 0 0-11.32 11.32L204.69 120H112a8 8 0 0 0 0 16h92.69l-26.35 26.34a8 8 0 0 0 11.32 11.32l40-40a8 8 0 0 0 0-11.32\"/>"
+    },
+    "password": {
+      "body": "<path fill=\"currentColor\" d=\"M48 56v144a8 8 0 0 1-16 0V56a8 8 0 0 1 16 0m92 54.5l-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.5a8 8 0 0 0-5 15.22l20 6.49l-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17l12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17l20-6.49A8 8 0 0 0 140 110.5m106 5.14a8 8 0 0 0-10-5.14l-20 6.5V96a8 8 0 0 0-16 0v21l-20-6.49a8 8 0 0 0-4.95 15.22l20 6.49l-12.34 17a8 8 0 1 0 12.94 9.4l12.34-17l12.34 17a8 8 0 1 0 12.94-9.4l-12.34-17l20-6.49a8 8 0 0 0 5.07-10.09\"/>"
     }
   }
 }

src/layouts/modules/global-header/components/change-password.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { computed, reactive } from 'vue';
+import OperateDrawer from '@/components/common/operate-drawer.vue';
+import { useFormRules, useNaiveForm } from '@/hooks/common/form';
+import { $t } from '@/locales';
+import { md5 } from '@/utils/common';
+import { fetchUpdateUserPassword } from '@/service/api';
+import { useAppStore } from '@/store/modules/app';
+
+defineOptions({
+  name: 'ChangePassword'
+});
+
+const appStore = useAppStore();
+
+const visible = defineModel<boolean>('visible', {
+  default: false
+});
+
+type Model = Pick<Api.UserManager.UpdateUserPassword, 'oldPassword' | 'newPassword' | 'checkPassword'>;
+
+const model: Model = reactive(createDefaultModel());
+
+function createDefaultModel(): Model {
+  return {
+    oldPassword: '',
+    newPassword: '',
+    checkPassword: ''
+  };
+}
+
+const { formRef, validate } = useNaiveForm();
+
+type RuleRecord = Partial<Record<keyof Model, App.Global.FormRule[]>>;
+
+const rules = computed<RuleRecord>(() => {
+  const { formRules, createConfirmPwdRule } = useFormRules();
+
+  return {
+    newPassword: formRules.pwd,
+    checkPassword: createConfirmPwdRule(model.newPassword!)
+  };
+});
+
+function closeDrawer() {
+  visible.value = false;
+}
+
+async function handleSubmit() {
+  await validate();
+
+  const { oldPassword, newPassword } = model;
+  const { error } = await fetchUpdateUserPassword({
+    oldPassword: md5(oldPassword!),
+    newPassword: md5(newPassword!)
+  });
+  if (error) return;
+  window.$message?.success($t('common.updateSuccess'));
+
+  closeDrawer();
+  appStore.reloadPage(500);
+}
+</script>
+
+<template>
+  <OperateDrawer v-model="visible" title="修改密码">
+    <NForm ref="formRef" :model="model" :rules="rules">
+      <NFormItem :label="$t('page.userManager.oldPassword')" path="oldPassword">
+        <NInput
+          v-model:value="model.oldPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.userManager.form.oldPassword')"
+        />
+      </NFormItem>
+      <NFormItem :label="$t('page.userManager.newPassword')" path="newPassword">
+        <NInput
+          v-model:value="model.newPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.userManager.form.newPassword')"
+        />
+      </NFormItem>
+      <NFormItem :label="$t('page.userManager.checkPassword')" path="checkPassword">
+        <NInput
+          v-model:value="model.checkPassword"
+          type="password"
+          show-password-on="click"
+          :placeholder="$t('page.userManager.form.checkPassword')"
+        />
+      </NFormItem>
+    </NForm>
+    <template #footer>
+      <NSpace :size="16">
+        <NButton @click="closeDrawer">{{ $t('common.cancel') }}</NButton>
+        <NButton type="primary" @click="handleSubmit">{{ $t('common.save') }}</NButton>
+      </NSpace>
+    </template>
+  </OperateDrawer>
+</template>
+
+<style scoped></style>

src/layouts/modules/global-header/components/user-avatar.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { VNode } from 'vue';
+import { useBoolean } from '@sa/hooks';
 import { useAuthStore } from '@/store/modules/auth';
 import { useRouterPush } from '@/hooks/common/router';
 import { useSvgIcon } from '@/hooks/common/icon';
 import { $t } from '@/locales';
+import ChangePassword from './change-password.vue';
 
 defineOptions({
   name: 'UserAvatar'
@@ -18,7 +20,7 @@ function loginOrRegister() {
   toLogin();
 }
 
-type DropdownKey = 'user-center' | 'logout';
+type DropdownKey = 'password' | 'logout';
 
 type DropdownOption =
   | {
@@ -34,9 +36,9 @@ type DropdownOption =
 const options = computed(() => {
   const opts: DropdownOption[] = [
     {
-      label: $t('common.userCenter'),
+      label: $t('common.updatePassword'),
-      key: 'user-center',
+      key: 'password',
-      icon: SvgIconVNode({ icon: 'ph:user-circle', fontSize: 18 })
+      icon: SvgIconVNode({ icon: 'ph:password', fontSize: 18 })
     },
     {
       type: 'divider',
@@ -52,6 +54,8 @@ const options = computed(() => {
   return opts;
 });
 
+const { bool: drawerVisible, setTrue: openDrawer } = useBoolean(false);
+
 function logout() {
   window.$dialog?.info({
     title: $t('common.tip'),
@@ -67,10 +71,16 @@ function logout() {
 function handleDropdown(key: DropdownKey) {
   if (key === 'logout') {
     logout();
+  } else if (key === 'password') {
+    handleChangePassword();
   } else {
     routerPushByKey(key);
   }
 }
+
+function handleChangePassword() {
+  openDrawer();
+}
 </script>
 
 <template>
@@ -85,6 +95,7 @@ function handleDropdown(key: DropdownKey) {
       </ButtonIcon>
     </div>
   </NDropdown>
+  <ChangePassword v-model:visible="drawerVisible"></ChangePassword>
 </template>
 
 <style scoped></style>

src/locales/langs/en-us.ts

@@ -41,6 +41,7 @@ const local: App.I18n.Schema = {
     keywordSearch: 'Please enter keyword',
     logout: 'Logout',
     logoutConfirm: 'Are you sure you want to log out?',
+    updatePassword: 'Update password',
     lookForward: 'Coming soon',
     modify: 'Modify',
     modifySuccess: 'Modify Success',
@@ -830,13 +831,17 @@ const local: App.I18n.Schema = {
       password: 'Password',
       updatePassword: 'Update Password',
       permissionList: 'Permission List',
+      oldPassword: 'Old Password',
+      newPassword: 'New Password',
       form: {
         role: 'Please enter Role',
         password: 'Please enter Password',
         username: 'Please enter Username',
         checkPassword: 'Please enter Confirm Password',
         permissions: 'Please select Group',
-        namespaceIds: 'Please select Namespaces'
+        namespaceIds: 'Please select Namespaces',
+        oldPassword: 'Please enter old password',
+        newPassword: 'Please enter new password'
       },
       addUser: 'Add User',
       editUser: 'Add User',

src/locales/langs/zh-cn.ts

@@ -41,6 +41,7 @@ const local: App.I18n.Schema = {
     keywordSearch: '请输入关键词搜索',
     logout: '退出登录',
     logoutConfirm: '确认退出登录吗？',
+    updatePassword: '修改密码',
     lookForward: '敬请期待',
     modify: '修改',
     modifySuccess: '修改成功',
@@ -838,13 +839,17 @@ const local: App.I18n.Schema = {
       password: '密码',
       updatePassword: '更新密码',
       permissionList: '权限列表',
+      oldPassword: '旧密码',
+      newPassword: '新密码',
       form: {
         role: '请输入角色',
         password: '请输入密码',
         username: '请输入用户名',
         checkPassword: '请输入确认密码',
         permissions: '请选择组',
-        namespaceIds: '请选择命名空间'
+        namespaceIds: '请选择命名空间',
+        oldPassword: '请输入旧密码',
+        newPassword: '请输入新密码'
       },
       addUser: '新增用户',
       editUser: '编辑用户',

src/service/api/user.ts

@@ -34,3 +34,12 @@ export function fetchDelUser(id: number) {
     method: 'delete'
   });
 }
+
+/** update user password */
+export function fetchUpdateUserPassword(data: Api.UserManager.UpdateUserPassword) {
+  return request<boolean>({
+    url: '/update-user-password',
+    method: 'put',
+    data
+  });
+}

src/typings/api.d.ts

@@ -1209,6 +1209,15 @@ declare namespace Api {
 
     /** 1、user 2、admin */
     type Role = 1 | 2;
+
+    type UpdateUserPassword = Common.CommonRecord<{
+      /** 旧密码 */
+      oldPassword: string;
+      /** 新密码 */
+      newPassword: string;
+      /** 确认密码 */
+      checkPassword?: string;
+    }>;
   }
 
   /**

src/typings/app.d.ts

@@ -291,6 +291,7 @@ declare namespace App {
         keywordSearch: string;
         logout: string;
         logoutConfirm: string;
+        updatePassword: string;
         lookForward: string;
         modify: string;
         modifySuccess: string;
@@ -997,6 +998,8 @@ declare namespace App {
           permissions: string;
           updatePassword: string;
           permissionList: string;
+          oldPassword: string;
+          newPassword: string;
           form: {
             role: string;
             password: string;
@@ -1004,6 +1007,8 @@ declare namespace App {
             checkPassword: string;
             permissions: string;
             namespaceIds: string;
+            oldPassword: string;
+            newPassword: string;
           };
           addUser: string;
           editUser: string;