fix: Fix path traversal vulnerability

chore: Update version
docs: Add security policy
2022-08-04 00:37:30 +02:00 · 2022-08-03 13:28:41 +02:00 · 2022-08-03 16:15:40 +05:00 · 2022-08-03 12:21:01 +02:00 · 2022-08-01 00:18:22 +02:00 · 2022-07-29 17:50:11 +02:00
153 changed files with 14016 additions and 9231 deletions
@@ -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 }}
@@ -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 }}
@@ -1,5 +1,6 @@
 node_modules
 docker-compose.override.yml

+.idea
 .vscode
 .DS_Store
@@ -10,47 +10,20 @@ RUN npm install npm@latest --global \
 COPY client .
 RUN npm run build

-FROM node:lts-alpine
+FROM ghcr.io/plankanban/planka:base-latest

 WORKDIR /app

 COPY server/.npmrc server/package.json server/package-lock.json ./

-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 \
-  && cd $OLDPWD \
-  && rm -rf /tmp/vips-${VIPS_VERSION} \
-  && npm install npm@latest --global \
+RUN npm install npm@latest --global \
  && npm install --production \
  && apk del vips-dependencies --purge

 COPY docker-start.sh start.sh
 COPY server .

-RUN chmod +x start.sh \
-  && cp .env.sample .env
+RUN cp .env.sample .env

 COPY --from=client-builder /app/build public
 COPY --from=client-builder /app/build/index.html views
@@ -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}
@@ -0,0 +1,13 @@
+# Security Policy
+
+## Supported Versions
+
+Most recent release.
+
+## Reporting a Vulnerability
+
+Please report any security issues you discovered to meltyshev@gmail.com. If the issue is confirmed, we will release a patch as soon as possible depending on complexity.
+
+**Do NOT create public issues on GitHub for security vulnerabilities.**
+
+Thank you for your contribution!
@@ -63,57 +63,60 @@
    }
  },
  "dependencies": {
-    "classnames": "^2.2.6",
-    "connected-react-router": "^6.9.2",
-    "date-fns": "^2.28.0",
-    "dequal": "^2.0.2",
+    "classnames": "^2.3.1",
+    "connected-react-router": "^6.9.3",
+    "date-fns": "^2.29.1",
+    "dequal": "^2.0.3",
    "history": "^4.10.1",
-    "i18next": "^21.6.16",
+    "i18next": "^21.8.14",
    "i18next-browser-languagedetector": "^6.1.4",
    "initials": "^3.1.2",
    "js-cookie": "^3.0.1",
-    "lodash": "^4.17.20",
+    "lodash": "^4.17.21",
    "node-sass": "^7.0.1",
+    "photoswipe": "^5.3.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-datepicker": "^4.7.0",
+    "react-beautiful-dnd": "^13.1.0",
+    "react-datepicker": "^4.8.0",
    "react-dom": "^17.0.2",
-    "react-dropzone": "^12.0.5",
-    "react-i18next": "^11.16.6",
+    "react-dropzone": "^14.2.2",
+    "react-i18next": "^11.18.1",
    "react-input-mask": "^2.0.4",
-    "react-markdown": "^8.0.2",
+    "react-markdown": "^8.0.3",
+    "react-photoswipe-gallery": "^2.2.1",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.3.1",
    "react-scripts": "5.0.1",
-    "react-textarea-autosize": "^8.3.3",
-    "redux": "^4.1.2",
+    "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-breaks": "^3.0.2",
    "remark-gfm": "^3.0.1",
-    "reselect": "^4.1.5",
+    "reselect": "^4.1.6",
    "sails.io.js": "^1.2.1",
-    "semantic-ui-react": "^2.1.2",
+    "semantic-ui-react": "^2.1.3",
    "socket.io-client": "^2.3.1",
    "validator": "^13.7.0",
-    "whatwg-fetch": "^3.5.0"
+    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.7",
    "babel-preset-airbnb": "^5.0.0",
    "chai": "^4.3.6",
    "enzyme": "^3.11.0",
-    "eslint": "^8.13.0",
+    "eslint": "^8.20.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.5.1",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-react": "^7.29.4",
-    "eslint-plugin-react-hooks": "^4.4.0",
+    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.30.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
    "jest-enzyme": "^7.1.2",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
    "react-test-renderer": "^17.0.2"
  }
 }
@@ -1,6 +1,5 @@
 import ActionTypes from '../constants/ActionTypes';

-// eslint-disable-next-line import/prefer-default-export
 export const fetchActions = (cardId) => ({
  type: ActionTypes.ACTIONS_FETCH,
  payload: {
@@ -24,3 +23,28 @@ fetchActions.failure = (cardId, error) => ({
    error,
  },
 });
+
+export const toggleActionsDetails = (cardId, isVisible) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE,
+  payload: {
+    cardId,
+    isVisible,
+  },
+});
+
+toggleActionsDetails.success = (cardId, actions, users) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS,
+  payload: {
+    cardId,
+    actions,
+    users,
+  },
+});
+
+toggleActionsDetails.failure = (cardId, error) => ({
+  type: ActionTypes.ACTIONS_DETAILS_TOGGLE__FAILURE,
+  payload: {
+    cardId,
+    error,
+  },
+});
@@ -1,7 +1,13 @@
 import EntryActionTypes from '../../constants/EntryActionTypes';

-// eslint-disable-next-line import/prefer-default-export
 export const fetchActionsInCurrentCard = () => ({
  type: EntryActionTypes.ACTIONS_IN_CURRENT_CARD_FETCH,
  payload: {},
 });
+
+export const toggleActionsDetailsInCurrentCard = (isVisible) => ({
+  type: EntryActionTypes.ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE,
+  payload: {
+    isVisible,
+  },
+});
@@ -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: {
@@ -41,6 +41,21 @@ export const handleUserUpdate = (user) => ({
  },
 });

+export const updateCurrentUserLanguage = (language) => ({
+  type: EntryActionTypes.CURRENT_USER_LANGUAGE_UPDATE,
+  payload: {
+    language,
+  },
+});
+
+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 +63,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 +90,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 +117,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: {},
@@ -15,7 +15,7 @@ const DEFAULT_DATA = {
 const ListAdd = React.memo(({ onCreate, onClose }) => {
  const [t] = useTranslation();
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();

  const nameField = useRef(null);

@@ -44,16 +44,16 @@ const ListAdd = React.memo(({ onCreate, onClose }) => {
    onCreate(cleanData);

    setData(DEFAULT_DATA);
-    selectNameField();
-  }, [onCreate, data, setData, selectNameField]);
+    focusNameField();
+  }, [onCreate, data, setData, focusNameField]);

  useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
  }, []);

  useDidUpdate(() => {
-    nameField.current.select();
-  }, [selectNameFieldState]);
+    nameField.current.focus();
+  }, [focusNameFieldState]);

  return (
    <Form className={styles.wrapper} onSubmit={handleSubmit}>
@@ -35,7 +35,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
  }, [onCreate, onClose, data]);

  useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
  }, []);

  return (
@@ -77,6 +77,7 @@

  .cover {
    border-radius: 3px 3px 0 0;
+    margin-bottom: 2px;
    vertical-align: middle;
  }

@@ -114,6 +115,7 @@
  }

  .wrapper {
+    cursor: auto;
    display: block;
    margin-bottom: 8px;
  }
@@ -79,7 +79,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>

  useEffect(() => {
    if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
    }
  }, [isOpened]);

@@ -1,7 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Comment, Icon, Loader, Visibility } from 'semantic-ui-react';
+import { Button, Comment, Icon, Loader, Visibility } from 'semantic-ui-react';

 import { ActionTypes } from '../../../constants/Enums';
 import CommentAdd from './CommentAdd';
