208 lines
7.2 KiB
TypeScript
208 lines
7.2 KiB
TypeScript
|
import { useState } from 'react';
|
|||
|
|
import { useRouter } from 'next/router';
|
|||
|
|
import Head from 'next/head';
|
|||
|
|
import Link from 'next/link';
|
|||
|
|
import { toast } from 'react-hot-toast';
|
|||
|
|
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
|
|||
|
|
import { auth } from '@/lib/supabase';
|
|||
|
|
|
|||
|
|
interface LoginForm {
|
|||
|
|
email: string;
|
|||
|
|
password: string;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function Login() {
|
|||
|
|
const router = useRouter();
|
|||
|
|
const [form, setForm] = useState<LoginForm>({
|
|||
|
|
email: '',
|
|||
|
|
password: '',
|
|||
|
|
});
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [showPassword, setShowPassword] = useState(false);
|
|||
|
|
|
|||
|
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|||
|
|
const { name, value } = e.target;
|
|||
|
|
setForm(prev => ({
|
|||
|
|
...prev,
|
|||
|
|
[name]: value
|
|||
|
|
}));
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|||
|
|
e.preventDefault();
|
|||
|
|
|
|||
|
|
if (!form.email || !form.password) {
|
|||
|
|
toast.error('请填写所有必填字段');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setLoading(true);
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 检查是否为演示模式
|
|||
|
|
const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
|
|||
|
|
const isDemoMode = !supabaseUrl || supabaseUrl === 'https://demo.supabase.co' || supabaseUrl === '';
|
|||
|
|
|
|||
|
|
if (isDemoMode) {
|
|||
|
|
// 演示模式：检查测试账号
|
|||
|
|
if (form.email === 'admin@demo.com' && form.password === 'admin123') {
|
|||
|
|
toast.success('登录成功！');
|
|||
|
|
// 在演示模式下直接跳转到仪表盘
|
|||
|
|
router.push('/dashboard');
|
|||
|
|
} else {
|
|||
|
|
toast.error('演示模式：请使用测试账号 admin@demo.com / admin123');
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 真实模式：使用 Supabase 认证
|
|||
|
|
try {
|
|||
|
|
await auth.signIn(form.email, form.password);
|
|||
|
|
toast.success('登录成功！');
|
|||
|
|
router.push('/dashboard');
|
|||
|
|
} catch (authError: any) {
|
|||
|
|
console.error('Supabase auth error:', authError);
|
|||
|
|
toast.error(authError.message || '登录失败，请检查邮箱和密码');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} catch (error: any) {
|
|||
|
|
console.error('Login error:', error);
|
|||
|
|
toast.error('登录过程中发生错误，请稍后重试');
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 填入测试账号
|
|||
|
|
const fillTestAccount = () => {
|
|||
|
|
setForm({
|
|||
|
|
email: 'admin@demo.com',
|
|||
|
|
password: 'admin123'
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<>
|
|||
|
|
<Head>
|
|||
|
|
<title>管理员登录 - 口译服务管理后台</title>
|
|||
|
|
</Head>
|
|||
|
|
|
|||
|
|
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
|
|||
|
|
<div className="max-w-md w-full space-y-8">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
|
|||
|
|
管理员登录
|
|||
|
|
</h2>
|
|||
|
|
<p className="mt-2 text-center text-sm text-gray-600">
|
|||
|
|
口译服务后台管理系统
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* 测试账号提示 */}
|
|||
|
|
<div className="bg-blue-50 border border-blue-200 rounded-md p-4">
|
|||
|
|
<div className="flex">
|
|||
|
|
<div className="ml-3">
|
|||
|
|
<h3 className="text-sm font-medium text-blue-800">
|
|||
|
|
测试账号
|
|||
|
|
</h3>
|
|||
|
|
<div className="mt-2 text-sm text-blue-700">
|
|||
|
|
<p>邮箱：admin@demo.com</p>
|
|||
|
|
<p>密码：admin123</p>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={fillTestAccount}
|
|||
|
|
className="mt-2 text-xs text-blue-600 hover:text-blue-500 underline"
|
|||
|
|
>
|
|||
|
|
点击自动填入
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
|
|||
|
|
<div className="rounded-md shadow-sm -space-y-px">
|
|||
|
|
<div>
|
|||
|
|
<label htmlFor="email" className="sr-only">
|
|||
|
|
邮箱地址
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="email"
|
|||
|
|
name="email"
|
|||
|
|
type="email"
|
|||
|
|
autoComplete="email"
|
|||
|
|
required
|
|||
|
|
className="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
|||
|
|
placeholder="管理员邮箱"
|
|||
|
|
value={form.email}
|
|||
|
|
onChange={handleInputChange}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative">
|
|||
|
|
<label htmlFor="password" className="sr-only">
|
|||
|
|
密码
|
|||
|
|
</label>
|
|||
|
|
<input
|
|||
|
|
id="password"
|
|||
|
|
name="password"
|
|||
|
|
type={showPassword ? 'text' : 'password'}
|
|||
|
|
autoComplete="current-password"
|
|||
|
|
required
|
|||
|
|
className="appearance-none rounded-none relative block w-full px-3 py-2 pr-10 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm"
|
|||
|
|
placeholder="管理员密码"
|
|||
|
|
value={form.password}
|
|||
|
|
onChange={handleInputChange}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
className="absolute inset-y-0 right-0 pr-3 flex items-center"
|
|||
|
|
onClick={() => setShowPassword(!showPassword)}
|
|||
|
|
>
|
|||
|
|
{showPassword ? (
|
|||
|
|
<EyeSlashIcon className="h-5 w-5 text-gray-400" />
|
|||
|
|
) : (
|
|||
|
|
<EyeIcon className="h-5 w-5 text-gray-400" />
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<div className="text-sm">
|
|||
|
|
<Link
|
|||
|
|
href="/"
|
|||
|
|
className="font-medium text-blue-600 hover:text-blue-500"
|
|||
|
|
>
|
|||
|
|
返回首页
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
<div className="text-sm">
|
|||
|
|
<a
|
|||
|
|
href="#"
|
|||
|
|
className="font-medium text-blue-600 hover:text-blue-500"
|
|||
|
|
>
|
|||
|
|
忘记密码？
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<button
|
|||
|
|
type="submit"
|
|||
|
|
disabled={loading}
|
|||
|
|
className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
|
|||
|
|
>
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="flex items-center">
|
|||
|
|
<div className="loading-spinner-sm mr-2"></div>
|
|||
|
|
登录中...
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
'登录'
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|