From e3f9774edaa6ce81f4262efe138b1b7ddf5d4cbc Mon Sep 17 00:00:00 2001
From: erio <asakifeng@gmail.com>
Date: Fri, 6 Mar 2026 21:10:02 +0800
Subject: [PATCH] fix(sora): add GDrive OAuth callback page for postMessage
 flow

The OAuth flow opens a popup window that redirects to /admin/gdrive-oauth-callback,
but this route and page were missing. Add the callback view that extracts the
authorization code from the URL and sends it back to the opener window via
postMessage, completing the OAuth authorization flow.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 frontend/src/i18n/locales/en.ts               |  4 +-
 frontend/src/i18n/locales/zh.ts               |  4 +-
 frontend/src/router/index.ts                  | 11 +++
 .../views/admin/GDriveOAuthCallbackView.vue   | 71 +++++++++++++++++++
 4 files changed, 88 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/views/admin/GDriveOAuthCallbackView.vue

diff --git a/frontend/src/i18n/locales/en.ts b/frontend/src/i18n/locales/en.ts
index d9c535453e..3b70bb1e90 100644
--- a/frontend/src/i18n/locales/en.ts
+++ b/frontend/src/i18n/locales/en.ts
@@ -3974,7 +3974,9 @@ export default {
           authorizeHint: 'Get Refresh Token via OAuth2',
           oauthFieldsRequired: 'Please fill in Client ID and Client Secret first',
           oauthSuccess: 'Google Drive authorization successful',
-          oauthFailed: 'Google Drive authorization failed'
+          oauthFailed: 'Google Drive authorization failed',
+          closeWindow: 'This window will close automatically',
+          processing: 'Processing authorization...'
         }
       },
       streamTimeout: {
diff --git a/frontend/src/i18n/locales/zh.ts b/frontend/src/i18n/locales/zh.ts
index 8023666af6..a2ec660f70 100644
--- a/frontend/src/i18n/locales/zh.ts
+++ b/frontend/src/i18n/locales/zh.ts
@@ -4134,7 +4134,9 @@ export default {
           authorizeHint: '通过 OAuth2 获取 Refresh Token',
           oauthFieldsRequired: '请先填写 Client ID 和 Client Secret',
           oauthSuccess: 'Google Drive 授权成功',
-          oauthFailed: 'Google Drive 授权失败'
+          oauthFailed: 'Google Drive 授权失败',
+          closeWindow: '此窗口将自动关闭',
+          processing: '正在处理授权...'
         }
       },
       streamTimeout: {
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d235de517e..d8d17550c7 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -225,6 +225,17 @@ const routes: RouteRecordRaw[] = [
     }
   },
 
+  // ==================== Admin OAuth Callback Routes ====================
+  {
+    path: '/admin/gdrive-oauth-callback',
+    name: 'GDriveOAuthCallback',
+    component: () => import('@/views/admin/GDriveOAuthCallbackView.vue'),
+    meta: {
+      requiresAuth: false,
+      title: 'Google Drive OAuth'
+    }
+  },
+
   // ==================== Admin Routes ====================
   {
     path: '/admin',
diff --git a/frontend/src/views/admin/GDriveOAuthCallbackView.vue b/frontend/src/views/admin/GDriveOAuthCallbackView.vue
new file mode 100644
index 0000000000..f8f41c1fd6
--- /dev/null
+++ b/frontend/src/views/admin/GDriveOAuthCallbackView.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 dark:bg-dark-900">
+    <div class="w-full max-w-md text-center">
+      <div v-if="error" class="card p-8">
+        <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30">
+          <svg class="h-6 w-6 text-red-600 dark:text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </div>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.soraS3.gdrive.oauthFailed') }}</h2>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ error }}</p>
+        <p class="mt-4 text-xs text-gray-400 dark:text-gray-500">{{ t('admin.settings.soraS3.gdrive.closeWindow') }}</p>
+      </div>
+      <div v-else-if="sent" class="card p-8">
+        <div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
+          <svg class="h-6 w-6 text-green-600 dark:text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+          </svg>
+        </div>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('admin.settings.soraS3.gdrive.oauthSuccess') }}</h2>
+        <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.soraS3.gdrive.closeWindow') }}</p>
+      </div>
+      <div v-else class="card p-8">
+        <div class="mx-auto mb-4 h-8 w-8 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500"></div>
+        <p class="text-sm text-gray-500 dark:text-gray-400">{{ t('admin.settings.soraS3.gdrive.processing') }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const { t } = useI18n()
+
+const error = ref('')
+const sent = ref(false)
+
+onMounted(() => {
+  const code = route.query.code as string
+  const state = route.query.state as string
+  const errorParam = route.query.error as string
+  const errorDesc = route.query.error_description as string
+
+  if (errorParam) {
+    error.value = errorDesc || errorParam
+    return
+  }
+
+  if (!code) {
+    error.value = 'No authorization code received'
+    return
+  }
+
+  // Send code back to opener window via postMessage
+  if (window.opener) {
+    window.opener.postMessage(
+      { type: 'gdrive_oauth_callback', code, state },
+      window.location.origin
+    )
+    sent.value = true
+    // Auto-close after a short delay
+    setTimeout(() => window.close(), 1500)
+  } else {
+    error.value = 'Cannot communicate with the parent window. Please close this window and try again.'
+  }
+})
+</script>