/* Copyright 2020, 2021 The Matrix.org Foundation C.I.C. 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. */ import React, { createRef } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; import classNames from "classnames"; import * as fbEmitter from "fbemitter"; import { MatrixClientPeg } from "../../MatrixClientPeg"; import defaultDispatcher from "../../dispatcher/dispatcher"; import dis from "../../dispatcher/dispatcher"; import { ActionPayload } from "../../dispatcher/payloads"; import { Action } from "../../dispatcher/actions"; import { _t } from "../../languageHandler"; import { ContextMenuButton } from "./ContextMenu"; import { USER_NOTIFICATIONS_TAB, USER_SECURITY_TAB } from "../views/dialogs/UserSettingsDialog"; import { OpenToTabPayload } from "../../dispatcher/payloads/OpenToTabPayload"; import FeedbackDialog from "../views/dialogs/FeedbackDialog"; import Modal from "../../Modal"; import LogoutDialog from "../views/dialogs/LogoutDialog"; import SettingsStore from "../../settings/SettingsStore"; import {getCustomTheme} from "../../theme"; import AccessibleButton, {ButtonEvent} from "../views/elements/AccessibleButton"; import SdkConfig from "../../SdkConfig"; import { getHomePageUrl } from "../../utils/pages"; import { OwnProfileStore } from "../../stores/OwnProfileStore"; import { UPDATE_EVENT } from "../../stores/AsyncStore"; import BaseAvatar from '../views/avatars/BaseAvatar'; import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton"; import { SettingLevel } from "../../settings/SettingLevel"; import IconizedContextMenu, { IconizedContextMenuOption, IconizedContextMenuOptionList, } from "../views/context_menus/IconizedContextMenu"; import { CommunityPrototypeStore } from "../../stores/CommunityPrototypeStore"; import GroupFilterOrderStore from "../../stores/GroupFilterOrderStore"; import { showCommunityInviteDialog } from "../../RoomInvite"; import { RightPanelPhases } from "../../stores/RightPanelStorePhases"; import ErrorDialog from "../views/dialogs/ErrorDialog"; import EditCommunityPrototypeDialog from "../views/dialogs/EditCommunityPrototypeDialog"; import { UIFeature } from "../../settings/UIFeature"; import HostSignupAction from "./HostSignupAction"; import { IHostSignupConfig } from "../views/dialogs/HostSignupDialogTypes"; import SpaceStore, { UPDATE_SELECTED_SPACE } from "../../stores/SpaceStore"; import RoomName from "../views/elements/RoomName"; import {replaceableComponent} from "../../utils/replaceableComponent"; import InlineSpinner from "../views/elements/InlineSpinner"; import TooltipButton from "../views/elements/TooltipButton"; interface IProps { isMinimized: boolean; } type PartialDOMRect = Pick; interface IState { contextMenuPosition: PartialDOMRect; isDarkTheme: boolean; selectedSpace?: Room; pendingRoomJoin: Set; } @replaceableComponent("structures.UserMenu") export default class UserMenu extends React.Component { private dispatcherRef: string; private themeWatcherRef: string; private dndWatcherRef: string; private buttonRef: React.RefObject = createRef(); private tagStoreRef: fbEmitter.EventSubscription; constructor(props: IProps) { super(props); this.state = { contextMenuPosition: null, isDarkTheme: this.isUserOnDarkTheme(), pendingRoomJoin: new Set(), }; OwnProfileStore.instance.on(UPDATE_EVENT, this.onProfileUpdate); if (SettingsStore.getValue("feature_spaces")) { SpaceStore.instance.on(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate); } // Force update is the easiest way to trigger the UI update (we don't store state for this) this.dndWatcherRef = SettingsStore.watchSetting("doNotDisturb", null, () => this.forceUpdate()); } private get hasHomePage(): boolean { return !!getHomePageUrl(SdkConfig.get()); } public componentDidMount() { this.dispatcherRef = defaultDispatcher.register(this.onAction); this.themeWatcherRef = SettingsStore.watchSetting("theme", null, this.onThemeChanged); this.tagStoreRef = GroupFilterOrderStore.addListener(this.onTagStoreUpdate); MatrixClientPeg.get().on("Room", this.onRoom); } public componentWillUnmount() { if (this.themeWatcherRef) SettingsStore.unwatchSetting(this.themeWatcherRef); if (this.dndWatcherRef) SettingsStore.unwatchSetting(this.dndWatcherRef); if (this.dispatcherRef) defaultDispatcher.unregister(this.dispatcherRef); OwnProfileStore.instance.off(UPDATE_EVENT, this.onProfileUpdate); this.tagStoreRef.remove(); if (SettingsStore.getValue("feature_spaces")) { SpaceStore.instance.off(UPDATE_SELECTED_SPACE, this.onSelectedSpaceUpdate); } MatrixClientPeg.get().removeListener("Room", this.onRoom); } private onRoom = (room: Room): void => { this.removePendingJoinRoom(room.roomId); } private onTagStoreUpdate = () => { this.forceUpdate(); // we don't have anything useful in state to update }; private isUserOnDarkTheme(): boolean { if (SettingsStore.getValue("use_system_theme")) { return window.matchMedia("(prefers-color-scheme: dark)").matches; } else { const theme = SettingsStore.getValue("theme"); if (theme.startsWith("custom-")) { return getCustomTheme(theme.substring("custom-".length)).is_dark; } return theme === "dark"; } } private onProfileUpdate = async () => { // the store triggered an update, so force a layout update. We don't // have any state to store here for that to magically happen. this.forceUpdate(); }; private onSelectedSpaceUpdate = async (selectedSpace?: Room) => { this.setState({ selectedSpace }); }; private onThemeChanged = () => { this.setState({isDarkTheme: this.isUserOnDarkTheme()}); }; private onAction = (ev: ActionPayload) => { switch (ev.action) { case Action.ToggleUserMenu: if (this.state.contextMenuPosition) { this.setState({contextMenuPosition: null}); } else { if (this.buttonRef.current) this.buttonRef.current.click(); } break; case Action.JoinRoom: this.addPendingJoinRoom(ev.roomId); break; case Action.JoinRoomReady: case Action.JoinRoomError: this.removePendingJoinRoom(ev.roomId); break; } }; private addPendingJoinRoom(roomId: string): void { this.setState({ pendingRoomJoin: new Set(this.state.pendingRoomJoin) .add(roomId), }); } private removePendingJoinRoom(roomId: string): void { if (this.state.pendingRoomJoin.delete(roomId)) { this.setState({ pendingRoomJoin: new Set(this.state.pendingRoomJoin), }) } } get pendingActionsCount(): number { return Array.from(this.state.pendingRoomJoin).length; } private onOpenMenuClick = (ev: React.MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); const target = ev.target as HTMLButtonElement; this.setState({contextMenuPosition: target.getBoundingClientRect()}); }; private onContextMenu = (ev: React.MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); this.setState({ contextMenuPosition: { left: ev.clientX, top: ev.clientY, width: 20, height: 0, }, }); }; private onCloseMenu = () => { this.setState({contextMenuPosition: null}); }; private onSwitchThemeClick = (ev: React.MouseEvent) => { ev.preventDefault(); ev.stopPropagation(); // Disable system theme matching if the user hits this button SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false); const newTheme = this.state.isDarkTheme ? "light" : "dark"; SettingsStore.setValue("theme", null, SettingLevel.DEVICE, newTheme); // set at same level as Appearance tab }; private onSettingsOpen = (ev: ButtonEvent, tabId: string) => { ev.preventDefault(); ev.stopPropagation(); const payload: OpenToTabPayload = {action: Action.ViewUserSettings, initialTabId: tabId}; defaultDispatcher.dispatch(payload); this.setState({contextMenuPosition: null}); // also close the menu }; private onShowArchived = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); // TODO: Archived room view: https://github.com/vector-im/element-web/issues/14038 // Note: You'll need to uncomment the button too. console.log("TODO: Show archived rooms"); }; private onProvideFeedback = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); Modal.createTrackedDialog('Feedback Dialog', '', FeedbackDialog); this.setState({contextMenuPosition: null}); // also close the menu }; private onSignOutClick = async (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); const cli = MatrixClientPeg.get(); if (!cli || !cli.isCryptoEnabled() || !(await cli.exportRoomKeys())?.length) { // log out without user prompt if they have no local megolm sessions dis.dispatch({action: 'logout'}); } else { Modal.createTrackedDialog('Logout from LeftPanel', '', LogoutDialog); } this.setState({contextMenuPosition: null}); // also close the menu }; private onSignInClick = () => { dis.dispatch({ action: 'start_login' }); this.setState({contextMenuPosition: null}); // also close the menu }; private onRegisterClick = () => { dis.dispatch({ action: 'start_registration' }); this.setState({contextMenuPosition: null}); // also close the menu }; private onHomeClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); defaultDispatcher.dispatch({action: 'view_home_page'}); this.setState({contextMenuPosition: null}); // also close the menu }; private onCommunitySettingsClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); Modal.createTrackedDialog('Edit Community', '', EditCommunityPrototypeDialog, { communityId: CommunityPrototypeStore.instance.getSelectedCommunityId(), }); this.setState({contextMenuPosition: null}); // also close the menu }; private onCommunityMembersClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); // We'd ideally just pop open a right panel with the member list, but the current // way the right panel is structured makes this exceedingly difficult. Instead, we'll // switch to the general room and open the member list there as it should be in sync // anyways. const chat = CommunityPrototypeStore.instance.getSelectedCommunityGeneralChat(); if (chat) { dis.dispatch({ action: 'view_room', room_id: chat.roomId, }, true); dis.dispatch({action: Action.SetRightPanelPhase, phase: RightPanelPhases.RoomMemberList}); } else { // "This should never happen" clauses go here for the prototype. Modal.createTrackedDialog('Failed to find general chat', '', ErrorDialog, { title: _t('Failed to find the general chat for this community'), description: _t("Failed to find the general chat for this community"), }); } this.setState({contextMenuPosition: null}); // also close the menu }; private onCommunityInviteClick = (ev: ButtonEvent) => { ev.preventDefault(); ev.stopPropagation(); showCommunityInviteDialog(CommunityPrototypeStore.instance.getSelectedCommunityId()); this.setState({contextMenuPosition: null}); // also close the menu }; private onDndToggle = (ev) => { ev.stopPropagation(); const current = SettingsStore.getValue("doNotDisturb"); SettingsStore.setValue("doNotDisturb", null, SettingLevel.DEVICE, !current); }; private renderContextMenu = (): React.ReactNode => { if (!this.state.contextMenuPosition) return null; const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); let topSection; const hostSignupConfig: IHostSignupConfig = SdkConfig.get().hostSignup; if (MatrixClientPeg.get().isGuest()) { topSection = (
{_t("Got an account? Sign in", {}, { a: sub => ( {sub} ), })} {_t("New here? Create an account", {}, { a: sub => ( {sub} ), })}
) } else if (hostSignupConfig) { if (hostSignupConfig && hostSignupConfig.url) { // If hostSignup.domains is set to a non-empty array, only show // dialog if the user is on the domain or a subdomain. const hostSignupDomains = hostSignupConfig.domains || []; const mxDomain = MatrixClientPeg.get().getDomain(); const validDomains = hostSignupDomains.filter(d => (d === mxDomain || mxDomain.endsWith(`.${d}`))); if (!hostSignupConfig.domains || validDomains.length > 0) { topSection =
; } } } let homeButton = null; if (this.hasHomePage) { homeButton = ( ); } let feedbackButton; if (SettingsStore.getValue(UIFeature.Feedback)) { feedbackButton = ; } let primaryHeader = (
{OwnProfileStore.instance.displayName} {MatrixClientPeg.get().getUserId()}
); let primaryOptionList = ( {homeButton} this.onSettingsOpen(e, USER_NOTIFICATIONS_TAB)} /> this.onSettingsOpen(e, USER_SECURITY_TAB)} /> this.onSettingsOpen(e, null)} /> {/* */} { feedbackButton } ); let secondarySection = null; if (prototypeCommunityName) { const communityId = CommunityPrototypeStore.instance.getSelectedCommunityId(); primaryHeader = (
{prototypeCommunityName}
); let settingsOption; let inviteOption; if (CommunityPrototypeStore.instance.canInviteTo(communityId)) { inviteOption = ( ); } if (CommunityPrototypeStore.instance.isAdminOf(communityId)) { settingsOption = ( ); } primaryOptionList = ( {settingsOption} {inviteOption} ); secondarySection = (
{OwnProfileStore.instance.displayName} {MatrixClientPeg.get().getUserId()}
this.onSettingsOpen(e, null)} /> { feedbackButton }
) } else if (MatrixClientPeg.get().isGuest()) { primaryOptionList = ( { homeButton } this.onSettingsOpen(e, null)} /> { feedbackButton } ); } const classes = classNames({ "mx_UserMenu_contextMenu": true, "mx_UserMenu_contextMenu_prototype": !!prototypeCommunityName, }); return
{primaryHeader} {_t("Switch
{topSection} {primaryOptionList} {secondarySection}
; }; public render() { const avatarSize = 32; // should match border-radius of the avatar const userId = MatrixClientPeg.get().getUserId(); const displayName = OwnProfileStore.instance.displayName || userId; const avatarUrl = OwnProfileStore.instance.getHttpAvatarUrl(avatarSize); const prototypeCommunityName = CommunityPrototypeStore.instance.getSelectedCommunityName(); let isPrototype = false; let menuName = _t("User menu"); let name = {displayName}; let buttons = ( {/* masked image in CSS */} ); let dnd; if (this.state.selectedSpace) { name = (
{displayName} {(roomName) => {roomName}}
); } else if (prototypeCommunityName) { name = (
{prototypeCommunityName} {displayName}
); menuName = _t("Community and user menu"); isPrototype = true; } else if (SettingsStore.getValue("feature_communities_v2_prototypes")) { name = (
{_t("Home")} {displayName}
); isPrototype = true; } else if (SettingsStore.getValue("feature_dnd")) { const isDnd = SettingsStore.getValue("doNotDisturb"); dnd = ; } if (this.props.isMinimized) { name = null; buttons = null; } const classes = classNames({ 'mx_UserMenu': true, 'mx_UserMenu_minimized': this.props.isMinimized, 'mx_UserMenu_prototype': isPrototype, }); return (
{name} {this.pendingActionsCount > 0 && ( )} {dnd} {buttons}
{this.renderContextMenu()}
); } }