mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-05 13:08:58 +05:30
148 lines
5.2 KiB
TypeScript
148 lines
5.2 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { FormattedMessage as Message } from 'react-intl';
|
|
import { Helmet } from 'react-helmet-async';
|
|
import { LinkButton } from 'app/components/ui/form';
|
|
import { COLOR_GREEN, COLOR_BLUE } from 'app/components/ui';
|
|
import { ContactLink } from 'app/components/contact';
|
|
import { OauthAppResponse } from 'app/services/api/oauth';
|
|
|
|
import styles from './applicationsIndex.scss';
|
|
import messages from './ApplicationsIndex.intl.json';
|
|
import cubeIcon from './icons/cube.svg';
|
|
import loadingCubeIcon from './icons/loading-cube.svg';
|
|
import toolsIcon from './icons/tools.svg';
|
|
import ApplicationsList from './list';
|
|
|
|
type Props = {
|
|
clientId: string | null;
|
|
resetClientId: () => void; // notify parent to remove clientId from current location.href
|
|
displayForGuest: boolean;
|
|
applications: Array<OauthAppResponse>;
|
|
isLoading: boolean;
|
|
deleteApp: (clientId: string) => Promise<any>;
|
|
resetApp: (clientId: string, resetClientSecret: boolean) => Promise<any>;
|
|
};
|
|
|
|
export default class ApplicationsIndex extends React.Component<Props> {
|
|
render() {
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.welcomeContainer}>
|
|
<Message {...messages.accountsForDevelopers}>
|
|
{(pageTitle: string) => (
|
|
<h2 className={styles.welcomeTitle}>
|
|
<Helmet title={pageTitle} />
|
|
{pageTitle}
|
|
</h2>
|
|
)}
|
|
</Message>
|
|
<div className={styles.welcomeTitleDelimiter} />
|
|
<div className={styles.welcomeParagraph}>
|
|
<Message
|
|
{...messages.accountsAllowsYouYoUseOauth2}
|
|
values={{
|
|
ourDocumentation: (
|
|
<a href="https://docs.ely.by/en/oauth.html" target="_blank">
|
|
<Message {...messages.ourDocumentation} />
|
|
</a>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={styles.welcomeParagraph}>
|
|
<Message
|
|
{...messages.ifYouHaveAnyTroubles}
|
|
values={{
|
|
feedback: (
|
|
<ContactLink>
|
|
<Message {...messages.feedback} />
|
|
</ContactLink>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{this.getContent()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
getContent() {
|
|
const { displayForGuest, applications, isLoading, resetApp, deleteApp, clientId, resetClientId } = this.props;
|
|
|
|
if (applications.length > 0) {
|
|
return (
|
|
<ApplicationsList
|
|
applications={applications}
|
|
resetApp={resetApp}
|
|
deleteApp={deleteApp}
|
|
clientId={clientId}
|
|
resetClientId={resetClientId}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (displayForGuest) {
|
|
return <Guest />;
|
|
}
|
|
|
|
return <Loader noApps={!isLoading} />;
|
|
}
|
|
}
|
|
|
|
function Loader({ noApps }: { noApps: boolean }) {
|
|
return (
|
|
<div className={styles.emptyState} data-e2e={noApps ? 'noApps' : 'loading'}>
|
|
<img src={noApps ? cubeIcon : loadingCubeIcon} className={styles.emptyStateIcon} />
|
|
|
|
<div
|
|
className={clsx(styles.noAppsContainer, {
|
|
[styles.noAppsAnimating]: noApps,
|
|
})}
|
|
>
|
|
<div className={styles.emptyStateText}>
|
|
<div>
|
|
<Message {...messages.youDontHaveAnyApplication} />
|
|
</div>
|
|
<div>
|
|
<Message {...messages.shallWeStart} />
|
|
</div>
|
|
</div>
|
|
|
|
<LinkButton
|
|
to="/dev/applications/new"
|
|
data-e2e="newApp"
|
|
label={messages.addNew}
|
|
color={COLOR_GREEN}
|
|
className={styles.emptyStateActionButton}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Guest() {
|
|
return (
|
|
<div className={styles.emptyState}>
|
|
<img src={toolsIcon} className={styles.emptyStateIcon} />
|
|
<div className={styles.emptyStateText}>
|
|
<div>
|
|
<Message {...messages.weDontKnowAnythingAboutYou} />
|
|
</div>
|
|
<div>
|
|
<Message {...messages.youMustAuthToBegin} />
|
|
</div>
|
|
</div>
|
|
|
|
<LinkButton
|
|
to="/login"
|
|
label={messages.authorization}
|
|
color={COLOR_BLUE}
|
|
className={styles.emptyStateActionButton}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|