2017-08-20 21:15:21 +05:30
|
|
|
// @flow
|
2017-08-04 10:21:41 +05:30
|
|
|
import React, { Component } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2017-09-09 19:52:19 +05:30
|
|
|
import { connect } from 'react-redux';
|
2017-07-22 21:27:38 +05:30
|
|
|
|
2017-09-09 19:52:19 +05:30
|
|
|
import MultiFactorAuth from 'components/profile/multiFactorAuth';
|
|
|
|
import type { MfaStep } from 'components/profile/multiFactorAuth';
|
2017-08-20 21:15:21 +05:30
|
|
|
import type { FormModel } from 'components/ui/form';
|
2017-09-09 19:52:19 +05:30
|
|
|
import type { User } from 'components/user';
|
2017-07-22 21:27:38 +05:30
|
|
|
|
2017-08-23 02:01:41 +05:30
|
|
|
class MultiFactorAuthPage extends Component<{
|
2017-09-09 19:52:19 +05:30
|
|
|
user: User,
|
2017-08-23 02:01:41 +05:30
|
|
|
history: {
|
|
|
|
push: (string) => void
|
|
|
|
},
|
|
|
|
match: {
|
|
|
|
params: {
|
2017-09-09 19:52:19 +05:30
|
|
|
step?: '1' | '2' | '3'
|
2017-08-20 21:15:21 +05:30
|
|
|
}
|
2017-08-23 02:01:41 +05:30
|
|
|
}
|
|
|
|
}> {
|
2017-07-22 21:27:38 +05:30
|
|
|
static contextTypes = {
|
|
|
|
onSubmit: PropTypes.func.isRequired,
|
|
|
|
goToProfile: PropTypes.func.isRequired
|
|
|
|
};
|
|
|
|
|
|
|
|
componentWillMount() {
|
|
|
|
const step = this.props.match.params.step;
|
2017-09-09 19:52:19 +05:30
|
|
|
const {user} = this.props;
|
|
|
|
|
|
|
|
if (step) {
|
|
|
|
if (!/^[1-3]$/.test(step)) {
|
|
|
|
// wrong param value
|
|
|
|
this.props.history.push('/404');
|
|
|
|
return;
|
|
|
|
}
|
2017-07-22 21:27:38 +05:30
|
|
|
|
2017-09-09 19:52:19 +05:30
|
|
|
if (user.isOtpEnabled) {
|
|
|
|
this.props.history.push('/mfa');
|
|
|
|
}
|
2017-07-22 21:27:38 +05:30
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
render() {
|
2017-09-09 19:52:19 +05:30
|
|
|
const {user} = this.props;
|
2017-07-22 21:27:38 +05:30
|
|
|
|
|
|
|
return (
|
|
|
|
<MultiFactorAuth
|
2017-09-09 19:52:19 +05:30
|
|
|
isMfaEnabled={user.isOtpEnabled}
|
2017-07-22 21:27:38 +05:30
|
|
|
onSubmit={this.onSubmit}
|
2017-09-09 20:34:26 +05:30
|
|
|
step={this.getStep()}
|
2017-07-22 21:27:38 +05:30
|
|
|
onChangeStep={this.onChangeStep}
|
2017-08-20 21:15:21 +05:30
|
|
|
onComplete={this.onComplete}
|
2017-07-22 21:27:38 +05:30
|
|
|
/>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-09-09 20:34:26 +05:30
|
|
|
getStep(): MfaStep {
|
|
|
|
const step = (parseInt(this.props.match.params.step, 10) || 1) - 1;
|
|
|
|
|
|
|
|
if (step !== 0
|
|
|
|
&& step !== 1
|
|
|
|
&& step !== 2
|
|
|
|
) { // NOTE: flow does not understand Array.includes()
|
|
|
|
return 1;
|
|
|
|
}
|
|
|
|
|
|
|
|
return step;
|
|
|
|
}
|
|
|
|
|
2017-08-20 21:15:21 +05:30
|
|
|
onChangeStep = (step: MfaStep) => {
|
|
|
|
this.props.history.push(`/profile/mfa/step${step + 1}`);
|
2017-07-22 21:27:38 +05:30
|
|
|
};
|
|
|
|
|
2017-08-20 21:15:21 +05:30
|
|
|
onSubmit = (form: FormModel, sendData: () => Promise<*>) => {
|
2017-07-22 21:27:38 +05:30
|
|
|
return this.context.onSubmit({
|
|
|
|
form,
|
2017-08-20 21:15:21 +05:30
|
|
|
sendData
|
2017-07-22 21:27:38 +05:30
|
|
|
});
|
|
|
|
};
|
|
|
|
|
2017-08-20 21:15:21 +05:30
|
|
|
onComplete = () => {
|
|
|
|
this.context.goToProfile();
|
2017-07-22 21:27:38 +05:30
|
|
|
};
|
|
|
|
}
|
|
|
|
|
2018-05-03 10:45:09 +05:30
|
|
|
export default connect(({user}): { user: User } => ({user}))(MultiFactorAuthPage);
|