jiazhizhong/OpenIsle
1
0
Fork 0
mirror of https://github.com/nagisa77/OpenIsle.git synced 2026-06-09 03:27:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: reuse callback page component

Browse Source
This commit is contained in:
Tim
2025-08-04 01:22:56 +08:00
parent b8632acebd
commit f78a3ae149
5 changed files with 47 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/components/CallbackPage.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<div class="callback-page">
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
<div class="callback-page-text">Magic is happening...</div>
</div>
</template>
<script>
import { hatch } from 'ldrs'
hatch.register()
export default {
name: 'CallbackPage'
}
</script>
<style scoped>
.callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.callback-page-text {
margin-top: 25px;
font-size: 16px;
color: var(--primary-color);
font-weight: bold;
}
</style>

28
frontend/src/views/DiscordCallbackPageView.vue
View File

@@ -1,18 +1,14 @@
<template> <template>
<div class="discord-callback-page"> <CallbackPage />
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
<div class="discord-callback-page-text">Magic is happening...</div>
</div>
</template> </template>
<script> <script>
import CallbackPage from '../components/CallbackPage.vue'
import { discordExchange } from '../utils/discord' import { discordExchange } from '../utils/discord'
import { hatch } from 'ldrs'
hatch.register()
export default { export default {
name: 'DiscordCallbackPageView', name: 'DiscordCallbackPageView',
components: { CallbackPage },
async mounted() { async mounted() {
const url = new URL(window.location.href) const url = new URL(window.location.href)
const code = url.searchParams.get('code') const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
} }
</script> </script>
<style scoped>
.discord-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.discord-callback-page-text {
margin-top: 25px;
font-size: 16px;
color: var(--primary-color);
font-weight: bold;
}
</style>

28
frontend/src/views/GithubCallbackPageView.vue
View File

@@ -1,18 +1,14 @@
<template> <template>
<div class="github-callback-page"> <CallbackPage />
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
<div class="github-callback-page-text">Magic is happening...</div>
</div>
</template> </template>
<script> <script>
import CallbackPage from '../components/CallbackPage.vue'
import { githubExchange } from '../utils/github' import { githubExchange } from '../utils/github'
import { hatch } from 'ldrs'
hatch.register()
export default { export default {
name: 'GithubCallbackPageView', name: 'GithubCallbackPageView',
components: { CallbackPage },
async mounted() { async mounted() {
const url = new URL(window.location.href) const url = new URL(window.location.href)
const code = url.searchParams.get('code') const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
} }
</script> </script>
<style scoped>
.github-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.github-callback-page-text {
margin-top: 25px;
font-size: 16px;
color: var(--primary-color);
font-weight: bold;
}
</style>

27
frontend/src/views/GoogleCallbackPageView.vue
View File

@@ -1,17 +1,14 @@
<template> <template>
<div class="google-callback-page"> <CallbackPage />
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
<div class="google-callback-page-text">Magic is happening...</div>
</div>
</template> </template>
<script> <script>
import CallbackPage from '../components/CallbackPage.vue'
import { googleAuthWithToken } from '../utils/google' import { googleAuthWithToken } from '../utils/google'
import { hatch } from 'ldrs'
hatch.register()
export default { export default {
name: 'GoogleCallbackPageView', name: 'GoogleCallbackPageView',
components: { CallbackPage },
async mounted() { async mounted() {
const hash = new URLSearchParams(window.location.hash.substring(1)) const hash = new URLSearchParams(window.location.hash.substring(1))
const idToken = hash.get('id_token') const idToken = hash.get('id_token')
@@ -28,21 +25,3 @@ export default {
} }
</script> </script>
<style scoped>
.google-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
padding-top: var(--header-height);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.google-callback-page-text {
margin-top: 25px;
font-size: 16px;
color: var(--primary-color);
font-weight: bold;
}
</style>

27
frontend/src/views/TwitterCallbackPageView.vue
View File

@@ -1,17 +1,14 @@
<template> <template>
<div class="twitter-callback-page"> <CallbackPage />
<l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
<div class="twitter-callback-page-text">Magic is happening...</div>
</div>
</template> </template>
<script> <script>
import CallbackPage from '../components/CallbackPage.vue'
import { twitterExchange } from '../utils/twitter' import { twitterExchange } from '../utils/twitter'
import { hatch } from 'ldrs'
hatch.register()
export default { export default {
name: 'TwitterCallbackPageView', name: 'TwitterCallbackPageView',
components: { CallbackPage },
async mounted() { async mounted() {
const url = new URL(window.location.href) const url = new URL(window.location.href)
const code = url.searchParams.get('code') const code = url.searchParams.get('code')
@@ -27,21 +24,3 @@ export default {
} }
</script> </script>
<style scoped>
.twitter-callback-page {
background-color: var(--background-color);
height: calc(100vh - var(--header-height));
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-top: var(--header-height);
}
.twitter-callback-page-text {
margin-top: 25px;
font-size: 16px;
color: var(--primary-color);
font-weight: bold;
}
</style>