chore: Update version

Closes #153

.dockerignore

@@ -1,11 +1,29 @@
-*/node_modules
-*/.gitignore
 */README.md
+*/.gitignore
+*/node_modules
 
 **/.DS_Store
-**/.gitkeep
+
+server/**/.gitkeep
+
+server/.env
+server/.editorconfig
+server/.eslintignore
+server/.npmrc
+server/test
+server/logs
+server/.tmp
+
+server/views/*
 
 server/public/*
-server/views/*
+!server/public/user-avatars
-server/logs
+server/public/user-avatars/*
+!server/public/project-background-images
+server/public/project-background-images/*
+
+server/private/*
+!server/private/attachments
+server/private/attachments/*
+
 client/build

.github/workflows/build-and-push-docker-base-image.yml

@@ -9,7 +9,7 @@ on:
   workflow_dispatch:
 
 env:
-  ALPINE_VERSION: 3.15
+  ALPINE_VERSION: 3.16
 
 jobs:
   build-and-push-docker-base-image:

.gitignore

@@ -3,3 +3,10 @@ docker-compose.override.yml
 
 .idea
 .DS_Store
+
+# Prevent another lockfile than package-lock.json (npm) from being created
+# If some case you are using pnpm or yarn, don't forget to generate npm lockfile
+# before commiting your code by running:
+# `npm i --package-lock-only`
+pnpm-lock.yaml
+yarn.lock

Dockerfile

@@ -1,32 +1,40 @@
-FROM node:lts AS client-builder
+FROM ghcr.io/plankanban/planka:base-latest as server-dependencies
 
 WORKDIR /app
 
-COPY client/package.json client/package-lock.json ./
+COPY server/package.json server/package-lock.json .
 
 RUN npm install npm@latest --global \
-  && npm install
+  && npm clean-install --omit=dev
+
+FROM node:lts AS client
+
+WORKDIR /app
+
+COPY client/package.json client/package-lock.json .
+
+RUN npm install npm@latest --global \
+  && npm clean-install --omit=dev
 
 COPY client .
-RUN npm run build
+RUN DISABLE_ESLINT_PLUGIN=true npm run build
 
 FROM ghcr.io/plankanban/planka:base-latest
 
+RUN apk del vips-dependencies --purge
+
+USER node
 WORKDIR /app
 
-COPY server/.npmrc server/package.json server/package-lock.json ./
+COPY --chown=node:node docker-start.sh start.sh
+COPY --chown=node:node server .
 
-RUN npm install npm@latest --global \
+RUN mv .env.sample .env
-  && npm install --production \
-  && apk del vips-dependencies --purge
 
-COPY docker-start.sh start.sh
+COPY --from=server-dependencies --chown=node:node /app/node_modules node_modules
-COPY server .
 
-RUN cp .env.sample .env
+COPY --from=client --chown=node:node /app/build public
-
+COPY --from=client --chown=node:node /app/build/index.html views/index.ejs
-COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images

Dockerfile.base

@@ -1,7 +1,7 @@
 FROM node:lts-alpine
 
-ARG ALPINE_VERSION=3.15
+ARG ALPINE_VERSION=3.16
-ARG VIPS_VERSION=8.12.2
+ARG VIPS_VERSION=8.13.3
 
 RUN apk -U upgrade \
   && apk add \

README.md

@@ -21,9 +21,14 @@ A Trello-like kanban board built with React and Redux.
 
 ## Deploy
 
-### Docker Compose
+There are 2 types of installation:
+1. [Dockerized](#1-docker-compose)
+2. [Without Docker](#2-without-docker)
 
-[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://hub.docker.com/r/meltyshev/planka)
+
+### 1. Docker Compose
+
+[![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://github.com/plankanban/planka/pkgs/container/planka)
 
 - Make sure you have [Docker](https://docs.docker.com/install/) and [Docker Compose](https://docs.docker.com/compose/install/) installed and operational.
 - Create `docker-compose.yml` based on [the example](https://raw.githubusercontent.com/plankanban/planka/master/docker-compose.yml). This is the ONLY file you will need. You can create this file on your own machine by copy and pasting the content.
@@ -44,9 +49,146 @@ docker-compose up -d
 
 Demo user: demo@demo.demo demo
 
+### 2. Without Docker
+
+Installing without Docker is a bit more complicated, here's what you need to do:
+
+1. Clone this repository into a directory of your choice. (e.g. `/var/www/planka`)
+
+```bash
+mkdir -p /var/www/planka
+cd /var/www/planka
+git clone https://github.com/plankanban/planka.git .
+```
+
+2. Install dependencies for client and build it.
+
+```bash
+cd client
+npm install
+npm run build
+```
+
+**Note**: You can use `yarn` or `pnpm` instead of `npm`.
+
+3. Copy the `build` directory to the `server/public` directory.
+
+```bash
+cp -r build ../server/public
+cp build/index.html ../server/views/index.ejs
+```
+
+4. Install dependencies for server.
+
+```bash
+cd ../server
+npm install
+```
+
+5. Configure environment variables.
+
+```bash
+cp .env.sample .env
+
+# Edit .env file (You could use nano, vim, etc.)
+nano .env
+```
+
+**Note**: Before continuing, make sure you have your selected database created and running.
+
+6. Copy start script from the root directory to the `server` directory.
+
+```bash
+cp ../docker-start.sh start.sh
+```
+
+7. Start the server.
+
+```bash
+./start.sh
+```
+
+**Note**: You can use `pm2` or `systemd` to run the server in the background.
+
+## Additional information
+
+### Nginx configuration
+
+Here is an example of Nginx configuration for Planka, make sure to replace `<domain>` with your domain name, and make sure to configure the SSL.
+
+```nginx
+upstream planka {
+   server localhost:1337;
+   keepalive 32;
+}
+
+server {
+    listen 443 ssl http2;
+    listen [::]:443 ssl http2;
+    server_name <domain>;
+
+    access_log /var/log/nginx/planka-access.log;
+    error_log  /var/log/nginx/planka-error.log error;
+
+    # SSL Configuration - Replace the example <domain> with your domain
+    ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem;
+    ssl_certificate_key /etc/letsencrypt/live/<domain>/privkey.pem;
+    ssl_session_cache shared:SSL:10m;
+    ssl_protocols TLSv1.2 TLSv1.3;
+    ssl_ciphers "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384";
+    ssl_prefer_server_ciphers on;
+
+    client_max_body_size 120M;
+    add_header Access-Control-Allow-Origin *;
+    add_header Access-Control-Max-Age 3600;
+    add_header Access-Control-Expose-Headers Content-Length;
+    add_header Access-Control-Allow-Headers Range;
+
+    # Make sure to allow socket.io connections
+    location ~* \.io {
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        client_max_body_size 50M;
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_buffers 256 16k;
+        proxy_buffer_size 16k;
+        client_body_timeout 60;
+        send_timeout 300;
+        lingering_timeout 5;
+        proxy_connect_timeout 1d;
+        proxy_send_timeout 1d;
+        proxy_read_timeout 1d;
+        proxy_pass http://planka;
+    }
+
+    location / {
+        client_max_body_size 50M;
+        proxy_set_header Connection "";
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+        proxy_set_header X-Frame-Options SAMEORIGIN;
+        proxy_buffers 256 16k;
+        proxy_buffer_size 16k;
+        proxy_read_timeout 600s;
+        proxy_cache_revalidate on;
+        proxy_cache_min_uses 2;
+        proxy_cache_use_stale timeout;
+        proxy_cache_lock on;
+        proxy_http_version 1.1;
+        proxy_pass http://planka;
+    }
+}
+```
+
 ### Logging
 
-Planka currently allows you to expose the applciation's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
+Planka currently allows you to expose the application's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
 
 To expose the logfile director to the host machine, add the item `./logs/:/app/logs/` under `services.planka.volumes`.
 
@@ -117,6 +259,10 @@ Restart the fail2ban service. You can check the status of your Planka jail by ru
 fail2ban-client status planka
 ```
 
+### Import from Trello
+
+It's already available in Planka, or you can also use the great tool [trello2planka](https://github.com/christophenne/trello2planka) to do the import.
+
 ## Development
 
 Clone the repository and install dependencies:

client/.env

@@ -0,0 +1 @@
+REACT_APP_VERSION=1.10.1

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.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": [
@@ -34,15 +34,13 @@
       },
       "requireConfigFile": false
     },
-    "plugins": [
-      "prettier"
-    ],
     "extends": [
       "airbnb",
       "airbnb/hooks",
-      "plugin:prettier/recommended"
+      "../package.json"
     ],
     "rules": {
+      "no-unused-vars": "warn",
       "import/no-extraneous-dependencies": [
         "error",
         {
@@ -51,73 +49,66 @@
             "**/*.test.js"
           ]
         }
