mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-27 15:30:37 +05:30
Завёрстана страница для статичных реиректов
This commit is contained in:
parent
e94b04551d
commit
60e80b3319
106
src/components/auth/Finish.jsx
Normal file
106
src/components/auth/Finish.jsx
Normal 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>
|
||||
);
|
||||
}
|
||||
}
|
24
src/components/auth/Finish.messages.js
Normal file
24
src/components/auth/Finish.messages.js
Normal 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: 'Скопировать'
|
||||
}
|
||||
});
|
67
src/components/auth/finish.scss
Normal file
67
src/components/auth/finish.scss
Normal 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;
|
||||
}
|
@ -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>
|
||||
);
|
||||
|
@ -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>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user