diff --git a/src/components/profile/changeEmail/ChangeEmail.jsx b/src/components/profile/changeEmail/ChangeEmail.jsx
index 8e41445..3a4c3e9 100644
--- a/src/components/profile/changeEmail/ChangeEmail.jsx
+++ b/src/components/profile/changeEmail/ChangeEmail.jsx
@@ -22,21 +22,34 @@ export default class ChangeEmail extends Component {
static displayName = 'ChangeEmail';
static propTypes = {
+ onChangeStep: PropTypes.func,
email: PropTypes.string.isRequired,
form: PropTypes.instanceOf(FormModel),
- onSubmit: PropTypes.func.isRequired
+ onSubmit: PropTypes.func.isRequired,
+ step: PropTypes.oneOf([0, 1, 2]),
+ code: PropTypes.string
};
static get defaultProps() {
return {
- form: new FormModel()
+ form: new FormModel(),
+ onChangeStep() {},
+ step: 0
};
}
state = {
- activeStep: 0
+ activeStep: this.props.step,
+ code: this.props.code || ''
};
+ componentWillReceiveProps(nextProps) {
+ this.setState({
+ activeStep: nextProps.step || this.state.activeStep,
+ code: nextProps.code || ''
+ });
+ }
+
render() {
const {form} = this.props;
const {activeStep} = this.state;
@@ -100,7 +113,8 @@ export default class ChangeEmail extends Component {
renderStepForms() {
const {form, email} = this.props;
- const {activeStep} = this.state;
+ const {activeStep, code} = this.state;
+ const isCodeEntered = !!this.props.code;
const activeStepHeight = this.state[`step${activeStep}Height`] || 0;
@@ -159,6 +173,9 @@ export default class ChangeEmail extends Component {
{
+ const {value} = event.target;
+
+ this.setState({
+ code: this.props.code || value
+ });
+ };
+
isLastStep() {
return this.state.activeStep + 1 === STEPS_TOTAL;
}
diff --git a/src/pages/profile/ProfileChangeEmailPage.jsx b/src/pages/profile/ProfileChangeEmailPage.jsx
index f9d3470..f9150a8 100644
--- a/src/pages/profile/ProfileChangeEmailPage.jsx
+++ b/src/pages/profile/ProfileChangeEmailPage.jsx
@@ -7,20 +7,49 @@ class ProfileChangeEmailPage extends Component {
static displayName = 'ProfileChangeEmailPage';
static propTypes = {
- email: PropTypes.string.isRequired
+ email: PropTypes.string.isRequired,
+ params: PropTypes.shape({
+ step: PropTypes.oneOf(['step1', 'step2', 'step3']),
+ code: PropTypes.string
+ })
+ };
+
+ static contextTypes = {
+ router: PropTypes.shape({
+ push: PropTypes.func
+ }).isRequired
};
form = new FormModel();
+ componentWillMount() {
+ const step = this.props.params.step;
+
+ if (step && !/^step\d$/.test(step)) {
+ // wrong param value
+ // TODO: probably we should decide with something better here
+ this.context.router.push('/');
+ }
+ }
+
render() {
+ const {params: {step, code}} = this.props;
+
return (
);
}
+ onChangeStep = (step) => {
+ this.context.router.push(`/profile/change-email/step${++step}`);
+ };
+
onSubmit = () => {
};
}
diff --git a/src/routes.js b/src/routes.js
index 7ea9791..738f1d5 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -61,7 +61,7 @@ export default function routesFactory(store) {
-
+
);