AccountMenu: add social login pending/error feedback and lock both providers during auth

.gitignore

@@ -52,4 +52,5 @@ next-env.d.ts
 
 /public/typescript/
 /app/m-plus-rounded-1c-nohint/
-node_modules
+node_modules
+.wrangler

app/accountMenu.tsx

@@ -2,7 +2,7 @@
 
 import { authClient } from "@/lib/auth-client";
 import { usePathname, useRouter } from "next/navigation";
-import { useEffect } from "react";
+import { ReactNode, useEffect, useState } from "react";
 
 export function AutoAnonymousLogin() {
   const { data: session, isPending } = authClient.useSession();
@@ -19,6 +19,12 @@
   const { data: session, isPending } = authClient.useSession();
   const pathname = usePathname();
   const router = useRouter();
+  const [signingInProvider, setSigningInProvider] = useState<
+    "github" | "google" | null
+  >(null);
+  const [signinErrorMessage, setSigninErrorMessage] = useState<string | null>(
+    null
+  );
 
   const signout = () => {
     if (
@@ -42,86 +48,101 @@
       });
     }
   };
+  const signInWithSocial = async (provider: "github" | "google") => {
+    if (signingInProvider) return;
+    setSigninErrorMessage(null);
+    setSigningInProvider(provider);
+    try {
+      const result = await authClient.signIn.social({
+        provider,
+        callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
+      });
+      if (result?.error) {
+        throw new Error(result.error.message);
+      }
+    } catch {
+      setSigningInProvider(null);
+      setSigninErrorMessage(
+        "ログインに失敗しました。しばらくしてから再度お試しください。"
+      );
+    }
+  };
 
   if (isPending || !session) {
     return <div className="w-10 h-10 skeleton rounded-full"></div>;
   }
 
+  let avatar: ReactNode;
+  let content: ReactNode;
   if (session && !session.user.isAnonymous) {
-    return (
-      <div className="dropdown dropdown-end">
-        <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-          <div className="w-8 h-8 rounded-full">
-            <img
-              src={
-                session.user?.image ??
-                `https://avatar.vercel.sh/${session.user?.name}`
-              }
-              alt="user avatar"
-              crossOrigin="anonymous"
-            />
-          </div>
-        </label>
-        <ul
-          tabIndex={0}
-          className="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52"
-        >
-          <li>
-            <a onClick={signout}>ログアウト</a>
-          </li>
-        </ul>
+    avatar = (
+      <div className="w-8 h-8 rounded-full">
+        <img
+          src={
+            session.user?.image ??
+            `https://avatar.vercel.sh/${session.user?.name}`
+          }
+          alt="user avatar"
+          crossOrigin="anonymous"
+        />
       </div>
     );
-  }
-
-  return (
-    <div className="dropdown dropdown-end">
-      <label tabIndex={0} className="btn btn-ghost btn-circle avatar">
-        <div className="w-8 h-8 rounded-full">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 24 24"
-            strokeWidth={1.5}
-            stroke="currentColor"
-            className="w-full h-full"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
-            />
-          </svg>
-        </div>
-      </label>
-      <ul className="z-1 shadow-md dropdown-content bg-base-100 rounded-box menu w-64">
+    content = (
+      <>
+        <li>
+          <a onClick={signout}>ログアウト</a>
+        </li>
+      </>
+    );
+  } else {
+    avatar = (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 24 24"
+        strokeWidth={1.5}
+        stroke="currentColor"
+        className="w-8 h-8"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M17.982 18.725A7.488 7.488 0 0 0 12 15.75a7.488 7.488 0 0 0-5.982 2.975m11.963 0a9 9 0 1 0-11.963 0m11.963 0A8.966 8.966 0 0 1 12 21a8.966 8.966 0 0 1-5.982-2.275M15 9.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
+        />
+      </svg>
+    );
+    content = (
+      <>
         <li className="menu-title">
           ログインすると、チャット履歴を保存し別のデバイスからもアクセスできるようになります。
         </li>
         <li>
           <button
-            onClick={() =>
-              authClient.signIn.social({
-                provider: "github",
-                callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
-              })
-            }
+            onClick={() => signInWithSocial("github")}
+            disabled={signingInProvider !== null}
+            aria-busy={signingInProvider === "github"}
           >
+            {signingInProvider === "github" && (
+              <span className="loading loading-spinner loading-xs" />
+            )}
             GitHub でログイン
           </button>
         </li>
         <li>
           <button
-            onClick={() =>
-              authClient.signIn.social({
-                provider: "google",
-                callbackURL: `/clear-cache?redirect=${encodeURIComponent(pathname)}`,
-              })
-            }
+            onClick={() => signInWithSocial("google")}
+            disabled={signingInProvider !== null}
+            aria-busy={signingInProvider === "google"}
           >
+            {signingInProvider === "google" && (
+              <span className="loading loading-spinner loading-xs" />
+            )}
             Google でログイン
           </button>
         </li>
+        {signinErrorMessage && (
+          <li className="text-error px-4 py-2 text-sm">{signinErrorMessage}</li>
+        )}
         {session?.user && (
           <>
             <div className="divider my-0" />
@@ -132,7 +153,16 @@
             </li>
           </>
         )}
+      </>
+    );
+  }
+
+  return (
+    <details className="dropdown dropdown-end">
+      <summary className="btn btn-ghost btn-circle avatar">{avatar}</summary>
+      <ul className="z-1 shadow-md dropdown-content bg-base-100 rounded-box menu w-64">
+        {content}
       </ul>
-    </div>
+    </details>
   );
 }

packages/runtime/vitest.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
       enabled: true,
       provider: webdriverio(),
       instances: [{ browser: "chrome" }],
+      screenshotFailures: false,
     },
   },
   optimizeDeps: {