feat: Add configurable auto logout on inactivity

Users can pick an inactivity timeout in their preferences. A warning
appears 30 seconds before, and activity or a logout is synchronised
across open tabs.

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

@@ -3,16 +3,35 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
-import { Radio, Tab } from 'semantic-ui-react';
+import { Dropdown, Radio, Tab } from 'semantic-ui-react';
 
 import selectors from '../../../selectors';
 import entryActions from '../../../entry-actions';
+import { AutoLogoutModes } from '../../../constants/Enums';
 
 import styles from './PreferencesPane.module.scss';
 
+const AUTO_LOGOUT_OPTION_ORDER = [
+  AutoLogoutModes.MINUTES_2,
+  AutoLogoutModes.MINUTES_5,
+  AutoLogoutModes.MINUTES_10,
+  AutoLogoutModes.MINUTES_30,
+  AutoLogoutModes.HOURS_12,
+  AutoLogoutModes.NEVER,
+];
+
+const AUTO_LOGOUT_TRANSLATION_KEYS = {
+  [AutoLogoutModes.NEVER]: 'common.autoLogout_never',
+  [AutoLogoutModes.MINUTES_2]: 'common.autoLogout_2m',
+  [AutoLogoutModes.MINUTES_5]: 'common.autoLogout_5m',
+  [AutoLogoutModes.MINUTES_10]: 'common.autoLogout_10m',
+  [AutoLogoutModes.MINUTES_30]: 'common.autoLogout_30m',
+  [AutoLogoutModes.HOURS_12]: 'common.autoLogout_12h',
+};
+
 const PreferencesPane = React.memo(() => {
   const user = useSelector(selectors.selectCurrentUser);
 
@@ -30,6 +49,29 @@ const PreferencesPane = React.memo(() => {
     [dispatch],
   );
 
+  const handleAutoLogoutChange = useCallback(
+    (_, { value }) => {
+      dispatch(
+        entryActions.updateCurrentUser({
+          autoLogoutMode: value,
+        }),
+      );
+    },
+    [dispatch],
+  );
+
+  const autoLogoutOptions = useMemo(
+    () =>
+      AUTO_LOGOUT_OPTION_ORDER.map((mode) => ({
+        key: mode,
+        value: mode,
+        text: t(AUTO_LOGOUT_TRANSLATION_KEYS[mode]),
+      })),
+    [t],
+  );
+
+  const autoLogoutValue = user.autoLogoutMode || AutoLogoutModes.MINUTES_30;
+
   return (
     <Tab.Pane attached={false} className={styles.wrapper}>
       <Radio
@@ -56,6 +98,17 @@ const PreferencesPane = React.memo(() => {
         className={styles.radio}
         onChange={handleChange}
       />
+      <div className={styles.field}>
+        <span className={styles.label}>{t('common.autoLogout')}</span>
+        <Dropdown
+          fluid
+          selection
+          className={styles.dropdown}
+          options={autoLogoutOptions}
+          value={autoLogoutValue}
+          onChange={handleAutoLogoutChange}
+        />
+      </div>
     </Tab.Pane>
   );
 });

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

@@ -13,6 +13,22 @@
     }
   }
 
+  .field {
+    margin-top: 16px;
+  }
+
+  .label {
+    color: #444444;
+    display: block;
+    font-size: 13px;
+    font-weight: 600;
+    margin-bottom: 6px;
+  }
+
+  .dropdown {
+    width: 100%;
+  }
+
   .wrapper {
     border: none;
     box-shadow: none;