Create app namespace for all absolute requires of app modules. Move all packages under packages yarn workspace

packages/app/components/auth/mfa/Mfa.intl.json

@@ -0,0 +1,4 @@
+{
+  "enterTotp": "Enter code",
+  "description": "In order to sign in this account, you need to enter a one-time password from mobile application"
+}

packages/app/components/auth/mfa/Mfa.tsx

@@ -0,0 +1,13 @@
+import factory from '../factory';
+import Body from './MfaBody';
+import messages from './Mfa.intl.json';
+import passwordMessages from '../password/Password.intl.json';
+
+export default factory({
+  title: messages.enterTotp,
+  body: Body,
+  footer: {
+    color: 'green',
+    label: passwordMessages.signInButton,
+  },
+});

packages/app/components/auth/mfa/MfaBody.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { FormattedMessage as Message } from 'react-intl';
+import { PanelIcon } from 'app/components/ui/Panel';
+import { Input } from 'app/components/ui/form';
+import BaseAuthBody from 'app/components/auth/BaseAuthBody';
+
+import styles from './mfa.scss';
+import messages from './Mfa.intl.json';
+
+export default class MfaBody extends BaseAuthBody {
+  static panelId = 'mfa';
+  static hasGoBack = true;
+
+  autoFocusField = 'totp';
+
+  render() {
+    return (
+      <div>
+        {this.renderErrors()}
+
+        <PanelIcon icon="lock" />
+
+        <p className={styles.descriptionText}>
+          <Message {...messages.description} />
+        </p>
+
+        <Input
+          {...this.bindField('totp')}
+          icon="key"
+          required
+          placeholder={messages.enterTotp}
+          autoComplete="off"
+        />
+      </div>
+    );
+  }
+}

packages/app/components/auth/mfa/mfa.scss

@@ -0,0 +1,6 @@
+.descriptionText {
+  font-size: 15px;
+  line-height: 1.4;
+  padding-bottom: 8px;
+  color: #aaa;
+}