Merge pull request #3601 from matrix-org/bwindels/verification-over-dm

Show verification requests in the timeline

.stylelintrc.js

@@ -15,6 +15,7 @@ module.exports = {
         "number-leading-zero": null,
         "selector-list-comma-newline-after": null,
         "at-rule-no-unknown": null,
+        "no-descending-specificity": null,
         "scss/at-rule-no-unknown": [true, {
             // https://github.com/vector-im/riot-web/issues/10544
             "ignoreAtRules": ["define-mixin"],

res/css/_components.scss

@@ -118,6 +118,7 @@
 @import "./views/messages/_MEmoteBody.scss";
 @import "./views/messages/_MFileBody.scss";
 @import "./views/messages/_MImageBody.scss";
+@import "./views/messages/_MKeyVerificationRequest.scss";
 @import "./views/messages/_MNoticeBody.scss";
 @import "./views/messages/_MStickerBody.scss";
 @import "./views/messages/_MTextBody.scss";

res/css/views/messages/_MKeyVerificationRequest.scss

@@ -0,0 +1,93 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_KeyVerification {
+
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content;
+
+    &.mx_KeyVerification_icon::after {
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 12px;
+        height: 16px;
+        content: "";
+        mask: url("$(res)/img/e2e/verified.svg");
+        mask-repeat: no-repeat;
+        mask-size: 100%;
+        margin-top: 4px;
+        background-color: $primary-fg-color;
+    }
+
+    &.mx_KeyVerification_icon_verified::after {
+        background-color: $accent-color;
+    }
+
+    .mx_KeyVerification_title, .mx_KeyVerification_subtitle, .mx_KeyVerification_state {
+        overflow-wrap: break-word;
+    }
+
+    .mx_KeyVerification_title {
+        font-weight: 600;
+        font-size: 15px;
+        grid-column: 2;
+        grid-row: 1;
+    }
+
+    .mx_KeyVerification_subtitle {
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_KeyVerification_state, .mx_KeyVerification_subtitle {
+        font-size: 12px;
+    }
+
+    .mx_KeyVerification_state, .mx_KeyVerification_buttons {
+        grid-column: 3;
+        grid-row: 1 / 3;
+    }
+
+    .mx_KeyVerification_buttons {
+        align-items: center;
+        display: flex;
+
+        .mx_AccessibleButton_kind_decline {
+            color: $notice-primary-color;
+            background-color: $notice-primary-bg-color;
+        }
+
+        .mx_AccessibleButton_kind_accept {
+            color: $accent-color;
+            background-color: $accent-bg-color;
+        }
+
+        [role=button] {
+            margin: 10px;
+            padding: 7px 15px;
+            border-radius: 5px;
+            height: min-content;
+        }
+    }
+
+    .mx_KeyVerification_state {
+        width: 130px;
+        padding: 10px 20px;
+        margin: auto 0;
+        text-align: center;
+        color: $notice-secondary-color;
+    }
+}

res/css/views/rooms/_EventTile.scss

@@ -22,6 +22,15 @@ limitations under the License.
     position: relative;
 }
 
+.mx_EventTile_bubble {
+    background-color: $dark-panel-bg-color;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 10px auto;
+    max-width: 75%;
+    box-sizing: border-box;
+}
+
 .mx_EventTile.mx_EventTile_info {
     padding-top: 0px;
 }
@@ -112,6 +121,21 @@ limitations under the License.
     line-height: 22px;
 }
 
+.mx_EventTile_bubbleContainer {
+    display: grid;
+    grid-template-columns: 1fr 100px;
+
+    .mx_EventTile_line {
+        margin-right: 0px;
+        grid-column: 1 / 3;
+        padding: 0;
+    }
+
+    .mx_EventTile_msgOption {
+        grid-column: 2;
+    }
+}
+
 .mx_EventTile_reply {
     margin-right: 10px;
 }
@@ -617,4 +641,5 @@ div.mx_EventTile_notSent.mx_EventTile_redacted .mx_UnknownBody {
         }
     }
 }
