StarMC/Astral-nook
StarMC/Astral-nook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Finalize API key management for accounts

Browse source
This commit is contained in:
Dane Everitt 2020-03-22 19:10:49 -07:00
parent 3ef649d984
commit 8d52e2e1a7
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 154 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

96
resources/scripts/components/dashboard/AccountApiContainer.tsx
View file

@ -3,51 +3,103 @@ import ContentBox from '@/components/elements/ContentBox';
import CreateApiKeyForm from '@/components/dashboard/forms/CreateApiKeyForm';
import getApiKeys, { ApiKey } from '@/api/account/getApiKeys';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Simulate } from 'react-dom/test-utils';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faKey } from '@fortawesome/free-solid-svg-icons/faKey';
import { faTrashAlt } from '@fortawesome/free-solid-svg-icons/faTrashAlt';
import ConfirmationModal from '@/components/elements/ConfirmationModal';
import deleteApiKey from '@/api/account/deleteApiKey';
import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import FlashMessageRender from '@/components/FlashMessageRender';
import { httpErrorToHuman } from '@/api/http';
import format from 'date-fns/format';
export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
const [ keys, setKeys ] = useState<ApiKey[]>([]);
const [ loading, setLoading ] = useState(true);
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
useEffect(() => {
clearFlashes('account');
getApiKeys()
.then(keys => setKeys(keys))
.then(() => setLoading(false))
.catch(error => {
console.error(error);
addError({ key: 'account', message: httpErrorToHuman(error) });
});
}, []);
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 (
<div className={'my-10 flex'}>
<ContentBox title={'Create API Key'} className={'flex-1'} showFlashes={'account'}>
<CreateApiKeyForm/>
<FlashMessageRender byKey={'account'} className={'mb-4'}/>
<ContentBox title={'Create API Key'} className={'flex-1'}>
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([...s!, key]))}/>
</ContentBox>
<ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
<SpinnerOverlay visible={loading}/>
{deleteIdentifier &&
<ConfirmationModal
title={'Confirm key deletion'}
buttonText={'Yes, delete key'}
visible={true}
onConfirmed={() => {
doDeletion(deleteIdentifier);
setDeleteIdentifier('');
}}
onCanceled={() => setDeleteIdentifier('')}
>
Are you sure you wish to delete this API key? All requests using it will immediately be
invalidated and will fail.
</ConfirmationModal>
}
{
keys.map(key => (
<div key={key.identifier} className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}>
<FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
<p className={'text-sm ml-4 flex-1'}>
{key.description}
</p>
<p className={'text-sm ml-4'}>
<code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
{key.identifier}
</code>
</p>
<button className={'ml-4 p-2 text-sm'}>
<FontAwesomeIcon
icon={faTrashAlt}
className={'text-neutral-400 hover:text-red-400 transition-color duration-150'}
/>
</button>
</div>
))
keys.length === 0 ?
<p className={'text-center text-sm'}>
{loading ? 'Loading...' : 'No API keys exist for this account.'}
</p>
:
keys.map(key => (
<div key={key.identifier} className={'grey-row-box bg-neutral-600 mb-2 flex items-center'}>
<FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/>
<div className={'ml-4 flex-1'}>
<p className={'text-sm'}>{key.description}</p>
<p className={'text-2xs text-neutral-300 uppercase'}>
Last
used: {key.lastUsedAt ? format(key.lastUsedAt, 'MMM Do, YYYY HH:mm') : 'Never'}
</p>
</div>
<p className={'text-sm ml-4'}>
<code className={'font-mono py-1 px-2 bg-neutral-900 rounded'}>
{key.identifier}
</code>
</p>
<button
className={'ml-4 p-2 text-sm'}
onClick={() => setDeleteIdentifier(key.identifier)}
>
<FontAwesomeIcon
icon={faTrashAlt}
className={'text-neutral-400 hover:text-red-400 transition-color duration-150'}
/>
</button>
</div>
))
}
</ContentBox>
</div>

8
resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
View file

@ -8,23 +8,25 @@ import { Actions, useStoreActions } from 'easy-peasy';
import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ApiKey } from '@/api/account/getApiKeys';
interface Values {
description: string;
allowedIps: string;
}
export default () => {
export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
const [ apiKey, setApiKey ] = useState('');
const { addError, clearFlashes } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
clearFlashes('account');
createApiKey(values.description, values.allowedIps)
.then(key => {
.then(({ secretToken, ...key }) => {
resetForm();
setSubmitting(false);
setApiKey(`${key.identifier}.${key.secretToken}`);
setApiKey(`${key.identifier}${secretToken}`);
onKeyCreated(key);
})
.catch(error => {
console.error(error);