's'

2026-03-12 03:54:50 -05:00
parent 170a9939aa
commit 40230dd646
20 changed files with 645 additions and 95 deletions
--- a/app/[locale]/join/page.tsx
+++ b/app/[locale]/join/page.tsx
@@ -11,6 +11,7 @@ import {
 } from "@/app/lib/payment";
 import { usePayStatusPoll } from "@/app/lib/payment/usePayStatusPoll";
 import type { PayChannel, PayEnv } from "@/app/lib/payment";
+import AuthModal from "@/app/components/AuthModal";

 const genderOptions = ["男", "女"];
 const singleOptions = ["单身", "恋爱中", "已婚"];
@@ -56,6 +57,8 @@ export default function JoinPage() {
  const [payRedirecting, setPayRedirecting] = useState(false);
  const [payEnv, setPayEnv] = useState<PayEnv | null>(null);
  const [payChannel, setPayChannel] = useState<PayChannel>("alipay");
+  const [authOpen, setAuthOpen] = useState(false);
+  const [pendingSubmit, setPendingSubmit] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined" && new URLSearchParams(window.location.search).get("paid") === "1") {
@@ -75,8 +78,7 @@ export default function JoinPage() {
  const set = (key: keyof FormData, value: string) =>
    setForm((prev) => ({ ...prev, [key]: value }));

-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
+  const doSubmit = async () => {
    setError(null);
    setSubmitting(true);
    try {
@@ -84,6 +86,7 @@ export default function JoinPage() {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ ...form, media: media?.url }),
+        credentials: "include",
      });
      const data = await res.json();
      if (!res.ok || !data?.ok) {
@@ -115,6 +118,26 @@ export default function JoinPage() {
    }
  };

+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    const meRes = await fetch("/api/auth/me", { credentials: "include" });
+    const meData = await meRes.json();
+    if (!meData?.user) {
+      setPendingSubmit(true);
+      setAuthOpen(true);
+      return;
+    }
+    await doSubmit();
+  };
+
+  const handleAuthSuccess = () => {
+    setAuthOpen(false);
+    if (pendingSubmit) {
+      setPendingSubmit(false);
+      doSubmit();
+    }
+  };
+
  if (submitted) {
    return (
      <div className="flex min-h-screen items-center justify-center bg-[#f0f4f8] dark:bg-gray-950 px-4">
@@ -403,40 +426,6 @@ export default function JoinPage() {
            )}
          </div>

-          <div className="mt-6 rounded-xl border border-slate-100 dark:border-gray-700 bg-slate-50/50 dark:bg-gray-800/50 px-4 py-4 sm:px-5">
-            <p className="mb-3 text-sm font-bold text-slate-700 dark:text-slate-300">💳 支付方式</p>
-            {payEnv === "wechat" ? (
-              <p className="text-sm text-slate-500 dark:text-slate-400">
-                当前在微信内打开，将使用 <span className="font-medium text-emerald-600">微信支付</span>
-              </p>
-            ) : (
-              <div className="flex gap-3">
-                <label className="flex flex-1 cursor-pointer items-center gap-2 rounded-lg border-2 px-4 py-3 transition-colors has-[:checked]:border-sky-500 has-[:checked]:bg-sky-50 dark:has-[:checked]:bg-sky-900/20">
-                  <input
-                    type="radio"
-                    name="payChannel"
-                    value="alipay"
-                    checked={payChannel === "alipay"}
-                    onChange={() => setPayChannel("alipay")}
-                    className="h-4 w-4 border-slate-300 text-sky-500"
-                  />
-                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">支付宝</span>
-                </label>
-                <label className="flex flex-1 cursor-pointer items-center gap-2 rounded-lg border-2 px-4 py-3 transition-colors has-[:checked]:border-emerald-500 has-[:checked]:bg-emerald-50 dark:has-[:checked]:bg-emerald-900/20">
-                  <input
-                    type="radio"
-                    name="payChannel"
-                    value="wxpay"
-                    checked={payChannel === "wxpay"}
-                    onChange={() => setPayChannel("wxpay")}
-                    className="h-4 w-4 border-slate-300 text-emerald-500"
-                  />
-                  <span className="text-sm font-medium text-slate-700 dark:text-slate-300">微信支付</span>
-                </label>
-              </div>
-            )}
-          </div>
-
          <div className="mt-8 sm:mt-10">
            {error && (
              <p className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/30 px-4 py-3 text-center text-sm text-red-600 dark:text-red-400">
@@ -465,6 +454,12 @@ export default function JoinPage() {
          </Link>
        </div>
      </div>
+
+      <AuthModal
+        isOpen={authOpen}
+        onClose={() => { setAuthOpen(false); setPendingSubmit(false); }}
+        onSuccess={handleAuthSuccess}
+      />
    </div>
  );
 }
--- a/app/[locale]/join/paid/page.tsx
+++ b/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>
+      )}
+    </>
  );
 }