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

packages/app/pages/auth/AuthPage.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { Route, Switch, Redirect } from 'react-router-dom';
+import AppInfo from 'app/components/auth/appInfo/AppInfo';
+import PanelTransition from 'app/components/auth/PanelTransition';
+import Register from 'app/components/auth/register/Register';
+import Login from 'app/components/auth/login/Login';
+import Permissions from 'app/components/auth/permissions/Permissions';
+import ChooseAccount from 'app/components/auth/chooseAccount/ChooseAccount';
+import Activation from 'app/components/auth/activation/Activation';
+import ResendActivation from 'app/components/auth/resendActivation/ResendActivation';
+import Password from 'app/components/auth/password/Password';
+import AcceptRules from 'app/components/auth/acceptRules/AcceptRules';
+import ForgotPassword from 'app/components/auth/forgotPassword/ForgotPassword';
+import RecoverPassword from 'app/components/auth/recoverPassword/RecoverPassword';
+import Mfa from 'app/components/auth/mfa/Mfa';
+import Finish from 'app/components/auth/finish/Finish';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+import { RootState } from 'app/reducers';
+import { Client } from 'app/components/auth/reducer';
+
+import styles from './auth.scss';
+
+// TODO: after migrating to new react router (posibly) this view started remounting
+// after route change e.g. /login -> /password which results in state dropping
+// we should find why this view is remounting or move isSidebarHidden into store
+// so that it persist disregarding remounts
+let isSidebarHiddenCache = false;
+
+interface Props {
+  client: Client | null;
+}
+
+class AuthPage extends React.Component<
+  Props,
+  {
+    isSidebarHidden: boolean;
+  }
+> {
+  state = {
+    isSidebarHidden: isSidebarHiddenCache,
+  };
+
+  render() {
+    const { isSidebarHidden } = this.state;
+    const { client } = this.props;
+
+    return (
+      <div>
+        <div
+          className={isSidebarHidden ? styles.hiddenSidebar : styles.sidebar}
+        >
+          <AppInfo {...client} onGoToAuth={this.onGoToAuth} />
+        </div>
+
+        <div className={styles.content} data-e2e-content>
+          <Switch>
+            <Route path="/login" render={renderPanelTransition(Login)} />
+            <Route path="/mfa" render={renderPanelTransition(Mfa)} />
+            <Route path="/password" render={renderPanelTransition(Password)} />
+            <Route path="/register" render={renderPanelTransition(Register)} />
+            <Route
+              path="/activation/:key?"
+              render={renderPanelTransition(Activation)}
+            />
+            <Route
+              path="/resend-activation"
+              render={renderPanelTransition(ResendActivation)}
+            />
+            <Route
+              path="/oauth/permissions"
+              render={renderPanelTransition(Permissions)}
+            />
+            <Route
+              path="/choose-account"
+              render={renderPanelTransition(ChooseAccount)}
+            />
+            <Route
+              path="/oauth/choose-account"
+              render={renderPanelTransition(ChooseAccount)}
+            />
+            <Route path="/oauth/finish" component={Finish} />
+            <Route
+              path="/accept-rules"
+              render={renderPanelTransition(AcceptRules)}
+            />
+            <Route
+              path="/forgot-password"
+              render={renderPanelTransition(ForgotPassword)}
+            />
+            <Route
+              path="/recover-password/:key?"
+              render={renderPanelTransition(RecoverPassword)}
+            />
+            <Redirect to="/404" />
+          </Switch>
+        </div>
+      </div>
+    );
+  }
+
+  onGoToAuth = () => {
+    isSidebarHiddenCache = true;
+
+    this.setState({
+      isSidebarHidden: true,
+    });
+  };
+}
+
+function renderPanelTransition(factory) {
+  const { Title, Body, Footer, Links } = factory();
+
+  return props => (
+    <PanelTransition
+      key="panel-transition"
+      Title={<Title />}
+      Body={<Body {...props} />}
+      Footer={<Footer />}
+      Links={<Links />}
+    />
+  );
+}
+
+export default withRouter(
+  connect((state: RootState) => ({
+    client: state.auth.client,
+  }))(AuthPage),
+);

packages/app/pages/auth/SuccessOauthPage.intl.json

@@ -0,0 +1,7 @@
+{
+  "title": "Authorization successful",
+  "applicationAuth": "Application authorization",
+  "authorizationSuccessful": "Authorization has been successfully completed.",
+  "authorizationForAppSuccessful": "Authorization for {appName} has been successfully completed.",
+  "youCanCloseThisPage": "You can close this window and return to your application."
+}

