perf: Upgrade pwd

Author: fit2cloud-chenyw

backend/apps/system/api/user.py

@@ -1,10 +1,11 @@
 from fastapi import APIRouter
 from apps.system.crud.user import get_db_user, get_user_info
 from apps.system.models.user import UserModel
-from apps.system.schemas.system_schema import UserCreator, UserEditor, UserGrid, UserLanguage
+from apps.system.schemas.system_schema import PwdEditor, UserCreator, UserEditor, UserGrid, UserLanguage
 from common.core.deps import CurrentUser, SessionDep
 from common.core.pagination import Paginator
 from common.core.schemas import PaginatedResponse, PaginationParams
+from common.core.security import md5pwd, verify_md5pwd
 from common.utils.time import get_timestamp
 
 router = APIRouter(tags=["user"], prefix="/user")
@@ -66,10 +67,17 @@ async def langChange(session: SessionDep, current_user: CurrentUser, language: U
     lang = language.language
     if lang not in ["zh-CN", "en"]:
         return {"message": "Language not supported"}
-    db_user = session.get(UserModel, current_user.id)
-    if not db_user:
-        return {"message": "User not found"}
+    db_user: UserModel = get_db_user(session=session, user_id=current_user.id)
     db_user.language = lang
     session.add(db_user)
     session.commit()
-    return {"message": "Language changed successfully", "language": lang}
+    return {"message": "Language changed successfully", "language": lang}
+
+@router.put("/pwd")
+async def pwdUpdate(session: SessionDep, current_user: CurrentUser, editor: PwdEditor):
+    db_user: UserModel = get_db_user(session=session, user_id=current_user.id)
+    if not verify_md5pwd(editor.pwd, db_user.password):
+        raise RuntimeError("pwd error")
+    db_user.password = md5pwd(editor.new_pwd)
+    session.add(db_user)
+    session.commit()

backend/apps/system/schemas/system_schema.py

@@ -36,4 +36,8 @@ class UserEditor(UserCreator, BaseCreatorDTO):
 
 class UserGrid(UserEditor):
     create_time: int
-    language: str = "zh-CN"
+    language: str = "zh-CN"
+    
+class PwdEditor(BaseModel):
+    pwd: str
+    new_pwd: str

frontend/src/api/auth.ts

@@ -8,4 +8,5 @@ export const userApi = {
   delete: (id: number) => request.delete(`/settings/terminology/${id}`),
   query: (id: number) => request.get(`/settings/terminology/${id}`),
   language: (data: any) => request.put('/user/language', data),
+  pwd: (data: any) => request.put('/user/pwd', data),
 }

frontend/src/components/layout/Person.vue

@@ -8,14 +8,22 @@ import icon_translate_outlined from '@/assets/svg/icon_translate_outlined.svg'
 import icon_logout_outlined from '@/assets/svg/icon_logout_outlined.svg'
 import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg'
 import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg'
-
+import { useI18n } from 'vue-i18n'
+import PwdForm from './PwdForm.vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+const router = useRouter()
+const userStore = useUserStore()
+const pwdFormRef = ref()
+const { t } = useI18n()
 defineProps({
   collapse: { type: [Boolean], required: true },
 })
 
 const name = ref('飞小致')
 const currentLanguage = ref('zh-CN')
 const emit = defineEmits(['selectPerson'])
+const dialogVisible = ref(false)
 const languageList = [
   {
     name: 'English',
@@ -37,6 +45,20 @@ const handlePersonChange = () => {
 const handleDefaultLanguageChange = (item: any) => {
   currentLanguage.value = item.value
 }
+
+const openPwd = () => {
+  dialogVisible.value = true
+}
+const closePwd = () => {
+  dialogVisible.value = false
+}
+const savePwdHandler = () => {
+  pwdFormRef.value?.submit()
+}
+const logout = () => {
+  userStore.logout()
+  router.push('/login')
+}
 </script>
 
 <template>
@@ -64,7 +86,7 @@ const handleDefaultLanguageChange = (item: any) => {
           </el-icon>
           <div class="datasource-name">系统管理</div>
         </div>
-        <div class="popover-item">
+        <div class="popover-item" @click="openPwd">
           <el-icon size="16">
             <icon_key_outlined></icon_key_outlined>
           </el-icon>
@@ -104,7 +126,7 @@ const handleDefaultLanguageChange = (item: any) => {
           </el-icon>
           <div class="datasource-name">帮助</div>
         </div>
-        <div class="popover-item mr4">
+        <div class="popover-item mr4" @click="logout">
           <el-icon size="16">
             <icon_logout_outlined></icon_logout_outlined>
           </el-icon>
@@ -113,6 +135,16 @@ const handleDefaultLanguageChange = (item: any) => {
       </div>
     </div>
   </el-popover>
+
+  <el-dialog v-model="dialogVisible" :title="t('user.upgrade_pwd.title')" width="600">
+    <pwd-form v-if="dialogVisible" ref="pwdFormRef" @pwd-saved="closePwd" />
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="closePwd">{{ t('common.cancel') }}</el-button>
+        <el-button type="primary" @click="savePwdHandler">{{ t('common.save') }}</el-button>
+      </div>
+    </template>
+  </el-dialog>
 </template>
 
 <style lang="less" scoped>

frontend/src/components/layout/PwdForm.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+import { ref, reactive } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { userApi } from '@/api/auth'
+const { t } = useI18n()
+const pwdRef = ref()
+const pwdForm = reactive({
+  pwd: '',
+  new_pwd: '',
+  confirm_pwd: '',
+})
+
+const rules = {
+  pwd: [
+    {
+      required: true,
+      message: t('common.please_input', { msg: t('user.upgrade_pwd.old_pwd') }),
+      trigger: 'blur',
+    },
+  ],
+  new_pwd: [
+    {
+      required: true,
+      message: t('common.please_input', { msg: t('user.upgrade_pwd.new_pwd') }),
+      trigger: 'blur',
+    },
+  ],
+  confirm_pwd: [
+    {
+      required: true,
+      message: t('common.please_input', { msg: t('user.upgrade_pwd.confirm_pwd') }),
+      trigger: 'blur',
+    },
+  ],
+}
+
+const initForm = (item: any) => {
+  if (item) {
+    Object.assign(pwdForm, { ...item })
+  }
+  pwdRef.value.clearValidate()
+}
+
+const emits = defineEmits(['pwdSaved'])
+
+const submit = () => {
+  pwdRef.value.validate((res: any) => {
+    if (res) {
+      const param = {
+        pwd: pwdForm.pwd,
+        new_pwd: pwdForm.new_pwd,
+      }
+      userApi.pwd(param).then(() => {
+        ElMessage({
+          type: 'success',
+          message: t('common.save_success'),
+        })
+        emits('pwdSaved')
+      })
+    }
+  })
+}
+defineExpose({
+  initForm,
+  submit,
+})
+</script>
+
+<template>
+  <div class="params-form">
+    <el-form ref="pwdRef" :rules="rules" label-position="top" :model="pwdForm" style="width: 100%">
+      <el-form-item prop="pwd" :label="t('user.upgrade_pwd.old_pwd')">
+        <el-input
+          v-model="pwdForm.pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.old_pwd') })"
+          type="password"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item prop="new_pwd" :label="t('user.upgrade_pwd.new_pwd')">
+        <el-input
+          v-model="pwdForm.new_pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.new_pwd') })"
+          type="password"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item prop="confirm_pwd" :label="t('user.upgrade_pwd.confirm_pwd')">
+        <el-input
+          v-model="pwdForm.confirm_pwd"
+          :placeholder="t('common.please_input', { msg: t('user.upgrade_pwd.confirm_pwd') })"
+          type="password"
+          show-password
+        />
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.params-form {
+  .ed-form-item--default {
+    margin-bottom: 16px;
+
+    &.is-error {
+      margin-bottom: 40px;
+    }
+  }
+
+  .ed-input-number {
+    width: 100%;
+  }
+}
+</style>

frontend/src/i18n/zh-CN.json

@@ -17,7 +17,8 @@
     "save_success": "保存成功",
     "next": "下一步",
     "save": "保存",
-    "logout": "退出登录"
+    "logout": "退出登录",
+    "please_input": "请输入{msg}"
   },
   "dashboard": {
     "select_dashboard": "请选择仪表板",
@@ -246,5 +247,14 @@
     "remark": "备注",
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
+  },
+  "user": {
+    "title": "用户管理",
+    "upgrade_pwd": {
+      "title": "修改密码",
+      "old_pwd": "旧密码",
+      "new_pwd": "新密码",
+      "confirm_pwd": "确认密码"
+    }
   }
 }