Add username to user

client/src/actions/entry/user.js

@@ -51,6 +51,18 @@ export const clearCurrentUserPasswordUpdateError = () => ({
   payload: {},
 });
 
+export const updateCurrentUserUsername = (data) => ({
+  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE,
+  payload: {
+    data,
+  },
+});
+
+export const clearCurrentUserUsernameUpdateError = () => ({
+  type: EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR,
+  payload: {},
+});
+
 export const uploadCurrentUserAvatar = (file) => ({
   type: EntryActionTypes.CURRENT_USER_AVATAR_UPLOAD,
   payload: {

client/src/actions/user.js

@@ -36,6 +36,13 @@ export const clearUserPasswordUpdateError = (id) => ({
   },
 });
 
+export const clearUserUsernameUpdateError = (id) => ({
+  type: ActionTypes.USER_USERNAME_UPDATE_ERROR_CLEAR,
+  payload: {
+    id,
+  },
+});
+
 export const deleteUser = (id) => ({
   type: ActionTypes.USER_DELETE,
   payload: {
@@ -202,6 +209,30 @@ export const updateUserPasswordFailed = (id, error) => ({
   },
 });
 
+export const updateUserUsernameRequested = (id, data) => ({
+  type: ActionTypes.USER_USERNAME_UPDATE_REQUESTED,
+  payload: {
+    id,
+    data,
+  },
+});
+
+export const updateUserUsernameSucceeded = (id, username) => ({
+  type: ActionTypes.USER_USERNAME_UPDATE_SUCCEEDED,
+  payload: {
+    id,
+    username,
+  },
+});
+
+export const updateUserUsernameFailed = (id, error) => ({
+  type: ActionTypes.USER_USERNAME_UPDATE_FAILED,
+  payload: {
+    id,
+    error,
+  },
+});
+
 export const uploadUserAvatarRequested = (id) => ({
   type: ActionTypes.USER_AVATAR_UPLOAD_REQUESTED,
   payload: {

client/src/api/users.js

@@ -16,6 +16,9 @@ const updateUserEmail = (id, data, headers) => socket.patch(`/users/${id}/email`
 const updateUserPassword = (id, data, headers) =>
   socket.patch(`/users/${id}/password`, data, headers);
 
+const updateUserUsername = (id, data, headers) =>
+  socket.patch(`/users/${id}/username`, data, headers);
+
 const uploadUserAvatar = (id, file, headers) =>
   http.post(
     `/users/${id}/upload-avatar`,
@@ -34,6 +37,7 @@ export default {
   updateUser,
   updateUserEmail,
   updateUserPassword,
+  updateUserUsername,
   uploadUserAvatar,
   deleteUser,
 };

client/src/components/AddUserPopup/AddUserPopup.jsx

@@ -8,6 +8,7 @@ import { withPopup } from '../../lib/popup';
 import { Input, Popup } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
+import { isUsername } from '../../utils/validator';
 
 import styles from './AddUserPopup.module.css';
 
@@ -16,17 +17,23 @@ const createMessage = (error) => {
     return error;
   }
 
-  if (error.message === 'User is already exist') {
-    return {
-      type: 'error',
-      content: 'common.userIsAlreadyExist',
-    };
+  switch (error.message) {
+    case 'Email already in use':
+      return {
+        type: 'error',
+        content: 'common.emailAlreadyInUse',
+      };
+    case 'Username already in use':
+      return {
+        type: 'error',
+        content: 'common.usernameAlreadyInUse',
+      };
+    default:
+      return {
+        type: 'warning',
+        content: 'common.unknownError',
+      };
   }
-
-  return {
-    type: 'warning',
-    content: 'common.unknownError',
-  };
 };
 
 const AddUserPopup = React.memo(
@@ -38,6 +45,7 @@ const AddUserPopup = React.memo(
       email: '',
       password: '',
       name: '',
+      username: '',
       ...defaultData,
     }));
 
@@ -46,12 +54,14 @@ const AddUserPopup = React.memo(
     const emailField = useRef(null);
     const passwordField = useRef(null);
     const nameField = useRef(null);
+    const usernameField = useRef(null);
 
     const handleSubmit = useCallback(() => {
       const cleanData = {
         ...data,
         email: data.email.trim(),
         name: data.name.trim(),
+        username: data.username.trim() || null,
       };
 
       if (!isEmail(cleanData.email)) {
@@ -69,6 +79,11 @@ const AddUserPopup = React.memo(
         return;
       }
 
+      if (cleanData.username && !isUsername(cleanData.username)) {
+        usernameField.current.select();
+        return;
+      }
+
       onCreate(cleanData);
     }, [onCreate, data]);
 
@@ -78,10 +93,20 @@ const AddUserPopup = React.memo(
 
     useEffect(() => {
       if (wasSubmitting && !isSubmitting) {
-        if (!error) {
+        if (error) {
+          switch (error.message) {
+            case 'Email already in use':
+              emailField.current.select();
+
+              break;
+            case 'Username already in use':
+              usernameField.current.select();
+
+              break;
+            default:
+          }
+        } else {
           onClose();
-        } else if (error.message === 'User is already exist') {
-          emailField.current.select();
         }
       }
     }, [isSubmitting, wasSubmitting, error, onClose]);
@@ -136,6 +161,22 @@ const AddUserPopup = React.memo(
               className={styles.field}
               onChange={handleFieldChange}
             />
+            <div className={styles.text}>
+              {t('common.username')} (
+              {t('common.optional', {
+                context: 'inline',
+              })}
+              )
+            </div>
+            <Input
+              fluid
+              ref={usernameField}
+              name="username"
+              value={data.username}
+              readOnly={isSubmitting}
+              className={styles.field}
+              onChange={handleFieldChange}
+            />
             <Button
               positive
               content={t('action.addUser')}

client/src/components/Header/Header.jsx

@@ -18,6 +18,8 @@ const Header = React.memo(
     onNotificationDelete,
     onUserUpdate,
     onUserAvatarUpload,
+    onUserUsernameUpdate,
+    onUserUsernameUpdateMessageDismiss,
     onUserEmailUpdate,
     onUserEmailUpdateMessageDismiss,
     onUserPasswordUpdate,
@@ -46,12 +48,16 @@ const Header = React.memo(
           <UserPopup
             email={user.email}
             name={user.name}
+            username={user.username}
             avatar={user.avatar}
             isAvatarUploading={user.isAvatarUploading}
+            usernameUpdateForm={user.usernameUpdateForm}
             emailUpdateForm={user.emailUpdateForm}
             passwordUpdateForm={user.passwordUpdateForm}
             onUpdate={onUserUpdate}
             onAvatarUpload={onUserAvatarUpload}
+            onUsernameUpdate={onUserUsernameUpdate}
+            onUsernameUpdateMessageDismiss={onUserUsernameUpdateMessageDismiss}
             onEmailUpdate={onUserEmailUpdate}
             onEmailUpdateMessageDismiss={onUserEmailUpdateMessageDismiss}
             onPasswordUpdate={onUserPasswordUpdate}
@@ -76,6 +82,8 @@ Header.propTypes = {
   onNotificationDelete: PropTypes.func.isRequired,
   onUserUpdate: PropTypes.func.isRequired,
   onUserAvatarUpload: PropTypes.func.isRequired,
+  onUserUsernameUpdate: PropTypes.func.isRequired,
+  onUserUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
   onUserEmailUpdate: PropTypes.func.isRequired,
   onUserEmailUpdateMessageDismiss: PropTypes.func.isRequired,
   onUserPasswordUpdate: PropTypes.func.isRequired,

client/src/components/Login/Login.jsx

@@ -8,6 +8,7 @@ import { useDidUpdate, usePrevious, useToggle } from '../../lib/hooks';
 import { Input } from '../../lib/custom-ui';
 
 import { useForm } from '../../hooks';
+import { isUsername } from '../../utils/validator';
 
 import styles from './Login.module.css';
 
@@ -17,12 +18,12 @@ const createMessage = (error) => {
   }
 
   switch (error.message) {
-    case 'Email does not exist':
+    case 'Invalid email or username':
       return {
         type: 'error',
-        content: 'common.emailDoesNotExist',
+        content: 'common.invalidEmailOrUsername',
       };
-    case 'Password is not valid':
+    case 'Invalid password':
       return {
         type: 'error',
         content: 'common.invalidPassword',
@@ -51,7 +52,7 @@ const Login = React.memo(
     const wasSubmitting = usePrevious(isSubmitting);
 
     const [data, handleFieldChange, setData] = useForm(() => ({
-      email: '',
+      emailOrUsername: '',
       password: '',
       ...defaultData,
     }));
@@ -59,17 +60,17 @@ const Login = React.memo(
     const message = useMemo(() => createMessage(error), [error]);
     const [focusPasswordFieldState, focusPasswordField] = useToggle();
 
-    const emailField = useRef(null);
+    const emailOrUsernameField = useRef(null);
     const passwordField = useRef(null);
 
     const handleSubmit = useCallback(() => {
       const cleanData = {
         ...data,
-        email: data.email.trim(),
+        emailOrUsername: data.emailOrUsername.trim(),
       };
 
-      if (!isEmail(cleanData.email)) {
-        emailField.current.select();
+      if (!isEmail(cleanData.emailOrUsername) && !isUsername(cleanData.emailOrUsername)) {
+        emailOrUsernameField.current.select();
         return;
       }
 
@@ -82,17 +83,17 @@ const Login = React.memo(
     }, [onAuthenticate, data]);
 
     useEffect(() => {
-      emailField.current.select();
+      emailOrUsernameField.current.select();
     }, []);
 
     useEffect(() => {
       if (wasSubmitting && !isSubmitting && error) {
         switch (error.message) {
-          case 'Email does not exist':
-            emailField.current.select();
+          case 'Invalid email or username':
+            emailOrUsernameField.current.select();
 
             break;
-          case 'Password is not valid':
+          case 'Invalid password':
             setData((prevData) => ({
               ...prevData,
               password: '',
@@ -136,12 +137,12 @@ const Login = React.memo(
                     )}
                     <Form size="large" onSubmit={handleSubmit}>
                       <div className={styles.inputWrapper}>
-                        <div className={styles.inputLabel}>{t('common.email')}</div>
+                        <div className={styles.inputLabel}>{t('common.emailOrUsername')}</div>
                         <Input
                           fluid
-                          ref={emailField}
-                          name="email"
-                          value={data.email}
+                          ref={emailOrUsernameField}
+                          name="emailOrUsername"
+                          value={data.emailOrUsername}
                           readOnly={isSubmitting}
                           className={styles.input}
                           onChange={handleFieldChange}

client/src/components/UserPopup/EditEmailStep.jsx

@@ -16,12 +16,12 @@ const createMessage = (error) => {
   }
 
   switch (error.message) {
-    case 'User is already exist':
+    case 'Email already in use':
       return {
         type: 'error',
-        content: 'common.userIsAlreadyExist',
+        content: 'common.emailAlreadyInUse',
       };
-    case 'Current password is not valid':
+    case 'Invalid current password':
       return {
         type: 'error',
         content: 'common.invalidCurrentPassword',
@@ -83,11 +83,11 @@ const EditEmailStep = React.memo(
       if (wasSubmitting && !isSubmitting) {
         if (error) {
           switch (error.message) {
-            case 'User is already exist':
+            case 'Email already in use':
               emailField.current.select();
 
               break;
-            case 'Current password is not valid':
+            case 'Invalid current password':
               setData((prevData) => ({
                 ...prevData,
                 currentPassword: '',

client/src/components/UserPopup/EditPasswordStep.jsx

@@ -15,7 +15,7 @@ const createMessage = (error) => {
   }
 
   switch (error.message) {
-    case 'Current password is not valid':
+    case 'Invalid current password':
       return {
         type: 'error',
         content: 'common.invalidCurrentPassword',
@@ -67,7 +67,7 @@ const EditPasswordStep = React.memo(
       if (wasSubmitting && !isSubmitting) {
         if (!error) {
           onClose();
-        } else if (error.message === 'Current password is not valid') {
+        } else if (error.message === 'Invalid current password') {
           setData((prevData) => ({
             ...prevData,
             currentPassword: '',

client/src/components/UserPopup/EditUsernameStep.jsx

@@ -0,0 +1,182 @@
+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 { Input, Popup } from '../../lib/custom-ui';
+
+import { useForm } from '../../hooks';
+import { isUsername } from '../../utils/validator';
+
+import styles from './EditUsernameStep.module.css';
+
+const createMessage = (error) => {
+  if (!error) {
+    return error;
+  }
+
+  switch (error.message) {
+    case 'Username already in use':
+      return {
+        type: 'error',
+        content: 'common.usernameAlreadyInUse',
+      };
+    case 'Invalid current password':
+      return {
+        type: 'error',
+        content: 'common.invalidCurrentPassword',
+      };
+    default:
+      return {
+        type: 'warning',
+        content: 'common.unknownError',
+      };
+  }
+};
+
+const EditUsernameStep = React.memo(
+  ({ defaultData, username, isSubmitting, error, onUpdate, onMessageDismiss, onBack, onClose }) => {
+    const [t] = useTranslation();
+    const wasSubmitting = usePrevious(isSubmitting);
+
+    const [data, handleFieldChange, setData] = useForm({
+      username: '',
+      currentPassword: '',
+      ...defaultData,
+    });
+
+    const message = useMemo(() => createMessage(error), [error]);
+    const [focusCurrentPasswordFieldState, focusCurrentPasswordField] = useToggle();
+
+    const usernameField = useRef(null);
+    const currentPasswordField = useRef(null);
+
+    const handleSubmit = useCallback(() => {
+      const cleanData = {
+        ...data,
+        username: data.username.trim() || null,
+      };
+
+      if (cleanData.username && !isUsername(cleanData.username)) {
+        usernameField.current.select();
+        return;
+      }
+
+      if (cleanData.username === username) {
+        onClose();
+        return;
+      }
+
+      if (!cleanData.currentPassword) {
+        currentPasswordField.current.focus();
+        return;
+      }
+
+      onUpdate(cleanData);
+    }, [username, onUpdate, onClose, data]);
+
+    useEffect(() => {
+      usernameField.current.select();
+    }, []);
+
+    useEffect(() => {
+      if (wasSubmitting && !isSubmitting) {
+        if (error) {
+          switch (error.message) {
+            case 'Username already in use':
+              usernameField.current.select();
+
+              break;
+            case 'Invalid current password':
+              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.editUsername', {
+            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.newUsername')}</div>
+            <Input
+              fluid
+              ref={usernameField}
+              name="username"
+              value={data.username}
+              placeholder={username}
+              className={styles.field}
+              onChange={handleFieldChange}
+            />
+            {data.username.trim() !== (username || '') && (
+              <>
+                <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')}
+              loading={isSubmitting}
+              disabled={isSubmitting}
+            />
+          </Form>
+        </Popup.Content>
+      </>
+    );
+  },
+);
+
+EditUsernameStep.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
+  onUpdate: PropTypes.func.isRequired,
+  onMessageDismiss: PropTypes.func.isRequired,
+  onBack: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+EditUsernameStep.defaultProps = {
+  username: undefined,
+  error: undefined,
+};
+
+export default EditUsernameStep;

client/src/components/UserPopup/EditUsernameStep.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/UserPopup.jsx

@@ -7,6 +7,7 @@ import { Popup } from '../../lib/custom-ui';
 
 import { useSteps } from '../../hooks';
 import EditNameStep from './EditNameStep';
+import EditUsernameStep from './EditUsernameStep';
 import EditAvatarStep from './EditAvatarStep';
 import EditEmailStep from './EditEmailStep';
 import EditPasswordStep from './EditPasswordStep';
@@ -15,6 +16,7 @@ import styles from './UserPopup.module.css';
 
 const StepTypes = {
   EDIT_NAME: 'EDIT_NAME',
+  EDIT_USERNAME: 'EDIT_USERNAME',
   EDIT_AVATAR: 'EDIT_AVATAR',
   EDIT_EMAIL: 'EDIT_EMAIL',
   EDIT_PASSWORD: 'EDIT_PASSWORD',
@@ -24,12 +26,16 @@ const UserStep = React.memo(
   ({
     email,
     name,
+    username,
     avatar,
     isAvatarUploading,
+    usernameUpdateForm,
     emailUpdateForm,
     passwordUpdateForm,
     onUpdate,
     onAvatarUpload,
+    onUsernameUpdate,
+    onUsernameUpdateMessageDismiss,
     onEmailUpdate,
     onEmailUpdateMessageDismiss,
     onPasswordUpdate,
@@ -48,6 +54,10 @@ const UserStep = React.memo(
       openStep(StepTypes.EDIT_AVATAR);
     }, [openStep]);
 
+    const handleUsernameEditClick = useCallback(() => {
+      openStep(StepTypes.EDIT_USERNAME);
+    }, [openStep]);
+
     const handleEmailEditClick = useCallback(() => {
       openStep(StepTypes.EDIT_EMAIL);
     }, [openStep]);
@@ -93,6 +103,19 @@ const UserStep = React.memo(
               onBack={handleBack}
             />
           );
+        case StepTypes.EDIT_USERNAME:
+          return (
+            <EditUsernameStep
+              defaultData={usernameUpdateForm.data}
+              username={username}
+              isSubmitting={usernameUpdateForm.isSubmitting}
+              error={usernameUpdateForm.error}
+              onUpdate={onUsernameUpdate}
+              onMessageDismiss={onUsernameUpdateMessageDismiss}
+              onBack={handleBack}
+              onClose={onClose}
+            />
+          );
         case StepTypes.EDIT_EMAIL:
           return (
             <EditEmailStep
@@ -124,7 +147,11 @@ const UserStep = React.memo(
 
     return (
       <>
-        <Popup.Header>{name}</Popup.Header>
+        <Popup.Header>
+          {t('common.userActions', {
+            context: 'title',
+          })}
+        </Popup.Header>
         <Popup.Content>
           <Menu secondary vertical className={styles.menu}>
             <Menu.Item className={styles.menuItem} onClick={handleNameEditClick}>
@@ -137,6 +164,11 @@ const UserStep = React.memo(
                 context: 'title',
               })}
             </Menu.Item>
+            <Menu.Item className={styles.menuItem} onClick={handleUsernameEditClick}>
+              {t('action.editUsername', {
+                context: 'title',
+              })}
+            </Menu.Item>
             <Menu.Item className={styles.menuItem} onClick={handleEmailEditClick}>
               {t('action.editEmail', {
                 context: 'title',
@@ -162,14 +194,18 @@ const UserStep = React.memo(
 UserStep.propTypes = {
   email: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
+  username: PropTypes.string,
   avatar: PropTypes.string,
   isAvatarUploading: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
+  usernameUpdateForm: PropTypes.object.isRequired,
   emailUpdateForm: PropTypes.object.isRequired,
   passwordUpdateForm: PropTypes.object.isRequired,
   /* eslint-enable react/forbid-prop-types */
   onUpdate: PropTypes.func.isRequired,
   onAvatarUpload: PropTypes.func.isRequired,
+  onUsernameUpdate: PropTypes.func.isRequired,
+  onUsernameUpdateMessageDismiss: PropTypes.func.isRequired,
   onEmailUpdate: PropTypes.func.isRequired,
   onEmailUpdateMessageDismiss: PropTypes.func.isRequired,
   onPasswordUpdate: PropTypes.func.isRequired,
@@ -179,6 +215,7 @@ UserStep.propTypes = {
 };
 
 UserStep.defaultProps = {
+  username: undefined,
   avatar: undefined,
 };
 

client/src/components/UsersModal/Item.jsx

@@ -7,7 +7,7 @@ import DeletePopup from '../DeletePopup';
 
 import styles from './Item.module.css';
 
-const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
+const Item = React.memo(({ name, username, email, isAdmin, onUpdate, onDelete }) => {
   const [t] = useTranslation();
 
   const handleIsAdminChange = useCallback(() => {
@@ -19,6 +19,7 @@ const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
   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} />
@@ -41,10 +42,15 @@ const Item = React.memo(({ name, email, isAdmin, onUpdate, onDelete }) => {
 
 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/UsersModal.jsx

@@ -34,8 +34,9 @@ const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
         <Table basic="very">
           <Table.Header>
             <Table.Row>
-              <Table.HeaderCell>{t('common.name')}</Table.HeaderCell>
-              <Table.HeaderCell>{t('common.email')}</Table.HeaderCell>
+              <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>
@@ -45,6 +46,7 @@ const UsersModal = React.memo(({ items, onUpdate, onDelete, onClose }) => {
               <Item
                 key={item.id}
                 name={item.name}
+                username={item.username}
                 email={item.email}
                 isAdmin={item.isAdmin}
                 onUpdate={(data) => handleUpdate(item.id, data)}

client/src/constants/ActionTypes.js

@@ -34,6 +34,7 @@ export default {
   USER_UPDATE: 'USER_UPDATE',
   USER_EMAIL_UPDATE_ERROR_CLEAR: 'USER_EMAIL_UPDATE_ERROR_CLEAR',
   USER_PASSWORD_UPDATE_ERROR_CLEAR: 'USER_PASSWORD_UPDATE_ERROR_CLEAR',
+  USER_USERNAME_UPDATE_ERROR_CLEAR: 'USER_USERNAME_UPDATE_ERROR_CLEAR',
   USER_DELETE: 'USER_DELETE',
   USER_TO_CARD_ADD: 'USER_TO_CARD_ADD',
   USER_FROM_CARD_REMOVE: 'USER_FROM_CARD_REMOVE',
@@ -56,6 +57,9 @@ export default {
   USER_PASSWORD_UPDATE_REQUESTED: 'USER_PASSWORD_UPDATE_REQUESTED',
   USER_PASSWORD_UPDATE_SUCCEEDED: 'USER_PASSWORD_UPDATE_SUCCEEDED',
   USER_PASSWORD_UPDATE_FAILED: 'USER_PASSWORD_UPDATE_FAILED',
+  USER_USERNAME_UPDATE_REQUESTED: 'USER_USERNAME_UPDATE_REQUESTED',
+  USER_USERNAME_UPDATE_SUCCEEDED: 'USER_USERNAME_UPDATE_SUCCEEDED',
+  USER_USERNAME_UPDATE_FAILED: 'USER_USERNAME_UPDATE_FAILED',
   USER_AVATAR_UPLOAD_REQUESTED: 'USER_AVATAR_UPLOAD_REQUESTED',
   USER_AVATAR_UPLOAD_SUCCEEDED: 'USER_AVATAR_UPLOAD_SUCCEEDED',
   USER_AVATAR_UPLOAD_FAILED: 'USER_AVATAR_UPLOAD_FAILED',

client/src/constants/EntryActionTypes.js

@@ -24,6 +24,8 @@ export default {
   CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_EMAIL_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_PASSWORD_UPDATE: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE`,
   CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR`,
+  CURRENT_USER_USERNAME_UPDATE: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE`,
+  CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR: `${PREFIX}/CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR`,
   CURRENT_USER_AVATAR_UPLOAD: `${PREFIX}/CURRENT_USER_AVATAR_UPLOAD`,
   USER_DELETE: `${PREFIX}/USER_DELETE`,
   USER_TO_CARD_ADD: `${PREFIX}/USER_TO_CARD_ADD`,

client/src/containers/HeaderContainer.js

@@ -5,12 +5,14 @@ import { currentUserSelector, notificationsForCurrentUserSelector } from '../sel
 import {
   clearCurrentUserEmailUpdateError,
   clearCurrentUserPasswordUpdateError,
+  clearCurrentUserUsernameUpdateError,
   deleteNotification,
   logout,
   openUsersModal,
   updateCurrentUser,
   updateCurrentUserEmail,
   updateCurrentUserPassword,
+  updateCurrentUserUsername,
   uploadCurrentUserAvatar,
 } from '../actions/entry';
 import Header from '../components/Header';
@@ -33,6 +35,8 @@ const mapDispatchToProps = (dispatch) =>
       onNotificationDelete: deleteNotification,
       onUserUpdate: updateCurrentUser,
       onUserAvatarUpload: uploadCurrentUserAvatar,
+      onUserUsernameUpdate: updateCurrentUserUsername,
+      onUserUsernameUpdateMessageDismiss: clearCurrentUserUsernameUpdateError,
       onUserEmailUpdate: updateCurrentUserEmail,
       onUserEmailUpdateMessageDismiss: clearCurrentUserEmailUpdateError,
       onUserPasswordUpdate: updateCurrentUserPassword,

client/src/locales/en-US/app.js

@@ -58,6 +58,9 @@ export default {
       editPassword_title: 'Edit Password',
       editProject_title: 'Edit Project',
       editTimer_title: 'Edit Timer',
+      editUsername_title: 'Edit Username',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail already in use',
       enterCardTitle: 'Enter card title...',
       enterDescription: 'Enter description...',
       enterListTitle: 'Enter list title...',
@@ -74,10 +77,12 @@ export default {
       name: 'Name',
       newEmail: 'New e-mail',
       newPassword: 'New password',
+      newUsername: 'New username',
       noConnectionToServer: 'No connection to server',
       notifications: 'Notifications',
       noUnreadNotifications: 'No unread notifications',
       openBoard_title: 'Open Board',
+      optional_inline: 'optional',
       projectNotFound_title: 'Project Not Found',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Refresh the page</0> to load last data<br />and receive updates',
@@ -88,12 +93,14 @@ export default {
       time: 'Time',
       timer: 'Timer',
       title: 'Title',
+      userActions_title: 'User Actions',
       userAddedThisCardToList: '<0>{{user}}</0><1> added this card to {{list}}</1>',
-      userIsAlreadyExist: 'User is already exist',
       userLeftNewCommentToCard: '{{user}} left a new comment «{{comment}}» to <2>{{card}}</2>',
       userMovedCardFromListToList: '{{user}} moved <2>{{card}}</2> from {{fromList}} to {{toList}}',
       userMovedThisCardFromListToList:
         '<0>{{user}}</0><1> moved this card from {{fromList}} to {{toList}}</1>',
+      username: 'Username',
+      usernameAlreadyInUse: 'Username already in use',
       users: 'Users',
       writeComment: 'Write a comment...',
     },
@@ -137,6 +144,7 @@ export default {
       editTask_title: 'Edit Task',
       editTimer_title: 'Edit Timer',
       editTitle_title: 'Edit Title',
+      editUsername_title: 'Edit Username',
       logOut_title: 'Log Out',
       remove: 'Remove',
       removeFromProject: 'Remove from project',

client/src/locales/en-US/embed.js

@@ -1,8 +1,8 @@
 export default {
   translation: {
     common: {
-      email: 'E-mail',
-      emailDoesNotExist: 'E-mail does not exist',
+      emailOrUsername: 'E-mail or username',
+      invalidEmailOrUsername: 'Invalid e-mail or username',
       invalidPassword: 'Invalid password',
       logInToPlanka: 'Log in to Planka',
       noInternetConnection: 'No internet connection',

client/src/locales/ru-RU/app.js

@@ -62,6 +62,9 @@ export default {
       editPassword: 'Изменение пароля',
       editProject: 'Изменение проекта',
       editTimer: 'Изменение таймера',
+      editUsername: 'Изменение имени пользователя',
+      email: 'E-mail',
+      emailAlreadyInUse: 'E-mail уже занят',
       enterCardTitle: 'Введите заголовок для этой карточки...',
       enterDescription: 'Введите описание...',
       enterListTitle: 'Введите заголовок списка...',
@@ -78,10 +81,12 @@ export default {
       name: 'Имя',
       newEmail: 'Новый e-mail',
       newPassword: 'Новый пароль',
+      newUsername: 'Новое имя пользователя',
       noConnectionToServer: 'Нет соединения с сервером',
       notifications: 'Уведомления',
       noUnreadNotifications: 'Уведомлений нет',
       openBoard: 'Откройте доску',
+      optional_inline: 'необязательно',
       projectNotFound: 'Доска не найдена',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Обновите страницу</0>, чтобы загрузить<br />актуальные данные и получать обновления',
@@ -92,13 +97,15 @@ export default {
       time: 'Время',
       timer: 'Таймер',
       title: 'Название',
+      userActions_title: 'Действия с пользователем',
       userAddedThisCardToList: '<0>{{user}}</0><1> добавил(а) эту карточку в {{list}}</1>',
-      userIsAlreadyExist: 'Пользователь уже существует',
       userLeftNewCommentToCard: '{{user}} оставил(а) комментарий «{{comment}}» к <2>{{card}}</2>',
       userMovedCardFromListToList:
         '{{user}} переместил(а) <2>{{card}}</2> из {{fromList}} в {{toList}}',
       userMovedThisCardFromListToList:
         '<0>{{user}}</0><1> переместил(а) эту карточку из {{fromList}} в {{toList}}</1>',
+      username: 'Имя пользователя',
+      usernameAlreadyInUse: 'Имя пользователя уже занято',
       users: 'Пользователи',
       writeComment: 'Напишите комментарий...',
     },
@@ -138,6 +145,7 @@ export default {
       editTask: 'Изменить задачу',
       editTimer: 'Изменить таймер',
       editTitle: 'Изменить название',
+      editUsername_title: 'Изменить имя пользователя',
       logOut: 'Выйти',
       remove: 'Убрать',
       removeFromProject: 'Удалить из проекта',

client/src/locales/ru-RU/embed.js

@@ -1,8 +1,8 @@
 export default {
   translation: {
     common: {
-      email: 'E-mail',
-      emailDoesNotExist: 'Неверный e-mail',
+      emailOrUsername: 'E-mail или имя пользователя',
+      invalidEmailOrUsername: 'Неверный e-mail или имя пользователя',
       invalidPassword: 'Неверный пароль',
       logInToPlanka: 'Вход в Planka',
       noInternetConnection: 'Нет соединения',

client/src/models/User.js

@@ -20,6 +20,15 @@ const DEFAULT_PASSWORD_UPDATE_FORM = {
   error: null,
 };
 
+const DEFAULT_USERNAME_UPDATE_FORM = {
+  data: {
+    username: '',
+    currentPassword: '',
+  },
+  isSubmitting: false,
+  error: null,
+};
+
 export default class extends Model {
   static modelName = 'User';
 
@@ -41,6 +50,9 @@ export default class extends Model {
     passwordUpdateForm: attr({
       getDefault: () => DEFAULT_PASSWORD_UPDATE_FORM,
     }),
+    usernameUpdateForm: attr({
+      getDefault: () => DEFAULT_USERNAME_UPDATE_FORM,
+    }),
   };
 
   static reducer({ type, payload }, User) {
@@ -92,6 +104,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_DELETE:
         User.withId(payload.id).deleteWithRelated();
 
@@ -167,6 +191,40 @@ export default class extends Model {
 
         break;
       }
+      case ActionTypes.USER_USERNAME_UPDATE_REQUESTED: {
+        const userModel = User.withId(payload.id);
+
+        userModel.update({
+          usernameUpdateForm: {
+            ...userModel.usernameUpdateForm,
+            data: payload.data,
+            isSubmitting: true,
+          },
+        });
+
+        break;
+      }
+      case ActionTypes.USER_USERNAME_UPDATE_SUCCEEDED: {
+        User.withId(payload.id).update({
+          username: payload.username,
+          usernameUpdateForm: DEFAULT_USERNAME_UPDATE_FORM,
+        });
+
+        break;
+      }
+      case ActionTypes.USER_USERNAME_UPDATE_FAILED: {
+        const userModel = User.withId(payload.id);
+
+        userModel.update({
+          usernameUpdateForm: {
+            ...userModel.usernameUpdateForm,
+            isSubmitting: false,
+            error: payload.error,
+          },
+        });
+
+        break;
+      }
       case ActionTypes.USER_AVATAR_UPLOAD_REQUESTED:
         User.withId(payload.id).update({
           isAvatarUploading: true,

client/src/reducers/forms/authenticate.js

@@ -2,7 +2,7 @@ import ActionTypes from '../../constants/ActionTypes';
 
 const initialState = {
   data: {
-    email: '',
+    emailOrUsername: '',
     password: '',
   },
   isSubmitting: false,

client/src/reducers/forms/user-create.js

@@ -4,6 +4,7 @@ const initialState = {
   data: {
     email: '',
     name: '',
+    username: '',
   },
   isSubmitting: false,
   error: null,

client/src/sagas/app/requests/user.js

@@ -20,6 +20,9 @@ import {
   updateUserPasswordSucceeded,
   updateUserRequested,
   updateUserSucceeded,
+  updateUserUsernameFailed,
+  updateUserUsernameRequested,
+  updateUserUsernameSucceeded,
   uploadUserAvatarFailed,
   uploadUserAvatarRequested,
   uploadUserAvatarSucceeded,
@@ -146,6 +149,30 @@ export function* updateUserPasswordRequest(id, data) {
   }
 }
 
+export function* updateUserUsernameRequest(id, data) {
+  yield put(updateUserUsernameRequested(id, data));
+
+  try {
+    const { item } = yield call(request, api.updateUserUsername, id, data);
+
+    const action = updateUserUsernameSucceeded(id, item);
+    yield put(action);
+
+    return {
+      success: true,
+      payload: action.payload,
+    };
+  } catch (error) {
+    const action = updateUserUsernameFailed(id, error);
+    yield put(action);
+
+    return {
+      success: false,
+      payload: action.payload,
+    };
+  }
+}
+
 export function* uploadUserAvatarRequest(id, file) {
   yield put(uploadUserAvatarRequested(id));
 

client/src/sagas/app/services/user.js

@@ -8,6 +8,7 @@ import {
   updateUserEmailRequest,
   updateUserPasswordRequest,
   updateUserRequest,
+  updateUserUsernameRequest,
   uploadUserAvatarRequest,
 } from '../requests';
 import { currentUserIdSelector, pathSelector } from '../../../selectors';
@@ -17,6 +18,7 @@ import {
   clearUserCreateError,
   clearUserEmailUpdateError,
   clearUserPasswordUpdateError,
+  clearUserUsernameUpdateError,
   createUser,
   deleteUser,
   updateUser,
@@ -84,6 +86,26 @@ export function* clearCurrentUserPasswordUpdateErrorService() {
   yield call(clearUserPasswordUpdateErrorService, id);
 }
 
+export function* updateUserUsernameService(id, data) {
+  yield call(updateUserUsernameRequest, id, data);
+}
+
+export function* updateCurrentUserUsernameService(data) {
+  const id = yield select(currentUserIdSelector);
+
+  yield call(updateUserUsernameService, id, data);
+}
+
+export function* clearUserUsernameUpdateErrorService(id) {
+  yield put(clearUserUsernameUpdateError(id));
+}
+
+export function* clearCurrentUserUsernameUpdateErrorService() {
+  const id = yield select(currentUserIdSelector);
+
+  yield call(clearUserUsernameUpdateErrorService, id);
+}
+
 export function* uploadUserAvatarService(id, file) {
   yield call(uploadUserAvatarRequest, id, file);
 }

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

@@ -6,6 +6,7 @@ import {
   addUserToFilterInCurrentBoardService,
   clearCurrentUserEmailUpdateErrorService,
   clearCurrentUserPasswordUpdateErrorService,
+  clearCurrentUserUsernameUpdateErrorService,
   clearUserCreateErrorService,
   createUserService,
   deleteUserService,
@@ -16,6 +17,7 @@ import {
   updateCurrentUserEmailService,
   updateCurrentUserPasswordService,
   updateCurrentUserService,
+  updateCurrentUserUsernameService,
   uploadCurrentUserAvatarService,
 } from '../services';
 import EntryActionTypes from '../../../constants/EntryActionTypes';
@@ -42,6 +44,12 @@ export default function* () {
     takeLatest(EntryActionTypes.CURRENT_USER_PASSWORD_UPDATE_ERROR_CLEAR, () =>
       clearCurrentUserPasswordUpdateErrorService(),
     ),
+    takeLatest(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE, ({ payload: { data } }) =>
+      updateCurrentUserUsernameService(data),
+    ),
+    takeLatest(EntryActionTypes.CURRENT_USER_USERNAME_UPDATE_ERROR_CLEAR, () =>
+      clearCurrentUserUsernameUpdateErrorService(),
+    ),
     takeLatest(EntryActionTypes.CURRENT_USER_AVATAR_UPLOAD, ({ payload: { file } }) =>
       uploadCurrentUserAvatarService(file),
     ),

client/src/utils/validator.js

@@ -0,0 +1,6 @@
+const USERNAME_REGEX = /^[a-zA-Z0-9]+(_?[a-zA-Z0-9])*$/;
+
+// eslint-disable-next-line import/prefer-default-export
+export const isUsername = (string) => {
+  return string.length >= 3 && string.length <= 16 && USERNAME_REGEX.test(string);
+};