chore: Update version

Closes #43, closes #111, closes #272

Dockerfile

@@ -26,7 +26,7 @@ COPY server .
 RUN cp .env.sample .env
 
 COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views
+COPY --from=client-builder /app/build/index.html views/index.ejs
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images

client/config-overrides.js

@@ -0,0 +1,56 @@
+const fs = require('fs');
+const path = require('path');
+
+const BASE_URL_PLACEHOLDER = 'BASE_URL_PLACEHOLDER';
+
+const replaceInFile = (file, search, replace) => {
+  fs.readFile(file, 'utf8', (readError, data) => {
+    if (readError) {
+      throw new Error(`${readError}`);
+    }
+    const res = data.replaceAll(search, replace);
+    fs.writeFile(file, res, 'utf8', (writeError) => {
+      if (writeError) {
+        throw new Error(`${writeError}`);
+      }
+    });
+  });
+};
+
+const replaceBaseUrl = (compiler) => {
+  compiler.hooks.assetEmitted.tap('ReplaceBaseUrlPlaceholder', (file, info) => {
+    if (info.content.indexOf(BASE_URL_PLACEHOLDER) >= 0) {
+      if (/\.css$/.exec(info.targetPath)) {
+        // For CSS 'url(...)' import we can use relative import
+        const relPath = path.relative(path.dirname(info.targetPath), info.outputPath);
+        replaceInFile(info.targetPath, BASE_URL_PLACEHOLDER, `${relPath}/`);
+      } else if (/\.js$/.exec(info.targetPath)) {
+        // For JS 'import ... from "some-asset"' we can get the variable injected in the window object
+        // eslint-disable-next-line no-template-curly-in-string
+        replaceInFile(info.targetPath, `"${BASE_URL_PLACEHOLDER}"`, '`${window.BASE_URL}/`');
+      } else if (/index\.html$/.exec(info.targetPath)) {
+        // For the main html file, we set a placeholder for sails to inject the correct value as runtime
+        replaceInFile(info.targetPath, BASE_URL_PLACEHOLDER, '<%= BASE_URL %>');
+      }
+    }
+  });
+};
+
+module.exports = function override(config, env) {
+  if (env === 'production') {
+    const plugins = config.plugins.map((plugin) => {
+      if (plugin.constructor.name === 'InterpolateHtmlPlugin') {
+        const newPlugin = plugin;
+        newPlugin.replacements.PUBLIC_URL = BASE_URL_PLACEHOLDER;
+        return newPlugin;
+      }
+      return plugin;
+    });
+    return {
+      ...config,
+      output: { ...config.output, publicPath: BASE_URL_PLACEHOLDER },
+      plugins: [...plugins, { apply: replaceBaseUrl }],
+    };
+  }
+  return config;
+};

client/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "planka-client",
       "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
         "classnames": "^2.3.1",
         "connected-react-router": "^6.9.3",
         "date-fns": "^2.29.1",
@@ -62,6 +63,7 @@
         "eslint-plugin-react-hooks": "^4.6.0",
         "jest-enzyme": "^7.1.2",
         "prettier": "2.7.1",
+        "react-app-rewired": "^2.2.1",
         "react-test-renderer": "^17.0.2"
       }
     },
