Skynet/misc_pterodactyl-panel
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correctly fix the UI for API keys

Browse source
This commit is contained in:
Dane Everitt 2020-10-11 12:29:00 -07:00
parent d8e3e0a5f7
commit c6d6221711
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
1 changed files with 8 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,26 +14,8 @@ import { httpErrorToHuman } from '@/api/http';
import { format } from 'date-fns'; import { format } from 'date-fns';
import PageContentBlock from '@/components/elements/PageContentBlock'; import PageContentBlock from '@/components/elements/PageContentBlock';
import tw from 'twin.macro'; import tw from 'twin.macro';
import { breakpoint } from '@/theme';
import styled from 'styled-components/macro';
import GreyRowBox from '@/components/elements/GreyRowBox'; import GreyRowBox from '@/components/elements/GreyRowBox';
const Container = styled.div`
${tw`flex flex-wrap my-10`};
& > div {
${tw`w-full`};
${breakpoint('md')`
width: calc(50% - 1rem);
`}
${breakpoint('xl')`
${tw`w-auto flex-1`};
`}
}
`;
export default () => { export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState(''); const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
const [ keys, setKeys ] = useState<ApiKey[]>([]); const [ keys, setKeys ] = useState<ApiKey[]>([]);
@ -67,12 +49,12 @@ export default () => {
return ( return (
<PageContentBlock title={'Account API'}> <PageContentBlock title={'Account API'}>
<FlashMessageRender byKey={'account'} css={tw`mb-4`}/> <FlashMessageRender byKey={'account'}/>
<Container> <div css={tw`md:flex flex-no-wrap my-10`}>
<ContentBox title={'Create API Key'}> <ContentBox title={'Create API Key'} css={tw`flex-none w-full md:w-1/2`}>
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/> <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
</ContentBox> </ContentBox>
<ContentBox title={'API Keys'} css={tw`mt-8 md:mt-0 md:ml-8`}> <ContentBox title={'API Keys'} css={tw`flex-1 overflow-hidden mt-8 md:mt-0 md:ml-8`}>
<SpinnerOverlay visible={loading}/> <SpinnerOverlay visible={loading}/>
<ConfirmationModal <ConfirmationModal
visible={!!deleteIdentifier} visible={!!deleteIdentifier}
@ -99,14 +81,14 @@ export default () => {
css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]} css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
> >
<FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/> <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
<div css={tw`ml-4 flex-1`}> <div css={tw`ml-4 flex-1 overflow-hidden`}>
<p css={tw`text-sm break-all`}>{key.description}</p> <p css={tw`text-sm break-words`}>{key.description}</p>
<p css={tw`text-2xs text-neutral-300 uppercase`}> <p css={tw`text-2xs text-neutral-300 uppercase`}>
Last used:&nbsp; Last used:&nbsp;
{key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'} {key.lastUsedAt ? format(key.lastUsedAt, 'MMM do, yyyy HH:mm') : 'Never'}
</p> </p>
</div> </div>
<p css={tw`text-sm ml-4`}> <p css={tw`text-sm ml-4 hidden md:block`}>
<code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}> <code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
{key.identifier} {key.identifier}
</code> </code>
@ -124,7 +106,7 @@ export default () => {
)) ))
} }
</ContentBox> </ContentBox>
</Container> </div>
</PageContentBlock> </PageContentBlock>
); );
}; };