60 lines
3.2 KiB
TypeScript
60 lines
3.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { authClient } from "@/lib/auth/client";
|
|
|
|
export function SudlohProfile({ name, email, image, accountUrl, callbackError }: {
|
|
name: string; email: string; image: string | null; accountUrl: string; callbackError: boolean;
|
|
}) {
|
|
const [busy, setBusy] = useState(false);
|
|
const [error, setError] = useState("");
|
|
|
|
async function refresh() {
|
|
setBusy(true);
|
|
setError("");
|
|
try {
|
|
const response = await fetch("/api/profile/sync", { method: "POST" });
|
|
if (response.status === 401) {
|
|
const result = await authClient.signIn.social({ provider: "sudloh", callbackURL: "/profile",
|
|
errorCallbackURL: "/profile?sudloh=error" });
|
|
if (result.error) throw new Error("เข้าสู่ระบบ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง");
|
|
return;
|
|
}
|
|
if (response.status === 409) throw new Error("อีเมลนี้ถูกใช้โดยบัญชี Buzz Guide อื่น กรุณาติดต่อผู้ดูแล");
|
|
if (!response.ok) throw new Error("อัปเดตข้อมูลจาก Sudloh ไม่สำเร็จ กรุณาเข้าสู่ระบบใหม่แล้วลองอีกครั้ง");
|
|
window.location.reload();
|
|
} catch (cause) {
|
|
setError(cause instanceof Error ? cause.message : "อัปเดตข้อมูลจาก Sudloh ไม่สำเร็จ");
|
|
setBusy(false);
|
|
}
|
|
}
|
|
|
|
return <Card>
|
|
<CardHeader><CardTitle>ข้อมูลบัญชี</CardTitle>
|
|
<CardDescription>จัดการชื่อ รูปโปรไฟล์ และอีเมลที่ Sudloh Account</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="flex items-center gap-4">
|
|
<Avatar size="lg" className="size-16">
|
|
{image && <AvatarImage src={image} alt="รูปโปรไฟล์" />}
|
|
<AvatarFallback>{name.trim().charAt(0).toUpperCase() || "?"}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="min-w-0"><p className="font-medium">{name}</p>
|
|
<p className="truncate text-sm text-muted-foreground">{email}</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter className="flex-wrap gap-2">
|
|
<Button render={<a href={accountUrl} />}>จัดการบัญชีที่ Sudloh</Button>
|
|
<Button type="button" variant="outline" disabled={busy} onClick={() => void refresh()}>
|
|
{busy ? "กำลังอัปเดต..." : "อัปเดตข้อมูลจาก Sudloh"}
|
|
</Button>
|
|
{(error || callbackError) && <Alert variant="destructive"><AlertDescription>
|
|
{error || "เข้าสู่ระบบ Sudloh ไม่สำเร็จ กรุณาลองอีกครั้ง"}
|
|
</AlertDescription></Alert>}
|
|
</CardFooter>
|
|
</Card>;
|
|
}
|