summaryrefslogtreecommitdiffhomepage
path: root/gui/src
diff options
context:
space:
mode:
Diffstat (limited to 'gui/src')
-rw-r--r--gui/src/main/daemon-rpc.ts4
-rw-r--r--gui/src/main/index.ts3
-rw-r--r--gui/src/renderer/app.tsx7
-rw-r--r--gui/src/renderer/components/AdvancedSettings.tsx131
-rw-r--r--gui/src/renderer/components/AdvancedSettingsStyles.tsx11
-rw-r--r--gui/src/renderer/components/Cell.tsx230
-rw-r--r--gui/src/renderer/components/CellStyles.tsx130
-rw-r--r--gui/src/renderer/containers/AdvancedSettingsPage.tsx9
-rw-r--r--gui/src/renderer/redux/settings/actions.ts14
-rw-r--r--gui/src/renderer/redux/settings/reducers.ts13
-rw-r--r--gui/src/shared/ipc-event-channel.ts5
11 files changed, 357 insertions, 200 deletions
diff --git a/gui/src/main/daemon-rpc.ts b/gui/src/main/daemon-rpc.ts
index 00201f7505..8fb299ebaa 100644
--- a/gui/src/main/daemon-rpc.ts
+++ b/gui/src/main/daemon-rpc.ts
@@ -484,6 +484,10 @@ export class DaemonRpc {
await this.transport.send('set_openvpn_mssfix', [mssfix]);
}
+ public async setWireguardMtu(mtu?: number): Promise<void> {
+ await this.transport.send('set_wireguard_mtu', [mtu]);
+ }
+
public async setAutoConnect(autoConnect: boolean): Promise<void> {
await this.transport.send('set_auto_connect', [autoConnect]);
}
diff --git a/gui/src/main/index.ts b/gui/src/main/index.ts
index 3b13231e69..6e325156f3 100644
--- a/gui/src/main/index.ts
+++ b/gui/src/main/index.ts
@@ -939,6 +939,9 @@ class ApplicationMain {
IpcMainEventChannel.settings.handleOpenVpnMssfix((mssfix?: number) =>
this.daemonRpc.setOpenVpnMssfix(mssfix),
);
+ IpcMainEventChannel.settings.handleWireguardMtu((mtu?: number) =>
+ this.daemonRpc.setWireguardMtu(mtu),
+ );
IpcMainEventChannel.settings.handleUpdateRelaySettings((update: RelaySettingsUpdate) =>
this.daemonRpc.updateRelaySettings(update),
);
diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 9eabd147b5..cabddb5fb3 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -335,6 +335,12 @@ export default class AppRenderer {
await IpcRendererEventChannel.settings.setOpenVpnMssfix(mssfix);
}
+ public async setWireguardMtu(mtu?: number) {
+ const actions = this.reduxActions;
+ actions.settings.updateWireguardMtu(mtu);
+ await IpcRendererEventChannel.settings.setWireguardMtu(mtu);
+ }
+
public setAutoConnect(autoConnect: boolean) {
IpcRendererEventChannel.guiSettings.setAutoConnect(autoConnect);
}
@@ -572,6 +578,7 @@ export default class AppRenderer {
reduxSettings.updateEnableIpv6(newSettings.tunnelOptions.generic.enableIpv6);
reduxSettings.updateBlockWhenDisconnected(newSettings.blockWhenDisconnected);
reduxSettings.updateOpenVpnMssfix(newSettings.tunnelOptions.openvpn.mssfix);
+ reduxSettings.updateWireguardMtu(newSettings.tunnelOptions.wireguard.mtu);
reduxSettings.updateBridgeState(newSettings.bridgeState);
this.setRelaySettings(newSettings.relaySettings);
diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index 10757e4d8d..27d4043d7c 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -20,6 +20,8 @@ import SettingsHeader, { HeaderTitle } from './SettingsHeader';
const MIN_MSSFIX_VALUE = 1000;
const MAX_MSSFIX_VALUE = 1450;
+const MIN_WIREGUARD_MTU_VALUE = 1280;
+const MAX_WIREGUARD_MTU_VALUE = 1420;
const UDP_PORTS = [1194, 1195, 1196, 1197, 1300, 1301, 1302];
const TCP_PORTS = [80, 443];
const WIREUGARD_UDP_PORTS = [53];
@@ -44,25 +46,21 @@ interface IProps {
wireguardKeyState: WgKeyState;
wireguard: { port?: number };
mssfix?: number;
+ wireguardMtu?: number;
bridgeState: BridgeState;
setBridgeState: (value: BridgeState) => void;
setEnableIpv6: (value: boolean) => void;
setBlockWhenDisconnected: (value: boolean) => void;
setTunnelProtocol: (value: OptionalTunnelProtocol) => void;
setOpenVpnMssfix: (value: number | undefined) => void;
+ setWireguardMtu: (value: number | undefined) => void;
setOpenVpnRelayProtocolAndPort: (protocol?: RelayProtocol, port?: number) => void;
setWireguardRelayPort: (port?: number) => void;
onViewWireguardKeys: () => void;
onClose: () => void;
}
-interface IState {
- persistedMssfix?: number;
- editedMssfix?: number;
- focusOnMssfix: boolean;
-}
-
-export default class AdvancedSettings extends Component<IProps, IState> {
+export default class AdvancedSettings extends Component<IProps> {
private portItems: { [key in RelayProtocol]: Array<ISelectorItem<OptionalPort>> };
private protocolItems: Array<ISelectorItem<OptionalRelayProtocol>>;
private bridgeStateItems: Array<ISelectorItem<BridgeState>>;
@@ -118,30 +116,9 @@ export default class AdvancedSettings extends Component<IProps, IState> {
value: 'off',
},
];
-
- this.state = {
- persistedMssfix: props.mssfix,
- editedMssfix: props.mssfix,
- focusOnMssfix: false,
- };
- }
-
- public componentDidUpdate(_prevProps: IProps, _prevState: IState) {
- if (this.props.mssfix !== this.state.persistedMssfix) {
- this.setState((state, props) => ({
- ...state,
- persistedMssfix: props.mssfix,
- editedMssfix: state.focusOnMssfix ? state.editedMssfix : props.mssfix,
- }));
- }
}
public render() {
- const mssfixStyle = this.mssfixIsValid()
- ? styles.advanced_settings__mssfix_valid_value
- : styles.advanced_settings__mssfix_invalid_value;
- const mssfixValue = this.state.editedMssfix;
-
const hasWireguardKey = this.props.wireguardKeyState.type === 'key-set';
return (
@@ -298,18 +275,20 @@ export default class AdvancedSettings extends Component<IProps, IState> {
/>
<Cell.Container>
- <Cell.Label>{messages.pgettext('advanced-settings-view', 'Mssfix')}</Cell.Label>
- <Cell.InputFrame style={styles.advanced_settings__mssfix_frame}>
+ <Cell.Label>
+ {messages.pgettext('advanced-settings-view', 'OpenVPN Mssfix')}
+ </Cell.Label>
+ <Cell.InputFrame style={styles.advanced_settings__input_frame}>
<Cell.AutoSizingTextInputContainer>
<Cell.Input
+ value={this.props.mssfix ? this.props.mssfix.toString() : ''}
keyboardType={'numeric'}
maxLength={4}
placeholder={messages.pgettext('advanced-settings-view', 'Default')}
- value={mssfixValue ? mssfixValue.toString() : ''}
- style={[styles.advanced_settings__mssfix_input, mssfixStyle]}
- onChangeText={this.onMssfixChange}
- onFocus={this.onMssfixFocus}
- onBlur={this.onMssfixBlur}
+ onSubmit={this.onMssfixSubmit}
+ validateValue={AdvancedSettings.mssfixIsValid}
+ submitOnBlur={true}
+ modifyValue={AdvancedSettings.removeNonNumericCharacters}
/>
</Cell.AutoSizingTextInputContainer>
</Cell.InputFrame>
@@ -332,6 +311,45 @@ export default class AdvancedSettings extends Component<IProps, IState> {
)}
</Cell.FooterText>
</Cell.Footer>
+
+ <Cell.Container>
+ <Cell.Label>
+ {messages.pgettext('advanced-settings-view', 'WireGuard MTU')}
+ </Cell.Label>
+ <Cell.InputFrame style={styles.advanced_settings__input_frame}>
+ <Cell.AutoSizingTextInputContainer>
+ <Cell.Input
+ value={this.props.wireguardMtu ? this.props.wireguardMtu.toString() : ''}
+ keyboardType={'numeric'}
+ maxLength={4}
+ placeholder={messages.pgettext('advanced-settings-view', 'Default')}
+ onSubmit={this.onWireguardMtuSubmit}
+ validateValue={AdvancedSettings.wireguarMtuIsValid}
+ submitOnBlur={true}
+ modifyValue={AdvancedSettings.removeNonNumericCharacters}
+ />
+ </Cell.AutoSizingTextInputContainer>
+ </Cell.InputFrame>
+ </Cell.Container>
+ <Cell.Footer>
+ <Cell.FooterText>
+ {sprintf(
+ // TRANSLATORS: The hint displayed below the WireGuard MTU input field.
+ // TRANSLATORS: Available placeholders:
+ // TRANSLATORS: %(max)d - the maximum possible wireguard mtu value
+ // TRANSLATORS: %(min)d - the minimum possible wireguard mtu value
+ messages.pgettext(
+ 'advanced-settings-view',
+ 'Set WireGuard MTU value. Valid range: %(min)d - %(max)d.',
+ ),
+ {
+ min: MIN_WIREGUARD_MTU_VALUE,
+ max: MAX_WIREGUARD_MTU_VALUE,
+ },
+ )}
+ </Cell.FooterText>
+ </Cell.Footer>
+
<View style={styles.advanced_settings__wgkeys_cell}>
<Cell.CellButton onPress={this.props.onViewWireguardKeys}>
<Cell.Label>
@@ -394,32 +412,37 @@ export default class AdvancedSettings extends Component<IProps, IState> {
this.props.setBridgeState(bridgeState);
};
- private onMssfixChange = (mssfixString: string) => {
- const mssfix = mssfixString.replace(/[^0-9]/g, '');
-
- if (mssfix === '') {
- this.setState({ editedMssfix: undefined });
- } else {
- this.setState({ editedMssfix: parseInt(mssfix, 10) });
+ private onMssfixSubmit = (value: string) => {
+ const parsedValue = value === '' ? undefined : parseInt(value, 10);
+ if (AdvancedSettings.mssfixIsValid(value)) {
+ this.props.setOpenVpnMssfix(parsedValue);
}
};
- private onMssfixFocus = () => {
- this.setState({ focusOnMssfix: true });
- };
+ private static removeNonNumericCharacters(value: string) {
+ return value.replace(/[^0-9]/g, '');
+ }
- private onMssfixBlur = () => {
- this.setState({ focusOnMssfix: false });
+ private static mssfixIsValid(mssfix: string): boolean {
+ const parsedMssFix = mssfix ? parseInt(mssfix) : undefined;
+ return (
+ parsedMssFix === undefined ||
+ (parsedMssFix >= MIN_MSSFIX_VALUE && parsedMssFix <= MAX_MSSFIX_VALUE)
+ );
+ }
- if (this.mssfixIsValid()) {
- this.props.setOpenVpnMssfix(this.state.editedMssfix);
- this.setState((state, _props) => ({ persistedMssfix: state.editedMssfix }));
+ private onWireguardMtuSubmit = (value: string) => {
+ const parsedValue = value === '' ? undefined : parseInt(value, 10);
+ if (AdvancedSettings.wireguarMtuIsValid(value)) {
+ this.props.setWireguardMtu(parsedValue);
}
};
- private mssfixIsValid(): boolean {
- const mssfix = this.state.editedMssfix;
-
- return mssfix === undefined || (mssfix >= MIN_MSSFIX_VALUE && mssfix <= MAX_MSSFIX_VALUE);
+ private static wireguarMtuIsValid(mtu: string): boolean {
+ const parsedMtu = mtu ? parseInt(mtu) : undefined;
+ return (
+ parsedMtu === undefined ||
+ (parsedMtu >= MIN_WIREGUARD_MTU_VALUE && parsedMtu <= MAX_WIREGUARD_MTU_VALUE)
+ );
}
}
diff --git a/gui/src/renderer/components/AdvancedSettingsStyles.tsx b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
index acdc9e5d8e..737a3e1acd 100644
--- a/gui/src/renderer/components/AdvancedSettingsStyles.tsx
+++ b/gui/src/renderer/components/AdvancedSettingsStyles.tsx
@@ -55,18 +55,9 @@ export default {
advanced_settings__cell_footer_internet_warning_label: Styles.createTextStyle({
marginTop: 4,
}),
- advanced_settings__mssfix_input: Styles.createTextInputStyle({
- minWidth: 80,
- }),
- advanced_settings__mssfix_frame: Styles.createViewStyle({
+ advanced_settings__input_frame: Styles.createViewStyle({
flex: 0,
}),
- advanced_settings__mssfix_valid_value: Styles.createTextStyle({
- color: colors.white,
- }),
- advanced_settings__mssfix_invalid_value: Styles.createTextStyle({
- color: colors.red,
- }),
advanced_settings__block_when_disconnected_label: Styles.createTextStyle({
letterSpacing: -0.5,
}),
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index ddd5d0ea53..8d884db307 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -1,130 +1,10 @@
import * as React from 'react';
import { Button, Component, Styles, Text, TextInput, Types, View } from 'reactxp';
import { colors } from '../../config.json';
+import styles from './CellStyles';
import ImageView from './ImageView';
import { default as SwitchControl } from './Switch';
-const styles = {
- cellButton: {
- base: Styles.createButtonStyle({
- backgroundColor: colors.blue,
- paddingVertical: 0,
- paddingHorizontal: 16,
- marginBottom: 1,
- flex: 1,
- flexDirection: 'row',
- alignItems: 'center',
- alignContent: 'center',
- cursor: 'default',
- }),
- section: Styles.createButtonStyle({
- backgroundColor: colors.blue40,
- }),
- hover: Styles.createButtonStyle({
- backgroundColor: colors.blue80,
- }),
- selected: Styles.createViewStyle({
- backgroundColor: colors.green,
- }),
- },
- cellContainer: Styles.createViewStyle({
- backgroundColor: colors.blue,
- flexDirection: 'row',
- alignItems: 'center',
- paddingLeft: 16,
- paddingRight: 12,
- }),
- footer: {
- container: Styles.createViewStyle({
- paddingTop: 8,
- paddingRight: 24,
- paddingBottom: 24,
- paddingLeft: 24,
- }),
- text: Styles.createTextStyle({
- fontFamily: 'Open Sans',
- fontSize: 13,
- fontWeight: '600',
- lineHeight: 20,
- letterSpacing: -0.2,
- color: colors.white80,
- }),
- boldText: Styles.createTextStyle({
- fontWeight: '900',
- }),
- },
- label: {
- container: Styles.createViewStyle({
- marginLeft: 8,
- marginTop: 14,
- marginBottom: 14,
- flex: 1,
- }),
- text: Styles.createTextStyle({
- fontFamily: 'DINPro',
- fontSize: 20,
- fontWeight: '900',
- lineHeight: 26,
- letterSpacing: -0.2,
- color: colors.white,
- }),
- },
- switch: Styles.createViewStyle({
- flex: 0,
- }),
- input: {
- frame: Styles.createViewStyle({
- flexGrow: 0,
- backgroundColor: 'rgba(255,255,255,0.1)',
- borderRadius: 4,
- padding: 4,
- }),
- text: Styles.createTextInputStyle({
- color: colors.white,
- backgroundColor: 'transparent',
- fontFamily: 'Open Sans',
- fontSize: 20,
- fontWeight: '600',
- lineHeight: 26,
- textAlign: 'right',
- padding: 0,
- }),
- },
- autoSizingInputContainer: {
- measuringView: Styles.createViewStyle({
- position: 'absolute',
- opacity: 0,
- }),
- measureText: Styles.createTextStyle({
- width: undefined,
- flexBasis: undefined,
- }),
- },
- icon: Styles.createViewStyle({
- marginLeft: 8,
- }),
- subtext: Styles.createTextStyle({
- color: colors.white60,
- fontFamily: 'Open Sans',
- fontSize: 13,
- fontWeight: '800',
- flex: -1,
- textAlign: 'right',
- marginLeft: 8,
- }),
- sectionTitle: Styles.createTextStyle({
- backgroundColor: colors.blue,
- paddingVertical: 14,
- paddingHorizontal: 24,
- marginBottom: 1,
- fontFamily: 'DINPro',
- fontSize: 20,
- fontWeight: '900',
- lineHeight: 26,
- color: colors.white,
- }),
-};
-
interface ICellButtonProps {
children?: React.ReactNode;
disabled?: boolean;
@@ -272,22 +152,100 @@ export const InputFrame = function CellInputFrame(props: IInputFrameProps) {
return <View style={[styles.input.frame, style]}>{children}</View>;
};
-export const Input = React.forwardRef(function CellInput(
- props: Types.TextInputProps,
- ref?: React.Ref<TextInput>,
-) {
- const { style, ...otherProps } = props;
+interface IInputProps extends Types.TextInputProps {
+ validateValue?: (value: string) => boolean;
+ modifyValue?: (value: string) => string;
+ submitOnBlur?: boolean;
+ onSubmit?: (value: string) => void;
+}
- return (
- <TextInput
- ref={ref}
- placeholderTextColor={colors.white60}
- autoCorrect={false}
- style={[styles.input.text, style]}
- {...otherProps}
- />
- );
-});
+interface IInputState {
+ value?: string;
+ focused: boolean;
+}
+
+export class Input extends Component<IInputProps, IInputState> {
+ public state = {
+ value: this.props.value || '',
+ focused: false,
+ };
+
+ public componentDidUpdate(prevProps: IInputProps, _prevState: IInputState) {
+ if (
+ !this.state.focused &&
+ prevProps.value !== this.props.value &&
+ this.props.value !== this.state.value
+ ) {
+ this.setState((_state, props) => ({
+ value: props.value,
+ }));
+ }
+ }
+
+ public render() {
+ const {
+ style,
+ value: _value,
+ onChangeText: _onChangeText,
+ onFocus: _onFocus,
+ onBlur: _onBlur,
+ onSubmitEditing: _onSubmitEditing,
+ ...otherProps
+ } = this.props;
+
+ const validityStyle =
+ this.props.validateValue && this.props.validateValue(this.state.value)
+ ? styles.input.validValue
+ : styles.input.invalidValue;
+
+ return (
+ <TextInput
+ placeholderTextColor={colors.white60}
+ autoCorrect={false}
+ style={[styles.input.text, validityStyle, style]}
+ onChangeText={this.onChangeText}
+ onFocus={this.onFocus}
+ onBlur={this.onBlur}
+ onSubmitEditing={this.onSubmitEditing}
+ value={this.state.value}
+ {...otherProps}
+ />
+ );
+ }
+
+ private onChangeText = (value: string) => {
+ this.setState({ value });
+ if (this.props.onChangeText) {
+ this.props.onChangeText(value);
+ }
+ };
+
+ private onFocus = (e: Types.FocusEvent) => {
+ this.setState({ focused: true });
+ if (this.props.onFocus) {
+ this.props.onFocus(e);
+ }
+ };
+
+ private onBlur = (e: Types.FocusEvent) => {
+ this.setState({ focused: false });
+ if (this.props.onBlur) {
+ this.props.onBlur(e);
+ }
+ if (this.props.submitOnBlur && this.props.onSubmit) {
+ this.props.onSubmit(this.state.value);
+ }
+ };
+
+ private onSubmitEditing = () => {
+ if (this.props.onSubmit) {
+ this.props.onSubmit(this.state.value);
+ }
+ if (this.props.onSubmitEditing) {
+ this.props.onSubmitEditing();
+ }
+ };
+}
interface IAutoSizingTextInputContainerProps {
style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
diff --git a/gui/src/renderer/components/CellStyles.tsx b/gui/src/renderer/components/CellStyles.tsx
new file mode 100644
index 0000000000..453a8d3cca
--- /dev/null
+++ b/gui/src/renderer/components/CellStyles.tsx
@@ -0,0 +1,130 @@
+import { Styles } from 'reactxp';
+import { colors } from '../../config.json';
+
+export default {
+ cellButton: {
+ base: Styles.createButtonStyle({
+ backgroundColor: colors.blue,
+ paddingVertical: 0,
+ paddingHorizontal: 16,
+ marginBottom: 1,
+ flex: 1,
+ flexDirection: 'row',
+ alignItems: 'center',
+ alignContent: 'center',
+ cursor: 'default',
+ }),
+ section: Styles.createButtonStyle({
+ backgroundColor: colors.blue40,
+ }),
+ hover: Styles.createButtonStyle({
+ backgroundColor: colors.blue80,
+ }),
+ selected: Styles.createViewStyle({
+ backgroundColor: colors.green,
+ }),
+ },
+ cellContainer: Styles.createViewStyle({
+ backgroundColor: colors.blue,
+ flexDirection: 'row',
+ alignItems: 'center',
+ paddingLeft: 16,
+ paddingRight: 12,
+ }),
+ footer: {
+ container: Styles.createViewStyle({
+ paddingTop: 8,
+ paddingRight: 24,
+ paddingBottom: 24,
+ paddingLeft: 24,
+ }),
+ text: Styles.createTextStyle({
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: '600',
+ lineHeight: 20,
+ letterSpacing: -0.2,
+ color: colors.white80,
+ }),
+ boldText: Styles.createTextStyle({
+ fontWeight: '900',
+ }),
+ },
+ label: {
+ container: Styles.createViewStyle({
+ marginLeft: 8,
+ marginTop: 14,
+ marginBottom: 14,
+ flex: 1,
+ }),
+ text: Styles.createTextStyle({
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ letterSpacing: -0.2,
+ color: colors.white,
+ }),
+ },
+ switch: Styles.createViewStyle({
+ flex: 0,
+ }),
+ input: {
+ frame: Styles.createViewStyle({
+ flexGrow: 0,
+ backgroundColor: 'rgba(255,255,255,0.1)',
+ borderRadius: 4,
+ padding: 4,
+ }),
+ text: Styles.createTextInputStyle({
+ color: colors.white,
+ backgroundColor: 'transparent',
+ fontFamily: 'Open Sans',
+ fontSize: 20,
+ fontWeight: '600',
+ lineHeight: 26,
+ textAlign: 'right',
+ padding: 0,
+ minWidth: 80,
+ }),
+ validValue: Styles.createTextStyle({
+ color: colors.white,
+ }),
+ invalidValue: Styles.createTextStyle({
+ color: colors.red,
+ }),
+ },
+ autoSizingInputContainer: {
+ measuringView: Styles.createViewStyle({
+ position: 'absolute',
+ opacity: 0,
+ }),
+ measureText: Styles.createTextStyle({
+ width: undefined,
+ flexBasis: undefined,
+ }),
+ },
+ icon: Styles.createViewStyle({
+ marginLeft: 8,
+ }),
+ subtext: Styles.createTextStyle({
+ color: colors.white60,
+ fontFamily: 'Open Sans',
+ fontSize: 13,
+ fontWeight: '800',
+ flex: -1,
+ textAlign: 'right',
+ marginLeft: 8,
+ }),
+ sectionTitle: Styles.createTextStyle({
+ backgroundColor: colors.blue,
+ paddingVertical: 14,
+ paddingHorizontal: 24,
+ marginBottom: 1,
+ fontFamily: 'DINPro',
+ fontSize: 20,
+ fontWeight: '900',
+ lineHeight: 26,
+ color: colors.white,
+ }),
+};
diff --git a/gui/src/renderer/containers/AdvancedSettingsPage.tsx b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
index b61003bc8f..c9f33f3d63 100644
--- a/gui/src/renderer/containers/AdvancedSettingsPage.tsx
+++ b/gui/src/renderer/containers/AdvancedSettingsPage.tsx
@@ -18,6 +18,7 @@ const mapStateToProps = (state: IReduxState) => {
blockWhenDisconnected: state.settings.blockWhenDisconnected,
wireguardKeyState: state.settings.wireguardKeyState,
mssfix: state.settings.openVpn.mssfix,
+ wireguardMtu: state.settings.wireguard.mtu,
bridgeState: state.settings.bridgeState,
...protocolAndPort,
};
@@ -145,6 +146,14 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: IAppContext) => {
log.error('Failed to update mssfix value', e.message);
}
},
+
+ setWireguardMtu: async (mtu?: number) => {
+ try {
+ await props.app.setWireguardMtu(mtu);
+ } catch (e) {
+ log.error('Failed to update mtu value', e.message);
+ }
+ },
onViewWireguardKeys: () => history.push('/settings/advanced/wireguard-keys'),
};
};
diff --git a/gui/src/renderer/redux/settings/actions.ts b/gui/src/renderer/redux/settings/actions.ts
index 6fee072cfd..dbc1407bbd 100644
--- a/gui/src/renderer/redux/settings/actions.ts
+++ b/gui/src/renderer/redux/settings/actions.ts
@@ -52,6 +52,11 @@ export interface IUpdateOpenVpnMssfixAction {
mssfix?: number;
}
+export interface IUpdateWireguardMtuAction {
+ type: 'UPDATE_WIREGUARD_MTU';
+ mtu?: number;
+}
+
export interface IUpdateAutoStartAction {
type: 'UPDATE_AUTO_START';
autoStart: boolean;
@@ -98,6 +103,7 @@ export type SettingsAction =
| IUpdateBridgeSettingsAction
| IUpdateBridgeStateAction
| IUpdateOpenVpnMssfixAction
+ | IUpdateWireguardMtuAction
| IUpdateAutoStartAction
| IWireguardSetKey
| IWireguardVerifyKey
@@ -180,6 +186,13 @@ function updateOpenVpnMssfix(mssfix?: number): IUpdateOpenVpnMssfixAction {
};
}
+function updateWireguardMtu(mtu?: number): IUpdateWireguardMtuAction {
+ return {
+ type: 'UPDATE_WIREGUARD_MTU',
+ mtu,
+ };
+}
+
function updateAutoStart(autoStart: boolean): IUpdateAutoStartAction {
return {
type: 'UPDATE_AUTO_START',
@@ -246,6 +259,7 @@ export default {
updateBridgeSettings,
updateBridgeState,
updateOpenVpnMssfix,
+ updateWireguardMtu,
updateAutoStart,
setWireguardKey,
setWireguardKeygenEvent,
diff --git a/gui/src/renderer/redux/settings/reducers.ts b/gui/src/renderer/redux/settings/reducers.ts
index ac86f25a29..6038a2be28 100644
--- a/gui/src/renderer/redux/settings/reducers.ts
+++ b/gui/src/renderer/redux/settings/reducers.ts
@@ -129,6 +129,9 @@ export interface ISettingsReduxState {
openVpn: {
mssfix?: number;
};
+ wireguard: {
+ mtu?: number;
+ };
wireguardKeyState: WgKeyState;
}
@@ -164,6 +167,7 @@ const initialState: ISettingsReduxState = {
bridgeState: 'auto',
blockWhenDisconnected: false,
openVpn: {},
+ wireguard: {},
wireguardKeyState: {
type: 'key-not-set',
},
@@ -225,6 +229,15 @@ export default function(
},
};
+ case 'UPDATE_WIREGUARD_MTU':
+ return {
+ ...state,
+ wireguard: {
+ ...state.wireguard,
+ mtu: action.mtu,
+ },
+ };
+
case 'UPDATE_AUTO_START':
return {
...state,
diff --git a/gui/src/shared/ipc-event-channel.ts b/gui/src/shared/ipc-event-channel.ts
index c01c8ced89..3a24d3f46e 100644
--- a/gui/src/shared/ipc-event-channel.ts
+++ b/gui/src/shared/ipc-event-channel.ts
@@ -71,6 +71,7 @@ interface ISettingsMethods extends IReceiver<ISettings> {
setBlockWhenDisconnected(block: boolean): Promise<void>;
setBridgeState(state: BridgeState): Promise<void>;
setOpenVpnMssfix(mssfix?: number): Promise<void>;
+ setWireguardMtu(mtu?: number): Promise<void>;
updateRelaySettings(update: RelaySettingsUpdate): Promise<void>;
updateBridgeSettings(bridgeSettings: BridgeSettings): Promise<void>;
}
@@ -81,6 +82,7 @@ interface ISettingsHandlers extends ISender<ISettings> {
handleBlockWhenDisconnected(fn: (block: boolean) => Promise<void>): void;
handleBridgeState(fn: (state: BridgeState) => Promise<void>): void;
handleOpenVpnMssfix(fn: (mssfix?: number) => Promise<void>): void;
+ handleWireguardMtu(fn: (mtu?: number) => Promise<void>): void;
handleUpdateRelaySettings(fn: (update: RelaySettingsUpdate) => Promise<void>): void;
handleUpdateBridgeSettings(fn: (bridgeSettings: BridgeSettings) => Promise<void>): void;
}
@@ -160,6 +162,7 @@ const SET_ENABLE_IPV6 = 'set-enable-ipv6';
const SET_BLOCK_WHEN_DISCONNECTED = 'set-block-when-disconnected';
const SET_BRIDGE_STATE = 'set-bridge-state';
const SET_OPENVPN_MSSFIX = 'set-openvpn-mssfix';
+const SET_WIREGUARD_MTU = 'set-wireguard-mtu';
const UPDATE_RELAY_SETTINGS = 'update-relay-settings';
const UPDATE_BRIDGE_SETTINGS = 'update-bridge-location';
@@ -236,6 +239,7 @@ export class IpcRendererEventChannel {
setBlockWhenDisconnected: requestSender(SET_BLOCK_WHEN_DISCONNECTED),
setBridgeState: requestSender(SET_BRIDGE_STATE),
setOpenVpnMssfix: requestSender(SET_OPENVPN_MSSFIX),
+ setWireguardMtu: requestSender(SET_WIREGUARD_MTU),
updateRelaySettings: requestSender(UPDATE_RELAY_SETTINGS),
updateBridgeSettings: requestSender(UPDATE_BRIDGE_SETTINGS),
};
@@ -333,6 +337,7 @@ export class IpcMainEventChannel {
handleBlockWhenDisconnected: requestHandler(SET_BLOCK_WHEN_DISCONNECTED),
handleBridgeState: requestHandler(SET_BRIDGE_STATE),
handleOpenVpnMssfix: requestHandler(SET_OPENVPN_MSSFIX),
+ handleWireguardMtu: requestHandler(SET_WIREGUARD_MTU),
handleUpdateRelaySettings: requestHandler(UPDATE_RELAY_SETTINGS),
handleUpdateBridgeSettings: requestHandler(UPDATE_BRIDGE_SETTINGS),
};
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.