Merge branch 'mssfix-gui'

CHANGELOG.md

@@ -24,6 +24,8 @@ Line wrap the file at 100 chars.                                              Th
 
 ## [Unreleased]
 ### Added
+- Allow configuration of OpenVPN mssfix option with GUI (under Advanced Settings).
+
 #### Windows
 - Monitor and enforce IPv6 DNS settings on network interfaces (previously IPv4-only).
 

gui/packages/desktop/src/renderer/app.js

@@ -348,6 +348,12 @@ export default class AppRenderer {
     actions.settings.updateEnableIpv6(enableIpv6);
   }
 
+  async setOpenVpnMssfix(mssfix: ?number) {
+    const actions = this._reduxActions;
+    actions.settings.updateOpenVpnMssfix(mssfix);
+    await this._daemonRpc.setOpenVpnMssfix(mssfix);
+  }
+
   async setAutoConnect(autoConnect: boolean) {
     const actions = this._reduxActions;
     await this._daemonRpc.setAutoConnect(autoConnect);
@@ -538,6 +544,7 @@ export default class AppRenderer {
     reduxSettings.updateAllowLan(newSettings.allowLan);
     reduxSettings.updateAutoConnect(newSettings.autoConnect);
     reduxSettings.updateEnableIpv6(newSettings.tunnelOptions.enableIpv6);
+    reduxSettings.updateOpenVpnMssfix(newSettings.tunnelOptions.openvpn.mssfix);
 
     this._setRelaySettings(newSettings.relaySettings);
   }

gui/packages/desktop/src/renderer/components/AdvancedSettings.js

@@ -16,16 +16,47 @@ import Switch from './Switch';
 import styles from './AdvancedSettingsStyles';
 import Img from './Img';
 
+const MIN_MSSFIX_VALUE = 1000;
+const MAX_MSSFIX_VALUE = 1500;
+
 type Props = {
   enableIpv6: boolean,
   protocol: string,
+  mssfix: ?number,
   port: string | number,
   setEnableIpv6: (boolean) => void,
+  setOpenVpnMssfix: (?number) => void,
   onUpdate: (protocol: string, port: string | number) => void,
   onClose: () => void,
 };
 
-export class AdvancedSettings extends Component<Props> {
+type State = {
+  persistedMssfix: ?number,
+  editedMssfix: ?number,
+  focusOnMssfix: boolean,
+};
+
+export class AdvancedSettings extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      persistedMssfix: props.mssfix,
+      editedMssfix: props.mssfix,
+      focusOnMssfix: false,
+    };
+  }
+
+  componentDidUpdate(_oldProps: Props, _oldState: State) {
+    if (this.props.mssfix !== this.state.persistedMssfix) {
+      this.setState((state, props) => ({
+        ...state,
+        persistedMssfix: props.mssfix,
+        editedMssfix: state.focusOnMssfix ? state.editedMssfix : props.mssfix,
+      }));
+    }
+  }
+
   render() {
     let portSelector = null;
     let protocol = this.props.protocol.toUpperCase();
@@ -36,6 +67,13 @@ export class AdvancedSettings extends Component<Props> {
       portSelector = this._createPortSelector();
     }
 
+    let mssfixStyle;
+    if (this._mssfixIsValid()) {
+      mssfixStyle = styles.advanced_settings__mssfix_valid_value;
+    } else {
+      mssfixStyle = styles.advanced_settings__mssfix_invalid_value;
+    }
+
     return (
       <Layout>
         <Container>
@@ -73,6 +111,21 @@ export class AdvancedSettings extends Component<Props> {
                     {portSelector}
                   </View>
                 </NavigationScrollbars>
+
+                <Cell.Container>
+                  <Cell.Label>Mssfix</Cell.Label>
+                  <Cell.Input
+                    keyboardType={'numeric'}
+                    maxLength={5}
+                    placeholder={'None'}
+                    value={this.state.editedMssfix}
+                    style={mssfixStyle}
+                    onChangeText={this._onMssfixChange}
+                    onFocus={this._onMssfixFocus}
+                    onBlur={this._onMssfixBlur}
+                  />
+                </Cell.Container>
+                <Cell.Footer>Change OpenVPN MSS value</Cell.Footer>
               </View>
             </NavigationContainer>
           </View>
@@ -99,6 +152,35 @@ export class AdvancedSettings extends Component<Props> {
       />
     );
   }
+
+  _onMssfixChange = (mssfixString: string) => {
+    const mssfix = mssfixString.replace(/[^0-9]/g, '');
+
+    if (mssfix === '') {
+      this.setState({ editedMssfix: null });
+    } else {
+      this.setState({ editedMssfix: parseInt(mssfix, 10) });
+    }
+  };
+
+  _onMssfixFocus = () => {
+    this.setState({ focusOnMssfix: true });
+  };
+
+  _onMssfixBlur = () => {
+    this.setState({ focusOnMssfix: false });
+
+    if (this._mssfixIsValid()) {
+      this.props.setOpenVpnMssfix(this.state.editedMssfix);
+      this.setState((state, _props) => ({ persistedMssfix: state.editedMssfix }));
+    }
+  };
+
+  _mssfixIsValid(): boolean {
+    const mssfix = this.state.editedMssfix;
+
+    return mssfix >= MIN_MSSFIX_VALUE && mssfix <= MAX_MSSFIX_VALUE;
+  }
 }
 
 type SelectorProps<T> = {

gui/packages/desktop/src/renderer/components/AdvancedSettingsStyles.js

@@ -85,4 +85,10 @@ export default {
     color: colors.white,
     flex: 0,
   }),
+  advanced_settings__mssfix_valid_value: Styles.createTextStyle({
+    color: colors.blue,
+  }),
+  advanced_settings__mssfix_invalid_value: Styles.createTextStyle({
+    color: colors.red,
+  }),
 };

