People.Client: Dialogs: added ChangePhoneDialog component, applied to Profile component

products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/i18n.js

@@ -0,0 +1,56 @@
+import i18n from "i18next";
+import Backend from "i18next-xhr-backend";
+import config from "../../../../package.json";
+
+const newInstance = i18n.createInstance();
+
+if (process.env.NODE_ENV === "production") {
+  newInstance
+    .use(Backend)
+    .init({
+      lng: 'en',
+      fallbackLng: "en",
+
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+        format: function (value, format) {
+          if (format === 'lowercase') return value.toLowerCase();
+          return value;
+        }
+      },
+
+      react: {
+        useSuspense: true
+      },
+      backend: {
+        loadPath: `${config.homepage}/locales/ChangePhoneDialog/{{lng}}/{{ns}}.json`
+      }
+    });
+} else if (process.env.NODE_ENV === "development") {
+
+  const resources = {
+    en: {
+      translation: require("./locales/en/translation.json")
+    },
+    ru: {
+      translation: require("./locales/ru/translation.json")
+    },
+  };
+
+  newInstance.init({
+    resources: resources,
+    lng: 'en',
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    react: {
+      useSuspense: true
+    }
+  });
+}
+
+export default newInstance;

products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/index.js

@@ -0,0 +1,98 @@
+import React from "react";
+import { connect } from "react-redux";
+import PropTypes from "prop-types";
+import { withRouter } from "react-router";
+import {
+  toastr,
+  ModalDialog,
+  Button,
+  Text
+} from "asc-web-components";
+import { withTranslation, I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
+import styled from "styled-components";
+import { api } from "asc-web-common";
+
+const ModalDialogContainer = styled.div`
+
+  .margin-top {
+    margin-top: 16px;
+  }
+`;
+
+class PureChangePhoneDialog extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const { language } = props;
+
+    this.state = {
+      isRequestRunning: false
+    };
+
+    i18n.changeLanguage(language);
+  }
+  onChangePhone = () => {
+    const { onClose } = this.props;
+    this.setState({ isRequestRunning: true }, function () {
+      toastr.success("Context action: Change phone");
+      onClose();
+      this.setState({ isRequestRunning: false });
+  });
+};
+
+
+
+render() {
+  console.log("ChangePhoneDialog render");
+  const { t, visible, onClose } = this.props;
+  const { isRequestRunning } = this.state;
+
+  return (
+    <ModalDialogContainer>
+      <ModalDialog
+        visible={visible}
+        onClose={onClose}
+        headerContent={t('MobilePhoneChangeTitle')}
+        bodyContent={
+          <Text>
+            {t('MessageChangePhone')}
+          </Text>
+        }
+        footerContent={
+          <Button
+            key="SendBtn"
+            label={t('SendButton')}
+            size="medium"
+            primary={true}
+            onClick={this.onChangePhone}
+            isLoading={isRequestRunning}
+          />
+        }
+      />
+    </ModalDialogContainer>
+  );
+}
+}
+
+const ChangePhoneDialogContainer = withTranslation()(PureChangePhoneDialog);
+
+const ChangePhoneDialog = props => (
+  <I18nextProvider i18n={i18n}>
+    <ChangePhoneDialogContainer {...props} />
+  </I18nextProvider>
+);
+
+ChangePhoneDialog.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  user: PropTypes.object.isRequired,
+};
+
+function mapStateToProps(state) {
+  return {
+    language: state.auth.user.cultureName,
+  };
+}
+
+export default connect(mapStateToProps, {})(withRouter(ChangePhoneDialog));

products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/locales/en/translation.json

@@ -0,0 +1,6 @@
+{
+  "SendButton": "Send",
+  "MobilePhoneChangeTitle": "Change mobile phone",
+
+  "MessageChangePhone": "The instructions on how to change the user mobile number will be sent to the user email address"
+}

products/ASC.People/Client/src/components/dialogs/ChangePhoneDialog/locales/ru/translation.json

@@ -0,0 +1,6 @@
+{
+  "SendButton": "Отправить",
+  "MobilePhoneChangeTitle": "Изменение номера телефона",
+
+  "MessageChangePhone": "Инструкция по смене номера мобильного телефона будет отправлена на Вашу почту"
+}

products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/updateUserForm.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { withRouter } from 'react-router'
 import { connect } from 'react-redux'
-import { Avatar, Button, Textarea, Text, toastr, ModalDialog, TextInput, AvatarEditor, Link } from 'asc-web-components'
+import { Avatar, Button, Textarea, Text, toastr, ModalDialog, AvatarEditor, Link } from 'asc-web-components'
 import { withTranslation, Trans } from 'react-i18next';
 import { toEmployeeWrapper, getUserRole, getUserContactsPattern, getUserContacts, mapGroupsToGroupSelectorOptions, mapGroupSelectorOptionsToGroups, filterGroupSelectorOptions } from "../../../../../store/people/selectors";
 import { updateProfile, getUserPhoto } from '../../../../../store/profile/actions'
