From 4dd9a4ce29f8abd1a526e1f184cb6cdf4c068d6b Mon Sep 17 00:00:00 2001
From: Edmundas Ramanauskas <edmundas.ramanauskas@gmail.com>
Date: Sun, 17 Nov 2024 00:20:48 +0200
Subject: [PATCH 1/2] Add card with port forwarding to the settings page

---
 .../SettingsPage/BandwidthControlCard.tsx     |  2 +-
 .../SettingsPage/PortForwardingCard.tsx       | 52 +++++++++++++++++++
 .../SettingsPage/SettingsPage.tsx             |  3 ++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx

diff --git a/src/pages/Authenticated/SettingsPage/BandwidthControlCard.tsx b/src/pages/Authenticated/SettingsPage/BandwidthControlCard.tsx
index 0c0e4842..98abc65a 100644
--- a/src/pages/Authenticated/SettingsPage/BandwidthControlCard.tsx
+++ b/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>
diff --git a/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx b/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx
new file mode 100644
index 00000000..9d5aad32
--- /dev/null
+++ b/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx
@@ -0,0 +1,52 @@
+/**
+ * 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={(val) => setValue(val)}
+            errorMessagePadding={false}
+          />
+        </div>
+        <div className="w-full sm:w-52">
+          <Button fluid disabled={loading} type="submit" label="Save" />
+        </div>
+      </Form>
+    </Card>
+  )
+}
diff --git a/src/pages/Authenticated/SettingsPage/SettingsPage.tsx b/src/pages/Authenticated/SettingsPage/SettingsPage.tsx
index f788462b..972920b1 100644
--- a/src/pages/Authenticated/SettingsPage/SettingsPage.tsx
+++ b/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>
   )
 }

From 70b3810bc2b9a506a1e789015780b220aababb3d Mon Sep 17 00:00:00 2001
From: Edmundas Ramanauskas <edmundas.ramanauskas@gmail.com>
Date: Mon, 18 Nov 2024 09:17:36 +0200
Subject: [PATCH 2/2] Fix code style issue

---
 package.json                                        |  5 +++--
 .../SettingsPage/PortForwardingCard.tsx             | 13 ++-----------
 2 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 660b4118..8a58c362 100644
--- a/package.json
+++ b/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"
   }
-}
+}
\ No newline at end of file
diff --git a/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx b/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx
index 9d5aad32..8d8f9fc1 100644
--- a/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx
+++ b/src/pages/Authenticated/SettingsPage/PortForwardingCard.tsx
@@ -30,18 +30,9 @@ export default function PortForwardingCard() {
   }
   return (
     <Card fluid>
-      <Form
-        className="flex flex-col w-full max-w-[500px] min-w-[240px] gap-4"
-        onSubmit={handleConfigSave}
-      >
+      <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={(val) => setValue(val)}
-            errorMessagePadding={false}
-          />
+          <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" />