Crypto: fix display of device key

src/components/views/settings/CryptographyPanel.tsx

@@ -7,6 +7,7 @@
 */
 
 import React from "react";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import type ExportE2eKeysDialog from "../../../async-components/views/dialogs/security/ExportE2eKeysDialog";
 import type ImportE2eKeysDialog from "../../../async-components/views/dialogs/security/ImportE2eKeysDialog";
@@ -22,25 +23,53 @@
 
 interface IProps {}
 
-interface IState {}
+interface IState {
+    /** The device's base64-encoded Ed25519 identity key, or:
+     *
+     * * `undefined`: not yet loaded
+     * * `null`: encryption is not supported (or the crypto stack was not correctly initialized)
+     */
+    deviceIdentityKey: string | undefined | null;
+}
 
 export default class CryptographyPanel extends React.Component<IProps, IState> {
     public constructor(props: IProps) {
         super(props);
+
+        const client = MatrixClientPeg.safeGet();
+        const crypto = client.getCrypto();
+        if (!crypto) {
+            this.state = { deviceIdentityKey: null };
+        } else {
+            this.state = { deviceIdentityKey: undefined };
+            crypto
+                .getOwnDeviceKeys()
+                .then((keys) => {
+                    this.setState({ deviceIdentityKey: keys.ed25519 });
+                })
+                .catch((e) => {
+                    logger.error(`CryptographyPanel: Error fetching own device keys: ${e}`);
+                    this.setState({ deviceIdentityKey: null });
+                });
+        }
     }
 
     public render(): React.ReactNode {
         const client = MatrixClientPeg.safeGet();
         const deviceId = client.deviceId;
-        let identityKey = client.getDeviceEd25519Key();
-        if (!identityKey) {
+        let identityKey = this.state.deviceIdentityKey;
+        if (identityKey === undefined) {
+            // Should show a spinner here really, but since this will be very transitional, I can't be doing with the
+            // necessary styling.
+            identityKey = "...";
+        } else if (identityKey === null) {
             identityKey = _t("encryption|not_supported");
         } else {
             identityKey = FormattingUtils.formatCryptoKey(identityKey);
         }
 
         let importExportButtons: JSX.Element | undefined;
-        if (client.isCryptoEnabled()) {
+        if (client.getCrypto()) {
             importExportButtons = (
                 <div className="mx_CryptographyPanel_importExportButtons">
                     <AccessibleButton kind="primary_outline" onClick={this.onExportE2eKeysClicked}>
@@ -68,20 +97,22 @@
             <SettingsSubsection heading={_t("settings|security|cryptography_section")}>
                 <SettingsSubsectionText>
                     <table className="mx_CryptographyPanel_sessionInfo">
-                        <tr>
-                            <th scope="row">{_t("settings|security|session_id")}</th>
-                            <td>
-                                <code>{deviceId}</code>
-                            </td>
-                        </tr>
-                        <tr>
-                            <th scope="row">{_t("settings|security|session_key")}</th>
-                            <td>
-                                <code>
-                                    <b>{identityKey}</b>
-                                </code>
-                            </td>
-                        </tr>
+                        <tbody>
+                            <tr>
+                                <th scope="row">{_t("settings|security|session_id")}</th>
+                                <td>
+                                    <code>{deviceId}</code>
+                                </td>
+                            </tr>
+                            <tr>
+                                <th scope="row">{_t("settings|security|session_key")}</th>
+                                <td>
+                                    <code>
+                                        <b>{identityKey}</b>
+                                    </code>
+                                </td>
+                            </tr>
+                        </tbody>
                     </table>
                 </SettingsSubsectionText>
                 {importExportButtons}

test/components/views/settings/CryptographyPanel-test.tsx

@@ -9,21 +9,24 @@
 import React from "react";
 import { render } from "@testing-library/react";
 import { MatrixClient } from "matrix-js-sdk/src/matrix";
+import { mocked } from "jest-mock";
 
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import * as TestUtils from "../../../test-utils";
 import CryptographyPanel from "../../../../src/components/views/settings/CryptographyPanel";
+import { flushPromises } from "../../../test-utils";
 
 describe("CryptographyPanel", () => {
-    it("shows the session ID and key", () => {
+    it("shows the session ID and key", async () => {
         const sessionId = "ABCDEFGHIJ";
         const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
         const sessionKeyFormatted = "<b>AbCD eFgh IJK7 L/m4 nOPq RSTU VW4x yzaB CDef 6gHI Jkl</b>";
 
         TestUtils.stubClient();
         const client: MatrixClient = MatrixClientPeg.safeGet();
         client.deviceId = sessionId;
-        client.getDeviceEd25519Key = () => sessionKey;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
 
         // When we render the CryptographyPanel
         const rendered = render(<CryptographyPanel />);
@@ -32,6 +35,35 @@
         const codes = rendered.container.querySelectorAll("code");
         expect(codes.length).toEqual(2);
         expect(codes[0].innerHTML).toEqual(sessionId);
+
+        // Initially a placeholder
+        expect(codes[1].innerHTML).toEqual("<b>...</b>");
+
+        // Then the actual key
+        await flushPromises();
         expect(codes[1].innerHTML).toEqual(sessionKeyFormatted);
     });
+
+    it("handles errors fetching session key", async () => {
+        const sessionId = "ABCDEFGHIJ";
+
+        TestUtils.stubClient();
+        const client: MatrixClient = MatrixClientPeg.safeGet();
+        client.deviceId = sessionId;
+
+        mocked(client.getCrypto()!.getOwnDeviceKeys).mockRejectedValue(new Error("bleh"));
+
+        // When we render the CryptographyPanel
+        const rendered = render(<CryptographyPanel />);
+
+        // Then it displays info about the user's session
+        const codes = rendered.container.querySelectorAll("code");
+
+        // Initially a placeholder
+        expect(codes[1].innerHTML).toEqual("<b>...</b>");
+
+        // Then "not supported key
+        await flushPromises();
+        expect(codes[1].innerHTML).toEqual("<b>&lt;Not supported&gt;</b>");
+    });
 });

test/test-utils/client.ts

@@ -135,7 +135,6 @@ export const mockClientMethodsDevice = (
     deviceId = "test-device-id",
 ): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({
     getDeviceId: jest.fn().mockReturnValue(deviceId),
-    getDeviceEd25519Key: jest.fn(),
     getDevices: jest.fn().mockResolvedValue({ devices: [] }),
 });
 
@@ -167,7 +166,6 @@ export const mockClientMethodsCrypto = (): Partial<
         getOwnDeviceKeys: jest.fn(),
         getCrossSigningKeyId: jest.fn(),
     }),
-    getDeviceEd25519Key: jest.fn(),
 });
 
 export const mockClientMethodsRooms = (rooms: Room[] = []): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({

test/test-utils/test-utils.ts

@@ -124,6 +124,7 @@ export function createTestClient(): MatrixClient {
             },
         },
         getCrypto: jest.fn().mockReturnValue({
+            getOwnDeviceKeys: jest.fn(),
             getUserDeviceInfo: jest.fn(),
             getUserVerificationStatus: jest.fn(),
             getDeviceVerificationStatus: jest.fn(),