mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-12 16:29:01 +05:30
118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
import React, { MouseEventHandler } from 'react';
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
import { Helmet } from 'react-helmet-async';
|
|
|
|
import { connect } from 'app/functions';
|
|
import { Button } from 'app/components/ui/form';
|
|
import copy from 'app/services/copy';
|
|
|
|
import styles from './finish.scss';
|
|
|
|
interface Props {
|
|
appName: string;
|
|
code?: string;
|
|
state: string;
|
|
displayCode?: boolean;
|
|
success?: boolean;
|
|
}
|
|
|
|
class Finish extends React.Component<Props> {
|
|
render() {
|
|
const { appName, code, state, displayCode, success } = this.props;
|
|
const authData = JSON.stringify({
|
|
auth_code: code,
|
|
state,
|
|
});
|
|
|
|
history.pushState(null, document.title, `#${authData}`);
|
|
|
|
return (
|
|
<div className={styles.finishPage}>
|
|
<Helmet title={authData} />
|
|
|
|
{success ? (
|
|
<div>
|
|
<div className={styles.successBackground} />
|
|
<div className={styles.greenTitle}>
|
|
<Message
|
|
key="authForAppSuccessful"
|
|
defaultMessage="Authorization for {appName} was successfully completed"
|
|
values={{
|
|
appName: <span className={styles.appName}>{appName}</span>,
|
|
}}
|
|
/>
|
|
</div>
|
|
{displayCode ? (
|
|
<div data-testid="oauth-code-container">
|
|
<div className={styles.description}>
|
|
<Message
|
|
key="passCodeToApp"
|
|
defaultMessage="To complete authorization process, please, provide the following code to {appName}"
|
|
values={{ appName }}
|
|
/>
|
|
</div>
|
|
<div className={styles.codeContainer}>
|
|
<div className={styles.code}>{code}</div>
|
|
</div>
|
|
<Button color="green" small onClick={this.onCopyClick}>
|
|
<Message key="copy" defaultMessage="Copy" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className={styles.description}>
|
|
<Message
|
|
key="waitAppReaction"
|
|
defaultMessage="Please, wait till your application response"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div>
|
|
<div className={styles.failBackground} />
|
|
<div className={styles.redTitle}>
|
|
<Message
|
|
key="authForAppFailed"
|
|
defaultMessage="Authorization for {appName} was failed"
|
|
values={{
|
|
appName: <span className={styles.appName}>{appName}</span>,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={styles.description}>
|
|
<Message
|
|
key="waitAppReaction"
|
|
defaultMessage="Please, wait till your application response"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
onCopyClick: MouseEventHandler = (event) => {
|
|
event.preventDefault();
|
|
|
|
const { code } = this.props;
|
|
|
|
if (code) {
|
|
copy(code);
|
|
}
|
|
};
|
|
}
|
|
|
|
export default connect(({ auth }) => {
|
|
if (!auth || !auth.client || !auth.oauth) {
|
|
throw new Error('Can not connect Finish component. No auth data in state');
|
|
}
|
|
|
|
return {
|
|
appName: auth.client.name,
|
|
code: auth.oauth.code,
|
|
displayCode: auth.oauth.displayCode,
|
|
state: auth.oauth.state,
|
|
success: auth.oauth.success,
|
|
};
|
|
})(Finish);
|