gitlab-instance-0a899031_nomadvip/app/vip/components/landing/LoginForm.tsx

"use client";

import { useState, useRef, useEffect, type FormEvent } from "react";
import styles from "../vip.module.css";

type LoginFormProps = {
  onVerify: (userId: string) => Promise<boolean>;
  onVerifyByEmail?: (email: string, password: string) => Promise<boolean>;
  onSuccess: () => void;
  autoFocus?: boolean;
};

export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: LoginFormProps) {
  const [mode, setMode] = useState<"user_id" | "email">("user_id");
  const [userId, setUserId] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const inputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    if (autoFocus) inputRef.current?.focus();
  }, [autoFocus, mode]);

  const handleUserIdSubmit = async (e: FormEvent) => {
    e.preventDefault();
    const trimmed = userId.trim();
    if (!trimmed) {
      setError("请输入您的账号");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const ok = await onVerify(trimmed);
      if (ok) onSuccess();
      else setError("未找到该账号的会员记录，请确认账号正确");
    } catch {
      setError("验证失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  const handleEmailSubmit = async (e: FormEvent) => {
    e.preventDefault();
    if (!onVerifyByEmail) return;
    const trimmedEmail = email.trim();
    if (!trimmedEmail || !password) {
      setError("请输入邮箱和密码");
      return;
    }
    setError(null);
    setLoading(true);
    try {
      const ok = await onVerifyByEmail(trimmedEmail, password);
      if (ok) onSuccess();
      else setError("未找到该邮箱关联的会员记录，请确认账号正确");
    } catch {
      setError("验证失败，请稍后重试");
    } finally {
      setLoading(false);
    }
  };

  const inputStyle = {
    width: "100%" as const,
    padding: "0.75rem 1rem",
    fontSize: "1rem",
    border: "1px solid var(--border)",
    borderRadius: "8px",
    background: "var(--background)",
    color: "var(--foreground)",
    marginBottom: "0.75rem",
  };

  return (
    <>
      <div className="mb-3 flex gap-2">
        <button
          type="button"
          onClick={() => { setMode("user_id"); setError(null); }}
          className={`flex-1 rounded-lg py-2 text-sm font-medium ${mode === "user_id" ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"}`}
        >
          账号
        </button>
        <button
          type="button"
          onClick={() => { setMode("email"); setError(null); }}
          className={`flex-1 rounded-lg py-2 text-sm font-medium ${mode === "email" ? "bg-[var(--primary)] text-[var(--primary-foreground)]" : "bg-[var(--muted)] text-[var(--muted-foreground)]"}`}
        >
          邮箱
        </button>
      </div>
      {mode === "user_id" ? (
        <form onSubmit={handleUserIdSubmit}>
          <input
            ref={inputRef}
            type="text"
            value={userId}
            onChange={(e) => setUserId(e.target.value)}
            placeholder="例如：user1234567890"
            disabled={loading}
            style={inputStyle}
          />
          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>
            {loading ? "验证中..." : "验证并登录"}
          </button>
        </form>
      ) : onVerifyByEmail ? (
        <form onSubmit={handleEmailSubmit}>
          <input
            ref={inputRef}
            type="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="your@email.com"
            disabled={loading}
            style={inputStyle}
          />
          <input
            type="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="密码"
            disabled={loading}
            style={inputStyle}
          />
          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>
            {loading ? "验证中..." : "验证并登录"}
          </button>
        </form>
      ) : (
        <form onSubmit={handleUserIdSubmit}>
          <input ref={inputRef} type="text" value={userId} onChange={(e) => setUserId(e.target.value)} placeholder="例如：user1234567890" disabled={loading} style={inputStyle} />
          {error && <p style={{ fontSize: "0.85rem", color: "#ef4444", marginBottom: "0.75rem" }}>{error}</p>}
          <button type="submit" disabled={loading} className={`${styles.btnPrimary} ${styles.btnLarge}`} style={{ width: "100%" }}>{loading ? "验证中..." : "验证并登录"}</button>
        </form>
      )}
    </>
  );
}