Add email and password change functionality for a current user, remove deep compare hooks

client/src/components/AddProjectModal/AddProjectModal.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import {
@@ -6,7 +6,7 @@ import {
 } from 'semantic-ui-react';
 import { Input } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm } from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './AddProjectModal.module.css';
 
@@ -22,7 +22,7 @@ const AddProjectModal = React.memo(({
 
   const nameField = useRef(null);
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/AddUserPopup/AddUserPopup.jsx

@@ -1,17 +1,35 @@
 import isEmail from 'validator/lib/isEmail';
-import React, { useEffect, useRef } from 'react';
+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 { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import {
-  useDeepCompareCallback, useDeepCompareEffect, useForm, usePrevious,
-} from '../../hooks';
+import { useForm, usePrevious } from '../../hooks';
 
 import styles from './AddUserPopup.module.css';
 
+const createMessage = (error) => {
+  if (!error) {
+    return error;
+  }
+
+  if (error.message === 'User is already exist') {
+    return {
+      type: 'error',
+      content: 'common.userIsAlreadyExist',
+    };
+  }
+
+  return {
+    type: 'warning',
+    content: 'common.unknownError',
+  };
+};
+
 const AddUserPopup = React.memo(
   ({
     defaultData, isSubmitting, error, onCreate, onMessageDismiss, onClose,
@@ -26,11 +44,13 @@ const AddUserPopup = React.memo(
       ...defaultData,
     }));
 
+    const message = useMemo(() => createMessage(error), [error]);
+
     const emailField = useRef(null);
     const passwordField = useRef(null);
     const nameField = useRef(null);
 
-    const handleSubmit = useDeepCompareCallback(() => {
+    const handleSubmit = useCallback(() => {
       const cleanData = {
         ...data,
         email: data.email.trim(),
@@ -59,11 +79,11 @@ const AddUserPopup = React.memo(
       emailField.current.select();
     }, []);
 
-    useDeepCompareEffect(() => {
+    useEffect(() => {
       if (wasSubmitting && !isSubmitting) {
         if (!error) {
           onClose();
-        } else if (error.message === 'userIsAlreadyExist') {
+        } else if (error.message === 'User is already exist') {
           emailField.current.select();
         }
       }
@@ -77,14 +97,14 @@ const AddUserPopup = React.memo(
           })}
         </Popup.Header>
         <Popup.Content>
-          {error && (
+          {message && (
             <Message
               // eslint-disable-next-line react/jsx-props-no-spreading
               {...{
-                [error.type || 'error']: true,
+                [message.type]: true,
               }}
               visible
-              content={t(`common.${error.message}`)}
+              content={t(message.content)}
               onDismiss={onMessageDismiss}
             />
           )}

client/src/components/Board/AddList.jsx

@@ -6,11 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'semantic-ui-react';
 
 import {
-  useClosableForm,
-  useDeepCompareCallback,
-  useDidUpdate,
-  useForm,
-  useToggle,
+  useClosableForm, useDidUpdate, useForm, useToggle,
 } from '../../hooks';
 
 import styles from './AddList.module.css';
@@ -62,7 +58,7 @@ const AddList = React.forwardRef(({ children, onCreate }, ref) => {
     close,
   );
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/Boards/AddPopup.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm } from '../../hooks';
+import { useForm } from '../../hooks';
 
 import styles from './AddPopup.module.css';
 
@@ -18,7 +18,7 @@ const AddStep = React.memo(({ onCreate, onClose }) => {
 
   const nameField = useRef(null);
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/Boards/EditPopup.jsx

@@ -6,7 +6,7 @@ import { Button, Form } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm, useSteps } from '../../hooks';
+import { useForm, useSteps } from '../../hooks';
 import DeleteStep from '../DeleteStep';
 
 import styles from './EditPopup.module.css';
@@ -29,7 +29,7 @@ const EditStep = React.memo(({
 
   const nameField = useRef(null);
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

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

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
 
-import { useDeepCompareCallback, useForm } from '../../../hooks';
+import { useForm } from '../../../hooks';
 
 import styles from './AddComment.module.css';
 
@@ -18,7 +18,7 @@ const AddComment = React.memo(({ onCreate }) => {
 
   const textField = useRef(null);
 
-  const submit = useDeepCompareCallback(() => {
+  const submit = useCallback(() => {
     const cleanData = {
       ...data,
       text: data.text.trim(),

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

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
 
-import { useClosableForm, useDeepCompareCallback, useForm } from '../../../hooks';
+import { useClosableForm, useForm } from '../../../hooks';
 
 import styles from './EditComment.module.css';
 
@@ -18,7 +18,7 @@ const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref)
 
   const textField = useRef(null);
 
-  const open = useDeepCompareCallback(() => {
+  const open = useCallback(() => {
     setIsOpened(true);
     setData({
       text: '',
@@ -31,7 +31,7 @@ const EditComment = React.forwardRef(({ children, defaultData, onUpdate }, ref)
     setData(null);
   }, [setData]);
 
-  const submit = useDeepCompareCallback(() => {
+  const submit = useCallback(() => {
     const cleanData = {
       ...data,
       text: data.text.trim(),

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

@@ -7,11 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import {
-  useClosableForm,
-  useDeepCompareCallback,
-  useDidUpdate,
-  useForm,
-  useToggle,
+  useClosableForm, useDidUpdate, useForm, useToggle,
 } from '../../../hooks';
 
 import styles from './Add.module.css';
@@ -36,7 +32,7 @@ const Add = React.forwardRef(({ children, onCreate }, ref) => {
     setIsOpened(false);
   }, []);
 
-  const submit = useDeepCompareCallback(() => {
+  const submit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/EditDueDateStep/EditDueDateStep.jsx

@@ -7,9 +7,7 @@ import DatePicker from 'react-datepicker';
 import { Button, Form } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import {
-  useDeepCompareCallback, useDidUpdate, useForm, useToggle,
-} from '../../hooks';
+import { useDidUpdate, useForm, useToggle } from '../../hooks';
 
 import styles from './EditDueDateStep.module.css';
 
@@ -65,7 +63,7 @@ const EditDueDateStep = React.memo(({
     [setData, selectTimeField, t],
   );
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     if (!nullableDate) {
       dateField.current.select();
       return;
@@ -86,9 +84,9 @@ const EditDueDateStep = React.memo(({
     }
 
     onClose();
-  }, [defaultValue, onUpdate, onClose, data, nullableDate]);
+  }, [defaultValue, onUpdate, onClose, data, nullableDate, t]);
 
-  const handleClearClick = useDeepCompareCallback(() => {
+  const handleClearClick = useCallback(() => {
     if (defaultValue) {
       onUpdate(null);
     }

client/src/components/EditTimerStep/EditTimerStep.jsx

@@ -1,11 +1,11 @@
 import dequal from 'dequal';
-import React, { useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm, useToggle } from '../../hooks';
+import { useForm, useToggle } from '../../hooks';
 import {
   createTimer, getTimerParts, startTimer, stopTimer, updateTimer,
 } from '../../utils/timer';
@@ -41,16 +41,16 @@ const EditTimerStep = React.memo(({
   const minutesField = useRef(null);
   const secondsField = useRef(null);
 
-  const handleStartClick = useDeepCompareCallback(() => {
+  const handleStartClick = useCallback(() => {
     onUpdate(startTimer(defaultValue));
     onClose();
   }, [defaultValue, onUpdate, onClose]);
 
-  const handleStopClick = useDeepCompareCallback(() => {
+  const handleStopClick = useCallback(() => {
     onUpdate(stopTimer(defaultValue));
   }, [defaultValue, onUpdate]);
 
-  const handleClearClick = useDeepCompareCallback(() => {
+  const handleClearClick = useCallback(() => {
     if (defaultValue) {
       onUpdate(null);
     }
@@ -58,12 +58,12 @@ const EditTimerStep = React.memo(({
     onClose();
   }, [defaultValue, onUpdate, onClose]);
 
-  const handleToggleEditClick = useDeepCompareCallback(() => {
+  const handleToggleEditClick = useCallback(() => {
     setData(createData(defaultValue));
     toggleEdit();
   }, [defaultValue, setData, toggleEdit]);
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const parts = {
       hours: parseInt(data.hours, 10),
       minutes: parseInt(data.minutes, 10),

client/src/components/Header/Header.jsx

@@ -5,7 +5,7 @@ import { Icon, Menu } from 'semantic-ui-react';
 
 import Paths from '../../constants/Paths';
 import NotificationsPopup from './NotificationsPopup';
-import UserPopup from './UserPopup';
+import UserPopup from '../UserPopup';
 
 import styles from './Header.module.css';
 
@@ -14,10 +14,14 @@ const Header = React.memo(
     user,
     notifications,
     isEditable,
+    onUsers,
+    onNotificationDelete,
     onUserUpdate,
     onUserAvatarUpload,
-    onNotificationDelete,
-    onUsers,
+    onUserEmailUpdate,
+    onUserEmailUpdateMessageDismiss,
+    onUserPasswordUpdate,
+    onUserPasswordUpdateMessageDismiss,
     onLogout,
   }) => (
     <div className={styles.wrapper}>
@@ -40,11 +44,18 @@ const Header = React.memo(
             </Menu.Item>
           </NotificationsPopup>
           <UserPopup
+            email={user.email}
             name={user.name}
             avatar={user.avatar}
             isAvatarUploading={user.isAvatarUploading}
+            emailUpdateForm={user.emailUpdateForm}
+            passwordUpdateForm={user.passwordUpdateForm}
             onUpdate={onUserUpdate}
             onAvatarUpload={onUserAvatarUpload}
+            onEmailUpdate={onUserEmailUpdate}
+            onEmailUpdateMessageDismiss={onUserEmailUpdateMessageDismiss}
+            onPasswordUpdate={onUserPasswordUpdate}
+            onPasswordUpdateMessageDismiss={onUserPasswordUpdateMessageDismiss}
             onLogout={onLogout}
           >
             <Menu.Item className={styles.item}>{user.name}</Menu.Item>
@@ -61,10 +72,14 @@ Header.propTypes = {
   notifications: PropTypes.array.isRequired,
   /* eslint-enable react/forbid-prop-types */
   isEditable: PropTypes.bool.isRequired,
+  onUsers: PropTypes.func.isRequired,
+  onNotificationDelete: PropTypes.func.isRequired,
   onUserUpdate: PropTypes.func.isRequired,
   onUserAvatarUpload: PropTypes.func.isRequired,
-  onNotificationDelete: PropTypes.func.isRequired,
-  onUsers: PropTypes.func.isRequired,
+  onUserEmailUpdate: PropTypes.func.isRequired,
+  onUserEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onUserPasswordUpdate: PropTypes.func.isRequired,
+  onUserPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
 };
 

client/src/components/LabelsStep/AddStep.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm } from '../../hooks';
+import { useForm } from '../../hooks';
 import LabelColors from '../../constants/LabelColors';
 import Editor from './Editor';
 
@@ -18,7 +18,7 @@ const AddStep = React.memo(({ onCreate, onBack }) => {
     color: LabelColors.KEYS[0],
   }));
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim() || null,

client/src/components/LabelsStep/EditStep.jsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
 import { Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm, useSteps } from '../../hooks';
+import { useForm, useSteps } from '../../hooks';
 import LabelColors from '../../constants/LabelColors';
 import Editor from './Editor';
 import DeleteStep from '../DeleteStep';
@@ -29,7 +29,7 @@ const EditStep = React.memo(({
 
   const [step, openStep, handleBack] = useSteps();
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim() || null,

client/src/components/List/AddCard.jsx

@@ -7,11 +7,7 @@ import TextareaAutosize from 'react-textarea-autosize';
 import { Button, Form, TextArea } from 'semantic-ui-react';
 
 import {
-  useClosableForm,
-  useDeepCompareCallback,
-  useDidUpdate,
-  useForm,
-  useToggle,
+  useClosableForm, useDidUpdate, useForm, useToggle,
 } from '../../hooks';
 
 import styles from './AddCard.module.css';
@@ -36,7 +32,7 @@ const AddCard = React.forwardRef(({ children, onCreate }, ref) => {
     setIsOpened(false);
   }, []);
 
-  const submit = useDeepCompareCallback(() => {
+  const submit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/Login/Login.jsx

@@ -1,4 +1,6 @@
-import React, { useEffect, useRef } from 'react';
+import React, {
+  useCallback, useEffect, useMemo, useRef,
+} from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
@@ -9,16 +11,45 @@ import {
 import { Input } from '../../lib/custom-ui';
 
 import {
-  useDeepCompareCallback,
-  useDeepCompareEffect,
-  useDidUpdate,
-  useForm,
-  usePrevious,
-  useToggle,
+  useDidUpdate, useForm, usePrevious, useToggle,
 } from '../../hooks';
 
 import styles from './Login.module.css';
 
+const createMessage = (error) => {
+  if (!error) {
+    return error;
+  }
+
+  switch (error.message) {
+    case 'Email does not exist':
+      return {
+        type: 'error',
+        content: 'common.emailDoesNotExist',
+      };
+    case 'Password is not valid':
+      return {
+        type: 'error',
+        content: 'common.invalidPassword',
+      };
+    case 'Failed to fetch':
+      return {
+        type: 'warning',
+        content: 'common.noInternetConnection',
+      };
+    case 'Network request failed':
+      return {
+        type: 'warning',
+        content: 'common.serverConnectionFailed',
+      };
+    default:
+      return {
+        type: 'warning',
+        content: 'common.unknownError',
+      };
+  }
+};
+
 const Login = React.memo(
   ({
     defaultData, isSubmitting, error, onAuthenticate, onMessageDismiss,
@@ -32,12 +63,13 @@ const Login = React.memo(
       ...defaultData,
     }));
 
+    const message = useMemo(() => createMessage(error), [error]);
     const [focusPasswordFieldState, focusPasswordField] = useToggle();
 
     const emailField = useRef(null);
     const passwordField = useRef(null);
 
-    const handleSubmit = useDeepCompareCallback(() => {
+    const handleSubmit = useCallback(() => {
       const cleanData = {
         ...data,
         email: data.email.trim(),
@@ -60,14 +92,14 @@ const Login = React.memo(
       emailField.current.select();
     }, []);
 
-    useDeepCompareEffect(() => {
+    useEffect(() => {
       if (wasSubmitting && !isSubmitting && error) {
         switch (error.message) {
-          case 'emailDoesNotExist':
+          case 'Email does not exist':
             emailField.current.select();
 
             break;
-          case 'invalidPassword':
+          case 'Password is not valid':
             setData((prevData) => ({
               ...prevData,
               password: '',
@@ -98,14 +130,14 @@ const Login = React.memo(
                     className={styles.formTitle}
                   />
                   <div>
-                    {error && (
+                    {message && (
                       <Message
                         // eslint-disable-next-line react/jsx-props-no-spreading
                         {...{
-                          [error.type || 'error']: true,
+                          [message.type]: true,
                         }}
                         visible
-                        content={t(`common.${error.message}`)}
+                        content={t(message.content)}
                         onDismiss={onMessageDismiss}
                       />
                     )}

client/src/components/Project/EditPopup.jsx

@@ -6,7 +6,7 @@ import { Button, Form } from 'semantic-ui-react';
 import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
-import { useDeepCompareCallback, useForm, useSteps } from '../../hooks';
+import { useForm, useSteps } from '../../hooks';
 import DeleteStep from '../DeleteStep';
 
 import styles from './EditPopup.module.css';
@@ -29,7 +29,7 @@ const EditStep = React.memo(({
 
   const nameField = useRef(null);
 
-  const handleSubmit = useDeepCompareCallback(() => {
+  const handleSubmit = useCallback(() => {
     const cleanData = {
       ...data,
       name: data.name.trim(),

client/src/components/Timer/Timer.jsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { useDeepCompareEffect, useForceUpdate, usePrevious } from '../../hooks';
+import { useForceUpdate, usePrevious } from '../../hooks';
 import { formatTimer } from '../../utils/timer';
 
 import styles from './Timer.module.css';
@@ -50,7 +50,7 @@ const Timer = React.memo(({
     clearInterval(interval.current);
   }, []);
 
-  useDeepCompareEffect(() => {
+  useEffect(() => {
     if (prevStartedAt) {
       if (!startedAt) {
         stop();

client/src/components/UserPopup/EditAvatarStep.jsx

@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button } from 'semantic-ui-react';
-import { Popup } from '../../../lib/custom-ui';
+import { Popup } from '../../lib/custom-ui';
 
-import User from '../../User';
+import User from '../User';
 
 import styles from './EditAvatarStep.module.css';
 

client/src/components/UserPopup/EditEmailStep.jsx

@@ -0,0 +1,185 @@
+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 { Input, Popup } from '../../lib/custom-ui';
+
+import {
+  useDidUpdate, useForm, usePrevious, useToggle,
+} from '../../hooks';
+
+import styles from './EditNameStep.module.css';
+
+const createMessage = (error) => {
+  if (!error) {
+    return error;
+  }
+
+  switch (error.message) {
+    case 'User is already exist':
+      return {
+        type: 'error',
+        content: 'common.userIsAlreadyExist',
+      };
+    case 'Current password is not valid':
+      return {
+        type: 'error',
+        content: 'common.invalidCurrentPassword',
+      };
+    default:
+      return {
+        type: 'warning',
+        content: 'common.unknownError',
+      };
+  }
+};
+
+const EditEmailStep = React.memo(({
+  defaultData, email, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose,
+}) => {
+  const [t] = useTranslation();
+  const wasSubmitting = usePrevious(isSubmitting);
+
+  const [data, handleFieldChange, setData] = useForm({
+    email: '',
+    currentPassword: '',
+    ...defaultData,
+  });
+
+  const message = useMemo(() => createMessage(error), [error]);
+  const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
+
+  const emailField = useRef(null);
+  const currentPasswordField = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    const cleanData = {
+      ...data,
+      email: data.email.trim(),
+    };
+
+    if (!isEmail(cleanData.email)) {
+      emailField.current.select();
+      return;
+    }
+
+    if (cleanData.email === email) {
+      onClose();
+      return;
+    }
+
+    if (!cleanData.currentPassword) {
+      currentPasswordField.current.focus();
+      return;
+    }
+
+    onUpdate(cleanData);
+  }, [email, onUpdate, onClose, data]);
+
+  useEffect(() => {
+    emailField.current.select();
+  }, []);
+
+  useEffect(() => {
+    if (wasSubmitting && !isSubmitting) {
+      if (error) {
+        switch (error.message) {
+          case 'User is already exist':
+            emailField.current.select();
+
+            break;
+          case 'Current password is not valid':
+            setData((prevData) => ({
+              ...prevData,
+              currentPassword: '',
+            }));
+            focusCurrentPasswordField();
+
+            break;
+          default:
+        }
+      } else {
+        onClose();
+      }
+    }
+  }, [isSubmitting, wasSubmitting, error, onClose, setData, focusCurrentPasswordField]);
+
+  useDidUpdate(() => {
+    currentPasswordField.current.focus();
+  }, [focusCurrentPasswordFieldState]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editEmail', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        {message && (
+          <Message
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...{
+              [message.type]: true,
+            }}
+            visible
+            content={t(message.content)}
+            onDismiss={onMessageDismiss}
+          />
+        )}
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.newEmail')}</div>
+          <Input
+            fluid
+            ref={emailField}
+            name="email"
+            value={data.email}
+            placeholder={email}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          {data.email.trim() !== email && (
+            <>
+              <div className={styles.text}>{t('common.currentPassword')}</div>
+              <Input
+                fluid
+                ref={currentPasswordField}
+                type="password"
+                name="currentPassword"
+                value={data.currentPassword}
+                className={styles.field}
+                onChange={handleFieldChange}
+              />
+            </>
+          )}
+          <Button
+            positive
+            content={t('action.save')}
+            loading={isSubmitting}
+            disabled={isSubmitting}
+          />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+EditEmailStep.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
+  onUpdate: PropTypes.func.isRequired,
+  onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditEmailStep.defaultProps = {
+  error: undefined,
+};
+
+export default EditEmailStep;

client/src/components/UserPopup/EditNameStep.jsx

@@ -2,9 +2,9 @@ import React, { useCallback, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form } from 'semantic-ui-react';
-import { Input, Popup } from '../../../lib/custom-ui';
+import { Input, Popup } from '../../lib/custom-ui';
 
-import { useField } from '../../../hooks';
+import { useField } from '../../hooks';
 
 import styles from './EditNameStep.module.css';
 

client/src/components/UserPopup/EditNameStep.module.css

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

client/src/components/UserPopup/EditPasswordStep.jsx

@@ -0,0 +1,153 @@
+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 { Input, Popup } from '../../lib/custom-ui';
+
+import {
+  useDidUpdate, useForm, usePrevious, useToggle,
+} from '../../hooks';
+
+import styles from './EditNameStep.module.css';
+
+const createMessage = (error) => {
+  if (!error) {
+    return error;
+  }
+
+  switch (error.message) {
+    case 'Current password is not valid':
+      return {
+        type: 'error',
+        content: 'common.invalidCurrentPassword',
+      };
+    default:
+      return {
+        type: 'warning',
+        content: 'common.unknownError',
+      };
+  }
+};
+
+const EditPasswordStep = React.memo(({
+  defaultData, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose,
+}) => {
+  const [t] = useTranslation();
+  const wasSubmitting = usePrevious(isSubmitting);
+
+  const [data, handleFieldChange, setData] = useForm({
+    password: '',
+    currentPassword: '',
+    ...defaultData,
+  });
+
+  const message = useMemo(() => createMessage(error), [error]);
+  const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
+
+  const passwordField = useRef(null);
+  const currentPasswordField = useRef(null);
+
+  const handleSubmit = useCallback(() => {
+    if (!data.password) {
+      passwordField.current.select();
+      return;
+    }
+
+    if (!data.currentPassword) {
+      currentPasswordField.current.focus();
+      return;
+    }
+
+    onUpdate(data);
+  }, [onUpdate, data]);
+
+  useEffect(() => {
+    passwordField.current.select();
+  }, []);
+
+  useEffect(() => {
+    if (wasSubmitting && !isSubmitting) {
+      if (!error) {
+        onClose();
+      } else if (error.message === 'Current password is not valid') {
+        setData((prevData) => ({
+          ...prevData,
+          currentPassword: '',
+        }));
+        focusCurrentPasswordField();
+      }
+    }
+  }, [isSubmitting, wasSubmitting, error, onClose, setData, focusCurrentPasswordField]);
+
+  useDidUpdate(() => {
+    currentPasswordField.current.focus();
+  }, [focusCurrentPasswordFieldState]);
+
+  return (
+    <>
+      <Popup.Header onBack={onBack}>
+        {t('common.editPassword', {
+          context: 'title',
+        })}
+      </Popup.Header>
+      <Popup.Content>
+        {message && (
+          <Message
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...{
+              [message.type]: true,
+            }}
+            visible
+            content={t(message.content)}
+            onDismiss={onMessageDismiss}
+          />
+        )}
+        <Form onSubmit={handleSubmit}>
+          <div className={styles.text}>{t('common.newPassword')}</div>
+          <Input
+            fluid
+            ref={passwordField}
+            name="password"
+            value={data.password}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <div className={styles.text}>{t('common.currentPassword')}</div>
+          <Input
+            fluid
+            ref={currentPasswordField}
+            type="password"
+            name="currentPassword"
+            value={data.currentPassword}
+            className={styles.field}
+            onChange={handleFieldChange}
+          />
+          <Button
+            positive
+            content={t('action.save')}
+            loading={isSubmitting}
+            disabled={isSubmitting}
+          />
+        </Form>
+      </Popup.Content>
+    </>
+  );
+});
+
+EditPasswordStep.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
+  onUpdate: PropTypes.func.isRequired,
+  onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditPasswordStep.defaultProps = {
+  error: undefined,
+};
+
+export default EditPasswordStep;

client/src/components/UserPopup/EditPasswordStep.module.css

@@ -0,0 +1,3 @@
+.field {
+  margin-bottom: 8px;
+}

client/src/components/UserPopup/UserPopup.jsx

@@ -2,23 +2,40 @@ 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 { withPopup } from '../../lib/popup';
+import { Popup } from '../../lib/custom-ui';
 
-import { useSteps } from '../../../hooks';
+import { useSteps } from '../../hooks';
 import EditNameStep from './EditNameStep';
 import EditAvatarStep from './EditAvatarStep';
+import EditEmailStep from './EditEmailStep';
+import EditPasswordStep from './EditPasswordStep';
 
 import styles from './UserPopup.module.css';
 
 const StepTypes = {
   EDIT_NAME: 'EDIT_NAME',
   EDIT_AVATAR: 'EDIT_AVATAR',
+  EDIT_EMAIL: 'EDIT_EMAIL',
+  EDIT_PASSWORD: 'EDIT_PASSWORD',
 };
 
 const UserStep = React.memo(
   ({
-    name, avatar, isAvatarUploading, onUpdate, onAvatarUpload, onLogout, onClose,
+    email,
+    name,
+    avatar,
+    isAvatarUploading,
+    emailUpdateForm,
+    passwordUpdateForm,
+    onUpdate,
+    onAvatarUpload,
+    onEmailUpdate,
+    onEmailUpdateMessageDismiss,
+    onPasswordUpdate,
+    onPasswordUpdateMessageDismiss,
+    onLogout,
+    onClose,
   }) => {
     const [t] = useTranslation();
     const [step, openStep, handleBack] = useSteps();
@@ -31,6 +48,14 @@ const UserStep = React.memo(
       openStep(StepTypes.EDIT_AVATAR);
     }, [openStep]);
 
+    const handleEmailEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_EMAIL);
+    }, [openStep]);
+
+    const handlePasswordEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_PASSWORD);
+    }, [openStep]);
+
     const handleNameUpdate = useCallback(
       (newName) => {
         onUpdate({
@@ -68,6 +93,31 @@ const UserStep = React.memo(
               onBack={handleBack}
             />
           );
+        case StepTypes.EDIT_EMAIL:
+          return (
+            <EditEmailStep
+              defaultData={emailUpdateForm.data}
+              email={email}
+              isSubmitting={emailUpdateForm.isSubmitting}
+              error={emailUpdateForm.error}
+              onUpdate={onEmailUpdate}
+              onMessageDismiss={onEmailUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
+        case StepTypes.EDIT_PASSWORD:
+          return (
+            <EditPasswordStep
+              defaultData={passwordUpdateForm.data}
+              isSubmitting={passwordUpdateForm.isSubmitting}
+              error={passwordUpdateForm.error}
+              onUpdate={onPasswordUpdate}
+              onMessageDismiss={onPasswordUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
         default:
       }
     }
@@ -87,6 +137,16 @@ const UserStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleEmailEditClick}>
+              {t('action.editEmail', {
+                context: 'title',
+              })}
+            </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handlePasswordEditClick}>
+              {t('action.editPassword', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={onLogout}>
               {t('action.logOut', {
                 context: 'title',
@@ -100,11 +160,20 @@ const UserStep = React.memo(
 );
 
 UserStep.propTypes = {
+  email: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   avatar: PropTypes.string,
   isAvatarUploading: PropTypes.bool.isRequired,
+  /* eslint-disable react/forbid-prop-types */
+  emailUpdateForm: PropTypes.object.isRequired,
+  passwordUpdateForm: PropTypes.object.isRequired,
+  /* eslint-enable react/forbid-prop-types */
   onUpdate: PropTypes.func.isRequired,
   onAvatarUpload: PropTypes.func.isRequired,
+  onEmailUpdate: PropTypes.func.isRequired,
+  onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
+  onPasswordUpdate: PropTypes.func.isRequired,
+  onPasswordUpdateMessageDismiss: PropTypes.func.isRequired,
   onLogout: PropTypes.func.isRequired,
   onClose: PropTypes.func.isRequired,
 };

client/src/components/UsersModal/UsersModal.jsx

@@ -1,9 +1,7 @@
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import {
-  Button, Modal, Table,
-} from 'semantic-ui-react';
+import { Button, Modal, Table } from 'semantic-ui-react';
 
 import AddUserPopupContainer from '../../containers/AddUserPopupContainer';
 import Item from './Item';