Add auto-start and auto-connect fields to Preferences

5 files changed, 56 insertions, 12 deletions

diff --git a/app/components/Preferences.js b/app/components/Preferences.js
index d0bf113243..26b2e4eb16 100644
--- a/app/components/Preferences.js
+++ b/app/components/Preferences.js
@@ -7,12 +7,29 @@ import Switch from './Switch';
 import styles from './PreferencesStyles';
 
 export type PreferencesProps = {
+  autoConnect: boolean,
   allowLan: boolean,
-  onChangeAllowLan: (boolean) => void,
+  getAutoStart: () => boolean,
+  setAutoStart: (boolean) => void,
+  setAutoConnect: (boolean) => void,
+  setAllowLan: (boolean) => void,
   onClose: () => void,
 };
 
-export default class Preferences extends Component<PreferencesProps> {
+type State = {
+  autoStart: boolean,
+};
+
+export default class Preferences extends Component<PreferencesProps, State> {
+  state = {
+    autoStart: false,
+  };
+
+  constructor(props: PreferencesProps) {
+    super();
+    this.state.autoStart = props.getAutoStart();
+  }
+
   render() {
     return (
       <Layout>
@@ -39,15 +56,12 @@ export default class Preferences extends Component<PreferencesProps> {
                     <Text style={styles.preferences__cell_label}>Auto-connect</Text>
                   </View>
                   <View style={styles.preferences__cell_accessory}>
-                    <Switch
-                      isOn={this.props.autoConnect}
-                      onChange={this.props.onChangeAutoConnect}
-                    />
+                    <Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
                   </View>
                 </View>
                 <View style={styles.preferences__cell_footer}>
                   <Text style={styles.preferences__cell_footer_label}>
-                    {'When your device connects to the internet, your connection will be secured.'}
+                    {'Automatically connect the VPN at login to the system.'}
                   </Text>
                 </View>
 
@@ -56,12 +70,12 @@ export default class Preferences extends Component<PreferencesProps> {
                     <Text style={styles.preferences__cell_label}>Auto-start</Text>
                   </View>
                   <View style={styles.preferences__cell_accessory}>
-                    <Switch isOn={this.props.autoStart} onChange={this.props.onChangeAutoStart} />
+                    <Switch isOn={this.state.autoStart} onChange={this._onChangeAutoStart} />
                   </View>
                 </View>
                 <View style={styles.preferences__cell_footer}>
                   <Text style={styles.preferences__cell_footer_label}>
-                    {'When your device starts up, Mullvad VPN is automatically opened.'}
+                    {'Automatically open Mullvad VPN at login to the system.'}
                   </Text>
                 </View>
 
@@ -70,7 +84,7 @@ export default class Preferences extends Component<PreferencesProps> {
                     <Text style={styles.preferences__cell_label}>Local network sharing</Text>
                   </View>
                   <View style={styles.preferences__cell_accessory}>
-                    <Switch isOn={this.props.allowLan} onChange={this.props.onChangeAllowLan} />
+                    <Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
                   </View>
                 </View>
                 <View style={styles.preferences__cell_footer}>
@@ -87,4 +101,9 @@ export default class Preferences extends Component<PreferencesProps> {
       </Layout>
     );
   }
+
+  _onChangeAutoStart = (autoStart: boolean) => {
+    this.props.setAutoStart(autoStart);
+    this.setState({ autoStart });
+  };
 }
diff --git a/app/containers/PreferencesPage.js b/app/containers/PreferencesPage.js
index 6ee813209a..e11655f3a4 100644
--- a/app/containers/PreferencesPage.js
+++ b/app/containers/PreferencesPage.js
@@ -4,11 +4,13 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { push } from 'react-router-redux';
 import Preferences from '../components/Preferences';
+import { log, getOpenAtLogin, setOpenAtLogin } from '../lib/platform';
 
 import type { ReduxState, ReduxDispatch } from '../redux/store';
 import type { SharedRouteProps } from '../routes';
 
 const mapStateToProps = (state: ReduxState) => ({
+  autoConnect: state.settings.autoConnect,
   allowLan: state.settings.allowLan,
 });
 
@@ -16,7 +18,24 @@ const mapDispatchToProps = (dispatch: ReduxDispatch, props: SharedRouteProps) =>
   const { push: pushHistory } = bindActionCreators({ push }, dispatch);
   return {
     onClose: () => pushHistory('/settings'),
-    onChangeAllowLan: (allowLan) => {
+    getAutoStart: () => {
+      return getOpenAtLogin();
+    },
+    setAutoStart: async (autoStart) => {
+      try {
+        await setOpenAtLogin(autoStart);
+      } catch (error) {
+        log.error(`Cannot set auto-start: ${error.message}`);
+      }
+    },
+    setAutoConnect: async (autoConnect) => {
+      try {
+        props.app.setAutoConnect(autoConnect);
+      } catch (error) {
+        log.error(`Cannot set auto-connect: ${error.message}`);
+      }
+    },
+    setAllowLan: (allowLan) => {
       props.app.setAllowLan(allowLan);
     },
   };
diff --git a/test/components/Preferences.spec.js b/test/components/Preferences.spec.js
index 280b24ccd7..f8c38f9493 100644
--- a/test/components/Preferences.spec.js
+++ b/test/components/Preferences.spec.js
@@ -17,7 +17,11 @@ describe('components/Preferences', () => {
 function makeProps(props) {
   return {
     onClose: () => {},
-    onChangeAllowLan: () => {},
+    setAutoConnect: () => {},
+    setAutoStart: (_autoStart) => Promise.resolve(),
+    getAutoStart: () => false,
+    setAllowLan: () => {},
+    allowAutoConnect: false,
     allowLan: false,
     ...props,
   };
diff --git a/test/components/SelectLocation.spec.js b/test/components/SelectLocation.spec.js
index c9a1f08864..dbfe15221a 100644
--- a/test/components/SelectLocation.spec.js
+++ b/test/components/SelectLocation.spec.js
@@ -39,6 +39,7 @@ describe('components/SelectLocation', () => {
         ],
       },
     ],
+    autoConnect: false,
     allowLan: false,
   };
 
diff --git a/test/components/Settings.spec.js b/test/components/Settings.spec.js
index ffdf0bf545..2a152e1cc8 100644
--- a/test/components/Settings.spec.js
+++ b/test/components/Settings.spec.js
@@ -42,6 +42,7 @@ describe('components/Settings', () => {
       },
     },
     relayLocations: [],
+    autoConnect: false,
     allowLan: false,
   };