feat : add icon and introduce login with google

2026-10-10 23:33:34 +07:00
parent a3803118ef
commit f826051438
19 changed files with 469 additions and 23 deletions
@@ -0,0 +1,104 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+import { LinkIcon } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { authClient } from "@/lib/auth/client";
+
+export function GoogleAccountSettings({
+  googleAccountIds: initialGoogleAccountIds,
+  hasOtherAuthMethod,
+  linkError,
+}: {
+  googleAccountIds: string[];
+  hasOtherAuthMethod: boolean;
+  linkError: boolean;
+}) {
+  const [googleAccountIds, setGoogleAccountIds] = useState(initialGoogleAccountIds);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const linked = googleAccountIds.length > 0;
+  const canUnlink = hasOtherAuthMethod || googleAccountIds.length > 1;
+
+  async function linkGoogle() {
+    if (busy) return;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await authClient.linkSocial({
+        provider: "google",
+        requestSignUp: false,
+        callbackURL: "/profile",
+        errorCallbackURL: "/profile?googleLinkError=1",
+      });
+      if (result.error) throw new Error(result.error.message ?? "เชื่อมบัญชี Google ไม่สำเร็จ");
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "เชื่อมบัญชี Google ไม่สำเร็จ กรุณาลองอีกครั้ง");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function unlinkGoogle() {
+    const accountId = googleAccountIds[0];
+    if (busy || !accountId || !canUnlink) return;
+    setBusy(true);
+    setError("");
+    try {
+      const result = await authClient.unlinkAccount({ accountId });
+      if (result.error) throw new Error(result.error.message ?? "ยกเลิกการเชื่อมต่อ Google ไม่สำเร็จ");
+      setGoogleAccountIds((current) => current.filter((id) => id !== accountId));
+    } catch (cause) {
+      setError(cause instanceof Error ? cause.message : "ยกเลิกการเชื่อมต่อ Google ไม่สำเร็จ กรุณาลองอีกครั้ง");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <LinkIcon aria-hidden="true" className="size-4 shrink-0" />
+          บัญชีที่เชื่อมต่อ
+        </CardTitle>
+        <CardDescription>เชื่อมต่อบัญชี Google เพื่อเข้าสู่ระบบได้ง่ายขึ้น</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-col gap-3">
+        <div className="flex items-center gap-4 rounded-lg border p-4">
+          <div className="grid size-12 shrink-0 place-items-center rounded-lg bg-muted">
+            <Image src="/icon/google.svg" alt="" width={24} height={24} />
+          </div>
+          <div className="min-w-0 flex-1">
+            <p className="font-medium">Google</p>
+            <p role="status" className="text-sm text-muted-foreground">
+              {linked ? "เชื่อมต่อแล้ว" : "ยังไม่ได้เชื่อมต่อ"}
+            </p>
+          </div>
+          {linked ? <Button type="button" variant="outline" size="sm"
+            disabled={busy || !canUnlink} onClick={() => void unlinkGoogle()}>
+            {busy ? "กำลังดำเนินการ…" : "ยกเลิกการเชื่อมต่อ"}
+          </Button> : <Button type="button" size="sm" disabled={busy}
+            onClick={() => void linkGoogle()}>
+            {busy ? "กำลังดำเนินการ…" : "เชื่อมต่อ"}
+          </Button>}
+        </div>
+        {linked && !canUnlink && <p className="text-sm text-muted-foreground">
+          Google เป็นวิธีเข้าสู่ระบบเดียวของบัญชีนี้ เพิ่มวิธีเข้าสู่ระบบอื่นก่อนยกเลิกการเชื่อมต่อ
+        </p>}
+        {(linkError || error) && <Alert variant="destructive" role="alert">
+          <AlertDescription>{error || "เชื่อมบัญชี Google ไม่สำเร็จ กรุณาลองอีกครั้ง"}</AlertDescription>
+        </Alert>}
+      </CardContent>
+    </Card>
+  );
+}