Fix disconnecting UI and connecting toggle

Author: elibroftw

apple/client/StatusItem/ObscuraToggle.swift

@@ -48,8 +48,6 @@ struct ObscuraToggle: View {
                 self.toggleLabel = ToggleLabels.connecting
                 do {
                     try await self.startupModel.appState?.enableTunnel(TunnelArgs())
-                    self.isToggled = true
-                    self.toggleLabel = ToggleLabels.connected
                 } catch {
                     logger.error("Failed to connect from status menu \(error, privacy: .public)")
                     self.toggleLabel = ToggleLabels.notConnected

obscura-ui/src/App.tsx

@@ -235,6 +235,15 @@ export default function () {
     if (appStatus !== null) handleNewStatus(appStatus);
   }, [appStatus]);
 
+  useEffect(() => {
+    if (osStatus !== null) {
+      const { osVpnStatus } = osStatus;
+      if (osVpnStatus === 'disconnecting') {
+        setConnectionInProgress(ConnectionInProgress.Disconnecting);
+      }
+    }
+  }, [osStatus]);
+
   function resetState() {
     // Useful for runtime rendering exceptions
     if (vpnConnected) toggleVpnConnection();

obscura-ui/src/views/ConnectionView.tsx

@@ -65,7 +65,6 @@ export default function Connection() {
     const accountHasExpired = accountInfo !== null && accountIsExpired(accountInfo);
 
     const getTitle = () => {
-        if (vpnConnected) return t('connectedToObscura');
         if (accountHasExpired) return t('account-Expired');
         if (connectionTransition) {
             switch (connectionInProgress) {
@@ -78,16 +77,17 @@ export default function Connection() {
                     return t('Disconnecting');
             }
         }
+        if (vpnConnected) return t('connectedToObscura');
         if (!internetAvailable) return t('disconnected');
         if (accountInfo === null) return t('validatingAccount')
         return t('notConnected');
     }
 
     const Subtitle = () => {
-        if (vpnConnected) return t('enjoyObscura');
+        if (vpnConnected && !connectionTransition) return t('enjoyObscura');
         if (accountHasExpired) return t('continueUsingObscura');
-        if (!internetAvailable) return t('connectToInternet');
         if (connectionTransition) return t('pleaseWaitAMoment');
+        if (!internetAvailable) return t('connectToInternet');
         if (accountInfo === null) return '';
         return t('connectToEnjoy');
     }
@@ -162,7 +162,6 @@ function ConnectionProgressBar() {
 
     const connectingProgressBars = usePulsingProgress({ activated: isConnecting(connectionInProgress), bars: 2, inactiveColor: progressBg, w: 50 });
     const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
-
     return (
         <Paper shadow='xl' withBorder w='80%' maw={600} bg={bg} p='md' pt={5} pb='xs' mb='lg' radius='lg'>
             <Group mih={50} className={classes.connectionProgressBarGroup} align='center'>
@@ -186,15 +185,16 @@ function ConnectionProgressBar() {
                     </>
                 }
                 {
-                    internetAvailable && !vpnConnected && !isConnecting(connectionInProgress) &&
+                    internetAvailable && (connectionInProgress === ConnectionInProgress.Disconnecting || (!vpnConnected && connectionInProgress === ConnectionInProgress.UNSET)) &&
                     <Stack gap='xs' align='center' justify='flex-end' h={50}>
                         <Progress className={classes.trafficVulnerableProgressBar} value={100} color='red.6' h={2} bg={progressBg} />
                         <Text size='xs' c='red.6'>
                             {t('trafficVulnerable')}
                         </Text>
                     </Stack>
                 }
-                {(vpnConnected || isConnecting(connectionInProgress)) && <>
+                {
+                    ((vpnConnected && connectionInProgress === ConnectionInProgress.UNSET) || isConnecting(connectionInProgress)) && <>
                     {connectingProgressBars[0]}
                     <Stack gap='0' align='center'>
                         <ThemeIcon variant='transparent' c='white'>
@@ -538,7 +538,7 @@ function LocationSelect({ cityConnectingTo, setCityConnectingTo }: LocationSelec
 function LocationConnectTopCaption({ cityConnectingTo }: { cityConnectingTo: string | null }) {
     const { t } = useTranslation();
     const { vpnConnected, connectionInProgress } = useContext(AppContext);
-    if (vpnConnected && connectionInProgress !== ConnectionInProgress.ChangingLocations)
+    if (vpnConnected && connectionInProgress === ConnectionInProgress.UNSET)
         return <Text c='green.8' fw={550}>{t('connectedTo')}</Text>;
 
     if (connectionInProgress === ConnectionInProgress.UNSET && !vpnConnected)

obscura-ui/src/views/LocationView.tsx

@@ -277,7 +277,7 @@ function VpnStatusCard() {
         if (connectionInProgress === ConnectionInProgress.ChangingLocations) {
           return t('trafficSuspended');
         }
-        return vpnConnected ? t('trafficProtected') : t('trafficVulnerable');
+        return (vpnConnected && connectionInProgress === ConnectionInProgress.UNSET) ? t('trafficProtected') : t('trafficVulnerable');
     };
 
     const allowCancel = connectionInProgress === ConnectionInProgress.Connecting || connectionInProgress === ConnectionInProgress.Reconnecting;
@@ -297,7 +297,8 @@ function VpnStatusCard() {
         return t('busyConnection');
     };
 
-    const statusColor = vpnConnected ? 'green.7' : (connectionInProgress === ConnectionInProgress.ChangingLocations ? 'gray' : 'red.7');
+    const statusColor = (vpnConnected && connectionInProgress === ConnectionInProgress.UNSET) ? 'green.7'
+        : (connectionInProgress === ConnectionInProgress.ChangingLocations ? 'gray' : 'red.7');
 
     return (
         <Card shadow='sm' padding='lg' radius='md' withBorder w='90%' mb='xs'>
@@ -306,7 +307,7 @@ function VpnStatusCard() {
                     <Group align='center' gap={5}>
                         <ThemeIcon color={statusColor} variant='transparent'>
                             {connectionInProgress === ConnectionInProgress.ChangingLocations
-                            ? <Loader  size='xs' color='gray' /> : vpnConnected
+                            ? <Loader size='xs' color='gray.5' /> : (vpnConnected && connectionInProgress === ConnectionInProgress.UNSET)
                             ? <BsShieldFillCheck size={25} />
                             : <BsShieldFillExclamation size={25} />}
                         </ThemeIcon>
@@ -318,7 +319,7 @@ function VpnStatusCard() {
                     {getButtonContent()}
                 </Button>
             </Group>
-            {appStatus.vpnStatus.connected !== undefined &&
+            {appStatus.vpnStatus.connected !== undefined && connectionInProgress !== ConnectionInProgress.Disconnecting &&
               <>
                 <Divider my='md' />
                 <Stack justify='space-between' w='100%'>