Add phone and organization fields to user

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

@@ -18,6 +18,8 @@ const AccountPane = React.memo(
     name,
     username,
     avatar,
+    phone,
+    organization,
     isAvatarUploading,
     usernameUpdateForm,
     emailUpdateForm,
@@ -53,6 +55,8 @@ const AccountPane = React.memo(
         <EditInformation
           defaultData={{
             name,
+            phone,
+            organization,
           }}
           onUpdate={onUpdate}
         />
@@ -120,6 +124,8 @@ AccountPane.propTypes = {
   name: PropTypes.string.isRequired,
   username: PropTypes.string,
   avatar: PropTypes.string,
+  phone: PropTypes.string,
+  organization: PropTypes.string,
   isAvatarUploading: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,
@@ -139,6 +145,8 @@ AccountPane.propTypes = {
 AccountPane.defaultProps = {
   username: undefined,
   avatar: undefined,
+  phone: undefined,
+  organization: undefined,
 };
 
 export default AccountPane;

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

@@ -1,5 +1,6 @@
 import dequal from 'dequal';
-import React, { useCallback, useRef } from 'react';
+import pickBy from 'lodash/pickBy';
+import React, { useCallback, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
 import { Button, Form, Input } from 'semantic-ui-react';
@@ -11,26 +12,33 @@ import styles from './EditInformation.module.css';
 const EditInformation = React.memo(({ defaultData, onUpdate }) => {
   const [t] = useTranslation();
 
-  const [data, handleFieldChange] = useForm({
+  const [data, handleFieldChange] = useForm(() => ({
     name: '',
-    ...defaultData,
-  });
+    phone: '',
+    organization: '',
+    ...pickBy(defaultData),
+  }));
+
+  const cleanData = useMemo(
+    () => ({
+      ...data,
+      name: data.name.trim(),
+      phone: data.phone.trim() || null,
+      organization: data.organization.trim() || null,
+    }),
+    [data],
+  );
 
   const nameField = useRef(null);
 
   const handleSubmit = useCallback(() => {
-    const cleanData = {
-      ...data,
-      name: data.name.trim(),
-    };
-
     if (!cleanData.name) {
       nameField.current.select();
       return;
     }
 
     onUpdate(cleanData);
-  }, [onUpdate, data]);
+  }, [onUpdate, cleanData]);
 
   return (
     <Form onSubmit={handleSubmit}>
@@ -43,7 +51,23 @@ const EditInformation = React.memo(({ defaultData, onUpdate }) => {
         className={styles.field}
         onChange={handleFieldChange}
       />
-      <Button positive disabled={dequal(data, defaultData)} content={t('action.save')} />
+      <div className={styles.text}>{t('common.phone')}</div>
+      <Input
+        fluid
+        name="phone"
+        value={data.phone}
+        className={styles.field}
+        onChange={handleFieldChange}
+      />
+      <div className={styles.text}>{t('common.organization')}</div>
+      <Input
+        fluid
+        name="organization"
+        value={data.organization}
+        className={styles.field}
+        onChange={handleFieldChange}
+      />
+      <Button positive disabled={dequal(cleanData, defaultData)} content={t('action.save')} />
     </Form>
   );
 });

client/src/components/UserSettingsModal/UserSettingsModal.jsx

@@ -11,6 +11,8 @@ const UserSettingsModal = React.memo(
     name,
     username,
     avatar,
+    phone,
+    organization,
     isAvatarUploading,
     usernameUpdateForm,
     emailUpdateForm,
@@ -38,6 +40,8 @@ const UserSettingsModal = React.memo(
             name={name}
             username={username}
             avatar={avatar}
+            phone={phone}
+            organization={organization}
             isAvatarUploading={isAvatarUploading}
             usernameUpdateForm={usernameUpdateForm}
             emailUpdateForm={emailUpdateForm}
@@ -70,6 +74,8 @@ UserSettingsModal.propTypes = {
   name: PropTypes.string.isRequired,
   username: PropTypes.string,
   avatar: PropTypes.string,
+  phone: PropTypes.string,
+  organization: PropTypes.string,
   isAvatarUploading: PropTypes.bool.isRequired,
   /* eslint-disable react/forbid-prop-types */
   usernameUpdateForm: PropTypes.object.isRequired,
@@ -90,6 +96,8 @@ UserSettingsModal.propTypes = {
 UserSettingsModal.defaultProps = {
   username: undefined,
   avatar: undefined,
+  phone: undefined,
+  organization: undefined,
 };
 
 export default UserSettingsModal;

client/src/containers/UserSettingsModalContainer.js

@@ -21,6 +21,8 @@ const mapStateToProps = (state) => {
     name,
     username,
     avatar,
+    phone,
+    organization,
     isAvatarUploading,
     emailUpdateForm,
     passwordUpdateForm,
@@ -32,6 +34,8 @@ const mapStateToProps = (state) => {
     name,
     username,
     avatar,
+    phone,
+    organization,
     isAvatarUploading,
     emailUpdateForm,
     passwordUpdateForm,

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

@@ -84,6 +84,8 @@ export default {
       noUnreadNotifications: 'No unread notifications',
       openBoard_title: 'Open Board',
       optional_inline: 'optional',
+      organization: 'Organization',
+      phone: 'Phone',
       projectNotFound_title: 'Project Not Found',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Refresh the page</0> to load last data<br />and receive updates',

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

@@ -88,6 +88,8 @@ export default {
       noUnreadNotifications: 'Уведомлений нет',
       openBoard: 'Откройте доску',
       optional_inline: 'необязательно',
+      organization: 'Организация',
+      phone: 'Телефон',
       projectNotFound: 'Доска не найдена',
       refreshPageToLoadLastDataAndReceiveUpdates:
         '<0>Обновите страницу</0>, чтобы загрузить<br />актуальные данные и получать обновления',

client/src/models/User.js

@@ -37,6 +37,8 @@ export default class extends Model {
     email: attr(),
     name: attr(),
     avatar: attr(),
+    phone: attr(),
+    organization: attr(),
     deletedAt: attr(),
     isAdmin: attr({
       getDefault: () => false,