Skip to content

Commit e7516df

Browse files
elibroftwelibroftw
authored
Merge pull request #478 from Sovereign-Engineering/elijahllopezz/obs-1498-reviewfix-howif-connect-errors-are-display
Fix UI for tunnel management changes
2 parents c5cf8a2 + 37ff13e commit e7516df

File tree

4 files changed

+49
-37
lines changed

4 files changed

+49
-37
lines changed

‎obscura-ui/src/App.tsx‎

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { logReactError, useSystemContext } from './bridge/SystemProvider';
1313
import { Exit } from './common/api';
1414
import { AppContext, AppStatus, ConnectionInProgress, ExitsContext, OsStatus } from './common/appContext';
1515
import { fmtVpnError } from './common/danger';
16+
import { fmt } from './common/fmt';
1617
import { NotificationId } from './common/notifIds';
1718
import { useAsync } from './common/useAsync';
1819
import { useLoadable } from './common/useLoadable';
@@ -177,16 +178,21 @@ export default function () {
177178
});
178179
} else if (vpnStatus.connecting !== undefined) {
179180
setVpnConnected(false);
181+
const reconnecting = vpnStatus.connecting.reconnecting;
180182
setConnectionInProgress(value => {
183+
if (reconnecting) return ConnectionInProgress.Reconnecting;
181184
if (value === ConnectionInProgress.ChangingLocations) return value;
182185
return ConnectionInProgress.Connecting;
183186
});
184-
} else if (vpnStatus.reconnecting !== undefined) {
185-
setVpnConnected(false);
186-
setConnectionInProgress(ConnectionInProgress.Reconnecting);
187-
if (vpnStatus.reconnecting.err !== undefined) {
188-
console.error(`got error while reconnecting: ${vpnStatus.reconnecting.err}`);
189-
notifyVpnError(vpnStatus.reconnecting.err);
187+
const connectError = vpnStatus.connecting?.connectError;
188+
if (connectError !== undefined) {
189+
if (reconnecting) {
190+
console.error(`got error while reconnecting: ${connectError}`);
191+
} else {
192+
console.error(`got error while connecting: ${connectError}`);
193+
}
194+
console.log(fmt`vpnStatus = ${vpnStatus}`);
195+
notifyVpnError(connectError);
190196
}
191197
} else if (vpnStatus.disconnected !== undefined) {
192198
setConnectionInProgress(value => {

‎obscura-ui/src/common/appContext.ts‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -49,14 +49,14 @@ export interface OsStatus {
4949
export interface VpnStatus {
5050
connected?: {
5151
exit: Exit,
52-
client_public_key: string,
53-
exit_public_key: string,
52+
clientPublicKey: string,
53+
exitPublicKey: string
5454
},
55-
connecting: {},
56-
disconnected: {},
57-
reconnecting?: {
58-
err: string,
55+
connecting?: {
56+
connectError: string,
57+
reconnecting: boolean
5958
},
59+
disconnected?: {}
6060
}
6161

6262
export interface PinnedLocation {

‎obscura-ui/src/views/ConnectionView.tsx‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -161,6 +161,7 @@ function ConnectionProgressBar() {
161161
const progressBg = colorScheme === 'light' ? 'dark.4' : 'dark.3';
162162

163163
const connectingProgressBars = usePulsingProgress({ activated: isConnecting(connectionInProgress), bars: 2, inactiveColor: progressBg, w: 50 });
164+
const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
164165

165166
return (
166167
<Paper shadow='xl' withBorder w='80%' maw={600} bg={bg} p='md' pt={5} pb='xs' mb='lg' radius='lg'>
@@ -172,7 +173,7 @@ function ConnectionProgressBar() {
172173
<Text size='xs' c='white'>{t('yourDevice')}</Text>
173174
</Stack>
174175
{
175-
!internetAvailable && !isConnecting(connectionInProgress) &&
176+
isOffline &&
176177
<>
177178
<Progress w={80} value={0} h={2} bg={progressBg} />
178179
<Stack gap='0' align='center'>
@@ -211,10 +212,10 @@ function ConnectionProgressBar() {
211212
<Progress w={50} value={(vpnConnected && connectionInProgress !== ConnectionInProgress.ChangingLocations) ? 100 : 0} h={2} bg={progressBg} />
212213
</>}
213214
<Stack gap='0' align='center'>
214-
<ThemeIcon variant='transparent' c={internetAvailable ? (connectionInProgress === ConnectionInProgress.UNSET ? 'white' : 'dimmed') : 'red.6'}>
215+
<ThemeIcon variant='transparent' c={isOffline ? 'red.6' : (connectionInProgress === ConnectionInProgress.UNSET ? 'white' : 'dimmed')}>
215216
<MdLanguage size={20} />
216217
</ThemeIcon>
217-
<Text size='xs' c={internetAvailable ? (connectionInProgress === ConnectionInProgress.UNSET ? 'white' : 'dimmed') : 'red.6'}>{t('Internet')}</Text>
218+
<Text size='xs' c={isOffline ? 'red.6' : (connectionInProgress === ConnectionInProgress.UNSET ? 'white' : 'dimmed')}>{t('Internet')}</Text>
218219
</Stack>
219220
</Group>
220221
</Paper>
@@ -303,21 +304,22 @@ function Deco() {
303304
return () => stop();
304305
}, [connectionInProgress, start, stop]);
305306

306-
if (!internetAvailable) return colorScheme === 'light' ? DecoOfflineLight : DecoOfflineDark;
307+
const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
308+
if (isOffline) return colorScheme === 'light' ? DecoOfflineLight : DecoOfflineDark;
307309

308-
if (connectionInProgress !== ConnectionInProgress.UNSET) {
309-
// want to allow reverse animations
310-
const adjustedIdx = connectionInProgress === ConnectionInProgress.Disconnecting ? DEC_LAST_IDX - connectingIndex : connectingIndex;
311-
const connectionDeco = DECO_CONNECTING_ARRAY[colorScheme][adjustedIdx];
312-
if (connectionDeco === undefined) {
313-
console.error(`adjustedIdx/connectingIndex (${adjustedIdx} or ${connectingIndex}) longer than DECO_CONNECTING_ARRAY`);
314-
return DECO_CONNECTING_ARRAY[colorScheme][0];
315-
}
316-
return connectionDeco;
317-
};
310+
if (connectionInProgress !== ConnectionInProgress.UNSET) {
311+
// want to allow reverse animations
312+
const adjustedIdx = connectionInProgress === ConnectionInProgress.Disconnecting ? DEC_LAST_IDX - connectingIndex : connectingIndex;
313+
const connectionDeco = DECO_CONNECTING_ARRAY[colorScheme][adjustedIdx];
314+
if (connectionDeco === undefined) {
315+
console.error(`adjustedIdx/connectingIndex (${adjustedIdx} or ${connectingIndex}) longer than DECO_CONNECTING_ARRAY`);
316+
return DECO_CONNECTING_ARRAY[colorScheme][0];
317+
}
318+
return connectionDeco;
319+
};
318320

319-
if (vpnConnected) return DecoConnected;
320-
return colorScheme === 'light' ? DecoDisconnectedLight : DecoDisconnectedDark;
321+
if (vpnConnected) return DecoConnected;
322+
return colorScheme === 'light' ? DecoDisconnectedLight : DecoDisconnectedDark;
321323
}
322324

323325
const MASCOT_CONNECTING = [
@@ -374,8 +376,10 @@ function Mascot() {
374376
return () => stop();
375377
}, [connectionInProgress, start, stop]);
376378

379+
const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
380+
377381
const getMascot = () => {
378-
if (!internetAvailable) return MascotDead;
382+
if (isOffline) return MascotDead;
379383
if (connectionInProgress !== ConnectionInProgress.UNSET) {
380384
const mascotConnecting = MASCOT_CONNECTING[connectingIndex];
381385
if (mascotConnecting === undefined) {

‎obscura-ui/src/views/LocationView.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Trans, useTranslation } from 'react-i18next';
77
import { BsPin, BsPinFill, BsShieldFillCheck, BsShieldFillExclamation } from 'react-icons/bs';
88
import * as commands from '../bridge/commands';
99
import { Exit, getExitCountry } from '../common/api';
10-
import { AppContext, ConnectionInProgress, ExitsContext } from '../common/appContext';
10+
import { AppContext, ConnectionInProgress, ExitsContext, isConnecting } from '../common/appContext';
1111
import commonClasses from '../common/common.module.css';
1212
import { fmtErrorI18n } from '../common/danger';
1313
import { CityNotFoundError, exitLocation, exitsSortComparator, getExitCountryFlag, getRandomExitFromCity } from '../common/exitUtils';
@@ -173,15 +173,16 @@ interface LocationCarProps {
173173

174174
function LocationCard({ exit, connected, onSelect, togglePin, pinned }: LocationCarProps) {
175175
const { t } = useTranslation();
176-
const { connectionInProgress, osStatus } = useContext(AppContext);
176+
const { connectionInProgress, osStatus, vpnConnected } = useContext(AppContext);
177177
const { internetAvailable } = osStatus;
178+
const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
178179

179180
const onPinClick = (e: MouseEvent) => {
180181
e.stopPropagation();
181182
togglePin(exit);
182183
};
183184

184-
const disableClick = connectionInProgress !== ConnectionInProgress.UNSET || !internetAvailable;
185+
const disableClick = connectionInProgress !== ConnectionInProgress.UNSET || isOffline;
185186
const cardClasses = [];
186187
if (connected) cardClasses.push(classes.locationCardConnected);
187188
if (disableClick) cardClasses.push(classes.locationCardDisabled);
@@ -260,9 +261,10 @@ function VpnStatusCard() {
260261
const { t } = useTranslation();
261262
const { appStatus, vpnConnected, connectionInProgress, vpnDisconnect, vpnConnect, osStatus } = useContext(AppContext);
262263
const { internetAvailable } = osStatus;
264+
const isOffline = !internetAvailable && !vpnConnected && !isConnecting(connectionInProgress);
263265

264266
const getStatusTitle = () => {
265-
if (!internetAvailable) return t('Offline');
267+
if (isOffline) return t('Offline');
266268
if (connectionInProgress !== ConnectionInProgress.UNSET && connectionInProgress !== ConnectionInProgress.ChangingLocations) return t(connectionInProgress) + '...';
267269
const selectedLocation = appStatus.vpnStatus.connected?.exit.city_name;
268270
// vpnConnected <-> vpnStatus.connected.exit defined
@@ -271,12 +273,12 @@ function VpnStatusCard() {
271273
};
272274

273275
const getStatusSubtitle = () => {
274-
if (!internetAvailable) return t('connectToInternet');
276+
if (isOffline) return t('connectToInternet');
275277
return vpnConnected ? t('trafficProtected') : t('trafficVulnerable');
276278
};
277279

278280
const allowCancel = connectionInProgress === ConnectionInProgress.Connecting || connectionInProgress === ConnectionInProgress.Reconnecting;
279-
const btnDisabled = !allowCancel && (connectionInProgress === ConnectionInProgress.Disconnecting || connectionInProgress === ConnectionInProgress.ChangingLocations || (!vpnConnected && !internetAvailable));
281+
const btnDisabled = !allowCancel && (connectionInProgress === ConnectionInProgress.Disconnecting || connectionInProgress === ConnectionInProgress.ChangingLocations || isOffline);
280282
const buttonDisconnectProps = ((allowCancel || vpnConnected) && !btnDisabled) ? theme.other.buttonDisconnectProps : {};
281283

282284
const getButtonContent = () => {
@@ -288,7 +290,7 @@ function VpnStatusCard() {
288290

289291
const btnTitle = () => {
290292
if (!btnDisabled) return;
291-
if (!internetAvailable) return t('noInternet');
293+
if (isOffline) return t('noInternet');
292294
return t('busyConnection');
293295
};
294296

@@ -313,7 +315,7 @@ function VpnStatusCard() {
313315
<Divider my='md' />
314316
<Stack justify='space-between' w='100%'>
315317
<CurrentSession />
316-
<ExitInfoCollapse exitPubKey={appStatus.vpnStatus.connected.exit_public_key} connectedExit={appStatus.vpnStatus.connected.exit} />
318+
<ExitInfoCollapse exitPubKey={appStatus.vpnStatus.connected.exitPublicKey} connectedExit={appStatus.vpnStatus.connected.exit} />
317319
</Stack>
318320
</>
319321
}

0 commit comments

Comments
 (0)