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

This commit is contained in:
ErickSkrauch 2016-03-04 00:27:33 +03:00
parent e94b04551d
commit 60e80b3319
5 changed files with 202 additions and 1 deletions

View File

@ -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>
);
}
}

View File

@ -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: 'Скопировать'
}
});

View File

@ -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;
}

View File

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

View File

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