add reset actions

src/api/api-models.ts

@@ -151,3 +151,12 @@ export enum ThemeType {
   Light = 'light',
   Dark = 'dark',
 }
+export interface VideoCollectTable{
+  id: string
+  name: string
+  title: string
+  description: string
+  createAt: number
+  endAt: number
+
+}

src/components/RegisterAndLogin.vue

@@ -5,7 +5,27 @@ import { QueryGetAPI, QueryPostAPI } from '@/api/query'
 import { ACCOUNT_API_URL, TURNSTILE_KEY } from '@/data/constants'
 import { GetNotifactions } from '@/data/notifactions'
 import { useLocalStorage } from '@vueuse/core'
-import { FormInst, FormItemInst, FormItemRule, FormRules, NAlert, NButton, NCard, NDivider, NForm, NFormItem, NInput, NSpace, NSpin, NTab, NTabPane, NTabs, useMessage } from 'naive-ui'
+import {
+  FormInst,
+  FormItemInst,
+  FormItemRule,
+  FormRules,
+  NAlert,
+  NButton,
+  NCard,
+  NCountdown,
+  NDivider,
+  NForm,
+  NFormItem,
+  NInput,
+  NSpace,
+  NSpin,
+  NTab,
+  NTabPane,
+  NTabs,
+  NTime,
+  useMessage,
+} from 'naive-ui'
 import { ref } from 'vue'
 import VueTurnstile from 'vue-turnstile'
 
@@ -31,6 +51,11 @@ const token = ref('')
 const turnstile = ref()
 const cookie = useLocalStorage('JWT_Token', '')
 
+const selectedTab = ref('login')
+const inputForgetPasswordValue = ref('')
+const isForgetPassword = ref(false)
+const canSendForgetPassword = ref(true)
+
 const formRef = ref<FormInst | null>(null)
 const rPasswordFormItemRef = ref<FormItemInst | null>(null)
 const registerRules: FormRules = {
@@ -95,7 +120,7 @@ function onPasswordInput() {
     rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
   }
 }
