diff --git a/playwright/e2e/crypto/dehydration.spec.ts b/playwright/e2e/crypto/dehydration.spec.ts index a0509434a40..ca6485d88e7 100644 --- a/playwright/e2e/crypto/dehydration.spec.ts +++ b/playwright/e2e/crypto/dehydration.spec.ts @@ -6,21 +6,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 { type Locator, type Page } from "@playwright/test"; - import { test, expect } from "../../element-web-test"; -import { viewRoomSummaryByName } from "../right-panel/utils"; import { isDendrite } from "../../plugins/homeserver/dendrite"; import { completeCreateSecretStorageDialog, createBot, logIntoElement } from "./utils.ts"; import { type Client } from "../../pages/client.ts"; -const ROOM_NAME = "Test room"; const NAME = "Alice"; -function getMemberTileByName(page: Page, name: string): Locator { - return page.locator(`.mx_MemberTileView, [title="${name}"]`); -} - test.use({ displayName: NAME, synapseConfig: { @@ -70,23 +62,6 @@ test.describe("Dehydration", () => { // device. const sessionsTab = await app.settings.openUserSettings("Sessions"); await expect(sessionsTab.getByText("Dehydrated device")).not.toBeVisible(); - - await app.settings.closeDialog(); - - // now check that the user info right-panel shows the dehydrated device - // as a feature rather than as a normal device - await app.client.createRoom({ name: ROOM_NAME }); - - await viewRoomSummaryByName(page, app, ROOM_NAME); - - await page.locator(".mx_RightPanel").getByRole("menuitem", { name: "People" }).click(); - await expect(page.locator(".mx_MemberListView")).toBeVisible(); - - await getMemberTileByName(page, NAME).click(); - await page.locator(".mx_UserInfo_devices .mx_UserInfo_expand").click(); - - await expect(page.locator(".mx_UserInfo_devices").getByText("Offline device enabled")).toBeVisible(); - await expect(page.locator(".mx_UserInfo_devices").getByText("Dehydrated device")).not.toBeVisible(); }); test("Reset recovery key during login re-creates dehydrated device", async ({ diff --git a/playwright/e2e/crypto/event-shields.spec.ts b/playwright/e2e/crypto/event-shields.spec.ts index 6c33554a947..7ac0df28ecb 100644 --- a/playwright/e2e/crypto/event-shields.spec.ts +++ b/playwright/e2e/crypto/event-shields.spec.ts @@ -17,6 +17,7 @@ import { logIntoElement, logOutOfElement, verify, + waitForDevices, } from "./utils"; import { bootstrapCrossSigningForClient } from "../../pages/client.ts"; import { type ElementAppPage } from "../../pages/ElementAppPage.ts"; @@ -144,25 +145,8 @@ test.describe("Cryptography", function () { // bob deletes his second device await bobSecondDevice.evaluate((cli) => cli.logout(true)); - // wait for the logout to propagate. Workaround for https://github.com/vector-im/element-web/issues/26263 by repeatedly closing and reopening Bob's user info. - async function awaitOneDevice(iterations = 1) { - const rightPanel = page.locator(".mx_RightPanel"); - await rightPanel.getByTestId("base-card-back-button").click(); - await rightPanel.getByText("Bob").click(); - const sessionCountText = await rightPanel - .locator(".mx_UserInfo_devices") - .getByText(" session", { exact: false }) - .textContent(); - // cf https://github.com/vector-im/element-web/issues/26279: Element-R uses the wrong text here - if (sessionCountText != "1 session" && sessionCountText != "1 verified session") { - if (iterations >= 10) { - throw new Error(`Bob still has ${sessionCountText} after 10 iterations`); - } - await awaitOneDevice(iterations + 1); - } - } - - await awaitOneDevice(); + // wait for the logout to propagate. + await waitForDevices(app, bob.credentials.userId, 1); // close and reopen the room, to get the shield to update. await app.viewRoomByName("Bob"); @@ -285,11 +269,7 @@ test.describe("Cryptography", function () { // Workaround for https://github.com/element-hq/element-web/issues/28640: // make sure that Alice has seen Bob's identity before she goes offline. We do this by opening // his user info. - await app.toggleRoomInfoPanel(); - const rightPanel = page.locator(".mx_RightPanel"); - await rightPanel.getByRole("menuitem", { name: "People" }).click(); - await rightPanel.getByRole("button", { name: bob.credentials!.userId }).click(); - await expect(rightPanel.locator(".mx_UserInfo_devices")).toContainText("1 session"); + await waitForDevices(app, bob.credentials.userId, 1); // Our app is blocked from syncing while Bob sends his messages. await app.client.network.goOffline(); diff --git a/playwright/e2e/crypto/user-verification.spec.ts b/playwright/e2e/crypto/user-verification.spec.ts index 46bdefb8fb5..ebe86c0a6e0 100644 --- a/playwright/e2e/crypto/user-verification.spec.ts +++ b/playwright/e2e/crypto/user-verification.spec.ts @@ -8,9 +8,8 @@ Please see LICENSE files in the repository root for full details. import { type Preset, type Visibility } from "matrix-js-sdk/src/matrix"; -import type { Page } from "@playwright/test"; import { test, expect } from "../../element-web-test"; -import { doTwoWaySasVerification, awaitVerifier } from "./utils"; +import { doTwoWaySasVerification, awaitVerifier, waitForDevices } from "./utils"; import { type Client } from "../../pages/client"; test.describe("User verification", () => { @@ -33,13 +32,17 @@ test.describe("User verification", () => { }); test("can receive a verification request when there is no existing DM", async ({ + app, page, bot: bob, user: aliceCredentials, toasts, room: { roomId: dmRoomId }, }) => { - await waitForDeviceKeys(page); + await waitForDevices(app, bob.credentials.userId, 1); + await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible(); + const avatar = page.getByRole("button", { name: "Avatar" }); + await avatar.click(); // once Alice has joined, Bob starts the verification const bobVerificationRequest = await bob.evaluateHandle( @@ -84,13 +87,17 @@ test.describe("User verification", () => { }); test("can abort emoji verification when emoji mismatch", async ({ + app, page, bot: bob, user: aliceCredentials, toasts, room: { roomId: dmRoomId }, }) => { - await waitForDeviceKeys(page); + await waitForDevices(app, bob.credentials.userId, 1); + await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible(); + const avatar = page.getByRole("button", { name: "Avatar" }); + await avatar.click(); // once Alice has joined, Bob starts the verification const bobVerificationRequest = await bob.evaluateHandle( @@ -154,15 +161,3 @@ async function createDMRoom(client: Client, userId: string): Promise { ], }); } - -/** - * Wait until we get the other user's device keys. - * In newer rust-crypto versions, the verification request will be ignored if we - * don't have the sender's device keys. - */ -async function waitForDeviceKeys(page: Page): Promise { - await expect(page.getByRole("button", { name: "Avatar" })).toBeVisible(); - const avatar = await page.getByRole("button", { name: "Avatar" }); - await avatar.click(); - await expect(page.getByText("1 session")).toBeVisible(); -} diff --git a/playwright/e2e/crypto/utils.ts b/playwright/e2e/crypto/utils.ts index ccdb320b94f..da2d00e9060 100644 --- a/playwright/e2e/crypto/utils.ts +++ b/playwright/e2e/crypto/utils.ts @@ -499,3 +499,31 @@ export async function deleteCachedSecrets(page: Page) { }); await page.reload(); } + +/** + * Wait until the given user has a given number of devices. + * This function will check the device keys ten times and if + * the expected number of devices were not found by then, an + * error is thrown. + */ +export async function waitForDevices( + app: ElementAppPage, + userId: string, + expectedNumberOfDevices: number, +): Promise { + const result = await app.client.evaluate( + async (cli, { userId, expectedNumberOfDevices }) => { + for (let i = 0; i < 10; ++i) { + const userDeviceMap = await cli.getCrypto()?.getUserDeviceInfo([userId], true); + const deviceMap = userDeviceMap?.get(userId); + if (deviceMap.size === expectedNumberOfDevices) return true; + await new Promise((r) => setTimeout(r, 500)); + } + return false; + }, + { userId, expectedNumberOfDevices }, + ); + if (!result) { + throw new Error(`User ${userId} did not have ${expectedNumberOfDevices} devices within ten iterations!`); + } +} diff --git a/playwright/e2e/user-view/user-view.spec.ts b/playwright/e2e/user-view/user-view.spec.ts index f3745e78595..de97133e6a0 100644 --- a/playwright/e2e/user-view/user-view.spec.ts +++ b/playwright/e2e/user-view/user-view.spec.ts @@ -19,7 +19,6 @@ test.describe("UserView", () => { const rightPanel = page.locator("#mx_RightPanel"); await expect(rightPanel.getByRole("heading", { name: bot.credentials.displayName, exact: true })).toBeVisible(); - await expect(rightPanel.getByText("1 session")).toBeVisible(); await expect(rightPanel).toMatchScreenshot("user-info.png", { mask: [page.locator(".mx_UserInfo_profile_mxid")], css: ` diff --git a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png index 4e305879350..bd474845962 100644 Binary files a/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png and b/playwright/snapshots/user-view/user-view.spec.ts/user-info-linux.png differ diff --git a/res/css/views/right_panel/_UserInfo.pcss b/res/css/views/right_panel/_UserInfo.pcss index 7a67986ae83..a8e9ff70a4c 100644 --- a/res/css/views/right_panel/_UserInfo.pcss +++ b/res/css/views/right_panel/_UserInfo.pcss @@ -37,10 +37,6 @@ Please see LICENSE files in the repository root for full details. padding: var(--cpd-space-2x) 0 var(--cpd-space-4x); margin: 0 var(--cpd-space-4x); - .mx_UserInfo_container_verifyButton { - margin-top: $spacing-8; - } - & + .mx_UserInfo_container { border-top: 1px solid $separator; } @@ -180,6 +176,28 @@ Please see LICENSE files in the repository root for full details. opacity: 1; } + .mx_UserInfo_verification { + margin-top: var(--cpd-space-4x); + height: 36px; + + .mx_UserInfo_verified_badge { + width: 68px; + height: 20px; + + .mx_UserInfo_verified_icon { + flex-shrink: 0; + } + + .mx_UserInfo_verified_label { + margin: 0; + } + } + + .mx_UserInfo_verification_unavailable { + color: var(--cpd-color-text-secondary); + } + } + .mx_UserInfo_memberDetails { .mx_UserInfo_profileField { display: flex; diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index e7ae5761502..b114f71985a 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -25,7 +25,8 @@ import { import { KnownMembership } from "matrix-js-sdk/src/types"; import { type UserVerificationStatus, type VerificationRequest, CryptoEvent } from "matrix-js-sdk/src/crypto-api"; import { logger } from "matrix-js-sdk/src/logger"; -import { Heading, MenuItem, Text, Tooltip } from "@vector-im/compound-web"; +import { Badge, Button, Heading, InlineSpinner, MenuItem, Text, Tooltip } from "@vector-im/compound-web"; +import VerifiedIcon from "@vector-im/compound-design-tokens/assets/web/icons/verified"; import ChatIcon from "@vector-im/compound-design-tokens/assets/web/icons/chat"; import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check"; import ShareIcon from "@vector-im/compound-design-tokens/assets/web/icons/share"; @@ -45,7 +46,6 @@ import DMRoomMap from "../../../utils/DMRoomMap"; import AccessibleButton, { type ButtonEvent } from "../elements/AccessibleButton"; import SdkConfig from "../../../SdkConfig"; import MultiInviter from "../../../utils/MultiInviter"; -import E2EIcon from "../rooms/E2EIcon"; import { useTypedEventEmitter } from "../../../hooks/useEventEmitter"; import { textualPowerLevel } from "../../../Roles"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; @@ -56,7 +56,6 @@ import { verifyDevice, verifyUser } from "../../../verification"; import { Action } from "../../../dispatcher/actions"; import { useIsEncrypted } from "../../../hooks/useIsEncrypted"; import BaseCard from "./BaseCard"; -import { E2EStatus } from "../../../utils/ShieldUtils"; import ImageView from "../elements/ImageView"; import Spinner from "../elements/Spinner"; import PowerSelector from "../elements/PowerSelector"; @@ -81,7 +80,6 @@ import PosthogTrackers from "../../../PosthogTrackers"; import { type ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload"; import { DirectoryMember, startDmOnFirstMessage } from "../../../utils/direct-messages"; import { SdkContextClass } from "../../../contexts/SDKContext"; -import { asyncSome } from "../../../utils/arrays"; import { Flex } from "../../utils/Flex"; import CopyableText from "../elements/CopyableText"; import { useUserTimezone } from "../../../hooks/useUserTimezone"; @@ -107,32 +105,6 @@ export const disambiguateDevices = (devices: IDevice[]): void => { } }; -export const getE2EStatus = async ( - cli: MatrixClient, - userId: string, - devices: IDevice[], -): Promise => { - const crypto = cli.getCrypto(); - if (!crypto) return undefined; - const isMe = userId === cli.getUserId(); - const userTrust = await crypto.getUserVerificationStatus(userId); - if (!userTrust.isCrossSigningVerified()) { - return userTrust.wasCrossSigningVerified() ? E2EStatus.Warning : E2EStatus.Normal; - } - - const anyDeviceUnverified = await asyncSome(devices, async (device) => { - const { deviceId } = device; - // For your own devices, we use the stricter check of cross-signing - // verification to encourage everyone to trust their own devices via - // cross-signing so that other users can then safely trust you. - // For other people's devices, the more general verified check that - // includes locally verified devices can be used. - const deviceTrust = await crypto.getDeviceVerificationStatus(userId, deviceId); - return isMe ? !deviceTrust?.crossSigningVerified : !deviceTrust?.isVerified(); - }); - return anyDeviceUnverified ? E2EStatus.Warning : E2EStatus.Verified; -}; - /** * Converts the member to a DirectoryMember and starts a DM with them. */ @@ -146,27 +118,6 @@ async function openDmForUser(matrixClient: MatrixClient, user: Member): Promise< await startDmOnFirstMessage(matrixClient, [startDmUser]); } -type SetUpdating = (updating: boolean) => void; - -function useHasCrossSigningKeys( - cli: MatrixClient, - member: User, - canVerify: boolean, - setUpdating: SetUpdating, -): boolean | undefined { - return useAsyncMemo(async () => { - if (!canVerify) { - return undefined; - } - setUpdating(true); - try { - return await cli.getCrypto()?.userHasCrossSigningKeys(member.userId, true); - } finally { - setUpdating(false); - } - }, [cli, member, canVerify]); -} - /** * Display one device and the related actions * @param userId current user id @@ -253,144 +204,6 @@ export function DeviceItem({ } } -/** - * Display a list of devices - * @param devices devices to display - * @param userId current user id - * @param loading displays a spinner instead of the device section - * @param isUserVerified is false when - * - the user is not verified, or - * - `MatrixClient.getCrypto.getUserVerificationStatus` async call is in progress (in which case `loading` will also be `true`) - * @constructor - */ -function DevicesSection({ - devices, - userId, - loading, - isUserVerified, -}: { - devices: IDevice[]; - userId: string; - loading: boolean; - isUserVerified: boolean; -}): JSX.Element { - const cli = useContext(MatrixClientContext); - - const [isExpanded, setExpanded] = useState(false); - - const deviceTrusts = useAsyncMemo(() => { - const cryptoApi = cli.getCrypto(); - if (!cryptoApi) return Promise.resolve(undefined); - return Promise.all(devices.map((d) => cryptoApi.getDeviceVerificationStatus(userId, d.deviceId))); - }, [cli, userId, devices]); - - if (loading || deviceTrusts === undefined) { - // still loading - return ; - } - const isMe = userId === cli.getUserId(); - - let expandSectionDevices: IDevice[] = []; - const unverifiedDevices: IDevice[] = []; - - let expandCountCaption; - let expandHideCaption; - let expandIconClasses = "mx_E2EIcon"; - - const dehydratedDeviceIds: string[] = []; - for (const device of devices) { - if (device.dehydrated) { - dehydratedDeviceIds.push(device.deviceId); - } - } - // If the user has exactly one device marked as dehydrated, we consider - // that as the dehydrated device, and hide it as a normal device (but - // indicate that the user is using a dehydrated device). If the user has - // more than one, that is anomalous, and we show all the devices so that - // nothing is hidden. - const dehydratedDeviceId: string | undefined = dehydratedDeviceIds.length == 1 ? dehydratedDeviceIds[0] : undefined; - let dehydratedDeviceInExpandSection = false; - - if (isUserVerified) { - for (let i = 0; i < devices.length; ++i) { - const device = devices[i]; - const deviceTrust = deviceTrusts[i]; - // For your own devices, we use the stricter check of cross-signing - // verification to encourage everyone to trust their own devices via - // cross-signing so that other users can then safely trust you. - // For other people's devices, the more general verified check that - // includes locally verified devices can be used. - const isVerified = deviceTrust && (isMe ? deviceTrust.crossSigningVerified : deviceTrust.isVerified()); - - if (isVerified) { - // don't show dehydrated device as a normal device, if it's - // verified - if (device.deviceId === dehydratedDeviceId) { - dehydratedDeviceInExpandSection = true; - } else { - expandSectionDevices.push(device); - } - } else { - unverifiedDevices.push(device); - } - } - expandCountCaption = _t("user_info|count_of_verified_sessions", { count: expandSectionDevices.length }); - expandHideCaption = _t("user_info|hide_verified_sessions"); - expandIconClasses += " mx_E2EIcon_verified"; - } else { - if (dehydratedDeviceId) { - devices = devices.filter((device) => device.deviceId !== dehydratedDeviceId); - dehydratedDeviceInExpandSection = true; - } - expandSectionDevices = devices; - expandCountCaption = _t("user_info|count_of_sessions", { count: devices.length }); - expandHideCaption = _t("user_info|hide_sessions"); - expandIconClasses += " mx_E2EIcon_normal"; - } - - let expandButton; - if (expandSectionDevices.length) { - if (isExpanded) { - expandButton = ( - setExpanded(false)}> -
{expandHideCaption}
- - ); - } else { - expandButton = ( - setExpanded(true)}> -
-
{expandCountCaption}
- - ); - } - } - - let deviceList = unverifiedDevices.map((device, i) => { - return ; - }); - if (isExpanded) { - const keyStart = unverifiedDevices.length; - deviceList = deviceList.concat( - expandSectionDevices.map((device, i) => { - return ( - - ); - }), - ); - if (dehydratedDeviceInExpandSection) { - deviceList.push(
{_t("user_info|dehydrated_device_enabled")}
); - } - } - - return ( -
-
{deviceList}
-
{expandButton}
-
- ); -} - const MessageButton = ({ member }: { member: Member }): JSX.Element => { const cli = useContext(MatrixClientContext); const [busy, setBusy] = useState(false); @@ -1400,12 +1213,84 @@ export const useDevices = (userId: string): IDevice[] | undefined | null => { return devices; }; +function useHasCrossSigningKeys(cli: MatrixClient, member: User, canVerify: boolean): boolean | undefined { + return useAsyncMemo(async () => { + if (!canVerify) return undefined; + return await cli.getCrypto()?.userHasCrossSigningKeys(member.userId, true); + }, [cli, member, canVerify]); +} + +const VerificationSection: React.FC<{ + member: User | RoomMember; + devices: IDevice[]; +}> = ({ member, devices }) => { + const cli = useContext(MatrixClientContext); + let content; + const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli); + + const userTrust = useAsyncMemo( + async () => cli.getCrypto()?.getUserVerificationStatus(member.userId), + [member.userId], + // the user verification status is not initialized + undefined, + ); + const hasUserVerificationStatus = Boolean(userTrust); + const isUserVerified = Boolean(userTrust?.isVerified()); + const isMe = member.userId === cli.getUserId(); + const canVerify = + hasUserVerificationStatus && + homeserverSupportsCrossSigning && + !isUserVerified && + !isMe && + devices && + devices.length > 0; + + const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify); + + if (isUserVerified) { + content = ( + + + + {_t("common|verified")} + + + ); + } else if (hasCrossSigningKeys === undefined) { + // We are still fetching the cross-signing keys for the user, show spinner. + content = ; + } else if (canVerify && hasCrossSigningKeys) { + content = ( +
+ +
+ ); + } else { + content = ( + + ({_t("user_info|verification_unavailable")}) + + ); + } + + return ( + + {content} + + ); +}; + const BasicUserInfo: React.FC<{ room: Room; member: User | RoomMember; - devices: IDevice[]; - isRoomEncrypted: boolean; -}> = ({ room, member, devices, isRoomEncrypted }) => { +}> = ({ room, member }) => { const cli = useContext(MatrixClientContext); const powerLevels = useRoomPowerLevels(cli, room); @@ -1503,111 +1388,10 @@ const BasicUserInfo: React.FC<{ spinner = ; } - // only display the devices list if our client supports E2E - const cryptoEnabled = Boolean(cli.getCrypto()); - - let text; - if (!isRoomEncrypted) { - if (!cryptoEnabled) { - text = _t("encryption|unsupported"); - } else if (room && !room.isSpaceRoom()) { - text = _t("user_info|room_unencrypted"); - } - } else if (!room.isSpaceRoom()) { - text = _t("user_info|room_encrypted"); - } - - let verifyButton; - const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli); - - const userTrust = useAsyncMemo( - async () => cli.getCrypto()?.getUserVerificationStatus(member.userId), - [member.userId], - // the user verification status is not initialized - undefined, - ); - const hasUserVerificationStatus = Boolean(userTrust); - const isUserVerified = Boolean(userTrust?.isVerified()); const isMe = member.userId === cli.getUserId(); - const canVerify = - hasUserVerificationStatus && - homeserverSupportsCrossSigning && - !isUserVerified && - !isMe && - devices && - devices.length > 0; - - const setUpdating: SetUpdating = (updating) => { - setPendingUpdateCount((count) => count + (updating ? 1 : -1)); - }; - const hasCrossSigningKeys = useHasCrossSigningKeys(cli, member as User, canVerify, setUpdating); - - // Display the spinner only when - // - the devices are not populated yet, or - // - the crypto is available and we don't have the user verification status yet - const showDeviceListSpinner = (cryptoEnabled && !hasUserVerificationStatus) || devices === undefined; - if (canVerify) { - if (hasCrossSigningKeys !== undefined) { - // Note: mx_UserInfo_verifyButton is for the end-to-end tests - verifyButton = ( -
- verifyUser(cli, member as User)} - > - {_t("action|verify")} - -
- ); - } else if (!showDeviceListSpinner) { - // HACK: only show a spinner if the device section spinner is not shown, - // to avoid showing a double spinner - // We should ask for a design that includes all the different loading states here - verifyButton = ; - } - } - - let editDevices; - if (member.userId == cli.getUserId()) { - editDevices = ( -
- { - dis.dispatch({ - action: Action.ViewUserDeviceSettings, - }); - }} - > - {_t("user_info|edit_own_devices")} - -
- ); - } - - const securitySection = ( - -

{_t("common|security")}

-

{text}

- {verifyButton} - {cryptoEnabled && ( - - )} - {editDevices} - - ); return ( - {securitySection} - {memberDetails} - {adminToolsContainer} - {!isMe && ( )} - {spinner} ); @@ -1633,9 +1414,10 @@ export type Member = User | RoomMember; export const UserInfoHeader: React.FC<{ member: Member; - e2eStatus?: E2EStatus; + devices: IDevice[]; roomId?: string; -}> = ({ member, e2eStatus, roomId }) => { + hideVerificationSection?: boolean; +}> = ({ member, devices, roomId, hideVerificationSection }) => { const cli = useContext(MatrixClientContext); const onMemberAvatarClick = useCallback(() => { @@ -1686,7 +1468,6 @@ export const UserInfoHeader: React.FC<{ const timezoneInfo = useUserTimezone(cli, member.userId); - const e2eIcon = e2eStatus ? : null; const userIdentifier = UserIdentifierCustomisations.getDisplayUserIdentifier?.(member.userId, { roomId, withDisplayName: true, @@ -1715,7 +1496,6 @@ export const UserInfoHeader: React.FC<{ {displayName} - {e2eIcon} {presenceLabel} @@ -1734,6 +1514,7 @@ export const UserInfoHeader: React.FC<{ + {!hideVerificationSection && } ); @@ -1757,13 +1538,6 @@ const UserInfo: React.FC = ({ user, room, onClose, phase = RightPanelPha const isRoomEncrypted = useIsEncrypted(cli, room); const devices = useDevices(user.userId) ?? []; - const e2eStatus = useAsyncMemo(async () => { - if (!isRoomEncrypted || !devices) { - return undefined; - } - return await getE2EStatus(cli, user.userId, devices); - }, [cli, isRoomEncrypted, user.userId, devices]); - const classes = ["mx_UserInfo"]; let cardState: IRightPanelCardState = {}; @@ -1779,14 +1553,7 @@ const UserInfo: React.FC = ({ user, room, onClose, phase = RightPanelPha let content: JSX.Element | undefined; switch (phase) { case RightPanelPhases.MemberInfo: - content = ( - - ); + content = ; break; case RightPanelPhases.EncryptionPanel: classes.push("mx_UserInfo_smallAvatar"); @@ -1811,7 +1578,12 @@ const UserInfo: React.FC = ({ user, room, onClose, phase = RightPanelPha const header = ( <> - + ); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 3896d05e885..a29fdba17b6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -548,7 +548,6 @@ "saved": "Saved", "saving": "Saving…", "secure_backup": "Secure Backup", - "security": "Security", "select_all": "Select all", "server": "Server", "settings": "Settings", @@ -971,7 +970,6 @@ "title": "Not Trusted" }, "unable_to_setup_keys_error": "Unable to set up keys", - "unsupported": "This client does not support end-to-end encryption.", "verification": { "accepting": "Accepting…", "after_new_login": { @@ -3786,18 +3784,9 @@ "ban_room_confirm_title": "Ban from %(roomName)s", "ban_space_everything": "Ban them from everything I'm able to", "ban_space_specific": "Ban them from specific things I'm able to", - "count_of_sessions": { - "one": "%(count)s session", - "other": "%(count)s sessions" - }, - "count_of_verified_sessions": { - "one": "1 verified session", - "other": "%(count)s verified sessions" - }, "deactivate_confirm_action": "Deactivate user", "deactivate_confirm_description": "Deactivating this user will log them out and prevent them from logging back in. Additionally, they will leave all the rooms they are in. This action cannot be reversed. Are you sure you want to deactivate this user?", "deactivate_confirm_title": "Deactivate user?", - "dehydrated_device_enabled": "Offline device enabled", "demote_button": "Demote", "demote_self_confirm_description_space": "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the space it will be impossible to regain privileges.", "demote_self_confirm_room": "You will not be able to undo this change as you are demoting yourself, if you are the last privileged user in the room it will be impossible to regain privileges.", @@ -3805,15 +3794,12 @@ "disinvite_button_room": "Disinvite from room", "disinvite_button_room_name": "Disinvite from %(roomName)s", "disinvite_button_space": "Disinvite from space", - "edit_own_devices": "Edit devices", "error_ban_user": "Failed to ban user", "error_deactivate": "Failed to deactivate user", "error_kicking_user": "Failed to remove user", "error_mute_user": "Failed to mute user", "error_revoke_3pid_invite_description": "Could not revoke the invite. The server may be experiencing a temporary problem or you do not have sufficient permissions to revoke the invite.", "error_revoke_3pid_invite_title": "Failed to revoke invite", - "hide_sessions": "Hide sessions", - "hide_verified_sessions": "Hide verified sessions", "ignore_button": "Ignore", "ignore_confirm_description": "All messages and invites from this user will be hidden. Are you sure you want to ignore them?", "ignore_confirm_title": "Ignore %(user)s", @@ -3857,6 +3843,7 @@ "unban_space_specific": "Unban them from specific things I'm able to", "unban_space_warning": "They won't be able to access whatever you're not an admin of.", "unignore_button": "Unignore", + "verification_unavailable": "User verification unavailable", "verify_button": "Verify User", "verify_explainer": "For extra security, verify this user by checking a one-time code on both of your devices." }, diff --git a/test/unit-tests/components/structures/TabbedView-test.tsx b/test/unit-tests/components/structures/TabbedView-test.tsx index e966601a60b..38349e288a5 100644 --- a/test/unit-tests/components/structures/TabbedView-test.tsx +++ b/test/unit-tests/components/structures/TabbedView-test.tsx @@ -16,15 +16,15 @@ import { _t } from "../../../../src/languageHandler"; describe("", () => { const generalTab = new Tab("GENERAL", "common|general", "general",
general
); const labsTab = new Tab("LABS", "common|labs", "labs",
labs
); - const securityTab = new Tab("SECURITY", "common|security", "security",
security
); + const appearanceTab = new Tab("APPEARANCE", "common|appearance", "appearance",
appearance
); const defaultProps = { tabLocation: TabLocation.LEFT, - tabs: [generalTab, labsTab, securityTab] as NonEmptyArray>, + tabs: [generalTab, labsTab, appearanceTab] as NonEmptyArray>, onChange: () => {}, }; const getComponent = ( props: { - activeTabId: "GENERAL" | "LABS" | "SECURITY"; + activeTabId: "GENERAL" | "LABS" | "APPEARANCE"; onChange?: () => any; tabs?: NonEmptyArray>; } = { @@ -44,9 +44,9 @@ describe("", () => { }); it("renders activeTabId tab as active when valid", () => { - const { container } = render(getComponent({ activeTabId: securityTab.id })); - expect(getActiveTab(container)?.textContent).toEqual(_t(securityTab.label)); - expect(getActiveTabBody(container)?.textContent).toEqual("security"); + const { container } = render(getComponent({ activeTabId: appearanceTab.id })); + expect(getActiveTab(container)?.textContent).toEqual(_t(appearanceTab.label)); + expect(getActiveTabBody(container)?.textContent).toEqual("appearance"); }); it("calls onchange on on tab click", () => { @@ -54,10 +54,10 @@ describe("", () => { const { getByTestId } = render(getComponent({ activeTabId: "GENERAL", onChange })); act(() => { - fireEvent.click(getByTestId(getTabTestId(securityTab))); + fireEvent.click(getByTestId(getTabTestId(appearanceTab))); }); - expect(onChange).toHaveBeenCalledWith(securityTab.id); + expect(onChange).toHaveBeenCalledWith(appearanceTab.id); }); it("keeps same tab active when order of tabs changes", () => { @@ -66,7 +66,7 @@ describe("", () => { expect(getActiveTab(container)?.textContent).toEqual(_t(labsTab.label)); - rerender(getComponent({ tabs: [labsTab, generalTab, securityTab], activeTabId: labsTab.id })); + rerender(getComponent({ tabs: [labsTab, generalTab, appearanceTab], activeTabId: labsTab.id })); // labs tab still active expect(getActiveTab(container)?.textContent).toEqual(_t(labsTab.label)); diff --git a/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap index fc2b259aaa6..540cfd233a5 100644 --- a/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/TabbedView-test.tsx.snap @@ -47,21 +47,21 @@ exports[` renders tabs 1`] = ` diff --git a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx index de0c0c39a64..79b07b61afe 100644 --- a/test/unit-tests/components/views/right_panel/UserInfo-test.tsx +++ b/test/unit-tests/components/views/right_panel/UserInfo-test.tsx @@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details. */ import React from "react"; -import { fireEvent, render, screen, cleanup, act, within, waitForElementToBeRemoved } from "jest-matrix-react"; +import { fireEvent, render, screen, cleanup, act, waitForElementToBeRemoved, waitFor } from "jest-matrix-react"; import userEvent from "@testing-library/user-event"; import { type Mocked, mocked } from "jest-mock"; import { @@ -50,7 +50,6 @@ import MatrixClientContext from "../../../../../src/contexts/MatrixClientContext import MultiInviter from "../../../../../src/utils/MultiInviter"; import * as mockVerification from "../../../../../src/verification"; import Modal from "../../../../../src/Modal"; -import { E2EStatus } from "../../../../../src/utils/ShieldUtils"; import { DirectoryMember, startDmOnFirstMessage } from "../../../../../src/utils/direct-messages"; import { clearAllModals, flushPromises } from "../../../../test-utils"; import ErrorDialog from "../../../../../src/components/views/dialogs/ErrorDialog"; @@ -445,20 +444,6 @@ describe("", () => { mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); }); - it("renders a device list which can be expanded", async () => { - renderComponent(); - await flushPromises(); - - // check the button exists with the expected text - const devicesButton = screen.getByRole("button", { name: "1 session" }); - - // click it - await userEvent.click(devicesButton); - - // there should now be a button with the device id which should contain the device name - expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument(); - }); - it("renders ", async () => { mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(false, false, false)); @@ -468,190 +453,9 @@ describe("", () => { room: mockRoom, }); await flushPromises(); - - await expect(screen.findByRole("button", { name: "Verify" })).resolves.toBeInTheDocument(); expect(container).toMatchSnapshot(); }); - describe("device dehydration", () => { - it("hides a verified dehydrated device (unverified user)", async () => { - const device1 = new Device({ - deviceId: "d1", - userId: defaultUserId, - displayName: "my device", - algorithms: [], - keys: new Map(), - }); - const device2 = new Device({ - deviceId: "d2", - userId: defaultUserId, - displayName: "dehydrated device", - algorithms: [], - keys: new Map(), - dehydrated: true, - }); - const devicesMap = new Map([ - [device1.deviceId, device1], - [device2.deviceId, device2], - ]); - const userDeviceMap = new Map>([[defaultUserId, devicesMap]]); - mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); - - renderComponent({ room: mockRoom }); - await flushPromises(); - - // check the button exists with the expected text (the dehydrated device shouldn't be counted) - const devicesButton = screen.getByRole("button", { name: "1 session" }); - - // click it - await act(() => { - return userEvent.click(devicesButton); - }); - - // there should now be a button with the non-dehydrated device ID - expect(screen.getByRole("button", { name: "my device" })).toBeInTheDocument(); - - // but not for the dehydrated device ID - expect(screen.queryByRole("button", { name: "dehydrated device" })).not.toBeInTheDocument(); - - // there should be a line saying that the user has "Offline device" enabled - expect(screen.getByText("Offline device enabled")).toBeInTheDocument(); - }); - - it("hides a verified dehydrated device (verified user)", async () => { - const device1 = new Device({ - deviceId: "d1", - userId: defaultUserId, - displayName: "my device", - algorithms: [], - keys: new Map(), - }); - const device2 = new Device({ - deviceId: "d2", - userId: defaultUserId, - displayName: "dehydrated device", - algorithms: [], - keys: new Map(), - dehydrated: true, - }); - const devicesMap = new Map([ - [device1.deviceId, device1], - [device2.deviceId, device2], - ]); - const userDeviceMap = new Map>([[defaultUserId, devicesMap]]); - mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); - mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, true, true)); - mockCrypto.getDeviceVerificationStatus.mockResolvedValue({ - isVerified: () => true, - } as DeviceVerificationStatus); - - renderComponent({ room: mockRoom }); - await flushPromises(); - - // check the button exists with the expected text (the dehydrated device shouldn't be counted) - const devicesButton = screen.getByRole("button", { name: "1 verified session" }); - - // click it - await act(() => { - return userEvent.click(devicesButton); - }); - - // there should now be a button with the non-dehydrated device ID - expect(screen.getByTitle("d1")).toBeInTheDocument(); - - // but not for the dehydrated device ID - expect(screen.queryByTitle("d2")).not.toBeInTheDocument(); - - // there should be a line saying that the user has "Offline device" enabled - expect(screen.getByText("Offline device enabled")).toBeInTheDocument(); - }); - - it("shows an unverified dehydrated device", async () => { - const device1 = new Device({ - deviceId: "d1", - userId: defaultUserId, - displayName: "my device", - algorithms: [], - keys: new Map(), - }); - const device2 = new Device({ - deviceId: "d2", - userId: defaultUserId, - displayName: "dehydrated device", - algorithms: [], - keys: new Map(), - dehydrated: true, - }); - const devicesMap = new Map([ - [device1.deviceId, device1], - [device2.deviceId, device2], - ]); - const userDeviceMap = new Map>([[defaultUserId, devicesMap]]); - mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); - mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, true, true)); - - renderComponent({ room: mockRoom }); - await flushPromises(); - - // the dehydrated device should be shown as an unverified device, which means - // there should now be a button with the device id ... - const deviceButton = screen.getByRole("button", { name: "dehydrated device" }); - - // ... which should contain the device name - expect(within(deviceButton).getByText("dehydrated device")).toBeInTheDocument(); - }); - - it("shows dehydrated devices if there is more than one", async () => { - const device1 = new Device({ - deviceId: "d1", - userId: defaultUserId, - displayName: "dehydrated device 1", - algorithms: [], - keys: new Map(), - dehydrated: true, - }); - const device2 = new Device({ - deviceId: "d2", - userId: defaultUserId, - displayName: "dehydrated device 2", - algorithms: [], - keys: new Map(), - dehydrated: true, - }); - const devicesMap = new Map([ - [device1.deviceId, device1], - [device2.deviceId, device2], - ]); - const userDeviceMap = new Map>([[defaultUserId, devicesMap]]); - mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); - - renderComponent({ room: mockRoom }); - await flushPromises(); - - // check the button exists with the expected text (the dehydrated device shouldn't be counted) - const devicesButton = screen.getByRole("button", { name: "2 sessions" }); - - // click it - await act(() => { - return userEvent.click(devicesButton); - }); - - // the dehydrated devices should be shown as an unverified device, which means - // there should now be a button with the first dehydrated device... - const device1Button = screen.getByRole("button", { name: "dehydrated device 1" }); - expect(device1Button).toBeVisible(); - - // ... which should contain the device name - expect(within(device1Button).getByText("dehydrated device 1")).toBeInTheDocument(); - // and a button with the second dehydrated device... - const device2Button = screen.getByRole("button", { name: "dehydrated device 2" }); - expect(device2Button).toBeVisible(); - - // ... which should contain the device name - expect(within(device2Button).getByText("dehydrated device 2")).toBeInTheDocument(); - }); - }); - it("should render a deactivate button for users of the same server if we are a server admin", async () => { mockClient.isSynapseAdministrator.mockResolvedValue(true); mockClient.getDomain.mockReturnValue("example.com"); @@ -668,34 +472,6 @@ describe("", () => { expect(container).toMatchSnapshot(); }); }); - - describe("with an encrypted room", () => { - beforeEach(() => { - jest.spyOn(mockClient.getCrypto()!, "isEncryptionEnabledInRoom").mockResolvedValue(true); - }); - - it("renders unverified user info", async () => { - mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(false, false, false)); - renderComponent({ room: mockRoom }); - await flushPromises(); - - const userHeading = screen.getByRole("heading", { name: /@user:example.com/ }); - - // there should be a "normal" E2E padlock - expect(userHeading.getElementsByClassName("mx_E2EIcon_normal")).toHaveLength(1); - }); - - it("renders verified user info", async () => { - mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, false, false)); - renderComponent({ room: mockRoom }); - await flushPromises(); - - const userHeading = screen.getByRole("heading", { name: /@user:example.com/ }); - - // there should be a "verified" E2E padlock - expect(userHeading.getElementsByClassName("mx_E2EIcon_verified")).toHaveLength(1); - }); - }); }); describe("", () => { @@ -707,33 +483,52 @@ describe("", () => { }; const renderComponent = (props = {}) => { + const device1 = new Device({ + deviceId: "d1", + userId: defaultUserId, + displayName: "my device", + algorithms: [], + keys: new Map(), + }); + const devicesMap = new Map([[device1.deviceId, device1]]); + const userDeviceMap = new Map>([[defaultUserId, devicesMap]]); + mockCrypto.getUserDeviceInfo.mockResolvedValue(userDeviceMap); + mockClient.doesServerSupportUnstableFeature.mockResolvedValue(true); const Wrapper = (wrapperProps = {}) => { return ; }; - return render(, { + return render(, { wrapper: Wrapper, }); }; - it("does not render an e2e icon in the header if e2eStatus prop is undefined", () => { + it("renders custom user identifiers in the header", () => { renderComponent(); - const header = screen.getByRole("heading", { name: defaultUserId }); - - expect(header.getElementsByClassName("mx_E2EIcon")).toHaveLength(0); + expect(screen.getByText("customUserIdentifier")).toBeInTheDocument(); }); - it("renders an e2e icon in the header if e2eStatus prop is defined", () => { - renderComponent({ e2eStatus: E2EStatus.Normal }); - const header = screen.getByRole("heading"); - - expect(header.getElementsByClassName("mx_E2EIcon")).toHaveLength(1); + it("renders verified badge when user is verified", async () => { + mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(true, true, false)); + const { container } = renderComponent(); + await waitFor(() => expect(screen.getByText("Verified")).toBeInTheDocument()); + expect(container).toMatchSnapshot(); }); - it("renders custom user identifiers in the header", () => { - renderComponent(); + it("renders verify button", async () => { + mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(false, false, false)); + mockCrypto.userHasCrossSigningKeys.mockResolvedValue(true); + const { container } = renderComponent(); + await waitFor(() => expect(screen.getByText("Verify User")).toBeInTheDocument()); + expect(container).toMatchSnapshot(); + }); - expect(screen.getByText("customUserIdentifier")).toBeInTheDocument(); + it("renders verification unavailable message", async () => { + mockCrypto.getUserVerificationStatus.mockResolvedValue(new UserVerificationStatus(false, false, false)); + mockCrypto.userHasCrossSigningKeys.mockResolvedValue(false); + const { container } = renderComponent(); + await waitFor(() => expect(screen.getByText("(User verification unavailable)")).toBeInTheDocument()); + expect(container).toMatchSnapshot(); }); }); diff --git a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap index 5ba2d3b5fcb..60a7fb20a53 100644 --- a/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap +++ b/test/unit-tests/components/views/right_panel/__snapshots__/UserInfo-test.tsx.snap @@ -88,7 +88,7 @@ exports[` with crypto enabled renders 1`] = `

+ + + +
+
+

+
+ @user:example.com +
+

+
+ Unknown +
+

+

+ customUserIdentifier +
+
+

+
+
+

+ ( + User verification unavailable + ) +

+
+
+
+`; + +exports[` renders verified badge when user is verified 1`] = ` +
+
+
+
+ +
+
+
+
+
+

+
+ @user:example.com +
+

+
+ Unknown +
+

+

+ customUserIdentifier +
+
+

+
+
+ + + + +

+ Verified +

+ +
+
+
+`; + +exports[` renders verify button 1`] = ` +
+
+
+
+ +
+
+
+
+
+

+
+ @user:example.com +
+

+
+ Unknown +
+

+

+ customUserIdentifier +
+
+

+
+
+
+ +
+
+
+
+`;