2024-12-11 01:12:06 +05:30
|
|
|
import React, { FC, MouseEventHandler, useEffect } from 'react';
|
|
|
|
import { Redirect } from 'react-router-dom';
|
2020-07-22 16:50:10 +05:30
|
|
|
import { FormattedMessage as Message } from 'react-intl';
|
2019-12-30 12:59:39 +05:30
|
|
|
import { Helmet } from 'react-helmet-async';
|
2020-07-22 15:31:12 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
import { useReduxSelector } from 'app/functions';
|
2019-12-08 00:32:00 +05:30
|
|
|
import { Button } from 'app/components/ui/form';
|
|
|
|
import copy from 'app/services/copy';
|
2016-03-04 02:57:33 +05:30
|
|
|
|
|
|
|
import styles from './finish.scss';
|
|
|
|
|
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
|
|
|
}
|
2016-03-04 02:57:33 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
const Finish: FC<Props> = () => {
|
|
|
|
const { client, oauth } = useReduxSelector((state) => state.auth);
|
|
|
|
|
|
|
|
const onCopyClick: MouseEventHandler = (event) => {
|
|
|
|
event.preventDefault();
|
|
|
|
copy(oauth!.code!);
|
|
|
|
};
|
|
|
|
|
|
|
|
let authData: string | undefined;
|
|
|
|
|
|
|
|
if (oauth && 'state' in oauth.params) {
|
|
|
|
authData = JSON.stringify({
|
|
|
|
auth_code: oauth.code,
|
|
|
|
state: oauth.params.state,
|
2020-05-24 04:38:24 +05:30
|
|
|
});
|
2024-12-11 01:12:06 +05:30
|
|
|
}
|
2016-03-16 10:16:44 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
useEffect(() => {
|
|
|
|
if (authData) {
|
|
|
|
history.pushState(null, document.title, `#${authData}`);
|
|
|
|
}
|
|
|
|
}, []);
|
2016-03-04 02:57:33 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
if (!client || !oauth) {
|
|
|
|
return <Redirect to="/" />;
|
|
|
|
}
|
2016-03-16 10:16:44 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
return (
|
|
|
|
<div className={styles.finishPage}>
|
|
|
|
{authData && <Helmet title={authData} />}
|
|
|
|
|
|
|
|
{oauth.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}>{client.name}</span>,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{oauth.displayCode ? (
|
|
|
|
<div data-testid="oauth-code-container">
|
2020-05-24 04:38:24 +05:30
|
|
|
<div className={styles.description}>
|
2020-06-04 22:11:27 +05:30
|
|
|
<Message
|
2024-12-11 01:12:06 +05:30
|
|
|
key="passCodeToApp"
|
|
|
|
defaultMessage="To complete authorization process, please, provide the following code to {appName}"
|
|
|
|
values={{ appName: client.name }}
|
2020-06-04 22:11:27 +05:30
|
|
|
/>
|
2020-05-24 04:38:24 +05:30
|
|
|
</div>
|
2024-12-11 01:12:06 +05:30
|
|
|
<div className={styles.codeContainer}>
|
|
|
|
<div className={styles.code}>{oauth.code}</div>
|
|
|
|
</div>
|
|
|
|
<Button color="green" small onClick={onCopyClick}>
|
|
|
|
<Message key="copy" defaultMessage="Copy" />
|
|
|
|
</Button>
|
2020-05-24 04:38:24 +05:30
|
|
|
</div>
|
2024-12-11 01:12:06 +05:30
|
|
|
) : (
|
2020-05-24 04:38:24 +05:30
|
|
|
<div className={styles.description}>
|
2020-06-04 22:11:27 +05:30
|
|
|
<Message
|
|
|
|
key="waitAppReaction"
|
|
|
|
defaultMessage="Please, wait till your application response"
|
|
|
|
/>
|
2020-05-24 04:38:24 +05:30
|
|
|
</div>
|
2024-12-11 01:12:06 +05:30
|
|
|
)}
|
|
|
|
</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}>{client.name}</span>,
|
|
|
|
}}
|
|
|
|
/>
|
2020-05-24 04:38:24 +05:30
|
|
|
</div>
|
2024-12-11 01:12:06 +05:30
|
|
|
<div className={styles.description}>
|
|
|
|
<Message key="waitAppReaction" defaultMessage="Please, wait till your application response" />
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
2019-12-07 16:58:52 +05:30
|
|
|
|
2024-12-11 01:12:06 +05:30
|
|
|
export default Finish;
|