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

// @flow
import React, { Component } from 'react';
import Helmet from 'react-helmet';
import { FormattedMessage as Message } from 'react-intl';

import styles from 'components/profile/profileForm.scss';
import { BackButton } from 'components/profile/ProfileForm';

import MfaEnable from './MfaEnable';
import MfaDisable from './MfaDisable';
import messages from './MultiFactorAuth.intl.json';

import type { MfaStep } from './MfaEnable';

class MultiFactorAuth extends Component<{
    step: MfaStep,
    isMfaEnabled: bool,
    onSubmit: Function,
    onComplete: Function,
    onChangeStep: Function
}> {
    render() {
        const {
            step,
            onSubmit,
            onComplete,
            onChangeStep,
            isMfaEnabled
        } = this.props;

        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>

                    {isMfaEnabled && (
                        <MfaDisable
                            onSubmit={onSubmit}
                            onComplete={onComplete}
                        />
                    )}
                </div>

                {isMfaEnabled || (
                    <MfaEnable
                        step={step}
                        onSubmit={onSubmit}
                        onChangeStep={onChangeStep}
                        onComplete={onComplete}
                    />
                )}
            </div>
        );
    }
}

export default MultiFactorAuth;