From 68836b9c680128a99588d28fbd30ca1a845fb141 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Mon, 6 Sep 2021 14:59:30 +0100 Subject: [PATCH 1/4] hide no-op m.room.encryption events and better word param changes --- src/components/views/messages/EncryptionEvent.tsx | 15 ++++++++++++--- src/i18n/strings/en_EN.json | 1 + 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index 0f716ed010..88b96e0c5e 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.tsx @@ -22,20 +22,27 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg'; import EventTileBubble from "./EventTileBubble"; import MatrixClientContext from "../../../contexts/MatrixClientContext"; import DMRoomMap from "../../../utils/DMRoomMap"; +import { objectHasDiff } from "../../../utils/objects"; interface IProps { mxEvent: MatrixEvent; } +const ALGORITHM = "m.megolm.v1.aes-sha2"; + const EncryptionEvent = forwardRef(({ mxEvent }, ref) => { const cli = useContext(MatrixClientContext); const roomId = mxEvent.getRoomId(); const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId); - if (mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' && isRoomEncrypted) { + if (!objectHasDiff(mxEvent.getPrevContent(), mxEvent.getContent())) return null; // nop + + if (mxEvent.getContent().algorithm === ALGORITHM && isRoomEncrypted) { let subtitle: string; const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId); - if (dmPartner) { + if (mxEvent.getPrevContent().algorithm === ALGORITHM) { + subtitle = _t("Some encryption parameters have been changed."); + } else if (dmPartner) { const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner; subtitle = _t("Messages here are end-to-end encrypted. " + "Verify %(displayName)s in their profile - tap on their avatar.", { displayName }); @@ -49,7 +56,9 @@ const EncryptionEvent = forwardRef(({ mxEvent }, ref) => title={_t("Encryption enabled")} subtitle={subtitle} />; - } else if (isRoomEncrypted) { + } + + if (isRoomEncrypted) { return Date: Tue, 7 Sep 2021 12:01:18 +0100 Subject: [PATCH 2/4] add comment --- src/components/views/messages/EncryptionEvent.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index 88b96e0c5e..80b60f1fe7 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.tsx @@ -35,6 +35,7 @@ const EncryptionEvent = forwardRef(({ mxEvent }, ref) => const roomId = mxEvent.getRoomId(); const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId); + // if no change happened then skip rendering this, a shallow check is enough as events are parsed JSON if (!objectHasDiff(mxEvent.getPrevContent(), mxEvent.getContent())) return null; // nop if (mxEvent.getContent().algorithm === ALGORITHM && isRoomEncrypted) { From f3abb13dc9619a32eee8308cc7eb9e4c0a51bd13 Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 8 Sep 2021 12:34:44 +0100 Subject: [PATCH 3/4] Convert crypto/verification/* to Typescript --- .../views/right_panel/EncryptionPanel.tsx | 2 +- .../views/right_panel/VerificationPanel.tsx | 38 ++++++------------- .../verification/VerificationShowSas.tsx | 4 +- 3 files changed, 15 insertions(+), 29 deletions(-) diff --git a/src/components/views/right_panel/EncryptionPanel.tsx b/src/components/views/right_panel/EncryptionPanel.tsx index b1c8d427bf..8beb089b38 100644 --- a/src/components/views/right_panel/EncryptionPanel.tsx +++ b/src/components/views/right_panel/EncryptionPanel.tsx @@ -57,7 +57,7 @@ const EncryptionPanel: React.FC = (props: IProps) => { // state to show a spinner immediately after clicking "start verification", // before we have a request const [isRequesting, setRequesting] = useState(false); - const [phase, setPhase] = useState(request && request.phase); + const [phase, setPhase] = useState(request?.phase); useEffect(() => { setRequest(verificationRequest); if (verificationRequest) { diff --git a/src/components/views/right_panel/VerificationPanel.tsx b/src/components/views/right_panel/VerificationPanel.tsx index 395bdc21e0..a29bdea90b 100644 --- a/src/components/views/right_panel/VerificationPanel.tsx +++ b/src/components/views/right_panel/VerificationPanel.tsx @@ -29,43 +29,27 @@ import VerificationQRCode from "../elements/crypto/VerificationQRCode"; import { _t } from "../../../languageHandler"; import SdkConfig from "../../../SdkConfig"; import E2EIcon from "../rooms/E2EIcon"; -import { - PHASE_READY, - PHASE_DONE, - PHASE_STARTED, - PHASE_CANCELLED, -} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; +import { Phase } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest"; import Spinner from "../elements/Spinner"; import { replaceableComponent } from "../../../utils/replaceableComponent"; import AccessibleButton from "../elements/AccessibleButton"; import VerificationShowSas from "../verification/VerificationShowSas"; -// XXX: Should be defined in matrix-js-sdk -enum VerificationPhase { - PHASE_UNSENT, - PHASE_REQUESTED, - PHASE_READY, - PHASE_DONE, - PHASE_STARTED, - PHASE_CANCELLED, -} - interface IProps { layout: string; request: VerificationRequest; member: RoomMember | User; - phase: VerificationPhase; + phase: Phase; onClose: () => void; isRoomEncrypted: boolean; inDialog: boolean; - key: number; } interface IState { - sasEvent?: SAS; + sasEvent?: SAS["sasEvent"]; emojiButtonClicked?: boolean; reciprocateButtonClicked?: boolean; - reciprocateQREvent?: ReciprocateQRCode; + reciprocateQREvent?: ReciprocateQRCode["reciprocateQREvent"]; } @replaceableComponent("views.right_panel.VerificationPanel") @@ -321,9 +305,9 @@ export default class VerificationPanel extends React.PureComponent { const { request } = this.props; - const { sasEvent, reciprocateQREvent } = request.verifier; + const sasEvent = (request.verifier as SAS).sasEvent; + const reciprocateQREvent = (request.verifier as ReciprocateQRCode).reciprocateQREvent; request.verifier.off('show_sas', this.updateVerifierState); request.verifier.off('show_reciprocate_qr', this.updateVerifierState); this.setState({ sasEvent, reciprocateQREvent }); @@ -402,7 +387,8 @@ export default class VerificationPanel extends React.PureComponent void; onCancel: () => void; - sas: SAS.sas; + sas: IGeneratedSas; isSelf?: boolean; inDialog?: boolean; // whether this component is being shown in a dialog and to use DialogButtons } From 467fb55e8ecaecf6083e49538464d1a8b81041cc Mon Sep 17 00:00:00 2001 From: Michael Telatynski <7t3chguy@gmail.com> Date: Wed, 8 Sep 2021 12:53:13 +0100 Subject: [PATCH 4/4] improve typing & comment --- src/components/views/messages/EncryptionEvent.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index 80b60f1fe7..8f352610e0 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.tsx @@ -16,6 +16,7 @@ limitations under the License. import React, { forwardRef, useContext } from 'react'; import { MatrixEvent } from "matrix-js-sdk/src/models/event"; +import { IRoomEncryption } from "matrix-js-sdk/src/crypto/RoomList"; import { _t } from '../../../languageHandler'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; @@ -35,13 +36,16 @@ const EncryptionEvent = forwardRef(({ mxEvent }, ref) => const roomId = mxEvent.getRoomId(); const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(roomId); - // if no change happened then skip rendering this, a shallow check is enough as events are parsed JSON - if (!objectHasDiff(mxEvent.getPrevContent(), mxEvent.getContent())) return null; // nop + const prevContent = mxEvent.getPrevContent() as IRoomEncryption; + const content = mxEvent.getContent(); - if (mxEvent.getContent().algorithm === ALGORITHM && isRoomEncrypted) { + // if no change happened then skip rendering this, a shallow check is enough as all known fields are top-level. + if (!objectHasDiff(prevContent, content)) return null; // nop + + if (content.algorithm === ALGORITHM && isRoomEncrypted) { let subtitle: string; const dmPartner = DMRoomMap.shared().getUserIdForRoomId(roomId); - if (mxEvent.getPrevContent().algorithm === ALGORITHM) { + if (prevContent.algorithm === ALGORITHM) { subtitle = _t("Some encryption parameters have been changed."); } else if (dmPartner) { const displayName = cli?.getRoom(roomId)?.getMember(dmPartner)?.rawDisplayName || dmPartner;