73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@hexahost/ui";
|
|
import { useTranslations } from "next-intl";
|
|
import { Link } from "@/i18n/navigation";
|
|
import { useAuth } from "@/components/providers/auth-provider";
|
|
|
|
export function ProfileContent() {
|
|
const t = useTranslations("account.profile");
|
|
const { user, isLoading } = useAuth();
|
|
|
|
if (isLoading) {
|
|
return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("loading")}</p>;
|
|
}
|
|
|
|
if (!user) {
|
|
return <p className="text-sm text-zinc-600 dark:text-zinc-400">{t("notSignedIn")}</p>;
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div>
|
|
<h1 className="text-2xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
|
|
{t("title")}
|
|
</h1>
|
|
<p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">{t("subtitle")}</p>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>{t("accountInfo")}</CardTitle>
|
|
<CardDescription>{t("accountInfoDescription")}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3 text-sm">
|
|
<div className="flex justify-between gap-4">
|
|
<span className="text-zinc-600 dark:text-zinc-400">{t("fields.email")}</span>
|
|
<span className="font-mono text-zinc-900 dark:text-zinc-50">{user.email}</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span className="text-zinc-600 dark:text-zinc-400">{t("fields.username")}</span>
|
|
<span className="font-mono text-zinc-900 dark:text-zinc-50">{user.username}</span>
|
|
</div>
|
|
{user.displayName ? (
|
|
<div className="flex justify-between gap-4">
|
|
<span className="text-zinc-600 dark:text-zinc-400">{t("fields.displayName")}</span>
|
|
<span className="text-zinc-900 dark:text-zinc-50">{user.displayName}</span>
|
|
</div>
|
|
) : null}
|
|
<div className="flex justify-between gap-4">
|
|
<span className="text-zinc-600 dark:text-zinc-400">{t("fields.emailVerified")}</span>
|
|
<span className="font-mono text-zinc-900 dark:text-zinc-50">
|
|
{user.emailVerified || user.emailVerifiedAt ? t("yes") : t("no")}
|
|
</span>
|
|
</div>
|
|
<div className="flex justify-between gap-4">
|
|
<span className="text-zinc-600 dark:text-zinc-400">{t("fields.twoFactor")}</span>
|
|
<span className="font-mono text-zinc-900 dark:text-zinc-50">
|
|
{user.twoFactorEnabled ? t("enabled") : t("disabled")}
|
|
</span>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
<p className="text-sm text-zinc-600 dark:text-zinc-400">
|
|
{t("securityHint")}{" "}
|
|
<Link href="/security" className="font-medium text-sky-600 hover:underline dark:text-sky-400">
|
|
{t("securityLink")}
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|