From 401b5c019809db25f542932dd58e557cba2ed4f9 Mon Sep 17 00:00:00 2001
From: Matteo Luppi <100372313+lups2000@users.noreply.github.com>
Date: Wed, 4 Sep 2024 15:23:37 +0200
Subject: [PATCH] add popover to reverse mode (#7161)

---
 web/src/js/components/Modes/Reverse.tsx | 58 ++++++++++++-------------
 1 file changed, 28 insertions(+), 30 deletions(-)

diff --git a/web/src/js/components/Modes/Reverse.tsx b/web/src/js/components/Modes/Reverse.tsx
index 86391cb2a..3a332036d 100644
--- a/web/src/js/components/Modes/Reverse.tsx
+++ b/web/src/js/components/Modes/Reverse.tsx
@@ -16,6 +16,7 @@ import Dropdown, { MenuItem } from "../common/Dropdown";
 import ValueEditor from "../editors/ValueEditor";
 import { ServerStatus } from "./CaptureSetup";
 import { ModeToggle } from "./ModeToggle";
+import { Popover } from "./Popover";
 
 interface ReverseToggleRowProps {
     removable: boolean;
@@ -105,36 +106,8 @@ function ReverseToggleRow({
                             {prot}
                         </MenuItem>
                     ))}
-                </Dropdown>{" "}
-                <span
-                    onClick={() => {
-                        dispatch(setActive({ server, value: !server.active }));
-                    }}
-                >
-                    traffic from
-                </span>
-                <ValueEditor
-                    className="mode-reverse-input"
-                    content={server.listen_host || ""}
-                    onEditDone={(value) =>
-                        dispatch(setListenHost({ server, value }))
-                    }
-                    placeholder="*"
-                />
-                <ValueEditor
-                    className="mode-reverse-input"
-                    content={String(server.listen_port || "")}
-                    onEditDone={(value) =>
-                        dispatch(
-                            setListenPort({
-                                server,
-                                value: value as unknown as number,
-                            }),
-                        )
-                    }
-                    placeholder="8080"
-                />{" "}
-                to{" "}
+                </Dropdown>
+                traffic to
                 <ValueEditor
                     className="mode-reverse-input"
                     content={server.destination?.toString() || ""}
@@ -143,6 +116,31 @@ function ReverseToggleRow({
                     }
                     placeholder="example.com"
                 />
+                <Popover>
+                    <p>Listen Host</p>
+                    <ValueEditor
+                        className="mode-reverse-input"
+                        content={server.listen_host || ""}
+                        onEditDone={(value) =>
+                            dispatch(setListenHost({ server, value }))
+                        }
+                        placeholder="*"
+                    />
+                    <p>Listen Port</p>
+                    <ValueEditor
+                        className="mode-reverse-input"
+                        content={String(server.listen_port || "")}
+                        onEditDone={(value) =>
+                            dispatch(
+                                setListenPort({
+                                    server,
+                                    value: value as unknown as number,
+                                }),
+                            )
+                        }
+                        placeholder="8080"
+                    />
+                </Popover>
                 {removable && (
                     <i
                         className="fa fa-fw fa-trash fa-lg"