/* Copyright (C) 2023-2026 QuantumNous This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see . For commercial licensing, please contact support@quantumnous.com */ import { useEffect, useMemo, useState } from 'react' import { ExternalLink, Copy, Check, Loader2 } from 'lucide-react' import { useTranslation } from 'react-i18next' import { toast } from 'sonner' import { tryPrettyJson } from '@/lib/utils' import { useCopyToClipboard } from '@/hooks/use-copy-to-clipboard' import { Alert, AlertDescription } from '@/components/ui/alert' import { Button } from '@/components/ui/button' import { Input } from '@/components/ui/input' import { Dialog } from '@/components/dialog' import { completeCodexOAuth, startCodexOAuth } from '../../api' type CodexOAuthDialogProps = { open: boolean onOpenChange: (open: boolean) => void onKeyGenerated: (key: string) => void } export function CodexOAuthDialog({ open, onOpenChange, onKeyGenerated, }: CodexOAuthDialogProps) { const { t } = useTranslation() const { copiedText, copyToClipboard } = useCopyToClipboard({ notify: false }) const [state, setState] = useState({ authorizeUrl: '', callbackUrl: '', isStarting: false, isCompleting: false, }) useEffect(() => { if (!open) { setState({ authorizeUrl: '', callbackUrl: '', isStarting: false, isCompleting: false, }) } }, [open]) const canCopyAuthorizeUrl = Boolean(state.authorizeUrl && !state.isStarting) const canComplete = useMemo( () => Boolean(state.callbackUrl.trim()) && !state.isCompleting, [state.callbackUrl, state.isCompleting] ) const handleStart = async () => { setState((prev) => ({ ...prev, isStarting: true })) try { const res = await startCodexOAuth() if (!res.success) { throw new Error(res.message || 'Failed to start OAuth') } const url = res.data?.authorize_url || '' if (!url) { throw new Error('Missing authorize_url in response') } setState((prev) => ({ ...prev, authorizeUrl: url })) try { window.open(url, '_blank', 'noopener,noreferrer') toast.success(t('Opened authorization page')) } catch (error) { // eslint-disable-next-line no-console console.warn('Failed to open authorization page:', error) toast.warning(t('Please manually copy and open the authorization link')) } } catch (error) { toast.error( error instanceof Error ? error.message : t('OAuth start failed') ) } finally { setState((prev) => ({ ...prev, isStarting: false })) } } const handleComplete = async () => { if (!state.callbackUrl.trim()) return setState((prev) => ({ ...prev, isCompleting: true })) try { const res = await completeCodexOAuth(state.callbackUrl.trim()) if (!res.success) { throw new Error(res.message || 'OAuth failed') } const rawKey = res.data?.key || '' if (!rawKey) { throw new Error('Missing key in response') } onKeyGenerated(tryPrettyJson(rawKey)) toast.success(t('Credential generated')) onOpenChange(false) } catch (error) { toast.error(error instanceof Error ? error.message : t('OAuth failed')) } finally { setState((prev) => ({ ...prev, isCompleting: false })) } } return ( } >
{t( '1) Click "Open authorization page" and complete login. 2) Your browser may redirect to localhost (it is OK if the page does not load). 3) Copy the full URL from the address bar and paste it below. 4) Click "Generate credential".' )}
{t('Callback URL')}
setState((prev) => ({ ...prev, callbackUrl: e.target.value })) } placeholder={t( 'Paste the full callback URL (includes code & state)' )} autoComplete='off' spellCheck={false} />
{t( 'Tip: The generated key is a JSON credential including access_token / refresh_token / account_id.' )}
) }