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

Support textareas and cleanup API page

Browse source
This commit is contained in:
Dane Everitt 2020-07-04 09:28:03 -07:00
parent baf35be8e8
commit bcf0a0586d
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
5 changed files with 53 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,6 +14,8 @@ import FlashMessageRender from '@/components/FlashMessageRender';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import format from 'date-fns/format'; import format from 'date-fns/format';
import PageContentBlock from '@/components/elements/PageContentBlock'; import PageContentBlock from '@/components/elements/PageContentBlock';
import tw from 'twin.macro';
import GreyRowBox from '@/components/elements/GreyRowBox';
export default () => { export default () => {
const [ deleteIdentifier, setDeleteIdentifier ] = useState(''); const [ deleteIdentifier, setDeleteIdentifier ] = useState('');
@ -48,18 +50,18 @@ export default () => {
return ( return (
<PageContentBlock> <PageContentBlock>
<FlashMessageRender byKey={'account'} className={'mb-4'}/> <FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
<div className={'flex'}> <div css={tw`flex`}>
<ContentBox title={'Create API Key'} className={'flex-1'}> <ContentBox title={'Create API Key'} css={tw`flex-1`}>
<CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/> <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
</ContentBox> </ContentBox>
<ContentBox title={'API Keys'} className={'ml-10 flex-1'}> <ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
<SpinnerOverlay visible={loading}/> <SpinnerOverlay visible={loading}/>
{deleteIdentifier && {deleteIdentifier &&
<ConfirmationModal <ConfirmationModal
visible
title={'Confirm key deletion'} title={'Confirm key deletion'}
buttonText={'Yes, delete key'} buttonText={'Yes, delete key'}
visible={true}
onConfirmed={() => { onConfirmed={() => {
doDeletion(deleteIdentifier); doDeletion(deleteIdentifier);
setDeleteIdentifier(''); setDeleteIdentifier('');
@ -72,38 +74,38 @@ export default () => {
} }
{ {
keys.length === 0 ? keys.length === 0 ?
<p className={'text-center text-sm'}> <p css={tw`text-center text-sm`}>
{loading ? 'Loading...' : 'No API keys exist for this account.'} {loading ? 'Loading...' : 'No API keys exist for this account.'}
</p> </p>
: :
keys.map(key => ( keys.map((key, index) => (
<div <GreyRowBox
key={key.identifier} key={key.identifier}
className={'grey-row-box bg-neutral-600 mb-2 flex items-center'} css={[ tw`bg-neutral-600 flex items-center`, index > 0 && tw`mt-2` ]}
> >
<FontAwesomeIcon icon={faKey} className={'text-neutral-300'}/> <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
<div className={'ml-4 flex-1'}> <div css={tw`ml-4 flex-1`}>
<p className={'text-sm'}>{key.description}</p> <p css={tw`text-sm`}>{key.description}</p>
<p className={'text-2xs text-neutral-300 uppercase'}> <p css={tw`text-2xs text-neutral-300 uppercase`}>
Last Last used:&nbsp;
used: {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 className={'text-sm ml-4'}> <p css={tw`text-sm ml-4`}>
<code className={'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>
</p> </p>
<button <button
className={'ml-4 p-2 text-sm'} css={tw`ml-4 p-2 text-sm`}
onClick={() => setDeleteIdentifier(key.identifier)} onClick={() => setDeleteIdentifier(key.identifier)}
> >
<FontAwesomeIcon <FontAwesomeIcon
icon={faTrashAlt} icon={faTrashAlt}
className={'text-neutral-400 hover:text-red-400 transition-colors duration-150'} css={tw`text-neutral-400 hover:text-red-400 transition-colors duration-150`}
/> />
</button> </button>
</div> </GreyRowBox>
)) ))
} }
</ContentBox> </ContentBox>

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

@ -9,6 +9,9 @@ import { ApplicationStore } from '@/state';
import { httpErrorToHuman } from '@/api/http'; import { httpErrorToHuman } from '@/api/http';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { ApiKey } from '@/api/account/getApiKeys'; import { ApiKey } from '@/api/account/getApiKeys';
import tw from 'twin.macro';
import Button from '@/components/elements/Button';
import Input, { Textarea } from '@/components/elements/Input';
interface Values { interface Values {
description: string; description: string;
@ -44,22 +47,21 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
closeOnEscape={false} closeOnEscape={false}
closeOnBackground={false} closeOnBackground={false}
> >
<h3 className={'mb-6'}>Your API Key</h3> <h3 css={tw`mb-6`}>Your API Key</h3>
<p className={'text-sm mb-6'}> <p css={tw`text-sm mb-6`}>
The API key you have requested is shown below. Please store this in a safe location, it will not be The API key you have requested is shown below. Please store this in a safe location, it will not be
shown again. shown again.
</p> </p>
<pre className={'text-sm bg-neutral-900 rounded py-2 px-4 font-mono'}> <pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
<code className={'font-mono'}>{apiKey}</code> <code css={tw`font-mono`}>{apiKey}</code>
</pre> </pre>
<div className={'flex justify-end mt-6'}> <div css={tw`flex justify-end mt-6`}>
<button <Button
type={'button'} type={'button'}
className={'btn btn-secondary btn-sm'}
onClick={() => setApiKey('')} onClick={() => setApiKey('')}
> >
Close Close
</button> </Button>
</div> </div>
</Modal> </Modal>
<Formik <Formik
@ -80,25 +82,19 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
label={'Description'} label={'Description'}
name={'description'} name={'description'}
description={'A description of this API key.'} description={'A description of this API key.'}
className={'mb-6'} css={tw`mb-6`}
> >
<Field name={'description'} className={'input-dark'}/> <Field name={'description'} as={Input}/>
</FormikFieldWrapper> </FormikFieldWrapper>
<FormikFieldWrapper <FormikFieldWrapper
label={'Allowed IPs'} label={'Allowed IPs'}
name={'allowedIps'} name={'allowedIps'}
description={'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'} description={'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'}
> >
<Field <Field as={Textarea} name={'allowedIps'} css={tw`h-32`}/>
as={'textarea'}
name={'allowedIps'}
className={'input-dark h-32'}
/>
</FormikFieldWrapper> </FormikFieldWrapper>
<div className={'flex justify-end mt-6'}> <div css={tw`flex justify-end mt-6`}>
<button className={'btn btn-primary btn-sm'}> <Button>Create</Button>
Create
</button>
</div> </div>
</Form> </Form>
)} )}

6
resources/scripts/components/elements/Input.tsx
View file

@ -16,7 +16,7 @@ const light = css<Props>`
} }
`; `;
const Input = styled.input<Props>` const inputStyle = css<Props>`
// Reset to normal styling. // Reset to normal styling.
${tw`appearance-none w-full min-w-0`}; ${tw`appearance-none w-full min-w-0`};
${tw`p-3 border rounded text-sm transition-all duration-150`}; ${tw`p-3 border rounded text-sm transition-all duration-150`};
@ -43,4 +43,8 @@ const Input = styled.input<Props>`
${props => props.isLight && light}; ${props => props.isLight && light};
`; `;
const Input = styled.input<Props>`${inputStyle}`;
const Textarea = styled.textarea<Props>`${inputStyle}`;
export { Textarea };
export default Input; export default Input;

4
resources/scripts/components/elements/PageContentBlock.tsx
View file

@ -3,7 +3,7 @@ import ContentContainer from '@/components/elements/ContentContainer';
import { CSSTransition } from 'react-transition-group'; import { CSSTransition } from 'react-transition-group';
import tw from 'twin.macro'; import tw from 'twin.macro';
export default ({ children }): React.FC => ( const PageContentBlock: React.FC = ({ children }) => (
<CSSTransition timeout={250} classNames={'fade'} appear in> <CSSTransition timeout={250} classNames={'fade'} appear in>
<> <>
<ContentContainer css={tw`my-10`}> <ContentContainer css={tw`my-10`}>
@ -25,3 +25,5 @@ export default ({ children }): React.FC => (
</> </>
</CSSTransition> </CSSTransition>
); );
export default PageContentBlock;

8
tailwind.config.js
View file

@ -112,5 +112,13 @@ module.exports = {
900: 'hsl(125, 97%, 14%)', 900: 'hsl(125, 97%, 14%)',
}, },
}, },
extend: {
fontSize: {
'2xs': '0.625rem',
},
borderColor: theme => ({
default: theme('colors.neutral.400', 'cuurrentColor'),
}),
},
}, },
}; };