;s

app/components/AuthModal.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { useState, useEffect, type FormEvent } from "react";
+import { useCallback, useState, useEffect, type FormEvent } from "react";
 import { createPortal } from "react-dom";
 import {
-  pbLogin,
-  pbRegister,
+  emailLogin,
+  googleLogin,
   pbSaveAuth,
 } from "@/app/lib/pocketbase";
 import { useTranslation } from "@/i18n/navigation";
 import { apiUrl } from "@/app/lib/api-client";
+import GoogleLoginButton from "./GoogleLoginButton";
 
 interface AuthModalProps {
   isOpen: boolean;
@@ -16,37 +17,16 @@ interface AuthModalProps {
   onSuccess: (email: string) => void;
 }
 
+const GOOGLE_CLIENT_ID = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || "";
+
 export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps) {
   const { t } = useTranslation("auth");
-  const [mode, setMode] = useState<"login" | "register">("login");
   const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [passwordConfirm, setPasswordConfirm] = useState("");
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const handleSubmit = async (e: FormEvent) => {
-    e.preventDefault();
-    setError(null);
-    setLoading(true);
-
-    try {
-      let result;
-      if (mode === "register") {
-        if (password !== passwordConfirm) {
-          setError(t("passwordMismatch"));
-          setLoading(false);
-          return;
-        }
-        if (password.length < 8) {
-          setError(t("passwordMinLength"));
-          setLoading(false);
-          return;
-        }
-        result = await pbRegister(email, password, passwordConfirm);
-      } else {
-        result = await pbLogin(email, password);
-      }
+  const finishAuth = useCallback(
+    async (result: Awaited<ReturnType<typeof emailLogin>>, successEmail: string) => {
       pbSaveAuth(result.token, result.record);
       try {
         await fetch(apiUrl("/api/auth/sync-session"), {
@@ -58,11 +38,22 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
       } catch {
         /* ignore */
       }
-      onSuccess(email);
+      onSuccess(successEmail);
       onClose();
       setEmail("");
-      setPassword("");
-      setPasswordConfirm("");
+    },
+    [onClose, onSuccess]
+  );
+
+  const handleSubmit = async (e: FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+
+    try {
+      const normalizedEmail = email.trim();
+      const result = await emailLogin(normalizedEmail);
+      await finishAuth(result, normalizedEmail);
     } catch (err) {
       setError(err instanceof Error ? err.message : "操作失败");
     } finally {
@@ -70,6 +61,19 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
     }
   };
 
+  const handleGoogleCredential = useCallback(async (credential: string) => {
+    setError(null);
+    setLoading(true);
+    try {
+      const result = await googleLogin(credential);
+      await finishAuth(result, result.record.email);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Google 登录失败");
+    } finally {
+      setLoading(false);
+    }
+  }, [finishAuth]);
+
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
@@ -95,10 +99,10 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
         </button>
 
         <h2 className="text-xl font-bold text-gray-800 dark:text-gray-100">
-          {mode === "login" ? t("login") : t("register")}
+          {t("login")}
         </h2>
         <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
-          {mode === "login" ? t("loginHint") : t("registerHint")}
+          {t("loginHint")}
         </p>
 
         <form onSubmit={handleSubmit} className="mt-6 space-y-4">
@@ -113,31 +117,6 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
               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">{t("password")}</label>
-            <input
-              type="password"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              placeholder={mode === "register" ? "至少 8 位" : "••••••••"}
-              required
-              minLength={mode === "register" ? 8 : 1}
-              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>
-          {mode === "register" && (
-            <div>
-              <label className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-300">{t("passwordConfirm")}</label>
-              <input
-                type="password"
-                value={passwordConfirm}
-                onChange={(e) => setPasswordConfirm(e.target.value)}
-                placeholder="再次输入密码"
-                required
-                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>
           )}
@@ -146,41 +125,24 @@ export default function AuthModal({ isOpen, onClose, onSuccess }: AuthModalProps
             disabled={loading}
             className="w-full rounded-lg bg-[#ff4d4f] py-3 font-semibold text-white transition-colors hover:bg-[#ff3333] disabled:opacity-70"
           >
-            {loading ? "处理中…" : mode === "login" ? t("login") : t("register")}
+            {loading ? "处理中…" : t("submit")}
           </button>
         </form>
 
-        <p className="mt-4 text-center text-sm text-gray-500 dark:text-gray-400">
-          {mode === "login" ? (
-            <>
-              {t("noAccount")}{" "}
-              <button
-                type="button"
-                onClick={() => {
-                  setMode("register");
-                  setError(null);
-                }}
-                className="font-medium text-[#ff4d4f] hover:text-[#ff7a45]"
-              >
-                {t("signUpNow")}
-              </button>
-            </>
-          ) : (
-            <>
-              {t("hasAccount")}{" "}
-              <button
-                type="button"
-                onClick={() => {
-                  setMode("login");
-                  setError(null);
-                }}
-                className="font-medium text-[#ff4d4f] hover:text-[#ff7a45]"
-              >
-                {t("goLogin")}
-              </button>
-            </>
-          )}
-        </p>
+        {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>