misc_pterodactyl-panel/resources/scripts/components/dashboard/ssh/CreateSSHKeyForm.tsx

68 lines
2.4 KiB
TypeScript
Raw Normal View History

import React 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, { Textarea } from '@/components/elements/Input';
import styled from 'styled-components/macro';
import { useFlashKey } from '@/plugins/useFlash';
import { createSSHKey, useSSHKeys } from '@/api/account/ssh-keys';
interface Values {
name: string;
publicKey: string;
}
const CustomTextarea = styled(Textarea)`${tw`h-32`}`;
export default () => {
const { clearAndAddHttpError } = useFlashKey('account');
const { mutate } = useSSHKeys();
const submit = (values: Values, { setSubmitting, resetForm }: FormikHelpers<Values>) => {
clearAndAddHttpError();
createSSHKey(values.name, values.publicKey)
.then((key) => {
resetForm();
mutate((data) => (data || []).concat(key));
})
.catch((error) => clearAndAddHttpError(error))
.then(() => setSubmitting(false));
};
return (
<>
<Formik
onSubmit={submit}
initialValues={{ name: '', publicKey: '' }}
validationSchema={object().shape({
name: string().required(),
publicKey: string().required(),
})}
>
{({ isSubmitting }) => (
<Form>
<SpinnerOverlay visible={isSubmitting}/>
<FormikFieldWrapper label={'SSH Key Name'} name={'name'} css={tw`mb-6`}>
<Field name={'name'} as={Input}/>
</FormikFieldWrapper>
<FormikFieldWrapper
label={'Public Key'}
name={'publicKey'}
description={'Enter your public SSH key.'}
>
<Field name={'publicKey'} as={CustomTextarea}/>
</FormikFieldWrapper>
<div css={tw`flex justify-end mt-6`}>
<Button>Save</Button>
</div>
</Form>
)}
</Formik>
</>
);
};