packages/app/pages/auth/SuccessOauthPage.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+import loader from 'app/services/loader';
+import { Query } from 'app/services/request';
+
+import rootMessages from '../root/RootPage.intl.json';
+import styles from './success-oauth.scss';
+import messages from './SuccessOauthPage.intl.json';
+
+export default class SuccessOauthPage extends React.Component<{
+  location: {
+    query: Query<'appName'>;
+  };
+}> {
+  componentDidMount() {
+    this.onPageUpdate();
+
+    setTimeout(() => {
+      try {
+        // try to close window if possible
+        // @ts-ignore
+        window.open('', '_self').close();
+      } catch (err) {
+        // don't care
+      }
+    }, 8000);
+  }
+
+  componentDidUpdate() {
+    this.onPageUpdate();
+  }
+
+  onPageUpdate() {
+    loader.hide();
+  }
+
+  render() {
+    const appName = this.props.location.query.get('appName');
+
+    return (
+      <div className={styles.page}>
+        <Message {...messages.title}>
+          {pageTitle => <Helmet title={pageTitle} />}
+        </Message>
+
+        <div className={styles.wrapper}>
+          <Link to="/" className={styles.logo}>
+            <Message {...rootMessages.siteName} />
+          </Link>
+
+          <div className={styles.title}>
+            <Message {...messages.applicationAuth} />
+          </div>
+
+          <div className={styles.checkmark} />
+
+          <div className={styles.description}>
+            {appName ? (
+              <Message
+                {...messages.authorizationForAppSuccessful}
+                values={{
+                  appName: <b>{appName}</b>,
+                }}
+              />
+            ) : (
+              <Message {...messages.authorizationSuccessful} />
+            )}
+            &nbsp;
+            <Message {...messages.youCanCloseThisPage} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

packages/app/pages/auth/auth.scss

@@ -0,0 +1,49 @@
+@import '~app/components/ui/colors.scss';
+
+$sidebar-width: 320px;
+
+.sidebar {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  top: 50px;
+  z-index: 10;
+
+  background: $black;
+}
+
+.hiddenSidebar {
+  composes: sidebar;
+
+  display: none;
+}
+
+.content {
+  text-align: center;
+  max-width: 340px;
+  margin: 0 auto;
+}
+
+@media (min-width: 350px) {
+  .content {
+    padding: 55px 0;
+  }
+}
+
+@media (min-width: 720px) {
+  .content {
+    padding: 55px 50px;
+    margin-left: $sidebar-width;
+  }
+
+  .sidebar {
+    right: auto;
+
+    width: $sidebar-width;
+  }
+
+  .hiddenSidebar {
+    display: block;
+  }
+}

packages/app/pages/auth/success-oauth.scss

@@ -0,0 +1,70 @@
+@import '~app/components/ui/fonts.scss';
+@import '~app/components/ui/colors.scss';
+
+.page {
+  border-top: 50px solid #ddd8ce;
+
+  padding: 85px 10px;
+}
+
+.wrapper {
+  position: relative;
+
+  margin: 0 auto;
+  padding: 55px 25px;
+  max-width: 330px;
+  box-sizing: border-box;
+
+  background: #fff;
+  border: 3px solid #ddd8ce;
+
+  text-align: center;
+}
+
+.logo {
+  $borderWidth: 3px;
+
+  position: absolute;
+  top: -28px;
+  left: 50%;
+  transform: translate(-50%, 0);
+
+  padding: 0 20px;
+
+  font-family: $font-family-title;
+  font-size: 33px;
+  line-height: 50px - $borderWidth * 2;
+  color: #fff;
+  background: $green;
+  border: 3px solid darker($green);
+
+  &:hover {
+    color: #fff;
+    background: $green;
+    border: 3px solid darker($green);
+  }
+}
+
+.title {
+  font-family: $font-family-title;
+  font-size: 20px;
+  margin-bottom: 20px;
+}
+
+.checkmark {
+  composes: checkmark from '~app/components/ui/icons.scss';
+
+  color: lighter($green);
+  font-size: 66px;
+  margin-bottom: 28px;
+}
+
+.description {
+  font-size: 13px;
+  color: #9a9a9a;
+  line-height: 1.4;
+
+  b {
+    color: #666;
+  }
+}