diff --git a/src/components/views/messages/EncryptionEvent.tsx b/src/components/views/messages/EncryptionEvent.tsx index 0f716ed010..8f352610e0 100644 --- a/src/components/views/messages/EncryptionEvent.tsx +++ b/src/components/views/messages/EncryptionEvent.tsx @@ -16,26 +16,38 @@ 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'; 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) { + const prevContent = mxEvent.getPrevContent() as IRoomEncryption; + const content = mxEvent.getContent(); + + // 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 (dmPartner) { + if (prevContent.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 +61,9 @@ const EncryptionEvent = forwardRef(({ mxEvent }, ref) => title={_t("Encryption enabled")} subtitle={subtitle} />; - } else if (isRoomEncrypted) { + } + + if (isRoomEncrypted) { return = (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 } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 7d754a618a..9ccec8d047 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1922,6 +1922,7 @@ "Decrypting": "Decrypting", "Download": "Download", "View Source": "View Source", + "Some encryption parameters have been changed.": "Some encryption parameters have been changed.", "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.": "Messages here are end-to-end encrypted. Verify %(displayName)s in their profile - tap on their avatar.", "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.": "Messages in this room are end-to-end encrypted. When people join, you can verify them in their profile, just tap on their avatar.", "Encryption enabled": "Encryption enabled",