100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
|
// app/portal/account/AccountPanel.tsx
|
|||
|
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from "react";
|
|||
|
|
|
|||
|
|
type Me = {
|
|||
|
|
id: string;
|
|||
|
|
username: string;
|
|||
|
|
first_name?: string | null;
|
|||
|
|
last_name?: string | null;
|
|||
|
|
email?: string | null;
|
|||
|
|
location?: string | null;
|
|||
|
|
avatar?: { id: string; filename_download: string } | null;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
export default function AccountPanel() {
|
|||
|
|
const [me, setMe] = useState<Me | null>(null);
|
|||
|
|
const [err, setErr] = useState<string | null>(null);
|
|||
|
|
const [loading, setLoading] = useState(true);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
let alive = true;
|
|||
|
|
(async () => {
|
|||
|
|
try {
|
|||
|
|
setErr(null);
|
|||
|
|
const r = await fetch("/api/account", {
|
|||
|
|
credentials: "include",
|
|||
|
|
cache: "no-store",
|
|||
|
|
});
|
|||
|
|
if (!r.ok) throw new Error(`Load failed (${r.status})`);
|
|||
|
|
const j = await r.json();
|
|||
|
|
if (alive) setMe(j);
|
|||
|
|
} catch (e: any) {
|
|||
|
|
if (alive) setErr(e?.message || "Failed to load account");
|
|||
|
|
} finally {
|
|||
|
|
if (alive) setLoading(false);
|
|||
|
|
}
|
|||
|
|
})();
|
|||
|
|
return () => {
|
|||
|
|
alive = false;
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
if (loading) return <div className="rounded-md border p-6 text-sm opacity-70">Loading…</div>;
|
|||
|
|
if (err) return <div className="rounded-md border p-6 text-red-600">Error: {err}</div>;
|
|||
|
|
if (!me) return null;
|
|||
|
|
|
|||
|
|
const avatarUrl =
|
|||
|
|
me.avatar?.id
|
|||
|
|
? `${process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, "")}/assets/${me.avatar.id}`
|
|||
|
|
: null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="space-y-6">
|
|||
|
|
<div className="rounded-md border p-4">
|
|||
|
|
<h2 className="text-lg font-semibold mb-2">Account</h2>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-4 mb-4">
|
|||
|
|
<div className="h-16 w-16 rounded-full overflow-hidden border bg-muted flex items-center justify-center">
|
|||
|
|
{avatarUrl ? (
|
|||
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|||
|
|
<img src={avatarUrl} alt="Avatar" className="h-full w-full object-cover" />
|
|||
|
|
) : (
|
|||
|
|
<span className="text-xs opacity-60">No Avatar</span>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="text-xs text-muted-foreground">
|
|||
|
|
Usernames can’t be changed.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid sm:grid-cols-2 gap-3 text-sm">
|
|||
|
|
<div>
|
|||
|
|
<div className="opacity-60">Username</div>
|
|||
|
|
<div className="font-medium">{me.username}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="opacity-60">First Name</div>
|
|||
|
|
<div>{me.first_name || "—"}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="opacity-60">Last Name</div>
|
|||
|
|
<div>{me.last_name || "—"}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="opacity-60">Email</div>
|
|||
|
|
<div>{me.email || "—"}</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div className="opacity-60">Location</div>
|
|||
|
|
<div>{me.location || "—"}</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Add your edit forms/buttons below; they should only trigger reauth on submit */}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|