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) { + );