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

packages/app/components/auth/finish/Finish.intl.json

@@ -0,0 +1,7 @@
+{
+  "authForAppSuccessful": "Authorization for {appName} was successfully completed",
+  "authForAppFailed": "Authorization for {appName} was failed",
+  "waitAppReaction": "Please, wait till your application response",
+  "passCodeToApp": "To complete authorization process, please, provide the following code to {appName}",
+  "copy": "Copy"
+}

packages/app/components/auth/finish/Finish.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+import { Button } from 'app/components/ui/form';
+import copy from 'app/services/copy';
+import { RootState } from 'app/reducers';
+
+import messages from './Finish.intl.json';
+import styles from './finish.scss';
+
+interface Props {
+  appName: string;
+  code?: string;
+  state: string;
+  displayCode?: string;
+  success?: boolean;
+}
+
+class Finish extends React.Component<Props> {
+  render() {
+    const { appName, code, state, displayCode, success } = this.props;
+    const authData = JSON.stringify({
+      // eslint-disable-next-line @typescript-eslint/camelcase
+      auth_code: code,
+      state,
+    });
+
+    history.pushState(null, document.title, `#${authData}`);
+
+    return (
+      <div className={styles.finishPage}>
+        <Helmet title={authData} />
+
+        {success ? (
+          <div>
+            <div className={styles.successBackground} />
+            <div className={styles.greenTitle}>
+              <Message
+                {...messages.authForAppSuccessful}
+                values={{
+                  appName: <span className={styles.appName}>{appName}</span>,
+                }}
+              />
+            </div>
+            {displayCode ? (
+              <div>
+                <div className={styles.description}>
+                  <Message {...messages.passCodeToApp} values={{ appName }} />
+                </div>
+                <div className={styles.codeContainer}>
+                  <div className={styles.code}>{code}</div>
+                </div>
+                <Button
+                  color="green"
+                  small
+                  label={messages.copy}
+                  onClick={this.onCopyClick}
+                />
+              </div>
+            ) : (
+              <div className={styles.description}>
+                <Message {...messages.waitAppReaction} />
+              </div>
+            )}
+          </div>
+        ) : (
+          <div>
+            <div className={styles.failBackground} />
+            <div className={styles.redTitle}>
+              <Message
+                {...messages.authForAppFailed}
+                values={{
+                  appName: <span className={styles.appName}>{appName}</span>,
+                }}
+              />
+            </div>
+            <div className={styles.description}>
+              <Message {...messages.waitAppReaction} />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  onCopyClick = event => {
+    event.preventDefault();
+
+    const { code } = this.props;
+
+    if (code) {
+      copy(code);
+    }
+  };
+}
+
+export default connect(({ auth }: RootState) => {
+  if (!auth || !auth.client || !auth.oauth) {
+    throw new Error('Can not connect Finish component. No auth data in state');
+  }
+
+  return {
+    appName: auth.client.name,
+    code: auth.oauth.code,
+    displayCode: auth.oauth.displayCode,
+    state: auth.oauth.state,
+    success: auth.oauth.success,
+  };
+})(Finish);

packages/app/components/auth/finish/finish.scss

@@ -0,0 +1,76 @@
+@import '~app/components/ui/colors.scss';
+@import '~app/components/ui/fonts.scss';
+
+.finishPage {
+  font-family: $font-family-title;
+  position: relative;
+  max-width: 515px;
+  padding-top: 40px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.iconBackground {
+  position: absolute;
+  top: -15px;
+  transform: translateX(-50%);
+  font-size: 200px;
+  color: #e0d9cf;
+  z-index: -1;
+}
+
+.successBackground {
+  composes: checkmark from '~app/components/ui/icons.scss';
+  @extend .iconBackground;
+}
+
+.failBackground {
+  composes: close from '~app/components/ui/icons.scss';
+  @extend .iconBackground;
+}
+
+.title {
+  font-size: 22px;
+  margin-bottom: 10px;
+}
+
+.greenTitle {
+  composes: title;
+
+  color: $green;
+
+  .appName {
+    color: darker($green);
+  }
+}
+
+.redTitle {
+  composes: title;
+
+  color: $red;
+
+  .appName {
+    color: darker($red);
+  }
+}
+
+.description {
+  font-size: 18px;
+  margin-bottom: 10px;
+}
+
+.codeContainer {
+  margin-bottom: 5px;
+  margin-top: 35px;
+}
+
+.code {
+  $border: 5px solid darker($green);
+
+  display: inline-block;
+  border-right: $border;
+  border-left: $border;
+  padding: 5px 10px;
+  word-break: break-all;
+  text-align: center;
+}