feat: change password

src/api/user/index.ts

@@ -53,7 +53,18 @@ export async function getUserResetEmailCodeApi(
 export async function updateUserEmailApi(
   request: User.UserUpdateEmailRequestData
 ): Promise<User.UserUpdateEmailResponseData> {
-  const url = `/user/:uid/email`
+  const url = `/user/${request.uid}/email`
+
+  const response = fetchPut<User.UserUpdateEmailResponseData>(url, request)
+
+  return response
+}
+
+// 更新密码
+export async function updateUserPasswordApi(
+  request: User.UserUpdatePasswordRequestData
+): Promise<User.UserUpdatePasswordResponseData> {
+  const url = `/user/${request.uid}/password`
 
   const response = fetchPut<User.UserUpdateEmailResponseData>(url, request)
 

src/api/user/types/user.ts

@@ -30,6 +30,13 @@ export interface UserUpdateEmailRequestData {
   code: string
 }
 
+// 用户更新密码
+export interface UserUpdatePasswordRequestData {
+  uid: number
+  oldPassword: string
+  newPassword: string
+}
+
 export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>
 
 export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
@@ -41,3 +48,5 @@ export type UserGetUserEmailResponseData = KUNGalgameResponseData<{
 export type UserGetEmailRestCodeResponseData = KUNGalgameResponseData<{}>
 
 export type UserUpdateEmailResponseData = KUNGalgameResponseData<{}>
+
+export type UserUpdatePasswordResponseData = KUNGalgameResponseData<{}>

src/components/setting-panel/components/PageWidth.vue

@@ -108,5 +108,8 @@ onActivated(() => {
 .disabled {
   cursor: not-allowed;
   color: var(--kungalgame-font-color-0);
+  input {
+    cursor: not-allowed;
+  }
 }
 </style>

src/store/modules/kungalgamer.ts

@@ -24,6 +24,8 @@ import type {
   UserGetEmailRestCodeResponseData,
   UserUpdateEmailRequestData,
   UserUpdateEmailResponseData,
+  UserUpdatePasswordRequestData,
+  UserUpdatePasswordResponseData,
 } from '@/api'
 
 import {
@@ -32,6 +34,7 @@ import {
   getUserEmailApi,
   getUserResetEmailCodeApi,
   updateUserEmailApi,
+  updateUserPasswordApi,
 } from '@/api'
 
 // kungalgame store 类型
@@ -161,5 +164,18 @@ export const useKUNGalgameUserStore = defineStore({
       }
       return updateUserEmailApi(requestData)
     },
+
+    // 更新密码
+    async updatePassword(
+      oldPassword: string,
+      newPassword: string
+    ): Promise<UserUpdatePasswordResponseData> {
+      const requestData: UserUpdatePasswordRequestData = {
+        uid: this.uid,
+        oldPassword: oldPassword,
+        newPassword: newPassword,
+      }
+      return updateUserPasswordApi(requestData)
+    },
   },
 })

src/views/kungalgamer/content/Password.vue

@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import type { UserInfo } from '@/api'
 import { useKUNGalgameUserStore } from '@/store/modules/kungalgamer'
 import Message from '@/components/alert/Message'
-import { checkSendCode, checkResetEmail } from '../utils/check'
+import {
+  checkSendCode,
+  checkResetEmail,
+  checkChangePassword,
+} from '../utils/check'
 
 const props = defineProps<{
   user: UserInfo
@@ -11,22 +15,32 @@ const props = defineProps<{
 
 // 当前用户的邮箱
 const email = ref('')
-// 用户的新邮箱
-const newEmail = ref('')
-// 验证码
-const code = ref('')
 // 已经发送验证码的邮箱
 const hasSentCodeEmail = ref('')
 
+// 5 个输入框的值
+const input = reactive({
+  newEmail: '',
+  code: '',
+  oldPassword: '',
+  newPassword: '',
+  repeatPassword: '',
+})
+
 // 发送邮箱验证码
 const handleSendCode = async () => {
   // 检查必要信息
-  if (!checkSendCode(newEmail.value)) {
+  if (!checkSendCode(input.newEmail)) {
     return
   }
 
-  hasSentCodeEmail.value = newEmail.value
-  const res = await useKUNGalgameUserStore().getResetEmailCode(newEmail.value)
+  hasSentCodeEmail.value = input.newEmail
+  Message(
+    'The email verification code is being sent ~~~',
+    '邮箱验证码正在发送 ~~~',
+    'info'
+  )
+  const res = await useKUNGalgameUserStore().getResetEmailCode(input.newEmail)
 
   if (res.code === 200) {
     Message(
@@ -46,13 +60,15 @@ const handleSendCode = async () => {
 // 更改邮箱
 const handleResetEmail = async () => {
   // 检查必要信息
-  if (!checkResetEmail(hasSentCodeEmail.value, newEmail.value, code.value)) {
+  if (!checkResetEmail(hasSentCodeEmail.value, input.newEmail, input.code)) {
     return
   }
 
+  input.newEmail = ''
+  input.code = ''
   const res = await useKUNGalgameUserStore().updateEmail(
     hasSentCodeEmail.value,
-    code.value
+    input.code
   )
 
   if (res.code === 200) {
@@ -62,6 +78,31 @@ const handleResetEmail = async () => {
   }
 }
 
+// 更改密码
+const handleChangePassword = async () => {
+  // 检查必要信息
+  if (
+    !checkChangePassword(
+      input.oldPassword,
+      input.newPassword,
+      input.repeatPassword
+    )
+  ) {
+    return
+  }
+
+  const res = await useKUNGalgameUserStore().updatePassword(
+    input.oldPassword,
+    input.newPassword
+  )
+
+  if (res.code === 200) {
+    Message('Password change successfully!', '密码更改成功', 'success')
+  } else {
+    Message('Password change failed!', '密码更改失败', 'error')
+  }
+}
+
 onMounted(async () => {
   const response = await useKUNGalgameUserStore().getEmail()
 
@@ -81,14 +122,18 @@ onMounted(async () => {
       <div class="title">更改邮箱:</div>
       <div class="current-email">您当前的邮箱是: {{ email }}</div>
       <div class="input">
-        <span>请输入您的新邮箱: </span><input v-model="newEmail" type="text" />
+        <span>请输入您的新邮箱: </span>
+        <input v-model="input.newEmail" type="text" />
       </div>
       <div class="input">
-        <span>请输入您的验证码: </span><input v-model="code" type="text" />
+        <span>请输入您的验证码: </span>
+        <input v-model="input.code" type="text" />
       </div>
 
       <div class="btn">
-        <button @click="handleSendCode">发送验证码</button>
+        <button @click="handleSendCode" v-if="!hasSentCodeEmail">
+          发送验证码
+        </button>
         <button @click="handleResetEmail">确定更改邮箱</button>
       </div>
     </div>
@@ -96,17 +141,20 @@ onMounted(async () => {
     <div class="password">
       <div class="title">更改密码:</div>
       <div class="input">
-        <span>请输入您的旧密码: </span><input type="password" />
+        <span>请输入您的旧密码: </span
+        ><input v-model="input.oldPassword" type="password" />
       </div>
       <div class="input">
-        <span>请输入您的新密码: </span><input type="password" />
+        <span>请输入您的新密码: </span
+        ><input v-model="input.newPassword" type="password" />
       </div>
       <div class="input">
-        <span>请再次输入新密码: </span><input type="password" />
+        <span>请再次输入新密码: </span
+        ><input v-model="input.repeatPassword" type="password" />
       </div>
 
       <div class="btn">
-        <button>确定更改密码</button>
+        <button @click="handleChangePassword">确定更改密码</button>
       </div>
     </div>
   </div>

src/views/kungalgamer/utils/check.ts

@@ -2,7 +2,11 @@
  * 检查用户的各种输入是否合法
  */
 import Message from '@/components/alert/Message'
-import { isValidEmail, isValidMailConfirmCode } from '@/utils/validate'
+import {
+  isValidEmail,
+  isValidMailConfirmCode,
+  isValidPassword,
+} from '@/utils/validate'
 
 // 检查发送邮箱验证码
 export const checkSendCode = (email: string) => {
@@ -31,8 +35,8 @@ export const checkResetEmail = (
 ) => {
   if (!hasSentCodeEmail) {
     Message(
-      'Please send the email verification code first',
-      '请先发送邮箱验证码',
+      'Please send the email verification code first!',
+      '请先发送邮箱验证码！',
       'warn'
     )
     return false
@@ -41,8 +45,8 @@ export const checkResetEmail = (
   // 这里只是临时验证一下，验证逻辑在后端
   if (hasSentCodeEmail !== newEmail) {
     Message(
-      'The email to which the verification code has been sent is different from the one you want to change.',
-      '已经发送验证码的邮箱与要更改的邮箱不相等',
+      'The email to which the verification code has been sent is different from the one you want to change.!',
+      '已经发送验证码的邮箱与要更改的邮箱不相等！',
       'warn'
     )
     return false
@@ -50,8 +54,8 @@ export const checkResetEmail = (
 
   if (!code) {
     Message(
-      'Email verification code cannot be empty',
-      '邮箱验证码不可为空',
+      'Email verification code cannot be empty!',
+      '邮箱验证码不可为空！',
       'warn'
     )
   }
@@ -66,3 +70,43 @@ export const checkResetEmail = (
   }
   return true
 }
+
+// 检查更改密码
+export const checkChangePassword = (
+  oldPassword: string,
+  newPassword: string,
+  repeatPassword: string
+) => {
+  if (!oldPassword) {
+    Message('Old password cannot be empty!', '旧密码不可为空！', 'warn')
+    return false
+  }
+  if (!newPassword) {
+    Message('New password cannot be empty!', '新密码不可为空！', 'warn')
+    return false
+  }
+  if (!repeatPassword) {
+    Message('Please input new password again!', '请再次输入新密码！', 'warn')
+    return false
+  }
+
+  if (newPassword !== repeatPassword) {
+    Message(
+      'The two password entries do not match',
+      '两次输入密码不一致',
+      'warn'
+    )
+    return false
+  }
+
+  if (!isValidPassword(oldPassword) || !isValidPassword(newPassword)) {
+    Message(
+      'Invalid password format.\nPassword must be 6 to 17 characters long and must include at least one letter and one number.\nIt can optionally include special characters such as \\w!@#$%^&()-+=',
+      '非法的密码格式，密码的长度为 6 到 17 位，必须包含至少一个英文字符和一个数字，可以选择性的包含 \\w!@#$%^&*()-+= 等特殊字符',
+      'warn',
+      5000
+    )
+    return false
+  }
+  return true
+}