mirror of
https://github.com/CJackHwang/ds2api.git
synced 2026-05-05 00:45:29 +08:00
217 lines
11 KiB
JavaScript
217 lines
11 KiB
JavaScript
import { useState, useEffect } from 'react'
|
|
import { Cloud, ArrowRight, ExternalLink, Info, CheckCircle2, XCircle } from 'lucide-react'
|
|
|
|
export default function VercelSync({ onMessage, authFetch }) {
|
|
const [vercelToken, setVercelToken] = useState('')
|
|
const [projectId, setProjectId] = useState('')
|
|
const [teamId, setTeamId] = useState('')
|
|
const [loading, setLoading] = useState(false)
|
|
const [result, setResult] = useState(null)
|
|
const [preconfig, setPreconfig] = useState(null)
|
|
|
|
const apiFetch = authFetch || fetch
|
|
|
|
useEffect(() => {
|
|
const loadPreconfig = async () => {
|
|
try {
|
|
const res = await apiFetch('/admin/vercel/config')
|
|
if (res.ok) {
|
|
const data = await res.json()
|
|
setPreconfig(data)
|
|
if (data.project_id) setProjectId(data.project_id)
|
|
if (data.team_id) setTeamId(data.team_id)
|
|
}
|
|
} catch (e) {
|
|
console.error('Failed to load preconfig:', e)
|
|
}
|
|
}
|
|
loadPreconfig()
|
|
}, [])
|
|
|
|
const handleSync = async () => {
|
|
const tokenToUse = preconfig?.has_token && !vercelToken ? '__USE_PRECONFIG__' : vercelToken
|
|
|
|
if (!tokenToUse && !preconfig?.has_token) {
|
|
onMessage('error', 'Vercel Token is required')
|
|
return
|
|
}
|
|
if (!projectId) {
|
|
onMessage('error', 'Project ID is required')
|
|
return
|
|
}
|
|
|
|
setLoading(true)
|
|
setResult(null)
|
|
try {
|
|
const res = await apiFetch('/admin/vercel/sync', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
vercel_token: vercelToken,
|
|
project_id: projectId,
|
|
team_id: teamId || undefined,
|
|
}),
|
|
})
|
|
const data = await res.json()
|
|
if (res.ok) {
|
|
setResult({ ...data, success: true })
|
|
onMessage('success', data.message)
|
|
} else {
|
|
setResult({ ...data, success: false })
|
|
onMessage('error', data.detail || 'Sync failed')
|
|
}
|
|
} catch (e) {
|
|
onMessage('error', 'Network error')
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-5xl mx-auto h-[calc(100vh-140px)]">
|
|
{/* Configuration Form */}
|
|
<div className="bg-card border border-border rounded-xl shadow-sm p-6 space-y-6">
|
|
<div className="border-b border-border pb-6">
|
|
<h2 className="text-xl font-semibold flex items-center gap-2">
|
|
<Cloud className="w-6 h-6 text-primary" />
|
|
Vercel Deployment
|
|
</h2>
|
|
<p className="text-muted-foreground text-sm mt-1">
|
|
Sync your current key and account configuration directly to Vercel environment variables.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium flex items-center justify-between">
|
|
Vercel Token
|
|
<a href="https://vercel.com/account/tokens" target="_blank" rel="noopener noreferrer" className="text-xs text-primary hover:underline flex items-center gap-1">
|
|
Get Token <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</label>
|
|
<div className="relative">
|
|
<input
|
|
type="password"
|
|
className="input-field pr-10"
|
|
placeholder={preconfig?.has_token ? "Using pre-configured token" : "Enter Vercel Access Token"}
|
|
value={vercelToken}
|
|
onChange={e => setVercelToken(e.target.value)}
|
|
/>
|
|
{preconfig?.has_token && !vercelToken && (
|
|
<div className="absolute right-3 top-2.5 text-emerald-500">
|
|
<CheckCircle2 className="w-5 h-5" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Project ID</label>
|
|
<input
|
|
type="text"
|
|
className="input-field"
|
|
placeholder="prj_xxxxxxxxxxxx or Project Name"
|
|
value={projectId}
|
|
onChange={e => setProjectId(e.target.value)}
|
|
/>
|
|
<p className="text-xs text-muted-foreground">Found in Project Settings → General</p>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium flex items-center gap-2">
|
|
Team ID <span className="text-xs text-muted-foreground font-normal">(Optional)</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
className="input-field"
|
|
placeholder="team_xxxxxxxxxxxx"
|
|
value={teamId}
|
|
onChange={e => setTeamId(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button
|
|
onClick={handleSync}
|
|
disabled={loading}
|
|
className="w-full btn btn-primary flex justify-center items-center py-3 text-base shadow-lg shadow-primary/20 hover:shadow-primary/30"
|
|
>
|
|
{loading ? (
|
|
<span className="flex items-center gap-2">
|
|
<span className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
|
|
Syncing...
|
|
</span>
|
|
) : (
|
|
<span className="flex items-center gap-2">
|
|
Sync & Redeploy <ArrowRight className="w-5 h-5" />
|
|
</span>
|
|
)}
|
|
</button>
|
|
<p className="text-xs text-center text-muted-foreground mt-4">
|
|
This will trigger a new deployment on Vercel which takes about 30-60 seconds.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Status & Guide */}
|
|
<div className="space-y-6">
|
|
{result && (
|
|
<div className={`p-6 rounded-xl border ${result.success ? 'bg-emerald-500/10 border-emerald-500/20' : 'bg-destructive/10 border-destructive/20'} animate-in fade-in slide-in-from-right-4`}>
|
|
<div className="flex items-start gap-4">
|
|
{result.success ? (
|
|
<div className="p-2 bg-emerald-500 text-white rounded-full shadow-lg shadow-emerald-500/30">
|
|
<CheckCircle2 className="w-6 h-6" />
|
|
</div>
|
|
) : (
|
|
<div className="p-2 bg-destructive text-white rounded-full shadow-lg shadow-destructive/30">
|
|
<XCircle className="w-6 h-6" />
|
|
</div>
|
|
)}
|
|
<div className="space-y-1">
|
|
<h3 className={`font-semibold text-lg ${result.success ? 'text-emerald-500' : 'text-destructive'}`}>
|
|
{result.success ? 'Sync Successful' : 'Sync Failed'}
|
|
</h3>
|
|
<p className="text-sm opacity-90">{result.message}</p>
|
|
|
|
{result.deployment_url && (
|
|
<div className="pt-3 mt-3 border-t border-emerald-500/20">
|
|
<a href={`https://${result.deployment_url}`} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1 text-sm font-medium hover:underline">
|
|
Visit Deployment <ExternalLink className="w-3 h-3" />
|
|
</a>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-secondary/20 border border-border rounded-xl p-6">
|
|
<h3 className="font-semibold flex items-center gap-2 mb-4">
|
|
<Info className="w-5 h-5 text-primary" />
|
|
How it works
|
|
</h3>
|
|
<ul className="space-y-4">
|
|
<li className="flex gap-3">
|
|
<span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">1</span>
|
|
<p className="text-sm text-muted-foreground">Current configuration (Keys & Accounts) is exported to a JSON string.</p>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">2</span>
|
|
<p className="text-sm text-muted-foreground">The JSON is encoded to Base64 to ensure format compatibility.</p>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">3</span>
|
|
<p className="text-sm text-muted-foreground">We update the <code className="bg-background px-1 py-0.5 rounded border border-border text-xs">DS2API_CONFIG_JSON</code> env variable in your Vercel project.</p>
|
|
</li>
|
|
<li className="flex gap-3">
|
|
<span className="shrink-0 w-6 h-6 rounded-full bg-background border border-border flex items-center justify-center text-xs font-bold text-muted-foreground">4</span>
|
|
<p className="text-sm text-muted-foreground">A redeployment is triggered to apply the new environment variables.</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|