Завёрстана страница для статичных реиректов

src/components/auth/Finish.jsx

@@ -0,0 +1,106 @@
+import React, { Component, PropTypes } from 'react';
+
+import { FormattedMessage as Message } from 'react-intl';
+import Helmet from 'react-helmet';
+import classNames from 'classnames';
+
+import buttons from 'components/ui/buttons.scss';
+import { Input } from 'components/ui/Form';
+
+import BaseAuthBody from './BaseAuthBody';
+import messages from './Finish.messages';
+
+import styles from './finish.scss';
+
+export default class Finish extends Component {
+    static propTypes = {
+
+    };
+
+    state = {
+        isSidebarHidden: false
+    };
+
+    handleCopyClick(selector) {
+        // http://stackoverflow.com/a/987376/5184751
+         var text = document.querySelector(selector);
+         var range, selection;
+        if (document.body.createTextRange) {
+            range = document.body.createTextRange();
+            range.moveToElementText(text);
+            range.select();
+        } else if (window.getSelection) {
+            selection = window.getSelection();
+            range = document.createRange();
+            range.selectNodeContents(text);
+            selection.removeAllRanges();
+            selection.addRange(range);
+        }
+
+        try {
+            var successful = document.execCommand('copy');
+            // TODO: было бы ещё неплохо сделать какую-то анимацию, вроде "Скопировано",
+            // ибо сейчас после клика как-то неубедительно, скопировалось оно или нет
+            console.log('Copying text command was ' + (successful ? 'successful' : 'unsuccessful'));
+        } catch (err) {
+            console.error('Oops, unable to copy');
+        }
+    }
+
+    render() {
+        const withCode = true;
+        const success = true;
+        const appName = 'TLauncher';
+        const code = 'HW9vkZA6Y4vRN3ciSm1IIDk98PHLkPPlv3jvo1MX';
+        const copySupported = document.queryCommandSupported('copy');
+
+        return (
+            <div className={styles.finishPage}>
+                {success ? (
+                    <div>
+                        <div className={styles.successBackground}></div>
+                        <div className={styles.greenTitle}>
+                            <Message {...messages.authForAppSuccessful} values={{
+                                appName: (<span className={styles.appName}>{appName}</span>)
+                            }} />
+                        </div>
+                        {withCode ? (
+                            <div>
+                                <div className={styles.description}>
+                                    <Message {...messages.passCodeToApp} values={{appName}} />
+                                </div>
+                                <div className={styles.code}>{code}</div>
+                                {copySupported ? (
+                                    <div
+                                        className={classNames(buttons.smallButton, buttons.green)}
+                                        onClick={this.handleCopyClick.bind(this, '.' + styles.code)}
+                                    >
+                                        <Message {...messages.copy} />
+                                    </div>
+                                ) : (
+                                    ''
+                                )}
+                            </div>
+                        ) : (
+                            <div className={styles.description}>
+                                <Message {...messages.waitAppReaction} />
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div>
+                        <div className={styles.failBackground}></div>
+                        <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>
+        );
+    }
+}

src/components/auth/Finish.messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+    authForAppSuccessful: {
+        id: 'authForAppSuccessful',
+        defaultMessage: 'Авторизация для {appName} успешно выполнена'
+    },
+    authForAppFailed: {
+        id: 'authForAppFailed',
+        defaultMessage: 'Авторизация для {appName} не удалась'
+    },
+    waitAppReaction: {
+        id: 'waitAppReaction',
+        defaultMessage: 'Пожалуйста, дождитесь реакции вашего приложения'
+    },
+    passCodeToApp: {
+        id: 'passCodeToApp',
+        defaultMessage: 'Чтобы завершить процесс авторизации, пожалуйста, передай {appName} этот код'
+    },
+    copy: {
+        id: 'copy',
+        defaultMessage: 'Скопировать'
+    }
+});

src/components/auth/finish.scss

@@ -0,0 +1,67 @@
+@import '~components/ui/colors.scss';
+@import '~components/ui/fonts.scss';
+
+.finishPage {
+    font-family: $font-family-title;
+    position: relative;
+    padding-top: 40px;
+}
+
+.iconBackground {
+    position: absolute;
+    top: -15px;
+    transform: translateX(-50%);
+    font-size: 200px;
+    color: #e0d9cf;
+    z-index: -1;
+}
+
+.successBackground {
+    composes: checkmark from 'components/ui/icons.scss';
+    @extend .iconBackground;
+}
+
+.failBackground {
+    composes: close from '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;
+}
+
+.code {
+    $border: 5px solid darker($green);
+
+    border-right: $border;
+    border-left: $border;
+    padding: 5px 0;
+    margin-bottom: 5px;
+    word-break: break-all;
+}

src/pages/auth/AuthPage.jsx

@@ -5,6 +5,8 @@ import { connect } from 'react-redux';
 import AppInfo from 'components/auth/AppInfo';
 import PanelTransition from 'components/auth/PanelTransition';
 
+import Finish from 'components/auth/Finish';
+
 import styles from './auth.scss';
 
 class AuthPage extends Component {
@@ -31,7 +33,7 @@ class AuthPage extends Component {
                     <AppInfo {...client} onGoToAuth={this.onGoToAuth} />
                 </div>
                 <div className={styles.content}>
-                    <PanelTransition {...this.props} />
+                    <Finish {...this.props} />
                 </div>
             </div>
         );

src/routes.js

@@ -16,6 +16,7 @@ import Password from 'components/auth/Password';
 import Logout from 'components/auth/Logout';
 import PasswordChange from 'components/auth/PasswordChange';
 import ForgotPassword from 'components/auth/ForgotPassword';
+import Finish from 'components/auth/Finish';
 
 import authFlow from 'services/authFlow';
 
@@ -47,6 +48,7 @@ export default function routesFactory(store) {
                 <Route path="/oauth/permissions" components={new Permissions()} {...onEnter} />
                 <Route path="/password-change" components={new PasswordChange()} {...onEnter} />
                 <Route path="/forgot-password" components={new ForgotPassword()} {...onEnter} />
+                <Route path="/oauth/finish" components={new Finish()} />
             </Route>
         </Route>
     );