accounts-frontend/src/pages/profile/MultiFactorAuthPage.js

88 lines
2.1 KiB
JavaScript
Raw Normal View History

// @flow
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';
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-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}
step={this.getStep()}
2017-07-22 21:27:38 +05:30
onChangeStep={this.onChangeStep}
onComplete={this.onComplete}
2017-07-22 21:27:38 +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;
}
onChangeStep = (step: MfaStep) => {
this.props.history.push(`/profile/mfa/step${step + 1}`);
2017-07-22 21:27:38 +05:30
};
onSubmit = (form: FormModel, sendData: () => Promise<*>) => {
2017-07-22 21:27:38 +05:30
return this.context.onSubmit({
form,
sendData
2017-07-22 21:27:38 +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);