diff --git a/src/components/MeasureHeight.js b/src/components/MeasureHeight.js
index e42509e..04a063e 100644
--- a/src/components/MeasureHeight.js
+++ b/src/components/MeasureHeight.js
@@ -35,7 +35,7 @@ export default class MeasureHeight extends PureComponent {
onMeasure: (height) => {} // eslint-disable-line
};
- el: HTMLDivElement;
+ el: ?HTMLDivElement;
componentDidMount() {
this.measure();
@@ -58,6 +58,6 @@ export default class MeasureHeight extends PureComponent {
}
measure = debounce(() => {
- rAF(() => this.props.onMeasure(this.el.offsetHeight));
+ rAF(() => this.el && this.props.onMeasure(this.el.offsetHeight));
});
}
diff --git a/src/components/profile/changeEmail/ChangeEmail.js b/src/components/profile/changeEmail/ChangeEmail.js
index 85dfa24..28e531b 100644
--- a/src/components/profile/changeEmail/ChangeEmail.js
+++ b/src/components/profile/changeEmail/ChangeEmail.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import { FormattedMessage as Message } from 'react-intl';
import Helmet from 'react-helmet';
diff --git a/src/components/profile/multiFactorAuth/MultiFactorAuth.js b/src/components/profile/multiFactorAuth/MultiFactorAuth.js
index 496cc7b..d38965d 100644
--- a/src/components/profile/multiFactorAuth/MultiFactorAuth.js
+++ b/src/components/profile/multiFactorAuth/MultiFactorAuth.js
@@ -55,11 +55,12 @@ export default class MultiFactorAuth extends Component {
newEmail: null
};
+ componentWillMount() {
+ this.syncState(this.props);
+ }
+
componentWillReceiveProps(nextProps: Props) {
- this.setState({
- activeStep: typeof nextProps.step === 'number' ? nextProps.step : this.state.activeStep,
- code: nextProps.code || ''
- });
+ this.syncState(nextProps);
}
render() {
@@ -162,6 +163,25 @@ export default class MultiFactorAuth extends Component {
);
}
+ syncState(props: Props) {
+ if (props.step === 1) {
+ this.setState({isLoading: true});
+ mfa.getSecret().then((resp) => {
+ this.setState({
+ isLoading: false,
+ activeStep: props.step,
+ secret: resp.secret,
+ qrCodeSrc: resp.qr
+ });
+ });
+ } else {
+ this.setState({
+ activeStep: typeof props.step === 'number' ? props.step : this.state.activeStep,
+ code: props.code || ''
+ });
+ }
+ }
+
nextStep() {
const {activeStep} = this.state;
const nextStep = activeStep + 1;
@@ -196,15 +216,7 @@ export default class MultiFactorAuth extends Component {
};
onFormSubmit = () => {
- this.setState({isLoading: true});
- mfa.getSecret().then((resp) => {
- this.setState({
- isLoading: false,
- secret: resp.secret,
- qrCodeSrc: resp.qr
- });
- this.nextStep();
- });
+ this.nextStep();
// const {activeStep} = this.state;
// const form = this.props.stepForms[activeStep];
// const promise = this.props.onSubmit(activeStep, form);
diff --git a/src/pages/profile/MultiFactorAuthPage.js b/src/pages/profile/MultiFactorAuthPage.js
index d97a93a..a38afbc 100644
--- a/src/pages/profile/MultiFactorAuthPage.js
+++ b/src/pages/profile/MultiFactorAuthPage.js
@@ -1,4 +1,5 @@
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
import MultiFactorAuth from 'components/profile/multiFactorAuth';
@@ -13,8 +14,7 @@ class MultiFactorAuthPage extends Component {
}).isRequired,
match: PropTypes.shape({
params: PropTypes.shape({
- step: PropTypes.oneOf(['step1', 'step2', 'step3']),
- code: PropTypes.string
+ step: PropTypes.oneOf(['1', '2', '3'])
})
})
};
@@ -27,23 +27,22 @@ class MultiFactorAuthPage extends Component {
componentWillMount() {
const step = this.props.match.params.step;
- if (step && !/^step[123]$/.test(step)) {
+ if (step && !/^[1-3]$/.test(step)) {
// wrong param value
this.props.history.push('/404');
}
}
render() {
- const {step = 'step1', code} = this.props.match.params;
+ const {step = '1'} = this.props.match.params;
return (