Move AllowLan to separate folder

4 files changed, 66 insertions, 50 deletions

diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
index e6bad710d8..52edc25ba0 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/VpnSettingsView.tsx
@@ -43,7 +43,7 @@ import { NavigationContainer } from '../../NavigationContainer';
 import { NavigationListItem } from '../../NavigationListItem';
 import { NavigationScrollbars } from '../../NavigationScrollbars';
 import SettingsHeader, { HeaderTitle } from '../../SettingsHeader';
-import { AutoStart } from './components';
+import { AllowLan, AutoStart } from './components';
 
 const StyledInfoButton = styled(InfoButton)({
   marginRight: spacings.medium,
@@ -57,11 +57,6 @@ const StyledSectionItem = styled(Cell.Container)({
   backgroundColor: colors.blue40,
 });
 
-const LanIpRanges = styled.ul({
-  listStyle: 'disc outside',
-  marginLeft: spacings.large,
-});
-
 const IndentedValueLabel = styled(Cell.ValueLabel)({
   marginLeft: spacings.medium,
 });
@@ -166,50 +161,6 @@ function AutoConnect() {
   );
 }
 
-function AllowLan() {
-  const allowLan = useSelector((state) => state.settings.allowLan);
-  const { setAllowLan } = useAppContext();
-
-  return (
-    <AriaInputGroup>
-      <Cell.Container>
-        <AriaLabel>
-          <Cell.InputLabel>
-            {messages.pgettext('vpn-settings-view', 'Local network sharing')}
-          </Cell.InputLabel>
-        </AriaLabel>
-        <AriaDetails>
-          <StyledInfoButton>
-            <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>fe80::/10</li>
-                <li>fc00::/7</li>
-              </LanIpRanges>
-            </ModalMessage>
-          </StyledInfoButton>
-        </AriaDetails>
-        <AriaInput>
-          <Cell.Switch isOn={allowLan} onChange={setAllowLan} />
-        </AriaInput>
-      </Cell.Container>
-    </AriaInputGroup>
-  );
-}
-
 function useDns(setting: keyof IDnsOptions['defaultOptions']) {
   const dns = useSelector((state) => state.settings.dns);
   const { setDnsOptions } = useAppContext();
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/AllowLan.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/AllowLan.tsx
new file mode 100644
index 0000000000..48f12659b2
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/AllowLan.tsx
@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+
+import { messages } from '../../../../../../shared/gettext';
+import { useAppContext } from '../../../../../context';
+import { spacings } from '../../../../../lib/foundations';
+import { useSelector } from '../../../../../redux/store';
+import { AriaDetails, AriaInput, AriaInputGroup, AriaLabel } from '../../../../AriaGroup';
+import * as Cell from '../../../../cell';
+import InfoButton from '../../../../InfoButton';
+import { ModalMessage } from '../../../../Modal';
+
+const StyledInfoButton = styled(InfoButton)({
+  marginRight: spacings.medium,
+});
+
+const LanIpRanges = styled.ul({
+  listStyle: 'disc outside',
+  marginLeft: spacings.large,
+});
+
+export function AllowLan() {
+  const allowLan = useSelector((state) => state.settings.allowLan);
+  const { setAllowLan } = useAppContext();
+
+  return (
+    <AriaInputGroup>
+      <Cell.Container>
+        <AriaLabel>
+          <Cell.InputLabel>
+            {messages.pgettext('vpn-settings-view', 'Local network sharing')}
+          </Cell.InputLabel>
+        </AriaLabel>
+        <AriaDetails>
+          <StyledInfoButton>
+            <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>fe80::/10</li>
+                <li>fc00::/7</li>
+              </LanIpRanges>
+            </ModalMessage>
+          </StyledInfoButton>
+        </AriaDetails>
+        <AriaInput>
+          <Cell.Switch isOn={allowLan} onChange={setAllowLan} />
+        </AriaInput>
+      </Cell.Container>
+    </AriaInputGroup>
+  );
+}
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/index.ts
new file mode 100644
index 0000000000..376813c1ce
--- /dev/null
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/allow-lan/index.ts
@@ -0,0 +1 @@
+export * from './AllowLan';
diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
index b63af01467..d0924d22e1 100644
--- a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
+++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/index.ts
@@ -1 +1,2 @@
+export * from './allow-lan';
 export * from './auto-start';