+
 /* stylelint-enable no-descending-specificity */

res/themes/light/css/_light.scss

@@ -12,7 +12,9 @@ $monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emo
 // unified palette
 // try to use these colors when possible
 $accent-color: #03b381;
+$accent-bg-color: rgba(115, 247, 91, 0.08);
 $notice-primary-color: #ff4b55;
+$notice-primary-bg-color: rgba(255, 75, 85, 0.08);
 $notice-secondary-color: #61708b;
 $header-panel-bg-color: #f3f8fd;
 

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -24,6 +24,10 @@ import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
 import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import createRoom from "../../../createRoom";
+import dis from "../../../dispatcher";
+import SettingsStore from '../../../settings/SettingsStore';
 
 const MODE_LEGACY = 'legacy';
 const MODE_SAS = 'sas';
@@ -86,25 +90,37 @@ export default class DeviceVerifyDialog extends React.Component {
         this.props.onFinished(confirm);
     }
 
-    _onSasRequestClick = () => {
+    _onSasRequestClick = async () => {
         this.setState({
             phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
         });
-        this._verifier = MatrixClientPeg.get().beginKeyVerification(
+        const client = MatrixClientPeg.get();
-            verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
+        const verifyingOwnDevice = this.props.userId === client.getUserId();
-        );
+        try {
-        this._verifier.on('show_sas', this._onVerifierShowSas);
+            if (!verifyingOwnDevice && SettingsStore.getValue("feature_dm_verification")) {
-        this._verifier.verify().then(() => {
+                const roomId = await ensureDMExistsAndOpen(this.props.userId);
+                // throws upon cancellation before having started
+                this._verifier = await client.requestVerificationDM(
+                    this.props.userId, roomId, [verificationMethods.SAS],
+                );
+            } else {
+                this._verifier = client.beginKeyVerification(
+                    verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
+                );
+            }
+            this._verifier.on('show_sas', this._onVerifierShowSas);
+            // throws upon cancellation
+            await this._verifier.verify();
             this.setState({phase: PHASE_VERIFIED});
             this._verifier.removeListener('show_sas', this._onVerifierShowSas);
             this._verifier = null;
-        }).catch((e) => {
+        } catch (e) {
             console.log("Verification failed", e);
             this.setState({
                 phase: PHASE_CANCELLED,
             });
             this._verifier = null;
-        });
+        }
     }
 
     _onSasMatchesClick = () => {
@@ -299,3 +315,30 @@ export default class DeviceVerifyDialog extends React.Component {
     }
 }
 
+async function ensureDMExistsAndOpen(userId) {
+    const client = MatrixClientPeg.get();
+    const roomIds = DMRoomMap.shared().getDMRoomsForUserId(userId);
+    const rooms = roomIds.map(id => client.getRoom(id));
+    const suitableDMRooms = rooms.filter(r => {
+        if (r && r.getMyMembership() === "join") {
+            const member = r.getMember(userId);
+            return member && (member.membership === "invite" || member.membership === "join");
+        }
+        return false;
+    });
+    let roomId;
+    if (suitableDMRooms.length) {
+        const room = suitableDMRooms[0];
+        roomId = room.roomId;
+    } else {
+        roomId = await createRoom({dmUserId: userId, spinner: false, andView: false});
+    }
+    // don't use andView and spinner in createRoom, together, they cause this dialog to close and reopen,
+    // we causes us to loose the verifier and restart, and we end up having two verification requests
+    dis.dispatch({
+        action: 'view_room',
+        room_id: roomId,
+        should_peek: false,
+    });
+    return roomId;
+}

src/components/views/messages/MKeyVerificationConclusion.js

@@ -0,0 +1,132 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import { _t } from '../../../languageHandler';
+import KeyVerificationStateObserver, {getNameForEventRoom, userLabelForEventRoom}
+    from '../../../utils/KeyVerificationStateObserver';
+
+export default class MKeyVerificationConclusion extends React.Component {
+    constructor(props) {
+        super(props);
+        this.keyVerificationState = null;
+        this.state = {
+            done: false,
+            cancelled: false,
+            otherPartyUserId: null,
+            cancelPartyUserId: null,
+        };
+        const rel = this.props.mxEvent.getRelation();
+        if (rel) {
+            const client = MatrixClientPeg.get();
+            const room = client.getRoom(this.props.mxEvent.getRoomId());
+            const requestEvent = room.findEventById(rel.event_id);
+            if (requestEvent) {
+                this._createStateObserver(requestEvent, client);
+                this.state = this._copyState();
+            } else {
+                const findEvent = event => {
+                    if (event.getId() === rel.event_id) {
+                        this._createStateObserver(event, client);
+                        this.setState(this._copyState());
+                        room.removeListener("Room.timeline", findEvent);
+                    }
+                };
+                room.on("Room.timeline", findEvent);
+            }
+        }
+    }
+
+    _createStateObserver(requestEvent, client) {
+        this.keyVerificationState = new KeyVerificationStateObserver(requestEvent, client, () => {
+            this.setState(this._copyState());
+        });
+    }
+
+    _copyState() {
+        const {done, cancelled, otherPartyUserId, cancelPartyUserId} = this.keyVerificationState;
+        return {done, cancelled, otherPartyUserId, cancelPartyUserId};
+    }
+
+    componentDidMount() {
+        if (this.keyVerificationState) {
+            this.keyVerificationState.attach();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.keyVerificationState) {
+            this.keyVerificationState.detach();
+        }
+    }
+
+    _getName(userId) {
+        const roomId = this.props.mxEvent.getRoomId();
+        const client = MatrixClientPeg.get();
+        const room = client.getRoom(roomId);
+        const member = room.getMember(userId);
+        return member ? member.name : userId;
+    }
+
+    _userLabel(userId) {
+        const name = this._getName(userId);
+        if (name !== userId) {
+            return _t("%(name)s (%(userId)s)", {name, userId});
+        } else {
+            return userId;
+        }
+    }
+
+    render() {
+        const {mxEvent} = this.props;
+        const client = MatrixClientPeg.get();
+        const myUserId = client.getUserId();
+        let title;
+
+        if (this.state.done) {
+            title = _t("You verified %(name)s", {name: getNameForEventRoom(this.state.otherPartyUserId, mxEvent)});
+        } else if (this.state.cancelled) {
+            if (mxEvent.getSender() === myUserId) {
+                title = _t("You cancelled verifying %(name)s",
+                    {name: getNameForEventRoom(this.state.otherPartyUserId, mxEvent)});
+            } else if (mxEvent.getSender() === this.state.otherPartyUserId) {
+                title = _t("%(name)s cancelled verifying",
+                    {name: getNameForEventRoom(this.state.otherPartyUserId, mxEvent)});
+            }
+        }
+
+        if (title) {
+            const subtitle = userLabelForEventRoom(this.state.otherPartyUserId, mxEvent);
+            const classes = classNames("mx_EventTile_bubble", "mx_KeyVerification", "mx_KeyVerification_icon", {
+                mx_KeyVerification_icon_verified: this.state.done,
+            });
+            return (<div className={classes}>
+                <div className="mx_KeyVerification_title">{title}</div>
+                <div className="mx_KeyVerification_subtitle">{subtitle}</div>
+            </div>);
+        }
+
+        return null;
+    }
+}
+
+MKeyVerificationConclusion.propTypes = {
+    /* the MatrixEvent to show */
+    mxEvent: PropTypes.object.isRequired,
+};

src/components/views/messages/MKeyVerificationRequest.js

@@ -0,0 +1,141 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+import sdk from '../../../index';
+import Modal from "../../../Modal";
+import { _t } from '../../../languageHandler';
+import KeyVerificationStateObserver, {getNameForEventRoom, userLabelForEventRoom}
+    from '../../../utils/KeyVerificationStateObserver';
+
+export default class MKeyVerificationRequest extends React.Component {
+    constructor(props) {
+        super(props);
+        this.keyVerificationState = new KeyVerificationStateObserver(this.props.mxEvent, MatrixClientPeg.get(), () => {
+            this.setState(this._copyState());
+        });
+        this.state = this._copyState();
+    }
+
+    _copyState() {
+        const {accepted, done, cancelled, cancelPartyUserId, otherPartyUserId} = this.keyVerificationState;
+        return {accepted, done, cancelled, cancelPartyUserId, otherPartyUserId};
+    }
+
+    componentDidMount() {
+        this.keyVerificationState.attach();
+    }
+
+    componentWillUnmount() {
+        this.keyVerificationState.detach();
+    }
+
+    _onAcceptClicked = () => {
+        const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
+        // todo: validate event, for example if it has sas in the methods.
+        const verifier = MatrixClientPeg.get().acceptVerificationDM(this.props.mxEvent, verificationMethods.SAS);
+        Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+            verifier,
+        });
+    };
+
+    _onRejectClicked = () => {
+        // todo: validate event, for example if it has sas in the methods.
+        const verifier = MatrixClientPeg.get().acceptVerificationDM(this.props.mxEvent, verificationMethods.SAS);
+        verifier.cancel("User declined");
+    };
+
+    _acceptedLabel(userId) {
+        const client = MatrixClientPeg.get();
+        const myUserId = client.getUserId();
+        if (userId === myUserId) {
+            return _t("You accepted");
+        } else {
+            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+        }
+    }
+
+    _cancelledLabel(userId) {
+        const client = MatrixClientPeg.get();
+        const myUserId = client.getUserId();
+        if (userId === myUserId) {
+            return _t("You cancelled");
+        } else {
+            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+        }
+    }
+
+    render() {
+        const {mxEvent} = this.props;
+        const fromUserId = mxEvent.getSender();
+        const content = mxEvent.getContent();
+        const toUserId = content.to;
+        const client = MatrixClientPeg.get();
+        const myUserId = client.getUserId();
+        const isOwn = fromUserId === myUserId;
+
+        let title;
+        let subtitle;
+        let stateNode;
+
+        if (this.state.accepted || this.state.cancelled) {
+            let stateLabel;
+            if (this.state.accepted) {
+                stateLabel = this._acceptedLabel(toUserId);
+            } else if (this.state.cancelled) {
+                stateLabel = this._cancelledLabel(this.state.cancelPartyUserId);
+            }
+            stateNode = (<div className="mx_KeyVerification_state">{stateLabel}</div>);
+        }
+
+        if (toUserId === myUserId) { // request sent to us
+            title = (<div className="mx_KeyVerification_title">{
+                _t("%(name)s wants to verify", {name: getNameForEventRoom(fromUserId, mxEvent)})}</div>);
+            subtitle = (<div className="mx_KeyVerification_subtitle">{
+                userLabelForEventRoom(fromUserId, mxEvent)}</div>);
+            const isResolved = !(this.state.accepted || this.state.cancelled || this.state.done);
+            if (isResolved) {
+                const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+                stateNode = (<div className="mx_KeyVerification_buttons">
+                    <AccessibleButton kind="decline" onClick={this._onRejectClicked}>{_t("Decline")}</AccessibleButton>
+                    <AccessibleButton kind="accept" onClick={this._onAcceptClicked}>{_t("Accept")}</AccessibleButton>
+                </div>);
+            }
+        } else if (isOwn) { // request sent by us
+            title = (<div className="mx_KeyVerification_title">{
+                _t("You sent a verification request")}</div>);
+            subtitle = (<div className="mx_KeyVerification_subtitle">{
+                userLabelForEventRoom(this.state.otherPartyUserId, mxEvent)}</div>);
+        }
+
+        if (title) {
+            return (<div className="mx_EventTile_bubble mx_KeyVerification mx_KeyVerification_icon">
+                {title}
+                {subtitle}
+                {stateNode}
+            </div>);
+        }
+        return null;
+    }
+}
+
+MKeyVerificationRequest.propTypes = {
+    /* the MatrixEvent to show */
+    mxEvent: PropTypes.object.isRequired,
+};

