Implement IPv6 enable/disable in GUI

8 files changed, 117 insertions, 3 deletions

diff --git a/app/app.js b/app/app.js
index 369c51be2d..87d0c10186 100644
--- a/app/app.js
+++ b/app/app.js
@@ -369,6 +369,12 @@ export default class AppRenderer {
     actions.settings.updateAllowLan(allowLan);
   }
 
+  async setEnableIpv6(enableIpv6: boolean) {
+    const actions = this._reduxActions;
+    await this._daemonRpc.setOpenVpnEnableIpv6(enableIpv6);
+    actions.settings.updateEnableIpv6(enableIpv6);
+  }
+
   async setAutoConnect(autoConnect: boolean) {
     const actions = this._reduxActions;
     await this._daemonRpc.setAutoConnect(autoConnect);
@@ -393,6 +399,12 @@ export default class AppRenderer {
     this._updateConnectionState(connectionState);
   }
 
+  async _fetchTunnelOptions() {
+    const actions = this._reduxActions;
+    const tunnelOptions = await this._daemonRpc.getTunnelOptions();
+    actions.settings.updateEnableIpv6(tunnelOptions.openvpn.enableIpv6);
+  }
+
   async _connectToDaemon(): Promise<void> {
     let credentials;
     try {
@@ -523,6 +535,7 @@ export default class AppRenderer {
       this._fetchAutoConnect(),
       this._fetchLocation(),
       this._fetchAccountHistory(),
+      this._fetchTunnelOptions(),
     ]);
   }
 
diff --git a/app/components/AdvancedSettings.js b/app/components/AdvancedSettings.js
index fa1c61152f..3763e9687d 100644
--- a/app/components/AdvancedSettings.js
+++ b/app/components/AdvancedSettings.js
@@ -6,12 +6,15 @@ import { Layout, Container } from './Layout';
 import NavigationBar, { BackBarItem } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
 import CustomScrollbars from './CustomScrollbars';
+import Switch from './Switch';
 import styles from './AdvancedSettingsStyles';
 import Img from './Img';
 
 type AdvancedSettingsProps = {
+  enableIpv6: boolean,
   protocol: string,
   port: string | number,
+  setEnableIpv6: (boolean) => void,
   onUpdate: (protocol: string, port: string | number) => void,
   onClose: () => void,
 };
@@ -40,6 +43,20 @@ export class AdvancedSettings extends Component<AdvancedSettingsProps> {
                 <HeaderTitle>Advanced</HeaderTitle>
               </SettingsHeader>
               <CustomScrollbars style={styles.advanced_settings__scrollview} autoHide={true}>
+                <View style={styles.advanced_settings__ipv6}>
+                  <View style={styles.advanced_settings__cell_label_container}>
+                    <Text style={styles.advanced_settings__cell_label}>Enable IPv6</Text>
+                  </View>
+                  <View style={styles.advanced_settings__ipv6_accessory}>
+                    <Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
+                  </View>
+                </View>
+                <View style={styles.advanced_settings__cell_footer}>
+                  <Text style={styles.advanced_settings__cell_footer_label}>
+                    {'Enable IPv6 communication through the tunnel.'}
+                  </Text>
+                </View>
+
                 <View style={styles.advanced_settings__content}>
                   <Selector
                     title={'Network protocols'}
diff --git a/app/components/AdvancedSettingsStyles.js b/app/components/AdvancedSettingsStyles.js
index fc2f4a8587..cb3923e282 100644
--- a/app/components/AdvancedSettingsStyles.js
+++ b/app/components/AdvancedSettingsStyles.js
@@ -24,6 +24,14 @@ export default {
     flexBasis: 'auto',
     overflow: 'visible',
   }),
+  advanced_settings__ipv6: Styles.createViewStyle({
+    backgroundColor: colors.blue,
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  advanced_settings__ipv6_accessory: Styles.createViewStyle({
+    marginRight: 12,
+  }),
   advanced_settings__cell: Styles.createViewStyle({
     cursor: 'default',
     backgroundColor: colors.green,
diff --git a/app/containers/AdvancedSettingsPage.js b/app/containers/AdvancedSettingsPage.js
index bf584096b9..ce935a89e4 100644
--- a/app/containers/AdvancedSettingsPage.js
+++ b/app/containers/AdvancedSettingsPage.js
@@ -8,10 +8,16 @@ import RelaySettingsBuilder from '../lib/relay-settings-builder';
 import { log } from '../lib/platform';
 
 import type { ReduxState, ReduxDispatch } from '../redux/store';
+import type { RelaySettingsRedux } from '../redux/settings/reducers';
 import type { SharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: ReduxState) => {
-  const relaySettings = state.settings.relaySettings;
+  const protocolAndPort = mapRelaySettingsToProtocolAndPort(state.settings.relaySettings);
+
+  return { enableIpv6: state.settings.enableIpv6, ...protocolAndPort };
+};
+
+const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) => {
   if (relaySettings.normal) {
     const { protocol, port } = relaySettings.normal;
     return {
@@ -55,6 +61,14 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
         log.error('Failed to update relay settings', e.message);
       }
     },
+
+    setEnableIpv6: async (enableIpv6) => {
+      try {
+        await props.app.setEnableIpv6(enableIpv6);
+      } catch (e) {
+        log.error('Failed to update enable IPv6', e.message);
+      }
+    },
   };
 };
 
diff --git a/app/lib/daemon-rpc.js b/app/lib/daemon-rpc.js
index a8b986c68f..8e2925f83e 100644
--- a/app/lib/daemon-rpc.js
+++ b/app/lib/daemon-rpc.js
@@ -182,6 +182,19 @@ const RelayListSchema = object({
   ),
 });
 
+export type TunnelOptions = {
+  openvpn: {
+    enableIpv6: boolean,
+  },
+};
+
+const TunnelOptionsSchema = object({
+  openvpn: object({
+    enable_ipv6: boolean,
+    mssfix: maybe(number),
+  }),
+});
+
 const AccountDataSchema = object({
   expiry: string,
 });
@@ -203,6 +216,8 @@ export interface DaemonRpcProtocol {
   getRelaySettings(): Promise<RelaySettings>;
   setAllowLan(boolean): Promise<void>;
   getAllowLan(): Promise<boolean>;
+  setOpenVpnEnableIpv6(boolean): Promise<void>;
+  getTunnelOptions(): Promise<TunnelOptions>;
   setAutoConnect(boolean): Promise<void>;
   getAutoConnect(): Promise<boolean>;
   connectTunnel(): Promise<void>;
@@ -356,6 +371,25 @@ export class DaemonRpc implements DaemonRpcProtocol {
     }
   }
 
+  async setOpenVpnEnableIpv6(enableIpv6: boolean): Promise<void> {
+    await this._transport.send('set_openvpn_enable_ipv6', [enableIpv6]);
+  }
+
+  async getTunnelOptions(): Promise<TunnelOptions> {
+    const response = await this._transport.send('get_tunnel_options');
+    try {
+      const validatedObject = validate(TunnelOptionsSchema, response);
+
+      return {
+        openvpn: {
+          enableIpv6: validatedObject.openvpn.enable_ipv6,
+        },
+      };
+    } catch (error) {
+      throw new ResponseParseError('Invalid response from get_tunnel_options', error);
+    }
+  }
+
   async setAutoConnect(autoConnect: boolean): Promise<void> {
     await this._transport.send('set_auto_connect', [autoConnect]);
   }
diff --git a/app/redux/settings/actions.js b/app/redux/settings/actions.js
index fd3ad651d9..2c7efdf554 100644
--- a/app/redux/settings/actions.js
+++ b/app/redux/settings/actions.js
@@ -22,11 +22,17 @@ export type UpdateAllowLanAction = {
   allowLan: boolean,
 };
 
+export type UpdateEnableIpv6Action = {
+  type: 'UPDATE_ENABLE_IPV6',
+  enableIpv6: boolean,
+};
+
 export type SettingsAction =
   | UpdateRelayAction
   | UpdateRelayLocationsAction
   | UpdateAutoConnectAction
-  | UpdateAllowLanAction;
+  | UpdateAllowLanAction
+  | UpdateEnableIpv6Action;
 
 function updateRelay(relay: RelaySettingsRedux): UpdateRelayAction {
   return {
@@ -58,4 +64,17 @@ function updateAllowLan(allowLan: boolean): UpdateAllowLanAction {
   };
 }
 
-export default { updateRelay, updateRelayLocations, updateAutoConnect, updateAllowLan };
+function updateEnableIpv6(enableIpv6: boolean): UpdateEnableIpv6Action {
+  return {
+    type: 'UPDATE_ENABLE_IPV6',
+    enableIpv6,
+  };
+}
+
+export default {
+  updateRelay,
+  updateRelayLocations,
+  updateAutoConnect,
+  updateAllowLan,
+  updateEnableIpv6,
+};
diff --git a/app/redux/settings/reducers.js b/app/redux/settings/reducers.js
index 2bd5798aa5..9870066edc 100644
--- a/app/redux/settings/reducers.js
+++ b/app/redux/settings/reducers.js
@@ -39,6 +39,7 @@ export type SettingsReduxState = {
   relayLocations: Array<RelayLocationRedux>,
   autoConnect: boolean,
   allowLan: boolean,
+  enableIpv6: boolean,
 };
 
 const initialState: SettingsReduxState = {
@@ -52,6 +53,7 @@ const initialState: SettingsReduxState = {
   relayLocations: [],
   autoConnect: false,
   allowLan: false,
+  enableIpv6: true,
 };
 
 export default function(
@@ -83,6 +85,12 @@ export default function(
         autoConnect: action.autoConnect,
       };
 
+    case 'UPDATE_ENABLE_IPV6':
+      return {
+        ...state,
+        enableIpv6: action.enableIpv6,
+      };
+
     default:
       return state;
   }
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index a8cd18cba3..8db9c99602 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -42,6 +42,7 @@ describe('components/SelectLocation', () => {
     ],
     autoConnect: false,
     allowLan: false,
+    enableIpv6: true,
   };
 
   const makeProps = (