Merge pull request #4506 from matrix-org/dbkr/aggregate_device_verify_toasts

Aggregate device verify toasts

src/components/structures/RightPanel.js

@@ -221,10 +221,27 @@ export default class RightPanel extends React.Component {
             case RIGHT_PANEL_PHASES.EncryptionPanel:
                 if (SettingsStore.getValue("feature_cross_signing")) {
                     const onClose = () => {
-                        dis.dispatch({
-                            action: "view_user",
-                            member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ? this.state.member : null,
-                        });
+                        // XXX: There are three different ways of 'closing' this panel depending on what state
+                        // things are in... this knows far more than it should do about the state of the rest
+                        // of the app and is generally a bit silly.
+                        if (this.props.user) {
+                            // If we have a user prop then we're displaying a user from the 'user' page type
+                            // in LoggedInView, so need to change the page type to close the panel (we switch
+                            // to the home page which is not obviosuly the correct thing to do, but I'm not sure
+                            // anything else is - we could hide the close button altogether?)
+                            dis.dispatch({
+                                action: "view_home_page",
+                            });
+                        } else {
+                            // Otherwise we have got our user from RoomViewStore which means we're being shown
+                            // within a room, so go back to the member panel if we were in the encryption panel,
+                            // or the member list if we were in the member panel... phew.
+                            dis.dispatch({
+                                action: "view_user",
+                                member: this.state.phase === RIGHT_PANEL_PHASES.EncryptionPanel ?
+                                    this.state.member : null,
+                            });
+                        }
                     };
                     panel = <UserInfo
                         user={this.state.member}

src/components/views/right_panel/UserInfo.js

@@ -181,9 +181,7 @@ function DeviceItem({userId, device}) {
     });
 
     const onDeviceClick = () => {
-        if (!isVerified) {
-            verifyDevice(cli.getUser(userId), device);
-        }
+        verifyDevice(cli.getUser(userId), device);
     };
 
     const deviceName = device.ambiguous ?
@@ -191,17 +189,29 @@ function DeviceItem({userId, device}) {
             device.getDisplayName();
     let trustedLabel = null;
     if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (
-        <AccessibleButton
-            className={classes}
-            title={device.deviceId}
-            onClick={onDeviceClick}
-        >
-            <div className={iconClasses} />
-            <div className="mx_UserInfo_device_name">{deviceName}</div>
-            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-        </AccessibleButton>
-    );
+
+
+    if (isVerified) {
+        return (
+            <div className={classes} title={device.deviceId} >
+                <div className={iconClasses} />
+                <div className="mx_UserInfo_device_name">{deviceName}</div>
+                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+            </div>
+        );
+    } else {
+        return (
+            <AccessibleButton
+                className={classes}
+                title={device.deviceId}
+                onClick={onDeviceClick}
+            >
+                <div className={iconClasses} />
+                <div className="mx_UserInfo_device_name">{deviceName}</div>
+                <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+            </AccessibleButton>
+        );
+    }
 }
 
 function DevicesSection({devices, userId, loading}) {

src/components/views/toasts/UnverifiedSessionToast.js

@@ -15,52 +15,32 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import Modal from "../../../Modal";
+import dis from "../../../dispatcher";
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import DeviceListener from '../../../DeviceListener';
-import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog';
 import FormButton from '../elements/FormButton';
 import { replaceableComponent } from '../../../utils/replaceableComponent';
 
 @replaceableComponent("views.toasts.UnverifiedSessionToast")
 export default class UnverifiedSessionToast extends React.PureComponent {
-    static propTypes = {
-        toastKey: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-    };
-
     _onLaterClick = () => {
-        const { device } = this.props;
-        DeviceListener.sharedInstance().dismissVerification(device.deviceId);
+        DeviceListener.sharedInstance().dismissVerifications();
     };
 
     _onReviewClick = async () => {
-        const { device } = this.props;
+        DeviceListener.sharedInstance().dismissVerifications();
 
-        Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, {
+        dis.dispatch({
+            action: 'view_user_info',
             userId: MatrixClientPeg.get().getUserId(),
-            device,
-            onFinished: (r) => {
-                if (!r) {
-                    /* This'll come back false if the user clicks "this wasn't me" and saw a warning dialog */
-                    this._onLaterClick();
-                }
-            },
-        }, null, /* priority = */ false, /* static = */ true);
+        });
     };
 
     render() {
-        const { device } = this.props;
-
         return (<div>
             <div className="mx_Toast_description">
-                <span className="mx_Toast_deviceName">
-                    {device.getDisplayName()}
-                </span> <span className="mx_Toast_deviceID">
-                    ({device.deviceId})
-                </span>
+                {_t("Verify your other sessions")}
             </div>
             <div className="mx_Toast_buttons" aria-live="off">
                 <FormButton label={_t("Later")} kind="danger" onClick={this._onLaterClick} />