's'
This commit is contained in:
eric
@@ -1,88 +1,279 @@
|
||||
"use client";
|
||||
|
||||
import { useState, type FormEvent } from "react";
|
||||
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);
|
||||
}
|
||||
|
||||
/** 匿名 user_id 格式：user + 数字 */
|
||||
function isAnonymousUserId(val: string | null): boolean {
|
||||
return !!val && /^user\d+$/.test(val);
|
||||
function isAnonymousUserId(value: string | null): value is string {
|
||||
return !!value && /^user\d+$/.test(value);
|
||||
}
|
||||
|
||||
export function WelcomeBlock({ userName }: WelcomeBlockProps) {
|
||||
const displayName = userName || getStorage("userName") || "会员";
|
||||
export function WelcomeBlock({
|
||||
userName,
|
||||
userEmail,
|
||||
bindingRequired = false,
|
||||
}: WelcomeBlockProps) {
|
||||
const userId = getStorage("userId");
|
||||
const needLinkEmail = isAnonymousUserId(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 [password, setPassword] = useState("");
|
||||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||||
const [checkingLink, setCheckingLink] = useState(true);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [linked, setLinked] = useState(false);
|
||||
|
||||
const handleLinkSubmit = async (e: FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setLoading(true);
|
||||
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 {
|
||||
if (password !== passwordConfirm) {
|
||||
setError("两次密码不一致");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
if (password.length < 8) {
|
||||
setError("密码至少 8 位");
|
||||
setLoading(false);
|
||||
return;
|
||||
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: email.trim(),
|
||||
password,
|
||||
email: normalizedEmail,
|
||||
password: DEFAULT_PASSWORD,
|
||||
anonymousUserId: userId,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (!data?.ok) {
|
||||
setError(data?.error || "操作失败");
|
||||
setLoading(false);
|
||||
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 });
|
||||
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 }),
|
||||
body: JSON.stringify({
|
||||
token: data.token,
|
||||
record: data.record,
|
||||
anonymousUserId: userId,
|
||||
}),
|
||||
credentials: "include",
|
||||
});
|
||||
if (typeof window !== "undefined") {
|
||||
localStorage.setItem("userId", data.record.id);
|
||||
localStorage.setItem("userName", data.record.email || data.record.id);
|
||||
}
|
||||
setLinked(true);
|
||||
window.location.reload();
|
||||
|
||||
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("操作失败");
|
||||
setError("绑定邮箱失败");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (needLinkEmail && !linked) {
|
||||
return (
|
||||
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"
|
||||
@@ -94,135 +285,56 @@ export function WelcomeBlock({ userName }: WelcomeBlockProps) {
|
||||
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 1rem",
|
||||
margin: "0.25rem 0 0",
|
||||
animationDelay: "0.15s",
|
||||
animationFillMode: "both",
|
||||
}}
|
||||
>
|
||||
补充邮箱后可在各站点通用登录，Memos 账号密码为 12345678
|
||||
以下是当前会员账号和登录信息
|
||||
</p>
|
||||
<form onSubmit={handleLinkSubmit} className={styles.loginCard} style={{ maxWidth: "400px" }}>
|
||||
<input
|
||||
type="email"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.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",
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="至少 8 位"
|
||||
required
|
||||
minLength={8}
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
type="password"
|
||||
value={passwordConfirm}
|
||||
onChange={(e) => setPasswordConfirm(e.target.value)}
|
||||
placeholder="再次输入密码"
|
||||
required
|
||||
minLength={8}
|
||||
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>
|
||||
<div className={styles.loginCard}>
|
||||
<div className={styles.loginCardTitle}>会员登录信息</div>
|
||||
<div className={styles.loginCardRow}>
|
||||
<span className={styles.loginCardLabel}>网址</span>
|
||||
<Copyable text="https://qun.hackrobot.cn">
|
||||
qun.hackrobot.cn
|
||||
</Copyable>
|
||||
<a
|
||||
href="https://qun.hackrobot.cn"
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<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="https://qun.hackrobot.cn">qun.hackrobot.cn</Copyable>
|
||||
<a href="https://qun.hackrobot.cn" target="_blank" rel="noopener noreferrer" className={styles.loginCardLink}>打开</a>
|
||||
</div>
|
||||
<div className={styles.loginCardRow}>
|
||||
<span className={styles.loginCardLabel}>账号</span>
|
||||
<Copyable text={displayName}><span className={styles.loginCardValue}>{displayName}</span></Copyable>
|
||||
</div>
|
||||
<div className={styles.loginCardRow}>
|
||||
<span className={styles.loginCardLabel}>密码</span>
|
||||
<Copyable text="12345678"><span className={styles.loginCardValue}>12345678</span></Copyable>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user