Click on mode's label to activate it (#7153)

* add click event on label to activate mode * use <label> tag instead of <span>
2024-11-23 05:09:57 +00:00 · 2024-09-04 15:01:09 +02:00 · 2024-09-04 15:01:09 +02:00 · d18e21fb76
commit d18e21fb76
parent a5b5963d8c
10 changed files with 57 additions and 17 deletions
--- a/web/src/js/tests/components/Modes/snapshots/RegularSpec.tsx.snap
+++ b/web/src/js/tests/components/Modes/snapshots/RegularSpec.tsx.snap
@ -19,14 +19,21 @@ exports[`RegularSpec 1`] = `
      >
        <input
          checked=""
+          id="mode-checkbox-:r0:"
+          name="mode-checkbox-:r0:"
          type="checkbox"
        />
-        Run HTTP/S Proxy
+        <label
+          for="mode-checkbox-:r0:"
+          style="margin-bottom: 0px; font-weight: normal;"
+        >
+          Run HTTP/S Proxy
+        </label>
        <div
          class="mode-popover"
        >
          <button
-            popovertarget=":r0:"
+            popovertarget=":r1:"
          >
            <i
              aria-hidden="true"
@ -34,7 +41,7 @@ exports[`RegularSpec 1`] = `
            />
          </button>
          <div
-            id=":r0:"
+            id=":r1:"
            popover="auto"
          >
            <h4>
@ -93,14 +100,21 @@ exports[`RegularSpec 2`] = `
      >
        <input
          checked=""
+          id="mode-checkbox-:r2:"
+          name="mode-checkbox-:r2:"
          type="checkbox"
        />
-        Run HTTP/S Proxy
+        <label
+          for="mode-checkbox-:r2:"
+          style="margin-bottom: 0px; font-weight: normal;"
+        >
+          Run HTTP/S Proxy
+        </label>
        <div
          class="mode-popover"
        >
          <button
-            popovertarget=":r1:"
+            popovertarget=":r3:"
          >
            <i
              aria-hidden="true"
@ -108,7 +122,7 @@ exports[`RegularSpec 2`] = `
            />
          </button>
          <div
-            id=":r1:"
+            id=":r3:"
            popover="auto"
          >
            <h4>
--- a/web/src/js/components/Modes/Dns.tsx
+++ b/web/src/js/components/Modes/Dns.tsx
@ -49,11 +49,11 @@ function DnsRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run DNS Server"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Run DNS Server
                <Popover>
                    <p>Listen Host</p>
                    <ValueEditor
--- a/web/src/js/components/Modes/Local.tsx
+++ b/web/src/js/components/Modes/Local.tsx
@ -47,11 +47,11 @@ function LocalRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Intercept traffic for"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Intercept traffic for
                <ValueEditor
                    className="mode-local-input"
                    content={server.applications || ""}
--- a/web/src/js/components/Modes/ModeToggle.tsx
+++ b/web/src/js/components/Modes/ModeToggle.tsx
@ -2,14 +2,34 @@ import * as React from "react";

 type ModeToggleProps = {
    value: boolean;
+    label: string;
    onChange: (e: React.ChangeEvent) => void;
    children: React.ReactNode;
 };

-export function ModeToggle({ value, onChange, children }: ModeToggleProps) {
+export function ModeToggle({
+    value,
+    onChange,
+    children,
+    label,
+}: ModeToggleProps) {
+    const id = React.useId();
+
    return (
        <div className="mode-entry">
-            <input type="checkbox" checked={value} onChange={onChange} />
+            <input
+                type="checkbox"
+                name={`mode-checkbox-${id}`}
+                id={`mode-checkbox-${id}`}
+                checked={value}
+                onChange={onChange}
+            />
+            <label
+                htmlFor={`mode-checkbox-${id}`}
+                style={{ marginBottom: 0, fontWeight: "normal" }}
+            >
+                {label}
+            </label>
            {children}
        </div>
    );
--- a/web/src/js/components/Modes/Regular.tsx
+++ b/web/src/js/components/Modes/Regular.tsx
@ -54,11 +54,11 @@ function RegularRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run HTTP/S Proxy"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Run HTTP/S Proxy
                <Popover>
                    <p>Listen Host</p>
                    <ValueEditor
--- a/web/src/js/components/Modes/Reverse.tsx
+++ b/web/src/js/components/Modes/Reverse.tsx
@ -85,11 +85,11 @@ function ReverseToggleRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Forward"
                onChange={() => {
                    dispatch(setActive({ server, value: !server.active }));
                }}
            >
-                Forward
                <Dropdown
                    text={inner}
                    className="btn btn-default btn-xs mode-reverse-dropdown"
@ -106,7 +106,13 @@ function ReverseToggleRow({
                        </MenuItem>
                    ))}
                </Dropdown>{" "}
-                traffic from{" "}
+                <span
+                    onClick={() => {
+                        dispatch(setActive({ server, value: !server.active }));
+                    }}
+                >
+                    traffic from
+                </span>
                <ValueEditor
                    className="mode-reverse-input"
                    content={server.listen_host || ""}
--- a/web/src/js/components/Modes/Socks.tsx
+++ b/web/src/js/components/Modes/Socks.tsx
@ -55,11 +55,11 @@ function SocksRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run SOCKS Proxy"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Run SOCKS Proxy
                <Popover>
                    <p>Listen Host</p>
                    <ValueEditor
--- a/web/src/js/components/Modes/Transparent.tsx
+++ b/web/src/js/components/Modes/Transparent.tsx
@ -61,11 +61,11 @@ function TransparentRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run Transparent Proxy"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Run Transparent Proxy
                <Popover>
                    <p>Listen Host</p>
                    <ValueEditor
--- a/web/src/js/components/Modes/Upstream.tsx
+++ b/web/src/js/components/Modes/Upstream.tsx
@ -55,11 +55,11 @@ function UpstreamRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run HTTP/S Proxy and forward requests to"
                onChange={() => {
                    dispatch(setActive({ server, value: !server.active }));
                }}
            >
-                Run HTTP/S Proxy and forward requests to
                <ValueEditor
                    className="mode-upstream-input"
                    content={server.destination?.toString() || ""}
--- a/web/src/js/components/Modes/Wireguard.tsx
+++ b/web/src/js/components/Modes/Wireguard.tsx
@ -54,11 +54,11 @@ function WireGuardRow({
        <div>
            <ModeToggle
                value={server.active}
+                label="Run WireGuard Server"
                onChange={() =>
                    dispatch(setActive({ server, value: !server.active }))
                }
            >
-                Run WireGuard Server
                <Popover>
                    <p>Listen Host</p>
                    <ValueEditor