From 7a4a13736eb9e399ec92fa61d17f3bf3fdbb4d74 Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 29 Nov 2025 19:03:52 +0800
Subject: [PATCH] :recycle: Migrated callback pages

---
 app/assets/css/main.css                |  5 +++++
 app/components.d.ts                    |  2 ++
 app/pages/auth/callback/[provider].vue | 20 +++++++++++---------
 app/pages/auth/callback/index.vue      | 14 ++++++--------
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 08044ec..c66c77f 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -41,6 +41,11 @@
   height: calc(100vh - 64px*2);
 }
 
+/* for the minimal layout */
+.h-compact-layout {
+  height: calc(100vh - 48px);
+}
+
 .min-h-layout {
   /* margin of the navbar + actual navbar */
   min-height: calc(100vh - 64px*2);
diff --git a/app/components.d.ts b/app/components.d.ts
index 7828e50..7ecb568 100644
--- a/app/components.d.ts
+++ b/app/components.d.ts
@@ -43,6 +43,7 @@ declare module 'vue' {
     NProgress: typeof import('naive-ui')['NProgress']
     NRadio: typeof import('naive-ui')['NRadio']
     NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+    NResult: typeof import('naive-ui')['NResult']
     NSelect: typeof import('naive-ui')['NSelect']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
@@ -87,6 +88,7 @@ declare global {
   const NProgress: typeof import('naive-ui')['NProgress']
   const NRadio: typeof import('naive-ui')['NRadio']
   const NRadioGroup: typeof import('naive-ui')['NRadioGroup']
+  const NResult: typeof import('naive-ui')['NResult']
   const NSelect: typeof import('naive-ui')['NSelect']
   const NSpace: typeof import('naive-ui')['NSpace']
   const NSpin: typeof import('naive-ui')['NSpin']
diff --git a/app/pages/auth/callback/[provider].vue b/app/pages/auth/callback/[provider].vue
index e2f2548..a8f0b50 100644
--- a/app/pages/auth/callback/[provider].vue
+++ b/app/pages/auth/callback/[provider].vue
@@ -1,12 +1,14 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card class="pa-6 text-center" max-width="400">
-      <v-card-text>
-        <v-progress-circular indeterminate color="primary" class="mb-4" />
-        <h2 class="text-xl font-bold">Redirecting...</h2>
-        <p class="opacity-80">Please wait while we redirect you.</p>
-      </v-card-text>
-    </v-card>
+  <div class="flex items-center justify-center h-compact-layout">
+    <n-result
+      status="info"
+      title="Almost There"
+      description="Please wait while we redirect you, it won't take too long..."
+    >
+      <template #icon>
+        <span class="loading loading-spinner loading-xl"></span>
+      </template>
+    </n-result>
   </div>
 </template>
 
@@ -26,6 +28,6 @@ definePageMeta({
 
 onMounted(() => {
   const redirectUrl = `${apiBase}/id/auth/callback/${provider}${window.location.search}`
-  window.location.href = redirectUrl
+  // window.location.href = redirectUrl
 })
 </script>
diff --git a/app/pages/auth/callback/index.vue b/app/pages/auth/callback/index.vue
index 19707c7..b9f7e51 100644
--- a/app/pages/auth/callback/index.vue
+++ b/app/pages/auth/callback/index.vue
@@ -1,12 +1,10 @@
 <template>
-  <div class="d-flex align-center justify-center fill-height">
-    <v-card class="pa-6 text-center" max-width="400">
-      <v-card-text>
-        <v-icon size="64" color="success" class="mb-4">mdi-check-circle</v-icon>
-        <h2 class="text-xl font-bold">Auth completed</h2>
-        <p class="opacity-80">Now you can close this tab</p>
-      </v-card-text>
-    </v-card>
+  <div class="flex items-center justify-center h-compact-layout">
+    <n-result
+      status="success"
+      title="Auth Completed"
+      description="Now you can close this tab safely."
+    ></n-result>
   </div>
 </template>