feat(project): init

components/login-form.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { startTransition, useMemo, useState, type FormEvent } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import type { UserRole } from "@/lib/types";
+
+interface LoginResponse {
+  ok?: boolean;
+  error?: string;
+  user?: {
+    role: UserRole;
+  };
+}
+
+function getErrorMessage(error: unknown, fallbackMessage: string): string {
+  return error instanceof Error ? error.message : fallbackMessage;
+}
+
+export default function LoginForm() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [errorMessage, setErrorMessage] = useState("");
+  const [isPending, setIsPending] = useState(false);
+
+  const notice = useMemo(() => {
+    const reason = searchParams.get("reason");
+
+    if (reason === "inactive") {
+      return "当前账号不可用，请联系管理员。";
+    }
+
+    return "使用管理员或已创建的普通用户登录。";
+  }, [searchParams]);
+
+  async function handleSubmit(
+    event: FormEvent<HTMLFormElement>,
+  ): Promise<void> {
+    event.preventDefault();
+    setErrorMessage("");
+    setIsPending(true);
+
+    try {
+      const response = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          username,
+          password,
+        }),
+      });
+      const payload = (await response.json()) as LoginResponse;
+
+      if (!response.ok || payload.ok !== true || !payload.user) {
+        throw new Error(payload.error || "登录失败，请稍后重试。");
+      }
+
+      const currentUser = payload.user;
+
+      startTransition(() => {
+        router.push(currentUser.role === "admin" ? "/admin" : "/studio");
+        router.refresh();
+      });
+    } catch (error) {
+      setErrorMessage(getErrorMessage(error, "登录失败，请稍后重试。"));
+    } finally {
+      setIsPending(false);
+    }
+  }
+
+  return (
+    <form className="login-form" onSubmit={handleSubmit}>
+      <div className="login-copy">
+        <p className="eyebrow">Secure Access</p>
+        <h1>登录后才能使用图片生成与后台管理。</h1>
+        <p>{notice}</p>
+      </div>
+
+      <label className="field">
+        <span>用户名</span>
+        <input
+          type="text"
+          autoComplete="username"
+          placeholder="admin"
+          value={username}
+          onChange={(event) => setUsername(event.target.value)}
+          required
+        />
+      </label>
+
+      <label className="field">
+        <span>密码</span>
+        <input
+          type="password"
+          autoComplete="current-password"
+          placeholder="输入密码"
+          value={password}
+          onChange={(event) => setPassword(event.target.value)}
+          required
+        />
+      </label>
+
+      {errorMessage ? <div className="error-banner">{errorMessage}</div> : null}
+
+      <button type="submit" className="primary-button" disabled={isPending}>
+        {isPending ? "登录中..." : "登录"}
+      </button>
+    </form>
+  );
+}