chore: Update version

Closes #294

.dockerignore

@@ -7,4 +7,5 @@
 
 server/public/*
 server/views/*
+server/logs
 client/build

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: meltyshev
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: # Replace with a single Liberapay username
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.gitignore

@@ -2,5 +2,4 @@ node_modules
 docker-compose.override.yml
 
 .idea
-.vscode
 .DS_Store

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "files.trimTrailingWhitespace": true,
+  "eslint.format.enable": true,
+  "eslint.workingDirectories": [
+    "./client",
+    "./server"
+  ],
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
+  }
+}

README.md

@@ -44,6 +44,79 @@ docker-compose up -d
 
 Demo user: demo@demo.demo demo
 
+### Logging
+
+Planka currently allows you to expose the applciation's logfile directory to the host machine via a shared volume. This feature is not enabled by default.
+
+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
+```
+
 ## Development
 
 Clone the repository and install dependencies:

SECURITY.md

@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+Most recent release.
+
+## Reporting a Vulnerability
+
+Please report any security issues you discovered to meltyshev@gmail.com. If the issue is confirmed, we will release a patch as soon as possible depending on complexity.
+
+**Do NOT create public issues on GitHub for security vulnerabilities.**
+
+Thank you for your contribution!

client/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "planka-client",
       "dependencies": {
+        "@juggle/resize-observer": "^3.4.0",
         "classnames": "^2.3.1",
         "connected-react-router": "^6.9.3",
         "date-fns": "^2.29.1",
@@ -15,6 +16,7 @@
         "i18next-browser-languagedetector": "^6.1.4",
         "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",
@@ -43,7 +45,8 @@
         "semantic-ui-react": "^2.1.3",
         "socket.io-client": "^2.3.1",
         "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",
@@ -3028,6 +3031,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "node_modules/@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "node_modules/@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -14333,6 +14341,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "node_modules/keyboard-key": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
@@ -25304,6 +25317,11 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   },
   "dependencies": {
@@ -27321,6 +27339,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.10"
       }
     },
+    "@juggle/resize-observer": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
+    },
     "@leichtgewicht/ip-codec": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
@@ -35776,6 +35799,11 @@
         "object.assign": "^4.1.2"
       }
     },
+    "jwt-decode": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
+      "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
+    },
     "keyboard-key": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz",
@@ -43794,6 +43822,11 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.2.tgz",
       "integrity": "sha512-JZxotl7SxAJH0j7dN4pxsTV6ZLXoLdGME+PsjkL/DaBrVryK9kTGq06GfKrwcSOqypP+fdXGoCHE36b99fWVoA=="
+    },
+    "zxcvbn": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/zxcvbn/-/zxcvbn-4.4.2.tgz",
+      "integrity": "sha512-Bq0B+ixT/DMyG8kgX2xWcI5jUvCwqrMxSFam7m0lAf78nf04hv6lNCsyLYdyYTrCVMqNDY/206K7eExYCeSyUQ=="
     }
   }
 }

client/package.json

@@ -63,6 +63,7 @@
     }
   },
   "dependencies": {
+    "@juggle/resize-observer": "^3.4.0",
     "classnames": "^2.3.1",
     "connected-react-router": "^6.9.3",
     "date-fns": "^2.29.1",
@@ -72,6 +73,7 @@
     "i18next-browser-languagedetector": "^6.1.4",
     "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",
@@ -100,7 +102,8 @@
     "semantic-ui-react": "^2.1.3",
     "socket.io-client": "^2.3.1",
     "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",

client/src/actions/action.js

@@ -1,22 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-export const handleActionCreate = (action) => ({
-  type: ActionTypes.ACTION_CREATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionUpdate = (action) => ({
-  type: ActionTypes.ACTION_UPDATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionDelete = (action) => ({
-  type: ActionTypes.ACTION_DELETE_HANDLE,
-  payload: {
-    action,
-  },
-});

client/src/actions/actions.js

@@ -1,50 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-export const fetchActions = (cardId) => ({
-  type: ActionTypes.ACTIONS_FETCH,
-  payload: {
-    cardId,
-  },
-});
-
-fetchActions.success = (cardId, actions, users) => ({
-  type: ActionTypes.ACTIONS_FETCH__SUCCESS,
-  payload: {
-    cardId,
-    actions,
-    users,
-  },
-});
-
-fetchActions.failure = (cardId, error) => ({
-  type: ActionTypes.ACTIONS_FETCH__FAILURE,
-  payload: {
-    cardId,
-    error,
-  },
-});
-
-export const toggleActionsDetails = (cardId, isVisible) => ({
-  type: ActionTypes.ACTIONS_DETAILS_TOGGLE,
-  payload: {
-    cardId,
-    isVisible,
-  },
-});
-
-toggleActionsDetails.success = (cardId, actions, users) => ({
-  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS,
-  payload: {
-    cardId,
-    actions,
-    users,
-  },
-});
-
-toggleActionsDetails.failure = (cardId, error) => ({
-  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__FAILURE,
-  payload: {
-    cardId,
-    error,
-  },
-});

client/src/actions/activities.js

@@ -0,0 +1,79 @@
+import ActionTypes from '../constants/ActionTypes';
+
+const fetchActivities = (cardId) => ({
+  type: ActionTypes.ACTIVITIES_FETCH,
+  payload: {
+    cardId,
+  },
+});
+
+fetchActivities.success = (cardId, activities, users) => ({
+  type: ActionTypes.ACTIVITIES_FETCH__SUCCESS,
+  payload: {
+    cardId,
+    activities,
+    users,
+  },
+});
+
+fetchActivities.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIVITIES_FETCH__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});
+
+const toggleActivitiesDetails = (cardId, isVisible) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE,
+  payload: {
+    cardId,
+    isVisible,
+  },
+});
+
+toggleActivitiesDetails.success = (cardId, activities, users) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE__SUCCESS,
+  payload: {
+    cardId,
+    activities,
+    users,
+  },
+});
+
+toggleActivitiesDetails.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIVITIES_DETAILS_TOGGLE__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});
+
+const handleActivityCreate = (activity) => ({
+  type: ActionTypes.ACTIVITY_CREATE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+const handleActivityUpdate = (activity) => ({
+  type: ActionTypes.ACTIVITY_UPDATE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+const handleActivityDelete = (activity) => ({
+  type: ActionTypes.ACTIVITY_DELETE_HANDLE,
+  payload: {
+    activity,
+  },
+});
+
+export default {
+  fetchActivities,
+  toggleActivitiesDetails,
+  handleActivityCreate,
+  handleActivityUpdate,
+  handleActivityDelete,
+};

client/src/actions/attachments.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createAttachment = (attachment) => ({
+const createAttachment = (attachment) => ({
   type: ActionTypes.ATTACHMENT_CREATE,
   payload: {
     attachment,
@@ -23,14 +23,14 @@ createAttachment.failure = (localId, error) => ({
   },
 });
 
-export const handleAttachmentCreate = (attachment) => ({
+const handleAttachmentCreate = (attachment) => ({
   type: ActionTypes.ATTACHMENT_CREATE_HANDLE,
   payload: {
     attachment,
   },
 });
 
-export const updateAttachment = (id, data) => ({
+const updateAttachment = (id, data) => ({
   type: ActionTypes.ATTACHMENT_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateAttachment.failure = (id, error) => ({
   },
 });
 
-export const handleAttachmentUpdate = (attachment) => ({
+const handleAttachmentUpdate = (attachment) => ({
   type: ActionTypes.ATTACHMENT_UPDATE_HANDLE,
   payload: {
     attachment,
   },
 });
 
-export const deleteAttachment = (id) => ({
+const deleteAttachment = (id) => ({
   type: ActionTypes.ATTACHMENT_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteAttachment.failure = (id, error) => ({
   },
 });
 
-export const handleAttachmentDelete = (attachment) => ({
+const handleAttachmentDelete = (attachment) => ({
   type: ActionTypes.ATTACHMENT_DELETE_HANDLE,
   payload: {
     attachment,
   },
 });
+
+export default {
+  createAttachment,
+  handleAttachmentCreate,
+  updateAttachment,
+  handleAttachmentUpdate,
+  deleteAttachment,
+  handleAttachmentDelete,
+};

client/src/actions/board-memberships.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createBoardMembership = (boardMembership) => ({
+const createBoardMembership = (boardMembership) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_CREATE,
   payload: {
     boardMembership,
@@ -23,7 +23,7 @@ createBoardMembership.failure = (localId, error) => ({
   },
 });
 
-export const handleBoardMembershipCreate = (
+const handleBoardMembershipCreate = (
   boardMembership,
   project,
   board,
@@ -38,6 +38,7 @@ export const handleBoardMembershipCreate = (
   cardLabels,
   tasks,
   attachments,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_CREATE_HANDLE,
   payload: {
@@ -55,6 +56,7 @@ export const handleBoardMembershipCreate = (
     cardLabels,
     tasks,
     attachments,
+    deletedNotifications,
   },
 });
 
@@ -67,7 +69,37 @@ handleBoardMembershipCreate.fetchProject = (id, currentUserId, currentBoardId) =
   },
 });
 
-export const deleteBoardMembership = (id) => ({
+const updateBoardMembership = (id, data) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateBoardMembership.success = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__SUCCESS,
+  payload: {
+    boardMembership,
+  },
+});
+
+updateBoardMembership.failure = (id, error) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const handleBoardMembershipUpdate = (boardMembership) => ({
+  type: ActionTypes.BOARD_MEMBERSHIP_UPDATE_HANDLE,
+  payload: {
+    boardMembership,
+  },
+});
+
+const deleteBoardMembership = (id) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_DELETE,
   payload: {
     id,
@@ -89,9 +121,18 @@ deleteBoardMembership.failure = (id, error) => ({
   },
 });
 
-export const handleBoardMembershipDelete = (boardMembership) => ({
+const handleBoardMembershipDelete = (boardMembership) => ({
   type: ActionTypes.BOARD_MEMBERSHIP_DELETE_HANDLE,
   payload: {
     boardMembership,
   },
 });
+
+export default {
+  createBoardMembership,
+  handleBoardMembershipCreate,
+  updateBoardMembership,
+  handleBoardMembershipUpdate,
+  deleteBoardMembership,
+  handleBoardMembershipDelete,
+};

client/src/actions/boards.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createBoard = (board) => ({
+const createBoard = (board) => ({
   type: ActionTypes.BOARD_CREATE,
   payload: {
     board,
@@ -24,14 +24,14 @@ createBoard.failure = (localId, error) => ({
   },
 });
 
-export const handleBoardCreate = (board) => ({
+const handleBoardCreate = (board) => ({
   type: ActionTypes.BOARD_CREATE_HANDLE,
   payload: {
     board,
   },
 });
 
-export const fetchBoard = (id) => ({
+const fetchBoard = (id) => ({
   type: ActionTypes.BOARD_FETCH,
   payload: {
     id,
@@ -75,7 +75,7 @@ fetchBoard.failure = (id, error) => ({
   },
 });
 
-export const updateBoard = (id, data) => ({
+const updateBoard = (id, data) => ({
   type: ActionTypes.BOARD_UPDATE,
   payload: {
     id,
@@ -98,14 +98,14 @@ updateBoard.failure = (id, error) => ({
   },
 });
 
-export const handleBoardUpdate = (board) => ({
+const handleBoardUpdate = (board) => ({
   type: ActionTypes.BOARD_UPDATE_HANDLE,
   payload: {
     board,
   },
 });
 
-export const deleteBoard = (id) => ({
+const deleteBoard = (id) => ({
   type: ActionTypes.BOARD_DELETE,
   payload: {
     id,
@@ -127,9 +127,19 @@ deleteBoard.failure = (id, error) => ({
   },
 });
 
-export const handleBoardDelete = (board) => ({
+const handleBoardDelete = (board) => ({
   type: ActionTypes.BOARD_DELETE_HANDLE,
   payload: {
     board,
   },
 });
+
+export default {
+  createBoard,
+  handleBoardCreate,
+  fetchBoard,
+  updateBoard,
+  handleBoardUpdate,
+  deleteBoard,
+  handleBoardDelete,
+};

client/src/actions/cards.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createCard = (card) => ({
+const createCard = (card) => ({
   type: ActionTypes.CARD_CREATE,
   payload: {
     card,
@@ -23,14 +23,14 @@ createCard.failure = (localId, error) => ({
   },
 });
 
-export const handleCardCreate = (card) => ({
+const handleCardCreate = (card) => ({
   type: ActionTypes.CARD_CREATE_HANDLE,
   payload: {
     card,
   },
 });
 
-export const updateCard = (id, data) => ({
+const updateCard = (id, data) => ({
   type: ActionTypes.CARD_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateCard.failure = (id, error) => ({
   },
 });
 
-export const handleCardUpdate = (card) => ({
+const handleCardUpdate = (card) => ({
   type: ActionTypes.CARD_UPDATE_HANDLE,
   payload: {
     card,
   },
 });
 
-export const deleteCard = (id) => ({
+const deleteCard = (id) => ({
   type: ActionTypes.CARD_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteCard.failure = (id, error) => ({
   },
 });
 
-export const handleCardDelete = (card) => ({
+const handleCardDelete = (card) => ({
   type: ActionTypes.CARD_DELETE_HANDLE,
   payload: {
     card,
   },
 });
+
+export default {
+  createCard,
+  handleCardCreate,
+  updateCard,
+  handleCardUpdate,
+  deleteCard,
+  handleCardDelete,
+};

client/src/actions/comment-action.js

@@ -1,69 +0,0 @@
-import ActionTypes from '../constants/ActionTypes';
-
-export const createCommentAction = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE,
-  payload: {
-    action,
-  },
-});
-
-createCommentAction.success = (localId, action) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE__SUCCESS,
-  payload: {
-    localId,
-    action,
-  },
-});
-
-createCommentAction.failure = (localId, error) => ({
-  type: ActionTypes.COMMENT_ACTION_CREATE__FAILURE,
-  payload: {
-    localId,
-    error,
-  },
-});
-
-export const updateCommentAction = (id, data) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-updateCommentAction.success = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE__SUCCESS,
-  payload: {
-    action,
-  },
-});
-
-updateCommentAction.failure = (id, error) => ({
-  type: ActionTypes.COMMENT_ACTION_UPDATE__FAILURE,
-  payload: {
-    id,
-    error,
-  },
-});
-
-export const deleteCommentAction = (id) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE,
-  payload: {
-    id,
-  },
-});
-
-deleteCommentAction.success = (action) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE__SUCCESS,
-  payload: {
-    action,
-  },
-});
-
-deleteCommentAction.failure = (id, error) => ({
-  type: ActionTypes.COMMENT_ACTION_DELETE__FAILURE,
-  payload: {
-    id,
-    error,
-  },
-});

client/src/actions/comment-activities.js

@@ -0,0 +1,75 @@
+import ActionTypes from '../constants/ActionTypes';
+
+const createCommentActivity = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE,
+  payload: {
+    activity,
+  },
+});
+
+createCommentActivity.success = (localId, activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE__SUCCESS,
+  payload: {
+    localId,
+    activity,
+  },
+});
+
+createCommentActivity.failure = (localId, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_CREATE__FAILURE,
+  payload: {
+    localId,
+    error,
+  },
+});
+
+const updateCommentActivity = (id, data) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
+updateCommentActivity.success = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE__SUCCESS,
+  payload: {
+    activity,
+  },
+});
+
+updateCommentActivity.failure = (id, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_UPDATE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+const deleteCommentActivity = (id) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE,
+  payload: {
+    id,
+  },
+});
+
+deleteCommentActivity.success = (activity) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE__SUCCESS,
+  payload: {
+    activity,
+  },
+});
+
+deleteCommentActivity.failure = (id, error) => ({
+  type: ActionTypes.COMMENT_ACTIVITY_DELETE__FAILURE,
+  payload: {
+    id,
+    error,
+  },
+});
+
+export default {
+  createCommentActivity,
+  updateCommentActivity,
+  deleteCommentActivity,
+};

client/src/actions/core.js

@@ -1,7 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
-export const initializeCore = (
+const initializeCore = (
   user,
   board,
   users,
@@ -16,7 +15,7 @@ export const initializeCore = (
   cardLabels,
   tasks,
   attachments,
-  actions,
+  activities,
   notifications,
 ) => ({
   type: ActionTypes.CORE_INITIALIZE,
@@ -35,7 +34,22 @@ export const initializeCore = (
     cardLabels,
     tasks,
     attachments,
-    actions,
+    activities,
     notifications,
   },
 });
+
+const logout = () => ({
+  type: ActionTypes.LOGOUT,
+  payload: {},
+});
+
+logout.invalidateAccessToken = () => ({
+  type: ActionTypes.LOGOUT__ACCESS_TOKEN_INVALIDATE,
+  payload: {},
+});
+
+export default {
+  initializeCore,
+  logout,
+};

client/src/actions/entry/action.js

@@ -1,22 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleActionCreate = (action) => ({
-  type: EntryActionTypes.ACTION_CREATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionUpdate = (action) => ({
-  type: EntryActionTypes.ACTION_UPDATE_HANDLE,
-  payload: {
-    action,
-  },
-});
-
-export const handleActionDelete = (action) => ({
-  type: EntryActionTypes.ACTION_DELETE_HANDLE,
-  payload: {
-    action,
-  },
-});

client/src/actions/entry/actions.js

@@ -1,13 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const fetchActionsInCurrentCard = () => ({
-  type: EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH,
-  payload: {},
-});
-
-export const toggleActionsDetailsInCurrentCard = (isVisible) => ({
-  type: EntryActionTypes.ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE,
-  payload: {
-    isVisible,
-  },
-});

client/src/actions/entry/board-membership.js

@@ -1,29 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createMembershipInCurrentBoard = (data) => ({
-  type: EntryActionTypes.MEMBERSHIP_IN_CURRENT_BOARD_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleBoardMembershipCreate = (boardMembership) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_CREATE_HANDLE,
-  payload: {
-    boardMembership,
-  },
-});
-
-export const deleteBoardMembership = (id) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleBoardMembershipDelete = (boardMembership) => ({
-  type: EntryActionTypes.BOARD_MEMBERSHIP_DELETE_HANDLE,
-  payload: {
-    boardMembership,
-  },
-});

client/src/actions/entry/comment-action.js

@@ -1,23 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createCommentActionInCurrentCard = (data) => ({
-  type: EntryActionTypes.COMMENT_ACTION_IN_CURRENT_CARD_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const updateCommentAction = (id, data) => ({
-  type: EntryActionTypes.COMMENT_ACTION_UPDATE,
-  payload: {
-    id,
-    data,
-  },
-});
-
-export const deleteCommentAction = (id) => ({
-  type: EntryActionTypes.COMMENT_ACTION_DELETE,
-  payload: {
-    id,
-  },
-});

client/src/actions/entry/core.js

@@ -1,7 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-// eslint-disable-next-line import/prefer-default-export
-export const initializeCore = () => ({
-  type: EntryActionTypes.CORE_INITIALIZE,
-  payload: {},
-});

client/src/actions/entry/index.js

@@ -1,18 +0,0 @@
-export * from './socket';
-export * from './login';
-export * from './core';
-export * from './modal';
-export * from './user';
-export * from './project';
-export * from './project-manager';
-export * from './board';
-export * from './board-membership';
-export * from './label';
-export * from './list';
-export * from './card';
-export * from './task';
-export * from './attachment';
-export * from './actions';
-export * from './action';
-export * from './comment-action';
-export * from './notification';

client/src/actions/entry/login.js

@@ -1,18 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const authenticate = (data) => ({
-  type: EntryActionTypes.AUTHENTICATE,
-  payload: {
-    data,
-  },
-});
-
-export const clearAuthenticateError = () => ({
-  type: EntryActionTypes.AUTHENTICATE_ERROR_CLEAR,
-  payload: {},
-});
-
-export const logout = () => ({
-  type: EntryActionTypes.LOGOUT,
-  payload: {},
-});

client/src/actions/entry/notification.js

@@ -1,22 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleNotificationCreate = (notification) => ({
-  type: EntryActionTypes.NOTIFICATION_CREATE_HANDLE,
-  payload: {
-    notification,
-  },
-});
-
-export const deleteNotification = (id) => ({
-  type: EntryActionTypes.NOTIFICATION_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleNotificationDelete = (notification) => ({
-  type: EntryActionTypes.NOTIFICATION_DELETE_HANDLE,
-  payload: {
-    notification,
-  },
-});

client/src/actions/entry/project-manager.js

@@ -1,29 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const createManagerInCurrentProject = (data) => ({
-  type: EntryActionTypes.MANAGER_IN_CURRENT_PROJECT_CREATE,
-  payload: {
-    data,
-  },
-});
-
-export const handleProjectManagerCreate = (projectManager) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_CREATE_HANDLE,
-  payload: {
-    projectManager,
-  },
-});
-
-export const deleteProjectManager = (id) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_DELETE,
-  payload: {
-    id,
-  },
-});
-
-export const handleProjectManagerDelete = (projectManager) => ({
-  type: EntryActionTypes.PROJECT_MANAGER_DELETE_HANDLE,
-  payload: {
-    projectManager,
-  },
-});

client/src/actions/entry/socket.js

@@ -1,11 +0,0 @@
-import EntryActionTypes from '../../constants/EntryActionTypes';
-
-export const handleSocketDisconnect = () => ({
-  type: EntryActionTypes.SOCKET_DISCONNECT_HANDLE,
-  payload: {},
-});
-
-export const handleSocketReconnect = () => ({
-  type: EntryActionTypes.SOCKET_RECONNECT_HANDLE,
-  payload: {},
-});

client/src/actions/index.js

@@ -1,19 +1,39 @@
-export * from './router';
-export * from './socket';
-export * from './login';
-export * from './core';
-export * from './modal';
-export * from './user';
-export * from './project';
-export * from './project-manager';
-export * from './board';
-export * from './board-membership';
-export * from './label';
-export * from './list';
-export * from './card';
-export * from './task';
-export * from './attachment';
-export * from './actions';
-export * from './action';
-export * from './comment-action';
-export * from './notification';
+import router from './router';
+import socket from './socket';
+import login from './login';
+import core from './core';
+import modals from './modals';
+import users from './users';
+import projects from './projects';
+import projectManagers from './project-managers';
+import boards from './boards';
+import boardMemberships from './board-memberships';
+import labels from './labels';
+import lists from './lists';
+import cards from './cards';
+import tasks from './tasks';
+import attachments from './attachments';
+import activities from './activities';
+import commentActivities from './comment-activities';
+import notifications from './notifications';
+
+export default {
+  ...router,
+  ...socket,
+  ...login,
+  ...core,
+  ...modals,
+  ...users,
+  ...projects,
+  ...projectManagers,
+  ...boards,
+  ...boardMemberships,
+  ...labels,
+  ...lists,
+  ...cards,
+  ...tasks,
+  ...attachments,
+  ...activities,
+  ...commentActivities,
+  ...notifications,
+};

client/src/actions/labels.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createLabel = (label) => ({
+const createLabel = (label) => ({
   type: ActionTypes.LABEL_CREATE,
   payload: {
     label,
@@ -23,14 +23,14 @@ createLabel.failure = (localId, error) => ({
   },
 });
 
-export const handleLabelCreate = (label) => ({
+const handleLabelCreate = (label) => ({
   type: ActionTypes.LABEL_CREATE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const updateLabel = (id, data) => ({
+const updateLabel = (id, data) => ({
   type: ActionTypes.LABEL_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateLabel.failure = (id, error) => ({
   },
 });
 
-export const handleLabelUpdate = (label) => ({
+const handleLabelUpdate = (label) => ({
   type: ActionTypes.LABEL_UPDATE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const deleteLabel = (id) => ({
+const deleteLabel = (id) => ({
   type: ActionTypes.LABEL_DELETE,
   payload: {
     id,
@@ -82,14 +82,14 @@ deleteLabel.failure = (id, error) => ({
   },
 });
 
-export const handleLabelDelete = (label) => ({
+const handleLabelDelete = (label) => ({
   type: ActionTypes.LABEL_DELETE_HANDLE,
   payload: {
     label,
   },
 });
 
-export const addLabelToCard = (id, cardId) => ({
+const addLabelToCard = (id, cardId) => ({
   type: ActionTypes.LABEL_TO_CARD_ADD,
   payload: {
     id,
@@ -113,14 +113,14 @@ addLabelToCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleLabelToCardAdd = (cardLabel) => ({
+const handleLabelToCardAdd = (cardLabel) => ({
   type: ActionTypes.LABEL_TO_CARD_ADD_HANDLE,
   payload: {
     cardLabel,
   },
 });
 
-export const removeLabelFromCard = (id, cardId) => ({
+const removeLabelFromCard = (id, cardId) => ({
   type: ActionTypes.LABEL_FROM_CARD_REMOVE,
   payload: {
     id,
@@ -144,14 +144,14 @@ removeLabelFromCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleLabelFromCardRemove = (cardLabel) => ({
+const handleLabelFromCardRemove = (cardLabel) => ({
   type: ActionTypes.LABEL_FROM_CARD_REMOVE_HANDLE,
   payload: {
     cardLabel,
   },
 });
 
-export const addLabelToBoardFilter = (id, boardId) => ({
+const addLabelToBoardFilter = (id, boardId) => ({
   type: ActionTypes.LABEL_TO_BOARD_FILTER_ADD,
   payload: {
     id,
@@ -159,10 +159,25 @@ export const addLabelToBoardFilter = (id, boardId) => ({
   },
 });
 
-export const removeLabelFromBoardFilter = (id, boardId) => ({
+const removeLabelFromBoardFilter = (id, boardId) => ({
   type: ActionTypes.LABEL_FROM_BOARD_FILTER_REMOVE,
   payload: {
     id,
     boardId,
   },
 });
+
+export default {
+  createLabel,
+  handleLabelCreate,
+  updateLabel,
+  handleLabelUpdate,
+  deleteLabel,
+  handleLabelDelete,
+  addLabelToCard,
+  handleLabelToCardAdd,
+  removeLabelFromCard,
+  handleLabelFromCardRemove,
+  addLabelToBoardFilter,
+  removeLabelFromBoardFilter,
+};

client/src/actions/lists.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createList = (list) => ({
+const createList = (list) => ({
   type: ActionTypes.LIST_CREATE,
   payload: {
     list,
@@ -23,14 +23,14 @@ createList.failure = (localId, error) => ({
   },
 });
 
-export const handleListCreate = (list) => ({
+const handleListCreate = (list) => ({
   type: ActionTypes.LIST_CREATE_HANDLE,
   payload: {
     list,
   },
 });
 
-export const updateList = (id, data) => ({
+const updateList = (id, data) => ({
   type: ActionTypes.LIST_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateList.failure = (id, error) => ({
   },
 });
 
-export const handleListUpdate = (list) => ({
+const handleListUpdate = (list) => ({
   type: ActionTypes.LIST_UPDATE_HANDLE,
   payload: {
     list,
   },
 });
 
-export const deleteList = (id) => ({
+const deleteList = (id) => ({
   type: ActionTypes.LIST_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteList.failure = (id, error) => ({
   },
 });
 
-export const handleListDelete = (list) => ({
+const handleListDelete = (list) => ({
   type: ActionTypes.LIST_DELETE_HANDLE,
   payload: {
     list,
   },
 });
+
+export default {
+  createList,
+  handleListCreate,
+  updateList,
+  handleListUpdate,
+  deleteList,
+  handleListDelete,
+};

client/src/actions/login.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const authenticate = (data) => ({
+const authenticate = (data) => ({
   type: ActionTypes.AUTHENTICATE,
   payload: {
     data,
@@ -21,12 +21,12 @@ authenticate.failure = (error) => ({
   },
 });
 
-export const clearAuthenticateError = () => ({
+const clearAuthenticateError = () => ({
   type: ActionTypes.AUTHENTICATE_ERROR_CLEAR,
   payload: {},
 });
 
-export const logout = () => ({
-  type: ActionTypes.LOGOUT,
-  payload: {},
-});
+export default {
+  authenticate,
+  clearAuthenticateError,
+};

client/src/actions/modals.js

@@ -1,13 +1,18 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const openModal = (type) => ({
+const openModal = (type) => ({
   type: ActionTypes.MODAL_OPEN,
   payload: {
     type,
   },
 });
 
-export const closeModal = () => ({
+const closeModal = () => ({
   type: ActionTypes.MODAL_CLOSE,
   payload: {},
 });
+
+export default {
+  openModal,
+  closeModal,
+};

client/src/actions/notifications.js

@@ -1,16 +1,16 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const handleNotificationCreate = (notification, users, cards, actions) => ({
+const handleNotificationCreate = (notification, users, cards, activities) => ({
   type: ActionTypes.NOTIFICATION_CREATE_HANDLE,
   payload: {
     notification,
     users,
     cards,
-    actions,
+    activities,
   },
 });
 
-export const deleteNotification = (id) => ({
+const deleteNotification = (id) => ({
   type: ActionTypes.NOTIFICATION_DELETE,
   payload: {
     id,
@@ -32,9 +32,15 @@ deleteNotification.failure = (id, error) => ({
   },
 });
 
-export const handleNotificationDelete = (notification) => ({
+const handleNotificationDelete = (notification) => ({
   type: ActionTypes.NOTIFICATION_DELETE_HANDLE,
   payload: {
     notification,
   },
 });
+
+export default {
+  handleNotificationCreate,
+  deleteNotification,
+  handleNotificationDelete,
+};

client/src/actions/project-managers.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createProjectManager = (projectManager) => ({
+const createProjectManager = (projectManager) => ({
   type: ActionTypes.PROJECT_MANAGER_CREATE,
   payload: {
     projectManager,
@@ -23,7 +23,7 @@ createProjectManager.failure = (localId, error) => ({
   },
 });
 
-export const handleProjectManagerCreate = (
+const handleProjectManagerCreate = (
   projectManager,
   project,
   board,
@@ -38,6 +38,7 @@ export const handleProjectManagerCreate = (
   cardLabels,
   tasks,
   attachments,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.PROJECT_MANAGER_CREATE_HANDLE,
   payload: {
@@ -55,6 +56,7 @@ export const handleProjectManagerCreate = (
     cardLabels,
     tasks,
     attachments,
+    deletedNotifications,
   },
 });
 
@@ -67,7 +69,7 @@ handleProjectManagerCreate.fetchProject = (id, currentUserId, currentBoardId) =>
   },
 });
 
-export const deleteProjectManager = (id, isCurrentUser, isCurrentProject) => ({
+const deleteProjectManager = (id, isCurrentUser, isCurrentProject) => ({
   type: ActionTypes.PROJECT_MANAGER_DELETE,
   payload: {
     id,
@@ -91,7 +93,7 @@ deleteProjectManager.failure = (id, error) => ({
   },
 });
 
-export const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurrentProject) => ({
+const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurrentProject) => ({
   type: ActionTypes.PROJECT_MANAGER_DELETE_HANDLE,
   payload: {
     projectManager,
@@ -99,3 +101,10 @@ export const handleProjectManagerDelete = (projectManager, isCurrentUser, isCurr
     isCurrentProject,
   },
 });
+
+export default {
+  createProjectManager,
+  handleProjectManagerCreate,
+  deleteProjectManager,
+  handleProjectManagerDelete,
+};

client/src/actions/projects.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createProject = (data) => ({
+const createProject = (data) => ({
   type: ActionTypes.PROJECT_CREATE,
   payload: {
     data,
@@ -22,7 +22,7 @@ createProject.failure = (error) => ({
   },
 });
 
-export const handleProjectCreate = (project, users, projectManagers, boards, boardMemberships) => ({
+const handleProjectCreate = (project, users, projectManagers, boards, boardMemberships) => ({
   type: ActionTypes.PROJECT_CREATE_HANDLE,
   payload: {
     project,
@@ -33,7 +33,7 @@ export const handleProjectCreate = (project, users, projectManagers, boards, boa
   },
 });
 
-export const updateProject = (id, data) => ({
+const updateProject = (id, data) => ({
   type: ActionTypes.PROJECT_UPDATE,
   payload: {
     id,
@@ -56,14 +56,14 @@ updateProject.failure = (id, error) => ({
   },
 });
 
-export const handleProjectUpdate = (project) => ({
+const handleProjectUpdate = (project) => ({
   type: ActionTypes.PROJECT_UPDATE_HANDLE,
   payload: {
     project,
   },
 });
 
-export const updateProjectBackgroundImage = (id) => ({
+const updateProjectBackgroundImage = (id) => ({
   type: ActionTypes.PROJECT_BACKGROUND_IMAGE_UPDATE,
   payload: {
     id,
@@ -85,7 +85,7 @@ updateProjectBackgroundImage.failure = (id, error) => ({
   },
 });
 
-export const deleteProject = (id) => ({
+const deleteProject = (id) => ({
   type: ActionTypes.PROJECT_DELETE,
   payload: {
     id,
@@ -107,9 +107,19 @@ deleteProject.failure = (id, error) => ({
   },
 });
 
-export const handleProjectDelete = (project) => ({
+const handleProjectDelete = (project) => ({
   type: ActionTypes.PROJECT_DELETE_HANDLE,
   payload: {
     project,
   },
 });
+
+export default {
+  createProject,
+  handleProjectCreate,
+  updateProject,
+  handleProjectUpdate,
+  updateProjectBackgroundImage,
+  deleteProject,
+  handleProjectDelete,
+};

client/src/actions/router.js

@@ -1,7 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-// eslint-disable-next-line import/prefer-default-export
-export const handleLocationChange = (
+const handleLocationChange = (
   board,
   users,
   projects,
@@ -13,7 +12,7 @@ export const handleLocationChange = (
   cardLabels,
   tasks,
   attachments,
-  notifications,
+  deletedNotifications,
 ) => ({
   type: ActionTypes.LOCATION_CHANGE_HANDLE,
   payload: {
@@ -28,7 +27,7 @@ export const handleLocationChange = (
     cardLabels,
     tasks,
     attachments,
-    notifications,
+    deletedNotifications,
   },
 });
 
@@ -38,3 +37,7 @@ handleLocationChange.fetchBoard = (id) => ({
     id,
   },
 });
+
+export default {
+  handleLocationChange,
+};

client/src/actions/socket.js

@@ -1,11 +1,11 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const handleSocketDisconnect = () => ({
+const handleSocketDisconnect = () => ({
   type: ActionTypes.SOCKET_DISCONNECT_HANDLE,
   payload: {},
 });
 
-export const handleSocketReconnect = (
+const handleSocketReconnect = (
   user,
   board,
   users,
@@ -20,7 +20,7 @@ export const handleSocketReconnect = (
   cardLabels,
   tasks,
   attachments,
-  actions,
+  activities,
   notifications,
 ) => ({
   type: ActionTypes.SOCKET_RECONNECT_HANDLE,
@@ -39,7 +39,7 @@ export const handleSocketReconnect = (
     cardLabels,
     tasks,
     attachments,
-    actions,
+    activities,
     notifications,
   },
 });
@@ -51,3 +51,8 @@ handleSocketReconnect.fetchCore = (currentUserId, currentBoardId) => ({
     currentBoardId,
   },
 });
+
+export default {
+  handleSocketDisconnect,
+  handleSocketReconnect,
+};

client/src/actions/tasks.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createTask = (task) => ({
+const createTask = (task) => ({
   type: ActionTypes.TASK_CREATE,
   payload: {
     task,
@@ -23,14 +23,14 @@ createTask.failure = (localId, error) => ({
   },
 });
 
-export const handleTaskCreate = (task) => ({
+const handleTaskCreate = (task) => ({
   type: ActionTypes.TASK_CREATE_HANDLE,
   payload: {
     task,
   },
 });
 
-export const updateTask = (id, data) => ({
+const updateTask = (id, data) => ({
   type: ActionTypes.TASK_UPDATE,
   payload: {
     id,
@@ -53,14 +53,14 @@ updateTask.failure = (id, error) => ({
   },
 });
 
-export const handleTaskUpdate = (task) => ({
+const handleTaskUpdate = (task) => ({
   type: ActionTypes.TASK_UPDATE_HANDLE,
   payload: {
     task,
   },
 });
 
-export const deleteTask = (id) => ({
+const deleteTask = (id) => ({
   type: ActionTypes.TASK_DELETE,
   payload: {
     id,
@@ -82,9 +82,18 @@ deleteTask.failure = (id, error) => ({
   },
 });
 
-export const handleTaskDelete = (task) => ({
+const handleTaskDelete = (task) => ({
   type: ActionTypes.TASK_DELETE_HANDLE,
   payload: {
     task,
   },
 });
+
+export default {
+  createTask,
+  handleTaskCreate,
+  updateTask,
+  handleTaskUpdate,
+  deleteTask,
+  handleTaskDelete,
+};

client/src/actions/users.js

@@ -1,6 +1,6 @@
 import ActionTypes from '../constants/ActionTypes';
 
-export const createUser = (data) => ({
+const createUser = (data) => ({
   type: ActionTypes.USER_CREATE,
   payload: {
     data,
@@ -21,19 +21,19 @@ createUser.failure = (error) => ({
   },
 });
 
-export const handleUserCreate = (user) => ({
+const handleUserCreate = (user) => ({
   type: ActionTypes.USER_CREATE_HANDLE,
   payload: {
     user,
   },
 });
 
-export const clearUserCreateError = () => ({
+const clearUserCreateError = () => ({
   type: ActionTypes.USER_CREATE_ERROR_CLEAR,
   payload: {},
 });
 
-export const updateUser = (id, data) => ({
+const updateUser = (id, data) => ({
   type: ActionTypes.USER_UPDATE,
   payload: {
     id,
@@ -56,7 +56,7 @@ updateUser.failure = (id, error) => ({
   },
 });
 
-export const handleUserUpdate = (user, users, isCurrent) => ({
+const handleUserUpdate = (user, users, isCurrent) => ({
   type: ActionTypes.USER_UPDATE_HANDLE,
   payload: {
     user,
@@ -65,7 +65,7 @@ export const handleUserUpdate = (user, users, isCurrent) => ({
   },
 });
 
-export const updateUserEmail = (id, data) => ({
+const updateUserEmail = (id, data) => ({
   type: ActionTypes.USER_EMAIL_UPDATE,
   payload: {
     id,
@@ -88,14 +88,14 @@ updateUserEmail.failure = (id, error) => ({
   },
 });
 
-export const clearUserEmailUpdateError = (id) => ({
+const clearUserEmailUpdateError = (id) => ({
   type: ActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserPassword = (id, data) => ({
+const updateUserPassword = (id, data) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE,
   payload: {
     id,
@@ -103,10 +103,11 @@ export const updateUserPassword = (id, data) => ({
   },
 });
 
-updateUserPassword.success = (user) => ({
+updateUserPassword.success = (user, accessToken) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE__SUCCESS,
   payload: {
     user,
+    accessToken,
   },
 });
 
@@ -118,14 +119,14 @@ updateUserPassword.failure = (id, error) => ({
   },
 });
 
-export const clearUserPasswordUpdateError = (id) => ({
+const clearUserPasswordUpdateError = (id) => ({
   type: ActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserUsername = (id, data) => ({
+const updateUserUsername = (id, data) => ({
   type: ActionTypes.USER_USERNAME_UPDATE,
   payload: {
     id,
@@ -148,14 +149,14 @@ updateUserUsername.failure = (id, error) => ({
   },
 });
 
-export const clearUserUsernameUpdateError = (id) => ({
+const clearUserUsernameUpdateError = (id) => ({
   type: ActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR,
   payload: {
     id,
   },
 });
 
-export const updateUserAvatar = (id) => ({
+const updateUserAvatar = (id) => ({
   type: ActionTypes.USER_AVATAR_UPDATE,
   payload: {
     id,
@@ -177,7 +178,7 @@ updateUserAvatar.failure = (id, error) => ({
   },
 });
 
-export const deleteUser = (id) => ({
+const deleteUser = (id) => ({
   type: ActionTypes.USER_DELETE,
   payload: {
     id,
@@ -199,14 +200,14 @@ deleteUser.failure = (id, error) => ({
   },
 });
 
-export const handleUserDelete = (user) => ({
+const handleUserDelete = (user) => ({
   type: ActionTypes.USER_DELETE_HANDLE,
   payload: {
     user,
   },
 });
 
-export const addUserToCard = (id, cardId, isCurrent) => ({
+const addUserToCard = (id, cardId, isCurrent) => ({
   type: ActionTypes.USER_TO_CARD_ADD,
   payload: {
     id,
@@ -231,14 +232,14 @@ addUserToCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleUserToCardAdd = (cardMembership) => ({
+const handleUserToCardAdd = (cardMembership) => ({
   type: ActionTypes.USER_TO_CARD_ADD_HANDLE,
   payload: {
     cardMembership,
   },
 });
 
-export const removeUserFromCard = (id, cardId) => ({
+const removeUserFromCard = (id, cardId) => ({
   type: ActionTypes.USER_FROM_CARD_REMOVE,
   payload: {
     id,
@@ -262,14 +263,14 @@ removeUserFromCard.failure = (id, cardId, error) => ({
   },
 });
 
-export const handleUserFromCardRemove = (cardMembership) => ({
+const handleUserFromCardRemove = (cardMembership) => ({
   type: ActionTypes.USER_FROM_CARD_REMOVE_HANDLE,
   payload: {
     cardMembership,
   },
 });
 
-export const addUserToBoardFilter = (id, boardId) => ({
+const addUserToBoardFilter = (id, boardId) => ({
   type: ActionTypes.USER_TO_BOARD_FILTER_ADD,
   payload: {
     id,
@@ -277,10 +278,33 @@ export const addUserToBoardFilter = (id, boardId) => ({
   },
 });
 
-export const removeUserFromBoardFilter = (id, boardId) => ({
+const removeUserFromBoardFilter = (id, boardId) => ({
   type: ActionTypes.USER_FROM_BOARD_FILTER_REMOVE,
   payload: {
     id,
     boardId,
   },
 });
+
+export default {
+  createUser,
+  handleUserCreate,
+  clearUserCreateError,
+  updateUser,
+  handleUserUpdate,
+  updateUserEmail,
+  clearUserEmailUpdateError,
+  updateUserPassword,
+  clearUserPasswordUpdateError,
+  updateUserUsername,
+  clearUserUsernameUpdateError,
+  updateUserAvatar,
+  deleteUser,
+  handleUserDelete,
+  addUserToCard,
+  handleUserToCardAdd,
+  removeUserFromCard,
+  handleUserFromCardRemove,
+  addUserToBoardFilter,
+  removeUserFromBoardFilter,
+};

client/src/api/access-tokens.js

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

client/src/api/actions.js

@@ -1,36 +0,0 @@
-import socket from './socket';
-
-/* Transformers */
-
-export const transformAction = (action) => ({
-  ...action,
-  createdAt: new Date(action.createdAt),
-});
-
-/* Actions */
-
-const getActions = (cardId, data) =>
-  socket.get(`/cards/${cardId}/actions`, data).then((body) => ({
-    ...body,
-    items: body.items.map(transformAction),
-  }));
-
-/* Event handlers */
-
-const makeHandleActionCreate = (next) => (body) => {
-  next({
-    ...body,
-    item: transformAction(body.item),
-  });
-};
-
-const makeHandleActionUpdate = makeHandleActionCreate;
-
-const makeHandleActionDelete = makeHandleActionCreate;
-
-export default {
-  getActions,
-  makeHandleActionCreate,
-  makeHandleActionUpdate,
-  makeHandleActionDelete,
-};

