diff --git a/src/pages/root/RootPage.js b/src/pages/root/RootPage.js index bde3bd1..e377b89 100644 --- a/src/pages/root/RootPage.js +++ b/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,20 +72,24 @@ class RootPage extends Component {
-
-
- - - -
- + {displayHeader === false ? '' : ( +
+
+ + + +
+ +
-
+ )}
+ { /* TODO: это должен быть /oauth2/code/success */ } + diff --git a/src/pages/static/SuccessOauthPage.intl.json b/src/pages/static/SuccessOauthPage.intl.json new file mode 100644 index 0000000..aa39402 --- /dev/null +++ b/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." +} diff --git a/src/pages/static/SuccessOauthPage.js b/src/pages/static/SuccessOauthPage.js new file mode 100644 index 0000000..133b036 --- /dev/null +++ b/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 ( +
+ + {(pageTitle) => ( + + )} + + +
+ + + + +
+ +
+ +
+ +
+ {appName ? ( + {appName} + }} /> + ) : ( + + )} +   + +
+
+ +
+ +
+
+ ); + } +} diff --git a/src/pages/static/success-oauth.scss b/src/pages/static/success-oauth.scss new file mode 100644 index 0000000..259f458 --- /dev/null +++ b/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; + } +}