fix: Fix core locale loading

Closes #50, closes #232

.github/FUNDING.yml

@@ -1,12 +0,0 @@
-# These are supported funding model platforms
-
-github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a single Open Collective username
-ko_fi: meltyshev
-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
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

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

@@ -0,0 +1,44 @@
+name: Build and push Docker base image
+
+on:
+  push:
+    paths:
+      - ./Dockerfile.base
+    branches:
+      - master
+  workflow_dispatch:
+
+env:
+  ALPINE_VERSION: 3.15
+
+jobs:
+  build-and-push-docker-base-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          file: Dockerfile.base
+          build-args: ALPINE_VERSION=${{ env.ALPINE_VERSION }}
+          push: true
+          tags: |
+            ghcr.io/plankanban/planka:base-latest
+            ghcr.io/plankanban/planka:base-${{ env.ALPINE_VERSION }}

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

@@ -0,0 +1,42 @@
+name: Build and push Docker image
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build-and-push-docker-image:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Set version
+        uses: actions/github-script@v6
+        id: set-version
+        with:
+          result-encoding: string
+          script: return context.payload.release.tag_name.replace('v', '')
+
+      - name: Build and push
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          push: true
+          tags: |
+            ghcr.io/plankanban/planka:latest
+            ghcr.io/plankanban/planka:${{ steps.set-version.outputs.result }}

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 docker-compose.override.yml
 
+.idea
 .vscode
 .DS_Store

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged

CONTRIBUTING.md

