341 lines
10 KiB
TypeScript
341 lines
10 KiB
TypeScript
"use client";
|
||
|
||
import { useEffect, useState, type FormEvent } from "react";
|
||
import { Copyable } from "../Copyable";
|
||
import styles from "../vip.module.css";
|
||
|
||
type WelcomeBlockProps = {
|
||
userName: string | null;
|
||
userEmail?: string | null;
|
||
bindingRequired?: boolean;
|
||
};
|
||
|
||
const DEFAULT_PASSWORD = "12345678";
|
||
|
||
function getStorage(key: string): string | null {
|
||
if (typeof window === "undefined") return null;
|
||
return localStorage.getItem(key);
|
||
}
|
||
|
||
function isAnonymousUserId(value: string | null): value is string {
|
||
return !!value && /^user\d+$/.test(value);
|
||
}
|
||
|
||
export function WelcomeBlock({
|
||
userName,
|
||
userEmail,
|
||
bindingRequired = false,
|
||
}: WelcomeBlockProps) {
|
||
const userId = getStorage("userId");
|
||
const storedUserName = getStorage("userName");
|
||
const storedUserEmail = getStorage("userEmail");
|
||
const emailLinked = getStorage("emailLinked");
|
||
|
||
const [dbEmail, setDbEmail] = useState<string | null>(null);
|
||
const [backendLinkedEmail, setBackendLinkedEmail] = useState<string | null>(null);
|
||
const [backendMemosAccount, setBackendMemosAccount] = useState<string | null>(null);
|
||
const [email, setEmail] = useState("");
|
||
const [checkingLink, setCheckingLink] = useState(true);
|
||
const [loading, setLoading] = useState(false);
|
||
const [error, setError] = useState<string | null>(null);
|
||
|
||
const displayName =
|
||
storedUserEmail || userEmail || userName || storedUserName || "会员";
|
||
|
||
const storedLinkedEmail =
|
||
storedUserEmail || (storedUserName?.includes("@") ? storedUserName : null);
|
||
const memosAccount =
|
||
getStorage("memosAccount") ||
|
||
backendMemosAccount ||
|
||
(isAnonymousUserId(userId) ? userId : null);
|
||
|
||
const pbEmail = (() => {
|
||
try {
|
||
const raw = getStorage("pb_user");
|
||
if (!raw) return null;
|
||
const parsed = JSON.parse(raw) as { email?: string };
|
||
return parsed.email ?? null;
|
||
} catch {
|
||
return null;
|
||
}
|
||
})();
|
||
|
||
const alreadyLinked =
|
||
emailLinked === "1" ||
|
||
!!storedLinkedEmail ||
|
||
!!backendLinkedEmail ||
|
||
!!pbEmail;
|
||
|
||
const needLinkEmail =
|
||
bindingRequired &&
|
||
isAnonymousUserId(userId) &&
|
||
!alreadyLinked &&
|
||
!checkingLink;
|
||
|
||
useEffect(() => {
|
||
if (!userId || (alreadyLinked && memosAccount)) {
|
||
setCheckingLink(false);
|
||
return;
|
||
}
|
||
|
||
fetch(`/api/vip/linked-email?user_id=${encodeURIComponent(userId)}`, {
|
||
cache: "no-store",
|
||
})
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
const linkedEmail = data?.email;
|
||
const linkedAnonymousUserId =
|
||
typeof data?.anonymousUserId === "string" &&
|
||
/^user\d+$/.test(data.anonymousUserId)
|
||
? data.anonymousUserId
|
||
: null;
|
||
if (linkedAnonymousUserId && typeof window !== "undefined") {
|
||
setBackendMemosAccount(linkedAnonymousUserId);
|
||
localStorage.setItem("memosAccount", linkedAnonymousUserId);
|
||
}
|
||
if (!linkedEmail || typeof window === "undefined") return;
|
||
|
||
setBackendLinkedEmail(linkedEmail);
|
||
localStorage.setItem("emailLinked", "1");
|
||
localStorage.setItem("userEmail", linkedEmail);
|
||
localStorage.setItem("userName", linkedEmail);
|
||
|
||
if (bindingRequired) {
|
||
window.location.reload();
|
||
}
|
||
})
|
||
.catch(() => {})
|
||
.finally(() => setCheckingLink(false));
|
||
}, [alreadyLinked, bindingRequired, memosAccount, userId]);
|
||
|
||
useEffect(() => {
|
||
if (storedLinkedEmail || pbEmail || backendLinkedEmail) return;
|
||
if (userEmail) {
|
||
setDbEmail(userEmail);
|
||
return;
|
||
}
|
||
|
||
const applyEmail = (nextEmail: string | null) => {
|
||
if (!nextEmail) return;
|
||
setDbEmail(nextEmail);
|
||
if (typeof window !== "undefined" && emailLinked === "1") {
|
||
localStorage.setItem("userEmail", nextEmail);
|
||
}
|
||
};
|
||
|
||
fetch("/api/auth/email", { credentials: "include", cache: "no-store" })
|
||
.then((res) => res.json())
|
||
.then((data) => {
|
||
if (data?.email) {
|
||
applyEmail(data.email);
|
||
return;
|
||
}
|
||
|
||
return fetch("/api/auth/me", {
|
||
credentials: "include",
|
||
cache: "no-store",
|
||
})
|
||
.then((res) => res.json())
|
||
.then((meData) => applyEmail(meData?.user?.email ?? null));
|
||
})
|
||
.catch(() => {});
|
||
}, [backendLinkedEmail, emailLinked, pbEmail, storedLinkedEmail, userEmail]);
|
||
|
||
const handleLinkSubmit = async (event: FormEvent<HTMLFormElement>) => {
|
||
event.preventDefault();
|
||
if (!userId || !isAnonymousUserId(userId)) return;
|
||
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
try {
|
||
const normalizedEmail = email.trim().toLowerCase();
|
||
const res = await fetch("/api/auth/link-email", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
email: normalizedEmail,
|
||
password: DEFAULT_PASSWORD,
|
||
anonymousUserId: userId,
|
||
}),
|
||
});
|
||
const data = await res.json().catch(() => ({}));
|
||
|
||
if (!res.ok || !data?.ok || !data?.token || !data?.record?.id) {
|
||
setError(data?.error || "绑定邮箱失败");
|
||
return;
|
||
}
|
||
|
||
const { pbSaveAuth } = await import("@/app/lib/pocketbase");
|
||
pbSaveAuth(data.token, {
|
||
id: data.record.id,
|
||
email: data.record.email,
|
||
});
|
||
|
||
await fetch("/api/auth/sync-session", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({
|
||
token: data.token,
|
||
record: data.record,
|
||
anonymousUserId: userId,
|
||
}),
|
||
credentials: "include",
|
||
});
|
||
|
||
localStorage.setItem("memosAccount", userId);
|
||
localStorage.setItem("userId", data.record.id);
|
||
localStorage.setItem("userEmail", data.record.email || normalizedEmail);
|
||
localStorage.setItem("userName", data.record.email || normalizedEmail);
|
||
localStorage.setItem("emailLinked", "1");
|
||
localStorage.setItem("paidType", "vip");
|
||
|
||
window.location.href = "/";
|
||
} catch {
|
||
setError("绑定邮箱失败");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const displayEmail =
|
||
storedLinkedEmail || pbEmail || backendLinkedEmail || dbEmail || userEmail || null;
|
||
|
||
return (
|
||
<>
|
||
{needLinkEmail ? (
|
||
<section
|
||
className={styles.section}
|
||
style={{ paddingTop: "1.5rem", paddingBottom: "0.5rem" }}
|
||
>
|
||
<div className={styles.loginCard} style={{ maxWidth: "420px" }}>
|
||
<div
|
||
style={{
|
||
fontSize: "1rem",
|
||
fontWeight: 600,
|
||
marginBottom: "0.35rem",
|
||
color: "var(--foreground)",
|
||
}}
|
||
>
|
||
先绑定邮箱，再进入 VIP
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: "0.85rem",
|
||
color: "var(--muted-foreground)",
|
||
marginBottom: "0.9rem",
|
||
}}
|
||
>
|
||
当前会员还在匿名账号下。绑定后会迁移到统一邮箱账号，默认密码为
|
||
{" "}
|
||
{DEFAULT_PASSWORD}
|
||
。
|
||
</p>
|
||
<form onSubmit={handleLinkSubmit}>
|
||
<input
|
||
type="email"
|
||
value={email}
|
||
onChange={(event) => setEmail(event.target.value)}
|
||
placeholder="your@email.com"
|
||
required
|
||
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>
|
||
) : null}
|
||
<button
|
||
type="submit"
|
||
disabled={loading}
|
||
className={`${styles.btnPrimary} ${styles.btnLarge}`}
|
||
style={{ width: "100%" }}
|
||
>
|
||
{loading ? "处理中..." : "绑定邮箱并继续"}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
) : null}
|
||
|
||
<section className={styles.section} style={{ paddingTop: "1.5rem" }}>
|
||
<h1
|
||
className="animate__animated animate__fadeInDown"
|
||
style={{
|
||
fontSize: "clamp(1.5rem, 4vw, 2rem)",
|
||
fontWeight: 600,
|
||
margin: 0,
|
||
animationDelay: "0.1s",
|
||
animationFillMode: "both",
|
||
}}
|
||
>
|
||
欢迎回来，<Copyable text={displayName}>{displayName}</Copyable>
|
||
</h1>
|
||
<p
|
||
className="animate__animated animate__fadeInDown"
|
||
style={{
|
||
fontSize: "0.95rem",
|
||
color: "var(--muted-foreground)",
|
||
margin: "0.25rem 0 0",
|
||
animationDelay: "0.15s",
|
||
animationFillMode: "both",
|
||
}}
|
||
>
|
||
以下是当前会员账号和登录信息
|
||
</p>
|
||
<div className={styles.loginCard}>
|
||
<div className={styles.loginCardTitle}>会员登录信息</div>
|
||
<div className={styles.loginCardRow}>
|
||
<span className={styles.loginCardLabel}>网址</span>
|
||
<Copyable text="/community">
|
||
/community
|
||
</Copyable>
|
||
<a
|
||
href="/community"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className={styles.loginCardLink}
|
||
>
|
||
打开
|
||
</a>
|
||
</div>
|
||
<div className={styles.loginCardRow}>
|
||
<span className={styles.loginCardLabel}>账号</span>
|
||
<Copyable text={memosAccount || ""}>
|
||
<span className={styles.loginCardValue}>{memosAccount || "-"}</span>
|
||
</Copyable>
|
||
</div>
|
||
<div className={styles.loginCardRow}>
|
||
<span className={styles.loginCardLabel}>密码</span>
|
||
<Copyable text={DEFAULT_PASSWORD}>
|
||
<span className={styles.loginCardValue}>{DEFAULT_PASSWORD}</span>
|
||
</Copyable>
|
||
</div>
|
||
<div className={styles.loginCardRow}>
|
||
<span className={styles.loginCardLabel}>邮箱</span>
|
||
<Copyable text={displayEmail || ""}>
|
||
<span className={styles.loginCardValue}>{displayEmail || "-"}</span>
|
||
</Copyable>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</>
|
||
);
|
||
}
|