From d3ff3e2db81b11c668965494ab7eb22ea0786400 Mon Sep 17 00:00:00 2001
From: Sebastian Dichler <sedi343@gmail.com>
Date: Wed, 25 Mar 2026 11:24:27 +0100
Subject: [PATCH] feat(client): Add ability for admins to edit user avatars
 (#1604)

---
 .../UsersPane/ActionsStep.jsx                 | 14 +++++++
 .../EditUserAvatarStep.jsx}                   | 40 +++++++++++--------
 .../EditUserAvatarStep.module.scss}           |  0
 .../index.js                                  |  4 +-
 .../{AccountPane => }/AccountPane.jsx         | 26 ++++++------
 .../{AccountPane => }/AccountPane.module.scss |  0
 client/src/constants/EntryActionTypes.js      |  1 +
 client/src/entry-actions/users.js             |  9 +++++
 client/src/locales/ar-YE/core.js              |  1 +
 client/src/locales/bg-BG/core.js              |  1 +
 client/src/locales/ca-ES/core.js              |  1 +
 client/src/locales/cs-CZ/core.js              |  1 +
 client/src/locales/da-DK/core.js              |  1 +
 client/src/locales/de-DE/core.js              |  1 +
 client/src/locales/el-GR/core.js              |  1 +
 client/src/locales/en-GB/core.js              |  1 +
 client/src/locales/en-US/core.js              |  1 +
 client/src/locales/es-ES/core.js              |  1 +
 client/src/locales/et-EE/core.js              |  1 +
 client/src/locales/fa-IR/core.js              |  1 +
 client/src/locales/fi-FI/core.js              |  1 +
 client/src/locales/fr-FR/core.js              |  1 +
 client/src/locales/hu-HU/core.js              |  1 +
 client/src/locales/id-ID/core.js              |  1 +
 client/src/locales/it-IT/core.js              |  1 +
 client/src/locales/ja-JP/core.js              |  1 +
 client/src/locales/ko-KR/core.js              |  1 +
 client/src/locales/nl-NL/core.js              |  1 +
 client/src/locales/pl-PL/core.js              |  1 +
 client/src/locales/pt-BR/core.js              |  1 +
 client/src/locales/pt-PT/core.js              |  1 +
 client/src/locales/ro-RO/core.js              |  1 +
 client/src/locales/ru-RU/core.js              |  1 +
 client/src/locales/sk-SK/core.js              |  1 +
 client/src/locales/sr-Cyrl-RS/core.js         |  1 +
 client/src/locales/sr-Latn-RS/core.js         |  1 +
 client/src/locales/sv-SE/core.js              |  1 +
 client/src/locales/tr-TR/core.js              |  1 +
 client/src/locales/uk-UA/core.js              |  1 +
 client/src/locales/uz-UZ/core.js              |  1 +
 client/src/locales/vi-VN/core.js              |  1 +
 client/src/locales/zh-CN/core.js              |  1 +
 client/src/locales/zh-TW/core.js              |  1 +
 client/src/sagas/core/watchers/users.js       |  3 ++
 44 files changed, 101 insertions(+), 31 deletions(-)
 rename client/src/components/users/{UserSettingsModal/AccountPane/EditAvatarStep.jsx => EditUserAvatarStep/EditUserAvatarStep.jsx} (59%)
 rename client/src/components/users/{UserSettingsModal/AccountPane/EditAvatarStep.module.scss => EditUserAvatarStep/EditUserAvatarStep.module.scss} (100%)
 rename client/src/components/users/{UserSettingsModal/AccountPane => EditUserAvatarStep}/index.js (62%)
 rename client/src/components/users/UserSettingsModal/{AccountPane => }/AccountPane.jsx (83%)
 rename client/src/components/users/UserSettingsModal/{AccountPane => }/AccountPane.module.scss (100%)

diff --git a/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx b/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
index b5f224a2..9fbad0ed 100644
--- a/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
+++ b/client/src/components/common/AdministrationModal/UsersPane/ActionsStep.jsx
@@ -17,6 +17,7 @@ import SelectRoleStep from './SelectRoleStep';
 import ApiKeyStep from './ApiKeyStep';
 import ConfirmationStep from '../../ConfirmationStep';
 import EditUserInformationStep from '../../../users/EditUserInformationStep';
+import EditUserAvatarStep from '../../../users/EditUserAvatarStep';
 import EditUserUsernameStep from '../../../users/EditUserUsernameStep';
 import EditUserEmailStep from '../../../users/EditUserEmailStep';
 import EditUserPasswordStep from '../../../users/EditUserPasswordStep';
