♻️ Migrated callback pages

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);

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']

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>

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>