app: change locations without leaking IP

Author: elibroftw

apple/client/command.swift

@@ -52,7 +52,6 @@ func handleWebViewCommand(command: Command) async throws(String) -> String {
         try unregisterAsLoginItem()
     case .isRegisteredAsLoginItem:
         return try isRegisteredAsLoginItem().json()
-
     case .resetUserDefaults:
         // NOTE: only shown in the Developer View
         appState.resetUserDefaults()

obscura-ui/src/App.tsx

@@ -93,8 +93,10 @@ export default function () {
     })
   }, []);
 
-  async function tryConnect(exit: string | null = null, changingLocation = false) {
-    if (!changingLocation) {
+  async function tryConnect(exit: string | null = null) {
+    if (vpnConnected) {
+      setConnectionInProgress(ConnectionInProgress.ChangingLocations);
+    } else {
       setConnectionInProgress(ConnectionInProgress.Connecting);
     }
     ignoreConnectingErrors.current = false;
@@ -132,21 +134,6 @@ export default function () {
     }
   }
 
-  async function disconnectThenConnect(exitId: string) {
-    if (vpnConnected) {
-      setConnectionInProgress(ConnectionInProgress.ChangingLocations);
-      await commands.disconnectBlocking();
-      notifications.update({
-        id: NotificationId.VPN_DISCONNECT_CONNECT,
-        color: theme.primaryColor,
-        autoClose: 10_000,
-        // keep same message
-        message: undefined
-      });
-      await tryConnect(exitId, true);
-    }
-  }
-
   function notifyVpnError(errorEnum: string) {
     // see enum JsVpnError in commands.swift
     if (errorEnum !== null) {
@@ -195,6 +182,7 @@ export default function () {
         notifyVpnError(connectError);
       }
     } else if (vpnStatus.disconnected !== undefined) {
+      console.log('got disconnected')
       setConnectionInProgress(value => {
         if (value === ConnectionInProgress.ChangingLocations) return value;
         return ConnectionInProgress.UNSET;
@@ -361,7 +349,6 @@ export default function () {
     vpnConnect: tryConnect,
     vpnConnected,
     vpnDisconnect: disconnectFromVpn,
-    vpnDisconnectConnect: disconnectThenConnect,
   }
 
   const exitsContext = {

obscura-ui/src/common/appContext.ts

@@ -89,7 +89,6 @@ interface IAppContext {
     toggleVpnConnection: () => Promise<void>,
     vpnConnect: (exit?: string) => Promise<void>,
     vpnDisconnect: () => Promise<void>,
-    vpnDisconnectConnect: (exit: string) => Promise<void>,
     pollAccount: () => Promise<void>,
     accountLoading: boolean,
     appStatus: AppStatus,

obscura-ui/src/translations/en.json

@@ -186,6 +186,7 @@
   "toggleTheme": "Toggle theme",
   "tosAndPrivacyPolicy": "Terms of Service and Privacy Policy",
   "trafficProtected": "Traffic is protected",
+  "trafficSuspended": "Traffic is suspended",
   "trafficVulnerable": "Traffic is vulnerable",
   "unresponsiveDaemonError": "Daemon is Unresponsive ({{ timeStamp }})",
   "updateAvailable": "update available: v{{ version }}",

obscura-ui/src/views/ConnectionView.tsx

@@ -404,7 +404,7 @@ interface LocationSelectProps {
 function LocationSelect({ cityConnectingTo, setCityConnectingTo }: LocationSelectProps) {
     const { t } = useTranslation();
     const { exitList } = useContext(ExitsContext);
-    const { appStatus, vpnConnect, vpnConnected, vpnDisconnectConnect, connectionInProgress, osStatus } = useContext(AppContext);
+    const { appStatus, vpnConnect, vpnConnected, connectionInProgress, osStatus } = useContext(AppContext);
     const { internetAvailable } = osStatus;
     const { lastChosenExit, pinnedLocations } = appStatus;
     const connectedExit = appStatus.vpnStatus.connected?.exit;
@@ -506,11 +506,7 @@ function LocationSelect({ cityConnectingTo, setCityConnectingTo }: LocationSelec
                                         const exit = getRandomExitFromCity(exitList, country_code, city_code);
                                         setSelectedExit(exit);
                                         setCityConnectingTo(exit.city_name);
-                                        if (vpnConnected) {
-                                            vpnDisconnectConnect(exit.id);
-                                        } else {
-                                            vpnConnect(exit.id);
-                                        }
+                                        vpnConnect(exit.id);
                                     } catch (error) {
                                         const e = normalizeError(error);
                                         if (e instanceof CityNotFoundError) {

obscura-ui/src/views/LocationView.tsx

@@ -26,7 +26,7 @@ import classes from './Location.module.css';
 
 export default function LocationView() {
     const { t } = useTranslation();
-    const { vpnConnected, vpnConnect, connectionInProgress, vpnDisconnectConnect, appStatus } = useContext(AppContext);
+    const { vpnConnected, vpnConnect, connectionInProgress, appStatus } = useContext(AppContext);
     const { exitList } = useContext(ExitsContext);
 
     const onExitSelect = async (exit: Exit) => {
@@ -42,7 +42,7 @@ export default function LocationView() {
                 color: 'yellow.4',
                 id: NotificationId.VPN_DISCONNECT_CONNECT
             });
-            await vpnDisconnectConnect(exit.id);
+            await vpnConnect(exit.id);
         } else if (exitList !== null) {
             try {
               exit = getRandomExitFromCity(exitList, exit.country_code, exit.city_code);
@@ -265,7 +265,7 @@ function VpnStatusCard() {
 
     const getStatusTitle = () => {
         if (isOffline) return t('Offline');
-        if (connectionInProgress !== ConnectionInProgress.UNSET && connectionInProgress !== ConnectionInProgress.ChangingLocations) return t(connectionInProgress) + '...';
+        if (connectionInProgress !== ConnectionInProgress.UNSET) return t(connectionInProgress) + '...';
         const selectedLocation = appStatus.vpnStatus.connected?.exit.city_name;
         // vpnConnected <-> vpnStatus.connected.exit defined
         if (selectedLocation !== undefined) return t('connectedToLocation', { location: selectedLocation });
@@ -274,6 +274,9 @@ function VpnStatusCard() {
 
     const getStatusSubtitle = () => {
         if (isOffline) return t('connectToInternet');
+        if (connectionInProgress === ConnectionInProgress.ChangingLocations) {
+          return t('trafficSuspended');
+        }
         return vpnConnected ? t('trafficProtected') : t('trafficVulnerable');
     };
 
@@ -294,15 +297,20 @@ function VpnStatusCard() {
         return t('busyConnection');
     };
 
+    const statusColor = vpnConnected ? 'green.7' : (connectionInProgress === ConnectionInProgress.ChangingLocations ? 'gray' : 'red.7');
+
     return (
         <Card shadow='sm' padding='lg' radius='md' withBorder w='90%' mb='xs'>
             <Group justify='space-between'>
                 <Stack gap={0}>
                     <Group align='center' gap={5}>
-                        <ThemeIcon color={vpnConnected ? 'green.7' : 'red.7'} variant='transparent'>
-                            {vpnConnected ? <BsShieldFillCheck size={25} /> : <BsShieldFillExclamation size={25} />}
+                        <ThemeIcon color={statusColor} variant='transparent'>
+                            {connectionInProgress === ConnectionInProgress.ChangingLocations
+                            ? <Loader  size='xs' color='gray' /> : vpnConnected
+                            ? <BsShieldFillCheck size={25} />
+                            : <BsShieldFillExclamation size={25} />}
                         </ThemeIcon>
-                        <Title order={4}   fw={600} c={vpnConnected ? 'green.7' : 'red.7'}>{getStatusTitle()}</Title>
+                    <Title order={4} fw={600} c={statusColor}>{getStatusTitle()}</Title>
                     </Group>
                     <Text c='gray' size='sm' ml={34}>{getStatusSubtitle()}</Text>
                 </Stack>