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-13 03:43:50 -05:00
parent e5d080c202
commit 857380aa01
29 changed files with 3595 additions and 580 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,25 @@
"use client";
import { useState, useRef, useEffect, type FormEvent } from "react";
import { useEffect, useRef, useState, type FormEvent } from "react";
import styles from "../vip.module.css";
type LoginFormProps = {
onVerify: (userId: string) => Promise<boolean>;
onVerifyByEmail?: (email: string, password: string) => Promise<boolean>;
onVerifyByEmail?: (
email: string,
password: string,
user_id?: string
) => Promise<boolean | { ok: boolean; error?: string }>;
onSuccess: () => void;
autoFocus?: boolean;
};
export function LoginForm({ onVerify, onVerifyByEmail, 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("");
@@ -30,6 +39,7 @@ export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: L
setError("请输入您的账号");
return;
}
setError(null);
setLoading(true);
try {
@@ -46,17 +56,26 @@ export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: L
const handleEmailSubmit = async (e: FormEvent) => {
e.preventDefault();
if (!onVerifyByEmail) return;
const trimmedEmail = email.trim();
if (!trimmedEmail || !password) {
setError("请输入邮箱和密码");
const trimmedPassword = password.trim();
if (!trimmedEmail) {
setError("请输入邮箱");
return;
}
if (!trimmedPassword) {
setError("请输入密码");
return;
}
setError(null);
setLoading(true);
try {
const ok = await onVerifyByEmail(trimmedEmail, password);
const result = await onVerifyByEmail(trimmedEmail, trimmedPassword);
const ok = typeof result === "object" ? result.ok : result;
const errMsg = typeof result === "object" ? result.error : undefined;
if (ok) onSuccess();
else setError("未找到该邮箱关联的会员记录，请确认账号正确");
else setError(errMsg || "邮箱或密码错误，或未找到关联的会员记录");
} catch {
setError("验证失败，请稍后重试");
} finally {
@@ -80,19 +99,34 @@ export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: L
<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)]"}`}
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)]"}`}
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
@@ -100,12 +134,21 @@ export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: L
type="text"
value={userId}
onChange={(e) => setUserId(e.target.value)}
placeholder="例如：user1234567890"
placeholder="例如：user1773315608560"
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%" }}>
{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>
@@ -124,20 +167,48 @@ export function LoginForm({ onVerify, onVerifyByEmail, onSuccess, autoFocus }: L
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="密码"
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%" }}>
{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>
<input
ref={inputRef}
type="text"
value={userId}
onChange={(e) => setUserId(e.target.value)}
placeholder="例如：user1773315608560"
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>
)}
</>