feat: reset password by email

src/api/user/index.ts

@@ -108,3 +108,17 @@ export async function getUserCommentApi(
 
   return response
 }
+
+// 根据用户邮箱重置密码
+export async function updateUserPasswordByEmailApi(
+  request: User.UserResetPasswordByEmailRequestData
+): Promise<User.UserResetPasswordByEmailResponseData> {
+  const url = `/auth/password/reset`
+
+  const response = fetchPost<User.UserResetPasswordByEmailResponseData>(
+    url,
+    request
+  )
+
+  return response
+}

src/api/user/types/user.ts

@@ -77,6 +77,13 @@ export interface UserGetUserCommentRequestData {
   cidArray: number[]
 }
 
+// 用户验证邮箱重置密码,不根据密码重置
+export interface UserResetPasswordByEmailRequestData {
+  email: string
+  code: string
+  newPassword: string
+}
+
 export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>
 
 export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
@@ -98,3 +105,5 @@ export type UserGetUserReplyResponseData = KUNGalgameResponseData<UserReply[]>
 export type UserGetUserCommentResponseData = KUNGalgameResponseData<
   UserComment[]
 >
+
+export type UserResetPasswordByEmailResponseData = KUNGalgameResponseData<{}>

src/language/en.ts

@@ -248,6 +248,7 @@ export default {
     },
     code: {
       code: `The verification code has been sent. You can check it in your email. Please check your spam folder. If you haven't received the email, you can try to resend the email verification code after 30 seconds.`,
+      password: 'Are you sure you want to change the password?',
     },
   },
 }

src/language/zh.ts

@@ -245,6 +245,7 @@ export default {
     },
     code: {
       code: '验证码已发送，您可以在邮箱中查看，注意查看垃圾邮件，如果未收到邮件，您可以在 30 秒后尝试重新发送邮箱验证码',
+      password: '确定更改密码吗?',
     },
   },
 }

src/store/modules/kungalgamer.ts

@@ -32,6 +32,8 @@ import type {
   UserGetUserReplyResponseData,
   UserGetUserCommentRequestData,
   UserGetUserCommentResponseData,
+  UserResetPasswordByEmailRequestData,
+  UserResetPasswordByEmailResponseData,
 } from '@/api'
 
 import {
@@ -44,6 +46,7 @@ import {
   getUserTopicApi,
   getUserReplyApi,
   getUserCommentApi,
+  updateUserPasswordByEmailApi,
 } from '@/api'
 
 // kungalgame store 类型
@@ -217,5 +220,19 @@ export const useKUNGalgameUserStore = defineStore({
       }
       return getUserCommentApi(requestData)
     },
+
+    // 根据用户邮箱重置密码
+    async updatePasswordByEmail(
+      email: string,
+      code: string,
+      newPassword: string
+    ): Promise<UserResetPasswordByEmailResponseData> {
+      const requestData: UserResetPasswordByEmailRequestData = {
+        email: email,
+        code: code,
+        newPassword: newPassword,
+      }
+      return updateUserPasswordByEmailApi(requestData)
+    },
   },
 })

src/types/kungalgame.api.d.ts

@@ -1,4 +1,5 @@
-/** 所有 api 接口的响应数据都为该格式 */
+// 所有 api 接口的响应数据都为该格式
+
 interface KUNGalgameResponseData<T> {
   code: number
   message: string

src/views/Home/content/aside/components/Aside.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 // 导入功能区的单个项目
-import asideItem from '@/types/home/aside-item'
+import asideItem from './asideItem'
 </script>
 
 <template>
@@ -12,16 +12,6 @@ import asideItem from '@/types/home/aside-item'
       }}</router-link>
     </span>
   </div>
-  <!-- 
-
-    TODO:
-    <span><Icon icon="line-md:uploading-loop" /></span>
-    <span><Icon icon="healthicons:money-bag-outline" /></span>
-    <span><Icon icon="solar:ranking-outline" /></span>
-    <span><Icon icon="line-md:clipboard-list" /></span>
-    <span><Icon icon="fluent-mdl2:contact-list" /></span>
-    <span><Icon icon="line-md:alert" /></span>
-   -->
 </template>
 
 <style lang="scss" scoped>

src/views/Home/content/aside/components/AsideActive.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import Topic from './Topic.vue'
 // 导入功能区的单个项目
-import asideItem from '@/types/home/aside-item'
+import asideItem from './asideItem'
 
 // 接受父组件的传值
 const props = defineProps(['isActive'])

src/views/Home/content/aside/components/asideItem.ts

