accounts-frontend/src/components/profile/multiFactorAuth/confirmation/Confirmation.js

// @flow
import React from 'react';

import { FormattedMessage as Message } from 'react-intl';

import { Input, Form, FormModel } from 'components/ui/form';

import profileForm from 'components/profile/profileForm.scss';
import messages from '../MultiFactorAuth.intl.json';

export default function Confirmation({
  form,
  formRef = () => {},
  onSubmit,
  onInvalid,
}: {
  form: FormModel,
  formRef?: (el: ?Form) => void,
  onSubmit: () => Promise<*>,
  onInvalid: Function,
}) {
  return (
    <Form form={form} onSubmit={onSubmit} onInvalid={onInvalid} ref={formRef}>
      <div className={profileForm.formBody}>
        <div className={profileForm.formRow}>
          <p className={profileForm.description}>
            <Message {...messages.enterCodeFromApp} />
          </p>
        </div>

        <div className={profileForm.formRow}>
          <Input
            {...form.bindField('totp')}
            required
            autoComplete="off"
            skin="light"
            placeholder={messages.codePlaceholder}
          />
        </div>
      </div>
    </Form>
  );
}