chore: Update version

fix: Show completed tasks greyed out
fix: Prevent scroll when focusing
2022-12-26 22:56:13 +01:00 · 2022-12-26 22:55:04 +01:00 · 2022-12-26 22:51:17 +01:00 · 2022-12-26 22:43:21 +01:00 · 2022-12-26 21:10:50 +01:00 · 2022-12-24 16:24:50 +01:00
337 changed files with 19331 additions and 18110 deletions
@@ -1,10 +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/public/user-avatars/*
+!server/public/project-background-images
+server/public/project-background-images/*
+
+server/private/*
+!server/private/attachments
+server/private/attachments/*
+
 client/build
@@ -9,7 +9,7 @@ on:
  workflow_dispatch:

 env:
-  ALPINE_VERSION: 3.15
+  ALPINE_VERSION: 3.16

 jobs:
  build-and-push-docker-base-image:
@@ -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
@@ -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 \
-  && npm install --production \
-  && apk del vips-dependencies --purge
+RUN mv .env.sample .env

-COPY docker-start.sh start.sh
-COPY server .
+COPY --from=server-dependencies --chown=node:node /app/node_modules node_modules

-RUN cp .env.sample .env
-
-COPY --from=client-builder /app/build public
-COPY --from=client-builder /app/build/index.html views
+COPY --from=client --chown=node:node /app/build public
+COPY --from=client --chown=node:node /app/build/index.html views/index.ejs

 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images
@@ -1,7 +1,7 @@
 FROM node:lts-alpine

-ARG ALPINE_VERSION=3.15
-ARG VIPS_VERSION=8.12.2
+ARG ALPINE_VERSION=3.16
+ARG VIPS_VERSION=8.13.3

 RUN apk -U upgrade \
  && apk add \
@@ -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,6 +49,220 @@ 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 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`.
+
+Note that the directory to the left of the semicolon is regarding the host machine while the directory to the right of the semicolon is regarding the Docker container.
+
+For example, in the above step, `./logs/:/app/logs/` will create the folder `logs` in the same directory where the `docker-compose.yml` file lives.
+
+### Rotating Logs
+
+Logrotate is designed to ease administration of systems that generate large numbers of log files. It allows automatic rotation, compression, removal, and mailing of log files. Each log file may be handled daily, weekly, monthly, or when it grows too large.
+
+#### Setup logrotate for Planka logs
+
+Create a file in `/etc/logrotate.d` named `planka` with the following contents:
+
+```
+/path/to/planka/logs/planka.log {
+  daily
+  missingok
+  rotate 14
+  compress
+  delaycompress
+  notifempty
+  create 640 root adm
+  sharedscripts
+}
+```
+
+Ensure to replace logfile directory with your installation’s `/logs/planka.log` location.
+
+Restart the logrotate service.
+
+### Fail2ban
+
+Fail2ban is a service that uses iptables to automatically drop connections for a pre-defined amount of time from IPs that continuously failed to authenticate to the configured services.
+
+#### Setup a filter and a jail for Planka
+
+A filter defines regex rules to identify when users fail to authenticate on Planka's user interface.
+
+Create a file in `/etc/fail2ban/filter.d` named `planka.conf` with the following contents:
+
+```conf
+[Definition]
+failregex = ^(.*) Invalid (email or username:|password!) (\"(.*)\"!)? ?\(IP: <ADDR>\)$
+ignoreregex =
+```
+
+The jail file defines how to handle the failed authentication attempts found by the Planka filter.
+
+Create a file in `/etc/fail2ban/jail.d` named `planka.local` with the following contents:
+
+```conf
+[planka]
+enabled = true
+port = http,https
+filter = planka
+logpath = /path/to/planka/logs/planka.log
+maxretry = 5
+bantime = 900
+```
+
+Ensure to replace `logpath`'s value with your installation’s `/logs/planka.log` location. If you are using ports other than 80 and 443 for your Web server you should replace those too. The bantime and findtime are defined in seconds.
+
+Restart the fail2ban service. You can check the status of your Planka jail by running:
+
+```bash
+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:
@@ -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;
+};
@@ -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",
-    "start": "react-scripts start",
-    "test": "react-scripts test"
+    "lint": "eslint --ext js,jsx src config-overrides.js",
+    "start": "react-app-rewired start",
+    "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",
-    "connected-react-router": "^6.9.3",
-    "date-fns": "^2.29.1",
+    "@juggle/resize-observer": "^3.4.0",
+    "classnames": "^2.3.2",
+    "date-fns": "^2.29.3",
    "dequal": "^2.0.3",
-    "history": "^4.10.1",
-    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.4",
+    "easymde": "^2.18.0",
+    "history": "^5.3.0",
+    "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",
-    "photoswipe": "^5.3.0",
+    "node-sass": "^8.0.0",
+    "photoswipe": "^5.3.3",
    "prop-types": "^15.8.1",
-    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.1.0",
+    "react": "^18.2.0",
+    "react-app-rewired": "^2.2.1",
+    "react-beautiful-dnd": "^13.1.1",
    "react-datepicker": "^4.8.0",
-    "react-dom": "^17.0.2",
-    "react-dropzone": "^14.2.2",
-    "react-i18next": "^11.18.1",
+    "react-dom": "^18.2.0",
+    "react-dropzone": "^14.2.3",
+    "react-i18next": "^12.0.0",
    "react-input-mask": "^2.0.4",
    "react-markdown": "^8.0.3",
-    "react-photoswipe-gallery": "^2.2.1",
-    "react-redux": "^7.2.8",
-    "react-router-dom": "^5.3.1",
+    "react-photoswipe-gallery": "^2.2.2",
+    "react-redux": "^8.0.5",
+    "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",
-    "enzyme": "^3.11.0",
-    "eslint": "^8.20.0",
+    "chai": "^4.3.7",
+    "eslint": "^8.28.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.30.1",
+    "eslint-plugin-react": "^7.31.11",
    "eslint-plugin-react-hooks": "^4.6.0",
-    "jest-enzyme": "^7.1.2",
-    "prettier": "2.7.1",
-    "react-test-renderer": "^17.0.2"
+    "react-test-renderer": "^18.2.0"
  }
 }
@@ -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>
@@ -44,6 +44,11 @@ const logout = () => ({
  payload: {},
 });

+logout.invalidateAccessToken = () => ({
+  type: ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE,
+  payload: {},
+});
+
 export default {
  initializeCore,
  logout,
@@ -103,10 +103,11 @@ const updateUserPassword = (id, data) => ({
  },
 });

-updateUserPassword.success = (user) => ({
+updateUserPassword.success = (user, accessToken) => ({
  type: ActionTypes.USER_PASSWORD_UPDATE__SUCCESS,
  payload: {
    user,
+    accessToken,
  },
 });

@@ -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,
 };
@@ -1,4 +1,5 @@
 import socket from './socket';
+import http from './http';
 import { transformCard } from './cards';
 import { transformAttachment } from './attachments';

@@ -7,6 +8,9 @@ import { transformAttachment } from './attachments';
 const createBoard = (projectId, data, headers) =>
  socket.post(`/projects/${projectId}/boards`, data, headers);

+const createBoardWithImport = (projectId, data, requestId, headers) =>
+  http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
+
 const getBoard = (id, headers) =>
  socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
    ...body,
@@ -23,6 +27,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h

 export default {
  createBoard,
+  createBoardWithImport,
  getBoard,
  updateBoard,
  deleteBoard,
@@ -35,18 +35,8 @@ export const transformCardData = (data) => ({

 /* Actions */

