From 9992c4ab2704cefbc710b393673487cc01675b06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=91=A3=E9=A3=9E=E7=A5=A5?= Date: Fri, 23 Jan 2026 21:23:29 +0800 Subject: [PATCH] feat: Add manual OAuth authorization mode for WebUI (#131) * feat: add manual OAuth flow support in WebUI * fix: reset add account modal state on close * feat: display custom API key in startup banner * fix: move translations to separate files and optimize import API * fix: remove orphaned model-manager.js and cleanup callback server on manual auth --------- Co-authored-by: Badri Narayanan S <59133612+badrisnarayanan@users.noreply.github.com> --- public/app.js | 1 + public/index.html | 50 +++++- public/js/components/account-manager.js | 85 ++++++++++ public/js/components/add-account-modal.js | 88 +++++++++++ public/js/translations/en.js | 18 +++ public/js/translations/id.js | 18 +++ public/js/translations/pt.js | 23 +++ public/js/translations/tr.js | 18 +++ public/js/translations/zh.js | 18 +++ public/views/accounts.html | 22 +++ src/auth/oauth.js | 35 +++- src/cli/accounts.js | 4 +- src/index.js | 3 +- src/webui/index.js | 184 +++++++++++++++++++++- tests/frontend/test-frontend-accounts.cjs | 73 +++++++++ 15 files changed, 624 insertions(+), 16 deletions(-) create mode 100644 public/js/components/add-account-modal.js diff --git a/public/app.js b/public/app.js index 4cb3a9c..7b890a0 100644 --- a/public/app.js +++ b/public/app.js @@ -13,6 +13,7 @@ document.addEventListener('alpine:init', () => { Alpine.data('accountManager', window.Components.accountManager); Alpine.data('claudeConfig', window.Components.claudeConfig); Alpine.data('logsViewer', window.Components.logsViewer); + Alpine.data('addAccountModal', window.Components.addAccountModal); // View Loader Directive Alpine.directive('load-view', (el, { expression }, { evaluate }) => { diff --git a/public/index.html b/public/index.html index 8a9c439..6958518 100644 --- a/public/index.html +++ b/public/index.html @@ -252,8 +252,8 @@ - -
+ +

Add New Account

@@ -281,6 +281,47 @@

OR

+ + +
+ + + + + Manual Mode + +
+ + +
+
+ +
@@ -300,12 +341,12 @@
- +
- +
@@ -374,6 +415,7 @@ + diff --git a/public/js/components/account-manager.js b/public/js/components/account-manager.js index 080caa5..906dd92 100644 --- a/public/js/components/account-manager.js +++ b/public/js/components/account-manager.js @@ -241,5 +241,90 @@ window.Components.accountManager = () => ({ percent: Math.round(val * 100), model: bestModel }; + }, + + /** + * Export accounts to JSON file + */ + async exportAccounts() { + const store = Alpine.store('global'); + try { + const { response, newPassword } = await window.utils.request( + '/api/accounts/export', + {}, + store.webuiPassword + ); + if (newPassword) store.webuiPassword = newPassword; + + const data = await response.json(); + // API returns plain array directly + if (Array.isArray(data)) { + const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); + const url = URL.createObjectURL(blob); + const a = document.createElement('a'); + a.href = url; + a.download = `antigravity-accounts-${new Date().toISOString().split('T')[0]}.json`; + document.body.appendChild(a); + a.click(); + document.body.removeChild(a); + URL.revokeObjectURL(url); + + store.showToast(store.t('exportSuccess', { count: data.length }), 'success'); + } else if (data.error) { + throw new Error(data.error); + } + } catch (e) { + store.showToast(store.t('exportFailed') + ': ' + e.message, 'error'); + } + }, + + /** + * Import accounts from JSON file + * @param {Event} event - file input change event + */ + async importAccounts(event) { + const store = Alpine.store('global'); + const file = event.target.files?.[0]; + if (!file) return; + + try { + const text = await file.text(); + const importData = JSON.parse(text); + + // Support both plain array and wrapped format + const accounts = Array.isArray(importData) ? importData : (importData.accounts || []); + if (!Array.isArray(accounts) || accounts.length === 0) { + throw new Error('Invalid file format: expected accounts array'); + } + + const { response, newPassword } = await window.utils.request( + '/api/accounts/import', + { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify(accounts) + }, + store.webuiPassword + ); + if (newPassword) store.webuiPassword = newPassword; + + const data = await response.json(); + if (data.status === 'ok') { + const { added, updated, failed } = data.results; + let msg = store.t('importSuccess') + ` ${added.length} added, ${updated.length} updated`; + if (failed.length > 0) { + msg += `, ${failed.length} failed`; + } + store.showToast(msg, failed.length > 0 ? 'info' : 'success'); + Alpine.store('data').fetchData(); + } else { + throw new Error(data.error || 'Import failed'); + } + } catch (e) { + store.showToast(store.t('importFailed') + ': ' + e.message, 'error'); + } finally { + // Reset file input + event.target.value = ''; + } } }); diff --git a/public/js/components/add-account-modal.js b/public/js/components/add-account-modal.js new file mode 100644 index 0000000..0b17498 --- /dev/null +++ b/public/js/components/add-account-modal.js @@ -0,0 +1,88 @@ +/** + * Add Account Modal Component + * Registers itself to window.Components for Alpine.js to consume + */ +window.Components = window.Components || {}; + +window.Components.addAccountModal = () => ({ + manualMode: false, + authUrl: '', + authState: '', + callbackInput: '', + submitting: false, + + /** + * Reset all state to initial values + */ + resetState() { + this.manualMode = false; + this.authUrl = ''; + this.authState = ''; + this.callbackInput = ''; + this.submitting = false; + // Close any open details elements + const details = document.querySelectorAll('#add_account_modal details[open]'); + details.forEach(d => d.removeAttribute('open')); + }, + + async copyLink() { + if (!this.authUrl) return; + await navigator.clipboard.writeText(this.authUrl); + Alpine.store('global').showToast(Alpine.store('global').t('linkCopied'), 'success'); + }, + + async initManualAuth(event) { + if (event.target.open && !this.authUrl) { + try { + const password = Alpine.store('global').webuiPassword; + const { + response, + newPassword + } = await window.utils.request('/api/auth/url', {}, password); + if (newPassword) Alpine.store('global').webuiPassword = newPassword; + const data = await response.json(); + if (data.status === 'ok') { + this.authUrl = data.url; + this.authState = data.state; + } + } catch (e) { + Alpine.store('global').showToast(e.message, 'error'); + } + } + }, + + async completeManualAuth() { + if (!this.callbackInput || !this.authState) return; + this.submitting = true; + try { + const store = Alpine.store('global'); + const { + response, + newPassword + } = await window.utils.request('/api/auth/complete', { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + callbackInput: this.callbackInput, + state: this.authState + }) + }, store.webuiPassword); + if (newPassword) store.webuiPassword = newPassword; + const data = await response.json(); + if (data.status === 'ok') { + store.showToast(store.t('accountAddedSuccess'), 'success'); + Alpine.store('data').fetchData(); + document.getElementById('add_account_modal').close(); + this.resetState(); + } else { + store.showToast(data.error || store.t('authFailed'), 'error'); + } + } catch (e) { + Alpine.store('global').showToast(e.message, 'error'); + } finally { + this.submitting = false; + } + } +}); diff --git a/public/js/translations/en.js b/public/js/translations/en.js index 5157122..91d1d67 100644 --- a/public/js/translations/en.js +++ b/public/js/translations/en.js @@ -298,6 +298,24 @@ window.translations.en = { quotaDistribution: "Quota Distribution", resetsIn: "Resets in {time}", noQuotaData: "No quota data available for this account yet.", + // Manual OAuth Mode + manualMode: "Manual Mode", + manualModeDesc: "(for environments where callback cannot reach)", + authLinkLabel: "Authorization Link:", + linkCopied: "Link copied to clipboard", + pasteCallbackLabel: "Paste callback URL or code:", + pasteCallbackPlaceholder: "http://localhost:51121/oauth-callback?code=... or 4/0xxx...", + completeAuth: "Complete Authorization", + authFailed: "Authorization failed", + // Import/Export + export: "Export", + import: "Import", + exportAccounts: "Export Accounts", + importAccounts: "Import Accounts", + exportSuccess: "Exported {count} accounts", + exportFailed: "Export failed", + importSuccess: "Import complete:", + importFailed: "Import failed", // UI Elements pageTitle: "Antigravity Console", live: "Live", diff --git a/public/js/translations/id.js b/public/js/translations/id.js index 917bc06..c06bc1c 100644 --- a/public/js/translations/id.js +++ b/public/js/translations/id.js @@ -337,6 +337,24 @@ window.translations.id = { quotaDistribution: "Distribusi Kuota", resetsIn: "Reset dalam {time}", noQuotaData: "Data kuota belum tersedia untuk akun ini.", + // Manual OAuth Mode + manualMode: "Mode Manual", + manualModeDesc: "(untuk lingkungan di mana callback tidak bisa dicapai)", + authLinkLabel: "Link Otorisasi:", + linkCopied: "Link disalin ke clipboard", + pasteCallbackLabel: "Tempel callback URL atau kode:", + pasteCallbackPlaceholder: "http://localhost:51121/oauth-callback?code=... atau 4/0xxx...", + completeAuth: "Selesaikan Otorisasi", + authFailed: "Otorisasi gagal", + // Import/Export + export: "Ekspor", + import: "Impor", + exportAccounts: "Ekspor Akun", + importAccounts: "Impor Akun", + exportSuccess: "Berhasil mengekspor {count} akun", + exportFailed: "Gagal mengekspor", + importSuccess: "Impor selesai:", + importFailed: "Gagal mengimpor", // Completed TODOs pageTitle: "Antigravity Console", diff --git a/public/js/translations/pt.js b/public/js/translations/pt.js index 468d35c..29f73f4 100644 --- a/public/js/translations/pt.js +++ b/public/js/translations/pt.js @@ -271,6 +271,29 @@ window.translations.pt = { gemini1mDesc: "Adiciona sufixo [1m] aos modelos Gemini para suporte a janela de contexto de 1M.", gemini1mWarning: "⚠ Contexto grande pode reduzir o desempenho do Gemini-3-Pro.", clickToSet: "Clique para configurar...", + none: "Nenhum", + // Quota Distribution + quotaDistribution: "Distribuição de Quota", + resetsIn: "Reseta em {time}", + noQuotaData: "Dados de quota ainda não disponíveis para esta conta.", + // Manual OAuth Mode + manualMode: "Modo Manual", + manualModeDesc: "(para ambientes onde callback não consegue alcançar)", + authLinkLabel: "Link de Autorização:", + linkCopied: "Link copiado para a área de transferência", + pasteCallbackLabel: "Cole a URL de callback ou código:", + pasteCallbackPlaceholder: "http://localhost:51121/oauth-callback?code=... ou 4/0xxx...", + completeAuth: "Completar Autorização", + authFailed: "Falha na autorização", + // Import/Export + export: "Exportar", + import: "Importar", + exportAccounts: "Exportar Contas", + importAccounts: "Importar Contas", + exportSuccess: "Exportadas {count} contas", + exportFailed: "Falha ao exportar", + importSuccess: "Importação concluída:", + importFailed: "Falha ao importar", // Account Selection Strategy translations accountSelectionStrategy: "Estratégia de Seleção de Conta", diff --git a/public/js/translations/tr.js b/public/js/translations/tr.js index ca68977..1d00cec 100644 --- a/public/js/translations/tr.js +++ b/public/js/translations/tr.js @@ -280,6 +280,24 @@ window.translations.tr = { quotaDistribution: "Kota Dağılımı", resetsIn: "{time} içinde sıfırlanır", noQuotaData: "Bu hesap için henüz kota verisi yok.", + // Manual OAuth Mode + manualMode: "Manuel Mod", + manualModeDesc: "(callback ulaşamadığında kullan)", + authLinkLabel: "Yetkilendirme Linki:", + linkCopied: "Link panoya kopyalandı", + pasteCallbackLabel: "Callback URL veya kodu yapıştır:", + pasteCallbackPlaceholder: "http://localhost:51121/oauth-callback?code=... veya 4/0xxx...", + completeAuth: "Yetkilendirmeyi Tamamla", + authFailed: "Yetkilendirme başarısız", + // Import/Export + export: "Dışa Aktar", + import: "İçe Aktar", + exportAccounts: "Hesapları Dışa Aktar", + importAccounts: "Hesapları İçe Aktar", + exportSuccess: "{count} hesap dışa aktarıldı", + exportFailed: "Dışa aktarma başarısız", + importSuccess: "İçe aktarma tamamlandı:", + importFailed: "İçe aktarma başarısız", // TODO: Missing translations - Hardcoded strings from HTML // pageTitle: "Antigravity Console", diff --git a/public/js/translations/zh.js b/public/js/translations/zh.js index a1e7ef2..dc924d6 100644 --- a/public/js/translations/zh.js +++ b/public/js/translations/zh.js @@ -298,6 +298,24 @@ window.translations.zh = { quotaDistribution: "配额分布", resetsIn: "{time} 后重置", noQuotaData: "暂无此账号的配额数据。", + // Manual OAuth Mode + manualMode: "手动模式", + manualModeDesc: "(当回调无法到达时使用)", + authLinkLabel: "授权链接：", + linkCopied: "链接已复制到剪贴板", + pasteCallbackLabel: "粘贴回调 URL 或授权码：", + pasteCallbackPlaceholder: "http://localhost:51121/oauth-callback?code=... 或 4/0xxx...", + completeAuth: "完成授权", + authFailed: "授权失败", + // Import/Export + export: "导出", + import: "导入", + exportAccounts: "导出账号", + importAccounts: "导入账号", + exportSuccess: "已导出 {count} 个账号", + exportFailed: "导出失败", + importSuccess: "导入完成：", + importFailed: "导入失败", // TODO: Missing translations - Hardcoded strings from HTML // pageTitle: "Antigravity Console", diff --git a/public/views/accounts.html b/public/views/accounts.html index f5da819..8cb425b 100644 --- a/public/views/accounts.html +++ b/public/views/accounts.html @@ -28,6 +28,28 @@
+ + + + + + +