accounts-frontend/src/components/profile/multiFactorAuth/MultiFactorAuth.tsx

69 lines
1.8 KiB
TypeScript
Raw Normal View History

2019-12-07 16:58:52 +05:30
import React from 'react';
2017-07-22 21:27:38 +05:30
import Helmet from 'react-helmet';
2017-09-09 19:52:19 +05:30
import { FormattedMessage as Message } from 'react-intl';
2017-07-22 21:27:38 +05:30
import styles from 'components/profile/profileForm.scss';
2017-09-09 19:52:19 +05:30
import { BackButton } from 'components/profile/ProfileForm';
2019-12-07 16:58:52 +05:30
import { FormModel } from 'components/ui/form';
2017-07-22 21:27:38 +05:30
2019-12-07 16:58:52 +05:30
import MfaEnable, { MfaStep } from './MfaEnable';
2017-09-09 19:52:19 +05:30
import MfaDisable from './MfaDisable';
2017-07-22 21:27:38 +05:30
import messages from './MultiFactorAuth.intl.json';
2019-12-07 16:58:52 +05:30
class MultiFactorAuth extends React.Component<{
step: MfaStep;
isMfaEnabled: boolean;
onSubmit: (form: FormModel, sendData: () => Promise<void>) => Promise<void>;
onComplete: () => void;
onChangeStep: (nextStep: number) => void;
2017-08-23 02:01:41 +05:30
}> {
render() {
const {
step,
onSubmit,
onComplete,
onChangeStep,
isMfaEnabled,
} = this.props;
2017-07-22 21:27:38 +05:30
return (
<div className={styles.contentWithBackButton}>
<BackButton />
<div className={styles.form}>
<div className={styles.formBody}>
<Message {...messages.mfaTitle}>
{pageTitle => (
<h3 className={styles.title}>
<Helmet title={pageTitle} />
{pageTitle}
</h3>
)}
</Message>
<div className={styles.formRow}>
<p className={styles.description}>
<Message {...messages.mfaDescription} />
</p>
</div>
</div>
2017-07-22 21:27:38 +05:30
{isMfaEnabled && (
<MfaDisable onSubmit={onSubmit} onComplete={onComplete} />
)}
</div>
2017-07-22 21:27:38 +05:30
{isMfaEnabled || (
<MfaEnable
step={step}
onSubmit={onSubmit}
onChangeStep={onChangeStep}
onComplete={onComplete}
/>
)}
</div>
);
}
2017-07-22 21:27:38 +05:30
}
2017-09-09 19:52:19 +05:30
export default MultiFactorAuth;