diff --git a/client/ui-wails/frontend/src/components/FancyToggleSwitch.tsx b/client/ui-wails/frontend/src/components/FancyToggleSwitch.tsx index ede2d2592..b6d22bc2e 100644 --- a/client/ui-wails/frontend/src/components/FancyToggleSwitch.tsx +++ b/client/ui-wails/frontend/src/components/FancyToggleSwitch.tsx @@ -5,75 +5,71 @@ import { ToggleSwitch } from "@/components/ToggleSwitch"; import { cn } from "@/lib/cn"; interface Props { - value: boolean; - onChange: (value: boolean) => void; - helpText?: React.ReactNode; - label?: React.ReactNode; - children?: React.ReactNode; - disabled?: boolean; - dataCy?: string; - className?: string; - labelClassName?: string; - textWrapperClassName?: string; + value: boolean; + onChange: (value: boolean) => void; + helpText?: React.ReactNode; + label?: React.ReactNode; + children?: React.ReactNode; + disabled?: boolean; + dataCy?: string; + className?: string; + labelClassName?: string; + textWrapperClassName?: string; } export default function FancyToggleSwitch({ - value, - onChange, - helpText, - label, - children, - disabled = false, - dataCy, - className, - labelClassName, - textWrapperClassName = "max-w-md", + value, + onChange, + helpText, + label, + children, + disabled = false, + dataCy, + className, + labelClassName, + textWrapperClassName = "max-w-lg", }: Readonly) { - const handleToggle = () => { - if (disabled) return; - onChange(!value); - }; + const handleToggle = () => { + if (disabled) return; + onChange(!value); + }; - const handleKeyDown = (event: React.KeyboardEvent) => { - if (disabled) return; - if (event.key === "Enter" || event.key === " ") { - event.preventDefault(); - handleToggle(); - } - }; + const handleKeyDown = (event: React.KeyboardEvent) => { + if (disabled) return; + if (event.key === "Enter" || event.key === " ") { + event.preventDefault(); + handleToggle(); + } + }; - return ( -
-
-
- - {helpText} + return ( +
+
+
+ + {helpText} +
+
+ +
+
+ {children && value ? ( +
e.stopPropagation()}> + {children} +
+ ) : null}
-
- -
-
- {children && value ? ( -
e.stopPropagation()}> - {children} -
- ) : null} -
- ); + ); } diff --git a/client/ui-wails/frontend/src/modules/settings/SettingsNetwork.tsx b/client/ui-wails/frontend/src/modules/settings/SettingsNetwork.tsx index 5926228ac..79bb09837 100644 --- a/client/ui-wails/frontend/src/modules/settings/SettingsNetwork.tsx +++ b/client/ui-wails/frontend/src/modules/settings/SettingsNetwork.tsx @@ -4,23 +4,24 @@ import { useSettings } from "@/modules/settings/SettingsContext.tsx"; export function SettingsNetwork() { const { config, setField } = useSettings(); + return ( <> setField("lazyConnectionEnabled", v)} - label={"Lazy connections"} + label={"Lazy Connections"} helpText={ - "Only establish peer tunnels on first traffic instead of eagerly at startup." + "Instead of maintaining always-on connections, NetBird activates them on-demand based on activity or signaling." } /> setField("networkMonitor", v)} - label={"Network monitor"} + label={"Reconnect on Network Change"} helpText={ - "Reconnect automatically when the host network changes (Wi-Fi switch, VPN, sleep/wake)." + "Monitor the network and automatically reconnect on changes such as Wi-Fi switching, Ethernet changes, or resume from sleep." } /> @@ -30,25 +31,19 @@ export function SettingsNetwork() { value={!config.disableDns} onChange={(v) => setField("disableDns", !v)} label={"Enable DNS"} - helpText={ - "Apply NetBird-managed DNS settings to the host resolver." - } + helpText={"Apply NetBird-managed DNS settings to the host resolver."} /> setField("disableClientRoutes", !v)} - label={"Enable client routes"} - helpText={ - "Accept routes advertised by other peers so this client can reach their networks." - } + label={"Enable Client Routes"} + helpText={"Accept routes from other peers to reach their networks."} /> setField("disableServerRoutes", !v)} - label={"Enable server routes"} - helpText={ - "Advertise this host's local routes to other peers." - } + label={"Enable Server Routes"} + helpText={"Advertise this host's local routes to other peers."} /> diff --git a/client/ui-wails/frontend/src/modules/settings/SettingsSecurity.tsx b/client/ui-wails/frontend/src/modules/settings/SettingsSecurity.tsx index 14930ec76..195be598f 100644 --- a/client/ui-wails/frontend/src/modules/settings/SettingsSecurity.tsx +++ b/client/ui-wails/frontend/src/modules/settings/SettingsSecurity.tsx @@ -10,17 +10,17 @@ export function SettingsSecurity() { setField("blockInbound", v)} - label={"Block inbound traffic"} + label={"Block Inbound Traffic"} helpText={ - "Drop all unsolicited inbound traffic on the NetBird interface." + "Reject unsolicited connections from peers to this device and any networks it routes. Outbound traffic is unaffected." } /> setField("blockLanAccess", v)} - label={"Block LAN access"} + label={"Block LAN Access"} helpText={ - "Prevent peers from reaching this host's local network." + "Prevent peers from reaching your local network or its devices when this device routes their traffic." } /> @@ -28,21 +28,24 @@ export function SettingsSecurity() { setField("rosenpassEnabled", v)} - label={"Quantum-resistant encryption"} + onChange={(v) => { + setField("rosenpassEnabled", v); + if (!v) setField("rosenpassPermissive", false); + }} + label={"Enable Quantum-Resistance"} helpText={ - "Add a post-quantum key exchange (Rosenpass) on top of WireGuard." + "Add a post-quantum key exchange via Rosenpass on top of WireGuard®." } - > - setField("rosenpassPermissive", v)} - label={"Permissive mode"} - helpText={ - "Allow connections to peers without quantum-resistance support." - } - /> - + /> + setField("rosenpassPermissive", v)} + label={"Enable Permissive Mode"} + helpText={ + "Allow connections to peers without quantum-resistance support." + } + disabled={!config.rosenpassEnabled} + /> );