gui/packages/desktop/src/renderer/components/Cell.js

@@ -1,7 +1,7 @@
 // @flow
 
 import * as React from 'react';
-import { Button, Text, Component, Styles, Types, View } from 'reactxp';
+import { Button, Component, Styles, Text, TextInput, Types, View } from 'reactxp';
 import PlainImg from './Img';
 import { colors } from '../../config';
 
@@ -61,6 +61,29 @@ const styles = {
     }),
   },
 
+  input: {
+    view: Styles.createViewStyle({
+      flexGrow: 1,
+      paddingLeft: 12,
+      paddingRight: 12,
+      paddingTop: 8,
+      paddingBottom: 8,
+      marginRight: 3,
+      borderWidth: 2,
+      borderRadius: 8,
+      borderColor: 'transparent',
+    }),
+    text: Styles.createTextStyle({
+      color: colors.blue,
+      backgroundColor: 'rgba(255, 255, 255, 0.5)',
+      fontFamily: 'DINPro',
+      fontSize: 20,
+      fontWeight: '900',
+      lineHeight: 26,
+      textAlign: 'center',
+    }),
+  },
+
   cellHover: Styles.createViewStyle({
     backgroundColor: colors.blue80,
   }),
@@ -149,6 +172,19 @@ export function Label({
   );
 }
 
+export function Input({ style, ...otherProps }: Types.TextInputProps) {
+  return (
+    <TextInput
+      maxLength={10}
+      placeholderTextColor={colors.blue40}
+      autoCorrect={false}
+      autoFocus={false}
+      style={[styles.input.text, styles.input.view, style]}
+      {...otherProps}
+    />
+  );
+}
+
 export type SubTextProps = {
   children: React.Node,
   cellHoverStyle?: Types.ViewStyle,

gui/packages/desktop/src/renderer/containers/AdvancedSettingsPage.js

@@ -14,7 +14,11 @@ import type { SharedRouteProps } from '../routes';
 const mapStateToProps = (state: ReduxState) => {
   const protocolAndPort = mapRelaySettingsToProtocolAndPort(state.settings.relaySettings);
 
-  return { enableIpv6: state.settings.enableIpv6, ...protocolAndPort };
+  return {
+    enableIpv6: state.settings.enableIpv6,
+    mssfix: state.settings.openVpn.mssfix,
+    ...protocolAndPort,
+  };
 };
 
 const mapRelaySettingsToProtocolAndPort = (relaySettings: RelaySettingsRedux) => {
@@ -68,6 +72,14 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
         log.error('Failed to update enable IPv6', e.message);
       }
     },