@@ -3030,6 +3032,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -18659,6 +18666,30 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-app-rewired": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
+      "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
+      "dev": true,
+      "dependencies": {
+        "semver": "^5.6.0"
+      },
+      "bin": {
+        "react-app-rewired": "bin/index.js"
+      },
+      "peerDependencies": {
+        "react-scripts": ">=2.1.3"
+      }
+    },
+    "node_modules/react-app-rewired/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/react-beautiful-dnd": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",
@@ -27333,6 +27364,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -38706,6 +38742,23 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-app-rewired": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-app-rewired/-/react-app-rewired-2.2.1.tgz",
+      "integrity": "sha512-uFQWTErXeLDrMzOJHKp0h8P1z0LV9HzPGsJ6adOtGlA/B9WfT6Shh4j2tLTTGlXOfiVx6w6iWpp7SOC5pvk+gA==",
+      "dev": true,
+      "requires": {
+        "semver": "^5.6.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "react-beautiful-dnd": {
       "version": "13.1.0",
       "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz",

client/package.json

@@ -2,11 +2,11 @@
   "name": "planka-client",
   "private": true,
   "scripts": {
-    "build": "react-scripts build",
+    "build": "react-app-rewired build",
     "eject": "react-scripts eject",
-    "lint": "eslint --ext js,jsx src",
+    "lint": "eslint --ext js,jsx src config-overrides.js",
-    "start": "react-scripts start",
+    "start": "react-app-rewired start",
-    "test": "react-scripts test"
+    "test": "react-app-rewired test"
   },
   "browserslist": {
     "production": [
@@ -63,6 +63,7 @@
     }
   },
   "dependencies": {
+    "@juggle/resize-observer": "^3.4.0",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.3",
     "date-fns": "^2.29.1",
@@ -119,6 +120,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest-enzyme": "^7.1.2",
     "prettier": "2.7.1",
+    "react-app-rewired": "^2.2.1",
     "react-test-renderer": "^17.0.2"
   }
 }

client/public/index.html

@@ -26,6 +26,7 @@
     -->
     <title>Planka</title>
   </head>
+  <script>window.BASE_URL = "%PUBLIC_URL%";</script>
   <body id="app">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

client/src/api/socket.js

@@ -5,7 +5,7 @@ import Config from '../constants/Config';
 
 const io = sailsIOClient(socketIOClient);
 
-io.sails.url = Config.SERVER_BASE_URL;
+io.sails.url = Config.SERVER_HOST_NAME;
 io.sails.autoConnect = false;
 io.sails.reconnection = true;
 io.sails.useCORSRouteToGetCookie = false;
@@ -13,6 +13,7 @@ io.sails.environment = process.env.NODE_ENV;
 
 const { socket } = io;
 
+socket.path = `${Config.BASE_PATH}/socket.io`;
 socket.connect = socket._connect; // eslint-disable-line no-underscore-dangle
 
 ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].forEach((method) => {

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -19,7 +19,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
       ...defaultData,
     }));
 
