55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
"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>;
|
|
}
|