-const getCards = (boardId, data, headers) =>
-  socket.get(`/board/${boardId}/cards`, 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) => ({
+const createCard = (listId, data, headers) =>
+  socket.post(`/lists/${listId}/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,
@@ -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) => {
@@ -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;
@@ -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}
        />
@@ -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;
@@ -0,0 +1,3 @@
+import Board from './Board';
+
+export default Board;
@@ -14,6 +14,7 @@ const BoardActions = React.memo(
    filterUsers,
    filterLabels,
    allUsers,
+    canEdit,
    canEditMemberships,
    onMembershipCreate,
    onMembershipUpdate,
@@ -27,6 +28,7 @@ const BoardActions = React.memo(
    onLabelDelete,
  }) => {
    return (
+      <div className={styles.wrapper}>
        <div className={styles.actions}>
          <div className={styles.action}>
            <Memberships
@@ -45,6 +47,7 @@ const BoardActions = React.memo(
              labels={filterLabels}
              allBoardMemberships={memberships}
              allLabels={labels}
+              canEdit={canEdit}
              onUserAdd={onUserToFilterAdd}
              onUserRemove={onUserFromFilterRemove}
              onLabelAdd={onLabelToFilterAdd}
@@ -55,6 +58,7 @@ const BoardActions = React.memo(
            />
          </div>
        </div>
+      </div>
    );
  },
 );
@@ -67,6 +71,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,
@@ -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;
+    }
+  }
 }
@@ -15,6 +15,7 @@ const Filters = React.memo(
    labels,
    allBoardMemberships,
    allLabels,
+    canEdit,
    onUserAdd,
    onUserRemove,
    onLabelAdd,
@@ -74,6 +75,7 @@ const Filters = React.memo(
            title={t('common.filterByLabels', {
              context: 'title',
            })}
+            canEdit={canEdit}
            onSelect={onLabelAdd}
            onDeselect={onLabelRemove}
            onCreate={onLabelCreate}
@@ -108,6 +110,7 @@ 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,
@@ -1,3 +0,0 @@
-import BoardKanban from './BoardKanban';
-
-export default BoardKanban;
@@ -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);
-    }, [onSelect, data]);
+      if (!dequal(data, defaultData)) {
+        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 = {
@@ -12,18 +12,18 @@ import styles from './BoardMembershipsStep.module.scss';
 const BoardMembershipsStep = React.memo(
  ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
    const [t] = useTranslation();
-    const [searchValue, handleSearchFieldChange] = useField('');
-    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);

    const filteredItems = useMemo(
      () =>
        items.filter(
          ({ user }) =>
-            user.email.includes(search) ||
-            user.name.toLowerCase().includes(search) ||
-            (user.username && user.username.includes(search)),
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
        ),
-      [items, search],
+      [items, cleanSearch],
    );

    const searchField = useRef(null);
@@ -43,20 +43,26 @@ const BoardMembershipsStep = React.memo(
    );

    useEffect(() => {
-      searchField.current.focus();
+      searchField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    return (
      <>
-        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
        <Popup.Content>
          <Input
            fluid
            ref={searchField}
-            value={searchValue}
+            value={search}
            placeholder={t('common.searchMembers')}
            icon="search"
-            onChange={handleSearchFieldChange}
+            onChange={handleSearchChange}
          />
          {filteredItems.length > 0 && (
            <Menu secondary vertical className={styles.menu}>
@@ -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;
@@ -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;
@@ -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);
@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}
@@ -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);
@@ -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;
+  }
+}
@@ -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;
@@ -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;
+    }
+  }
+}
@@ -0,0 +1,3 @@
+import AddPopup from './AddPopup';
+
+export default AddPopup;
@@ -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 {
@@ -5,6 +5,7 @@ import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';

+import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
 import NameEdit from './NameEdit';
@@ -57,6 +58,17 @@ const Card = React.memo(
      }
    }, []);

+    const handleToggleTimerClick = useCallback(
+      (event) => {
+        event.preventDefault();
+
+        onUpdate({
+          timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+        });
+      },
+      [timer, onUpdate],
+    );
+
    const handleNameUpdate = useCallback(
      (newName) => {
        onUpdate({
@@ -108,7 +120,13 @@ const Card = React.memo(
              )}
              {timer && (
                <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
+                  <Timer
+                    as="span"
+                    startedAt={timer.startedAt}
+                    total={timer.total}
+                    size="tiny"
+                    onClick={canEdit ? handleToggleTimerClick : undefined}
+                  />
                </span>
              )}
            </span>
@@ -148,14 +166,11 @@ const Card = React.memo(
                    {canEdit && (
                      <ActionsPopup
                        card={{
-                          id,
-                          name,
                          dueDate,
                          timer,
                          boardId,
                          listId,
                          projectId,
-                          isPersisted,
                        }}
                        projectsToLists={allProjectsToLists}
                        boardMemberships={allBoardMemberships}
@@ -78,7 +78,9 @@
  .cover {
    border-radius: 3px 3px 0 0;
    margin-bottom: 2px;
+    padding: 2px 2px 0;
    vertical-align: middle;
+    width: 100%;
  }

  .details {
@@ -14,7 +14,6 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
  const [t] = useTranslation();

  let contentNode;
-
  switch (type) {
    case ActivityTypes.CREATE_CARD:
      contentNode = (
@@ -10,7 +10,7 @@
    position: absolute;
    text-align: center;
    width: 100%;
-    z-index: 2000;
+    z-index: 2001;
  }

  .wrapper {
@@ -120,6 +120,7 @@ const Attachments = React.memo(
          withCaption
          withDownloadButton
          options={{
+            wheelToZoom: true,
            showHideAnimationType: 'none',
            closeTitle: '',
            zoomTitle: '',
@@ -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 {
@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
 import { Markdown } from '../../lib/custom-ui';

+import { startTimer, stopTimer } from '../../utils/timer';
 import NameField from './NameField';
 import DescriptionEdit from './DescriptionEdit';
 import Tasks from './Tasks';
@@ -80,6 +81,12 @@ const CardModal = React.memo(

    const isGalleryOpened = useRef(false);

+    const handleToggleTimerClick = useCallback(() => {
+      onUpdate({
+        timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+      });
+    }, [timer, onUpdate]);
+
    const handleNameUpdate = useCallback(
      (newName) => {
        onUpdate({
@@ -291,6 +298,19 @@ const CardModal = React.memo(
                        <Timer startedAt={timer.startedAt} total={timer.total} />
                      )}
                    </span>
+                    {canEdit && (
+                      <button
+                        onClick={handleToggleTimerClick}
+                        type="button"
+                        className={classNames(styles.attachment, styles.dueDate)}
+                      >
+                        <Icon
+                          name={timer.startedAt ? 'pause' : 'play'}
+                          size="small"
+                          className={styles.addAttachment}
+                        />
+                      </button>
+                    )}
                  </div>
                )}
              </div>
@@ -9,6 +9,7 @@
    text-align: left;
    text-overflow: ellipsis;
    transition: background 85ms ease;
+    white-space: nowrap;

    &:hover {
      background: #dfe3e6;
@@ -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, TextArea } from 'semantic-ui-react';
-
-import { useClosableForm, useField } from '../../hooks';
+import { Button, Form } from 'semantic-ui-react';
+import SimpleMDE from 'react-simplemde-editor';

 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 field = useRef(null);
+  const [value, setValue] = useState(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(() => {
-    if (isOpened) {
-      field.current.ref.current.focus();
-    }
-  }, [isOpened]);
+  const mdEditorOptions = useMemo(
+    () => ({
+      autofocus: true,
+      spellChecker: false,
+      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
-        ref={field}
-        as={TextareaAutosize}
+      <SimpleMDE
        value={value}
+        options={mdEditorOptions}
        placeholder={t('common.enterDescription')}
-        minRows={3}
-        spellCheck={false}
        className={styles.field}
        onKeyDown={handleFieldKeyDown}
-        onChange={handleFieldChange}
-        onBlur={handleFieldBlur}
+        onChange={setValue}
      />
      <div className={styles.controls}>
        {/* eslint-disable-next-line jsx-a11y/mouse-events-have-key-events */}
-        <Button
-          positive
-          content={t('action.save')}
-          onMouseOver={handleControlMouseOver}
-          onMouseOut={handleControlMouseOut}
-        />
+        <Button positive content={t('action.save')} />
      </div>
    </Form>
  );
@@ -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 {
@@ -48,6 +48,7 @@
  }

  .taskCompleted {
+    color: #aaa;
    text-decoration: line-through;
  }

@@ -36,7 +36,7 @@ const CardMoveStep = React.memo(
      [selectedBoard, path.listId],
    );

-    const handleBoardIdFieldChange = useCallback(
+    const handleBoardIdChange = useCallback(
      (event, data) => {
        if (selectedProject.boards.find((board) => board.id === data.value).isFetching === null) {
          onBoardFetch(data.value);
@@ -102,7 +102,7 @@ const CardMoveStep = React.memo(
                  }
                  disabled={selectedProject.boards.length === 0}
                  className={styles.field}
-                  onChange={handleBoardIdFieldChange}
+                  onChange={handleBoardIdChange}
                />
              </>
            )}
@@ -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;
@@ -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;
@@ -0,0 +1,3 @@
+import Core from './Core';
+
+export default Core;
@@ -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;
@@ -1,3 +0,0 @@
-import CoreWrapper from './CoreWrapper';
-
-export default CoreWrapper;
@@ -2,5 +2,6 @@
  .wrapper {
    position: fixed;
    width: 100%;
+    z-index: 1;
  }
 }
@@ -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,
@@ -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 {
@@ -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:
      }

@@ -74,11 +78,16 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {

  return (
    <>
-      <Popup.Header>{t('common.notifications')}</Popup.Header>
+      <Popup.Header>
+        {t('common.notifications', {
+          context: 'title',
+        })}
+      </Popup.Header>
      <Popup.Content>
-        {items.length > 0
-          ? items.map((item) => (
-              <div key={item.id} className={styles.wrapper}>
+        {items.length > 0 ? (
+          <div className={styles.wrapper}>
+            {items.map((item) => (
+              <div key={item.id} className={styles.item}>
                {item.card && item.activity ? (
                  <>
                    <User
@@ -86,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"
-                  className={styles.button}
+                  icon="trash alternate outline"
+                  className={styles.itemButton}
                  onClick={() => handleDelete(item.id)}
                />
              </div>
-            ))
-          : t('common.noUnreadNotifications')}
+            ))}
+          </div>
+        ) : (
+          t('common.noUnreadNotifications')
+        )}
      </Popup.Content>
    </>
  );
@@ -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 {
-      background: #f0f0f0;
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
    }
  }
 }
@@ -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,
 };
@@ -8,7 +8,8 @@ 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(
+  ({ name, color, isPersisted, isActive, canEdit, onSelect, onDeselect, onEdit }) => {
    const handleToggleClick = useCallback(() => {
      if (isActive) {
        onDeselect();
@@ -31,22 +32,27 @@ const Item = React.memo(({ name, color, isPersisted, isActive, onSelect, onDesel
          )}
          onClick={handleToggleClick}
        />
+        {canEdit && (
          <Button
            icon="pencil"
            size="small"
+            floated="right"
            disabled={!isPersisted}
            className={styles.editButton}
            onClick={onEdit}
          />
+        )}
      </div>
    );
-});
+  },
+);

 Item.propTypes = {
  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,
@@ -4,7 +4,6 @@
    box-shadow: none;
    flex: 0 0 auto;
    font-weight: normal;
-    margin: 0;
    padding: 8px 10px;
    text-decoration: underline;

@@ -18,6 +17,7 @@
    flex: 1 1 auto;
    font-size: 14px;
    font-weight: bold;
+    margin-right: 0;
    overflow: hidden;
    padding: 8px 32px 8px 10px;
    position: relative;
@@ -18,20 +18,31 @@ const StepTypes = {
 };

 const LabelsStep = React.memo(
-  ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
+  ({
+    items,
+    currentIds,
+    title,
+    canEdit,
+    onSelect,
+    onDeselect,
+    onCreate,
+    onUpdate,
+    onDelete,
+    onBack,
+  }) => {
    const [t] = useTranslation();
    const [step, openStep, handleBack] = useSteps();
-    const [searchValue, handleSearchFieldChange] = useField('');
-    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);

    const filteredItems = useMemo(
      () =>
        items.filter(
          (label) =>
-            (label.name && label.name.toLowerCase().includes(search)) ||
-            label.color.includes(search),
+            (label.name && label.name.toLowerCase().includes(cleanSearch)) ||
+            label.color.includes(cleanSearch),
        ),
-      [items, search],
+      [items, cleanSearch],
    );

    const searchField = useRef(null);
@@ -78,13 +89,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);

@@ -109,15 +130,19 @@ const LabelsStep = React.memo(

    return (
      <>
-        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
        <Popup.Content>
          <Input
            fluid
            ref={searchField}
-            value={searchValue}
+            value={search}
            placeholder={t('common.searchLabels')}
            icon="search"
-            onChange={handleSearchFieldChange}
+            onChange={handleSearchChange}
          />
          {filteredItems.length > 0 && (
            <div className={styles.items}>
@@ -128,6 +153,7 @@ const LabelsStep = React.memo(
                  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)}
@@ -135,12 +161,14 @@ const LabelsStep = React.memo(
              ))}
            </div>
          )}
+          {canEdit && (
            <Button
              fluid
              content={t('action.createNewLabel')}
              className={styles.addButton}
              onClick={handleAddClick}
            />
+          )}
        </Popup.Content>
      </>
    );
@@ -153,6 +181,7 @@ 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,
@@ -163,6 +192,7 @@ LabelsStep.propTypes = {

 LabelsStep.defaultProps = {
  title: 'common.labels',
+  canEdit: true,
  onBack: undefined,
 };

@@ -17,7 +17,7 @@

  .items {
    margin-top: 8px;
-    max-height: 320px;
+    max-height: 60vh;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
@@ -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,
@@ -17,18 +17,18 @@ const AddStep = React.memo(
  ({ users, currentUserIds, permissionsSelectStep, title, onCreate, onClose }) => {
    const [t] = useTranslation();
    const [step, openStep, handleBack] = useSteps();
-    const [searchValue, handleSearchFieldChange] = useField('');
-    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);

    const filteredUsers = useMemo(
      () =>
        users.filter(
          (user) =>
-            user.email.includes(search) ||
-            user.name.toLowerCase().includes(search) ||
-            (user.username && user.username.includes(search)),
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
        ),
-      [users, search],
+      [users, cleanSearch],
    );

    const searchField = useRef(null);
@@ -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}
              />
            );
          }
@@ -102,10 +103,10 @@ const AddStep = React.memo(
          <Input
            fluid
            ref={searchField}
-            value={searchValue}
+            value={search}
            placeholder={t('common.searchUsers')}
            icon="search"
-            onChange={handleSearchFieldChange}
+            onChange={handleSearchChange}
          />
          {filteredUsers.length > 0 && (
            <div className={styles.users}>
@@ -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;
@@ -2,6 +2,7 @@
  .menuItem {
    background: transparent;
    border: none;
+    border-radius: 0.28571429rem;
    cursor: pointer;
    display: block;
    margin: 0;
@@ -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)}
              >
@@ -1,6 +1,7 @@
 :global(#app) {
  .action {
    border: none;
+    border-radius: 0.28571429rem;
    display: inline-block;
    height: 36px;
    overflow: hidden;
@@ -1,6 +1,7 @@
 :global(#app) {
  .action {
    border: none;
+    border-radius: 0.28571429rem;
    display: inline-block;
    height: 36px;
    overflow: hidden;
@@ -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 { ConnectedRouter } from 'connected-react-router';
+import { Route, Routes } from 'react-router-dom';
+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}>
-        <Switch>
-          <Route exact path={Paths.LOGIN} component={LoginContainer} />
-          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
-          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
-          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
-          <Route path="*" component={NotFound} />
-        </Switch>
-      </ConnectedRouter>
+      <ReduxRouter history={history}>
+        <Routes>
+          <Route path={Paths.LOGIN} element={<LoginContainer />} />
+          <Route path={Paths.ROOT} element={<CoreContainer />} />
+          <Route path={Paths.PROJECTS} element={<CoreContainer />} />
+          <Route path={Paths.BOARDS} element={<CoreContainer />} />
+          <Route path={Paths.CARDS} element={<CoreContainer />} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </ReduxRouter>
    </Provider>
  );
 }
@@ -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.board, styles.flex)}>
-      <BoardWrapperContainer />
+      <div className={classNames(styles.wrapper, styles.wrapperLoader, styles.wrapperProject)}>
+        <Loader active size="big" />
+      </div>
+    );
+  }
+
+  return (
+    <div className={classNames(styles.wrapper, styles.wrapperFlex, styles.wrapperBoard)}>
+      <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;
@@ -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;
+  }
 }
@@ -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,
@@ -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;
  }
 }
@@ -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"
@@ -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) {
+        if (!cleanData.currentPassword) {
          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(() => {
@@ -7,6 +7,7 @@ import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input, Popup } from '../../lib/custom-ui';

 import { useForm } from '../../hooks';
+import { isPassword } from '../../utils/validator';

 import styles from './UserPasswordEditStep.module.scss';

@@ -56,7 +57,7 @@ const UserPasswordEditStep = React.memo(
    const currentPasswordField = useRef(null);

    const handleSubmit = useCallback(() => {
-      if (!data.password) {
+      if (!data.password || !isPassword(data.password)) {
        passwordField.current.select();
        return;
      }
@@ -70,7 +71,9 @@ const UserPasswordEditStep = React.memo(
    }, [usePasswordConfirmation, onUpdate, data]);

    useEffect(() => {
-      passwordField.current.focus();
+      passwordField.current.focus({
+        preventScroll: true,
+      });
    }, []);

    useEffect(() => {
@@ -113,6 +116,7 @@ const UserPasswordEditStep = React.memo(
          <Form onSubmit={handleSubmit}>
            <div className={styles.text}>{t('common.newPassword')}</div>
            <Input.Password
+              withStrengthBar
              fluid
              ref={passwordField}
              name="password"
@@ -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,
@@ -0,0 +1,19 @@
+import React from 'react';
+// import { useTranslation } from 'react-i18next';
+import { Image, Tab } from 'semantic-ui-react';
+
+import logo from '../../assets/images/logo.png';
+
+import styles from './AboutPane.module.scss';
+
+const AboutPane = React.memo(() => {
+  // const [t] = useTranslation();
+
+  return (
+    <Tab.Pane attached={false} className={styles.wrapper}>
+      <Image centered src={logo} size="large" className={styles.logo} />
+    </Tab.Pane>
+  );
+});
+
+export default AboutPane;
@@ -0,0 +1,10 @@
+:global(#app) {
+  /* .logo {
+    margin-bottom: 16px;
+  } */
+
+  .wrapper {
+    border: none;
+    box-shadow: none;
+  }
+}
@@ -1,6 +1,7 @@
 :global(#app) {
  .action {
    border: none;
+    border-radius: 0.28571429rem;
    display: inline-block;
    height: 36px;
    overflow: hidden;
@@ -1,6 +1,7 @@
 :global(#app) {
  .action {
    border: none;
+    border-radius: 0.28571429rem;
    display: inline-block;
    height: 36px;
    overflow: hidden;
@@ -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 (
@@ -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) {
+        if (!cleanData.currentPassword) {
          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(() => {
@@ -21,6 +21,7 @@ export default {

  CORE_INITIALIZE: 'CORE_INITIALIZE',
  LOGOUT: 'LOGOUT',
+  LOGOUT__ACCESS_TOKEN_INVALIDATE: 'LOGOUT__ACCESS_TOKEN_INVALIDATE',

  /* Modals */

@@ -1,6 +1,11 @@
+const { BASE_URL } = window;
+const BASE_PATH = BASE_URL.replace(/^.*\/\/[^/]*(.*)[^?#]*.*$/, '$1');
+
 const SERVER_BASE_URL =
  process.env.REACT_APP_SERVER_BASE_URL ||
-  (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1337');
+  (process.env.NODE_ENV === 'production' ? BASE_URL : 'http://localhost:1337');
+
+const SERVER_HOST_NAME = SERVER_BASE_URL.replace(/^(.*\/\/[^/?#]*).*$/, '$1');

 const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
@@ -10,7 +15,9 @@ const POSITION_GAP = 65535;
 const ACTIVITIES_LIMIT = 50;

 export default {
+  BASE_PATH,
  SERVER_BASE_URL,
+  SERVER_HOST_NAME,
  ACCESS_TOKEN_KEY,
  ACCESS_TOKEN_VERSION_KEY,
  ACCESS_TOKEN_VERSION,
@@ -3,10 +3,6 @@ export const ProjectBackgroundTypes = {
  IMAGE: 'image',
 };

-export const BoardTypes = {
-  KANBAN: 'kanban',
-};
-
 export const BoardMembershipRoles = {
  EDITOR: 'editor',
  VIEWER: 'viewer',
@@ -1,8 +1,10 @@
-const ROOT = '/';
-const LOGIN = '/login';
-const PROJECTS = '/projects/:id';
-const BOARDS = '/boards/:id';
-const CARDS = '/cards/:id';
+import Config from './Config';
+
+const ROOT = `${Config.BASE_PATH}/`;
+const LOGIN = `${Config.BASE_PATH}/login`;
+const PROJECTS = `${Config.BASE_PATH}/projects/:id`;
+const BOARDS = `${Config.BASE_PATH}/boards/:id`;
+const CARDS = `${Config.BASE_PATH}/cards/:id`;

 export default {
  ROOT,
@@ -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,
  };
 };
@@ -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);
@@ -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);
@@ -30,6 +30,9 @@ const makeMapStateToProps = () => {
    const tasks = selectTasksByCardId(state, id);
    const notificationsTotal = selectNotificationsTotalByCardId(state, id);

+    const isCurrentUserEditor =
+      !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR;
+
    return {
      id,
      index,
@@ -48,8 +51,7 @@ const makeMapStateToProps = () => {
      allProjectsToLists,
      allBoardMemberships,
      allLabels,
-      canEdit:
-        !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
+      canEdit: isCurrentUserEditor,
    };
  };
 };
@@ -1,7 +1,7 @@
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import { push } from 'connected-react-router';
 import omit from 'lodash/omit';
+import { push } from '../lib/redux-router';

 import selectors from '../selectors';
 import entryActions from '../entry-actions';
@@ -37,6 +37,14 @@ const mapStateToProps = (state) => {
  const attachments = selectors.selectAttachmentsForCurrentCard(state);
  const activities = selectors.selectActivitiesForCurrentCard(state);

+  let isCurrentUserEditor = false;
+  let isCurrentUserEditorOrCanComment = false;
+
+  if (currentUserMembership) {
+    isCurrentUserEditor = currentUserMembership.role === BoardMembershipRoles.EDITOR;
+    isCurrentUserEditorOrCanComment = isCurrentUserEditor || currentUserMembership.canComment;
+  }
+
  return {
    name,
    description,
@@ -58,11 +66,8 @@ const mapStateToProps = (state) => {
    allProjectsToLists,
    allBoardMemberships,
    allLabels,
-    canEdit: !!currentUserMembership && currentUserMembership.role === BoardMembershipRoles.EDITOR,
-    canEditCommentActivities:
-      !!currentUserMembership &&
-      (currentUserMembership.role === BoardMembershipRoles.EDITOR ||
-        currentUserMembership.canComment),
+    canEdit: isCurrentUserEditor,
+    canEditCommentActivities: isCurrentUserEditorOrCanComment,
    canEditAllCommentActivities: isCurrentUserManager,
  };
 };
@@ -4,12 +4,16 @@ import selectors from '../selectors';
 import Core from '../components/Core';

 const mapStateToProps = (state) => {
+  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
+  const isSocketDisconnected = selectors.selectIsSocketDisconnected(state);
  const currentModal = selectors.selectCurrentModal(state);
  const currentProject = selectors.selectCurrentProject(state);

  return {
+    isSocketDisconnected,
    currentModal,
    currentProject,
+    isInitializing: isCoreInitializing,
  };
 };

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import selectors from '../selectors';
-import CoreWrapper from '../components/CoreWrapper';
-
-const mapStateToProps = (state) => {
-  const isCoreInitializing = selectors.selectIsCoreInitializing(state);
-
-  return {
-    isInitializing: isCoreInitializing,
-    isSocketDisconnected: state.socket.isDisconnected,
-  };
-};
-
-export default connect(mapStateToProps)(CoreWrapper);
@@ -6,6 +6,7 @@ import entryActions from '../entry-actions';
 import Header from '../components/Header';

 const mapStateToProps = (state) => {
+  const isLogouting = selectors.selectIsLogouting(state);
  const currentUser = selectors.selectCurrentUser(state);
  const currentProject = selectors.selectCurrentProject(state);
  const notifications = selectors.selectNotificationsForCurrentUser(state);
@@ -13,6 +14,7 @@ const mapStateToProps = (state) => {

  return {
    notifications,
+    isLogouting,
    project: currentProject,
    user: currentUser,
    canEditProject: isCurrentUserManager,
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maksim Eltyshev	33765dfe8a	chore: Update version	2022-12-26 22:56:13 +01:00
Maksim Eltyshev	d21dee05a3	fix: Show completed tasks greyed out	2022-12-26 22:55:04 +01:00
Maksim Eltyshev	1dacd6e700	fix: Prevent scroll when focusing	2022-12-26 22:51:17 +01:00
Maksim Eltyshev	7e07a75124	fix: Improve quality of resized images	2022-12-26 22:43:21 +01:00
Maksim Eltyshev	6ffa817b53	ref: Remove board types, refactoring	2022-12-26 21:10:50 +01:00
Maksim Eltyshev	2b131f76c1	fix: Proper image error handling during migration	2022-12-24 16:24:50 +01:00
Maksim Eltyshev	2bc82d557a	fix: Fix image size for animated attachments	2022-12-24 02:59:03 +01:00
Maksim Eltyshev	7c99aeb9e1	chore: Update version	2022-12-24 01:04:46 +01:00
Maksim Eltyshev	8d477af498	fix: Fix active tab style	2022-12-24 01:03:36 +01:00
Maksim Eltyshev	32507f2799	fix: Add missing translation key	2022-12-24 01:00:57 +01:00
Maksim Eltyshev	0a5210dd21	feat: Preserve original format of images, change interpolation kernel Closes #349	2022-12-24 00:47:59 +01:00
Maksim Eltyshev	b82a601f46	fix: Increase height of scroll area in popups	2022-12-21 22:57:04 +01:00
Maksim Eltyshev	c658665ee8	meta: Update import from Trello	2022-12-17 00:09:43 +01:00
Maksim Eltyshev	a37bad4867	chore: Update version	2022-12-16 23:55:19 +01:00
Christoph Enne	738ed19e7f	feat: Trello board JSON import (#352 ) Closes #27, closes #105	2022-12-17 03:48:06 +05:00
Maksim Eltyshev	9ce8b2ab9c	chore: Update version	2022-12-16 17:06:35 +01:00
Maksim Eltyshev	a8d312922a	fix: Fix error on initial loading Closes #347	2022-12-16 17:05:03 +01:00
Maksim Eltyshev	90c8b4d548	chore: Update version	2022-12-15 01:39:00 +01:00
Maksim Eltyshev	4941b51fa4	fix: Prevent popup from overflowing	2022-12-15 01:38:03 +01:00
Maksim Eltyshev	a858419f3c	fix: Fix router synchronization with redux store	2022-12-15 01:34:48 +01:00
Maksim Eltyshev	e28c06b85a	fix: Fix type of omit flag	2022-11-30 03:15:02 +01:00
Maksim Eltyshev	fa2d73a2c5	chore: Update version	2022-11-30 02:55:25 +01:00
Maksim Eltyshev	80706bbdd5	meta: Update link to container registry	2022-11-30 02:53:06 +01:00
Maksim Eltyshev	db4e5a89f9	fix: Improve building	2022-11-30 02:50:38 +01:00
Maksim Eltyshev	0266e4bfe2	meta: Import from Trello	2022-11-28 14:07:55 +01:00
Maksim Eltyshev	02c26cfb4d	ci: Update alpine version	2022-11-21 20:11:45 +01:00
Maksim Eltyshev	ef096499a2	chore: Update alpine and vips version	2022-11-21 18:11:00 +01:00
Maksim Eltyshev	a007e1d065	chore: Update version	2022-11-21 17:13:11 +01:00
Maksim Eltyshev	c181731870	fix: Fix card repositioning Closes #340	2022-11-21 17:07:51 +01:00
dependabot[bot]	54c57a08c3	chore(deps): Bump minimatch and recursive-readdir in /client (#338 ) Bumps [minimatch](https://github.com/isaacs/minimatch) and [recursive-readdir](https://github.com/jergason/recursive-readdir). These dependencies needed to be updated together. Updates `minimatch` from 3.0.4 to 3.1.2 - [Release notes](https://github.com/isaacs/minimatch/releases) - [Commits](https://github.com/isaacs/minimatch/compare/v3.0.4...v3.1.2) Updates `recursive-readdir` from 2.2.2 to 2.2.3 - [Release notes](https://github.com/jergason/recursive-readdir/releases) - [Changelog](https://github.com/jergason/recursive-readdir/blob/master/CHANGELOG.md) - [Commits](https://github.com/jergason/recursive-readdir/commits/v2.2.3) --- updated-dependencies: - dependency-name: minimatch dependency-type: indirect - dependency-name: recursive-readdir dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-11-21 05:23:28 +05:00
dependabot[bot]	65abd7c9ab	chore(deps): Bump socket.io-parser from 3.3.2 to 3.3.3 in /client (#326 ) Bumps [socket.io-parser](https://github.com/socketio/socket.io-parser) from 3.3.2 to 3.3.3. - [Release notes](https://github.com/socketio/socket.io-parser/releases) - [Changelog](https://github.com/socketio/socket.io-parser/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/socket.io-parser/compare/3.3.2...3.3.3) --- updated-dependencies: - dependency-name: socket.io-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-11-21 05:23:17 +05:00
dependabot[bot]	5fc811d2ef	chore(deps): Bump socket.io-parser from 3.3.2 to 3.3.3 in /server (#322 ) Bumps [socket.io-parser](https://github.com/socketio/socket.io-parser) from 3.3.2 to 3.3.3. - [Release notes](https://github.com/socketio/socket.io-parser/releases) - [Changelog](https://github.com/socketio/socket.io-parser/blob/main/CHANGELOG.md) - [Commits](https://github.com/socketio/socket.io-parser/compare/3.3.2...3.3.3) --- updated-dependencies: - dependency-name: socket.io-parser dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com> Signed-off-by: dependabot[bot] <support@github.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>	2022-11-21 05:23:04 +05:00
Maksim Eltyshev	5afd4af897	ref: Little refactoring	2022-11-21 01:12:32 +01:00
Maksim Eltyshev	ac0a3d9ae7	fix: Fix client build	2022-11-21 01:06:41 +01:00
Maksim Eltyshev	b0d23373c0	chore: Update dependencies	2022-11-21 00:54:05 +01:00
Rafly Maulana	5381d45e50	meta: Share global eslint config, move prettier config (#339 )	2022-11-21 00:22:01 +05:00
Maksim Eltyshev	a43af8eac5	chore: Update version	2022-11-20 15:34:04 +01:00
Maksim Eltyshev	409a7cde6b	fix: Fix notifications popup styles	2022-11-20 15:30:07 +01:00
Maksim Eltyshev	f62cba9bcd	fix: Fix board actions for mobile	2022-11-20 15:14:49 +01:00
Maksim Eltyshev	9495234066	ref: Little refactoring	2022-11-20 15:05:21 +01:00
Rafly Maulana	5dcbad7b5a	feat: Add markdown editor in card description (#333 )	2022-11-20 18:48:42 +05:00
Maksim Eltyshev	064b37050c	fix: Hide label actions based on role	2022-11-10 15:28:43 +01:00
Rafly Maulana	bf8b8474ec	meta: Fix documentation for installing Planka without Docker (#324 )	2022-11-10 18:56:55 +05:00
Rafly Maulana	37a9c9bb42	meta: Add documentation for installing Planka without Docker (#323 )	2022-11-10 18:48:38 +05:00
Maksim Eltyshev	00fccbaa3d	fix: Fix z-indexes	2022-11-02 21:54:30 +01:00
Maksim Eltyshev	b3323308c1	fix: Lock postgres version Closes #312	2022-10-20 12:22:35 +02:00
Jacob Weisz	9108dc5b3e	meta: Fix readme typo (#309 )	2022-10-12 22:46:00 +05:00
Maksim Eltyshev	513f9a8ee5	chore: Update version	2022-10-03 13:13:59 +02:00
Maksim Eltyshev	e051f624a8	ref: Little change for consistency	2022-10-03 13:12:16 +02:00
Maksim Eltyshev	172f4fcf34	fix: Fix missing board memberships loading	2022-10-03 13:04:52 +02:00
Maksim Eltyshev	9f16881965	fix: Socket bug fixes and improvements	2022-10-03 12:11:19 +02:00
Connor Lanigan	4e876922f8	feat: Prefill label creation with search term (#307 )	2022-10-03 14:08:39 +05:00
Connor Lanigan	d82d928e29	fix: Update German translation (#306 )	2022-10-03 14:06:51 +05:00
Maksim Eltyshev	94dc83706c	chore: Update version	2022-09-30 11:52:19 +02:00
Jacques Lorentz	b08e731419	fix: Front-end base url with path (#303 ) Closes #43, closes #111, closes #272	2022-09-30 14:48:58 +05:00
Maksim Eltyshev	1ce0fac281	chore: Update version	2022-09-28 18:46:37 +02:00
Maksim Eltyshev	e3d00c8791	fix: Disable quick timer actions for viewers	2022-09-28 18:38:03 +02:00
Maksim Eltyshev	e1a0b635ea	ref: Little refactoring	2022-09-28 18:30:03 +02:00
Maksim Eltyshev	cc7959bb15	chore: Update version	2022-09-16 15:08:51 +05:00
Maksim Eltyshev	56044e6d8a	ref: Fix filename	2022-09-16 15:08:09 +05:00
Maksim Eltyshev	e5bd73f33e	fix: Prevent popup from leaving window	2022-09-16 14:39:41 +05:00
Maksim Eltyshev	e65ab6ece7	fix: Fix flag for English	2022-09-15 09:07:57 +05:00
Maksim Eltyshev	14cc55a8c0	feat: Highlight active timer, add quick actions	2022-09-15 00:20:05 +05:00
Maksim Eltyshev	b4306d0a4b	fix: Fix font of timer numbers	2022-09-14 21:22:08 +05:00
Maksim Eltyshev	283c850ebf	feat: Add about pane	2022-09-14 16:52:50 +05:00
Maksim Eltyshev	62de71bd97	fix: Visually highlight card cover	2022-09-13 16:55:22 +05:00
Maksim Eltyshev	447f88880d	chore: Update version	2022-09-07 18:43:32 +05:00
Maksim Eltyshev	8109936ce2	feat: Invalidate access token on logout	2022-09-07 18:39:33 +05:00
Maksim Eltyshev	640908320a	ref: Remove unused style	2022-09-03 23:03:34 +05:00
Maksim Eltyshev	236c1020b3	chore: Update version	2022-09-03 22:48:19 +05:00
Maksim Eltyshev	3df07c10fa	fix: Use password strength estimator Closes #294	2022-09-03 22:47:06 +05:00
Steven Correia	543a992d98	fix: Fix proxy forwarding (#295 )	2022-09-03 20:00:23 +05:00
Maksim Eltyshev	9cde4e63f9	chore: Update version	2022-09-02 18:03:44 +05:00
Maksim Eltyshev	95738ee7d3	fix: Add missing validation for password	2022-09-02 17:59:12 +05:00
Maksim Eltyshev	bb7cdf5dd4	chore: Update version	2022-09-02 17:05:48 +05:00
Maksim Eltyshev	253af55790	fix: Add password requirements when creating user Closes #293	2022-09-02 17:04:51 +05:00
Maksim Eltyshev	62c3cca9a7	fix: Fix password length validation	2022-08-30 15:13:17 +02:00
Maksim Eltyshev	b476a19b79	chore: Update version	2022-08-30 13:50:45 +02:00
Maksim Eltyshev	3379c65a87	fix: Prevent tabnabbing in markdown	2022-08-30 13:47:50 +02:00
Maksim Eltyshev	1a6fc40804	chore: Update version	2022-08-26 19:13:10 +02:00
Maksim Eltyshev	42092efcd2	fix: Remove dots in translations	2022-08-26 19:11:32 +02:00
Maksim Eltyshev	5c91bddfe7	feat: Stronger password policy	2022-08-26 18:59:44 +02:00
Maksim Eltyshev	fd8f40f1b0	chore: Update version	2022-08-26 16:05:47 +02:00
Maksim Eltyshev	5b64d465e2	fix: Use move-file instead of rename	2022-08-26 16:02:47 +02:00
Maksim Eltyshev	212fb8ac8c	fix: Add missing border radius	2022-08-26 02:47:43 +02:00
Maksim Eltyshev	cece2254d7	fix: Change mechanics of file uploading	2022-08-26 02:45:27 +02:00
Maksim Eltyshev	c940805f14	chore: Fix version	2022-08-24 15:44:01 +02:00
Maksim Eltyshev	052ab7f653	chore: Update version	2022-08-24 15:37:27 +02:00
Maksim Eltyshev	5a38805588	feat: Add Italian translation. Thanks to @belf88	2022-08-24 15:27:12 +02:00
Maksim Eltyshev	2dbbead2e9	fix: Add missing border radiuses	2022-08-23 21:19:43 +02:00
Maksim Eltyshev	039eee0aac	ref: Little refactoring	2022-08-23 21:06:50 +02:00
Maksim Eltyshev	07867fc0b2	fix: Use custom logger only for production	2022-08-23 20:45:42 +02:00
Maksim Eltyshev	55d07b4560	meta: Fixes in readme	2022-08-23 01:14:11 +02:00
Maksim Eltyshev	289d2bf5ae	meta: Fix ignore files for logs	2022-08-23 00:51:33 +02:00
Steven Correia	6429e22d59	feat: Modify logger to log to file that supports fail2ban (#284 )	2022-08-23 03:42:56 +05:00
Maksim Eltyshev	21ef850913	fix: Fix missed function name	2022-08-22 16:27:14 +02:00