misc_pterodactyl-panel/resources/scripts/components/dashboard/AccountApiContainer.tsx

113 lines
5.5 KiB
TypeScript
Raw Normal View History

2020-03-23 01:25:29 +00:00
import React, { useEffect, useState } from 'react';
import ContentBox from '@/components/elements/ContentBox';
import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
2020-03-23 01:25:29 +00:00
import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
2020-07-05 01:46:09 +00:00
import { faKey, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import deleteApiKey from '@/api/account/deleteApiKey';
2020-09-08 03:26:18 +00:00
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import FlashMessageRender from '@/components/FlashMessageRender';
import { httpErrorToHuman } from '@/api/http';
2020-07-05 01:46:09 +00:00
import { format } from 'date-fns';
import PageContentBlock from '@/components/elements/PageContentBlock';
2020-07-04 16:28:03 +00:00
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
2020-03-23 01:25:29 +00:00
const [ keys, setKeys ] = useState<ApiKey[]>([]);
const [ loading, setLoading ] = useState(true);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
2020-03-23 01:25:29 +00:00
useEffect(() => {
clearFlashes('account');
2020-03-23 01:25:29 +00:00
getApiKeys()
.then(keys => setKeys(keys))
.then(() => setLoading(false))
.catch(error => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
2020-03-23 01:25:29 +00:00
});
}, []);
const doDeletion = (identifier: string) => {
setLoading(true);
clearFlashes('account');
deleteApiKey(identifier)
.then(() => setKeys(s => ([
...(s || []).filter(key => key.identifier !== identifier),
])))
.catch(error => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
})
.then(() => setLoading(false));
};
return (
2020-09-08 03:26:18 +00:00
<PageContentBlock title={'Account API'}>
2020-10-11 19:29:00 +00:00
<FlashMessageRender byKey={'account'}/>
<div css={tw`md:flex flex-no-wrap my-10`}>
<ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
2020-03-28 23:06:36 +00:00
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
</ContentBox>
2020-10-11 19:29:00 +00:00
<ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
2020-03-28 23:06:36 +00:00
<SpinnerOverlay visible={loading}/>
<ConfirmationModal
visible={!!deleteIdentifier}
2020-03-28 23:06:36 +00:00
title={'Confirm key deletion'}
buttonText={'Yes, delete key'}
onConfirmed={() => {
doDeletion(deleteIdentifier);
setDeleteIdentifier('');
}}
onModalDismissed={() => setDeleteIdentifier('')}
2020-03-28 23:06:36 +00:00
>
Are you sure you wish to delete this API key? All requests using it will immediately be
invalidated and will fail.
</ConfirmationModal>
{
keys.length === 0 ?
2020-07-04 16:28:03 +00:00
<p css={tw`text-center text-sm`}>
2020-03-28 23:06:36 +00:00
{loading ? 'Loading...' : 'No API keys exist for this account.'}
</p>
:
2020-07-04 16:28:03 +00:00
keys.map((key, index) => (
<GreyRowBox
2020-03-28 23:06:36 +00:00
key={key.identifier}
2020-07-04 16:28:03 +00:00
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
2020-03-28 23:06:36 +00:00
>
2020-07-04 16:28:03 +00:00
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
2020-10-11 19:29:00 +00:00
<div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-words`}>{key.description}</p>
2020-07-04 16:28:03 +00:00
<p css={tw`text-2xs text-neutral-300 uppercase`}>
Last used:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
2020-03-28 23:06:36 +00:00
</p>
</div>
2020-10-11 19:29:00 +00:00
<p css={tw`text-sm ml-4 hidden md:block`}>
2020-07-04 16:28:03 +00:00
<code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
2020-03-28 23:06:36 +00:00
{key.identifier}
</code>
</p>
2020-03-28 23:06:36 +00:00
<button
2020-07-04 16:28:03 +00:00
css={tw`ml-4 p-2 text-sm`}
2020-03-28 23:06:36 +00:00
onClick={() => setDeleteIdentifier(key.identifier)}
>
<FontAwesomeIcon
icon={faTrashAlt}
2020-07-04 16:28:03 +00:00
css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
2020-03-28 23:06:36 +00:00
/>
</button>
2020-07-04 16:28:03 +00:00
</GreyRowBox>
2020-03-28 23:06:36 +00:00
))
}
</ContentBox>
2020-10-11 19:29:00 +00:00
</div>
</PageContentBlock>
);
};