feat: Add pdf viewer to attachments gallery

chore: Update version
ref: Collapse image data into one column
2022-06-22 17:01:35 +02:00 · 2022-06-22 09:09:44 +02:00 · 2022-06-21 12:01:41 +02:00 · 2022-06-20 18:48:13 +02:00 · 2022-06-20 18:46:03 +02:00 · 2022-06-20 18:27:39 +02:00
70 changed files with 1844 additions and 382 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}
@@ -17,6 +17,7 @@
        "js-cookie": "^3.0.1",
        "lodash": "^4.17.20",
        "node-sass": "^7.0.1",
+        "photoswipe": "^5.2.7",
        "prop-types": "^15.8.1",
        "react": "^17.0.2",
        "react-beautiful-dnd": "^13.0.0",
@@ -26,6 +27,7 @@
        "react-i18next": "^11.16.6",
        "react-input-mask": "^2.0.4",
        "react-markdown": "^8.0.2",
+        "react-photoswipe-gallery": "^2.2.1",
        "react-redux": "^7.2.8",
        "react-router-dom": "^5.3.1",
        "react-scripts": "5.0.1",
@@ -34,6 +36,7 @@
        "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",
        "sails.io.js": "^1.2.1",
@@ -16223,6 +16226,14 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "node_modules/photoswipe": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
+      "integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg==",
+      "engines": {
+        "node": ">= 0.12.0"
+      }
+    },
    "node_modules/picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -18229,6 +18240,16 @@
        "react-dom": "^15.5.x || ^16.x || ^17.x"
      }
    },
+    "node_modules/react-photoswipe-gallery": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
+      "integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
+      "peerDependencies": {
+        "photoswipe": ">= 5.2.2",
+        "prop-types": ">= 15.7.0",
+        "react": ">= 16.8.0"
+      }
+    },
    "node_modules/react-popper": {
      "version": "2.2.5",
      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
@@ -18824,6 +18845,20 @@
        "node": ">= 0.10"
      }
    },
+    "node_modules/remark-breaks": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-3.0.2.tgz",
+      "integrity": "sha512-x96YDJ9X+Ry0/JNZFKfr1hpcAKvGYWfUTszxY9RbxKEqq6uzPPoLCuHdZsLPZZUdAv3nCROyc7FPrQLWr2rxyw==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-gfm": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
@@ -34995,6 +35030,11 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "photoswipe": {
+      "version": "5.2.7",
+      "resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.2.7.tgz",
+      "integrity": "sha512-AogMba7W/O5gOtDIZ8cQuou1ltwxlaLNoZY1qi1s+kbYXpZk9D6rXxnNGAfDppl+bfe+sKLW2w2sx+3uQ8oPzg=="
+    },
    "picocolors": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -36304,6 +36344,12 @@
      "integrity": "sha512-a5Q7CkWznBRUWPmocCvE8b6lEYw1s6+opp/60dCunhO+G6E4tDTO2Sd2jKE+leEnnrLAE2Wj5DlDHNqj5wPv1Q==",
      "requires": {}
    },
+    "react-photoswipe-gallery": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/react-photoswipe-gallery/-/react-photoswipe-gallery-2.2.1.tgz",
+      "integrity": "sha512-xaUKKmwRLCpEzB8+bU7yxjXvRBHaInpBcI6YQY0UOeFctHAL3jGRDk9j2YbwmlgN7kRStHTcyrSNxr+zSaOnKg==",
+      "requires": {}
+    },
    "react-popper": {
      "version": "2.2.5",
      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
@@ -36761,6 +36807,16 @@
      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
    },
+    "remark-breaks": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/remark-breaks/-/remark-breaks-3.0.2.tgz",
+      "integrity": "sha512-x96YDJ9X+Ry0/JNZFKfr1hpcAKvGYWfUTszxY9RbxKEqq6uzPPoLCuHdZsLPZZUdAv3nCROyc7FPrQLWr2rxyw==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
    "remark-gfm": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-3.0.1.tgz",
@@ -74,6 +74,7 @@
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.20",
    "node-sass": "^7.0.1",