@@ -1,14 +1,14 @@
 /* 这是 KUNGalgame 主页侧边栏的单个项目内容 */
 
 // 单个项目的接口
-interface aside {
+interface AsideItem {
   index: number
   name: string
   router: string
 }
 
 // 顶部导航栏的项目
-const asideItem: aside[] = [
+const asideItem: AsideItem[] = [
   { index: 1, name: 'update', router: '/update-log' },
   { index: 2, name: 'balance', router: '/balance' },
   { index: 3, name: 'ranking', router: '/ranking' },

src/views/edit/components/Button.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 // 全局消息组件（底部）
 import { useKUNGalgameMessageStore } from '@/store/modules/message'
-// 全局消息组件（顶部）
-import message from '@/components/alert/Message'
 // 导入编辑话题的 store
 import { useKUNGalgameEditStore } from '@/store/modules/edit'
 import { storeToRefs } from 'pinia'

src/views/forgot/Forgot.vue

@@ -1,8 +1,20 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import Message from '@/components/alert/Message'
+import Code from '@/components/verification-code/Code.vue'
 import { checkEmail, checkCode, checkPassword } from './check'
 
+// 使用全局通知
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
+// 使用用户 store
+import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
+import { storeToRefs } from 'pinia'
+
+const { isShowCapture, isCaptureSuccessful } = storeToRefs(
+  useKUNGalgameMessageStore()
+)
+
 const input = reactive({
   email: '',
   code: '',
@@ -10,14 +22,27 @@ const input = reactive({
   confirmPassword: '',
 })
 
+const router = useRouter()
 // 切换界面
 const flag = ref(true)
+// 是否发送了验证码
+const isSendCode = ref(false)
 
 // 发送验证码
 const handleClickSendCode = () => {
   if (!checkEmail(input.email)) {
     return
   }
+
+  // 未完成人机验证
+  if (!isCaptureSuccessful.value) {
+    // 显示人机验证
+    isShowCapture.value = true
+    return
+  }
+
+  // 发送验证码
+  isSendCode.value = true
 }
 
 // 下一步
@@ -34,10 +59,32 @@ const handleClickPrev = () => {
 }
 
 // 确定更改密码
-const handleChangePassword = () => {
+const handleChangePassword = async () => {
   if (!checkPassword(input.newPassword, input.confirmPassword)) {
     return
   }
+
+  // 确定更改密码吗?
+  const result = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.code.password',
+    true
+  )
+  if (!result) {
+    return
+  }
+
+  const response = await useKUNGalgameUserStore().updatePasswordByEmail(
+    input.email,
+    input.code,
+    input.newPassword
+  )
+
+  if (response.code === 200) {
+    router.push('/login')
+    Message('Password change successfully!', '密码更改成功', 'success')
+  } else {
+    Message('Password change failed!', '密码更改失败', 'error')
+  }
 }
 </script>
 
@@ -74,7 +121,13 @@ const handleChangePassword = () => {
       </Transition>
 
       <div class="btn">
-        <button v-if="flag" @click="handleClickSendCode">发送验证码</button>
+        <Code
+          v-if="flag"
+          @click="handleClickSendCode"
+          class="code"
+          :email="input.email"
+          :isSendCode="isSendCode"
+        />
         <button v-if="flag" @click="handleClickNext">下一步</button>
         <button v-if="!flag" @click="handleClickPrev">上一步</button>
         <button v-if="!flag" @click="handleChangePassword">确定更改</button>
@@ -146,6 +199,7 @@ const handleChangePassword = () => {
   button {
     cursor: pointer;
     width: 110px;
+    height: 33px;
     padding: 7px 10px;
     border: 1px solid var(--kungalgame-blue-4);
     border-radius: 5px;

src/views/kungalgamer/content/Password.vue

@@ -4,6 +4,8 @@ import { useRouter } from 'vue-router'
 import type { UserInfo } from '@/api'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import Message from '@/components/alert/Message'
+// 使用全局通知
+import { useKUNGalgameMessageStore } from '@/store/modules/message'
 // 重置 store
 import { kungalgameStoreReset } from '@/store'
 // 重置路由
@@ -96,6 +98,15 @@ const handleChangePassword = async () => {
     return
   }
 
+  // 确定更改密码吗?
+  const result = await useKUNGalgameMessageStore().alert(
+    'AlertInfo.code.password',
+    true
+  )
+  if (!result) {
+    return
+  }
+
   const res = await useKUNGalgameUserStore().updatePassword(
     input.oldPassword,
     input.newPassword