Merge pull request #3661 from matrix-org/bwindels/verif-toasts

Show incoming verification requests in in-app notifications

src/components/structures/LoggedInView.js

@@ -525,6 +525,7 @@ const LoggedInView = createReactClass({
         const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const GroupView = sdk.getComponent('structures.GroupView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
+        const ToastContainer = sdk.getComponent('structures.ToastContainer');
         const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
         const CookieBar = sdk.getComponent('globals.CookieBar');
         const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
@@ -628,6 +629,7 @@ const LoggedInView = createReactClass({
         return (
             <div onPaste={this._onPaste} onKeyDown={this._onReactKeyDown} className='mx_MatrixChat_wrapper' aria-hidden={this.props.hideToSRUsers} onMouseDown={this._onMouseDown} onMouseUp={this._onMouseUp}>
                 { topBar }
+                <ToastContainer />
                 <DragDropContext onDragEnd={this._onDragEnd}>
                     <div ref={this._setResizeContainerRef} className={bodyClasses}>
                         <LeftPanel

src/components/structures/MatrixChat.js

@@ -60,6 +60,7 @@ import { countRoomsWithNotif } from '../../RoomNotifs';
 import { ThemeWatcher } from "../../theme";
 import { storeRoomAliasInCache } from '../../RoomAliasCache';
 import { defer } from "../../utils/promise";
+import KeyVerificationStateObserver from '../../utils/KeyVerificationStateObserver';
 
 /** constants for MatrixChat.state.view */
 const VIEWS = {
@@ -1264,7 +1265,6 @@ export default createReactClass({
         this.firstSyncComplete = false;
         this.firstSyncPromise = defer();
         const cli = MatrixClientPeg.get();
-        const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
 
         // Allow the JS SDK to reap timeline events. This reduces the amount of
         // memory consumed as the JS SDK stores multiple distinct copies of room
@@ -1463,12 +1463,35 @@ export default createReactClass({
             }
         });
 
-        cli.on("crypto.verification.start", (verifier) => {
-            Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
-                verifier,
-            });
-        });
+        if (SettingsStore.isFeatureEnabled("feature_dm_verification")) {
+            cli.on("crypto.verification.request", request => {
+                let requestObserver;
+                if (request.event.getRoomId()) {
+                    requestObserver = new KeyVerificationStateObserver(
+                        request.event, MatrixClientPeg.get());
+                }
 
+                if (!requestObserver || requestObserver.pending) {
+                    dis.dispatch({
+                        action: "show_toast",
+                        toast: {
+                            key: request.event.getId(),
+                            title: _t("Verification Request"),
+                            icon: "verification",
+                            props: {request, requestObserver},
+                            component: sdk.getComponent("toasts.VerificationRequestToast"),
+                        },
+                    });
+                }
+            });
+        } else {
+            cli.on("crypto.verification.start", (verifier) => {
+                const IncomingSasDialog = sdk.getComponent("views.dialogs.IncomingSasDialog");
+                Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+                    verifier,
+                });
+            });
+        }
         // Fire the tinter right on startup to ensure the default theme is applied
         // A later sync can/will correct the tint to be the right value for the user
         const colorScheme = SettingsStore.getValue("roomColor");

src/components/structures/ToastContainer.js

@@ -0,0 +1,85 @@
+/*
+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 * as React from "react";
+import dis from "../../dispatcher";
+import { _t } from '../../languageHandler';
+import classNames from "classnames";
+
+export default class ToastContainer extends React.Component {
+    constructor() {
+        super();
+        this.state = {toasts: []};
+    }
+
+    componentDidMount() {
+        this._dispatcherRef = dis.register(this.onAction);
+    }
+
+    componentWillUnmount() {
+        dis.unregister(this._dispatcherRef);
+    }
+
+    onAction = (payload) => {
+        if (payload.action === "show_toast") {
+            this._addToast(payload.toast);
+        }
+    };
+
+    _addToast(toast) {
+        this.setState({toasts: this.state.toasts.concat(toast)});
+    }
+
+    dismissTopToast = () => {
+        const [, ...remaining] = this.state.toasts;
+        this.setState({toasts: remaining});
+    };
+
+    render() {
+        const totalCount = this.state.toasts.length;
+        if (totalCount === 0) {
+            return null;
+        }
+        const isStacked = totalCount > 1;
+        const topToast = this.state.toasts[0];
+        const {title, icon, key, component, props} = topToast;
+
+        const containerClasses = classNames("mx_ToastContainer", {
+            "mx_ToastContainer_stacked": isStacked,
+        });
+
+        const toastClasses = classNames("mx_Toast_toast", {
+            "mx_Toast_hasIcon": icon,
+            [`mx_Toast_icon_${icon}`]: icon,
+        });
+
+        const countIndicator = isStacked ? _t(" (1/%(totalCount)s)", {totalCount}) : null;
+
+        const toastProps = Object.assign({}, props, {
+            dismiss: this.dismissTopToast,
+            key,
+        });
+
+        return (
+            <div className={containerClasses}>
+                <div className={toastClasses}>
+                    <h2>{title}{countIndicator}</h2>
+                    <div className="mx_Toast_body">{React.createElement(component, toastProps)}</div>
+                </div>
+            </div>
+        );
+    }
+}

src/components/views/elements/FormButton.js

@@ -0,0 +1,28 @@
+/*
+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 AccessibleButton from "./AccessibleButton";
+
+export default function FormButton(props) {
+    const {className, label, kind, ...restProps} = props;
+    const newClassName = (className || "") + " mx_FormButton";
+    const allProps = Object.assign({}, restProps,
+        {className: newClassName, kind: kind || "primary", children: [label]});
+    return React.createElement(AccessibleButton, allProps);
+}
+
+FormButton.propTypes = AccessibleButton.propTypes;

src/components/views/messages/MKeyVerificationRequest.js

@@ -111,10 +111,10 @@ export default class MKeyVerificationRequest extends React.Component {
                 userLabelForEventRoom(fromUserId, mxEvent)}</div>);
             const isResolved = !(this.state.accepted || this.state.cancelled || this.state.done);
             if (isResolved) {
-                const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+                const FormButton = sdk.getComponent("elements.FormButton");
                 stateNode = (<div className="mx_KeyVerification_buttons">
-                    <AccessibleButton kind="decline" onClick={this._onRejectClicked}>{_t("Decline")}</AccessibleButton>
-                    <AccessibleButton kind="accept" onClick={this._onAcceptClicked}>{_t("Accept")}</AccessibleButton>
+                    <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
+                    <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
                 </div>);
             }
         } else if (isOwn) { // request sent by us

src/components/views/toasts/VerificationRequestToast.js

@@ -0,0 +1,123 @@
+/*
+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 sdk from "../../../index";
+import { _t } from '../../../languageHandler';
+import Modal from "../../../Modal";
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
+import KeyVerificationStateObserver, {userLabelForEventRoom} from "../../../utils/KeyVerificationStateObserver";
+import dis from "../../../dispatcher";
+
+export default class VerificationRequestToast extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        const {event, timeout} = props.request;
+        // to_device requests don't have a timestamp, so consider them age=0
+        const age = event.getTs() ? event.getLocalAge() : 0;
+        const remaining = Math.max(0, timeout - age);
+        const counter = Math.ceil(remaining / 1000);
+        this.state = {counter};
+        if (this.props.requestObserver) {
+            this.props.requestObserver.setCallback(this._checkRequestIsPending);
+        }
+    }
+
+    componentDidMount() {
+        if (this.props.requestObserver) {
+            this.props.requestObserver.attach();
+            this._checkRequestIsPending();
+        }
+        this._intervalHandle = setInterval(() => {
+            let {counter} = this.state;
+            counter -= 1;
+            if (counter <= 0) {
+                this.cancel();
+            } else {
+                this.setState({counter});
+            }
+        }, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this._intervalHandle);
+        if (this.props.requestObserver) {
+            this.props.requestObserver.detach();
+        }
+    }
+
+    _checkRequestIsPending = () => {
+        if (!this.props.requestObserver.pending) {
+            this.props.dismiss();
+        }
+    }
+
+    cancel = () => {
+        this.props.dismiss();
+        try {
+            this.props.request.cancel();
+        } catch (err) {
+            console.error("Error while cancelling verification request", err);
+        }
+    }
+
+    accept = () => {
+        this.props.dismiss();
+        const {event} = this.props.request;
+        // no room id for to_device requests
+        if (event.getRoomId()) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: event.getRoomId(),
+                should_peek: false,
+            });
+        }
+
+        const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
+        const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
+        Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {verifier});
+    };
+
+    render() {
+        const FormButton = sdk.getComponent("elements.FormButton");
+        const {event} = this.props.request;
+        const userId = event.getSender();
+        let nameLabel = event.getRoomId() ? userLabelForEventRoom(userId, event) : userId;
+        // for legacy to_device verification requests
+        if (nameLabel === userId) {
+            const client = MatrixClientPeg.get();
+            const user = client.getUser(event.getSender());
+            if (user && user.displayName) {
+                nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+            }
+        }
+        return (<div>
+            <div className="mx_Toast_description">{nameLabel}</div>
+            <div className="mx_Toast_buttons">
+                <FormButton label={_t("Decline (%(counter)s)", {counter: this.state.counter})} kind="danger" onClick={this.cancel} />
+                <FormButton label={_t("Accept")} onClick={this.accept} />
+            </div>
+        </div>);
+    }
+}
+
+VerificationRequestToast.propTypes = {
+    dismiss: PropTypes.func.isRequired,
+    request: PropTypes.object.isRequired,
+    requestObserver: PropTypes.instanceOf(KeyVerificationStateObserver),
+};