@@ -0,0 +1,49 @@
+# Contributing to Planka
+
+First off, thanks for taking the time to contribute!
+
+## Code of Conduct
+
+This project and everyone participating in it is governed by the [Planka Code of Conduct](https://github.com/plankanban/planka/blob/master/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code.
+
+## How Can I Contribute?
+
+### Reporting Bugs
+
+Feel free to create a bug report as a new issue on GitHub. Before creating, please check if there is already existing one. When creating a bug report, please include as many details as possible.
+
+### Suggesting Enhancements
+
+Feel free to create an enhancement suggestion as a new issue on GitHub. Before creating, please check if there is already existing one. When creating an enhancement suggestion, please include as many details as possible.
+
+### Pull Requests
+
+Before submitting a pull request please discuss with the core team by creating or commenting in an issue on GitHub – we'd also love to hear from you in the discussions. This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.
+
+If you’re looking for ways to get started, here's a list of ways to help us improve Planka:
+
+- [Translation](https://github.com/plankanban/planka/issues/66) into other languages
+- Issues with [`good first issue`](https://github.com/plankanban/planka/labels/good%20first%20issue) label
+- Performance improvements, both on client and server
+- Developer happiness and documentation
+- Bugs and other issues listed on GitHub
+
+## Styleguides
+
+### Git Commit Messages
+
+Commit messages should follow the [commit message convention](https://conventionalcommits.org), so changelogs could be generated automatically by that.
+
+Additional rules:
+
+- Separate subject from body with a blank line
+- Limit the subject line to 70 characters
+- Capitalize the subject line
+- Do not end the subject line with a period
+- Use the imperative mood in the subject line
+- Use the body to explain what and why vs. how
+- Each commit should be a single, stable change
+
+### JavaScript
+
+All JavaScript code should follow this [JavaScript style guide](https://github.com/airbnb/javascript). The pre-commit hook will help you find linting errors before committing.

Dockerfile

@@ -1,57 +1,36 @@
-FROM node AS client-builder
+FROM node:lts AS client-builder
 
 WORKDIR /app
 
-COPY client .
+COPY client/package.json client/package-lock.json ./
 
 RUN npm install npm@latest --global \
-  && npm install \
+  && npm install
-  && npm run build
 
-FROM node:alpine
+COPY client .
+RUN npm run build
+
+FROM ghcr.io/plankanban/planka:base-latest
 
 WORKDIR /app
 
-COPY server .
+COPY server/.npmrc server/package.json server/package-lock.json ./
-COPY docker-start.sh start.sh
 
-ARG ALPINE_VERSION=3.12
+RUN npm install npm@latest --global \
-ARG VIPS_VERSION=8.10.2
-
-RUN apk -U upgrade \
-  && apk add \
-  bash giflib glib lcms2 libexif \
-  libgsf libjpeg-turbo libpng librsvg libwebp \
-  orc pango tiff \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
-  --no-cache \
-  && apk add \
-  build-base giflib-dev glib-dev lcms2-dev libexif-dev \
-  libgsf-dev libjpeg-turbo-dev libpng-dev librsvg-dev libwebp-dev \
-  orc-dev pango-dev tiff-dev \
-  --virtual vips-dependencies \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
-  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
-  --no-cache \
-  && wget -O- https://github.com/libvips/libvips/releases/download/v${VIPS_VERSION}/vips-${VIPS_VERSION}.tar.gz | tar xzC /tmp \
-  && cd /tmp/vips-${VIPS_VERSION} \
-  && ./configure \
-  && make \
-  && make install-strip \
-  && cd $OLDPWD \
-  && rm -rf /tmp/vips-${VIPS_VERSION} \
-  && npm install npm@latest --global \
   && npm install --production \
-  && apk del vips-dependencies --purge \
+  && apk del vips-dependencies --purge
-  && chmod +x start.sh
+
+COPY docker-start.sh start.sh
+COPY server .
+
+RUN cp .env.sample .env
 
 COPY --from=client-builder /app/build public
 COPY --from=client-builder /app/build/index.html views
 
 VOLUME /app/public/user-avatars
 VOLUME /app/public/project-background-images
-VOLUME /app/public/attachments
+VOLUME /app/private/attachments
 
 EXPOSE 1337
 

Dockerfile.base

@@ -0,0 +1,27 @@
+FROM node:lts-alpine
+
+ARG ALPINE_VERSION=3.15
+ARG VIPS_VERSION=8.12.2
+
+RUN apk -U upgrade \
+  && apk add \
+  bash giflib glib lcms2 libexif \
+  libgsf libjpeg-turbo libpng librsvg libwebp \
+  orc pango tiff \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
+  --no-cache \
+  && apk add \
+  build-base giflib-dev glib-dev lcms2-dev libexif-dev \
+  libgsf-dev libjpeg-turbo-dev libpng-dev librsvg-dev libwebp-dev \
+  orc-dev pango-dev tiff-dev \
+  --virtual vips-dependencies \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/community/ \
+  --repository https://alpine.global.ssl.fastly.net/alpine/v${ALPINE_VERSION}/main/ \
+  --no-cache \
+  && wget -O- https://github.com/libvips/libvips/releases/download/v${VIPS_VERSION}/vips-${VIPS_VERSION}.tar.gz | tar xzC /tmp \
+  && cd /tmp/vips-${VIPS_VERSION} \
+  && ./configure \
+  && make \
+  && make install-strip \
+  && rm -rf /tmp/vips-${VIPS_VERSION}

README.md

@@ -1,6 +1,6 @@
 # Planka
 
-![David (path)](https://img.shields.io/david/plankanban/planka?path=client) ![Docker Pulls](https://img.shields.io/docker/pulls/meltyshev/planka) ![GitHub](https://img.shields.io/github/license/plankanban/planka)
+![David (path)](https://img.shields.io/github/package-json/v/plankanban/planka) ![Docker Pulls](https://img.shields.io/docker/pulls/meltyshev/planka) ![GitHub](https://img.shields.io/github/license/plankanban/planka)
 
 A Trello-like kanban board built with React and Redux.
 
@@ -8,8 +8,6 @@ A Trello-like kanban board built with React and Redux.
 
 [**Client demo**](https://plankanban.github.io/planka) (without server features).
 
-<a href="https://ko-fi.com/meltyshev" target="_blank"><img src="https://cdn.ko-fi.com/cdn/kofi4.png?v=2" alt="Buy Me a Coffee at ko-fi.com" border="0" height="36" style="border:0px;height:36px;" /></a>
-
 ## Features
 
 - Create projects, boards, lists, cards, labels and tasks
@@ -21,23 +19,8 @@ A Trello-like kanban board built with React and Redux.
 - User notifications
 - Internationalization
 
-## Roadmap
-
-### Current task
-
-Projects should have Managers who have the ability to create/edit/delete boards. Boards should have their own Members, so members won't see all boards, just those they belong to. Planka will be released after this breaking change.
-
-### Future tasks
-
-- Fetch last data after reconnection
-- Custom fields
-- Public boards
-- Automatic actions
-
 ## Deploy
 
-**Please note that Planka is NOT released yet, API and database structure may be changed!**
-
 ### Docker Compose
 
 [![](https://d207aa93qlcgug.cloudfront.net/1.95.5.qa/img/nav/docker-logo-loggedout.png)](https://hub.docker.com/r/meltyshev/planka)
@@ -78,7 +61,7 @@ Either use a local database or start the provided development database:
 docker-compose -f docker-compose-dev.yml up
 ```
 
-Edit `DATABASE_URL` in `.env` file if needed, then initialize the database:
+Create `server/.env` based on `server/.env.sample` and edit `DATABASE_URL` if needed, then initialize the database:
 
 ```
 npm run server:db:init

client/package.json

@@ -25,7 +25,15 @@
       "browser": true,
       "jest": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
+    "parserOptions": {
+      "babelOptions": {
+        "presets": [
+          "airbnb"
+        ]
+      },
+      "requireConfigFile": false
+    },
     "plugins": [
       "prettier"
     ],
@@ -55,55 +63,60 @@
     }
   },
   "dependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
-    "connected-react-router": "^6.8.0",
+    "connected-react-router": "^6.9.3",
-    "date-fns": "^2.22.1",
+    "date-fns": "^2.29.1",
-    "dequal": "^2.0.2",
+    "dequal": "^2.0.3",
     "history": "^4.10.1",
-    "i18next": "^20.3.2",
+    "i18next": "^21.8.14",
-    "i18next-browser-languagedetector": "^6.1.2",
+    "i18next-browser-languagedetector": "^6.1.4",
-    "initials": "^3.1.1",
+    "initials": "^3.1.2",
-    "lodash": "^4.17.20",
+    "js-cookie": "^3.0.1",
-    "node-sass": "^6.0.0",
+    "lodash": "^4.17.21",
-    "prop-types": "^15.7.2",
+    "node-sass": "^7.0.1",
-    "react": "^17.0.1",
+    "photoswipe": "^5.3.0",
-    "react-beautiful-dnd": "^13.0.0",
+    "prop-types": "^15.8.1",
-    "react-datepicker": "^4.1.1",
+    "react": "^17.0.2",
-    "react-dom": "^17.0.1",
+    "react-beautiful-dnd": "^13.1.0",
-    "react-dropzone": "^11.3.1",
+    "react-datepicker": "^4.8.0",
-    "react-i18next": "^11.11.0",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^14.2.2",
+    "react-i18next": "^11.18.1",
     "react-input-mask": "^2.0.4",
-    "react-markdown": "^6.0.2",
+    "react-markdown": "^8.0.3",
-    "react-redux": "^7.2.4",
+    "react-photoswipe-gallery": "^2.2.1",
-    "react-router-dom": "^5.2.0",
+    "react-redux": "^7.2.8",
-    "react-scripts": "4.0.3",
+    "react-router-dom": "^5.3.1",
-    "react-textarea-autosize": "^8.3.3",
+    "react-scripts": "5.0.1",
-    "redux": "^4.1.0",
+    "react-textarea-autosize": "^8.3.4",
+    "redux": "^4.2.0",
     "redux-logger": "^3.0.6",
     "redux-orm": "^0.16.2",
     "redux-saga": "^1.1.3",
-    "remark-gfm": "^1.0.0",
+    "remark-breaks": "^3.0.2",
-    "reselect": "^4.0.0",
+    "remark-gfm": "^3.0.1",
+    "reselect": "^4.1.6",
     "sails.io.js": "^1.2.1",
-    "semantic-ui-react": "^2.0.3",
+    "semantic-ui-react": "^2.1.3",
     "socket.io-client": "^2.3.1",
-    "validator": "^13.6.0",
+    "validator": "^13.7.0",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
-    "chai": "^4.3.0",
+    "babel-preset-airbnb": "^5.0.0",
+    "chai": "^4.3.6",
     "enzyme": "^3.11.0",
-    "eslint": "^7.29.0",
+    "eslint": "^8.20.0",
-    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-import": "^2.23.4",
+    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-react": "^7.30.1",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "jest-enzyme": "^7.1.2",
-    "prettier": "2.3.1",
+    "prettier": "2.7.1",
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^17.0.2"
   }
 }

client/src/actions/entry/task.js

@@ -29,6 +29,14 @@ export const handleTaskUpdate = (task) => ({
   },
 });
 
+export const moveTask = (id, index) => ({
+  type: EntryActionTypes.TASK_MOVE,
+  payload: {
+    id,
+    index,
+  },
+});
+
 export const deleteTask = (id) => ({
   type: EntryActionTypes.TASK_DELETE,
   payload: {

client/src/actions/entry/user.js

@@ -41,6 +41,14 @@ export const handleUserUpdate = (user) => ({
   },
 });
 
+export const updateUserEmail = (id, data) => ({
+  type: EntryActionTypes.USER_EMAIL_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserEmail = (data) => ({
   type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE,
   payload: {
@@ -48,11 +56,26 @@ export const updateCurrentUserEmail = (data) => ({
   },
 });
 
+export const clearUserEmailUpdateError = (id) => ({
+  type: EntryActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserEmailUpdateError = () => ({
   type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR,
   payload: {},
 });
 
+export const updateUserPassword = (id, data) => ({
+  type: EntryActionTypes.USER_PASSWORD_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserPassword = (data) => ({
   type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE,
   payload: {
@@ -60,11 +83,26 @@ export const updateCurrentUserPassword = (data) => ({
   },
 });
 
+export const clearUserPasswordUpdateError = (id) => ({
+  type: EntryActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserPasswordUpdateError = () => ({
   type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR,
   payload: {},
 });
 
+export const updateUserUsername = (id, data) => ({
+  type: EntryActionTypes.USER_USERNAME_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserUsername = (data) => ({
   type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE,
   payload: {
@@ -72,6 +110,13 @@ export const updateCurrentUserUsername = (data) => ({
   },
 });
 
+export const clearUserUsernameUpdateError = (id) => ({
+  type: EntryActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserUsernameUpdateError = () => ({
   type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR,
   payload: {},

client/src/api/access-tokens.js

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

client/src/api/actions.js

@@ -9,8 +9,8 @@ export const transformAction = (action) => ({
 
 /* Actions */
 
-const getActions = (cardId, data, headers) =>
+const getActions = (cardId, data) =>
-  socket.get(`/cards/${cardId}/actions`, data, headers).then((body) => ({
+  socket.get(`/cards/${cardId}/actions`, data).then((body) => ({
     ...body,
     items: body.items.map(transformAction),
   }));

client/src/api/attachments.js

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

client/src/api/board-memberships.js

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

client/src/api/boards.js

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

client/src/api/card-labels.js

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

client/src/api/card-memberships.js

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

client/src/api/cards.js

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

client/src/api/comment-actions.js

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

client/src/api/http.js

@@ -6,7 +6,7 @@ const http = {};
 
 // TODO: add all methods
 ['POST'].forEach((method) => {
-  http[method.toLowerCase()] = (url, data, headers) => {
+  http[method.toLowerCase()] = (url, data) => {
     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/labels.js

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

client/src/api/lists.js

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

client/src/api/notifications.js

@@ -4,8 +4,8 @@ import { transformAction } from './actions';
 
 /* Actions */
 
-const getNotifications = (headers) =>
+const getNotifications = () =>
-  socket.get('/notifications', undefined, headers).then((body) => ({
+  socket.get('/notifications').then((body) => ({
     ...body,
     included: {
       ...body.included,
@@ -14,8 +14,8 @@ const getNotifications = (headers) =>
     },
   }));
 
-const getNotification = (id, headers) =>
+const getNotification = (id) =>
-  socket.get(`/notifications/${id}`, undefined, headers).then((body) => ({
+  socket.get(`/notifications/${id}`).then((body) => ({
     ...body,
     included: {
       ...body.included,
@@ -24,8 +24,7 @@ const getNotification = (id, headers) =>
     },
   }));
 
-const updateNotifications = (ids, data, headers) =>
+const updateNotifications = (ids, data) => socket.patch(`/notifications/${ids.join(',')}`, data);
-  socket.patch(`/notifications/${ids.join(',')}`, data, headers);
 
 export default {
   getNotifications,

client/src/api/project-managers.js

@@ -2,11 +2,10 @@ import socket from './socket';
 
 /* Actions */
 
-const createProjectManager = (projectId, data, headers) =>
+const createProjectManager = (projectId, data) =>
-  socket.post(`/projects/${projectId}/managers`, data, headers);
+  socket.post(`/projects/${projectId}/managers`, data);
 
-const deleteProjectManager = (id, headers) =>
+const deleteProjectManager = (id) => socket.delete(`/project-managers/${id}`);
-  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 = (headers) => socket.get('/projects', undefined, headers);
+const getProjects = () => socket.get('/projects');
 
-const createProject = (data, headers) => socket.post('/projects', data, headers);
+const createProject = (data) => socket.post('/projects', data);
 
-const getProject = (id, headers) => socket.get(`/projects/${id}`, undefined, headers);
+const getProject = (id) => socket.get(`/projects/${id}`);
 
-const updateProject = (id, data, headers) => socket.patch(`/projects/${id}`, data, headers);
+const updateProject = (id, data) => socket.patch(`/projects/${id}`, data);
 
-const updateProjectBackgroundImage = (id, data, headers) =>
+const updateProjectBackgroundImage = (id, data) =>
-  http.post(`/projects/${id}/background-image`, data, headers);
+  http.post(`/projects/${id}/background-image`, data);
 
-const deleteProject = (id, headers) => socket.delete(`/projects/${id}`, undefined, headers);
+const deleteProject = (id) => socket.delete(`/projects/${id}`);
 
 export default {
   getProjects,

client/src/api/socket.js

@@ -16,13 +16,12 @@ 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, headers) =>
+  socket[method.toLowerCase()] = (url, data) =>
     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, headers) => socket.post(`/cards/${cardId}/tasks`, data, headers);
+const createTask = (cardId, data) => socket.post(`/cards/${cardId}/tasks`, data);
 
-const updateTask = (id, data, headers) => socket.patch(`/tasks/${id}`, data, headers);
+const updateTask = (id, data) => socket.patch(`/tasks/${id}`, data);
 
-const deleteTask = (id, headers) => socket.delete(`/tasks/${id}`, undefined, headers);
+const deleteTask = (id) => socket.delete(`/tasks/${id}`);
 
 export default {
   createTask,

client/src/api/users.js

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

client/src/components/Background/Background.jsx

@@ -9,18 +9,20 @@ import { ProjectBackgroundTypes } from '../../constants/Enums';
 import styles from './Background.module.scss';
 import globalStyles from '../../styles.module.scss';
 
-const Background = ({ type, name, imageUrl }) => (
+function Background({ type, name, imageUrl }) {
-  <div
+  return (
-    className={classNames(
+    <div
-      styles.wrapper,
+      className={classNames(
-      type === ProjectBackgroundTypes.GRADIENT &&
+        styles.wrapper,
-        globalStyles[`background${upperFirst(camelCase(name))}`],
+        type === ProjectBackgroundTypes.GRADIENT &&
-    )}
+          globalStyles[`background${upperFirst(camelCase(name))}`],
-    style={{
+      )}
-      background: type === 'image' && `url("${imageUrl}") center / cover`,
+      style={{
-    }}
+        background: type === 'image' && `url("${imageUrl}") center / cover`,
-  />
+      }}
-);
+    />
+  );
+}
 
 Background.propTypes = {
   type: PropTypes.string.isRequired,

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

@@ -114,6 +114,7 @@
   }
 
   .wrapper {
+    cursor: auto;
     display: block;
     margin-bottom: 8px;
   }

client/src/components/Card/Tasks.jsx

@@ -40,9 +40,7 @@ const Tasks = React.memo(({ items }) => {
         <span
           className={classNames(styles.count, isOpened ? styles.countOpened : styles.countClosed)}
         >
-          {completedItems.length}
+          {completedItems.length}/{items.length}
-          {'/'}
-          {items.length}
         </span>
       </div>
       {isOpened && (

client/src/components/CardModal/Actions/ItemComment.jsx

@@ -38,9 +38,9 @@ const ItemComment = React.memo(
           </div>
           <CommentEdit ref={commentEdit} defaultData={data} onUpdate={onUpdate}>
             <>
-              <Markdown linkTarget="_blank" className={styles.text}>
+              <div className={styles.text}>
-                {data.text}
+                <Markdown linkTarget="_blank">{data.text}</Markdown>
-              </Markdown>
+              </div>
               {canEdit && (
                 <Comment.Actions>
                   <Comment.Action

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

@@ -34,13 +34,6 @@
     max-width: 100%;
     overflow: hidden;
     padding: 8px 12px;
-    text-overflow: ellipsis;
-    white-space: pre-line;
-    word-break: break-word;
-
-    img {
-      max-width: 100%;
-    }
   }
 
   .title {

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

@@ -1,6 +1,8 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
+import { Gallery, Item as GalleryItem } from 'react-photoswipe-gallery';
 import { Button } from 'semantic-ui-react';
 import { useToggle } from '../../../lib/hooks';
 
@@ -8,81 +10,152 @@ import Item from './Item';
 
 import styles from './Attachments.module.scss';
 
-const Attachments = React.memo(({ items, onUpdate, onDelete, onCoverUpdate }) => {
+const INITIALLY_VISIBLE = 4;
-  const [t] = useTranslation();
-  const [isOpened, toggleOpened] = useToggle();
 
-  const handleToggleClick = useCallback(() => {
+const Attachments = React.memo(
-    toggleOpened();
+  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
-  }, [toggleOpened]);
+    const [t] = useTranslation();
+    const [isAllVisible, toggleAllVisible] = useToggle();
 
-  const handleCoverSelect = useCallback(
+    const handleCoverSelect = useCallback(
-    (id) => {
+      (id) => {
-      onCoverUpdate(id);
+        onCoverUpdate(id);
-    },
+      },
-    [onCoverUpdate],
+      [onCoverUpdate],
-  );
+    );
 
-  const handleCoverDeselect = useCallback(() => {
+    const handleCoverDeselect = useCallback(() => {
-    onCoverUpdate(null);
+      onCoverUpdate(null);
-  }, [onCoverUpdate]);
+    }, [onCoverUpdate]);
 
-  const handleUpdate = useCallback(
+    const handleUpdate = useCallback(
-    (id, data) => {
+      (id, data) => {
-      onUpdate(id, data);
+        onUpdate(id, data);
-    },
+      },
-    [onUpdate],
+      [onUpdate],
-  );
+    );
 
-  const handleDelete = useCallback(
+    const handleDelete = useCallback(
-    (id) => {
+      (id) => {
-      onDelete(id);
+        onDelete(id);
-    },
+      },
-    [onDelete],
+      [onDelete],
-  );
+    );
 
-  const visibleItems = isOpened ? items : items.slice(0, 4);
+    const handleBeforeGalleryOpen = useCallback(
+      (gallery) => {
+        onGalleryOpen();
 
-  return (
+        gallery.on('destroy', () => {
-    <>
+          onGalleryClose();
-      {visibleItems.map((item) => (
+        });
-        <Item
+      },
+      [onGalleryOpen, onGalleryClose],
+    );
+
+    const handleToggleAllVisibleClick = useCallback(() => {
+      toggleAllVisible();
+    }, [toggleAllVisible]);
+
+    const galleryItemsNode = items.map((item, index) => {
+      const isPdf = item.url && item.url.endsWith('.pdf');
+
+      let props;
+      if (item.image) {
+        props = item.image;
+      } else {
+        props = {
+          content: isPdf ? (
+            // eslint-disable-next-line jsx-a11y/alt-text
+            <object
+              data={item.url}
+              type="application/pdf"
+              className={classNames(styles.content, styles.contentPdf)}
+            />
+          ) : (
+            <span className={classNames(styles.content, styles.contentError)}>
+              {t('common.thereIsNoPreviewAvailableForThisAttachment')}
+            </span>
+          ),
+        };
+      }
+
+      const isVisible = isAllVisible || index < INITIALLY_VISIBLE;
+
+      return (
+        <GalleryItem
+          {...props} // eslint-disable-line react/jsx-props-no-spreading
           key={item.id}
-          name={item.name}
+          original={item.url}
-          url={item.url}
+          caption={item.name}
-          coverUrl={item.coverUrl}
+        >
-          createdAt={item.createdAt}
+          {({ ref, open }) =>
-          isCover={item.isCover}
+            isVisible ? (
-          isPersisted={item.isPersisted}
+              <Item
-          onCoverSelect={() => handleCoverSelect(item.id)}
+                ref={ref}
-          onCoverDeselect={handleCoverDeselect}
+                name={item.name}
-          onUpdate={(data) => handleUpdate(item.id, data)}
+                url={item.url}
-          onDelete={() => handleDelete(item.id)}
+                coverUrl={item.coverUrl}
-        />
+                createdAt={item.createdAt}
-      ))}
+                isCover={item.isCover}
-      {items.length > 4 && (
+                isPersisted={item.isPersisted}
-        <Button
+                onClick={item.image || isPdf ? open : undefined}
-          fluid
+                onCoverSelect={() => handleCoverSelect(item.id)}
-          content={
+                onCoverDeselect={handleCoverDeselect}
-            isOpened
+                onUpdate={(data) => handleUpdate(item.id, data)}
-              ? t('action.showFewerAttachments')
+                onDelete={() => handleDelete(item.id)}
-              : t('action.showAllAttachments', {
+              />
-                  hidden: items.length - visibleItems.length,
+            ) : (
-                })
+              <span ref={ref} />
+            )
           }
-          className={styles.toggleButton}
+        </GalleryItem>
-          onClick={handleToggleClick}
+      );
-        />
+    });
-      )}
+
-    </>
+    return (
-  );
+      <>
-});
+        <Gallery
+          withCaption
+          withDownloadButton
+          options={{
+            showHideAnimationType: 'none',
+            closeTitle: '',
+            zoomTitle: '',
+            arrowPrevTitle: '',
+            arrowNextTitle: '',
+            errorMsg: '',
+          }}
+          onBeforeOpen={handleBeforeGalleryOpen}
+        >
+          {galleryItemsNode}
+        </Gallery>
+        {items.length > INITIALLY_VISIBLE && (
+          <Button
+            fluid
+            content={
+              isAllVisible
+                ? t('action.showFewerAttachments')
+                : t('action.showAllAttachments', {
+                    hidden: items.length - INITIALLY_VISIBLE,
+                  })
+            }
+            className={styles.toggleButton}
+            onClick={handleToggleAllVisibleClick}
+          />
+        )}
+      </>
+    );
+  },
+);
 
 Attachments.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onCoverUpdate: PropTypes.func.isRequired,
+  onGalleryOpen: PropTypes.func.isRequired,
+  onGalleryClose: PropTypes.func.isRequired,
 };
 
 export default Attachments;

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

@@ -1,4 +1,26 @@
 :global(#app) {
+  .content {
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
+  .contentPdf {
+    height: 100%;
+    width: 1120px;
+  }
+
+  .contentError {
+    color: #fff;
+    font-size: 20px;
+    font-weight: 700;
+    height: 20px;
+    width: 470px;
+  }
+
   .toggleButton {
     background: transparent;
     box-shadow: none;

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

@@ -8,24 +8,32 @@ import EditPopup from './EditPopup';
 
 import styles from './Item.module.scss';
 
-const Item = React.memo(
+const Item = React.forwardRef(
-  ({
+  (
-    name,
+    {
-    url,
+      name,
-    coverUrl,
+      url,
-    createdAt,
+      coverUrl,
-    isCover,
+      createdAt,
-    isPersisted,
+      isCover,
-    onCoverSelect,
+      isPersisted,
-    onCoverDeselect,
+      onCoverSelect,
-    onUpdate,
+      onCoverDeselect,
-    onDelete,
+      onClick,
-  }) => {
+      onUpdate,
+      onDelete,
+    },
+    ref,
+  ) => {
     const [t] = useTranslation();
 
     const handleClick = useCallback(() => {
-      window.open(url, '_blank');
+      if (onClick) {
-    }, [url]);
+        onClick();
+      } else {
+        window.open(url, '_blank');
+      }
+    }, [url, onClick]);
 
     const handleToggleCoverClick = useCallback(
       (event) => {
@@ -54,7 +62,7 @@ const Item = React.memo(
     return (
       /* eslint-disable jsx-a11y/click-events-have-key-events,
                         jsx-a11y/no-static-element-interactions */
-      <div className={styles.wrapper} onClick={handleClick}>
+      <div ref={ref} className={styles.wrapper} onClick={handleClick}>
         {/* eslint-enable jsx-a11y/click-events-have-key-events,
                           jsx-a11y/no-static-element-interactions */}
         <div
@@ -133,6 +141,7 @@ Item.propTypes = {
   createdAt: PropTypes.instanceOf(Date),
   isCover: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,
+  onClick: PropTypes.func,
   onCoverSelect: PropTypes.func.isRequired,
   onCoverDeselect: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
@@ -143,6 +152,7 @@ Item.defaultProps = {
   url: undefined,
   coverUrl: undefined,
   createdAt: undefined,
+  onClick: undefined,
 };
 
-export default Item;
+export default React.memo(Item);

client/src/components/CardModal/CardModal.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -61,6 +61,7 @@ const CardModal = React.memo(
     onLabelDelete,
     onTaskCreate,
     onTaskUpdate,
+    onTaskMove,
     onTaskDelete,
     onAttachmentCreate,
     onAttachmentUpdate,
@@ -73,6 +74,8 @@ const CardModal = React.memo(
   }) => {
     const [t] = useTranslation();
 
+    const isGalleryOpened = useRef(false);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -124,6 +127,22 @@ const CardModal = React.memo(
       });
     }, [isSubscribed, onUpdate]);
 
+    const handleGalleryOpen = useCallback(() => {
+      isGalleryOpened.current = true;
+    }, []);
+
+    const handleGalleryClose = useCallback(() => {
+      isGalleryOpened.current = false;
+    }, []);
+
+    const handleClose = useCallback(() => {
+      if (isGalleryOpened.current) {
+        return;
+      }
+
+      onClose();
+    }, [onClose]);
+
     const userIds = users.map((user) => user.id);
     const labelIds = labels.map((label) => label.id);
 
@@ -313,6 +332,7 @@ const CardModal = React.memo(
                     canEdit={canEdit}
                     onCreate={onTaskCreate}
                     onUpdate={onTaskUpdate}
+                    onMove={onTaskMove}
                     onDelete={onTaskDelete}
                   />
                 </div>
@@ -328,6 +348,8 @@ const CardModal = React.memo(
                     onUpdate={onAttachmentUpdate}
                     onDelete={onAttachmentDelete}
                     onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                   />
                 </div>
               </div>
@@ -445,7 +467,7 @@ const CardModal = React.memo(
     );
 
     return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon size="small" centered={false} onClose={handleClose}>
         {canEdit ? (
           <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
         ) : (
@@ -493,6 +515,7 @@ CardModal.propTypes = {
   onLabelDelete: PropTypes.func.isRequired,
   onTaskCreate: PropTypes.func.isRequired,
   onTaskUpdate: PropTypes.func.isRequired,
+  onTaskMove: PropTypes.func.isRequired,
   onTaskDelete: PropTypes.func.isRequired,
   onAttachmentCreate: PropTypes.func.isRequired,
   onAttachmentUpdate: PropTypes.func.isRequired,

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

@@ -115,20 +115,13 @@
     border: none;
     color: #17394d;
     cursor: pointer;
-    line-height: 1.5;
     font-size: 15px;
     margin-bottom: 8px;
     outline: none;
     overflow: hidden;
-    overflow-wrap: break-word;
     padding: 0;
     text-align: left;
-    white-space: pre-line;
     width: 100%;
-
-    img {
-      max-width: 100%;
-    }
   }
 
   .grid {

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

@@ -1,6 +1,8 @@
 import React, { useCallback, useRef } from 'react';
+import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { Draggable } from 'react-beautiful-dnd';
 import { Button, Checkbox, Icon } from 'semantic-ui-react';
 
 import NameEdit from './NameEdit';
@@ -8,72 +10,85 @@ import ActionsPopup from './ActionsPopup';
 
 import styles from './Item.module.scss';
 
-const Item = React.memo(({ name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
+const Item = React.memo(
-  const nameEdit = useRef(null);
+  ({ id, index, name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
+    const nameEdit = useRef(null);
 
-  const handleClick = useCallback(() => {
+    const handleClick = useCallback(() => {
-    if (isPersisted && canEdit) {
+      if (isPersisted && canEdit) {
-      nameEdit.current.open();
+        nameEdit.current.open();
-    }
+      }
-  }, [isPersisted, canEdit]);
+    }, [isPersisted, canEdit]);
 
-  const handleNameUpdate = useCallback(
+    const handleNameUpdate = useCallback(
-    (newName) => {
+      (newName) => {
+        onUpdate({
+          name: newName,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleToggleChange = useCallback(() => {
       onUpdate({
-        name: newName,
+        isCompleted: !isCompleted,
       });
-    },
+    }, [isCompleted, onUpdate]);
-    [onUpdate],
-  );
 
-  const handleToggleChange = useCallback(() => {
+    const handleNameEdit = useCallback(() => {
-    onUpdate({
+      nameEdit.current.open();
-      isCompleted: !isCompleted,
+    }, []);
-    });
-  }, [isCompleted, onUpdate]);
 
-  const handleNameEdit = useCallback(() => {
+    return (
-    nameEdit.current.open();
+      <Draggable draggableId={id} index={index} isDragDisabled={!isPersisted || !canEdit}>
-  }, []);
+        {({ innerRef, draggableProps, dragHandleProps }, { isDragging }) => {
+          const contentNode = (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <div {...draggableProps} {...dragHandleProps} ref={innerRef} className={styles.wrapper}>
+              <span className={styles.checkboxWrapper}>
+                <Checkbox
+                  checked={isCompleted}
+                  disabled={!isPersisted || !canEdit}
+                  className={styles.checkbox}
+                  onChange={handleToggleChange}
+                />
+              </span>
+              <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
+                <div className={classNames(canEdit && styles.contentHoverable)}>
+                  {/* eslint-disable jsx-a11y/click-events-have-key-events,
+                           jsx-a11y/no-static-element-interactions */}
+                  <span
+                    className={classNames(styles.text, canEdit && styles.textEditable)}
+                    onClick={handleClick}
+                  >
+                    {/* eslint-enable jsx-a11y/click-events-have-key-events,
+                            jsx-a11y/no-static-element-interactions */}
+                    <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
+                      {name}
+                    </span>
+                  </span>
+                  {isPersisted && canEdit && (
+                    <ActionsPopup onNameEdit={handleNameEdit} onDelete={onDelete}>
+                      <Button className={classNames(styles.button, styles.target)}>
+                        <Icon fitted name="pencil" size="small" />
+                      </Button>
+                    </ActionsPopup>
+                  )}
+                </div>
+              </NameEdit>
+            </div>
+          );
 
-  return (
+          return isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
-    <div className={styles.wrapper}>
+        }}
-      <span className={styles.checkboxWrapper}>
+      </Draggable>
-        <Checkbox
+    );
-          checked={isCompleted}
+  },
-          disabled={!isPersisted || !canEdit}
+);
-          className={styles.checkbox}
-          onChange={handleToggleChange}
-        />
-      </span>
-      <NameEdit ref={nameEdit} defaultValue={name} onUpdate={handleNameUpdate}>
-        <div className={classNames(canEdit && styles.contentHoverable)}>
-          {/* eslint-disable jsx-a11y/click-events-have-key-events,
-                             jsx-a11y/no-static-element-interactions */}
-          <span
-            className={classNames(styles.text, canEdit && styles.textEditable)}
-            onClick={handleClick}
-          >
-            {/* eslint-enable jsx-a11y/click-events-have-key-events,
-                              jsx-a11y/no-static-element-interactions */}
-            <span className={classNames(styles.task, isCompleted && styles.taskCompleted)}>
-              {name}
-            </span>
-          </span>
-          {isPersisted && canEdit && (
-            <ActionsPopup onNameEdit={handleNameEdit} onDelete={onDelete}>
-              <Button className={classNames(styles.button, styles.target)}>
-                <Icon fitted name="pencil" size="small" />
-              </Button>
-            </ActionsPopup>
-          )}
-        </div>
-      </NameEdit>
-    </div>
-  );
-});
 
 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,
   isCompleted: PropTypes.bool.isRequired,
   isPersisted: PropTypes.bool.isRequired,

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

@@ -27,7 +27,7 @@
     vertical-align: top;
     z-index: 2000;
     line-height: 1;
-    height: 32px;
+    height: 100%;
   }
 
   .contentHoverable:hover {
@@ -69,10 +69,10 @@
 
   .wrapper {
     border-radius: 3px;
+    cursor: auto;
     margin-left: -40px;
     min-height: 32px;
     position: relative;
-    transition: all 0.14s ease-in;
     width: calc(100% + 40px);
   }
 }

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

@@ -1,16 +1,34 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 import { Progress } from 'semantic-ui-react';
+import { closePopup } from '../../../lib/popup';
 
+import DroppableTypes from '../../../constants/DroppableTypes';
 import Item from './Item';
 import Add from './Add';
 
 import styles from './Tasks.module.scss';
 
-const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onDelete }) => {
+const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onMove, onDelete }) => {
   const [t] = useTranslation();
 
+  const handleDragStart = useCallback(() => {
+    closePopup();
+  }, []);
+
+  const handleDragEnd = useCallback(
+    ({ draggableId, source, destination }) => {
+      if (!destination || source.index === destination.index) {
+        return;
+      }
+
+      onMove(draggableId, destination.index);
+    },
+    [onMove],
+  );
+
   const handleUpdate = useCallback(
     (id, data) => {
       onUpdate(id, data);
@@ -39,26 +57,38 @@ const Tasks = React.memo(({ items, canEdit, onCreate, onUpdate, onDelete }) => {
           className={styles.progress}
         />
       )}
-      {items.map((item) => (
+      <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
-        <Item
+        <Droppable droppableId="tasks" type={DroppableTypes.TASK}>
-          key={item.id}
+          {({ innerRef, droppableProps, placeholder }) => (
-          name={item.name}
+            // eslint-disable-next-line react/jsx-props-no-spreading
-          isCompleted={item.isCompleted}
+            <div {...droppableProps} ref={innerRef}>
-          isPersisted={item.isPersisted}
+              {items.map((item, index) => (
-          canEdit={canEdit}
+                <Item
-          onUpdate={(data) => handleUpdate(item.id, data)}
+                  key={item.id}
-          onDelete={() => handleDelete(item.id)}
+                  id={item.id}
-        />
+                  index={index}
-      ))}
+                  name={item.name}
-      {canEdit && (
+                  isCompleted={item.isCompleted}
-        <Add onCreate={onCreate}>
+                  isPersisted={item.isPersisted}
-          <button type="button" className={styles.taskButton}>
+                  canEdit={canEdit}
-            <span className={styles.taskButtonText}>
+                  onUpdate={(data) => handleUpdate(item.id, data)}
-              {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+                  onDelete={() => handleDelete(item.id)}
-            </span>
+                />
-          </button>
+              ))}
-        </Add>
+              {placeholder}
-      )}
+              {canEdit && (
+                <Add onCreate={onCreate}>
+                  <button type="button" className={styles.taskButton}>
+                    <span className={styles.taskButtonText}>
+                      {items.length > 0 ? t('action.addAnotherTask') : t('action.addTask')}
+                    </span>
+                  </button>
+                </Add>
+              )}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
     </>
   );
 });
@@ -68,6 +98,7 @@ Tasks.propTypes = {
   canEdit: PropTypes.bool.isRequired,
   onCreate: PropTypes.func.isRequired,
   onUpdate: PropTypes.func.isRequired,
+  onMove: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
 };
 

client/src/components/Core.jsx

@@ -9,22 +9,24 @@ import UserSettingsModalContainer from '../containers/UserSettingsModalContainer
 import ProjectAddModalContainer from '../containers/ProjectAddModalContainer';
 import Background from './Background';
 
-const Core = ({ currentModal, currentProject }) => (
+function Core({ currentModal, currentProject }) {
-  <>
+  return (
-    {currentProject && currentProject.background && (
+    <>
-      <Background
+      {currentProject && currentProject.background && (
-        type={currentProject.background.type}
+        <Background
-        name={currentProject.background.name}
+          type={currentProject.background.type}
-        imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
+          name={currentProject.background.name}
-      />
+          imageUrl={currentProject.backgroundImage && currentProject.backgroundImage.url}
-    )}
+        />
-    <FixedContainer />
+      )}
-    <StaticContainer />
+      <FixedContainer />
-    {currentModal === ModalTypes.USERS && <UsersModalContainer />}
+      <StaticContainer />
-    {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
+      {currentModal === ModalTypes.USERS && <UsersModalContainer />}
-    {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
+      {currentModal === ModalTypes.USER_SETTINGS && <UserSettingsModalContainer />}
-  </>
+      {currentModal === ModalTypes.PROJECT_ADD && <ProjectAddModalContainer />}
-);
+    </>
+  );
+}
 
 Core.propTypes = {
   currentModal: PropTypes.oneOf(Object.values(ModalTypes)),

client/src/components/Fixed/Fixed.jsx

@@ -7,13 +7,15 @@ import BoardActionsContainer from '../../containers/BoardActionsContainer';
 
 import styles from './Fixed.module.scss';
 
-const Fixed = ({ projectId, board }) => (
+function Fixed({ projectId, board }) {
-  <div className={styles.wrapper}>
+  return (
-    <HeaderContainer />
+    <div className={styles.wrapper}>
-    {projectId && <ProjectContainer />}
+      <HeaderContainer />
-    {board && !board.isFetching && <BoardActionsContainer />}
+      {projectId && <ProjectContainer />}
-  </div>
+      {board && !board.isFetching && <BoardActionsContainer />}
-);
+    </div>
+  );
+}
 
 Fixed.propTypes = {
   projectId: PropTypes.string,

client/src/components/NotFound.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-const NotFound = () => {
+function NotFound() {
   const [t] = useTranslation();
 
   return (
@@ -11,6 +11,6 @@ const NotFound = () => {
       })}
     </h1>
   );
-};
+}
 
 export default NotFound;

client/src/components/Root.jsx

@@ -10,24 +10,27 @@ import CoreWrapperContainer from '../containers/CoreWrapperContainer';
 import NotFound from './NotFound';
 
 import 'react-datepicker/dist/react-datepicker.css';
+import 'photoswipe/dist/photoswipe.css';
 import '../lib/custom-ui/styles.css';
 
 import '../styles.module.scss';
 
-const Root = ({ store, history }) => (
+function Root({ store, history }) {
-  <Provider store={store}>
+  return (
-    <ConnectedRouter history={history}>
+    <Provider store={store}>
-      <Switch>
+      <ConnectedRouter history={history}>
-        <Route exact path={Paths.LOGIN} component={LoginContainer} />
+        <Switch>
-        <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
+          <Route exact path={Paths.LOGIN} component={LoginContainer} />
-        <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
+          <Route exact path={Paths.ROOT} component={CoreWrapperContainer} />
-        <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
+          <Route exact path={Paths.PROJECTS} component={CoreWrapperContainer} />
-        <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
+          <Route exact path={Paths.BOARDS} component={CoreWrapperContainer} />
-        <Route path="*" component={NotFound} />
+          <Route exact path={Paths.CARDS} component={CoreWrapperContainer} />
-      </Switch>
+          <Route path="*" component={NotFound} />
-    </ConnectedRouter>
+        </Switch>
-  </Provider>
+      </ConnectedRouter>
-);
+    </Provider>
+  );
+}
 
 Root.propTypes = {
   /* eslint-disable react/forbid-prop-types */

client/src/components/Static/Static.jsx

@@ -9,7 +9,7 @@ import BoardWrapperContainer from '../../containers/BoardWrapperContainer';
 
 import styles from './Static.module.scss';
 
-const Static = ({ cardId, boardId, projectId }) => {
+function Static({ cardId, boardId, projectId }) {
   const [t] = useTranslation();
 
   if (projectId === undefined) {
@@ -85,7 +85,7 @@ const Static = ({ cardId, boardId, projectId }) => {
       <BoardWrapperContainer />
     </div>
   );
-};
+}
 
 Static.propTypes = {
   cardId: PropTypes.string,

client/src/components/TimerEditStep/TimerEditStep.jsx

@@ -32,7 +32,7 @@ const createData = (timer) => {
 const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) => {
   const [t] = useTranslation();
   const [data, handleFieldChange, setData] = useForm(() => createData(defaultValue));
-  const [isEditing, toggleEdit] = useToggle();
+  const [isEditing, toggleEditing] = useToggle();
 
   const hoursField = useRef(null);
   const minutesField = useRef(null);
@@ -55,10 +55,10 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
     onClose();
   }, [defaultValue, onUpdate, onClose]);
 
-  const handleToggleEditClick = useCallback(() => {
+  const handleToggleEditingClick = useCallback(() => {
     setData(createData(defaultValue));
-    toggleEdit();
+    toggleEditing();
-  }, [defaultValue, setData, toggleEdit]);
+  }, [defaultValue, setData, toggleEditing]);
 
   const handleSubmit = useCallback(() => {
     const parts = {
@@ -149,7 +149,7 @@ const TimerEditStep = React.memo(({ defaultValue, onUpdate, onBack, onClose }) =
               type="button"
               icon={isEditing ? 'close' : 'edit'}
               className={styles.iconButton}
-              onClick={handleToggleEditClick}
+              onClick={handleToggleEditingClick}
             />
           </div>
           {isEditing && <Button positive content={t('action.save')} />}

client/src/components/UserEmailEditPopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserEmailEditStep from './UserEmailEditStep';
+
+export default withPopup(UserEmailEditStep);

client/src/components/UserEmailEditStep/UserEmailEditStep.jsx

@@ -1,15 +1,15 @@
+import omit from 'lodash/omit';
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
-import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../lib/custom-ui';
-import { Input, Popup } from '../../../lib/custom-ui';
 
-import { useForm } from '../../../hooks';
+import { useForm } from '../../hooks';
 
-import styles from './EmailEditPopup.module.scss';
+import styles from './UserEmailEditStep.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -35,8 +35,18 @@ const createMessage = (error) => {
   }
 };
 
-const EmailEditStep = React.memo(
+const UserEmailEditStep = React.memo(
-  ({ defaultData, email, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+  ({
+    defaultData,
+    email,
+    isSubmitting,
+    error,
+    usePasswordConfirmation,
+    onUpdate,
+    onMessageDismiss,
+    onBack,
+    onClose,
+  }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
 
@@ -68,13 +78,13 @@ const EmailEditStep = React.memo(
         return;
       }
 
-      if (!cleanData.currentPassword) {
+      if (usePasswordConfirmation && !cleanData.currentPassword) {
         currentPasswordField.current.focus();
         return;
       }
 
-      onUpdate(cleanData);
+      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
-    }, [email, onUpdate, onClose, data]);
+    }, [email, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
       emailField.current.select();
@@ -110,7 +120,7 @@ const EmailEditStep = React.memo(
 
     return (
       <>
-        <Popup.Header>
+        <Popup.Header onBack={onBack}>
           {t('common.editEmail', {
             context: 'title',
           })}
@@ -138,15 +148,19 @@ const EmailEditStep = React.memo(
               className={styles.field}
               onChange={handleFieldChange}
             />
-            <div className={styles.text}>{t('common.currentPassword')}</div>
+            {usePasswordConfirmation && (
-            <Input.Password
+              <>
-              fluid
+                <div className={styles.text}>{t('common.currentPassword')}</div>
-              ref={currentPasswordField}
+                <Input.Password
-              name="currentPassword"
+                  fluid
-              value={data.currentPassword}
+                  ref={currentPasswordField}
-              className={styles.field}
+                  name="currentPassword"
-              onChange={handleFieldChange}
+                  value={data.currentPassword}
-            />
+                  className={styles.field}
+                  onChange={handleFieldChange}
+                />
+              </>
+            )}
             <Button
               positive
               content={t('action.save')}
@@ -160,18 +174,22 @@ const EmailEditStep = React.memo(
   },
 );
 
-EmailEditStep.propTypes = {
+UserEmailEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   email: PropTypes.string.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
   error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  usePasswordConfirmation: PropTypes.bool,
   onUpdate: PropTypes.func.isRequired,
   onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-EmailEditStep.defaultProps = {
+UserEmailEditStep.defaultProps = {
   error: undefined,
+  usePasswordConfirmation: false,
+  onBack: undefined,
 };
 
-export default withPopup(EmailEditStep);
+export default UserEmailEditStep;

client/src/components/UserEmailEditStep/index.js

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

client/src/components/UserInformationEdit/UserInformationEdit.jsx

@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'semantic-ui-react';
 
-import { useForm } from '../../../hooks';
+import { useForm } from '../../hooks';
 
-import styles from './InformationEdit.module.scss';
+import styles from './UserInformationEdit.module.scss';
 
-const InformationEdit = React.memo(({ defaultData, onUpdate }) => {
+const UserInformationEdit = React.memo(({ defaultData, onUpdate }) => {
   const [t] = useTranslation();
 
   const [data, handleFieldChange] = useForm(() => ({
@@ -72,9 +72,9 @@ const InformationEdit = React.memo(({ defaultData, onUpdate }) => {
   );
 });
 
-InformationEdit.propTypes = {
+UserInformationEdit.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
 };
 
-export default InformationEdit;
+export default UserInformationEdit;

client/src/components/UserInformationEdit/index.js

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

client/src/components/UserInformationEditStep.jsx

@@ -0,0 +1,44 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Popup } from '../lib/custom-ui';
+
+import UserInformationEdit from './UserInformationEdit';
+
+const UserInformationEditStep = React.memo(({ defaultData, onUpdate, onBack, onClose }) => {
+  const [t] = useTranslation();
+
+  const handleUpdate = useCallback(
+    (data) => {
+      onUpdate(data);
+      onClose();
+    },
+    [onUpdate, onClose],
+  );
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editInformation', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        <UserInformationEdit defaultData={defaultData} onUpdate={handleUpdate} />
+      </Popup.Content>
+    </>
+  );
+});
+
+UserInformationEditStep.propTypes = {
+  defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUpdate: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
+  onClose: PropTypes.func.isRequired,
+};
+
+UserInformationEditStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default UserInformationEditStep;

client/src/components/UserPasswordEditPopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserPasswordEditStep from './UserPasswordEditStep';
+
+export default withPopup(UserPasswordEditStep);

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -1,14 +1,14 @@
+import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
-import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../lib/custom-ui';
-import { Input, Popup } from '../../../lib/custom-ui';
 
-import { useForm } from '../../../hooks';
+import { useForm } from '../../hooks';
 
-import styles from './PasswordEditPopup.module.scss';
+import styles from './UserPasswordEditStep.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -29,8 +29,17 @@ const createMessage = (error) => {
   }
 };
 
-const PasswordEditStep = React.memo(
+const UserPasswordEditStep = React.memo(
-  ({ defaultData, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+  ({
+    defaultData,
+    isSubmitting,
+    error,
+    usePasswordConfirmation,
+    onUpdate,
+    onMessageDismiss,
+    onBack,
+    onClose,
+  }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
 
@@ -52,13 +61,13 @@ const PasswordEditStep = React.memo(
         return;
       }
 
-      if (!data.currentPassword) {
+      if (usePasswordConfirmation && !data.currentPassword) {
         currentPasswordField.current.focus();
         return;
       }
 
-      onUpdate(data);
+      onUpdate(usePasswordConfirmation ? data : omit(data, 'currentPassword'));
-    }, [onUpdate, data]);
+    }, [usePasswordConfirmation, onUpdate, data]);
 
     useEffect(() => {
       passwordField.current.select();
@@ -84,7 +93,7 @@ const PasswordEditStep = React.memo(
 
     return (
       <>
-        <Popup.Header>
+        <Popup.Header onBack={onBack}>
           {t('common.editPassword', {
             context: 'title',
           })}
@@ -111,15 +120,19 @@ const PasswordEditStep = React.memo(
               className={styles.field}
               onChange={handleFieldChange}
             />
-            <div className={styles.text}>{t('common.currentPassword')}</div>
+            {usePasswordConfirmation && (
-            <Input.Password
+              <>
-              fluid
+                <div className={styles.text}>{t('common.currentPassword')}</div>
-              ref={currentPasswordField}
+                <Input.Password
-              name="currentPassword"
+                  fluid
-              value={data.currentPassword}
+                  ref={currentPasswordField}
-              className={styles.field}
+                  name="currentPassword"
-              onChange={handleFieldChange}
+                  value={data.currentPassword}
-            />
+                  className={styles.field}
+                  onChange={handleFieldChange}
+                />
+              </>
+            )}
             <Button
               positive
               content={t('action.save')}
@@ -133,17 +146,21 @@ const PasswordEditStep = React.memo(
   },
 );
 
-PasswordEditStep.propTypes = {
+UserPasswordEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   isSubmitting: PropTypes.bool.isRequired,
   error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  usePasswordConfirmation: PropTypes.bool,
   onUpdate: PropTypes.func.isRequired,
   onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-PasswordEditStep.defaultProps = {
+UserPasswordEditStep.defaultProps = {
   error: undefined,
+  usePasswordConfirmation: false,
+  onBack: undefined,
 };
 
-export default withPopup(PasswordEditStep);
+export default UserPasswordEditStep;

client/src/components/UserPasswordEditStep/index.js

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

client/src/components/UserSettingsModal/AccountPane/AccountPane.jsx

@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Header, Tab } from 'semantic-ui-react';
 
-import InformationEdit from './InformationEdit';
 import AvatarEditPopup from './AvatarEditPopup';
-import UsernameEditPopup from './UsernameEditPopup';
-import EmailEditPopup from './EmailEditPopup';
-import PasswordEditPopup from './PasswordEditPopup';
 import User from '../../User';
+import UserInformationEdit from '../../UserInformationEdit';
+import UserUsernameEditPopup from '../../UserUsernameEditPopup';
+import UserEmailEditPopup from '../../UserEmailEditPopup';
+import UserPasswordEditPopup from '../../UserPasswordEditPopup';
 
 import styles from './AccountPane.module.scss';
 
@@ -52,7 +52,7 @@ const AccountPane = React.memo(
         </AvatarEditPopup>
         <br />
         <br />
-        <InformationEdit
+        <UserInformationEdit
           defaultData={{
             name,
             phone,
@@ -68,7 +68,8 @@ const AccountPane = React.memo(
           </Header>
         </Divider>
         <div className={styles.action}>
-          <UsernameEditPopup
+          <UserUsernameEditPopup
+            usePasswordConfirmation
             defaultData={usernameUpdateForm.data}
             username={username}
             isSubmitting={usernameUpdateForm.isSubmitting}
@@ -81,10 +82,11 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </UsernameEditPopup>
+          </UserUsernameEditPopup>
         </div>
         <div className={styles.action}>
-          <EmailEditPopup
+          <UserEmailEditPopup
+            usePasswordConfirmation
             defaultData={emailUpdateForm.data}
             email={email}
             isSubmitting={emailUpdateForm.isSubmitting}
@@ -97,10 +99,11 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </EmailEditPopup>
+          </UserEmailEditPopup>
         </div>
         <div className={styles.action}>
-          <PasswordEditPopup
+          <UserPasswordEditPopup
+            usePasswordConfirmation
             defaultData={passwordUpdateForm.data}
             isSubmitting={passwordUpdateForm.isSubmitting}
             error={passwordUpdateForm.error}
@@ -112,7 +115,7 @@ const AccountPane = React.memo(
                 context: 'title',
               })}
             </Button>
-          </PasswordEditPopup>
+          </UserPasswordEditPopup>
         </div>
       </Tab.Pane>
     );

client/src/components/UserSettingsModal/AccountPane/PasswordEditPopup.module.scss

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

client/src/components/UserUsernameEditPopup.jsx

@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserUsernameEditStep from './UserUsernameEditStep';
+
+export default withPopup(UserUsernameEditStep);

client/src/components/UserUsernameEditStep/UserUsernameEditStep.jsx

@@ -1,15 +1,15 @@
+import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
-import { withPopup } from '../../../lib/popup';
+import { Input, Popup } from '../../lib/custom-ui';
-import { Input, Popup } from '../../../lib/custom-ui';
 
-import { useForm } from '../../../hooks';
+import { useForm } from '../../hooks';
-import { isUsername } from '../../../utils/validator';
+import { isUsername } from '../../utils/validator';
 
-import styles from './UsernameEditPopup.module.scss';
+import styles from './UserUsernameEditStep.module.scss';
 
 const createMessage = (error) => {
   if (!error) {
@@ -35,8 +35,18 @@ const createMessage = (error) => {
   }
 };
 
-const UsernameEditStep = React.memo(
+const UserUsernameEditStep = React.memo(
-  ({ defaultData, username, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+  ({
+    defaultData,
+    username,
+    isSubmitting,
+    error,
+    usePasswordConfirmation,
+    onUpdate,
+    onMessageDismiss,
+    onBack,
+    onClose,
+  }) => {
     const [t] = useTranslation();
     const wasSubmitting = usePrevious(isSubmitting);
 
@@ -58,7 +68,7 @@ const UsernameEditStep = React.memo(
         username: data.username.trim() || null,
       };
 
-      if (cleanData.username && !isUsername(cleanData.username)) {
+      if (!cleanData.username || !isUsername(cleanData.username)) {
         usernameField.current.select();
         return;
       }
@@ -68,13 +78,13 @@ const UsernameEditStep = React.memo(
         return;
       }
 
-      if (!cleanData.currentPassword) {
+      if (usePasswordConfirmation && !cleanData.currentPassword) {
         currentPasswordField.current.focus();
         return;
       }
 
-      onUpdate(cleanData);
+      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
-    }, [username, onUpdate, onClose, data]);
+    }, [username, usePasswordConfirmation, onUpdate, onClose, data]);
 
     useEffect(() => {
       usernameField.current.select();
@@ -110,7 +120,7 @@ const UsernameEditStep = React.memo(
 
     return (
       <>
-        <Popup.Header>
+        <Popup.Header onBack={onBack}>
           {t('common.editUsername', {
             context: 'title',
           })}
@@ -138,15 +148,19 @@ const UsernameEditStep = React.memo(
               className={styles.field}
               onChange={handleFieldChange}
             />
-            <div className={styles.text}>{t('common.currentPassword')}</div>
+            {usePasswordConfirmation && (
-            <Input.Password
+              <>
-              fluid
+                <div className={styles.text}>{t('common.currentPassword')}</div>
-              ref={currentPasswordField}
+                <Input.Password
-              name="currentPassword"
+                  fluid
-              value={data.currentPassword}
+                  ref={currentPasswordField}
-              className={styles.field}
+                  name="currentPassword"
-              onChange={handleFieldChange}
+                  value={data.currentPassword}
-            />
+                  className={styles.field}
+                  onChange={handleFieldChange}
+                />
+              </>
+            )}
             <Button
               positive
               content={t('action.save')}
@@ -160,19 +174,23 @@ const UsernameEditStep = React.memo(
   },
 );
 
-UsernameEditStep.propTypes = {
+UserUsernameEditStep.propTypes = {
   defaultData: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
   username: PropTypes.string,
   isSubmitting: PropTypes.bool.isRequired,
   error: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  usePasswordConfirmation: PropTypes.bool,
   onUpdate: PropTypes.func.isRequired,
   onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-UsernameEditStep.defaultProps = {
+UserUsernameEditStep.defaultProps = {
   username: undefined,
   error: undefined,
+  usePasswordConfirmation: false,
+  onBack: undefined,
 };
 
-export default withPopup(UsernameEditStep);
+export default UserUsernameEditStep;

client/src/components/UserUsernameEditStep/UserUsernameEditStep.module.scss

@@ -0,0 +1,12 @@
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}

client/src/components/UserUsernameEditStep/index.js

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

client/src/components/UsersModal/Item.jsx

@@ -1,56 +0,0 @@
-import React, { useCallback } from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-import { Button, Radio, Table } from 'semantic-ui-react';
-
-import DeletePopup from '../DeletePopup';
-
-import styles from './Item.module.scss';
-
-const Item = React.memo(({ name, username, email, isAdmin, onUpdate, onDelete }) => {
-  const [t] = useTranslation();
-
-  const handleIsAdminChange = useCallback(() => {
-    onUpdate({
-      isAdmin: !isAdmin,
-    });
-  }, [isAdmin, onUpdate]);
-
-  return (
-    <Table.Row>
-      <Table.Cell>{name}</Table.Cell>
-      <Table.Cell>{username || '-'}</Table.Cell>
-      <Table.Cell>{email}</Table.Cell>
-      <Table.Cell collapsing>
-        <Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
-      </Table.Cell>
-      <Table.Cell collapsing>
-        <DeletePopup
-          title={t('common.deleteUser', {
-            context: 'title',
-          })}
-          content={t('common.areYouSureYouWantToDeleteThisUser')}
-          buttonContent={t('action.deleteUser')}
-          onConfirm={onDelete}
-        >
-          <Button content={t('action.delete')} className={styles.button} />
-        </DeletePopup>
-      </Table.Cell>
-    </Table.Row>
-  );
-});
-
-Item.propTypes = {
-  name: PropTypes.string.isRequired,
-  username: PropTypes.string,
-  email: PropTypes.string.isRequired,
-  isAdmin: PropTypes.bool.isRequired,
-  onUpdate: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired,
-};
-
-Item.defaultProps = {
-  username: undefined,
-};
-
-export default Item;

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

@@ -0,0 +1,181 @@
+import pick from 'lodash/pick';
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import { Menu } from 'semantic-ui-react';
+import { withPopup } from '../../../lib/popup';
+import { Popup } from '../../../lib/custom-ui';
+
+import { useSteps } from '../../../hooks';
+import UserInformationEditStep from '../../UserInformationEditStep';
+import UserUsernameEditStep from '../../UserUsernameEditStep';
+import UserEmailEditStep from '../../UserEmailEditStep';
+import UserPasswordEditStep from '../../UserPasswordEditStep';
+import DeleteStep from '../../DeleteStep';
+
+import styles from './ActionsPopup.module.scss';
+
+const StepTypes = {
+  EDIT_INFORMATION: 'EDIT_INFORMATION',
+  EDIT_USERNAME: 'EDIT_USERNAME',
+  EDIT_EMAIL: 'EDIT_EMAIL',
+  EDIT_PASSWORD: 'EDIT_PASSWORD',
+  DELETE: 'DELETE',
+};
+
+const ActionsStep = React.memo(
+  ({
+    user,
+    onUpdate,
+    onUsernameUpdate,
+    onUsernameUpdateMessageDismiss,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onDelete,
+    onClose,
+  }) => {
+    const [t] = useTranslation();
+    const [step, openStep, handleBack] = useSteps();
+
+    const handleEditInformationClick = useCallback(() => {
+      openStep(StepTypes.EDIT_INFORMATION);
+    }, [openStep]);
+
+    const handleEditUsernameClick = useCallback(() => {
+      openStep(StepTypes.EDIT_USERNAME);
+    }, [openStep]);
+
+    const handleEditEmailClick = useCallback(() => {
+      openStep(StepTypes.EDIT_EMAIL);
+    }, [openStep]);
+
+    const handleEditPasswordClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PASSWORD);
+    }, [openStep]);
+
+    const handleDeleteClick = useCallback(() => {
+      openStep(StepTypes.DELETE);
+    }, [openStep]);
+
+    if (step) {
+      switch (step.type) {
+        case StepTypes.EDIT_INFORMATION:
+          return (
+            <UserInformationEditStep
+              defaultData={pick(user, ['name', 'phone', 'organization'])}
+              onUpdate={onUpdate}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_USERNAME:
+          return (
+            <UserUsernameEditStep
+              defaultData={user.usernameUpdateForm.data}
+              username={user.username}
+              isSubmitting={user.usernameUpdateForm.isSubmitting}
+              error={user.usernameUpdateForm.error}
+              onUpdate={onUsernameUpdate}
+              onMessageDismiss={onUsernameUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_EMAIL:
+          return (
+            <UserEmailEditStep
+              defaultData={user.emailUpdateForm.data}
+              email={user.email}
+              isSubmitting={user.emailUpdateForm.isSubmitting}
+              error={user.emailUpdateForm.error}
+              onUpdate={onEmailUpdate}
+              onMessageDismiss={onEmailUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_PASSWORD:
+          return (
+            <UserPasswordEditStep
+              defaultData={user.passwordUpdateForm.data}
+              isSubmitting={user.passwordUpdateForm.isSubmitting}
+              error={user.emailUpdateForm.error}
+              onUpdate={onPasswordUpdate}
+              onMessageDismiss={onPasswordUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.DELETE:
+          return (
+            <DeleteStep
+              title={t('common.deleteUser', {
+                context: 'title',
+              })}
+              content={t('common.areYouSureYouWantToDeleteThisUser')}
+              buttonContent={t('action.deleteUser')}
+              onConfirm={onDelete}
+              onBack={handleBack}
+            />
+          );
+        default:
+      }
+    }
+
+    return (
+      <>
+        <Popup.Header>
+          {t('common.userActions', {
+            context: 'title',
+          })}
+        </Popup.Header>
+        <Popup.Content>
+          <Menu secondary vertical className={styles.menu}>
+            <Menu.Item className={styles.menuItem} onClick={handleEditInformationClick}>
+              {t('action.editInformation', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
+              {t('action.editUsername', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEditEmailClick}>
+              {t('action.editEmail', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEditPasswordClick}>
+              {t('action.editPassword', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleDeleteClick}>
+              {t('action.deleteUser', {
+                context: 'title',
+              })}
+            </Menu.Item>
+          </Menu>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+ActionsStep.propTypes = {
+  user: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
+  onUpdate: PropTypes.func.isRequired,
+  onUsernameUpdate: PropTypes.func.isRequired,
+  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
+  onEmailUpdate: PropTypes.func.isRequired,
+  onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onPasswordUpdate: PropTypes.func.isRequired,
+  onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default withPopup(ActionsStep);

client/src/components/UsersModal/Item/ActionsPopup.module.scss

@@ -0,0 +1,11 @@
+:global(#app) {
+  .menu {
+    margin: -7px -12px -5px;
+    width: calc(100% + 24px);
+  }
+
+  .menuItem {
+    margin: 0;
+    padding-left: 14px;
+  }
+}

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

@@ -0,0 +1,103 @@
+import React, { useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { Button, Icon, Radio, Table } from 'semantic-ui-react';
+
+import ActionsPopup from './ActionsPopup';
+
+import styles from './Item.module.scss';
+
+const Item = React.memo(
+  ({
+    email,
+    username,
+    name,
+    organization,
+    phone,
+    isAdmin,
+    emailUpdateForm,
+    passwordUpdateForm,
+    usernameUpdateForm,
+    onUpdate,
+    onUsernameUpdate,
+    onUsernameUpdateMessageDismiss,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onDelete,
+  }) => {
+    const handleIsAdminChange = useCallback(() => {
+      onUpdate({
+        isAdmin: !isAdmin,
+      });
+    }, [isAdmin, onUpdate]);
+
+    return (
+      <Table.Row>
+        <Table.Cell>{name}</Table.Cell>
+        <Table.Cell>{username || '-'}</Table.Cell>
+        <Table.Cell>{email}</Table.Cell>
+        <Table.Cell collapsing>
+          <Radio toggle checked={isAdmin} onChange={handleIsAdminChange} />
+        </Table.Cell>
+        <Table.Cell collapsing>
+          <ActionsPopup
+            user={{
+              email,
+              username,
+              name,
+              organization,
+              phone,
+              isAdmin,
+              emailUpdateForm,
+              passwordUpdateForm,
+              usernameUpdateForm,
+            }}
+            onUpdate={onUpdate}
+            onUsernameUpdate={onUsernameUpdate}
+            onUsernameUpdateMessageDismiss={onUsernameUpdateMessageDismiss}
+            onEmailUpdate={onEmailUpdate}
+            onEmailUpdateMessageDismiss={onEmailUpdateMessageDismiss}
+            onPasswordUpdate={onPasswordUpdate}
+            onPasswordUpdateMessageDismiss={onPasswordUpdateMessageDismiss}
+            onDelete={onDelete}
+          >
+            <Button className={styles.button}>
+              <Icon fitted name="pencil" />
+            </Button>
+          </ActionsPopup>
+        </Table.Cell>
+      </Table.Row>
+    );
+  },
+);
+
+Item.propTypes = {
+  email: PropTypes.string.isRequired,
+  username: PropTypes.string,
+  name: PropTypes.string.isRequired,
+  organization: PropTypes.string,
+  phone: PropTypes.string,
+  isAdmin: PropTypes.bool.isRequired,
+  /* eslint-disable react/forbid-prop-types */
+  emailUpdateForm: PropTypes.object.isRequired,
+  passwordUpdateForm: PropTypes.object.isRequired,
+  usernameUpdateForm: PropTypes.object.isRequired,
+  /* eslint-enable react/forbid-prop-types */
+  onUpdate: PropTypes.func.isRequired,
+  onUsernameUpdate: PropTypes.func.isRequired,
+  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
+  onEmailUpdate: PropTypes.func.isRequired,
+  onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onPasswordUpdate: PropTypes.func.isRequired,
+  onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
+  onDelete: PropTypes.func.isRequired,
+};
+
+Item.defaultProps = {
+  username: undefined,
+  organization: undefined,
+  phone: undefined,
+};
+
+export default Item;

client/src/components/UsersModal/Item/index.js

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

client/src/components/UsersModal/UsersModal.jsx

@@ -6,68 +6,140 @@ import { Button, Modal, Table } from 'semantic-ui-react';
 import UserAddPopupContainer from '../../containers/UserAddPopupContainer';
 import Item from './Item';
 
-const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
+const UsersModal = React.memo(
-  const [t] = useTranslation();
+  ({
+    items,
+    onUpdate,
+    onUsernameUpdate,
+    onUsernameUpdateMessageDismiss,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onDelete,
+    onClose,
+  }) => {
+    const [t] = useTranslation();
 
-  const handleUpdate = useCallback(
+    const handleUpdate = useCallback(
-    (id, data) => {
+      (id, data) => {
-      onUpdate(id, data);
+        onUpdate(id, data);
-    },
+      },
-    [onUpdate],
+      [onUpdate],
-  );
+    );
 
-  const handleDelete = useCallback(
+    const handleUsernameUpdate = useCallback(
-    (id) => {
+      (id, data) => {
-      onDelete(id);
+        onUsernameUpdate(id, data);
-    },
+      },
-    [onDelete],
+      [onUsernameUpdate],
-  );
+    );
 
-  return (
+    const handleUsernameUpdateMessageDismiss = useCallback(
-    <Modal open closeIcon size="large" centered={false} onClose={onClose}>
+      (id) => {
-      <Modal.Header>
+        onUsernameUpdateMessageDismiss(id);
-        {t('common.users', {
+      },
-          context: 'title',
+      [onUsernameUpdateMessageDismiss],
-        })}
+    );
-      </Modal.Header>
+
-      <Modal.Content>
+    const handleEmailUpdate = useCallback(
-        <Table basic="very">
+      (id, data) => {
-          <Table.Header>
+        onEmailUpdate(id, data);
-            <Table.Row>
+      },
-              <Table.HeaderCell width={4}>{t('common.name')}</Table.HeaderCell>
+      [onEmailUpdate],
-              <Table.HeaderCell width={4}>{t('common.username')}</Table.HeaderCell>
+    );
-              <Table.HeaderCell width={4}>{t('common.email')}</Table.HeaderCell>
+
-              <Table.HeaderCell>{t('common.administrator')}</Table.HeaderCell>
+    const handleEmailUpdateMessageDismiss = useCallback(
-              <Table.HeaderCell />
+      (id) => {
-            </Table.Row>
+        onEmailUpdateMessageDismiss(id);
-          </Table.Header>
+      },
-          <Table.Body>
+      [onEmailUpdateMessageDismiss],
-            {items.map((item) => (
+    );
-              <Item
+
-                key={item.id}
+    const handlePasswordUpdate = useCallback(
-                name={item.name}
+      (id, data) => {
-                username={item.username}
+        onPasswordUpdate(id, data);
-                email={item.email}
+      },
-                isAdmin={item.isAdmin}
+      [onPasswordUpdate],
-                onUpdate={(data) => handleUpdate(item.id, data)}
+    );
-                onDelete={() => handleDelete(item.id)}
+
-              />
+    const handlePasswordUpdateMessageDismiss = useCallback(
-            ))}
+      (id) => {
-          </Table.Body>
+        onPasswordUpdateMessageDismiss(id);
-        </Table>
+      },
-      </Modal.Content>
+      [onPasswordUpdateMessageDismiss],
-      <Modal.Actions>
+    );
-        <UserAddPopupContainer>
+
-          <Button positive content={t('action.addUser')} />
+    const handleDelete = useCallback(
-        </UserAddPopupContainer>
+      (id) => {
-      </Modal.Actions>
+        onDelete(id);
-    </Modal>
+      },
-  );
+      [onDelete],
-});
+    );
+
+    return (
+      <Modal open closeIcon size="large" centered={false} onClose={onClose}>
+        <Modal.Header>
+          {t('common.users', {
+            context: 'title',
+          })}
+        </Modal.Header>
+        <Modal.Content>
+          <Table basic="very">
+            <Table.Header>
+              <Table.Row>
+                <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>
+                <Table.HeaderCell>{t('common.administrator')}</Table.HeaderCell>
+                <Table.HeaderCell />
+              </Table.Row>
+            </Table.Header>
+            <Table.Body>
+              {items.map((item) => (
+                <Item
+                  key={item.id}
+                  email={item.email}
+                  username={item.username}
+                  name={item.name}
+                  organization={item.organization}
+                  phone={item.phone}
+                  isAdmin={item.isAdmin}
+                  emailUpdateForm={item.emailUpdateForm}
+                  passwordUpdateForm={item.passwordUpdateForm}
+                  usernameUpdateForm={item.usernameUpdateForm}
+                  onUpdate={(data) => handleUpdate(item.id, data)}
+                  onUsernameUpdate={(data) => handleUsernameUpdate(item.id, data)}
+                  onUsernameUpdateMessageDismiss={() => handleUsernameUpdateMessageDismiss(item.id)}
+                  onEmailUpdate={(data) => handleEmailUpdate(item.id, data)}
+                  onEmailUpdateMessageDismiss={() => handleEmailUpdateMessageDismiss(item.id)}
+                  onPasswordUpdate={(data) => handlePasswordUpdate(item.id, data)}
+                  onPasswordUpdateMessageDismiss={() => handlePasswordUpdateMessageDismiss(item.id)}
+                  onDelete={() => handleDelete(item.id)}
+                />
+              ))}
+            </Table.Body>
+          </Table>
+        </Modal.Content>
+        <Modal.Actions>
+          <UserAddPopupContainer>
+            <Button positive content={t('action.addUser')} />
+          </UserAddPopupContainer>
+        </Modal.Actions>
+      </Modal>
+    );
+  },
+);
 
 UsersModal.propTypes = {
   items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
   onUpdate: PropTypes.func.isRequired,
+  onUsernameUpdate: PropTypes.func.isRequired,
+  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
+  onEmailUpdate: PropTypes.func.isRequired,
+  onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onPasswordUpdate: PropTypes.func.isRequired,
+  onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
   onDelete: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };

client/src/constants/Config.js

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

client/src/constants/DroppableTypes.js

@@ -1,9 +1,11 @@
 const BOARD = 'BOARD';
 const LIST = 'LIST';
 const CARD = 'CARD';
+const TASK = 'TASK';
 
 export default {
   BOARD,
   LIST,
   CARD,
+  TASK,
 };

client/src/constants/EntryActionTypes.js

@@ -31,11 +31,17 @@ export default {
   USER_UPDATE: `${PREFIX}/USER_UPDATE`,
   CURRENT_USER_UPDATE: `${PREFIX}/CURRENT_USER_UPDATE`,
   USER_UPDATE_HANDLE: `${PREFIX}/USER_UPDATE_HANDLE`,
+  USER_EMAIL_UPDATE: `${PREFIX}/USER_EMAIL_UPDATE`,
   CURRENT_USER_EMAIL_UPDATE: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE`,
+  USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_EMAIL_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR`,
+  USER_PASSWORD_UPDATE: `${PREFIX}/USER_PASSWORD_UPDATE`,
   CURRENT_USER_PASSWORD_UPDATE: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE`,
+  USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_PASSWORD_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR`,
+  USER_USERNAME_UPDATE: `${PREFIX}/USER_USERNAME_UPDATE`,
   CURRENT_USER_USERNAME_UPDATE: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE`,
+  USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_USERNAME_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_AVATAR_UPDATE: `${PREFIX}/CURRENT_USER_AVATAR_UPDATE`,
   USER_DELETE: `${PREFIX}/USER_DELETE`,
@@ -132,6 +138,7 @@ export default {
   TASK_CREATE_HANDLE: `${PREFIX}/TASK_CREATE_HANDLE`,
   TASK_UPDATE: `${PREFIX}/TASK_UPDATE`,
   TASK_UPDATE_HANDLE: `${PREFIX}/TASK_UPDATE_HANDLE`,
+  TASK_MOVE: `${PREFIX}/TASK_MOVE`,
   TASK_DELETE: `${PREFIX}/TASK_DELETE`,
   TASK_DELETE_HANDLE: `${PREFIX}/TASK_DELETE_HANDLE`,
 

client/src/containers/CardModalContainer.js

@@ -32,6 +32,7 @@ import {
   fetchActionsInCurrentCard,
   fetchBoard,
   moveCurrentCard,
+  moveTask,
   removeLabelFromCurrentCard,
   removeUserFromCurrentCard,
   transferCurrentCard,
@@ -111,6 +112,7 @@ const mapDispatchToProps = (dispatch) =>
       onLabelDelete: deleteLabel,
       onTaskCreate: createTaskInCurrentCard,
       onTaskUpdate: updateTask,
+      onTaskMove: moveTask,
       onTaskDelete: deleteTask,
       onAttachmentCreate: createAttachmentInCurrentCard,
       onAttachmentUpdate: updateAttachment,

client/src/containers/UsersModalContainer.js

@@ -2,7 +2,17 @@ import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 
 import { usersExceptCurrentSelector } from '../selectors';
-import { closeModal, deleteUser, updateUser } from '../actions/entry';
+import {
+  clearUserEmailUpdateError,
+  clearUserPasswordUpdateError,
+  clearUserUsernameUpdateError,
+  closeModal,
+  deleteUser,
+  updateUser,
+  updateUserEmail,
+  updateUserPassword,
+  updateUserUsername,
+} from '../actions/entry';
 import UsersModal from '../components/UsersModal';
 
 const mapStateToProps = (state) => {
@@ -17,6 +27,12 @@ const mapDispatchToProps = (dispatch) =>
   bindActionCreators(
     {
       onUpdate: updateUser,
+      onUsernameUpdate: updateUserUsername,
+      onUsernameUpdateMessageDismiss: clearUserUsernameUpdateError,
+      onEmailUpdate: updateUserEmail,
+      onEmailUpdateMessageDismiss: clearUserEmailUpdateError,
+      onPasswordUpdate: updateUserPassword,
+      onPasswordUpdateMessageDismiss: clearUserPasswordUpdateError,
       onDelete: deleteUser,
       onClose: closeModal,
     },

client/src/i18n.js

@@ -14,7 +14,7 @@ i18n.dateFns = {
 
     registerLocale(language, locale);
   },
-  getLocale(language = i18n.language) {
+  getLocale(language = i18n.resolvedLanguage) {
     return this.locales[language];
   },
   format(date, format, { language, ...options } = {}) {
@@ -31,8 +31,8 @@ i18n.dateFns = {
   },
 };
 
-i18n.on('languageChanged', (language) => {
+i18n.on('languageChanged', () => {
-  setDefaultLocale(language);
+  setDefaultLocale(i18n.resolvedLanguage);
 });
 
 const formatDatePostProcessor = {
@@ -58,9 +58,9 @@ i18n
   .use(initReactI18next)
   .init({
     resources: embedLocales,
-    fallbackLng: false,
+    fallbackLng: 'en',
-    whitelist: languages,
+    supportedLngs: languages,
-    load: 'currentOnly',
+    load: 'languageOnly',
     interpolation: {
       escapeValue: false,
       format(value, format, language) {
@@ -79,17 +79,20 @@ i18n
     debug: process.env.NODE_ENV !== 'production',
   });
 
-i18n.loadCoreLocale = (language) =>
+i18n.loadCoreLocale = async (language = i18n.resolvedLanguage) => {
-  import(`./locales/${language}/core`).then((module) => {
+  if (language === 'en') {
-    const locale = module.default;
+    return;
+  }
 
-    Object.keys(locale).forEach((namespace) => {
+  const { default: locale } = await import(`./locales/${language}/core`);
-      if (namespace === 'dateFns') {
+
-        i18n.dateFns.addLocale(language, locale[namespace]);
+  Object.keys(locale).forEach((namespace) => {
-      } else {
+    if (namespace === 'dateFns') {
-        i18n.addResourceBundle(language, namespace, locale[namespace], true, true);
+      i18n.dateFns.addLocale(language, locale[namespace]);
-      }
+    } else {
-    });
+      i18n.addResourceBundle(language, namespace, locale[namespace], true, true);
+    }
   });
+};
 
 export default i18n;

client/src/lib/custom-ui/components/Markdown/Markdown.jsx

@@ -1,7 +1,10 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
-import gfm from 'remark-gfm';
+import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';
+
+import './Markdown.module.scss'; // FIXME: import as styles?
 
 const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
   const handleLinkClick = useCallback((event) => {
@@ -21,16 +24,21 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
     [handleLinkClick],
   );
 
-  let renderers;
+  let components;
-
   if (linkStopPropagation) {
-    renderers = {
+    components = {
-      link: linkRenderer,
+      a: linkRenderer,
     };
   }
 
-  // eslint-disable-next-line react/jsx-props-no-spreading
+  return (
-  return <ReactMarkdown {...props} plugins={[gfm]} renderers={renderers} />;
+    <ReactMarkdown
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      components={components}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
+      className="markdown-body"
+    />
+  );
 });
 
 Markdown.propTypes = {

client/src/lib/custom-ui/components/Markdown/Markdown.module.scss

@@ -0,0 +1,942 @@
+:global {
+  .markdown-body {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    margin: 0;
+    /* color: #24292f;
+    background-color: #ffffff;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    font-size: 16px; */
+    line-height: 1.5;
+    word-wrap: break-word;
+  }
+
+  .markdown-body .octicon {
+    display: inline-block;
+    fill: currentColor;
+    vertical-align: text-bottom;
+  }
+
+  .markdown-body h1:hover .anchor .octicon-link:before,
+  .markdown-body h2:hover .anchor .octicon-link:before,
+  .markdown-body h3:hover .anchor .octicon-link:before,
+  .markdown-body h4:hover .anchor .octicon-link:before,
+  .markdown-body h5:hover .anchor .octicon-link:before,
+  .markdown-body h6:hover .anchor .octicon-link:before {
+    width: 16px;
+    height: 16px;
+    content: ' ';
+    display: inline-block;
+    background-color: currentColor;
+    -webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+    mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
+  }
+
+  .markdown-body details,
+  .markdown-body figcaption,
+  .markdown-body figure {
+    display: block;
+  }
+
+  .markdown-body summary {
+    display: list-item;
+  }
+
+  .markdown-body [hidden] {
+    display: none !important;
+  }
+
+  .markdown-body a {
+    background-color: transparent;
+    color: #0969da;
+    text-decoration: none;
+  }
+
+  .markdown-body a:active,
+  .markdown-body a:hover {
+    outline-width: 0;
+  }
+
+  .markdown-body abbr[title] {
+    border-bottom: none;
+    text-decoration: underline dotted;
+  }
+
+  .markdown-body b,
+  .markdown-body strong {
+    font-weight: 600;
+  }
+
+  .markdown-body dfn {
+    font-style: italic;
+  }
+
+  .markdown-body h1 {
+    margin: .67em 0;
+    font-weight: 600;
+    padding-bottom: .3em;
+    font-size: 2em;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+  }
+
+  .markdown-body mark {
+    background-color: #fff8c5;
+    color: #24292f;
+  }
+
+  .markdown-body small {
+    font-size: 90%;
+  }
+
+  .markdown-body sub,
+  .markdown-body sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+
+  .markdown-body sub {
+    bottom: -0.25em;
+  }
+
+  .markdown-body sup {
+    top: -0.5em;
+  }
+
+  .markdown-body img {
+    border-style: none;
+    max-width: 100%;
+    box-sizing: content-box;
+    background-color: #ffffff;
+  }
+
+  .markdown-body code,
+  .markdown-body kbd,
+  .markdown-body pre,
+  .markdown-body samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+  }
+
+  .markdown-body figure {
+    margin: 1em 40px;
+  }
+
+  .markdown-body hr {
+    box-sizing: content-box;
+    overflow: hidden;
+    background: transparent;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+    height: .25em;
+    padding: 0;
+    margin: 24px 0;
+    background-color: #d0d7de;
+    border: 0;
+  }
+
+  .markdown-body input {
+    font: inherit;
+    margin: 0;
+    overflow: visible;
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+  }
+
+  .markdown-body [type=button],
+  .markdown-body [type=reset],
+  .markdown-body [type=submit] {
+    -webkit-appearance: button;
+  }
+
+  .markdown-body [type=button]::-moz-focus-inner,
+  .markdown-body [type=reset]::-moz-focus-inner,
+  .markdown-body [type=submit]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  .markdown-body [type=button]:-moz-focusring,
+  .markdown-body [type=reset]:-moz-focusring,
+  .markdown-body [type=submit]:-moz-focusring {
+    outline: 1px dotted ButtonText;
+  }
+
+  .markdown-body [type=checkbox],
+  .markdown-body [type=radio] {
+    box-sizing: border-box;
+    padding: 0;
+  }
+
+  .markdown-body [type=number]::-webkit-inner-spin-button,
+  .markdown-body [type=number]::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  .markdown-body [type=search] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  .markdown-body [type=search]::-webkit-search-cancel-button,
+  .markdown-body [type=search]::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  .markdown-body ::-webkit-input-placeholder {
+    color: inherit;
+    opacity: .54;
+  }
+
+  .markdown-body ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  .markdown-body a:hover {
+    text-decoration: underline;
+  }
+
+  .markdown-body hr::before {
+    display: table;
+    content: "";
+  }
+
+  .markdown-body hr::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .markdown-body table {
+    border-spacing: 0;
+    border-collapse: collapse;
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow: auto;
+  }
+
+  .markdown-body td,
+  .markdown-body th {
+    padding: 0;
+  }
+
+  .markdown-body details summary {
+    cursor: pointer;
+  }
+
+  .markdown-body details:not([open])>*:not(summary) {
+    display: none !important;
+  }
+
+  .markdown-body kbd {
+    display: inline-block;
+    padding: 3px 5px;
+    font: 11px ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    line-height: 10px;
+    color: #24292f;
+    vertical-align: middle;
+    background-color: #f6f8fa;
+    border: solid 1px rgba(175, 184, 193, 0.2);
+    border-bottom-color: rgba(175, 184, 193, 0.2);
+    border-radius: 6px;
+    box-shadow: inset 0 -1px 0 rgba(175, 184, 193, 0.2);
+  }
+
+  .markdown-body h1,
+  .markdown-body h2,
+  .markdown-body h3,
+  .markdown-body h4,
+  .markdown-body h5,
+  .markdown-body h6 {
+    margin-top: 24px;
+    margin-bottom: 16px;
+    font-weight: 600;
+    line-height: 1.25;
+  }
+
+  .markdown-body h2 {
+    font-weight: 600;
+    padding-bottom: .3em;
+    font-size: 1.5em;
+    border-bottom: 1px solid hsla(210, 18%, 87%, 1);
+  }
+
+  .markdown-body h3 {
+    font-weight: 600;
+    font-size: 1.25em;
+  }
+
+  .markdown-body h4 {
+    font-weight: 600;
+    font-size: 1em;
+  }
+
+  .markdown-body h5 {
+    font-weight: 600;
+    font-size: .875em;
+  }
+
+  .markdown-body h6 {
+    font-weight: 600;
+    font-size: .85em;
+    color: #57606a;
+  }
+
+  .markdown-body p {
+    margin-top: 0;
+    margin-bottom: 10px;
+  }
+
+  .markdown-body blockquote {
+    margin: 0;
+    padding: 0 1em;
+    color: #57606a;
+    border-left: .25em solid #d0d7de;
+  }
+
+  .markdown-body ul,
+  .markdown-body ol {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-left: 2em;
+  }
+
+  .markdown-body ol ol,
+  .markdown-body ul ol {
+    list-style-type: lower-roman;
+  }
+
+  .markdown-body ul ul ol,
+  .markdown-body ul ol ol,
+  .markdown-body ol ul ol,
+  .markdown-body ol ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  .markdown-body dd {
+    margin-left: 0;
+  }
+
+  .markdown-body tt,
+  .markdown-body code {
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    font-size: 12px;
+  }
+
+  .markdown-body pre {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    font-size: 12px;
+    word-wrap: normal;
+  }
+
+  .markdown-body .octicon {
+    display: inline-block;
+    overflow: visible !important;
+    vertical-align: text-bottom;
+    fill: currentColor;
+  }
+
+  .markdown-body ::placeholder {
+    color: #6e7781;
+    opacity: 1;
+  }
+
+  .markdown-body input::-webkit-outer-spin-button,
+  .markdown-body input::-webkit-inner-spin-button {
+    margin: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+
+  .markdown-body .pl-c {
+    color: #6e7781;
+  }
+
+  .markdown-body .pl-c1,
+  .markdown-body .pl-s .pl-v {
+    color: #0550ae;
+  }
+
+  .markdown-body .pl-e,
+  .markdown-body .pl-en {
+    color: #8250df;
+  }
+
+  .markdown-body .pl-smi,
+  .markdown-body .pl-s .pl-s1 {
+    color: #24292f;
+  }
+
+  .markdown-body .pl-ent {
+    color: #116329;
+  }
+
+  .markdown-body .pl-k {
+    color: #cf222e;
+  }
+
+  .markdown-body .pl-s,
+  .markdown-body .pl-pds,
+  .markdown-body .pl-s .pl-pse .pl-s1,
+  .markdown-body .pl-sr,
+  .markdown-body .pl-sr .pl-cce,
+  .markdown-body .pl-sr .pl-sre,
+  .markdown-body .pl-sr .pl-sra {
+    color: #0a3069;
+  }
+
+  .markdown-body .pl-v,
+  .markdown-body .pl-smw {
+    color: #953800;
+  }
+
+  .markdown-body .pl-bu {
+    color: #82071e;
+  }
+
+  .markdown-body .pl-ii {
+    color: #f6f8fa;
+    background-color: #82071e;
+  }
+
+  .markdown-body .pl-c2 {
+    color: #f6f8fa;
+    background-color: #cf222e;
+  }
+
+  .markdown-body .pl-sr .pl-cce {
+    font-weight: bold;
+    color: #116329;
+  }
+
+  .markdown-body .pl-ml {
+    color: #3b2300;
+  }
+
+  .markdown-body .pl-mh,
+  .markdown-body .pl-mh .pl-en,
+  .markdown-body .pl-ms {
+    font-weight: bold;
+    color: #0550ae;
+  }
+
+  .markdown-body .pl-mi {
+    font-style: italic;
+    color: #24292f;
+  }
+
+  .markdown-body .pl-mb {
+    font-weight: bold;
+    color: #24292f;
+  }
+
+  .markdown-body .pl-md {
+    color: #82071e;
+    background-color: #FFEBE9;
+  }
+
+  .markdown-body .pl-mi1 {
+    color: #116329;
+    background-color: #dafbe1;
+  }
+
+  .markdown-body .pl-mc {
+    color: #953800;
+    background-color: #ffd8b5;
+  }
+
+  .markdown-body .pl-mi2 {
+    color: #eaeef2;
+    background-color: #0550ae;
+  }
+
+  .markdown-body .pl-mdr {
+    font-weight: bold;
+    color: #8250df;
+  }
+
+  .markdown-body .pl-ba {
+    color: #57606a;
+  }
+
+  .markdown-body .pl-sg {
+    color: #8c959f;
+  }
+
+  .markdown-body .pl-corl {
+    text-decoration: underline;
+    color: #0a3069;
+  }
+
+  .markdown-body [data-catalyst] {
+    display: block;
+  }
+
+  .markdown-body g-emoji {
+    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 1em;
+    font-style: normal !important;
+    font-weight: 400;
+    line-height: 1;
+    vertical-align: -0.075em;
+  }
+
+  .markdown-body g-emoji img {
+    width: 1em;
+    height: 1em;
+  }
+
+  .markdown-body::before {
+    display: table;
+    content: "";
+  }
+
+  .markdown-body::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .markdown-body>*:first-child {
+    margin-top: 0 !important;
+  }
+
+  .markdown-body>*:last-child {
+    margin-bottom: 0 !important;
+  }
+
+  .markdown-body a:not([href]) {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .markdown-body .absent {
+    color: #cf222e;
+  }
+
+  .markdown-body .anchor {
+    float: left;
+    padding-right: 4px;
+    margin-left: -20px;
+    line-height: 1;
+  }
+
+  .markdown-body .anchor:focus {
+    outline: none;
+  }
+
+  .markdown-body p,
+  .markdown-body blockquote,
+  .markdown-body ul,
+  .markdown-body ol,
+  .markdown-body dl,
+  .markdown-body table,
+  .markdown-body pre,
+  .markdown-body details {
+    margin-top: 0;
+    margin-bottom: 16px;
+  }
+
+  .markdown-body blockquote>:first-child {
+    margin-top: 0;
+  }
+
+  .markdown-body blockquote>:last-child {
+    margin-bottom: 0;
+  }
+
+  .markdown-body sup>a::before {
+    content: "[";
+  }
+
+  .markdown-body sup>a::after {
+    content: "]";
+  }
+
+  .markdown-body h1 .octicon-link,
+  .markdown-body h2 .octicon-link,
+  .markdown-body h3 .octicon-link,
+  .markdown-body h4 .octicon-link,
+  .markdown-body h5 .octicon-link,
+  .markdown-body h6 .octicon-link {
+    color: #24292f;
+    vertical-align: middle;
+    visibility: hidden;
+  }
+
+  .markdown-body h1:hover .anchor,
+  .markdown-body h2:hover .anchor,
+  .markdown-body h3:hover .anchor,
+  .markdown-body h4:hover .anchor,
+  .markdown-body h5:hover .anchor,
+  .markdown-body h6:hover .anchor {
+    text-decoration: none;
+  }
+
+  .markdown-body h1:hover .anchor .octicon-link,
+  .markdown-body h2:hover .anchor .octicon-link,
+  .markdown-body h3:hover .anchor .octicon-link,
+  .markdown-body h4:hover .anchor .octicon-link,
+  .markdown-body h5:hover .anchor .octicon-link,
+  .markdown-body h6:hover .anchor .octicon-link {
+    visibility: visible;
+  }
+
+  .markdown-body h1 tt,
+  .markdown-body h1 code,
+  .markdown-body h2 tt,
+  .markdown-body h2 code,
+  .markdown-body h3 tt,
+  .markdown-body h3 code,
+  .markdown-body h4 tt,
+  .markdown-body h4 code,
+  .markdown-body h5 tt,
+  .markdown-body h5 code,
+  .markdown-body h6 tt,
+  .markdown-body h6 code {
+    padding: 0 .2em;
+    font-size: inherit;
+  }
+
+  .markdown-body ul.no-list,
+  .markdown-body ol.no-list {
+    padding: 0;
+    list-style-type: none;
+  }
+
+  .markdown-body ol[type="1"] {
+    list-style-type: decimal;
+  }
+
+  .markdown-body ol[type=a] {
+    list-style-type: lower-alpha;
+  }
+
+  .markdown-body ol[type=i] {
+    list-style-type: lower-roman;
+  }
+
+  .markdown-body div>ol:not([type]) {
+    list-style-type: decimal;
+  }
+
+  .markdown-body ul ul,
+  .markdown-body ul ol,
+  .markdown-body ol ol,
+  .markdown-body ol ul {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  .markdown-body li>p {
+    margin-top: 16px;
+  }
+
+  .markdown-body li+li {
+    margin-top: .25em;
+  }
+
+  .markdown-body dl {
+    padding: 0;
+  }
+
+  .markdown-body dl dt {
+    padding: 0;
+    margin-top: 16px;
+    font-size: 1em;
+    font-style: italic;
+    font-weight: 600;
+  }
+
+  .markdown-body dl dd {
+    padding: 0 16px;
+    margin-bottom: 16px;
+  }
+
+  .markdown-body table th {
+    font-weight: 600;
+  }
+
+  .markdown-body table th,
+  .markdown-body table td {
+    padding: 6px 13px;
+    border: 1px solid #d0d7de;
+  }
+
+  .markdown-body table tr {
+    background-color: #ffffff;
+    border-top: 1px solid hsla(210, 18%, 87%, 1);
+  }
+
+  .markdown-body table tr:nth-child(2n) {
+    background-color: #f6f8fa;
+  }
+
+  .markdown-body table img {
+    background-color: transparent;
+  }
+
+  .markdown-body img[align=right] {
+    padding-left: 20px;
+  }
+
+  .markdown-body img[align=left] {
+    padding-right: 20px;
+  }
+
+  .markdown-body .emoji {
+    max-width: none;
+    vertical-align: text-top;
+    background-color: transparent;
+  }
+
+  .markdown-body span.frame {
+    display: block;
+    overflow: hidden;
+  }
+
+  .markdown-body span.frame>span {
+    display: block;
+    float: left;
+    width: auto;
+    padding: 7px;
+    margin: 13px 0 0;
+    overflow: hidden;
+    border: 1px solid #d0d7de;
+  }
+
+  .markdown-body span.frame span img {
+    display: block;
+    float: left;
+  }
+
+  .markdown-body span.frame span span {
+    display: block;
+    padding: 5px 0 0;
+    clear: both;
+    color: #24292f;
+  }
+
+  .markdown-body span.align-center {
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+
+  .markdown-body span.align-center>span {
+    display: block;
+    margin: 13px auto 0;
+    overflow: hidden;
+    text-align: center;
+  }
+
+  .markdown-body span.align-center span img {
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  .markdown-body span.align-right {
+    display: block;
+    overflow: hidden;
+    clear: both;
+  }
+
+  .markdown-body span.align-right>span {
+    display: block;
+    margin: 13px 0 0;
+    overflow: hidden;
+    text-align: right;
+  }
+
+  .markdown-body span.align-right span img {
+    margin: 0;
+    text-align: right;
+  }
+
+  .markdown-body span.float-left {
+    display: block;
+    float: left;
+    margin-right: 13px;
+    overflow: hidden;
+  }
+
+  .markdown-body span.float-left span {
+    margin: 13px 0 0;
+  }
+
+  .markdown-body span.float-right {
+    display: block;
+    float: right;
+    margin-left: 13px;
+    overflow: hidden;
+  }
+
+  .markdown-body span.float-right>span {
+    display: block;
+    margin: 13px auto 0;
+    overflow: hidden;
+    text-align: right;
+  }
+
+  .markdown-body code,
+  .markdown-body tt {
+    padding: .2em .4em;
+    margin: 0;
+    font-size: 85%;
+    background-color: rgba(175, 184, 193, 0.2);
+    border-radius: 6px;
+  }
+
+  .markdown-body code br,
+  .markdown-body tt br {
+    display: none;
+  }
+
+  .markdown-body del code {
+    text-decoration: inherit;
+  }
+
+  .markdown-body pre code {
+    font-size: 100%;
+  }
+
+  .markdown-body pre>code {
+    padding: 0;
+    margin: 0;
+    word-break: normal;
+    white-space: pre;
+    background: transparent;
+    border: 0;
+  }
+
+  .markdown-body .highlight {
+    margin-bottom: 16px;
+  }
+
+  .markdown-body .highlight pre {
+    margin-bottom: 0;
+    word-break: normal;
+  }
+
+  .markdown-body .highlight pre,
+  .markdown-body pre {
+    padding: 16px;
+    overflow: auto;
+    font-size: 85%;
+    line-height: 1.45;
+    background-color: #f6f8fa;
+    border-radius: 6px;
+  }
+
+  .markdown-body pre code,
+  .markdown-body pre tt {
+    display: inline;
+    max-width: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    line-height: inherit;
+    word-wrap: normal;
+    background-color: transparent;
+    border: 0;
+  }
+
+  .markdown-body .csv-data td,
+  .markdown-body .csv-data th {
+    padding: 5px;
+    overflow: hidden;
+    font-size: 12px;
+    line-height: 1;
+    text-align: left;
+    white-space: nowrap;
+  }
+
+  .markdown-body .csv-data .blob-num {
+    padding: 10px 8px 9px;
+    text-align: right;
+    background: #ffffff;
+    border: 0;
+  }
+
+  .markdown-body .csv-data tr {
+    border-top: 0;
+  }
+
+  .markdown-body .csv-data th {
+    font-weight: 600;
+    background: #f6f8fa;
+    border-top: 0;
+  }
+
+  .markdown-body .footnotes {
+    font-size: 12px;
+    color: #57606a;
+    border-top: 1px solid #d0d7de;
+  }
+
+  .markdown-body .footnotes ol {
+    padding-left: 16px;
+  }
+
+  .markdown-body .footnotes li {
+    position: relative;
+  }
+
+  .markdown-body .footnotes li:target::before {
+    position: absolute;
+    top: -8px;
+    right: -8px;
+    bottom: -8px;
+    left: -24px;
+    pointer-events: none;
+    content: "";
+    border: 2px solid #0969da;
+    border-radius: 6px;
+  }
+
+  .markdown-body .footnotes li:target {
+    color: #24292f;
+  }
+
+  .markdown-body .footnotes .data-footnote-backref g-emoji {
+    font-family: monospace;
+  }
+
+  .markdown-body .task-list-item {
+    list-style-type: none;
+  }
+
+  .markdown-body .task-list-item label {
+    font-weight: 400;
+  }
+
+  .markdown-body .task-list-item.enabled label {
+    cursor: pointer;
+  }
+
+  .markdown-body .task-list-item+.task-list-item {
+    margin-top: 3px;
+  }
+
+  .markdown-body .task-list-item .handle {
+    display: none;
+  }
+
+  .markdown-body .task-list-item-checkbox {
+    margin: 0 .2em .25em -1.6em;
+    vertical-align: middle;
+  }
+
+  .markdown-body .contains-task-list:dir(rtl) .task-list-item-checkbox {
+    margin: 0 -1.6em .25em .2em;
+  }
+
+  .markdown-body ::-webkit-calendar-picker-indicator {
+    filter: invert(50%);
+  }
+}

client/src/locales/cs/core.js

@@ -17,9 +17,10 @@ export default {
       actions: 'Akce',
       addAttachment_title: 'Přidat přílohu',
       addComment: 'Přidat komentář',
+      addManager_title: 'Přidat vedoucího',
       addMember_title: 'Přidat člena',
       addUser_title: 'Přidat uživatele',
-      administrator: 'Administrator',
+      administrator: 'Administrátor',
       all: 'Vše',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
         'Všechny změny budou automaticky uloženy<br />po obnově spojení',
@@ -32,11 +33,16 @@ export default {
       areYouSureYouWantToDeleteThisProject: 'Opravdu chcete smazat tento projekt?',
       areYouSureYouWantToDeleteThisTask: 'Opravdu chcete smazat tento úkol?',
       areYouSureYouWantToDeleteThisUser: 'Opravdu chcete smazat tohoto uživatele?',
-      areYouSureYouWantToRemoveThisMemberFromProject:
+      areYouSureYouWantToLeaveBoard: 'Opravdu chcete opustit tuto tabuli?',
-        'Opravdu chcete odstranit tohoto člena z projektu?',
+      areYouSureYouWantToLeaveProject: 'Opravdu chcete opustit projekt?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Are you sure you want to remove this manager from the project?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Opravdu chcete odstranit tohoto člena z tabule?',
       attachment: 'Příloha',
       attachments: 'Přílohy',
       authentication: 'Ověření',
+      background: 'Pozadí',
       board: 'Tabule',
       boardNotFound_title: 'Tabule nenalezena',
       cardActions_title: 'Akce na kartě',
@@ -49,6 +55,7 @@ export default {
       createProject_title: 'Vytvořit projekt',
       createTextFile_title: 'Vytvořit textový soubor',
       currentPassword: 'Aktuální heslo',
+      dangerZone_title: 'Nebezpečná zóna',
       date: 'Datum',
       dueDate_title: 'Termín do',
       deleteAttachment_title: 'Smazat přílohu',
@@ -82,11 +89,15 @@ export default {
       filterByLabels_title: 'Filtruj podle štítku',
       filterByMembers_title: 'Filtruj podle člena',
       fromComputer_title: 'Z počítače',
+      general: 'Obecné',
       hours: 'Hodiny',
       invalidCurrentPassword: 'Neplatné aktuální heslo',
       labels: 'Štítky',
+      leaveBoard_title: 'Opustit tabuli',
+      leaveProject_title: 'Opustit projekt',
       list: 'Seznam',
       listActions_title: 'Seznam akcí',
+      managers: 'Vedoucí',
       members: 'Členové',
       minutes: 'Minuty',
       moveCard_title: 'Přesunout kartu',
@@ -109,6 +120,7 @@ export default {
         'Tip: dejte Ctrl-V (Cmd-V na Mac) pro vložení přílohy ze schránky.',
       project: 'Projekt',
       projectNotFound_title: 'Projekt nenalezen',
+      removeManager_title: 'Odstranit vedoucího',
       removeMember_title: 'Odstranit člena',
       seconds: 'Vteřin',
       selectBoard: 'Vybrat tabuli',
@@ -174,6 +186,8 @@ export default {
       editTimer_title: 'Upravit časovač',
       editTitle_title: 'Upravit titulek',
       editUsername_title: 'Upravit uživatelské jméno',
+      leaveBoard: 'Opustit tabuli',
+      leaveProject: 'Opustit projekt',
       logOut_title: 'Odhlásit se',
       makeCover_title: 'Vytvořit obal',
       move: 'Přesunout',
@@ -181,7 +195,9 @@ export default {
       remove: 'Odstranit',
       removeBackground: 'Odstranit pozadí',
       removeCover_title: 'Odstranit obal',
+      removeFromBoard: 'Odstranit z tabule',
       removeFromProject: 'Odstranit z projektu',
+      removeManager: 'Odstranit vedoucího',
       removeMember: 'Odstranit člena',
       save: 'Uložit',
       showAllAttachments: 'Zozbrazit všechny přílohy ({{hidden}} skryté)',

client/src/locales/da/core.js

@@ -0,0 +1,213 @@
+import dateFns from 'date-fns/locale/da';
+
+export default {
+  dateFns,
+
+  format: {
+    date: 'd/M/yyyy',
+    time: 'p',
+    dateTime: '$t(format:date) $t(format:time)',
+    longDate: 'MMM d',
+    longDateTime: "MMMM d 'at' p",
+  },
+
+  translation: {
+    common: {
+      account: 'Konto',
+      actions: 'Handlinger',
+      addAttachment_title: 'Vedhæft fil',
+      addComment: 'Skriv kommentar',
+      addManager_title: 'Tilføj projektleder',
+      addMember_title: 'Tilføj medlem',
+      addUser_title: 'Tilføj bruger',
+      administrator: 'Administrator',
+      all: 'Alle',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        'Alle ændringer vil automatisk blive gemt<br />ved genforbindelse',
+      areYouSureYouWantToDeleteThisAttachment: 'Vil du slette den vedhæftede fil?',
+      areYouSureYouWantToDeleteThisBoard: 'Vil du slette dette bræt?',
+      areYouSureYouWantToDeleteThisCard: 'Vil du slette dette kort?',
+      areYouSureYouWantToDeleteThisComment: 'Vil du slette denne kommentar?',
+      areYouSureYouWantToDeleteThisLabel: 'Vil du slette dette mærkat?',
+      areYouSureYouWantToDeleteThisList: 'Vil du slette denne liste?',
+      areYouSureYouWantToDeleteThisProject: 'Vil du slette dette projekt?',
+      areYouSureYouWantToDeleteThisTask: 'Vil du slette denne opgave?',
+      areYouSureYouWantToDeleteThisUser: 'Vil du slette denne bruger?',
+      areYouSureYouWantToLeaveBoard: 'Vil du forlade dette bræt?',
+      areYouSureYouWantToLeaveProject: 'Vil du forlade dette projekt?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Vil du slette denne projektleder fra projektet?',
+      areYouSureYouWantToRemoveThisMemberFromBoard: 'Vil du slette dette medlem fra projektet?',
+      attachment: 'Vedhæftede fil',
+      attachments: 'Vedhæftede filer',
+      authentication: 'Brugervalidering',
+      background: 'Baggrundsbillede',
+      board: 'Bræt',
+      boardNotFound_title: 'Bræt ikke fundet',
+      cardActions_title: 'Korthandlinger',
+      cardNotFound_title: 'Kort ikke fundet',
+      cardOrActionAreDeleted: 'Kort eller handling er slettet',
+      color: 'Farve',
+      createBoard_title: 'Opret bræt',
+      createLabel_title: 'Opret mærkat',
+      createNewOneOrSelectExistingOne: 'Lav en ny eller marker<br />en eksisterende',
+      createProject_title: 'Opret projekt',
+      createTextFile_title: 'Opret tekstfil',
+      currentPassword: 'Nuværende løsen',
+      dangerZone_title: 'Farligt afsnit',
+      date: 'Dato',
+      dueDate_title: 'Afleveringsfrist',
+      deleteAttachment_title: 'Slet vedhæftning',
+      deleteBoard_title: 'Slet bræt',
+      deleteCard_title: 'Slet kort',
+      deleteComment_title: 'Slet kommentar',
+      deleteLabel_title: 'Slet mærkat',
+      deleteList_title: 'Slet liste',
+      deleteProject_title: 'Slet projekt',
+      deleteTask_title: 'Slet opgave',
+      deleteUser_title: 'Slet bruger',
+      description: 'Beskrivelsen',
+      dropFileToUpload: 'Slip fil for at dele',
+      editAttachment_title: 'Ændre vedhæftning',
+      editAvatar_title: 'Ændre profilbillede',
+      editBoard_title: 'Ændre bræt',
+      editDueDate_title: 'Ændre afleveringsfrist',
+      editEmail_title: 'Ændre E-mail',
+      editLabel_title: 'ændre mærkat',
+      editPassword_title: 'Ændre løsen',
+      editTimer_title: 'Ændre timer',
+      editUsername_title: 'Ændre brugernavn',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail allerede i brug',
+      enterCardTitle: 'Angiv kortets overskrift...',
+      enterDescription: 'Angiv beskrivelsen...',
+      enterFilename: 'Angiv filnavn',
+      enterListTitle: 'Angiv listens overskrift...',
+      enterProjectTitle: 'Angiv projektets titel',
+      enterTaskDescription: 'Angiv opgavens beskrivelse...',
+      filterByLabels_title: 'Filtrer på mærkater',
+      filterByMembers_title: 'Filtrer på medlemmer',
+      fromComputer_title: 'Fra computer',
+      general: 'Generelt',
+      hours: 'Timer',
+      invalidCurrentPassword: 'Nuværende adgangskode are ugyldig',
+      labels: 'Mærkater',
+      leaveBoard_title: 'Forlad bræt',
+      leaveProject_title: 'Forlad projekt',
+      list: 'Liste',
+      listActions_title: 'Listens handlinger',
+      managers: 'Projektledere',
+      members: 'Medlemmer',
+      minutes: 'Minutter',
+      moveCard_title: 'Flyt kort',
+      name: 'Navn',
+      newEmail: 'Ny e-mail',
+      newPassword: 'Nyt løsen',
+      newUsername: 'Nyt brugernavn',
+      noConnectionToServer: 'Ingen forbindelse til serveren',
+      noBoards: 'Ingen brædder',
+      noLists: 'Ingen lister',
+      noProjects: 'Ingen projekter',
+      notifications: 'Notifikationer',
+      noUnreadNotifications: 'Ingen ulæste notifikationer',
+      openBoard_title: 'Åben bræt',
+      optional_inline: 'valgfri',
+      organization: 'Organisation',
+      phone: 'Telefon',
+      preferences: 'Præferencer',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tip: Tryk Ctrl-V (Cmd-V på Mac) for at vedhæfte direkte fra udklipsholder',
+      project: 'Projekt',
+      projectNotFound_title: 'Projekt ej fundet',
+      removeManager_title: 'Fjern projektleder',
+      removeMember_title: 'Fjern medlem',
+      seconds: 'Sekunder',
+      selectBoard: 'Vælg bræt',
+      selectList: 'Vælg liste',
+      selectProject: 'Vælg projekt',
+      settings: 'Indstillinger',
+      subscribeToMyOwnCardsByDefault: 'Abonnér på egne kort som standard',
+      taskActions_title: 'Opgave handlinger',
+      tasks: 'Opgaver',
+      time: 'Tid',
+      timer: 'Tidsmåler',
+      title: 'Overskrift',
+      userActions_title: 'Brugerhandlinger',
+      userAddedThisCardToList: '<0>{{user}}</0><1> tilføjede kortet til {{list}}</1>',
+      userLeftNewCommentToCard: '{{user}} skrevet en ny kommentar «{{comment}}» på <2>{{card}}</2>',
+      userMovedCardFromListToList:
+        '{{user}} flyttede <2>{{card}}</2> fra {{fromList}} til {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> flyttede kortet fra {{fromList}} til {{toList}}</1>',
+      username: 'Brugernavn',
+      usernameAlreadyInUse: 'Brugernavn allerede i brug',
+      users: 'Brugere',
+      writeComment: 'Skriv en kommentar...',
+    },
+
+    action: {
+      addAnotherCard: 'Tilføj endnu et kort',
+      addAnotherList: 'Tilføj endnu en liste',
+      addAnotherTask: 'Tilføj endnu en opgave',
+      addCard: 'Tilføj kort',
+      addCard_title: 'Tilføj kort',
+      addComment: 'Tilføj kommentar',
+      addList: 'Tilføj liste',
+      addMoreDetailedDescription: 'Tilføj en uddybende beskrivelse',
+      addTask: 'Tilføj opgave',
+      addToCard: 'Tilføj til kort',
+      addUser: 'Tilføj bruger',
+      createBoard: 'Opret bræt',
+      createFile: 'Opret fil',
+      createLabel: 'Opret mærkat',
+      createNewLabel: 'Opret nyt mærkat',
+      createProject: 'Opret projekt',
+      delete: 'Slet',
+      deleteAttachment: 'Slet vedhæftning',
+      deleteAvatar: 'Slet profilbillede',
+      deleteBoard: 'Slet bræt',
+      deleteCard: 'Slet kort',
+      deleteCard_title: 'Slet kort',
+      deleteComment: 'Slet kommentar',
+      deleteImage: 'Slet profilbillede',
+      deleteLabel: 'Slet mærkat',
+      deleteList: 'Slet liste',
+      deleteList_title: 'Slet liste',
+      deleteProject: 'Slet projekt',
+      deleteProject_title: 'Slet projekt',
+      deleteTask: 'Slet opgave',
+      deleteTask_title: 'Slet opgave',
+      deleteUser: 'Slet bruger',
+      edit: 'Ændre',
+      editDueDate_title: 'Ændre afleveringsfrist',
+      editDescription_title: 'Ændre beskrivelse',
+      editEmail_title: 'Ændre e-mail',
+      editPassword_title: 'Ændre Løsen',
+      editTimer_title: 'Ændre tidstager',
+      editTitle_title: 'Ændre overskrift',
+      editUsername_title: 'Ændre brugernavn',
+      leaveBoard: 'Forlad bræt',
+      leaveProject: 'Forlad projekt',
+      logOut_title: 'Log på',
+      makeCover_title: 'Gør til fremhævet billede',
+      move: 'Flyt',
+      moveCard_title: 'Flyt kort',
+      remove: 'Fjern',
+      removeBackground: 'Fjern baggrundsbillede',
+      removeCover_title: 'Fjern fremhævet billede',
+      removeFromBoard: 'Fjern fra bræt',
+      removeFromProject: 'Fjern fra projekt',
+      removeManager: 'Fjern projektleder',
+      removeMember: 'Fjern medlem',
+      save: 'Gem ændringer',
+      showAllAttachments: 'Vis alle vedhæftninger ({{hidden}} skjulte)',
+      showFewerAttachments: 'Vis færre vedhæftninger',
+      start: 'Start',
+      stop: 'Stop',
+      subscribe: 'Abonnér',
+      unsubscribe: 'Opsig abonnement',
+      uploadNewAvatar: 'Tilføj nyt profilbillede',
+      uploadNewImage: 'Tilføj nyt billede',
+    },
+  },
+};

client/src/locales/da/login.js

@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'E-mail eller brugernavn',
+      invalidEmailOrUsername: 'Ugyldig e-mail eller brugernavn',
+      invalidPassword: 'Ugyldig løsen',
+      logInToPlanka: 'Log på Planka',
+      noInternetConnection: 'Ingen forbindelse til internettet',
+      pageNotFound_title: 'Side ej fundet',
+      password: 'Løsen',
+      projectManagement: 'Projektstyring',
+      serverConnectionFailed: 'Ingen forbindelse til serveren',
+      unknownError: 'Ukendt fejl - prøv igen',
+    },
+
+    action: {
+      logIn: 'Log på',
+    },
+  },
+};

client/src/locales/de/core.js

@@ -13,16 +13,17 @@ export default {
 
   translation: {
     common: {
-      account: 'Account',
+      account: 'Konto',
       actions: 'Aktionen',
       addAttachment_title: 'Anhang hinzufügen',
       addComment: 'Kommentar hinzufügen',
+      addManager_title: 'Manager hinzufügen',
       addMember_title: 'Mitglied hinzufügen',
       addUser_title: 'Benutzer hinzufügen',
       administrator: 'Administrator',
       all: 'Alle',
       allChangesWillBeAutomaticallySavedAfterConnectionRestored:
-        'Alle Änderungen werden automatisch gespeichert.<br />nach Wiederherstellung der Verbindung',
+        'Alle Änderungen werden automatisch gespeichert,<br />sobald die Verbindung wiederhergestellt wurde.',
       areYouSureYouWantToDeleteThisAttachment:
         'Sind Sie sicher, dass Sie diesen Anhang löschen möchten?',
       areYouSureYouWantToDeleteThisBoard: 'Sind Sie sicher, dass Sie dieses Board löschen möchten?',
@@ -36,11 +37,16 @@ export default {
       areYouSureYouWantToDeleteThisTask: 'Sind Sie sicher, dass Sie diese Aufgabe löschen möchten?',
       areYouSureYouWantToDeleteThisUser:
         'Sind Sie sicher, dass Sie diesen Benutzer löschen möchten?',
-      areYouSureYouWantToRemoveThisMemberFromProject:
+      areYouSureYouWantToLeaveBoard: 'Sind Sie sicher, dass Sie das Board verlassen möchten?',
-        'Sind Sie sicher, dass Sie dieses Mitglied aus dem Projekt entfernen möchten??',
+      areYouSureYouWantToLeaveProject: 'Sind Sie sicher, dass Sie das Projekt verlassen möchten?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Sind Sie sicher, dass Sie diesen Manager aus dem Projekt entfernen möchten?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Sind Sie sicher, dass Sie dieses Mitglied aus dem Board entfernen möchten?',
       attachment: 'Anhang',
       attachments: 'Anhänge',
       authentication: 'Authentifizierung',
+      background: 'Hintergrund',
       board: 'Board',
       boardNotFound_title: 'Board nicht gefunden',
       cardActions_title: 'Kartenaktionen',
@@ -49,14 +55,15 @@ export default {
       color: 'Farbe',
       createBoard_title: 'Board erstellen',
       createLabel_title: 'Label erstellen',
-      createNewOneOrSelectExistingOne: 'Eine Neue erstellen, oder <br />eine bestehende auswählen',
+      createNewOneOrSelectExistingOne: 'Ein Neues erstellen, oder <br />ein Bestehendes auswählen',
       createProject_title: 'Projekt erstellen',
       createTextFile_title: 'Textdatei erstellen',
-      currentPassword: 'derzeitiges Password',
+      currentPassword: 'Derzeitiges Password',
+      dangerZone_title: 'Gefährlicher Bereich',
       date: 'Datum',
       dueDate_title: 'Fälligkeitsdatum',
       deleteAttachment_title: 'Anhang löschen',
-      deleteBoard_title: 'Board löschne',
+      deleteBoard_title: 'Board löschen',
       deleteCard_title: 'Karte löschen',
       deleteComment_title: 'Kommentar löschen',
       deleteLabel_title: 'Label löschen',
@@ -65,16 +72,16 @@ export default {
       deleteTask_title: 'Aufgabe löschen',
       deleteUser_title: 'Benutzer löschen',
       description: 'Beschreibung',
-      dropFileToUpload: 'Datei ablegen um hochzuladen',
+      dropFileToUpload: 'Datei ablegen, um hochzuladen',
       editAttachment_title: 'Anhang bearbieten',
       editAvatar_title: 'Avatar bearbeiten',
       editBoard_title: 'Board bearbeiten',
-      editDueDate_title: 'Änderung Fälligkeitsdatum',
+      editDueDate_title: 'Fälligkeitsdatum bearbeiten',
       editEmail_title: 'E-Mail bearbeiten',
       editLabel_title: 'Label bearbeiten',
       editPassword_title: 'Passwort ändern',
       editTimer_title: 'Timer bearbeiten',
-      editUsername_title: 'Benutzername bearbeiten',
+      editUsername_title: 'Benutzername ändern',
       email: 'E-Mail',
       emailAlreadyInUse: 'E-Mail bereits in Verwendung',
       enterCardTitle: 'Kartentitel eingeben...',
@@ -86,11 +93,15 @@ export default {
       filterByLabels_title: 'Nach Label filtern',
       filterByMembers_title: 'Nach Mitgliedern filtern',
       fromComputer_title: 'Vom Computer',
+      general: 'Allgemein',
       hours: 'Stunden',
       invalidCurrentPassword: 'Das aktuelle Passwort ist falsch',
       labels: 'Labels',
+      leaveBoard_title: 'Board verlassen',
+      leaveProject_title: 'Projekt verlassen',
       list: 'Listen',
       listActions_title: 'Aufgaben auflisten',
+      managers: 'Manager',
       members: 'Mitglieder',
       minutes: 'Minuten',
       moveCard_title: 'Karte verschieben',
@@ -113,6 +124,7 @@ export default {
         'Tipp: Drücken Sie STRG-V (Cmd-V auf Mac), um einen Anhang aus der Zwischenablage hinzuzufügen.',
       project: 'Projekt',
       projectNotFound_title: 'Projekt nicht gefunden',
+      removeManager_title: 'Manager entfernen',
       removeMember_title: 'Mitglied entfernen',
       seconds: 'Sekunden',
       selectBoard: 'Board auswählen',
@@ -122,6 +134,7 @@ export default {
       subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
       taskActions_title: 'Aufgabenaktionen',
       tasks: 'Aufgaben',
+      thereIsNoPreviewAvailableForThisAttachment: 'Für diesen Anhang ist keine Vorschau verfügbar',
       time: 'Zeit',
       timer: 'Timer',
       title: 'Titel',
@@ -130,9 +143,9 @@ export default {
       userLeftNewCommentToCard:
         '{{user}} hat einen neuen Kommentar verfasst «{{comment}}» to <2>{{card}}</2>',
       userMovedCardFromListToList:
-        '{{user}} bewegte <2>{{card}}</2> von {{fromList}} zu {{toList}}',
+        '{{user}} bewegte <2>{{card}}</2> von {{fromList}} nach {{toList}}',
       userMovedThisCardFromListToList:
-        '<0>{{user}}</0><1> bewegte diese Karte von {{fromList}} zu {{toList}}</1>',
+        '<0>{{user}}</0><1> bewegte diese Karte von {{fromList}} nach {{toList}}</1>',
       username: 'Benutzername',
       usernameAlreadyInUse: 'Benutzername wird bereits verwendet',
       users: 'Benutzer',
@@ -147,7 +160,7 @@ export default {
       addCard_title: 'Karte hinzufügen',
       addComment: 'Kommentar hinzufügen',
       addList: 'Liste hinzufügen',
-      addMoreDetailedDescription: 'Eine detaillierte Beschriebung hinzufügen',
+      addMoreDetailedDescription: 'Eine detaillierte Beschreibung hinzufügen',
       addTask: 'Aufgabe hinzufügen',
       addToCard: 'Zu Karte hinzufügen',
       addUser: 'Benutzer hinzufügen',
@@ -156,7 +169,7 @@ export default {
       createLabel: 'Label erstellen',
       createNewLabel: 'Neues Label erstellen',
       createProject: 'Projekt erstellen',
-      delete: 'löschen',
+      delete: 'Löschen',
       deleteAttachment: 'Anhang löschen',
       deleteAvatar: 'Avatar löschen',
       deleteBoard: 'Board löschen',
@@ -172,14 +185,16 @@ export default {
       deleteTask: 'Aufgabe löschen',
       deleteTask_title: 'Aufgabe löschen',
       deleteUser: 'Benutzer löschen',
-      edit: 'bearbeiten',
+      edit: 'Bearbeiten',
       editDueDate_title: 'Fälligkeitsdatum bearbeiten',
-      editDescription_title: 'Beschriebung ändern',
+      editDescription_title: 'Beschreibung ändern',
       editEmail_title: 'E-Mail bearbeiten',
       editPassword_title: 'Passwort ändern',
       editTimer_title: 'Timer bearbeiten',
       editTitle_title: 'Titel bearbeiten',
       editUsername_title: 'Benutzername ändern',
+      leaveBoard: 'Board verlassen',
+      leaveProject: 'Projekt verlassen',
       logOut_title: 'Ausloggen',
       makeCover_title: 'als Vorschau festlegen',
       move: 'Verschieben',
@@ -187,7 +202,9 @@ export default {
       remove: 'Löschen',
       removeBackground: 'Hintergrund löschen',
       removeCover_title: 'Vorschau löschen',
+      removeFromBoard: 'Vom Board entfernen',
       removeFromProject: 'Vom Projekt entfernen',
+      removeManager: 'Manager entfernen',
       removeMember: 'Mitglied entfernen',
       save: 'Speichern',
       showAllAttachments: 'Alle Anhänge anzeigen ({{hidden}} versteckt)',

client/src/locales/en/core.js

@@ -70,6 +70,7 @@ export default {
       editBoard_title: 'Edit Board',
       editDueDate_title: 'Edit Due Date',
       editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
       editLabel_title: 'Edit Label',
       editPassword_title: 'Edit Password',
       editTimer_title: 'Edit Timer',
@@ -126,6 +127,8 @@ export default {
       subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
       taskActions_title: 'Task Actions',
       tasks: 'Tasks',
+      thereIsNoPreviewAvailableForThisAttachment:
+        'There is no preview available for this attachment',
       time: 'Time',
       timer: 'Timer',
       title: 'Title',
@@ -178,6 +181,7 @@ export default {
       editDueDate_title: 'Edit Due Date',
       editDescription_title: 'Edit Description',
       editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
       editPassword_title: 'Edit Password',
       editTimer_title: 'Edit Timer',
       editTitle_title: 'Edit Title',

client/src/locales/index.js

@@ -1,21 +1,35 @@
+import merge from 'lodash/merge';
 import fromPairs from 'lodash/fromPairs';
 
-import cs from './cs/embed';
+import csLogin from './cs/login';
-import de from './de/embed';
+import daLogin from './da/login';
-import en from './en/embed';
+import deLogin from './de/login';
-import es from './es/embed';
+import enLogin from './en/login';
-import fr from './fr/embed';
+import enCore from './en/core';
-import pl from './pl/embed';
+import esLogin from './es/login';
-import ru from './ru/embed';
+import frLogin from './fr/login';
+import jaLogin from './ja/login';
+import plLogin from './pl/login';
+import ruLogin from './ru/login';
+import skLogin from './sk/login';
+import svLogin from './sv/login';
+import uzLogin from './uz/login';
+import zhLogin from './zh/login';
 
 const localePairs = [
-  ['cs', cs],
+  ['cs', csLogin],
-  ['de', de],
+  ['da', daLogin],
-  ['en', en],
+  ['de', deLogin],
-  ['es', es],
+  ['en', merge(enLogin, enCore)],
-  ['fr', fr],
+  ['es', esLogin],
-  ['pl', pl],
+  ['fr', frLogin],
-  ['ru', ru],
+  ['ja', jaLogin],
+  ['pl', plLogin],
+  ['ru', ruLogin],
+  ['sk', skLogin],
+  ['sv', svLogin],
+  ['uz', uzLogin],
+  ['zh', zhLogin],
 ];
 
 export const languages = localePairs.map((locale) => locale[0]);

client/src/locales/ja/core.js

@@ -0,0 +1,215 @@
+import dateFns from 'date-fns/locale/ja';
+
+export default {
+  dateFns,
+
+  format: {
+    date: 'yyyy/M/d',
+    time: 'HH:mm',
+    dateTime: '$t(format:date) $t(format:time)',
+    longDate: 'MMMMd日',
+    longDateTime: "MMMMd'日 ' HH:MM",
+  },
+
+  translation: {
+    common: {
+      account: 'アカウント',
+      actions: 'アクション',
+      addAttachment_title: '添付ファイルを追加',
+      addComment: 'コメントを追加',
+      addManager_title: 'マネージャーを追加',
+      addMember_title: 'メンバーを追加',
+      addUser_title: 'ユーザーを追加',
+      administrator: '管理者',
+      all: 'すべて',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        '全ての変更は接続回復後自動的に保存されます',
+      areYouSureYouWantToDeleteThisAttachment: 'この添付ファイルを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisBoard: 'このボードを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisCard: 'このカードを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisComment: 'このコメントを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisLabel: 'このラベルを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisList: 'このリストを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisProject: 'このプロジェクトを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisTask: 'このタスクを削除してもよろしいですか？',
+      areYouSureYouWantToDeleteThisUser: 'このユーザーを削除してもよろしいですか？',
+      areYouSureYouWantToLeaveBoard: 'ボードから退出してもよろしいですか？',
+      areYouSureYouWantToLeaveProject: 'プロジェクトから退出してもよろしいですか？',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'このマネージャーをプロジェクトから外してもよろしいですか？',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'このメンバーをボードから外してもよろしいですか？',
+      attachment: '添付ファイル',
+      attachments: '添付ファイル',
+      authentication: '認証',
+      background: '背景',
+      board: 'ボード',
+      boardNotFound_title: 'ボードが見つかりません',
+      cardActions_title: 'カードのアクション',
+      cardNotFound_title: 'カードが見つかりません',
+      cardOrActionAreDeleted: 'カードやアクションが削除されます',
+      color: '色',
+      createBoard_title: 'ボードを作成',
+      createLabel_title: 'ラベルを作成',
+      createNewOneOrSelectExistingOne: '新規作成もしくは既存のものから選択',
+      createProject_title: 'プロジェクトを作成',
+      createTextFile_title: 'テキストファイルを作成',
+      currentPassword: '現在のパスワード',
+      dangerZone_title: '危険ゾーン',
+      date: '日付',
+      dueDate_title: '期限',
+      deleteAttachment_title: '添付ファイルを削除',
+      deleteBoard_title: 'ボードを削除',
+      deleteCard_title: 'カードを削除',
+      deleteComment_title: 'コメントを削除',
+      deleteLabel_title: 'ラベルを削除',
+      deleteList_title: 'リストを削除',
+      deleteProject_title: 'プロジェクトを削除',
+      deleteTask_title: 'タスクを削除',
+      deleteUser_title: 'ユーザーを削除',
+      description: '説明',
+      dropFileToUpload: 'ファイルをドロップしてアップロード',
+      editAttachment_title: '添付ファイルを編集',
+      editAvatar_title: 'アバターを編集',
+      editBoard_title: 'ボードを編集',
+      editDueDate_title: '期限を編集',
+      editEmail_title: 'Eメールを編集',
+      editLabel_title: 'ラベルを編集',
+      editPassword_title: 'パスワードを編集',
+      editTimer_title: 'タイマーを編集',
+      editUsername_title: 'ユーザー名を編集',
+      email: 'Eメール',
+      emailAlreadyInUse: 'Eメールは既に使われています',
+      enterCardTitle: 'カードのタイトルを入力...',
+      enterDescription: '説明を入力...',
+      enterFilename: 'ファイル名を入力...',
+      enterListTitle: 'リストのタイトルを入力...',
+      enterProjectTitle: 'プロジェクトのタイトルを入力',
+      enterTaskDescription: 'タスクの説明を入力...',
+      filterByLabels_title: 'ラベルで絞り込む',
+      filterByMembers_title: 'メンバーで絞り込む',
+      fromComputer_title: 'コンピューターから',
+      general: '一般',
+      hours: '時間',
+      invalidCurrentPassword: '現在のパスワードが無効',
+      labels: 'ラベル',
+      leaveBoard_title: 'ボードから退出',
+      leaveProject_title: 'プロジェクトから退出',
+      list: 'リスト',
+      listActions_title: 'アクションのリスト',
+      managers: 'マネージャー',
+      members: 'メンバー',
+      minutes: '分',
+      moveCard_title: 'カードを移動',
+      name: '名前',
+      newEmail: '新しいEメール',
+      newPassword: '新しいパスワード',
+      newUsername: '新しいユーザー名',
+      noConnectionToServer: 'サーバーへ接続されていません',
+      noBoards: 'ボードがありません',
+      noLists: 'リストがありません',
+      noProjects: 'プロジェクトがありません',
+      notifications: '通知',
+      noUnreadNotifications: '未読の通知はありません',
+      openBoard_title: 'ボードを開く',
+      optional_inline: '任意',
+      organization: '組織',
+      phone: '電話番号',
+      preferences: '環境設定',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'ヒント: Ctrl-V(MacではCmd-V)を押して、クリップボードから添付ファイルを追加します。',
+      project: 'プロジェクト',
+      projectNotFound_title: 'プロジェクトがありません',
+      removeManager_title: 'マネージャーを削除',
+      removeMember_title: 'メンバーを削除',
+      seconds: '秒',
+      selectBoard: 'ボードを選択',
+      selectList: 'リストを選択',
+      selectProject: 'プロジェクトを選択',
+      settings: '設定',
+      subscribeToMyOwnCardsByDefault: '自分のカードをデフォルトで購読する',
+      taskActions_title: 'タスクのアクション',
+      tasks: 'タスク',
+      time: '時間',
+      timer: 'タイマー',
+      title: 'タイトル',
+      userActions_title: 'ユーザーのアクション',
+      userAddedThisCardToList: '<0>{{user}}</0> は <1>{{list}} をこのカードに追加しました</1>',
+      userLeftNewCommentToCard:
+        '{{user}} は <2> {{card}} </2> に新しいコメント «{{comment}}» を残しました',
+      userMovedCardFromListToList:
+        '{{user}} は <2> {{card}} </2> を {{fromList}} から {{toList}} に移動しました',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0> <1>はこのカードを {{fromList}} から {{toList}} に移動しました</1>',
+      username: 'ユーザー名',
+      usernameAlreadyInUse: 'ユーザー名は既に使われています',
+      users: 'ユーザー',
+      writeComment: 'コメントを書く...',
+    },
+
+    action: {
+      addAnotherCard: '別のカードを追加',
+      addAnotherList: '別のリストを追加',
+      addAnotherTask: '別のタスクを追加',
+      addCard: 'カードを追加',
+      addCard_title: 'カードを追加',
+      addComment: 'コメントを追加',
+      addList: 'リストを追加',
+      addMoreDetailedDescription: 'より詳細な説明を追加',
+      addTask: 'タスクを追加',
+      addToCard: 'カードに追加',
+      addUser: 'ユーザーを追加',
+      createBoard: 'ボードを作成',
+      createFile: 'ファイルを作成',
+      createLabel: 'ラベルを作成',
+      createNewLabel: '新しいラベルを作成',
+      createProject: 'プロジェクトを作成',
+      delete: '削除',
+      deleteAttachment: '添付ファイルを削除',
+      deleteAvatar: 'アバターを削除',
+      deleteBoard: 'ボードを削除',
+      deleteCard: 'カードを削除',
+      deleteCard_title: 'カードを削除',
+      deleteComment: 'コメントを削除',
+      deleteImage: '画像を削除',
+      deleteLabel: 'ラベルを削除',
+      deleteList: 'リストを削除',
+      deleteList_title: 'リストを削除',
+      deleteProject: 'プロジェクトを削除',
+      deleteProject_title: 'プロジェクトを削除',
+      deleteTask: 'タスクを削除',
+      deleteTask_title: 'タスクを削除',
+      deleteUser: 'ユーザーを削除',
+      edit: '編集',
+      editDueDate_title: '期限を編集',
+      editDescription_title: '説明を編集',
+      editEmail_title: 'Eメールを編集',
+      editPassword_title: 'パスワードの編集',
+      editTimer_title: 'タイマーの編集',
+      editTitle_title: 'タイトルの編集',
+      editUsername_title: 'ユーザー名の編集',
+      leaveBoard: 'ボードから退出',
+      leaveProject: 'プロジェクトから退出',
+      logOut_title: 'ログアウト',
+      makeCover_title: 'カバーを作る',
+      move: '移動',
+      moveCard_title: 'カードを移動',
+      remove: '削除',
+      removeBackground: '背景を削除',
+      removeCover_title: 'カバーを削除',
+      removeFromBoard: 'ボードから削除',
+      removeFromProject: 'プロジェクトから削除',
+      removeManager: 'マネージャーを削除',
+      removeMember: 'メンバーを削除',
+      save: '保存',
+      showAllAttachments: '全ての添付ファイルを表示する({{hidden}} 非表示)',
+      showFewerAttachments: 'テンプファイルの表示数を減らす',
+      start: 'スタート',
+      stop: 'ストップ',
+      subscribe: '購読',
+      unsubscribe: '購読解除',
+      uploadNewAvatar: '新しいアバターをアップロード',
+      uploadNewImage: '新しい画像をアップロード',
+    },
+  },
+};

client/src/locales/ja/login.js

@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'Eメールまたはユーザー名',
+      invalidEmailOrUsername: 'Eメールまたはユーザー名が無効',
+      invalidPassword: 'パスワードが無効',
+      logInToPlanka: 'Planka にログインする',
+      noInternetConnection: 'インターネットに接続されていません。',
+      pageNotFound_title: 'ページが見つかりません。',
+      password: 'パスワード',
+      projectManagement: 'プロジェクト管理',
+      serverConnectionFailed: 'サーバーの接続に失敗',
+      unknownError: '不明なエラーです。後でもう一度試してください。',
+    },
+
+    action: {
+      logIn: 'ログイン',
+    },
+  },
+};

client/src/locales/ru/core.js

@@ -122,6 +122,7 @@ export default {
       subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
       taskActions: 'Действия с задачей',
       tasks: 'Задачи',
+      thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
       time: 'Время',
       timer: 'Таймер',
       title: 'Название',