diff --git a/client/src/components/common/Core/Core.jsx b/client/src/components/common/Core/Core.jsx
index 306fb15c..0bd40adb 100644
--- a/client/src/components/common/Core/Core.jsx
+++ b/client/src/components/common/Core/Core.jsx
@@ -16,6 +16,7 @@ import Toaster from '../Toaster';
import Fixed from '../Fixed';
import Static from '../Static';
import AdministrationModal from '../AdministrationModal';
+import InformationModal from '../InformationModal';
import UserSettingsModal from '../../users/UserSettingsModal';
import ProjectBackground from '../../projects/ProjectBackground';
import AddProjectModal from '../../projects/AddProjectModal';
@@ -61,6 +62,10 @@ const Core = React.memo(() => {
case ModalTypes.ADMINISTRATION:
modalNode = ;
+ break;
+ case ModalTypes.INFORMATION:
+ modalNode = ;
+
break;
case ModalTypes.USER_SETTINGS:
modalNode = ;
diff --git a/client/src/components/common/Header/Header.jsx b/client/src/components/common/Header/Header.jsx
index 4642be0e..12bb23c6 100755
--- a/client/src/components/common/Header/Header.jsx
+++ b/client/src/components/common/Header/Header.jsx
@@ -15,7 +15,7 @@ import entryActions from '../../../entry-actions';
import Paths from '../../../constants/Paths';
import { BoardMembershipRoles, BoardViews, UserRoles } from '../../../constants/Enums';
import UserAvatar from '../../users/UserAvatar';
-import UserStep from '../../users/UserStep';
+import UserActionsStep from '../../users/UserActionsStep';
import NotificationsStep from '../../notifications/NotificationsStep';
import styles from './Header.module.scss';
@@ -90,7 +90,7 @@ const Header = React.memo(() => {
}, [canEditProject, dispatch]);
const NotificationsPopup = usePopup(NotificationsStep, POPUP_PROPS);
- const UserPopup = usePopup(UserStep, POPUP_PROPS);
+ const UserActionsPopup = usePopup(UserActionsStep, POPUP_PROPS);
return (
@@ -152,12 +152,12 @@ const Header = React.memo(() => {
)}
-
+
{user.name}
-
+
diff --git a/client/src/components/users/UserSettingsModal/AboutPane.jsx b/client/src/components/common/InformationModal/AboutPane.jsx
similarity index 100%
rename from client/src/components/users/UserSettingsModal/AboutPane.jsx
rename to client/src/components/common/InformationModal/AboutPane.jsx
diff --git a/client/src/components/users/UserSettingsModal/AboutPane.module.scss b/client/src/components/common/InformationModal/AboutPane.module.scss
similarity index 100%
rename from client/src/components/users/UserSettingsModal/AboutPane.module.scss
rename to client/src/components/common/InformationModal/AboutPane.module.scss
diff --git a/client/src/components/common/InformationModal/InformationModal.jsx b/client/src/components/common/InformationModal/InformationModal.jsx
new file mode 100644
index 00000000..8a892366
--- /dev/null
+++ b/client/src/components/common/InformationModal/InformationModal.jsx
@@ -0,0 +1,56 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Tab } from 'semantic-ui-react';
+
+import entryActions from '../../../entry-actions';
+import { useClosableModal } from '../../../hooks';
+import TermsPane from './TermsPane';
+import AboutPane from './AboutPane';
+
+const InformationModal = React.memo(() => {
+ const dispatch = useDispatch();
+ const [t] = useTranslation();
+
+ const handleClose = useCallback(() => {
+ dispatch(entryActions.closeModal());
+ }, [dispatch]);
+
+ const [ClosableModal] = useClosableModal();
+
+ const panes = [
+ {
+ menuItem: t('common.aboutPlanka', {
+ context: 'title',
+ }),
+ render: () => ,
+ },
+ {
+ menuItem: t('common.termsOfService', {
+ context: 'title',
+ }),
+ render: () => ,
+ },
+ ];
+
+ return (
+
+
+
+
+
+ );
+});
+
+export default InformationModal;
diff --git a/client/src/components/users/UserSettingsModal/TermsPane.jsx b/client/src/components/common/InformationModal/TermsPane.jsx
similarity index 96%
rename from client/src/components/users/UserSettingsModal/TermsPane.jsx
rename to client/src/components/common/InformationModal/TermsPane.jsx
index 73513488..32bbfaa2 100644
--- a/client/src/components/users/UserSettingsModal/TermsPane.jsx
+++ b/client/src/components/common/InformationModal/TermsPane.jsx
@@ -10,7 +10,7 @@ import { Loader, Tab } from 'semantic-ui-react';
import selectors from '../../../selectors';
import api from '../../../api';
-import Markdown from '../../common/Markdown';
+import Markdown from '../Markdown';
import styles from './TermsPane.module.scss';
diff --git a/client/src/components/users/UserSettingsModal/TermsPane.module.scss b/client/src/components/common/InformationModal/TermsPane.module.scss
similarity index 100%
rename from client/src/components/users/UserSettingsModal/TermsPane.module.scss
rename to client/src/components/common/InformationModal/TermsPane.module.scss
diff --git a/client/src/components/common/InformationModal/index.js b/client/src/components/common/InformationModal/index.js
new file mode 100644
index 00000000..8d2fab4a
--- /dev/null
+++ b/client/src/components/common/InformationModal/index.js
@@ -0,0 +1,8 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import InformationModal from './InformationModal';
+
+export default InformationModal;
diff --git a/client/src/components/users/UserStep/UserStep.jsx b/client/src/components/users/UserActionsStep/UserActionsStep.jsx
similarity index 83%
rename from client/src/components/users/UserStep/UserStep.jsx
rename to client/src/components/users/UserActionsStep/UserActionsStep.jsx
index 0e043f87..d4c37439 100755
--- a/client/src/components/users/UserStep/UserStep.jsx
+++ b/client/src/components/users/UserActionsStep/UserActionsStep.jsx
@@ -14,9 +14,9 @@ import selectors from '../../../selectors';
import entryActions from '../../../entry-actions';
import { UserRoles } from '../../../constants/Enums';
-import styles from './UserStep.module.scss';
+import styles from './UserActionsStep.module.scss';
-const UserStep = React.memo(({ onClose }) => {
+const UserActionsStep = React.memo(({ onClose }) => {
const isLogouting = useSelector(selectors.selectIsLogouting);
const customerPanelUrl = useSelector(
@@ -40,6 +40,11 @@ const UserStep = React.memo(({ onClose }) => {
onClose();
}, [onClose, dispatch]);
+ const handleInformationClick = useCallback(() => {
+ dispatch(entryActions.openInformationModal());
+ onClose();
+ }, [onClose, dispatch]);
+
const handleLogoutClick = useCallback(() => {
dispatch(entryActions.logout());
}, [dispatch]);
@@ -65,7 +70,7 @@ const UserStep = React.memo(({ onClose }) => {