@@ -25,6 +26,7 @@ import styles from './ActionsStep.module.scss';
 
 const StepTypes = {
   EDIT_INFORMATION: 'EDIT_INFORMATION',
+  EDIT_AVATAR: 'EDIT_AVATAR',
   EDIT_USERNAME: 'EDIT_USERNAME',
   EDIT_EMAIL: 'EDIT_EMAIL',
   EDIT_PASSWORD: 'EDIT_PASSWORD',
@@ -97,6 +99,10 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
     openStep(StepTypes.EDIT_INFORMATION);
   }, [openStep]);
 
+  const handleEditAvatarClick = useCallback(() => {
+    openStep(StepTypes.EDIT_AVATAR);
+  }, [openStep]);
+
   const handleEditUsernameClick = useCallback(() => {
     openStep(StepTypes.EDIT_USERNAME);
   }, [openStep]);
@@ -137,6 +143,8 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
     switch (step.type) {
       case StepTypes.EDIT_INFORMATION:
         return <EditUserInformationStep id={userId} onBack={handleBack} onClose={onClose} />;
+      case StepTypes.EDIT_AVATAR:
+        return <EditUserAvatarStep id={userId} onBack={handleBack} onClose={onClose} />;
       case StepTypes.EDIT_USERNAME:
         return <EditUserUsernameStep id={userId} onBack={handleBack} onClose={onClose} />;
       case StepTypes.EDIT_EMAIL:
@@ -219,6 +227,12 @@ const ActionsStep = React.memo(({ userId, onClose }) => {
               context: 'title',
             })}
           </Menu.Item>