-      ],
-      "prettier/prettier": [
-        "error",
-        {
-          "printWidth": 100,
-          "singleQuote": true,
-          "trailingComma": "all"
-        }
       ]
     }
   },
   "dependencies": {
-    "classnames": "^2.3.1",
+    "@juggle/resize-observer": "^3.4.0",
-    "connected-react-router": "^6.9.3",
+    "classnames": "^2.3.2",
-    "date-fns": "^2.29.1",
+    "date-fns": "^2.29.3",
     "dequal": "^2.0.3",
-    "history": "^4.10.1",
+    "easymde": "^2.18.0",
-    "i18next": "^21.8.14",
+    "history": "^5.3.0",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next": "^22.0.6",
+    "i18next-browser-languagedetector": "^7.0.1",
     "initials": "^3.1.2",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
-    "node-sass": "^7.0.1",
+    "node-sass": "^8.0.0",
-    "photoswipe": "^5.3.0",
+    "photoswipe": "^5.3.3",
     "prop-types": "^15.8.1",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.0",
+    "react-app-rewired": "^2.2.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.2",
+    "react-dropzone": "^14.2.3",
-    "react-i18next": "^11.18.1",
+    "react-i18next": "^12.0.0",
     "react-input-mask": "^2.0.4",
     "react-markdown": "^8.0.3",
-    "react-photoswipe-gallery": "^2.2.1",
+    "react-photoswipe-gallery": "^2.2.2",
-    "react-redux": "^7.2.8",
+    "react-redux": "^8.0.5",
-    "react-router-dom": "^5.3.1",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
-    "react-textarea-autosize": "^8.3.4",
+    "react-simplemde-editor": "^5.2.0",
+    "react-textarea-autosize": "^8.4.0",
     "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
-    "redux-saga": "^1.1.3",
+    "redux-saga": "^1.2.1",
     "remark-breaks": "^3.0.2",
     "remark-gfm": "^3.0.1",
-    "reselect": "^4.1.6",
+    "reselect": "^4.1.7",
     "sails.io.js": "^1.2.1",
     "semantic-ui-react": "^2.1.3",
-    "socket.io-client": "^2.3.1",
+    "socket.io-client": "^2.5.0",
     "validator": "^13.7.0",
-    "whatwg-fetch": "^3.6.2"
+    "whatwg-fetch": "^3.6.2",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
     "babel-preset-airbnb": "^5.0.0",
-    "chai": "^4.3.6",
+    "chai": "^4.3.7",
-    "enzyme": "^3.11.0",
+    "eslint": "^8.28.0",
-    "eslint": "^8.20.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
-    "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "jest-enzyme": "^7.1.2",
+    "react-test-renderer": "^18.2.0"
-    "prettier": "2.7.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/actions/core.js

@@ -44,6 +44,11 @@ const logout = () => ({
   payload: {},
 });
 
+logout.invalidateAccessToken = () => ({
+  type: ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE,
+  payload: {},
+});
+
 export default {
   initializeCore,
   logout,

client/src/actions/users.js

@@ -103,10 +103,11 @@ const updateUserPassword = (id, data) => ({
   },
 });
 
-updateUserPassword.success = (user) => ({
+updateUserPassword.success = (user, accessToken) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE__SUCCESS,
   payload: {
     user,
+    accessToken,
   },
 });
 

client/src/api/access-tokens.js

@@ -1,9 +1,14 @@
 import http from './http';
+import socket from './socket';
 
 /* Actions */
 
 const createAccessToken = (data, headers) => http.post('/access-tokens', data, headers);
 
+const deleteCurrentAccessToken = (headers) =>
+  socket.delete('/access-tokens/me', undefined, headers);
+
 export default {
   createAccessToken,
+  deleteCurrentAccessToken,
 };

client/src/api/boards.js

@@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';
 
@@ -7,15 +8,20 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
   socket.post(`/projects/${projectId}/boards`, data, headers);
 
-const getBoard = (id, headers) =>
+const createBoardWithImport = (projectId, data, requestId, headers) =>
-  socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
+  http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
-    ...body,
+
-    included: {
+const getBoard = (id, subscribe, headers) =>
-      ...body.included,
+  socket
-      cards: body.included.cards.map(transformCard),
+    .get(`/boards/${id}${subscribe ? '?subscribe=true' : ''}`, undefined, headers)
-      attachments: body.included.attachments.map(transformAttachment),
+    .then((body) => ({
-    },
+      ...body,
-  }));
+      included: {
+        ...body.included,
+        cards: body.included.cards.map(transformCard),
+        attachments: body.included.attachments.map(transformAttachment),
+      },
+    }));
 
 const updateBoard = (id, data, headers) => socket.patch(`/boards/${id}`, data, headers);
 
