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