123 lines
4.9 KiB
TypeScript
123 lines
4.9 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
import { Link } from "@/i18n/navigation";
|
||
|
||
/**
|
||
* 支付完成回跳页
|
||
* Z-Pay 的 return_url 不支持带查询参数，故使用 /join/paid 作为专用成功页
|
||
* 若 meetup_needs_password_change 为 true，则强制弹窗修改密码
|
||
*/
|
||
export default function JoinPaidPage() {
|
||
const [needPasswordChange, setNeedPasswordChange] = useState<boolean | null>(null);
|
||
const [showChangeModal, setShowChangeModal] = useState(false);
|
||
const [newPassword, setNewPassword] = useState("");
|
||
const [passwordConfirm, setPasswordConfirm] = useState("");
|
||
const [changeError, setChangeError] = useState<string | null>(null);
|
||
const [changing, setChanging] = useState(false);
|
||
|
||
useEffect(() => {
|
||
fetch("/api/meetup/need-password-change")
|
||
.then((r) => r.json())
|
||
.then((d) => {
|
||
setNeedPasswordChange(d?.need === true);
|
||
if (d?.need === true) setShowChangeModal(true);
|
||
})
|
||
.catch(() => setNeedPasswordChange(false));
|
||
}, []);
|
||
|
||
const handleChangePassword = async (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
setChangeError(null);
|
||
if (newPassword.length < 8) {
|
||
setChangeError("密码至少 8 位");
|
||
return;
|
||
}
|
||
if (newPassword !== passwordConfirm) {
|
||
setChangeError("两次密码不一致");
|
||
return;
|
||
}
|
||
setChanging(true);
|
||
try {
|
||
const res = await fetch("/api/auth/change-password", {
|
||
method: "POST",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ newPassword, passwordConfirm }),
|
||
credentials: "include",
|
||
});
|
||
const data = await res.json();
|
||
if (!res.ok || !data?.ok) {
|
||
throw new Error(data?.error || "修改失败");
|
||
}
|
||
setShowChangeModal(false);
|
||
} catch (err) {
|
||
setChangeError(err instanceof Error ? err.message : "修改失败");
|
||
} finally {
|
||
setChanging(false);
|
||
}
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] dark:bg-gray-950 px-4">
|
||
<div className="w-full max-w-md animate-fade-in rounded-2xl bg-white dark:bg-gray-900 p-10 text-center shadow-lg border border-gray-100 dark:border-gray-800">
|
||
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-emerald-50 dark:bg-emerald-900/30 text-5xl">
|
||
✅
|
||
</div>
|
||
<h2 className="text-2xl font-bold text-slate-800 dark:text-slate-100">申请已提交</h2>
|
||
<p className="mt-3 text-slate-500 dark:text-slate-400">
|
||
我们会尽快审核你的信息
|
||
<br />
|
||
审核通过后将通过微信邀请你入群
|
||
</p>
|
||
<Link
|
||
href="/"
|
||
className="mt-8 inline-flex items-center gap-2 rounded-full bg-[#ff4d4f] px-8 py-3 font-semibold text-white transition-colors hover:bg-[#ff7a45]"
|
||
>
|
||
← 返回首页
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
{showChangeModal && (
|
||
<div className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/50 p-4">
|
||
<div className="w-full max-w-sm rounded-2xl bg-white dark:bg-gray-900 p-6 shadow-xl border border-gray-100 dark:border-gray-800">
|
||
<h3 className="text-lg font-bold text-slate-800 dark:text-slate-100">请修改默认密码</h3>
|
||
<p className="mt-1 text-sm text-slate-500 dark:text-slate-400">
|
||
为保障账号安全，请立即设置新密码（至少 8 位）
|
||
</p>
|
||
<form onSubmit={handleChangePassword} className="mt-4 space-y-3">
|
||
<input
|
||
type="password"
|
||
value={newPassword}
|
||
onChange={(e) => { setNewPassword(e.target.value); setChangeError(null); }}
|
||
placeholder="新密码"
|
||
minLength={8}
|
||
required
|
||
className="w-full rounded-lg border border-gray-200 dark:border-gray-600 px-4 py-2.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-gray-800"
|
||
/>
|
||
<input
|
||
type="password"
|
||
value={passwordConfirm}
|
||
onChange={(e) => { setPasswordConfirm(e.target.value); setChangeError(null); }}
|
||
placeholder="确认新密码"
|
||
minLength={8}
|
||
required
|
||
className="w-full rounded-lg border border-gray-200 dark:border-gray-600 px-4 py-2.5 text-slate-800 dark:text-slate-100 bg-white dark:bg-gray-800"
|
||
/>
|
||
{changeError && <p className="text-sm text-red-600 dark:text-red-400">{changeError}</p>}
|
||
<button
|
||
type="submit"
|
||
disabled={changing}
|
||
className="w-full rounded-lg bg-[#ff4d4f] py-3 font-semibold text-white disabled:opacity-70"
|
||
>
|
||
{changing ? "提交中…" : "确认修改"}
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</>
|
||
);
|
||
}
|