nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Update key storage toggle when key storage status changes (#30934)

Browse Source 
* update key storage toggle when key storage status changes

Listen for the CryptoEvent.KeyBackupStatus event and update the state
when it changes.

* fixup! update key storage toggle when key storage status changes

* add comment about handling event
This commit is contained in:
Hubert Chathi
2025-10-03 09:04:06 -04:00
committed by GitHub
parent da827129c7
commit 5f084c28c3
3 changed files with 69 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/viewmodels/settings/encryption/KeyStoragePanelViewModel.ts
View File

@@ -5,11 +5,13 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
Please see LICENSE files in the repository root for full details.
*/
import { useCallback, useEffect, useState } from "react";
import { useCallback, useState } from "react";
import { CryptoEvent } from "matrix-js-sdk/src/crypto-api";
import { logger } from "matrix-js-sdk/src/logger";
import { useMatrixClientContext } from "../../../../contexts/MatrixClientContext";
import DeviceListener, { BACKUP_DISABLED_ACCOUNT_DATA_KEY } from "../../../../DeviceListener";
import { useEventEmitterAsyncState } from "../../../../hooks/useEventEmitter";
interface KeyStoragePanelState {
/**
@@ -37,31 +39,37 @@ interface KeyStoragePanelState {
/** Returns a ViewModel for use in {@link KeyStoragePanel} and {@link DeleteKeyStoragePanel}. */
export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
const [isEnabled, setIsEnabled] = useState<boolean | undefined>(undefined);
const [loading, setLoading] = useState(true);
// Whilst the change is being made, the toggle will reflect the pending value rather than the actual state
const [pendingValue, setPendingValue] = useState<boolean | undefined>(undefined);
const matrixClient = useMatrixClientContext();
const checkStatus = useCallback(async () => {
const crypto = matrixClient.getCrypto();
if (!crypto) {
logger.error("Can't check key backup status: no crypto module available");
return;
}
// The toggle is enabled only if this device will upload megolm keys to the backup.
// This is consistent with EX.
const activeBackupVersion = await crypto.getActiveSessionBackupVersion();
setIsEnabled(activeBackupVersion !== null);
}, [matrixClient]);
const isEnabled = useEventEmitterAsyncState(
matrixClient,
CryptoEvent.KeyBackupStatus,
async (enabled?: boolean) => {
// If we're called as a result of an event, rather than during
// initialisation, we can get the backup status from the event
// instead of having to query the backup version.
if (enabled !== undefined) {
return enabled;
}
useEffect(() => {
(async () => {
await checkStatus();
const crypto = matrixClient.getCrypto();
if (!crypto) {
logger.error("Can't check key backup status: no crypto module available");
return;
}
// The toggle is enabled only if this device will upload megolm keys to the backup.
// This is consistent with EX.
const activeBackupVersion = await crypto.getActiveSessionBackupVersion();
setLoading(false);
})();
}, [checkStatus]);
return activeBackupVersion !== null;
},
[matrixClient],
undefined,
);
const setEnabled = useCallback(
async (enable: boolean) => {
@@ -121,14 +129,12 @@ export function useKeyStoragePanelViewModel(): KeyStoragePanelState {
// so this will stop EX turning it back on spontaneously.
await matrixClient.setAccountData(BACKUP_DISABLED_ACCOUNT_DATA_KEY, { disabled: true });
}
await checkStatus();
} finally {
setPendingValue(undefined);
DeviceListener.sharedInstance().start(matrixClient);
}
},
[setPendingValue, checkStatus, matrixClient],
[setPendingValue, matrixClient],
);
return { isEnabled: pendingValue ?? isEnabled, setEnabled, loading, busy: pendingValue !== undefined };