383 lines
14 KiB
TypeScript
383 lines
14 KiB
TypeScript
import { useEffect, useState } from 'react'
|
||
import { useNavigate } from '@tanstack/react-router'
|
||
import { useTranslation } from 'react-i18next'
|
||
|
||
import {
|
||
AlertCircle,
|
||
FileText,
|
||
HelpCircle,
|
||
Key,
|
||
Lock,
|
||
Moon,
|
||
Sun,
|
||
Terminal,
|
||
Zap,
|
||
} from 'lucide-react'
|
||
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
AlertDialogTrigger,
|
||
} from '@/components/ui/alert-dialog'
|
||
import { Button } from '@/components/ui/button'
|
||
import {
|
||
Card,
|
||
CardContent,
|
||
CardDescription,
|
||
CardHeader,
|
||
CardTitle,
|
||
} from '@/components/ui/card'
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from '@/components/ui/dialog'
|
||
import { Input } from '@/components/ui/input'
|
||
import { Label } from '@/components/ui/label'
|
||
import { WavesBackground } from '@/components/waves-background'
|
||
import { useTheme } from '@/components/use-theme'
|
||
|
||
import { useAnimation } from '@/hooks/use-animation'
|
||
|
||
import { parseResponse } from '@/lib/api-helpers'
|
||
import { checkAuthStatus } from '@/lib/fetch-with-auth'
|
||
import { cn } from '@/lib/utils'
|
||
import { APP_FULL_NAME } from '@/lib/version'
|
||
|
||
|
||
export function AuthPage() {
|
||
const [token, setToken] = useState('')
|
||
const [isValidating, setIsValidating] = useState(false)
|
||
const [error, setError] = useState('')
|
||
const [checkingAuth, setCheckingAuth] = useState(true)
|
||
const navigate = useNavigate()
|
||
const { t } = useTranslation()
|
||
const { enableWavesBackground, setEnableWavesBackground } = useAnimation()
|
||
const { theme, setTheme } = useTheme()
|
||
|
||
// 如果已经认证，直接跳转到首页
|
||
useEffect(() => {
|
||
const verifyAuth = async () => {
|
||
try {
|
||
const isAuth = await checkAuthStatus()
|
||
if (isAuth) {
|
||
navigate({ to: '/' })
|
||
}
|
||
} catch {
|
||
// 忽略错误，保持在登录页
|
||
} finally {
|
||
setCheckingAuth(false)
|
||
}
|
||
}
|
||
verifyAuth()
|
||
}, [navigate])
|
||
|
||
// 获取实际应用的主题（处理 system 情况）
|
||
const getActualTheme = () => {
|
||
if (theme === 'system') {
|
||
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||
}
|
||
return theme
|
||
}
|
||
|
||
const actualTheme = getActualTheme()
|
||
|
||
// 主题切换（无动画）
|
||
const toggleTheme = () => {
|
||
const newTheme = actualTheme === 'dark' ? 'light' : 'dark'
|
||
setTheme(newTheme)
|
||
}
|
||
|
||
const handleSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setError('')
|
||
|
||
if (!token.trim()) {
|
||
setError(t('auth.tokenRequired'))
|
||
return
|
||
}
|
||
|
||
setIsValidating(true)
|
||
|
||
console.log('开始验证 token...')
|
||
|
||
try {
|
||
// 向后端发送请求验证 token（后端会设置 HttpOnly Cookie）
|
||
const response = await fetch('/api/webui/auth/verify', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
credentials: 'include', // 确保接收并存储 Cookie
|
||
body: JSON.stringify({ token: token.trim() }),
|
||
})
|
||
|
||
console.log('Token 验证响应状态:', response.status)
|
||
|
||
const result = await parseResponse<{
|
||
valid: boolean
|
||
is_first_setup?: boolean
|
||
message?: string
|
||
}>(response)
|
||
|
||
if (!result.success) {
|
||
console.error('Token 验证失败:', result.error)
|
||
setError(result.error)
|
||
return
|
||
}
|
||
|
||
const data = result.data
|
||
console.log('Token 验证响应数据:', data)
|
||
|
||
if (data.valid) {
|
||
console.log('Token 验证成功，准备跳转...')
|
||
console.log('is_first_setup:', data.is_first_setup)
|
||
|
||
// Token 验证成功，Cookie 已由后端设置
|
||
// 等待一小段时间确保 Cookie 已设置
|
||
await new Promise((resolve) => setTimeout(resolve, 100))
|
||
|
||
// 再次检查认证状态
|
||
const authCheck = await checkAuthStatus()
|
||
console.log('跳转前认证状态检查:', authCheck)
|
||
|
||
// 直接使用验证响应中的 is_first_setup 字段，避免额外请求
|
||
if (data.is_first_setup) {
|
||
console.log('跳转到首次配置页面')
|
||
// 需要首次配置，跳转到配置向导
|
||
navigate({ to: '/setup' })
|
||
} else {
|
||
console.log('跳转到首页')
|
||
// 不需要配置或配置已完成，跳转到首页
|
||
navigate({ to: '/' })
|
||
}
|
||
} else {
|
||
console.error('Token 验证失败:', data.message)
|
||
setError(data.message || t('auth.verifyFailed'))
|
||
}
|
||
} catch (err) {
|
||
console.error('Token 验证错误:', err)
|
||
setError(
|
||
err instanceof Error ? err.message : t('auth.connFailed')
|
||
)
|
||
} finally {
|
||
setIsValidating(false)
|
||
}
|
||
}
|
||
|
||
// 正在检查认证状态时显示加载
|
||
if (checkingAuth) {
|
||
return (
|
||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background p-4">
|
||
{enableWavesBackground && <WavesBackground />}
|
||
<div className="text-muted-foreground">{t('auth.checkingAuth')}</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-background p-4">
|
||
{/* 波浪背景 - 独立控制 */}
|
||
{enableWavesBackground && <WavesBackground />}
|
||
|
||
{/* 认证卡片 - 磨砂玻璃效果 */}
|
||
<Card className="relative z-10 w-full max-w-md shadow-2xl backdrop-blur-xl bg-card/80 border-border/50">
|
||
{/* 主题切换按钮 */}
|
||
<button
|
||
onClick={toggleTheme}
|
||
className="absolute right-4 top-4 rounded-lg p-2 hover:bg-accent transition-colors z-10 text-foreground"
|
||
title={actualTheme === 'dark' ? t('auth.switchToLight') : t('auth.switchToDark')}
|
||
>
|
||
{actualTheme === 'dark' ? (
|
||
<Sun className="h-5 w-5" strokeWidth={2.5} fill="none" />
|
||
) : (
|
||
<Moon className="h-5 w-5" strokeWidth={2.5} fill="none" />
|
||
)}
|
||
</button>
|
||
|
||
<CardHeader className="space-y-4 text-center">
|
||
{/* Logo/Icon */}
|
||
<div className="mx-auto flex h-16 w-16 items-center justify-center rounded-2xl bg-primary/10">
|
||
<Lock className="h-8 w-8 text-primary" strokeWidth={2} fill="none" />
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<CardTitle className="text-2xl font-bold">{t('auth.welcome')}</CardTitle>
|
||
<CardDescription className="text-base">
|
||
{t('auth.accessDesc')}
|
||
</CardDescription>
|
||
</div>
|
||
</CardHeader>
|
||
|
||
<CardContent>
|
||
<form onSubmit={handleSubmit} className="space-y-4">
|
||
{/* Token 输入框 */}
|
||
<div className="space-y-2">
|
||
<Label htmlFor="token" className="text-sm font-medium">
|
||
Access Token
|
||
</Label>
|
||
<div className="relative">
|
||
<Key className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" strokeWidth={2} fill="none" />
|
||
<Input
|
||
id="token"
|
||
type="password"
|
||
placeholder={t('auth.tokenPlaceholder')}
|
||
value={token}
|
||
onChange={(e) => setToken(e.target.value)}
|
||
className={cn('pl-10', error && 'border-red-500 focus-visible:ring-red-500')}
|
||
disabled={isValidating}
|
||
autoFocus
|
||
autoComplete="off"
|
||
aria-invalid={error ? true : undefined}
|
||
aria-describedby={error ? 'token-error' : undefined}
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 错误提示 */}
|
||
{error && (
|
||
<div id="token-error" role="alert" className="flex items-center gap-2 rounded-md bg-red-50 p-3 text-sm text-red-600 dark:bg-red-950/50 dark:text-red-400">
|
||
<AlertCircle className="h-4 w-4 flex-shrink-0" strokeWidth={2} fill="none" />
|
||
<span>{error}</span>
|
||
</div>
|
||
)}
|
||
|
||
{/* 提交按钮 */}
|
||
<Button type="submit" className="w-full" disabled={isValidating}>
|
||
{isValidating ? (
|
||
<>
|
||
<div className="mr-2 h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
|
||
{t('auth.verifyingLabel')}
|
||
</>
|
||
) : (
|
||
t('auth.verifyEnter')
|
||
)}
|
||
</Button>
|
||
|
||
{/* 帮助文本 */}
|
||
<Dialog>
|
||
<DialogTrigger asChild>
|
||
<button className="w-full text-center text-sm text-primary hover:text-primary/80 transition-colors underline-offset-4 hover:underline flex items-center justify-center gap-1">
|
||
<HelpCircle className="h-4 w-4" strokeWidth={2} fill="none" />
|
||
{t('auth.helpLink')}
|
||
</button>
|
||
</DialogTrigger>
|
||
<DialogContent className="sm:max-w-md">
|
||
<DialogHeader>
|
||
<DialogTitle className="flex items-center gap-2">
|
||
<Lock className="h-5 w-5 text-primary" strokeWidth={2} fill="none" />
|
||
{t('auth.helpTitle')}
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
{t('auth.helpDesc')}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<div className="space-y-4">
|
||
{/* 方式一：查看控制台 */}
|
||
<div className="rounded-lg border bg-muted/50 p-4 space-y-2">
|
||
<div className="flex items-start gap-3">
|
||
<Terminal className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
|
||
<div className="flex-1 space-y-2">
|
||
<h4 className="font-semibold text-sm">{t('auth.method1Title')}</h4>
|
||
<p className="text-sm text-muted-foreground">
|
||
{t('auth.method1Desc')}
|
||
</p>
|
||
<div className="rounded bg-background p-2 font-mono text-xs">
|
||
<p className="text-muted-foreground">{t('auth.method1Example1')}</p>
|
||
<p className="text-muted-foreground">{t('auth.method1Example2')}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 方式二：查看配置文件 */}
|
||
<div className="rounded-lg border bg-muted/50 p-4 space-y-2">
|
||
<div className="flex items-start gap-3">
|
||
<FileText className="h-5 w-5 text-primary flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
|
||
<div className="flex-1 space-y-2">
|
||
<h4 className="font-semibold text-sm">{t('auth.method2Title')}</h4>
|
||
<p className="text-sm text-muted-foreground">
|
||
{t('auth.method2Desc')}
|
||
</p>
|
||
<div className="rounded bg-background p-2 font-mono text-xs break-all">
|
||
<code className="text-primary">data/webui.json</code>
|
||
</div>
|
||
<p className="text-xs text-muted-foreground">
|
||
{t('auth.method2FileHint')} <code className="px-1 py-0.5 bg-background rounded">access_token</code>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 安全提示 */}
|
||
<div className="rounded-lg border border-yellow-200 dark:border-yellow-900 bg-yellow-50 dark:bg-yellow-950/30 p-3">
|
||
<div className="flex gap-2">
|
||
<AlertCircle className="h-4 w-4 text-yellow-600 dark:text-yellow-500 flex-shrink-0 mt-0.5" strokeWidth={2} fill="none" />
|
||
<div className="text-sm text-yellow-800 dark:text-yellow-300 space-y-1">
|
||
<p className="font-semibold">{t('auth.securityTipTitle')}</p>
|
||
<ul className="list-disc list-inside space-y-0.5 text-xs">
|
||
<li>{t('auth.securityTip1')}</li>
|
||
<li>{t('auth.securityTip2')}</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DialogContent>
|
||
</Dialog>
|
||
|
||
{/* 性能优化选项 */}
|
||
<AlertDialog>
|
||
<AlertDialogTrigger asChild>
|
||
<button className="w-full text-center text-sm text-muted-foreground hover:text-foreground transition-colors underline-offset-4 hover:underline flex items-center justify-center gap-1">
|
||
<Zap className="h-4 w-4" strokeWidth={2} fill="none" />
|
||
{t('auth.slowLink')}
|
||
</button>
|
||
</AlertDialogTrigger>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle className="flex items-center gap-2">
|
||
<Zap className="h-5 w-5 text-primary" strokeWidth={2} fill="none" />
|
||
{t('auth.disableAnimTitle')}
|
||
</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
{t('auth.disableAnimDesc')}
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<div className="rounded-lg border bg-muted/50 p-4 space-y-2">
|
||
<p className="text-sm text-muted-foreground">
|
||
{t('auth.disableAnimDetail')}
|
||
</p>
|
||
</div>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
|
||
<AlertDialogAction
|
||
onClick={() => setEnableWavesBackground(false)}
|
||
>
|
||
{t('auth.disableAnimBtn')}
|
||
</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
</form>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
{/* 页脚信息 */}
|
||
<div className="absolute bottom-4 left-0 right-0 text-center text-xs text-muted-foreground">
|
||
<p>{APP_FULL_NAME}</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|