Skip to content

Commit

Permalink
Remove forwarded ports messages from GUI frontend
Browse files Browse the repository at this point in the history
  • Loading branch information
@faern
faern committed Aug 31, 2023
1 parent 9f837a9 commit 5fff421
Show file tree
Hide file tree
Showing 11 changed files with 10 additions and 217 deletions.
9 changes: 0 additions & 9 deletions gui/src/main/account.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,15 +91,6 @@ export default class Account {
void this.updateAccountHistory();
});

IpcMainEventChannel.account.handleGetDeviceState(async () => {
try {
await this.daemonRpc.updateDevice();
} catch (e) {
const error = e as Error;
log.warn(`Failed to update device info: ${error.message}`);
}
return this.daemonRpc.getDevice();
});
IpcMainEventChannel.account.handleListDevices((accountToken: AccountToken) => {
return this.daemonRpc.listDevices(accountToken);
});
Expand Down
1 change: 0 additions & 1 deletion gui/src/main/daemon-rpc.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1612,7 +1612,6 @@ function convertFromDevice(device: grpcTypes.Device): IDevice {

return {
...asObject,
ports: asObject.portsList.map((port) => port.id),
created: created,
};
}
Expand Down
10 changes: 1 addition & 9 deletions gui/src/renderer/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -295,7 +295,6 @@ export default class AppRenderer {

public submitVoucher = (code: string) => IpcRendererEventChannel.account.submitVoucher(code);
public updateAccountData = () => IpcRendererEventChannel.account.updateData();
public getDeviceState = () => IpcRendererEventChannel.account.getDeviceState();
public removeDevice = (device: IDeviceRemoval) =>
IpcRendererEventChannel.account.removeDevice(device);
public connectTunnel = () => IpcRendererEventChannel.tunnel.connect();
Expand Down Expand Up @@ -850,14 +849,7 @@ export default class AppRenderer {
break;
case 'revoked': {
this.loginScheduler.cancel();

const oldAccountState = this.reduxStore.getState().account;
if (oldAccountState.loggingOut) {
reduxAccount.loggedOut();
} else {
reduxAccount.deviceRevoked();
}

reduxAccount.deviceRevoked();
this.resetNavigation();
break;
}
Expand Down
149 changes: 9 additions & 140 deletions gui/src/renderer/components/Account.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,10 @@
import {
createContext,
ReactNode,
useCallback,
useContext,
useEffect,
useMemo,
useState,
} from 'react';
import { useCallback, useEffect } from 'react';

import { links } from '../../config.json';
import { formatDate, hasExpired } from '../../shared/account-expiry';
import { messages } from '../../shared/gettext';
import { useAppContext } from '../context';
import useActions from '../lib/actionsHook';
import { useHistory } from '../lib/history';
import { useBoolean } from '../lib/utilityHooks';
import account from '../redux/account/actions';
import { useSelector } from '../redux/store';
import {
AccountContainer,
Expand All @@ -26,36 +15,21 @@ import {
AccountRowValue,
DeviceRowValue,
StyledDeviceNameRow,
StyledSpinnerContainer,
} from './AccountStyles';
import AccountTokenLabel from './AccountTokenLabel';
import * as AppButton from './AppButton';
import { AriaDescribed, AriaDescription, AriaDescriptionGroup } from './AriaGroup';
import DeviceInfoButton from './DeviceInfoButton';
import ImageView from './ImageView';
import { BackAction } from './KeyboardNavigation';
import { Footer, Layout, SettingsContainer } from './Layout';
import { ModalAlert, ModalAlertType, ModalMessage } from './Modal';
import { NavigationBar, NavigationItems, TitleBarItem } from './NavigationBar';
import { RedeemVoucherButton } from './RedeemVoucher';
import SettingsHeader, { HeaderTitle } from './SettingsHeader';

type DialogStage = 'checking-ports' | 'confirm' | undefined;

export default function Account() {
return (
<LogoutContextProvider>
<AccountComponent />
</LogoutContextProvider>
);
}

function AccountComponent() {
const history = useHistory();
const isOffline = useSelector((state) => state.connection.isBlocked);
const { updateAccountData, openLinkWithAuth } = useAppContext();

const { onTryLogout } = useLogoutContext();
const { updateAccountData, openLinkWithAuth, logout } = useAppContext();

const onBuyMore = useCallback(async () => {
await openLinkWithAuth(links.purchase);
Expand All @@ -65,6 +39,12 @@ function AccountComponent() {
updateAccountData();
}, []);

// Hack needed because if we just call `logout` directly in `onClick`
// then it is run with the wrong `this`.
const doLogout = useCallback(async () => {
await logout();
}, [logout]);

return (
<BackAction action={history.pop}>
<Layout>
Expand Down Expand Up @@ -128,63 +108,18 @@ function AccountComponent() {

<RedeemVoucherButton />

<AppButton.RedButton onClick={onTryLogout}>
<AppButton.RedButton onClick={doLogout}>
{messages.pgettext('account-view', 'Log out')}
</AppButton.RedButton>
</AppButton.ButtonGroup>
</Footer>
</AccountContainer>
</SettingsContainer>

<LogoutDialog />
</Layout>
</BackAction>
);
}

function LogoutDialog() {
const { dialogStage, dialogVisible, onConfirmLogout, onCancelLogout } = useLogoutContext();

const modalType = dialogStage === 'checking-ports' ? undefined : ModalAlertType.warning;

const message =
dialogStage === 'checking-ports' ? (
<StyledSpinnerContainer>
<ImageView source="icon-spinner" width={60} height={60} />
</StyledSpinnerContainer>
) : (
<ModalMessage>
{
// TRANSLATORS: This is is a further explanation of what happens when logging out.
messages.pgettext(
'device-management',
'The ports forwarded to this device will be deleted if you log out.',
)
}
</ModalMessage>
);

const buttons =
dialogStage === 'checking-ports'
? []
: [
<AppButton.RedButton key="logout" onClick={onConfirmLogout}>
{
// TRANSLATORS: Confirmation button when logging out
messages.pgettext('device-management', 'Log out anyway')
}
</AppButton.RedButton>,
<AppButton.BlueButton key="back" onClick={onCancelLogout}>
{messages.gettext('Back')}
</AppButton.BlueButton>,
];
return (
<ModalAlert isOpen={dialogVisible} type={modalType} buttons={buttons}>
{message}
</ModalAlert>
);
}

function DeviceNameRow() {
const deviceName = useSelector((state) => state.account.deviceName);
return (
Expand Down Expand Up @@ -223,69 +158,3 @@ function FormattedAccountExpiry(props: { expiry?: string; locale: string }) {
);
}
}

type LogoutContextType = {
dialogStage: DialogStage;
dialogVisible: boolean;
onConfirmLogout: () => void;
onCancelLogout: () => void;
onTryLogout: () => Promise<void>;
};

const LogoutContext = createContext<LogoutContextType | undefined>(undefined);

const LogoutContextProvider = ({ children }: { children: ReactNode }) => {
const { cancelLogout, prepareLogout } = useActions(account);
const { logout, getDeviceState } = useAppContext();

const [dialogStage, setDialogStage] = useState<DialogStage>();
const [dialogVisible, showDialog, hideDialog] = useBoolean(false);

const onConfirmLogout = useCallback(async () => {
hideDialog();
await logout();
}, []);

const onTryLogout = useCallback(async () => {
showDialog();
setDialogStage('checking-ports');
prepareLogout();

const deviceState = await getDeviceState();

if (
deviceState?.type === 'logged in' &&
deviceState.accountAndDevice.device?.ports !== undefined &&
deviceState.accountAndDevice.device.ports.length > 0
) {
setDialogStage('confirm');
} else {
await onConfirmLogout();
}
}, [onConfirmLogout, prepareLogout]);

const onCancelLogout = useCallback(() => {
cancelLogout();
hideDialog();
}, [cancelLogout]);

const value: LogoutContextType = useMemo(
() => ({
dialogStage,
dialogVisible,
onConfirmLogout,
onCancelLogout,
onTryLogout,
}),
[dialogVisible, dialogStage, onConfirmLogout, onCancelLogout, onTryLogout],
);
return <LogoutContext.Provider value={value}>{children}</LogoutContext.Provider>;
};

const useLogoutContext = () => {
const context = useContext(LogoutContext);
if (!context) {
throw new Error('useAccount must be used within an LogoutContextProvider');
}
return context;
};
7 changes: 0 additions & 7 deletions gui/src/renderer/components/AccountStyles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,6 @@ export const AccountOutOfTime = styled(AccountRowValue)({
color: colors.red,
});

export const StyledSpinnerContainer = styled.div({
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
padding: '8px 0',
});

export const StyledDeviceNameRow = styled.div({
display: 'flex',
flexDirection: 'row',
Expand Down
11 changes: 0 additions & 11 deletions gui/src/renderer/components/TooManyDevices.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -298,17 +298,6 @@ function Device(props: IDeviceProps) {
),
)}
</ModalMessage>
{props.device.ports && props.device.ports.length > 0 && (
<ModalMessage>
{
// TRANSLATORS: Further information about consequences of logging out device.
messages.pgettext(
'device-management',
'This will delete all forwarded ports. Local settings will be saved.',
)
}
</ModalMessage>
)}
</ModalAlert>
<ModalAlert
isOpen={error}
Expand Down
24 changes: 0 additions & 24 deletions gui/src/renderer/redux/account/actions.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,6 @@ interface ILoginTooManyDevicesAction {
type: 'TOO_MANY_DEVICES';
}

interface IPrepareLogoutAction {
type: 'PREPARE_LOG_OUT';
}

interface ICancelLogoutAction {
type: 'CANCEL_LOGOUT';
}

interface ILoggedOutAction {
type: 'LOGGED_OUT';
}
Expand Down Expand Up @@ -91,8 +83,6 @@ export type AccountAction =
| ILoggedInAction
| ILoginFailedAction
| ILoginTooManyDevicesAction
| IPrepareLogoutAction
| ICancelLogoutAction
| ILoggedOutAction
| IResetLoginErrorAction
| IDeviceRevokedAction
Expand Down Expand Up @@ -134,18 +124,6 @@ function loginTooManyDevices(): ILoginTooManyDevicesAction {
};
}

function prepareLogout(): IPrepareLogoutAction {
return {
type: 'PREPARE_LOG_OUT',
};
}

function cancelLogout(): ICancelLogoutAction {
return {
type: 'CANCEL_LOGOUT',
};
}

function loggedOut(): ILoggedOutAction {
return {
type: 'LOGGED_OUT',
Expand Down Expand Up @@ -232,8 +210,6 @@ export default {
loggedIn,
loginFailed,
loginTooManyDevices,
prepareLogout,
cancelLogout,
loggedOut,
resetLoginError,
deviceRevoked,
Expand Down
13 changes: 0 additions & 13 deletions gui/src/renderer/redux/account/reducers.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export interface IAccountReduxState {
accountHistory?: AccountToken;
expiry?: string; // ISO8601
status: LoginState;
loggingOut: boolean;
}

const initialState: IAccountReduxState = {
Expand All @@ -28,7 +27,6 @@ const initialState: IAccountReduxState = {
accountHistory: undefined,
expiry: undefined,
status: { type: 'none', deviceRevoked: false },
loggingOut: false,
};

export default function (
Expand Down Expand Up @@ -59,23 +57,12 @@ export default function (
...state,
status: { type: 'too many devices', method: 'existing_account' },
};
case 'PREPARE_LOG_OUT':
return {
...state,
loggingOut: true,
};
case 'CANCEL_LOGOUT':
return {
...state,
loggingOut: false,
};
case 'LOGGED_OUT':
return {
...state,
status: { type: 'none', deviceRevoked: false },
accountToken: undefined,
expiry: undefined,
loggingOut: false,
};
case 'RESET_LOGIN_ERROR':
return {
Expand Down
1 change: 0 additions & 1 deletion gui/src/shared/daemon-rpc-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -377,7 +377,6 @@ export type DeviceEvent =
export interface IDevice {
id: string;
name: string;
ports?: Array<string>;
created: Date;
}

Expand Down
1 change: 0 additions & 1 deletion gui/src/shared/ipc-schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,7 +189,6 @@ export const ipcSchema = {
getWwwAuthToken: invoke<void, string>(),
submitVoucher: invoke<string, VoucherResponse>(),
updateData: send<void>(),
getDeviceState: invoke<void, DeviceState>(),
listDevices: invoke<AccountToken, Array<IDevice>>(),
removeDevice: invoke<IDeviceRemoval, void>(),
},
Expand Down
Loading

0 comments on commit 5fff421

Please sign in to comment.