feat: Add legal requirements (#1306)

client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -8,6 +8,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
 
+import selectors from '../../../../selectors';
+import entryActions from '../../../../entry-actions';
 import { usePopupInClosableContext } from '../../../../hooks';
 import locales from '../../../../locales';
 import EditAvatarStep from './EditAvatarStep';
@@ -17,9 +19,6 @@ import EditUserEmailStep from '../../EditUserEmailStep';
 import EditUserPasswordStep from '../../EditUserPasswordStep';
 import UserAvatar from '../../UserAvatar';
 
-import selectors from '../../../../selectors';
-import entryActions from '../../../../entry-actions';
-
 import styles from './AccountPane.module.scss';
 
 const AccountPane = React.memo(() => {

client/src/components/users/UserSettingsModal/TermsPane.jsx

@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Loader, Tab } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import api from '../../../api';
+import Markdown from '../../common/Markdown';
+
+import styles from './TermsPane.module.scss';
+
+const TermsPane = React.memo(() => {
+  const type = useSelector((state) => selectors.selectCurrentUser(state).termsType);
+
+  const { i18n } = useTranslation();
+  const [content, setContent] = useState(null);
+
+  useEffect(() => {
+    async function fetchTerms() {
+      let terms;
+      try {
+        ({ item: terms } = await api.getTerms(type, i18n.resolvedLanguage));
+      } catch {
+        return;
+      }
+
+      setContent(terms.content);
+    }
+
+    fetchTerms();
+  }, [type, i18n.resolvedLanguage]);
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      {content ? (
+        <Markdown>{content}</Markdown>
+      ) : (
+        <Loader active inverted inline="centered" size="small" />
+      )}
+    </Tab.Pane>
+  );
+});
+
+export default TermsPane;

client/src/components/users/UserSettingsModal/TermsPane.module.scss

@@ -0,0 +1,11 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/users/UserSettingsModal/UserSettingsModal.jsx

@@ -13,6 +13,7 @@ import { useClosableModal } from '../../../hooks';
 import AccountPane from './AccountPane';
 import PreferencesPane from './PreferencesPane';
 import NotificationsPane from './NotificationsPane';
+import TermsPane from './TermsPane';
 import AboutPane from './AboutPane';
 
 const UserSettingsModal = React.memo(() => {
@@ -44,6 +45,12 @@ const UserSettingsModal = React.memo(() => {
       }),
       render: () => <NotificationsPane />,
     },
+    {
+      menuItem: t('common.terms', {
+        context: 'title',
+      }),
+      render: () => <TermsPane />,
+    },
     {
       menuItem: t('common.aboutPlanka', {
         context: 'title',