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

ui(admin): work on Node editing

Browse source
This commit is contained in:
Matthew Penner 2021-03-12 14:12:45 -07:00
parent 59e5017fd8
commit 7e8cb52d88
4 changed files with 171 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

104
resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
View file

@ -1,17 +1,17 @@
import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
import React from 'react';
import AdminBox from '@/components/admin/AdminBox';
import tw from 'twin.macro';
import { object, string } from 'yup';
import updateNode from '@/api/admin/nodes/updateNode';
import Button from '@/components/elements/Button';
import Field from '@/components/elements/Field';
import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
import { Form, Formik, FormikHelpers } from 'formik';
import { Field as FormikField, Form, Formik, FormikHelpers } from 'formik';
import { Context } from '@/components/admin/nodes/NodeEditContainer';
import { ApplicationStore } from '@/state';
import { Actions, useStoreActions } from 'easy-peasy';
import LocationSelect from '@/components/admin/nodes/LocationSelect';
import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
import Label from '@/components/elements/Label';
interface Values {
public: boolean;
@ -20,11 +20,8 @@ interface Values {
locationId: number;
databaseHostId: number | null;
fqdn: string;
listenPortHTTP: number;
publicPortHTTP: number;
listenPortSFTP: number;
publicPortSFTP: number;
scheme: string;
behindProxy: boolean;
}
export default () => {
@ -39,11 +36,11 @@ export default () => {
);
}
const submit = ({ name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers<Values>) => {
const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers<Values>) => {
clearFlashes('node');
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })
.then(() => setNode({ ...node, name, description, locationId, fqdn, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }))
updateNode(node.id, { name, description, locationId, databaseHostId, fqdn, scheme, behindProxy })
.then(() => setNode({ ...node, name, description, locationId, fqdn, scheme, behindProxy }))
.catch(error => {
console.error(error);
clearAndAddHttpError({ key: 'node', error });
@ -61,11 +58,8 @@ export default () => {
locationId: node.locationId,
databaseHostId: node.databaseHostId,
fqdn: node.fqdn,
listenPortHTTP: node.listenPortHTTP,
publicPortHTTP: node.publicPortHTTP,
listenPortSFTP: node.listenPortSFTP,
publicPortSFTP: node.publicPortSFTP,
scheme: node.scheme,
behindProxy: node.behindProxy,
}}
validationSchema={object().shape({
name: string().required().max(191),
@ -73,9 +67,9 @@ export default () => {
})}
>
{
({ isSubmitting, isValid }) => (
({ isSubmitting }) => (
<React.Fragment>
<AdminBox title={'Settings'} css={tw`relative`}>
<AdminBox title={'Settings'} css={tw`w-full relative`}>
<SpinnerOverlay visible={isSubmitting}/>
<Form css={tw`mb-0`}>
@ -114,51 +108,51 @@ export default () => {
/>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortHTTP'}
name={'listenPortHTTP'}
label={'HTTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'scheme'}>SSL</Label>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortHTTP'}
name={'publicPortHTTP'}
label={'HTTP Public Port'}
type={'number'}
/>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'scheme'}
type={'radio'}
value={'https'}
/>
<span css={tw`text-neutral-300 ml-2`}>Enabled</span>
</label>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'scheme'}
type={'radio'}
value={'http'}
/>
<span css={tw`text-neutral-300 ml-2`}>Disabled</span>
</label>
</div>
</div>
<div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:mr-4 md:mb-0`}>
<Field
id={'listenPortSFTP'}
name={'listenPortSFTP'}
label={'SFTP Listen Port'}
type={'number'}
/>
</div>
<div css={tw`mt-6`}>
<Label htmlFor={'behindProxy'}>Behind Proxy</Label>
<div css={tw`mb-6 md:w-full md:flex md:flex-col md:ml-4 md:mb-0`}>
<Field
id={'publicPortSFTP'}
name={'publicPortSFTP'}
label={'SFTP Public Port'}
type={'number'}
/>
</div>
</div>
<div>
<label css={tw`inline-flex items-center mr-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value={false}
/>
<span css={tw`text-neutral-300 ml-2`}>No</span>
</label>
<div css={tw`flex flex-row items-center w-full`}>
<div css={tw`flex ml-auto`}>
<Button type={'submit'} disabled={isSubmitting || !isValid}>
Save
</Button>
<label css={tw`inline-flex items-center ml-2`}>
<FormikField
name={'behindProxy'}
type={'radio'}
value
/>
<span css={tw`text-neutral-300 ml-2`}>Yes</span>
</label>
</div>
</div>
</Form>