diff --git a/src/routes/login.tsx b/src/routes/login.tsx index 3f976d6..fecf48e 100644 --- a/src/routes/login.tsx +++ b/src/routes/login.tsx @@ -4,40 +4,68 @@ import { useForm } from "react-hook-form" import { z } from "zod/v4" import { zodResolver } from "@hookform/resolvers/zod" import { Eye, EyeOff } from "lucide-react" +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" +import { apiClient } from "@/lib/api-client" import { loginAdmin } from "@/lib/api/admin-api" import { useAuth } from "@/hooks/use-auth" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" +import type { LoginResponse } from "@/types/api" import type { AdminSession } from "@/types/admin" -const loginSchema = z.object({ +// Token 登录表单 +const tokenLoginSchema = z.object({ + token: z.string().min(1, "请输入 Admin Token"), +}) + +type TokenLoginForm = z.infer + +// 用户名密码登录表单 +const passwordLoginSchema = z.object({ username: z.string().min(1, "请输入用户名"), password: z.string().min(1, "请输入密码"), }) -type LoginForm = z.infer +type PasswordLoginForm = z.infer export default function LoginPage() { const navigate = useNavigate() const { login } = useAuth() const [error, setError] = useState("") const [showPassword, setShowPassword] = useState(false) + const [loginType, setLoginType] = useState<"token" | "password">("token") - const { - register, - handleSubmit, - formState: { errors, isSubmitting }, - } = useForm({ - resolver: zodResolver(loginSchema), - defaultValues: { - username: "", - password: "", - }, + // Token 登录表单 + const tokenForm = useForm({ + resolver: zodResolver(tokenLoginSchema), + defaultValues: { token: "" }, }) - async function onSubmit(data: LoginForm) { + // 密码登录表单 + const passwordForm = useForm({ + resolver: zodResolver(passwordLoginSchema), + defaultValues: { username: "", password: "" }, + }) + + // Token 登录 + async function handleTokenLogin(data: TokenLoginForm) { + setError("") + try { + const response = await apiClient + .post("auth/login", { json: { token: data.token } }) + .json() + + login(response.jwt, response.admin) + navigate("/") + } catch { + setError("Token 登录失败,请检查是否正确") + } + } + + // 密码登录 + async function handlePasswordLogin(data: PasswordLoginForm) { setError("") try { const response = await loginAdmin(data) @@ -62,56 +90,96 @@ export default function LoginPage() { 多奇管理后台 - 使用管理员账号登录 + 选择登录方式 -
-
- - - {errors.username && ( -

{errors.username.message}

- )} -
+ { setLoginType(val as "token" | "password"); setError("") }}> + + Token 登录 + 账号登录 + + + {/* Token 登录 */} + + +
+ + + {tokenForm.formState.errors.token && ( +

{tokenForm.formState.errors.token.message}

+ )} +
-
- -
- -
- {errors.password && ( -

{errors.password.message}

- )} -
+ +
- {error && ( -

{error}

- )} + {/* 密码登录 */} + +
+
+ + + {passwordForm.formState.errors.username && ( +

{passwordForm.formState.errors.username.message}

+ )} +
- -
+
+ +
+ + +
+ {passwordForm.formState.errors.password && ( +

{passwordForm.formState.errors.password.message}

+ )} +
+ + + +
+
+ + {error && ( +

{error}

+ )}