diff options
4 files changed, 65 insertions, 47 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 50a7f004a3..3071fd41ff 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 @@ -42,7 +42,7 @@ import { NavigationContainer } from '../../NavigationContainer'; import { NavigationListItem } from '../../NavigationListItem'; import { NavigationScrollbars } from '../../NavigationScrollbars'; import SettingsHeader, { HeaderTitle } from '../../SettingsHeader'; -import { AllowLan, AutoConnect, AutoStart, DnsBlockers } from './components'; +import { AllowLan, AutoConnect, AutoStart, DnsBlockers, EnableIpv6 } from './components'; const StyledInfoButton = styled(InfoButton)({ marginRight: spacings.medium, @@ -118,52 +118,6 @@ export function VpnSettingsView() { ); } -function EnableIpv6() { - const enableIpv6 = useSelector((state) => state.settings.enableIpv6); - const { setEnableIpv6: setEnableIpv6Impl } = useAppContext(); - - const setEnableIpv6 = useCallback( - async (enableIpv6: boolean) => { - try { - await setEnableIpv6Impl(enableIpv6); - } catch (e) { - const error = e as Error; - log.error('Failed to update enable IPv6', error.message); - } - }, - [setEnableIpv6Impl], - ); - - return ( - <AriaInputGroup> - <Cell.Container> - <AriaLabel> - <Cell.InputLabel>{messages.pgettext('vpn-settings-view', 'Enable IPv6')}</Cell.InputLabel> - </AriaLabel> - <AriaDetails> - <StyledInfoButton> - <ModalMessage> - {messages.pgettext( - 'vpn-settings-view', - 'When this feature is enabled, IPv6 can be used alongside IPv4 in the VPN tunnel to communicate with internet services.', - )} - </ModalMessage> - <ModalMessage> - {messages.pgettext( - 'vpn-settings-view', - 'IPv4 is always enabled and the majority of websites and applications use this protocol. We do not recommend enabling IPv6 unless you know you need it.', - )} - </ModalMessage> - </StyledInfoButton> - </AriaDetails> - <AriaInput> - <Cell.Switch isOn={enableIpv6} onChange={setEnableIpv6} /> - </AriaInput> - </Cell.Container> - </AriaInputGroup> - ); -} - function KillSwitchInfo() { const [killSwitchInfoVisible, showKillSwitchInfo, hideKillSwitchInfo] = useBoolean(false); diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx new file mode 100644 index 0000000000..00f2d6f370 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/EnableIpv6.tsx @@ -0,0 +1,62 @@ +import { useCallback } from 'react'; +import styled from 'styled-components'; + +import { messages } from '../../../../../../shared/gettext'; +import log from '../../../../../../shared/logging'; +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, +}); + +export function EnableIpv6() { + const enableIpv6 = useSelector((state) => state.settings.enableIpv6); + const { setEnableIpv6: setEnableIpv6Impl } = useAppContext(); + + const setEnableIpv6 = useCallback( + async (enableIpv6: boolean) => { + try { + await setEnableIpv6Impl(enableIpv6); + } catch (e) { + const error = e as Error; + log.error('Failed to update enable IPv6', error.message); + } + }, + [setEnableIpv6Impl], + ); + + return ( + <AriaInputGroup> + <Cell.Container> + <AriaLabel> + <Cell.InputLabel>{messages.pgettext('vpn-settings-view', 'Enable IPv6')}</Cell.InputLabel> + </AriaLabel> + <AriaDetails> + <StyledInfoButton> + <ModalMessage> + {messages.pgettext( + 'vpn-settings-view', + 'When this feature is enabled, IPv6 can be used alongside IPv4 in the VPN tunnel to communicate with internet services.', + )} + </ModalMessage> + <ModalMessage> + {messages.pgettext( + 'vpn-settings-view', + 'IPv4 is always enabled and the majority of websites and applications use this protocol. We do not recommend enabling IPv6 unless you know you need it.', + )} + </ModalMessage> + </StyledInfoButton> + </AriaDetails> + <AriaInput> + <Cell.Switch isOn={enableIpv6} onChange={setEnableIpv6} /> + </AriaInput> + </Cell.Container> + </AriaInputGroup> + ); +} diff --git a/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts new file mode 100644 index 0000000000..75ca28c325 --- /dev/null +++ b/desktop/packages/mullvad-vpn/src/renderer/components/views/vpn-settings/components/enable-ipv6/index.ts @@ -0,0 +1 @@ +export * from './EnableIpv6'; 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 14b08e40ba..377829e9be 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 @@ -2,3 +2,4 @@ export * from './allow-lan'; export * from './auto-connect'; export * from './auto-start'; export * from './dns-blockers'; +export * from './enable-ipv6'; |