260 lines
11 KiB
TypeScript
260 lines
11 KiB
TypeScript
import { Form, Link, useParams } from "react-router";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Transition } from "@headlessui/react";
|
|
import { Fragment, useState } from "react";
|
|
import clsx from "~/utils/shared/ClassesUtils";
|
|
import { useOuterClick } from "~/utils/shared/KeypressUtils";
|
|
import UserDisplayUtils from "~/utils/app/UserDisplayUtils";
|
|
import { adminPath, appPath } from "~/utils/app/CanonicalUrlUtils";
|
|
import { useAppOrAdminData } from "~/utils/data/useAppOrAdminData";
|
|
import { getUserHasPermission } from "~/utils/helpers/PermissionsHelper";
|
|
import { useRootData } from "~/utils/data/useRootData";
|
|
import { UI_ACTION_IDS } from "~/application/ui/uiRegistry";
|
|
import { absoluteAdminPath } from "~/utils/app/CrossHostUrls";
|
|
import { UserIcon } from "~/components/ui/icons/vendor";
|
|
|
|
interface Props {
|
|
user: { email: string; firstName: string | null; lastName: string | null; avatar: string | null; admin?: { userId: string } | null } | null | undefined;
|
|
layout?: "/" | "app" | "admin" | "docs";
|
|
items?: { title: string; path: string; hidden?: boolean; onClick?: () => void }[];
|
|
}
|
|
|
|
export default function ProfileButton({ user, layout, items }: Props) {
|
|
const params = useParams();
|
|
const { t } = useTranslation();
|
|
const rootData = useRootData();
|
|
const appOrAdminData = useAppOrAdminData();
|
|
const tenantPath = (path?: string) => (params.tenant ? appPath({ tenantSlug: params.tenant, path, mode: "host-aware" }) : "");
|
|
const defaultTenantPath = (path?: string) =>
|
|
rootData.currentTenant?.slug ? appPath({ tenantSlug: rootData.currentTenant.slug, path, mode: "host-aware" }) : undefined;
|
|
const adminShellPath = (path?: string) => adminPath(path, { mode: "host-aware" });
|
|
const publicHeaderAdminPath = (path?: string) => absoluteAdminPath(rootData.routing, path);
|
|
|
|
const [opened, setOpened] = useState(false);
|
|
|
|
function closeDropdownUser() {
|
|
setOpened(false);
|
|
}
|
|
// function signOut() {
|
|
// submit(null, { method: "post", action: "/logout" });
|
|
// }
|
|
|
|
const clickOutside = useOuterClick(() => setOpened(false));
|
|
|
|
return (
|
|
<div ref={clickOutside} className="relative" data-ui-id={`${UI_ACTION_IDS.profile}.menu`}>
|
|
<div className="inline-flex divide-x divide-gray-300 rounded-sm shadow-none">
|
|
<button
|
|
onClick={() => setOpened(!opened)}
|
|
data-ui-id={UI_ACTION_IDS.profile}
|
|
className={clsx(
|
|
"bg-background text-muted-foreground hover:bg-secondary border-border relative inline-flex items-center rounded-full border font-medium shadow-inner focus-visible:z-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
|
|
!user?.avatar && "p-2",
|
|
user?.avatar && "p-1"
|
|
)}
|
|
id="user-menu"
|
|
aria-label={t("shell.profile.userMenu")}
|
|
aria-haspopup="true"
|
|
>
|
|
{(() => {
|
|
if (user?.avatar) {
|
|
return <img className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-slate-800" src={user.avatar} alt={t("models.user.avatarAlt")} />;
|
|
} else {
|
|
return (
|
|
<span className="inline-block h-5 w-5 overflow-hidden rounded-full">
|
|
<UserIcon className="h-full w-full" />
|
|
</span>
|
|
);
|
|
}
|
|
})()}
|
|
</button>
|
|
</div>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
show={opened}
|
|
enter="transition ease-out duration-100"
|
|
enterFrom="transform opacity-0 scale-95"
|
|
enterTo="transform opacity-100 scale-100"
|
|
leave="transition ease-in duration-75"
|
|
leaveFrom="transform opacity-100 scale-100"
|
|
leaveTo="transform opacity-0 scale-95"
|
|
>
|
|
<div className="divide-border border-border absolute right-0 z-40 mt-2 w-64 origin-top-right divide-y overflow-hidden rounded-sm border shadow-lg focus:outline-hidden">
|
|
<div className="shadow-2xs bg-background rounded-sm py-1" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
|
|
<div className="text-muted-foreground group flex items-center truncate px-4 py-2 text-sm transition duration-150 ease-in-out" role="menuitem">
|
|
<div className="flex flex-col space-y-1 truncate">
|
|
<div className="font-medium">{UserDisplayUtils.profileName(user)}</div>
|
|
<div className="truncate font-bold">{user?.email}</div>
|
|
</div>
|
|
</div>
|
|
<div className="border-border border-t"></div>
|
|
|
|
{layout === "app" ? (
|
|
<>
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/profile")}
|
|
>
|
|
{t("app.navbar.profile")}
|
|
</Link>
|
|
|
|
{getUserHasPermission(appOrAdminData, "app.settings.members.view") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/members")}
|
|
>
|
|
{t("app.navbar.members")}
|
|
</Link>
|
|
)}
|
|
|
|
{getUserHasPermission(appOrAdminData, "app.settings.subscription.view") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/subscription")}
|
|
>
|
|
{t("app.navbar.subscription")}
|
|
</Link>
|
|
)}
|
|
|
|
{getUserHasPermission(appOrAdminData, "app.settings.account.view") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/account")}
|
|
>
|
|
{t("app.navbar.tenant")}
|
|
</Link>
|
|
)}
|
|
|
|
{/* {getUserHasPermission(appOrAdminData, "app.settings.roles.view") && (
|
|
<Link
|
|
className="block px-4 py-2 text-sm transition duration-150 ease-in-out hover:bg-secondary"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/roles-and-permissions")}
|
|
>
|
|
{t("models.role.plural")}
|
|
</Link>
|
|
)} */}
|
|
|
|
{/* <Link
|
|
className="block px-4 py-2 text-sm transition duration-150 ease-in-out hover:bg-secondary"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/groups")}
|
|
>
|
|
{t("models.group.plural")}
|
|
</Link> */}
|
|
|
|
{rootData.appConfiguration.app.features.tenantApiKeys && getUserHasPermission(appOrAdminData, "app.settings.apiKeys.view") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/api")}
|
|
>
|
|
{t("models.apiKey.plural")}
|
|
</Link>
|
|
)}
|
|
|
|
{getUserHasPermission(appOrAdminData, "app.settings.auditTrails.view") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={tenantPath("settings/logs")}
|
|
>
|
|
{t("models.log.plural")}
|
|
</Link>
|
|
)}
|
|
|
|
<div className="border-border mt-1 border-t"></div>
|
|
</>
|
|
) : layout === "admin" ? (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={!user ? "" : adminShellPath("settings/profile")}
|
|
>
|
|
{t("app.navbar.profile")}
|
|
</Link>
|
|
) : layout === "/" ? (
|
|
<Fragment>
|
|
{user?.admin && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={publicHeaderAdminPath("dashboard")}
|
|
>
|
|
{t("shared.admin")}
|
|
</Link>
|
|
)}
|
|
{(defaultTenantPath("settings/profile") || user?.admin) && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={defaultTenantPath("settings/profile") ?? publicHeaderAdminPath("settings/profile")}
|
|
>
|
|
{t("app.navbar.profile")}
|
|
</Link>
|
|
)}
|
|
{defaultTenantPath("settings/subscription") && (
|
|
<Link
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={closeDropdownUser}
|
|
to={defaultTenantPath("settings/subscription")!}
|
|
>
|
|
{t("app.navbar.subscription")}
|
|
</Link>
|
|
)}
|
|
</Fragment>
|
|
) : items ? (
|
|
items.map((item) => (
|
|
<Link
|
|
key={item.path}
|
|
className="hover:bg-secondary block px-4 py-2 text-sm transition duration-150 ease-in-out"
|
|
role="menuitem"
|
|
onClick={() => {
|
|
if (item.onClick) {
|
|
item.onClick();
|
|
}
|
|
closeDropdownUser();
|
|
}}
|
|
to={item.path}
|
|
>
|
|
{item.title}
|
|
</Link>
|
|
))
|
|
) : null}
|
|
|
|
{!items && (
|
|
<Form method="post" action="/logout">
|
|
{rootData.csrf && <input type="hidden" name="csrf" value={rootData.csrf} />}
|
|
<button
|
|
type="submit"
|
|
className="hover:bg-secondary block w-full px-4 py-2 text-left text-sm transition duration-150 ease-in-out focus:outline-hidden"
|
|
role="menuitem"
|
|
>
|
|
{t("app.navbar.signOut")}
|
|
</button>
|
|
</Form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
);
|
|
}
|