mirror of
https://github.com/router-for-me/Cli-Proxy-API-Management-Center.git
synced 2026-02-18 18:50:49 +08:00
feat(oauth): add vertex json login via vertex/import
This commit is contained in:
Supra4E8C
@@ -114,3 +114,25 @@
|
||||
gap: $spacing-sm;
|
||||
margin-top: $spacing-sm;
|
||||
}
|
||||
|
||||
.filePicker {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: $spacing-sm;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.fileName {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: $radius-md;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.fileNamePlaceholder {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { useEffect, useRef, useState, type ChangeEvent } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Input } from '@/components/ui/Input';
|
||||
import { useNotificationStore, useThemeStore } from '@/stores';
|
||||
import { oauthApi, type OAuthProvider, type IFlowCookieAuthResponse } from '@/services/api/oauth';
|
||||
import { vertexApi, type VertexImportResponse } from '@/services/api/vertex';
|
||||
import styles from './OAuthPage.module.scss';
|
||||
import iconOpenaiLight from '@/assets/icons/openai-light.svg';
|
||||
import iconOpenaiDark from '@/assets/icons/openai-dark.svg';
|
||||
@@ -13,6 +14,7 @@ import iconAntigravity from '@/assets/icons/antigravity.svg';
|
||||
import iconGemini from '@/assets/icons/gemini.svg';
|
||||
import iconQwen from '@/assets/icons/qwen.svg';
|
||||
import iconIflow from '@/assets/icons/iflow.svg';
|
||||
import iconVertex from '@/assets/icons/vertex.svg';
|
||||
|
||||
interface ProviderState {
|
||||
url?: string;
|
||||
@@ -36,6 +38,22 @@ interface IFlowCookieState {
|
||||
errorType?: 'error' | 'warning';
|
||||
}
|
||||
|
||||
interface VertexImportResult {
|
||||
projectId?: string;
|
||||
email?: string;
|
||||
location?: string;
|
||||
authFile?: string;
|
||||
}
|
||||
|
||||
interface VertexImportState {
|
||||
file?: File;
|
||||
fileName: string;
|
||||
location: string;
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
result?: VertexImportResult;
|
||||
}
|
||||
|
||||
const PROVIDERS: { id: OAuthProvider; titleKey: string; hintKey: string; urlLabelKey: string; icon: string | { light: string; dark: string } }[] = [
|
||||
{ id: 'codex', titleKey: 'auth_login.codex_oauth_title', hintKey: 'auth_login.codex_oauth_hint', urlLabelKey: 'auth_login.codex_oauth_url_label', icon: { light: iconOpenaiLight, dark: iconOpenaiDark } },
|
||||
{ id: 'anthropic', titleKey: 'auth_login.anthropic_oauth_title', hintKey: 'auth_login.anthropic_oauth_hint', urlLabelKey: 'auth_login.anthropic_oauth_url_label', icon: iconClaude },
|
||||
@@ -57,7 +75,13 @@ export function OAuthPage() {
|
||||
const resolvedTheme = useThemeStore((state) => state.resolvedTheme);
|
||||
const [states, setStates] = useState<Record<OAuthProvider, ProviderState>>({} as Record<OAuthProvider, ProviderState>);
|
||||
const [iflowCookie, setIflowCookie] = useState<IFlowCookieState>({ cookie: '', loading: false });
|
||||
const [vertexState, setVertexState] = useState<VertexImportState>({
|
||||
fileName: '',
|
||||
location: '',
|
||||
loading: false
|
||||
});
|
||||
const timers = useRef<Record<string, number>>({});
|
||||
const vertexFileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
@@ -216,6 +240,64 @@ export function OAuthPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleVertexFilePick = () => {
|
||||
vertexFileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleVertexFileChange = (event: ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (!file) return;
|
||||
if (!file.name.endsWith('.json')) {
|
||||
showNotification(t('vertex_import.file_required'), 'warning');
|
||||
event.target.value = '';
|
||||
return;
|
||||
}
|
||||
setVertexState((prev) => ({
|
||||
...prev,
|
||||
file,
|
||||
fileName: file.name,
|
||||
error: undefined,
|
||||
result: undefined
|
||||
}));
|
||||
event.target.value = '';
|
||||
};
|
||||
|
||||
const handleVertexImport = async () => {
|
||||
if (!vertexState.file) {
|
||||
const message = t('vertex_import.file_required');
|
||||
setVertexState((prev) => ({ ...prev, error: message }));
|
||||
showNotification(message, 'warning');
|
||||
return;
|
||||
}
|
||||
const location = vertexState.location.trim();
|
||||
setVertexState((prev) => ({ ...prev, loading: true, error: undefined, result: undefined }));
|
||||
try {
|
||||
const res: VertexImportResponse = await vertexApi.importCredential(
|
||||
vertexState.file,
|
||||
location || undefined
|
||||
);
|
||||
const result: VertexImportResult = {
|
||||
projectId: res.project_id,
|
||||
email: res.email,
|
||||
location: res.location,
|
||||
authFile: res['auth-file'] ?? res.auth_file
|
||||
};
|
||||
setVertexState((prev) => ({ ...prev, loading: false, result }));
|
||||
showNotification(t('vertex_import.success'), 'success');
|
||||
} catch (err: any) {
|
||||
const message = err?.message || '';
|
||||
setVertexState((prev) => ({
|
||||
...prev,
|
||||
loading: false,
|
||||
error: message || t('notification.upload_failed')
|
||||
}));
|
||||
const notification = message
|
||||
? `${t('notification.upload_failed')}: ${message}`
|
||||
: t('notification.upload_failed');
|
||||
showNotification(notification, 'error');
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<h1 className={styles.pageTitle}>{t('nav.oauth', { defaultValue: 'OAuth' })}</h1>
|
||||
@@ -328,6 +410,94 @@ export function OAuthPage() {
|
||||
);
|
||||
})}
|
||||
|
||||
{/* Vertex JSON 登录 */}
|
||||
<Card
|
||||
title={
|
||||
<span className={styles.cardTitle}>
|
||||
<img src={iconVertex} alt="" className={styles.cardTitleIcon} />
|
||||
{t('vertex_import.title')}
|
||||
</span>
|
||||
}
|
||||
extra={
|
||||
<Button onClick={handleVertexImport} loading={vertexState.loading}>
|
||||
{t('vertex_import.import_button')}
|
||||
</Button>
|
||||
}
|
||||
>
|
||||
<div className="hint">{t('vertex_import.description')}</div>
|
||||
<Input
|
||||
label={t('vertex_import.location_label')}
|
||||
hint={t('vertex_import.location_hint')}
|
||||
value={vertexState.location}
|
||||
onChange={(e) =>
|
||||
setVertexState((prev) => ({
|
||||
...prev,
|
||||
location: e.target.value
|
||||
}))
|
||||
}
|
||||
placeholder={t('vertex_import.location_placeholder')}
|
||||
/>
|
||||
<div className="form-group">
|
||||
<label>{t('vertex_import.file_label')}</label>
|
||||
<div className={styles.filePicker}>
|
||||
<Button variant="secondary" size="sm" onClick={handleVertexFilePick}>
|
||||
{t('vertex_import.choose_file')}
|
||||
</Button>
|
||||
<div
|
||||
className={`${styles.fileName} ${
|
||||
vertexState.fileName ? '' : styles.fileNamePlaceholder
|
||||
}`.trim()}
|
||||
>
|
||||
{vertexState.fileName || t('vertex_import.file_placeholder')}
|
||||
</div>
|
||||
</div>
|
||||
<div className="hint">{t('vertex_import.file_hint')}</div>
|
||||
<input
|
||||
ref={vertexFileInputRef}
|
||||
type="file"
|
||||
accept=".json,application/json"
|
||||
style={{ display: 'none' }}
|
||||
onChange={handleVertexFileChange}
|
||||
/>
|
||||
</div>
|
||||
{vertexState.error && (
|
||||
<div className="status-badge error" style={{ marginTop: 8 }}>
|
||||
{vertexState.error}
|
||||
</div>
|
||||
)}
|
||||
{vertexState.result && (
|
||||
<div className="connection-box" style={{ marginTop: 12 }}>
|
||||
<div className="label">{t('vertex_import.result_title')}</div>
|
||||
<div className="key-value-list">
|
||||
{vertexState.result.projectId && (
|
||||
<div className="key-value-item">
|
||||
<span className="key">{t('vertex_import.result_project')}</span>
|
||||
<span className="value">{vertexState.result.projectId}</span>
|
||||
</div>
|
||||
)}
|
||||
{vertexState.result.email && (
|
||||
<div className="key-value-item">
|
||||
<span className="key">{t('vertex_import.result_email')}</span>
|
||||
<span className="value">{vertexState.result.email}</span>
|
||||
</div>
|
||||
)}
|
||||
{vertexState.result.location && (
|
||||
<div className="key-value-item">
|
||||
<span className="key">{t('vertex_import.result_location')}</span>
|
||||
<span className="value">{vertexState.result.location}</span>
|
||||
</div>
|
||||
)}
|
||||
{vertexState.result.authFile && (
|
||||
<div className="key-value-item">
|
||||
<span className="key">{t('vertex_import.result_file')}</span>
|
||||
<span className="value">{vertexState.result.authFile}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
|
||||
{/* iFlow Cookie 登录 */}
|
||||
<Card
|
||||
title={
|
||||
|
||||
Reference in New Issue
Block a user