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,
};
};
}