import React, { useEffect, useState } from 'react'; 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 { 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'; import PageContentBlock from '@/components/elements/PageContentBlock'; import tw from 'twin.macro'; import GreyRowBox from '@/components/elements/GreyRowBox'; export default () => { const [ deleteIdentifier, setDeleteIdentifier ] = useState(''); const [ keys, setKeys ] = useState([]); const [ loading, setLoading ] = useState(true); const { addError, clearFlashes } = useStoreActions((actions: Actions) => 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 (
setKeys(s => ([ ...s!, key ]))}/> {deleteIdentifier && { doDeletion(deleteIdentifier); setDeleteIdentifier(''); }} onDismissed={() => setDeleteIdentifier('')} > Are you sure you wish to delete this API key? All requests using it will immediately be invalidated and will fail. } { keys.length === 0 ?

{loading ? 'Loading...' : 'No API keys exist for this account.'}

: keys.map((key, index) => ( 0 && tw`mt-2` ]} >

{key.description}

Last used:  {key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}

{key.identifier}

)) }
); };