Merge pull request #545 from mysteriumnetwork/settings-port-forwarding

Add card with port forwarding to the settings page

package.json

@@ -34,7 +34,8 @@
     "server": "./bin/run.sh",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "local_release": "yarn run build && tar -zcvf dist.tar.gz build/"
+    "local_release": "yarn run build && tar -zcvf dist.tar.gz build/",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
   },
   "proxy": "http://127.0.0.1:4449/",
   "browserslist": {
@@ -126,4 +127,4 @@
     "prettier": "^2.1.2",
     "tailwindcss": "^3.4.1"
   }
-}
+}

src/pages/Authenticated/SettingsPage/BandwidthControlCard.tsx

@@ -58,7 +58,7 @@ export const BandwidthControlCard = () => {
   }, [])
 
   return (
-    <Card fluid isLoading={loading}>
+    <Card fluid isLoading={loading} className="mb-10">
       <div className="flex justify-between items-center">
         <div className="flex gap-4">
           <Label value="Limit bandwidth to"></Label>

src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2024 BlockDev AG
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { useState } from 'react'
+import errors from '../../../commons/errors'
+import { useAppSelector } from '../../../commons/hooks'
+import complexActions from '../../../redux/complex.actions'
+import { selectors } from '../../../redux/selectors'
+import Card from '../../../components/Cards/Card'
+import Button from '../../../components/Buttons/Button'
+import { Form } from '../../../components/Inputs/Form'
+import { LabeledInput } from '../../../components/Inputs/LabeledInput'
+
+export default function PortForwardingCard() {
+  const config = useAppSelector(selectors.currentConfig)
+  const [loading, setLoading] = useState<boolean>(false)
+  const [value, setValue] = useState<string>(config.data.udp.ports)
+  async function handleConfigSave() {
+    setLoading(true)
+    try {
+      await complexActions.setUserConfig({ udp: { ports: value } })
+    } catch (err) {
+      errors.parseToastError(err)
+    } finally {
+      setLoading(false)
+    }
+  }
+  return (
+    <Card fluid>
+      <Form className="flex flex-col w-full max-w-[500px] min-w-[240px] gap-4" onSubmit={handleConfigSave}>
+        <div className="flex w-full flex-col">
+          <LabeledInput fluid label="UDP Port range" value={value} onChange={setValue} errorMessagePadding={false} />
+        </div>
+        <div className="w-full sm:w-52">
+          <Button fluid disabled={loading} type="submit" label="Save" />
+        </div>
+      </Form>
+    </Card>
+  )
+}

src/pages/Authenticated/SettingsPage/SettingsPage.tsx

@@ -12,6 +12,7 @@ import Label from '../../../components/Typography/Label'
 import PasswordChangeCard from './PasswordChangeCard'
 import { NodeStatusControlCard } from './NodeStatusControlCard'
 import BandwidthControlCard from './BandwidthControlCard'
+import PortForwardingCard from './PortForwardingCard'
 
 const SettingsPage = () => {
   return (
@@ -25,6 +26,8 @@ const SettingsPage = () => {
       <NodeStatusControlCard />
       <Label value="Bandwidth" className="text-pink-525 mb-4" />
       <BandwidthControlCard />
+      <Label value="Port Forwarding" className="text-pink-525 mb-4" />
+      <PortForwardingCard />
     </PageLayout>
   )
 }