#305: always fetch secret key, when second mfa step mounted

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));
     });
 }

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';

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({
+        this.syncState(nextProps);
-            activeStep: typeof nextProps.step === 'number' ? nextProps.step : this.state.activeStep,
-            code: nextProps.code || ''
-        });
     }
 
     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});
+        this.nextStep();
-        mfa.getSecret().then((resp) => {
-            this.setState({
-                isLoading: false,
-                secret: resp.secret,
-                qrCodeSrc: resp.qr
-            });
-            this.nextStep();
-        });
         // const {activeStep} = this.state;
         // const form = this.props.stepForms[activeStep];
         // const promise = this.props.onSubmit(activeStep, form);

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']),
+                step: PropTypes.oneOf(['1', '2', '3'])
-                code: PropTypes.string
             })
         })
     };
@@ -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 (
             <MultiFactorAuth
                 onSubmit={this.onSubmit}
                 email={this.props.email}
                 lang={this.props.lang}
-                step={step.slice(-1) * 1 - 1}
+                step={step * 1 - 1}
                 onChangeStep={this.onChangeStep}
-                code={code}
             />
         );
     }

src/pages/profile/ProfilePage.js

@@ -40,11 +40,12 @@ class ProfilePage extends Component {
         return (
             <div className={styles.container}>
                 <Switch>
-                    <Route path="/profile/mfa/:step?" component={MultiFactorAuthPage} />
+                    <Route path="/profile/mfa/step:step([1-3])" component={MultiFactorAuthPage} />
-                    <Route path="/profile/change-password" component={ChangePasswordPage} />
+                    <Route path="/profile/mfa" exact component={MultiFactorAuthPage} />
-                    <Route path="/profile/change-username" component={ChangeUsernamePage} />
+                    <Route path="/profile/change-password" exact component={ChangePasswordPage} />
+                    <Route path="/profile/change-username" exact component={ChangeUsernamePage} />
                     <Route path="/profile/change-email/:step?/:code?" component={ChangeEmailPage} />
-                    <Route path="/profile" component={Profile} />
+                    <Route path="/profile" exact component={Profile} />
                     <Route path="/" exact component={Profile} />
                     <Redirect to="/404" />
                 </Switch>