's'

app/[locale]/join/paid/page.tsx

@@ -1,31 +1,122 @@
 "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 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>
-        <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>
+      )}
+    </>
   );
 }