Route Buzz Guide login through Sudloh Account

components/auth/account-form.tsx

@@ -32,12 +32,18 @@ export function AccountForm({
   nextPath,
   verified,
   verificationError,
+  oidcEnabled,
+  oidcOnly,
+  oidcError,
 }: {
   mode: "login" | "register";
   siteKey: string;
   nextPath: string;
   verified?: boolean;
   verificationError?: boolean;
+  oidcEnabled?: boolean;
+  oidcOnly?: boolean;
+  oidcError?: string;
 }) {
   const router = useRouter();
   const register = mode === "register";
@@ -52,7 +58,7 @@ export function AccountForm({
   const formRef = useRef<HTMLFormElement>(null);
   const container = useRef<HTMLDivElement>(null);
   const widget = useRef<string | null>(null);
-  const captcha = process.env.NODE_ENV !== "development";
+  const captcha = !oidcOnly && process.env.NODE_ENV !== "development";
   useEffect(() => () => {
     if (profilePreview) URL.revokeObjectURL(profilePreview);
   }, [profilePreview]);
@@ -172,12 +178,38 @@ export function AccountForm({
     } finally { setBusy(false); }
   }
 
+  async function signInWithSudloh() {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const errorCallbackURL = `/auth/login?next=${encodeURIComponent(nextPath)}&sudloh=1`;
+      const result = await authClient.signIn.social({
+        provider: "sudloh", callbackURL: nextPath, errorCallbackURL,
+      });
+      if (result.error) throw new Error("เริ่มเข้าสู่ระบบด้วย Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
+    } catch {
+      setError("เริ่มเข้าสู่ระบบด้วย Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
+      setBusy(false);
+    }
+  }
+
   return (
     <Card className="w-full max-w-sm">
       <CardHeader>
         <CardTitle>{register ? "สมัครสมาชิก" : "เข้าสู่ระบบ"}</CardTitle>
       </CardHeader>
       <CardContent className="flex flex-col gap-4">
+        {oidcEnabled && <Button type="button" variant="outline" disabled={busy} onClick={() => void signInWithSudloh()}>
+          ดำเนินการต่อด้วย Sudloh
+        </Button>}
+        {oidcError && <Alert variant="destructive"><AlertDescription>
+          {oidcError === "account_not_linked"
+            ? oidcOnly ? "บัญชีนี้ยังไม่เชื่อมต่อกับ Buzz Guide กรุณาติดต่อผู้ดูแลเพื่อยืนยันตัวตน"
+              : "มีบัญชี Buzz Guide ที่ใช้อีเมลนี้แล้ว กรุณาเข้าสู่ระบบด้วยอีเมลและเชื่อมต่อ Sudloh จากหน้าโปรไฟล์"
+            : "เข้าสู่ระบบด้วย Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง"}
+        </AlertDescription></Alert>}
+        {!oidcOnly && <>
         {verified && <Alert><AlertDescription>ยืนยันอีเมลแล้ว กรุณาเข้าสู่ระบบ</AlertDescription></Alert>}
         {verificationError && <Alert variant="destructive"><AlertDescription>ลิงก์ยืนยันไม่ถูกต้องหรือหมดอายุ กรุณาขอลิงก์ใหม่</AlertDescription></Alert>}
         {notice && <Alert><AlertDescription>{notice}</AlertDescription></Alert>}
@@ -279,6 +311,7 @@ export function AccountForm({
             <AlertDescription>{error}</AlertDescription>
           </Alert>
         )}
+        </>}
       </CardContent>
     </Card>
   );

components/auth/account-page.tsx

@@ -1,12 +1,14 @@
 import { redirect } from "next/navigation";
 import { SiteHeader } from "@/components/public/site-header";
 import { isAuthorizedAdmin } from "@/lib/auth/authorization";
-import { getCustomerSession } from "@/lib/auth/server";
+import { getCustomerSession, isSudlohOidcEnabled } from "@/lib/auth/server";
 import { safeAuthReturnPath } from "@/lib/auth/return-path";
 import { AccountForm } from "./account-form";
+import { SudlohSignInRedirect } from "./sudloh-sign-in-redirect";
 
-export async function AccountPage({ mode, next, verified, verificationError }: {
+export async function AccountPage({ mode, next, verified, verificationError, oidcError }: {
   mode: "login" | "register"; next: unknown; verified?: boolean; verificationError?: boolean;
+  oidcError?: string;
 }) {
   const nextPath = safeAuthReturnPath(next);
   const session = await getCustomerSession();
@@ -15,9 +17,15 @@ export async function AccountPage({ mode, next, verified, verificationError }: {
     redirect(nextPath);
   }
   const siteKey = process.env.TURNSTILE_SITE_KEY ?? "";
-  if (process.env.NODE_ENV !== "development" && !siteKey) throw new Error("TURNSTILE_SITE_KEY is required");
+  const oidcEnabled = isSudlohOidcEnabled();
+  const oidcOnly = oidcEnabled && process.env.SUDLOH_OIDC_ONLY === "true";
+  if (mode === "login" && oidcEnabled && !oidcError) {
+    return <div className="min-h-svh"><SiteHeader /><SudlohSignInRedirect nextPath={nextPath} /></div>;
+  }
+  if (!oidcOnly && process.env.NODE_ENV !== "development" && !siteKey) throw new Error("TURNSTILE_SITE_KEY is required");
   return <div className="min-h-svh"><SiteHeader /><main className="grid min-h-[calc(100svh-4rem)] place-items-center p-4">
     <AccountForm mode={mode} siteKey={siteKey} nextPath={nextPath}
-      verified={verified} verificationError={verificationError} />
+      oidcEnabled={oidcEnabled} oidcOnly={oidcOnly}
+      verified={verified} verificationError={verificationError} oidcError={oidcError} />
   </main></div>;
 }

components/auth/sudloh-connection.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { useState } from "react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { authClient } from "@/lib/auth/client";
+
+export function SudlohConnection({ linked, callbackError }: {
+  linked: boolean;
+  callbackError?: string;
+}) {
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  async function connect() {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await authClient.linkSocial({
+        provider: "sudloh",
+        callbackURL: "/profile?sudloh=linked",
+        errorCallbackURL: "/profile?sudloh=error",
+      });
+      if (result.error) throw new Error();
+    } catch {
+      setError("เชื่อมต่อ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
+      setBusy(false);
+    }
+  }
+
+  const callbackMessage = callbackError === "email_does_not_match"
+    ? "อีเมล Sudloh ต้องตรงกับอีเมล Buzz Guide ก่อนเชื่อมต่อบัญชี"
+    : callbackError === "account_already_linked_to_different_user"
+      ? "บัญชี Sudloh นี้เชื่อมต่อกับบัญชี Buzz Guide อื่นแล้ว"
+      : callbackError ? "เชื่อมต่อ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง" : "";
+
+  return <Card>
+    <CardHeader><CardTitle>Sudloh Account</CardTitle></CardHeader>
+    <CardContent className="flex flex-col gap-4">
+      <p className="text-sm text-muted-foreground">
+        {linked ? "เชื่อมต่อแล้ว คุณสามารถใช้ Sudloh เพื่อเข้าสู่ระบบ Buzz Guide"
+          : "เชื่อมต่อบัญชี Sudloh เพื่อใช้เข้าสู่ระบบ Buzz Guide ในครั้งถัดไป"}
+      </p>
+      {!linked && <Button type="button" variant="outline" disabled={busy} onClick={() => void connect()}>
+        {busy ? "กำลังเชื่อมต่อ..." : "เชื่อมต่อ Sudloh"}
+      </Button>}
+      {(callbackMessage || error) && <Alert variant="destructive"><AlertDescription>
+        {callbackMessage || error}
+      </AlertDescription></Alert>}
+    </CardContent>
+  </Card>;
+}

components/auth/sudloh-sign-in-redirect.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { authClient } from "@/lib/auth/client";
+
+export function SudlohSignInRedirect({ nextPath }: { nextPath: string }) {
+  const started = useRef(false);
+  const [failed, setFailed] = useState(false);
+
+  const start = useCallback(async () => {
+    setFailed(false);
+    const result = await authClient.signIn.social({
+      provider: "sudloh",
+      callbackURL: nextPath,
+      errorCallbackURL: `/auth/login?next=${encodeURIComponent(nextPath)}&sudloh=1`,
+    });
+    if (result.error) setFailed(true);
+  }, [nextPath]);
+
+  useEffect(() => {
+    if (started.current) return;
+    started.current = true;
+    void start().catch(() => setFailed(true));
+  }, [start]);
+
+  return <div className="grid min-h-[calc(100svh-4rem)] place-items-center p-4">
+    <div className="flex flex-col items-center gap-4 text-center">
+      <p>{failed ? "ไม่สามารถเริ่มเข้าสู่ระบบได้" : "กำลังไปที่ Sudloh Account…"}</p>
+      {failed && <Button onClick={() => void start().catch(() => setFailed(true))}>ลองอีกครั้ง</Button>}
+    </div>
+  </div>;
+}