Add informational dialog for local network sharing

2 files changed, 40 insertions, 14 deletions

diff --git a/gui/locales/messages.pot b/gui/locales/messages.pot
index 6775c9d43a..5cace656a3 100644
--- a/gui/locales/messages.pot
+++ b/gui/locales/messages.pot
@@ -1359,10 +1359,6 @@ msgid "Adult content"
 msgstr ""
 
 msgctxt "vpn-settings-view"
-msgid "Allows access to other devices on the same network for sharing, printing etc."
-msgstr ""
-
-msgctxt "vpn-settings-view"
 msgid "Attention: enabling this will always require a Mullvad VPN connection in order to reach the internet."
 msgstr ""
 
@@ -1428,6 +1424,10 @@ msgid "Increases anonymity by routing your traffic into one %(wireguard)s server
 msgstr ""
 
 msgctxt "vpn-settings-view"
+msgid "It does this by allowing network communication outside the tunnel to local multicast and broadcast ranges as well as to and from these private IP ranges:"
+msgstr ""
+
+msgctxt "vpn-settings-view"
 msgid "Kill switch"
 msgstr ""
 
@@ -1476,6 +1476,10 @@ msgid "This built-in feature prevents your traffic from leaking outside of the V
 msgstr ""
 
 msgctxt "vpn-settings-view"
+msgid "This feature allows access to other devices on the local network, such as for sharing, printing, streaming, etc."
+msgstr ""
+
+msgctxt "vpn-settings-view"
 msgid "This might cause issues on certain websites, services, and programs."
 msgstr ""
 
@@ -1614,6 +1618,9 @@ msgstr ""
 msgid "All applications"
 msgstr ""
 
+msgid "Allows access to other devices on the same network for sharing, printing etc."
+msgstr ""
+
 msgid "Always-on VPN assigned to other app"
 msgstr ""
 
diff --git a/gui/src/renderer/components/VpnSettings.tsx b/gui/src/renderer/components/VpnSettings.tsx
index 1213703f61..676ae4f484 100644
--- a/gui/src/renderer/components/VpnSettings.tsx
+++ b/gui/src/renderer/components/VpnSettings.tsx
@@ -55,6 +55,11 @@ const StyledSectionItem = styled(Cell.Container)({
   backgroundColor: colors.blue40,
 });
 
+const LanIpRanges = styled.ul({
+  listStyle: 'disc outside',
+  marginLeft: '20px',
+});
+
 export default function VpnSettings() {
   const { pop } = useHistory();
 
@@ -197,20 +202,34 @@ function AllowLan() {
             {messages.pgettext('vpn-settings-view', 'Local network sharing')}
           </Cell.InputLabel>
         </AriaLabel>
+        <AriaDetails>
+          <InfoButton>
+            <ModalMessage>
+              {messages.pgettext(
+                'vpn-settings-view',
+                'This feature allows access to other devices on the local network, such as for sharing, printing, streaming, etc.',
+              )}
+            </ModalMessage>
+            <ModalMessage>
+              {messages.pgettext(
+                'vpn-settings-view',
+                'It does this by allowing network communication outside the tunnel to local multicast and broadcast ranges as well as to and from these private IP ranges:',
+              )}
+              <LanIpRanges>
+                <li>10.0.0.0/8</li>
+                <li>172.16.0.0/12</li>
+                <li>192.168.0.0/16</li>
+                <li>169.254.0.0/16</li>
+                <li>0xfe80::/10</li>
+                <li>0xfc00::/7</li>
+              </LanIpRanges>
+            </ModalMessage>
+          </InfoButton>
+        </AriaDetails>
         <AriaInput>
           <Cell.Switch isOn={allowLan} onChange={setAllowLan} />
         </AriaInput>
       </Cell.Container>
-      <Cell.CellFooter>
-        <AriaDescription>
-          <Cell.CellFooterText>
-            {messages.pgettext(
-              'vpn-settings-view',
-              'Allows access to other devices on the same network for sharing, printing etc.',
-            )}
-          </Cell.CellFooterText>
-        </AriaDescription>
-      </Cell.CellFooter>
     </AriaInputGroup>
   );
 }