From f78a3ae14950d41499899589e96940590f4cfb52 Mon Sep 17 00:00:00 2001
From: Tim <135014430+nagisa77@users.noreply.github.com>
Date: Mon, 4 Aug 2025 01:22:56 +0800
Subject: [PATCH] refactor: reuse callback page component

---
 frontend/src/components/CallbackPage.vue      | 35 +++++++++++++++++++
 .../src/views/DiscordCallbackPageView.vue     | 28 ++-------------
 frontend/src/views/GithubCallbackPageView.vue | 28 ++-------------
 frontend/src/views/GoogleCallbackPageView.vue | 27 ++------------
 .../src/views/TwitterCallbackPageView.vue     | 27 ++------------
 5 files changed, 47 insertions(+), 98 deletions(-)
 create mode 100644 frontend/src/components/CallbackPage.vue

diff --git a/frontend/src/components/CallbackPage.vue b/frontend/src/components/CallbackPage.vue
new file mode 100644
index 000000000..003d12a62
--- /dev/null
+++ b/frontend/src/components/CallbackPage.vue
@@ -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>
diff --git a/frontend/src/views/DiscordCallbackPageView.vue b/frontend/src/views/DiscordCallbackPageView.vue
index 3472ac2e7..27316b431 100644
--- a/frontend/src/views/DiscordCallbackPageView.vue
+++ b/frontend/src/views/DiscordCallbackPageView.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="discord-callback-page">
-    <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>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { discordExchange } from '../utils/discord'
-import { hatch } from 'ldrs'
-
-hatch.register()
 
 export default {
   name: 'DiscordCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </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>
diff --git a/frontend/src/views/GithubCallbackPageView.vue b/frontend/src/views/GithubCallbackPageView.vue
index 5348df375..873bb6ba0 100644
--- a/frontend/src/views/GithubCallbackPageView.vue
+++ b/frontend/src/views/GithubCallbackPageView.vue
@@ -1,18 +1,14 @@
 <template>
-  <div class="github-callback-page">
-    <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>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { githubExchange } from '../utils/github'
-import { hatch } from 'ldrs'
-hatch.register()
-
 
 export default {
   name: 'GithubCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -28,21 +24,3 @@ export default {
 }
 </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>
diff --git a/frontend/src/views/GoogleCallbackPageView.vue b/frontend/src/views/GoogleCallbackPageView.vue
index 520a8e04e..2a5efef19 100644
--- a/frontend/src/views/GoogleCallbackPageView.vue
+++ b/frontend/src/views/GoogleCallbackPageView.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="google-callback-page">
-    <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>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { googleAuthWithToken } from '../utils/google'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'GoogleCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const hash = new URLSearchParams(window.location.hash.substring(1))
     const idToken = hash.get('id_token')
@@ -28,21 +25,3 @@ export default {
 }
 </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>
diff --git a/frontend/src/views/TwitterCallbackPageView.vue b/frontend/src/views/TwitterCallbackPageView.vue
index b5890edbb..940d49d53 100644
--- a/frontend/src/views/TwitterCallbackPageView.vue
+++ b/frontend/src/views/TwitterCallbackPageView.vue
@@ -1,17 +1,14 @@
 <template>
-  <div class="twitter-callback-page">
-    <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>
+  <CallbackPage />
 </template>
 
 <script>
+import CallbackPage from '../components/CallbackPage.vue'
 import { twitterExchange } from '../utils/twitter'
-import { hatch } from 'ldrs'
-hatch.register()
 
 export default {
   name: 'TwitterCallbackPageView',
+  components: { CallbackPage },
   async mounted() {
     const url = new URL(window.location.href)
     const code = url.searchParams.get('code')
@@ -27,21 +24,3 @@ export default {
 }
 </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>