Add support for new shield codes in JS SDK

playwright/e2e/crypto/event-shields.spec.ts

@@ -16,6 +16,7 @@ import {
     logOutOfElement,
     verify,
 } from "./utils";
+import { bootstrapCrossSigningForClient } from "../../pages/client.ts";
 
 test.describe("Cryptography", function () {
     test.use({
@@ -307,5 +308,30 @@ test.describe("Cryptography", function () {
             const penultimate = page.locator(".mx_EventTile").filter({ hasText: "test encrypted from verified" });
             await expect(penultimate.locator(".mx_EventTile_e2eIcon")).not.toBeVisible();
         });
+
+        test("should show correct shields on events sent by users with changed identity", async ({
+            page,
+            app,
+            bot: bob,
+            homeserver,
+        }) => {
+            // Verify Bob
+            await verify(app, bob);
+
+            // Bob logs in a new device and resets cross-signing
+            const bobSecondDevice = await createSecondBotDevice(page, homeserver, bob);
+            await bootstrapCrossSigningForClient(await bobSecondDevice.prepareClient(), bob.credentials, true);
+
+            /* should show an error for a message from a previously verified device */
+            await bobSecondDevice.sendMessage(testRoomId, "test encrypted from user that was previously verified");
+            const last = page.locator(".mx_EventTile_last");
+            await expect(last).toContainText("test encrypted from user that was previously verified");
+            const lastE2eIcon = last.locator(".mx_EventTile_e2eIcon");
+            await expect(lastE2eIcon).toHaveClass(/mx_EventTile_e2eIcon_warning/);
+            await lastE2eIcon.focus();
+            await expect(await app.getTooltipForElement(lastE2eIcon)).toContainText(
+                "Encrypted by a previously-verified user who is no longer verified.",
+            );
+        });
     });
 });

src/components/views/rooms/EventTile.tsx

@@ -757,6 +757,14 @@ export class UnwrappedEventTile extends React.Component<EventTileProps, IState>
                 case EventShieldReason.MISMATCHED_SENDER_KEY:
                     shieldReasonMessage = _t("encryption|event_shield_reason_mismatched_sender_key");
                     break;
+
+                case EventShieldReason.SENT_IN_CLEAR:
+                    shieldReasonMessage = _t("common|unencrypted");
+                    break;
+
+                case EventShieldReason.VERIFICATION_VIOLATION:
+                    shieldReasonMessage = _t("encryption|event_shield_reason_verification_violation");
+                    break;
             }
 
             if (this.state.shieldColour === EventShieldColour.GREY) {

src/i18n/strings/en_EN.json

@@ -887,6 +887,7 @@
         "event_shield_reason_unknown_device": "Encrypted by an unknown or deleted device.",
         "event_shield_reason_unsigned_device": "Encrypted by a device not verified by its owner.",
         "event_shield_reason_unverified_identity": "Encrypted by an unverified user.",
+        "event_shield_reason_verification_violation": "Encrypted by a previously-verified user who is no longer verified.",
         "export_unsupported": "Your browser does not support the required cryptography extensions",
         "import_invalid_keyfile": "Not a valid %(brand)s keyfile",
         "import_invalid_passphrase": "Authentication check failed: incorrect password?",

test/unit-tests/components/views/rooms/EventTile-test.tsx

@@ -301,6 +301,8 @@ describe("EventTile", () => {
             [EventShieldReason.UNKNOWN_DEVICE, "unknown or deleted device"],
             [EventShieldReason.AUTHENTICITY_NOT_GUARANTEED, "can't be guaranteed"],
             [EventShieldReason.MISMATCHED_SENDER_KEY, "Encrypted by an unverified session"],
+            [EventShieldReason.SENT_IN_CLEAR, "Not encrypted"],
+            [EventShieldReason.VERIFICATION_VIOLATION, "previously-verified user"],
         ])("shows the correct reason code for %i (%s)", async (reasonCode: EventShieldReason, expectedText: string) => {
             mxEvent = await mkEncryptedMatrixEvent({
                 plainContent: { msgtype: "m.text", body: "msg1" },