72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { useMutation } from "@tanstack/react-query";
|
|
import { useRouter } from "next/navigation";
|
|
import { useEffect } from "react";
|
|
|
|
import { useTranslation } from "@turbostarter/i18n";
|
|
import { Button } from "@turbostarter/ui-web/button";
|
|
import { Icons } from "@turbostarter/ui-web/icons";
|
|
|
|
import { pathsConfig } from "~/config/paths";
|
|
import { authClient } from "~/lib/auth/client";
|
|
import { admin } from "~/modules/admin/lib/api";
|
|
|
|
export const ImpersonatingBanner = () => {
|
|
const { t } = useTranslation("common");
|
|
const session = authClient.useSession();
|
|
const router = useRouter();
|
|
|
|
const userId = session.data?.user.id;
|
|
const isImpersonating = !!session.data?.session.impersonatedBy;
|
|
|
|
const stop = useMutation({
|
|
...admin.mutations.users.stopImpersonating,
|
|
onSuccess: async () => {
|
|
await session.refetch();
|
|
router.replace(
|
|
userId
|
|
? pathsConfig.admin.users.user(userId)
|
|
: pathsConfig.admin.users.index,
|
|
);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isImpersonating) {
|
|
document.body.style.setProperty("--banner-height", "2.5rem");
|
|
document.body.style.paddingTop = "2.5rem";
|
|
} else {
|
|
document.body.style.setProperty("--banner-height", "0");
|
|
document.body.style.paddingTop = "0";
|
|
}
|
|
}, [isImpersonating]);
|
|
|
|
if (!isImpersonating) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="bg-primary fixed top-0 left-0 z-50 flex h-10 w-full items-center justify-center gap-2 px-4">
|
|
<span className="text-primary-foreground truncate text-sm">
|
|
{t("impersonating")}{" "}
|
|
<span className="font-medium">{session.data?.user.email}</span>
|
|
</span>
|
|
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => stop.mutate()}
|
|
disabled={stop.isPending}
|
|
size="sm"
|
|
className="h-6 px-2 text-xs"
|
|
>
|
|
{stop.isPending ? (
|
|
<Icons.Loader2 className="size-3 animate-spin" />
|
|
) : (
|
|
"End"
|
|
)}
|
|
</Button>
|
|
</div>
|
|
);
|
|
};
|