IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Logout all sessions dialog has been changed

Browse Source
This commit is contained in:
Elyor Djalilov 2024-01-22 15:42:04 +05:00
parent d59fc19b44
commit f2c09d122c
8 changed files with 49 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/client/src/components/dialogs/LogoutAllSessionDialog/index.js
View File

@ -1,19 +1,21 @@
import { useState } from "react";
import { inject, observer } from "mobx-react";
import { ModalDialog } from "@docspace/shared/components/modal-dialog";
import { Checkbox } from "@docspace/shared/components/checkbox";
import { Button } from "@docspace/shared/components/button";
import { Box } from "@docspace/shared/components/box";
import { Text } from "@docspace/shared/components/text";
import ModalDialogContainer from "../ModalDialogContainer";
const LogoutAllSessionDialog = ({
t,
data,
visible,
isLoading,
onClose,
onRemoveAllSessions,
onRemoveAllExceptThis,
isSeveralSelection,
}) => {
const [isChecked, setIsChecked] = useState(false);
@ -25,6 +27,29 @@ const LogoutAllSessionDialog = ({
isChecked ? onRemoveAllSessions() : onRemoveAllExceptThis();
};
const isProfile = location.pathname.includes("/profile");
const bodySubtitle =
isSeveralSelection || isProfile
? t("Profile:LogoutDescription")
: t("Profile:LogoutCurrentUserDescription", {
displayName: data?.displayName,
});
const bodyText = !isSeveralSelection && (
<>
<Text style={{ margin: "15px 0px" }}>
{t("Profile:DescriptionForSecurity")}
</Text>
<Checkbox
style={{ display: "inline-flex" }}
label={t("Profile:ChangePasswordAfterLoggingOut")}
isChecked={isChecked}
onChange={onChangeCheckbox}
/>
</>
);
return (
<ModalDialogContainer
visible={visible}
@ -35,18 +60,8 @@ const LogoutAllSessionDialog = ({
{t("Profile:LogoutAllActiveConnections")}
</ModalDialog.Header>
<ModalDialog.Body>
<Text>{t("Profile:LogoutDescription")}</Text>
<Text style={{ margin: "15px 0" }}>
{t("Profile:DescriptionForSecurity")}
</Text>
<Box displayProp="flex" alignItems="center">
<Checkbox
className="change-password"
isChecked={isChecked}
onChange={onChangeCheckbox}
/>
{t("Profile:ChangePasswordAfterLoggingOut")}
</Box>
{bodySubtitle}
{bodyText}
</ModalDialog.Body>
<ModalDialog.Footer>
<Button
@ -73,4 +88,10 @@ const LogoutAllSessionDialog = ({
);
};
export default LogoutAllSessionDialog;
export default inject(({ peopleStore }) => {
const { isSeveralSelection } = peopleStore.selectionStore;
return {
isSeveralSelection,
};
})(observer(LogoutAllSessionDialog));

22
packages/client/src/pages/PortalSettings/Layout/Section/Header/index.js
View File

@ -302,12 +302,9 @@ const SectionHeaderContent = (props) => {
isPeopleHeaderVisible,
isPeopleHeaderChecked,
setupSelection,
peopleSelection,
setDisableDialogVisible,
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setSessionModalData,
isVisible,
isSeveralSelection,
} = props;
const { header, isCategoryOrHeader, isNeedPaidIcon } = state;
const arrayOfParams = getArrayOfParams();
@ -350,16 +347,7 @@ const SectionHeaderContent = (props) => {
};
const onClickLogout = () => {
if (isVisible) {
setLogoutAllDialogVisible(true);
} else {
setLogoutDialogVisible(true);
setSessionModalData({
id: peopleSelection[0].userId,
platform: peopleSelection[0].platform,
browser: peopleSelection[0].browser,
});
}
setLogoutAllDialogVisible(true);
};
const onClickDisable = () => {
@ -372,7 +360,7 @@ const SectionHeaderContent = (props) => {
id: "sessions",
key: "Sessions",
label: t("Common:Sessions"),
disabled: isVisible,
disabled: isSeveralSelection,
onClick: onClickSessions,
iconUrl: HistoryFinalizedReactSvgUrl,
},
@ -500,7 +488,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
isHeaderChecked: isPeopleHeaderChecked,
isHeaderVisible: isPeopleHeaderVisible,
setSelected: peopleSetSelected,
isVisible,
isSeveralSelection,
selection: peopleSelection,
} = peopleStore.selectionStore;
@ -529,7 +517,7 @@ export default inject(({ auth, setup, common, peopleStore }) => {
isPeopleHeaderIndeterminate,
isPeopleHeaderChecked,
isPeopleHeaderVisible,
isVisible,
isSeveralSelection,
setDisableDialogVisible,
setLogoutDialogVisible,
setLogoutAllDialogVisible,

21
packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/RowView/SessionsRow.js
View File

@ -107,11 +107,9 @@ const SessionsRow = (props) => {
onContentRowClick,
element,
isActive,
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
isVisible,
} = props;
const isChecked = checkedProps.checked;
@ -129,16 +127,8 @@ const SessionsRow = (props) => {
};
const onClickLogout = () => {
if (isVisible) {
setLogoutAllDialogVisible(true);
} else {
setLogoutDialogVisible(true);
setSessionModalData({
id: item.userId,
platform: item.platform,
browser: item.browser,
});
}
setLogoutAllDialogVisible(true);
setSessionModalData({ displayName: item.displayName });
};
const onClickDisable = () => {
@ -198,21 +188,16 @@ const SessionsRow = (props) => {
);
};
export default inject(({ setup, peopleStore }) => {
const { isVisible } = peopleStore.selectionStore;
export default inject(({ setup }) => {
const {
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
} = setup;
return {
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
isVisible,
};
})(withContent(observer(SessionsRow)));

18
packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/SessionsTableRow.js
View File

@ -128,7 +128,6 @@ StyledTableRow.defaultProps = { theme: Base };
const SessionsTableRow = (props) => {
const {
t,
id,
item,
element,
checkedProps,
@ -143,11 +142,9 @@ const SessionsTableRow = (props) => {
country,
city,
ip,
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
isVisible,
} = props;
const onClickSessions = () => {
@ -155,12 +152,8 @@ const SessionsTableRow = (props) => {
};
const onClickLogout = () => {
if (isVisible) {
setLogoutAllDialogVisible(true);
} else {
setLogoutDialogVisible(true);
setSessionModalData({ id, platform, browser });
}
setLogoutAllDialogVisible(true);
setSessionModalData({ displayName });
};
const onClickDisable = () => {
@ -289,21 +282,16 @@ const SessionsTableRow = (props) => {
);
};
export default inject(({ setup, peopleStore }) => {
const { isVisible } = peopleStore.selectionStore;
export default inject(({ setup }) => {
const {
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
} = setup;
return {
setLogoutDialogVisible,
setLogoutAllDialogVisible,
setDisableDialogVisible,
setSessionModalData,
isVisible,
};
})(withContent(observer(SessionsTableRow)));

1
packages/client/src/pages/PortalSettings/categories/security/sessions/SessionsTable/TableView/index.js
View File

@ -165,7 +165,6 @@ const TableView = ({ t, sectionWidth, userId, sessionsData }) => {
key={item.userId}
userId={userId}
item={item}
id={item.userId}
hideColumns={hideColumns}
displayName={item.displayName}
status={item.status}

1
packages/client/src/pages/PortalSettings/categories/security/sessions/index.js
View File

@ -186,6 +186,7 @@ const Sessions = ({
t={t}
visible={logoutAllDialogVisible}
isLoading={isLoading}
data={sessionModalData}
onClose={() => setLogoutAllDialogVisible(false)}
onRemoveAllSessions={onClickRemoveAllSessions}
onRemoveAllExceptThis={onClickRemoveAllExceptThis}

2
packages/client/src/store/SelectionPeopleStore.js
View File

@ -329,7 +329,7 @@ class SelectionStore {
return users.map((u) => u.id);
}
get isVisible() {
get isSeveralSelection() {
return this.selection.length > 1;
}

1
packages/client/src/store/SettingsSetupStore.js
View File

@ -539,6 +539,7 @@ class SettingsSetupStore {
setSessionModalData = (data) => {
this.sessionModalData = {
id: data.id,
displayName: data.displayName,
platform: data.platform,
browser: data.browser,
};