Function Transparent

web/src/js/components/Modes/Transparent.tsx:17–48

()

import { Popover } from "./Popover";

export default function Transparent() {
    const serverState = useAppSelector((state) => state.modes.transparent);
    const backendState = useAppSelector((state) => state.backendState.servers);

    const servers = serverState.map((server) => {
        return (
            <TransparentRow
                key={server.ui_id}
                server={server}
                backendState={backendState[getSpec(server)]}
            />
        );
    });

    return (
        <div>
            <h4 className="mode-title">Transparent Proxy</h4>
            <p className="mode-description">
                You{" "}
                <a
                    href="https://docs.mitmproxy.org/stable/howto-transparent/"
                    style={{ textDecoration: "underline", color: "inherit" }}
                >
                    configure your routing table
                </a>{" "}
                to send traffic through mitmproxy.
            </p>

            {servers}
        </div>
    );
}

function TransparentRow({
    server,