imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Crypto: fix display of device key (#86)

Browse source 
* 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
This commit is contained in:
Richard van der Hoff 2024-09-24 16:48:37 +01:00 • committed by GitHub
parent a1bdceed3e
commit 2e895da39f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 129 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

67
src/components/views/settings/CryptographyPanel.tsx
View file

@ -7,6 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
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 @@ import SettingsSubsection, { SettingsSubsectionText } from "./shared/SettingsSub
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 @@ export default class CryptographyPanel extends React.Component<IProps, IState> {
<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}