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

110 lines
3.9 KiB
TypeScript
Raw Normal View History

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';
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
}
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
});
}
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">
2020-05-24 04:38:24 +05:30
<div className={styles.description}>
<Message
key="passCodeToApp"
defaultMessage="To complete authorization process, please, provide the following code to {appName}"
values={{ appName: client.name }}
/>
2020-05-24 04:38:24 +05:30
</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>
2020-05-24 04:38:24 +05:30
</div>
) : (
2020-05-24 04:38:24 +05:30
<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"
values={{
appName: <span className={styles.appName}>{client.name}</span>,
}}
/>
2020-05-24 04:38:24 +05:30
</div>
<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
export default Finish;