From e80f3f02aa37b05f8ed0186df877bdc6d47fbaab Mon Sep 17 00:00:00 2001
From: Harry-zklcdc <zklcdc@qq.com>
Date: Mon, 24 Feb 2025 16:40:52 +0800
Subject: [PATCH] =?UTF-8?q?[Feat]=20=E2=9C=A8=20Add=20ResetPassword=20Page?=
 =?UTF-8?q?=20#15?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api.js                   |  3 ++
 frontend/src/views/users/Settings.vue | 60 +++++++++++++++++++++++----
 routers/api/v1/user/routers.go        |  2 +-
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/frontend/src/api.js b/frontend/src/api.js
index 89d9c96..d53e178 100644
--- a/frontend/src/api.js
+++ b/frontend/src/api.js
@@ -35,6 +35,9 @@ export default {
   UserRegister(data) {
     return ajax('user/register', 'post', { data })
   },
+  UserResetPassword(data) {
+    return ajax('user/reset-password', 'post', { data })
+  },
   UserVerifyRequest() {
     return ajax(`user/verify`, 'post', {})
   },
diff --git a/frontend/src/views/users/Settings.vue b/frontend/src/views/users/Settings.vue
index 95d98db..df10d5a 100644
--- a/frontend/src/views/users/Settings.vue
+++ b/frontend/src/views/users/Settings.vue
@@ -7,7 +7,7 @@
           <div class="font-semibold text-xl">邮箱验证</div>
           <div class="flex flex-col gap-2">
             <label for="email">邮箱</label>
-            <InputText v-model="userProfile.email" id="email" type="text" disabled />
+            <InputText v-model="userProfile.email" type="text" disabled />
           </div>
           <div class="mt-2">
             <Button v-if="!userProfile.verify && !verifyRequesting" label="验证" severity="warn"
@@ -22,8 +22,8 @@
           <div class="font-semibold text-xl">修改邮箱</div>
           <div class="flex flex-col gap-2">
             <label for="email">邮箱</label>
-            <InputText v-if="!emailModifyStatus" v-model="userProfile.email" id="email" type="text" disabled />
-            <InputText v-else v-model="emailModifyValue" id="email" type="text" />
+            <InputText v-if="!emailModifyStatus" v-model="userProfile.email" type="text" disabled />
+            <InputText v-else v-model="emailModifyValue" type="text" />
           </div>
           <div v-if="!emailModifyStatus" class="mt-2">
             <Button label="修改" style="width: 5.6rem; float: right;" @click="emailModifyStatus = true" />
@@ -41,18 +41,20 @@
           <div class="font-semibold text-xl">修改密码</div>
           <div class="flex flex-col gap-2">
             <label for="old_password">原密码</label>
-            <InputText id="old_password" type="text" />
+            <Password v-model="resetPasswordData.old_password" :toggleMask="true" :feedback="false" />
           </div>
           <div class="flex flex-col gap-2">
             <label for="new_password">新密码</label>
-            <InputText id="new_password" type="text" />
+            <Password v-model="resetPasswordData.new_password" :toggleMask="true" :feedback="false" />
           </div>
           <div class="flex flex-col gap-2">
             <label for="re_password">重复密码</label>
-            <InputText id="re_password" type="text" />
+            <Password v-model="resetPasswordData.re_password" :toggleMask="true" :feedback="false" />
           </div>
           <div class="mt-2">
-            <Button label="保存" style="width: 5.6rem; float: right;" />
+            <Button v-if="!resetPasswordRequesting" label="保存" style="width: 5.6rem; float: right;"
+              @click="resetPassword" />
+            <Button v-else label="保存中" icon="pi pi-spin pi-spinner" disabled style="width: 7.2rem; float: right;" />
           </div>
         </div>
       </div>
@@ -75,6 +77,13 @@ const verifyRequesting = ref(false)
 const emailModifyStatus = ref(false)
 const emailModifyValue = ref('')
 
+const resetPasswordRequesting = ref(false)
+const resetPasswordData = ref({
+  old_password: '',
+  new_password: '',
+  re_password: ''
+})
+
 const getProfile = () => {
   api.GetUserProfile().then((res) => {
     userProfile.value = res.data.data.result
@@ -98,6 +107,43 @@ const emailVerify = () => {
   })
 }
 
+const resetPassword = () => {
+  resetPasswordRequesting.value = true
+
+  if (resetPasswordData.value.old_password == "") {
+    toast.add({ severity: 'error', summary: '原密码不能为空', detail: '请重新输入', life: 3000 })
+    resetPasswordRequesting.value = false
+    return
+  }
+
+  if (resetPasswordData.value.new_password == "") {
+    toast.add({ severity: 'error', summary: '新密码不能为空', detail: '请重新输入', life: 3000 })
+    resetPasswordRequesting.value = false
+    return
+  }
+
+  if (resetPasswordData.value.re_password == "") {
+    toast.add({ severity: 'error', summary: '重复密码不能为空', detail: '请重新输入', life: 3000 })
+    resetPasswordRequesting.value = false
+    return
+  }
+
+  if (resetPasswordData.value.new_password != resetPasswordData.value.re_password) {
+    toast.add({ severity: 'error', summary: '两次密码不一致', detail: '请重新输入', life: 3000 })
+    resetPasswordRequesting.value = false
+    return
+  }
+
+  api.UserResetPassword(resetPasswordData.value).then((res) => {
+    toast.add({ severity: 'success', summary: '修改成功', detail: '请重新登录', life: 3000 })
+    resetPasswordRequesting.value = false
+  }).catch((err) => {
+    toast.add({ severity: 'error', summary: '修改失败', detail: err.response.data.msg, life: 3000 })
+    resetPasswordRequesting.value = false
+    console.error(err)
+  })
+}
+
 onMounted(() => {
   getProfile()
 })
diff --git a/routers/api/v1/user/routers.go b/routers/api/v1/user/routers.go
index ba80af0..1f2bf3d 100644
--- a/routers/api/v1/user/routers.go
+++ b/routers/api/v1/user/routers.go
@@ -24,7 +24,7 @@ func InitUser(party router.Party) {
 	party.Get("/logout", middleware.AuthCheck, logoutHandler)
 	party.Post("/register", registerHandler)
 	party.Get("/profile", middleware.AuthCheck, profileHandler)
-	party.Post("/resetPassword", middleware.AuthCheck, resetPasswordHandler)
+	party.Post("/reset-password", middleware.AuthCheck, resetPasswordHandler)
 	party.Get("/verify/{code:string}", verifyHandler)
 	party.Post("/verify", middleware.AuthCheck, verifySendHandler)