diff --git a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx index 0937be13a..38236a102 100644 --- a/resources/scripts/components/admin/nodes/NodeEditContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeEditContainer.tsx @@ -1,4 +1,3 @@ -import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer'; import React, { useEffect, useState } from 'react'; import { useLocation } from 'react-router'; import tw from 'twin.macro'; @@ -14,6 +13,8 @@ import { SubNavigation, SubNavigationLink } from '@/components/admin/SubNavigati import AdminBox from '@/components/admin/AdminBox'; import NodeLimitContainer from '@/components/admin/nodes/NodeLimitContainer'; import NodeSettingsContainer from '@/components/admin/nodes/NodeSettingsContainer'; +import NodeConfigurationContainer from '@/components/admin/nodes/NodeConfigurationContainer'; +import NodeListenContainer from '@/components/admin/nodes/NodeListenContainer'; interface ctx { node: Node | undefined; @@ -72,7 +73,7 @@ const NodeEditContainer = () => { return ( -
+

{node.name}

{node.uuid}

@@ -116,7 +117,7 @@ const NodeEditContainer = () => { -

Version 1.2.2

+

Version 1.3.1

@@ -127,7 +128,13 @@ const NodeEditContainer = () => {
- +
+ +
+ +
+ +
diff --git a/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx b/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx index 06c18cff6..862b89fff 100644 --- a/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeLimitContainer.tsx @@ -2,7 +2,6 @@ import React from 'react'; import AdminBox from '@/components/admin/AdminBox'; import tw from 'twin.macro'; import { number, object } from 'yup'; -import Button from '@/components/elements/Button'; import Field from '@/components/elements/Field'; import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; import { Form, Formik, FormikHelpers } from 'formik'; @@ -59,9 +58,9 @@ export default () => { })} > { - ({ isSubmitting, isValid }) => ( + ({ isSubmitting }) => ( - +
@@ -104,14 +103,6 @@ export default () => { />
- -
-
- -
-
diff --git a/resources/scripts/components/admin/nodes/NodeListenContainer.tsx b/resources/scripts/components/admin/nodes/NodeListenContainer.tsx new file mode 100644 index 000000000..32c8c2be6 --- /dev/null +++ b/resources/scripts/components/admin/nodes/NodeListenContainer.tsx @@ -0,0 +1,109 @@ +import React from 'react'; +import AdminBox from '@/components/admin/AdminBox'; +import tw from 'twin.macro'; +import { object } from 'yup'; +import Field from '@/components/elements/Field'; +import SpinnerOverlay from '@/components/elements/SpinnerOverlay'; +import { Form, Formik, FormikHelpers } from 'formik'; +import { Context } from '@/components/admin/nodes/NodeEditContainer'; +import { ApplicationStore } from '@/state'; +import { Actions, useStoreActions } from 'easy-peasy'; +import updateNode from '@/api/admin/nodes/updateNode'; + +interface Values { + listenPortHTTP: number; + publicPortHTTP: number; + listenPortSFTP: number; + publicPortSFTP: number; +} + +export default () => { + const { clearFlashes, clearAndAddHttpError } = useStoreActions((actions: Actions) => actions.flashes); + + const node = Context.useStoreState(state => state.node); + const setNode = Context.useStoreActions(actions => actions.setNode); + + if (node === undefined) { + return ( + <> + ); + } + + const submit = ({ listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }: Values, { setSubmitting }: FormikHelpers) => { + clearFlashes('node'); + + updateNode(node.id, { listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP }) + .then(() => setNode({ ...node, listenPortHTTP, publicPortHTTP, listenPortSFTP, publicPortSFTP })) + .catch(error => { + console.error(error); + clearAndAddHttpError({ key: 'node', error }); + }) + .then(() => setSubmitting(false)); + }; + + return ( + + { + ({ isSubmitting }) => ( + + + + +
+
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+
+
+
+ ) + } +
+ ); +}; diff --git a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx index e980ad79d..50fa762a5 100644 --- a/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx +++ b/resources/scripts/components/admin/nodes/NodeSettingsContainer.tsx @@ -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) => { + const submit = ({ name, description, locationId, databaseHostId, fqdn, scheme, behindProxy }: Values, { setSubmitting }: FormikHelpers) => { 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 }) => ( - +
@@ -114,51 +108,51 @@ export default () => { /> -
-
- -
+
+ -
- +
+ + +
-
-
- -
+
+ -
- -
-
+
+ -
-
- +