Merge branch 'develop' into t3chguy/xsigning/fix_userinfo_e2eicon

src/components/views/auth/CaptchaForm.js

@@ -46,7 +46,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();

src/components/views/auth/CountryDropdown.js

@@ -60,7 +60,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -25,6 +25,7 @@ import classnames from 'classnames';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleButton from "../elements/AccessibleButton";
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -59,11 +60,21 @@ import SettingsStore from "../../../settings/SettingsStore";
  *                         session to be failed and the process to go back to the start.
  * setEmailSid:            m.login.email.identity only: a function to be called with the
  *                         email sid after a token is requested.
+ * onPhaseChange:          A function which is called when the stage's phase changes. If
+ *                         the stage has no phases, call this with DEFAULT_PHASE. Takes
+ *                         one argument, the phase, and is always defined/required.
+ * continueText:           For stages which have a continue button, the text to use.
+ * continueKind:           For stages which have a continue button, the style of button to
+ *                         use. For example, 'danger' or 'primary'.
+ * onCancel                A function with no arguments which is called by the stage if the
+ *                         user knowingly cancelled/dismissed the authentication attempt.
  *
  * Each component may also provide the following functions (beyond the standard React ones):
  *    focus: set the input focus appropriately in the form.
  */
 
+export const DEFAULT_PHASE = 0;
+
 export const PasswordAuthEntry = createReactClass({
     displayName: 'PasswordAuthEntry',
 
@@ -78,6 +89,11 @@ export const PasswordAuthEntry = createReactClass({
         // is the auth logic currently waiting for something to
         // happen?
         busy: PropTypes.bool,
+        onPhaseChange: PropTypes.func.isRequired,
+    },
+
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
     },
 
     getInitialState: function() {
@@ -175,6 +191,11 @@ export const RecaptchaAuthEntry = createReactClass({
         stageParams: PropTypes.object.isRequired,
         errorText: PropTypes.string,
         busy: PropTypes.bool,
+        onPhaseChange: PropTypes.func.isRequired,
+    },
+
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
     },
 
     _onCaptchaResponse: function(response) {
@@ -236,8 +257,14 @@ export const TermsAuthEntry = createReactClass({
         errorText: PropTypes.string,
         busy: PropTypes.bool,
         showContinue: PropTypes.bool,
+        onPhaseChange: PropTypes.func.isRequired,
     },
 
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
+    },
+
+    // TODO: [REACT-WARNING] Move this to constructor
     componentWillMount: function() {
         // example stageParams:
         //
@@ -378,6 +405,11 @@ export const EmailIdentityAuthEntry = createReactClass({
         stageState: PropTypes.object.isRequired,
         fail: PropTypes.func.isRequired,
         setEmailSid: PropTypes.func.isRequired,
+        onPhaseChange: PropTypes.func.isRequired,
+    },
+
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
     },
 
     getInitialState: function() {
@@ -420,6 +452,7 @@ export const MsisdnAuthEntry = createReactClass({
         clientSecret: PropTypes.func,
         submitAuthDict: PropTypes.func.isRequired,
         matrixClient: PropTypes.object,
+        onPhaseChange: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -429,7 +462,9 @@ export const MsisdnAuthEntry = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
+
         this._submitUrl = null;
         this._sid = null;
         this._msisdn = null;
@@ -564,6 +599,91 @@ export const MsisdnAuthEntry = createReactClass({
     },
 });
 
+export class SSOAuthEntry extends React.Component {
+    static propTypes = {
+        matrixClient: PropTypes.object.isRequired,
+        authSessionId: PropTypes.string.isRequired,
+        loginType: PropTypes.string.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        errorText: PropTypes.string,
+        onPhaseChange: PropTypes.func.isRequired,
+        continueText: PropTypes.string,
+        continueKind: PropTypes.string,
+        onCancel: PropTypes.func,
+    };
+
+    static LOGIN_TYPE = "m.login.sso";
+    static UNSTABLE_LOGIN_TYPE = "org.matrix.login.sso";
+
+    static PHASE_PREAUTH = 1; // button to start SSO
+    static PHASE_POSTAUTH = 2; // button to confirm SSO completed
+
+    _ssoUrl: string;
+
+    constructor(props) {
+        super(props);
+
+        // We actually send the user through fallback auth so we don't have to
+        // deal with a redirect back to us, losing application context.
+        this._ssoUrl = props.matrixClient.getFallbackAuthUrl(
+            this.props.loginType,
+            this.props.authSessionId,
+        );
+
+        this.state = {
+            phase: SSOAuthEntry.PHASE_PREAUTH,
+        };
+    }
+
+    componentDidMount(): void {
+        this.props.onPhaseChange(SSOAuthEntry.PHASE_PREAUTH);
+    }
+
+    onStartAuthClick = () => {
+        // Note: We don't use PlatformPeg's startSsoAuth functions because we almost
+        // certainly will need to open the thing in a new tab to avoid losing application
+        // context.
+
+        window.open(this._ssoUrl, '_blank');
+        this.setState({phase: SSOAuthEntry.PHASE_POSTAUTH});
+        this.props.onPhaseChange(SSOAuthEntry.PHASE_POSTAUTH);
+    };
+
+    onConfirmClick = () => {
+        this.props.submitAuthDict({});
+    };
+
+    render() {
+        let continueButton = null;
+        const cancelButton = (
+            <AccessibleButton
+                onClick={this.props.onCancel}
+                kind={this.props.continueKind ? (this.props.continueKind + '_outline') : 'primary_outline'}
+            >{_t("Cancel")}</AccessibleButton>
+        );
+        if (this.state.phase === SSOAuthEntry.PHASE_PREAUTH) {
+            continueButton = (
+                <AccessibleButton
+                    onClick={this.onStartAuthClick}
+                    kind={this.props.continueKind || 'primary'}
+                >{this.props.continueText || _t("Single Sign On")}</AccessibleButton>
+            );
+        } else {
+            continueButton = (
+                <AccessibleButton
+                    onClick={this.onConfirmClick}
+                    kind={this.props.continueKind || 'primary'}
+                >{this.props.continueText || _t("Confirm")}</AccessibleButton>
+            );
+        }
+
+        return <div className='mx_InteractiveAuthEntryComponents_sso_buttons'>
+            {cancelButton}
+            {continueButton}
+        </div>;
+    }
+}
+
 export const FallbackAuthEntry = createReactClass({
     displayName: 'FallbackAuthEntry',
 
@@ -573,9 +693,15 @@ export const FallbackAuthEntry = createReactClass({
         loginType: PropTypes.string.isRequired,
         submitAuthDict: PropTypes.func.isRequired,
         errorText: PropTypes.string,
+        onPhaseChange: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
+        this.props.onPhaseChange(DEFAULT_PHASE);
+    },
+
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // we have to make the user click a button, as browsers will block
         // the popup if we open it immediately.
         this._popupWindow = null;
@@ -597,7 +723,10 @@ export const FallbackAuthEntry = createReactClass({
         }
     },
 
-    _onShowFallbackClick: function() {
+    _onShowFallbackClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
         const url = this.props.matrixClient.getFallbackAuthUrl(
             this.props.loginType,
             this.props.authSessionId,
@@ -626,7 +755,7 @@ export const FallbackAuthEntry = createReactClass({
         }
         return (
             <div>
-                <a ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
+                <a href="" ref={this._fallbackButton} onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
                 {errorSection}
             </div>
         );
@@ -639,11 +768,12 @@ const AuthEntryComponents = [
     EmailIdentityAuthEntry,
     MsisdnAuthEntry,
     TermsAuthEntry,
+    SSOAuthEntry,
 ];
 
 export default function getEntryComponentForLoginType(loginType) {
     for (const c of AuthEntryComponents) {
-        if (c.LOGIN_TYPE == loginType) {
+        if (c.LOGIN_TYPE === loginType || c.UNSTABLE_LOGIN_TYPE === loginType) {
             return c;
         }
     }

src/components/views/auth/ServerConfig.js

@@ -72,7 +72,8 @@ export default class ServerConfig extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
         if (newProps.serverConfig.hsUrl === this.state.hsUrl &&
             newProps.serverConfig.isUrl === this.state.isUrl) return;
 

src/components/views/avatars/BaseAvatar.js

@@ -74,7 +74,8 @@ export default createReactClass({
         this.context.removeListener('sync', this.onClientSync);
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         // work out if we need to call setState (if the image URLs array has changed)
         const newState = this._getState(nextProps);
         const newImageUrls = newState.imageUrls;

src/components/views/avatars/MemberAvatar.js

@@ -51,7 +51,8 @@ export default createReactClass({
         return this._getState(this.props);
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         this.setState(this._getState(nextProps));
     },
 

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -49,7 +49,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         this._button = createRef();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }

src/components/views/avatars/RoomAvatar.js

@@ -63,7 +63,8 @@ export default createReactClass({
         }
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         this.setState({
             urls: this.getImageUrls(newProps),
         });

src/components/views/context_menus/MessageContextMenu.js

@@ -61,7 +61,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
         this._checkPermissions();
     },

src/components/views/context_menus/RoomTileContextMenu.js

@@ -82,7 +82,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
     },
 

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -35,7 +35,7 @@ export default class StatusMessageContextMenu extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         const { user } = this.props;
         if (!user) {
             return;

src/components/views/dialogs/AddressPickerDialog.js

@@ -107,6 +107,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._textinput = createRef();
     },

src/components/views/dialogs/BaseDialog.js

@@ -86,7 +86,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         this._matrixClient = MatrixClientPeg.get();
     },
 

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -55,7 +55,8 @@ export default createReactClass({
         askReason: false,
     }),
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._reasonField = null;
     },
 

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -279,6 +279,7 @@ export default class DeviceVerifyDialog extends React.Component {
             onDone={this._onSasMatchesClick}
             isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
             onStartEmoji={this._onUseSasClick}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/DevtoolsDialog.js

@@ -267,7 +267,8 @@ class FilteredList extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (this.props.children === nextProps.children && this.props.query === nextProps.query) return;
         this.setState({
             filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query),

src/components/views/dialogs/IncomingSasDialog.js

@@ -196,7 +196,8 @@ export default class IncomingSasDialog extends React.Component {
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
-            isSelf={this.props.verifier.userId == MatrixClientPeg.get().getUserId()}
+            isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
+            inDialog={true}
         />;
     }
 

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2020 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.
@@ -23,6 +24,7 @@ import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
+import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
 
 export default createReactClass({
     displayName: 'InteractiveAuthDialog',
@@ -44,12 +46,36 @@ export default createReactClass({
 
         onFinished: PropTypes.func.isRequired,
 
+        // Optional title and body to show when not showing a particular stage
         title: PropTypes.string,
+        body: PropTypes.string,
+
+        // Optional title and body pairs for particular stages and phases within
+        // those stages. Object structure/example is:
+        // {
+        //     "org.example.stage_type": {
+        //         1: {
+        //             "body": "This is a body for phase 1" of org.example.stage_type,
+        //             "title": "Title for phase 1 of org.example.stage_type"
+        //         },
+        //         2: {
+        //             "body": "This is a body for phase 2 of org.example.stage_type",
+        //             "title": "Title for phase 2 of org.example.stage_type"
+        //             "continueText": "Confirm identity with Example Auth",
+        //             "continueKind": "danger"
+        //         }
+        //     }
+        // }
+        aestheticsForStagePhases: PropTypes.object,
     },
 
     getInitialState: function() {
         return {
             authError: null,
+
+            // See _onUpdateStagePhase()
+            uiaStage: null,
+            uiaStagePhase: null,
         };
     },
 
@@ -57,12 +83,21 @@ export default createReactClass({
         if (success) {
             this.props.onFinished(true, result);
         } else {
-            this.setState({
-                authError: result,
-            });
+            if (result === ERROR_USER_CANCELLED) {
+                this.props.onFinished(false, null);
+            } else {
+                this.setState({
+                    authError: result,
+                });
+            }
         }
     },
 
+    _onUpdateStagePhase: function(newStage, newPhase) {
+        // We copy the stage and stage phase params into state for title selection in render()
+        this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
+    },
+
     _onDismissClick: function() {
         this.props.onFinished(false);
     },
@@ -71,6 +106,23 @@ export default createReactClass({
         const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
+        // Let's pick a title, body, and other params text that we'll show to the user. The order
+        // is most specific first, so stagePhase > our props > defaults.
+
+        let title = this.state.authError ? 'Error' : (this.props.title || _t('Authentication'));
+        let body = this.state.authError ? null : this.props.body;
+        let continueText = null;
+        let continueKind = null;
+        if (!this.state.authError && this.props.aestheticsForStagePhases) {
+            if (this.props.aestheticsForStagePhases[this.state.uiaStage]) {
+                const aesthetics = this.props.aestheticsForStagePhases[this.state.uiaStage][this.state.uiaStagePhase];
+                if (aesthetics && aesthetics.title) title = aesthetics.title;
+                if (aesthetics && aesthetics.body) body = aesthetics.body;
+                if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;
+                if (aesthetics && aesthetics.continueKind) continueKind = aesthetics.continueKind;
+            }
+        }
+
         let content;
         if (this.state.authError) {
             content = (
@@ -88,11 +140,16 @@ export default createReactClass({
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    <InteractiveAuth ref={this._collectInteractiveAuth}
+                    {body}
+                    <InteractiveAuth
+                        ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
                         onAuthFinished={this._onAuthFinished}
+                        onStagePhaseChange={this._onUpdateStagePhase}
+                        continueText={continueText}
+                        continueKind={continueKind}
                     />
                 </div>
             );
@@ -101,7 +158,7 @@ export default createReactClass({
         return (
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
-                title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+                title={title}
                 contentId='mx_Dialog_content'
             >
                 { content }

src/components/views/dialogs/RoomSettingsDialog.js

@@ -36,12 +36,12 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    componentWillMount() {
+    componentDidMount() {
         this._dispatcherRef = dis.register(this._onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
     }
 
     _onAction = (payload) => {
@@ -72,7 +72,7 @@ export default class RoomSettingsDialog extends React.Component {
         ));
         tabs.push(new Tab(
             _td("Notifications"),
-            "mx_RoomSettingsDialog_rolesIcon",
+            "mx_RoomSettingsDialog_notificationsIcon",
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -30,7 +30,7 @@ export default createReactClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: async function() {
+    componentDidMount: async function() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
         this.setState({busy: false});

src/components/views/dialogs/SetMxIdDialog.js

@@ -62,6 +62,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._input_value = createRef();
         this._uiAuth = createRef();

src/components/views/dialogs/SetPasswordDialog.js

@@ -75,8 +75,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
-        console.info('SetPasswordDialog component will mount');
+    componentDidMount: function() {
+        console.info('SetPasswordDialog component did mount');
     },
 
     _onPasswordChanged: function(res) {

src/components/views/dialogs/ShareDialog.js

@@ -121,7 +121,7 @@ export default class ShareDialog extends React.Component {
         });
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.target instanceof Room) {
             const permalinkCreator = new RoomPermalinkCreator(this.props.target);
             permalinkCreator.load();

src/components/views/dialogs/SlashCommandHelpDialog.js

@@ -16,14 +16,14 @@ limitations under the License.
 
 import React from 'react';
 import {_t} from "../../../languageHandler";
-import {CommandCategories, CommandMap} from "../../../SlashCommands";
+import {CommandCategories, Commands} from "../../../SlashCommands";
 import * as sdk from "../../../index";
 
 export default ({onFinished}) => {
     const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
 
     const categories = {};
-    Object.values(CommandMap).forEach(cmd => {
+    Commands.forEach(cmd => {
         if (!categories[cmd.category]) {
             categories[cmd.category] = [];
         }
@@ -41,7 +41,7 @@ export default ({onFinished}) => {
 
         categories[category].forEach(cmd => {
             rows.push(<tr key={cmd.command}>
-                <td><strong>{cmd.command}</strong></td>
+                <td><strong>{cmd.getCommand()}</strong></td>
                 <td>{cmd.args}</td>
                 <td>{cmd.description}</td>
             </tr>);

src/components/views/dialogs/TextInputDialog.js

@@ -55,6 +55,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._field = createRef();
     },

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -87,7 +87,7 @@ export default createReactClass({
         onSend: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
     },
 

src/components/views/dialogs/VerificationRequestDialog.js

@@ -30,16 +30,29 @@ export default class VerificationRequestDialog extends React.Component {
     constructor(...args) {
         super(...args);
         this.onFinished = this.onFinished.bind(this);
+        this.state = {};
+        if (this.props.verificationRequest) {
+            this.state.verificationRequest = this.props.verificationRequest;
+        } else if (this.props.verificationRequestPromise) {
+            this.props.verificationRequestPromise.then(r => {
+                this.setState({verificationRequest: r});
+            });
+        }
     }
 
     render() {
         const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
         const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
+        const request = this.state.verificationRequest;
+        const otherUserId = request && request.otherUserId;
         const member = this.props.member ||
-            MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId);
+            otherUserId && MatrixClientPeg.get().getUser(otherUserId);
+        const title = request && request.isSelfVerification ?
+            _t("Verify this session") : _t("Verification Request");
+
         return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
                 contentId="mx_Dialog_content"
-                title={_t("Verification Request")}
+                title={title}
                 hasCancel={true}
             >
             <EncryptionPanel
@@ -48,6 +61,7 @@ export default class VerificationRequestDialog extends React.Component {
                 verificationRequestPromise={this.props.verificationRequestPromise}
                 onClose={this.props.onFinished}
                 member={member}
+                inDialog={true}
             />
         </BaseDialog>;
     }

src/components/views/elements/AddressSelector.js

@@ -46,7 +46,8 @@ export default createReactClass({
         };
     },
 
-    componentWillReceiveProps: function(props) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(props) {
         // Make sure the selected item isn't outside the list bounds
         const selected = this.state.selected;
         const maxSelected = this._maxSelected(props.addressList);

src/components/views/elements/AppTile.js

@@ -2,6 +2,7 @@
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 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.
@@ -41,12 +42,30 @@ import PersistedElement from "./PersistedElement";
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
 
+/**
+ * Does template substitution on a URL (or any string). Variables will be
+ * passed through encodeURIComponent.
+ * @param {string} uriTemplate The path with template variables e.g. '/foo/$bar'.
+ * @param {Object} variables The key/value pairs to replace the template
+ * variables with. E.g. { '$bar': 'baz' }.
+ * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
+ */
+function uriFromTemplate(uriTemplate, variables) {
+    let out = uriTemplate;
+    for (const [key, val] of Object.entries(variables)) {
+        out = out.replace(
+            '$' + key, encodeURIComponent(val),
+        );
+    }
+    return out;
+}
+
 export default class AppTile extends React.Component {
     constructor(props) {
         super(props);
 
         // The key used for PersistedElement
-        this._persistKey = 'widget_' + this.props.id;
+        this._persistKey = 'widget_' + this.props.app.id;
 
         this.state = this._getNewState(props);
 
@@ -78,7 +97,7 @@ export default class AppTile extends React.Component {
         // This is a function to make the impact of calling SettingsStore slightly less
         const hasPermissionToLoad = () => {
             const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", newProps.room.roomId);
-            return !!currentlyAllowedWidgets[newProps.eventId];
+            return !!currentlyAllowedWidgets[newProps.app.eventId];
         };
 
         const PersistedElement = sdk.getComponent("elements.PersistedElement");
@@ -86,7 +105,7 @@ export default class AppTile extends React.Component {
             initialising: true, // True while we are mangling the widget URL
             // True while the iframe content is loading
             loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
-            widgetUrl: this._addWurlParams(newProps.url),
+            widgetUrl: this._addWurlParams(newProps.app.url),
             // Assume that widget has permission to load if we are the user who
             // added it to the room, or if explicitly granted by the user
             hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(),
@@ -103,7 +122,7 @@ export default class AppTile extends React.Component {
      * @return {Boolean}            True if capability supported
      */
     _hasCapability(capability) {
-        return ActiveWidgetStore.widgetHasCapability(this.props.id, capability);
+        return ActiveWidgetStore.widgetHasCapability(this.props.app.id, capability);
     }
 
     /**
@@ -125,7 +144,7 @@ export default class AppTile extends React.Component {
 
         const params = qs.parse(u.query);
         // Append widget ID to query parameters
-        params.widgetId = this.props.id;
+        params.widgetId = this.props.app.id;
         // Append current / parent URL, minus the hash because that will change when
         // we view a different room (ie. may change for persistent widgets)
         params.parentUrl = window.location.href.split('#', 2)[0];
@@ -137,35 +156,33 @@ export default class AppTile extends React.Component {
 
     isMixedContent() {
         const parentContentProtocol = window.location.protocol;
-        const u = url.parse(this.props.url);
+        const u = url.parse(this.props.app.url);
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:",
-            parentContentProtocol, childContentProtocol, window.location, this.props.url);
+            parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
             return true;
         }
         return false;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
         if (this.props.show && this.state.hasPermissionToLoad) {
             this.setScalarToken();
         }
-    }
 
-    componentDidMount() {
         // Widget action listeners
         this.dispatcherRef = dis.register(this._onAction);
     }
 
     componentWillUnmount() {
         // Widget action listeners
-        dis.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
 
         // if it's not remaining on screen, get rid of the PersistedElement container
-        if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) {
-            ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+        if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }
@@ -176,11 +193,11 @@ export default class AppTile extends React.Component {
      * Component initialisation is only complete when this function has resolved
      */
     setScalarToken() {
-        if (!WidgetUtils.isScalarUrl(this.props.url)) {
+        if (!WidgetUtils.isScalarUrl(this.props.app.url)) {
             console.warn('Non-scalar widget, not setting scalar token!', url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -191,7 +208,7 @@ export default class AppTile extends React.Component {
             console.warn("No integration manager - not setting scalar token", url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -204,7 +221,7 @@ export default class AppTile extends React.Component {
             console.warn('Non-scalar manager, not setting scalar token!', url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -217,7 +234,7 @@ export default class AppTile extends React.Component {
         this._scalarClient.getScalarToken().then((token) => {
             // Append scalar_token as a query param if not already present
             this._scalarClient.scalarToken = token;
-            const u = url.parse(this._addWurlParams(this.props.url));
+            const u = url.parse(this._addWurlParams(this.props.app.url));
             const params = qs.parse(u.query);
             if (!params.scalar_token) {
                 params.scalar_token = encodeURIComponent(token);
@@ -245,8 +262,9 @@ export default class AppTile extends React.Component {
         });
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.url !== this.props.url) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+        if (nextProps.app.url !== this.props.app.url) {
             this._getNewState(nextProps);
             // Fetch IM token for new URL if we're showing and have permission to load
             if (this.props.show && this.state.hasPermissionToLoad) {
@@ -280,7 +298,7 @@ export default class AppTile extends React.Component {
     }
 
     _onEditClick() {
-        console.log("Edit widget ID ", this.props.id);
+        console.log("Edit widget ID ", this.props.app.id);
         if (this.props.onEditClick) {
             this.props.onEditClick();
         } else {
@@ -289,21 +307,21 @@ export default class AppTile extends React.Component {
                 IntegrationManagers.sharedInstance().openAll(
                     this.props.room,
                     'type_' + this.props.type,
-                    this.props.id,
+                    this.props.app.id,
                 );
             } else {
                 IntegrationManagers.sharedInstance().getPrimaryManager().open(
                     this.props.room,
                     'type_' + this.props.type,
-                    this.props.id,
+                    this.props.app.id,
                 );
             }
         }
     }
 
     _onSnapshotClick() {
-        console.warn("Requesting widget snapshot");
-        ActiveWidgetStore.getWidgetMessaging(this.props.id).getScreenshot()
+        console.log("Requesting widget snapshot");
+        ActiveWidgetStore.getWidgetMessaging(this.props.app.id).getScreenshot()
             .catch((err) => {
                 console.error("Failed to get screenshot", err);
             })
@@ -351,7 +369,7 @@ export default class AppTile extends React.Component {
 
                     WidgetUtils.setRoomWidget(
                         this.props.room.roomId,
-                        this.props.id,
+                        this.props.app.id,
                     ).catch((e) => {
                         console.error('Failed to delete widget', e);
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -369,7 +387,7 @@ export default class AppTile extends React.Component {
     }
 
     _onRevokeClicked() {
-        console.info("Revoke widget permissions - %s", this.props.id);
+        console.info("Revoke widget permissions - %s", this.props.app.id);
         this._revokeWidgetPermission();
     }
 
@@ -380,10 +398,10 @@ export default class AppTile extends React.Component {
         // Destroy the old widget messaging before starting it back up again. Some widgets
         // have startup routines that run when they are loaded, so we just need to reinitialize
         // the messaging for them.
-        ActiveWidgetStore.delWidgetMessaging(this.props.id);
+        ActiveWidgetStore.delWidgetMessaging(this.props.app.id);
         this._setupWidgetMessaging();
 
-        ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
+        ActiveWidgetStore.setRoomId(this.props.app.id, this.props.room.roomId);
         this.setState({loading: false});
     }
 
@@ -391,10 +409,10 @@ export default class AppTile extends React.Component {
         // FIXME: There's probably no reason to do this here: it should probably be done entirely
         // in ActiveWidgetStore.
         const widgetMessaging = new WidgetMessaging(
-            this.props.id, this.props.url, this.props.userWidget, this._appFrame.current.contentWindow);
-        ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging);
+            this.props.app.id, this._getRenderedUrl(), this.props.userWidget, this._appFrame.current.contentWindow);
+        ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging);
         widgetMessaging.getCapabilities().then((requestedCapabilities) => {
-            console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities);
+            console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities);
             requestedCapabilities = requestedCapabilities || [];
 
             // Allow whitelisted capabilities
@@ -406,7 +424,7 @@ export default class AppTile extends React.Component {
                 }, this.props.whitelistCapabilities);
 
                 if (requestedWhitelistCapabilies.length > 0 ) {
-                    console.warn(`Widget ${this.props.id} allowing requested, whitelisted properties: ` +
+                    console.log(`Widget ${this.props.app.id} allowing requested, whitelisted properties: ` +
                         requestedWhitelistCapabilies,
                     );
                 }
@@ -414,7 +432,7 @@ export default class AppTile extends React.Component {
 
             // TODO -- Add UI to warn about and optionally allow requested capabilities
 
-            ActiveWidgetStore.setWidgetCapabilities(this.props.id, requestedWhitelistCapabilies);
+            ActiveWidgetStore.setWidgetCapabilities(this.props.app.id, requestedWhitelistCapabilies);
 
             if (this.props.onCapabilityRequest) {
                 this.props.onCapabilityRequest(requestedCapabilities);
@@ -422,16 +440,16 @@ export default class AppTile extends React.Component {
 
             // We only tell Jitsi widgets that we're ready because they're realistically the only ones
             // using this custom extension to the widget API.
-            if (this.props.type === 'jitsi') {
+            if (this.props.app.type === 'jitsi') {
                 widgetMessaging.flagReadyToContinue();
             }
         }).catch((err) => {
-            console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
+            console.log(`Failed to get capabilities for widget type ${this.props.app.type}`, this.props.app.id, err);
         });
     }
 
     _onAction(payload) {
-        if (payload.widgetId === this.props.id) {
+        if (payload.widgetId === this.props.app.id) {
             switch (payload.action) {
                 case 'm.sticker':
                 if (this._hasCapability('m.sticker')) {
@@ -460,9 +478,9 @@ export default class AppTile extends React.Component {
 
     _grantWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Granting permission for widget to load: " + this.props.eventId);
+        console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = true;
+        current[this.props.app.eventId] = true;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: true});
 
@@ -476,14 +494,14 @@ export default class AppTile extends React.Component {
 
     _revokeWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Revoking permission for widget to load: " + this.props.eventId);
+        console.info("Revoking permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = false;
+        current[this.props.app.eventId] = false;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: false});
 
             // Force the widget to be non-persistent (able to be deleted/forgotten)
-            ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }).catch(err => {
@@ -494,8 +512,8 @@ export default class AppTile extends React.Component {
 
     formatAppTileName() {
         let appTileName = "No name";
-        if (this.props.name && this.props.name.trim()) {
-            appTileName = this.props.name.trim();
+        if (this.props.app.name && this.props.app.name.trim()) {
+            appTileName = this.props.app.name.trim();
         }
         return appTileName;
     }
@@ -519,20 +537,78 @@ export default class AppTile extends React.Component {
         }
     }
 
-    _getSafeUrl() {
-        const parsedWidgetUrl = url.parse(this.state.widgetUrl, true);
+    /**
+     * Replace the widget template variables in a url with their values
+     *
+     * @param {string} u The URL with template variables
+     *
+     * @returns {string} url with temlate variables replaced
+     */
+    _templatedUrl(u) {
+        const myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUser = MatrixClientPeg.get().getUser(myUserId);
+        const vars = Object.assign({
+            domain: "jitsi.riot.im", // v1 widgets have this hardcoded
+        }, this.props.app.data, {
+            'matrix_user_id': myUserId,
+            'matrix_room_id': this.props.room.roomId,
+            'matrix_display_name': myUser ? myUser.displayName : myUserId,
+            'matrix_avatar_url': myUser ? MatrixClientPeg.get().mxcUrlToHttp(myUser.avatarUrl) : '',
+
+            // TODO: Namespace themes through some standard
+            'theme': SettingsStore.getValue("theme"),
+        });
+
+        if (vars.conferenceId === undefined) {
+            // we'll need to parse the conference ID out of the URL for v1 Jitsi widgets
+            const parsedUrl = new URL(this.props.app.url);
+            vars.conferenceId = parsedUrl.searchParams.get("confId");
+        }
+
+        return uriFromTemplate(u, vars);
+    }
+
+    /**
+     * Get the URL used in the iframe
+     * In cases where we supply our own UI for a widget, this is an internal
+     * URL different to the one used if the widget is popped out to a separate
+     * tab / browser
+     *
+     * @returns {string} url
+     */
+    _getRenderedUrl() {
+        let url;
+
+        if (this.props.app.type === 'jitsi') {
+            console.log("Replacing Jitsi widget URL with local wrapper");
+            url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true});
+            url = this._addWurlParams(url);
+        } else {
+            url = this._getSafeUrl(this.state.widgetUrl);
+        }
+        return this._templatedUrl(url);
+    }
+
+    _getPopoutUrl() {
+        if (this.props.app.type === 'jitsi') {
+            return this._templatedUrl(
+                WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: false}),
+            );
+        } else {
+            // use app.url, not state.widgetUrl, because we want the one without
+            // the wURL params for the popped-out version.
+            return this._templatedUrl(this._getSafeUrl(this.props.app.url));
+        }
+    }
+
+    _getSafeUrl(u) {
+        const parsedWidgetUrl = url.parse(u, true);
         if (ENABLE_REACT_PERF) {
             parsedWidgetUrl.search = null;
             parsedWidgetUrl.query.react_perf = true;
         }
         let safeWidgetUrl = '';
-        if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol) || (
-            // Check if the widget URL is a Jitsi widget in Electron
-            parsedWidgetUrl.protocol === 'vector:'
-            && parsedWidgetUrl.host === 'vector'
-            && parsedWidgetUrl.pathname === '/webapp/jitsi.html'
-            && this.props.type === 'jitsi'
-        )) {
+        if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
         return safeWidgetUrl;
@@ -562,9 +638,9 @@ export default class AppTile extends React.Component {
 
     _onPopoutWidgetClick() {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
-        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
+        // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noreferrer noopener'}).click();
+            { target: '_blank', href: this._getPopoutUrl(), rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {
@@ -641,7 +717,7 @@ export default class AppTile extends React.Component {
                             <iframe
                                 allow={iframeFeatures}
                                 ref={this._appFrame}
-                                src={this._getSafeUrl()}
+                                src={this._getRenderedUrl()}
                                 allowFullScreen={true}
                                 sandbox={sandboxFlags}
                                 onLoad={this._onLoaded} />
@@ -706,7 +782,7 @@ export default class AppTile extends React.Component {
         }
 
         return <React.Fragment>
-            <div className={appTileClass} id={this.props.id}>
+            <div className={appTileClass} id={this.props.app.id}>
                 { this.props.showMenubar &&
                 <div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
@@ -753,12 +829,8 @@ export default class AppTile extends React.Component {
 AppTile.displayName = 'AppTile';
 
 AppTile.propTypes = {
-    id: PropTypes.string.isRequired,
-    eventId: PropTypes.string, // required for room widgets
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    app: PropTypes.object.isRequired,
     room: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
     // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
     fullWidth: PropTypes.bool,
@@ -805,7 +877,6 @@ AppTile.propTypes = {
 };
 
 AppTile.defaultProps = {
-    url: "",
     waitForIframeLoad: true,
     showMenubar: true,
     showTitle: true,

src/components/views/elements/DeviceVerifyButtons.js

@@ -38,7 +38,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const cli = MatrixClientPeg.get();
         cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
     },

src/components/views/elements/Dropdown.js

@@ -116,7 +116,8 @@ export default class Dropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         this._button = createRef();
         // Listen for all clicks on the document so we can close the
         // menu when the user clicks somewhere else
@@ -127,7 +128,8 @@ export default class Dropdown extends React.Component {
         document.removeEventListener('click', this._onDocumentClick, false);
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (!nextProps.children || nextProps.children.length === 0) {
             return;
         }

src/components/views/elements/EditableText.js

@@ -62,7 +62,8 @@ export default createReactClass({
         };
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         if (nextProps.initialValue !== this.props.initialValue) {
             this.value = nextProps.initialValue;
             if (this._editable_div.current) {
@@ -71,7 +72,8 @@ export default createReactClass({
         }
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // we track value as an JS object field rather than in React state
         // as React doesn't play nice with contentEditable.
         this.value = '';

src/components/views/elements/EditableTextContainer.js

@@ -42,7 +42,7 @@ export default class EditableTextContainer extends React.Component {
         this._onValueChanged = this._onValueChanged.bind(this);
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.getInitialValue === undefined) {
             // use whatever was given in the initialValue property.
             return;

src/components/views/elements/Flair.js

@@ -81,7 +81,8 @@ export default class Flair extends React.Component {
         this._unmounted = true;
     }
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) {  // eslint-disable-line camelcase
         this._generateAvatars(newProps.groups);
     }
 

src/components/views/elements/LanguageDropdown.js

@@ -24,8 +24,8 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from "../../../languageHandler";
 
 function languageMatchesSearchQuery(query, language) {
-    if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
-    if (language.value.toUpperCase() == query.toUpperCase()) return true;
+    if (language.label.toUpperCase().includes(query.toUpperCase())) return true;
+    if (language.value.toUpperCase() === query.toUpperCase()) return true;
     return false;
 }
 
@@ -40,7 +40,7 @@ export default class LanguageDropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
             langs.sort(function(a, b) {
                 if (a.label < b.label) return -1;

src/components/views/elements/PersistedElement.js

@@ -113,10 +113,12 @@ export default class PersistedElement extends React.Component {
 
     componentDidMount() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentDidUpdate() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentWillUnmount() {
@@ -141,6 +143,14 @@ export default class PersistedElement extends React.Component {
         this.updateChildVisibility(this.child, true);
     }
 
+    renderApp() {
+        const content = <div ref={this.collectChild} style={this.props.style}>
+            {this.props.children}
+        </div>;
+
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
+    }
+
     updateChildVisibility(child, visible) {
         if (!child) return;
         child.style.display = visible ? 'block' : 'none';
@@ -160,12 +170,6 @@ export default class PersistedElement extends React.Component {
     }
 
     render() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
-
-        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
-
         return <div ref={this.collectChildContainer}></div>;
     }
 }

src/components/views/elements/PersistentApp.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 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.
@@ -33,7 +33,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
     },
@@ -75,11 +75,7 @@ export default createReactClass({
                 const AppTile = sdk.getComponent('elements.AppTile');
                 return <AppTile
                     key={app.id}
-                    id={app.id}
-                    eventId={app.eventId}
-                    url={app.url}
-                    name={app.name}
-                    type={app.type}
+                    app={app}
                     fullWidth={true}
                     room={persistentWidgetInRoom}
                     userId={MatrixClientPeg.get().credentials.userId}

src/components/views/elements/Pill.js

@@ -82,7 +82,8 @@ const Pill = createReactClass({
         };
     },
 
-    async componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    async UNSAFE_componentWillReceiveProps(nextProps) {
         let resourceId;
         let prefix;
 
@@ -155,10 +156,12 @@ const Pill = createReactClass({
         this.setState({resourceId, pillType, member, group, room});
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
-        this.componentWillReceiveProps(this.props);
+
+        // eslint-disable-next-line new-cap
+        this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
     },
 
     componentWillUnmount() {

src/components/views/elements/PowerSelector.js

@@ -62,11 +62,13 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
+        // TODO: [REACT-WARNING] Move this to class constructor
         this._initStateFromProps(this.props);
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         this._initStateFromProps(newProps);
     },
 

src/components/views/elements/ReplyThread.js

@@ -184,7 +184,7 @@ export default class ReplyThread extends React.Component {
             ref={ref} permalinkCreator={permalinkCreator} />;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         this.room = this.context.getRoom(this.props.parentEv.getRoomId());
         this.room.on("Room.redaction", this.onRoomRedaction);

src/components/views/elements/SyntaxHighlight.js

@@ -31,7 +31,6 @@ export default class SyntaxHighlight extends React.Component {
     }
 
     // componentDidUpdate used here for reusability
-    // componentWillReceiveProps fires too early to call highlightBlock on.
     componentDidUpdate() {
         if (this._el) highlightBlock(this._el);
     }

src/components/views/elements/TintableSvg.js

@@ -36,11 +36,9 @@ const TintableSvg = createReactClass({
         idSequence: 0,
     },
 
-    componentWillMount: function() {
-        this.fixups = [];
-    },
-
     componentDidMount: function() {
+        this.fixups = [];
+
         this.id = TintableSvg.idSequence++;
         TintableSvg.mounts[this.id] = this;
     },

src/components/views/elements/UserSelector.js

@@ -35,6 +35,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._user_id_input = createRef();
     },

src/components/views/elements/crypto/VerificationQRCode.js

@@ -17,95 +17,17 @@ limitations under the License.
 import React from "react";
 import PropTypes from "prop-types";
 import {replaceableComponent} from "../../../../utils/replaceableComponent";
-import {MatrixClientPeg} from "../../../../MatrixClientPeg";
-import {VerificationRequest} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
-import {ToDeviceChannel} from "matrix-js-sdk/src/crypto/verification/request/ToDeviceChannel";
-import {decodeBase64} from "matrix-js-sdk/src/crypto/olmlib";
 import Spinner from "../Spinner";
 import * as QRCode from "qrcode";
 
-const CODE_VERSION = 0x02; // the version of binary QR codes we support
-const BINARY_PREFIX = "MATRIX"; // ASCII, used to prefix the binary format
-const MODE_VERIFY_OTHER_USER = 0x00; // Verifying someone who isn't us
-const MODE_VERIFY_SELF_TRUSTED = 0x01; // We trust the master key
-const MODE_VERIFY_SELF_UNTRUSTED = 0x02; // We do not trust the master key
-
 @replaceableComponent("views.elements.crypto.VerificationQRCode")
 export default class VerificationQRCode extends React.PureComponent {
     static propTypes = {
-        prefix: PropTypes.string.isRequired,
-        version: PropTypes.number.isRequired,
-        mode: PropTypes.number.isRequired,
-        transactionId: PropTypes.string.isRequired, // or requestEventId
-        firstKeyB64: PropTypes.string.isRequired,
-        secondKeyB64: PropTypes.string.isRequired,
-        secretB64: PropTypes.string.isRequired,
+        qrCodeData: PropTypes.object.isRequired,
     };
 
-    static async getPropsForRequest(verificationRequest: VerificationRequest) {
-        const cli = MatrixClientPeg.get();
-        const myUserId = cli.getUserId();
-        const otherUserId = verificationRequest.otherUserId;
-
-        let mode = MODE_VERIFY_OTHER_USER;
-        if (myUserId === otherUserId) {
-            // Mode changes depending on whether or not we trust the master cross signing key
-            const myTrust = cli.checkUserTrust(myUserId);
-            if (myTrust.isCrossSigningVerified()) {
-                mode = MODE_VERIFY_SELF_TRUSTED;
-            } else {
-                mode = MODE_VERIFY_SELF_UNTRUSTED;
-            }
-        }
-
-        const requestEvent = verificationRequest.requestEvent;
-        const transactionId = requestEvent.getId()
-            ? requestEvent.getId()
-            : ToDeviceChannel.getTransactionId(requestEvent);
-
-        const qrProps = {
-            prefix: BINARY_PREFIX,
-            version: CODE_VERSION,
-            mode,
-            transactionId,
-            firstKeyB64: '', // worked out shortly
-            secondKeyB64: '', // worked out shortly
-            secretB64: verificationRequest.encodedSharedSecret,
-        };
-
-        const myCrossSigningInfo = cli.getStoredCrossSigningForUser(myUserId);
-        const myDevices = (await cli.getStoredDevicesForUser(myUserId)) || [];
-
-        if (mode === MODE_VERIFY_OTHER_USER) {
-            // First key is our master cross signing key
-            qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
-
-            // Second key is the other user's master cross signing key
-            const otherUserCrossSigningInfo = cli.getStoredCrossSigningForUser(otherUserId);
-            qrProps.secondKeyB64 = otherUserCrossSigningInfo.getId("master");
-        } else if (mode === MODE_VERIFY_SELF_TRUSTED) {
-            // First key is our master cross signing key
-            qrProps.firstKeyB64 = myCrossSigningInfo.getId("master");
-
-            // Second key is the other device's device key
-            const otherDevice = verificationRequest.targetDevice;
-            const otherDeviceId = otherDevice ? otherDevice.deviceId : null;
-            const device = myDevices.find(d => d.deviceId === otherDeviceId);
-            qrProps.secondKeyB64 = device.getFingerprint();
-        } else if (mode === MODE_VERIFY_SELF_UNTRUSTED) {
-            // First key is our device's key
-            qrProps.firstKeyB64 = cli.getDeviceEd25519Key();
-
-            // Second key is what we think our master cross signing key is
-            qrProps.secondKeyB64 = myCrossSigningInfo.getId("master");
-        }
-
-        return qrProps;
-    }
-
     constructor(props) {
         super(props);
-
         this.state = {
             dataUri: null,
         };
@@ -119,39 +41,8 @@ export default class VerificationQRCode extends React.PureComponent {
     }
 
     async generateQrCode() {
-        let buf = Buffer.alloc(0); // we'll concat our way through life
-
-        const appendByte = (b: number) => {
-            const tmpBuf = Buffer.from([b]);
-            buf = Buffer.concat([buf, tmpBuf]);
-        };
-        const appendInt = (i: number) => {
-            const tmpBuf = Buffer.alloc(2);
-            tmpBuf.writeInt16BE(i, 0);
-            buf = Buffer.concat([buf, tmpBuf]);
-        };
-        const appendStr = (s: string, enc: string, withLengthPrefix = true) => {
-            const tmpBuf = Buffer.from(s, enc);
-            if (withLengthPrefix) appendInt(tmpBuf.byteLength);
-            buf = Buffer.concat([buf, tmpBuf]);
-        };
-        const appendEncBase64 = (b64: string) => {
-            const b = decodeBase64(b64);
-            const tmpBuf = Buffer.from(b);
-            buf = Buffer.concat([buf, tmpBuf]);
-        };
-
-        // Actually build the buffer for the QR code
-        appendStr(this.props.prefix, "ascii", false);
-        appendByte(this.props.version);
-        appendByte(this.props.mode);
-        appendStr(this.props.transactionId, "utf-8");
-        appendEncBase64(this.props.firstKeyB64);
-        appendEncBase64(this.props.secondKeyB64);
-        appendEncBase64(this.props.secretB64);
-
         // Now actually assemble the QR code's data URI
-        const uri = await QRCode.toDataURL([{data: buf, mode: 'byte'}], {
+        const uri = await QRCode.toDataURL([{data: this.props.qrCodeData.buffer, mode: 'byte'}], {
             errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
         });
         this.setState({dataUri: uri});

src/components/views/groups/GroupMemberInfo.js

@@ -49,12 +49,13 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.groupId !== this.props.groupId) {
             this._unregisterGroupStore(this.props.groupId);
             this._initGroupStore(newProps.groupId);

src/components/views/groups/GroupMemberList.js

@@ -47,7 +47,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },

src/components/views/groups/GroupPublicityToggle.js

@@ -36,7 +36,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._initGroupStore(this.props.groupId);
     },
 

src/components/views/groups/GroupRoomInfo.js

@@ -47,11 +47,12 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._initGroupStore(this.props.groupId);
     },
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) {
         if (newProps.groupId !== this.props.groupId) {
             this._unregisterGroupStore(this.props.groupId);
             this._initGroupStore(newProps.groupId);

src/components/views/groups/GroupRoomList.js

@@ -39,7 +39,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
         this._initGroupStore(this.props.groupId);
     },

src/components/views/groups/GroupTile.js

@@ -55,7 +55,7 @@ const GroupTile = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         FlairStore.getGroupProfileCached(this.context, this.props.groupId).then((profile) => {
             this.setState({profile});
         }).catch((err) => {

src/components/views/groups/GroupUserSettings.js

@@ -34,7 +34,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this.context.getJoinedGroups().then((result) => {
             this.setState({groups: result.groups || [], error: null});
         }, (err) => {

src/components/views/messages/MFileBody.js

@@ -170,6 +170,7 @@ export default createReactClass({
         return MatrixClientPeg.get().mxcUrlToHttp(content.url);
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._iframe = createRef();
         this._dummyLink = createRef();

src/components/views/messages/MImageBody.js

@@ -67,11 +67,6 @@ export default class MImageBody extends React.Component {
         this._image = createRef();
     }
 
-    componentWillMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    }
-
     // FIXME: factor this out and aplpy it to MVideoBody and MAudioBody too!
     onClientSync(syncState, prevState) {
         if (this.unmounted) return;
@@ -258,6 +253,9 @@ export default class MImageBody extends React.Component {
     }
 
     componentDidMount() {
+        this.unmounted = false;
+        this.context.on('sync', this.onClientSync);
+
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
             let thumbnailPromise = Promise.resolve(null);

src/components/views/messages/MessageEvent.js

@@ -47,6 +47,7 @@ export default createReactClass({
         maxImageHeight: PropTypes.number,
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._body = createRef();
     },

src/components/views/messages/SenderProfile.js

@@ -42,7 +42,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this.unmounted = false;
         this._updateRelatedGroups();
 

src/components/views/messages/TextualBody.js

@@ -86,6 +86,7 @@ export default createReactClass({
         return successful;
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._content = createRef();
     },

src/components/views/right_panel/EncryptionInfo.js

@@ -28,14 +28,26 @@ export const PendingActionSpinner = ({text}) => {
     </div>;
 };
 
-const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification, isRoomEncrypted}) => {
+const EncryptionInfo = ({
+    waitingForOtherParty,
+    waitingForNetwork,
+    member,
+    onStartVerification,
+    isRoomEncrypted,
+    inDialog,
+    isSelfVerification,
+}) => {
     let content;
     if (waitingForOtherParty || waitingForNetwork) {
         let text;
         if (waitingForOtherParty) {
-            text = _t("Waiting for %(displayName)s to accept…", {
-                displayName: member.displayName || member.name || member.userId,
-            });
+            if (isSelfVerification) {
+                text = _t("Waiting for you to accept on your other session…");
+            } else {
+                text = _t("Waiting for %(displayName)s to accept…", {
+                    displayName: member.displayName || member.name || member.userId,
+                });
+            }
         } else {
             text = _t("Accepting…");
         }
@@ -66,6 +78,10 @@ const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStar
         );
     }
 
+    if (inDialog) {
+        return content;
+    }
+
     return <React.Fragment>
         <div className="mx_UserInfo_container">
             <h3>{_t("Encryption")}</h3>

src/components/views/right_panel/EncryptionPanel.js

@@ -22,6 +22,7 @@ import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {useAsyncMemo} from "../../../hooks/useAsyncMemo";
 import Modal from "../../../Modal";
 import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import * as sdk from "../../../index";
@@ -31,7 +32,7 @@ import {_t} from "../../../languageHandler";
 const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
 const EncryptionPanel = (props) => {
-    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted} = props;
+    const {verificationRequest, verificationRequestPromise, member, onClose, layout, isRoomEncrypted, inDialog} = props;
     const [request, setRequest] = useState(verificationRequest);
     // state to show a spinner immediately after clicking "start verification",
     // before we have a request
@@ -45,6 +46,12 @@ const EncryptionPanel = (props) => {
         }
     }, [verificationRequest]);
 
+    const deviceId = request && request.channel.deviceId;
+    const device = useAsyncMemo(() => {
+        const cli = MatrixClientPeg.get();
+        return cli.getStoredDevice(cli.getUserId(), deviceId);
+    }, [deviceId]);
+
     useEffect(() => {
         async function awaitPromise() {
             setRequesting(true);
@@ -112,6 +119,9 @@ const EncryptionPanel = (props) => {
     const requested =
         (!request && isRequesting) ||
         (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
+    const isSelfVerification = request ?
+        request.isSelfVerification :
+        member.userId === MatrixClientPeg.get().getUserId();
     if (!request || requested) {
         const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
         return (<React.Fragment>
@@ -120,8 +130,10 @@ const EncryptionPanel = (props) => {
                 isRoomEncrypted={isRoomEncrypted}
                 onStartVerification={onStartVerification}
                 member={member}
+                isSelfVerification={isSelfVerification}
                 waitingForOtherParty={requested && initiatedByMe}
-                waitingForNetwork={requested && !initiatedByMe} />
+                waitingForNetwork={requested && !initiatedByMe}
+                inDialog={inDialog} />
         </React.Fragment>);
     } else {
         return (<React.Fragment>
@@ -133,7 +145,9 @@ const EncryptionPanel = (props) => {
                 member={member}
                 request={request}
                 key={request.channel.transactionId}
-                phase={phase} />
+                inDialog={inDialog}
+                phase={phase}
+                device={device} />
         </React.Fragment>);
     }
 };
@@ -142,6 +156,7 @@ EncryptionPanel.propTypes = {
     onClose: PropTypes.func.isRequired,
     verificationRequest: PropTypes.object,
     layout: PropTypes.string,
+    inDialog: PropTypes.bool,
 };
 
 export default EncryptionPanel;

src/components/views/right_panel/HeaderButtons.js

@@ -40,7 +40,7 @@ export default class HeaderButtons extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._storeToken = RightPanelStore.getSharedInstance().addListener(this.onRightPanelUpdate.bind(this));
         this._dispatcherRef = dis.register(this.onAction.bind(this)); // used by subclasses
     }

src/components/views/right_panel/VerificationPanel.js

@@ -30,7 +30,7 @@ import {
     PHASE_READY,
     PHASE_DONE,
     PHASE_STARTED,
-    PHASE_CANCELLED, VerificationRequest,
+    PHASE_CANCELLED,
 } from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 import Spinner from "../elements/Spinner";
 
@@ -53,25 +53,11 @@ export default class VerificationPanel extends React.PureComponent {
 
     constructor(props) {
         super(props);
-        this.state = {
-            qrCodeProps: null, // generated by the VerificationQRCode component itself
-        };
+        this.state = {};
         this._hasVerifier = false;
-        if (this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD)) {
-            this._generateQRCodeProps(props.request);
-        }
     }
 
-    async _generateQRCodeProps(verificationRequest: VerificationRequest) {
-        try {
-            this.setState({qrCodeProps: await VerificationQRCode.getPropsForRequest(verificationRequest)});
-        } catch (e) {
-            console.error(e);
-            // Do nothing - we won't render a QR code.
-        }
-    }
-
-    renderQRPhase(pending) {
+    renderQRPhase() {
         const {member, request} = this.props;
         const showSAS = request.otherPartySupportsMethod(verificationMethods.SAS);
         const showQR = request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
@@ -86,16 +72,10 @@ export default class VerificationPanel extends React.PureComponent {
             let qrBlock;
             let sasBlock;
             if (showQR) {
-                let qrCode;
-                if (this.state.qrCodeProps) {
-                    qrCode = <VerificationQRCode {...this.state.qrCodeProps} />;
-                } else {
-                    qrCode = <div className='mx_VerificationPanel_QRPhase_noQR'><Spinner /></div>;
-                }
                 qrBlock =
                     <div className='mx_VerificationPanel_QRPhase_startOption'>
                         <p>{_t("Scan this unique code")}</p>
-                        {qrCode}
+                        <VerificationQRCode qrCodeData={request.qrCodeData} />
                     </div>;
             }
             if (showSAS) {
@@ -124,7 +104,7 @@ export default class VerificationPanel extends React.PureComponent {
         }
 
         let qrBlock;
-        if (this.state.qrCodeProps) {
+        if (showQR) {
             qrBlock = <div className="mx_UserInfo_container">
                 <h3>{_t("Verify by scanning")}</h3>
                 <p>{_t("Ask %(displayName)s to scan your code:", {
@@ -132,31 +112,23 @@ export default class VerificationPanel extends React.PureComponent {
                 })}</p>
 
                 <div className="mx_VerificationPanel_qrCode">
-                    <VerificationQRCode {...this.state.qrCodeProps} />
+                    <VerificationQRCode qrCodeData={request.qrCodeData} />
                 </div>
             </div>;
         }
 
         let sasBlock;
         if (showSAS) {
-            let button;
-            if (pending) {
-                button = <Spinner />;
-            } else {
-                const disabled = this.state.emojiButtonClicked;
-                button = (
-                    <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
-                        {_t("Verify by emoji")}
-                    </AccessibleButton>
-                );
-            }
-            const sasLabel = this.state.qrCodeProps ?
+            const disabled = this.state.emojiButtonClicked;
+            const sasLabel = showQR ?
                 _t("If you can't scan the code above, verify by comparing unique emoji.") :
                 _t("Verify by comparing unique emoji.");
             sasBlock = <div className="mx_UserInfo_container">
                 <h3>{_t("Verify by emoji")}</h3>
                 <p>{sasLabel}</p>
-                { button }
+                <AccessibleButton disabled={disabled} kind="primary" className="mx_UserInfo_wideButton" onClick={this._startSAS}>
+                    {_t("Verify by emoji")}
+                </AccessibleButton>
             </div>;
         }
 
@@ -172,26 +144,88 @@ export default class VerificationPanel extends React.PureComponent {
         </React.Fragment>;
     }
 
+    _onReciprocateYesClick = () => {
+        this.setState({reciprocateButtonClicked: true});
+        this.state.reciprocateQREvent.confirm();
+    };
+
+    _onReciprocateNoClick = () => {
+        this.setState({reciprocateButtonClicked: true});
+        this.state.reciprocateQREvent.cancel();
+    };
+
+    renderQRReciprocatePhase() {
+        const {member, request} = this.props;
+        let Button;
+        // a bit of a hack, but the FormButton should only be used in the right panel
+        // they should probably just be the same component with a css class applied to it?
+        if (this.props.inDialog) {
+            Button = sdk.getComponent("elements.AccessibleButton");
+        } else {
+            Button = sdk.getComponent("elements.FormButton");
+        }
+        const description = request.isSelfVerification ?
+            _t("Almost there! Is your other session showing the same shield?") :
+            _t("Almost there! Is %(displayName)s showing the same shield?", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+        let body;
+        if (this.state.reciprocateQREvent) {
+            // riot web doesn't support scanning yet, so assume here we're the client being scanned.
+            //
+            // we're passing both a label and a child string to Button as
+            // FormButton and AccessibleButton expect this differently
+            body = <React.Fragment>
+                <p>{description}</p>
+                <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
+                <div className="mx_VerificationPanel_reciprocateButtons">
+                    <Button
+                        label={_t("No")} kind="danger"
+                        disabled={this.state.reciprocateButtonClicked}
+                        onClick={this._onReciprocateNoClick}>{_t("No")}</Button>
+                    <Button
+                        label={_t("Yes")} kind="primary"
+                        disabled={this.state.reciprocateButtonClicked}
+                        onClick={this._onReciprocateYesClick}>{_t("Yes")}</Button>
+                </div>
+            </React.Fragment>;
+        } else {
+            body = <p><Spinner /></p>;
+        }
+        return <div className="mx_UserInfo_container mx_VerificationPanel_reciprocate_section">
+            <h3>{_t("Verify by scanning")}</h3>
+            { body }
+        </div>;
+    }
+
     renderVerifiedPhase() {
-        const {member} = this.props;
+        const {member, request} = this.props;
 
         let text;
-        if (this.props.isRoomEncrypted) {
-            text = _t("Verify all users in a room to ensure it's secure.");
-        } else {
-            text = _t("In encrypted rooms, verify all users to ensure it’s secure.");
+        if (!request.isSelfVerification) {
+            if (this.props.isRoomEncrypted) {
+                text = _t("Verify all users in a room to ensure it's secure.");
+            } else {
+                text = _t("In encrypted rooms, verify all users to ensure it’s secure.");
+            }
         }
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const description = request.isSelfVerification ?
+            _t("You've successfully verified %(deviceName)s (%(deviceId)s)!", {
+                deviceName: this.props.device.getDisplayName(),
+                deviceId: this.props.device.deviceId,
+            }):
+            _t("You've successfully verified %(displayName)s!", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+
         return (
             <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
                 <h3>{_t("Verified")}</h3>
-                <p>{_t("You've successfully verified %(displayName)s!", {
-                    displayName: member.displayName || member.name || member.userId,
-                })}</p>
+                <p>{description}</p>
                 <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
-                <p>{ text }</p>
-
+                { text ? <p>{ text }</p> : null }
                 <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
                     {_t("Got it")}
                 </AccessibleButton>
@@ -204,15 +238,27 @@ export default class VerificationPanel extends React.PureComponent {
 
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
+        let startAgainInstruction;
+        if (request.isSelfVerification) {
+            startAgainInstruction = _t("Start verification again from the notification.");
+        } else {
+            startAgainInstruction = _t("Start verification again from their profile.");
+        }
+
         let text;
         if (request.cancellationCode === "m.timeout") {
-            text = _t("Verification timed out. Start verification again from their profile.");
+            text = _t("Verification timed out.") + ` ${startAgainInstruction}`;
         } else if (request.cancellingUserId === request.otherUserId) {
-            text = _t("%(displayName)s cancelled verification. Start verification again from their profile.", {
-                displayName: member.displayName || member.name || member.userId,
-            });
+            if (request.isSelfVerification) {
+                text = _t("You cancelled verification on your other session.");
+            } else {
+                text = _t("%(displayName)s cancelled verification.", {
+                    displayName: member.displayName || member.name || member.userId,
+                });
+            }
+            text = `${text} ${startAgainInstruction}`;
         } else {
-            text = _t("You cancelled verification. Start verification again from their profile.");
+            text = _t("You cancelled verification.") + ` ${startAgainInstruction}`;
         }
 
         return (
@@ -228,7 +274,7 @@ export default class VerificationPanel extends React.PureComponent {
     }
 
     render() {
-        const {member, phase} = this.props;
+        const {member, phase, request} = this.props;
 
         const displayName = member.displayName || member.name || member.userId;
 
@@ -236,19 +282,28 @@ export default class VerificationPanel extends React.PureComponent {
             case PHASE_READY:
                 return this.renderQRPhase();
             case PHASE_STARTED:
-                if (this.state.sasEvent) {
-                    const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-                    return <div className="mx_UserInfo_container">
-                        <h3>{_t("Compare emoji")}</h3>
-                        <VerificationShowSas
-                            displayName={displayName}
-                            sas={this.state.sasEvent.sas}
-                            onCancel={this._onSasMismatchesClick}
-                            onDone={this._onSasMatchesClick}
-                        />
-                    </div>;
-                } else {
-                    return this.renderQRPhase(true); // keep showing same phase but with a spinner
+                switch (request.chosenMethod) {
+                    case verificationMethods.RECIPROCATE_QR_CODE:
+                        return this.renderQRReciprocatePhase();
+                    case verificationMethods.SAS: {
+                        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+                        const emojis = this.state.sasEvent ?
+                            <VerificationShowSas
+                                displayName={displayName}
+                                sas={this.state.sasEvent.sas}
+                                onCancel={this._onSasMismatchesClick}
+                                onDone={this._onSasMatchesClick}
+                                inDialog={this.props.inDialog}
+                                isSelf={request.isSelfVerification}
+                                device={this.props.device}
+                            /> : <Spinner />;
+                        return <div className="mx_UserInfo_container">
+                            <h3>{_t("Compare emoji")}</h3>
+                            { emojis }
+                        </div>;
+                    }
+                    default:
+                        return null;
                 }
             case PHASE_DONE:
                 return this.renderVerifiedPhase();
@@ -277,10 +332,12 @@ export default class VerificationPanel extends React.PureComponent {
         this.state.sasEvent.mismatch();
     };
 
-    _onVerifierShowSas = (sasEvent) => {
+    _updateVerifierState = () => {
         const {request} = this.props;
-        request.verifier.off('show_sas', this._onVerifierShowSas);
-        this.setState({sasEvent});
+        const {sasEvent, reciprocateQREvent} = request.verifier;
+        request.verifier.off('show_sas', this._updateVerifierState);
+        request.verifier.off('show_reciprocate_qr', this._updateVerifierState);
+        this.setState({sasEvent, reciprocateQREvent});
     };
 
     _onRequestChange = async () => {
@@ -288,7 +345,8 @@ export default class VerificationPanel extends React.PureComponent {
         const hadVerifier = this._hasVerifier;
         this._hasVerifier = !!request.verifier;
         if (!hadVerifier && this._hasVerifier) {
-            request.verifier.on('show_sas', this._onVerifierShowSas);
+            request.verifier.on('show_sas', this._updateVerifierState);
+            request.verifier.on('show_reciprocate_qr', this._updateVerifierState);
             try {
                 // on the requester side, this is also awaited in _startSAS,
                 // but that's ok as verify should return the same promise.
@@ -303,7 +361,9 @@ export default class VerificationPanel extends React.PureComponent {
         const {request} = this.props;
         request.on("change", this._onRequestChange);
         if (request.verifier) {
-            this.setState({sasEvent: request.verifier.sasEvent});
+            const {request} = this.props;
+            const {sasEvent, reciprocateQREvent} = request.verifier;
+            this.setState({sasEvent, reciprocateQREvent});
         }
         this._onRequestChange();
     }
@@ -311,7 +371,8 @@ export default class VerificationPanel extends React.PureComponent {
     componentWillUnmount() {
         const {request} = this.props;
         if (request.verifier) {
-            request.verifier.off('show_sas', this._onVerifierShowSas);
+            request.verifier.off('show_sas', this._updateVerifierState);
+            request.verifier.off('show_reciprocate_qr', this._updateVerifierState);
         }
         request.off("change", this._onRequestChange);
     }

src/components/views/rooms/AppsDrawer.js

@@ -55,13 +55,10 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         ScalarMessaging.startListening();
         MatrixClientPeg.get().on('RoomState.events', this.onRoomStateEvents);
         WidgetEchoStore.on('update', this._updateApps);
-    },
-
-    componentDidMount: function() {
         this.dispatcherRef = dis.register(this.onAction);
     },
 
@@ -71,10 +68,11 @@ export default createReactClass({
             MatrixClientPeg.get().removeListener('RoomState.events', this.onRoomStateEvents);
         }
         WidgetEchoStore.removeListener('update', this._updateApps);
-        dis.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
     },
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) {
         // Room has changed probably, update apps
         this._updateApps();
     },
@@ -160,11 +158,7 @@ export default createReactClass({
 
             return (<AppTile
                 key={app.id}
-                id={app.id}
-                eventId={app.eventId}
-                url={app.url}
-                name={app.name}
-                type={app.type}
+                app={app}
                 fullWidth={arr.length<2 ? true : false}
                 room={this.props.room}
                 userId={this.props.userId}

src/components/views/rooms/BasicMessageComposer.js

@@ -94,7 +94,8 @@ export default class BasicMessageEditor extends React.Component {
         this._emoticonSettingHandle = null;
     }
 
-    componentDidUpdate(prevProps) {
+    // TODO: [REACT-WARNING] Move into better lifecycle position
+    UNSAFE_componentWillUpdate(prevProps) { // eslint-disable-line camelcase
         if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
             const {isEmpty} = this.props.model;
             if (isEmpty) {
@@ -202,9 +203,9 @@ export default class BasicMessageEditor extends React.Component {
         if (isSafari) {
             this._onInput({inputType: "insertCompositionText"});
         } else {
-            setTimeout(() => {
+            Promise.resolve().then(() => {
                 this._onInput({inputType: "insertCompositionText"});
-            }, 0);
+            });
         }
     }
 

src/components/views/rooms/EditMessageComposer.js

@@ -107,14 +107,15 @@ export default class EditMessageComposer extends React.Component {
 
     static contextType = MatrixClientContext;
 
-    constructor(props) {
-        super(props);
+    constructor(props, context) {
+        super(props, context);
         this.model = null;
         this._editorRef = null;
 
         this.state = {
             saveDisabled: true,
         };
+        this._createEditorModel();
     }
 
     _setEditorRef = ref => {
@@ -223,10 +224,6 @@ export default class EditMessageComposer extends React.Component {
         this.props.editState.setEditorState(caret, parts);
     }
 
-    componentWillMount() {
-        this._createEditorModel();
-    }
-
     _createEditorModel() {
         const {editState} = this.props;
         const room = this._getRoom();

src/components/views/rooms/EventTile.js

@@ -233,7 +233,8 @@ export default createReactClass({
         contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         // don't do RR animations until we are mounted
         this._suppressReadReceiptAnimation = true;
         this._verifyEvent(this.props.mxEvent);
@@ -253,7 +254,8 @@ export default createReactClass({
         }
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         // re-check the sender verification as outgoing events progress through
         // the send process.
         if (nextProps.eventSendStatus !== this.props.eventSendStatus) {

src/components/views/rooms/ForwardMessage.js

@@ -30,14 +30,12 @@ export default createReactClass({
         onCancelClick: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         dis.dispatch({
             action: 'panel_disable',
             middleDisabled: true,
         });
-    },
 
-    componentDidMount: function() {
         document.addEventListener('keydown', this._onKeyDown);
     },
 

src/components/views/rooms/LinkPreviewWidget.js

@@ -43,7 +43,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this.unmounted = false;
         MatrixClientPeg.get().getUrlPreview(this.props.link, this.props.mxEvent.getTs()).then((res)=>{
             if (this.unmounted) {

src/components/views/rooms/MemberInfo.js

@@ -79,7 +79,8 @@ export default createReactClass({
         contextType: MatrixClientContext,
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._cancelDeviceList = null;
         const cli = this.context;
 
@@ -98,13 +99,12 @@ export default createReactClass({
         cli.on("accountData", this.onAccountData);
 
         this._checkIgnoreState();
-    },
 
-    componentDidMount: function() {
         this._updateStateForNewMember(this.props.member);
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         if (this.props.member.userId !== newProps.member.userId) {
             this._updateStateForNewMember(newProps.member);
         }

src/components/views/rooms/MemberList.js

@@ -49,7 +49,8 @@ export default createReactClass({
         }
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._mounted = true;
         const cli = MatrixClientPeg.get();
         if (cli.hasLazyLoadMembersEnabled()) {

src/components/views/rooms/ReadReceiptMarker.js

@@ -87,6 +87,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._avatar = createRef();
     },

src/components/views/rooms/RoomBreadcrumbs.js

@@ -49,7 +49,8 @@ export default class RoomBreadcrumbs extends React.Component {
         this._scroller = createRef();
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         this._dispatcherRef = dis.register(this.onAction);
 
         const storedRooms = SettingsStore.getValue("breadcrumb_rooms");

src/components/views/rooms/RoomDetailRow.js

@@ -54,6 +54,7 @@ export default createReactClass({
         }
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._topic = createRef();
     },

src/components/views/rooms/RoomHeader.js

@@ -58,6 +58,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._topic = createRef();
     },

src/components/views/rooms/RoomList.js

@@ -118,7 +118,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, put this in the constructor.
+    UNSAFE_componentWillMount: function() {
         this.mounted = false;
 
         const cli = MatrixClientPeg.get();
@@ -289,6 +290,7 @@ export default createReactClass({
                     dis.dispatch({
                         action: 'view_room',
                         room_id: room.roomId,
+                        show_room_tile: true, // to make sure the room gets scrolled into view
                     });
                 }
                 break;

src/components/views/rooms/RoomNameEditor.js

@@ -34,7 +34,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         const room = this.props.room;
         const name = room.currentState.getStateEvents('m.room.name', '');
         const myId = MatrixClientPeg.get().credentials.userId;

src/components/views/rooms/RoomPreviewBar.js

@@ -97,7 +97,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._checkInvitedEmail();
     },
 

src/components/views/rooms/RoomRecoveryReminder.js

@@ -44,7 +44,7 @@ export default class RoomRecoveryReminder extends React.PureComponent {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._loadBackupStatus();
     }
 
@@ -61,7 +61,6 @@ export default class RoomRecoveryReminder extends React.PureComponent {
                 loading: false,
                 error: e,
             });
-            return;
         }
     }
 

src/components/views/rooms/RoomTile.js

@@ -203,7 +203,7 @@ export default createReactClass({
 
             case 'view_room':
                 // when the room is selected make sure its tile is visible, for breadcrumbs/keyboard shortcut access
-                if (payload.room_id === this.props.room.roomId) {
+                if (payload.room_id === this.props.room.roomId && payload.show_room_tile) {
                     this._scrollIntoView();
                 }
                 break;
@@ -224,6 +224,7 @@ export default createReactClass({
         });
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._roomTile = createRef();
     },
@@ -282,7 +283,8 @@ export default createReactClass({
         }
     },
 
-    componentWillReceiveProps: function(props) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(props) {
         // XXX: This could be a lot better - this makes the assumption that
         // the notification count may have changed when the properties of
         // the room tile change.

src/components/views/rooms/RoomTopicEditor.js

@@ -33,7 +33,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const room = this.props.room;
         const topic = room.currentState.getStateEvents('m.room.topic', '');
         this.setState({

src/components/views/rooms/RoomUpgradeWarningBar.js

@@ -31,7 +31,7 @@ export default createReactClass({
         recommendation: PropTypes.object.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const tombstone = this.props.room.currentState.getStateEvents("m.room.tombstone", "");
         this.setState({upgraded: tombstone && tombstone.getContent().replacement_room});
 

src/components/views/rooms/SearchBar.js

@@ -30,6 +30,7 @@ export default createReactClass({
         });
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._search_term = createRef();
     },

src/components/views/rooms/SendMessageComposer.js

@@ -331,7 +331,8 @@ export default class SendMessageComposer extends React.Component {
         this._editorRef.getEditableRootNode().removeEventListener("paste", this._onPaste, true);
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         const partCreator = new CommandPartCreator(this.props.room, this.context);
         const parts = this._restoreStoredEditorState(partCreator) || [];
         this.model = new EditorModel(parts, partCreator);

src/components/views/rooms/Stickerpicker.js

@@ -84,11 +84,11 @@ export default class Stickerpicker extends React.Component {
 
     async _removeStickerpickerWidgets() {
         const scalarClient = await this._acquireScalarClient();
-        console.warn('Removing Stickerpicker widgets');
+        console.log('Removing Stickerpicker widgets');
         if (this.state.widgetId) {
             if (scalarClient) {
                 scalarClient.disableWidgetAssets(widgetType, this.state.widgetId).then(() => {
-                    console.warn('Assets disabled');
+                    console.log('Assets disabled');
                 }).catch((err) => {
                     console.error('Failed to disable assets');
                 });
@@ -240,6 +240,14 @@ export default class Stickerpicker extends React.Component {
             // Set default name
             stickerpickerWidget.content.name = stickerpickerWidget.name || _t("Stickerpack");
 
+            // FIXME: could this use the same code as other apps?
+            const stickerApp = {
+                id: stickerpickerWidget.id,
+                url: stickerpickerWidget.content.url,
+                name: stickerpickerWidget.content.name,
+                type: stickerpickerWidget.content.type,
+            };
+
             stickersContent = (
                 <div className='mx_Stickers_content_container'>
                     <div
@@ -253,11 +261,8 @@ export default class Stickerpicker extends React.Component {
                     >
                     <PersistedElement persistKey={PERSISTED_ELEMENT_KEY} style={{zIndex: STICKERPICKER_Z_INDEX}}>
                         <AppTile
-                            id={stickerpickerWidget.id}
-                            url={stickerpickerWidget.content.url}
-                            name={stickerpickerWidget.content.name}
+                            app={stickerApp}
                             room={this.props.room}
-                            type={stickerpickerWidget.content.type}
                             fullWidth={true}
                             userId={MatrixClientPeg.get().credentials.userId}
                             creatorUserId={stickerpickerWidget.sender || MatrixClientPeg.get().credentials.userId}

src/components/views/rooms/ThirdPartyMemberInfo.js

@@ -51,7 +51,7 @@ export default class ThirdPartyMemberInfo extends React.Component {
         };
     }
 
-    componentWillMount(): void {
+    componentDidMount(): void {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     }
 

src/components/views/rooms/WhoIsTypingTile.js

@@ -54,7 +54,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("RoomMember.typing", this.onRoomMemberTyping);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
     },

src/components/views/settings/ChangeAvatar.js

@@ -55,11 +55,12 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         if (this.avatarSet) {
             // don't clobber what the user has just set
             return;

src/components/views/settings/ChangePassword.js

@@ -78,7 +78,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._sessionStore = sessionStore;
         this._sessionStoreToken = this._sessionStore.addListener(
             this._setStateFromSessionStore,

src/components/views/settings/DevicesPanel.js

@@ -23,6 +23,7 @@ import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
+import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
 export default class DevicesPanel extends React.Component {
     constructor(props) {
@@ -123,11 +124,29 @@ export default class DevicesPanel extends React.Component {
             // pop up an interactive auth dialog
             const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
+            const dialogAesthetics = {
+                [SSOAuthEntry.PHASE_PREAUTH]: {
+                    title: _t("Use Single Sign On to continue"),
+                    body: _t("Confirm deleting these sessions by using Single Sign On to prove your identity."),
+                    continueText: _t("Single Sign On"),
+                    continueKind: "primary",
+                },
+                [SSOAuthEntry.PHASE_POSTAUTH]: {
+                    title: _t("Confirm deleting these sessions"),
+                    body: _t("Click the button below to confirm deleting these sessions."),
+                    continueText: _t("Delete sessions"),
+                    continueKind: "danger",
+                },
+            };
             Modal.createTrackedDialog('Delete Device Dialog', '', InteractiveAuthDialog, {
                 title: _t("Authentication"),
                 matrixClient: MatrixClientPeg.get(),
                 authData: error.data,
                 makeRequest: this._makeDeleteRequest.bind(this),
+                aestheticsForStagePhases: {
+                    [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+                    [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+                },
             });
         }).catch((e) => {
             console.error("Error deleting sessions", e);

src/components/views/settings/EventIndexPanel.js

@@ -63,7 +63,7 @@ export default class EventIndexPanel extends React.Component {
         }
     }
 
-    async componentWillMount(): void {
+    async componentDidMount(): void {
         this.updateState();
     }
 

src/components/views/settings/KeyBackupPanel.js

@@ -38,7 +38,7 @@ export default class KeyBackupPanel extends React.PureComponent {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         this._checkKeyBackupStatus();
 
         MatrixClientPeg.get().on('crypto.keyBackupStatus', this._onKeyBackupStatus);

src/components/views/settings/Notifications.js

@@ -87,7 +87,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._refreshFromServer();
     },
 

src/components/views/settings/discovery/EmailAddresses.js

@@ -58,7 +58,8 @@ export class EmailAddress extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         const { bound } = nextProps.email;
         this.setState({ bound });
     }

src/components/views/settings/discovery/PhoneNumbers.js

@@ -50,7 +50,8 @@ export class PhoneNumber extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         const { bound } = nextProps.msisdn;
         this.setState({ bound });
     }

src/components/views/settings/tabs/room/AdvancedRoomSettingsTab.js

@@ -38,7 +38,8 @@ export default class AdvancedRoomSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         // we handle lack of this object gracefully later, so don't worry about it failing here.
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         room.getRecommendedVersion().then((v) => {

src/components/views/settings/tabs/room/NotificationSettingsTab.js

@@ -37,7 +37,8 @@ export default class NotificationsSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         Notifier.getSoundForRoom(this.props.roomId).then((soundData) => {
             if (!soundData) {
                 return;

src/components/views/settings/tabs/room/SecurityRoomSettingsTab.js

@@ -41,7 +41,8 @@ export default class SecurityRoomSettingsTab extends React.Component {
         };
     }
 
-    async componentWillMount(): void {
+    // TODO: [REACT-WARNING] Move this to constructor
+    async UNSAFE_componentWillMount(): void { // eslint-disable-line camelcase
         MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -68,7 +68,8 @@ export default class GeneralUserSettingsTab extends React.Component {
         this.dispatcherRef = dis.register(this._onAction);
     }
 
-    async componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    async UNSAFE_componentWillMount() { // eslint-disable-line camelcase
         const cli = MatrixClientPeg.get();
 
         const serverSupportsSeparateAddAndBind = await cli.doesServerSupportSeparateAddAndBind();

src/components/views/settings/tabs/user/HelpUserSettingsTab.js

@@ -40,7 +40,7 @@ export default class HelpUserSettingsTab extends React.Component {
         };
     }
 
-    componentWillMount(): void {
+    componentDidMount(): void {
         PlatformPeg.get().getAppVersion().then((ver) => this.setState({vectorVersion: ver})).catch((e) => {
             console.error("Error getting vector version: ", e);
         });

src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js

@@ -81,7 +81,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
         };
     }
 
-    async componentWillMount(): void {
+    async componentDidMount(): void {
         const platform = PlatformPeg.get();
 
         const autoLaunchSupported = await platform.supportsAutoLaunch();

src/components/views/toasts/VerificationRequestToast.js

@@ -31,7 +31,7 @@ export default class VerificationRequestToast extends React.PureComponent {
         this.state = {counter: Math.ceil(props.request.timeout / 1000)};
     }
 
-    componentDidMount() {
+    async componentDidMount() {
         const {request} = this.props;
         if (request.timeout && request.timeout > 0) {
             this._intervalHandle = setInterval(() => {
@@ -48,6 +48,11 @@ export default class VerificationRequestToast extends React.PureComponent {
         // As a quick & dirty fix, check the toast is still relevant when it mounts (this prevents
         // a toast hanging around after logging in if you did a verification as part of login).
         this._checkRequestIsPending();
+
+        if (request.isSelfVerification) {
+            const cli = MatrixClientPeg.get();
+            this.setState({device: await cli.getStoredDevice(cli.getUserId(), request.channel.deviceId)});
+        }
     }
 
     componentWillUnmount() {
@@ -107,15 +112,25 @@ export default class VerificationRequestToast extends React.PureComponent {
     render() {
         const FormButton = sdk.getComponent("elements.FormButton");
         const {request} = this.props;
-        const userId = request.otherUserId;
-        const roomId = request.channel.roomId;
-        let nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
-        // for legacy to_device verification requests
-        if (nameLabel === userId) {
-            const client = MatrixClientPeg.get();
-            const user = client.getUser(userId);
-            if (user && user.displayName) {
-                nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+        let nameLabel;
+        if (request.isSelfVerification) {
+            if (this.state.device) {
+                nameLabel = _t("From %(deviceName)s (%(deviceId)s)", {
+                    deviceName: this.state.device.getDisplayName(),
+                    deviceId: this.state.device.deviceId,
+                });
+            }
+        } else {
+            const userId = request.otherUserId;
+            const roomId = request.channel.roomId;
+            nameLabel = roomId ? userLabelForEventRoom(userId, roomId) : userId;
+            // for legacy to_device verification requests
+            if (nameLabel === userId) {
+                const client = MatrixClientPeg.get();
+                const user = client.getUser(userId);
+                if (user && user.displayName) {
+                    nameLabel = _t("%(name)s (%(userId)s)", {name: user.displayName, userId});
+                }
             }
         }
         const declineLabel = this.state.counter == 0 ?

src/components/views/verification/VerificationShowSas.js

@@ -33,6 +33,7 @@ export default class VerificationShowSas extends React.Component {
         onCancel: PropTypes.func.isRequired,
         sas: PropTypes.object.isRequired,
         isSelf: PropTypes.bool,
+        inDialog: PropTypes.bool, // whether this component is being shown in a dialog and to use DialogButtons
     };
 
     constructor(props) {
@@ -74,7 +75,7 @@ export default class VerificationShowSas extends React.Component {
             </div>;
             sasCaption = this.props.isSelf ?
                 _t(
-                    "Confirm the emoji below are displayed on both devices, in the same order:",
+                    "Confirm the emoji below are displayed on both sessions, in the same order:",
                 ):
                 _t(
                     "Verify this user by confirming the following emoji appear on their screen.",
@@ -88,7 +89,7 @@ export default class VerificationShowSas extends React.Component {
             </div>;
             sasCaption = this.props.isSelf ?
                 _t(
-                    "Verify this device by confirming the following number appears on its screen.",
+                    "Verify this session by confirming the following number appears on its screen.",
                 ):
                 _t(
                     "Verify this user by confirming the following number appears on their screen.",
@@ -106,13 +107,20 @@ export default class VerificationShowSas extends React.Component {
         if (this.state.pending || this.state.cancelling) {
             let text;
             if (this.state.pending) {
-                const {displayName} = this.props;
-                text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                if (this.props.isSelf) {
+                    text = _t("Waiting for your other session, %(deviceName)s (%(deviceId)s), to verify…", {
+                        deviceName: this.props.device.getDisplayName(),
+                        deviceId: this.props.device.deviceId,
+                    });
+                } else {
+                    const {displayName} = this.props;
+                    text = _t("Waiting for %(displayName)s to verify…", {displayName});
+                }
             } else {
                 text = _t("Cancelling…");
             }
             confirm = <PendingActionSpinner text={text} />;
-        } else {
+        } else if (this.props.inDialog) {
             // FIXME: stop using DialogButtons here once this component is only used in the right panel verification
             confirm = <DialogButtons
                 primaryButton={_t("They match")}
@@ -122,6 +130,15 @@ export default class VerificationShowSas extends React.Component {
                 onCancel={this.onDontMatchClick}
                 cancelButtonClass="mx_UserInfo_wideButton"
             />;
+        } else {
+            confirm = <React.Fragment>
+                <AccessibleButton onClick={this.onMatchClick} kind="primary">
+                    { _t("They match") }
+                </AccessibleButton>
+                <AccessibleButton onClick={this.onDontMatchClick} kind="danger">
+                    { _t("They don't match") }
+                </AccessibleButton>
+            </React.Fragment>;
         }
 
         return <div className="mx_VerificationShowSas">