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

packages/app/components/auth/acceptRules/AcceptRules.intl.json

@@ -0,0 +1,8 @@
+{
+  "title": "User Agreement",
+  "accept": "Accept",
+  "declineAndLogout": "Decline and logout",
+  "description1": "We have updated our {link}.",
+  "termsOfService": "terms of service",
+  "description2": "In order to continue using {name} service, you need to accept them."
+}

packages/app/components/auth/acceptRules/AcceptRules.ts

@@ -0,0 +1,16 @@
+import factory from '../factory';
+import Body from './AcceptRulesBody';
+import messages from './AcceptRules.intl.json';
+
+export default factory({
+  title: messages.title,
+  body: Body,
+  footer: {
+    color: 'darkBlue',
+    autoFocus: true,
+    label: messages.accept,
+  },
+  links: {
+    label: messages.declineAndLogout,
+  },
+});

packages/app/components/auth/acceptRules/AcceptRulesBody.js

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import icons from 'app/components/ui/icons.scss';
+import BaseAuthBody from 'app/components/auth/BaseAuthBody';
+import appInfo from 'app/components/auth/appInfo/AppInfo.intl.json';
+
+import styles from './acceptRules.scss';
+import messages from './AcceptRules.intl.json';
+
+export default class AcceptRulesBody extends BaseAuthBody {
+  static displayName = 'AcceptRulesBody';
+  static panelId = 'acceptRules';
+
+  render() {
+    return (
+      <div>
+        {this.renderErrors()}
+
+        <div className={styles.security}>
+          <span className={icons.lock} />
+        </div>
+
+        <p className={styles.descriptionText}>
+          <Message
+            {...messages.description1}
+            values={{
+              link: (
+                <Link to="/rules" target="_blank">
+                  <Message {...messages.termsOfService} />
+                </Link>
+              ),
+            }}
+          />
+          <br />
+          <Message
+            {...messages.description2}
+            values={{
+              name: <Message {...appInfo.appName} />,
+            }}
+          />
+        </p>
+      </div>
+    );
+  }
+}

packages/app/components/auth/acceptRules/acceptRules.scss

@@ -0,0 +1,16 @@
+@import '~app/components/ui/colors.scss';
+
+.descriptionText {
+  font-size: 15px;
+  line-height: 1.4;
+  padding-bottom: 8px;
+  color: #aaa;
+}
+
+// TODO: вынести иконки такого типа в какую-то внешнюю структуру?
+.security {
+  color: #fff;
+  font-size: 90px;
+  line-height: 1;
+  margin-bottom: 15px;
+}