accounts-frontend/packages/app/components/auth/finish/Finish.tsx

120 lines
4.4 KiB
TypeScript
Raw Normal View History

import React, { MouseEventHandler } from 'react';
import { connect } from 'react-redux';
import { defineMessages, FormattedMessage as Message } from 'react-intl';
import { Helmet } from 'react-helmet-async';
import { Button } from 'app/components/ui/form';
import copy from 'app/services/copy';
import { RootState } from 'app/reducers';
import styles from './finish.scss';
const messages = defineMessages({
copy: 'Copy',
});
2019-12-07 16:58:52 +05:30
interface Props {
2020-05-24 04:38:24 +05:30
appName: string;
code?: string;
state: string;
displayCode?: boolean;
success?: boolean;
2019-12-07 16:58:52 +05:30
}
2019-12-07 16:58:52 +05:30
class Finish extends React.Component<Props> {
2020-05-24 04:38:24 +05:30
render() {
const { appName, code, state, displayCode, success } = this.props;
const authData = JSON.stringify({
auth_code: code,
state,
});
2020-05-24 04:38:24 +05:30
history.pushState(null, document.title, `#${authData}`);
2020-05-24 04:38:24 +05:30
return (
<div className={styles.finishPage}>
<Helmet title={authData} />
2020-05-24 04:38:24 +05:30
{success ? (
<div>
<div className={styles.successBackground} />
<div className={styles.greenTitle}>
<Message
key="authForAppSuccessful"
defaultMessage="Authorization for {appName} was successfully completed"
2020-05-24 04:38:24 +05:30
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 }}
/>
2020-05-24 04:38:24 +05:30
</div>
<div className={styles.codeContainer}>
<div className={styles.code}>{code}</div>
</div>
<Button color="green" small label={messages.copy} onClick={this.onCopyClick} />
</div>
) : (
<div className={styles.description}>
<Message
key="waitAppReaction"
defaultMessage="Please, wait till your application response"
/>
2020-05-24 04:38:24 +05:30
</div>
)}
</div>
) : (
<div>
<div className={styles.failBackground} />
<div className={styles.redTitle}>
<Message
key="authForAppFailed"
defaultMessage="Authorization for {appName} was failed"
2020-05-24 04:38:24 +05:30
values={{
appName: <span className={styles.appName}>{appName}</span>,
}}
/>
</div>
<div className={styles.description}>
<Message
key="waitAppReaction"
defaultMessage="Please, wait till your application response"
/>
2020-05-24 04:38:24 +05:30
</div>
</div>
)}
</div>
2020-05-24 04:38:24 +05:30
);
}
2020-05-24 04:38:24 +05:30
onCopyClick: MouseEventHandler = (event) => {
event.preventDefault();
2019-12-07 16:58:52 +05:30
2020-05-24 04:38:24 +05:30
const { code } = this.props;
2019-12-07 16:58:52 +05:30
2020-05-24 04:38:24 +05:30
if (code) {
copy(code);
}
};
}
2019-12-07 16:58:52 +05:30
export default connect(({ auth }: RootState) => {
2020-05-24 04:38:24 +05:30
if (!auth || !auth.client || !auth.oauth) {
throw new Error('Can not connect Finish component. No auth data in state');
}
2019-12-07 16:58:52 +05:30
2020-05-24 04:38:24 +05:30
return {
appName: auth.client.name,
code: auth.oauth.code,
displayCode: auth.oauth.displayCode,
state: auth.oauth.state,
success: auth.oauth.success,
};
2019-12-07 16:58:52 +05:30
})(Finish);