diff --git a/src/components/auth/Finish.jsx b/src/components/auth/Finish.jsx
new file mode 100644
index 0000000..61e2b5f
--- /dev/null
+++ b/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 (
+
+ {success ? (
+
+
+
+ {appName})
+ }} />
+
+ {withCode ? (
+
+
+
+
+
{code}
+ {copySupported ? (
+
+
+
+ ) : (
+ ''
+ )}
+
+ ) : (
+
+
+
+ )}
+
+ ) : (
+
+
+
+ {appName})
+ }} />
+
+
+
+
+
+ )}
+
+ );
+ }
+}
diff --git a/src/components/auth/Finish.messages.js b/src/components/auth/Finish.messages.js
new file mode 100644
index 0000000..aacf2a2
--- /dev/null
+++ b/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: 'Скопировать'
+ }
+});
diff --git a/src/components/auth/finish.scss b/src/components/auth/finish.scss
new file mode 100644
index 0000000..4982284
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/auth/AuthPage.jsx b/src/pages/auth/AuthPage.jsx
index d31bcc2..4000410 100644
--- a/src/pages/auth/AuthPage.jsx
+++ b/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 {
);
diff --git a/src/routes.js b/src/routes.js
index 679c4e1..56c7e86 100644
--- a/src/routes.js
+++ b/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) {
+
);