Megghy/vtsuru.live
1
0
Fork 0
mirror of https://github.com/Megghy/vtsuru.live.git synced 2025-12-06 18:36:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

add reset actions

Browse Source
This commit is contained in:
Megghy
2023-10-28 14:54:50 +08:00
parent 670910cc87
commit 49bdea87f7
11 changed files with 364 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/api-models.ts
View File

@@ -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
}

79
src/components/RegisterAndLogin.vue
View File

@@ -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',
{
}>(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>

1
src/data/constants.ts
View File

@@ -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')) },

3
src/main.ts
View File

@@ -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()

16
src/router/index.ts
View File

@@ -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,
},
},
],

14
src/store/index.ts
View File

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

56
src/views/ChangePasswordView.vue Normal file
View File

@@ -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>

25
src/views/manage/BiliVerifyView.vue
View File

@@ -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">
<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">

135
src/views/manage/DashboardView.vue
View File

@@ -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,6 +120,7 @@ function logout() {
<NDivider />
<NSpace vertical>
<NCard size="small">
<NSpace :size="5">
邮箱:
<NEllipsis v-if="accountInfo?.isEmailVerified" style="max-width: 100%">
<NText style="color: var(--primary-color)"> 已认证 | {{ accountInfo?.bindEmail }} </NText>
@@ -37,11 +128,23 @@ function logout() {
<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>

0
src/views/manage/VideoCollectDetailView.vue Normal file
View File

48
src/views/manage/VideoCollectManageView.vue
View File

@@ -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>