+    "photoswipe": "^5.2.7",
    "prop-types": "^15.8.1",
    "react": "^17.0.2",
    "react-beautiful-dnd": "^13.0.0",
@@ -83,6 +84,7 @@
    "react-i18next": "^11.16.6",
    "react-input-mask": "^2.0.4",
    "react-markdown": "^8.0.2",
+    "react-photoswipe-gallery": "^2.2.1",
    "react-redux": "^7.2.8",
    "react-router-dom": "^5.3.1",
    "react-scripts": "5.0.1",
@@ -91,6 +93,7 @@
    "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",
    "sails.io.js": "^1.2.1",
@@ -41,6 +41,14 @@ export const handleUserUpdate = (user) => ({
  },
 });

+export const updateUserEmail = (id, data) => ({
+  type: EntryActionTypes.USER_EMAIL_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserEmail = (data) => ({
  type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE,
  payload: {
@@ -48,11 +56,26 @@ export const updateCurrentUserEmail = (data) => ({
  },
 });

+export const clearUserEmailUpdateError = (id) => ({
+  type: EntryActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserEmailUpdateError = () => ({
  type: EntryActionTypes.CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR,
  payload: {},
 });

+export const updateUserPassword = (id, data) => ({
+  type: EntryActionTypes.USER_PASSWORD_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserPassword = (data) => ({
  type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE,
  payload: {
@@ -60,11 +83,26 @@ export const updateCurrentUserPassword = (data) => ({
  },
 });

+export const clearUserPasswordUpdateError = (id) => ({
+  type: EntryActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserPasswordUpdateError = () => ({
  type: EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR,
  payload: {},
 });

+export const updateUserUsername = (id, data) => ({
+  type: EntryActionTypes.USER_USERNAME_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 export const updateCurrentUserUsername = (data) => ({
  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE,
  payload: {
@@ -72,6 +110,13 @@ export const updateCurrentUserUsername = (data) => ({
  },
 });

+export const clearUserUsernameUpdateError = (id) => ({
+  type: EntryActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const clearCurrentUserUsernameUpdateError = () => ({
  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR,
  payload: {},
@@ -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.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;
@@ -15,4 +37,4 @@
      color: #092d42;
    }
  }
-}
+}
@@ -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';
@@ -73,6 +73,8 @@ const CardModal = React.memo(
  }) => {
    const [t] = useTranslation();

+    const isGalleryOpened = useRef(false);
+
    const handleNameUpdate = useCallback(
      (newName) => {
        onUpdate({
@@ -124,6 +126,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);

@@ -328,6 +346,8 @@ const CardModal = React.memo(
                    onUpdate={onAttachmentUpdate}
                    onDelete={onAttachmentDelete}
                    onCoverUpdate={handleCoverUpdate}
+                    onGalleryOpen={handleGalleryOpen}
+                    onGalleryClose={handleGalleryClose}
                  />
                </div>
              </div>
@@ -445,7 +465,7 @@ const CardModal = React.memo(
    );

    return (
-      <Modal open closeIcon size="small" centered={false} onClose={onClose}>
+      <Modal open closeIcon size="small" centered={false} onClose={handleClose}>
        {canEdit ? (
          <AttachmentAddZone onCreate={onAttachmentCreate}>{contentNode}</AttachmentAddZone>
        ) : (
@@ -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')} />}
@@ -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,13 +78,13 @@ 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();
@@ -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,13 +61,13 @@ 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();
@@ -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;
@@ -3,12 +3,12 @@ import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Header, Tab } from 'semantic-ui-react';

-import InformationEdit from './InformationEdit';
 import AvatarEditPopup from './AvatarEditPopup';
-import UsernameEditPopup from './UsernameEditPopup';
-import EmailEditPopup from './EmailEditPopup';
-import PasswordEditPopup from './PasswordEditPopup';
 import User from '../../User';
+import UserInformationEdit from '../../UserInformationEdit';
+import UserUsernameEditPopup from '../../UserUsernameEditPopup';
+import UserEmailEditPopup from '../../UserEmailEditPopup';
+import UserPasswordEditPopup from '../../UserPasswordEditPopup';

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

@@ -52,7 +52,7 @@ const AccountPane = React.memo(
        </AvatarEditPopup>
        <br />
        <br />
-        <InformationEdit
+        <UserInformationEdit
          defaultData={{
            name,
            phone,
@@ -68,7 +68,8 @@ const AccountPane = React.memo(
          </Header>
        </Divider>
        <div className={styles.action}>
-          <UsernameEditPopup
+          <UserUsernameEditPopup
+            usePasswordConfirmation
            defaultData={usernameUpdateForm.data}
            username={username}
            isSubmitting={usernameUpdateForm.isSubmitting}
@@ -81,10 +82,11 @@ const AccountPane = React.memo(
                context: 'title',
              })}
            </Button>
-          </UsernameEditPopup>
+          </UserUsernameEditPopup>
        </div>
        <div className={styles.action}>
-          <EmailEditPopup
+          <UserEmailEditPopup
+            usePasswordConfirmation
            defaultData={emailUpdateForm.data}
            email={email}
            isSubmitting={emailUpdateForm.isSubmitting}
@@ -97,10 +99,11 @@ const AccountPane = React.memo(
                context: 'title',
              })}
            </Button>
-          </EmailEditPopup>
+          </UserEmailEditPopup>
        </div>
        <div className={styles.action}>
-          <PasswordEditPopup
+          <UserPasswordEditPopup
+            usePasswordConfirmation
            defaultData={passwordUpdateForm.data}
            isSubmitting={passwordUpdateForm.isSubmitting}
            error={passwordUpdateForm.error}
@@ -112,7 +115,7 @@ const AccountPane = React.memo(
                context: 'title',
              })}
            </Button>
-          </PasswordEditPopup>
+          </UserPasswordEditPopup>
        </div>
      </Tab.Pane>
    );
@@ -1,5 +0,0 @@
-:global(#app) {
-  .field {
-    margin-bottom: 8px;
-  }
-}
@@ -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,13 +78,13 @@ 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();
@@ -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,
 };
@@ -31,11 +31,17 @@ export default {
  USER_UPDATE: `${PREFIX}/USER_UPDATE`,
  CURRENT_USER_UPDATE: `${PREFIX}/CURRENT_USER_UPDATE`,
  USER_UPDATE_HANDLE: `${PREFIX}/USER_UPDATE_HANDLE`,
+  USER_EMAIL_UPDATE: `${PREFIX}/USER_EMAIL_UPDATE`,
  CURRENT_USER_EMAIL_UPDATE: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE`,
+  USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_EMAIL_UPDATE_ERROR_CLEAR`,
  CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR`,
+  USER_PASSWORD_UPDATE: `${PREFIX}/USER_PASSWORD_UPDATE`,
  CURRENT_USER_PASSWORD_UPDATE: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE`,
+  USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_PASSWORD_UPDATE_ERROR_CLEAR`,
  CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR`,
+  USER_USERNAME_UPDATE: `${PREFIX}/USER_USERNAME_UPDATE`,
  CURRENT_USER_USERNAME_UPDATE: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE`,
+  USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_USERNAME_UPDATE_ERROR_CLEAR`,
  CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR`,
  CURRENT_USER_AVATAR_UPDATE: `${PREFIX}/CURRENT_USER_AVATAR_UPDATE`,
  USER_DELETE: `${PREFIX}/USER_DELETE`,
@@ -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,
    },
@@ -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?

@@ -35,7 +36,7 @@ const Markdown = React.memo(({ linkStopPropagation, ...props }) => {
    <ReactMarkdown
      {...props}
      components={components}
-      remarkPlugins={[remarkGfm]}
+      remarkPlugins={[remarkGfm, remarkBreaks]}
      className="markdown-body"
    />
    /* eslint-enable react/jsx-props-no-spreading */
@@ -134,6 +134,7 @@ export default {
      subscribeToMyOwnCardsByDefault: 'Standardmäßig meine eigenen Karten abonnieren',
      taskActions_title: 'Aufgabenaktionen',
      tasks: 'Aufgaben',
+      thereIsNoPreviewAvailableForThisAttachment: 'Für diesen Anhang ist keine Vorschau verfügbar',
      time: 'Zeit',
      timer: 'Timer',
      title: 'Titel',
@@ -70,6 +70,7 @@ export default {
      editBoard_title: 'Edit Board',
      editDueDate_title: 'Edit Due Date',
      editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
      editLabel_title: 'Edit Label',
      editPassword_title: 'Edit Password',
      editTimer_title: 'Edit Timer',
@@ -126,6 +127,8 @@ export default {
      subscribeToMyOwnCardsByDefault: 'Subscribe to my own cards by default',
      taskActions_title: 'Task Actions',
      tasks: 'Tasks',
+      thereIsNoPreviewAvailableForThisAttachment:
+        'There is no preview available for this attachment',
      time: 'Time',
      timer: 'Timer',
      title: 'Title',
@@ -178,6 +181,7 @@ export default {
      editDueDate_title: 'Edit Due Date',
      editDescription_title: 'Edit Description',
      editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
      editPassword_title: 'Edit Password',
      editTimer_title: 'Edit Timer',
      editTitle_title: 'Edit Title',
@@ -11,6 +11,8 @@ import frLogin from './fr/login';
 import jaLogin from './ja/login';
 import plLogin from './pl/login';
 import ruLogin from './ru/login';
+import skLogin from './sk/login';
+import svLogin from './sv/login';
 import uzLogin from './uz/login';
 import zhLogin from './zh/login';

@@ -24,6 +26,8 @@ const localePairs = [
  ['ja', jaLogin],
  ['pl', plLogin],
  ['ru', ruLogin],
+  ['sk', skLogin],
+  ['sv', svLogin],
  ['uz', uzLogin],
  ['zh', zhLogin],
 ];
@@ -122,6 +122,7 @@ export default {
      subscribeToMyOwnCardsByDefault: 'По умолчанию подписаться на мои собственные карточки',
      taskActions: 'Действия с задачей',
      tasks: 'Задачи',
+      thereIsNoPreviewAvailableForThisAttachment: 'Предпросмотр для этого вложения недоступен',
      time: 'Время',
      timer: 'Таймер',
      title: 'Название',
@@ -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,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,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',
+    },
+  },
+};
@@ -9,6 +9,7 @@ export default class extends Model {
    id: attr(),
    url: attr(),
    coverUrl: attr(),
+    image: attr(),
    name: attr(),
    cardId: fk({
      to: 'Card',
@@ -35,6 +35,7 @@ export default class extends Model {
  static fields = {
    id: attr(),
    email: attr(),
+    username: attr(),
    name: attr(),
    avatarUrl: attr(),
    phone: attr(),
@@ -140,6 +141,18 @@ export default class extends Model {

        break;
      }
+      case ActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR: {
+        const userModel = User.withId(payload.id);
+
+        userModel.update({
+          emailUpdateForm: {
+            ...userModel.emailUpdateForm,
+            error: null,
+          },
+        });
+
+        break;
+      }
      case ActionTypes.USER_PASSWORD_UPDATE: {
        const userModel = User.withId(payload.id);

@@ -174,6 +187,18 @@ export default class extends Model {

        break;
      }
+      case ActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR: {
+        const userModel = User.withId(payload.id);
+
+        userModel.update({
+          passwordUpdateForm: {
+            ...userModel.passwordUpdateForm,
+            error: null,
+          },
+        });
+
+        break;
+      }
      case ActionTypes.USER_USERNAME_UPDATE: {
        const userModel = User.withId(payload.id);

@@ -208,6 +233,18 @@ export default class extends Model {

        break;
      }
+      case ActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR: {
+        const userModel = User.withId(payload.id);
+
+        userModel.update({
+          usernameUpdateForm: {
+            ...userModel.usernameUpdateForm,
+            error: null,
+          },
+        });
+
+        break;
+      }
      case ActionTypes.USER_AVATAR_UPDATE:
        User.withId(payload.id).update({
          isAvatarUpdating: true,
@@ -8,8 +8,16 @@ import {
  clearCurrentUserPasswordUpdateErrorService,
  clearCurrentUserUsernameUpdateErrorService,
  clearUserCreateErrorService,
+  clearUserEmailUpdateErrorService,
+  clearUserPasswordUpdateErrorService,
+  clearUserUsernameUpdateErrorService,
  createUserService,
  deleteUserService,
+  handleUserCreateService,
+  handleUserDeleteService,
+  handleUserFromCardRemoveService,
+  handleUserToCardAddService,
+  handleUserUpdateService,
  removeUserFromCardService,
  removeUserFromCurrentCardService,
  removeUserFromFilterInCurrentBoardService,
@@ -19,11 +27,9 @@ import {
  updateCurrentUserPasswordService,
  updateCurrentUserService,
  updateCurrentUserUsernameService,
-  handleUserCreateService,
-  handleUserUpdateService,
-  handleUserDeleteService,
-  handleUserToCardAddService,
-  handleUserFromCardRemoveService,
+  updateUserEmailService,
+  updateUserPasswordService,
+  updateUserUsernameService,
 } from '../services';
 import EntryActionTypes from '../../../constants/EntryActionTypes';

@@ -43,21 +49,39 @@ export default function* userWatchers() {
    takeEvery(EntryActionTypes.USER_UPDATE_HANDLE, ({ payload: { user } }) =>
      handleUserUpdateService(user),
    ),
+    takeEvery(EntryActionTypes.USER_EMAIL_UPDATE, ({ payload: { id, data } }) =>
+      updateUserEmailService(id, data),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_EMAIL_UPDATE, ({ payload: { data } }) =>
      updateCurrentUserEmailService(data),
    ),
+    takeEvery(EntryActionTypes.USER_EMAIL_UPDATE_ERROR_CLEAR, ({ payload: { id } }) =>
+      clearUserEmailUpdateErrorService(id),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR, () =>
      clearCurrentUserEmailUpdateErrorService(),
    ),
+    takeEvery(EntryActionTypes.USER_PASSWORD_UPDATE, ({ payload: { id, data } }) =>
+      updateUserPasswordService(id, data),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE, ({ payload: { data } }) =>
      updateCurrentUserPasswordService(data),
    ),
+    takeEvery(EntryActionTypes.USER_PASSWORD_UPDATE_ERROR_CLEAR, ({ payload: { id } }) =>
+      clearUserPasswordUpdateErrorService(id),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR, () =>
      clearCurrentUserPasswordUpdateErrorService(),
    ),
+    takeEvery(EntryActionTypes.USER_USERNAME_UPDATE, ({ payload: { id, data } }) =>
+      updateUserUsernameService(id, data),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE, ({ payload: { data } }) =>
      updateCurrentUserUsernameService(data),
    ),
+    takeEvery(EntryActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR, ({ payload: { id } }) =>
+      clearUserUsernameUpdateErrorService(id),
+    ),
    takeEvery(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR, () =>
      clearCurrentUserUsernameUpdateErrorService(),
    ),
@@ -101,6 +101,10 @@
        border-radius: 0;
      }
    }
+
+    .pswp .pswp__img--placeholder {
+      display: none !important;
+    }
  }

  #root {
@@ -2,7 +2,7 @@ version: '3'

 services:
  planka:
-    image: meltyshev/planka:latest
+    image: ghcr.io/plankanban/planka:latest
    command: >
      bash -c
        "for i in `seq 1 30`; do
@@ -1,12 +1,12 @@
 {
  "name": "planka",
-  "version": "0.1.0",
+  "version": "1.2.1",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "planka",
-      "version": "0.1.0",
+      "version": "1.2.1",
      "hasInstallScript": true,
      "license": "MIT",
      "dependencies": {
@@ -1,6 +1,6 @@
 {
  "name": "planka",
-  "version": "1.0.0",
+  "version": "1.3.0",
  "private": true,
  "homepage": "https://plankanban.github.io/planka",
  "repository": {
@@ -14,9 +14,11 @@
    "client:lint": "npm run lint --prefix client",
    "client:start": "npm start --prefix client",
    "client:test": "npm test --prefix client",
+    "docker:build": "docker build -t ghcr.io/plankanban/planka:local -f Dockerfile .",
+    "docker:build:base": "docker build -t ghcr.io/plankanban/planka:base-local -f Dockerfile.base .",
    "postinstall": "npm i --prefix server && npm i --prefix client",
-    "prepare": "husky install",
    "lint": "npm run server:lint && npm run client:lint",
+    "prepare": "husky install",
    "server:console": "npm run console --prefix server",
    "server:db:init": "npm run db:init --prefix server",
    "server:db:migrate": "npm run db:migrate --prefix server",
@@ -54,10 +54,8 @@ module.exports = {

        const attachment = await sails.helpers.attachments.createOne(
          {
-            dirname: file.extra.dirname,
+            ...file.extra,
            filename: file.filename,
-            isImage: file.extra.isImage,
-            name: file.extra.name,
          },
          currentUser,
          card,
@@ -46,7 +46,7 @@ module.exports = {
      }
    }

-    if (!attachment.isImage) {
+    if (!attachment.image) {
      throw Errors.ATTACHMENT_NOT_FOUND;
    }

@@ -61,7 +61,9 @@ module.exports = {
      throw Errors.ATTACHMENT_NOT_FOUND;
    }

-    this.res.setHeader('Content-Disposition', `inline; ${inputs.filename}`);
+    this.res.type(attachment.filename);
+    this.res.set('Cache-Control', 'private, max-age=900'); // TODO: move to config
+
    return exits.success(fs.createReadStream(filePath));
  },
 };
@@ -14,10 +14,6 @@ module.exports = {
      regex: /^[0-9]+$/,
      required: true,
    },
-    filename: {
-      type: 'string',
-      required: true,
-    },
  },

  exits: {
@@ -56,14 +52,12 @@ module.exports = {
      throw Errors.ATTACHMENT_NOT_FOUND;
    }

-    let contentDisposition;
-    if (attachment.isImage || path.extname(attachment.filename) === '.pdf') {
-      contentDisposition = 'inline';
-    } else {
-      contentDisposition = `attachment; ${inputs.filename}`;
+    this.res.type(attachment.filename);
+    if (!attachment.image && path.extname(attachment.filename) !== '.pdf') {
+      this.res.set('Content-Disposition', 'attachment');
    }
+    this.res.set('Cache-Control', 'private, max-age=900'); // TODO: move to config

-    this.res.setHeader('Content-Disposition', contentDisposition);
    return exits.success(fs.createReadStream(filePath));
  },
 };
@@ -3,25 +3,36 @@ module.exports = {
    const { currentUser } = this.req;

    const managerProjectIds = await sails.helpers.users.getManagerProjectIds(currentUser.id);
+    const managerProjects = await sails.helpers.projects.getMany(managerProjectIds);

-    const boardMemberships = await sails.helpers.users.getBoardMemberships(currentUser.id);
-    const membershipBoardIds = await sails.helpers.utils.mapRecords(boardMemberships, 'boardId');
+    let boardMemberships = await sails.helpers.users.getBoardMemberships(currentUser.id);

-    const membershipBoards = await sails.helpers.boards.getMany({
+    let membershipBoardIds = sails.helpers.utils.mapRecords(boardMemberships, 'boardId');
+
+    let membershipBoards = await sails.helpers.boards.getMany({
      id: membershipBoardIds,
      projectId: {
        '!=': managerProjectIds,
      },
    });

-    const membershipProjectIds = sails.helpers.utils.mapRecords(
-      membershipBoards,
-      'projectId',
-      true,
+    let membershipProjectIds = sails.helpers.utils.mapRecords(membershipBoards, 'projectId', true);
+    const membershipProjects = await sails.helpers.projects.getMany(membershipProjectIds);
+
+    membershipProjectIds = sails.helpers.utils.mapRecords(membershipProjects);
+
+    membershipBoards = membershipBoards.filter((membershipBoard) =>
+      membershipProjectIds.includes(membershipBoard.projectId),
+    );
+
+    membershipBoardIds = sails.helpers.utils.mapRecords(membershipBoards);
+
+    boardMemberships = boardMemberships.filter((boardMembership) =>
+      membershipBoardIds.includes(boardMembership.boardId),
    );

    const projectIds = [...managerProjectIds, ...membershipProjectIds];
-    const projects = await sails.helpers.projects.getMany(projectIds);
+    const projects = [...managerProjects, ...membershipProjects];

    const projectManagers = await sails.helpers.projects.getProjectManagers(projectIds);

@@ -38,7 +38,7 @@ module.exports = {
      inputs.request,
    );

-    if (!inputs.card.coverAttachmentId && attachment.isImage) {
+    if (!inputs.card.coverAttachmentId && attachment.image) {
      await sails.helpers.cards.updateOne(inputs.card, {
        coverAttachmentId: attachment.id,
      });
@@ -43,15 +43,20 @@ module.exports = {
        await writeFile(path.join(rootPath, filename), buffer);

        const image = sharp(buffer);
-        let imageMetadata;
+        let metadata;

        try {
-          imageMetadata = await image.metadata();
+          metadata = await image.metadata();
        } catch (error) {} // eslint-disable-line no-empty

-        if (imageMetadata) {
+        const extra = {
+          dirname,
+          name: file.filename,
+        };
+
+        if (metadata && !['svg', 'pdf'].includes(metadata.format)) {
          let cover256Buffer;
-          if (imageMetadata.height > imageMetadata.width) {
+          if (metadata.height > metadata.width) {
            cover256Buffer = await image
              .resize(256, 320)
              .jpeg({
@@ -75,17 +80,16 @@ module.exports = {
          fs.mkdirSync(thumbnailsPath);

          await writeFile(path.join(thumbnailsPath, 'cover-256.jpg'), cover256Buffer);
+
+          extra.image = _.pick(metadata, ['width', 'height']);
+        } else {
+          extra.image = null;
        }

-        // eslint-disable-next-line no-param-reassign
-        file.extra = {
-          dirname,
-          isImage: !!imageMetadata,
-          name: file.filename,
-        };
-
-        // eslint-disable-next-line no-param-reassign
-        file.filename = filename;
+        Object.assign(file, {
+          filename,
+          extra,
+        });

        return done();
      } catch (error) {
@@ -19,10 +19,8 @@ module.exports = {
      type: 'string',
      required: true,
    },
-    isImage: {
-      type: 'boolean',
-      required: true,
-      columnName: 'is_image',
+    image: {
+      type: 'json',
    },
    name: {
      type: 'string',
@@ -51,9 +49,9 @@ module.exports = {

  customToJSON() {
    return {
-      ..._.omit(this, ['dirname', 'filename', 'isImage']),
+      ..._.omit(this, ['dirname', 'filename']),
      url: `${sails.config.custom.attachmentsUrl}/${this.id}/download/${this.filename}`,
-      coverUrl: this.isImage
+      coverUrl: this.image
        ? `${sails.config.custom.attachmentsUrl}/${this.id}/download/thumbnails/cover-256.jpg`
        : null,
    };
@@ -20,20 +20,24 @@
 *   https://sailsjs.com/anatomy/app.js
 */

-require('dotenv').config();
+const dotenv = require('dotenv');

 // Ensure we're in the project directory, so cwd-relative paths work as expected
 // no matter where we actually lift from.
 // > Note: This is not required in order to lift, but it is a convenient default.
 process.chdir(__dirname);

+dotenv.config();
+
 // Attempt to import `sails` dependency, as well as `rc` (for loading `.sailsrc` files).
 let sails;
 let rc;

 try {
-  sails = require('sails'); // eslint-disable-line global-require
-  rc = require('sails/accessible/rc'); // eslint-disable-line global-require
+  /* eslint-disable global-require */
+  sails = require('sails');
+  rc = require('sails/accessible/rc');
+  /* eslint-enable global-require */
 } catch (error) {
  /* eslint-disable no-console */
  console.error("Encountered an error when attempting to require('sails'):");
@@ -1,10 +1,12 @@
-const config = require('./knexfile');
+const initKnex = require('knex');

-const knex = require('knex')(config); // eslint-disable-line import/order
+const knexfile = require('./knexfile');
+
+const knex = initKnex(knexfile);

 (async () => {
  try {
-    const isExists = await knex.schema.hasTable(config.migrations.tableName);
+    const isExists = await knex.schema.hasTable(knexfile.migrations.tableName);

    await knex.migrate.latest();
    if (!isExists) {
@@ -1,7 +1,8 @@
 const path = require('path');
+const dotenv = require('dotenv');
 const _ = require('lodash');

-require('dotenv').config({
+dotenv.config({
  path: path.resolve(__dirname, '../.env'),
 });

@@ -1,5 +1,5 @@
 module.exports.up = (knex) =>
-  knex.schema.createTable('card', (table) => {
+  knex.schema.createTable('card', async (table) => {
    /* Columns */

    table.bigInteger('id').primary().defaultTo(knex.raw('next_id()'));
@@ -12,7 +12,7 @@ module.exports.up = (knex) =>
    table.specificType('position', 'double precision');
    table.text('name').notNullable();
    table.text('description');
-    table.timestamp('dueDate', true);
+    table.timestamp('due_date', true);
    table.jsonb('timer');

    table.timestamp('created_at', true);
@@ -0,0 +1,73 @@
+const path = require('path');
+const sharp = require('sharp');
+const _ = require('lodash');
+
+const getConfig = require('../../get-config');
+
+module.exports.up = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.jsonb('image');
+  });
+
+  const config = await getConfig();
+  const attachments = await knex('attachment');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    if (attachment.is_image) {
+      const image = sharp(
+        path.join(config.custom.attachmentsPath, attachment.dirname, attachment.filename),
+      );
+
+      let metadata;
+      try {
+        metadata = await image.metadata(); // eslint-disable-line no-await-in-loop
+      } catch (error) {
+        continue; // eslint-disable-line no-continue
+      }
+
+      if (!['svg', 'pdf'].includes(metadata.format)) {
+        // eslint-disable-next-line no-await-in-loop
+        await knex('attachment')
+          .update({
+            image: _.pick(metadata, ['width', 'height']),
+          })
+          .where('id', attachment.id);
+      }
+    }
+  }
+
+  return knex.schema.table('attachment', (table) => {
+    table.dropColumn('is_image');
+  });
+};
+
+module.exports.down = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.boolean('is_image');
+  });
+
+  const attachments = await knex('attachment');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    // eslint-disable-next-line no-await-in-loop
+    await knex('attachment')
+      .update({
+        is_image: !!attachment.image,
+      })
+      .where('id', attachment.id);
+  }
+
+  await knex.schema.table('attachment', (table) => {
+    table.dropColumn('image');
+  });
+
+  return knex.schema.alterTable('attachment', (table) => {
+    table.boolean('is_image').notNullable().alter();
+  });
+};
@@ -0,0 +1,38 @@
+const dotenv = require('dotenv');
+const sails = require('sails');
+const rc = require('sails/accessible/rc');
+
+process.chdir(__dirname);
+dotenv.config();
+
+const config = rc('sails');
+
+const getConfigPromise = new Promise((resolve) => {
+  sails.load(
+    {
+      ...config,
+      hooks: {
+        ...config.hooks,
+        logger: false,
+        request: false,
+        views: false,
+        blueprints: false,
+        responses: false,
+        helpers: false,
+        pubsub: false,
+        policies: false,
+        services: false,
+        security: false,
+        i18n: false,
+        session: false,
+        http: false,
+        userhooks: false,
+      },
+    },
+    () => {
+      resolve(sails.config);
+    },
+  );
+});
+
+module.exports = () => getConfigPromise;
Author	SHA1	Message	Date
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
Maksim Eltyshev	caf9602557	chore: Update version	2022-04-28 14:23:11 +05:00
Maksim Eltyshev	445b0fc682	fix: Change way to fix application crash when deleting project	2022-04-28 14:15:36 +05:00
Maksim Eltyshev	2e045217ec	fix: Fix application crash after deleting project	2022-04-28 00:17:15 +05:00