2023-01-04 00:55:26 +08:00
|
|
|
/*
|
2023-05-05 17:44:35 +08:00
|
|
|
Copyright 2022 - 2023 New Vector Ltd
|
2023-01-04 00:55:26 +08:00
|
|
|
|
|
|
|
|
Licensed under the Apache License, Version 2.0 (the "License");
|
|
|
|
|
you may not use this file except in compliance with the License.
|
|
|
|
|
You may obtain a copy of the License at
|
|
|
|
|
|
|
|
|
|
http://www.apache.org/licenses/LICENSE-2.0
|
|
|
|
|
|
|
|
|
|
Unless required by applicable law or agreed to in writing, software
|
|
|
|
|
distributed under the License is distributed on an "AS IS" BASIS,
|
|
|
|
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
|
|
|
See the License for the specific language governing permissions and
|
|
|
|
|
limitations under the License.
|
|
|
|
|
*/
|
|
|
|
|
|
2023-09-23 06:05:13 +08:00
|
|
|
import { FC, ReactNode, useCallback, useMemo } from "react";
|
2021-12-24 06:40:23 +08:00
|
|
|
import { Item } from "@react-stately/collections";
|
2022-07-30 16:02:20 +08:00
|
|
|
import { useLocation } from "react-router-dom";
|
2022-10-10 21:19:10 +08:00
|
|
|
import { useTranslation } from "react-i18next";
|
2022-07-30 16:02:20 +08:00
|
|
|
|
2021-12-18 03:51:12 +08:00
|
|
|
import { Button, LinkButton } from "./button";
|
2022-01-06 09:21:30 +08:00
|
|
|
import { PopoverMenuTrigger } from "./popover/PopoverMenu";
|
2021-12-24 06:40:23 +08:00
|
|
|
import { Menu } from "./Menu";
|
2022-07-30 16:02:20 +08:00
|
|
|
import { TooltipTrigger } from "./Tooltip";
|
|
|
|
|
import { Avatar, Size } from "./Avatar";
|
2023-09-28 07:06:10 +08:00
|
|
|
import UserIcon from "./icons/User.svg?react";
|
|
|
|
|
import SettingsIcon from "./icons/Settings.svg?react";
|
|
|
|
|
import LoginIcon from "./icons/Login.svg?react";
|
|
|
|
|
import LogoutIcon from "./icons/Logout.svg?react";
|
2022-01-19 05:34:42 +08:00
|
|
|
import { Body } from "./typography/Typography";
|
2022-07-30 16:02:20 +08:00
|
|
|
import styles from "./UserMenu.module.css";
|
|
|
|
|
|
2023-09-23 06:05:13 +08:00
|
|
|
interface Props {
|
2022-07-30 16:02:20 +08:00
|
|
|
preventNavigation: boolean;
|
|
|
|
|
isAuthenticated: boolean;
|
|
|
|
|
isPasswordlessUser: boolean;
|
2023-08-31 21:46:09 +08:00
|
|
|
userId: string;
|
2022-07-30 16:02:20 +08:00
|
|
|
displayName: string;
|
2023-07-04 01:36:50 +08:00
|
|
|
avatarUrl?: string;
|
2022-07-30 16:02:20 +08:00
|
|
|
onAction: (value: string) => void;
|
|
|
|
|
}
|
2021-12-04 08:42:29 +08:00
|
|
|
|
2023-09-23 06:05:13 +08:00
|
|
|
export const UserMenu: FC<Props> = ({
|
2022-02-03 07:09:16 +08:00
|
|
|
preventNavigation,
|
2021-12-24 06:40:23 +08:00
|
|
|
isAuthenticated,
|
|
|
|
|
isPasswordlessUser,
|
2023-08-31 21:46:09 +08:00
|
|
|
userId,
|
2021-12-24 06:40:23 +08:00
|
|
|
displayName,
|
|
|
|
|
avatarUrl,
|
|
|
|
|
onAction,
|
2023-09-23 06:05:13 +08:00
|
|
|
}) => {
|
2022-10-10 21:19:10 +08:00
|
|
|
const { t } = useTranslation();
|
2021-12-10 04:58:30 +08:00
|
|
|
const location = useLocation();
|
2021-12-04 08:42:29 +08:00
|
|
|
|
|
|
|
|
const items = useMemo(() => {
|
2021-12-10 04:58:30 +08:00
|
|
|
const arr = [];
|
|
|
|
|
|
2021-12-24 06:40:23 +08:00
|
|
|
if (isAuthenticated) {
|
2021-12-10 04:58:30 +08:00
|
|
|
arr.push({
|
|
|
|
|
key: "user",
|
|
|
|
|
icon: UserIcon,
|
2021-12-24 06:40:23 +08:00
|
|
|
label: displayName,
|
2023-05-03 19:54:06 +08:00
|
|
|
dataTestid: "usermenu_user",
|
2021-12-10 04:58:30 +08:00
|
|
|
});
|
2023-05-05 17:44:35 +08:00
|
|
|
arr.push({
|
|
|
|
|
key: "settings",
|
|
|
|
|
icon: SettingsIcon,
|
2023-11-30 02:01:45 +08:00
|
|
|
label: t("common.settings"),
|
2023-05-05 17:44:35 +08:00
|
|
|
});
|
2021-12-10 04:58:30 +08:00
|
|
|
|
2022-02-03 07:09:16 +08:00
|
|
|
if (isPasswordlessUser && !preventNavigation) {
|
2021-12-18 03:51:12 +08:00
|
|
|
arr.push({
|
|
|
|
|
key: "login",
|
2023-11-20 21:22:40 +08:00
|
|
|
label: t("action.sign_in"),
|
2021-12-18 03:51:12 +08:00
|
|
|
icon: LoginIcon,
|
2023-05-03 19:54:06 +08:00
|
|
|
dataTestid: "usermenu_login",
|
2021-12-18 03:51:12 +08:00
|
|
|
});
|
|
|
|
|
}
|
2021-12-18 03:27:33 +08:00
|
|
|
|
2022-02-03 07:09:16 +08:00
|
|
|
if (!isPasswordlessUser && !preventNavigation) {
|
2021-12-18 03:51:12 +08:00
|
|
|
arr.push({
|
|
|
|
|
key: "logout",
|
2023-11-20 21:22:40 +08:00
|
|
|
label: t("action.sign_out"),
|
2021-12-18 03:51:12 +08:00
|
|
|
icon: LogoutIcon,
|
2023-05-03 19:54:06 +08:00
|
|
|
dataTestid: "usermenu_logout",
|
2021-12-18 03:51:12 +08:00
|
|
|
});
|
|
|
|
|
}
|
2021-12-04 08:42:29 +08:00
|
|
|
}
|
2021-12-10 04:58:30 +08:00
|
|
|
|
|
|
|
|
return arr;
|
2022-10-10 21:19:10 +08:00
|
|
|
}, [isAuthenticated, isPasswordlessUser, displayName, preventNavigation, t]);
|
|
|
|
|
|
2023-11-20 19:05:18 +08:00
|
|
|
const tooltip = useCallback(() => t("common.profile"), [t]);
|
2021-12-04 08:42:29 +08:00
|
|
|
|
2021-12-24 06:40:23 +08:00
|
|
|
if (!isAuthenticated) {
|
2021-12-18 03:51:12 +08:00
|
|
|
return (
|
|
|
|
|
<LinkButton to={{ pathname: "/login", state: { from: location } }}>
|
2023-11-23 04:07:15 +08:00
|
|
|
{t("log_in")}
|
2021-12-18 03:51:12 +08:00
|
|
|
</LinkButton>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
2021-12-04 08:42:29 +08:00
|
|
|
return (
|
2021-12-24 06:40:23 +08:00
|
|
|
<PopoverMenuTrigger placement="bottom right">
|
2022-10-10 21:19:10 +08:00
|
|
|
<TooltipTrigger tooltip={tooltip} placement="bottom left">
|
2023-05-03 19:54:06 +08:00
|
|
|
<Button
|
|
|
|
|
variant="icon"
|
|
|
|
|
className={styles.userButton}
|
|
|
|
|
data-testid="usermenu_open"
|
|
|
|
|
>
|
2022-01-22 08:33:43 +08:00
|
|
|
{isAuthenticated && (!isPasswordlessUser || avatarUrl) ? (
|
2021-12-24 06:40:23 +08:00
|
|
|
<Avatar
|
2023-08-31 21:46:09 +08:00
|
|
|
id={userId}
|
|
|
|
|
name={displayName}
|
2022-07-30 16:02:20 +08:00
|
|
|
size={Size.SM}
|
2021-12-24 06:40:23 +08:00
|
|
|
src={avatarUrl}
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
<UserIcon />
|
2021-12-15 14:00:00 +08:00
|
|
|
)}
|
2021-12-24 06:40:23 +08:00
|
|
|
</Button>
|
|
|
|
|
</TooltipTrigger>
|
2023-07-04 20:58:09 +08:00
|
|
|
{
|
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
2023-09-23 06:05:13 +08:00
|
|
|
(props: any): ReactNode => (
|
2023-11-20 19:05:18 +08:00
|
|
|
<Menu {...props} label={t("a11y.user_menu")} onAction={onAction}>
|
2023-07-04 20:58:09 +08:00
|
|
|
{items.map(({ key, icon: Icon, label, dataTestid }) => (
|
|
|
|
|
<Item key={key} textValue={label}>
|
|
|
|
|
<Icon
|
|
|
|
|
width={24}
|
|
|
|
|
height={24}
|
|
|
|
|
className={styles.menuIcon}
|
|
|
|
|
data-testid={dataTestid}
|
|
|
|
|
/>
|
|
|
|
|
<Body overflowEllipsis>{label}</Body>
|
|
|
|
|
</Item>
|
|
|
|
|
))}
|
|
|
|
|
</Menu>
|
|
|
|
|
)
|
|
|
|
|
}
|
2021-12-24 06:40:23 +08:00
|
|
|
</PopoverMenuTrigger>
|
2021-12-04 08:42:29 +08:00
|
|
|
);
|
2023-09-23 06:05:13 +08:00
|
|
|
};
|