-function onregisterButtonClick() {
+function onRegisterButtonClick() {
   formRef.value?.validate().then(async () => {
     isLoading.value = true
     await QueryPostAPI<string>(
@@ -133,13 +158,10 @@ function onLoginButtonClick() {
     await QueryPostAPI<{
       account: AccountInfo
       token: string
-    }>(
-      ACCOUNT_API_URL + 'login',
-      {
-        nameOrEmail: loginModel.value.account,
-        password: loginModel.value.password,
-      },
-    )
+    }>(ACCOUNT_API_URL + 'login', {
+      nameOrEmail: loginModel.value.account,
+      password: loginModel.value.password,
+    })
       .then(async (data) => {
         if (data.code == 200) {
           localStorage.setItem('JWT_Token', data.data.token)
@@ -153,6 +175,7 @@ function onLoginButtonClick() {
       })
       .catch((err) => {
         console.error(err)
+        message.error('登陆失败')
       })
       .finally(() => {
         isLoading.value = false
@@ -160,6 +183,30 @@ function onLoginButtonClick() {
       })
   })
 }
+async function onForgetPassword() {
+  canSendForgetPassword.value = false
+  await QueryGetAPI(ACCOUNT_API_URL + 'reset-password', { email: inputForgetPasswordValue.value }, [['Turnstile', token.value]])
+    .then(async (data) => {
+      if (data.code == 200) {
+        message.success('已发送密码重置链接到你的邮箱, 请检查')
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+    .finally(() => {
+      turnstile.value?.reset()
+    })
+}
+function onForgetPasswordClick() {
+  isForgetPassword.value = true
+  setTimeout(() => {
+    selectedTab.value = 'forget'
+  }, 50)
+}
 </script>
 
 <template>
@@ -171,7 +218,7 @@ function onLoginButtonClick() {
       <NAlert type="warning"> 你已经登录 </NAlert>
     </template>
     <template v-else>
-      <NTabs default-value="login" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;">
+      <NTabs v-model:value="selectedTab" size="large" animated pane-wrapper-style="margin: 0 -4px" pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;" style="min-width: 300px">
         <NTabPane name="login" tab="登陆">
           <NForm ref="formRef" :rules="loginRules" :model="loginModel">
             <NFormItem path="account" label="用户名或邮箱">
@@ -181,6 +228,7 @@ function onLoginButtonClick() {
               <NInput v-model:value="loginModel.password" type="password" @input="onPasswordInput" @keydown.enter="onLoginButtonClick" />
             </NFormItem>
           </NForm>
+          <NButton text secondary style="margin-left: 5px; color: gray" @click="onForgetPasswordClick"> 忘记密码 </NButton>
           <NSpace vertical justify="center" align="center">
             <NButton :loading="isLoading" type="primary" size="large" @click="onLoginButtonClick"> 登陆 </NButton>
           </NSpace>
@@ -197,16 +245,23 @@ function onLoginButtonClick() {
               <NInput v-model:value="registerModel.password" type="password" @input="onPasswordInput" @keydown.enter.prevent />
             </NFormItem>
             <NFormItem ref="rPasswordFormItemRef" first path="reenteredPassword" label="重复密码">
-              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter="onregisterButtonClick" />
+              <NInput v-model:value="registerModel.reenteredPassword" :disabled="!registerModel.password" type="password" @keydown.enter="onRegisterButtonClick" />
             </NFormItem>
           </NForm>
           <NSpace vertical justify="center" align="center">
-            <NButton :loading="!token || isLoading" type="primary" size="large" @click="onregisterButtonClick"> 注册 </NButton>
+            <NButton :loading="!token || isLoading" type="primary" size="large" @click="onRegisterButtonClick"> 注册 </NButton>
+          </NSpace>
+        </NTabPane>
+        <NTabPane v-if="isForgetPassword" name="forget" tab="忘记密码">
+          <NInput placeholder="请输入邮箱" v-model:value="inputForgetPasswordValue" maxlength="64" />
+          <NDivider />
+          <NSpace vertical justify="center" align="center">
+            <NButton :loading="!token || !canSendForgetPassword" type="primary" size="large" @click="onForgetPassword"> 提交 </NButton>
+            <NCountdown v-if="!canSendForgetPassword" :duration="60000" @finish="canSendForgetPassword = true" />
           </NSpace>
-
-          <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
         </NTabPane>
       </NTabs>
     </template>
   </NCard>
+  <VueTurnstile ref="turnstile" :site-key="TURNSTILE_KEY" v-model="token" theme="auto" style="text-align: center" />
 </template>

src/data/constants.ts

@@ -21,6 +21,7 @@ export const QUESTION_API_URL = `${BASE_API}qa/`
 export const LOTTERY_API_URL = `${BASE_API}lottery/`
 export const HISTORY_API_URL = `${BASE_API}history/`
 export const SCHEDULE_API_URL = `${BASE_API}schedule/`
+export const VIDEO_COLLECT_API_URL = `${BASE_API}video-collect/`
 
 export const ScheduleTemplateMap = {
   '': { name: '默认', compoent: defineAsyncComponent(() => import('@/views/view/scheduleTemplate/DefaultScheduleTemplate.vue')) },

src/main.ts

@@ -1,11 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
 import { GetSelfAccount } from './api/account'
 import { GetNotifactions } from './data/notifactions'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(router).mount('#app')
 
 GetSelfAccount()
 GetNotifactions()

src/router/index.ts

@@ -17,6 +17,11 @@ const routes: Array<RouteRecordRaw> = [
     name: 'about',
     component: () => import('@/views/AboutView.vue'),
   },
+  {
+    path: '/reset-password',
+    name: 'resetPassword',
+    component: () => import('@/views/ChangePasswordView.vue'),
+  },
   {
     path: '/user/:id',
     name: 'user',
@@ -27,6 +32,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/view/UserIndexView.vue'),
         meta: {
           title: '主页',
+          keepAlive: true,
         },
       },
       {
@@ -35,6 +41,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/view/SongListView.vue'),
         meta: {
           title: '歌单',
+          keepAlive: true,
         },
       },
       {
@@ -43,6 +50,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/view/QuestionBoxView.vue'),
         meta: {
           title: '提问箱',
+          keepAlive: true,
         },
       },
       {
@@ -51,6 +59,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/view/ScheduleView.vue'),
         meta: {
           title: '日程',
+          keepAlive: true,
         },
       },
     ],
@@ -74,6 +83,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/SongListManageView.vue'),
         meta: {
           title: '歌单',
+          keepAlive: true,
         },
       },
       {
@@ -82,6 +92,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/QuestionBoxManageView.vue'),
         meta: {
           title: '提问箱',
+          keepAlive: true,
         },
       },
       {
@@ -90,6 +101,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/LotteryView.vue'),
         meta: {
           title: '动态抽奖',
+          keepAlive: true,
         },
       },
       {
@@ -106,6 +118,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/HistoryView.vue'),
         meta: {
           title: '数据跟踪',
+          keepAlive: true,
         },
       },
       {
@@ -114,6 +127,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/ScheduleManageView.vue'),
         meta: {
           title: '日程',
+          keepAlive: true,
         },
       },
       {
@@ -122,6 +136,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/EventView.vue'),
         meta: {
           title: '事件记录',
+          keepAlive: true,
         },
       },
       {
@@ -130,6 +145,7 @@ const routes: Array<RouteRecordRaw> = [
         component: () => import('@/views/manage/VideoCollectManageView.vue'),
         meta: {
           title: '视频征集',
+          keepAlive: true,
         },
       },
     ],

src/store/index.ts

@@ -1,14 +0,0 @@
-import { createStore } from 'vuex';
-
-export default createStore({
-  state: {
-  },
-  getters: {
-  },
-  mutations: {
-  },
-  actions: {
-  },
-  modules: {
-  },
-});

src/views/ChangePasswordView.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { NButton, NCard, NInput, NLayoutContent, NSpace, useMessage } from 'naive-ui'
+import { computed, ref } from 'vue'
+import { useRoute } from 'vue-router'
+import { QueryGetAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
+import router from '@/router'
+
+const password = ref('')
+const password2 = ref('')
+const message = useMessage()
+const route = useRoute()
+const key = computed(() => {
+  return route.query.key
+})
+const isLoading = ref(false)
+
+function changePassword() {
+  if (password.value != password2.value) {
+    message.error('两次密码不一致')
+    return
+  }
+  isLoading.value = true
+  QueryGetAPI(ACCOUNT_API_URL + 'verify/reset-password', {
+    key: key.value,
+    password: password.value,
+  })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('密码已修改')
+        router.push({ name: 'manage-index' })
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+</script>
+
+<template>
+  <NLayoutContent style="height: 100vh; position: relative">
+    <NCard style="max-width: 90%; width: 400px; top: 40%; margin: 0 auto" title="修改密码" embedded>
+      <NSpace vertical>
+        <NInput v-model:value="password" type="password" placeholder="新密码" />
+        <NInput v-model:value="password2" type="password" placeholder="确认密码" />
+        <NButton type="primary" :loading="isLoading" @click="changePassword"> 修改密码 </NButton>
+      </NSpace>
+    </NCard>
+  </NLayoutContent>
+</template>

src/views/manage/BiliVerifyView.vue

@@ -3,6 +3,7 @@ import { GetSelfAccount, useAccount } from '@/api/account'
 import { QueryGetAPI } from '@/api/query'
 import { BILI_API_URL } from '@/data/constants'
 import { NAlert, NButton, NCard, NCode, NInput, NInputNumber, NSpace, NSpin, NText, NCountdown, NInputGroup, useMessage } from 'naive-ui'
+import { isTaggedTemplateExpression } from 'typescript'
 import { onMounted, ref } from 'vue'
 
 const message = useMessage()
@@ -10,6 +11,7 @@ const message = useMessage()
 const accountInfo = useAccount()
 const isStart = ref(false)
 const timeLeft = ref(0)
+const timeOut = ref(false)
 
 const uId = ref()
 const roomId = ref()
@@ -45,6 +47,11 @@ async function checkStatus() {
       GetSelfAccount()
     }, 1)
     return true
+  } else if (data.code == 400 && isStart.value) {
+    timeOut.value = true
+    clearInterval(timer.value)
+    message.error('认证超时')
+    return false
   }
   return false
 }
@@ -74,8 +81,24 @@ onMounted(async () => {
     <template #header> Bilibili 身份验证 </template>
     <template v-if="isStart">
       <NSpace vertical justify="center" align="center">
-        <NSpin />
-        <span> 剩余 <NCountdown :duration="timeLeft - Date.now()" /> </span>
+        <template v-if="!timeOut">
+          <NSpin />
+          <span> 剩余 <NCountdown :duration="timeLeft - Date.now()" /> </span>
+        </template>
+        <NAlert v-else type="error">
+          认证超时
+          <NButton
+            @click="
+              () => {
+                isStart = false
+                timeOut = false
+              }
+            "
+            type="info"
+          >
+            重新开始
+          </NButton>
+        </NAlert>
         <NInputGroup>
           <NInput :allow-input="() => false" v-model:value="accountInfo.biliVerifyCode" />
           <NButton @click="copyCode"> 复制认证码 </NButton>
@@ -89,7 +112,7 @@ onMounted(async () => {
           <NText>
             请在点击
             <NText type="primary" strong> 开始认证 </NText>
-            后五分钟之内使用
+            后2分钟之内使用
             <NText strong type="primary"> 需要认证的账户 </NText>
             在自己的直播间内发送
             <NButton type="info" text @click="copyCode">

src/views/manage/DashboardView.vue

@@ -1,21 +1,111 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
-import { NAlert, NButton, NCard, NDivider, NEllipsis, NInput, NPopconfirm, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
+import { NAlert, NButton, NCard, NCountdown, NDivider, NEllipsis, NInput, NInputGroup, NModal, NPopconfirm, NSpace, NTag, NText, NThing, NTime, useMessage } from 'naive-ui'
 import SettingsManageView from './SettingsManageView.vue'
 import { useLocalStorage } from '@vueuse/core'
+import { ref } from 'vue'
+import { QueryGetAPI } from '@/api/query'
+import { ACCOUNT_API_URL } from '@/data/constants'
 
 const accountInfo = useAccount()
 const cookie = useLocalStorage('JWT_Token', '')
+const message = useMessage()
+
+const resetEmailModalVisiable = ref(false)
+const resetPasswordModalVisiable = ref(false)
+
+const newEmailAddress = ref('')
+const newEmailVerifyCode = ref('')
+const canSendEmailVerifyCode = ref(true)
+
+const newPassword = ref('')
+const newPassword2 = ref('')
+const isLoading = ref(false)
 
 function logout() {
   cookie.value = undefined
   window.location.reload()
 }
+function resetBili() {
+  isLoading.value = true
+  QueryGetAPI(ACCOUNT_API_URL + 'reset-bili')
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已解绑 Bilibili 账号')
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+}
+function resetEmail() {
+  isLoading.value = true
+  QueryGetAPI(ACCOUNT_API_URL + 'reset-email', { email: newEmailAddress.value, code: newEmailVerifyCode.value })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('已将邮箱改绑为 ' + newEmailAddress.value)
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+}
+function sendEmailVerifyCode() {
+  QueryGetAPI(ACCOUNT_API_URL + 'reset-email/code', { email: newEmailAddress.value })
+    .then((data) => {
+      if (data.code == 200) {
+        message.success('发送成功, 请检查目标邮箱. 如果没有收到, 请检查垃圾邮件')
+        canSendEmailVerifyCode.value = false
+        setTimeout(() => {
+          canSendEmailVerifyCode.value = true
+        }, 60 * 1000)
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+}
+async function resetPassword() {
+  if (newPassword.value != newPassword2.value) {
+    message.error('两次密码不一致')
+    return
+  }
+  await QueryGetAPI(ACCOUNT_API_URL + 'verify/reset-password', { password: newPassword.value })
+    .then(async (data) => {
+      if (data.code == 200) {
+        message.success('密码已修改')
+        setTimeout(() => {
+          location.reload()
+        }, 1000)
+      } else {
+        message.error(data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('发生错误')
+    })
+}
 </script>
 
 <template>
   <NSpace justify="center" align="center" vertical style="width: 100%">
-    <NCard embedded style="width: 100%;">
+    <NCard embedded style="width: 100%">
       <NSpace align="center" justify="center" vertical>
         <NText style="font-size: 3rem">
           {{ accountInfo?.name }}
@@ -30,18 +120,31 @@ function logout() {
       <NDivider />
       <NSpace vertical>
         <NCard size="small">
-          邮箱:
-          <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
-            <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
-          </NEllipsis>
-          <template v-else>
-            <NTag type="error" size="small"> 未认证 </NTag>
-          </template>
+          <NSpace :size="5">
+            邮箱:
+            <NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
+              <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
+            </NEllipsis>
+            <template v-else>
+              <NTag type="error" size="small"> 未认证 </NTag>
+            </template>
+            <NButton v-if="accountInfo?.isEmailVerified" type="warning" size="tiny" @click="resetEmailModalVisiable = true"> 修改邮箱 </NButton>
+          </NSpace>
         </NCard>
         <NCard size="small">
           Bilibili 账户:
           <NEllipsis v-if="accountInfo?.isBiliVerified" style="max-width: 100%">
-            <NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.biliId }} </NText>
+            <NText style="color: var(--primary-color)">
+              <NSpace :size="5" align="center">
+                已认证 | {{ accountInfo?.biliId }}
+                <NPopconfirm @positive-click="resetBili">
+                  <template #trigger>
+                    <NButton size="tiny" type="error"> 解除绑定 </NButton>
+                  </template>
+                  确定解除绑定吗? 解绑后现有的数据跟踪数据将被删除并且无法恢复
+                </NPopconfirm>
+              </NSpace>
+            </NText>
           </NEllipsis>
           <template v-else>
             <NTag type="error" size="small"> 未认证 </NTag>
@@ -56,9 +159,10 @@ function logout() {
       </NSpace>
       <NDivider />
       <NSpace justify="center">
+        <NButton type="warning" @click="resetPasswordModalVisiable = true"> 修改密码 </NButton>
         <NPopconfirm @positive-click="logout">
           <template #trigger>
-            <NButton type="warning"> 登出 </NButton>
+            <NButton type="error"> 登出 </NButton>
           </template>
           确定登出?
         </NPopconfirm>
@@ -70,4 +174,27 @@ function logout() {
     <SettingsManageView />
     <NDivider />
   </div>
+  <NModal v-model:show="resetEmailModalVisiable" preset="card" title="改绑邮箱" style="width: 400px; max-width: 90%">
+    <NSpace vertical>
+      <NInput v-model:value="newEmailAddress" placeholder="新邮箱地址" />
+      <NInputGroup>
+        <NInput v-model:value="newEmailVerifyCode" placeholder="验证码" />
+        <NButton type="primary" @click="sendEmailVerifyCode">
+          发送验证码 <template v-if="!canSendEmailVerifyCode"> | <NCountdown :duration="60000" /> </template>
+        </NButton>
+      </NInputGroup>
+    </NSpace>
+    <template #footer>
+      <NButton @click="resetEmail" type="primary"> 确定 </NButton>
+    </template>
+  </NModal>
+  <NModal v-model:show="resetPasswordModalVisiable" preset="card" title="修改密码" style="width: 400px; max-width: 90%">
+    <NSpace vertical>
+      <NInput v-model:value="newPassword" type="password" placeholder="新密码" />
+      <NInput v-model:value="newPassword2" type="password" placeholder="确认密码" />
+    </NSpace>
+    <template #footer>
+      <NButton @click="resetPassword" type="warning"> 确定修改 </NButton>
+    </template>
+  </NModal>
 </template>

src/views/manage/VideoCollectManageView.vue

@@ -1,3 +1,49 @@
+<script setup lang="ts">
+import { useAccount } from '@/api/account'
+import { VideoCollectTable } from '@/api/api-models'
+import { QueryGetAPI } from '@/api/query'
+import { VIDEO_COLLECT_API_URL } from '@/data/constants'
+import { NCard, NDivider, NList, NListItem, NSpace, NSpin, useMessage } from 'naive-ui'
+import { ref } from 'vue'
+
+const accountInfo = useAccount()
+const message = useMessage()
+
+const videoTables = ref<VideoCollectTable[]>([])
+
+const isLoading = ref(true)
+
+function get() {
+  QueryGetAPI<VideoCollectTable[]>(VIDEO_COLLECT_API_URL + 'get-all')
+    .then((data) => {
+      if (data.code == 200) {
+        videoTables.value = data.data
+      } else {
+        message.error('获取失败: ' + data.message)
+      }
+    })
+    .catch((err) => {
+      console.error(err)
+      message.error('获取失败')
+    })
+    .finally(() => {
+      isLoading.value = false
+    })
+}
+</script>
+
 <template>
-  开发中...
+  <NSpace> </NSpace>
+  <NDivider />
+  <NSpin :show="isLoading">
+    <NSpace justify="center">
+      <NList>
+        <NListItem>
+          <NCard size="small">
+            <template #header> </template>
+          </NCard>
+        </NListItem>
+      </NList>
+    </NSpace>
+  </NSpin>
 </template>