81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useRef, useEffect } from "react";
|
||
import styles from "../vip.module.css";
|
||
|
||
type LoginFormProps = {
|
||
onVerify: (userId: string) => Promise<boolean>;
|
||
onSuccess: () => void;
|
||
autoFocus?: boolean;
|
||
};
|
||
|
||
export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
|
||
const [userId, setUserId] = 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]);
|
||
|
||
const handleSubmit = async (e: React.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);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<form onSubmit={handleSubmit}>
|
||
<input
|
||
ref={inputRef}
|
||
type="text"
|
||
value={userId}
|
||
onChange={(e) => setUserId(e.target.value)}
|
||
placeholder="例如：user1234567890"
|
||
disabled={loading}
|
||
style={{
|
||
width: "100%",
|
||
padding: "0.75rem 1rem",
|
||
fontSize: "1rem",
|
||
border: "1px solid var(--border)",
|
||
borderRadius: "8px",
|
||
background: "var(--background)",
|
||
color: "var(--foreground)",
|
||
marginBottom: "0.75rem",
|
||
}}
|
||
/>
|
||
{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>
|
||
);
|
||
}
|