@@ -23,6 +29,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
 
 export default {
   createBoard,
+  createBoardWithImport,
   getBoard,
   updateBoard,
   deleteBoard,

client/src/api/cards.js

@@ -35,18 +35,8 @@ export const transformCardData = (data) => ({
 
 /* Actions */
 
-const getCards = (boardId, data, headers) =>
+const createCard = (listId, data, headers) =>
-  socket.get(`/board/${boardId}/cards`, data, headers).then((body) => ({
+  socket.post(`/lists/${listId}/cards`, transformCardData(data), headers).then((body) => ({
-    ...body,
-    items: body.items.map(transformCard),
-    included: {
-      ...body.included,
-      attachments: body.included.attachments.map(transformAttachment),
-    },
-  }));
-
-const createCard = (boardId, data, headers) =>
-  socket.post(`/boards/${boardId}/cards`, transformCardData(data), headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
@@ -55,6 +45,10 @@ const getCard = (id, headers) =>
   socket.get(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
+    included: {
+      ...body.included,
+      attachments: body.included.attachments.map(transformAttachment),
+    },
   }));
 
 const updateCard = (id, data, headers) =>
@@ -83,7 +77,6 @@ const makeHandleCardUpdate = makeHandleCardCreate;
 const makeHandleCardDelete = makeHandleCardCreate;
 
 export default {
-  getCards,
   createCard,
   getCard,
   updateCard,

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/api/users.js

@@ -9,7 +9,8 @@ const createUser = (data, headers) => socket.post('/users', data, headers);
 
 const getUser = (id, headers) => socket.get(`/users/${id}`, undefined, headers);
 
-const getCurrentUser = (headers) => socket.get('/users/me', undefined, headers);
+const getCurrentUser = (subscribe, headers) =>
+  socket.get(`/users/me${subscribe ? '?subscribe=true' : ''}`, undefined, headers);
 
 const updateUser = (id, data, headers) => socket.patch(`/users/${id}`, data, headers);
 

client/src/components/Board/Board.jsx

@@ -10,11 +10,11 @@ import CardModalContainer from '../../containers/CardModalContainer';
 import ListAdd from './ListAdd';
 import { ReactComponent as PlusMathIcon } from '../../assets/images/plus-math-icon.svg';
 
-import styles from './BoardKanban.module.scss';
+import styles from './Board.module.scss';
 
 const parseDndId = (dndId) => dndId.split(':')[1];
 
-const BoardKanban = React.memo(
+const Board = React.memo(
   ({ listIds, isCardModalOpened, canEdit, onListCreate, onListMove, onCardMove }) => {
     const [t] = useTranslation();
     const [isListAddOpened, setIsListAddOpened] = useState(false);
@@ -166,7 +166,7 @@ const BoardKanban = React.memo(
   },
 );
 
-BoardKanban.propTypes = {
+Board.propTypes = {
   listIds: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isCardModalOpened: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
@@ -175,4 +175,4 @@ BoardKanban.propTypes = {
   onCardMove: PropTypes.func.isRequired,
 };
 
-export default BoardKanban;
+export default Board;

client/src/components/Board/ListAdd.jsx

@@ -72,7 +72,7 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
         <Button
           positive
           content={t('action.addList')}
-          className={styles.submitButton}
+          className={styles.button}
           onMouseOver={handleControlMouseOver}
           onMouseOut={handleControlMouseOut}
         />

client/src/components/Board/ListAdd.module.scss

@@ -1,4 +1,9 @@
 :global(#app) {
+  .button {
+    min-height: 30px;
+    vertical-align: top;
+  }
+
   .controls {
     margin-top: 4px;
   }
@@ -18,11 +23,6 @@
     }
   }
 
-  .submitButton {
-    min-height: 30px;
-    vertical-align: top;
-  }
-
   .wrapper {
     background: #e2e4e6;
     border-radius: 3px;

client/src/components/Board/index.js

@@ -0,0 +1,3 @@
+import Board from './Board';
+
+export default Board;

client/src/components/BoardActions/BoardActions.jsx

@@ -14,6 +14,7 @@ const BoardActions = React.memo(
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit,
     canEditMemberships,
     onMembershipCreate,
     onMembershipUpdate,
@@ -24,35 +25,40 @@ const BoardActions = React.memo(
     onLabelFromFilterRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     return (
-      <div className={styles.actions}>
+      <div className={styles.wrapper}>
-        <div className={styles.action}>
+        <div className={styles.actions}>
-          <Memberships
+          <div className={styles.action}>
-            items={memberships}
+            <Memberships
-            allUsers={allUsers}
+              items={memberships}
-            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
+              allUsers={allUsers}
-            canEdit={canEditMemberships}
+              permissionsSelectStep={BoardMembershipPermissionsSelectStep}
-            onCreate={onMembershipCreate}
+              canEdit={canEditMemberships}
-            onUpdate={onMembershipUpdate}
+              onCreate={onMembershipCreate}
-            onDelete={onMembershipDelete}
+              onUpdate={onMembershipUpdate}
-          />
+              onDelete={onMembershipDelete}
-        </div>
+            />
-        <div className={styles.action}>
+          </div>
-          <Filters
+          <div className={styles.action}>
-            users={filterUsers}
+            <Filters
-            labels={filterLabels}
+              users={filterUsers}
-            allBoardMemberships={memberships}
+              labels={filterLabels}
-            allLabels={labels}
+              allBoardMemberships={memberships}
-            onUserAdd={onUserToFilterAdd}
+              allLabels={labels}
-            onUserRemove={onUserFromFilterRemove}
+              canEdit={canEdit}
-            onLabelAdd={onLabelToFilterAdd}
+              onUserAdd={onUserToFilterAdd}
-            onLabelRemove={onLabelFromFilterRemove}
+              onUserRemove={onUserFromFilterRemove}
-            onLabelCreate={onLabelCreate}
+              onLabelAdd={onLabelToFilterAdd}
-            onLabelUpdate={onLabelUpdate}
+              onLabelRemove={onLabelFromFilterRemove}
-            onLabelDelete={onLabelDelete}
+              onLabelCreate={onLabelCreate}
-          />
+              onLabelUpdate={onLabelUpdate}
+              onLabelMove={onLabelMove}
+              onLabelDelete={onLabelDelete}
+            />
+          </div>
         </div>
       </div>
     );
@@ -67,6 +73,7 @@ BoardActions.propTypes = {
   filterLabels: PropTypes.array.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
   onMembershipUpdate: PropTypes.func.isRequired,
@@ -77,6 +84,7 @@ BoardActions.propTypes = {
   onLabelFromFilterRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 

client/src/components/BoardActions/BoardActions.module.scss

@@ -1,5 +1,6 @@
 :global(#app) {
   .action {
+    flex: 0 0 auto;
     margin-right: 20px;
   }
 
@@ -8,4 +9,15 @@
     display: flex;
     margin: 20px 20px;
   }
+
+  .wrapper {
+    overflow-x: auto;
+    overflow-y: hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 }

client/src/components/BoardActions/Filters.jsx

@@ -15,12 +15,14 @@ const Filters = React.memo(
     labels,
     allBoardMemberships,
     allLabels,
+    canEdit,
     onUserAdd,
     onUserRemove,
     onLabelAdd,
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     const [t] = useTranslation();
@@ -74,10 +76,12 @@ const Filters = React.memo(
             title={t('common.filterByLabels', {
               context: 'title',
             })}
+            canEdit={canEdit}
             onSelect={onLabelAdd}
             onDeselect={onLabelRemove}
             onCreate={onLabelCreate}
             onUpdate={onLabelUpdate}
+            onMove={onLabelMove}
             onDelete={onLabelDelete}
           >
             <button type="button" className={styles.filterButton}>
@@ -108,12 +112,14 @@ Filters.propTypes = {
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  canEdit: PropTypes.bool.isRequired,
   onUserAdd: PropTypes.func.isRequired,
   onUserRemove: PropTypes.func.isRequired,
   onLabelAdd: PropTypes.func.isRequired,
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 

client/src/components/BoardKanban/index.js

@@ -1,3 +0,0 @@
-import BoardKanban from './BoardKanban';
-
-export default BoardKanban;

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -1,3 +1,4 @@
+import { dequal } from 'dequal';
 import omit from 'lodash/omit';
 import React, { useCallback, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -10,7 +11,7 @@ import { BoardMembershipRoles } from '../../constants/Enums';
 import styles from './BoardMembershipPermissionsSelectStep.module.scss';
 
 const BoardMembershipPermissionsSelectStep = React.memo(
-  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+  ({ defaultData, title, buttonContent, onSelect, onBack, onClose }) => {
     const [t] = useTranslation();
 
     const [data, setData] = useState(() => ({
@@ -19,11 +20,11 @@ const BoardMembershipPermissionsSelectStep = React.memo(
       ...defaultData,
     }));
 
-    const handleRoleSelectClick = useCallback((role) => {
+    const handleSelectRoleClick = useCallback((role) => {
       setData((prevData) => ({
         ...prevData,
         role,
-        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+        canComment: role === BoardMembershipRoles.VIEWER ? !!prevData.canComment : null,
       }));
     }, []);
 
@@ -35,8 +36,12 @@ const BoardMembershipPermissionsSelectStep = React.memo(
     }, []);
 
     const handleSubmit = useCallback(() => {
-      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
+      if (!dequal(data, defaultData)) {
-    }, [onSelect, data]);
+        onSelect(data.role === BoardMembershipRoles.VIEWER ? data : omit(data, 'canComment'));
+      }
+
+      onClose();
+    }, [defaultData, onSelect, onClose, data]);
 
     return (
       <>
@@ -50,7 +55,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,13 +64,13 @@ 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>
               </Menu.Item>
             </Menu>
-            {data.role !== BoardMembershipRoles.EDITOR && (
+            {data.role === BoardMembershipRoles.VIEWER && (
               <Segment basic className={styles.settings}>
                 <Radio
                   toggle
@@ -90,6 +95,7 @@ BoardMembershipPermissionsSelectStep.propTypes = {
   buttonContent: PropTypes.string,
   onSelect: PropTypes.func.isRequired,
   onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 BoardMembershipPermissionsSelectStep.defaultProps = {

client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -43,7 +43,9 @@ const BoardMembershipsStep = React.memo(
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     return (

client/src/components/BoardMembershipsStep/BoardMembershipsStep.module.scss

@@ -1,7 +1,7 @@
 :global(#app) {
   .menu {
     margin: 8px auto 0;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/BoardWrapper.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Loader } from 'semantic-ui-react';
-
-import { BoardTypes } from '../constants/Enums';
-import BoardKanbanContainer from '../containers/BoardKanbanContainer';
-
-const BoardWrapper = React.memo(({ type, isFetching }) => {
-  if (isFetching) {
-    return <Loader active />;
-  }
-
-  if (type === BoardTypes.KANBAN) {
-    return <BoardKanbanContainer />;
-  }
-
-  return null;
-});
-
-BoardWrapper.propTypes = {
-  type: PropTypes.string.isRequired,
-  isFetching: PropTypes.bool.isRequired,
-};
-
-export default BoardWrapper;

client/src/components/Boards/AddPopup.jsx

@@ -1,70 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Button, Form } from 'semantic-ui-react';
-import { withPopup } from '../../lib/popup';
-import { Input, Popup } from '../../lib/custom-ui';
-
-import { useForm } from '../../hooks';
-
-import styles from './AddPopup.module.scss';
-
-const AddStep = React.memo(({ onCreate, onClose }) => {
-  const [t] = useTranslation();
-
-  const [data, handleFieldChange] = useForm({
-    name: '',
-  });
-
-  const nameField = useRef(null);
-
-  const handleSubmit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      type: 'kanban',
-      name: data.name.trim(),
-    };
-
-    if (!cleanData.name) {
-      nameField.current.select();
-      return;
-    }
-
-    onCreate(cleanData);
-    onClose();
-  }, [onCreate, onClose, data]);
-
-  useEffect(() => {
-    nameField.current.focus();
-  }, []);
-
-  return (
-    <>
-      <Popup.Header>
-        {t('common.createBoard', {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <Form onSubmit={handleSubmit}>
-          <Input
-            fluid
-            ref={nameField}
-            name="name"
-            value={data.name}
-            className={styles.field}
-            onChange={handleFieldChange}
-          />
-          <Button positive content={t('action.createBoard')} />
-        </Form>
-      </Popup.Content>
-    </>
-  );
-});
-
-AddStep.propTypes = {
-  onCreate: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default withPopup(AddStep);

client/src/components/Boards/AddPopup.module.scss

@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}

client/src/components/Boards/AddPopup/AddPopup.jsx

@@ -0,0 +1,117 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Icon } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';
+import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../../lib/custom-ui';
+
+import { useForm, useSteps } from '../../../hooks';
+import ImportStep from './ImportStep';
+
+import styles from './AddPopup.module.scss';
+
+const StepTypes = {
+  IMPORT: 'IMPORT',
+};
+
+const AddStep = React.memo(({ onCreate, onClose }) => {
+  const [t] = useTranslation();
+
+  const [data, handleFieldChange, setData] = useForm({
+    name: '',
+    import: null,
+  });
+
+  const [step, openStep, handleBack] = useSteps();
+  const [focusNameFieldState, focusNameField] = useToggle();
+
+  const nameField = useRef(null);
+
+  const handleImportSelect = useCallback(
+    (nextImport) => {
+      setData((prevData) => ({
+        ...prevData,
+        import: nextImport,
+      }));
+    },
+    [setData],
+  );
+
+  const handleImportBack = useCallback(() => {
+    handleBack();
+    focusNameField();
+  }, [handleBack, focusNameField]);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      name: data.name.trim(),
+    };
+
+    if (!cleanData.name) {
+      nameField.current.select();
+      return;
+    }
+
+    onCreate(cleanData);
+    onClose();
+  }, [onClose, data, onCreate]);
+
+  const handleImportClick = useCallback(() => {
+    openStep(StepTypes.IMPORT);
+  }, [openStep]);
+
+  useEffect(() => {
+    nameField.current.focus({
+      preventScroll: true,
+    });
+  }, []);
+
+  useDidUpdate(() => {
+    nameField.current.focus();
+  }, [focusNameFieldState]);
+
+  if (step && step.type === StepTypes.IMPORT) {
+    return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
+  }
+
+  return (
+    <>
+      <Popup.Header>
+        {t('common.createBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <Form onSubmit={handleSubmit}>
+          <Input
+            fluid
+            ref={nameField}
+            name="name"
+            value={data.name}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <div className={styles.controls}>
+            <Button positive content={t('action.createBoard')} className={styles.createButton} />
+            <Button type="button" className={styles.importButton} onClick={handleImportClick}>
+              <Icon
+                name={data.import ? data.import.type : 'arrow down'}
+                className={styles.importButtonIcon}
+              />
+              {data.import ? data.import.file.name : t('action.import')}
+            </Button>
+          </div>
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+AddStep.propTypes = {
+  onCreate: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(AddStep);

client/src/components/Boards/AddPopup/AddPopup.module.scss

@@ -0,0 +1,42 @@
+:global(#app) {
+  .controls {
+    display: flex;
+    max-width: 280px;
+
+    @media only screen and (max-width: 767px) {
+      max-width: 226px;
+    }
+  }
+
+  .createButton {
+    white-space: nowrap;
+  }
+
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .importButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-left: auto;
+    margin-right: 0;
+    overflow: hidden;
+    text-align: left;
+    text-decoration: underline;
+    text-overflow: ellipsis;
+    transition: none;
+    white-space: nowrap;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
+  .importButtonIcon {
+    text-decoration: none;
+  }
+}

client/src/components/Boards/AddPopup/ImportStep.jsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'semantic-ui-react';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
+
+import styles from './ImportStep.module.scss';
+
+const ImportStep = React.memo(({ onSelect, onBack }) => {
+  const [t] = useTranslation();
+
+  const handleFileSelect = useCallback(
+    (type, file) => {
+      onSelect({
+        type,
+        file,
+      });
+
+      onBack();
+    },
+    [onSelect, onBack],
+  );
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.importBoard', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <FilePicker onSelect={(file) => handleFileSelect('trello', file)} accept=".json">
+          <Button
+            fluid
+            type="button"
+            icon="trello"
+            content={t('common.fromTrello')}
+            className={styles.button}
+          />
+        </FilePicker>
+      </Popup.Content>
+    </>
+  );
+});
+
+ImportStep.propTypes = {
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+export default ImportStep;

client/src/components/Boards/AddPopup/ImportStep.module.scss

@@ -0,0 +1,17 @@
+:global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+}

client/src/components/Boards/AddPopup/index.js

@@ -0,0 +1,3 @@
+import AddPopup from './AddPopup';
+
+export default AddPopup;

client/src/components/Boards/Boards.module.scss

@@ -29,7 +29,7 @@
   }
 
   .link {
-    color: #fff;
+    color: rgba(255, 255, 255, 0.72);
     cursor: pointer;
     display: block;
     line-height: 20px;
@@ -60,6 +60,11 @@
     &:hover {
       background: rgba(0, 0, 0, 0.32);
     }
+
+    .link {
+      color: #fff;
+      font-weight: bold;
+    }
   }
 
   .tabWrapper {

client/src/components/Card/ActionsPopup.jsx

@@ -45,6 +45,7 @@ const ActionsStep = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
     onClose,
   }) => {
@@ -119,6 +120,7 @@ const ActionsStep = React.memo(
               onDeselect={onLabelRemove}
               onCreate={onLabelCreate}
               onUpdate={onLabelUpdate}
+              onMove={onLabelMove}
               onDelete={onLabelDelete}
               onBack={handleBack}
             />
@@ -241,6 +243,7 @@ ActionsStep.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };

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';
@@ -47,6 +48,7 @@ const Card = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
   }) => {
     const nameEdit = useRef(null);
@@ -57,6 +59,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 +121,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 +167,11 @@ const Card = React.memo(
                     {canEdit && (
                       <ActionsPopup
                         card={{
-                          id,
-                          name,
                           dueDate,
                           timer,
                           boardId,
                           listId,
                           projectId,
-                          isPersisted,
                         }}
                         projectsToLists={allProjectsToLists}
                         boardMemberships={allBoardMemberships}
@@ -174,6 +190,7 @@ const Card = React.memo(
                         onLabelRemove={onLabelRemove}
                         onLabelCreate={onLabelCreate}
                         onLabelUpdate={onLabelUpdate}
+                        onLabelMove={onLabelMove}
                         onLabelDelete={onLabelDelete}
                       >
                         <Button className={classNames(styles.actionsButton, styles.target)}>
@@ -226,6 +243,7 @@ Card.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
 };
 

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/Card/Tasks.jsx

@@ -22,11 +22,9 @@ const Tasks = React.memo(({ items }) => {
 
   return (
     <>
-      {/* eslint-disable jsx-a11y/click-events-have-key-events,
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-                         jsx-a11y/no-static-element-interactions */}
+                                   jsx-a11y/no-static-element-interactions */}
       <div className={styles.button} onClick={handleToggleClick}>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                          jsx-a11y/no-static-element-interactions */}
         <span className={styles.progressWrapper}>
           <Progress
             autoSuccess

client/src/components/CardModal/Activities/Item.jsx

@@ -14,7 +14,6 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
   const [t] = useTranslation();
 
   let contentNode;
-
   switch (type) {
     case ActivityTypes.CREATE_CARD:
       contentNode = (

client/src/components/CardModal/AttachmentAddZone/AttachmentAddZone.module.scss

@@ -10,7 +10,7 @@
     position: absolute;
     text-align: center;
     width: 100%;
-    z-index: 2000;
+    z-index: 2001;
   }
 
   .wrapper {

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -120,6 +120,7 @@ const Attachments = React.memo(
           withCaption
           withDownloadButton
           options={{
+            wheelToZoom: true,
             showHideAnimationType: 'none',
             closeTitle: '',
             zoomTitle: '',

client/src/components/CardModal/Attachments/Item.jsx

@@ -61,11 +61,9 @@ const Item = React.forwardRef(
     const extension = filename.slice((Math.max(0, filename.lastIndexOf('.')) || Infinity) + 1);
 
     return (
-      /* eslint-disable jsx-a11y/click-events-have-key-events,
+      /* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-                        jsx-a11y/no-static-element-interactions */
+                                  jsx-a11y/no-static-element-interactions */
       <div ref={ref} className={styles.wrapper} onClick={handleClick}>
-        {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                          jsx-a11y/no-static-element-interactions */}
         <div
           className={styles.thumbnail}
           style={{

client/src/components/CardModal/Attachments/Item.module.scss

@@ -29,7 +29,6 @@
     padding: 6px 32px 6px 128px;
     margin: 0;
     min-height: 80px;
-    z-index: 0;
   }
 
   .extension {
@@ -95,7 +94,6 @@
     text-decoration: none;
     top: 50%;
     width: 112px;
-    z-index: 1;
   }
 
   .thumbnailLabel {

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';
@@ -61,6 +62,7 @@ const CardModal = React.memo(
     onLabelRemove,
     onLabelCreate,
     onLabelUpdate,
+    onLabelMove,
     onLabelDelete,
     onTaskCreate,
     onTaskUpdate,
@@ -80,6 +82,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({
@@ -228,6 +236,7 @@ const CardModal = React.memo(
                             onDeselect={onLabelRemove}
                             onCreate={onLabelCreate}
                             onUpdate={onLabelUpdate}
+                            onMove={onLabelMove}
                             onDelete={onLabelDelete}
                           >
                             <Label name={label.name} color={label.color} />
@@ -245,6 +254,7 @@ const CardModal = React.memo(
                         onDeselect={onLabelRemove}
                         onCreate={onLabelCreate}
                         onUpdate={onLabelUpdate}
+                        onMove={onLabelMove}
                         onDelete={onLabelDelete}
                       >
                         <button
@@ -291,6 +301,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>
@@ -399,6 +422,7 @@ const CardModal = React.memo(
                   onDeselect={onLabelRemove}
                   onCreate={onLabelCreate}
                   onUpdate={onLabelUpdate}
+                  onMove={onLabelMove}
                   onDelete={onLabelDelete}
                 >
                   <Button fluid className={styles.actionButton}>
@@ -526,6 +550,7 @@ CardModal.propTypes = {
   onLabelRemove: PropTypes.func.isRequired,
   onLabelCreate: PropTypes.func.isRequired,
   onLabelUpdate: PropTypes.func.isRequired,
+  onLabelMove: PropTypes.func.isRequired,
   onLabelDelete: PropTypes.func.isRequired,
   onTaskCreate: PropTypes.func.isRequired,
   onTaskUpdate: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.module.scss

@@ -9,6 +9,7 @@
     text-align: left;
     text-overflow: ellipsis;
     transition: background 85ms ease;
+    white-space: nowrap;
 
     &:hover {
       background: #dfe3e6;
@@ -118,7 +119,6 @@
     background: transparent;
     border: none;
     color: #17394d;
-    font-size: 15px;
     margin-bottom: 8px;
     outline: none;
     overflow: hidden;

client/src/components/CardModal/DescriptionEdit.jsx

@@ -1,19 +1,15 @@
-import React, { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { useCallback, useImperativeHandle, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import TextareaAutosize from 'react-textarea-autosize';
+import { Button, Form } from 'semantic-ui-react';
-import { Button, Form, TextArea } from 'semantic-ui-react';
+import SimpleMDE from 'react-simplemde-editor';
-
-import { useClosableForm, useField } from '../../hooks';
 
 import styles from './DescriptionEdit.module.scss';
 
 const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) => {
   const [t] = useTranslation();
   const [isOpened, setIsOpened] = useState(false);
-  const [value, handleFieldChange, setValue] = useField(null);
+  const [value, setValue] = useState(null);
-
-  const field = useRef(null);
 
   const open = useCallback(() => {
     setIsOpened(true);
@@ -55,20 +51,37 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
     [close],
   );
 
-  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(
-    close,
-    isOpened,
-  );
-
   const handleSubmit = useCallback(() => {
     close();
   }, [close]);
 
-  useEffect(() => {
+  const mdEditorOptions = useMemo(
-    if (isOpened) {
+    () => ({
-      field.current.ref.current.focus();
+      autofocus: true,
-    }
+      spellChecker: false,
-  }, [isOpened]);
+      status: false,
+      toolbar: [
+        'bold',
+        'italic',
+        'heading',
+        'strikethrough',
+        '|',
+        'quote',
+        'unordered-list',
+        'ordered-list',
+        'table',
+        '|',
+        'link',
+        'image',
+        '|',
+        'undo',
+        'redo',
+        '|',
+        'guide',
+      ],
+    }),
+    [],
+  );
 
   if (!isOpened) {
     return React.cloneElement(children, {
@@ -78,26 +91,17 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },
 
   return (
     <Form onSubmit={handleSubmit}>
-      <TextArea
+      <SimpleMDE
-        ref={field}
-        as={TextareaAutosize}
         value={value}
+        options={mdEditorOptions}
         placeholder={t('common.enterDescription')}
-        minRows={3}
-        spellCheck={false}
         className={styles.field}
         onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
+        onChange={setValue}
-        onBlur={handleFieldBlur}
       />
       <div className={styles.controls}>
         {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-        <Button
+        <Button positive content={t('action.save')} />
-          positive
-          content={t('action.save')}
-          onMouseOver={handleControlMouseOver}
-          onMouseOut={handleControlMouseOut}
-        />
       </div>
     </Form>
   );

client/src/components/CardModal/DescriptionEdit.module.scss

@@ -6,15 +6,12 @@
 
   .field {
     background: #fff;
-    border: 1px solid rgba(9, 30, 66, 0.13);
-    border-radius: 3px;
     color: #17394d;
     display: block;
     font-size: 14px;
     line-height: 1.5;
     margin-bottom: 4px;
     overflow: hidden;
-    padding: 8px 12px;
     resize: none;
 
     &:focus {

client/src/components/CardModal/Tasks/Item.jsx

@@ -55,14 +55,12 @@ const Item = React.memo(
               </span>
               <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
                 <div className={classNames(canEdit && styles.contentHoverable)}>
-                  {/* eslint-disable jsx-a11y/click-events-have-key-events,
+                  {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-                           jsx-a11y/no-static-element-interactions */}
+                                               jsx-a11y/no-static-element-interactions */}
                   <span
                     className={classNames(styles.text, canEdit && styles.textEditable)}
                     onClick={handleClick}
                   >
-                    {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                            jsx-a11y/no-static-element-interactions */}
                     <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
                       {name}
                     </span>

client/src/components/CardModal/Tasks/Item.module.scss

@@ -48,6 +48,7 @@
   }
 
   .taskCompleted {
+    color: #aaa;
     text-decoration: line-through;
   }
 

client/src/components/Core.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import ModalTypes from '../constants/ModalTypes';
-import FixedContainer from '../containers/FixedContainer';
-import StaticContainer from '../containers/StaticContainer';
-import UsersModalContainer from '../containers/UsersModalContainer';
-import UserSettingsModalContainer from '../containers/UserSettingsModalContainer';
-import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
-import Background from './Background';
-
-function Core({ currentModal, currentProject }) {
-  return (
-    <>
-      {currentProject && currentProject.background && (
-        <Background
-          type={currentProject.background.type}
-          name={currentProject.background.name}
-          imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
-        />
-      )}
-      <FixedContainer />
-      <StaticContainer />
-      {currentModal === ModalTypes.USERS && <UsersModalContainer />}
-      {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-      {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
-    </>
-  );
-}
-
-Core.propTypes = {
-  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
-  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
-};
-
-Core.defaultProps = {
-  currentModal: undefined,
-  currentProject: undefined,
-};
-
-export default Core;

client/src/components/Core/Core.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation, Trans } from 'react-i18next';
+import { Loader } from 'semantic-ui-react';
+
+import ModalTypes from '../../constants/ModalTypes';
+import FixedContainer from '../../containers/FixedContainer';
+import StaticContainer from '../../containers/StaticContainer';
+import UsersModalContainer from '../../containers/UsersModalContainer';
+import UserSettingsModalContainer from '../../containers/UserSettingsModalContainer';
+import ProjectAddModalContainer from '../../containers/ProjectAddModalContainer';
+import Background from '../Background';
+
+import styles from './Core.module.scss';
+
+const Core = React.memo(
+  ({ isInitializing, isSocketDisconnected, currentModal, currentProject }) => {
+    const [t] = useTranslation();
+
+    return (
+      <>
+        {isInitializing ? (
+          <Loader active size="massive" />
+        ) : (
+          <>
+            {currentProject && currentProject.background && (
+              <Background
+                type={currentProject.background.type}
+                name={currentProject.background.name}
+                imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
+              />
+            )}
+            <FixedContainer />
+            <StaticContainer />
+            {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+            {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+            {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
+          </>
+        )}
+        {isSocketDisconnected && (
+          <div className={styles.message}>
+            <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
+            <div className={styles.messageContent}>
+              <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
+                All changes will be automatically saved
+                <br />
+                after connection restored
+              </Trans>
+            </div>
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+Core.propTypes = {
+  isInitializing: PropTypes.bool.isRequired,
+  isSocketDisconnected: PropTypes.bool.isRequired,
+  currentModal: PropTypes.oneOf(Object.values(ModalTypes)),
+  currentProject: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+};
+
+Core.defaultProps = {
+  currentModal: undefined,
+  currentProject: undefined,
+};
+
+export default Core;

client/src/components/Core/index.js

@@ -0,0 +1,3 @@
+import Core from './Core';
+
+export default Core;

client/src/components/CoreWrapper/CoreWrapper.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation, Trans } from 'react-i18next';
-import { Loader } from 'semantic-ui-react';
-
-import CoreContainer from '../../containers/CoreContainer';
-
-import styles from './CoreWrapper.module.scss';
-
-const CoreWrapper = React.memo(({ isInitializing, isSocketDisconnected }) => {
-  const [t] = useTranslation();
-
-  return (
-    <>
-      {isInitializing ? <Loader active size="massive" /> : <CoreContainer />}
-      {isSocketDisconnected && (
-        <div className={styles.message}>
-          <div className={styles.messageHeader}>{t('common.noConnectionToServer')}</div>
-          <div className={styles.messageContent}>
-            <Trans i18nKey="common.allChangesWillBeAutomaticallySavedAfterConnectionRestored">
-              All changes will be automatically saved
-              <br />
-              after connection restored
-            </Trans>
-          </div>
-        </div>
-      )}
-    </>
-  );
-});
-
-CoreWrapper.propTypes = {
-  isInitializing: PropTypes.bool.isRequired,
-  isSocketDisconnected: PropTypes.bool.isRequired,
-};
-
-export default CoreWrapper;

client/src/components/CoreWrapper/index.js

@@ -1,3 +0,0 @@
-import CoreWrapper from './CoreWrapper';
-
-export default CoreWrapper;

client/src/components/Fixed/Fixed.module.scss

@@ -2,5 +2,6 @@
   .wrapper {
     position: fixed;
     width: 100%;
+    z-index: 1;
   }
 }

client/src/components/Header/Header.jsx

@@ -15,6 +15,7 @@ const Header = React.memo(
     project,
     user,
     notifications,
+    isLogouting,
     canEditProject,
     canEditUsers,
     onProjectSettingsClick,
@@ -75,7 +76,11 @@ const Header = React.memo(
                 )}
               </Menu.Item>
             </NotificationsPopup>
-            <UserPopup onSettingsClick={onUserSettingsClick} onLogout={onLogout}>
+            <UserPopup
+              isLogouting={isLogouting}
+              onSettingsClick={onUserSettingsClick}
+              onLogout={onLogout}
+            >
               <Menu.Item className={classNames(styles.item, styles.itemHoverable)}>
                 {user.name}
               </Menu.Item>
@@ -93,6 +98,7 @@ Header.propTypes = {
   user: PropTypes.object.isRequired,
   notifications: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  isLogouting: PropTypes.bool.isRequired,
   canEditProject: PropTypes.bool.isRequired,
   canEditUsers: PropTypes.bool.isRequired,
   onProjectSettingsClick: PropTypes.func.isRequired,

client/src/components/Header/Header.module.scss

@@ -7,7 +7,8 @@
       background: none;
     }
 
-    &:active, &:hover {
+    &:active,
+    &:hover {
       background: transparent;
       color: rgba(255, 255, 255, 0.9);
     }
@@ -42,7 +43,6 @@
     height: 50px;
     margin: 0;
     width: 100%;
-    z-index: 1;
   }
 
   .notification {

client/src/components/Header/NotificationsPopup.jsx

@@ -1,3 +1,4 @@
+import truncate from 'lodash/truncate';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation, Trans } from 'react-i18next';
@@ -47,23 +48,26 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
               {activity.data.toList.name}
             </Trans>
           );
-        case ActivityTypes.COMMENT_CARD:
+        case ActivityTypes.COMMENT_CARD: {
+          const commentText = truncate(activity.data.text);
+
           return (
             <Trans
               i18nKey="common.userLeftNewCommentToCard"
               values={{
                 user: activity.user.name,
-                comment: activity.data.text,
+                comment: commentText,
                 card: card.name,
               }}
             >
               {activity.user.name}
-              {` left a new comment «${activity.data.text}» to `}
+              {` left a new comment «${commentText}» to `}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
             </Trans>
           );
+        }
         default:
       }
 
@@ -80,9 +84,10 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
         })}
       </Popup.Header>
       <Popup.Content>
-        {items.length > 0
+        {items.length > 0 ? (
-          ? items.map((item) => (
+          <div className={styles.wrapper}>
-              <div key={item.id} className={styles.wrapper}>
+            {items.map((item) => (
+              <div key={item.id} className={styles.item}>
                 {item.card && item.activity ? (
                   <>
                     <User
@@ -90,20 +95,23 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
                       avatarUrl={item.activity.user.avatarUrl}
                       size="large"
                     />
-                    <span className={styles.content}>{renderItemContent(item)}</span>
+                    <span className={styles.itemContent}>{renderItemContent(item)}</span>
                   </>
                 ) : (
-                  <div className={styles.deletedContent}>{t('common.cardOrActionAreDeleted')}</div>
+                  <div className={styles.itemDeleted}>{t('common.cardOrActionAreDeleted')}</div>
                 )}
                 <Button
                   type="button"
-                  icon="close"
+                  icon="trash alternate outline"
-                  className={styles.button}
+                  className={styles.itemButton}
                   onClick={() => handleDelete(item.id)}
                 />
               </div>
-            ))
+            ))}
-          : t('common.noUnreadNotifications')}
+          </div>
+        ) : (
+          t('common.noUnreadNotifications')
+        )}
       </Popup.Content>
     </>
   );

client/src/components/Header/NotificationsPopup.module.scss

@@ -1,5 +1,13 @@
 :global(#app) {
-  .button {
+  .item {
+    padding: 12px;
+
+    &:hover {
+      background: #f0f0f0;
+    }
+  }
+
+  .itemButton {
     background: transparent;
     box-shadow: none;
     float: right;
@@ -7,7 +15,7 @@
     line-height: 20px;
     margin: 0;
     min-height: auto;
-    padding: 5px 0;
+    padding: 0;
     transition: background 0.3s ease;
     width: 20px;
 
@@ -16,7 +24,7 @@
     }
   }
 
-  .content {
+  .itemContent {
     display: inline-block;
     font-size: 12px;
     min-height: 36px;
@@ -27,7 +35,7 @@
     word-break: break-word;
   }
 
-  .deletedContent {
+  .itemDeleted {
     display: inline-block;
     line-height: 20px;
     min-height: 20px;
@@ -38,10 +46,21 @@
 
   .wrapper {
     margin: 0 -12px;
-    padding: 12px;
+    max-height: 60vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
 
-    &:hover {
+    &::-webkit-scrollbar {
-      background: #f0f0f0;
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
     }
   }
 }

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/Item.jsx

@@ -1,52 +1,74 @@
 import upperFirst from 'lodash/upperFirst';
 import camelCase from 'lodash/camelCase';
 import React, { useCallback } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Draggable } from 'react-beautiful-dnd';
 import { Button } from 'semantic-ui-react';
 
 import styles from './Item.module.scss';
 import globalStyles from '../../styles.module.scss';
 
-const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDeselect, onEdit }) => {
+const Item = React.memo(
-  const handleToggleClick = useCallback(() => {
+  ({ id, index, name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
-    if (isActive) {
+    const handleToggleClick = useCallback(() => {
-      onDeselect();
+      if (isPersisted) {
-    } else {
+        if (isActive) {
-      onSelect();
+          onDeselect();
-    }
+        } else {
-  }, [isActive, onSelect, onDeselect]);
+          onSelect();
+        }
+      }
+    }, [isPersisted, isActive, onSelect, onDeselect]);
 
-  return (
+    return (
-    <div className={styles.wrapper}>
+      <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
-      <Button
+        {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
-        fluid
+          const contentNode = (
-        content={name}
+            // eslint-disable-next-line react/jsx-props-no-spreading
-        active={isActive}
+            <div {...draggableProps} ref={innerRef} className={styles.wrapper}>
-        disabled={!isPersisted}
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
-        className={classNames(
+                                           jsx-a11y/no-static-element-interactions */}
-          styles.labelButton,
+              <span
-          isActive && styles.labelButtonActive,
+                {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
-          globalStyles[`background${upperFirst(camelCase(color))}`],
+                className={classNames(
-        )}
+                  styles.name,
-        onClick={handleToggleClick}
+                  isActive && styles.nameActive,
-      />
+                  globalStyles[`background${upperFirst(camelCase(color))}`],
-      <Button
+                )}
-        icon="pencil"
+                onClick={handleToggleClick}
-        size="small"
+              >
-        disabled={!isPersisted}
+                {name}
-        className={styles.editButton}
+              </span>
-        onClick={onEdit}
+              {canEdit && (
-      />
+                <Button
-    </div>
+                  icon="pencil"
-  );
+                  size="small"
-});
+                  floated="right"
+                  disabled={!isPersisted}
+                  className={styles.editButton}
+                  onClick={onEdit}
+                />
+              )}
+            </div>
+          );
+
+          return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+        }}
+      </Draggable>
+    );
+  },
+);
 
 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   name: PropTypes.string,
   color: PropTypes.string.isRequired,
   isPersisted: PropTypes.bool.isRequired,
   isActive: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onEdit: PropTypes.func.isRequired,

client/src/components/LabelsStep/Item.module.scss

@@ -4,7 +4,6 @@
     box-shadow: none;
     flex: 0 0 auto;
     font-weight: normal;
-    margin: 0;
     padding: 8px 10px;
     text-decoration: underline;
 
@@ -13,15 +12,15 @@
     }
   }
 
-  .labelButton {
+  .name {
+    border-radius: 3px;
     color: #fff;
+    cursor: pointer;
     flex: 1 1 auto;
-    font-size: 14px;
     font-weight: bold;
     overflow: hidden;
     padding: 8px 32px 8px 10px;
     position: relative;
-    text-align: left;
     text-overflow: ellipsis;
     text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
 
@@ -30,7 +29,7 @@
     }
   }
 
-  .labelButtonActive:before {
+  .nameActive:before {
     bottom: 1px;
     content: "Г";
     font-size: 18px;

client/src/components/LabelsStep/LabelsStep.jsx

@@ -2,10 +2,12 @@ import pick from 'lodash/pick';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Button } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useField, useSteps } from '../../hooks';
+import DroppableTypes from '../../constants/DroppableTypes';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -18,7 +20,19 @@ const StepTypes = {
 };
 
 const LabelsStep = React.memo(
-  ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
+  ({
+    items,
+    currentIds,
+    title,
+    canEdit,
+    onSelect,
+    onDeselect,
+    onCreate,
+    onUpdate,
+    onMove,
+    onDelete,
+    onBack,
+  }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
     const [search, handleSearchChange] = useField('');
@@ -63,6 +77,17 @@ const LabelsStep = React.memo(
       [onDeselect],
     );
 
+    const handleDragEnd = useCallback(
+      ({ draggableId, source, destination }) => {
+        if (!destination || source.index === destination.index) {
+          return;
+        }
+
+        onMove(draggableId, destination.index);
+      },
+      [onMove],
+    );
+
     const handleUpdate = useCallback(
       (id, data) => {
         onUpdate(id, data);
@@ -78,13 +103,23 @@ const LabelsStep = React.memo(
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     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);
 
@@ -124,27 +159,54 @@ const LabelsStep = React.memo(
             onChange={handleSearchChange}
           />
           {filteredItems.length > 0 && (
-            <div className={styles.items}>
+            <DragDropContext onDragEnd={handleDragEnd}>
-              {filteredItems.map((item) => (
+              <Droppable droppableId="labels" type={DroppableTypes.LABEL}>
-                <Item
+                {({ innerRef, droppableProps, placeholder }) => (
-                  key={item.id}
+                  <div
-                  name={item.name}
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
-                  color={item.color}
+                    ref={innerRef}
-                  isPersisted={item.isPersisted}
+                    className={styles.items}
-                  isActive={currentIds.includes(item.id)}
+                  >
-                  onSelect={() => handleSelect(item.id)}
+                    {filteredItems.map((item, index) => (
-                  onDeselect={() => handleDeselect(item.id)}
+                      <Item
-                  onEdit={() => handleEdit(item.id)}
+                        key={item.id}
-                />
+                        id={item.id}
-              ))}
+                        index={index}
-            </div>
+                        name={item.name}
+                        color={item.color}
+                        isPersisted={item.isPersisted}
+                        isActive={currentIds.includes(item.id)}
+                        canEdit={canEdit}
+                        onSelect={() => handleSelect(item.id)}
+                        onDeselect={() => handleDeselect(item.id)}
+                        onEdit={() => handleEdit(item.id)}
+                      />
+                    ))}
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+              <Droppable droppableId="labels:hack" type={DroppableTypes.LABEL}>
+                {({ innerRef, droppableProps, placeholder }) => (
+                  <div
+                    {...droppableProps} // eslint-disable-line react/jsx-props-no-spreading
+                    ref={innerRef}
+                    className={styles.droppableHack}
+                  >
+                    {placeholder}
+                  </div>
+                )}
+              </Droppable>
+            </DragDropContext>
+          )}
+          {canEdit && (
+            <Button
+              fluid
+              content={t('action.createNewLabel')}
+              className={styles.addButton}
+              onClick={handleAddClick}
+            />
           )}
-          <Button
-            fluid
-            content={t('action.createNewLabel')}
-            className={styles.addButton}
-            onClick={handleAddClick}
-          />
         </Popup.Content>
       </>
     );
@@ -157,16 +219,19 @@ LabelsStep.propTypes = {
   currentIds: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   title: PropTypes.string,
+  canEdit: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,
   onDeselect: PropTypes.func.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onBack: PropTypes.func,
 };
 
 LabelsStep.defaultProps = {
   title: 'common.labels',
+  canEdit: true,
   onBack: undefined,
 };
 

client/src/components/LabelsStep/LabelsStep.module.scss

@@ -15,9 +15,14 @@
     }
   }
 
+  .droppableHack {
+    display: none;
+    position: fixed;
+  }
+
   .items {
     margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/List/CardAdd.jsx

@@ -21,36 +21,46 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
 
   const nameField = useRef(null);
 
-  const submit = useCallback(() => {
+  const submit = useCallback(
-    const cleanData = {
+    (autoOpen) => {
-      ...data,
+      const cleanData = {
-      name: data.name.trim(),
+        ...data,
-    };
+        name: data.name.trim(),
+      };
 
-    if (!cleanData.name) {
+      if (!cleanData.name) {
-      nameField.current.ref.current.select();
+        nameField.current.ref.current.select();
-      return;
+        return;
-    }
+      }
 
-    onCreate(cleanData);
+      onCreate(cleanData, autoOpen);
+      setData(DEFAULT_DATA);
 
-    setData(DEFAULT_DATA);
+      if (autoOpen) {
-    focusNameField();
+        onClose();
-  }, [onCreate, data, setData, focusNameField]);
+      } else {
+        focusNameField();
+      }
+    },
+    [onCreate, onClose, data, setData, focusNameField],
+  );
 
   const handleFieldKeyDown = useCallback(
     (event) => {
       switch (event.key) {
-        case 'Enter':
+        case 'Enter': {
           event.preventDefault();
 
-          submit();
+          const autoOpen = event.ctrlKey;
+          submit(autoOpen);
 
           break;
-        case 'Escape':
+        }
+        case 'Escape': {
           onClose();
 
           break;
+        }
         default:
       }
     },

client/src/components/List/List.jsx

@@ -95,18 +95,14 @@ const List = React.memo(
             ref={innerRef}
             className={styles.innerWrapper}
           >
-            {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                               jsx-a11y/no-static-element-interactions,
-                               react/jsx-props-no-spreading */}
             <div className={styles.outerWrapper}>
+              {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,
+                                           jsx-a11y/no-static-element-interactions */}
               <div
-                {...dragHandleProps}
+                {...dragHandleProps} // eslint-disable-line react/jsx-props-no-spreading
                 className={classNames(styles.header, canEdit && styles.headerEditable)}
                 onClick={handleHeaderClick}
               >
-                {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                                jsx-a11y/no-static-element-interactions,
-                                react/jsx-props-no-spreading */}
                 <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
                   <div className={styles.headerName}>{name}</div>
                 </NameEdit>

client/src/components/Memberships/ActionsPopup.jsx

@@ -28,8 +28,8 @@ const ActionsStep = React.memo(
     deleteConfirmationTitle,
     deleteConfirmationContent,
     deleteConfirmationButtonContent,
-    canLeave,
     canEdit,
+    canLeave,
     onUpdate,
     onDelete,
     onClose,
@@ -50,10 +50,8 @@ const ActionsStep = React.memo(
         if (onUpdate) {
           onUpdate(data);
         }
-
-        onClose();
       },
-      [onUpdate, onClose],
+      [onUpdate],
     );
 
     if (step) {
@@ -68,6 +66,7 @@ const ActionsStep = React.memo(
               buttonContent="action.save"
               onSelect={handleRoleSelect}
               onBack={handleBack}
+              onClose={onClose}
             />
           );
         }
@@ -146,8 +145,8 @@ ActionsStep.propTypes = {
   deleteConfirmationTitle: PropTypes.string,
   deleteConfirmationContent: PropTypes.string,
   deleteConfirmationButtonContent: PropTypes.string,
-  canLeave: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
+  canLeave: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,

client/src/components/Memberships/AddPopup/AddPopup.jsx

@@ -56,14 +56,14 @@ const AddStep = React.memo(
           userId: step.params.userId,
           ...data,
         });
-
-        onClose();
       },
-      [onCreate, onClose, step],
+      [onCreate, step],
     );
 
     useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     if (step) {
@@ -79,6 +79,7 @@ const AddStep = React.memo(
                 buttonContent="action.addMember"
                 onSelect={handleRoleSelect}
                 onBack={handleBack}
+                onClose={onClose}
               />
             );
           }

client/src/components/Memberships/AddPopup/AddPopup.module.scss

@@ -1,7 +1,7 @@
 :global(#app) {
   .users {
     margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: thin;

client/src/components/Memberships/Memberships.jsx

@@ -44,8 +44,8 @@ const Memberships = React.memo(
                 deleteConfirmationTitle={deleteConfirmationTitle}
                 deleteConfirmationContent={deleteConfirmationContent}
                 deleteConfirmationButtonContent={deleteConfirmationButtonContent}
-                canLeave={items.length > 1 || canLeaveIfLast}
                 canEdit={canEdit}
+                canLeave={items.length > 1 || canLeaveIfLast}
                 onUpdate={(data) => onUpdate(item.id, data)}
                 onDelete={() => onDelete(item.id)}
               >

client/src/components/Root.jsx

@@ -1,16 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
-import { ConnectedRouter } from 'connected-react-router';
+import { ReduxRouter } from '../lib/redux-router';
 
 import Paths from '../constants/Paths';
 import LoginContainer from '../containers/LoginContainer';
-import CoreWrapperContainer from '../containers/CoreWrapperContainer';
+import CoreContainer from '../containers/CoreContainer';
 import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
 import 'photoswipe/dist/photoswipe.css';
+import 'easymde/dist/easymde.min.css';
 import '../lib/custom-ui/styles.css';
 
 import '../styles.module.scss';
@@ -18,16 +19,16 @@ import '../styles.module.scss';
 function Root({ store, history }) {
   return (
     <Provider store={store}>
-      <ConnectedRouter history={history}>
+      <ReduxRouter history={history}>
-        <Switch>
+        <Routes>
-          <Route exact path={Paths.LOGIN} component={LoginContainer} />
+          <Route path={Paths.LOGIN} element={<LoginContainer />} />
-          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
+          <Route path={Paths.ROOT} element={<CoreContainer />} />
-          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
+          <Route path={Paths.PROJECTS} element={<CoreContainer />} />
-          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
+          <Route path={Paths.BOARDS} element={<CoreContainer />} />
-          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
+          <Route path={Paths.CARDS} element={<CoreContainer />} />
-          <Route path="*" component={NotFound} />
+          <Route path="*" element={<NotFound />} />
-        </Switch>
+        </Routes>
-      </ConnectedRouter>
+      </ReduxRouter>
     </Provider>
   );
 }

client/src/components/Static/Static.jsx

@@ -2,19 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
-import { Icon } from 'semantic-ui-react';
+import { Icon, Loader } from 'semantic-ui-react';
 
 import ProjectsContainer from '../../containers/ProjectsContainer';
-import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
+import BoardContainer from '../../containers/BoardContainer';
 
 import styles from './Static.module.scss';
 
-function Static({ cardId, boardId, projectId }) {
+function Static({ projectId, cardId, board }) {
   const [t] = useTranslation();
 
   if (projectId === undefined) {
     return (
-      <div className={styles.root}>
+      <div className={styles.wrapper}>
         <ProjectsContainer />
       </div>
     );
@@ -22,7 +22,7 @@ function Static({ cardId, boardId, projectId }) {
 
   if (cardId === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.cardNotFound', {
@@ -34,9 +34,9 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
-  if (boardId === null) {
+  if (board === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.boardNotFound', {
@@ -50,7 +50,7 @@ function Static({ cardId, boardId, projectId }) {
 
   if (projectId === null) {
     return (
-      <div className={classNames(styles.root, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex)}>
         <div className={styles.message}>
           <h1>
             {t('common.projectNotFound', {
@@ -62,9 +62,9 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
-  if (boardId === undefined) {
+  if (board === undefined) {
     return (
-      <div className={classNames(styles.board, styles.flex)}>
+      <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperProject)}>
         <div className={styles.message}>
           <Icon inverted name="hand point up outline" size="huge" className={styles.messageIcon} />
           <h1 className={styles.messageTitle}>
@@ -80,23 +80,31 @@ function Static({ cardId, boardId, projectId }) {
     );
   }
 
+  if (board.isFetching) {
+    return (
+      <div className={classNames(styles.wrapper, styles.wrapperLoader, styles.wrapperProject)}>
+        <Loader active size="big" />
+      </div>
+    );
+  }
+
   return (
-    <div className={classNames(styles.board, styles.flex)}>
+    <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperBoard)}>
-      <BoardWrapperContainer />
+      <BoardContainer />
     </div>
   );
 }
 
 Static.propTypes = {
-  cardId: PropTypes.string,
-  boardId: PropTypes.string,
   projectId: PropTypes.string,
+  cardId: PropTypes.string,
+  board: PropTypes.object, // eslint-disable-line react/forbid-prop-types
 };
 
 Static.defaultProps = {
-  cardId: undefined,
-  boardId: undefined,
   projectId: undefined,
+  cardId: undefined,
+  board: undefined,
 };
 
 export default Static;

client/src/components/Static/Static.module.scss

@@ -1,13 +1,4 @@
 :global(#app) {
-  .board {
-    margin-top: 174px;
-  }
-
-  .flex {
-    display: flex;
-    height: 100%;
-  }
-
   .message {
     align-content: space-between;
     align-items: center;
@@ -34,7 +25,24 @@
     text-align: center;
   }
 
-  .root {
+  .wrapper {
+    height: 100%;
     margin-top: 50px;
   }
+
+  .wrapperBoard {
+    margin-top: 174px;
+  }
+
+  .wrapperFlex {
+    display: flex;
+  }
+
+  .wrapperLoader {
+    position: relative;
+  }
+
+  .wrapperProject {
+    margin-top: 98px;
+  }
 }

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/UserAddPopup/UserAddPopup.jsx

@@ -8,7 +8,7 @@ import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
-import { isUsername } from '../../utils/validator';
+import { isPassword, isUsername } from '../../utils/validator';
 
 import styles from './UserAddPopup.module.scss';
 
@@ -69,7 +69,7 @@ const UserAddStep = React.memo(
         return;
       }
 
-      if (!cleanData.password) {
+      if (!cleanData.password || !isPassword(cleanData.password)) {
         passwordField.current.focus();
         return;
       }
@@ -88,7 +88,9 @@ const UserAddStep = React.memo(
     }, [onCreate, data]);
 
     useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {
@@ -143,6 +145,7 @@ const UserAddStep = React.memo(
             />
             <div className={styles.text}>{t('common.password')}</div>
             <Input.Password
+              withStrengthBar
               fluid
               ref={passwordField}
               name="password"

client/src/components/UserEmailEditStep/UserEmailEditStep.jsx

@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -78,16 +77,22 @@ const UserEmailEditStep = React.memo(
         return;
       }
 
-      if (usePasswordConfirmation && !cleanData.currentPassword) {
+      if (usePasswordConfirmation) {
-        currentPasswordField.current.focus();
+        if (!cleanData.currentPassword) {
-        return;
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
       }
 
-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
     }, [email, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      emailField.current.focus();
+      emailField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -71,7 +71,9 @@ const UserPasswordEditStep = React.memo(
     }, [usePasswordConfirmation, onUpdate, data]);
 
     useEffect(() => {
-      passwordField.current.focus();
+      passwordField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {
@@ -113,18 +115,15 @@ const UserPasswordEditStep = React.memo(
           )}
           <Form onSubmit={handleSubmit}>
             <div className={styles.text}>{t('common.newPassword')}</div>
-            <div className={styles.field}>
+            <Input.Password
-              <Input.Password
+              withStrengthBar
-                fluid
+              fluid
-                ref={passwordField}
+              ref={passwordField}
-                name="password"
+              name="password"
-                value={data.password}
+              value={data.password}
-                onChange={handleFieldChange}
+              className={styles.field}
-              />
+              onChange={handleFieldChange}
-              <div className={styles.note}>
+            />
-                {t('common.mustBeAtLeast6CharactersLongAndContainAtLeastOneLetterAndNumber')}
-              </div>
-            </div>
             {usePasswordConfirmation && (
               <>
                 <div className={styles.text}>{t('common.currentPassword')}</div>

client/src/components/UserPasswordEditStep/UserPasswordEditStep.module.scss

@@ -3,12 +3,6 @@
     margin-bottom: 8px;
   }
 
-  .note {
-    font-size: 11px;
-    margin-top: 4px;
-    opacity: 0.5;
-  }
-
   .text {
     color: #444444;
     font-size: 12px;

client/src/components/UserPopup/UserPopup.jsx

@@ -1,13 +1,13 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Menu } from 'semantic-ui-react';
+import { Button, Menu } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import styles from './UserPopup.module.scss';
 
-const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
+const UserStep = React.memo(({ isLogouting, onSettingsClick, onLogout, onClose }) => {
   const [t] = useTranslation();
 
   const handleSettingsClick = useCallback(() => {
@@ -15,6 +15,17 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
     onClose();
   }, [onSettingsClick, onClose]);
 
+  let logoutMenuItemProps;
+  if (isLogouting) {
+    logoutMenuItemProps = {
+      as: Button,
+      fluid: true,
+      basic: true,
+      loading: true,
+      disabled: true,
+    };
+  }
+
   return (
     <>
       <Popup.Header>
@@ -29,7 +40,11 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
-          <Menu.Item className={styles.menuItem} onClick={onLogout}>
+          <Menu.Item
+            {...logoutMenuItemProps} // eslint-disable-line react/jsx-props-no-spreading
+            className={styles.menuItem}
+            onClick={onLogout}
+          >
             {t('action.logOut', {
               context: 'title',
             })}
@@ -41,6 +56,7 @@ const UserStep = React.memo(({ onSettingsClick, onLogout, onClose }) => {
 });
 
 UserStep.propTypes = {
+  isLogouting: PropTypes.bool.isRequired,
   onSettingsClick: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,

client/src/components/UserSettingsModal/AboutPane.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Image, Tab } from 'semantic-ui-react';
+
+import Config from '../../constants/Config';
+
+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" />
+      <div className={styles.version}>
+        {t('common.version')} {Config.VERSION}
+      </div>
+    </Tab.Pane>
+  );
+});
+
+export default AboutPane;

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

@@ -0,0 +1,11 @@
+:global(#app) {
+  .version {
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .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,12 @@ const UserSettingsModal = React.memo(
           <PreferencesPane subscribeToOwnCards={subscribeToOwnCards} onUpdate={onUpdate} />
         ),
       },
+      {
+        menuItem: t('common.aboutPlanka', {
+          context: 'title',
+        }),
+        render: () => <AboutPane />,
+      },
     ];
 
     return (

client/src/components/UserUsernameEditStep/UserUsernameEditStep.jsx

@@ -1,4 +1,3 @@
-import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -78,16 +77,22 @@ const UserUsernameEditStep = React.memo(
         return;
       }
 
-      if (usePasswordConfirmation && !cleanData.currentPassword) {
+      if (usePasswordConfirmation) {
-        currentPasswordField.current.focus();
+        if (!cleanData.currentPassword) {
-        return;
+          currentPasswordField.current.focus();
+          return;
+        }
+      } else {
+        delete cleanData.currentPassword;
       }
 
-      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+      onUpdate(cleanData);
     }, [username, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
-      usernameField.current.focus();
+      usernameField.current.focus({
+        preventScroll: true,
+      });
     }, []);
 
     useEffect(() => {

client/src/constants/ActionTypes.js

@@ -21,6 +21,7 @@ export default {
 
   CORE_INITIALIZE: 'CORE_INITIALIZE',
   LOGOUT: 'LOGOUT',
+  LOGOUT__ACCESS_TOKEN_INVALIDATE: 'LOGOUT__ACCESS_TOKEN_INVALIDATE',
 
   /* Modals */
 

client/src/constants/Config.js

@@ -1,6 +1,13 @@
+const VERSION = process.env.REACT_APP_VERSION;
+
+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 +17,10 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;
 
 export default {
+  VERSION,
+  BASE_PATH,
   SERVER_BASE_URL,
+  SERVER_HOST_NAME,
   ACCESS_TOKEN_KEY,
   ACCESS_TOKEN_VERSION_KEY,
   ACCESS_TOKEN_VERSION,

client/src/constants/DroppableTypes.js

@@ -1,10 +1,12 @@
 const BOARD = 'BOARD';
+const LABEL = 'LABEL';
 const LIST = 'LIST';
 const CARD = 'CARD';
 const TASK = 'TASK';
 
 export default {
   BOARD,
+  LABEL,
   LIST,
   CARD,
   TASK,

client/src/constants/EntryActionTypes.js

@@ -99,6 +99,7 @@ export default {
   LABEL_CREATE_HANDLE: `${PREFIX}/LABEL_CREATE_HANDLE`,
   LABEL_UPDATE: `${PREFIX}/LABEL_UPDATE`,
   LABEL_UPDATE_HANDLE: `${PREFIX}/LABEL_UPDATE_HANDLE`,
+  LABEL_MOVE: `${PREFIX}/LABEL_MOVE`,
   LABEL_DELETE: `${PREFIX}/LABEL_DELETE`,
   LABEL_DELETE_HANDLE: `${PREFIX}/LABEL_DELETE_HANDLE`,
   LABEL_TO_CARD_ADD: `${PREFIX}/LABEL_TO_CARD_ADD`,

client/src/constants/Enums.js

@@ -3,10 +3,6 @@ export const ProjectBackgroundTypes = {
   IMAGE: 'image',
 };
 
-export const BoardTypes = {
-  KANBAN: 'kanban',
-};
-
 export const BoardMembershipRoles = {
   EDITOR: 'editor',
   VIEWER: 'viewer',

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/containers/BoardActionsContainer.js

@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
+import { BoardMembershipRoles } from '../constants/Enums';
 import BoardActions from '../components/BoardActions';
 
 const mapStateToProps = (state) => {
@@ -12,6 +13,10 @@ const mapStateToProps = (state) => {
   const labels = selectors.selectLabelsForCurrentBoard(state);
   const filterUsers = selectors.selectFilterUsersForCurrentBoard(state);
   const filterLabels = selectors.selectFilterLabelsForCurrentBoard(state);
+  const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
+
+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
 
   return {
     memberships,
@@ -19,6 +24,7 @@ const mapStateToProps = (state) => {
     filterUsers,
     filterLabels,
     allUsers,
+    canEdit: isCurrentUserEditor,
     canEditMemberships: isCurrentUserManager,
   };
 };
@@ -35,6 +41,7 @@ const mapDispatchToProps = (dispatch) =>
       onLabelFromFilterRemove: entryActions.removeLabelFromFilterInCurrentBoard,
       onLabelCreate: entryActions.createLabelInCurrentBoard,
       onLabelUpdate: entryActions.updateLabel,
+      onLabelMove: entryActions.moveLabel,
       onLabelDelete: entryActions.deleteLabel,
     },
     dispatch,

client/src/containers/BoardContainer.js

@@ -4,17 +4,20 @@ import { connect } from 'react-redux';
 import selectors from '../selectors';
 import entryActions from '../entry-actions';
 import { BoardMembershipRoles } from '../constants/Enums';
-import BoardKanban from '../components/BoardKanban';
+import Board from '../components/Board';
 
 const mapStateToProps = (state) => {
   const { cardId } = selectors.selectPath(state);
   const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
   const listIds = selectors.selectListIdsForCurrentBoard(state);
 
+  const isCurrentUserEditor =
+    !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
   return {
     listIds,
     isCardModalOpened: !!cardId,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+    canEdit: isCurrentUserEditor,
   };
 };
 
@@ -28,4 +31,4 @@ const mapDispatchToProps = (dispatch) =>
     dispatch,
   );
 
-export default connect(mapStateToProps, mapDispatchToProps)(BoardKanban);
+export default connect(mapStateToProps, mapDispatchToProps)(Board);

client/src/containers/BoardWrapperContainer.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import BoardWrapper from '../components/BoardWrapper';
-
-const mapStateToProps = (state) => {
-  const { type, isFetching } = selectors.selectCurrentBoard(state);
-
-  return {
-    type,
-    isFetching,
-  };
-};
-
-export default connect(mapStateToProps)(BoardWrapper);