Skip to content
This repository was archived by the owner on Oct 22, 2024. It is now read-only.

Commit 2e895da

Browse files
richvdhrichvdh
authored
Crypto: fix display of device key (#86)
* CryptographyPanel: fix display of device key * CryptographPanel: Fix HTML nesting you're not supposed to put <tr> directly inside <table>; doing so causes warnings. * Update tests
1 parent a1bdcee commit 2e895da

File tree

5 files changed

+129
-47
lines changed

5 files changed

+129
-47
lines changed

‎src/components/views/settings/CryptographyPanel.tsx‎

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
77
*/
88

99
import React from "react";
10+
import { logger } from "matrix-js-sdk/src/logger";
1011

1112
import type ExportE2eKeysDialog from "../../../async-components/views/dialogs/security/ExportE2eKeysDialog";
1213
import type ImportE2eKeysDialog from "../../../async-components/views/dialogs/security/ImportE2eKeysDialog";
@@ -22,25 +23,53 @@ import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSub
2223

2324
interface IProps {}
2425

25-
interface IState {}
26+
interface IState {
27+
/** The device's base64-encoded Ed25519 identity key, or:
28+
*
29+
* * `undefined`: not yet loaded
30+
* * `null`: encryption is not supported (or the crypto stack was not correctly initialized)
31+
*/
32+
deviceIdentityKey: string | undefined | null;
33+
}
2634

2735
export default class CryptographyPanel extends React.Component<IProps, IState> {
2836
public constructor(props: IProps) {
2937
super(props);
38+
39+
const client = MatrixClientPeg.safeGet();
40+
const crypto = client.getCrypto();
41+
if (!crypto) {
42+
this.state = { deviceIdentityKey: null };
43+
} else {
44+
this.state = { deviceIdentityKey: undefined };
45+
crypto
46+
.getOwnDeviceKeys()
47+
.then((keys) => {
48+
this.setState({ deviceIdentityKey: keys.ed25519 });
49+
})
50+
.catch((e) => {
51+
logger.error(`CryptographyPanel: Error fetching own device keys: ${e}`);
52+
this.setState({ deviceIdentityKey: null });
53+
});
54+
}
3055
}
3156

3257
public render(): React.ReactNode {
3358
const client = MatrixClientPeg.safeGet();
3459
const deviceId = client.deviceId;
35-
let identityKey = client.getDeviceEd25519Key();
36-
if (!identityKey) {
60+
let identityKey = this.state.deviceIdentityKey;
61+
if (identityKey === undefined) {
62+
// Should show a spinner here really, but since this will be very transitional, I can't be doing with the
63+
// necessary styling.
64+
identityKey = "...";
65+
} else if (identityKey === null) {
3766
identityKey = _t("encryption|not_supported");
3867
} else {
3968
identityKey = FormattingUtils.formatCryptoKey(identityKey);
4069
}
4170

4271
let importExportButtons: JSX.Element | undefined;
43-
if (client.isCryptoEnabled()) {
72+
if (client.getCrypto()) {
4473
importExportButtons = (
4574
<div className="mx_CryptographyPanel_importExportButtons">
4675
<AccessibleButton kind="primary_outline" onClick={this.onExportE2eKeysClicked}>
@@ -68,20 +97,22 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
6897
<SettingsSubsection heading={_t("settings|security|cryptography_section")}>
6998
<SettingsSubsectionText>
7099
<table className="mx_CryptographyPanel_sessionInfo">
71-
<tr>
72-
<th scope="row">{_t("settings|security|session_id")}</th>
73-
<td>
74-
<code>{deviceId}</code>
75-
</td>
76-
</tr>
77-
<tr>
78-
<th scope="row">{_t("settings|security|session_key")}</th>
79-
<td>
80-
<code>
81-
<b>{identityKey}</b>
82-
</code>
83-
</td>
84-
</tr>
100+
<tbody>
101+
<tr>
102+
<th scope="row">{_t("settings|security|session_id")}</th>
103+
<td>
104+
<code>{deviceId}</code>
105+
</td>
106+
</tr>
107+
<tr>
108+
<th scope="row">{_t("settings|security|session_key")}</th>
109+
<td>
110+
<code>
111+
<b>{identityKey}</b>
112+
</code>
113+
</td>
114+
</tr>
115+
</tbody>
85116
</table>
86117
</SettingsSubsectionText>
87118
{importExportButtons}

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

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,21 +9,24 @@ Please see LICENSE files in the repository root for full details.
99
import React from "react";
1010
import { render } from "@testing-library/react";
1111
import { MatrixClient } from "matrix-js-sdk/src/matrix";
12+
import { mocked } from "jest-mock";
1213

1314
import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
1415
import * as TestUtils from "../../../test-utils";
1516
import CryptographyPanel from "../../../../src/components/views/settings/CryptographyPanel";
17+
import { flushPromises } from "../../../test-utils";
1618

1719
describe("CryptographyPanel", () => {
18-
it("shows the session ID and key", () => {
20+
it("shows the session ID and key", async () => {
1921
const sessionId = "ABCDEFGHIJ";
2022
const sessionKey = "AbCDeFghIJK7L/m4nOPqRSTUVW4xyzaBCDef6gHIJkl";
2123
const sessionKeyFormatted = "<b>AbCD eFgh IJK7 L/m4 nOPq RSTU VW4x yzaB CDef 6gHI Jkl</b>";
2224

2325
TestUtils.stubClient();
2426
const client: MatrixClient = MatrixClientPeg.safeGet();
2527
client.deviceId = sessionId;
26-
client.getDeviceEd25519Key = () => sessionKey;
28+
29+
mocked(client.getCrypto()!.getOwnDeviceKeys).mockResolvedValue({ ed25519: sessionKey, curve25519: "1234" });
2730

2831
// When we render the CryptographyPanel
2932
const rendered = render(<CryptographyPanel />);
@@ -32,6 +35,35 @@ describe("CryptographyPanel", () => {
3235
const codes = rendered.container.querySelectorAll("code");
3336
expect(codes.length).toEqual(2);
3437
expect(codes[0].innerHTML).toEqual(sessionId);
38+
39+
// Initially a placeholder
40+
expect(codes[1].innerHTML).toEqual("<b>...</b>");
41+
42+
// Then the actual key
43+
await flushPromises();
3544
expect(codes[1].innerHTML).toEqual(sessionKeyFormatted);
3645
});
46+
47+
it("handles errors fetching session key", async () => {
48+
const sessionId = "ABCDEFGHIJ";
49+
50+
TestUtils.stubClient();
51+
const client: MatrixClient = MatrixClientPeg.safeGet();
52+
client.deviceId = sessionId;
53+
54+
mocked(client.getCrypto()!.getOwnDeviceKeys).mockRejectedValue(new Error("bleh"));
55+
56+
// When we render the CryptographyPanel
57+
const rendered = render(<CryptographyPanel />);
58+
59+
// Then it displays info about the user's session
60+
const codes = rendered.container.querySelectorAll("code");
61+
62+
// Initially a placeholder
63+
expect(codes[1].innerHTML).toEqual("<b>...</b>");
64+
65+
// Then "not supported key
66+
await flushPromises();
67+
expect(codes[1].innerHTML).toEqual("<b>&lt;not supported&gt;</b>");
68+
});
3769
});

‎test/components/views/settings/tabs/user/__snapshots__/SecurityUserSettingsTab-test.tsx.snap‎

Lines changed: 44 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -314,32 +314,52 @@ exports[`<SecurityUserSettingsTab /> renders security section 1`] = `
314314
<table
315315
class="mx_CryptographyPanel_sessionInfo"
316316
>
317-
<tr>
318-
<th
319-
scope="row"
320-
>
321-
Session ID:
322-
</th>
323-
<td>
324-
<code />
325-
</td>
326-
</tr>
327-
<tr>
328-
<th
329-
scope="row"
330-
>
331-
Session key:
332-
</th>
333-
<td>
334-
<code>
335-
<b>
336-
&lt;not supported&gt;
337-
</b>
338-
</code>
339-
</td>
340-
</tr>
317+
<tbody>
318+
<tr>
319+
<th
320+
scope="row"
321+
>
322+
Session ID:
323+
</th>
324+
<td>
325+
<code />
326+
</td>
327+
</tr>
328+
<tr>
329+
<th
330+
scope="row"
331+
>
332+
Session key:
333+
</th>
334+
<td>
335+
<code>
336+
<b>
337+
...
338+
</b>
339+
</code>
340+
</td>
341+
</tr>
342+
</tbody>
341343
</table>
342344
</div>
345+
<div
346+
class="mx_CryptographyPanel_importExportButtons"
347+
>
348+
<div
349+
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
350+
role="button"
351+
tabindex="0"
352+
>
353+
Export E2E room keys
354+
</div>
355+
<div
356+
class="mx_AccessibleButton mx_AccessibleButton_hasKind mx_AccessibleButton_kind_primary_outline"
357+
role="button"
358+
tabindex="0"
359+
>
360+
Import E2E room keys
361+
</div>
362+
</div>
343363
<div
344364
class="mx_SettingsFlag"
345365
>

‎test/test-utils/client.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,6 @@ export const mockClientMethodsDevice = (
135135
deviceId = "test-device-id",
136136
): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({
137137
getDeviceId: jest.fn().mockReturnValue(deviceId),
138-
getDeviceEd25519Key: jest.fn(),
139138
getDevices: jest.fn().mockResolvedValue({ devices: [] }),
140139
});
141140

@@ -164,10 +163,9 @@ export const mockClientMethodsCrypto = (): Partial<
164163
isSecretStorageReady: jest.fn(),
165164
getSessionBackupPrivateKey: jest.fn(),
166165
getVersion: jest.fn().mockReturnValue("Version 0"),
167-
getOwnDeviceKeys: jest.fn(),
166+
getOwnDeviceKeys: jest.fn().mockReturnValue(new Promise(() => {})),
168167
getCrossSigningKeyId: jest.fn(),
169168
}),
170-
getDeviceEd25519Key: jest.fn(),
171169
});
172170

173171
export const mockClientMethodsRooms = (rooms: Room[] = []): Partial<Record<MethodLikeKeys<MatrixClient>, unknown>> => ({

‎test/test-utils/test-utils.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ export function createTestClient(): MatrixClient {
124124
},
125125
},
126126
getCrypto: jest.fn().mockReturnValue({
127+
getOwnDeviceKeys: jest.fn(),
127128
getUserDeviceInfo: jest.fn(),
128129
getUserVerificationStatus: jest.fn(),
129130
getDeviceVerificationStatus: jest.fn(),

0 commit comments

Comments
 (0)