+          <Menu.Item className={styles.menuItem} onClick={handleEditAvatarClick}>
+            <Icon name="image outline" className={styles.menuItemIcon} />
+            {t('action.editAvatar', {
+              context: 'title',
+            })}
+          </Menu.Item>
           {!user.lockedFieldNames.includes('username') && (
             <Menu.Item className={styles.menuItem} onClick={handleEditUsernameClick}>
               <Icon name="at" className={styles.menuItemIcon} />
diff --git a/client/src/components/users/UserSettingsModal/AccountPane/EditAvatarStep.jsx b/client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.jsx
similarity index 59%
rename from client/src/components/users/UserSettingsModal/AccountPane/EditAvatarStep.jsx
rename to client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.jsx
index 2b89c2c4..3f816be7 100644
--- a/client/src/components/users/UserSettingsModal/AccountPane/EditAvatarStep.jsx
+++ b/client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.jsx
@@ -3,20 +3,22 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { FilePicker, Popup } from '../../../../lib/custom-ui';
+import { FilePicker, Popup } from '../../../lib/custom-ui';
 
-import selectors from '../../../../selectors';
-import entryActions from '../../../../entry-actions';
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
 
-import styles from './EditAvatarStep.module.scss';
+import styles from './EditUserAvatarStep.module.scss';
 
-const EditAvatarStep = React.memo(({ onClose }) => {
-  const defaultValue = useSelector((state) => selectors.selectCurrentUser(state).avatar);
+const EditUserAvatarStep = React.memo(({ id, onBack, onClose }) => {
+  const selectUserById = useMemo(() => selectors.makeSelectUserById(), []);
+
+  const avatar = useSelector((state) => selectUserById(state, id).avatar);
 
   const dispatch = useDispatch();
   const [t] = useTranslation();
@@ -26,33 +28,33 @@ const EditAvatarStep = React.memo(({ onClose }) => {
   const handleFileSelect = useCallback(
     (file) => {
       dispatch(
-        entryActions.updateCurrentUserAvatar({
+        entryActions.updateUserAvatar(id, {
           file,
         }),
       );
 
       onClose();
     },
-    [onClose, dispatch],
+    [dispatch, id, onClose],
   );
 
   const handleDeleteClick = useCallback(() => {
     dispatch(
-      entryActions.updateCurrentUser({
+      entryActions.updateUser(id, {
         avatar: null,
       }),
     );
 
     onClose();
-  }, [onClose, dispatch]);
+  }, [dispatch, id, onClose]);
 
   useEffect(() => {
-    fieldRef.current.focus();
+    fieldRef.current?.focus?.();
   }, []);
 
   return (
     <>
-      <Popup.Header>
+      <Popup.Header onBack={onBack}>
         {t('common.editAvatar', {
           context: 'title',
         })}
@@ -67,7 +69,7 @@ const EditAvatarStep = React.memo(({ onClose }) => {
             />
           </FilePicker>
         </div>
-        {defaultValue && (
+        {avatar && (
           <Button negative content={t('action.deleteAvatar')} onClick={handleDeleteClick} />
         )}
       </Popup.Content>
@@ -75,8 +77,14 @@ const EditAvatarStep = React.memo(({ onClose }) => {
   );
 });
 
-EditAvatarStep.propTypes = {
+EditUserAvatarStep.propTypes = {
+  id: PropTypes.string.isRequired,
+  onBack: PropTypes.func,
   onClose: PropTypes.func.isRequired,
 };
 
-export default EditAvatarStep;
+EditUserAvatarStep.defaultProps = {
+  onBack: undefined,
+};
+
+export default EditUserAvatarStep;
diff --git a/client/src/components/users/UserSettingsModal/AccountPane/EditAvatarStep.module.scss b/client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.module.scss
similarity index 100%
rename from client/src/components/users/UserSettingsModal/AccountPane/EditAvatarStep.module.scss
rename to client/src/components/users/EditUserAvatarStep/EditUserAvatarStep.module.scss
diff --git a/client/src/components/users/UserSettingsModal/AccountPane/index.js b/client/src/components/users/EditUserAvatarStep/index.js
similarity index 62%
rename from client/src/components/users/UserSettingsModal/AccountPane/index.js
rename to client/src/components/users/EditUserAvatarStep/index.js
index 4b69ceaf..14e5cbdc 100644
--- a/client/src/components/users/UserSettingsModal/AccountPane/index.js
+++ b/client/src/components/users/EditUserAvatarStep/index.js
@@ -3,6 +3,6 @@
  * Licensed under the Fair Use License: https://github.com/plankanban/planka/blob/master/LICENSE.md
  */
 
-import AccountPane from './AccountPane';
+import EditUserAvatarStep from './EditUserAvatarStep';
 
-export default AccountPane;
+export default EditUserAvatarStep;
diff --git a/client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx b/client/src/components/users/UserSettingsModal/AccountPane.jsx
similarity index 83%
rename from client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx
rename to client/src/components/users/UserSettingsModal/AccountPane.jsx
index aacb6ada..4c83af45 100644
--- a/client/src/components/users/UserSettingsModal/AccountPane/AccountPane.jsx
+++ b/client/src/components/users/UserSettingsModal/AccountPane.jsx
@@ -8,16 +8,16 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { Button, Divider, Dropdown, Header, Tab } from 'semantic-ui-react';
 
-import selectors from '../../../../selectors';
-import entryActions from '../../../../entry-actions';
-import { usePopupInClosableContext } from '../../../../hooks';
-import locales from '../../../../locales';
-import EditAvatarStep from './EditAvatarStep';
-import EditUserInformation from '../../EditUserInformation';
-import EditUserUsernameStep from '../../EditUserUsernameStep';
-import EditUserEmailStep from '../../EditUserEmailStep';
-import EditUserPasswordStep from '../../EditUserPasswordStep';
-import UserAvatar from '../../UserAvatar';
+import selectors from '../../../selectors';
+import entryActions from '../../../entry-actions';
+import { usePopupInClosableContext } from '../../../hooks';
+import locales from '../../../locales';
+import EditUserInformation from '../EditUserInformation';
+import EditUserAvatarStep from '../EditUserAvatarStep';
+import EditUserUsernameStep from '../EditUserUsernameStep';
+import EditUserEmailStep from '../EditUserEmailStep';
+import EditUserPasswordStep from '../EditUserPasswordStep';
+import UserAvatar from '../UserAvatar';
 
 import styles from './AccountPane.module.scss';
 
@@ -34,7 +34,7 @@ const AccountPane = React.memo(() => {
     [dispatch],
   );
 
-  const EditAvatarPopup = usePopupInClosableContext(EditAvatarStep);
+  const EditUserAvatarPopup = usePopupInClosableContext(EditUserAvatarStep);
   const EditUserUsernamePopup = usePopupInClosableContext(EditUserUsernameStep);
   const EditUserEmailPopup = usePopupInClosableContext(EditUserEmailStep);
   const EditUserPasswordPopup = usePopupInClosableContext(EditUserPasswordStep);
@@ -45,9 +45,9 @@ const AccountPane = React.memo(() => {
 
   return (
     <Tab.Pane attached={false} className={styles.wrapper}>
-      <EditAvatarPopup>
+      <EditUserAvatarPopup id={user.id}>
         <UserAvatar id={user.id} size="massive" isDisabled={user.isAvatarUpdating} />
-      </EditAvatarPopup>
+      </EditUserAvatarPopup>
       <br />
       <br />
       <EditUserInformation id={user.id} />
diff --git a/client/src/components/users/UserSettingsModal/AccountPane/AccountPane.module.scss b/client/src/components/users/UserSettingsModal/AccountPane.module.scss
similarity index 100%
rename from client/src/components/users/UserSettingsModal/AccountPane/AccountPane.module.scss
rename to client/src/components/users/UserSettingsModal/AccountPane.module.scss
diff --git a/client/src/constants/EntryActionTypes.js b/client/src/constants/EntryActionTypes.js
index f9c87639..3a99a4f0 100755
--- a/client/src/constants/EntryActionTypes.js
+++ b/client/src/constants/EntryActionTypes.js
@@ -75,6 +75,7 @@ export default {
   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`,
+  USER_AVATAR_UPDATE: `${PREFIX}/USER_AVATAR_UPDATE`,
   CURRENT_USER_AVATAR_UPDATE: `${PREFIX}/CURRENT_USER_AVATAR_UPDATE`,
   USER_API_KEY_CREATE: `${PREFIX}/USER_API_KEY_CREATE`,
   USER_API_KEY_DELETE: `${PREFIX}/USER_API_KEY_DELETE`,
diff --git a/client/src/entry-actions/users.js b/client/src/entry-actions/users.js
index a3cee877..6b0f1d79 100755
--- a/client/src/entry-actions/users.js
+++ b/client/src/entry-actions/users.js
@@ -139,6 +139,14 @@ const clearCurrentUserUsernameUpdateError = () => ({
   payload: {},
 });
 
+const updateUserAvatar = (id, data) => ({
+  type: EntryActionTypes.USER_AVATAR_UPDATE,
+  payload: {
+    id,
+    data,
+  },
+});
+
 const updateCurrentUserAvatar = (data) => ({
   type: EntryActionTypes.CURRENT_USER_AVATAR_UPDATE,
   payload: {
@@ -271,6 +279,7 @@ export default {
   updateCurrentUserUsername,
   clearUserUsernameUpdateError,
   clearCurrentUserUsernameUpdateError,
+  updateUserAvatar,
   updateCurrentUserAvatar,
   createUserApiKey,
   deleteUserApiKey,
diff --git a/client/src/locales/ar-YE/core.js b/client/src/locales/ar-YE/core.js
index 0acb861d..16382bb3 100644
--- a/client/src/locales/ar-YE/core.js
+++ b/client/src/locales/ar-YE/core.js
@@ -436,6 +436,7 @@ export default {
       download: 'تحميل',
       duplicateCard_title: 'تكرار البطاقة',
       edit: 'تعديل',
+      editAvatar_title: 'تعديل الصورة الرمزية',
       editColor_title: 'تعديل اللون',
       editDescription_title: 'تعديل الوصف',
       editDueDate_title: 'تعديل تاريخ الاستحقاق',
diff --git a/client/src/locales/bg-BG/core.js b/client/src/locales/bg-BG/core.js
index 52fdf853..808da75c 100644
--- a/client/src/locales/bg-BG/core.js
+++ b/client/src/locales/bg-BG/core.js
@@ -451,6 +451,7 @@ export default {
       download: 'Изтегляне',
       duplicateCard_title: 'Дублирана карта',
       edit: 'Редактиране',
+      editAvatar_title: 'Редактиране на аватар',
       editColor_title: 'Редактиране на цвят',
       editDescription_title: 'Редактиране на описание',
       editDueDate_title: 'Редактиране на краен срок',
diff --git a/client/src/locales/ca-ES/core.js b/client/src/locales/ca-ES/core.js
index f72b81c6..7d800f51 100644
--- a/client/src/locales/ca-ES/core.js
+++ b/client/src/locales/ca-ES/core.js
@@ -453,6 +453,7 @@ export default {
       download: 'Descarregar',
       duplicateCard_title: 'Duplicar targeta',
       edit: 'Editar',
+      editAvatar_title: 'Editar avatar',
       editColor_title: 'Editar color',
       editDescription_title: 'Editar descripció',
       editDueDate_title: 'Editar data de venciment',
diff --git a/client/src/locales/cs-CZ/core.js b/client/src/locales/cs-CZ/core.js
index ebf76456..325530d1 100644
--- a/client/src/locales/cs-CZ/core.js
+++ b/client/src/locales/cs-CZ/core.js
@@ -441,6 +441,7 @@ export default {
       download: 'Stáhnout',
       duplicateCard_title: 'Duplikovat kartu',
       edit: 'Upravit',
+      editAvatar_title: 'Upravit avatar',
       editColor_title: 'Upravit barvu',
       editDescription_title: 'Upravit popis',
       editDueDate_title: 'Upravit termín',
diff --git a/client/src/locales/da-DK/core.js b/client/src/locales/da-DK/core.js
index 8fb1ca4b..382c8a54 100644
--- a/client/src/locales/da-DK/core.js
+++ b/client/src/locales/da-DK/core.js
@@ -447,6 +447,7 @@ export default {
       download: 'Download',
       duplicateCard_title: 'Duplikér kort',
       edit: 'Rediger',
+      editAvatar_title: 'Rediger profilbillede',
       editColor_title: 'Rediger farve',
       editDescription_title: 'Rediger beskrivelse',
       editDueDate_title: 'Rediger frist',
diff --git a/client/src/locales/de-DE/core.js b/client/src/locales/de-DE/core.js
index 41915941..84917902 100644
--- a/client/src/locales/de-DE/core.js
+++ b/client/src/locales/de-DE/core.js
@@ -463,6 +463,7 @@ export default {
       download: 'Herunterladen',
       duplicateCard_title: 'Karte duplizieren',
       edit: 'Bearbeiten',
+      editAvatar_title: 'Profilbild bearbeiten',
       editColor_title: 'Farbe bearbeiten',
       editDescription_title: 'Beschreibung ändern',
       editDueDate_title: 'Fälligkeitsdatum bearbeiten',
diff --git a/client/src/locales/el-GR/core.js b/client/src/locales/el-GR/core.js
index 8be3b61c..b417372b 100644
--- a/client/src/locales/el-GR/core.js
+++ b/client/src/locales/el-GR/core.js
@@ -467,6 +467,7 @@ export default {
       download: 'Λήψη',
       duplicateCard_title: 'Διπλασιασμός κάρτας',
       edit: 'Επεξεργασία',
+      editAvatar_title: 'Επεξεργασία avatar',
       editColor_title: 'Επεξεργασία χρώματος',
       editDescription_title: 'Επεξεργασία περιγραφής',
       editDueDate_title: 'Επεξεργασία ημερομηνίας λήξης',
diff --git a/client/src/locales/en-GB/core.js b/client/src/locales/en-GB/core.js
index 252e7dd3..d77cd702 100644
--- a/client/src/locales/en-GB/core.js
+++ b/client/src/locales/en-GB/core.js
@@ -443,6 +443,7 @@ export default {
       download: 'Download',
       duplicateCard_title: 'Duplicate Card',
       edit: 'Edit',
+      editAvatar_title: 'Edit Avatar',
       editColor_title: 'Edit Color',
       editDescription_title: 'Edit Description',
       editDueDate_title: 'Edit Due Date',
diff --git a/client/src/locales/en-US/core.js b/client/src/locales/en-US/core.js
index dcf880ca..67f7f328 100644
--- a/client/src/locales/en-US/core.js
+++ b/client/src/locales/en-US/core.js
@@ -438,6 +438,7 @@ export default {
       download: 'Download',
       duplicateCard_title: 'Duplicate Card',
       edit: 'Edit',
+      editAvatar_title: 'Edit Avatar',
       editColor_title: 'Edit Color',
       editDescription_title: 'Edit Description',
       editDueDate_title: 'Edit Due Date',
diff --git a/client/src/locales/es-ES/core.js b/client/src/locales/es-ES/core.js
index 167ab82f..7ea06bd3 100644
--- a/client/src/locales/es-ES/core.js
+++ b/client/src/locales/es-ES/core.js
@@ -453,6 +453,7 @@ export default {
       download: 'Descargar',
       duplicateCard_title: 'Duplicar tarjeta',
       edit: 'Editar',
+      editAvatar_title: 'Editar avatar',
       editColor_title: 'Editar color',
       editDescription_title: 'Editar descripción',
       editDueDate_title: 'Editar fecha de vencimiento',
diff --git a/client/src/locales/et-EE/core.js b/client/src/locales/et-EE/core.js
index 7d2c1484..cda39dc6 100644
--- a/client/src/locales/et-EE/core.js
+++ b/client/src/locales/et-EE/core.js
@@ -445,6 +445,7 @@ export default {
       download: 'Laadi alla',
       duplicateCard_title: 'Duplikaardi loomine',
       edit: 'Muuda',
+      editAvatar_title: 'Muuda avatar',
       editColor_title: 'Muuda värvi',
       editDescription_title: 'Muuda kirjeldust',
       editDueDate_title: 'Muuda tähtaega',
diff --git a/client/src/locales/fa-IR/core.js b/client/src/locales/fa-IR/core.js
index 2f308f9c..a6310c51 100644
--- a/client/src/locales/fa-IR/core.js
+++ b/client/src/locales/fa-IR/core.js
@@ -447,6 +447,7 @@ export default {
       download: 'دانلود',
       duplicateCard_title: 'تکرار کارت',
       edit: 'ویرایش',
+      editAvatar_title: 'ویرایش آواتار',
       editColor_title: 'ویرایش رنگ',
       editDescription_title: 'ویرایش توضیحات',
       editDueDate_title: 'ویرایش تاریخ سررسید',
diff --git a/client/src/locales/fi-FI/core.js b/client/src/locales/fi-FI/core.js
index 24d3e06f..73bfdc4b 100644
--- a/client/src/locales/fi-FI/core.js
+++ b/client/src/locales/fi-FI/core.js
@@ -446,6 +446,7 @@ export default {
       download: 'Lataa',
       duplicateCard_title: 'Monista kortti',
       edit: 'Muokkaa',
+      editAvatar_title: 'Muokkaa avatar',
       editColor_title: 'Muokkaa väriä',
       editDescription_title: 'Muokkaa kuvausta',
       editDueDate_title: 'Muokkaa määräpäivää',
diff --git a/client/src/locales/fr-FR/core.js b/client/src/locales/fr-FR/core.js
index 4d93937f..e5f65eaa 100644
--- a/client/src/locales/fr-FR/core.js
+++ b/client/src/locales/fr-FR/core.js
@@ -451,6 +451,7 @@ export default {
       download: 'Télécharger',
       duplicateCard_title: 'Dupliquer la carte',
       edit: 'Modifier',
+      editAvatar_title: "Modifier l'avatar",
       editColor_title: 'Modifier la couleur',
       editDescription_title: 'Modifier la description',
       editDueDate_title: "Modifier la date d'échéance",
diff --git a/client/src/locales/hu-HU/core.js b/client/src/locales/hu-HU/core.js
index 7f646f9e..dbdf2b7b 100644
--- a/client/src/locales/hu-HU/core.js
+++ b/client/src/locales/hu-HU/core.js
@@ -445,6 +445,7 @@ export default {
       download: 'Letöltés',
       duplicateCard_title: 'Kártya másolása',
       edit: 'Szerkesztés',
+      editAvatar_title: 'Avatar szerkesztése',
       editColor_title: 'Szín szerkesztése',
       editDescription_title: 'Leírás szerkesztése',
       editDueDate_title: 'Esedékesség dátumának szerkesztése',
diff --git a/client/src/locales/id-ID/core.js b/client/src/locales/id-ID/core.js
index cd59a6cd..5ecca030 100644
--- a/client/src/locales/id-ID/core.js
+++ b/client/src/locales/id-ID/core.js
@@ -446,6 +446,7 @@ export default {
       download: 'Unduh',
       duplicateCard_title: 'Duplikat kartu',
       edit: 'Ubah',
+      editAvatar_title: 'Ubah avatar',
       editColor_title: 'Ubah warna',
       editDescription_title: 'Ubah deskripsi',
       editDueDate_title: 'Ubah tenggat waktu',
diff --git a/client/src/locales/it-IT/core.js b/client/src/locales/it-IT/core.js
index 9750455b..da24781b 100644
--- a/client/src/locales/it-IT/core.js
+++ b/client/src/locales/it-IT/core.js
@@ -449,6 +449,7 @@ export default {
       download: 'Scarica',
       duplicateCard_title: 'Duplica scheda',
       edit: 'Modifica',
+      editAvatar_title: 'Modifica avatar',
       editColor_title: 'Modifica colore',
       editDescription_title: 'Modifica descrizione',
       editDueDate_title: 'Modifica data di scadenza',
diff --git a/client/src/locales/ja-JP/core.js b/client/src/locales/ja-JP/core.js
index 1bd88476..f72c0bd2 100644
--- a/client/src/locales/ja-JP/core.js
+++ b/client/src/locales/ja-JP/core.js
@@ -443,6 +443,7 @@ export default {
       download: 'ダウンロード',
       duplicateCard_title: 'カードを複製',
       edit: '編集',
+      editAvatar_title: 'アバターを編集',
       editColor_title: '色を編集',
       editDescription_title: '説明を編集',
       editDueDate_title: '期限を編集',
diff --git a/client/src/locales/ko-KR/core.js b/client/src/locales/ko-KR/core.js
index e59c5027..6dc71a3e 100644
--- a/client/src/locales/ko-KR/core.js
+++ b/client/src/locales/ko-KR/core.js
@@ -440,6 +440,7 @@ export default {
       download: '다운로드',
       duplicateCard_title: '카드 복제',
       edit: '편집',
+      editAvatar_title: '아바타 편집',
       editColor_title: '색상 편집',
       editDescription_title: '설명 편집',
       editDueDate_title: '마감일 편집',
diff --git a/client/src/locales/nl-NL/core.js b/client/src/locales/nl-NL/core.js
index c0cdb317..bdadb4cb 100644
--- a/client/src/locales/nl-NL/core.js
+++ b/client/src/locales/nl-NL/core.js
@@ -449,6 +449,7 @@ export default {
       download: 'Downloaden',
       duplicateCard_title: 'Kaart dupliceren',
       edit: 'Bewerken',
+      editAvatar_title: 'Avatar bewerken',
       editColor_title: 'Kleur bewerken',
       editDescription_title: 'Beschrijving bewerken',
       editDueDate_title: 'Vervaldatum bewerken',
diff --git a/client/src/locales/pl-PL/core.js b/client/src/locales/pl-PL/core.js
index 701338c3..fe1a7554 100644
--- a/client/src/locales/pl-PL/core.js
+++ b/client/src/locales/pl-PL/core.js
@@ -446,6 +446,7 @@ export default {
       download: 'Pobierz',
       duplicateCard_title: 'Duplikuj kartę',
       edit: 'Edytuj',
+      editAvatar_title: 'Edytuj awatar',
       editColor_title: 'Edytuj kolor',
       editDescription_title: 'Edytuj opis',
       editDueDate_title: 'Edytuj termin',
diff --git a/client/src/locales/pt-BR/core.js b/client/src/locales/pt-BR/core.js
index 1d46b8b6..47dadeb4 100644
--- a/client/src/locales/pt-BR/core.js
+++ b/client/src/locales/pt-BR/core.js
@@ -449,6 +449,7 @@ export default {
       download: 'Baixar',
       duplicateCard_title: 'Duplicar cartão',
       edit: 'Editar',
+      editAvatar_title: 'Editar avatar',
       editColor_title: 'Editar cor',
       editDescription_title: 'Editar descrição',
       editDueDate_title: 'Editar data de vencimento',
diff --git a/client/src/locales/pt-PT/core.js b/client/src/locales/pt-PT/core.js
index 42fa23ac..66856460 100644
--- a/client/src/locales/pt-PT/core.js
+++ b/client/src/locales/pt-PT/core.js
@@ -452,6 +452,7 @@ export default {
       download: 'Transferir',
       duplicateCard_title: 'Duplicar cartão',
       edit: 'Editar',
+      editAvatar_title: 'Editar avatar',
       editColor_title: 'Editar cor',
       editDescription_title: 'Editar descrição',
       editDueDate_title: 'Editar data de vencimento',
diff --git a/client/src/locales/ro-RO/core.js b/client/src/locales/ro-RO/core.js
index a19f3a03..fd7052ad 100644
--- a/client/src/locales/ro-RO/core.js
+++ b/client/src/locales/ro-RO/core.js
@@ -446,6 +446,7 @@ export default {
       download: 'Descărcați',
       duplicateCard_title: 'Duplicați cardul',
       edit: 'Editați',
+      editAvatar_title: 'Editați avatarul',
       editColor_title: 'Editați culoarea',
       editDescription_title: 'Editați descrierea',
       editDueDate_title: 'Editați data scadentă',
diff --git a/client/src/locales/ru-RU/core.js b/client/src/locales/ru-RU/core.js
index 9c6b4c8c..255a7fa5 100644
--- a/client/src/locales/ru-RU/core.js
+++ b/client/src/locales/ru-RU/core.js
@@ -448,6 +448,7 @@ export default {
       download: 'Скачать',
       duplicateCard_title: 'Дублировать карточку',
       edit: 'Изменить',
+      editAvatar_title: 'Изменить аватар',
       editColor_title: 'Изменить цвет',
       editDescription_title: 'Изменить описание',
       editDueDate_title: 'Изменить срок',
diff --git a/client/src/locales/sk-SK/core.js b/client/src/locales/sk-SK/core.js
index 28ce9f11..3c12f48a 100644
--- a/client/src/locales/sk-SK/core.js
+++ b/client/src/locales/sk-SK/core.js
@@ -439,6 +439,7 @@ export default {
       download: 'Stiahnuť',
       duplicateCard_title: 'Duplikovať kartu',
       edit: 'Upraviť',
+      editAvatar_title: 'Upraviť avatar',
       editColor_title: 'Upraviť farbu',
       editDescription_title: 'Upraviť popis',
       editDueDate_title: 'Upraviť termín do',
diff --git a/client/src/locales/sr-Cyrl-RS/core.js b/client/src/locales/sr-Cyrl-RS/core.js
index 6ee34852..1ad07f3f 100644
--- a/client/src/locales/sr-Cyrl-RS/core.js
+++ b/client/src/locales/sr-Cyrl-RS/core.js
@@ -442,6 +442,7 @@ export default {
       download: 'Преузми',
       duplicateCard_title: 'Клонирај картицу',
       edit: 'Измени',
+      editAvatar_title: 'Уреди аватара',
       editColor_title: 'Уреди боју',
       editDescription_title: 'Измени опис',
       editDueDate_title: 'Измени рок',
diff --git a/client/src/locales/sr-Latn-RS/core.js b/client/src/locales/sr-Latn-RS/core.js
index c50e463a..904fbb5d 100644
--- a/client/src/locales/sr-Latn-RS/core.js
+++ b/client/src/locales/sr-Latn-RS/core.js
@@ -444,6 +444,7 @@ export default {
       download: 'Preuzmi',
       duplicateCard_title: 'Kloniraj karticu',
       edit: 'Izmeni',
+      editAvatar_title: 'Uredi avatara',
       editColor_title: 'Uredi boju',
       editDescription_title: 'Izmeni opis',
       editDueDate_title: 'Izmeni rok',
diff --git a/client/src/locales/sv-SE/core.js b/client/src/locales/sv-SE/core.js
index 1c9d8931..902c22a9 100644
--- a/client/src/locales/sv-SE/core.js
+++ b/client/src/locales/sv-SE/core.js
@@ -453,6 +453,7 @@ export default {
       download: 'Ladda ner',
       duplicateCard_title: 'Duplicera kort',
       edit: 'Redigera',
+      editAvatar_title: 'Redigera avatar',
       editColor_title: 'Redigera färg',
       editDescription_title: 'Redigera beskrivning',
       editDueDate_title: 'Redigera förfallodatum',
diff --git a/client/src/locales/tr-TR/core.js b/client/src/locales/tr-TR/core.js
index 42cbda9a..f6166e88 100644
--- a/client/src/locales/tr-TR/core.js
+++ b/client/src/locales/tr-TR/core.js
@@ -449,6 +449,7 @@ export default {
       download: 'İndir',
       duplicateCard_title: 'Kartı kopyala',
       edit: 'Düzenle',
+      editAvatar_title: 'Avatarı düzenle',
       editColor_title: 'Rengi düzenle',
       editDescription_title: 'Açıklamayı düzenle',
       editDueDate_title: 'Son tarihi düzenle',
diff --git a/client/src/locales/uk-UA/core.js b/client/src/locales/uk-UA/core.js
index 367f5027..0385d7be 100644
--- a/client/src/locales/uk-UA/core.js
+++ b/client/src/locales/uk-UA/core.js
@@ -444,6 +444,7 @@ export default {
       download: 'Завантажити',
       duplicateCard_title: 'Дублювати картку',
       edit: 'Редагувати',
+      editAvatar_title: 'Редагувати аватар',
       editColor_title: 'Редагувати колір',
       editDescription_title: 'Редагувати опис',
       editDueDate_title: 'Редагувати термін виконання',
diff --git a/client/src/locales/uz-UZ/core.js b/client/src/locales/uz-UZ/core.js
index 643d22e5..15eff384 100644
--- a/client/src/locales/uz-UZ/core.js
+++ b/client/src/locales/uz-UZ/core.js
@@ -442,6 +442,7 @@ export default {
       download: 'Yuklab olish',
       duplicateCard_title: 'Kartani nusxalash',
       edit: 'Tahrirlash',
+      editAvatar_title: 'Avatarni tahrirlash',
       editColor_title: 'Rangni tahrirlash',
       editDescription_title: 'Izohni tahrirlash',
       editDueDate_title: 'Muddatni tahrirlash',
diff --git a/client/src/locales/vi-VN/core.js b/client/src/locales/vi-VN/core.js
index c92465c9..85cfcfe8 100644
--- a/client/src/locales/vi-VN/core.js
+++ b/client/src/locales/vi-VN/core.js
@@ -444,6 +444,7 @@ export default {
       download: 'Tải xuống',
       duplicateCard_title: 'Nhân bản Thẻ',
       edit: 'Chỉnh sửa',
+      editAvatar_title: 'Chỉnh sửa ảnh đại diện',
       editColor_title: 'Chỉnh sửa Màu sắc',
       editDescription_title: 'Chỉnh sửa Mô tả',
       editDueDate_title: 'Chỉnh sửa Hạn chót',
diff --git a/client/src/locales/zh-CN/core.js b/client/src/locales/zh-CN/core.js
index 27c18e98..b9450cae 100644
--- a/client/src/locales/zh-CN/core.js
+++ b/client/src/locales/zh-CN/core.js
@@ -419,6 +419,7 @@ export default {
       download: '下载',
       duplicateCard_title: '复制卡片',
       edit: '编辑',
+      editAvatar_title: '编辑头像',
       editColor_title: '编辑颜色',
       editDescription_title: '编辑描述',
       editDueDate_title: '编辑到期时间',
diff --git a/client/src/locales/zh-TW/core.js b/client/src/locales/zh-TW/core.js
index 8b10c95e..3cc50437 100644
--- a/client/src/locales/zh-TW/core.js
+++ b/client/src/locales/zh-TW/core.js
@@ -419,6 +419,7 @@ export default {
       download: '下載',
       duplicateCard_title: '複製卡片',
       edit: '編輯',
+      editAvatar_title: '編輯頭像',
       editColor_title: '編輯顏色',
       editDescription_title: '編輯描述',
       editDueDate_title: '編輯截止時間',
diff --git a/client/src/sagas/core/watchers/users.js b/client/src/sagas/core/watchers/users.js
index 6711128d..2e022be1 100644
--- a/client/src/sagas/core/watchers/users.js
+++ b/client/src/sagas/core/watchers/users.js
@@ -64,6 +64,9 @@ export default function* usersWatchers() {
     takeEvery(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR, () =>
       services.clearCurrentUserUsernameUpdateError(),
     ),
+    takeEvery(EntryActionTypes.USER_AVATAR_UPDATE, ({ payload: { id, data } }) =>
+      services.updateUserAvatar(id, data),
+    ),
     takeEvery(EntryActionTypes.CURRENT_USER_AVATAR_UPDATE, ({ payload: { data } }) =>
       services.updateCurrentUserAvatar(data),
     ),