252 lines
9.3 KiB
TypeScript
252 lines
9.3 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
|
|
'use client';
|
|
|
|
import { AlertCircle, CheckCircle } from 'lucide-react';
|
|
import { useRouter, useSearchParams } from 'next/navigation';
|
|
import { Suspense, useEffect, useState } from 'react';
|
|
|
|
import { checkForUpdates, CURRENT_VERSION, UpdateStatus } from '@/lib/version';
|
|
|
|
import { useSite } from '@/components/SiteProvider';
|
|
import { ThemeToggle } from '@/components/ThemeToggle';
|
|
|
|
// 版本显示组件
|
|
function VersionDisplay() {
|
|
const [updateStatus, setUpdateStatus] = useState<UpdateStatus | null>(null);
|
|
const [isChecking, setIsChecking] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const checkUpdate = async () => {
|
|
try {
|
|
const status = await checkForUpdates();
|
|
setUpdateStatus(status);
|
|
} catch (_) {
|
|
// do nothing
|
|
} finally {
|
|
setIsChecking(false);
|
|
}
|
|
};
|
|
|
|
checkUpdate();
|
|
}, []);
|
|
|
|
return (
|
|
<button
|
|
onClick={() =>
|
|
window.open('https://github.com/senshinya/MoonTV', '_blank')
|
|
}
|
|
className='absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 transition-colors cursor-pointer'
|
|
>
|
|
<span className='font-mono'>v{CURRENT_VERSION}</span>
|
|
{!isChecking && updateStatus !== UpdateStatus.FETCH_FAILED && (
|
|
<div
|
|
className={`flex items-center gap-1.5 ${
|
|
updateStatus === UpdateStatus.HAS_UPDATE
|
|
? 'text-yellow-600 dark:text-yellow-400'
|
|
: updateStatus === UpdateStatus.NO_UPDATE
|
|
? 'text-purple-600 dark:text-purple-400'
|
|
: ''
|
|
}`}
|
|
>
|
|
{updateStatus === UpdateStatus.HAS_UPDATE && (
|
|
<>
|
|
<AlertCircle className='w-3.5 h-3.5' />
|
|
<span className='font-semibold text-xs'>有新版本</span>
|
|
</>
|
|
)}
|
|
{updateStatus === UpdateStatus.NO_UPDATE && (
|
|
<>
|
|
<CheckCircle className='w-3.5 h-3.5' />
|
|
<span className='font-semibold text-xs'>已是最新</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|
|
|
|
function LoginPageClient() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [password, setPassword] = useState('');
|
|
const [username, setUsername] = useState('');
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
const [shouldAskUsername, setShouldAskUsername] = useState(false);
|
|
const [enableRegister, setEnableRegister] = useState(false);
|
|
const { siteName } = useSite();
|
|
|
|
// 在客户端挂载后设置配置
|
|
useEffect(() => {
|
|
if (typeof window !== 'undefined') {
|
|
const storageType = (window as any).RUNTIME_CONFIG?.STORAGE_TYPE;
|
|
setShouldAskUsername(storageType && storageType !== 'localstorage');
|
|
setEnableRegister(
|
|
Boolean((window as any).RUNTIME_CONFIG?.ENABLE_REGISTER)
|
|
);
|
|
}
|
|
}, []);
|
|
|
|
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
|
|
e.preventDefault();
|
|
setError(null);
|
|
|
|
if (!password || (shouldAskUsername && !username)) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch('/api/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
password,
|
|
...(shouldAskUsername ? { username } : {}),
|
|
}),
|
|
});
|
|
|
|
if (res.ok) {
|
|
const redirect = searchParams.get('redirect') || '/';
|
|
router.replace(redirect);
|
|
} else if (res.status === 401) {
|
|
setError('密码错误');
|
|
} else {
|
|
const data = await res.json().catch(() => ({}));
|
|
setError(data.error ?? '服务器错误');
|
|
}
|
|
} catch (error) {
|
|
setError('网络错误，请稍后重试');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
// 处理注册逻辑
|
|
const handleRegister = async () => {
|
|
setError(null);
|
|
if (!password || !username) return;
|
|
|
|
try {
|
|
setLoading(true);
|
|
const res = await fetch('/api/register', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ username, password }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
const redirect = searchParams.get('redirect') || '/';
|
|
router.replace(redirect);
|
|
} else {
|
|
const data = await res.json().catch(() => ({}));
|
|
setError(data.error ?? '服务器错误');
|
|
}
|
|
} catch (error) {
|
|
setError('网络错误，请稍后重试');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className='relative min-h-screen flex items-center justify-center px-4 overflow-hidden'>
|
|
<div className='absolute top-4 right-4'>
|
|
<ThemeToggle />
|
|
</div>
|
|
<div className='relative z-10 w-full max-w-md rounded-3xl bg-gradient-to-b from-white/90 via-white/70 to-white/40 dark:from-zinc-900/90 dark:via-zinc-900/70 dark:to-zinc-900/40 backdrop-blur-xl shadow-2xl p-10 dark:border dark:border-zinc-800'>
|
|
{/* 渐变酷炫Logo */}
|
|
<h1 className='relative tracking-tight text-center text-3xl font-extrabold mb-8 drop-shadow-lg'>
|
|
<span className='bg-gradient-to-r from-purple-400 via-pink-500 to-purple-600 dark:from-purple-300 dark:via-pink-400 dark:to-purple-500 bg-clip-text text-transparent animate-pulse'>
|
|
{siteName}
|
|
</span>
|
|
{/* 添加发光效果 */}
|
|
<span className='absolute inset-0 bg-gradient-to-r from-purple-400 via-pink-500 to-purple-600 dark:from-purple-300 dark:via-pink-400 dark:to-purple-500 bg-clip-text text-transparent blur-sm opacity-50 animate-pulse'>
|
|
{siteName}
|
|
</span>
|
|
</h1>
|
|
<form onSubmit={handleSubmit} className='space-y-8'>
|
|
{shouldAskUsername && (
|
|
<div>
|
|
<label htmlFor='username' className='sr-only'>
|
|
用户名
|
|
</label>
|
|
<input
|
|
id='username'
|
|
type='text'
|
|
autoComplete='username'
|
|
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
|
|
placeholder='输入用户名'
|
|
value={username}
|
|
onChange={(e) => setUsername(e.target.value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div>
|
|
<label htmlFor='password' className='sr-only'>
|
|
密码
|
|
</label>
|
|
<input
|
|
id='password'
|
|
type='password'
|
|
autoComplete='current-password'
|
|
className='block w-full rounded-lg border-0 py-3 px-4 text-gray-900 dark:text-gray-100 shadow-sm ring-1 ring-white/60 dark:ring-white/20 placeholder:text-gray-500 dark:placeholder:text-gray-400 focus:ring-2 focus:ring-purple-500 focus:outline-none sm:text-base bg-white/60 dark:bg-zinc-800/60 backdrop-blur'
|
|
placeholder='输入访问密码'
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{error && (
|
|
<p className='text-sm text-red-600 dark:text-red-400'>{error}</p>
|
|
)}
|
|
|
|
{/* 登录 / 注册按钮 */}
|
|
{shouldAskUsername && enableRegister ? (
|
|
<div className='flex gap-4'>
|
|
<button
|
|
type='button'
|
|
onClick={handleRegister}
|
|
disabled={!password || !username || loading}
|
|
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
|
>
|
|
{loading ? '注册中...' : '注册'}
|
|
</button>
|
|
<button
|
|
type='submit'
|
|
disabled={
|
|
!password || loading || (shouldAskUsername && !username)
|
|
}
|
|
className='flex-1 inline-flex justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
|
>
|
|
{loading ? '登录中...' : '登录'}
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<button
|
|
type='submit'
|
|
disabled={
|
|
!password || loading || (shouldAskUsername && !username)
|
|
}
|
|
className='inline-flex w-full justify-center rounded-lg bg-gradient-to-r from-purple-600 to-purple-500 hover:from-purple-700 hover:to-purple-600 py-3 text-base font-semibold text-white shadow-lg transition-all duration-200 disabled:cursor-not-allowed disabled:opacity-50'
|
|
>
|
|
{loading ? '登录中...' : '登录'}
|
|
</button>
|
|
)}
|
|
</form>
|
|
</div>
|
|
|
|
{/* 版本信息显示 */}
|
|
<VersionDisplay />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function LoginPage() {
|
|
return (
|
|
<Suspense fallback={<div>Loading...</div>}>
|
|
<LoginPageClient />
|
|
</Suspense>
|
|
);
|
|
} |