+
+    setOpenVpnMssfix: async (mssfix) => {
+      try {
+        await props.app.setOpenVpnMssfix(mssfix);
+      } catch (e) {
+        log.error('Failed to update mssfix value', e.message);
+      }
+    },
   };
 };
 

gui/packages/desktop/src/renderer/lib/daemon-rpc.js

@@ -336,6 +336,7 @@ export interface DaemonRpcProtocol {
   updateRelaySettings(RelaySettingsUpdate): Promise<void>;
   setAllowLan(boolean): Promise<void>;
   setEnableIpv6(boolean): Promise<void>;
+  setOpenVpnMssfix(?number): Promise<void>;
   setAutoConnect(boolean): Promise<void>;
   connectTunnel(): Promise<void>;
   disconnectTunnel(): Promise<void>;
@@ -438,6 +439,10 @@ export class DaemonRpc implements DaemonRpcProtocol {
     await this._transport.send('set_enable_ipv6', [enableIpv6]);
   }
 
+  async setOpenVpnMssfix(mssfix: ?number): Promise<void> {
+    await this._transport.send('set_openvpn_mssfix', [mssfix]);
+  }
+
   async setAutoConnect(autoConnect: boolean): Promise<void> {
     await this._transport.send('set_auto_connect', [autoConnect]);
   }

gui/packages/desktop/src/renderer/redux/settings/actions.js

@@ -27,12 +27,18 @@ export type UpdateEnableIpv6Action = {
   enableIpv6: boolean,
 };
 
+export type UpdateOpenVpnMssfixAction = {
+  type: 'UPDATE_OPENVPN_MSSFIX',
+  mssfix: ?number,
+};
+
 export type SettingsAction =
   | UpdateRelayAction
   | UpdateRelayLocationsAction
   | UpdateAutoConnectAction
   | UpdateAllowLanAction
-  | UpdateEnableIpv6Action;
+  | UpdateEnableIpv6Action
+  | UpdateOpenVpnMssfixAction;
 
 function updateRelay(relay: RelaySettingsRedux): UpdateRelayAction {
   return {
@@ -71,10 +77,18 @@ function updateEnableIpv6(enableIpv6: boolean): UpdateEnableIpv6Action {
   };
 }
 
+function updateOpenVpnMssfix(mssfix: ?number): UpdateOpenVpnMssfixAction {
+  return {
+    type: 'UPDATE_OPENVPN_MSSFIX',
+    mssfix,
+  };
+}
+
 export default {
   updateRelay,
   updateRelayLocations,
   updateAutoConnect,
   updateAllowLan,
   updateEnableIpv6,
+  updateOpenVpnMssfix,
 };

gui/packages/desktop/src/renderer/redux/settings/reducers.js

@@ -49,6 +49,9 @@ export type SettingsReduxState = {
   autoConnect: boolean,
   allowLan: boolean,
   enableIpv6: boolean,
+  openVpn: {
+    mssfix: ?number,
+  },
 };
 
 const initialState: SettingsReduxState = {
@@ -63,6 +66,9 @@ const initialState: SettingsReduxState = {
   autoConnect: false,
   allowLan: false,
   enableIpv6: true,
+  openVpn: {
+    mssfix: null,
+  },
 };
 
 export default function(
@@ -100,6 +106,15 @@ export default function(
         enableIpv6: action.enableIpv6,
       };
 
+    case 'UPDATE_OPENVPN_MSSFIX':
+      return {
+        ...state,
+        openVpn: {
+          ...state.openVpn,
+          mssfix: action.mssfix,
+        },
+      };
+
     default:
       return state;
   }