import React, { useState } from 'react'; import { Field, Form, Formik, FormikHelpers } from 'formik'; import { object, string } from 'yup'; import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper'; import Modal from '@/components/elements/Modal'; import createApiKey from '@/api/account/createApiKey'; 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'; import tw from 'twin.macro'; import Button from '@/components/elements/Button'; import Input, { Textarea } from '@/components/elements/Input'; interface Values { description: string; allowedIps: string; } export default ({ onKeyCreated }: { onKeyCreated: (key: ApiKey) => void }) => { const [ apiKey, setApiKey ] = useState(''); const { addError, clearFlashes } = useStoreActions((actions: Actions) => actions.flashes); const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers) => { clearFlashes('account'); createApiKey(values.description, values.allowedIps) .then(({ secretToken, ...key }) => { resetForm(); setSubmitting(false); setApiKey(`${key.identifier}${secretToken}`); onKeyCreated(key); }) .catch(error => { console.error(error); addError({ key: 'account', message: httpErrorToHuman(error) }); setSubmitting(false); }); }; return ( <> 0} onDismissed={() => setApiKey('')} closeOnEscape={false} closeOnBackground={false} >

Your API Key

The API key you have requested is shown below. Please store this in a safe location, it will not be shown again.

                    {apiKey}
                
{({ isSubmitting }) => (
)}
); };