eric/gitlab-instance-0a899031_nomadvip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

s'

Browse Source
This commit is contained in:
eric
2026-03-12 03:55:17 -05:00
parent 7e8f0e3e40
commit 2a9bb8330c
18 changed files with 767 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
app/vip/components/landing/LoginForm.tsx
View File

@@ -1,25 +1,29 @@
"use client";
import { useState, useRef, useEffect } from "react";
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, onSuccess, autoFocus }: LoginFormProps) {
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]);
}, [autoFocus, mode]);
const handleSubmit = async (e: React.FormEvent) => {
const handleUserIdSubmit = async (e: FormEvent) => {
e.preventDefault();
const trimmed = userId.trim();
if (!trimmed) {
@@ -30,11 +34,8 @@ export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
setLoading(true);
try {
const ok = await onVerify(trimmed);
if (ok) {
onSuccess();
} else {
setError("未找到该账号的会员记录，请确认账号正确");
}
if (ok) onSuccess();
else setError("未找到该账号的会员记录，请确认账号正确");
} catch {
setError("验证失败，请稍后重试");
} finally {
@@ -42,39 +43,103 @@ export function LoginForm({ onVerify, onSuccess, autoFocus }: LoginFormProps) {
}
};
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 (
<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>
<>
<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)]"}`}
>
user_id
</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>
)}
<button
type="submit"
disabled={loading}
className={`${styles.btnPrimary} ${styles.btnLarge}`}
style={{ width: "100%" }}
>
{loading ? "验证中..." : "验证并登录"}
</button>
</form>
</>
);
}