2022-10-10 09:19:10 -04:00
|
|
|
import React, { useCallback, useMemo } from "react";
|
2021-12-23 14:40:23 -08:00
|
|
|
import { Item } from "@react-stately/collections";
|
2022-07-30 10:02:20 +02:00
|
|
|
import { useLocation } from "react-router-dom";
|
2022-10-10 09:19:10 -04:00
|
|
|
import { useTranslation } from "react-i18next";
|
2022-07-30 10:02:20 +02:00
|
|
|
|
2021-12-17 11:51:12 -08:00
|
|
|
import { Button, LinkButton } from "./button";
|
2022-01-05 17:21:30 -08:00
|
|
|
import { PopoverMenuTrigger } from "./popover/PopoverMenu";
|
2021-12-23 14:40:23 -08:00
|
|
|
import { Menu } from "./Menu";
|
2022-07-30 10:02:20 +02:00
|
|
|
import { TooltipTrigger } from "./Tooltip";
|
|
|
|
|
import { Avatar, Size } from "./Avatar";
|
2021-12-03 16:42:29 -08:00
|
|
|
import { ReactComponent as UserIcon } from "./icons/User.svg";
|
|
|
|
|
import { ReactComponent as LoginIcon } from "./icons/Login.svg";
|
|
|
|
|
import { ReactComponent as LogoutIcon } from "./icons/Logout.svg";
|
2022-01-18 13:34:42 -08:00
|
|
|
import { Body } from "./typography/Typography";
|
2022-07-30 10:02:20 +02:00
|
|
|
import styles from "./UserMenu.module.css";
|
|
|
|
|
|
|
|
|
|
interface UserMenuProps {
|
|
|
|
|
preventNavigation: boolean;
|
|
|
|
|
isAuthenticated: boolean;
|
|
|
|
|
isPasswordlessUser: boolean;
|
|
|
|
|
displayName: string;
|
|
|
|
|
avatarUrl: string;
|
|
|
|
|
onAction: (value: string) => void;
|
|
|
|
|
}
|
2021-12-03 16:42:29 -08:00
|
|
|
|
2021-12-23 14:40:23 -08:00
|
|
|
export function UserMenu({
|
2022-02-02 15:09:16 -08:00
|
|
|
preventNavigation,
|
2021-12-23 14:40:23 -08:00
|
|
|
isAuthenticated,
|
|
|
|
|
isPasswordlessUser,
|
|
|
|
|
displayName,
|
|
|
|
|
avatarUrl,
|
|
|
|
|
onAction,
|
2022-07-30 10:02:20 +02:00
|
|
|
}: UserMenuProps) {
|
2022-10-10 09:19:10 -04:00
|
|
|
const { t } = useTranslation();
|
2021-12-09 12:58:30 -08:00
|
|
|
const location = useLocation();
|
2021-12-03 16:42:29 -08:00
|
|
|
|
|
|
|
|
const items = useMemo(() => {
|
2021-12-09 12:58:30 -08:00
|
|
|
const arr = [];
|
|
|
|
|
|
2021-12-23 14:40:23 -08:00
|
|
|
if (isAuthenticated) {
|
2021-12-09 12:58:30 -08:00
|
|
|
arr.push({
|
|
|
|
|
key: "user",
|
|
|
|
|
icon: UserIcon,
|
2021-12-23 14:40:23 -08:00
|
|
|
label: displayName,
|
2021-12-09 12:58:30 -08:00
|
|
|
});
|
|
|
|
|
|
2022-02-02 15:09:16 -08:00
|
|
|
if (isPasswordlessUser && !preventNavigation) {
|
2021-12-17 11:51:12 -08:00
|
|
|
arr.push({
|
|
|
|
|
key: "login",
|
2022-10-10 09:19:10 -04:00
|
|
|
label: t("Sign in"),
|
2021-12-17 11:51:12 -08:00
|
|
|
icon: LoginIcon,
|
|
|
|
|
});
|
|
|
|
|
}
|
2021-12-17 11:27:33 -08:00
|
|
|
|
2022-02-02 15:09:16 -08:00
|
|
|
if (!isPasswordlessUser && !preventNavigation) {
|
2021-12-17 11:51:12 -08:00
|
|
|
arr.push({
|
|
|
|
|
key: "logout",
|
2022-10-10 09:19:10 -04:00
|
|
|
label: t("Sign out"),
|
2021-12-17 11:51:12 -08:00
|
|
|
icon: LogoutIcon,
|
|
|
|
|
});
|
|
|
|
|
}
|
2021-12-03 16:42:29 -08:00
|
|
|
}
|
2021-12-09 12:58:30 -08:00
|
|
|
|
|
|
|
|
return arr;
|
2022-10-10 09:19:10 -04:00
|
|
|
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
|
|
|
|
|
|
|
|
|
|
const tooltip = useCallback(() => t("Profile"), [t]);
|
2021-12-03 16:42:29 -08:00
|
|
|
|
2021-12-23 14:40:23 -08:00
|
|
|
if (!isAuthenticated) {
|
2021-12-17 11:51:12 -08:00
|
|
|
return (
|
|
|
|
|
<LinkButton to={{ pathname: "/login", state: { from: location } }}>
|
|
|
|
|
Log in
|
|
|
|
|
</LinkButton>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-03 16:42:29 -08:00
|
|
|
return (
|
2021-12-23 14:40:23 -08:00
|
|
|
<PopoverMenuTrigger placement="bottom right">
|
2022-10-10 09:19:10 -04:00
|
|
|
<TooltipTrigger tooltip={tooltip} placement="bottom left">
|
2021-12-23 14:40:23 -08:00
|
|
|
<Button variant="icon" className={styles.userButton}>
|
2022-01-21 16:33:43 -08:00
|
|
|
{isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
|
2021-12-23 14:40:23 -08:00
|
|
|
<Avatar
|
2022-07-30 10:02:20 +02:00
|
|
|
size={Size.SM}
|
2021-12-23 14:40:23 -08:00
|
|
|
className={styles.avatar}
|
|
|
|
|
src={avatarUrl}
|
|
|
|
|
fallback={displayName.slice(0, 1).toUpperCase()}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<UserIcon />
|
2021-12-14 22:00:00 -08:00
|
|
|
)}
|
2021-12-23 14:40:23 -08:00
|
|
|
</Button>
|
|
|
|
|
</TooltipTrigger>
|
|
|
|
|
{(props) => (
|
2022-10-10 09:19:10 -04:00
|
|
|
<Menu {...props} label={t("User menu")} onAction={onAction}>
|
2021-12-23 14:40:23 -08:00
|
|
|
{items.map(({ key, icon: Icon, label }) => (
|
2022-07-30 10:02:20 +02:00
|
|
|
<Item key={key} textValue={label}>
|
2022-01-18 13:34:42 -08:00
|
|
|
<Icon width={24} height={24} className={styles.menuIcon} />
|
|
|
|
|
<Body overflowEllipsis>{label}</Body>
|
2021-12-23 14:40:23 -08:00
|
|
|
</Item>
|
|
|
|
|
))}
|
|
|
|
|
</Menu>
|
2021-12-17 11:40:13 -08:00
|
|
|
)}
|
2021-12-23 14:40:23 -08:00
|
|
|
</PopoverMenuTrigger>
|
2021-12-03 16:42:29 -08:00
|
|
|
);
|
|
|
|
|
}
|
