chore: Update version

Closes #262

.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"
+  }
+}

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

@@ -15,6 +15,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",
@@ -14333,6 +14334,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",
@@ -35776,6 +35782,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",

client/package.json

@@ -72,6 +72,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",

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,17 @@ export const initializeCore = (
     cardLabels,
     tasks,
     attachments,
-    actions,
+    activities,
     notifications,
   },
 });
+
+const logout = () => ({
+  type: ActionTypes.LOGOUT,
+  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,
@@ -118,14 +118,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 +148,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 +177,7 @@ updateUserAvatar.failure = (id, error) => ({
   },
 });
 
-export const deleteUser = (id) => ({
+const deleteUser = (id) => ({
   type: ActionTypes.USER_DELETE,
   payload: {
     id,
@@ -199,14 +199,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 +231,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 +262,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 +277,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

@@ -2,7 +2,7 @@ import http from './http';
 
 /* Actions */
 
-const createAccessToken = (data) => http.post('/access-tokens', data);
+const createAccessToken = (data, headers) => http.post('/access-tokens', data, headers);
 
 export default {
   createAccessToken,

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 [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          ({ user }) =>
+            user.email.includes(search) ||
+            user.name.toLowerCase().includes(search) ||
+            (user.username && user.username.includes(search)),
+        ),
+      [items, search],
+    );
+
+    const searchField = useRef(null);
 
     const handleUserSelect = useCallback(
       (id) => {
@@ -26,22 +42,36 @@ const BoardMembershipsStep = React.memo(
       [onUserDeselect],
     );
 
+    useEffect(() => {
+      searchField.current.focus();
+    }, []);
+
     return (
       <>
         <Popup.Header onBack={onBack}>{t(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={searchValue}
+            placeholder={t('common.searchMembers')}
+            icon="search"
+            onChange={handleSearchFieldChange}
+          />
+          {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/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

@@ -11,7 +11,7 @@ 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 +32,10 @@ const CardModal = React.memo(
     dueDate,
     timer,
     isSubscribed,
-    isActionsFetching,
-    isAllActionsFetched,
-    isActionsDetailsVisible,
-    isActionsDetailsFetching,
+    isActivitiesFetching,
+    isAllActivitiesFetched,
+    isActivitiesDetailsVisible,
+    isActivitiesDetailsFetching,
     listId,
     boardId,
     projectId,
@@ -43,12 +43,13 @@ const CardModal = React.memo(
     labels,
     tasks,
     attachments,
-    actions,
+    activities,
     allProjectsToLists,
     allBoardMemberships,
     allLabels,
     canEdit,
-    canEditAllCommentActions,
+    canEditCommentActivities,
+    canEditAllCommentActivities,
     onUpdate,
     onMove,
     onTransfer,
@@ -68,11 +69,11 @@ const CardModal = React.memo(
     onAttachmentCreate,
     onAttachmentUpdate,
     onAttachmentDelete,
-    onActionsFetch,
-    onActionsDetailsToggle,
-    onCommentActionCreate,
-    onCommentActionUpdate,
-    onCommentActionDelete,
+    onActivitiesFetch,
+    onActivitiesDetailsToggle,
+    onCommentActivityCreate,
+    onCommentActivityUpdate,
+    onCommentActivityDelete,
     onClose,
   }) => {
     const [t] = useTranslation();
@@ -302,7 +303,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 +352,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 +362,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 +495,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 +507,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 +534,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/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>
@@ -79,11 +79,11 @@ const NotificationsStep = React.memo(({ items, onDelete, onClose }) => {
         {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 [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
+
+    const filteredItems = useMemo(
+      () =>
+        items.filter(
+          (label) =>
+            (label.name && label.name.toLowerCase().includes(search)) ||
+            label.color.includes(search),
+        ),
+      [items, search],
+    );
+
+    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:
@@ -93,18 +111,30 @@ const LabelsStep = React.memo(
       <>
         <Popup.Header onBack={onBack}>{t(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={searchValue}
+            placeholder={t('common.searchLabels')}
+            icon="search"
+            onChange={handleSearchFieldChange}
+          />
+          {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 [searchValue, handleSearchFieldChange] = useField('');
+    const search = useMemo(() => searchValue.trim().toLowerCase(), [searchValue]);
 
-      onClose();
-    },
-    [onCreate, onClose],
-  );
+    const filteredUsers = useMemo(
+      () =>
+        users.filter(
+          (user) =>
+            user.email.includes(search) ||
+            user.name.toLowerCase().includes(search) ||
+            (user.username && user.username.includes(search)),
+        ),
+      [users, search],
+    );
 
-  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={searchValue}
+            placeholder={t('common.searchUsers')}
+            icon="search"
+            onChange={handleSearchFieldChange}
+          />
+          {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

@@ -6,6 +6,7 @@
     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;

client/src/components/UsersModal/Item/ActionsPopup.jsx

@@ -101,7 +101,7 @@ const ActionsStep = React.memo(
             <UserPasswordEditStep
               defaultData={user.passwordUpdateForm.data}
               isSubmitting={user.passwordUpdateForm.isSubmitting}
-              error={user.emailUpdateForm.error}
+              error={user.passwordUpdateForm.error}
               onUpdate={onPasswordUpdate}
               onMessageDismiss={onPasswordUpdateMessageDismiss}
               onBack={handleBack}

client/src/components/UsersModal/Item/Item.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Icon, Radio, Table } from 'semantic-ui-react';
 
 import ActionsPopup from './ActionsPopup';
+import User from '../../User';
 
 import styles from './Item.module.scss';
 
@@ -11,6 +12,7 @@ const Item = React.memo(
     email,
     username,
     name,
+    avatarUrl,
     organization,
     phone,
     isAdmin,
@@ -34,13 +36,16 @@ const Item = React.memo(
 
     return (
       <Table.Row>
+        <Table.Cell>
+          <User name={name} avatarUrl={avatarUrl} />
+        </Table.Cell>
         <Table.Cell>{name}</Table.Cell>
         <Table.Cell>{username || '-'}</Table.Cell>
         <Table.Cell>{email}</Table.Cell>
-        <Table.Cell collapsing>
+        <Table.Cell>
           <Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
         </Table.Cell>
-        <Table.Cell collapsing>
+        <Table.Cell textAlign="right">
           <ActionsPopup
             user={{
               email,
@@ -76,6 +81,7 @@ Item.propTypes = {
   email: PropTypes.string.isRequired,
   username: PropTypes.string,
   name: PropTypes.string.isRequired,
+  avatarUrl: PropTypes.string,
   organization: PropTypes.string,
   phone: PropTypes.string,
   isAdmin: PropTypes.bool.isRequired,
@@ -96,6 +102,7 @@ Item.propTypes = {
 
 Item.defaultProps = {
   username: undefined,
+  avatarUrl: undefined,
   organization: undefined,
   phone: undefined,
 };

client/src/components/UsersModal/UsersModal.jsx

@@ -84,10 +84,11 @@ const UsersModal = React.memo(
             context: 'title',
           })}
         </Modal.Header>
-        <Modal.Content>
-          <Table basic="very">
+        <Modal.Content scrolling>
+          <Table unstackable basic="very">
             <Table.Header>
               <Table.Row>
+                <Table.HeaderCell />
                 <Table.HeaderCell width={4}>{t('common.name')}</Table.HeaderCell>
                 <Table.HeaderCell width={4}>{t('common.username')}</Table.HeaderCell>
                 <Table.HeaderCell width={4}>{t('common.email')}</Table.HeaderCell>
@@ -102,6 +103,7 @@ const UsersModal = React.memo(
                   email={item.email}
                   username={item.username}
                   name={item.name}
+                  avatarUrl={item.avatarUrl}
                   organization={item.organization}
                   phone={item.phone}
                   isAdmin={item.isAdmin}

client/src/constants/ActionTypes.js

@@ -17,18 +17,17 @@ export default {
   AUTHENTICATE__FAILURE: 'AUTHENTICATE__FAILURE',
   AUTHENTICATE_ERROR_CLEAR: 'AUTHENTICATE_ERROR_CLEAR',
 
-  LOGOUT: 'LOGOUT',
-
   /* Core */
 
   CORE_INITIALIZE: 'CORE_INITIALIZE',
+  LOGOUT: 'LOGOUT',
 
-  /* Modal */
+  /* Modals */
 
   MODAL_OPEN: 'MODAL_OPEN',
   MODAL_CLOSE: 'MODAL_CLOSE',
 
-  /* User */
+  /* Users */
 
   USER_CREATE: 'USER_CREATE',
   USER_CREATE__SUCCESS: 'USER_CREATE__SUCCESS',
@@ -69,7 +68,7 @@ export default {
   USER_TO_BOARD_FILTER_ADD: 'USER_TO_BOARD_FILTER_ADD',
   USER_FROM_BOARD_FILTER_REMOVE: 'USER_FROM_BOARD_FILTER_REMOVE',
 
-  /* Project */
+  /* Projects */
 
   PROJECT_CREATE: 'PROJECT_CREATE',
   PROJECT_CREATE__SUCCESS: 'PROJECT_CREATE__SUCCESS',
@@ -87,7 +86,7 @@ export default {
   PROJECT_DELETE__FAILURE: 'PROJECT_DELETE__FAILURE',
   PROJECT_DELETE_HANDLE: 'PROJECT_DELETE_HANDLE',
 
-  /* Project manager */
+  /* Project managers */
 
   PROJECT_MANAGER_CREATE: 'PROJECT_MANAGER_CREATE',
   PROJECT_MANAGER_CREATE__SUCCESS: 'PROJECT_MANAGER_CREATE__SUCCESS',
@@ -99,7 +98,7 @@ export default {
   PROJECT_MANAGER_DELETE__FAILURE: 'PROJECT_MANAGER_DELETE__FAILURE',
   PROJECT_MANAGER_DELETE_HANDLE: 'PROJECT_MANAGER_DELETE_HANDLE',
 
-  /* Board */
+  /* Boards */
 
   BOARD_CREATE: 'BOARD_CREATE',
   BOARD_CREATE__SUCCESS: 'BOARD_CREATE__SUCCESS',
@@ -117,19 +116,23 @@ export default {
   BOARD_DELETE__FAILURE: 'BOARD_DELETE__FAILURE',
   BOARD_DELETE_HANDLE: 'BOARD_DELETE_HANDLE',
 
-  /* Board membership */
+  /* Board memberships */
 
   BOARD_MEMBERSHIP_CREATE: 'BOARD_MEMBERSHIP_CREATE',
   BOARD_MEMBERSHIP_CREATE__SUCCESS: 'BOARD_MEMBERSHIP_CREATE__SUCCESS',
   BOARD_MEMBERSHIP_CREATE__FAILURE: 'BOARD_MEMBERSHIP_CREATE__FAILURE',
   BOARD_MEMBERSHIP_CREATE_HANDLE: 'BOARD_MEMBERSHIP_CREATE_HANDLE',
   BOARD_MEMBERSHIP_CREATE_HANDLE__PROJECT_FETCH: 'BOARD_MEMBERSHIP_CREATE_HANDLE__PROJECT_FETCH',
+  BOARD_MEMBERSHIP_UPDATE: 'BOARD_MEMBERSHIP_UPDATE',
+  BOARD_MEMBERSHIP_UPDATE__SUCCESS: 'BOARD_MEMBERSHIP_UPDATE__SUCCESS',
+  BOARD_MEMBERSHIP_UPDATE__FAILURE: 'BOARD_MEMBERSHIP_UPDATE__FAILURE',
+  BOARD_MEMBERSHIP_UPDATE_HANDLE: 'BOARD_MEMBERSHIP_UPDATE_HANDLE',
   BOARD_MEMBERSHIP_DELETE: 'BOARD_MEMBERSHIP_DELETE',
   BOARD_MEMBERSHIP_DELETE__SUCCESS: 'BOARD_MEMBERSHIP_DELETE__SUCCESS',
   BOARD_MEMBERSHIP_DELETE__FAILURE: 'BOARD_MEMBERSHIP_DELETE__FAILURE',
   BOARD_MEMBERSHIP_DELETE_HANDLE: 'BOARD_MEMBERSHIP_DELETE_HANDLE',
 
-  /* Label */
+  /* Labels */
 
   LABEL_CREATE: 'LABEL_CREATE',
   LABEL_CREATE__SUCCESS: 'LABEL_CREATE__SUCCESS',
@@ -154,7 +157,7 @@ export default {
   LABEL_TO_BOARD_FILTER_ADD: 'LABEL_TO_BOARD_FILTER_ADD',
   LABEL_FROM_BOARD_FILTER_REMOVE: 'LABEL_FROM_BOARD_FILTER_REMOVE',
 
-  /* List */
+  /* Lists */
 
   LIST_CREATE: 'LIST_CREATE',
   LIST_CREATE__SUCCESS: 'LIST_CREATE__SUCCESS',
@@ -169,7 +172,7 @@ export default {
   LIST_DELETE__FAILURE: 'LIST_DELETE__FAILURE',
   LIST_DELETE_HANDLE: 'LIST_DELETE_HANDLE',
 
-  /* Card */
+  /* Cards */
 
   CARD_CREATE: 'CARD_CREATE',
   CARD_CREATE__SUCCESS: 'CARD_CREATE__SUCCESS',
@@ -190,7 +193,7 @@ export default {
   CARD_DELETE__FAILURE: 'CARD_DELETE__FAILURE',
   CARD_DELETE_HANDLE: 'CARD_DELETE_HANDLE',
 
-  /* Task */
+  /* Tasks */
 
   TASK_CREATE: 'TASK_CREATE',
   TASK_CREATE__SUCCESS: 'TASK_CREATE__SUCCESS',
@@ -205,7 +208,7 @@ export default {
   TASK_DELETE__FAILURE: 'TASK_DELETE__FAILURE',
   TASK_DELETE_HANDLE: 'TASK_DELETE_HANDLE',
 
-  /* Attachment */
+  /* Attachments */
 
   ATTACHMENT_CREATE: 'ATTACHMENT_CREATE',
   ATTACHMENT_CREATE__SUCCESS: 'ATTACHMENT_CREATE__SUCCESS',
@@ -220,34 +223,31 @@ export default {
   ATTACHMENT_DELETE__FAILURE: 'ATTACHMENT_DELETE__FAILURE',
   ATTACHMENT_DELETE_HANDLE: 'ATTACHMENT_DELETE_HANDLE',
 
-  /* Actions */
+  /* Activities */
 
-  ACTIONS_FETCH: 'ACTIONS_FETCH',
-  ACTIONS_FETCH__SUCCESS: 'ACTIONS_FETCH__SUCCESS',
-  ACTIONS_FETCH__FAILURE: 'ACTIONS_FETCH__FAILURE',
-  ACTIONS_DETAILS_TOGGLE: 'ACTIONS_DETAILS_TOGGLE',
-  ACTIONS_DETAILS_TOGGLE__SUCCESS: 'ACTIONS_DETAILS_TOGGLE__SUCCESS',
-  ACTIONS_DETAILS_TOGGLE__FAILURE: 'ACTIONS_DETAILS_TOGGLE__FAILURE',
+  ACTIVITIES_FETCH: 'ACTIVITIES_FETCH',
+  ACTIVITIES_FETCH__SUCCESS: 'ACTIVITIES_FETCH__SUCCESS',
+  ACTIVITIES_FETCH__FAILURE: 'ACTIVITIES_FETCH__FAILURE',
+  ACTIVITIES_DETAILS_TOGGLE: 'ACTIVITIES_DETAILS_TOGGLE',
+  ACTIVITIES_DETAILS_TOGGLE__SUCCESS: 'ACTIVITIES_DETAILS_TOGGLE__SUCCESS',
+  ACTIVITIES_DETAILS_TOGGLE__FAILURE: 'ACTIVITIES_DETAILS_TOGGLE__FAILURE',
+  ACTIVITY_CREATE_HANDLE: 'ACTIVITY_CREATE_HANDLE',
+  ACTIVITY_UPDATE_HANDLE: 'ACTIVITY_UPDATE_HANDLE',
+  ACTIVITY_DELETE_HANDLE: 'ACTIVITY_DELETE_HANDLE',
 
-  /* Action */
+  /* Comment activities */
 
-  ACTION_CREATE_HANDLE: 'ACTION_CREATE_HANDLE',
-  ACTION_UPDATE_HANDLE: 'ACTION_UPDATE_HANDLE',
-  ACTION_DELETE_HANDLE: 'ACTION_DELETE_HANDLE',
+  COMMENT_ACTIVITY_CREATE: 'COMMENT_ACTIVITY_CREATE',
+  COMMENT_ACTIVITY_CREATE__SUCCESS: 'COMMENT_ACTIVITY_CREATE__SUCCESS',
+  COMMENT_ACTIVITY_CREATE__FAILURE: 'COMMENT_ACTIVITY_CREATE__FAILURE',
+  COMMENT_ACTIVITY_UPDATE: 'COMMENT_ACTIVITY_UPDATE',
+  COMMENT_ACTIVITY_UPDATE__SUCCESS: 'COMMENT_ACTIVITY_UPDATE__SUCCESS',
+  COMMENT_ACTIVITY_UPDATE__FAILURE: 'COMMENT_ACTIVITY_UPDATE__FAILURE',
+  COMMENT_ACTIVITY_DELETE: 'COMMENT_ACTIVITY_DELETE',
+  COMMENT_ACTIVITY_DELETE__SUCCESS: 'COMMENT_ACTIVITY_DELETE__SUCCESS',
+  COMMENT_ACTIVITY_DELETE__FAILURE: 'COMMENT_ACTIVITY_DELETE__FAILURE',
 
-  /* Comment action */
-
-  COMMENT_ACTION_CREATE: 'COMMENT_ACTION_CREATE',
-  COMMENT_ACTION_CREATE__SUCCESS: 'COMMENT_ACTION_CREATE__SUCCESS',
-  COMMENT_ACTION_CREATE__FAILURE: 'COMMENT_ACTION_CREATE__FAILURE',
-  COMMENT_ACTION_UPDATE: 'COMMENT_ACTION_UPDATE',
-  COMMENT_ACTION_UPDATE__SUCCESS: 'COMMENT_ACTION_UPDATE__SUCCESS',
-  COMMENT_ACTION_UPDATE__FAILURE: 'COMMENT_ACTION_UPDATE__FAILURE',
-  COMMENT_ACTION_DELETE: 'COMMENT_ACTION_DELETE',
-  COMMENT_ACTION_DELETE__SUCCESS: 'COMMENT_ACTION_DELETE__SUCCESS',
-  COMMENT_ACTION_DELETE__FAILURE: 'COMMENT_ACTION_DELETE__FAILURE',
-
-  /* Notification */
+  /* Notifications */
 
   NOTIFICATION_CREATE_HANDLE: 'NOTIFICATION_CREATE_HANDLE',
   NOTIFICATION_DELETE: 'NOTIFICATION_DELETE',

client/src/constants/Config.js

@@ -2,24 +2,18 @@ const SERVER_BASE_URL =
   process.env.REACT_APP_SERVER_BASE_URL ||
   (process.env.NODE_ENV === 'production' ? '' : 'http://localhost:1337');
 
-const FETCH_OPTIONS =
-  process.env.NODE_ENV === 'production'
-    ? undefined
-    : {
-        credentials: 'include',
-      };
-
 const ACCESS_TOKEN_KEY = 'accessToken';
-const ACCESS_TOKEN_EXPIRES = 365;
+const ACCESS_TOKEN_VERSION_KEY = 'accessTokenVersion';
+const ACCESS_TOKEN_VERSION = '1';
 
 const POSITION_GAP = 65535;
-const ACTIONS_LIMIT = 50;
+const ACTIVITIES_LIMIT = 50;
 
 export default {
   SERVER_BASE_URL,
-  FETCH_OPTIONS,
   ACCESS_TOKEN_KEY,
-  ACCESS_TOKEN_EXPIRES,
+  ACCESS_TOKEN_VERSION_KEY,
+  ACCESS_TOKEN_VERSION,
   POSITION_GAP,
-  ACTIONS_LIMIT,
+  ACTIVITIES_LIMIT,
 };

client/src/constants/EntryActionTypes.js

@@ -12,18 +12,18 @@ export default {
 
   AUTHENTICATE: `${PREFIX}/AUTHENTICATE`,
   AUTHENTICATE_ERROR_CLEAR: `${PREFIX}/AUTHENTICATE_ERROR_CLEAR`,
-  LOGOUT: `${PREFIX}/LOGOUT`,
 
   /* Core */
 
   CORE_INITIALIZE: `${PREFIX}/CORE_INITIALIZE`,
+  LOGOUT: `${PREFIX}/LOGOUT`,
 
-  /* Modal */
+  /* Modals */
 
   MODAL_OPEN: `${PREFIX}/MODAL_OPEN`,
   MODAL_CLOSE: `${PREFIX}/MODAL_CLOSE`,
 
-  /* User */
+  /* Users */
 
   USER_CREATE: `${PREFIX}/USER_CREATE`,
   USER_CREATE_HANDLE: `${PREFIX}/USER_CREATE_HANDLE`,
@@ -56,7 +56,7 @@ export default {
   USER_TO_FILTER_IN_CURRENT_BOARD_ADD: `${PREFIX}/USER_TO_FILTER_IN_CURRENT_BOARD_ADD`,
   USER_FROM_FILTER_IN_CURRENT_BOARD_REMOVE: `${PREFIX}/USER_FROM_FILTER_IN_CURRENT_BOARD_REMOVE`,
 
-  /* Project */
+  /* Projects */
 
   PROJECT_CREATE: `${PREFIX}/PROJECT_CREATE`,
   PROJECT_CREATE_HANDLE: `${PREFIX}/PROJECT_CREATE_HANDLE`,
@@ -66,14 +66,14 @@ export default {
   CURRENT_PROJECT_DELETE: `${PREFIX}/CURRENT_PROJECT_DELETE`,
   PROJECT_DELETE_HANDLE: `${PREFIX}/PROJECT_DELETE_HANDLE`,
 
-  /* Project manager */
+  /* Project managers */
 
   MANAGER_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/MANAGER_IN_CURRENT_PROJECT_CREATE`,
   PROJECT_MANAGER_CREATE_HANDLE: `${PREFIX}/PROJECT_MANAGER_CREATE_HANDLE`,
   PROJECT_MANAGER_DELETE: `${PREFIX}/PROJECT_MANAGER_DELETE`,
   PROJECT_MANAGER_DELETE_HANDLE: `${PREFIX}/PROJECT_MANAGER_DELETE_HANDLE`,
 
-  /* Board */
+  /* Boards */
 
   BOARD_IN_CURRENT_PROJECT_CREATE: `${PREFIX}/BOARD_IN_CURRENT_PROJECT_CREATE`,
   BOARD_CREATE_HANDLE: `${PREFIX}/BOARD_CREATE_HANDLE`,
@@ -84,14 +84,16 @@ export default {
   BOARD_DELETE: `${PREFIX}/BOARD_DELETE`,
   BOARD_DELETE_HANDLE: `${PREFIX}/BOARD_DELETE_HANDLE`,
 
-  /* Board membership */
+  /* Board memberships */
 
   MEMBERSHIP_IN_CURRENT_BOARD_CREATE: `${PREFIX}/MEMBERSHIP_IN_CURRENT_BOARD_CREATE`,
   BOARD_MEMBERSHIP_CREATE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_CREATE_HANDLE`,
+  BOARD_MEMBERSHIP_UPDATE: `${PREFIX}/BOARD_MEMBERSHIP_UPDATE`,
+  BOARD_MEMBERSHIP_UPDATE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_UPDATE_HANDLE`,
   BOARD_MEMBERSHIP_DELETE: `${PREFIX}/BOARD_MEMBERSHIP_DELETE`,
   BOARD_MEMBERSHIP_DELETE_HANDLE: `${PREFIX}/BOARD_MEMBERSHIP_DELETE_HANDLE`,
 
-  /* Label */
+  /* Labels */
 
   LABEL_IN_CURRENT_BOARD_CREATE: `${PREFIX}/LABEL_IN_CURRENT_BOARD_CREATE`,
   LABEL_CREATE_HANDLE: `${PREFIX}/LABEL_CREATE_HANDLE`,
@@ -108,7 +110,7 @@ export default {
   LABEL_TO_FILTER_IN_CURRENT_BOARD_ADD: `${PREFIX}/LABEL_TO_FILTER_IN_CURRENT_BOARD_ADD`,
   LABEL_FROM_FILTER_IN_CURRENT_BOARD_REMOVE: `${PREFIX}/LABEL_FROM_FILTER_IN_CURRENT_BOARD_REMOVE`,
 
-  /* List */
+  /* Lists */
 
   LIST_IN_CURRENT_BOARD_CREATE: `${PREFIX}/LIST_IN_CURRENT_BOARD_CREATE`,
   LIST_CREATE_HANDLE: `${PREFIX}/LIST_CREATE_HANDLE`,
@@ -118,7 +120,7 @@ export default {
   LIST_DELETE: `${PREFIX}/LIST_DELETE`,
   LIST_DELETE_HANDLE: `${PREFIX}/LIST_DELETE_HANDLE`,
 
-  /* Card */
+  /* Cards */
 
   CARD_CREATE: `${PREFIX}/CARD_CREATE`,
   CARD_CREATE_HANDLE: `${PREFIX}/CARD_CREATE_HANDLE`,
@@ -133,7 +135,7 @@ export default {
   CURRENT_CARD_DELETE: `${PREFIX}/CURRENT_CARD_DELETE`,
   CARD_DELETE_HANDLE: `${PREFIX}/CARD_DELETE_HANDLE`,
 
-  /* Task */
+  /* Tasks */
 
   TASK_IN_CURRENT_CARD_CREATE: `${PREFIX}/TASK_IN_CURRENT_CARD_CREATE`,
   TASK_CREATE_HANDLE: `${PREFIX}/TASK_CREATE_HANDLE`,
@@ -143,7 +145,7 @@ export default {
   TASK_DELETE: `${PREFIX}/TASK_DELETE`,
   TASK_DELETE_HANDLE: `${PREFIX}/TASK_DELETE_HANDLE`,
 
-  /* Attachment */
+  /* Attachments */
 
   ATTACHMENT_IN_CURRENT_CARD_CREATE: `${PREFIX}/ATTACHMENT_IN_CURRENT_CARD_CREATE`,
   ATTACHMENT_CREATE_HANDLE: `${PREFIX}/ATTACHMENT_CREATE_HANDLE`,
@@ -152,24 +154,21 @@ export default {
   ATTACHMENT_DELETE: `${PREFIX}/ATTACHMENT_DELETE`,
   ATTACHMENT_DELETE_HANDLE: `${PREFIX}/ATTACHMENT_DELETE_HANDLE`,
 
-  /* Actions */
+  /* Activities */
 
-  ACTIONS_IN_CURRENT_CARD_FETCH: `${PREFIX}/ACTIONS_IN_CURRENT_CARD_FETCH`,
-  ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE: `${PREFIX}/ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE`,
+  ACTIVITIES_IN_CURRENT_CARD_FETCH: `${PREFIX}/ACTIVITIES_IN_CURRENT_CARD_FETCH`,
+  ACTIVITIES_DETAILS_IN_CURRENT_CARD_TOGGLE: `${PREFIX}/ACTIVITIES_DETAILS_IN_CURRENT_CARD_TOGGLE`,
+  ACTIVITY_CREATE_HANDLE: `${PREFIX}/ACTIVITY_CREATE_HANDLE`,
+  ACTIVITY_UPDATE_HANDLE: `${PREFIX}/ACTIVITY_UPDATE_HANDLE`,
+  ACTIVITY_DELETE_HANDLE: `${PREFIX}/ACTIVITY_DELETE_HANDLE`,
 
-  /* Action */
+  /* Comment activities */
 
-  ACTION_CREATE_HANDLE: `${PREFIX}/ACTION_CREATE_HANDLE`,
-  ACTION_UPDATE_HANDLE: `${PREFIX}/ACTION_UPDATE_HANDLE`,
-  ACTION_DELETE_HANDLE: `${PREFIX}/ACTION_DELETE_HANDLE`,
+  COMMENT_ACTIVITY_IN_CURRENT_CARD_CREATE: `${PREFIX}/COMMENT_ACTIVITY_IN_CURRENT_CARD_CREATE`,
+  COMMENT_ACTIVITY_UPDATE: `${PREFIX}/COMMENT_ACTIVITY_UPDATE`,
+  COMMENT_ACTIVITY_DELETE: `${PREFIX}/COMMENT_ACTIVITY_DELETE`,
 
-  /* Comment action */
-
-  COMMENT_ACTION_IN_CURRENT_CARD_CREATE: `${PREFIX}/COMMENT_ACTION_IN_CURRENT_CARD_CREATE`,
-  COMMENT_ACTION_UPDATE: `${PREFIX}/COMMENT_ACTION_UPDATE`,
-  COMMENT_ACTION_DELETE: `${PREFIX}/COMMENT_ACTION_DELETE`,
-
-  /* Notification */
+  /* Notifications */
 
   NOTIFICATION_CREATE_HANDLE: `${PREFIX}/NOTIFICATION_CREATE_HANDLE`,
   NOTIFICATION_DELETE: `${PREFIX}/NOTIFICATION_DELETE`,

client/src/constants/Enums.js

@@ -7,7 +7,12 @@ export const BoardTypes = {
   KANBAN: 'kanban',
 };
 
-export const ActionTypes = {
+export const BoardMembershipRoles = {
+  EDITOR: 'editor',
+  VIEWER: 'viewer',
+};
+
+export const ActivityTypes = {
   CREATE_CARD: 'createCard',
   MOVE_CARD: 'moveCard',
   COMMENT_CARD: 'commentCard',