diff --git a/src/components/profile/changeEmail/ChangeEmail.intl.json b/src/components/profile/changeEmail/ChangeEmail.intl.json new file mode 100644 index 0000000..5a8f433 --- /dev/null +++ b/src/components/profile/changeEmail/ChangeEmail.intl.json @@ -0,0 +1,17 @@ +{ + "changeEmailTitle": "Change E-mail", + "changeEmailDescription": "To change current account E-mail you must first verify that you own the current address and then confirm the new one.", + "currentAccountEmail": "Current account E-mail address:", + "pressButtonToStart": "Press the button below to send a message with the code for E-mail change initialization.", + "enterInitializationCode": "The E-mail with an initialization code for E-mail change procedure was sent to {email}. Please enter the code into the field below:", + + "enterNewEmail": "Then provide your new E-mail address, that you want to use with this account. You will be mailed with confirmation code.", + "finalizationCodeWasSentToEmail": "The E-mail change confirmation code was sent to {email}.", + "enterFinalizationCode": "In order to confirm your new E-mail, please enter the code received into the field below:", + + "newEmailPlaceholder": "Enter new E-mail", + "codePlaceholder": "Paste the code here", + "sendEmailButton": "Send E-mail", + "changeEmailButton": "Change E-mail", + "alreadyReceivedCode": "Already received code" +} diff --git a/src/components/profile/changeEmail/ChangeEmail.jsx b/src/components/profile/changeEmail/ChangeEmail.jsx index 3a4c3e9..264e500 100644 --- a/src/components/profile/changeEmail/ChangeEmail.jsx +++ b/src/components/profile/changeEmail/ChangeEmail.jsx @@ -12,19 +12,28 @@ import helpLinks from 'components/auth/helpLinks.scss'; import MeasureHeight from 'components/MeasureHeight'; import changeEmail from './changeEmail.scss'; -import messages from './ChangeEmail.messages'; +import messages from './ChangeEmail.intl.json'; const STEPS_TOTAL = 3; -// TODO: disable code field, if the code was passed through url - export default class ChangeEmail extends Component { static displayName = 'ChangeEmail'; static propTypes = { onChangeStep: PropTypes.func, email: PropTypes.string.isRequired, - form: PropTypes.instanceOf(FormModel), + stepForms: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => { + if (propValue.length !== 3) { + return new Error(`\`${propFullName}\` must be an array of 3 FormModel instances. Validation failed.`); + } + + if (!(propValue[key] instanceof FormModel)) { + return new Error( + `Invalid prop \`${propFullName}\` supplied to \ + \`${componentName}\`. Validation failed.` + ); + } + }), onSubmit: PropTypes.func.isRequired, step: PropTypes.oneOf([0, 1, 2]), code: PropTypes.string @@ -32,7 +41,11 @@ export default class ChangeEmail extends Component { static get defaultProps() { return { - form: new FormModel(), + stepForms: [ + new FormModel(), + new FormModel(), + new FormModel() + ], onChangeStep() {}, step: 0 }; @@ -45,18 +58,19 @@ export default class ChangeEmail extends Component { componentWillReceiveProps(nextProps) { this.setState({ - activeStep: nextProps.step || this.state.activeStep, + activeStep: typeof nextProps.step === 'number' ? nextProps.step : this.state.activeStep, code: nextProps.code || '' }); } render() { - const {form} = this.props; const {activeStep} = this.state; + const form = this.props.stepForms[activeStep]; return ( -