-    const handleRoleSelectClick = useCallback((role) => {
+    const handleSelectRoleClick = useCallback((role) => {
       setData((prevData) => ({
         ...prevData,
         role,
@@ -50,7 +50,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
             <Menu secondary vertical className={styles.menu}>
               <Menu.Item
                 active={data.role === BoardMembershipRoles.EDITOR}
-                onClick={() => handleRoleSelectClick(BoardMembershipRoles.EDITOR)}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.EDITOR)}
               >
                 <div className={styles.menuItemTitle}>{t('common.editor')}</div>
                 <div className={styles.menuItemDescription}>
@@ -59,7 +59,7 @@ const BoardMembershipPermissionsSelectStep = React.memo(
               </Menu.Item>
               <Menu.Item
                 active={data.role === BoardMembershipRoles.VIEWER}
-                onClick={() => handleRoleSelectClick(BoardMembershipRoles.VIEWER)}
+                onClick={() => handleSelectRoleClick(BoardMembershipRoles.VIEWER)}
               >
                 <div className={styles.menuItemTitle}>{t('common.viewer')}</div>
                 <div className={styles.menuItemDescription}>{t('common.canOnlyViewBoard')}</div>

client/src/components/Card/Card.jsx

@@ -5,6 +5,7 @@ import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 
+import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
 import NameEdit from './NameEdit';
@@ -57,6 +58,17 @@ const Card = React.memo(
       }
     }, []);
 
+    const handleToggleTimerClick = useCallback(
+      (event) => {
+        event.preventDefault();
+
+        onUpdate({
+          timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+        });
+      },
+      [timer, onUpdate],
+    );
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -108,7 +120,13 @@ const Card = React.memo(
               )}
               {timer && (
                 <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
+                  <Timer
+                    as="span"
+                    startedAt={timer.startedAt}
+                    total={timer.total}
+                    size="tiny"
+                    onClick={canEdit ? handleToggleTimerClick : undefined}
+                  />
                 </span>
               )}
             </span>
@@ -148,14 +166,11 @@ const Card = React.memo(
                     {canEdit && (
                       <ActionsPopup
                         card={{
-                          id,
-                          name,
                           dueDate,
                           timer,
                           boardId,
                           listId,
                           projectId,
-                          isPersisted,
                         }}
                         projectsToLists={allProjectsToLists}
                         boardMemberships={allBoardMemberships}

client/src/components/Card/Card.module.scss

@@ -78,7 +78,9 @@
   .cover {
     border-radius: 3px 3px 0 0;
     margin-bottom: 2px;
+    padding: 2px 2px 0;
     vertical-align: middle;
+    width: 100%;
   }
 
   .details {

client/src/components/CardModal/CardModal.jsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
 import { Markdown } from '../../lib/custom-ui';
 
+import { startTimer, stopTimer } from '../../utils/timer';
 import NameField from './NameField';
 import DescriptionEdit from './DescriptionEdit';
 import Tasks from './Tasks';
@@ -80,6 +81,12 @@ const CardModal = React.memo(
 
     const isGalleryOpened = useRef(false);
 
+    const handleToggleTimerClick = useCallback(() => {
+      onUpdate({
+        timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+      });
+    }, [timer, onUpdate]);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -291,6 +298,19 @@ const CardModal = React.memo(
                         <Timer startedAt={timer.startedAt} total={timer.total} />
                       )}
                     </span>
+                    {canEdit && (
+                      <button
+                        onClick={handleToggleTimerClick}
+                        type="button"
+                        className={classNames(styles.attachment, styles.dueDate)}
+                      >
+                        <Icon
+                          name={timer.startedAt ? 'pause' : 'play'}
+                          size="small"
+                          className={styles.addAttachment}
+                        />
+                      </button>
+                    )}
                   </div>
                 )}
               </div>

client/src/components/LabelsStep/AddStep.jsx

@@ -10,12 +10,13 @@ import Editor from './Editor';
 
 import styles from './AddStep.module.scss';
 
-const AddStep = React.memo(({ onCreate, onBack }) => {
+const AddStep = React.memo(({ defaultData, onCreate, onBack }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange] = useForm(() => ({
     name: '',
     color: LabelColors[0],
+    ...defaultData,
   }));
 
   const handleSubmit = useCallback(() => {
@@ -46,6 +47,7 @@ const AddStep = React.memo(({ onCreate, onBack }) => {
 });
 
 AddStep.propTypes = {
+  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onCreate: PropTypes.func.isRequired,
   onBack: PropTypes.func.isRequired,
 };

client/src/components/LabelsStep/LabelsStep.jsx

@@ -84,7 +84,15 @@ const LabelsStep = React.memo(
     if (step) {
       switch (step.type) {
         case StepTypes.ADD:
-          return <AddStep onCreate={onCreate} onBack={handleBack} />;
+          return (
+            <AddStep
+              defaultData={{
+                name: search,
+              }}
+              onCreate={onCreate}
+              onBack={handleBack}
+            />
+          );
         case StepTypes.EDIT: {
           const currentItem = items.find((item) => item.id === step.params.id);
 

client/src/components/Timer/Timer.jsx

@@ -14,7 +14,7 @@ const SIZES = {
   MEDIUM: 'medium',
 };
 
-const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
+const Timer = React.memo(({ as, startedAt, total, size, isDisabled, onClick }) => {
   const prevStartedAt = usePrevious(startedAt);
   const forceUpdate = useForceUpdate();
 
@@ -52,6 +52,7 @@ const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
       className={classNames(
         styles.wrapper,
         styles[`wrapper${upperFirst(size)}`],
+        startedAt && styles.wrapperActive,
         onClick && styles.wrapperHoverable,
       )}
     >
@@ -59,16 +60,19 @@ const Timer = React.memo(({ startedAt, total, size, isDisabled, onClick }) => {
     </span>
   );
 
+  const ElementType = as;
+
   return onClick ? (
-    <button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
+    <ElementType type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
       {contentNode}
-    </button>
+    </ElementType>
   ) : (
     contentNode
   );
 });
 
 Timer.propTypes = {
+  as: PropTypes.elementType,
   startedAt: PropTypes.instanceOf(Date),
   total: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
   size: PropTypes.oneOf(Object.values(SIZES)),
@@ -77,6 +81,7 @@ Timer.propTypes = {
 };
 
 Timer.defaultProps = {
+  as: 'button',
   startedAt: undefined,
   size: SIZES.MEDIUM,
   isDisabled: false,

client/src/components/Timer/Timer.module.scss

@@ -9,17 +9,28 @@
   }
 
   .wrapper {
-    background: #f3f4f6;
+    background: #dce0e4;
     border: none;
     border-radius: 3px;
-    color: #7e8ea3;
+    color: #6a808b;
     display: inline-block;
+    font-variant-numeric: tabular-nums;
     outline: none;
     text-align: left;
     transition: background 0.3s ease;
     vertical-align: top;
   }
 
+  .wrapperActive {
+    background: #21ba45;
+    color: #fff;
+
+    &.wrapperHoverable:hover {
+      background: #16ab39;
+      color: #fff;
+    }
+  }
+
   .wrapperHoverable:hover {
     background: #d2d8dc;
     color: #17394d;
@@ -42,6 +53,5 @@
   .wrapperMedium {
     line-height: 20px;
     padding: 6px 12px;
-    text-decoration: underline;
   }
 }

client/src/components/UserSettingsModal/AboutPane.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+// import { useTranslation } from 'react-i18next';
+import { Image, Tab } from 'semantic-ui-react';
+
+import logo from '../../assets/images/logo.png';
+
+import styles from './AboutPane.module.scss';
+
+const AboutPane = React.memo(() => {
+  // const [t] = useTranslation();
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <Image centered src={logo} size="large" className={styles.logo} />
+    </Tab.Pane>
+  );
+});
+
+export default AboutPane;

client/src/components/UserSettingsModal/AboutPane.module.scss

@@ -0,0 +1,10 @@
+:global(#app) {
+  /* .logo {
+    margin-bottom: 16px;
+  } */
+
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -5,6 +5,7 @@ import { Modal, Tab } from 'semantic-ui-react';
 
 import AccountPane from './AccountPane';
 import PreferencesPane from './PreferencesPane';
+import AboutPane from './AboutPane';
 
 const UserSettingsModal = React.memo(
   ({
@@ -71,6 +72,10 @@ const UserSettingsModal = React.memo(
           <PreferencesPane subscribeToOwnCards={subscribeToOwnCards} onUpdate={onUpdate} />
         ),
       },
+      {
+        menuItem: 'About Planka',
+        render: () => <AboutPane />,
+      },
     ];
 
     return (

client/src/constants/Config.js

@@ -1,6 +1,11 @@
+const { BASE_URL } = window;
+const BASE_PATH = BASE_URL.replace(/^.*\/\/[^/]*(.*)[^?#]*.*$/, '$1');
+
 const SERVER_BASE_URL =
   process.env.REACT_APP_SERVER_BASE_URL ||
-  (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1337');
+  (process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:1337');
+
+const SERVER_HOST_NAME = SERVER_BASE_URL.replace(/^(.*\/\/[^/?#]*).*$/, '$1');
 
 const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
@@ -10,7 +15,9 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;
 
 export default {
+  BASE_PATH,
   SERVER_BASE_URL,
+  SERVER_HOST_NAME,
   ACCESS_TOKEN_KEY,
   ACCESS_TOKEN_VERSION_KEY,
   ACCESS_TOKEN_VERSION,

client/src/constants/Paths.js

@@ -1,8 +1,10 @@
-const ROOT = '/';
+import Config from './Config';
-const LOGIN = '/login';
+
-const PROJECTS = '/projects/:id';
+const ROOT = `${Config.BASE_PATH}/`;
-const BOARDS = '/boards/:id';
+const LOGIN = `${Config.BASE_PATH}/login`;
-const CARDS = '/cards/:id';
+const PROJECTS = `${Config.BASE_PATH}/projects/:id`;
+const BOARDS = `${Config.BASE_PATH}/boards/:id`;
+const CARDS = `${Config.BASE_PATH}/cards/:id`;
 
 export default {
   ROOT,

client/src/lib/popup/with-popup.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useState } from 'react';
+import { ResizeObserver } from '@juggle/resize-observer';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Popup as SemanticUIPopup } from 'semantic-ui-react';
 
@@ -8,6 +9,9 @@ export default (WrappedComponent, defaultProps) => {
   const Popup = React.memo(({ children, ...props }) => {
     const [isOpened, setIsOpened] = useState(false);
 
+    const wrapper = useRef(null);
+    const resizeObserver = useRef(null);
+
     const handleOpen = useCallback(() => {
       setIsOpened(true);
     }, []);
@@ -37,6 +41,29 @@ export default (WrappedComponent, defaultProps) => {
       [children],
     );
 
+    const handleContentRef = useCallback((element) => {
+      if (resizeObserver.current) {
+        resizeObserver.current.disconnect();
+      }
+
+      if (!element) {
+        resizeObserver.current = null;
+        return;
+      }
+
+      resizeObserver.current = new ResizeObserver(() => {
+        if (resizeObserver.current.isInitial) {
+          resizeObserver.current.isInitial = false;
+          return;
+        }
+
+        wrapper.current.positionUpdate();
+      });
+
+      resizeObserver.current.isInitial = true;
+      resizeObserver.current.observe(element);
+    }, []);
+
     const tigger = React.cloneElement(children, {
       onClick: handleTriggerClick,
     });
@@ -45,6 +72,7 @@ export default (WrappedComponent, defaultProps) => {
       <SemanticUIPopup
         basic
         wide
+        ref={wrapper}
         trigger={tigger}
         on="click"
         open={isOpened}
@@ -64,9 +92,11 @@ export default (WrappedComponent, defaultProps) => {
         onClick={handleClick}
         {...defaultProps} // eslint-disable-line react/jsx-props-no-spreading
       >
-        <Button icon="close" onClick={handleClose} className={styles.closeButton} />
+        <div ref={handleContentRef}>
-        {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <Button icon="close" onClick={handleClose} className={styles.closeButton} />
-        <WrappedComponent {...props} onClose={handleClose} />
+          {/* eslint-disable-next-line react/jsx-props-no-spreading */}
+          <WrappedComponent {...props} onClose={handleClose} />
+        </div>
       </SemanticUIPopup>
     );
   });

client/src/locales/de/core.js

@@ -4,11 +4,11 @@ export default {
   dateFns,
 
   format: {
-    date: 'd/M/yyyy',
+    date: 'd.MM.yyyy',
     time: 'p',
     dateTime: '$t(format:date) $t(format:time)',
-    longDate: 'MMM d',
+    longDate: 'd. MMM',
-    longDateTime: "d MMMM 'at' p",
+    longDateTime: "d. MMMM 'um' p",
   },
 
   translation: {
@@ -23,7 +23,7 @@ export default {
       administrator: 'Administrator',
       all: 'Alle',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
-        'Alle Änderungen werden automatisch gespeichert,<br />sobald die Verbindung wiederhergestellt wurde',
+        'Alle Änderungen werden automatisch gespeichert, sobald die Verbindung wiederhergestellt wurde.',
       areYouSureYouWantToDeleteThisAttachment:
         'Sind Sie sicher, dass Sie diesen Anhang löschen möchten?',
       areYouSureYouWantToDeleteThisBoard: 'Sind Sie sicher, dass Sie dieses Board löschen möchten?',
@@ -55,10 +55,11 @@ export default {
       color: 'Farbe',
       createBoard_title: 'Board erstellen',
       createLabel_title: 'Label erstellen',
-      createNewOneOrSelectExistingOne: 'Ein Neues erstellen, oder <br />ein Bestehendes auswählen',
+      createNewOneOrSelectExistingOne:
+        'Erstellen Sie ein neues oder wählen Sie ein bestehendes aus.',
       createProject_title: 'Projekt erstellen',
       createTextFile_title: 'Textdatei erstellen',
-      currentPassword: 'Derzeitiges Password',
+      currentPassword: 'Derzeitiges Passwort',
       dangerZone_title: 'Gefährlicher Bereich',
       date: 'Datum',
       dueDate_title: 'Fälligkeitsdatum',
@@ -73,18 +74,18 @@ export default {
       deleteUser_title: 'Benutzer löschen',
       description: 'Beschreibung',
       detectAutomatically: 'Automatische Erkennung',
-      dropFileToUpload: 'Datei ablegen, um hochzuladen',
+      dropFileToUpload: 'Datei ablegen, um sie hochzuladen',
       editAttachment_title: 'Anhang bearbieten',
       editAvatar_title: 'Avatar bearbeiten',
       editBoard_title: 'Board bearbeiten',
       editDueDate_title: 'Fälligkeitsdatum bearbeiten',
-      editEmail_title: 'E-Mail bearbeiten',
+      editEmail_title: 'E-Mail-Adresse bearbeiten',
       editLabel_title: 'Label bearbeiten',
       editPassword_title: 'Passwort ändern',
       editTimer_title: 'Timer bearbeiten',
       editUsername_title: 'Benutzername ändern',
-      email: 'E-Mail',
+      email: 'E-Mail-Adresse',
-      emailAlreadyInUse: 'E-Mail bereits in Verwendung',
+      emailAlreadyInUse: 'E-Mail-Adresse bereits in Verwendung',
       enterCardTitle: 'Kartentitel eingeben...',
       enterDescription: 'Beschreibung eingeben...',
       enterFilename: 'Dateiname eingeben',
@@ -108,7 +109,7 @@ export default {
       minutes: 'Minuten',
       moveCard_title: 'Karte verschieben',
       name: 'Name',
-      newEmail: 'Neue E-Mail',
+      newEmail: 'Neue E-Mail-Adresse',
       newPassword: 'Neues Passwort',
       newUsername: 'Neuer Benutzername',
       noConnectionToServer: 'Keine Verbindung zum Server',
@@ -140,10 +141,10 @@ export default {
       time: 'Zeit',
       timer: 'Timer',
       title: 'Titel',
-      userActions_title: 'Benutzerraktionen',
+      userActions_title: 'Benutzeraktionen',
       userAddedThisCardToList: '<0>{{user}}</0><1> hat diese Karte hinzugefügt zu {{list}}</1>',
       userLeftNewCommentToCard:
-        '{{user}} hat einen neuen Kommentar verfasst «{{comment}}» to <2>{{card}}</2>',
+        '{{user}} hat einen neuen Kommentar verfasst: «{{comment}}» in <2>{{card}}</2>',
       userMovedCardFromListToList:
         '{{user}} bewegte <2>{{card}}</2> von {{fromList}} nach {{toList}}',
       userMovedThisCardFromListToList:
@@ -190,7 +191,7 @@ export default {
       edit: 'Bearbeiten',
       editDueDate_title: 'Fälligkeitsdatum bearbeiten',
       editDescription_title: 'Beschreibung ändern',
-      editEmail_title: 'E-Mail bearbeiten',
+      editEmail_title: 'E-Mail-Adresse bearbeiten',
       editPassword_title: 'Passwort ändern',
       editTimer_title: 'Timer bearbeiten',
       editTitle_title: 'Titel bearbeiten',
@@ -199,7 +200,7 @@ export default {
       leaveBoard: 'Board verlassen',
       leaveProject: 'Projekt verlassen',
       logOut_title: 'Ausloggen',
-      makeCover_title: 'als Vorschau festlegen',
+      makeCover_title: 'Als Vorschau festlegen',
       move: 'Verschieben',
       moveCard_title: 'Karte bewegen',
       remove: 'Löschen',
@@ -216,7 +217,7 @@ export default {
       start: 'Start',
       stop: 'Stopp',
       subscribe: 'Abonnieren',
-      unsubscribe: 'Deabonnieren',
+      unsubscribe: 'De-abonnieren',
       uploadNewAvatar: 'Neuen Avatar hochladen',
       uploadNewImage: 'Neues Bild hochladen',
     },

client/src/locales/de/login.js

@@ -1,14 +1,14 @@
 export default {
   translation: {
     common: {
-      emailOrUsername: 'E-mail oder Benutzername',
+      emailOrUsername: 'E-Mail-Adresse oder Benutzername',
-      invalidEmailOrUsername: 'Ungültige E-mail oder Benutzername',
+      invalidEmailOrUsername: 'Ungültige E-Mail-Adresse oder Benutzername',
       invalidPassword: 'Ungültiges Passwort',
       logInToPlanka: 'Einloggen',
       noInternetConnection: 'Keine Internetverbindung',
       pageNotFound_title: 'Seite nicht gefunden',
       password: 'Passwort',
-      projectManagement: 'Projekt Management',
+      projectManagement: 'Projekt-Management',
       serverConnectionFailed: 'Serververbindung fehlgeschlagen',
       unknownError: 'Unbekannter Fehler, bitte später erneut versuchen',
     },

client/src/locales/en/index.js

@@ -5,7 +5,7 @@ import core from './core';
 
 export default {
   language: 'en',
-  country: 'us',
+  country: 'gb',
   name: 'English',
   embeddedLocale: merge(login, core),
 };

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "1.8.0",
+  "version": "1.8.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "1.8.0",
+      "version": "1.8.4",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.8.0",
+  "version": "1.8.4",
   "private": true,
   "homepage": "https://plankanban.github.io/planka",
   "repository": {

server/api/controllers/projects/index.js

@@ -7,7 +7,7 @@ module.exports = {
 
     let boardMemberships = await sails.helpers.users.getBoardMemberships(currentUser.id);
 
-    let membershipBoardIds = sails.helpers.utils.mapRecords(boardMemberships, 'boardId');
+    const membershipBoardIds = sails.helpers.utils.mapRecords(boardMemberships, 'boardId');
 
     let membershipBoards = await sails.helpers.boards.getMany({
       id: membershipBoardIds,
@@ -21,16 +21,6 @@ module.exports = {
 
     membershipProjectIds = sails.helpers.utils.mapRecords(membershipProjects);
 
-    membershipBoards = membershipBoards.filter((membershipBoard) =>
-      membershipProjectIds.includes(membershipBoard.projectId),
-    );
-
-    membershipBoardIds = sails.helpers.utils.mapRecords(membershipBoards);
-
-    boardMemberships = boardMemberships.filter((boardMembership) =>
-      membershipBoardIds.includes(boardMembership.boardId),
-    );
-
     const projectIds = [...managerProjectIds, ...membershipProjectIds];
     const projects = [...managerProjects, ...membershipProjects];
 
@@ -40,7 +30,17 @@ module.exports = {
     const users = await sails.helpers.users.getMany(userIds);
 
     const managerBoards = await sails.helpers.projects.getBoards(managerProjectIds);
+
+    membershipBoards = membershipBoards.filter((membershipBoard) =>
+      membershipProjectIds.includes(membershipBoard.projectId),
+    );
+
     const boards = [...managerBoards, ...membershipBoards];
+    const boardIds = sails.helpers.utils.mapRecords(boards);
+
+    boardMemberships = boardMemberships.filter((boardMembership) =>
+      boardIds.includes(boardMembership.boardId),
+    );
 
     return {
       items: projects,

server/api/helpers/board-memberships/delete-one.js

@@ -1,3 +1,5 @@
+const { v4: uuid } = require('uuid');
+
 module.exports = {
   inputs: {
     record: {
@@ -29,18 +31,9 @@ module.exports = {
     const boardMembership = await BoardMembership.destroyOne(inputs.record.id);
 
     if (boardMembership) {
-      sails.sockets.broadcast(
+      const notify = (room) => {
-        `user:${boardMembership.userId}`,
-        'boardMembershipDelete',
-        {
-          item: boardMembership,
-        },
-        inputs.request,
-      );
-
-      const notifyBoard = () => {
         sails.sockets.broadcast(
-          `board:${boardMembership.boardId}`,
+          room,
           'boardMembershipDelete',
           {
             item: boardMembership,
@@ -54,16 +47,32 @@ module.exports = {
         inputs.project.id,
       );
 
-      if (isProjectManager) {
+      if (!isProjectManager) {
-        notifyBoard();
-      } else {
-        // TODO: also remove if unsubscribed to user
         sails.sockets.removeRoomMembersFromRooms(
-          `user:${boardMembership.userId}`,
+          `@user:${boardMembership.userId}`,
           `board:${boardMembership.boardId}`,
-          notifyBoard,
+          () => {
+            notify(`board:${boardMembership.boardId}`);
+          },
         );
       }
+
+      notify(`user:${boardMembership.userId}`);
+
+      if (isProjectManager) {
+        const tempRoom = uuid();
+
+        sails.sockets.addRoomMembersToRooms(`board:${boardMembership.boardId}`, tempRoom, () => {
+          sails.sockets.removeRoomMembersFromRooms(
+            `user:${boardMembership.userId}`,
+            tempRoom,
+            () => {
+              notify(tempRoom);
+              sails.sockets.removeRoomMembersFromRooms(tempRoom, tempRoom);
+            },
+          );
+        });
+      }
     }
 
     return boardMembership;

server/api/helpers/boards/delete-one.js

@@ -17,16 +17,23 @@ module.exports = {
     const board = await Board.archiveOne(inputs.record.id);
 
     if (board) {
-      sails.sockets.leaveAll(`board:${board.id}`);
+      sails.sockets.removeRoomMembersFromRooms(`board:${board.id}`, `board:${board.id}`);
 
-      sails.sockets.broadcast(
+      const managerUserIds = await sails.helpers.projects.getManagerUserIds(board.projectId);
-        `project:${board.projectId}`,
+      const memberUserIds = await sails.helpers.boards.getMemberUserIds(board.id);
-        'boardDelete',
+
-        {
+      const userIds = _.union(managerUserIds, memberUserIds);
-          item: board,
+
-        },
+      userIds.forEach((userId) => {
-        inputs.request,
+        sails.sockets.broadcast(
-      );
+          `user:${userId}`,
+          'boardDelete',
+          {
+            item: board,
+          },
+          inputs.request,
+        );
+      });
     }
 
     return board;

server/api/helpers/boards/update-one.js

@@ -25,9 +25,10 @@ module.exports = {
   },
 
   async fn(inputs) {
-    const userIds = await sails.helpers.projects.getManagerAndBoardMemberUserIds(
+    const managerUserIds = await sails.helpers.projects.getManagerUserIds(inputs.record.projectId);
-      inputs.record.projectId,
+    const memberUserIds = await sails.helpers.boards.getMemberUserIds(inputs.record.id);
-    );
+
+    const userIds = _.union(managerUserIds, memberUserIds);
 
     if (!_.isUndefined(inputs.values.position)) {
       const boards = await sails.helpers.projects.getBoards(

server/api/helpers/projects/delete-one.js

@@ -26,7 +26,7 @@ module.exports = {
       const userIds = _.union(managerUserIds, memberUserIds);
 
       userIds.forEach((userId) => {
-        sails.sockets.removeRoomMembersFromRooms(`user:${userId}`, boardRooms);
+        sails.sockets.removeRoomMembersFromRooms(`@user:${userId}`, boardRooms);
 
         sails.sockets.broadcast(
           `user:${userId}`,

server/api/helpers/users/update-one.js

@@ -123,13 +123,13 @@ module.exports = {
         if (user.id === inputs.user.id && inputs.request && inputs.request.isSocket) {
           const tempRoom = uuid();
 
-          sails.sockets.addRoomMembersToRooms(`user:${user.id}`, tempRoom, () => {
+          sails.sockets.addRoomMembersToRooms(`@user:${user.id}`, tempRoom, () => {
             sails.sockets.leave(inputs.request, tempRoom, () => {
               sails.sockets.leaveAll(tempRoom);
             });
           });
         } else {
-          sails.sockets.leaveAll(`user:${user.id}`);
+          sails.sockets.leaveAll(`@user:${user.id}`);
         }
       }
 

server/api/hooks/current-user/index.js

@@ -59,6 +59,10 @@ module.exports = function defineCurrentUserHook(sails) {
                   accessToken,
                   currentUser,
                 });
+
+                if (req.isSocket) {
+                  sails.sockets.join(req, `@user:${currentUser.id}`);
+                }
               }
             }
 

server/config/views.js

@@ -24,7 +24,7 @@ module.exports.views = {
    *
    */
 
-  extension: 'html',
+  extension: 'ejs',
 
   /**
    *
@@ -36,4 +36,5 @@ module.exports.views = {
    */
 
   layout: false,
+  locals: { BASE_URL: process.env.BASE_URL },
 };