ui(admin): add new node page

2021-09-12 21:22:33 -06:00 · 2021-09-12 21:22:33 -06:00 · d0a78ec067
commit d0a78ec067
parent 3c01dbbcc5
15 changed files with 362 additions and 176 deletions
--- a/app/Http/Controllers/Api/Application/Locations/LocationController.php
+++ b/app/Http/Controllers/Api/Application/Locations/LocationController.php
@ -86,11 +86,6 @@ class LocationController extends ApplicationApiController

        return $this->fractal->item($location)
            ->transformWith(LocationTransformer::class)
-            ->addMeta([
-                'resource' => route('api.application.locations.view', [
-                    'location' => $location->id,
-                ]),
-            ])
            ->respond(201);
    }

--- a/app/Http/Controllers/Api/Application/Nodes/NodeController.php
+++ b/app/Http/Controllers/Api/Application/Nodes/NodeController.php
@ -90,11 +90,6 @@ class NodeController extends ApplicationApiController

        return $this->fractal->item($node)
            ->transformWith(NodeTransformer::class)
-            ->addMeta([
-                'resource' => route('api.application.nodes.view', [
-                    'node' => $node->id,
-                ]),
-            ])
            ->respond(201);
    }

--- a/app/Http/Controllers/Api/Application/Servers/DatabaseController.php
+++ b/app/Http/Controllers/Api/Application/Servers/DatabaseController.php
@ -87,12 +87,6 @@ class DatabaseController extends ApplicationApiController

        return $this->fractal->item($database)
            ->transformWith(ServerDatabaseTransformer::class)
-            ->addMeta([
-                'resource' => route('api.application.servers.databases.view', [
-                    'server' => $server->id,
-                    'database' => $database->id,
-                ]),
-            ])
            ->respond(Response::HTTP_CREATED);
    }

--- a/app/Http/Controllers/Api/Application/Users/UserController.php
+++ b/app/Http/Controllers/Api/Application/Users/UserController.php
@ -115,11 +115,6 @@ class UserController extends ApplicationApiController

        return $this->fractal->item($user)
            ->transformWith(UserTransformer::class)
-            ->addMeta([
-                'resource' => route('api.application.users.view', [
-                    'user' => $user->id,
-                ]),
-            ])
            ->respond(201);
    }

--- a/resources/scripts/api/admin/nodes/createNode.ts
+++ b/resources/scripts/api/admin/nodes/createNode.ts
@ -1,11 +1,41 @@
 import http from '@/api/http';
 import { Node, rawDataToNode } from '@/api/admin/nodes/getNodes';

-export default (name: string, description: string | null, include: string[] = []): Promise<Node> => {
+export interface Values {
+    name: string;
+    locationId: number;
+    databaseHostId: number | null;
+    fqdn: string;
+    scheme: string;
+    behindProxy: boolean;
+    public: boolean;
+    daemonBase: string;
+
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+}
+
+export default (values: Values, include: string[] = []): Promise<Node> => {
+    const data = {};
+
+    Object.keys(values).forEach((key) => {
+        const key2 = key
+            .replace('HTTP', 'Http')
+            .replace('SFTP', 'Sftp')
+            .replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
+        // @ts-ignore
+        data[key2] = values[key];
+    });
+
    return new Promise((resolve, reject) => {
-        http.post('/api/application/nodes', {
-            name, description,
-        }, { params: { include: include.join(',') } })
+        http.post('/api/application/nodes', data, { params: { include: include.join(',') } })
            .then(({ data }) => resolve(rawDataToNode(data)))
            .catch(reject);
    });
--- a/resources/scripts/api/admin/nodes/updateNode.ts
+++ b/resources/scripts/api/admin/nodes/updateNode.ts
@ -14,9 +14,7 @@ export default (id: number, node: Partial<Node>, include: string[] = []): Promis
    });

    return new Promise((resolve, reject) => {
-        http.patch(`/api/application/nodes/${id}`, {
-            ...data,
-        }, { params: { include: include.join(',') } })
+        http.patch(`/api/application/nodes/${id}`, data, { params: { include: include.join(',') } })
            .then(({ data }) => resolve(rawDataToNode(data)))
            .catch(reject);
    });
