From bcf0a0586d206fa8707916d62c01db3238a186d3 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Sat, 4 Jul 2020 09:28:03 -0700
Subject: [PATCH] Support textareas and cleanup API page

---
 .../dashboard/AccountApiContainer.tsx         | 42 ++++++++++---------
 .../dashboard/forms/CreateApiKeyForm.tsx      | 34 +++++++--------
 .../scripts/components/elements/Input.tsx     |  6 ++-
 .../components/elements/PageContentBlock.tsx  |  4 +-
 tailwind.config.js                            |  8 ++++
 5 files changed, 53 insertions(+), 41 deletions(-)

diff --git a/resources/scripts/components/dashboard/AccountApiContainer.tsx b/resources/scripts/components/dashboard/AccountApiContainer.tsx
index 3d952ac2f..d478f26ac 100644
--- a/resources/scripts/components/dashboard/AccountApiContainer.tsx
+++ b/resources/scripts/components/dashboard/AccountApiContainer.tsx
@@ -14,6 +14,8 @@ 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('');
@@ -48,18 +50,18 @@ export default () => {
 
     return (
         <PageContentBlock>
-            <FlashMessageRender byKey={'account'} className={'mb-4'}/>
-            <div className={'flex'}>
-                <ContentBox title={'Create API Key'} className={'flex-1'}>
+            <FlashMessageRender byKey={'account'} css={tw`mb-4`}/>
+            <div css={tw`flex`}>
+                <ContentBox title={'Create API Key'} css={tw`flex-1`}>
                     <CreateApiKeyForm onKeyCreated={key => setKeys(s => ([ ...s!, key ]))}/>
                 </ContentBox>
-                <ContentBox title={'API Keys'} className={'ml-10 flex-1'}>
+                <ContentBox title={'API Keys'} css={tw`ml-10 flex-1`}>
                     <SpinnerOverlay visible={loading}/>
                     {deleteIdentifier &&
                     <ConfirmationModal
+                        visible
                         title={'Confirm key deletion'}
                         buttonText={'Yes, delete key'}
-                        visible={true}
                         onConfirmed={() => {
                             doDeletion(deleteIdentifier);
                             setDeleteIdentifier('');
@@ -72,38 +74,38 @@ export default () => {
                     }
                     {
                         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.'}
                             </p>
                             :
-                            keys.map(key => (
-                                <div
+                            keys.map((key, index) => (
+                                <GreyRowBox
                                     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'}/>
-                                    <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'}
+                                    <FontAwesomeIcon icon={faKey} css={tw`text-neutral-300`}/>
+                                    <div css={tw`ml-4 flex-1`}>
+                                        <p css={tw`text-sm`}>{key.description}</p>
+                                        <p css={tw`text-2xs text-neutral-300 uppercase`}>
+                                            Last used:&nbsp;
+                                            {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'}>
+                                    <p css={tw`text-sm ml-4`}>
+                                        <code css={tw`font-mono py-1 px-2 bg-neutral-900 rounded`}>
                                             {key.identifier}
                                         </code>
                                     </p>
                                     <button
-                                        className={'ml-4 p-2 text-sm'}
+                                        css={tw`ml-4 p-2 text-sm`}
                                         onClick={() => setDeleteIdentifier(key.identifier)}
                                     >
                                         <FontAwesomeIcon
                                             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>
-                                </div>
+                                </GreyRowBox>
                             ))
                     }
                 </ContentBox>
diff --git a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
index cf1a596bf..4e8fae1d5 100644
--- a/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
+++ b/resources/scripts/components/dashboard/forms/CreateApiKeyForm.tsx
@@ -9,6 +9,9 @@ import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
 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 {
     description: string;
@@ -44,22 +47,21 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
                 closeOnEscape={false}
                 closeOnBackground={false}
             >
-                <h3 className={'mb-6'}>Your API Key</h3>
-                <p className={'text-sm mb-6'}>
+                <h3 css={tw`mb-6`}>Your API Key</h3>
+                <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
                     shown again.
                 </p>
-                <pre className={'text-sm bg-neutral-900 rounded py-2 px-4 font-mono'}>
-                    <code className={'font-mono'}>{apiKey}</code>
+                <pre css={tw`text-sm bg-neutral-900 rounded py-2 px-4 font-mono`}>
+                    <code css={tw`font-mono`}>{apiKey}</code>
                 </pre>
-                <div className={'flex justify-end mt-6'}>
-                    <button
+                <div css={tw`flex justify-end mt-6`}>
+                    <Button
                         type={'button'}
-                        className={'btn btn-secondary btn-sm'}
                         onClick={() => setApiKey('')}
                     >
                         Close
-                    </button>
+                    </Button>
                 </div>
             </Modal>
             <Formik
@@ -80,25 +82,19 @@ export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => {
                             label={'Description'}
                             name={'description'}
                             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
                             label={'Allowed IPs'}
                             name={'allowedIps'}
                             description={'Leave blank to allow any IP address to use this API key, otherwise provide each IP address on a new line.'}
                         >
-                            <Field
-                                as={'textarea'}
-                                name={'allowedIps'}
-                                className={'input-dark h-32'}
-                            />
+                            <Field as={Textarea} name={'allowedIps'} css={tw`h-32`}/>
                         </FormikFieldWrapper>
-                        <div className={'flex justify-end mt-6'}>
-                            <button className={'btn btn-primary btn-sm'}>
-                                Create
-                            </button>
+                        <div css={tw`flex justify-end mt-6`}>
+                            <Button>Create</Button>
                         </div>
                     </Form>
                 )}
diff --git a/resources/scripts/components/elements/Input.tsx b/resources/scripts/components/elements/Input.tsx
index a0f412c7e..066d980a0 100644
--- a/resources/scripts/components/elements/Input.tsx
+++ b/resources/scripts/components/elements/Input.tsx
@@ -16,7 +16,7 @@ const light = css<Props>`
     }
 `;
 
-const Input = styled.input<Props>`
+const inputStyle = css<Props>`
     // Reset to normal styling.
     ${tw`appearance-none w-full min-w-0`};
     ${tw`p-3 border rounded text-sm transition-all duration-150`};
@@ -43,4 +43,8 @@ const Input = styled.input<Props>`
     ${props => props.isLight && light};
 `;
 
+const Input = styled.input<Props>`${inputStyle}`;
+const Textarea = styled.textarea<Props>`${inputStyle}`;
+
+export { Textarea };
 export default Input;
diff --git a/resources/scripts/components/elements/PageContentBlock.tsx b/resources/scripts/components/elements/PageContentBlock.tsx
index 656facf95..c9a7018f9 100644
--- a/resources/scripts/components/elements/PageContentBlock.tsx
+++ b/resources/scripts/components/elements/PageContentBlock.tsx
@@ -3,7 +3,7 @@ import ContentContainer from '@/components/elements/ContentContainer';
 import { CSSTransition } from 'react-transition-group';
 import tw from 'twin.macro';
 
-export default ({ children }): React.FC => (
+const PageContentBlock: React.FC = ({ children }) => (
     <CSSTransition timeout={250} classNames={'fade'} appear in>
         <>
             <ContentContainer css={tw`my-10`}>
@@ -25,3 +25,5 @@ export default ({ children }): React.FC => (
         </>
     </CSSTransition>
 );
+
+export default PageContentBlock;
diff --git a/tailwind.config.js b/tailwind.config.js
index 775ecbd27..ce51fe6f7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -112,5 +112,13 @@ module.exports = {
                 900: 'hsl(125, 97%, 14%)',
             },
         },
+        extend: {
+            fontSize: {
+                '2xs': '0.625rem',
+            },
+            borderColor: theme => ({
+                default: theme('colors.neutral.400', 'cuurrentColor'),
+            }),
+        },
     },
 };