;s

app/components/JoinModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, type FormEvent } from "react";
+import { useCallback, useState, useEffect, type FormEvent } from "react";
 import { createPortal } from "react-dom";
 import { useLocale } from "@/i18n/navigation";
 import {
@@ -10,30 +10,67 @@ import {
 } from "@/app/lib/payment";
 import type { PayChannel, PayEnv } from "@/app/lib/payment";
 import { apiUrl } from "@/app/lib/api-client";
+import { googleLogin } from "@/app/lib/pocketbase";
+import GoogleLoginButton from "./GoogleLoginButton";
 
 interface JoinModalProps {
   isOpen: boolean;
   onClose: () => void;
   initialEmail?: string;
-  /** 仅登录（已有 VIP 用户验证密码后直接登录，不跳转支付） */
+  /** 仅登录（已有 VIP 用户直接邮箱登录，不跳转支付） */
   vipOnly?: boolean;
 }
 
+const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "";
+
 export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly = false }: JoinModalProps) {
   const locale = useLocale();
   const [email, setEmail] = useState(initialEmail);
-  const [password, setPassword] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
     if (isOpen) {
       setEmail(initialEmail);
-      setPassword("");
       setError(null);
     }
   }, [isOpen, initialEmail]);
 
+  const saveAuth = useCallback(async (token: string, record: Record<string, unknown>) => {
+    const { pbSaveAuth } = await import("@/app/lib/pocketbase");
+    pbSaveAuth(token, record as { id: string; email: string; [key: string]: unknown });
+    try {
+      await fetch(apiUrl("/api/auth/sync-session"), {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ token, record }),
+        credentials: "include",
+      });
+    } catch {
+      /* local auth is already saved; backend cookie will be retried by the navbar */
+    }
+    if (typeof window !== "undefined") {
+      window.dispatchEvent(new CustomEvent("auth:updated"));
+    }
+  }, []);
+
+  const continueAfterAuth = useCallback((userId: string) => {
+    if (vipOnly) {
+      onClose();
+      return;
+    }
+    const returnUrl = typeof window !== "undefined" ? `${window.location.origin}/${locale}/join/paid` : "/zh/join/paid";
+    const env = getPayEnv();
+    const channel: PayChannel = "wxpay";
+    redirectToPay({
+      user_id: userId,
+      return_url: returnUrl,
+      channel,
+      device: getDeviceFromEnv(env),
+      useJoinConfig: true,
+    });
+  }, [locale, onClose, vipOnly]);
+
   const handleSubmit = async (e: FormEvent) => {
     e.preventDefault();
     if (loading) return;
@@ -48,41 +85,15 @@ export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly
       const res = await fetch(apiUrl("/api/meetup/ensure-user"), {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ email: em, password: password || undefined }),
+        body: JSON.stringify({ email: em }),
         credentials: "include",
       });
       const data = await res.json();
       if (!res.ok || !data?.ok) {
         throw new Error(data?.error || (locale === "zh" ? "操作失败" : "Operation failed"));
       }
-      if (data.is_new) {
-        await fetch(apiUrl("/api/meetup/set-needs-password-change"), { method: "POST", credentials: "include" });
-      }
-      const { pbSaveAuth } = await import("@/app/lib/pocketbase");
-      pbSaveAuth(data.token, data.record);
-      await fetch(apiUrl("/api/auth/sync-session"), {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ token: data.token, record: data.record }),
-        credentials: "include",
-      });
-      if (typeof window !== "undefined") {
-        window.dispatchEvent(new CustomEvent("auth:updated"));
-      }
-      if (vipOnly) {
-        onClose();
-        return;
-      }
-      const returnUrl = typeof window !== "undefined" ? `${window.location.origin}/${locale}/join/paid` : "/zh/join/paid";
-      const env = getPayEnv();
-      const channel: PayChannel = "wxpay";
-      redirectToPay({
-        user_id: data.user_id,
-        return_url: returnUrl,
-        channel,
-        device: getDeviceFromEnv(env),
-        useJoinConfig: true,
-      });
+      await saveAuth(data.token, data.record);
+      continueAfterAuth(String(data.user_id));
     } catch (err) {
       setError(err instanceof Error ? err.message : "操作失败");
     } finally {
@@ -90,6 +101,21 @@ export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly
     }
   };
 
+  const handleGoogleCredential = useCallback(async (credential: string) => {
+    if (loading) return;
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await googleLogin(credential);
+      await saveAuth(result.token, result.record);
+      continueAfterAuth(result.record.id);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Google 登录失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [continueAfterAuth, loading, saveAuth]);
+
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
@@ -111,7 +137,7 @@ export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly
           </button>
 
           <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100">
-            {vipOnly ? (locale === "zh" ? "验证密码登录" : "Verify password to login") : (locale === "zh" ? "加入游牧中国" : "Join Nomad China")}
+            {vipOnly ? (locale === "zh" ? "邮箱登录" : "Email login") : (locale === "zh" ? "加入游牧中国" : "Join Nomad China")}
           </h2>
 
           <form onSubmit={handleSubmit} className="mt-6 space-y-4">
@@ -128,18 +154,6 @@ export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly
                 className="w-full rounded-lg border border-gray-200 px-4 py-2.5 text-gray-800 placeholder-gray-400 focus:border-[#ff4d4f] focus:outline-none focus:ring-1 focus:ring-[#ff4d4f] dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
               />
             </div>
-            <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">
-                {locale === "zh" ? "密码" : "Password"}
-              </label>
-              <input
-                type="password"
-                value={password}
-                onChange={(e) => { setPassword(e.target.value); setError(null); }}
-                placeholder={locale === "zh" ? "请输入密码" : "Enter your password"}
-                className="w-full rounded-lg border border-gray-200 px-4 py-2.5 text-gray-800 placeholder-gray-400 focus:border-[#ff4d4f] focus:outline-none focus:ring-1 focus:ring-[#ff4d4f] dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100"
-              />
-            </div>
             {error && (
               <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600 dark:bg-red-900/30 dark:text-red-400">{error}</p>
             )}
@@ -151,6 +165,16 @@ export default function JoinModal({ isOpen, onClose, initialEmail = "", vipOnly
               {loading ? (locale === "zh" ? "处理中…" : "Processing…") : vipOnly ? (locale === "zh" ? "登录" : "Login") : (locale === "zh" ? "加入游牧中国 →" : "Join Nomad China →")}
             </button>
           </form>
+          {GOOGLE_CLIENT_ID && (
+            <>
+              <div className="my-4 flex items-center gap-3">
+                <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+                <span className="text-xs text-gray-400">or</span>
+                <div className="h-px flex-1 bg-gray-200 dark:bg-gray-700" />
+              </div>
+              <GoogleLoginButton disabled={loading} onCredential={handleGoogleCredential} onError={setError} />
+            </>
+          )}
         </div>
       </div>
     </div>