Improve error display for messages sent from insecure devices (#93)

* Add labs option to exclude unverified devices

Add a labs option which will, when set, switch into the "invisible crypto"
mode of refusing to send keys to, or decrypt messages from, devices that have
not been signed by their owner.

* DecryptionFailureBody: better error messages

Improve the error messages shown for messages from insecure devices.

* playwright: factor out `createSecondBotDevice` utility

* Playwright test for messages from insecure devices

* fixup! DecryptionFailureBody: better error messages

Use compound colour tokens, and add a background colour.

* fixup! DecryptionFailureBody: better error messages

Use compound spacing tokens

test/components/views/messages/DecryptionFailureBody-test.tsx

@@ -103,4 +103,32 @@ describe("DecryptionFailureBody", () => {
         // Then
         expect(container).toHaveTextContent("You don't have access to this message");
     });
+
+    it("should handle messages from users who change identities after verification", async () => {
+        // When
+        const event = await mkDecryptionFailureMatrixEvent({
+            code: DecryptionFailureCode.SENDER_IDENTITY_PREVIOUSLY_VERIFIED,
+            msg: "User previously verified",
+            roomId: "fakeroom",
+            sender: "fakesender",
+        });
+        const { container } = customRender(event);
+
+        // Then
+        expect(container).toMatchSnapshot();
+    });
+
+    it("should handle messages from unverified devices", async () => {
+        // When
+        const event = await mkDecryptionFailureMatrixEvent({
+            code: DecryptionFailureCode.UNSIGNED_SENDER_DEVICE,
+            msg: "Unsigned device",
+            roomId: "fakeroom",
+            sender: "fakesender",
+        });
+        const { container } = customRender(event);
+
+        // Then
+        expect(container).toHaveTextContent("Encrypted by a device not verified by its owner");
+    });
 });

test/components/views/messages/__snapshots__/DecryptionFailureBody-test.tsx.snap

@@ -19,3 +19,18 @@ exports[`DecryptionFailureBody Should display "Unable to decrypt message" 1`] =
   </div>
 </div>
 `;
+
+exports[`DecryptionFailureBody should handle messages from users who change identities after verification 1`] = `
+<div>
+  <div
+    class="mx_DecryptionFailureBody mx_EventTile_content mx_DecryptionFailureVerifiedIdentityChanged"
+  >
+    <span>
+      <div
+        class="mx_Icon mx_Icon_16"
+      />
+      Verified identity has changed
+    </span>
+  </div>
+</div>
+`;