Add Advanced section to the user settings encryption tab (#28804)
* Make the encryption card more configurable: - Change the icon - Can set the destructive props * Update compound * Add advanced section * Add the `Never send encrypted messages to unverified devices` settings * - Add commercial license - Remove generic type * Rename EncryptionDetails css classes * Use same uiAuthCallback * Use h3 for title * Add tests to `AdvancedPanel` * Add tests to `EncryptionUserSettingsTab` * Add tests to `ResetIdentityPanel` * Get only the recovery section in recovery tests * Add e2e test
This commit is contained in:
Florian Duros
GitHub
@@ -0,0 +1,99 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { render, screen, waitFor } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
|
||||
import { AdvancedPanel } from "../../../../../../src/components/views/settings/encryption/AdvancedPanel";
|
||||
import SettingsStore from "../../../../../../src/settings/SettingsStore";
|
||||
import { SettingLevel } from "../../../../../../src/settings/SettingLevel";
|
||||
|
||||
describe("<AdvancedPanel />", () => {
|
||||
let matrixClient: MatrixClient;
|
||||
|
||||
beforeEach(() => {
|
||||
matrixClient = createTestClient();
|
||||
});
|
||||
|
||||
async function renderAdvancedPanel(onResetIdentityClick = jest.fn()) {
|
||||
const renderResult = render(
|
||||
<AdvancedPanel onResetIdentityClick={onResetIdentityClick} />,
|
||||
withClientContextRenderOptions(matrixClient),
|
||||
);
|
||||
// Wait for the device keys to be displayed
|
||||
await waitFor(() => expect(screen.getByText("ed25519")).toBeInTheDocument());
|
||||
return renderResult;
|
||||
}
|
||||
|
||||
describe("<EncryptionDetails />", () => {
|
||||
it("should display a spinner when loading the device keys", async () => {
|
||||
jest.spyOn(matrixClient.getCrypto()!, "getOwnDeviceKeys").mockImplementation(() => new Promise(() => {}));
|
||||
render(<AdvancedPanel onResetIdentityClick={jest.fn()} />, withClientContextRenderOptions(matrixClient));
|
||||
|
||||
expect(screen.getByTestId("encryptionDetails")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should display the device keys", async () => {
|
||||
await renderAdvancedPanel();
|
||||
|
||||
// session id
|
||||
expect(screen.getByText("ABCDEFGHI")).toBeInTheDocument();
|
||||
// session key
|
||||
expect(screen.getByText("ed25519")).toBeInTheDocument();
|
||||
expect(screen.getByTestId("encryptionDetails")).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should call the onResetIdentityClick callback when the reset cryptographic identity button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const onResetIdentityClick = jest.fn();
|
||||
await renderAdvancedPanel(onResetIdentityClick);
|
||||
|
||||
const resetIdentityButton = screen.getByRole("button", { name: "Reset cryptographic identity" });
|
||||
await user.click(resetIdentityButton);
|
||||
|
||||
expect(onResetIdentityClick).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
describe("<OtherSettings />", () => {
|
||||
it("should display the blacklist of unverified devices settings", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
jest.spyOn(SettingsStore, "getValueAt").mockReturnValue(true);
|
||||
jest.spyOn(SettingsStore, "canSetValue").mockReturnValue(true);
|
||||
jest.spyOn(SettingsStore, "setValue");
|
||||
|
||||
await renderAdvancedPanel();
|
||||
|
||||
expect(screen.getByTestId("otherSettings")).toMatchSnapshot();
|
||||
const checkbox = screen.getByRole("checkbox", {
|
||||
name: "Never send encrypted messages to unverified devices",
|
||||
});
|
||||
expect(checkbox).toBeChecked();
|
||||
|
||||
await user.click(checkbox);
|
||||
expect(SettingsStore.setValue).toHaveBeenCalledWith(
|
||||
"blacklistUnverifiedDevices",
|
||||
null,
|
||||
SettingLevel.DEVICE,
|
||||
false,
|
||||
);
|
||||
});
|
||||
|
||||
it("should not display the section when the user can not set the value", async () => {
|
||||
jest.spyOn(SettingsStore, "canSetValue").mockReturnValue(false);
|
||||
jest.spyOn(SettingsStore, "setValue");
|
||||
|
||||
await renderAdvancedPanel();
|
||||
expect(screen.queryByTestId("otherSettings")).toBeNull();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -7,13 +7,14 @@
|
||||
|
||||
import React from "react";
|
||||
import { render } from "jest-matrix-react";
|
||||
import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key-solid";
|
||||
|
||||
import { EncryptionCard } from "../../../../../../src/components/views/settings/encryption/EncryptionCard";
|
||||
|
||||
describe("<EncryptionCard />", () => {
|
||||
it("should render", () => {
|
||||
const { asFragment } = render(
|
||||
<EncryptionCard title="My title" description="My description">
|
||||
<EncryptionCard Icon={KeyIcon} title="My title" description="My description">
|
||||
Encryption card children
|
||||
</EncryptionCard>,
|
||||
);
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
/*
|
||||
* Copyright 2025 New Vector Ltd.
|
||||
*
|
||||
* SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
* Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import { MatrixClient } from "matrix-js-sdk/src/matrix";
|
||||
import { render, screen } from "jest-matrix-react";
|
||||
import userEvent from "@testing-library/user-event";
|
||||
|
||||
import { ResetIdentityPanel } from "../../../../../../src/components/views/settings/encryption/ResetIdentityPanel";
|
||||
import { createTestClient, withClientContextRenderOptions } from "../../../../../test-utils";
|
||||
|
||||
describe("<ResetIdentityPanel />", () => {
|
||||
let matrixClient: MatrixClient;
|
||||
|
||||
beforeEach(() => {
|
||||
matrixClient = createTestClient();
|
||||
});
|
||||
|
||||
it("should reset the encryption when the continue button is clicked", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const onFinish = jest.fn();
|
||||
const { asFragment } = render(
|
||||
<ResetIdentityPanel onFinish={onFinish} onCancelClick={jest.fn()} />,
|
||||
withClientContextRenderOptions(matrixClient),
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
|
||||
await user.click(screen.getByRole("button", { name: "Continue" }));
|
||||
expect(matrixClient.getCrypto()!.resetEncryption).toHaveBeenCalled();
|
||||
expect(onFinish).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,253 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<AdvancedPanel /> <EncryptionDetails /> should display a spinner when loading the device keys 1`] = `
|
||||
<div
|
||||
class="mx_EncryptionDetails"
|
||||
data-testid="encryptionDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionDetails_session"
|
||||
>
|
||||
<h3
|
||||
class="mx_EncryptionDetails_session_title"
|
||||
>
|
||||
Encryption details
|
||||
</h3>
|
||||
<div>
|
||||
<span>
|
||||
Session ID:
|
||||
</span>
|
||||
<span
|
||||
data-testid="deviceId"
|
||||
>
|
||||
ABCDEFGHI
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Session key:
|
||||
</span>
|
||||
<span
|
||||
data-testid="sessionKey"
|
||||
>
|
||||
<svg
|
||||
aria-label="Loading…"
|
||||
class="_icon_1ye7b_27"
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
style="width: 20px; height: 20px;"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M12 4.031a8 8 0 1 0 8 8 1 1 0 0 1 2 0c0 5.523-4.477 10-10 10s-10-4.477-10-10 4.477-10 10-10a1 1 0 1 1 0 2Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionDetails_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 16a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.712A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.212.117-.042.242-.063.375-.063s.258.02.375.063a.877.877 0 0 1 .325.212l3.6 3.6c.2.2.296.438.287.713a.977.977 0 0 1-.287.687c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.968.968 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
|
||||
/>
|
||||
</svg>
|
||||
Export keys
|
||||
</button>
|
||||
<button
|
||||
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
|
||||
/>
|
||||
</svg>
|
||||
Import keys
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="_button_i91xf_17 _destructive_i91xf_116"
|
||||
data-kind="tertiary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Reset cryptographic identity
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<AdvancedPanel /> <EncryptionDetails /> should display the device keys 1`] = `
|
||||
<div
|
||||
class="mx_EncryptionDetails"
|
||||
data-testid="encryptionDetails"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionDetails_session"
|
||||
>
|
||||
<h3
|
||||
class="mx_EncryptionDetails_session_title"
|
||||
>
|
||||
Encryption details
|
||||
</h3>
|
||||
<div>
|
||||
<span>
|
||||
Session ID:
|
||||
</span>
|
||||
<span
|
||||
data-testid="deviceId"
|
||||
>
|
||||
ABCDEFGHI
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>
|
||||
Session key:
|
||||
</span>
|
||||
<span
|
||||
data-testid="sessionKey"
|
||||
>
|
||||
ed25519
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="mx_EncryptionDetails_buttons"
|
||||
>
|
||||
<button
|
||||
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 16a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 15V7.85L9.125 9.725c-.2.2-.433.3-.7.3-.267 0-.508-.108-.725-.325a.93.93 0 0 1-.288-.712A.977.977 0 0 1 7.7 8.3l3.6-3.6c.1-.1.208-.17.325-.212.117-.042.242-.063.375-.063s.258.02.375.063a.877.877 0 0 1 .325.212l3.6 3.6c.2.2.296.438.287.713a.977.977 0 0 1-.287.687c-.2.2-.438.304-.713.313a.93.93 0 0 1-.712-.288L13 7.85V15c0 .283-.096.52-.287.713A.968.968 0 0 1 12 16Zm-6 4c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.968.968 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
|
||||
/>
|
||||
</svg>
|
||||
Export keys
|
||||
</button>
|
||||
<button
|
||||
class="_button_i91xf_17 _has-icon_i91xf_66"
|
||||
data-kind="secondary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
fill="currentColor"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
width="20"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 15.575c-.133 0-.258-.02-.375-.063a.877.877 0 0 1-.325-.212l-3.6-3.6a.948.948 0 0 1-.275-.7.95.95 0 0 1 .275-.7c.183-.183.42-.28.712-.288.292-.008.53.08.713.263L11 12.15V5c0-.283.096-.52.287-.713A.968.968 0 0 1 12 4c.283 0 .52.096.713.287.191.192.287.43.287.713v7.15l1.875-1.875c.183-.183.42-.27.713-.263.291.009.529.105.712.288a.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7l-3.6 3.6c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063ZM6 20c-.55 0-1.02-.196-1.412-.587A1.926 1.926 0 0 1 4 18v-2c0-.283.096-.52.287-.713A.967.967 0 0 1 5 15c.283 0 .52.096.713.287.191.192.287.43.287.713v2h12v-2a.97.97 0 0 1 .288-.713A.968.968 0 0 1 19 15a.97.97 0 0 1 .712.287c.192.192.288.43.288.713v2c0 .55-.196 1.02-.587 1.413A1.926 1.926 0 0 1 18 20H6Z"
|
||||
/>
|
||||
</svg>
|
||||
Import keys
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="_button_i91xf_17 _destructive_i91xf_116"
|
||||
data-kind="tertiary"
|
||||
data-size="sm"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Reset cryptographic identity
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`<AdvancedPanel /> <OtherSettings /> should display the blacklist of unverified devices settings 1`] = `
|
||||
<form
|
||||
class="_root_ssths_24 mx_OtherSettings"
|
||||
data-testid="otherSettings"
|
||||
>
|
||||
<h3
|
||||
class="mx_OtherSettings_title"
|
||||
>
|
||||
Other people’s devices
|
||||
</h3>
|
||||
<div
|
||||
class="_inline-field_ssths_40"
|
||||
>
|
||||
<div
|
||||
class="_inline-field-control_ssths_52"
|
||||
>
|
||||
<div
|
||||
class="_container_qnvru_18"
|
||||
>
|
||||
<input
|
||||
aria-describedby="radix-:r7:"
|
||||
checked=""
|
||||
class="_input_qnvru_32"
|
||||
id="radix-:r6:"
|
||||
name="neverSendEncrypted"
|
||||
title=""
|
||||
type="checkbox"
|
||||
/>
|
||||
<div
|
||||
class="_ui_qnvru_42"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="_inline-field-body_ssths_46"
|
||||
>
|
||||
<label
|
||||
class="_label_ssths_67"
|
||||
for="radix-:r6:"
|
||||
>
|
||||
Never send encrypted messages to unverified devices
|
||||
</label>
|
||||
<span
|
||||
class="_message_ssths_93 _help-message_ssths_99"
|
||||
id="radix-:r7:"
|
||||
>
|
||||
By default in encrypted rooms, do not send encrypted messages to anyone until you’ve verified them
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
@@ -4,6 +4,7 @@ exports[`<RecoveryPanel /> should allow to change the recovery key when everythi
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||
data-testid="recoveryPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSection_header"
|
||||
@@ -44,6 +45,7 @@ exports[`<RecoveryPanel /> should ask to enter the recovery key when secrets are
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||
data-testid="recoveryPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSection_header"
|
||||
@@ -104,6 +106,7 @@ exports[`<RecoveryPanel /> should ask to set up a recovery key when there is no
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||
data-testid="recoveryPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSection_header"
|
||||
@@ -147,6 +150,7 @@ exports[`<RecoveryPanel /> should be in loading state when checking the recovery
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsSection mx_SettingsSection_newUi"
|
||||
data-testid="recoveryPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsSection_header"
|
||||
|
||||
@@ -0,0 +1,184 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`<ResetIdentityPanel /> should reset the encryption when the continue button is clicked 1`] = `
|
||||
<DocumentFragment>
|
||||
<nav
|
||||
class="_breadcrumb_ikpbb_17"
|
||||
>
|
||||
<button
|
||||
aria-label="Back"
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ol
|
||||
class="_pages_ikpbb_26"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
class="_link_ue21z_17"
|
||||
data-kind="primary"
|
||||
data-size="small"
|
||||
rel="noreferrer noopener"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Encryption
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
aria-current="page"
|
||||
class="_last-page_ikpbb_39"
|
||||
>
|
||||
Reset encryption
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ResetIdentityPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_md016_17 _destructive_md016_43"
|
||||
data-size="large"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
>
|
||||
Are you sure you want to reset your identity?
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ResetIdentityPanel_content"
|
||||
>
|
||||
<ul
|
||||
class="_visual-list_4dcf8_17"
|
||||
>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26 _visual-list-item-icon-success_bqeu7_31"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
|
||||
/>
|
||||
</svg>
|
||||
Your account details, contacts, preferences, and chat list will be kept
|
||||
</li>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
|
||||
/>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
You will lose any message history that’s stored only on the server
|
||||
</li>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
|
||||
/>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
You will need to verify all your existing devices and contacts again
|
||||
</li>
|
||||
</ul>
|
||||
<span>
|
||||
Only do this if you believe your account has been compromised.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ResetIdentityPanel_footer"
|
||||
>
|
||||
<button
|
||||
class="_button_i91xf_17 _destructive_i91xf_116"
|
||||
data-kind="primary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
<button
|
||||
class="_button_i91xf_17"
|
||||
data-kind="tertiary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
@@ -94,4 +94,19 @@ describe("<EncryptionUserSettingsTab />", () => {
|
||||
await waitFor(() => expect(screen.getByText("Set up recovery")).toBeInTheDocument());
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("should display the reset identity panel when the user clicks on the reset cryptographic identity panel", async () => {
|
||||
const user = userEvent.setup();
|
||||
|
||||
const { asFragment } = renderComponent();
|
||||
await waitFor(() => {
|
||||
const button = screen.getByRole("button", { name: "Reset cryptographic identity" });
|
||||
expect(button).toBeInTheDocument();
|
||||
user.click(button);
|
||||
});
|
||||
await waitFor(() =>
|
||||
expect(screen.getByText("Are you sure you want to reset your identity?")).toBeInTheDocument(),
|
||||
);
|
||||
expect(asFragment()).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -81,6 +81,198 @@ exports[`<EncryptionUserSettingsTab /> should display the change recovery key pa
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<EncryptionUserSettingsTab /> should display the reset identity panel when the user clicks on the reset cryptographic identity panel 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_SettingsTab mx_EncryptionUserSettingsTab"
|
||||
data-testid="encryptionTab"
|
||||
>
|
||||
<div
|
||||
class="mx_SettingsTab_sections"
|
||||
>
|
||||
<nav
|
||||
class="_breadcrumb_ikpbb_17"
|
||||
>
|
||||
<button
|
||||
aria-label="Back"
|
||||
class="_icon-button_bh2qc_17 _subtle-bg_bh2qc_38"
|
||||
role="button"
|
||||
style="--cpd-icon-button-size: 28px;"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="_indicator-icon_133tf_26"
|
||||
style="--cpd-icon-button-size: 100%;"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="m13.3 17.3-4.6-4.6a.877.877 0 0 1-.213-.325A1.106 1.106 0 0 1 8.425 12c0-.133.02-.258.062-.375A.878.878 0 0 1 8.7 11.3l4.6-4.6a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275.948.948 0 0 1 .275.7.948.948 0 0 1-.275.7L10.8 12l3.9 3.9a.949.949 0 0 1 .275.7.948.948 0 0 1-.275.7.948.948 0 0 1-.7.275.948.948 0 0 1-.7-.275Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
<ol
|
||||
class="_pages_ikpbb_26"
|
||||
>
|
||||
<li>
|
||||
<a
|
||||
class="_link_ue21z_17"
|
||||
data-kind="primary"
|
||||
data-size="small"
|
||||
rel="noreferrer noopener"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Encryption
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
aria-current="page"
|
||||
class="_last-page_ikpbb_39"
|
||||
>
|
||||
Reset encryption
|
||||
</span>
|
||||
</li>
|
||||
</ol>
|
||||
</nav>
|
||||
<div
|
||||
class="mx_EncryptionCard mx_ResetIdentityPanel"
|
||||
>
|
||||
<div
|
||||
class="mx_EncryptionCard_header"
|
||||
>
|
||||
<div
|
||||
class="_content_md016_17 _destructive_md016_43"
|
||||
data-size="large"
|
||||
>
|
||||
<svg
|
||||
fill="currentColor"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12 17a.97.97 0 0 0 .713-.288A.968.968 0 0 0 13 16a.968.968 0 0 0-.287-.713A.968.968 0 0 0 12 15a.968.968 0 0 0-.713.287A.968.968 0 0 0 11 16c0 .283.096.52.287.712.192.192.43.288.713.288Zm0-4c.283 0 .52-.096.713-.287A.968.968 0 0 0 13 12V8a.967.967 0 0 0-.287-.713A.968.968 0 0 0 12 7a.968.968 0 0 0-.713.287A.967.967 0 0 0 11 8v4c0 .283.096.52.287.713.192.191.43.287.713.287Zm0 9a9.738 9.738 0 0 1-3.9-.788 10.099 10.099 0 0 1-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 0 1 2 12a9.74 9.74 0 0 1 .788-3.9 10.099 10.099 0 0 1 2.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0 1 12 2a9.74 9.74 0 0 1 3.9.788 10.098 10.098 0 0 1 3.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0 1 22 12a9.738 9.738 0 0 1-.788 3.9 10.098 10.098 0 0 1-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0 1 12 22Z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2
|
||||
class="_typography_yh5dq_162 _font-heading-sm-semibold_yh5dq_102"
|
||||
>
|
||||
Are you sure you want to reset your identity?
|
||||
</h2>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ResetIdentityPanel_content"
|
||||
>
|
||||
<ul
|
||||
class="_visual-list_4dcf8_17"
|
||||
>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26 _visual-list-item-icon-success_bqeu7_31"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.55 17.575c-.133 0-.258-.02-.375-.063a.876.876 0 0 1-.325-.212L4.55 13c-.183-.183-.27-.42-.263-.713.009-.291.105-.529.288-.712a.948.948 0 0 1 .7-.275.95.95 0 0 1 .7.275L9.55 15.15l8.475-8.475c.183-.183.42-.275.713-.275.291 0 .529.092.712.275.183.183.275.42.275.713 0 .291-.092.529-.275.712l-9.2 9.2c-.1.1-.208.17-.325.212a1.106 1.106 0 0 1-.375.063Z"
|
||||
/>
|
||||
</svg>
|
||||
Your account details, contacts, preferences, and chat list will be kept
|
||||
</li>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
|
||||
/>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
You will lose any message history that’s stored only on the server
|
||||
</li>
|
||||
<li
|
||||
class="_visual-list-item_bqeu7_17"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class="_visual-list-item-icon_bqeu7_26"
|
||||
fill="currentColor"
|
||||
height="24px"
|
||||
viewBox="0 0 24 24"
|
||||
width="24px"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.287 7.287A.968.968 0 0 1 12 7c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.713A.968.968 0 0 1 12 9a.968.968 0 0 1-.713-.287A.967.967 0 0 1 11 8c0-.283.096-.52.287-.713Zm0 4A.968.968 0 0 1 12 11c.283 0 .52.096.713.287.191.192.287.43.287.713v4a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 17a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 16v-4c0-.283.096-.52.287-.713Z"
|
||||
/>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10Zm-2 0a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
You will need to verify all your existing devices and contacts again
|
||||
</li>
|
||||
</ul>
|
||||
<span>
|
||||
Only do this if you believe your account has been compromised.
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="mx_ResetIdentityPanel_footer"
|
||||
>
|
||||
<button
|
||||
class="_button_i91xf_17 _destructive_i91xf_116"
|
||||
data-kind="primary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Continue
|
||||
</button>
|
||||
<button
|
||||
class="_button_i91xf_17"
|
||||
data-kind="tertiary"
|
||||
data-size="lg"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DocumentFragment>
|
||||
`;
|
||||
|
||||
exports[`<EncryptionUserSettingsTab /> should display the set up recovery key when the user clicks on the set up recovery key button 1`] = `
|
||||
<DocumentFragment>
|
||||
<div
|
||||
|
||||
Reference in New Issue
Block a user