standardnotes-app-web/app/assets/javascripts/preferences/panes/two-factor-auth/Verification.tsx

import { Button } from '@/components/Button';
import { DecoratedInput } from '@/components/DecoratedInput';
import { observer } from 'mobx-react-lite';
import { FunctionComponent } from 'preact';
import { TwoFactorActivation } from './TwoFactorActivation';
import {
  TwoFactorDialog,
  TwoFactorDialogLabel,
  TwoFactorDialogDescription,
  TwoFactorDialogButtons,
} from './TwoFactorDialog';

export const Verification: FunctionComponent<{
  activation: TwoFactorActivation;
}> = observer(({ activation: act }) => {
  const borderInv =
    act.verificationStatus === 'invalid' ? 'border-dark-red' : '';
  return (
    <TwoFactorDialog>
      <TwoFactorDialogLabel closeDialog={act.cancelActivation}>
        Step 3 of 3 - Verification
      </TwoFactorDialogLabel>
      <TwoFactorDialogDescription>
        <div className="flex-grow flex flex-col gap-1">
          <div className="flex flex-row items-center gap-2">
            <div className="text-sm">
              ・Enter your <b>secret key</b>:
            </div>
            <DecoratedInput
              className={borderInv}
              onChange={act.setInputSecretKey}
            />
          </div>
          <div className="flex flex-row items-center gap-2">
            <div className="text-sm">
              ・Verify the <b>authentication code</b> generated by your
              authenticator app:
            </div>
            <DecoratedInput
              className={`w-30 ${borderInv}`}
              onChange={act.setInputOtpToken}
            />
          </div>
        </div>
      </TwoFactorDialogDescription>
      <TwoFactorDialogButtons>
        {act.verificationStatus === 'invalid' && (
          <div className="text-sm color-danger">
            Incorrect credentials, please try again.
          </div>
        )}
        <Button
          className="min-w-20"
          type="normal"
          label="Back"
          onClick={act.openSaveSecretKey}
        />
        <Button
          className="min-w-20"
          type="primary"
          label="Next"
          onClick={act.enable2FA}
        />
      </TwoFactorDialogButtons>
    </TwoFactorDialog>
  );
});