Реализована страница для обратного редиректа c localhost

src/pages/root/RootPage.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { Component } from 'react';
 
 import { FormattedMessage as Message } from 'react-intl';
@@ -9,8 +10,8 @@ import AuthPage from 'pages/auth/AuthPage';
 import ProfilePage from 'pages/profile/ProfilePage';
 import RulesPage from 'pages/rules/RulesPage';
 import PageNotFound from 'pages/404/PageNotFound';
+import SuccessOauthPage from 'pages/static/SuccessOauthPage';
 
-// @flow
 import { restoreScroll } from 'functions';
 import PrivateRoute from 'containers/PrivateRoute';
 import AuthFlowRoute from 'containers/AuthFlowRoute';
@@ -35,6 +36,7 @@ class RootPage extends Component {
         user: User,
         isPopupActive: boolean,
         onLogoClick: Function,
+        displayHeader: ?boolean,
         location: {
             pathname: string
         }
@@ -55,7 +57,7 @@ class RootPage extends Component {
 
     render() {
         const props = this.props;
-        const {user} = this.props;
+        const {user, displayHeader} = this.props;
         const isRegisterPage = props.location.pathname === '/register';
 
         if (document && document.body) {
@@ -70,6 +72,7 @@ class RootPage extends Component {
                 <div id="view-port" className={classNames(styles.viewPort, {
                     [styles.isPopupActive]: props.isPopupActive
                 })}>
+                    {displayHeader === false ? '' : (
                         <div className={styles.header}>
                             <div className={styles.headerContent}>
                                 <Link to="/" className={styles.logo} onClick={props.onLogoClick}>
@@ -82,8 +85,11 @@ class RootPage extends Component {
                                 </div>
                             </div>
                         </div>
+                    )}
                     <div className={styles.body}>
                         <Switch>
+                            { /* TODO: это должен быть /oauth2/code/success */ }
+                            <Route path="/oauth/code/success" component={SuccessOauthPage} />
                             <PrivateRoute path="/profile" component={ProfilePage} />
                             <Route path="/404" component={PageNotFound} />
                             <Route path="/rules" component={RulesPage} />

src/pages/static/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."
+}

src/pages/static/SuccessOauthPage.js

@@ -0,0 +1,64 @@
+// @flow
+import React, { Component } from 'react';
+
+import { FooterMenu } from 'components/footerMenu';
+
+import { Link } from 'react-router-dom';
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+
+import styles from './success-oauth.scss';
+import rootMessages from 'pages/root/RootPage.intl.json';
+import messages from './SuccessOauthPage.intl.json';
+
+import profileStyles from 'pages/profile/profile.scss';
+
+export default class SuccessOauthPage extends Component {
+    props: {
+        appName: ?string
+    };
+
+    render() {
+        // TODO: detect GET param `appName`
+        // TODO: попытаться заркыть окно с помощью https://stackoverflow.com/a/31163281/5184751
+        const {appName} = this.props;
+
+        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 className={profileStyles.footer}>
+                    <FooterMenu/>
+                </div>
+            </div>
+        );
+    }
+}

src/pages/static/success-oauth.scss

@@ -0,0 +1,70 @@
+@import "~components/ui/fonts.scss";
+@import "~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 '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;
+    }
+}