diff --git a/packages/client/src/components/FilesPanels/index.js b/packages/client/src/components/FilesPanels/index.js index 5015590d36..844246d76b 100644 --- a/packages/client/src/components/FilesPanels/index.js +++ b/packages/client/src/components/FilesPanels/index.js @@ -10,6 +10,7 @@ import { InvitePanel, EditLinkPanel, EmbeddingPanel, + UserSessionsPanel, } from "../panels"; import { ConnectDialog, @@ -89,6 +90,7 @@ const Panels = (props) => { changeRoomOwnerIsVisible, deletePluginDialogVisible, shareFolderDialogVisible, + userSessionsPanelVisible, } = props; const { t } = useTranslation(["Translations", "Common"]); @@ -194,6 +196,8 @@ const Panels = (props) => { ), shareFolderDialogVisible && , + + userSessionsPanelVisible && , ]; }; @@ -247,6 +251,7 @@ export default inject( leaveRoomDialogVisible, changeRoomOwnerIsVisible, shareFolderDialogVisible, + userSessionsPanelVisible, } = dialogsStore; const { preparationPortalDialogVisible } = backup; @@ -307,6 +312,7 @@ export default inject( changeRoomOwnerIsVisible, deletePluginDialogVisible, shareFolderDialogVisible, + userSessionsPanelVisible, }; } )(observer(Panels)); diff --git a/packages/client/src/components/panels/UserSessionsPanel/StyledUserSessionsPanel.js b/packages/client/src/components/panels/UserSessionsPanel/StyledUserSessionsPanel.js new file mode 100644 index 0000000000..82d9c2cd62 --- /dev/null +++ b/packages/client/src/components/panels/UserSessionsPanel/StyledUserSessionsPanel.js @@ -0,0 +1,32 @@ +import styled from "styled-components"; +import { Scrollbar } from "@docspace/shared/components/scrollbar"; +import { Base } from "@docspace/shared/themes"; + +const StyledUserSessionsPanel = styled.div` + .user-sessions-panel { + .scroll-body { + padding-right: 0px !important; + } + } + + .user-sessions-header { + padding: 0px 16px; + border-bottom: ${(props) => props.theme.filesPanels.sharing.borderBottom}; + + .header-text { + font-weight: 700; + font-size: 21px; + margin: 12px 0px; + } + } +`; + +const StyledScrollbar = styled(Scrollbar)` + position: relative; + padding: 16px 0; + height: calc(100vh - 87px) !important; +`; + +StyledUserSessionsPanel.defaultProps = { theme: Base }; + +export { StyledUserSessionsPanel, StyledScrollbar }; diff --git a/packages/client/src/components/panels/UserSessionsPanel/UserSessions.js b/packages/client/src/components/panels/UserSessionsPanel/UserSessions.js new file mode 100644 index 0000000000..d8be9ce1da --- /dev/null +++ b/packages/client/src/components/panels/UserSessionsPanel/UserSessions.js @@ -0,0 +1,108 @@ +import { inject, observer } from "mobx-react"; +import { withTranslation } from "react-i18next"; +import { isMobile } from "react-device-detect"; +import { Base } from "@docspace/shared/themes"; +import { tablet } from "@docspace/shared/utils"; +import { Row } from "@docspace/shared/components/row"; +import { Avatar } from "@docspace/shared/components/avatar"; +import styled, { css } from "styled-components"; + +import RemoveSvgUrl from "PUBLIC_DIR/images/remove.session.svg?url"; +import TrashReactSvgUrl from "PUBLIC_DIR/images/trash.react.svg?url"; + +const marginStyles = css` + margin-left: -24px; + margin-right: -24px; + padding-left: 24px; + padding-right: 24px; + + @media ${tablet} { + margin-left: -16px; + margin-right: -16px; + padding-left: 16px; + padding-right: 16px; + } +`; + +const checkedStyle = css` + background: ${(props) => props.theme.filesSection.rowView.checkedBackground}; + ${marginStyles} +`; + +const Wrapper = styled.div` + padding: 24px 20px; +`; + +const UserSessions = (props) => { + const { + t, + data, + setLogoutAllDialogVisible, + setDisableDialogVisible, + setSessionModalData, + } = props; + + const contextOptions = [ + { + key: "LogoutAllSessions", + label: t("Settings:LogoutAllSessions"), + icon: RemoveSvgUrl, + onClick: onClickLogout, + }, + { + key: "Separator", + isSeparator: true, + }, + { + key: "Disable", + label: t("Common:DisableUserButton"), + icon: TrashReactSvgUrl, + onClick: onClickDisable, + }, + ]; + + const onClickLogout = () => { + setLogoutAllDialogVisible(true); + setSessionModalData({ displayName: data.displayName }); + }; + + const onClickDisable = () => { + setDisableDialogVisible(true); + }; + + console.log(data); + + const element = ( + + ); + + return ( + + + + ); +}; + +export default inject(({ setup }) => { + const { + setLogoutAllDialogVisible, + setDisableDialogVisible, + setSessionModalData, + sessionModalData, + } = setup; + + return { + setLogoutAllDialogVisible, + setDisableDialogVisible, + setSessionModalData, + data: sessionModalData, + }; +})(withTranslation(["Settings", "Profile", "Common"])(observer(UserSessions))); diff --git a/packages/client/src/components/panels/UserSessionsPanel/index.js b/packages/client/src/components/panels/UserSessionsPanel/index.js new file mode 100644 index 0000000000..2bffd00f76 --- /dev/null +++ b/packages/client/src/components/panels/UserSessionsPanel/index.js @@ -0,0 +1,56 @@ +import { useRef } from "react"; +import { observer, inject } from "mobx-react"; + +import { Backdrop } from "@docspace/shared/components/backdrop"; +import { Aside } from "@docspace/shared/components/aside"; +import { Heading } from "@docspace/shared/components/heading"; + +import UserSessions from "./UserSessions"; + +import { + StyledUserSessionsPanel, + StyledScrollbar, +} from "./StyledUserSessionsPanel"; + +const UserSessionsPanel = (props) => { + const { visible, setVisible } = props; + + const scrollRef = useRef(null); + + const onClose = () => { + setVisible(false); + }; + + return ( + + + + + ); +}; + +export default inject(({ dialogsStore }) => { + const { userSessionsPanelVisible, setUserSessionPanelVisible } = dialogsStore; + + return { + visible: userSessionsPanelVisible, + setVisible: setUserSessionPanelVisible, + }; +})(observer(UserSessionsPanel)); diff --git a/packages/client/src/components/panels/index.js b/packages/client/src/components/panels/index.js index 681ab1dd3f..0b079e0dc3 100644 --- a/packages/client/src/components/panels/index.js +++ b/packages/client/src/components/panels/index.js @@ -7,6 +7,7 @@ import UploadPanel from "./UploadPanel"; import HotkeyPanel from "./HotkeysPanel"; import InvitePanel from "./InvitePanel"; import EditLinkPanel from "./EditLinkPanel"; +import UserSessionsPanel from "./UserSessionsPanel"; export { AddUsersPanel, @@ -18,4 +19,5 @@ export { HotkeyPanel, InvitePanel, EditLinkPanel, + UserSessionsPanel, }; diff --git a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js index 45faca194b..b39ebc369d 100644 --- a/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js +++ b/packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js @@ -307,6 +307,7 @@ const SectionHeaderContent = (props) => { isSeveralSelection, peopleSelection, setSessionModalData, + setUserSessionPanelVisible, } = props; const { header, isCategoryOrHeader, isNeedPaidIcon } = state; const arrayOfParams = getArrayOfParams(); @@ -345,7 +346,7 @@ const SectionHeaderContent = (props) => { ); const onClickSessions = () => { - console.log("view sessions"); + setUserSessionPanelVisible(true); }; const onClickLogout = () => { @@ -462,7 +463,7 @@ const SectionHeaderContent = (props) => { ); }; -export default inject(({ auth, setup, common, peopleStore }) => { +export default inject(({ auth, setup, common, peopleStore, dialogsStore }) => { const { currentQuotaStore } = auth; const { isBrandingAndCustomizationAvailable, @@ -497,6 +498,7 @@ export default inject(({ auth, setup, common, peopleStore }) => { const { admins, selectorIsOpen } = setup.security.accessRight; const { isLoadedSectionHeader, setIsLoadedSectionHeader } = common; + const { setUserSessionPanelVisible } = dialogsStore; return { addUsers, removeAdmins, @@ -525,6 +527,7 @@ export default inject(({ auth, setup, common, peopleStore }) => { setLogoutDialogVisible, setLogoutAllDialogVisible, setSessionModalData, + setUserSessionPanelVisible, }; })( withLoading( diff --git a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js index 3c86951a80..206c9190ab 100644 --- a/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js +++ b/packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js @@ -1,3 +1,4 @@ +import { useEffect } from "react"; import { inject, observer } from "mobx-react"; import { useCallback } from "react"; import { Base } from "@docspace/shared/themes"; @@ -128,6 +129,7 @@ StyledTableRow.defaultProps = { theme: Base }; const SessionsTableRow = (props) => { const { t, + id, item, element, checkedProps, @@ -145,10 +147,12 @@ const SessionsTableRow = (props) => { setLogoutAllDialogVisible, setDisableDialogVisible, setSessionModalData, + onlineSessionsSocket, + setUserSessionPanelVisible, } = props; const onClickSessions = () => { - console.log("view sessions"); + setUserSessionPanelVisible(true); }; const onClickLogout = () => { @@ -160,6 +164,13 @@ const SessionsTableRow = (props) => { setDisableDialogVisible(true); }; + useEffect(() => { + onlineSessionsSocket.emit("getStatusesInPortal", { id }); + onlineSessionsSocket.on("statuses-in-room", (data) => { + console.log(data); + }); + }, []); + const contextOptions = [ { key: "ViewSessions", @@ -282,7 +293,9 @@ const SessionsTableRow = (props) => { ); }; -export default inject(({ setup }) => { +export default inject(({ auth, setup, dialogsStore }) => { + const { onlineSessionsSocket } = auth.settingsStore; + const { setUserSessionPanelVisible } = dialogsStore; const { setLogoutAllDialogVisible, setDisableDialogVisible, @@ -293,5 +306,7 @@ export default inject(({ setup }) => { setLogoutAllDialogVisible, setDisableDialogVisible, setSessionModalData, + onlineSessionsSocket, + setUserSessionPanelVisible, }; })(withContent(observer(SessionsTableRow))); diff --git a/packages/client/src/store/DialogsStore.js b/packages/client/src/store/DialogsStore.js index 0932ff654a..5f8fa2b99e 100644 --- a/packages/client/src/store/DialogsStore.js +++ b/packages/client/src/store/DialogsStore.js @@ -77,8 +77,8 @@ class DialogsStore { leaveRoomDialogVisible = false; changeRoomOwnerIsVisible = false; changeRoomOwnerData = null; - shareFolderDialogVisible = false; + userSessionsPanelVisible = false; constructor( authStore, @@ -436,6 +436,10 @@ class DialogsStore { setShareFolderDialogVisible = (visible) => { this.shareFolderDialogVisible = visible; }; + + setUserSessionPanelVisible = (visible) => { + this.userSessionsPanelVisible = visible; + }; } export default DialogsStore; diff --git a/packages/client/src/store/SettingsSetupStore.js b/packages/client/src/store/SettingsSetupStore.js index d2d9a5900d..db2143dd61 100644 --- a/packages/client/src/store/SettingsSetupStore.js +++ b/packages/client/src/store/SettingsSetupStore.js @@ -539,9 +539,16 @@ class SettingsSetupStore { setSessionModalData = (data) => { this.sessionModalData = { id: data.id, + avatar: data.avatar, displayName: data.displayName, + status: data.status, platform: data.platform, browser: data.browser, + country: data.country, + city: data.city, + date: data.date, + ip: data.ip, + userId: data.userId, }; }; }