accounts-frontend/packages/app/components/profile/multiFactorAuth/status/MfaStatus.tsx

import React from 'react';
import { FormattedMessage as Message } from 'react-intl';
import { ScrollIntoView } from 'app/components/ui/scroll';
import styles from 'app/components/profile/profileForm.scss';
import icons from 'app/components/ui/icons.scss';

import messages from '../MultiFactorAuth.intl.json';
import mfaStyles from '../mfa.scss';

export default function MfaStatus({ onProceed }: { onProceed: () => void }) {
  return (
    <div className={styles.formBody}>
      <ScrollIntoView />

      <div className={styles.formRow}>
        <div className={mfaStyles.bigIcon}>
          <span className={icons.lock} />
        </div>
        <p className={`${styles.description} ${mfaStyles.mfaTitle}`}>
          <Message {...messages.mfaEnabledForYourAcc} />
        </p>
      </div>

      <div className={styles.formRow}>
        <p className={styles.description}>
          <Message {...messages.mfaLoginFlowDesc} />
        </p>
      </div>

      <div className={`${styles.formRow} ${mfaStyles.disableMfa}`}>
        <p className={styles.description}>
          <a
            href="#"
            onClick={event => {
              event.preventDefault();
              onProceed();
            }}
          >
            <Message {...messages.disable} />
          </a>
        </p>
      </div>
    </div>
  );
}