src/components/views/rooms/EventTile.js

@@ -33,12 +33,15 @@ import dis from '../../../dispatcher';
 import SettingsStore from "../../../settings/SettingsStore";
 import {EventStatus, MatrixClient} from 'matrix-js-sdk';
 import {formatTime} from "../../../DateUtils";
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 const ObjectUtils = require('../../../ObjectUtils');
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
     'm.sticker': 'messages.MessageEvent',
+    'm.key.verification.cancel': 'messages.MKeyVerificationConclusion',
+    'm.key.verification.done': 'messages.MKeyVerificationConclusion',
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
@@ -68,6 +71,31 @@ const stateEventTileTypes = {
 
 function getHandlerTile(ev) {
     const type = ev.getType();
+
+    // don't show verification requests we're not involved in,
+    // not even when showing hidden events
+    if (type === "m.room.message") {
+        const content = ev.getContent();
+        if (content && content.msgtype === "m.key.verification.request") {
+            const client = MatrixClientPeg.get();
+            const me = client && client.getUserId();
+            if (ev.getSender() !== me && content.to !== me) {
+                return undefined;
+            } else {
+                return "messages.MKeyVerificationRequest";
+            }
+        }
+    }
+    // these events are sent by both parties during verification, but we only want to render one
+    // tile once the verification concludes, so filter out the one from the other party.
+    if (type === "m.key.verification.done") {
+        const client = MatrixClientPeg.get();
+        const me = client && client.getUserId();
+        if (ev.getSender() !== me) {
+            return undefined;
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -527,8 +555,11 @@ module.exports = createReactClass({
         const eventType = this.props.mxEvent.getType();
 
         // Info messages are basically information about commands processed on a room
+        const isBubbleMessage = eventType.startsWith("m.key.verification") ||
+            (eventType === "m.room.message" && msgtype.startsWith("m.key.verification"));
         let isInfoMessage = (
-            eventType !== 'm.room.message' && eventType !== 'm.sticker' && eventType != 'm.room.create'
+            !isBubbleMessage && eventType !== 'm.room.message' &&
+            eventType !== 'm.sticker' && eventType != 'm.room.create'
         );
 
         let tileHandler = getHandlerTile(this.props.mxEvent);
@@ -561,6 +592,7 @@ module.exports = createReactClass({
 
         const isEditing = !!this.props.editState;
         const classes = classNames({
+            mx_EventTile_bubbleContainer: isBubbleMessage,
             mx_EventTile: true,
             mx_EventTile_isEditing: isEditing,
             mx_EventTile_info: isInfoMessage,
@@ -596,7 +628,7 @@ module.exports = createReactClass({
         if (this.props.tileShape === "notif") {
             avatarSize = 24;
             needsSenderProfile = true;
-        } else if (tileHandler === 'messages.RoomCreate') {
+        } else if (tileHandler === 'messages.RoomCreate' || isBubbleMessage) {
             avatarSize = 0;
             needsSenderProfile = false;
         } else if (isInfoMessage) {
@@ -794,7 +826,7 @@ module.exports = createReactClass({
                             { readAvatars }
                         </div>
                         { sender }
-                        <div className="mx_EventTile_line">
+                        <div className={classNames("mx_EventTile_line", {mx_EventTile_bubbleLine: isBubbleMessage})}>
                             <a
                                 href={permalink}
                                 onClick={this.onPermalinkClicked}

src/i18n/strings/en_EN.json

@@ -291,6 +291,7 @@
     "%(items)s and %(count)s others|other": "%(items)s and %(count)s others",
     "%(items)s and %(count)s others|one": "%(items)s and one other",
     "%(items)s and %(lastItem)s": "%(items)s and %(lastItem)s",
+    "%(name)s (%(userId)s)": "%(name)s (%(userId)s)",
     "Your browser does not support the required cryptography extensions": "Your browser does not support the required cryptography extensions",
     "Not a valid Riot keyfile": "Not a valid Riot keyfile",
     "Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?",
@@ -339,6 +340,7 @@
     "Render simple counters in room header": "Render simple counters in room header",
     "Multiple integration managers": "Multiple integration managers",
     "Use the new, consistent UserInfo panel for Room Members and Group Members": "Use the new, consistent UserInfo panel for Room Members and Group Members",
+    "Send verification requests in direct message": "Send verification requests in direct message",
     "Use the new, faster, composer for writing messages": "Use the new, faster, composer for writing messages",
     "Enable Emoji suggestions while typing": "Enable Emoji suggestions while typing",
     "Use compact timeline layout": "Use compact timeline layout",
@@ -1064,6 +1066,15 @@
     "Invalid file%(extra)s": "Invalid file%(extra)s",
     "Error decrypting image": "Error decrypting image",
     "Show image": "Show image",
+    "You verified %(name)s": "You verified %(name)s",
+    "You cancelled verifying %(name)s": "You cancelled verifying %(name)s",
+    "%(name)s cancelled verifying": "%(name)s cancelled verifying",
+    "You accepted": "You accepted",
+    "%(name)s accepted": "%(name)s accepted",
+    "You cancelled": "You cancelled",
+    "%(name)s cancelled": "%(name)s cancelled",
+    "%(name)s wants to verify": "%(name)s wants to verify",
+    "You sent a verification request": "You sent a verification request",
     "Error decrypting video": "Error decrypting video",
     "Show all": "Show all",
     "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>": "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",

src/settings/Settings.js

@@ -126,6 +126,12 @@ export const SETTINGS = {
         supportedLevels: LEVELS_FEATURE,
         default: false,
     },
+    "feature_dm_verification": {
+        isFeature: true,
+        displayName: _td("Send verification requests in direct message"),
+        supportedLevels: LEVELS_FEATURE,
+        default: false,
+    },
     "useCiderComposer": {
         displayName: _td("Use the new, faster, composer for writing messages"),
         supportedLevels: LEVELS_ACCOUNT_SETTINGS,

src/utils/KeyVerificationStateObserver.js

@@ -0,0 +1,170 @@
+/*
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import MatrixClientPeg from '../MatrixClientPeg';
+import { _t } from '../languageHandler';
+
+const SUB_EVENT_TYPES_OF_INTEREST = ["start", "cancel", "done"];
+
+export default class KeyVerificationStateObserver {
+    constructor(requestEvent, client, updateCallback) {
+        this._requestEvent = requestEvent;
+        this._client = client;
+        this._updateCallback = updateCallback;
+        this.accepted = false;
+        this.done = false;
+        this.cancelled = false;
+        this._updateVerificationState();
+    }
+
+    attach() {
+        this._requestEvent.on("Event.relationsCreated", this._onRelationsCreated);
+        for (const phaseName of SUB_EVENT_TYPES_OF_INTEREST) {
+            this._tryListenOnRelationsForType(`m.key.verification.${phaseName}`);
+        }
+    }
+
+    detach() {
+        const roomId = this._requestEvent.getRoomId();
+        const room = this._client.getRoom(roomId);
+
+        for (const phaseName of SUB_EVENT_TYPES_OF_INTEREST) {
+            const relations = room.getUnfilteredTimelineSet()
+                .getRelationsForEvent(this._requestEvent.getId(), "m.reference", `m.key.verification.${phaseName}`);
+            if (relations) {
+                relations.removeListener("Relations.add", this._onRelationsUpdated);
+                relations.removeListener("Relations.remove", this._onRelationsUpdated);
+                relations.removeListener("Relations.redaction", this._onRelationsUpdated);
+            }
+        }
+        this._requestEvent.removeListener("Event.relationsCreated", this._onRelationsCreated);
+    }
+
+    _onRelationsCreated = (relationType, eventType) => {
+        if (relationType !== "m.reference") {
+            return;
+        }
+        if (
+            eventType !== "m.key.verification.start" &&
+            eventType !== "m.key.verification.cancel" &&
+            eventType !== "m.key.verification.done"
+        ) {
+            return;
+        }
+        this._tryListenOnRelationsForType(eventType);
+        this._updateVerificationState();
+        this._updateCallback();
+    };
+
+    _tryListenOnRelationsForType(eventType) {
+        const roomId = this._requestEvent.getRoomId();
+        const room = this._client.getRoom(roomId);
+        const relations = room.getUnfilteredTimelineSet()
+            .getRelationsForEvent(this._requestEvent.getId(), "m.reference", eventType);
+        if (relations) {
+            relations.on("Relations.add", this._onRelationsUpdated);
+            relations.on("Relations.remove", this._onRelationsUpdated);
+            relations.on("Relations.redaction", this._onRelationsUpdated);
+        }
+    }
+
+    _onRelationsUpdated = (event) => {
+        this._updateVerificationState();
+        this._updateCallback();
+    };
+
+    _updateVerificationState() {
+        const roomId = this._requestEvent.getRoomId();
+        const room = this._client.getRoom(roomId);
+        const timelineSet = room.getUnfilteredTimelineSet();
+        const fromUserId = this._requestEvent.getSender();
+        const content = this._requestEvent.getContent();
+        const toUserId = content.to;
+
+        this.cancelled = false;
+        this.done = false;
+        this.accepted = false;
+        this.otherPartyUserId = null;
+        this.cancelPartyUserId = null;
+
+        const startRelations = timelineSet.getRelationsForEvent(
+            this._requestEvent.getId(), "m.reference", "m.key.verification.start");
+        if (startRelations) {
+            for (const startEvent of startRelations.getRelations()) {
+                if (startEvent.getSender() === toUserId) {
+                    this.accepted = true;
+                }
+            }
+        }
+
+        const doneRelations = timelineSet.getRelationsForEvent(
+            this._requestEvent.getId(), "m.reference", "m.key.verification.done");
+        if (doneRelations) {
+            let senderDone = false;
+            let receiverDone = false;
+            for (const doneEvent of doneRelations.getRelations()) {
+                if (doneEvent.getSender() === toUserId) {
+                    receiverDone = true;
+                } else if (doneEvent.getSender() === fromUserId) {
+                    senderDone = true;
+                }
+            }
+            if (senderDone && receiverDone) {
+                this.done = true;
+            }
+        }
+
+        if (!this.done) {
+            const cancelRelations = timelineSet.getRelationsForEvent(
+                this._requestEvent.getId(), "m.reference", "m.key.verification.cancel");
+
+            if (cancelRelations) {
+                let earliestCancelEvent;
+                for (const cancelEvent of cancelRelations.getRelations()) {
+                    // only accept cancellation from the users involved
+                    if (cancelEvent.getSender() === toUserId || cancelEvent.getSender() === fromUserId) {
+                        this.cancelled = true;
+                        if (!earliestCancelEvent || cancelEvent.getTs() < earliestCancelEvent.getTs()) {
+                            earliestCancelEvent = cancelEvent;
+                        }
+                    }
+                }
+                if (earliestCancelEvent) {
+                    this.cancelPartyUserId = earliestCancelEvent.getSender();
+                }
+            }
+        }
+
+        this.otherPartyUserId = fromUserId === this._client.getUserId() ? toUserId : fromUserId;
+    }
+}
+
+export function getNameForEventRoom(userId, mxEvent) {
+    const roomId = mxEvent.getRoomId();
+    const client = MatrixClientPeg.get();
+    const room = client.getRoom(roomId);
+    const member = room.getMember(userId);
+    return member ? member.name : userId;
+}
+
+export function userLabelForEventRoom(userId, mxEvent) {
+    const name = getNameForEventRoom(userId, mxEvent);
+    if (name !== userId) {
+        return _t("%(name)s (%(userId)s)", {name, userId});
+    } else {
+        return userId;
+    }
+}