client/src/api/activities.js

@@ -0,0 +1,36 @@
+import socket from './socket';
+
+/* Transformers */
+
+export const transformActivity = (activity) => ({
+  ...activity,
+  createdAt: new Date(activity.createdAt),
+});
+
+/* Actions */
+
+const getActivities = (cardId, data, headers) =>
+  socket.get(`/cards/${cardId}/actions`, data, headers).then((body) => ({
+    ...body,
+    items: body.items.map(transformActivity),
+  }));
+
+/* Event handlers */
+
+const makeHandleActivityCreate = (next) => (body) => {
+  next({
+    ...body,
+    item: transformActivity(body.item),
+  });
+};
+
+const makeHandleActivityUpdate = makeHandleActivityCreate;
+
+const makeHandleActivityDelete = makeHandleActivityCreate;
+
+export default {
+  getActivities,
+  makeHandleActivityCreate,
+  makeHandleActivityUpdate,
+  makeHandleActivityDelete,
+};

client/src/api/attachments.js

@@ -10,20 +10,20 @@ export const transformAttachment = (attachment) => ({
 
 /* Actions */
 
-const createAttachment = (cardId, data, requestId) =>
-  http.post(`/cards/${cardId}/attachments?requestId=${requestId}`, data).then((body) => ({
+const createAttachment = (cardId, data, requestId, headers) =>
+  http.post(`/cards/${cardId}/attachments?requestId=${requestId}`, data, headers).then((body) => ({
     ...body,
     item: transformAttachment(body.item),
   }));
 
-const updateAttachment = (id, data) =>
-  socket.patch(`/attachments/${id}`, data).then((body) => ({
+const updateAttachment = (id, data, headers) =>
+  socket.patch(`/attachments/${id}`, data, headers).then((body) => ({
     ...body,
     item: transformAttachment(body.item),
   }));
 
-const deleteAttachment = (id) =>
-  socket.delete(`/attachments/${id}`).then((body) => ({
+const deleteAttachment = (id, headers) =>
+  socket.delete(`/attachments/${id}`, undefined, headers).then((body) => ({
     ...body,
     item: transformAttachment(body.item),
   }));

client/src/api/board-memberships.js

@@ -2,12 +2,17 @@ import socket from './socket';
 
 /* Actions */
 
-const createBoardMembership = (boardId, data) =>
-  socket.post(`/boards/${boardId}/memberships`, data);
+const createBoardMembership = (boardId, data, headers) =>
+  socket.post(`/boards/${boardId}/memberships`, data, headers);
 
-const deleteBoardMembership = (id) => socket.delete(`/board-memberships/${id}`);
+const updateBoardMembership = (id, data, headers) =>
+  socket.patch(`/board-memberships/${id}`, data, headers);
+
+const deleteBoardMembership = (id, headers) =>
+  socket.delete(`/board-memberships/${id}`, undefined, headers);
 
 export default {
   createBoardMembership,
+  updateBoardMembership,
   deleteBoardMembership,
 };

client/src/api/boards.js

@@ -4,10 +4,11 @@ import { transformAttachment } from './attachments';
 
 /* Actions */
 
-const createBoard = (projectId, data) => socket.post(`/projects/${projectId}/boards`, data);
+const createBoard = (projectId, data, headers) =>
+  socket.post(`/projects/${projectId}/boards`, data, headers);
 
-const getBoard = (id) =>
-  socket.get(`/boards/${id}`).then((body) => ({
+const getBoard = (id, headers) =>
+  socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
     ...body,
     included: {
       ...body.included,
@@ -16,9 +17,9 @@ const getBoard = (id) =>
     },
   }));
 
-const updateBoard = (id, data) => socket.patch(`/boards/${id}`, data);
+const updateBoard = (id, data, headers) => socket.patch(`/boards/${id}`, data, headers);
 
-const deleteBoard = (id) => socket.delete(`/boards/${id}`);
+const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, headers);
 
 export default {
   createBoard,

client/src/api/card-labels.js

@@ -2,9 +2,11 @@ import socket from './socket';
 
 /* Actions */
 
-const createCardLabel = (cardId, data) => socket.post(`/cards/${cardId}/labels`, data);
+const createCardLabel = (cardId, data, headers) =>
+  socket.post(`/cards/${cardId}/labels`, data, headers);
 
-const deleteCardLabel = (cardId, labelId) => socket.delete(`/cards/${cardId}/labels/${labelId}`);
+const deleteCardLabel = (cardId, labelId, headers) =>
+  socket.delete(`/cards/${cardId}/labels/${labelId}`, undefined, headers);
 
 export default {
   createCardLabel,

client/src/api/card-memberships.js

@@ -2,10 +2,11 @@ import socket from './socket';
 
 /* Actions */
 
-const createCardMembership = (cardId, data) => socket.post(`/cards/${cardId}/memberships`, data);
+const createCardMembership = (cardId, data, headers) =>
+  socket.post(`/cards/${cardId}/memberships`, data, headers);
 
-const deleteCardMembership = (cardId, userId) =>
-  socket.delete(`/cards/${cardId}/memberships?userId=${userId}`);
+const deleteCardMembership = (cardId, userId, headers) =>
+  socket.delete(`/cards/${cardId}/memberships?userId=${userId}`, undefined, headers);
 
 export default {
   createCardMembership,

client/src/api/cards.js

@@ -35,8 +35,8 @@ export const transformCardData = (data) => ({
 
 /* Actions */
 
-const getCards = (boardId, data) =>
-  socket.get(`/board/${boardId}/cards`, data).then((body) => ({
+const getCards = (boardId, data, headers) =>
+  socket.get(`/board/${boardId}/cards`, data, headers).then((body) => ({
     ...body,
     items: body.items.map(transformCard),
     included: {
@@ -45,26 +45,26 @@ const getCards = (boardId, data) =>
     },
   }));
 
-const createCard = (boardId, data) =>
-  socket.post(`/boards/${boardId}/cards`, transformCardData(data)).then((body) => ({
+const createCard = (boardId, data, headers) =>
+  socket.post(`/boards/${boardId}/cards`, transformCardData(data), headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
 
-const getCard = (id) =>
-  socket.get(`/cards/${id}`).then((body) => ({
+const getCard = (id, headers) =>
+  socket.get(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
 
-const updateCard = (id, data) =>
-  socket.patch(`/cards/${id}`, transformCardData(data)).then((body) => ({
+const updateCard = (id, data, headers) =>
+  socket.patch(`/cards/${id}`, transformCardData(data), headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
 
-const deleteCard = (id) =>
-  socket.delete(`/cards/${id}`).then((body) => ({
+const deleteCard = (id, headers) =>
+  socket.delete(`/cards/${id}`, undefined, headers).then((body) => ({
     ...body,
     item: transformCard(body.item),
   }));
@@ -78,14 +78,9 @@ const makeHandleCardCreate = (next) => (body) => {
   });
 };
 
-const makeHandleCardUpdate = (next) => (body) => {
-  next({
-    ...body,
-    item: transformCard(body.item),
-  });
-};
+const makeHandleCardUpdate = makeHandleCardCreate;
 
-const makeHandleCardDelete = makeHandleCardUpdate;
+const makeHandleCardDelete = makeHandleCardCreate;
 
 export default {
   getCards,

client/src/api/comment-actions.js

@@ -1,28 +0,0 @@
-import socket from './socket';
-import { transformAction } from './actions';
-
-/* Actions */
-
-const createCommentAction = (cardId, data) =>
-  socket.post(`/cards/${cardId}/comment-actions`, data).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-const updateCommentAction = (id, data) =>
-  socket.patch(`/comment-actions/${id}`, data).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-const deleteCommentAction = (id) =>
-  socket.delete(`/comment-actions/${id}`).then((body) => ({
-    ...body,
-    item: transformAction(body.item),
-  }));
-
-export default {
-  createCommentAction,
-  updateCommentAction,
-  deleteCommentAction,
-};

client/src/api/comment-activities.js

@@ -0,0 +1,28 @@
+import socket from './socket';
+import { transformActivity } from './activities';
+
+/* Actions */
+
+const createCommentActivity = (cardId, data, headers) =>
+  socket.post(`/cards/${cardId}/comment-actions`, data, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+const updateCommentActivity = (id, data, headers) =>
+  socket.patch(`/comment-actions/${id}`, data, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+const deleteCommentActivity = (id, headers) =>
+  socket.delete(`/comment-actions/${id}`, undefined, headers).then((body) => ({
+    ...body,
+    item: transformActivity(body.item),
+  }));
+
+export default {
+  createCommentActivity,
+  updateCommentActivity,
+  deleteCommentActivity,
+};

client/src/api/http.js

@@ -6,7 +6,7 @@ const http = {};
 
 // TODO: add all methods
 ['POST'].forEach((method) => {
-  http[method.toLowerCase()] = (url, data) => {
+  http[method.toLowerCase()] = (url, data, headers) => {
     const formData = Object.keys(data).reduce((result, key) => {
       result.append(key, data[key]);
 
@@ -15,8 +15,8 @@ const http = {};
 
     return fetch(`${Config.SERVER_BASE_URL}/api${url}`, {
       method,
+      headers,
       body: formData,
-      ...Config.FETCH_OPTIONS,
     })
       .then((response) =>
         response.json().then((body) => ({

client/src/api/index.js

@@ -13,8 +13,8 @@ import cardMemberships from './card-memberships';
 import cardLabels from './card-labels';
 import tasks from './tasks';
 import attachments from './attachments';
-import actions from './actions';
-import commentActions from './comment-actions';
+import activities from './activities';
+import commentActivities from './comment-activities';
 import notifications from './notifications';
 
 export { http, socket };
@@ -33,7 +33,7 @@ export default {
   ...cardLabels,
   ...tasks,
   ...attachments,
-  ...actions,
-  ...commentActions,
+  ...activities,
+  ...commentActivities,
   ...notifications,
 };

client/src/api/labels.js

@@ -2,11 +2,12 @@ import socket from './socket';
 
 /* Actions */
 
-const createLabel = (boardId, data) => socket.post(`/boards/${boardId}/labels`, data);
+const createLabel = (boardId, data, headers) =>
+  socket.post(`/boards/${boardId}/labels`, data, headers);
 
-const updateLabel = (id, data) => socket.patch(`/labels/${id}`, data);
+const updateLabel = (id, data, headers) => socket.patch(`/labels/${id}`, data, headers);
 
-const deleteLabel = (id) => socket.delete(`/labels/${id}`);
+const deleteLabel = (id, headers) => socket.delete(`/labels/${id}`, undefined, headers);
 
 export default {
   createLabel,

client/src/api/lists.js

@@ -2,11 +2,12 @@ import socket from './socket';
 
 /* Actions */
 
-const createList = (boardId, data) => socket.post(`/boards/${boardId}/lists`, data);
+const createList = (boardId, data, headers) =>
+  socket.post(`/boards/${boardId}/lists`, data, headers);
 
-const updateList = (id, data) => socket.patch(`/lists/${id}`, data);
+const updateList = (id, data, headers) => socket.patch(`/lists/${id}`, data, headers);
 
-const deleteList = (id) => socket.delete(`/lists/${id}`);
+const deleteList = (id, headers) => socket.delete(`/lists/${id}`, undefined, headers);
 
 export default {
   createList,

client/src/api/notifications.js

@@ -1,33 +1,61 @@
+import omit from 'lodash/omit';
+
 import socket from './socket';
 import { transformCard } from './cards';
-import { transformAction } from './actions';
+import { transformActivity } from './activities';
+
+/* Transformers */
+
+export const transformNotification = (notification) => ({
+  ...omit(notification, 'actionId'),
+  activityId: notification.actionId,
+});
 
 /* Actions */
 
-const getNotifications = () =>
-  socket.get('/notifications').then((body) => ({
+const getNotifications = (headers) =>
+  socket.get('/notifications', undefined, headers).then((body) => ({
     ...body,
+    items: body.items.map(transformNotification),
     included: {
-      ...body.included,
+      ...omit(body.included, 'actions'),
       cards: body.included.cards.map(transformCard),
-      actions: body.included.actions.map(transformAction),
+      activities: body.included.actions.map(transformActivity),
     },
   }));
 
-const getNotification = (id) =>
-  socket.get(`/notifications/${id}`).then((body) => ({
+const getNotification = (id, headers) =>
+  socket.get(`/notifications/${id}`, undefined, headers).then((body) => ({
     ...body,
+    item: transformNotification(body.item),
     included: {
-      ...body.included,
+      ...omit(body.included, 'actions'),
       cards: body.included.cards.map(transformCard),
-      actions: body.included.actions.map(transformAction),
+      activities: body.included.actions.map(transformActivity),
     },
   }));
 
-const updateNotifications = (ids, data) => socket.patch(`/notifications/${ids.join(',')}`, data);
+const updateNotifications = (ids, data, headers) =>
+  socket.patch(`/notifications/${ids.join(',')}`, data, headers).then((body) => ({
+    ...body,
+    items: body.items.map(transformNotification),
+  }));
+
+/* Event handlers */
+
+const makeHandleNotificationCreate = (next) => (body) => {
+  next({
+    ...body,
+    item: transformNotification(body.item),
+  });
+};
+
+const makeHandleNotificationUpdate = makeHandleNotificationCreate;
 
 export default {
   getNotifications,
   getNotification,
   updateNotifications,
+  makeHandleNotificationCreate,
+  makeHandleNotificationUpdate,
 };

client/src/api/project-managers.js

@@ -2,10 +2,11 @@ import socket from './socket';
 
 /* Actions */
 
-const createProjectManager = (projectId, data) =>
-  socket.post(`/projects/${projectId}/managers`, data);
+const createProjectManager = (projectId, data, headers) =>
+  socket.post(`/projects/${projectId}/managers`, data, headers);
 
-const deleteProjectManager = (id) => socket.delete(`/project-managers/${id}`);
+const deleteProjectManager = (id, headers) =>
+  socket.delete(`/project-managers/${id}`, undefined, headers);
 
 export default {
   createProjectManager,

client/src/api/projects.js

@@ -3,18 +3,18 @@ import socket from './socket';
 
 /* Actions */
 
-const getProjects = () => socket.get('/projects');
+const getProjects = (headers) => socket.get('/projects', undefined, headers);
 
-const createProject = (data) => socket.post('/projects', data);
+const createProject = (data, headers) => socket.post('/projects', data, headers);
 
-const getProject = (id) => socket.get(`/projects/${id}`);
+const getProject = (id, headers) => socket.get(`/projects/${id}`, undefined, headers);
 
-const updateProject = (id, data) => socket.patch(`/projects/${id}`, data);
+const updateProject = (id, data, headers) => socket.patch(`/projects/${id}`, data, headers);
 
-const updateProjectBackgroundImage = (id, data) =>
-  http.post(`/projects/${id}/background-image`, data);
+const updateProjectBackgroundImage = (id, data, headers) =>
+  http.post(`/projects/${id}/background-image`, data, headers);
 
-const deleteProject = (id) => socket.delete(`/projects/${id}`);
+const deleteProject = (id, headers) => socket.delete(`/projects/${id}`, undefined, headers);
 
 export default {
   getProjects,

client/src/api/socket.js

@@ -16,12 +16,13 @@ const { socket } = io;
 socket.connect = socket._connect; // eslint-disable-line no-underscore-dangle
 
 ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'].forEach((method) => {
-  socket[method.toLowerCase()] = (url, data) =>
+  socket[method.toLowerCase()] = (url, data, headers) =>
     new Promise((resolve, reject) => {
       socket.request(
         {
           method,
           data,
+          headers,
           url: `/api${url}`,
         },
         (_, { body, error }) => {

client/src/api/tasks.js

@@ -2,11 +2,11 @@ import socket from './socket';
 
 /* Actions */
 
-const createTask = (cardId, data) => socket.post(`/cards/${cardId}/tasks`, data);
+const createTask = (cardId, data, headers) => socket.post(`/cards/${cardId}/tasks`, data, headers);
 
-const updateTask = (id, data) => socket.patch(`/tasks/${id}`, data);
+const updateTask = (id, data, headers) => socket.patch(`/tasks/${id}`, data, headers);
 
-const deleteTask = (id) => socket.delete(`/tasks/${id}`);
+const deleteTask = (id, headers) => socket.delete(`/tasks/${id}`, undefined, headers);
 
 export default {
   createTask,

client/src/api/users.js

@@ -3,25 +3,27 @@ import socket from './socket';
 
 /* Actions */
 
-const getUsers = () => socket.get('/users');
+const getUsers = (headers) => socket.get('/users', undefined, headers);
 
-const createUser = (data) => socket.post('/users', data);
+const createUser = (data, headers) => socket.post('/users', data, headers);
 
-const getUser = (id) => socket.get(`/users/${id}`);
+const getUser = (id, headers) => socket.get(`/users/${id}`, undefined, headers);
 
-const getCurrentUser = () => socket.get('/users/me');
+const getCurrentUser = (headers) => socket.get('/users/me', undefined, headers);
 
-const updateUser = (id, data) => socket.patch(`/users/${id}`, data);
+const updateUser = (id, data, headers) => socket.patch(`/users/${id}`, data, headers);
 
-const updateUserEmail = (id, data) => socket.patch(`/users/${id}/email`, data);
+const updateUserEmail = (id, data, headers) => socket.patch(`/users/${id}/email`, data, headers);
 
-const updateUserPassword = (id, data) => socket.patch(`/users/${id}/password`, data);
+const updateUserPassword = (id, data, headers) =>
+  socket.patch(`/users/${id}/password`, data, headers);
 
-const updateUserUsername = (id, data) => socket.patch(`/users/${id}/username`, data);
+const updateUserUsername = (id, data, headers) =>
+  socket.patch(`/users/${id}/username`, data, headers);
 
-const updateUserAvatar = (id, data) => http.post(`/users/${id}/avatar`, data);
+const updateUserAvatar = (id, data, headers) => http.post(`/users/${id}/avatar`, data, headers);
 
-const deleteUser = (id) => socket.delete(`/users/${id}`);
+const deleteUser = (id, headers) => socket.delete(`/users/${id}`, undefined, headers);
 
 export default {
   getUsers,

client/src/components/BoardActions/BoardActions.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import Filters from './Filters';
 import Memberships from '../Memberships';
+import BoardMembershipPermissionsSelectStep from '../BoardMembershipPermissionsSelectStep';
 
 import styles from './BoardActions.module.scss';
 
@@ -15,6 +16,7 @@ const BoardActions = React.memo(
     allUsers,
     canEditMemberships,
     onMembershipCreate,
+    onMembershipUpdate,
     onMembershipDelete,
     onUserToFilterAdd,
     onUserFromFilterRemove,
@@ -30,8 +32,10 @@ const BoardActions = React.memo(
           <Memberships
             items={memberships}
             allUsers={allUsers}
+            permissionsSelectStep={BoardMembershipPermissionsSelectStep}
             canEdit={canEditMemberships}
             onCreate={onMembershipCreate}
+            onUpdate={onMembershipUpdate}
             onDelete={onMembershipDelete}
           />
         </div>
@@ -65,6 +69,7 @@ BoardActions.propTypes = {
   /* eslint-enable react/forbid-prop-types */
   canEditMemberships: PropTypes.bool.isRequired,
   onMembershipCreate: PropTypes.func.isRequired,
+  onMembershipUpdate: PropTypes.func.isRequired,
   onMembershipDelete: PropTypes.func.isRequired,
   onUserToFilterAdd: PropTypes.func.isRequired,
   onUserFromFilterRemove: PropTypes.func.isRequired,

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.jsx

@@ -0,0 +1,101 @@
+import omit from 'lodash/omit';
+import React, { useCallback, useState } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Button, Form, Menu, Radio, Segment } from 'semantic-ui-react';
+import { Popup } from '../../lib/custom-ui';
+
+import { BoardMembershipRoles } from '../../constants/Enums';
+
+import styles from './BoardMembershipPermissionsSelectStep.module.scss';
+
+const BoardMembershipPermissionsSelectStep = React.memo(
+  ({ defaultData, title, buttonContent, onSelect, onBack }) => {
+    const [t] = useTranslation();
+
+    const [data, setData] = useState(() => ({
+      role: BoardMembershipRoles.EDITOR,
+      canComment: null,
+      ...defaultData,
+    }));
+
+    const handleRoleSelectClick = useCallback((role) => {
+      setData((prevData) => ({
+        ...prevData,
+        role,
+        canComment: role === BoardMembershipRoles.EDITOR ? null : !!prevData.canComment,
+      }));
+    }, []);
+
+    const handleSettingChange = useCallback((_, { name: fieldName, checked: value }) => {
+      setData((prevData) => ({
+        ...prevData,
+        [fieldName]: value,
+      }));
+    }, []);
+
+    const handleSubmit = useCallback(() => {
+      onSelect(data.role === BoardMembershipRoles.EDITOR ? omit(data, 'canComment') : data);
+    }, [onSelect, data]);
+
+    return (
+      <>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Form onSubmit={handleSubmit}>
+            <Menu secondary vertical className={styles.menu}>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.EDITOR}
+                onClick={() => handleRoleSelectClick(BoardMembershipRoles.EDITOR)}
+              >
+                <div className={styles.menuItemTitle}>{t('common.editor')}</div>
+                <div className={styles.menuItemDescription}>
+                  {t('common.canEditContentOfBoard')}
+                </div>
+              </Menu.Item>
+              <Menu.Item
+                active={data.role === BoardMembershipRoles.VIEWER}
+                onClick={() => handleRoleSelectClick(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 && (
+              <Segment basic className={styles.settings}>
+                <Radio
+                  toggle
+                  name="canComment"
+                  checked={data.canComment}
+                  label={t('common.canComment')}
+                  onChange={handleSettingChange}
+                />
+              </Segment>
+            )}
+            <Button positive content={t(buttonContent)} />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+BoardMembershipPermissionsSelectStep.propTypes = {
+  defaultData: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  title: PropTypes.string,
+  buttonContent: PropTypes.string,
+  onSelect: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+};
+
+BoardMembershipPermissionsSelectStep.defaultProps = {
+  defaultData: undefined,
+  title: 'common.selectPermissions',
+  buttonContent: 'action.selectPermissions',
+};
+
+export default BoardMembershipPermissionsSelectStep;

client/src/components/BoardMembershipPermissionsSelectStep/BoardMembershipPermissionsSelectStep.module.scss

@@ -0,0 +1,18 @@
+:global(#app) {
+  .menu {
+    margin: 0 auto 8px;
+    width: 100%;
+  }
+
+  .menuItemDescription {
+    opacity: 0.5;
+  }
+
+  .menuItemTitle {
+    margin-bottom: 8px;
+  }
+
+  .settings {
+    margin: 0 0 8px;
+  }
+}

client/src/components/BoardMembershipPermissionsSelectStep/index.js

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

client/src/components/BoardMembershipsStep/BoardMembershipsStep.jsx

@@ -1,9 +1,10 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
+import { useField } from '../../hooks';
 import Item from './Item';
 
 import styles from './BoardMembershipsStep.module.scss';
@@ -11,6 +12,21 @@ import styles from './BoardMembershipsStep.module.scss';
 const BoardMembershipsStep = React.memo(
   ({ items, currentUserIds, title, onUserSelect, onUserDeselect, onBack }) => {
     const [t] = useTranslation();
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          ({ user }) =>
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
+        ),
+      [items, cleanSearch],
+    );
+
+    const searchField = useRef(null);
 
     const handleUserSelect = useCallback(
       (id) => {
@@ -26,22 +42,40 @@ const BoardMembershipsStep = React.memo(
       [onUserDeselect],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     return (
       <>
-        <Popup.Header onBack={onBack}>{t(title)}</Popup.Header>
+        <Popup.Header onBack={onBack}>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
         <Popup.Content>
-          <Menu secondary vertical className={styles.menu}>
-            {items.map((item) => (
-              <Item
-                key={item.id}
-                isPersisted={item.isPersisted}
-                isActive={currentUserIds.includes(item.user.id)}
-                user={item.user}
-                onUserSelect={() => handleUserSelect(item.user.id)}
-                onUserDeselect={() => handleUserDeselect(item.user.id)}
-              />
-            ))}
-          </Menu>
+          <Input
+            fluid
+            ref={searchField}
+            value={search}
+            placeholder={t('common.searchMembers')}
+            icon="search"
+            onChange={handleSearchChange}
+          />
+          {filteredItems.length > 0 && (
+            <Menu secondary vertical className={styles.menu}>
+              {filteredItems.map((item) => (
+                <Item
+                  key={item.id}
+                  isPersisted={item.isPersisted}
+                  isActive={currentUserIds.includes(item.user.id)}
+                  user={item.user}
+                  onUserSelect={() => handleUserSelect(item.user.id)}
+                  onUserDeselect={() => handleUserDeselect(item.user.id)}
+                />
+              ))}
+            </Menu>
+          )}
         </Popup.Content>
       </>
     );

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

@@ -1,6 +1,22 @@
 :global(#app) {
   .menu {
-    margin: -7px auto -5px;
+    margin: 8px auto 0;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
     width: 100%;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

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

@@ -2,6 +2,7 @@
   .menuItem {
     display: block;
     margin: 0;
+    overflow: hidden;
     padding: 4px;
   }
 

client/src/components/Card/Card.jsx

@@ -5,6 +5,7 @@ import { Button, Icon } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 import { Draggable } from 'react-beautiful-dnd';
 
+import { startTimer, stopTimer } from '../../utils/timer';
 import Paths from '../../constants/Paths';
 import Tasks from './Tasks';
 import NameEdit from './NameEdit';
@@ -57,6 +58,17 @@ const Card = React.memo(
       }
     }, []);
 
+    const handleToggleTimerClick = useCallback(
+      (event) => {
+        event.preventDefault();
+
+        onUpdate({
+          timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+        });
+      },
+      [timer, onUpdate],
+    );
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -108,7 +120,13 @@ const Card = React.memo(
               )}
               {timer && (
                 <span className={classNames(styles.attachment, styles.attachmentLeft)}>
-                  <Timer startedAt={timer.startedAt} total={timer.total} size="tiny" />
+                  <Timer
+                    as="span"
+                    startedAt={timer.startedAt}
+                    total={timer.total}
+                    size="tiny"
+                    onClick={handleToggleTimerClick}
+                  />
                 </span>
               )}
             </span>

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

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

client/src/components/CardModal/Actions/index.js

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

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

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
 
-import { ActionTypes } from '../../../constants/Enums';
+import { ActivityTypes } from '../../../constants/Enums';
 import CommentAdd from './CommentAdd';
 import Item from './Item';
 
-import styles from './Actions.module.scss';
+import styles from './Activities.module.scss';
 
-const Actions = React.memo(
+const Activities = React.memo(
   ({
     items,
     isFetching,
@@ -60,7 +60,7 @@ const Actions = React.memo(
           <div className={styles.wrapper}>
             <Comment.Group>
               {items.map((item) =>
-                item.type === ActionTypes.COMMENT_CARD ? (
+                item.type === ActivityTypes.COMMENT_CARD ? (
                   <Item.Comment
                     key={item.id}
                     data={item.data}
@@ -94,7 +94,7 @@ const Actions = React.memo(
   },
 );
 
-Actions.propTypes = {
+Activities.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   isFetching: PropTypes.bool.isRequired,
   isAllFetched: PropTypes.bool.isRequired,
@@ -109,4 +109,4 @@ Actions.propTypes = {
   onCommentDelete: PropTypes.func.isRequired,
 };
 
-export default Actions;
+export default Activities;

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

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { useTranslation, Trans } from 'react-i18next';
 import { Comment } from 'semantic-ui-react';
 
-import { ActionTypes } from '../../../constants/Enums';
+import { ActivityTypes } from '../../../constants/Enums';
 import ItemComment from './ItemComment';
 import User from '../../User';
 
@@ -16,7 +16,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
   let contentNode;
 
   switch (type) {
-    case ActionTypes.CREATE_CARD:
+    case ActivityTypes.CREATE_CARD:
       contentNode = (
         <Trans
           i18nKey="common.userAddedThisCardToList"
@@ -34,7 +34,7 @@ const Item = React.memo(({ type, data, createdAt, user }) => {
       );
 
       break;
-    case ActionTypes.MOVE_CARD:
+    case ActivityTypes.MOVE_CARD:
       contentNode = (
         <Trans
           i18nKey="common.userMovedThisCardFromListToList"

client/src/components/CardModal/Activities/index.js

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

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

@@ -13,7 +13,7 @@ import styles from './Attachments.module.scss';
 const INITIALLY_VISIBLE = 4;
 
 const Attachments = React.memo(
-  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+  ({ items, canEdit, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
     const [t] = useTranslation();
     const [isAllVisible, toggleAllVisible] = useToggle();
 
@@ -99,6 +99,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
+                canEdit={canEdit}
                 onClick={item.image || isPdf ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
@@ -151,6 +152,7 @@ const Attachments = React.memo(
 
 Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
+  canEdit: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,

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

@@ -17,6 +17,7 @@ const Item = React.forwardRef(
       createdAt,
       isCover,
       isPersisted,
+      canEdit,
       onCoverSelect,
       onCoverDeselect,
       onClick,
@@ -96,7 +97,7 @@ const Item = React.forwardRef(
               value: createdAt,
             })}
           </span>
-          {coverUrl && (
+          {coverUrl && canEdit && (
             <span className={styles.options}>
               <button type="button" className={styles.option} onClick={handleToggleCoverClick}>
                 <Icon
@@ -118,17 +119,19 @@ const Item = React.forwardRef(
             </span>
           )}
         </div>
-        <EditPopup
-          defaultData={{
-            name,
-          }}
-          onUpdate={onUpdate}
-          onDelete={onDelete}
-        >
-          <Button className={classNames(styles.button, styles.target)}>
-            <Icon fitted name="pencil" size="small" />
-          </Button>
-        </EditPopup>
+        {canEdit && (
+          <EditPopup
+            defaultData={{
+              name,
+            }}
+            onUpdate={onUpdate}
+            onDelete={onDelete}
+          >
+            <Button className={classNames(styles.button, styles.target)}>
+              <Icon fitted name="pencil" size="small" />
+            </Button>
+          </EditPopup>
+        )}
       </div>
     );
   },
@@ -141,6 +144,7 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
   onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,

client/src/components/CardModal/CardModal.jsx

@@ -5,13 +5,14 @@ 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';
 import Attachments from './Attachments';
 import AttachmentAddZone from './AttachmentAddZone';
 import AttachmentAddPopup from './AttachmentAddPopup';
-import Actions from './Actions';
+import Activities from './Activities';
 import User from '../User';
 import Label from '../Label';
 import DueDate from '../DueDate';
@@ -32,10 +33,10 @@ const CardModal = React.memo(
     dueDate,
     timer,
     isSubscribed,
-    isActionsFetching,
-    isAllActionsFetched,
-    isActionsDetailsVisible,
-    isActionsDetailsFetching,
+    isActivitiesFetching,
+    isAllActivitiesFetched,
+    isActivitiesDetailsVisible,
+    isActivitiesDetailsFetching,
     listId,
     boardId,
     projectId,
@@ -43,12 +44,13 @@ const CardModal = React.memo(
     labels,
     tasks,
     attachments,
-    actions,
+    activities,
     allProjectsToLists,
     allBoardMemberships,
     allLabels,
     canEdit,
-    canEditAllCommentActions,
+    canEditCommentActivities,
+    canEditAllCommentActivities,
     onUpdate,
     onMove,
     onTransfer,
@@ -68,17 +70,23 @@ const CardModal = React.memo(
     onAttachmentCreate,
     onAttachmentUpdate,
     onAttachmentDelete,
-    onActionsFetch,
-    onActionsDetailsToggle,
-    onCommentActionCreate,
-    onCommentActionUpdate,
-    onCommentActionDelete,
+    onActivitiesFetch,
+    onActivitiesDetailsToggle,
+    onCommentActivityCreate,
+    onCommentActivityUpdate,
+    onCommentActivityDelete,
     onClose,
   }) => {
     const [t] = useTranslation();
 
     const isGalleryOpened = useRef(false);
 
+    const handleToggleTimerClick = useCallback(() => {
+      onUpdate({
+        timer: timer.startedAt ? stopTimer(timer) : startTimer(timer),
+      });
+    }, [timer, onUpdate]);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -290,6 +298,17 @@ const CardModal = React.memo(
                         <Timer startedAt={timer.startedAt} total={timer.total} />
                       )}
                     </span>
+                    <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>
@@ -302,7 +321,10 @@ const CardModal = React.memo(
                   {canEdit ? (
                     <DescriptionEdit defaultValue={description} onUpdate={handleDescriptionUpdate}>
                       {description ? (
-                        <button type="button" className={styles.descriptionText}>
+                        <button
+                          type="button"
+                          className={classNames(styles.descriptionText, styles.cursorPointer)}
+                        >
                           <Markdown linkStopPropagation linkTarget="_blank">
                             {description}
                           </Markdown>
@@ -348,6 +370,7 @@ const CardModal = React.memo(
                   <div className={styles.moduleHeader}>{t('common.attachments')}</div>
                   <Attachments
                     items={attachments}
+                    canEdit={canEdit}
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
@@ -357,19 +380,19 @@ const CardModal = React.memo(
                 </div>
               </div>
             )}
-            <Actions
-              items={actions}
-              isFetching={isActionsFetching}
-              isAllFetched={isAllActionsFetched}
-              isDetailsVisible={isActionsDetailsVisible}
-              isDetailsFetching={isActionsDetailsFetching}
-              canEdit={canEdit}
-              canEditAllComments={canEditAllCommentActions}
-              onFetch={onActionsFetch}
-              onDetailsToggle={onActionsDetailsToggle}
-              onCommentCreate={onCommentActionCreate}
-              onCommentUpdate={onCommentActionUpdate}
-              onCommentDelete={onCommentActionDelete}
+            <Activities
+              items={activities}
+              isFetching={isActivitiesFetching}
+              isAllFetched={isAllActivitiesFetched}
+              isDetailsVisible={isActivitiesDetailsVisible}
+              isDetailsFetching={isActivitiesDetailsFetching}
+              canEdit={canEditCommentActivities}
+              canEditAllComments={canEditAllCommentActivities}
+              onFetch={onActivitiesFetch}
+              onDetailsToggle={onActivitiesDetailsToggle}
+              onCommentCreate={onCommentActivityCreate}
+              onCommentUpdate={onCommentActivityUpdate}
+              onCommentDelete={onCommentActivityDelete}
             />
           </Grid.Column>
           {canEdit && (
@@ -490,10 +513,10 @@ CardModal.propTypes = {
   dueDate: PropTypes.instanceOf(Date),
   timer: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   isSubscribed: PropTypes.bool.isRequired,
-  isActionsFetching: PropTypes.bool.isRequired,
-  isAllActionsFetched: PropTypes.bool.isRequired,
-  isActionsDetailsVisible: PropTypes.bool.isRequired,
-  isActionsDetailsFetching: PropTypes.bool.isRequired,
+  isActivitiesFetching: PropTypes.bool.isRequired,
+  isAllActivitiesFetched: PropTypes.bool.isRequired,
+  isActivitiesDetailsVisible: PropTypes.bool.isRequired,
+  isActivitiesDetailsFetching: PropTypes.bool.isRequired,
   listId: PropTypes.string.isRequired,
   boardId: PropTypes.string.isRequired,
   projectId: PropTypes.string.isRequired,
@@ -502,13 +525,14 @@ CardModal.propTypes = {
   labels: PropTypes.array.isRequired,
   tasks: PropTypes.array.isRequired,
   attachments: PropTypes.array.isRequired,
-  actions: PropTypes.array.isRequired,
+  activities: PropTypes.array.isRequired,
   allProjectsToLists: PropTypes.array.isRequired,
   allBoardMemberships: PropTypes.array.isRequired,
   allLabels: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   canEdit: PropTypes.bool.isRequired,
-  canEditAllCommentActions: PropTypes.bool.isRequired,
+  canEditCommentActivities: PropTypes.bool.isRequired,
+  canEditAllCommentActivities: PropTypes.bool.isRequired,
   onUpdate: PropTypes.func.isRequired,
   onMove: PropTypes.func.isRequired,
   onTransfer: PropTypes.func.isRequired,
@@ -528,11 +552,11 @@ CardModal.propTypes = {
   onAttachmentCreate: PropTypes.func.isRequired,
   onAttachmentUpdate: PropTypes.func.isRequired,
   onAttachmentDelete: PropTypes.func.isRequired,
-  onActionsFetch: PropTypes.func.isRequired,
-  onActionsDetailsToggle: PropTypes.func.isRequired,
-  onCommentActionCreate: PropTypes.func.isRequired,
-  onCommentActionUpdate: PropTypes.func.isRequired,
-  onCommentActionDelete: PropTypes.func.isRequired,
+  onActivitiesFetch: PropTypes.func.isRequired,
+  onActivitiesDetailsToggle: PropTypes.func.isRequired,
+  onCommentActivityCreate: PropTypes.func.isRequired,
+  onCommentActivityUpdate: PropTypes.func.isRequired,
+  onCommentActivityDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 

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

@@ -64,6 +64,10 @@
     padding: 8px 8px 0 16px;
   }
 
+  .cursorPointer {
+    cursor: pointer;
+  }
+
   .dueDate {
     background: rgba(9, 30, 66, 0.04);
     border: none;
@@ -114,7 +118,6 @@
     background: transparent;
     border: none;
     color: #17394d;
-    cursor: pointer;
     font-size: 15px;
     margin-bottom: 8px;
     outline: none;

client/src/components/CardMoveStep/CardMoveStep.jsx

@@ -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}
                 />
               </>
             )}

client/src/components/Header/Header.jsx

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

client/src/components/Header/NotificationsPopup.jsx

@@ -7,7 +7,7 @@ import { withPopup } from '../../lib/popup';
 import { Popup } from '../../lib/custom-ui';
 
 import Paths from '../../constants/Paths';
-import { ActionTypes } from '../../constants/Enums';
+import { ActivityTypes } from '../../constants/Enums';
 import User from '../User';
 
 import styles from './NotificationsPopup.module.scss';
@@ -23,42 +23,42 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
   );
 
   const renderItemContent = useCallback(
-    ({ action, card }) => {
-      switch (action.type) {
-        case ActionTypes.MOVE_CARD:
+    ({ activity, card }) => {
+      switch (activity.type) {
+        case ActivityTypes.MOVE_CARD:
           return (
             <Trans
               i18nKey="common.userMovedCardFromListToList"
               values={{
-                user: action.user.name,
+                user: activity.user.name,
                 card: card.name,
-                fromList: action.data.fromList.name,
-                toList: action.data.toList.name,
+                fromList: activity.data.fromList.name,
+                toList: activity.data.toList.name,
               }}
             >
-              {action.user.name}
+              {activity.user.name}
               {' moved '}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
               {' from '}
-              {action.data.fromList.name}
+              {activity.data.fromList.name}
               {' to '}
-              {action.data.toList.name}
+              {activity.data.toList.name}
             </Trans>
           );
-        case ActionTypes.COMMENT_CARD:
+        case ActivityTypes.COMMENT_CARD:
           return (
             <Trans
               i18nKey="common.userLeftNewCommentToCard"
               values={{
-                user: action.user.name,
-                comment: action.data.text,
+                user: activity.user.name,
+                comment: activity.data.text,
                 card: card.name,
               }}
             >
-              {action.user.name}
-              {` left a new comment «${action.data.text}» to `}
+              {activity.user.name}
+              {` left a new comment «${activity.data.text}» to `}
               <Link to={Paths.CARDS.replace(':id', card.id)} onClick={onClose}>
                 {card.name}
               </Link>
@@ -74,16 +74,20 @@ 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}>
-                {item.card && item.action ? (
+                {item.card && item.activity ? (
                   <>
                     <User
-                      name={item.action.user.name}
-                      avatarUrl={item.action.user.avatarUrl}
+                      name={item.activity.user.name}
+                      avatarUrl={item.activity.user.avatarUrl}
                       size="large"
                     />
                     <span className={styles.content}>{renderItemContent(item)}</span>

client/src/components/Label/Label.module.scss

@@ -13,7 +13,6 @@
     border-radius: 3px;
     box-sizing: border-box;
     color: #fff;
-    display: inline-block;
     font-weight: 400;
     outline: none;
     overflow: hidden;

client/src/components/LabelsStep/LabelsStep.jsx

@@ -1,11 +1,11 @@
 import pick from 'lodash/pick';
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { Popup } from '../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
-import { useSteps } from '../../hooks';
+import { useField, useSteps } from '../../hooks';
 import AddStep from './AddStep';
 import EditStep from './EditStep';
 import Item from './Item';
@@ -21,6 +21,20 @@ const LabelsStep = React.memo(
   ({ items, currentIds, title, onSelect, onDeselect, onCreate, onUpdate, onDelete, onBack }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          (label) =>
+            (label.name && label.name.toLowerCase().includes(cleanSearch)) ||
+            label.color.includes(cleanSearch),
+        ),
+      [items, cleanSearch],
+    );
+
+    const searchField = useRef(null);
 
     const handleAddClick = useCallback(() => {
       openStep(StepTypes.ADD);
@@ -63,6 +77,10 @@ const LabelsStep = React.memo(
       [onDelete],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     if (step) {
       switch (step.type) {
         case StepTypes.ADD:
@@ -91,20 +109,36 @@ 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>
-          {items.map((item) => (
-            <Item
-              key={item.id}
-              name={item.name}
-              color={item.color}
-              isPersisted={item.isPersisted}
-              isActive={currentIds.includes(item.id)}
-              onSelect={() => handleSelect(item.id)}
-              onDeselect={() => handleDeselect(item.id)}
-              onEdit={() => handleEdit(item.id)}
-            />
-          ))}
+          <Input
+            fluid
+            ref={searchField}
+            value={search}
+            placeholder={t('common.searchLabels')}
+            icon="search"
+            onChange={handleSearchChange}
+          />
+          {filteredItems.length > 0 && (
+            <div className={styles.items}>
+              {filteredItems.map((item) => (
+                <Item
+                  key={item.id}
+                  name={item.name}
+                  color={item.color}
+                  isPersisted={item.isPersisted}
+                  isActive={currentIds.includes(item.id)}
+                  onSelect={() => handleSelect(item.id)}
+                  onDeselect={() => handleDeselect(item.id)}
+                  onEdit={() => handleEdit(item.id)}
+                />
+              ))}
+            </div>
+          )}
           <Button
             fluid
             content={t('action.createNewLabel')}

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

@@ -14,4 +14,24 @@
       background: #e9e9e9;
     }
   }
+
+  .items {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
+  }
 }

client/src/components/Memberships/ActionsPopup.jsx

@@ -1,3 +1,4 @@
+import pick from 'lodash/pick';
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
@@ -11,12 +12,14 @@ import DeleteStep from '../DeleteStep';
 import styles from './ActionsPopup.module.scss';
 
 const StepTypes = {
+  EDIT_PERMISSIONS: 'EDIT_PERMISSIONS',
   DELETE: 'DELETE',
 };
 
 const ActionsStep = React.memo(
   ({
-    user,
+    membership,
+    permissionsSelectStep,
     leaveButtonContent,
     leaveConfirmationTitle,
     leaveConfirmationContent,
@@ -26,63 +29,115 @@ const ActionsStep = React.memo(
     deleteConfirmationContent,
     deleteConfirmationButtonContent,
     canLeave,
-    canDelete,
+    canEdit,
+    onUpdate,
     onDelete,
+    onClose,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
 
+    const handleEditPermissionsClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PERMISSIONS);
+    }, [openStep]);
+
     const handleDeleteClick = useCallback(() => {
       openStep(StepTypes.DELETE);
     }, [openStep]);
 
-    if (step && step.type === StepTypes.DELETE) {
-      return (
-        <DeleteStep
-          title={t(user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle, {
-            context: 'title',
-          })}
-          content={t(user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent)}
-          buttonContent={t(
-            user.isCurrent ? leaveConfirmationButtonContent : deleteConfirmationButtonContent,
-          )}
-          onConfirm={onDelete}
-          onBack={handleBack}
-        />
-      );
+    const handleRoleSelect = useCallback(
+      (data) => {
+        if (onUpdate) {
+          onUpdate(data);
+        }
+
+        onClose();
+      },
+      [onUpdate, onClose],
+    );
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.EDIT_PERMISSIONS: {
+          const PermissionsSelectStep = permissionsSelectStep;
+
+          return (
+            <PermissionsSelectStep
+              defaultData={pick(membership, ['role', 'canComment'])}
+              title="common.editPermissions"
+              buttonContent="action.save"
+              onSelect={handleRoleSelect}
+              onBack={handleBack}
+            />
+          );
+        }
+        case StepTypes.DELETE:
+          return (
+            <DeleteStep
+              title={t(
+                membership.user.isCurrent ? leaveConfirmationTitle : deleteConfirmationTitle,
+                {
+                  context: 'title',
+                },
+              )}
+              content={t(
+                membership.user.isCurrent ? leaveConfirmationContent : deleteConfirmationContent,
+              )}
+              buttonContent={t(
+                membership.user.isCurrent
+                  ? leaveConfirmationButtonContent
+                  : deleteConfirmationButtonContent,
+              )}
+              onConfirm={onDelete}
+              onBack={handleBack}
+            />
+          );
+        default:
+      }
     }
 
     return (
       <>
         <span className={styles.user}>
-          <User name={user.name} avatarUrl={user.avatarUrl} size="large" />
+          <User name={membership.user.name} avatarUrl={membership.user.avatarUrl} size="large" />
         </span>
         <span className={styles.content}>
-          <div className={styles.name}>{user.name}</div>
-          <div className={styles.email}>{user.email}</div>
-          {user.isCurrent
-            ? canLeave && (
-                <Button
-                  content={t(leaveButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )
-            : canDelete && (
-                <Button
-                  content={t(deleteButtonContent)}
-                  className={styles.deleteButton}
-                  onClick={handleDeleteClick}
-                />
-              )}
+          <div className={styles.name}>{membership.user.name}</div>
+          <div className={styles.email}>{membership.user.email}</div>
         </span>
+        {permissionsSelectStep && canEdit && (
+          <Button
+            fluid
+            content={t('action.editPermissions')}
+            className={styles.button}
+            onClick={handleEditPermissionsClick}
+          />
+        )}
+        {membership.user.isCurrent
+          ? canLeave && (
+              <Button
+                fluid
+                content={t(leaveButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )
+          : canEdit && (
+              <Button
+                fluid
+                content={t(deleteButtonContent)}
+                className={styles.button}
+                onClick={handleDeleteClick}
+              />
+            )}
       </>
     );
   },
 );
 
 ActionsStep.propTypes = {
-  user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  membership: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  permissionsSelectStep: PropTypes.elementType,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
   leaveConfirmationContent: PropTypes.string,
@@ -92,11 +147,14 @@ ActionsStep.propTypes = {
   deleteConfirmationContent: PropTypes.string,
   deleteConfirmationButtonContent: PropTypes.string,
   canLeave: PropTypes.bool.isRequired,
-  canDelete: PropTypes.bool.isRequired,
+  canEdit: PropTypes.bool.isRequired,
+  onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
 };
 
 ActionsStep.defaultProps = {
+  permissionsSelectStep: undefined,
   leaveButtonContent: 'action.leaveBoard',
   leaveConfirmationTitle: 'common.leaveBoard',
   leaveConfirmationContent: 'common.areYouSureYouWantToLeaveBoard',
@@ -105,6 +163,7 @@ ActionsStep.defaultProps = {
   deleteConfirmationTitle: 'common.removeMember',
   deleteConfirmationContent: 'common.areYouSureYouWantToRemoveThisMemberFromBoard',
   deleteConfirmationButtonContent: 'action.removeMember',
+  onUpdate: undefined,
 };
 
 export default withPopup(ActionsStep);

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

@@ -1,28 +1,31 @@
 :global(#app) {
+  .button {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    font-weight: normal;
+    margin-top: 8px;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
   .content {
     display: inline-block;
     width: calc(100% - 44px);
   }
 
-  .deleteButton {
-    background: transparent;
-    box-shadow: none;
-    flex: 0 0 auto;
-    font-weight: normal;
-    margin: 0 0 0 -10px;
-    padding: 11px 10px;
-    text-decoration: underline;
-
-    &:hover {
-      background: #e9e9e9;
-    }
-  }
-
   .email {
     color: #888888;
     font-size: 14px;
     line-height: 1.2;
-    padding: 4px 0 4px 2px;
+    padding: 2px 0 2px 2px;
   }
 
   .name {
@@ -36,7 +39,7 @@
   .user {
     display: inline-block;
     padding-right: 8px;
-    padding-top: 8px;
+    padding-top: 10px;
     vertical-align: top;
   }
 }

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

@@ -1,62 +1,144 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { withPopup } from '../../../lib/popup';
-import { Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../../lib/custom-ui';
 
+import { useField, useSteps } from '../../../hooks';
 import UserItem from './UserItem';
 
 import styles from './AddPopup.module.scss';
 
-const AddStep = React.memo(({ users, currentUserIds, title, onCreate, onClose }) => {
-  const [t] = useTranslation();
+const StepTypes = {
+  SELECT_PERMISSIONS: 'SELECT_PERMISSIONS',
+};
 
-  const handleUserSelect = useCallback(
-    (id) => {
-      onCreate({
-        userId: id,
-      });
+const AddStep = React.memo(
+  ({ users, currentUserIds, permissionsSelectStep, title, onCreate, onClose }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
+    const [search, handleSearchChange] = useField('');
+    const cleanSearch = useMemo(() => search.trim().toLowerCase(), [search]);
 
-      onClose();
-    },
-    [onCreate, onClose],
-  );
+    const filteredUsers = useMemo(
+      () =>
+        users.filter(
+          (user) =>
+            user.email.includes(cleanSearch) ||
+            user.name.toLowerCase().includes(cleanSearch) ||
+            (user.username && user.username.includes(cleanSearch)),
+        ),
+      [users, cleanSearch],
+    );
 
-  return (
-    <>
-      <Popup.Header>
-        {t(title, {
-          context: 'title',
-        })}
-      </Popup.Header>
-      <Popup.Content>
-        <div className={styles.menu}>
-          {users.map((user) => (
-            <UserItem
-              key={user.id}
-              name={user.name}
-              avatarUrl={user.avatarUrl}
-              isActive={currentUserIds.includes(user.id)}
-              onSelect={() => handleUserSelect(user.id)}
-            />
-          ))}
-        </div>
-      </Popup.Content>
-    </>
-  );
-});
+    const searchField = useRef(null);
+
+    const handleUserSelect = useCallback(
+      (id) => {
+        if (permissionsSelectStep) {
+          openStep(StepTypes.SELECT_PERMISSIONS, {
+            userId: id,
+          });
+        } else {
+          onCreate({
+            userId: id,
+          });
+
+          onClose();
+        }
+      },
+      [permissionsSelectStep, onCreate, onClose, openStep],
+    );
+
+    const handleRoleSelect = useCallback(
+      (data) => {
+        onCreate({
+          userId: step.params.userId,
+          ...data,
+        });
+
+        onClose();
+      },
+      [onCreate, onClose, step],
+    );
+
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.SELECT_PERMISSIONS: {
+          const currentUser = users.find((user) => user.id === step.params.userId);
+
+          if (currentUser) {
+            const PermissionsSelectStep = permissionsSelectStep;
+
+            return (
+              <PermissionsSelectStep
+                buttonContent="action.addMember"
+                onSelect={handleRoleSelect}
+                onBack={handleBack}
+              />
+            );
+          }
+
+          openStep(null);
+
+          break;
+        }
+        default:
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>
+          {t(title, {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Input
+            fluid
+            ref={searchField}
+            value={search}
+            placeholder={t('common.searchUsers')}
+            icon="search"
+            onChange={handleSearchChange}
+          />
+          {filteredUsers.length > 0 && (
+            <div className={styles.users}>
+              {filteredUsers.map((user) => (
+                <UserItem
+                  key={user.id}
+                  name={user.name}
+                  avatarUrl={user.avatarUrl}
+                  isActive={currentUserIds.includes(user.id)}
+                  onSelect={() => handleUserSelect(user.id)}
+                />
+              ))}
+            </div>
+          )}
+        </Popup.Content>
+      </>
+    );
+  },
+);
 
 AddStep.propTypes = {
   /* eslint-disable react/forbid-prop-types */
   users: PropTypes.array.isRequired,
   currentUserIds: PropTypes.array.isRequired,
   /* eslint-disable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
   title: PropTypes.string,
   onCreate: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };
 
 AddStep.defaultProps = {
+  permissionsSelectStep: undefined,
   title: 'common.addMember',
 };
 

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

@@ -1,7 +1,21 @@
 :global(#app) {
-  .menu {
-    border: none;
-    margin: -7px auto -5px;
-    width: 100%;
+  .users {
+    margin-top: 8px;
+    max-height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: thin;
+
+    &::-webkit-scrollbar {
+      width: 5px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+    }
   }
 }

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

@@ -2,10 +2,12 @@
   .menuItem {
     background: transparent;
     border: none;
+    border-radius: 0.28571429rem;
     cursor: pointer;
     display: block;
     margin: 0;
     outline: 0;
+    overflow: hidden;
     padding: 4px;
     text-align: left;
     width: 100%;

client/src/components/Memberships/Memberships.jsx

@@ -12,6 +12,7 @@ const Memberships = React.memo(
   ({
     items,
     allUsers,
+    permissionsSelectStep,
     addTitle,
     leaveButtonContent,
     leaveConfirmationTitle,
@@ -24,6 +25,7 @@ const Memberships = React.memo(
     canEdit,
     canLeaveIfLast,
     onCreate,
+    onUpdate,
     onDelete,
   }) => {
     return (
@@ -32,7 +34,8 @@ const Memberships = React.memo(
           {items.map((item) => (
             <span key={item.id} className={styles.user}>
               <ActionsPopup
-                user={item.user}
+                membership={item}
+                permissionsSelectStep={permissionsSelectStep}
                 leaveButtonContent={leaveButtonContent}
                 leaveConfirmationTitle={leaveConfirmationTitle}
                 leaveConfirmationContent={leaveConfirmationContent}
@@ -42,7 +45,8 @@ const Memberships = React.memo(
                 deleteConfirmationContent={deleteConfirmationContent}
                 deleteConfirmationButtonContent={deleteConfirmationButtonContent}
                 canLeave={items.length > 1 || canLeaveIfLast}
-                canDelete={canEdit}
+                canEdit={canEdit}
+                onUpdate={(data) => onUpdate(item.id, data)}
                 onDelete={() => onDelete(item.id)}
               >
                 <User
@@ -59,6 +63,7 @@ const Memberships = React.memo(
           <AddPopup
             users={allUsers}
             currentUserIds={items.map((item) => item.user.id)}
+            permissionsSelectStep={permissionsSelectStep}
             title={addTitle}
             onCreate={onCreate}
           >
@@ -75,6 +80,7 @@ Memberships.propTypes = {
   items: PropTypes.array.isRequired,
   allUsers: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
+  permissionsSelectStep: PropTypes.elementType,
   addTitle: PropTypes.string,
   leaveButtonContent: PropTypes.string,
   leaveConfirmationTitle: PropTypes.string,
@@ -87,10 +93,12 @@ Memberships.propTypes = {
   canEdit: PropTypes.bool,
   canLeaveIfLast: PropTypes.bool,
   onCreate: PropTypes.func.isRequired,
+  onUpdate: PropTypes.func,
   onDelete: PropTypes.func.isRequired,
 };
 
 Memberships.defaultProps = {
+  permissionsSelectStep: undefined,
   addTitle: undefined,
   leaveButtonContent: undefined,
   leaveConfirmationTitle: undefined,
@@ -102,6 +110,7 @@ Memberships.defaultProps = {
   deleteConfirmationButtonContent: undefined,
   canEdit: true,
   canLeaveIfLast: true,
+  onUpdate: undefined,
 };
 
 export default Memberships;