@@ -18,6 +18,7 @@ import styled from "styled-components";
 import { api } from "asc-web-common";
 import ChangeEmailDialog from '../../../../dialogs/ChangeEmailDialog';
 import ChangePasswordDialog from '../../../../dialogs/ChangePasswordDialog';
+import ChangePhoneDialog from '../../../../dialogs/ChangePhoneDialog';
 const { createThumbnailsAvatar, loadAvatar, deleteAvatar } = api.people;
 
 const Table = styled.table`
@@ -49,8 +50,8 @@ class UpdateUserForm extends React.Component {
 
     this.onEmailChange = this.onEmailChange.bind(this);
     this.onPasswordChange = this.toggleChangePasswordDialog.bind(this);
-    this.onPhoneChange = this.onPhoneChange.bind(this);
+    this.toggleChangePhoneDialog = this.toggleChangePhoneDialog.bind(this);
-    this.onSendPhoneChangeInstructions = this.onSendPhoneChangeInstructions.bind(this);
+
     this.onDialogClose = this.onDialogClose.bind(this);
 
     this.onContactsItemAdd = this.onContactsItemAdd.bind(this);
@@ -125,7 +126,8 @@ class UpdateUserForm extends React.Component {
         defaultWidth: 0,
         defaultHeight: 0
       },
-      changePasswordDialogVisible: false
+      changePasswordDialogVisible: false,
+      changePhoneDialogVisible: false
     };
 
     //Set unique contacts id 
@@ -205,34 +207,9 @@ class UpdateUserForm extends React.Component {
     this.setState({ changeEmailDialogVisible: false });
   }
 
-  toggleChangePasswordDialog = () => this.setState({ changePasswordDialogVisible: !this.state.changePasswordDialogVisible});
+  toggleChangePasswordDialog = () => this.setState({ changePasswordDialogVisible: !this.state.changePasswordDialogVisible });
 
-  onPhoneChange() {
+  toggleChangePhoneDialog = () => this.setState({ changePhoneDialogVisible: !this.state.changePhoneDialogVisible });
-    const dialog = {
-      visible: true,
-      header: "Change phone",
-      body: (
-        <Text>
-          The instructions on how to change the user mobile number will be sent to the user email address
-        </Text>
-      ),
-      buttons: [
-        <Button
-          key="SendBtn"
-          label="Send"
-          size="medium"
-          primary={true}
-          onClick={this.onSendPhoneChangeInstructions}
-        />
-      ]
-    };
-    this.setState({ dialog: dialog })
-  }
-
-  onSendPhoneChangeInstructions() {
-    toastr.success("Context action: Change phone");
-    this.onDialogClose();
-  }
 
   onDialogClose() {
     const dialog = { visible: false, newEmail: this.state.profile.email };
@@ -381,7 +358,7 @@ class UpdateUserForm extends React.Component {
   }
 
   render() {
-    const { isLoading, errors, profile, dialog, selector, changeEmailDialogVisible, changePasswordDialogVisible } = this.state;
+    const { isLoading, errors, profile, dialog, selector, changeEmailDialogVisible, changePasswordDialogVisible, changePhoneDialogVisible } = this.state;
     const { t, i18n } = this.props;
 
     const pattern = getUserContactsPattern();
@@ -526,7 +503,7 @@ class UpdateUserForm extends React.Component {
               inputValue={profile.phone}
               buttonText={t("ChangeButton")}
               buttonIsDisabled={isLoading}
-              buttonOnClick={this.onPhoneChange}
+              buttonOnClick={this.toggleChangePhoneDialog}
               buttonTabIndex={3}
             />
             <TextField
@@ -680,6 +657,14 @@ class UpdateUserForm extends React.Component {
             email={profile.email}
           />
         }
+
+        {changePhoneDialogVisible &&
+          <ChangePhoneDialog
+            visible={changePhoneDialogVisible}
+            onClose={this.toggleChangePhoneDialog}
+            user={profile}
+          />
+        }
       </>
     );
   };

products/ASC.People/Client/src/resourceConfig.json

@@ -40,6 +40,12 @@
       "SendButton"
     ]
   },
+  "ChangePhoneDialog":{
+    "Resource": [
+      "SendButton",
+      "MobilePhoneChangeTitle"
+    ]
+  },
   "DeleteProfileEverDialog":{
     "Resource": [
       "Confirmation",