mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-27 23:40:28 +05:30
110 lines
3.9 KiB
TypeScript
110 lines
3.9 KiB
TypeScript
import React, { FC, MouseEventHandler, useEffect } from 'react';
|
|
import { Redirect } from 'react-router-dom';
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
import { Helmet } from 'react-helmet-async';
|
|
|
|
import { useReduxSelector } 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;
|
|
}
|
|
|
|
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,
|
|
});
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (authData) {
|
|
history.pushState(null, document.title, `#${authData}`);
|
|
}
|
|
}, []);
|
|
|
|
if (!client || !oauth) {
|
|
return <Redirect to="/" />;
|
|
}
|
|
|
|
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">
|
|
<div className={styles.description}>
|
|
<Message
|
|
key="passCodeToApp"
|
|
defaultMessage="To complete authorization process, please, provide the following code to {appName}"
|
|
values={{ appName: client.name }}
|
|
/>
|
|
</div>
|
|
<div className={styles.codeContainer}>
|
|
<div className={styles.code}>{oauth.code}</div>
|
|
</div>
|
|
<Button color="green" small onClick={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}>{client.name}</span>,
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={styles.description}>
|
|
<Message key="waitAppReaction" defaultMessage="Please, wait till your application response" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Finish;
|