mirror of
https://github.com/elyby/accounts-frontend.git
synced 2024-12-13 00:39:02 +05:30
154 lines
5.9 KiB
TypeScript
154 lines
5.9 KiB
TypeScript
import React from 'react';
|
|
import clsx from 'clsx';
|
|
import { defineMessages, 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 cubeIcon from './icons/cube.svg';
|
|
import loadingCubeIcon from './icons/loading-cube.svg';
|
|
import toolsIcon from './icons/tools.svg';
|
|
import ApplicationsList from './list';
|
|
|
|
const labels = defineMessages({
|
|
addNew: 'Add new',
|
|
});
|
|
|
|
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 key="accountsForDevelopers" defaultMessage="Ely.by Accounts for developers">
|
|
{(pageTitle: string) => (
|
|
<h2 className={styles.welcomeTitle}>
|
|
<Helmet title={pageTitle} />
|
|
{pageTitle}
|
|
</h2>
|
|
)}
|
|
</Message>
|
|
<div className={styles.welcomeTitleDelimiter} />
|
|
<div className={styles.welcomeParagraph}>
|
|
<Message
|
|
key="accountsAllowsYouYoUseOauth2"
|
|
defaultMessage="Ely.by Accounts service provides users with a quick and easy-to-use way to login to your site, launcher or Minecraft server via OAuth2 authorization protocol. You can find more information about integration with Ely.by Accounts in {ourDocumentation}."
|
|
values={{
|
|
ourDocumentation: (
|
|
<a href="https://docs.ely.by/en/oauth.html" target="_blank">
|
|
<Message key="ourDocumentation" defaultMessage="our documentation" />
|
|
</a>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className={styles.welcomeParagraph}>
|
|
<Message
|
|
key="ifYouHaveAnyTroubles"
|
|
defaultMessage="If you are experiencing difficulties, you can always use {feedback}. We'll surely help you."
|
|
values={{
|
|
feedback: (
|
|
<ContactLink>
|
|
<Message key="feedback" defaultMessage="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
|
|
key="youDontHaveAnyApplication"
|
|
defaultMessage="You don't have any app registered yet."
|
|
/>
|
|
</div>
|
|
<div>
|
|
<Message key="shallWeStart" defaultMessage="Shall we start?" />
|
|
</div>
|
|
</div>
|
|
|
|
<LinkButton
|
|
to="/dev/applications/new"
|
|
data-e2e="newApp"
|
|
color={COLOR_GREEN}
|
|
className={styles.emptyStateActionButton}
|
|
>
|
|
<Message {...labels.addNew} />
|
|
</LinkButton>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function Guest() {
|
|
return (
|
|
<div className={styles.emptyState}>
|
|
<img src={toolsIcon} className={styles.emptyStateIcon} />
|
|
<div className={styles.emptyStateText}>
|
|
<div>
|
|
<Message key="weDontKnowAnythingAboutYou" defaultMessage="We don't know anything about you yet." />
|
|
</div>
|
|
<div>
|
|
<Message key="youMustAuthToBegin" defaultMessage="You have to authorize to start." />
|
|
</div>
|
|
</div>
|
|
|
|
<LinkButton to="/login" color={COLOR_BLUE} className={styles.emptyStateActionButton}>
|
|
<Message key="authorization" defaultMessage="Authorization" />
|
|
</LinkButton>
|
|
</div>
|
|
);
|
|
}
|