105 lines
4.5 KiB
TypeScript
105 lines
4.5 KiB
TypeScript
"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>
|
|
);
|
|
}
|