75 lines
2.7 KiB
TypeScript
75 lines
2.7 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Field, Form, Formik, FormikHelpers } from 'formik';
|
|
import { object, string } from 'yup';
|
|
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
|
|
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
|
|
import tw from 'twin.macro';
|
|
import Button from '@/components/elements/Button';
|
|
import Input from '@/components/elements/Input';
|
|
import ApiKeyModal from '@/components/dashboard/ApiKeyModal';
|
|
import { createAPIKey, useAPIKeys } from '@/api/account/api-keys';
|
|
import { useFlashKey } from '@/plugins/useFlash';
|
|
|
|
interface Values {
|
|
description: string;
|
|
allowedIps: string;
|
|
}
|
|
|
|
export default () => {
|
|
const [ apiKey, setApiKey ] = useState('');
|
|
const { mutate } = useAPIKeys();
|
|
const { clearAndAddHttpError } = useFlashKey('account');
|
|
|
|
const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
|
|
clearAndAddHttpError();
|
|
|
|
createAPIKey(values.description)
|
|
.then(async ([ token, secretToken ]) => {
|
|
await mutate((data) => {
|
|
return (data || []).filter((value) => value.identifier !== token.identifier).concat(token);
|
|
}, false);
|
|
|
|
return secretToken;
|
|
})
|
|
.then((token) => {
|
|
resetForm();
|
|
setApiKey(token);
|
|
})
|
|
.catch(error => clearAndAddHttpError(error))
|
|
.finally(() => setSubmitting(false));
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ApiKeyModal
|
|
visible={apiKey.length > 0}
|
|
onModalDismissed={() => setApiKey('')}
|
|
apiKey={apiKey}
|
|
/>
|
|
<Formik
|
|
onSubmit={submit}
|
|
initialValues={{ description: '', allowedIps: '' }}
|
|
validationSchema={object().shape({
|
|
description: string().required().min(4),
|
|
})}
|
|
>
|
|
{({ isSubmitting }) => (
|
|
<Form>
|
|
<SpinnerOverlay visible={isSubmitting}/>
|
|
<FormikFieldWrapper
|
|
label={'Description'}
|
|
name={'description'}
|
|
description={'This API key will be able to act on your behalf against this Panel\'s API.'}
|
|
css={tw`mb-6`}
|
|
>
|
|
<Field name={'description'} as={Input}/>
|
|
</FormikFieldWrapper>
|
|
<div css={tw`flex justify-end mt-6`}>
|
|
<Button>Create</Button>
|
|
</div>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</>
|
|
);
|
|
};
|