From be4ba1153c956daf7e54ddea571c13f98c858b17 Mon Sep 17 00:00:00 2001
From: Matteo Luppi <100372313+lups2000@users.noreply.github.com>
Date: Thu, 15 Aug 2024 19:35:24 +0200
Subject: [PATCH] add popover to socks and transparent (#7108)

add popover
---
 web/src/js/components/Modes/Socks.tsx       | 38 +++++++++++++++++++--
 web/src/js/components/Modes/Transparent.tsx | 38 +++++++++++++++++++--
 2 files changed, 72 insertions(+), 4 deletions(-)

diff --git a/web/src/js/components/Modes/Socks.tsx b/web/src/js/components/Modes/Socks.tsx
index da7f07051..62734e703 100644
--- a/web/src/js/components/Modes/Socks.tsx
+++ b/web/src/js/components/Modes/Socks.tsx
@@ -2,10 +2,16 @@ import * as React from "react";
 import { useAppDispatch, useAppSelector } from "../../ducks";
 import { getSpec, SocksState } from "../../modes/socks";
 import { ServerInfo } from "../../ducks/backendState";
-import { setActive } from "../../ducks/modes/socks";
+import {
+    setActive,
+    setListenHost,
+    setListenPort,
+} from "../../ducks/modes/socks";
 
 import { ModeToggle } from "./ModeToggle";
 import { ServerStatus } from "./CaptureSetup";
+import ValueEditor from "../editors/ValueEditor";
+import { Popover } from "./Popover";
 
 export default function Socks() {
     const serverState = useAppSelector((state) => state.modes.socks);
@@ -54,7 +60,35 @@ function SocksRow({
                 }
             >
                 Run SOCKS Proxy
-                {/** Add here popover to set listen_host and listen_port */}
+                <Popover>
+                    <p>Listen Host</p>
+                    <ValueEditor
+                        className="mode-input"
+                        content={server.listen_host || ""}
+                        onEditDone={(host) =>
+                            dispatch(setListenHost({ server, value: host }))
+                        }
+                    />
+
+                    <p>Listen Port</p>
+                    <ValueEditor
+                        className="mode-input"
+                        content={
+                            server.listen_port
+                                ? server.listen_port.toString()
+                                : ""
+                        }
+                        placeholder="8080"
+                        onEditDone={(port) =>
+                            dispatch(
+                                setListenPort({
+                                    server,
+                                    value: parseInt(port),
+                                }),
+                            )
+                        }
+                    />
+                </Popover>
             </ModeToggle>
             <ServerStatus error={error} backendState={backendState} />
         </div>
diff --git a/web/src/js/components/Modes/Transparent.tsx b/web/src/js/components/Modes/Transparent.tsx
index d2ac5c567..41159bfec 100644
--- a/web/src/js/components/Modes/Transparent.tsx
+++ b/web/src/js/components/Modes/Transparent.tsx
@@ -2,10 +2,16 @@ import * as React from "react";
 import { useAppDispatch, useAppSelector } from "../../ducks";
 import { getSpec, TransparentState } from "../../modes/transparent";
 import { ServerInfo } from "../../ducks/backendState";
-import { setActive } from "../../ducks/modes/transparent";
+import {
+    setActive,
+    setListenHost,
+    setListenPort,
+} from "../../ducks/modes/transparent";
 
 import { ModeToggle } from "./ModeToggle";
 import { ServerStatus } from "./CaptureSetup";
+import ValueEditor from "../editors/ValueEditor";
+import { Popover } from "./Popover";
 
 export default function Transparent() {
     const serverState = useAppSelector((state) => state.modes.transparent);
@@ -60,7 +66,35 @@ function TransparentRow({
                 }
             >
                 Run Transparent Proxy
-                {/** Add here popover to set listen_host and listen_port */}
+                <Popover>
+                    <p>Listen Host</p>
+                    <ValueEditor
+                        className="mode-input"
+                        content={server.listen_host || ""}
+                        onEditDone={(host) =>
+                            dispatch(setListenHost({ server, value: host }))
+                        }
+                    />
+
+                    <p>Listen Port</p>
+                    <ValueEditor
+                        className="mode-input"
+                        content={
+                            server.listen_port
+                                ? server.listen_port.toString()
+                                : ""
+                        }
+                        placeholder="8080"
+                        onEditDone={(port) =>
+                            dispatch(
+                                setListenPort({
+                                    server,
+                                    value: parseInt(port),
+                                }),
+                            )
+                        }
+                    />
+                </Popover>
             </ModeToggle>
             <ServerStatus error={error} backendState={backendState} />
         </div>