feat: change email

src/api/user/index.ts

@@ -1,4 +1,4 @@
-import { fetchGet, fetchPut } from '@/utils/request'
+import { fetchGet, fetchPut, fetchPost } from '@/utils/request'
 import * as User from './types/user'
 
 // 获取单个用户信息
@@ -15,15 +15,47 @@ export async function getUserByUidApi(
 }
 
 // 更新用户 bio
-export async function updateUserBioApi(request: User.UserUpdateBioRequestData) {
+export async function updateUserBioApi(
+  request: User.UserUpdateBioRequestData
+): Promise<User.UserUpdateBioResponseData> {
   const url = `/user/${request.uid}/bio`
   const response = await fetchPut<User.UserUpdateBioResponseData>(url, request)
   return response
 }
 
 // 获取用户邮箱
-export async function getUserEmailApi(uid: number) {
+export async function getUserEmailApi(
+  uid: number
+): Promise<User.UserGetUserEmailResponseData> {
   const url = `/user/${uid}/email`
   const response = await fetchGet<User.UserGetUserEmailResponseData>(url)
   return response
 }
+
+// 发送重置邮箱验证码
+export async function getUserResetEmailCodeApi(
+  email: string
+): Promise<User.UserGetEmailRestCodeResponseData> {
+  const url = `/auth/email/reset`
+
+  const postData = {
+    email: email,
+  }
+
+  const response = await fetchPost<User.UserGetEmailRestCodeResponseData>(
+    url,
+    postData
+  )
+  return response
+}
+
+// 更新邮箱
+export async function updateUserEmailApi(
+  request: User.UserUpdateEmailRequestData
+): Promise<User.UserUpdateEmailResponseData> {
+  const url = `/user/:uid/email`
+
+  const response = fetchPut<User.UserUpdateEmailResponseData>(url, request)
+
+  return response
+}

src/api/user/types/user.ts

@@ -17,11 +17,19 @@ export interface UserInfo {
   comment: number[]
 }
 
+// 用户更新签名
 export interface UserUpdateBioRequestData {
   uid: number
   bio: string
 }
 
+// 用户更新邮箱
+export interface UserUpdateEmailRequestData {
+  uid: number
+  email: string
+  code: string
+}
+
 export type UserInfoResponseData = KUNGalgameResponseData<UserInfo>
 
 export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
@@ -29,3 +37,7 @@ export type UserUpdateBioResponseData = KUNGalgameResponseData<{}>
 export type UserGetUserEmailResponseData = KUNGalgameResponseData<{
   email: string
 }>
+
+export type UserGetEmailRestCodeResponseData = KUNGalgameResponseData<{}>
+
+export type UserUpdateEmailResponseData = KUNGalgameResponseData<{}>

src/store/modules/kungalgamer.ts

@@ -21,9 +21,18 @@ import type {
   UserUpdateBioRequestData,
   UserUpdateBioResponseData,
   UserGetUserEmailResponseData,
+  UserGetEmailRestCodeResponseData,
+  UserUpdateEmailRequestData,
+  UserUpdateEmailResponseData,
 } from '@/api'
 
-import { getUserByUidApi, updateUserBioApi, getUserEmailApi } from '@/api'
+import {
+  getUserByUidApi,
+  updateUserBioApi,
+  getUserEmailApi,
+  getUserResetEmailCodeApi,
+  updateUserEmailApi,
+} from '@/api'
 
 // kungalgame store 类型
 import { KUNGalgamerStore } from '../types/kungalgamer'
@@ -132,5 +141,25 @@ export const useKUNGalgameUserStore = defineStore({
       const uid = this.uid
       return getUserEmailApi(uid)
     },
+
+    // 获取重置邮箱验证码
+    async getResetEmailCode(
+      email: string
+    ): Promise<UserGetEmailRestCodeResponseData> {
+      return getUserResetEmailCodeApi(email)
+    },
+
+    // 更新邮箱
+    async updateEmail(
+      email: string,
+      code: string
+    ): Promise<UserUpdateEmailResponseData> {
+      const requestData: UserUpdateEmailRequestData = {
+        uid: this.uid,
+        email: email,
+        code: code,
+      }
+      return updateUserEmailApi(requestData)
+    },
   },
 })

src/views/kungalgamer/content/Password.vue

