Rooba
/
mitmproxy
mirror of https://github.com/mitmproxy/mitmproxy.git
1
1
Fork 0
Code Issues Packages Projects Releases Wiki Activity

add popover to socks and transparent (#7108) 

add popover
This commit is contained in:
Matteo Luppi 2024-08-15 19:35:24 +02:00 committed by GitHub
parent aa7a912d89
commit be4ba1153c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 72 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/js/components/Modes/Socks.tsx
View File

@ -2,10 +2,16 @@ import * as React from "react";
import { useAppDispatch, useAppSelector } from "../../ducks"; import { useAppDispatch, useAppSelector } from "../../ducks";
import { getSpec, SocksState } from "../../modes/socks"; import { getSpec, SocksState } from "../../modes/socks";
import { ServerInfo } from "../../ducks/backendState"; import { ServerInfo } from "../../ducks/backendState";
import { setActive } from "../../ducks/modes/socks"; import {
setActive,
setListenHost,
setListenPort,
} from "../../ducks/modes/socks";
import { ModeToggle } from "./ModeToggle"; import { ModeToggle } from "./ModeToggle";
import { ServerStatus } from "./CaptureSetup"; import { ServerStatus } from "./CaptureSetup";
import ValueEditor from "../editors/ValueEditor";
import { Popover } from "./Popover";
export default function Socks() { export default function Socks() {
const serverState = useAppSelector((state) => state.modes.socks); const serverState = useAppSelector((state) => state.modes.socks);
@ -54,7 +60,35 @@ function SocksRow({
} }
> >
Run SOCKS Proxy 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> </ModeToggle>
<ServerStatus error={error} backendState={backendState} /> <ServerStatus error={error} backendState={backendState} />
</div> </div>

38
web/src/js/components/Modes/Transparent.tsx
View File

@ -2,10 +2,16 @@ import * as React from "react";
import { useAppDispatch, useAppSelector } from "../../ducks"; import { useAppDispatch, useAppSelector } from "../../ducks";
import { getSpec, TransparentState } from "../../modes/transparent"; import { getSpec, TransparentState } from "../../modes/transparent";
import { ServerInfo } from "../../ducks/backendState"; import { ServerInfo } from "../../ducks/backendState";
import { setActive } from "../../ducks/modes/transparent"; import {
setActive,
setListenHost,
setListenPort,
} from "../../ducks/modes/transparent";
import { ModeToggle } from "./ModeToggle"; import { ModeToggle } from "./ModeToggle";
import { ServerStatus } from "./CaptureSetup"; import { ServerStatus } from "./CaptureSetup";
import ValueEditor from "../editors/ValueEditor";
import { Popover } from "./Popover";
export default function Transparent() { export default function Transparent() {
const serverState = useAppSelector((state) => state.modes.transparent); const serverState = useAppSelector((state) => state.modes.transparent);
@ -60,7 +66,35 @@ function TransparentRow({
} }
> >
Run Transparent Proxy 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> </ModeToggle>
<ServerStatus error={error} backendState={backendState} /> <ServerStatus error={error} backendState={backendState} />
</div> </div>