feat: Add legal requirements (#1306)

client/src/components/common/Login/Content.jsx

@@ -16,6 +16,8 @@ import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
 import { useForm, useNestedRef } from '../../../hooks';
 import { isUsername } from '../../../utils/validator';
+import AccessTokenSteps from '../../../constants/AccessTokenSteps';
+import TermsModal from './TermsModal';
 
 import styles from './Content.module.scss';
 
@@ -45,6 +47,11 @@ const createMessage = (error) => {
         type: 'error',
         content: 'common.useSingleSignOn',
       };
+    case 'Admin login required to initialize instance':
+      return {
+        type: 'error',
+        content: 'common.adminLoginRequiredToInitializeInstance',
+      };
     case 'Email already in use':
       return {
         type: 'error',
@@ -86,6 +93,7 @@ const Content = React.memo(() => {
     isSubmitting,
     isSubmittingWithOidc,
     error,
+    step,
   } = useSelector(selectors.selectAuthenticateForm);
 
   const dispatch = useDispatch();
@@ -265,6 +273,7 @@ const Content = React.memo(() => {
           <div className={styles.coverOverlay} />
         </Grid.Column>
       </Grid>
+      {step === AccessTokenSteps.ACCEPT_TERMS && <TermsModal />}
     </div>
   );
 });

client/src/components/common/Login/TermsModal.jsx

@@ -0,0 +1,93 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+import React, { useCallback, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import { Button, Checkbox, Dropdown, Modal } from 'semantic-ui-react';
+
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { localeByLanguage } from '../../../locales';
+import TERMS_LANGUAGES from '../../../constants/TermsLanguages';
+import Markdown from '../Markdown';
+
+import styles from './TermsModal.module.scss';
+
+const LOCALES = TERMS_LANGUAGES.map((language) => localeByLanguage[language]);
+
+const TermsModal = React.memo(() => {
+  const {
+    termsForm: { payload: terms, isSubmitting, isCancelling, isLanguageUpdating },
+  } = useSelector(selectors.selectAuthenticateForm);
+
+  const dispatch = useDispatch();
+  const [t] = useTranslation();
+  const [isTermsAccepted, setIsTermsAccepted] = useState(false);
+
+  const handleContinueClick = useCallback(() => {
+    dispatch(entryActions.acceptTerms(terms.signature));
+  }, [terms.signature, dispatch]);
+
+  const handleCancelClick = useCallback(() => {
+    dispatch(entryActions.cancelTerms());
+  }, [dispatch]);
+
+  const handleLanguageChange = useCallback(
+    (_, { value }) => {
+      dispatch(entryActions.updateTermsLanguage(value));
+    },
+    [dispatch],
+  );
+
+  const handleToggleAcceptClick = useCallback((_, { checked }) => {
+    setIsTermsAccepted(checked);
+  }, []);
+
+  return (
+    <Modal open centered={false}>
+      <Modal.Content>
+        <Dropdown
+          fluid
+          selection
+          options={LOCALES.map((locale) => ({
+            value: locale.language,
+            flag: locale.country,
+            text: locale.name,
+          }))}
+          value={terms.language}
+          loading={isLanguageUpdating}
+          disabled={isLanguageUpdating}
+          className={styles.language}
+          onChange={handleLanguageChange}
+        />
+        <Markdown>{terms.content}</Markdown>
+      </Modal.Content>
+      <Modal.Actions>
+        <Button
+          content={t('action.cancelAndClose')}
+          floated="left"
+          loading={isCancelling}
+          disabled={isSubmitting || isCancelling}
+          className={styles.cancelButton}
+          onClick={handleCancelClick}
+        />
+        <Checkbox
+          label={t('common.iHaveReadAndAgreeToTheseTerms')}
+          onChange={handleToggleAcceptClick}
+        />
+        <Button
+          positive
+          content={t('action.continue')}
+          loading={isSubmitting}
+          disabled={!isTermsAccepted || isSubmitting || isCancelling}
+          onClick={handleContinueClick}
+        />
+      </Modal.Actions>
+    </Modal>
+  );
+});
+
+export default TermsModal;

client/src/components/common/Login/TermsModal.module.scss

@@ -0,0 +1,14 @@
+/*!
+ * Copyright (c) 2024 PLANKA Software GmbH
+ * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
+ */
+
+:global(#app) {
+  .cancelButton {
+    margin-left: 0;
+  }
+
+  .language {
+    margin-bottom: 20px;
+  }
+}

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',