feat: Add ability to edit users

Closes #60

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

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

.gitignore

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

Dockerfile

@@ -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

Dockerfile.base

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

client/package-lock.json

@@ -34,6 +34,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",
@@ -18824,6 +18825,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",
@@ -36761,6 +36776,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",

client/package.json

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

client/src/actions/entry/user.js

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

client/src/components/UserEmailEditPopup.jsx

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

client/src/components/UserEmailEditStep/UserEmailEditStep.jsx

@@ -1,15 +1,15 @@
+import omit from 'lodash/omit';
 import isEmail from 'validator/lib/isEmail';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
-import { 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;

client/src/components/UserEmailEditStep/index.js

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

client/src/components/UserInformationEdit/UserInformationEdit.jsx

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

client/src/components/UserInformationEdit/index.js

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

client/src/components/UserInformationEditStep.jsx

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

client/src/components/UserPasswordEditPopup.jsx

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

client/src/components/UserPasswordEditStep/UserPasswordEditStep.jsx

@@ -1,14 +1,14 @@
+import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
-import { 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;

client/src/components/UserPasswordEditStep/index.js

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

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

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

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

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

client/src/components/UserUsernameEditPopup.jsx

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

client/src/components/UserUsernameEditStep/UserUsernameEditStep.jsx

@@ -1,15 +1,15 @@
+import omit from 'lodash/omit';
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Message } from 'semantic-ui-react';
-import { useDidUpdate, usePrevious, useToggle } from '../../../lib/hooks';
-import { 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;

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

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

client/src/components/UserUsernameEditStep/index.js

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

client/src/components/UsersModal/Item.jsx

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

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

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

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

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

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

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

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

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

client/src/components/UsersModal/UsersModal.jsx

@@ -6,68 +6,140 @@ import { Button, Modal, Table } from 'semantic-ui-react';
 import UserAddPopupContainer from '../../containers/UserAddPopupContainer';
 import Item from './Item';
 
-const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
-  const [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,
 };

client/src/constants/EntryActionTypes.js

@@ -31,11 +31,17 @@ export default {
   USER_UPDATE: `${PREFIX}/USER_UPDATE`,
   CURRENT_USER_UPDATE: `${PREFIX}/CURRENT_USER_UPDATE`,
   USER_UPDATE_HANDLE: `${PREFIX}/USER_UPDATE_HANDLE`,
+  USER_EMAIL_UPDATE: `${PREFIX}/USER_EMAIL_UPDATE`,
   CURRENT_USER_EMAIL_UPDATE: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE`,
+  USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_EMAIL_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR`,
+  USER_PASSWORD_UPDATE: `${PREFIX}/USER_PASSWORD_UPDATE`,
   CURRENT_USER_PASSWORD_UPDATE: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE`,
+  USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_PASSWORD_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR`,
+  USER_USERNAME_UPDATE: `${PREFIX}/USER_USERNAME_UPDATE`,
   CURRENT_USER_USERNAME_UPDATE: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE`,
+  USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/USER_USERNAME_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_AVATAR_UPDATE: `${PREFIX}/CURRENT_USER_AVATAR_UPDATE`,
   USER_DELETE: `${PREFIX}/USER_DELETE`,

client/src/containers/UsersModalContainer.js

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

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

@@ -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 */

client/src/locales/en/core.js

@@ -70,6 +70,7 @@ export default {
       editBoard_title: 'Edit Board',
       editDueDate_title: 'Edit Due Date',
       editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
       editLabel_title: 'Edit Label',
       editPassword_title: 'Edit Password',
       editTimer_title: 'Edit Timer',
@@ -178,6 +179,7 @@ export default {
       editDueDate_title: 'Edit Due Date',
       editDescription_title: 'Edit Description',
       editEmail_title: 'Edit E-mail',
+      editInformation_title: 'Edit Information',
       editPassword_title: 'Edit Password',
       editTimer_title: 'Edit Timer',
       editTitle_title: 'Edit Title',

client/src/locales/index.js

@@ -11,6 +11,7 @@ import frLogin from './fr/login';
 import jaLogin from './ja/login';
 import plLogin from './pl/login';
 import ruLogin from './ru/login';
+import svLogin from './sv/login';
 import uzLogin from './uz/login';
 import zhLogin from './zh/login';
 
@@ -24,6 +25,7 @@ const localePairs = [
   ['ja', jaLogin],
   ['pl', plLogin],
   ['ru', ruLogin],
+  ['sv', svLogin],
   ['uz', uzLogin],
   ['zh', zhLogin],
 ];

client/src/locales/sv/core.js

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

client/src/locales/sv/login.js

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

client/src/models/User.js

@@ -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,

client/src/sagas/core/watchers/user.js

@@ -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(),
     ),

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "planka",
-  "version": "0.1.0",
+  "version": "1.1.5",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "planka",
-      "version": "0.1.0",
+      "version": "1.1.5",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "planka",
-  "version": "1.1.2",
+  "version": "1.1.5",
   "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",