@@ -14,15 +14,22 @@ const Actions = React.memo(
    items,
    isFetching,
    isAllFetched,
+    isDetailsVisible,
+    isDetailsFetching,
    canEdit,
    canEditAllComments,
    onFetch,
+    onDetailsToggle,
    onCommentCreate,
    onCommentUpdate,
    onCommentDelete,
  }) => {
    const [t] = useTranslation();

+    const handleToggleDetailsClick = useCallback(() => {
+      onDetailsToggle(!isDetailsVisible);
+    }, [isDetailsVisible, onDetailsToggle]);
+
    const handleCommentUpdate = useCallback(
      (id, data) => {
        onCommentUpdate(id, data);
@@ -38,54 +45,51 @@ const Actions = React.memo(
    );

    return (
-      <>
-        {canEdit && (
-          <div className={styles.contentModule}>
-            <div className={styles.moduleWrapper}>
-              <Icon name="comment outline" className={styles.moduleIcon} />
-              <div className={styles.moduleHeader}>{t('common.addComment')}</div>
-              <CommentAdd onCreate={onCommentCreate} />
-            </div>
+      <div className={styles.contentModule}>
+        <div className={styles.moduleWrapper}>
+          <Icon name="list ul" className={styles.moduleIcon} />
+          <div className={styles.moduleHeader}>
+            {t('common.actions')}
+            <Button
+              content={isDetailsVisible ? t('action.hideDetails') : t('action.showDetails')}
+              className={styles.toggleButton}
+              onClick={handleToggleDetailsClick}
+            />
          </div>
-        )}
-        <div className={styles.contentModule}>
-          <div className={styles.moduleWrapper}>
-            <Icon name="list ul" className={styles.moduleIcon} />
-            <div className={styles.moduleHeader}>{t('common.actions')}</div>
-            <div className={styles.wrapper}>
-              <Comment.Group>
-                {items.map((item) =>
-                  item.type === ActionTypes.COMMENT_CARD ? (
-                    <Item.Comment
-                      key={item.id}
-                      data={item.data}
-                      createdAt={item.createdAt}
-                      isPersisted={item.isPersisted}
-                      user={item.user}
-                      canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
-                      onUpdate={(data) => handleCommentUpdate(item.id, data)}
-                      onDelete={() => handleCommentDelete(item.id)}
-                    />
-                  ) : (
-                    <Item
-                      key={item.id}
-                      type={item.type}
-                      data={item.data}
-                      createdAt={item.createdAt}
-                      user={item.user}
-                    />
-                  ),
-                )}
-              </Comment.Group>
-            </div>
-            {isFetching ? (
-              <Loader active inverted inline="centered" size="small" className={styles.loader} />
-            ) : (
-              !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
-            )}
+          {canEdit && <CommentAdd onCreate={onCommentCreate} />}
+          <div className={styles.wrapper}>
+            <Comment.Group>
+              {items.map((item) =>
+                item.type === ActionTypes.COMMENT_CARD ? (
+                  <Item.Comment
+                    key={item.id}
+                    data={item.data}
+                    createdAt={item.createdAt}
+                    isPersisted={item.isPersisted}
+                    user={item.user}
+                    canEdit={(item.user.isCurrent && canEdit) || canEditAllComments}
+                    onUpdate={(data) => handleCommentUpdate(item.id, data)}
+                    onDelete={() => handleCommentDelete(item.id)}
+                  />
+                ) : (
+                  <Item
+                    key={item.id}
+                    type={item.type}
+                    data={item.data}
+                    createdAt={item.createdAt}
+                    user={item.user}
+                  />
+                ),
+              )}
+            </Comment.Group>
          </div>
+          {isFetching || isDetailsFetching ? (
+            <Loader active inverted inline="centered" size="small" className={styles.loader} />
+          ) : (
+            !isAllFetched && <Visibility fireOnMount onOnScreen={onFetch} />
+          )}
        </div>
-      </>
+      </div>
    );
  },
 );
@@ -94,9 +98,12 @@ Actions.propTypes = {
  items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
  isFetching: PropTypes.bool.isRequired,
  isAllFetched: PropTypes.bool.isRequired,
+  isDetailsVisible: PropTypes.bool.isRequired,
+  isDetailsFetching: PropTypes.bool.isRequired,
  canEdit: PropTypes.bool.isRequired,
  canEditAllComments: PropTypes.bool.isRequired,
  onFetch: PropTypes.func.isRequired,
+  onDetailsToggle: PropTypes.func.isRequired,
  onCommentCreate: PropTypes.func.isRequired,
  onCommentUpdate: PropTypes.func.isRequired,
  onCommentDelete: PropTypes.func.isRequired,
@@ -8,12 +8,14 @@
  }

  .moduleHeader {
+    align-items: center;
    color: #17394d;
+    display: flex;
    font-size: 16px;
    font-weight: bold;
-    line-height: 20px;
+    height: 36px;
+    justify-content: space-between;
    margin: 0 0 4px;
-    padding: 8px 0;
  }

  .moduleIcon {
@@ -33,6 +35,24 @@
    position: relative;
  }

+  .toggleButton {
+    background: transparent;
+    box-shadow: none;
+    color: #6b808c;
+    float: right;
+    font-weight: normal;
+    margin-right: 0;
+    padding: 6px 11px;
+    text-align: left;
+    text-decoration: underline;
+    transition: none;
+
+    &:hover {
+      background: rgba(9, 30, 66, 0.08);
+      color: #092d42;
+    }
+  }
+
  .wrapper {
    margin-left: -40px;
    margin-top: 12px;
@@ -1,10 +1,11 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
+import { useDidUpdate, useToggle } from '../../../lib/hooks';

-import { useForm } from '../../../hooks';
+import { useClosableForm, useForm } from '../../../hooks';

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

@@ -14,10 +15,16 @@ const DEFAULT_DATA = {

 const CommentAdd = React.memo(({ onCreate }) => {
  const [t] = useTranslation();
+  const [isOpened, setIsOpened] = useState(false);
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
+  const [selectTextFieldState, selectTextField] = useToggle();

  const textField = useRef(null);

+  const close = useCallback(() => {
+    setIsOpened(false);
+  }, []);
+
  const submit = useCallback(() => {
    const cleanData = {
      ...data,
@@ -32,7 +39,12 @@ const CommentAdd = React.memo(({ onCreate }) => {
    onCreate(cleanData);

    setData(DEFAULT_DATA);
-  }, [onCreate, data, setData]);
+    selectTextField();
+  }, [onCreate, data, setData, selectTextField]);
+
+  const handleFieldFocus = useCallback(() => {
+    setIsOpened(true);
+  }, []);

  const handleFieldKeyDown = useCallback(
    (event) => {
@@ -43,10 +55,16 @@ const CommentAdd = React.memo(({ onCreate }) => {
    [submit],
  );

+  const [handleFieldBlur, handleControlMouseOver, handleControlMouseOut] = useClosableForm(close);
+
  const handleSubmit = useCallback(() => {
    submit();
  }, [submit]);

+  useDidUpdate(() => {
+    textField.current.ref.current.focus();
+  }, [selectTextFieldState]);
+
  return (
    <Form onSubmit={handleSubmit}>
      <TextArea
@@ -55,15 +73,24 @@ const CommentAdd = React.memo(({ onCreate }) => {
        name="text"
        value={data.text}
        placeholder={t('common.writeComment')}
-        minRows={3}
+        minRows={isOpened ? 3 : 1}
        spellCheck={false}
        className={styles.field}
+        onFocus={handleFieldFocus}
        onKeyDown={handleFieldKeyDown}
        onChange={handleFieldChange}
+        onBlur={handleFieldBlur}
      />
-      <div className={styles.controls}>
-        <Button positive content={t('action.addComment')} disabled={!data.text} />
-      </div>
+      {isOpened && (
+        <div className={styles.controls}>
+          <Button
+            positive
+            content={t('action.addComment')}
+            onMouseOver={handleControlMouseOver}
+            onMouseOut={handleControlMouseOut}
+          />
+        </div>
+      )}
    </Form>
  );
 });
@@ -76,7 +76,7 @@ const CommentEdit = React.forwardRef(({ children, defaultData, onUpdate }, ref)

  useEffect(() => {
    if (isOpened) {
-      textField.current.ref.current.select();
+      textField.current.ref.current.focus();
    }
  }, [isOpened]);

@@ -37,7 +37,7 @@ const TextFileAddModal = React.memo(({ content, onCreate, onClose }) => {
  }, [content, onCreate, onClose, data]);

  useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
  }, []);

  return (
@@ -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 [t] = useTranslation();
-  const [isOpened, toggleOpened] = useToggle();
+const INITIALLY_VISIBLE = 4;

-  const handleToggleClick = useCallback(() => {
-    toggleOpened();
-  }, [toggleOpened]);
+const Attachments = React.memo(
+  ({ items, onUpdate, onDelete, onCoverUpdate, onGalleryOpen, onGalleryClose }) => {
+    const [t] = useTranslation();
+    const [isAllVisible, toggleAllVisible] = useToggle();

-  const handleCoverSelect = useCallback(
-    (id) => {
-      onCoverUpdate(id);
-    },
-    [onCoverUpdate],
-  );
+    const handleCoverSelect = useCallback(
+      (id) => {
+        onCoverUpdate(id);
+      },
+      [onCoverUpdate],
+    );

-  const handleCoverDeselect = useCallback(() => {
-    onCoverUpdate(null);
-  }, [onCoverUpdate]);
+    const handleCoverDeselect = useCallback(() => {
+      onCoverUpdate(null);
+    }, [onCoverUpdate]);

-  const handleUpdate = useCallback(
-    (id, data) => {
-      onUpdate(id, data);
-    },
-    [onUpdate],
-  );
+    const handleUpdate = useCallback(
+      (id, data) => {
+        onUpdate(id, data);
+      },
+      [onUpdate],
+    );

-  const handleDelete = useCallback(
-    (id) => {
-      onDelete(id);
-    },
-    [onDelete],
-  );
+    const handleDelete = useCallback(
+      (id) => {
+        onDelete(id);
+      },
+      [onDelete],
+    );

-  const visibleItems = isOpened ? items : items.slice(0, 4);
+    const handleBeforeGalleryOpen = useCallback(
+      (gallery) => {
+        onGalleryOpen();

-  return (
-    <>
-      {visibleItems.map((item) => (
-        <Item
+        gallery.on('destroy', () => {
+          onGalleryClose();
+        });
+      },
+      [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}
-          url={item.url}
-          coverUrl={item.coverUrl}
-          createdAt={item.createdAt}
-          isCover={item.isCover}
-          isPersisted={item.isPersisted}
-          onCoverSelect={() => handleCoverSelect(item.id)}
-          onCoverDeselect={handleCoverDeselect}
-          onUpdate={(data) => handleUpdate(item.id, data)}
-          onDelete={() => handleDelete(item.id)}
-        />
-      ))}
-      {items.length > 4 && (
-        <Button
-          fluid
-          content={
-            isOpened
-              ? t('action.showFewerAttachments')
-              : t('action.showAllAttachments', {
-                  hidden: items.length - visibleItems.length,
-                })
+          original={item.url}
+          caption={item.name}
+        >
+          {({ ref, open }) =>
+            isVisible ? (
+              <Item
+                ref={ref}
+                name={item.name}
+                url={item.url}
+                coverUrl={item.coverUrl}
+                createdAt={item.createdAt}
+                isCover={item.isCover}
+                isPersisted={item.isPersisted}
+                onClick={item.image || isPdf ? open : undefined}
+                onCoverSelect={() => handleCoverSelect(item.id)}
+                onCoverDeselect={handleCoverDeselect}
+                onUpdate={(data) => handleUpdate(item.id, data)}
+                onDelete={() => handleDelete(item.id)}
+              />
+            ) : (
+              <span ref={ref} />
+            )
          }
-          className={styles.toggleButton}
-          onClick={handleToggleClick}
-        />
-      )}
-    </>
-  );
-});
+        </GalleryItem>
+      );
+    });
+
+    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;
@@ -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;
@@ -8,24 +8,32 @@ import EditPopup from './EditPopup';

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

-const Item = React.memo(
-  ({
-    name,
-    url,
-    coverUrl,
-    createdAt,
-    isCover,
-    isPersisted,
-    onCoverSelect,
-    onCoverDeselect,
-    onUpdate,
-    onDelete,
-  }) => {
+const Item = React.forwardRef(
+  (
+    {
+      name,
+      url,
+      coverUrl,
+      createdAt,
+      isCover,
+      isPersisted,
+      onCoverSelect,
+      onCoverDeselect,
+      onClick,
+      onUpdate,
+      onDelete,
+    },
+    ref,
+  ) => {
    const [t] = useTranslation();

    const handleClick = useCallback(() => {
-      window.open(url, '_blank');
-    }, [url]);
+      if (onClick) {
+        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);
@@ -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';
@@ -34,6 +34,8 @@ const CardModal = React.memo(
    isSubscribed,
    isActionsFetching,
    isAllActionsFetched,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
    listId,
    boardId,
    projectId,
@@ -61,11 +63,13 @@ const CardModal = React.memo(
    onLabelDelete,
    onTaskCreate,
    onTaskUpdate,
+    onTaskMove,
    onTaskDelete,
    onAttachmentCreate,
    onAttachmentUpdate,
    onAttachmentDelete,
    onActionsFetch,
+    onActionsDetailsToggle,
    onCommentActionCreate,
    onCommentActionUpdate,
    onCommentActionDelete,
@@ -73,6 +77,8 @@ const CardModal = React.memo(
  }) => {
    const [t] = useTranslation();

+    const isGalleryOpened = useRef(false);
+
    const handleNameUpdate = useCallback(
      (newName) => {
        onUpdate({
@@ -124,6 +130,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 +335,7 @@ const CardModal = React.memo(
                    canEdit={canEdit}
                    onCreate={onTaskCreate}
                    onUpdate={onTaskUpdate}
+                    onMove={onTaskMove}
                    onDelete={onTaskDelete}
                  />
                </div>
@@ -328,6 +351,8 @@ const CardModal = React.memo(
                    onUpdate={onAttachmentUpdate}
                    onDelete={onAttachmentDelete}
                    onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                  />
                </div>
              </div>
@@ -336,9 +361,12 @@ const CardModal = React.memo(
              items={actions}
              isFetching={isActionsFetching}
              isAllFetched={isAllActionsFetched}
+              isDetailsVisible={isActionsDetailsVisible}
+              isDetailsFetching={isActionsDetailsFetching}
              canEdit={canEdit}
              canEditAllComments={canEditAllCommentActions}
              onFetch={onActionsFetch}
+              onDetailsToggle={onActionsDetailsToggle}
              onCommentCreate={onCommentActionCreate}
              onCommentUpdate={onCommentActionUpdate}
              onCommentDelete={onCommentActionDelete}
@@ -445,7 +473,7 @@ const CardModal = React.memo(
    );

    return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon centered={false} onClose={handleClose} className={styles.wrapper}>
        {canEdit ? (
          <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
        ) : (
@@ -464,6 +492,8 @@ CardModal.propTypes = {
  isSubscribed: PropTypes.bool.isRequired,
  isActionsFetching: PropTypes.bool.isRequired,
  isAllActionsFetched: PropTypes.bool.isRequired,
+  isActionsDetailsVisible: PropTypes.bool.isRequired,
+  isActionsDetailsFetching: PropTypes.bool.isRequired,
  listId: PropTypes.string.isRequired,
  boardId: PropTypes.string.isRequired,
  projectId: PropTypes.string.isRequired,
@@ -493,11 +523,13 @@ 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,
  onAttachmentDelete: PropTypes.func.isRequired,
  onActionsFetch: PropTypes.func.isRequired,
+  onActionsDetailsToggle: PropTypes.func.isRequired,
  onCommentActionCreate: PropTypes.func.isRequired,
  onCommentActionUpdate: PropTypes.func.isRequired,
  onCommentActionDelete: PropTypes.func.isRequired,
@@ -193,4 +193,14 @@
    margin: 0 8px 4px 0;
    text-transform: uppercase;
  }
+
+  .wrapper {
+    width: 880px;
+  }
+
+  @media (max-width: 926px) {
+    .wrapper {
+      width: 95%;
+    }
+  }
 }
@@ -66,7 +66,7 @@ const DescriptionEdit = React.forwardRef(({ children, defaultValue, onUpdate },

  useEffect(() => {
    if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
    }
  }, [isOpened]);

@@ -17,7 +17,7 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
  const [t] = useTranslation();
  const [isOpened, setIsOpened] = useState(false);
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();

  const nameField = useRef(null);

@@ -43,8 +43,8 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
    onCreate(cleanData);

    setData(DEFAULT_DATA);
-    selectNameField();
-  }, [onCreate, data, setData, selectNameField]);
+    focusNameField();
+  }, [onCreate, data, setData, focusNameField]);

  useImperativeHandle(
    ref,
@@ -81,13 +81,13 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {

  useEffect(() => {
    if (isOpened) {
-      nameField.current.ref.current.select();
+      nameField.current.ref.current.focus();
    }
  }, [isOpened]);

  useDidUpdate(() => {
-    nameField.current.ref.current.select();
-  }, [selectNameFieldState]);
+    nameField.current.ref.current.focus();
+  }, [focusNameFieldState]);

  if (!isOpened) {
    return React.cloneElement(children, {
@@ -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 nameEdit = useRef(null);
+const Item = React.memo(
+  ({ id, index, name, isCompleted, isPersisted, canEdit, onUpdate, onDelete }) => {
+    const nameEdit = useRef(null);

-  const handleClick = useCallback(() => {
-    if (isPersisted && canEdit) {
-      nameEdit.current.open();
-    }
-  }, [isPersisted, canEdit]);
+    const handleClick = useCallback(() => {
+      if (isPersisted && canEdit) {
+        nameEdit.current.open();
+      }
+    }, [isPersisted, canEdit]);

-  const handleNameUpdate = useCallback(
-    (newName) => {
+    const handleNameUpdate = useCallback(
+      (newName) => {
+        onUpdate({
+          name: newName,
+        });
+      },
+      [onUpdate],
+    );
+
+    const handleToggleChange = useCallback(() => {
      onUpdate({
-        name: newName,
+        isCompleted: !isCompleted,
      });
-    },
-    [onUpdate],
-  );
+    }, [isCompleted, onUpdate]);

-  const handleToggleChange = useCallback(() => {
-    onUpdate({
-      isCompleted: !isCompleted,
-    });
-  }, [isCompleted, onUpdate]);
+    const handleNameEdit = useCallback(() => {
+      nameEdit.current.open();
+    }, []);

-  const handleNameEdit = useCallback(() => {
-    nameEdit.current.open();
-  }, []);
+    return (
+      <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 (
-    <div 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 isDragging ? ReactDOM.createPortal(contentNode, document.body) : contentNode;
+        }}
+      </Draggable>
+    );
+  },
+);

 Item.propTypes = {
+  id: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  isCompleted: PropTypes.bool.isRequired,
  isPersisted: PropTypes.bool.isRequired,
@@ -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);
  }
 }
@@ -71,7 +71,7 @@ const NameEdit = React.forwardRef(({ children, defaultValue, onUpdate }, ref) =>

  useEffect(() => {
    if (isOpened) {
-      field.current.ref.current.select();
+      field.current.ref.current.focus();
    }
  }, [isOpened]);

@@ -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) => (
-        <Item
-          key={item.id}
-          name={item.name}
-          isCompleted={item.isCompleted}
-          isPersisted={item.isPersisted}
-          canEdit={canEdit}
-          onUpdate={(data) => handleUpdate(item.id, data)}
-          onDelete={() => handleDelete(item.id)}
-        />
-      ))}
-      {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>
-      )}
+      <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+        <Droppable droppableId="tasks" type={DroppableTypes.TASK}>
+          {({ innerRef, droppableProps, placeholder }) => (
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            <div {...droppableProps} ref={innerRef}>
+              {items.map((item, index) => (
+                <Item
+                  key={item.id}
+                  id={item.id}
+                  index={index}
+                  name={item.name}
+                  isCompleted={item.isCompleted}
+                  isPersisted={item.isPersisted}
+                  canEdit={canEdit}
+                  onUpdate={(data) => handleUpdate(item.id, data)}
+                  onDelete={() => handleDelete(item.id)}
+                />
+              ))}
+              {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,
 };

@@ -13,7 +13,6 @@
    border-radius: 3px;
    box-sizing: border-box;
    color: #fff;
-    display: inline-block;
    font-weight: 400;
    outline: none;
    overflow: hidden;
@@ -17,7 +17,7 @@ const DEFAULT_DATA = {
 const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
  const [t] = useTranslation();
  const [data, handleFieldChange, setData] = useForm(DEFAULT_DATA);
-  const [selectNameFieldState, selectNameField] = useToggle();
+  const [focusNameFieldState, focusNameField] = useToggle();

  const nameField = useRef(null);

@@ -35,8 +35,8 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {
    onCreate(cleanData);

    setData(DEFAULT_DATA);
-    selectNameField();
-  }, [onCreate, data, setData, selectNameField]);
+    focusNameField();
+  }, [onCreate, data, setData, focusNameField]);

  const handleFieldKeyDown = useCallback(
    (event) => {
@@ -65,13 +65,13 @@ const CardAdd = React.memo(({ isOpened, onCreate, onClose }) => {

  useEffect(() => {
    if (isOpened) {
-      nameField.current.ref.current.select();
+      nameField.current.ref.current.focus();
    }
  }, [isOpened]);

  useDidUpdate(() => {
-    nameField.current.ref.current.select();
-  }, [selectNameFieldState]);
+    nameField.current.ref.current.focus();
+  }, [focusNameFieldState]);

  return (
    <Form
@@ -83,7 +83,7 @@ const Login = React.memo(
    }, [onAuthenticate, data]);

    useEffect(() => {
-      emailOrUsernameField.current.select();
+      emailOrUsernameField.current.focus();
    }, []);

    useEffect(() => {
@@ -33,7 +33,7 @@ const ProjectAddModal = React.memo(({ defaultData, isSubmitting, onCreate, onClo
  }, [onCreate, data]);

  useEffect(() => {
-    nameField.current.select();
+    nameField.current.focus();
  }, []);

  return (
@@ -10,6 +10,7 @@ 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';
@@ -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();
-  }, [defaultValue, setData, toggleEdit]);
+    toggleEditing();
+  }, [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')} />}
@@ -88,7 +88,7 @@ const UserAddStep = React.memo(
    }, [onCreate, data]);

    useEffect(() => {
-      emailField.current.select();
+      emailField.current.focus();
    }, []);

    useEffect(() => {
@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserEmailEditStep from './UserEmailEditStep';
+
+export default withPopup(UserEmailEditStep);
@@ -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 { withPopup } from '../../../lib/popup';
-import { Input, Popup } from '../../../lib/custom-ui';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
+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(
-  ({ defaultData, email, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+const UserEmailEditStep = React.memo(
+  ({
+    defaultData,
+    email,
+    isSubmitting,
+    error,
+    usePasswordConfirmation,
+    onUpdate,
+    onMessageDismiss,
+    onBack,
+    onClose,
+  }) => {
    const [t] = useTranslation();
    const wasSubmitting = usePrevious(isSubmitting);

@@ -68,16 +78,16 @@ const EmailEditStep = React.memo(
        return;
      }

-      if (!cleanData.currentPassword) {
+      if (usePasswordConfirmation && !cleanData.currentPassword) {
        currentPasswordField.current.focus();
        return;
      }

-      onUpdate(cleanData);
-    }, [email, onUpdate, onClose, data]);
+      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+    }, [email, usePasswordConfirmation, onUpdate, onClose, data]);

    useEffect(() => {
-      emailField.current.select();
+      emailField.current.focus();
    }, []);

    useEffect(() => {
@@ -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>
-            <Input.Password
-              fluid
-              ref={currentPasswordField}
-              name="currentPassword"
-              value={data.currentPassword}
-              className={styles.field}
-              onChange={handleFieldChange}
-            />
+            {usePasswordConfirmation && (
+              <>
+                <div className={styles.text}>{t('common.currentPassword')}</div>
+                <Input.Password
+                  fluid
+                  ref={currentPasswordField}
+                  name="currentPassword"
+                  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;
@@ -0,0 +1,3 @@
+import UserEmailEditStep from './UserEmailEditStep';
+
+export default UserEmailEditStep;
@@ -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;
@@ -0,0 +1,3 @@
+import UserInformationEdit from './UserInformationEdit';
+
+export default UserInformationEdit;
@@ -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;
@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserPasswordEditStep from './UserPasswordEditStep';
+
+export default withPopup(UserPasswordEditStep);
@@ -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 { withPopup } from '../../../lib/popup';
-import { Input, Popup } from '../../../lib/custom-ui';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
+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(
-  ({ defaultData, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+const UserPasswordEditStep = React.memo(
+  ({
+    defaultData,
+    isSubmitting,
+    error,
+    usePasswordConfirmation,
+    onUpdate,
+    onMessageDismiss,
+    onBack,
+    onClose,
+  }) => {
    const [t] = useTranslation();
    const wasSubmitting = usePrevious(isSubmitting);

@@ -52,16 +61,16 @@ const PasswordEditStep = React.memo(
        return;
      }

-      if (!data.currentPassword) {
+      if (usePasswordConfirmation && !data.currentPassword) {
        currentPasswordField.current.focus();
        return;
      }

-      onUpdate(data);
-    }, [onUpdate, data]);
+      onUpdate(usePasswordConfirmation ? data : omit(data, 'currentPassword'));
+    }, [usePasswordConfirmation, onUpdate, data]);

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

    useEffect(() => {
@@ -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>
-            <Input.Password
-              fluid
-              ref={currentPasswordField}
-              name="currentPassword"
-              value={data.currentPassword}
-              className={styles.field}
-              onChange={handleFieldChange}
-            />
+            {usePasswordConfirmation && (
+              <>
+                <div className={styles.text}>{t('common.currentPassword')}</div>
+                <Input.Password
+                  fluid
+                  ref={currentPasswordField}
+                  name="currentPassword"
+                  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;
@@ -0,0 +1,3 @@
+import UserPasswordEditStep from './UserPasswordEditStep';
+
+export default UserPasswordEditStep;
@@ -1,14 +1,15 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { Button, Divider, Header, Tab } from 'semantic-ui-react';
+import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';

-import InformationEdit from './InformationEdit';
+import locales from '../../../locales';
 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';

@@ -20,12 +21,14 @@ const AccountPane = React.memo(
    avatarUrl,
    phone,
    organization,
+    language,
    isAvatarUpdating,
    usernameUpdateForm,
    emailUpdateForm,
    passwordUpdateForm,
    onUpdate,
    onAvatarUpdate,
+    onLanguageUpdate,
    onUsernameUpdate,
    onUsernameUpdateMessageDismiss,
    onEmailUpdate,
@@ -41,6 +44,13 @@ const AccountPane = React.memo(
      });
    }, [onUpdate]);

+    const handleLanguageChange = useCallback(
+      (_, { value }) => {
+        onLanguageUpdate(value === 'auto' ? null : value); // FIXME: hack
+      },
+      [onLanguageUpdate],
+    );
+
    return (
      <Tab.Pane attached={false} className={styles.wrapper}>
        <AvatarEditPopup
@@ -52,7 +62,7 @@ const AccountPane = React.memo(
        </AvatarEditPopup>
        <br />
        <br />
-        <InformationEdit
+        <UserInformationEdit
          defaultData={{
            name,
            phone,
@@ -60,6 +70,32 @@ const AccountPane = React.memo(
          }}
          onUpdate={onUpdate}
        />
+        <Divider horizontal section>
+          <Header as="h4">
+            {t('common.language', {
+              context: 'title',
+            })}
+          </Header>
+        </Divider>
+        <Dropdown
+          fluid
+          selection
+          options={[
+            {
+              key: 'auto',
+              value: 'auto',
+              text: t('common.detectAutomatically'),
+            },
+            ...locales.map((locale) => ({
+              key: locale.language,
+              value: locale.language,
+              flag: locale.country,
+              text: locale.name,
+            })),
+          ]}
+          value={language || 'auto'}
+          onChange={handleLanguageChange}
+        />
        <Divider horizontal section>
          <Header as="h4">
            {t('common.authentication', {
@@ -68,7 +104,8 @@ const AccountPane = React.memo(
          </Header>
        </Divider>
        <div className={styles.action}>
-          <UsernameEditPopup
+          <UserUsernameEditPopup
+            usePasswordConfirmation
            defaultData={usernameUpdateForm.data}
            username={username}
            isSubmitting={usernameUpdateForm.isSubmitting}
@@ -81,10 +118,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 +135,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 +151,7 @@ const AccountPane = React.memo(
                context: 'title',
              })}
            </Button>
-          </PasswordEditPopup>
+          </UserPasswordEditPopup>
        </div>
      </Tab.Pane>
    );
@@ -126,6 +165,7 @@ AccountPane.propTypes = {
  avatarUrl: PropTypes.string,
  phone: PropTypes.string,
  organization: PropTypes.string,
+  language: PropTypes.string,
  isAvatarUpdating: PropTypes.bool.isRequired,
  /* eslint-disable react/forbid-prop-types */
  usernameUpdateForm: PropTypes.object.isRequired,
@@ -134,6 +174,7 @@ AccountPane.propTypes = {
  /* eslint-enable react/forbid-prop-types */
  onUpdate: PropTypes.func.isRequired,
  onAvatarUpdate: PropTypes.func.isRequired,
+  onLanguageUpdate: PropTypes.func.isRequired,
  onUsernameUpdate: PropTypes.func.isRequired,
  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
  onEmailUpdate: PropTypes.func.isRequired,
@@ -147,6 +188,7 @@ AccountPane.defaultProps = {
  avatarUrl: undefined,
  phone: undefined,
  organization: undefined,
+  language: undefined,
 };

 export default AccountPane;
@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}
@@ -14,6 +14,7 @@ const UserSettingsModal = React.memo(
    avatarUrl,
    phone,
    organization,
+    language,
    subscribeToOwnCards,
    isAvatarUpdating,
    usernameUpdateForm,
@@ -21,6 +22,7 @@ const UserSettingsModal = React.memo(
    passwordUpdateForm,
    onUpdate,
    onAvatarUpdate,
+    onLanguageUpdate,
    onUsernameUpdate,
    onUsernameUpdateMessageDismiss,
    onEmailUpdate,
@@ -44,12 +46,14 @@ const UserSettingsModal = React.memo(
            avatarUrl={avatarUrl}
            phone={phone}
            organization={organization}
+            language={language}
            isAvatarUpdating={isAvatarUpdating}
            usernameUpdateForm={usernameUpdateForm}
            emailUpdateForm={emailUpdateForm}
            passwordUpdateForm={passwordUpdateForm}
            onUpdate={onUpdate}
            onAvatarUpdate={onAvatarUpdate}
+            onLanguageUpdate={onLanguageUpdate}
            onUsernameUpdate={onUsernameUpdate}
            onUsernameUpdateMessageDismiss={onUsernameUpdateMessageDismiss}
            onEmailUpdate={onEmailUpdate}
@@ -92,6 +96,7 @@ UserSettingsModal.propTypes = {
  avatarUrl: PropTypes.string,
  phone: PropTypes.string,
  organization: PropTypes.string,
+  language: PropTypes.string,
  subscribeToOwnCards: PropTypes.bool.isRequired,
  isAvatarUpdating: PropTypes.bool.isRequired,
  /* eslint-disable react/forbid-prop-types */
@@ -101,6 +106,7 @@ UserSettingsModal.propTypes = {
  /* eslint-enable react/forbid-prop-types */
  onUpdate: PropTypes.func.isRequired,
  onAvatarUpdate: PropTypes.func.isRequired,
+  onLanguageUpdate: PropTypes.func.isRequired,
  onUsernameUpdate: PropTypes.func.isRequired,
  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
  onEmailUpdate: PropTypes.func.isRequired,
@@ -115,6 +121,7 @@ UserSettingsModal.defaultProps = {
  avatarUrl: undefined,
  phone: undefined,
  organization: undefined,
+  language: undefined,
 };

 export default UserSettingsModal;
@@ -0,0 +1,5 @@
+import { withPopup } from '../lib/popup';
+
+import UserUsernameEditStep from './UserUsernameEditStep';
+
+export default withPopup(UserUsernameEditStep);
@@ -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 { withPopup } from '../../../lib/popup';
-import { Input, Popup } from '../../../lib/custom-ui';
+import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
+import { Input, Popup } from '../../lib/custom-ui';

-import { useForm } from '../../../hooks';
-import { isUsername } from '../../../utils/validator';
+import { useForm } from '../../hooks';
+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(
-  ({ defaultData, username, isSubmitting, error, onUpdate, onMessageDismiss, onClose }) => {
+const UserUsernameEditStep = React.memo(
+  ({
+    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,16 +78,16 @@ const UsernameEditStep = React.memo(
        return;
      }

-      if (!cleanData.currentPassword) {
+      if (usePasswordConfirmation && !cleanData.currentPassword) {
        currentPasswordField.current.focus();
        return;
      }

-      onUpdate(cleanData);
-    }, [username, onUpdate, onClose, data]);
+      onUpdate(usePasswordConfirmation ? cleanData : omit(cleanData, 'currentPassword'));
+    }, [username, usePasswordConfirmation, onUpdate, onClose, data]);

    useEffect(() => {
-      usernameField.current.select();
+      usernameField.current.focus();
    }, []);

    useEffect(() => {
@@ -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>
-            <Input.Password
-              fluid
-              ref={currentPasswordField}
-              name="currentPassword"
-              value={data.currentPassword}
-              className={styles.field}
-              onChange={handleFieldChange}
-            />
+            {usePasswordConfirmation && (
+              <>
+                <div className={styles.text}>{t('common.currentPassword')}</div>
+                <Input.Password
+                  fluid
+                  ref={currentPasswordField}
+                  name="currentPassword"
+                  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;
@@ -0,0 +1,12 @@
+:global(#app) {
+  .field {
+    margin-bottom: 8px;
+  }
+
+  .text {
+    color: #444444;
+    font-size: 12px;
+    font-weight: bold;
+    padding-bottom: 6px;
+  }
+}
@@ -0,0 +1,3 @@
+import UserUsernameEditStep from './UserUsernameEditStep';
+
+export default UserUsernameEditStep;
@@ -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;
@@ -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);
@@ -0,0 +1,11 @@
+:global(#app) {
+  .menu {
+    margin: -7px -12px -5px;
+    width: calc(100% + 24px);
+  }
+
+  .menuItem {
+    margin: 0;
+    padding-left: 14px;
+  }
+}
@@ -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;
@@ -0,0 +1,3 @@
+import Item from './Item';
+
+export default Item;
@@ -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 [t] = useTranslation();
+const UsersModal = React.memo(
+  ({
+    items,
+    onUpdate,
+    onUsernameUpdate,
+    onUsernameUpdateMessageDismiss,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onDelete,
+    onClose,
+  }) => {
+    const [t] = useTranslation();

-  const handleUpdate = useCallback(
-    (id, data) => {
-      onUpdate(id, data);
-    },
-    [onUpdate],
-  );
+    const handleUpdate = useCallback(
+      (id, data) => {
+        onUpdate(id, data);
+      },
+      [onUpdate],
+    );

-  const handleDelete = useCallback(
-    (id) => {
-      onDelete(id);
-    },
-    [onDelete],
-  );
+    const handleUsernameUpdate = useCallback(
+      (id, data) => {
+        onUsernameUpdate(id, data);
+      },
+      [onUsernameUpdate],
+    );

-  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}
-                name={item.name}
-                username={item.username}
-                email={item.email}
-                isAdmin={item.isAdmin}
-                onUpdate={(data) => handleUpdate(item.id, data)}
-                onDelete={() => handleDelete(item.id)}
-              />
-            ))}
-          </Table.Body>
-        </Table>
-      </Modal.Content>
-      <Modal.Actions>
-        <UserAddPopupContainer>
-          <Button positive content={t('action.addUser')} />
-        </UserAddPopupContainer>
-      </Modal.Actions>
-    </Modal>
-  );
-});
+    const handleUsernameUpdateMessageDismiss = useCallback(
+      (id) => {
+        onUsernameUpdateMessageDismiss(id);
+      },
+      [onUsernameUpdateMessageDismiss],
+    );
+
+    const handleEmailUpdate = useCallback(
+      (id, data) => {
+        onEmailUpdate(id, data);
+      },
+      [onEmailUpdate],
+    );
+
+    const handleEmailUpdateMessageDismiss = useCallback(
+      (id) => {
+        onEmailUpdateMessageDismiss(id);
+      },
+      [onEmailUpdateMessageDismiss],
+    );
+
+    const handlePasswordUpdate = useCallback(
+      (id, data) => {
+        onPasswordUpdate(id, data);
+      },
+      [onPasswordUpdate],
+    );
+
+    const handlePasswordUpdateMessageDismiss = useCallback(
+      (id) => {
+        onPasswordUpdateMessageDismiss(id);
+      },
+      [onPasswordUpdateMessageDismiss],
+    );
+
+    const handleDelete = useCallback(
+      (id) => {
+        onDelete(id);
+      },
+      [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,
 };
@@ -225,6 +225,9 @@ export default {
  ACTIONS_FETCH: 'ACTIONS_FETCH',
  ACTIONS_FETCH__SUCCESS: 'ACTIONS_FETCH__SUCCESS',
  ACTIONS_FETCH__FAILURE: 'ACTIONS_FETCH__FAILURE',
+  ACTIONS_DETAILS_TOGGLE: 'ACTIONS_DETAILS_TOGGLE',
+  ACTIONS_DETAILS_TOGGLE__SUCCESS: 'ACTIONS_DETAILS_TOGGLE__SUCCESS',
+  ACTIONS_DETAILS_TOGGLE__FAILURE: 'ACTIONS_DETAILS_TOGGLE__FAILURE',

  /* Action */

@@ -13,7 +13,7 @@ const ACCESS_TOKEN_KEY = 'accessToken';
 const ACCESS_TOKEN_EXPIRES = 365;

 const POSITION_GAP = 65535;
-const ACTIONS_LIMIT = 10;
+const ACTIONS_LIMIT = 50;

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

 export default {
  BOARD,
  LIST,
  CARD,
+  TASK,
 };
@@ -31,11 +31,18 @@ export default {
  USER_UPDATE: `${PREFIX}/USER_UPDATE`,
  CURRENT_USER_UPDATE: `${PREFIX}/CURRENT_USER_UPDATE`,
  USER_UPDATE_HANDLE: `${PREFIX}/USER_UPDATE_HANDLE`,
+  CURRENT_USER_LANGUAGE_UPDATE: `${PREFIX}/CURRENT_USER_LANGUAGE_UPDATE`,
+  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 +139,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`,

@@ -147,6 +155,7 @@ export default {
  /* Actions */

  ACTIONS_IN_CURRENT_CARD_FETCH: `${PREFIX}/ACTIONS_IN_CURRENT_CARD_FETCH`,
+  ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE: `${PREFIX}/ACTIONS_DETAILS_IN_CURRENT_CARD_TOGGLE`,

  /* Action */

@@ -32,8 +32,10 @@ import {
  fetchActionsInCurrentCard,
  fetchBoard,
  moveCurrentCard,
+  moveTask,
  removeLabelFromCurrentCard,
  removeUserFromCurrentCard,
+  toggleActionsDetailsInCurrentCard,
  transferCurrentCard,
  updateAttachment,
  updateCommentAction,
@@ -59,6 +61,8 @@ const mapStateToProps = (state) => {
    timer,
    isSubscribed,
    isActionsFetching,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
    isAllActionsFetched,
    boardId,
    listId,
@@ -78,6 +82,8 @@ const mapStateToProps = (state) => {
    isSubscribed,
    isActionsFetching,
    isAllActionsFetched,
+    isActionsDetailsVisible,
+    isActionsDetailsFetching,
    listId,
    boardId,
    projectId,
@@ -111,11 +117,13 @@ const mapDispatchToProps = (dispatch) =>
      onLabelDelete: deleteLabel,
      onTaskCreate: createTaskInCurrentCard,
      onTaskUpdate: updateTask,
+      onTaskMove: moveTask,
      onTaskDelete: deleteTask,
      onAttachmentCreate: createAttachmentInCurrentCard,
      onAttachmentUpdate: updateAttachment,
      onAttachmentDelete: deleteAttachment,
      onActionsFetch: fetchActionsInCurrentCard,
+      onActionsDetailsToggle: toggleActionsDetailsInCurrentCard,
      onCommentActionCreate: createCommentActionInCurrentCard,
      onCommentActionUpdate: updateCommentAction,
      onCommentActionDelete: deleteCommentAction,
@@ -10,6 +10,7 @@ import {
  updateCurrentUser,
  updateCurrentUserAvatar,
  updateCurrentUserEmail,
+  updateCurrentUserLanguage,
  updateCurrentUserPassword,
  updateCurrentUserUsername,
 } from '../actions/entry';
@@ -23,6 +24,7 @@ const mapStateToProps = (state) => {
    avatarUrl,
    phone,
    organization,
+    language,
    subscribeToOwnCards,
    isAvatarUpdating,
    emailUpdateForm,
@@ -37,6 +39,7 @@ const mapStateToProps = (state) => {
    avatarUrl,
    phone,
    organization,
+    language,
    subscribeToOwnCards,
    isAvatarUpdating,
    emailUpdateForm,
@@ -50,6 +53,7 @@ const mapDispatchToProps = (dispatch) =>
    {
      onUpdate: updateCurrentUser,
      onAvatarUpdate: updateCurrentUserAvatar,
+      onLanguageUpdate: updateCurrentUserLanguage,
      onUsernameUpdate: updateCurrentUserUsername,
      onUsernameUpdateMessageDismiss: clearCurrentUserUsernameUpdateError,
      onEmailUpdate: updateCurrentUserEmail,
@@ -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,
    },
@@ -1,11 +1,11 @@
 import i18n from 'i18next';
-import languageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import { initReactI18next } from 'react-i18next';
 import formatDate from 'date-fns/format';
 import parseDate from 'date-fns/parse';
 import { registerLocale, setDefaultLocale } from 'react-datepicker';

-import { embedLocales, languages } from './locales';
+import { embeddedLocales, languages } from './locales';

 i18n.dateFns = {
  locales: {},
@@ -52,12 +52,12 @@ const parseDatePostProcessor = {
 };

 i18n
-  .use(languageDetector)
+  .use(LanguageDetector)
  .use(formatDatePostProcessor)
  .use(parseDatePostProcessor)
  .use(initReactI18next)
  .init({
-    resources: embedLocales,
+    resources: embeddedLocales,
    fallbackLng: 'en',
    supportedLngs: languages,
    load: 'languageOnly',
@@ -74,27 +74,41 @@ i18n
      },
    },
    react: {
-      useSuspense: false,
+      useSuspense: true,
    },
    debug: process.env.NODE_ENV !== 'production',
  });

-i18n.loadCoreLocale = (language = i18n.resolvedLanguage) => {
+i18n.loadCoreLocale = async (language = i18n.resolvedLanguage) => {
  if (language === 'en') {
    return;
  }

-  import(`./locales/${language}/core`).then((module) => {
-    const locale = module.default;
+  const { default: locale } = await import(`./locales/${language}/core`);

-    Object.keys(locale).forEach((namespace) => {
-      if (namespace === 'dateFns') {
-        i18n.dateFns.addLocale(language, locale[namespace]);
-      } else {
-        i18n.addResourceBundle(language, namespace, locale[namespace], true, true);
-      }
-    });
+  Object.keys(locale).forEach((namespace) => {
+    if (namespace === 'dateFns') {
+      i18n.dateFns.addLocale(language, locale[namespace]);
+    } else {
+      i18n.addResourceBundle(language, namespace, locale[namespace], true, true);
+    }
  });
 };

+i18n.detectLanguage = () => {
+  const {
+    services: { languageDetector, languageUtils },
+  } = i18n;
+
+  localStorage.removeItem(languageDetector.options.lookupLocalStorage);
+
+  const detectedLanguages = languageDetector.detect();
+
+  i18n.language = languageUtils.getBestMatchFromCodes(detectedLanguages);
+  i18n.languages = languageUtils.toResolveHierarchy(i18n.language);
+
+  i18n.resolvedLanguage = undefined;
+  i18n.setResolvedLanguage(i18n.language);
+};
+
 export default i18n;
@@ -2,6 +2,7 @@ import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
+import remarkBreaks from 'remark-breaks';

 import './Markdown.module.scss'; // FIXME: import as styles?

@@ -31,14 +32,12 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
  }

  return (
-    /* eslint-disable react/jsx-props-no-spreading */
    <ReactMarkdown
-      {...props}
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
      components={components}
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
      className="markdown-body"
    />
-    /* eslint-enable react/jsx-props-no-spreading */
  );
 });

@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'cs',
+  country: 'cz',
+  name: 'Čeština',
+  embeddedLocale: login,
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'da',
+  country: 'dk',
+  name: 'Dansk',
+  embeddedLocale: login,
+};
@@ -72,6 +72,7 @@ export default {
      deleteTask_title: 'Aufgabe löschen',
      deleteUser_title: 'Benutzer löschen',
      description: 'Beschreibung',
+      detectAutomatically: 'Automatische Erkennung',
      dropFileToUpload: 'Datei ablegen, um hochzuladen',
      editAttachment_title: 'Anhang bearbieten',
      editAvatar_title: 'Avatar bearbeiten',
@@ -97,6 +98,7 @@ export default {
      hours: 'Stunden',
      invalidCurrentPassword: 'Das aktuelle Passwort ist falsch',
      labels: 'Labels',
+      language: 'Sprache',
      leaveBoard_title: 'Board verlassen',
      leaveProject_title: 'Projekt verlassen',
      list: 'Listen',
@@ -134,6 +136,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',
@@ -192,6 +195,7 @@ export default {
      editTimer_title: 'Timer bearbeiten',
      editTitle_title: 'Titel bearbeiten',
      editUsername_title: 'Benutzername ändern',
+      hideDetails: 'Details ausblenden',
      leaveBoard: 'Board verlassen',
      leaveProject: 'Projekt verlassen',
      logOut_title: 'Ausloggen',
@@ -207,6 +211,7 @@ export default {
      removeMember: 'Mitglied entfernen',
      save: 'Speichern',
      showAllAttachments: 'Alle Anhänge anzeigen ({{hidden}} versteckt)',
+      showDetails: 'Details anzeigen',
      showFewerAttachments: 'Weniger Anhänge anzeigen',
      start: 'Start',
      stop: 'Stopp',
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'de',
+  country: 'de',
+  name: 'Deutsch',
+  embeddedLocale: login,
+};
@@ -64,12 +64,14 @@ export default {
      deleteTask_title: 'Delete Task',
      deleteUser_title: 'Delete User',
      description: 'Description',
+      detectAutomatically: 'Detect automatically',
      dropFileToUpload: 'Drop file to upload',
      editAttachment_title: 'Edit Attachment',
      editAvatar_title: 'Edit Avatar',
      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',
@@ -89,6 +91,7 @@ export default {
      hours: 'Hours',
      invalidCurrentPassword: 'Invalid current password',
      labels: 'Labels',
+      language: 'Language',
      leaveBoard_title: 'Leave Board',
      leaveProject_title: 'Leave Project',
      list: 'List',
@@ -126,6 +129,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,10 +183,12 @@ 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',
      editUsername_title: 'Edit Username',
+      hideDetails: 'Hide details',
      leaveBoard: 'Leave board',
      leaveProject: 'Leave project',
      logOut_title: 'Log Out',
@@ -197,6 +204,7 @@ export default {
      removeMember: 'Remove member',
      save: 'Save',
      showAllAttachments: 'Show all attachments ({{hidden}} hidden)',
+      showDetails: 'Show details',
      showFewerAttachments: 'Show fewer attachments',
      start: 'Start',
      stop: 'Stop',
@@ -0,0 +1,11 @@
+import merge from 'lodash/merge';
+
+import login from './login';
+import core from './core';
+
+export default {
+  language: 'en',
+  country: 'us',
+  name: 'English',
+  embeddedLocale: merge(login, core),
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'es',
+  country: 'es',
+  name: 'Español',
+  embeddedLocale: login,
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'fr',
+  country: 'fr',
+  name: 'Français',
+  embeddedLocale: login,
+};
@@ -1,33 +1,28 @@
-import merge from 'lodash/merge';
-import fromPairs from 'lodash/fromPairs';
+import cs from './cs';
+import da from './da';
+import de from './de';
+import en from './en';
+import es from './es';
+import fr from './fr';
+import ja from './ja';
+import ko from './ko';
+import pl from './pl';
+import ru from './ru';
+import sk from './sk';
+import sv from './sv';
+import uz from './uz';
+import zh from './zh';

-import csLogin from './cs/login';
-import daLogin from './da/login';
-import deLogin from './de/login';
-import enLogin from './en/login';
-import enCore from './en/core';
-import esLogin from './es/login';
-import frLogin from './fr/login';
-import jaLogin from './ja/login';
-import plLogin from './pl/login';
-import ruLogin from './ru/login';
-import uzLogin from './uz/login';
-import zhLogin from './zh/login';
+const locales = [cs, da, de, en, es, fr, ja, ko, pl, ru, sk, sv, uz, zh];

-const localePairs = [
-  ['cs', csLogin],
-  ['da', daLogin],
-  ['de', deLogin],
-  ['en', merge(enLogin, enCore)],
-  ['es', esLogin],
-  ['fr', frLogin],
-  ['ja', jaLogin],
-  ['pl', plLogin],
-  ['ru', ruLogin],
-  ['uz', uzLogin],
-  ['zh', zhLogin],
-];
+export default locales;

-export const languages = localePairs.map((locale) => locale[0]);
+export const languages = locales.map((locale) => locale.language);

-export const embedLocales = fromPairs(localePairs);
+export const embeddedLocales = locales.reduce(
+  (result, locale) => ({
+    ...result,
+    [locale.language]: locale.embeddedLocale,
+  }),
+  {},
+);
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'ja',
+  country: 'jp',
+  name: '日本語',
+  embeddedLocale: login,
+};
@@ -0,0 +1,220 @@
+import dateFns from 'date-fns/locale/ko';
+
+/* Translated by Park Seok Ho */
+
+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: 'All',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        '모든 변경 사항은 연결이 복원된 후 자동으로 저장됩니다',
+      areYouSureYouWantToDeleteThisAttachment: '첨부 파일을 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisBoard: '보드를 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisCard: '항목카드를 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisComment: '댓글을 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisLabel: '라벨을 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisList: '리스트를 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisProject: '프로젝트를 삭제하시겠습니까?',
+      areYouSureYouWantToDeleteThisTask: '태스트를 삭제하겠습니까?',
+      areYouSureYouWantToDeleteThisUser: '이 유저를 삭제하겠습니까?',
+      areYouSureYouWantToLeaveBoard: '이 보드에서 나가시겠습니까?',
+      areYouSureYouWantToLeaveProject: '이 프로젝트에서 나가시겠습니까?',
+      areYouSureYouWantToRemoveThisManagerFromProject: '프로젝트에서 관리자를 제거하시겠습니까?',
+      areYouSureYouWantToRemoveThisMemberFromBoard: '이 회원을 보드에서 탈퇴시키겠습니까?',
+      attachment: '첨부파일',
+      attachments: '첨부파일',
+      authentication: '계정 관리',
+      background: 'Background',
+      board: '보드',
+      boardNotFound_title: '보드를 찾을 수 없습니다.',
+      cardActions_title: 'Card Actions',
+      cardNotFound_title: '항목카드를 찾을 수 없습니다.',
+      cardOrActionAreDeleted: '항목카드 혹은 활동내역이 삭제되었습니다.',
+      color: 'Color',
+      createBoard_title: '보드명칭을 입력하세요.',
+      createLabel_title: '라벨 생성',
+      createNewOneOrSelectExistingOne: '새 항목을 만들거나<br />기존 항목을 선택하세요.',
+      createProject_title: '프로젝트 생성',
+      createTextFile_title: 'Text File 생성',
+      currentPassword: '현재 비밀번호',
+      dangerZone_title: 'Danger Zone',
+      date: '날짜',
+      dueDate_title: '완료일',
+      deleteAttachment_title: '첨부파일 삭제',
+      deleteBoard_title: '보드 삭제',
+      deleteCard_title: '항목 카드 삭제',
+      deleteComment_title: '댓글 삭제',
+      deleteLabel_title: '라벨 삭제',
+      deleteList_title: '리스트 삭제',
+      deleteProject_title: '프로젝트 삭제',
+      deleteTask_title: '태스크 삭제',
+      deleteUser_title: '사용자 삭제',
+      description: '설명',
+      detectAutomatically: '자동으로 감지',
+      dropFileToUpload: '업로드 하기 위해서 파일을 Drop 하세요.',
+      editAttachment_title: '첨부 수정',
+      editAvatar_title: '프로필사진 수정',
+      editBoard_title: '보드 수정',
+      editDueDate_title: '완료일 수정',
+      editEmail_title: '메일 수정',
+      editInformation_title: '정보 수정',
+      editLabel_title: '라벨 수정',
+      editPassword_title: '비밀번호 수정',
+      editTimer_title: '타이머 수정',
+      editUsername_title: '사용자이름 수정',
+      email: '메일',
+      emailAlreadyInUse: '기 가입된 이메일이 존재합니다.',
+      enterCardTitle: '항목카드명을 입력하세요...',
+      enterDescription: '자세한 설명을 작성하세요...',
+      enterFilename: '파일이름을 입력하세요...',
+      enterListTitle: '리스트명을 입력 (예,todo,완료,이슈등...)',
+      enterProjectTitle: '프로젝트명칭을 입력하세요.',
+      enterTaskDescription: '태스크 설명을 입력하세요...',
+      filterByLabels_title: '라벨 검색',
+      filterByMembers_title: '회원으로 검색',
+      fromComputer_title: 'PC로 부터',
+      general: 'General',
+      hours: '시',
+      invalidCurrentPassword: '현재 패스워드는 유효하지 않습니다.',
+      labels: '라벨',
+      language: '언어 선택',
+      leaveBoard_title: '보드 탈퇴',
+      leaveProject_title: '프로젝트 탈퇴',
+      list: '내역',
+      listActions_title: '활용 내역',
+      managers: '관리자',
+      members: '팀원',
+      minutes: '분',
+      moveCard_title: '항목카드 이동',
+      name: '이름',
+      newEmail: '새로운 메일',
+      newPassword: '새로운 패스워드',
+      newUsername: '새로운 사용자 이름',
+      noConnectionToServer: '서버에 연결할수 없습니다.',
+      noBoards: '보드가 존재하지 않습니다.',
+      noLists: '리스트가 존재하지 않습니다.',
+      noProjects: '프로젝트가 존재하지 않습니다.',
+      notifications: '알림',
+      noUnreadNotifications: '알림을 모두 확인했습니다.',
+      openBoard_title: '보드열기',
+      optional_inline: '옵션',
+      organization: '조직',
+      phone: '전화번호',
+      preferences: '환경설정',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tip: 클립보드에서 첨부 파일을 추가하려면 Ctrl-V(Mac의 경우 Cmd-V) 입니다..',
+      project: '프로젝트',
+      projectNotFound_title: '프로젝트가 존재하지 않습니다.',
+      removeManager_title: '관리자 삭제',
+      removeMember_title: '맴버 삭제',
+      seconds: '초',
+      selectBoard: '보드 선택',
+      selectList: '리스트 선택',
+      selectProject: '프로젝트 선택',
+      settings: '설정',
+      subscribeToMyOwnCardsByDefault: '내 항목카드는 기본으로 구독',
+      taskActions_title: '태스크 활동',
+      tasks: '태스크',
+      thereIsNoPreviewAvailableForThisAttachment:
+        '이 첨부 파일에 사용할 수 있는 미리보기가 없습니다.',
+      time: '시간',
+      timer: '활동시간',
+      title: '제목',
+      userActions_title: '',
+      userAddedThisCardToList: '<0>{{user}}</0><1>이 카드를 {{list}}</1>에 추가했습니다.',
+      userLeftNewCommentToCard:
+        '{{user}}이(가) <2>{{card}}</2>에 «{{comment}}»라는 댓글을 남겼습니다',
+      userMovedCardFromListToList: '{{user}} moved <2>{{card}}</2> from {{fromList}} to {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> 이 항목카드를  {{fromList}} 에서 {{toList}} 으로 이동했습니다. </1>',
+      username: '아이디',
+      usernameAlreadyInUse: '이미 사용중인 사용자입니다.',
+      users: '사용자',
+      writeComment: '댓글 작성...',
+    },
+
+    action: {
+      addAnotherCard: '다른 항목카드 추가',
+      addAnotherList: '다른 리스트 추가',
+      addAnotherTask: '다른 TASK 추가',
+      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: '메일 수정',
+      editInformation_title: '정보 수정',
+      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}} hidden)',
+      showFewerAttachments: '일부 첨부파일만 표시',
+      start: '시작',
+      stop: '끝',
+      subscribe: '구독하기',
+      unsubscribe: '구독 취소',
+      uploadNewAvatar: '새로운 프로필 사진 업로드',
+      uploadNewImage: '새로운 이미지 업로드',
+    },
+  },
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'ko',
+  country: 'kr',
+  name: '한국어',
+  embeddedLocale: login,
+};
@@ -0,0 +1,22 @@
+/* Translated by Park Seok Ho */
+
+export default {
+  translation: {
+    common: {
+      emailOrUsername: '이메일 혹은 아이디',
+      invalidEmailOrUsername: '이메일이나 사용자 이름이 유효하지 않습니다.',
+      invalidPassword: '잘못된 비밀번호',
+      logInToPlanka: 'Planka에 로그인',
+      noInternetConnection: '인터넷에 연결되지 않음',
+      pageNotFound_title: '페이지를 찾을수 없습니다.',
+      password: '패스워드',
+      projectManagement: '프로젝트 관리',
+      serverConnectionFailed: '서버 연결 실패',
+      unknownError: '알 수 없는 오류가 발생하였습니다, 나중에 다시 시도하세요.',
+    },
+
+    action: {
+      logIn: '로그인',
+    },
+  },
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'pl',
+  country: 'pl',
+  name: 'Polski',
+  embeddedLocale: login,
+};
@@ -62,6 +62,7 @@ export default {
      deleteTask: 'Удаление задачи',
      deleteUser: 'Удаление пользователя',
      description: 'Описание',
+      detectAutomatically: 'Определить автоматически',
      dropFileToUpload: 'Перетяните файл, чтобы загрузить',
      editAttachment: 'Изменение вложения',
      editAvatar: 'Изменение аватара',
@@ -88,6 +89,7 @@ export default {
      hours: 'Часы',
      invalidCurrentPassword: 'Неверный текущий пароль',
      labels: 'Метки',
+      language: 'Язык',
      list: 'Список',
      listActions: 'Действия со списком',
      members: 'Участники',
@@ -122,6 +124,7 @@ export default {
      subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
      taskActions: 'Действия с задачей',
      tasks: 'Задачи',
+      thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
      time: 'Время',
      timer: 'Таймер',
      title: 'Название',
@@ -175,7 +178,8 @@ export default {
      editTask: 'Изменить задачу',
      editTimer: 'Изменить таймер',
      editTitle: 'Изменить название',
-      editUsername_title: 'Изменить имя пользователя',
+      editUsername: 'Изменить имя пользователя',
+      hideDetails: 'Скрыть подробности',
      logOut: 'Выйти',
      makeCover: 'Сделать обложкой',
      move: 'Переместить',
@@ -187,6 +191,7 @@ export default {
      removeMember: 'Удалить участника',
      save: 'Сохранить',
      showAllAttachments: 'Показать все вложения ({{hidden}} скрыто)',
+      showDetails: 'Показать подробности',
      showFewerAttachments: 'Показать меньше вложений',
      start: 'Начать',
      stop: 'Остановить',
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'ru',
+  country: 'ru',
+  name: 'Русский',
+  embeddedLocale: login,
+};
@@ -0,0 +1,215 @@
+import dateFns from 'date-fns/locale/sk';
+
+export default {
+  dateFns,
+
+  format: {
+    date: 'd.M.yyyy',
+    time: 'p',
+    dateTime: '$t(format:date) $t(format:time)',
+    longDate: 'd MMM',
+    longDateTime: "d MMMM 'v' p",
+  },
+
+  translation: {
+    common: {
+      account: 'Účet',
+      actions: 'Akcia',
+      addAttachment_title: 'Pridať prílohu',
+      addComment: 'Pridať komentár',
+      addManager_title: 'Pridať správcu',
+      addMember_title: 'Pridať člena',
+      addUser_title: 'Pridať používateľa',
+      administrator: 'Administrátor',
+      all: 'Všetko',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        'Všetky zmeny budú automaticky uložené<br />po obnovení spojenia',
+      areYouSureYouWantToDeleteThisAttachment: 'Naozaj chcete zmazať túto prílohu?',
+      areYouSureYouWantToDeleteThisBoard: 'Naozaj chcete zmazať túto tabuľu?',
+      areYouSureYouWantToDeleteThisCard: 'Naozaj chcete zmazať túto kartu?',
+      areYouSureYouWantToDeleteThisComment: 'Naozaj chcete zmazať tento komentár?',
+      areYouSureYouWantToDeleteThisLabel: 'Naozaj chcete zmazať tento štítok?',
+      areYouSureYouWantToDeleteThisList: 'Naozaj chcete zmazať tento zoznam?',
+      areYouSureYouWantToDeleteThisProject: 'Naozaj chcete zmazať tento projekt?',
+      areYouSureYouWantToDeleteThisTask: 'Naozaj chcete zmazať túto úlohu?',
+      areYouSureYouWantToDeleteThisUser: 'Naozaj chcete zmazať tohoto používateľa?',
+      areYouSureYouWantToLeaveBoard: 'Naozaj chcete opustiť túto tabuľu?',
+      areYouSureYouWantToLeaveProject: 'Naozaj chcete opustiť tento projekt?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Naozaj chcete zmazať daného správcu tohto projektu?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Naozaj chcete odstrániť tohoto člena z tabule?',
+      attachment: 'Príloha',
+      attachments: 'Prílohy',
+      authentication: 'Overenie',
+      background: 'Pozadie',
+      board: 'Tabuľa',
+      boardNotFound_title: 'Tabuľa neexistuje',
+      cardActions_title: 'Akcie na karte',
+      cardNotFound_title: 'Karta neexistuje',
+      cardOrActionAreDeleted: 'Karta alebo akcia sú zmazané',
+      color: 'Farba',
+      createBoard_title: 'Vytvoriť tabuľu',
+      createLabel_title: 'Vytvoriť štítok',
+      createNewOneOrSelectExistingOne: 'Vytvoriť nový alebo vyberte<br />už existujúci',
+      createProject_title: 'Vytvoriť projekt',
+      createTextFile_title: 'Vytvoriť textový súbor',
+      currentPassword: 'Aktuálne heslo',
+      dangerZone_title: 'Nebezpečná zóna',
+      date: 'Dátum',
+      dueDate_title: 'Termín do',
+      deleteAttachment_title: 'Zmazať prílohu',
+      deleteBoard_title: 'Zmazať tabuľu',
+      deleteCard_title: 'Zmazať kartu',
+      deleteComment_title: 'Zmazať komentár',
+      deleteLabel_title: 'Zmazať štítok',
+      deleteList_title: 'Zmazať zoznam',
+      deleteProject_title: 'Zmazať projekt',
+      deleteTask_title: 'Zmazať úlohu',
+      deleteUser_title: 'Zmazať používateľa',
+      description: 'Popis',
+      dropFileToUpload: 'Potiahnutím nahraj súbor',
+      editAttachment_title: 'Upraviť prílohu',
+      editAvatar_title: 'Upraviť avatar',
+      editBoard_title: 'Upraviť tabuľu',
+      editDueDate_title: 'Upraviť Termín do',
+      editEmail_title: 'Upraviť e-mail',
+      editInformation_title: 'Upraviť informácie',
+      editLabel_title: 'Upraviť štítok',
+      editPassword_title: 'Upraviť heslo',
+      editTimer_title: 'Upraviť časovač',
+      editUsername_title: 'Upraviť používateľské meno',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail je už použitý',
+      enterCardTitle: 'Vlož názov karty...',
+      enterDescription: 'Vlož popis...',
+      enterFilename: 'Vlož názov súboru',
+      enterListTitle: 'Vlož názov zoznamu...',
+      enterProjectTitle: 'Vlož názov projektu',
+      enterTaskDescription: 'Vlož popis úlohy...',
+      filterByLabels_title: 'Filtruj podľa štítku',
+      filterByMembers_title: 'Filtruj podľa člena',
+      fromComputer_title: 'Z počítača',
+      general: 'Všeobecné',
+      hours: 'Hodiny',
+      invalidCurrentPassword: 'Neplatné aktuálne heslo',
+      labels: 'Štítky',
+      leaveBoard_title: 'Opustiť tabuľu',
+      leaveProject_title: 'Opustiť projekt',
+      list: 'Zoznam',
+      listActions_title: 'Zoznam akcií',
+      managers: 'Správcovia',
+      members: 'Členovia',
+      minutes: 'Minúty',
+      moveCard_title: 'Presunúť kartu',
+      name: 'Meno',
+      newEmail: 'Nový e-mail',
+      newPassword: 'Nové heslo',
+      newUsername: 'Nové používateľské meno',
+      noConnectionToServer: 'Nie je spojenie k serveru',
+      noBoards: 'Žiadne tabule',
+      noLists: 'Žiadne zoznamy',
+      noProjects: 'Žiadne projekty',
+      notifications: 'Oznámenia',
+      noUnreadNotifications: 'Žiadne neprečítané oznámenia',
+      openBoard_title: 'Otvoriť tabuľu',
+      optional_inline: 'voliteľné',
+      organization: 'Spoločnosť',
+      phone: 'Telefón',
+      preferences: 'Voľby',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tip: stlačte Ctrl-V (Cmd-V na Mac) pre vloženie prílohy zo schránky.',
+      project: 'Projekt',
+      projectNotFound_title: 'Projekt neexistuje',
+      removeManager_title: 'Odstrániť správcu',
+      removeMember_title: 'Odstrániť člena',
+      seconds: 'Sekúnd',
+      selectBoard: 'Vybrať tabuľu',
+      selectList: 'Vybrať zoznam',
+      selectProject: 'Vybrať projekt',
+      settings: 'Nastavenia',
+      subscribeToMyOwnCardsByDefault: 'Predvolene odoberať vlastné karty',
+      taskActions_title: 'Akcie na úlohe',
+      tasks: 'Úlohy',
+      time: 'Čas',
+      timer: 'Časovač',
+      title: 'Názov',
+      userActions_title: 'Akcie na používateľovi',
+      userAddedThisCardToList: '<0>{{user}}</0><1> pridal kartu do {{list}}</1>',
+      userLeftNewCommentToCard: '{{user}} zanechal nový komentár «{{comment}}» k <2>{{card}}</2>',
+      userMovedCardFromListToList: '{{user}} presunul <2>{{card}}</2> z {{fromList}} do {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> presunul túto kartu z {{fromList}} do {{toList}}</1>',
+      username: 'Používateľské meno',
+      usernameAlreadyInUse: 'Používateľské meno je zabrané',
+      users: 'Používatelia',
+      writeComment: 'Napísať komentár...',
+    },
+
+    action: {
+      addAnotherCard: 'Pridať ďalšiu kartu',
+      addAnotherList: 'Pridať ďalší zoznam',
+      addAnotherTask: 'Pridať ďalšiu úlohu',
+      addCard: 'Pridať kartu',
+      addCard_title: 'Pridať kartu',
+      addComment: 'Pridať komentár',
+      addList: 'Pridať zoznam',
+      addMoreDetailedDescription: 'Pridať ďalší detailný popis',
+      addTask: 'Pridať úlohu',
+      addToCard: 'Pridať na kartu',
+      addUser: 'Pridať používateľa',
+      createBoard: 'Vytvoriť tabuľu',
+      createFile: 'Vytvoriť súbor',
+      createLabel: 'Vytvoriť štítok',
+      createNewLabel: 'Vytvoriť nový štítok',
+      createProject: 'Vytvoriť projekt',
+      delete: 'Zmazať',
+      deleteAttachment: 'Zmazať prílohu',
+      deleteAvatar: 'Zmazať avatar',
+      deleteBoard: 'Zmazať tabuľu',
+      deleteCard: 'Zmazať kartu',
+      deleteCard_title: 'Zmazať kartu',
+      deleteComment: 'Zmazať komentár',
+      deleteImage: 'Zmazať obrázok',
+      deleteLabel: 'Zmazať štítok',
+      deleteList: 'Zmazať zoznam',
+      deleteList_title: 'Zmazať zoznam',
+      deleteProject: 'Zmazať projekt',
+      deleteProject_title: 'Zmazať projekt',
+      deleteTask: 'Zmazať úlohu',
+      deleteTask_title: 'Zmazať úlohu',
+      deleteUser: 'Zmazať používateľa',
+      edit: 'Upraviť',
+      editDueDate_title: 'Upraviť termín do',
+      editDescription_title: 'Upraviť popis',
+      editEmail_title: 'Upraviť e-mail',
+      editInformation_title: 'Upraviť informácie',
+      editPassword_title: 'Upraviť heslo',
+      editTimer_title: 'Upraviť časovač',
+      editTitle_title: 'Upraviť názov',
+      editUsername_title: 'Upraviť používateľské meno',
+      leaveBoard: 'Opustiť tabuľu',
+      leaveProject: 'Opustiť projekt',
+      logOut_title: 'Odhlásiť sa',
+      makeCover_title: 'Vytvoriť obal',
+      move: 'Presunúť',
+      moveCard_title: 'Presunúť kartu',
+      remove: 'Odstrániť',
+      removeBackground: 'Odstrániť pozadie',
+      removeCover_title: 'Odstrániť obal',
+      removeFromBoard: 'Odstrániť z tabule',
+      removeFromProject: 'Odstrániť z projektu',
+      removeManager: 'Odstrániť správcu',
+      removeMember: 'Odstrániť člena',
+      save: 'Uložiť',
+      showAllAttachments: 'Zozbraziť všetky prílohy ({{hidden}} skryté)',
+      showFewerAttachments: 'Zobraziť menej príloh',
+      start: 'Start',
+      stop: 'Stop',
+      subscribe: 'Odoberať',
+      unsubscribe: 'Neodoberať',
+      uploadNewAvatar: 'Nahrať nový avatar',
+      uploadNewImage: 'Nahrať nový obrázok',
+    },
+  },
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'sk',
+  country: 'sk',
+  name: 'Slovenčina',
+  embeddedLocale: login,
+};
@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'E-mail alebo používateľské meno',
+      invalidEmailOrUsername: 'Nesprávny e-mail alebo používateľské meno',
+      invalidPassword: 'Nesprávne heslo',
+      logInToPlanka: 'Prihlásiť sa do Planka',
+      noInternetConnection: 'Bez pripojenia k internetu',
+      pageNotFound_title: 'Stránka neexistuje',
+      password: 'Heslo',
+      projectManagement: 'Správa projektu',
+      serverConnectionFailed: 'Pripojenie k serveru zlyhalo',
+      unknownError: 'Neznáma chyba, skúste to neskôr',
+    },
+
+    action: {
+      logIn: 'Prihlásiť sa',
+    },
+  },
+};
@@ -0,0 +1,216 @@
+import dateFns from 'date-fns/locale/sv';
+
+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: 'Åtgärder',
+      addAttachment_title: 'Bifoga',
+      addComment: 'Kommentera',
+      addManager_title: 'Lägg till Projektledare',
+      addMember_title: 'Lägg till Medlem',
+      addUser_title: 'Lägg till Användare',
+      administrator: 'Administratör',
+      all: 'Alla',
+      allChangesWillBeAutomaticallySavedAfterConnectionRestored:
+        'Alla ändringar kommer att sparas automatiskt<br />så fort anslutningen är återställd',
+      areYouSureYouWantToDeleteThisAttachment:
+        'Är du säker på att du vill ta bort den här bilagan?',
+      areYouSureYouWantToDeleteThisBoard: 'Är du säker på att du vill ta bort den här tavlan?',
+      areYouSureYouWantToDeleteThisCard: 'Är du säker på att du vill ta bort det här kortet?',
+      areYouSureYouWantToDeleteThisComment:
+        'Är du säker på att du vill ta bort den här kommentaren?',
+      areYouSureYouWantToDeleteThisLabel: 'Är du säker på att du vill ta bort den här etiketten?',
+      areYouSureYouWantToDeleteThisList: 'Är du säker på att du vill ta bort den här listan?',
+      areYouSureYouWantToDeleteThisProject: 'Är du säker på att du vill ta bort det här projektet?',
+      areYouSureYouWantToDeleteThisTask: 'Är du säker på att du vill ta bort den här uppgiften?',
+      areYouSureYouWantToDeleteThisUser: 'Är du säker på att du vill ta bort den här användaren?',
+      areYouSureYouWantToLeaveBoard: 'Är du säker på att du vill lämna tavlan?',
+      areYouSureYouWantToLeaveProject: 'Är du säker på att du vill lämna projektet?',
+      areYouSureYouWantToRemoveThisManagerFromProject:
+        'Är du säker på att du vill ta bort den här projektledaren från projektet?',
+      areYouSureYouWantToRemoveThisMemberFromBoard:
+        'Är du säker på att du vill ta bort den här medlemmen från tavlan?',
+      attachment: 'Bilaga',
+      attachments: 'Bilagor',
+      authentication: 'Autentisering',
+      background: 'Bakgrund',
+      board: 'Tavla',
+      boardNotFound_title: 'Tavla Ej Funnen',
+      cardActions_title: 'Kortåtgärder',
+      cardNotFound_title: 'Kort Ej Funnet',
+      cardOrActionAreDeleted: 'Kort eller åtgärd är borttagen',
+      color: 'Färg',
+      createBoard_title: 'Skapa Tavla',
+      createLabel_title: 'Skapa Etikett',
+      createNewOneOrSelectExistingOne: 'Skapa en ny eller välj<br />en redan existerande',
+      createProject_title: 'Skapa Projekt',
+      createTextFile_title: 'Skapa Textfil',
+      currentPassword: 'Nuvarande lösenord',
+      dangerZone_title: 'Farozon',
+      date: 'Datum',
+      dueDate_title: 'Förfallodatum',
+      deleteAttachment_title: 'Ta Bort Bilaga',
+      deleteBoard_title: 'Ta Bort Tavla',
+      deleteCard_title: 'Ta Bort Kort',
+      deleteComment_title: 'Ta Bort Kommentar',
+      deleteLabel_title: 'Ta Bort Etikett',
+      deleteList_title: 'Ta Bort Lista',
+      deleteProject_title: 'Ta Bort Projekt',
+      deleteTask_title: 'Ta Bort Uppgift',
+      deleteUser_title: 'Ta Bort Användare',
+      description: 'Beskrivning',
+      dropFileToUpload: 'Släpp en fil för att ladda upp',
+      editAttachment_title: 'Redigera Bilaga',
+      editAvatar_title: 'Redigera Avatar',
+      editBoard_title: 'Redigera Tavla',
+      editDueDate_title: 'Redigera Förfallodatum',
+      editEmail_title: 'Redigera E-mail',
+      editLabel_title: 'Redigera Etikett',
+      editPassword_title: 'Redigera Lösenord',
+      editTimer_title: 'Redigera Timer',
+      editUsername_title: 'Redigera Användarnamn',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail används redan',
+      enterCardTitle: 'Ange kortets titel...',
+      enterDescription: 'Ange beskrivning...',
+      enterFilename: 'Ange filnamn',
+      enterListTitle: 'Ange listans titel...',
+      enterProjectTitle: 'Ange projektets titel',
+      enterTaskDescription: 'Ange uppgiftsbeskrivning...',
+      filterByLabels_title: 'Filtrera Efter Etiketter',
+      filterByMembers_title: 'Filtrera Efter Medlemmar',
+      fromComputer_title: 'Från dator',
+      general: 'Allmänt',
+      hours: 'Timmar',
+      invalidCurrentPassword: 'Ogiltigt nuvarande lösenord',
+      labels: 'Etiketter',
+      leaveBoard_title: 'Lämna Tavla',
+      leaveProject_title: 'Lämna Projekt',
+      list: 'Lista',
+      listActions_title: 'Liståtgärder',
+      managers: 'Projektledare',
+      members: 'Medlemmar',
+      minutes: 'Minuter',
+      moveCard_title: 'Flytta Kort',
+      name: 'Namn',
+      newEmail: 'Ny e-mail',
+      newPassword: 'Nytt lösenord',
+      newUsername: 'Nytt användarnamn',
+      noConnectionToServer: 'Ingen anslutning till servern',
+      noBoards: 'Inga tavlor',
+      noLists: 'Inga listor',
+      noProjects: 'Inga projekt',
+      notifications: 'Notifikationer',
+      noUnreadNotifications: 'Inga olästa notifikationer',
+      openBoard_title: 'Öppna Tavla',
+      optional_inline: 'valfri',
+      organization: 'Organisation',
+      phone: 'Telefon',
+      preferences: 'Preferenser',
+      pressPasteShortcutToAddAttachmentFromClipboard:
+        'Tips: tryck på Ctrl-V (Cmd-V på Mac) för att lägga till en bilaga från urklipp.',
+      project: 'Projekt',
+      projectNotFound_title: 'Projekt Ej Funnet',
+      removeManager_title: 'Ta Bort Projektledare',
+      removeMember_title: 'Ta Bort Medlem',
+      seconds: 'Sekunder',
+      selectBoard: 'Välj tavla',
+      selectList: 'Välj lista',
+      selectProject: 'Välj projekt',
+      settings: 'Inställningar',
+      subscribeToMyOwnCardsByDefault: 'Prenumerera på mina egna kort som standard',
+      taskActions_title: 'Uppgiftsåtgärder',
+      tasks: 'Uppgifter',
+      time: 'Tid',
+      timer: 'Timer',
+      title: 'Titel',
+      userActions_title: 'Användaråtgärder',
+      userAddedThisCardToList: '<0>{{user}}</0><1> lade till detta kort i {{list}}</1>',
+      userLeftNewCommentToCard: '{{user}} lämnade en ny kommentar «{{comment}}» på <2>{{card}}</2>',
+      userMovedCardFromListToList:
+        '{{user}} flyttade <2>{{card}}</2> från {{fromList}} till {{toList}}',
+      userMovedThisCardFromListToList:
+        '<0>{{user}}</0><1> flyttade detta kort från {{fromList}} till {{toList}}</1>',
+      username: 'Användarnamn',
+      usernameAlreadyInUse: 'Användarnamnet används redan',
+      users: 'Användare',
+      writeComment: 'Skriv en kommentar...',
+    },
+
+    action: {
+      addAnotherCard: 'Lägg till ytterligare ett kort',
+      addAnotherList: 'Lägg till ytterligare en lista',
+      addAnotherTask: 'Lägg till ytterligare en uppgift',
+      addCard: 'Lägg till kort',
+      addCard_title: 'Lägg Till Kort',
+      addComment: 'Lägg till kommentar',
+      addList: 'Lägg till lista',
+      addMoreDetailedDescription: 'Lägg till en mer detaljerad beskrivning',
+      addTask: 'Lägg till uppgift',
+      addToCard: 'Lägg till i kort',
+      addUser: 'Lägg till användare',
+      createBoard: 'Skapa tavla',
+      createFile: 'Skapa fil',
+      createLabel: 'Skapa etikett',
+      createNewLabel: 'Skapa ny etikett',
+      createProject: 'Skapa projekt',
+      delete: 'Ta Bort',
+      deleteAttachment: 'Ta bort bilaga',
+      deleteAvatar: 'Ta bort avatar',
+      deleteBoard: 'Ta bort tavla',
+      deleteCard: 'Ta bort kort',
+      deleteCard_title: 'Ta Bort Kort',
+      deleteComment: 'Ta bort kommentar',
+      deleteImage: 'Ta bort bild',
+      deleteLabel: 'Ta bort etikett',
+      deleteList: 'Ta bort lista',
+      deleteList_title: 'Ta Bort Lista',
+      deleteProject: 'Ta bort projekt',
+      deleteProject_title: 'Ta Bort Projekt',
+      deleteTask: 'Ta bort uppgift',
+      deleteTask_title: 'Ta Bort Uppgift',
+      deleteUser: 'Ta bort användare',
+      edit: 'Redigera',
+      editDueDate_title: 'Redigera Förfallodatum',
+      editDescription_title: 'Redigera Beskrivning',
+      editEmail_title: 'Redigera E-mail',
+      editPassword_title: 'Redigera Lösenord',
+      editTimer_title: 'Redigera Timer',
+      editTitle_title: 'Redigera Titel',
+      editUsername_title: 'Redigera Användarnamn',
+      leaveBoard: 'Lämna tavla',
+      leaveProject: 'Lämna projekt',
+      logOut_title: 'Logga ut',
+      makeCover_title: 'Skapa Omslagsbild',
+      move: 'Flytta',
+      moveCard_title: 'Flytta Kort',
+      remove: 'Ta Bort',
+      removeBackground: 'Ta bort bakgrund',
+      removeCover_title: 'Ta Bort Omslagsbild',
+      removeFromBoard: 'Ta bort from tavla',
+      removeFromProject: 'Ta bort from projekt',
+      removeManager: 'Ta bort projektledare',
+      removeMember: 'Ta bort medlem',
+      save: 'Spara',
+      showAllAttachments: 'Visa alla bilagor ({{hidden}} dolda)',
+      showFewerAttachments: 'Visa färre bilagor',
+      start: 'Starta',
+      stop: 'Stoppa',
+      subscribe: 'Prenumerera',
+      unsubscribe: 'Avprenumerera',
+      uploadNewAvatar: 'Ladda upp ny avatar',
+      uploadNewImage: 'Ladda upp ny bild',
+    },
+  },
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'sv',
+  country: 'se',
+  name: 'Svenska',
+  embeddedLocale: login,
+};
@@ -0,0 +1,20 @@
+export default {
+  translation: {
+    common: {
+      emailOrUsername: 'E-mail eller användarnamn',
+      invalidEmailOrUsername: 'Ogiltig e-mail eller användarnamn',
+      invalidPassword: 'Ogiltigt lösenord',
+      logInToPlanka: 'Logga in på Planka',
+      noInternetConnection: 'Ingen internetanslutning',
+      pageNotFound_title: 'Sidan Kunde Inte Hittas',
+      password: 'Lösenord',
+      projectManagement: 'Projektledning',
+      serverConnectionFailed: 'Server connection failed',
+      unknownError: 'Okänt fel, försök igen senare',
+    },
+
+    action: {
+      logIn: 'Logga in',
+    },
+  },
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'uz',
+  country: 'uz',
+  name: "O'zbek",
+  embeddedLocale: login,
+};
@@ -0,0 +1,8 @@
+import login from './login';
+
+export default {
+  language: 'zh',
+  country: 'cn',
+  name: '中文',
+  embeddedLocale: login,
+};
@@ -50,6 +50,7 @@ export default class extends Model {

        break;
      case ActionTypes.ACTIONS_FETCH__SUCCESS:
+      case ActionTypes.ACTIONS_DETAILS_TOGGLE__SUCCESS:
      case ActionTypes.NOTIFICATION_CREATE_HANDLE:
        payload.actions.forEach((action) => {
          Action.upsert(action);
@@ -9,6 +9,7 @@ export default class extends Model {
    id: attr(),
    url: attr(),
    coverUrl: attr(),
+    image: attr(),
    name: attr(),
    cardId: fk({
      to: 'Card',
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Maksim Eltyshev	ac1df5201d	fix: Fix path traversal vulnerability	2022-08-04 00:37:30 +02:00
Maksim Eltyshev	fbe24c0fc0	chore: Update version	2022-08-03 13:28:41 +02:00
Maksim Eltyshev	79daed6afa	docs: Add security policy Closes #276	2022-08-03 16:15:40 +05:00
Maksim Eltyshev	a9111bf7ba	feat: Add Korean translation. Thanks to @chooya	2022-08-03 12:21:01 +02:00
Maksim Eltyshev	2d50211892	fix: Fix label style	2022-08-01 00:18:22 +02:00
Maksim Eltyshev	139971eca9	chore: Update version	2022-07-29 17:50:11 +02:00
Maksim Eltyshev	34db8947b6	feat: Toggle actions details, little redesign	2022-07-29 17:40:18 +02:00
Maksim Eltyshev	82e4f73c1f	ref: Fix variable names	2022-07-29 17:11:38 +02:00
Maksim Eltyshev	560bddbe18	fix: Fix styles	2022-07-26 13:53:30 +02:00
Maksim Eltyshev	9c192f4b5c	fix: Fix select behaviour	2022-07-26 12:49:40 +02:00
Maksim Eltyshev	a148a3aae5	feat: Add language selector Closes #212	2022-07-26 12:26:42 +02:00
Maksim Eltyshev	7c1b885d2a	chore: Update version	2022-07-24 17:17:59 +02:00
Maksim Eltyshev	a3f33d0361	fix: Fix core locale loading	2022-07-24 17:13:28 +02:00
Maksim Eltyshev	fe62180cda	chore: Update dependencies	2022-07-24 17:04:26 +02:00
Maksim Eltyshev	58abd0691f	chore: Update version	2022-07-21 11:42:56 +02:00
Maksim Eltyshev	ad67b9ba24	feat: Add tasks reordering Closes #50, closes #232	2022-07-21 11:31:05 +02:00
Maksim Eltyshev	ddf9a32ea9	chore: Update version	2022-06-24 17:20:44 +02:00
Maksim Eltyshev	e01a2eafba	fix: Fix crash when uploading attachment	2022-06-24 17:17:42 +02:00
Maksim Eltyshev	3b3bff1b6b	fix: Allow to use endpoints via http	2022-06-24 11:59:04 +02:00
Maksim Eltyshev	ecc45c7a9e	chore: Update version	2022-06-22 18:19:34 +02:00
Maksim Eltyshev	3497e09703	feat: Add pdf viewer to attachments gallery	2022-06-22 17:01:35 +02:00
Maksim Eltyshev	dfc52191fc	chore: Update version	2022-06-22 09:09:44 +02:00
Maksim Eltyshev	6268ced4cb	ref: Collapse image data into one column	2022-06-21 12:01:41 +02:00
Maksim Eltyshev	e7495e0067	fix: Fix routes again	2022-06-20 18:48:13 +02:00
Maksim Eltyshev	b8c065e0c8	fix: Fix routes	2022-06-20 18:46:03 +02:00
Maksim Eltyshev	86e4864d1b	feat: Add gallery for attachments	2022-06-20 18:27:39 +02:00
Maksim Eltyshev	0be598ca9e	chore: Update version	2022-06-17 18:17:08 +02:00
Dominik Dancs	ba850801c5	feat: Add Slovak translation (#265 )	2022-06-17 20:16:15 +05:00
Maksim Eltyshev	c9b23652d1	feat: Add ability to edit users Closes #60	2022-06-15 14:13:22 +02:00
Maksim Eltyshev	8490629e4c	fix: Fix password edit popup styles	2022-06-13 17:33:26 +02:00
ejo090	76fcd79203	fix: Fix markdown line breaks Closes #257	2022-06-06 17:37:43 +05:00
Maksim Eltyshev	3ce1bc0419	fix: Fix dependencies installation	2022-05-21 23:52:12 +05:00
Maksim Eltyshev	540fbfceb5	chore: Update version	2022-05-21 21:49:36 +05:00
Maksim Eltyshev	48a56648e2	chore: Update version	2022-05-21 21:30:38 +05:00
Maksim Eltyshev	6d002c311c	fix: Fix Swedish language code	2022-05-21 21:29:33 +05:00
Maksim Eltyshev	ede707ed24	fix: Fix dependencies installation for multi-arch images	2022-05-21 21:01:43 +05:00
André Wahlberg	81052e1ce6	feat: Add Swedish translation (#246 )	2022-05-21 20:39:17 +05:00
Maksim Eltyshev	315a9a4c3d	ci: Fix build-args input name	2022-05-05 02:46:30 +05:00
Maksim Eltyshev	8112bcbb84	ci: Fix build_args	2022-05-05 00:34:26 +05:00
Maksim Eltyshev	fc69b7d6f4	ci: Add manual trigger to build-and-push-docker-base-image action	2022-05-05 00:18:00 +05:00
Aliaksandr Shulyak	027e911907	Improvements for docker build process (#237 )	2022-05-05 00:04:19 +05:00
Maksim Eltyshev	afc2a4628d	chore: Update version	2022-04-30 20:34:56 +05:00
Maksim Eltyshev	b0b6587eee	fix: Fix attachment headers Closes #231	2022-04-29 17:21:39 +05:00
Aliaksandr Shulyak	e29c9e6dda	ci: GitHub actions config for docker builds (#221 )	2022-04-29 17:15:59 +05:00