@@ -3,6 +3,7 @@ import { onMounted, 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'
 
 const props = defineProps<{
   user: UserInfo
@@ -10,6 +11,56 @@ const props = defineProps<{
 
 // 当前用户的邮箱
 const email = ref('')
+// 用户的新邮箱
+const newEmail = ref('')
+// 验证码
+const code = ref('')
+// 已经发送验证码的邮箱
+const hasSentCodeEmail = ref('')
+
+// 发送邮箱验证码
+const handleSendCode = async () => {
+  // 检查必要信息
+  if (!checkSendCode(newEmail.value)) {
+    return
+  }
+
+  hasSentCodeEmail.value = newEmail.value
+  const res = await useKUNGalgameUserStore().getResetEmailCode(newEmail.value)
+
+  if (res.code === 200) {
+    Message(
+      'Reset email verification code send successfully!',
+      '重置邮箱验证码发送成功！',
+      'success'
+    )
+  } else {
+    Message(
+      'Reset email verification code send failed!',
+      '重置邮箱验证码发送失败！',
+      'error'
+    )
+  }
+}
+
+// 更改邮箱
+const handleResetEmail = async () => {
+  // 检查必要信息
+  if (!checkResetEmail(hasSentCodeEmail.value, newEmail.value, code.value)) {
+    return
+  }
+
+  const res = await useKUNGalgameUserStore().updateEmail(
+    hasSentCodeEmail.value,
+    code.value
+  )
+
+  if (res.code === 200) {
+    Message('Email change successfully!', '邮箱更改成功', 'success')
+  } else {
+    Message('Email change failed!', '邮箱更改失败', 'error')
+  }
+}
 
 onMounted(async () => {
   const response = await useKUNGalgameUserStore().getEmail()
@@ -30,14 +81,15 @@ onMounted(async () => {
       <div class="title">更改邮箱:</div>
       <div class="current-email">您当前的邮箱是: {{ email }}</div>
       <div class="input">
-        <span>请输入您的新邮箱: </span><input type="text" />
+        <span>请输入您的新邮箱: </span><input v-model="newEmail" type="text" />
       </div>
       <div class="input">
-        <span>请输入您的验证码: </span><input type="text" />
+        <span>请输入您的验证码: </span><input v-model="code" type="text" />
       </div>
 
       <div class="btn">
-        <button>发送验证码</button> <button>确定更改邮箱</button>
+        <button @click="handleSendCode">发送验证码</button>
+        <button @click="handleResetEmail">确定更改邮箱</button>
       </div>
     </div>
     <!-- 用户更改密码 -->
@@ -53,7 +105,9 @@ onMounted(async () => {
         <span>请再次输入新密码: </span><input type="password" />
       </div>
 
-      <div class="btn"><button>确定更改密码</button></div>
+      <div class="btn">
+        <button>确定更改密码</button>
+      </div>
     </div>
   </div>
 </template>

src/views/kungalgamer/utils/check.ts

@@ -0,0 +1,68 @@
+/**
+ * 检查用户的各种输入是否合法
+ */
+import Message from '@/components/alert/Message'
+import { isValidEmail, isValidMailConfirmCode } from '@/utils/validate'
+
+// 检查发送邮箱验证码
+export const checkSendCode = (email: string) => {
+  if (!email) {
+    Message('Please input your new email!', '请输入您的新邮箱！', 'warn')
+    return false
+  }
+
+  if (!isValidEmail(email)) {
+    Message(
+      'Please input valid email format!',
+      '请输入有效的邮箱格式！',
+      'warn'
+    )
+    return false
+  }
+
+  return true
+}
+
+// 检查重置邮箱
+export const checkResetEmail = (
+  hasSentCodeEmail: string,
+  newEmail: string,
+  code: string
+) => {
+  if (!hasSentCodeEmail) {
+    Message(
+      'Please send the email verification code first',
+      '请先发送邮箱验证码',
+      'warn'
+    )
+    return false
+  }
+
+  // 这里只是临时验证一下，验证逻辑在后端
+  if (hasSentCodeEmail !== newEmail) {
+    Message(
+      'The email to which the verification code has been sent is different from the one you want to change.',
+      '已经发送验证码的邮箱与要更改的邮箱不相等',
+      'warn'
+    )
+    return false
+  }
+
+  if (!code) {
+    Message(
+      'Email verification code cannot be empty',
+      '邮箱验证码不可为空',
+      'warn'
+    )
+  }
+
+  if (!isValidMailConfirmCode(code)) {
+    Message(
+      'Invalid email verification code format!',
+      '非法的邮箱验证码格式！',
+      'warn'
+    )
+    return false
+  }
+  return true
+}

src/views/login/components/Register.vue

@@ -117,7 +117,11 @@ const handleRegister = () => {
   }
 
   if (!isValidMailConfirmCode(registerForm.code)) {
-    message('Invalid email verification code.', '邮箱验证码错误！', 'warn')
+    message(
+      'Invalid email verification code format!',
+      '非法的邮箱验证码格式！',
+      'warn'
+    )
     return
   }