--- a/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
+++ b/resources/scripts/components/admin/nodes/DatabaseSelect.tsx
@ -34,8 +34,8 @@ export default ({ selected }: { selected: Database | null }) => {
        <SearchableSelect
            id={'databaseId'}
            name={'databaseId'}
-            label={'Database'}
-            placeholder={'Select a database...'}
+            label={'Database Host'}
+            placeholder={'Select a database host...'}
            items={databases}
            selected={database}
            setSelected={setDatabase}
--- a/resources/scripts/components/admin/nodes/NewNodeContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NewNodeContainer.tsx
@ -1,8 +1,60 @@
+import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
+import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
+import Button from '@/components/elements/Button';
+import FlashMessageRender from '@/components/FlashMessageRender';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import tw from 'twin.macro';
 import AdminContentBlock from '@/components/admin/AdminContentBlock';
+import { number, object, string } from 'yup';
+import createNode, { Values } from '@/api/admin/nodes/createNode';
+
+type Values2 = Omit<Omit<Values, 'behindProxy'>, 'public'> & { behindProxy: string; public: string };
+
+const initialValues: Values2 = {
+    name: '',
+    locationId: 0,
+    databaseHostId: null,
+    fqdn: '',
+    scheme: 'https',
+    behindProxy: 'false',
+    public: 'true',
+    daemonBase: '/var/lib/pterodactyl/volumes',
+
+    listenPortHTTP: 8080,
+    publicPortHTTP: 8080,
+    listenPortSFTP: 2022,
+    publicPortSFTP: 2022,
+
+    memory: 0,
+    memoryOverallocate: 0,
+    disk: 0,
+    diskOverallocate: 0,
+};

 export default () => {
+    const history = useHistory();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const submit = (values2: Values2, { setSubmitting }: FormikHelpers<Values2>) => {
+        clearFlashes('node:create');
+
+        const values: Values = { ...values2, behindProxy: values2.behindProxy === 'true', public: values2.public === 'true' };
+
+        createNode(values)
+            .then(node => history.push(`/admin/nodes/${node.id}`))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node:create', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
    return (
        <AdminContentBlock title={'New Node'}>
            <div css={tw`w-full flex flex-row items-center mb-8`}>
@ -11,6 +63,56 @@ export default () => {
                    <p css={tw`text-base text-neutral-400 whitespace-nowrap overflow-ellipsis overflow-hidden`}>Add a new node to the panel.</p>
                </div>
            </div>
+
+            <FlashMessageRender byKey={'node:create'}/>
+
+            <Formik
+                onSubmit={submit}
+                initialValues={initialValues}
+                validationSchema={object().shape({
+                    name: string().required().max(191),
+
+                    listenPortHTTP: number().required(),
+                    publicPortHTTP: number().required(),
+                    listenPortSFTP: number().required(),
+                    publicPortSFTP: number().required(),
+
+                    memory: number().required(),
+                    memoryOverallocate: number().required(),
+                    disk: number().required(),
+                    diskOverallocate: number().required(),
+                })}
+            >
+                {
+                    ({ isSubmitting, isValid }) => (
+                        <Form>
+                            <div css={tw`flex flex-col lg:flex-row`}>
+                                <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
+                                    <NodeSettingsContainer/>
+                                </div>
+
+                                <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
+                                    <div css={tw`flex w-full`}>
+                                        <NodeListenContainer/>
+                                    </div>
+
+                                    <div css={tw`flex w-full mt-4`}>
+                                        <NodeLimitContainer/>
+                                    </div>
+
+                                    <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
+                                        <div css={tw`flex flex-row`}>
+                                            <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                                Create
+                                            </Button>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </Form>
+                    )
+                }
+            </Formik>
        </AdminContentBlock>
    );
 };
--- a/resources/scripts/components/admin/nodes/NodeDeleteButton.tsx
+++ b/resources/scripts/components/admin/nodes/NodeDeleteButton.tsx
@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import tw from 'twin.macro';
+import Button from '@/components/elements/Button';
+import ConfirmationModal from '@/components/elements/ConfirmationModal';
+import deleteNode from '@/api/admin/nodes/deleteNode';
+
+interface Props {
+    nodeId: number;
+    onDeleted: () => void;
+}
+
+export default ({ nodeId, onDeleted }: Props) => {
+    const [ visible, setVisible ] = useState(false);
+    const [ loading, setLoading ] = useState(false);
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const onDelete = () => {
+        setLoading(true);
+        clearFlashes('node');
+
+        deleteNode(nodeId)
+            .then(() => {
+                setLoading(false);
+                onDeleted();
+            })
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+
+                setLoading(false);
+                setVisible(false);
+            });
+    };
+
+    return (
+        <>
+            <ConfirmationModal
+                visible={visible}
+                title={'Delete node?'}
+                buttonText={'Yes, delete node'}
+                onConfirmed={onDelete}
+                showSpinnerOverlay={loading}
+                onModalDismissed={() => setVisible(false)}
+            >
+                Are you sure you want to delete this node?
+            </ConfirmationModal>
+
+            <Button type={'button'} size={'xsmall'} color={'red'} onClick={() => setVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" css={tw`h-5 w-5`}>
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+            </Button>
+        </>
+    );
+};
--- a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx
@ -0,0 +1,135 @@
+import updateNode from '@/api/admin/nodes/updateNode';
+import NodeDeleteButton from '@/components/admin/nodes/NodeDeleteButton';
+import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
+import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';
+import { Context } from '@/components/admin/nodes/NodeRouter';
+import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
+import Button from '@/components/elements/Button';
+import { ApplicationStore } from '@/state';
+import { Actions, useStoreActions } from 'easy-peasy';
+import { Form, Formik, FormikHelpers } from 'formik';
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import tw from 'twin.macro';
+import { number, object, string } from 'yup';
+
+interface Values {
+    name: string;
+    locationId: number;
+    databaseHostId: number | null;
+    fqdn: string;
+    scheme: string;
+    behindProxy: boolean;
+    public: boolean;
+    daemonBase: string; // This value cannot be updated once a node has been created.
+
+    memory: number;
+    memoryOverallocate: number;
+    disk: number;
+    diskOverallocate: number;
+
+    listenPortHTTP: number;
+    publicPortHTTP: number;
+    listenPortSFTP: number;
+    publicPortSFTP: number;
+}
+
+export default () => {
+    const history = useHistory();
+
+    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
+
+    const node = Context.useStoreState(state => state.node);
+    const setNode = Context.useStoreActions(actions => actions.setNode);
+
+    if (node === undefined) {
+        return (
+            <></>
+        );
+    }
+
+    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+        clearFlashes('node');
+
+        updateNode(node.id, values)
+            .then(() => setNode({ ...node, ...values }))
+            .catch(error => {
+                console.error(error);
+                clearAndAddHttpError({ key: 'node', error });
+            })
+            .then(() => setSubmitting(false));
+    };
+
+    return (
+        <Formik
+            onSubmit={submit}
+            initialValues={{
+                name: node.name,
+                locationId: node.locationId,
+                databaseHostId: node.databaseHostId,
+                fqdn: node.fqdn,
+                scheme: node.scheme,
+                behindProxy: node.behindProxy,
+                public: node.public,
+                daemonBase: node.daemonBase,
+
+                listenPortHTTP: node.listenPortHTTP,
+                publicPortHTTP: node.publicPortHTTP,
+                listenPortSFTP: node.listenPortSFTP,
+                publicPortSFTP: node.publicPortSFTP,
+
+                memory: node.memory,
+                memoryOverallocate: node.memoryOverallocate,
+                disk: node.disk,
+                diskOverallocate: node.diskOverallocate,
+            }}
+            validationSchema={object().shape({
+                name: string().required().max(191),
+
+                listenPortHTTP: number().required(),
+                publicPortHTTP: number().required(),
+                listenPortSFTP: number().required(),
+                publicPortSFTP: number().required(),
+
+                memory: number().required(),
+                memoryOverallocate: number().required(),
+                disk: number().required(),
+                diskOverallocate: number().required(),
+            })}
+        >
+            {
+                ({ isSubmitting, isValid }) => (
+                    <Form>
+                        <div css={tw`flex flex-col lg:flex-row`}>
+                            <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
+                                <NodeSettingsContainer node={node}/>
+                            </div>
+
+                            <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
+                                <div css={tw`flex w-full`}>
+                                    <NodeListenContainer/>
+                                </div>
+
+                                <div css={tw`flex w-full mt-4`}>
+                                    <NodeLimitContainer/>
+                                </div>
+
+                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 px-6`}>
+                                    <div css={tw`flex flex-row`}>
+                                        <NodeDeleteButton
+                                            nodeId={node?.id}
+                                            onDeleted={() => history.push('/admin/nodes')}
+                                        />
+                                        <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
+                                            Save Changes
+                                        </Button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </Form>
+                )
+            }
+        </Formik>
+    );
+};
--- a/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx
@ -1,3 +1,4 @@
+import { faMicrochip } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
@ -9,7 +10,7 @@ export default () => {
    const { isSubmitting } = useFormikContext();

    return (
-        <AdminBox title={'Limits'} css={tw`w-full relative`}>
+        <AdminBox icon={faMicrochip} title={'Limits'} css={tw`w-full relative`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`md:w-full md:flex md:flex-row mb-6`}>
--- a/resources/scripts/components/admin/nodes/NodeListenContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeListenContainer.tsx
@ -1,3 +1,4 @@
+import { faNetworkWired } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
@ -9,7 +10,7 @@ export default () => {
    const { isSubmitting } = useFormikContext();

    return (
-        <AdminBox title={'Listen'} css={tw`w-full relative`}>
+        <AdminBox icon={faNetworkWired} title={'Listen'} css={tw`w-full relative`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`mb-6 md:w-full md:flex md:flex-row`}>
--- a/resources/scripts/components/admin/nodes/NodeRouter.tsx
+++ b/resources/scripts/components/admin/nodes/NodeRouter.tsx
@ -1,3 +1,4 @@
+import NodeEditContainer from '@/components/admin/nodes/NodeEditContainer';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router';
 import tw from 'twin.macro';
@ -11,7 +12,6 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import { ApplicationStore } from '@/state';
 import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigation';
 import NodeAboutContainer from '@/components/admin/nodes/NodeAboutContainer';
-import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer';
 import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer';
 import NodeAllocationContainer from '@/components/admin/nodes/NodeAllocationContainer';
 import NodeServers from '@/components/admin/nodes/NodeServers';
@ -112,7 +112,7 @@ const NodeRouter = () => {
                </Route>

                <Route path={`${match.path}/settings`} exact>
-                    <NodeSettingsContainer/>
+                    <NodeEditContainer/>
                </Route>

                <Route path={`${match.path}/configuration`} exact>
--- a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
+++ b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx
@ -1,54 +1,20 @@
-import Button from '@/components/elements/Button';
+import { Node } from '@/api/admin/nodes/getNodes';
+import { faDatabase } from '@fortawesome/free-solid-svg-icons';
 import React from 'react';
 import AdminBox from '@/components/admin/AdminBox';
 import tw from 'twin.macro';
-import { number, object, string } from 'yup';
-import updateNode from '@/api/admin/nodes/updateNode';
 import Field from '@/components/elements/Field';
 import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
-import { Field as FormikField, Form, Formik, FormikHelpers, useFormikContext } from 'formik';
-import { Context } from '@/components/admin/nodes/NodeRouter';
-import { ApplicationStore } from '@/state';
-import { Actions, useStoreActions } from 'easy-peasy';
+import { Field as FormikField, useFormikContext } from 'formik';
 import LocationSelect from '@/components/admin/nodes/LocationSelect';
 import DatabaseSelect from '@/components/admin/nodes/DatabaseSelect';
 import Label from '@/components/elements/Label';
-import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer';
-import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer';

-interface Values {
-    name: string;
-    locationId: number;
-    databaseHostId: number | null;
-    fqdn: string;
-    scheme: string;
-    behindProxy: boolean;
-    public: boolean;
-
-    memory: number;
-    memoryOverallocate: number;
-    disk: number;
-    diskOverallocate: number;
-
-    listenPortHTTP: number;
-    publicPortHTTP: number;
-    listenPortSFTP: number;
-    publicPortSFTP: number;
-}
-
-const NodeSettingsContainer = () => {
+export default function NodeSettingsContainer ({ node }: { node?: Node }) {
    const { isSubmitting } = useFormikContext();

-    const node = Context.useStoreState(state => state.node);
-
-    if (node === undefined) {
-        return (
-            <></>
-        );
-    }
-
    return (
-        <AdminBox title={'Settings'} css={tw`w-full relative`}>
+        <AdminBox icon={faDatabase} title={'Settings'} css={tw`w-full relative`}>
            <SpinnerOverlay visible={isSubmitting}/>

            <div css={tw`mb-6`}>
@ -77,6 +43,16 @@ const NodeSettingsContainer = () => {
                />
            </div>

+            <div css={tw`mb-6`}>
+                <Field
+                    id={'daemonBase'}
+                    name={'daemonBase'}
+                    label={'Data Directory'}
+                    type={'text'}
+                    disabled={node !== undefined}
+                />
+            </div>
+
            <div css={tw`mt-6`}>
                <Label htmlFor={'scheme'}>SSL</Label>

@ -109,7 +85,7 @@ const NodeSettingsContainer = () => {
                        <FormikField
                            name={'behindProxy'}
                            type={'radio'}
-                            value={false}
+                            value={'false'}
                        />
                        <span css={tw`text-neutral-300 ml-2`}>No</span>
                    </label>
@ -118,7 +94,7 @@ const NodeSettingsContainer = () => {
                        <FormikField
                            name={'behindProxy'}
                            type={'radio'}
-                            value
+                            value={'true'}
                        />
                        <span css={tw`text-neutral-300 ml-2`}>Yes</span>
                    </label>
@ -133,7 +109,7 @@ const NodeSettingsContainer = () => {
                        <FormikField
                            name={'public'}
                            type={'radio'}
-                            value={false}
+                            value={'false'}
                        />
                        <span css={tw`text-neutral-300 ml-2`}>Disabled</span>
                    </label>
@ -142,7 +118,7 @@ const NodeSettingsContainer = () => {
                        <FormikField
                            name={'public'}
                            type={'radio'}
-                            value
+                            value={'true'}
                        />
                        <span css={tw`text-neutral-300 ml-2`}>Enabled</span>
                    </label>
@ -150,98 +126,4 @@ const NodeSettingsContainer = () => {
            </div>
        </AdminBox>
    );
-};
-
-export default () => {
-    const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
-
-    const node = Context.useStoreState(state => state.node);
-    const setNode = Context.useStoreActions(actions => actions.setNode);
-
-    if (node === undefined) {
-        return (
-            <></>
-        );
-    }
-
-    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
-        console.log('submit!');
-        clearFlashes('node');
-
-        updateNode(node.id, values)
-            .then(() => setNode({ ...node, ...values }))
-            .catch(error => {
-                console.error(error);
-                clearAndAddHttpError({ key: 'node', error });
-            })
-            .then(() => setSubmitting(false));
-    };
-
-    return (
-        <Formik
-            onSubmit={submit}
-            initialValues={{
-                name: node.name,
-                locationId: node.locationId,
-                databaseHostId: node.databaseHostId,
-                fqdn: node.fqdn,
-                scheme: node.scheme,
-                behindProxy: node.behindProxy,
-                public: node.public,
-
-                listenPortHTTP: node.listenPortHTTP,
-                publicPortHTTP: node.publicPortHTTP,
-                listenPortSFTP: node.listenPortSFTP,
-                publicPortSFTP: node.publicPortSFTP,
-
-                memory: node.memory,
-                memoryOverallocate: node.memoryOverallocate,
-                disk: node.disk,
-                diskOverallocate: node.diskOverallocate,
-            }}
-            validationSchema={object().shape({
-                name: string().required().max(191),
-
-                listenPortHTTP: number().required(),
-                publicPortHTTP: number().required(),
-                listenPortSFTP: number().required(),
-                publicPortSFTP: number().required(),
-
-                memory: number().required(),
-                memoryOverallocate: number().required(),
-                disk: number().required(),
-                diskOverallocate: number().required(),
-            })}
-        >
-            {
-                ({ isSubmitting, isValid }) => (
-                    <Form>
-                        <div css={tw`flex flex-col lg:flex-row`}>
-                            <div css={tw`w-full lg:w-1/2 flex flex-col mr-0 lg:mr-2`}>
-                                <NodeSettingsContainer/>
-                            </div>
-
-                            <div css={tw`w-full lg:w-1/2 flex flex-col ml-0 lg:ml-2 mt-4 lg:mt-0`}>
-                                <div css={tw`flex w-full`}>
-                                    <NodeListenContainer/>
-                                </div>
-
-                                <div css={tw`flex w-full mt-4`}>
-                                    <NodeLimitContainer/>
-                                </div>
-
-                                <div css={tw`rounded shadow-md bg-neutral-700 mt-4 py-2 pr-6`}>
-                                    <div css={tw`flex flex-row`}>
-                                        <Button type={'submit'} css={tw`ml-auto`} disabled={isSubmitting || !isValid}>
-                                            Save Changes
-                                        </Button>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Form>
-                )
-            }
-        </Formik>
-    );
-};
+}
--- a/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
+++ b/resources/scripts/components/admin/nodes/allocations/CreateAllocationForm.tsx
@ -35,7 +35,7 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
    }, [ nodeId ]);

    const isValidIP = (inputValue: string): boolean => {
-        // TODO: Better way of checking for a valid ip (and CIDR).
+        // TODO: Better way of checking for a valid ip (and CIDR)
        return inputValue.match(/^([0-9a-f.:/]+)$/) !== null;
    };

@ -44,11 +44,11 @@ function CreateAllocationForm ({ nodeId }: { nodeId: string | number }) {
        return inputValue.match(/^([0-9-]+)$/) !== null;
    };

-    const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
+    const submit = ({ ips, ports, alias }: Values, { setSubmitting }: FormikHelpers<Values>) => {
        setSubmitting(false);

-        values.ips.forEach(async (ip) => {
-            const allocations = await createAllocation(nodeId, { ip, ports: values.ports, alias: values.alias }, [ 'server' ]);
+        ips.forEach(async (ip) => {
+            const allocations = await createAllocation(nodeId, { ip, ports, alias }, [ 'server' ]);
            await mutate(data => ({ ...data!, items: { ...data!.items!, ...allocations } }));
        });
    };