People.Client: Dialogs: added ChangePhoneDialog component, applied to Profile component
This commit is contained in:
parent
3177aa5026
commit
a601f8f93d
@ -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;
|
@ -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));
|
@ -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"
|
||||
}
|
@ -0,0 +1,6 @@
|
||||
{
|
||||
"SendButton": "Отправить",
|
||||
"MobilePhoneChangeTitle": "Изменение номера телефона",
|
||||
|
||||
"MessageChangePhone": "Инструкция по смене номера мобильного телефона будет отправлена на Вашу почту"
|
||||
}
|
@ -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.onSendPhoneChangeInstructions = this.onSendPhoneChangeInstructions.bind(this);
|
||||
this.toggleChangePhoneDialog = this.toggleChangePhoneDialog.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() {
|
||||
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();
|
||||
}
|
||||
toggleChangePhoneDialog = () => this.setState({ changePhoneDialogVisible: !this.state.changePhoneDialogVisible });
|
||||
|
||||
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}
|
||||
/>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
@ -40,6 +40,12 @@
|
||||
"SendButton"
|
||||
]
|
||||
},
|
||||
"ChangePhoneDialog":{
|
||||
"Resource": [
|
||||
"SendButton",
|
||||
"MobilePhoneChangeTitle"
|
||||
]
|
||||
},
|
||||
"DeleteProfileEverDialog":{
|
||||
"Resource": [
|
||||
"Confirmation",
|
||||
|
Loading…
Reference in New Issue
Block a user