Merge branch 'develop' into move-read-receipts-to-bottom

src/components/views/auth/AuthFooter.js

@@ -26,7 +26,7 @@ export default createReactClass({
     render: function() {
         return (
             <div className="mx_AuthFooter">
-                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t("powered by Matrix") }</a>
+                <a href="https://matrix.org" target="_blank" rel="noreferrer noopener">{ _t("powered by Matrix") }</a>
             </div>
         );
     },

src/components/views/auth/CaptchaForm.js

@@ -61,13 +61,9 @@ export default createReactClass({
         } else {
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
-            let protocol = global.location.protocol;
-            if (protocol === "vector:") {
-                protocol = "https:";
-            }
             const scriptTag = document.createElement('script');
             scriptTag.setAttribute(
-                'src', `${protocol}//www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+                'src', `https://www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
             );
             this._recaptchaContainer.current.appendChild(scriptTag);
         }

src/components/views/auth/CompleteSecurityBody.js

@@ -0,0 +1,27 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class CompleteSecurityBody extends React.PureComponent {
+    render() {
+        return <div className="mx_CompleteSecurityBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -142,7 +142,7 @@ export const PasswordAuthEntry = createReactClass({
 
         return (
             <div>
-                <p>{ _t("To continue, please enter your password.") }</p>
+                <p>{ _t("Confirm your identity by entering your account password below.") }</p>
                 <form onSubmit={this._onSubmit} className="mx_InteractiveAuthEntryComponents_passwordSection">
                     <Field
                         id="mx_InteractiveAuthEntryComponents_password"
@@ -331,7 +331,7 @@ export const TermsAuthEntry = createReactClass({
             checkboxes.push(
                 <label key={"policy_checkbox_" + policy.id} className="mx_InteractiveAuthEntryComponents_termsPolicy">
                     <input type="checkbox" onChange={() => this._togglePolicy(policy.id)} checked={checked} />
-                    <a href={policy.url} target="_blank" rel="noopener">{ policy.name }</a>
+                    <a href={policy.url} target="_blank" rel="noreferrer noopener">{ policy.name }</a>
                 </label>,
             );
         }
@@ -604,6 +604,7 @@ export const FallbackAuthEntry = createReactClass({
             this.props.authSessionId,
         );
         this._popupWindow = window.open(url);
+        this._popupWindow.opener = null;
     },
 
     _onReceiveMessage: function(event) {
@@ -641,7 +642,7 @@ const AuthEntryComponents = [
     TermsAuthEntry,
 ];
 
-export function getEntryComponentForLoginType(loginType) {
+export default function getEntryComponentForLoginType(loginType) {
     for (const c of AuthEntryComponents) {
         if (c.LOGIN_TYPE == loginType) {
             return c;

src/components/views/auth/ModularServerConfig.js

@@ -99,7 +99,7 @@ export default class ModularServerConfig extends ServerConfig {
                     "Enter the location of your Modular homeserver. It may use your own " +
                     "domain name or be a subdomain of <a>modular.im</a>.",
                     {}, {
-                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                             {sub}
                         </a>,
                     },

src/components/views/auth/PasswordLogin.js

@@ -202,6 +202,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
@@ -216,6 +217,7 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
@@ -240,6 +242,7 @@ export default class PasswordLogin extends React.Component {
                     prefix={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
+                    disabled={this.props.disableSubmit}
                     autoFocus
                 />;
             }
@@ -291,6 +294,7 @@ export default class PasswordLogin extends React.Component {
                         element="select"
                         value={this.state.loginType}
                         onChange={this.onLoginTypeChange}
+                        disabled={this.props.disableSubmit}
                     >
                         <option
                             key={PasswordLogin.LOGIN_FIELD_MXID}
@@ -330,6 +334,7 @@ export default class PasswordLogin extends React.Component {
                         label={_t('Password')}
                         value={this.state.password}
                         onChange={this.onPasswordChanged}
+                        disabled={this.props.disableSubmit}
                     />
                     {forgotPasswordJsx}
                     <input className="mx_Login_submit"

src/components/views/auth/RegistrationForm.js

@@ -486,6 +486,7 @@ export default createReactClass({
             id="mx_RegistrationForm_password"
             ref={field => this[FIELD_PASSWORD] = field}
             type="password"
+            autoComplete="new-password"
             label={_t("Password")}
             value={this.state.password}
             onChange={this.onPasswordChange}
@@ -499,6 +500,7 @@ export default createReactClass({
             id="mx_RegistrationForm_passwordConfirm"
             ref={field => this[FIELD_PASSWORD_CONFIRM] = field}
             type="password"
+            autoComplete="new-password"
             label={_t("Confirm")}
             value={this.state.passwordConfirm}
             onChange={this.onPasswordConfirmChange}

src/components/views/auth/ServerConfig.js

@@ -274,15 +274,13 @@ export default class ServerConfig extends React.PureComponent {
             : null;
 
         return (
-            <div className="mx_ServerConfig">
+            <form className="mx_ServerConfig" onSubmit={this.onSubmit} autoComplete="off">
                 <h3>{_t("Other servers")}</h3>
                 {errorText}
                 {this._renderHomeserverSection()}
                 {this._renderIdentityServerSection()}
-                <form onSubmit={this.onSubmit} autoComplete="off" action={null}>
-                    {submitButton}
-                </form>
-            </div>
+                {submitButton}
+            </form>
         );
     }
 }

src/components/views/auth/ServerTypeSelector.js

@@ -46,7 +46,7 @@ export const TYPES = {
         label: () => _t('Premium'),
         logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
-            a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+            a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                 {sub}
             </a>,
         }),

src/components/views/context_menus/MessageContextMenu.js

@@ -90,7 +90,8 @@ export default createReactClass({
         const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
         const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
         if (!pinnedEvent) return false;
-        return pinnedEvent.getContent().pinned.includes(this.props.mxEvent.getId());
+        const content = pinnedEvent.getContent();
+        return content.pinned && Array.isArray(content.pinned) && content.pinned.includes(this.props.mxEvent.getId());
     },
 
     onResendClick: function() {
@@ -414,11 +415,16 @@ export default createReactClass({
         }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
-            <MenuItem className="mx_MessageContextMenu_field">
-                <a href={permalink} target="_blank" rel="noopener" onClick={this.onPermalinkClick} tabIndex={-1}>
-                    { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
-                        ? _t('Share Permalink') : _t('Share Message') }
-                </a>
+            <MenuItem
+                element="a"
+                className="mx_MessageContextMenu_field"
+                onClick={this.onPermalinkClick}
+                href={permalink}
+                target="_blank"
+                rel="noreferrer noopener"
+            >
+                { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
+                    ? _t('Share Permalink') : _t('Share Message') }
             </MenuItem>
         );
 
@@ -436,16 +442,15 @@ export default createReactClass({
             isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
-                <MenuItem className="mx_MessageContextMenu_field">
-                    <a
-                        href={mxEvent.event.content.external_url}
-                        target="_blank"
-                        rel="noopener"
-                        onClick={this.closeMenu}
-                        tabIndex={-1}
-                    >
-                        { _t('Source URL') }
-                    </a>
+                <MenuItem
+                    element="a"
+                    className="mx_MessageContextMenu_field"
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    onClick={this.closeMenu}
+                    href={mxEvent.event.content.external_url}
+                >
+                    { _t('Source URL') }
                 </MenuItem>
           );
         }

src/components/views/context_menus/RoomTileContextMenu.js

@@ -306,7 +306,7 @@ export default createReactClass({
         return (
             <div>
                 <MenuItem className="mx_RoomTileContextMenu_tag_field" onClick={this._onClickSettings}>
-                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icons-settings-room.svg")} width="15" height="15" alt="" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/feather-customised/settings.svg")} width="15" height="15" alt="" />
                     { _t('Settings') }
                 </MenuItem>
             </div>

src/components/views/context_menus/TopLeftMenu.js

@@ -27,7 +27,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
 import * as sdk from "../../../index";
 
-export class TopLeftMenu extends React.Component {
+export default class TopLeftMenu extends React.Component {
     static propTypes = {
         displayName: PropTypes.string.isRequired,
         userId: PropTypes.string.isRequired,
@@ -68,10 +68,11 @@ export class TopLeftMenu extends React.Component {
                 {_t(
                     "<a>Upgrade</a> to your own domain", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener" tabIndex={-1}>{sub}</a>,
+                        a: sub =>
+                            <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener" tabIndex={-1}>{sub}</a>,
                     },
                 )}
-                <a href={hostingSignupLink} target="_blank" rel="noopener" role="presentation" aria-hidden={true} tabIndex={-1}>
+                <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener" role="presentation" aria-hidden={true} tabIndex={-1}>
                     <img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </div>;

src/components/views/dialogs/AskInviteAnywayDialog.js

@@ -72,7 +72,7 @@ export default createReactClass({
                     <button onClick={this._onInviteNeverWarnClicked}>
                         { _t('Invite anyway and never warn me again') }
                     </button>
-                    <button onClick={this._onInviteClicked} autoFocus="true">
+                    <button onClick={this._onInviteClicked} autoFocus={true}>
                         { _t('Invite anyway') }
                     </button>
                 </div>

src/components/views/dialogs/BaseDialog.js

@@ -65,6 +65,9 @@ export default createReactClass({
         // Title for the dialog.
         title: PropTypes.node.isRequired,
 
+        // Path to an icon to put in the header
+        headerImage: PropTypes.string,
+
         // children should be the content of the dialog
         children: PropTypes.node,
 
@@ -110,6 +113,13 @@ export default createReactClass({
             );
         }
 
+        let headerImage;
+        if (this.props.headerImage) {
+            headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage}
+                alt=""
+            />;
+        }
+
         return (
             <MatrixClientContext.Provider value={this._matrixClient}>
                 <FocusLock
@@ -135,6 +145,7 @@ export default createReactClass({
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
+                            {headerImage}
                             { this.props.title }
                         </div>
                         { this.props.headerButton }

src/components/views/dialogs/ChangelogDialog.js

@@ -52,7 +52,7 @@ export default class ChangelogDialog extends React.Component {
     _elementsForCommit(commit) {
         return (
             <li key={commit.sha} className="mx_ChangelogDialog_li">
-                <a href={commit.html_url} target="_blank" rel="noopener">
+                <a href={commit.html_url} target="_blank" rel="noreferrer noopener">
                     {commit.commit.message.split('\n')[0]}
                 </a>
             </li>

src/components/views/dialogs/ConfirmDestroyCrossSigningDialog.js

@@ -0,0 +1,65 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {_t} from "../../../languageHandler";
+import * as sdk from "../../../index";
+
+export default class ConfirmDestroyCrossSigningDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _onConfirm = () => {
+        this.props.onFinished(true);
+    };
+
+    _onDecline = () => {
+        this.props.onFinished(false);
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <BaseDialog
+                    className='mx_ConfirmDestroyCrossSigningDialog'
+                    hasCancel={true}
+                    onFinished={this.props.onFinished}
+                    title={_t("Destroy cross-signing keys?")}>
+                <div className='mx_ConfirmDestroyCrossSigningDialog_content'>
+                    <p>
+                        {_t(
+                            "Deleting cross-signing keys is permanent. " +
+                            "Anyone you have verified with will see security alerts. " +
+                            "You almost certainly don't want to do this, unless " +
+                            "you've lost every device you can cross-sign from.",
+                        )}
+                    </p>
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Clear cross-signing keys")}
+                    onPrimaryButtonClick={this._onConfirm}
+                    primaryButtonClass="danger"
+                    cancelButton={_t("Cancel")}
+                    onCancel={this._onDecline}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/ConfirmWipeDeviceDialog.js

@@ -39,11 +39,11 @@ export default class ConfirmWipeDeviceDialog extends React.Component {
         return (
             <BaseDialog className='mx_ConfirmWipeDeviceDialog' hasCancel={true}
                         onFinished={this.props.onFinished}
-                        title={_t("Clear all data on this device?")}>
+                        title={_t("Clear all data in this session?")}>
                 <div className='mx_ConfirmWipeDeviceDialog_content'>
                     <p>
                         {_t(
-                            "Clearing all data from this device is permanent. Encrypted messages will be lost " +
+                            "Clearing all data from this session is permanent. Encrypted messages will be lost " +
                             "unless their keys have been backed up.",
                         )}
                     </p>

src/components/views/dialogs/CreateRoomDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 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.
@@ -44,13 +45,13 @@ export default createReactClass({
     },
 
     _roomCreateOptions() {
-        const createOpts = {};
+        const opts = {};
+        const createOpts = opts.createOpts = {};
         createOpts.name = this.state.name;
         if (this.state.isPublic) {
             createOpts.visibility = "public";
             createOpts.preset = "public_chat";
-            // to prevent createRoom from enabling guest access
-            createOpts['initial_state'] = [];
+            opts.guestAccess = false;
             const {alias} = this.state;
             const localPart = alias.substr(1, alias.indexOf(":") - 1);
             createOpts['room_alias_name'] = localPart;
@@ -61,7 +62,7 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
-        return createOpts;
+        return opts;
     },
 
     componentDidMount() {

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -118,6 +118,7 @@ export default class DeactivateAccountDialog extends React.Component {
 
         const Field = sdk.getComponent('elements.Field');
 
+        // this is on purpose not a <form /> to prevent Enter triggering submission, to further prevent accidents
         return (
             <BaseDialog className="mx_DeactivateAccountDialog"
                 onFinished={this.props.onFinished}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -27,16 +27,19 @@ import {verificationMethods} from 'matrix-js-sdk/src/crypto';
 import {ensureDMExists} from "../../../createRoom";
 import dis from "../../../dispatcher";
 import SettingsStore from '../../../settings/SettingsStore';
+import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
 
 const MODE_LEGACY = 'legacy';
 const MODE_SAS = 'sas';
 
 const PHASE_START = 0;
 const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
-const PHASE_SHOW_SAS = 2;
-const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
-const PHASE_VERIFIED = 4;
-const PHASE_CANCELLED = 5;
+const PHASE_PICK_VERIFICATION_OPTION = 2;
+const PHASE_SHOW_SAS = 3;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 4;
+const PHASE_VERIFIED = 5;
+const PHASE_CANCELLED = 6;
 
 export default class DeviceVerifyDialog extends React.Component {
     static propTypes = {
@@ -49,6 +52,7 @@ export default class DeviceVerifyDialog extends React.Component {
         super();
         this._verifier = null;
         this._showSasEvent = null;
+        this._request = null;
         this.state = {
             phase: PHASE_START,
             mode: MODE_SAS,
@@ -80,6 +84,25 @@ export default class DeviceVerifyDialog extends React.Component {
         this.props.onFinished(false);
     }
 
+    _onUseSasClick = async () => {
+        try {
+            this._verifier = this._request.beginKeyVerification(verificationMethods.SAS);
+            this._verifier.on('show_sas', this._onVerifierShowSas);
+            // throws upon cancellation
+            await this._verifier.verify();
+            this.setState({phase: PHASE_VERIFIED});
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier = null;
+        } catch (e) {
+            console.log("Verification failed", e);
+            this.setState({
+                phase: PHASE_CANCELLED,
+            });
+            this._verifier = null;
+            this._request = null;
+        }
+    };
+
     _onLegacyFinished = (confirm) => {
         if (confirm) {
             MatrixClientPeg.get().setDeviceVerified(
@@ -100,7 +123,7 @@ export default class DeviceVerifyDialog extends React.Component {
                 const roomId = await ensureDMExistsAndOpen(this.props.userId);
                 // throws upon cancellation before having started
                 const request = await client.requestVerificationDM(
-                    this.props.userId, roomId, [verificationMethods.SAS],
+                    this.props.userId, roomId,
                 );
                 await request.waitFor(r => r.ready || r.started);
                 if (request.ready) {
@@ -108,11 +131,21 @@ export default class DeviceVerifyDialog extends React.Component {
                 } else {
                     this._verifier = request.verifier;
                 }
+            } else if (verifyingOwnDevice && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+                this._request = await client.requestVerification(this.props.userId, [
+                    verificationMethods.SAS,
+                    SHOW_QR_CODE_METHOD,
+                    verificationMethods.RECIPROCATE_QR_CODE,
+                ]);
+
+                await this._request.waitFor(r => r.ready || r.started);
+                this.setState({phase: PHASE_PICK_VERIFICATION_OPTION});
             } else {
                 this._verifier = client.beginKeyVerification(
                     verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
                 );
             }
+            if (!this._verifier) return;
             this._verifier.on('show_sas', this._onVerifierShowSas);
             // throws upon cancellation
             await this._verifier.verify();
@@ -150,10 +183,13 @@ export default class DeviceVerifyDialog extends React.Component {
         let body;
         switch (this.state.phase) {
             case PHASE_START:
-                body = this._renderSasVerificationPhaseStart();
+                body = this._renderVerificationPhaseStart();
                 break;
             case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
-                body = this._renderSasVerificationPhaseWaitAccept();
+                body = this._renderVerificationPhaseWaitAccept();
+                break;
+            case PHASE_PICK_VERIFICATION_OPTION:
+                body = this._renderVerificationPhasePick();
                 break;
             case PHASE_SHOW_SAS:
                 body = this._renderSasVerificationPhaseShowSas();
@@ -162,17 +198,17 @@ export default class DeviceVerifyDialog extends React.Component {
                 body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
                 break;
             case PHASE_VERIFIED:
-                body = this._renderSasVerificationPhaseVerified();
+                body = this._renderVerificationPhaseVerified();
                 break;
             case PHASE_CANCELLED:
-                body = this._renderSasVerificationPhaseCancelled();
+                body = this._renderVerificationPhaseCancelled();
                 break;
         }
 
         const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
         return (
             <BaseDialog
-                title={_t("Verify device")}
+                title={_t("Verify session")}
                 onFinished={this._onCancelClick}
             >
                 {body}
@@ -180,7 +216,7 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
-    _renderSasVerificationPhaseStart() {
+    _renderVerificationPhaseStart() {
         const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
@@ -194,10 +230,7 @@ export default class DeviceVerifyDialog extends React.Component {
                     { _t("Verify by comparing a short text string.") }
                 </p>
                 <p>
-                    {_t(
-                        "For maximum security, we recommend you do this in person or " +
-                        "use another trusted means of communication.",
-                    )}
+                    {_t("To be secure, do this in person or use a trusted way to communicate.")}
                 </p>
                 <DialogButtons
                     primaryButton={_t('Begin Verifying')}
@@ -209,7 +242,7 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
-    _renderSasVerificationPhaseWaitAccept() {
+    _renderVerificationPhaseWaitAccept() {
         const Spinner = sdk.getComponent("views.elements.Spinner");
         const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
 
@@ -230,12 +263,22 @@ export default class DeviceVerifyDialog extends React.Component {
         );
     }
 
+    _renderVerificationPhasePick() {
+        return <VerificationQREmojiOptions
+            request={this._request}
+            onCancel={this._onCancelClick}
+            onStartEmoji={this._onUseSasClick}
+        />;
+    }
+
     _renderSasVerificationPhaseShowSas() {
         const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
         return <VerificationShowSas
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
+            isSelf={MatrixClientPeg.get().getUserId() === this.props.userId}
+            onStartEmoji={this._onUseSasClick}
         />;
     }
 
@@ -249,12 +292,12 @@ export default class DeviceVerifyDialog extends React.Component {
         </div>;
     }
 
-    _renderSasVerificationPhaseVerified() {
+    _renderVerificationPhaseVerified() {
         const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
         return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
     }
 
-    _renderSasVerificationPhaseCancelled() {
+    _renderVerificationPhaseCancelled() {
         const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
         return <VerificationCancelled onDone={this._onCancelClick} />;
     }
@@ -265,12 +308,12 @@ export default class DeviceVerifyDialog extends React.Component {
 
         let text;
         if (MatrixClientPeg.get().getUserId() === this.props.userId) {
-            text = _t("To verify that this device can be trusted, please check that the key you see " +
+            text = _t("To verify that this session can be trusted, please check that the key you see " +
                 "in User Settings on that device matches the key below:");
         } else {
-            text = _t("To verify that this device can be trusted, please contact its owner using some other " +
+            text = _t("To verify that this session can be trusted, please contact its owner using some other " +
                 "means (e.g. in person or a phone call) and ask them whether the key they see in their User Settings " +
-                "for this device matches the key below:");
+                "for this session matches the key below:");
         }
 
         const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
@@ -286,14 +329,14 @@ export default class DeviceVerifyDialog extends React.Component {
                 </p>
                 <div className="mx_DeviceVerifyDialog_cryptoSection">
                     <ul>
-                        <li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                        <li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
-                        <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
+                        <li><label>{ _t("Session name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
+                        <li><label>{ _t("Session ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
+                        <li><label>{ _t("Session key") }:</label> <span><code><b>{ key }</b></code></span></li>
                     </ul>
                 </div>
                 <p>
                     { _t("If it matches, press the verify button below. " +
-                        "If it doesn't, then someone else is intercepting this device " +
+                        "If it doesn't, then someone else is intercepting this session " +
                         "and you probably want to press the blacklist button instead.") }
                 </p>
             </div>
@@ -301,7 +344,7 @@ export default class DeviceVerifyDialog extends React.Component {
 
         return (
             <QuestionDialog
-                title={_t("Verify device")}
+                title={_t("Verify session")}
                 description={body}
                 button={_t("I verify that the keys match")}
                 onFinished={this._onLegacyFinished}
@@ -321,7 +364,7 @@ export default class DeviceVerifyDialog extends React.Component {
 }
 
 async function ensureDMExistsAndOpen(userId) {
-    const roomId = ensureDMExists(MatrixClientPeg.get(), userId);
+    const roomId = await ensureDMExists(MatrixClientPeg.get(), userId);
     // don't use andView and spinner in createRoom, together, they cause this dialog to close and reopen,
     // we causes us to loose the verifier and restart, and we end up having two verification requests
     dis.dispatch({

src/components/views/dialogs/DevtoolsDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useState, useEffect} from 'react';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
@@ -22,6 +22,16 @@ import { _t } from '../../../languageHandler';
 import { Room } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+
+import {
+    PHASE_UNSENT,
+    PHASE_REQUESTED,
+    PHASE_READY,
+    PHASE_DONE,
+    PHASE_STARTED,
+    PHASE_CANCELLED,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
 
 class GenericEditor extends React.PureComponent {
     // static propTypes = {onBack: PropTypes.func.isRequired};
@@ -605,12 +615,97 @@ class ServersInRoomList extends React.PureComponent {
     }
 }
 
+const PHASE_MAP = {
+    [PHASE_UNSENT]: "unsent",
+    [PHASE_REQUESTED]: "requested",
+    [PHASE_READY]: "ready",
+    [PHASE_DONE]: "done",
+    [PHASE_STARTED]: "started",
+    [PHASE_CANCELLED]: "cancelled",
+};
+
+function VerificationRequest({txnId, request}) {
+    const [, updateState] = useState();
+    const [timeout, setRequestTimeout] = useState(request.timeout);
+
+    /* Re-render if something changes state */
+    useEventEmitter(request, "change", updateState);
+
+    /* Keep re-rendering if there's a timeout */
+    useEffect(() => {
+        if (request.timeout == 0) return;
+
+        /* Note that request.timeout is a getter, so its value changes */
+        const id = setInterval(() => {
+           setRequestTimeout(request.timeout);
+        }, 500);
+
+        return () => { clearInterval(id); };
+    }, [request]);
+
+    return (<div className="mx_DevTools_VerificationRequest">
+        <dl>
+            <dt>Transaction</dt>
+            <dd>{txnId}</dd>
+            <dt>Phase</dt>
+            <dd>{PHASE_MAP[request.phase] || request.phase}</dd>
+            <dt>Timeout</dt>
+            <dd>{Math.floor(timeout / 1000)}</dd>
+            <dt>Methods</dt>
+            <dd>{request.methods && request.methods.join(", ")}</dd>
+            <dt>requestingUserId</dt>
+            <dd>{request.requestingUserId}</dd>
+            <dt>observeOnly</dt>
+            <dd>{JSON.stringify(request.observeOnly)}</dd>
+        </dl>
+    </div>);
+}
+
+class VerificationExplorer extends React.Component {
+    static getLabel() {
+        return _t("Verification Requests");
+    }
+
+    /* Ensure this.context is the cli */
+    static contextType = MatrixClientContext;
+
+    onNewRequest = () => {
+        this.forceUpdate();
+    }
+
+    componentDidMount() {
+        const cli = this.context;
+        cli.on("crypto.verification.request", this.onNewRequest);
+    }
+
+    componentWillUnmount() {
+        const cli = this.context;
+        cli.off("crypto.verification.request", this.onNewRequest);
+    }
+
+    render() {
+        const cli = this.context;
+        const room = this.props.room;
+        const inRoomChannel = cli._crypto._inRoomVerificationRequests;
+        const inRoomRequests = (inRoomChannel._requestsByRoomId || new Map()).get(room.roomId) || new Map();
+
+        return (<div>
+            <div className="mx_Dialog_content">
+                {Array.from(inRoomRequests.entries()).reverse().map(([txnId, request]) =>
+                    <VerificationRequest txnId={txnId} request={request} key={txnId} />,
+                )}
+            </div>
+        </div>);
+    }
+}
+
 const Entries = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
     AccountDataExplorer,
     ServersInRoomList,
+    VerificationExplorer,
 ];
 
 export default class DevtoolsDialog extends React.PureComponent {

src/components/views/dialogs/ErrorDialog.js

@@ -42,6 +42,7 @@ export default createReactClass({
         button: PropTypes.string,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
+        headerImage: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -56,9 +57,12 @@ export default createReactClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={this.props.title || _t('Error')}
-                    contentId='mx_Dialog_content'
+            <BaseDialog
+                className="mx_ErrorDialog"
+                onFinished={this.props.onFinished}
+                title={this.props.title || _t('Error')}
+                headerImage={this.props.headerImage}
+                contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     { this.props.description || _t('An error has occurred.') }

src/components/views/dialogs/IncomingSasDialog.js

@@ -121,6 +121,8 @@ export default class IncomingSasDialog extends React.Component {
         const Spinner = sdk.getComponent("views.elements.Spinner");
         const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
+        const isSelf = this.props.verifier.userId == MatrixClientPeg.get().getUserId();
+
         let profile;
         if (this.state.opponentProfile) {
             profile = <div className="mx_IncomingSasDialog_opponentProfile">
@@ -148,20 +150,36 @@ export default class IncomingSasDialog extends React.Component {
             profile = <Spinner />;
         }
 
+        const userDetailText = [
+            <p key="p1">{_t(
+                "Verify this user to mark them as trusted. " +
+                "Trusting users gives you extra peace of mind when using " +
+                "end-to-end encrypted messages.",
+            )}</p>,
+            <p key="p2">{_t(
+                // NB. Below wording adjusted to singular 'session' until we have
+                // cross-signing
+                "Verifying this user will mark their session as trusted, and " +
+                "also mark your session as trusted to them.",
+            )}</p>,
+        ];
+
+        const selfDetailText = [
+            <p key="p1">{_t(
+                "Verify this device to mark it as trusted. " +
+                "Trusting this device gives you and other users extra peace of mind when using " +
+                "end-to-end encrypted messages.",
+            )}</p>,
+            <p key="p2">{_t(
+                "Verifying this device will mark it as trusted, and users who have verified with " +
+                "you will trust this device.",
+            )}</p>,
+        ];
+
         return (
             <div>
                 {profile}
-                <p>{_t(
-                    "Verify this user to mark them as trusted. " +
-                    "Trusting users gives you extra peace of mind when using " +
-                    "end-to-end encrypted messages.",
-                )}</p>
-                <p>{_t(
-                    // NB. Below wording adjusted to singular 'device' until we have
-                    // cross-signing
-                    "Verifying this user will mark their device as trusted, and " +
-                    "also mark your device as trusted to them.",
-                )}</p>
+                {isSelf ? selfDetailText : userDetailText}
                 <DialogButtons
                     primaryButton={_t('Continue')}
                     hasCancel={true}
@@ -178,6 +196,7 @@ 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()}
         />;
     }
 
@@ -227,6 +246,7 @@ export default class IncomingSasDialog extends React.Component {
             <BaseDialog
                 title={_t("Incoming Verification Request")}
                 onFinished={this._onFinished}
+                fixedWidth={false}
             >
                 {body}
             </BaseDialog>

src/components/views/dialogs/InviteDialog.js

@@ -31,8 +31,10 @@ import dis from "../../../dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
+import SettingsStore from '../../../settings/SettingsStore';
+import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -217,7 +219,7 @@ class DMRoomTile extends React.PureComponent {
         }
 
         // Push any text we missed (end of text)
-        if (i < (str.length - 1)) {
+        if (i < str.length) {
             result.push(<span key={i + 'end'}>{str.substring(i)}</span>);
         }
 
@@ -300,18 +302,16 @@ export default class InviteDialog extends React.PureComponent {
             throw new Error("When using KIND_INVITE a roomId is required for an InviteDialog");
         }
 
-        let alreadyInvited = [];
+        const alreadyInvited = new Set([MatrixClientPeg.get().getUserId(), SdkConfig.get()['welcomeUserId']]);
         if (props.roomId) {
             const room = MatrixClientPeg.get().getRoom(props.roomId);
             if (!room) throw new Error("Room ID given to InviteDialog does not look like a room");
-            alreadyInvited = [
-                ...room.getMembersWithMembership('invite'),
-                ...room.getMembersWithMembership('join'),
-                ...room.getMembersWithMembership('ban'), // so we don't try to invite them
-            ].map(m => m.userId);
+            room.getMembersWithMembership('invite').forEach(m => alreadyInvited.add(m.userId));
+            room.getMembersWithMembership('join').forEach(m => alreadyInvited.add(m.userId));
+            // add banned users, so we don't try to invite them
+            room.getMembersWithMembership('ban').forEach(m => alreadyInvited.add(m.userId));
         }
 
-
         this.state = {
             targets: [], // array of Member objects (see interface above)
             filterText: "",
@@ -332,24 +332,63 @@ export default class InviteDialog extends React.PureComponent {
         this._editorRef = createRef();
     }
 
-    _buildRecents(excludedTargetIds: string[]): {userId: string, user: RoomMember, lastActive: number} {
-        const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals();
+    _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
+        const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
+
+        // Also pull in all the rooms tagged as TAG_DM so we don't miss anything. Sometimes the
+        // room list doesn't tag the room for the DMRoomMap, but does for the room list.
+        const taggedRooms = RoomListStore.getRoomLists();
+        const dmTaggedRooms = taggedRooms[TAG_DM];
+        const myUserId = MatrixClientPeg.get().getUserId();
+        for (const dmRoom of dmTaggedRooms) {
+            const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);
+            for (const member of otherMembers) {
+                if (rooms[member.userId]) continue; // already have a room
+
+                console.warn(`Adding DM room for ${member.userId} as ${dmRoom.roomId} from tag, not DM map`);
+                rooms[member.userId] = dmRoom;
+            }
+        }
+
         const recents = [];
         for (const userId in rooms) {
             // Filter out user IDs that are already in the room / should be excluded
-            if (excludedTargetIds.includes(userId)) continue;
+            if (excludedTargetIds.has(userId)) {
+                console.warn(`[Invite:Recents] Excluding ${userId} from recents`);
+                continue;
+            }
 
             const room = rooms[userId];
             const member = room.getMember(userId);
-            if (!member) continue; // just skip people who don't have memberships for some reason
+            if (!member) {
+                // just skip people who don't have memberships for some reason
+                console.warn(`[Invite:Recents] ${userId} is missing a member object in their own DM (${room.roomId})`);
+                continue;
+            }
 
-            const lastEventTs = room.timeline && room.timeline.length
-                ? room.timeline[room.timeline.length - 1].getTs()
-                : 0;
-            if (!lastEventTs) continue; // something weird is going on with this room
+            // Find the last timestamp for a message event
+            const searchTypes = ["m.room.message", "m.room.encrypted", "m.sticker"];
+            const maxSearchEvents = 20; // to prevent traversing history
+            let lastEventTs = 0;
+            if (room.timeline && room.timeline.length) {
+                for (let i = room.timeline.length - 1; i >= 0; i--) {
+                    const ev = room.timeline[i];
+                    if (searchTypes.includes(ev.getType())) {
+                        lastEventTs = ev.getTs();
+                        break;
+                    }
+                    if (room.timeline.length - i > maxSearchEvents) break;
+                }
+            }
+            if (!lastEventTs) {
+                // something weird is going on with this room
+                console.warn(`[Invite:Recents] ${userId} (${room.roomId}) has a weird last timestamp: ${lastEventTs}`);
+                continue;
+            }
 
             recents.push({userId, user: member, lastActive: lastEventTs});
         }
+        if (!recents) console.warn("[Invite:Recents] No recents to suggest!");
 
         // Sort the recents by last active to save us time later
         recents.sort((a, b) => b.lastActive - a.lastActive);
@@ -357,13 +396,10 @@ export default class InviteDialog extends React.PureComponent {
         return recents;
     }
 
-    _buildSuggestions(excludedTargetIds: string[]): {userId: string, user: RoomMember} {
+    _buildSuggestions(excludedTargetIds: Set<string>): {userId: string, user: RoomMember} {
         const maxConsideredMembers = 200;
-        const client = MatrixClientPeg.get();
-        const excludedUserIds = [client.getUserId(), SdkConfig.get()['welcomeUserId']];
-        const joinedRooms = client.getRooms()
-            .filter(r => r.getMyMembership() === 'join')
-            .filter(r => r.getJoinedMemberCount() <= maxConsideredMembers);
+        const joinedRooms = MatrixClientPeg.get().getRooms()
+            .filter(r => r.getMyMembership() === 'join' && r.getJoinedMemberCount() <= maxConsideredMembers);
 
         // Generates { userId: {member, rooms[]} }
         const memberRooms = joinedRooms.reduce((members, room) => {
@@ -372,10 +408,10 @@ export default class InviteDialog extends React.PureComponent {
                 return members; // Do nothing
             }
 
-            const joinedMembers = room.getJoinedMembers().filter(u => !excludedUserIds.includes(u.userId));
+            const joinedMembers = room.getJoinedMembers().filter(u => !excludedTargetIds.has(u.userId));
             for (const member of joinedMembers) {
                 // Filter out user IDs that are already in the room / should be excluded
-                if (excludedTargetIds.includes(member.userId)) {
+                if (excludedTargetIds.has(member.userId)) {
                     continue;
                 }
 
@@ -416,7 +452,7 @@ export default class InviteDialog extends React.PureComponent {
         // room to see who has sent a message in the last few hours, and giving them a score
         // which correlates to the freshness of their message. In theory, this results in suggestions
         // which are closer to "continue this conversation" rather than "this person exists".
-        const trueJoinedRooms = client.getRooms().filter(r => r.getMyMembership() === 'join');
+        const trueJoinedRooms = MatrixClientPeg.get().getRooms().filter(r => r.getMyMembership() === 'join');
         const now = (new Date()).getTime();
         const earliestAgeConsidered = now - (60 * 60 * 1000); // 1 hour ago
         const maxMessagesConsidered = 50; // so we don't iterate over a huge amount of traffic
@@ -432,7 +468,7 @@ export default class InviteDialog extends React.PureComponent {
             const events = room.getLiveTimeline().getEvents(); // timelines are most recent last
             for (let i = events.length - 1; i >= Math.max(0, events.length - maxMessagesConsidered); i--) {
                 const ev = events[i];
-                if (excludedUserIds.includes(ev.getSender())) {
+                if (excludedTargetIds.has(ev.getSender())) {
                     continue;
                 }
                 if (ev.getTs() <= earliestAgeConsidered) {
@@ -493,9 +529,27 @@ export default class InviteDialog extends React.PureComponent {
         return false;
     }
 
-    _startDm = () => {
+    _convertFilter(): Member[] {
+        // Check to see if there's anything to convert first
+        if (!this.state.filterText || !this.state.filterText.includes('@')) return this.state.targets || [];
+
+        let newMember: Member;
+        if (this.state.filterText.startsWith('@')) {
+            // Assume mxid
+            newMember = new DirectoryMember({user_id: this.state.filterText, display_name: null, avatar_url: null});
+        } else {
+            // Assume email
+            newMember = new ThreepidMember(this.state.filterText);
+        }
+        const newTargets = [...(this.state.targets || []), newMember];
+        this.setState({targets: newTargets, filterText: ''});
+        return newTargets;
+    }
+
+    _startDm = async () => {
         this.setState({busy: true});
-        const targetIds = this.state.targets.map(t => t.userId);
+        const targets = this._convertFilter();
+        const targetIds = targets.map(t => t.userId);
 
         // Check if there is already a DM with these people and reuse it if possible.
         const existingRoom = DMRoomMap.shared().getDMRoomForIdentifiers(targetIds);
@@ -510,14 +564,30 @@ export default class InviteDialog extends React.PureComponent {
             return;
         }
 
+        const createRoomOptions = {inlineErrors: true};
+
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            // Check whether all users have uploaded device keys before.
+            // If so, enable encryption in the new room.
+            const client = MatrixClientPeg.get();
+            const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
+            if (allHaveDeviceKeys) {
+                createRoomOptions.encryption = true;
+            }
+        }
+
         // Check if it's a traditional DM and create the room if required.
         // TODO: [Canonical DMs] Remove this check and instead just create the multi-person DM
         let createRoomPromise = Promise.resolve();
-        if (targetIds.length === 1) {
-            createRoomPromise = createRoom({dmUserId: targetIds[0]});
+        const isSelf = targetIds.length === 1 && targetIds[0] === MatrixClientPeg.get().getUserId();
+        if (targetIds.length === 1 && !isSelf) {
+            createRoomOptions.dmUserId = targetIds[0];
+            createRoomPromise = createRoom(createRoomOptions);
+        } else if (isSelf) {
+            createRoomPromise = createRoom(createRoomOptions);
         } else {
             // Create a boring room and try to invite the targets manually.
-            createRoomPromise = createRoom().then(roomId => {
+            createRoomPromise = createRoom(createRoomOptions).then(roomId => {
                 return inviteMultipleToRoom(roomId, targetIds);
             }).then(result => {
                 if (this._shouldAbortAfterInviteError(result)) {
@@ -541,7 +611,9 @@ export default class InviteDialog extends React.PureComponent {
 
     _inviteUsers = () => {
         this.setState({busy: true});
-        const targetIds = this.state.targets.map(t => t.userId);
+        this._convertFilter();
+        const targets = this._convertFilter();
+        const targetIds = targets.map(t => t.userId);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
         if (!room) {
@@ -586,13 +658,45 @@ export default class InviteDialog extends React.PureComponent {
             clearTimeout(this._debounceTimer);
         }
         this._debounceTimer = setTimeout(async () => {
-            MatrixClientPeg.get().searchUserDirectory({term}).then(r => {
+            MatrixClientPeg.get().searchUserDirectory({term}).then(async r => {
                 if (term !== this.state.filterText) {
                     // Discard the results - we were probably too slow on the server-side to make
                     // these results useful. This is a race we want to avoid because we could overwrite
                     // more accurate results.
                     return;
                 }
+
+                if (!r.results) r.results = [];
+
+                // While we're here, try and autocomplete a search result for the mxid itself
+                // if there's no matches (and the input looks like a mxid).
+                if (term[0] === '@' && term.indexOf(':') > 1) {
+                    try {
+                        const profile = await MatrixClientPeg.get().getProfileInfo(term);
+                        if (profile) {
+                            // If we have a profile, we have enough information to assume that
+                            // the mxid can be invited - add it to the list. We stick it at the
+                            // top so it is most obviously presented to the user.
+                            r.results.splice(0, 0, {
+                                user_id: term,
+                                display_name: profile['displayname'],
+                                avatar_url: profile['avatar_url'],
+                            });
+                        }
+                    } catch (e) {
+                        console.warn("Non-fatal error trying to make an invite for a user ID");
+                        console.warn(e);
+
+                        // Add a result anyways, just without a profile. We stick it at the
+                        // top so it is most obviously presented to the user.
+                        r.results.splice(0, 0, {
+                            user_id: term,
+                            display_name: term,
+                            avatar_url: null,
+                        });
+                    }
+                }
+
                 this.setState({
                     serverResultsMixin: r.results.map(u => ({
                         userId: u.user_id,
@@ -672,11 +776,16 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _toggleMember = (member: Member) => {
+        let filterText = this.state.filterText;
         const targets = this.state.targets.map(t => t); // cheap clone for mutation
         const idx = targets.indexOf(member);
-        if (idx >= 0) targets.splice(idx, 1);
-        else targets.push(member);
-        this.setState({targets});
+        if (idx >= 0) {
+            targets.splice(idx, 1);
+        } else {
+            targets.push(member);
+            filterText = ""; // clear the filter when the user accepts a suggestion
+        }
+        this.setState({targets, filterText});
     };
 
     _removeMember = (member: Member) => {
@@ -689,6 +798,12 @@ export default class InviteDialog extends React.PureComponent {
     };
 
     _onPaste = async (e) => {
+        if (this.state.filterText) {
+            // if the user has already typed something, just let them
+            // paste normally.
+            return;
+        }
+
         // Prevent the text being pasted into the textarea
         e.preventDefault();
 
@@ -703,7 +818,7 @@ export default class InviteDialog extends React.PureComponent {
         ];
         const toAdd = [];
         const failed = [];
-        const potentialAddresses = text.split(/[\s,]+/);
+        const potentialAddresses = text.split(/[\s,]+/).map(p => p.trim()).filter(p => !!p); // filter empty strings
         for (const address of potentialAddresses) {
             const member = possibleMembers.find(m => m.userId === address);
             if (member) {
@@ -791,24 +906,24 @@ export default class InviteDialog extends React.PureComponent {
         // Mix in the server results if we have any, but only if we're searching. We track the additional
         // members separately because we want to filter sourceMembers but trust the mixin arrays to have
         // the right members in them.
-        let additionalMembers = [];
+        let priorityAdditionalMembers = []; // Shows up before our own suggestions, higher quality
+        let otherAdditionalMembers = []; // Shows up after our own suggestions, lower quality
         const hasMixins = this.state.serverResultsMixin || this.state.threepidResultsMixin;
         if (this.state.filterText && hasMixins && kind === 'suggestions') {
             // We don't want to duplicate members though, so just exclude anyone we've already seen.
             const notAlreadyExists = (u: Member): boolean => {
                 return !sourceMembers.some(m => m.userId === u.userId)
-                    && !additionalMembers.some(m => m.userId === u.userId);
+                    && !priorityAdditionalMembers.some(m => m.userId === u.userId)
+                    && !otherAdditionalMembers.some(m => m.userId === u.userId);
             };
 
-            const uniqueServerResults = this.state.serverResultsMixin.filter(notAlreadyExists);
-            additionalMembers = additionalMembers.concat(...uniqueServerResults);
-
-            const uniqueThreepidResults = this.state.threepidResultsMixin.filter(notAlreadyExists);
-            additionalMembers = additionalMembers.concat(...uniqueThreepidResults);
+            otherAdditionalMembers = this.state.serverResultsMixin.filter(notAlreadyExists);
+            priorityAdditionalMembers = this.state.threepidResultsMixin.filter(notAlreadyExists);
         }
+        const hasAdditionalMembers = priorityAdditionalMembers.length > 0 || otherAdditionalMembers.length > 0;
 
         // Hide the section if there's nothing to filter by
-        if (sourceMembers.length === 0 && additionalMembers.length === 0) return null;
+        if (sourceMembers.length === 0 && !hasAdditionalMembers) return null;
 
         // Do some simple filtering on the input before going much further. If we get no results, say so.
         if (this.state.filterText) {
@@ -816,7 +931,7 @@ export default class InviteDialog extends React.PureComponent {
             sourceMembers = sourceMembers
                 .filter(m => m.user.name.toLowerCase().includes(filterBy) || m.userId.toLowerCase().includes(filterBy));
 
-            if (sourceMembers.length === 0 && additionalMembers.length === 0) {
+            if (sourceMembers.length === 0 && !hasAdditionalMembers) {
                 return (
                     <div className='mx_InviteDialog_section'>
                         <h3>{sectionName}</h3>
@@ -828,7 +943,7 @@ export default class InviteDialog extends React.PureComponent {
 
         // Now we mix in the additional members. Again, we presume these have already been filtered. We
         // also assume they are more relevant than our suggestions and prepend them to the list.
-        sourceMembers = [...additionalMembers, ...sourceMembers];
+        sourceMembers = [...priorityAdditionalMembers, ...sourceMembers, ...otherAdditionalMembers];
 
         // If we're going to hide one member behind 'show more', just use up the space of the button
         // with the member's tile instead.
@@ -876,9 +991,10 @@ export default class InviteDialog extends React.PureComponent {
                 key={"input"}
                 rows={1}
                 onChange={this._updateFilter}
-                defaultValue={this.state.filterText}
+                value={this.state.filterText}
                 ref={this._editorRef}
                 onPaste={this._onPaste}
+                autoFocus={true}
             />
         );
         return (
@@ -944,10 +1060,10 @@ export default class InviteDialog extends React.PureComponent {
 
             title = _t("Direct Messages");
             helpText = _t(
-                "If you can't find someone, ask them for their username, or share your " +
+                "If you can't find someone, ask them for their username, share your " +
                 "username (%(userId)s) or <a>profile link</a>.",
                 {userId},
-                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noopener" target="_blank">{sub}</a>},
+                {a: (sub) => <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{sub}</a>},
             );
             buttonText = _t("Go");
             goButtonFn = this._startDm;
@@ -956,12 +1072,17 @@ export default class InviteDialog extends React.PureComponent {
             helpText = _t(
                 "If you can't find someone, ask them for their username (e.g. @user:server.com) or " +
                 "<a>share this room</a>.", {},
-                {a: (sub) => <a href={makeRoomPermalink(this.props.roomId)} rel="noopener" target="_blank">{sub}</a>},
+                {
+                    a: (sub) =>
+                        <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
+                },
             );
             buttonText = _t("Invite");
             goButtonFn = this._inviteUsers;
         }
 
+        const hasSelection = this.state.targets.length > 0
+            || (this.state.filterText && this.state.filterText.includes('@'));
         return (
             <BaseDialog
                 className='mx_InviteDialog'
@@ -970,7 +1091,7 @@ export default class InviteDialog extends React.PureComponent {
                 title={title}
             >
                 <div className='mx_InviteDialog_content'>
-                    <p>{helpText}</p>
+                    <p className='mx_InviteDialog_helpText'>{helpText}</p>
                     <div className='mx_InviteDialog_addressBar'>
                         {this._renderEditor()}
                         <div className='mx_InviteDialog_buttonAndSpinner'>
@@ -978,7 +1099,7 @@ export default class InviteDialog extends React.PureComponent {
                                 kind="primary"
                                 onClick={goButtonFn}
                                 className='mx_InviteDialog_goButton'
-                                disabled={this.state.busy}
+                                disabled={this.state.busy || !hasSelection}
                             >
                                 {buttonText}
                             </AccessibleButton>
@@ -987,8 +1108,10 @@ export default class InviteDialog extends React.PureComponent {
                     </div>
                     {this._renderIdentityServerWarning()}
                     <div className='error'>{this.state.errorText}</div>
-                    {this._renderSection('recents')}
-                    {this._renderSection('suggestions')}
+                    <div className='mx_InviteDialog_userSections'>
+                        {this._renderSection('recents')}
+                        {this._renderSection('suggestions')}
+                    </div>
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/KeyShareDialog.js

@@ -60,7 +60,7 @@ export default createReactClass({
             const deviceInfo = r[userId][deviceId];
 
             if (!deviceInfo) {
-                console.warn(`No details found for device ${userId}:${deviceId}`);
+                console.warn(`No details found for session ${userId}:${deviceId}`);
 
                 this.props.onFinished(false);
                 return;
@@ -121,10 +121,10 @@ export default createReactClass({
 
         let text;
         if (this.state.wasNewDevice) {
-            text = _td("You added a new device '%(displayName)s', which is"
+            text = _td("You added a new session '%(displayName)s', which is"
                 + " requesting encryption keys.");
         } else {
-            text = _td("Your unverified device '%(displayName)s' is requesting"
+            text = _td("Your unverified session '%(displayName)s' is requesting"
                 + " encryption keys.");
         }
         text = _t(text, {displayName: displayName});
@@ -159,7 +159,7 @@ export default createReactClass({
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    <p>{ _t('Loading device info...') }</p>
+                    <p>{ _t('Loading session info...') }</p>
                     <Spinner />
                 </div>
             );

src/components/views/dialogs/LogoutDialog.js

@@ -138,7 +138,7 @@ export default class LogoutDialog extends React.Component {
                 const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
                 let setupButtonCaption;
                 if (this.state.backupInfo) {
-                    setupButtonCaption = _t("Connect this device to Key Backup");
+                    setupButtonCaption = _t("Connect this session to Key Backup");
                 } else {
                     // if there's an error fetching the backup info, we'll just assume there's
                     // no backup for the purpose of the button caption

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -0,0 +1,116 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import { replaceableComponent } from '../../../utils/replaceableComponent';
+import VerificationRequestDialog from './VerificationRequestDialog';
+import BaseDialog from './BaseDialog';
+import DialogButtons from '../elements/DialogButtons';
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import * as sdk from '../../../index';
+
+@replaceableComponent("views.dialogs.NewSessionReviewDialog")
+export default class NewSessionReviewDialog extends React.PureComponent {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    onCancelClick = () => {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
+            headerImage: require("../../../../res/img/e2e/warning.svg"),
+            title: _t("Your account is not secure"),
+            description: <div>
+                {_t("One of the following may be compromised:")}
+                <ul>
+                    <li>{_t("Your password")}</li>
+                    <li>{_t("Your homeserver")}</li>
+                    <li>{_t("This session, or the other session")}</li>
+                    <li>{_t("The internet connection either session is using")}</li>
+                </ul>
+                <div>
+                    {_t("We recommend you change your password and recovery key in Settings immediately")}
+                </div>
+            </div>,
+            onFinished: () => this.props.onFinished(false),
+        });
+    }
+
+    onContinueClick = async () => {
+        const { userId, device } = this.props;
+        const cli = MatrixClientPeg.get();
+        const request = await cli.requestVerification(
+            userId,
+            [device.deviceId],
+        );
+
+        this.props.onFinished(true);
+        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
+            verificationRequest: request,
+        });
+    }
+
+    render() {
+        const { device } = this.props;
+
+        const icon = <span className="mx_NewSessionReviewDialog_headerIcon mx_E2EIcon_warning"></span>;
+        const titleText = _t("New session");
+
+        const title = <h2 className="mx_NewSessionReviewDialog_header">
+            {icon}
+            {titleText}
+        </h2>;
+
+        return (
+            <BaseDialog
+                title={title}
+                onFinished={this.props.onFinished}
+            >
+                <div className="mx_NewSessionReviewDialog_body">
+                    <p>{_t(
+                        "Use this session to verify your new one, " +
+                        "granting it access to encrypted messages:",
+                    )}</p>
+                    <div className="mx_NewSessionReviewDialog_deviceInfo">
+                        <div>
+                            <span className="mx_NewSessionReviewDialog_deviceName">
+                                {device.getDisplayName()}
+                            </span> <span className="mx_NewSessionReviewDialog_deviceID">
+                                ({device.deviceId})
+                            </span>
+                        </div>
+                    </div>
+                    <p>{_t(
+                        "If you didn’t sign in to this session, " +
+                        "your account may be compromised.",
+                    )}</p>
+                    <DialogButtons
+                        cancelButton={_t("This wasn't me")}
+                        cancelButtonClass="danger"
+                        primaryButton={_t("Continue")}
+                        onCancel={this.onCancelClick}
+                        onPrimaryButtonClick={this.onContinueClick}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/QuestionDialog.js

@@ -31,6 +31,8 @@ export default createReactClass({
         danger: PropTypes.bool,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
+        headerImage: PropTypes.string,
+        quitOnly: PropTypes.bool, // quitOnly doesn't show the cancel button just the quit [x].
     },
 
     getDefaultProps: function() {
@@ -41,6 +43,7 @@ export default createReactClass({
             focus: true,
             hasCancelButton: true,
             danger: false,
+            quitOnly: false,
         };
     },
 
@@ -63,6 +66,7 @@ export default createReactClass({
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
+                headerImage={this.props.headerImage}
                 hasCancel={this.props.hasCancelButton}
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
@@ -71,7 +75,7 @@ export default createReactClass({
                 <DialogButtons primaryButton={this.props.button || _t('OK')}
                     primaryButtonClass={primaryButtonClass}
                     cancelButton={this.props.cancelButton}
-                    hasCancel={this.props.hasCancelButton}
+                    hasCancel={this.props.hasCancelButton && !this.props.quitOnly}
                     onPrimaryButtonClick={this.onOk}
                     focus={this.props.focus}
                     onCancel={this.onCancel}

src/components/views/dialogs/ReportEventDialog.js

@@ -20,6 +20,8 @@ import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
 import {MatrixEvent} from "matrix-js-sdk";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import SdkConfig from '../../../SdkConfig';
+import Markdown from '../../../Markdown';
 
 /*
  * A dialog for reporting an event.
@@ -95,6 +97,15 @@ export default class ReportEventDialog extends PureComponent {
             );
         }
 
+        const adminMessageMD =
+            SdkConfig.get().reportEvent &&
+            SdkConfig.get().reportEvent.adminMessageMD;
+        let adminMessage;
+        if (adminMessageMD) {
+            const html = new Markdown(adminMessageMD).toHTML({ externalLinks: true });
+            adminMessage = <p dangerouslySetInnerHTML={{ __html: html }} />;
+        }
+
         return (
             <BaseDialog
                 className="mx_BugReportDialog"
@@ -110,7 +121,7 @@ export default class ReportEventDialog extends PureComponent {
                                 "administrator will not be able to read the message text or view any files or images.")
                         }
                     </p>
-
+                    {adminMessage}
                     <Field
                         id="mx_ReportEventDialog_reason"
                         className="mx_ReportEventDialog_reason"

src/components/views/dialogs/RoomSettingsDialog.js

@@ -54,9 +54,6 @@ export default class RoomSettingsDialog extends React.Component {
 
     _getTabs() {
         const tabs = [];
-        const featureFlag = SettingsStore.isFeatureEnabled("feature_bridge_state");
-        const shouldShowBridgeIcon = featureFlag &&
-            BridgeSettingsTab.getBridgeStateEvents(this.props.roomId).length > 0;
 
         tabs.push(new Tab(
             _td("General"),
@@ -79,9 +76,9 @@ export default class RoomSettingsDialog extends React.Component {
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 
-        if (shouldShowBridgeIcon) {
+        if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
-                _td("Bridge Info"),
+                _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
             ));

src/components/views/dialogs/SetPasswordDialog.js

@@ -114,7 +114,7 @@ export default createReactClass({
             >
                 <div className="mx_Dialog_content">
                     <p>
-                        { _t('This will allow you to return to your account after signing out, and sign in on other devices.') }
+                        { _t('This will allow you to return to your account after signing out, and sign in on other sessions.') }
                     </p>
                     <ChangePassword
                         className="mx_SetPasswordDialog_change_password"

src/components/views/dialogs/ShareDialog.js

@@ -218,7 +218,7 @@ export default class ShareDialog extends React.Component {
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {
-                            socials.map((social) => <a rel="noopener"
+                            socials.map((social) => <a rel="noreferrer noopener"
                                                        target="_blank"
                                                        key={social.name}
                                                        name={social.name}

src/components/views/dialogs/TermsDialog.js

@@ -135,7 +135,7 @@ export default class TermsDialog extends React.PureComponent {
                 rows.push(<tr key={termDoc[termsLang].url}>
                     <td className="mx_TermsDialog_service">{serviceName}</td>
                     <td className="mx_TermsDialog_summary">{summary}</td>
-                    <td>{termDoc[termsLang].name} <a rel="noopener" target="_blank" href={termDoc[termsLang].url}>
+                    <td>{termDoc[termsLang].name} <a rel="noreferrer noopener" target="_blank" href={termDoc[termsLang].url}>
                         <span className="mx_TermsDialog_link" />
                     </a></td>
                     <td><TermsCheckbox

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -132,8 +132,8 @@ export default createReactClass({
         if (SettingsStore.getValue("blacklistUnverifiedDevices", this.props.room.roomId)) {
             warning = (
                 <h4>
-                    { _t("You are currently blacklisting unverified devices; to send " +
-                    "messages to these devices you must verify them.") }
+                    { _t("You are currently blacklisting unverified sessions; to send " +
+                    "messages to these sessions you must verify them.") }
                 </h4>
             );
         } else {
@@ -141,7 +141,7 @@ export default createReactClass({
                 <div>
                     <p>
                         { _t("We recommend you go through the verification process " +
-                            "for each device to confirm they belong to their legitimate owner, " +
+                            "for each session to confirm they belong to their legitimate owner, " +
                             "but you can resend the message without verifying if you prefer.") }
                     </p>
                 </div>
@@ -165,15 +165,15 @@ export default createReactClass({
         return (
             <BaseDialog className='mx_UnknownDeviceDialog'
                 onFinished={this.props.onFinished}
-                title={_t('Room contains unknown devices')}
+                title={_t('Room contains unknown sessions')}
                 contentId='mx_Dialog_content'
             >
                 <GeminiScrollbarWrapper autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
                     <h4>
-                        { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
+                        { _t('"%(RoomName)s" contains sessions that you haven\'t seen before.', {RoomName: this.props.room.name}) }
                     </h4>
                     { warning }
-                    { _t("Unknown devices") }:
+                    { _t("Unknown sessions") }:
 
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbarWrapper>

src/components/views/dialogs/VerificationRequestDialog.js

@@ -0,0 +1,55 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class VerificationRequestDialog extends React.Component {
+    static propTypes = {
+        verificationRequest: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(...args) {
+        super(...args);
+        this.onFinished = this.onFinished.bind(this);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
+        return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
+                contentId="mx_Dialog_content"
+                title={_t("Verification Request")}
+                hasCancel={true}
+            >
+            <EncryptionPanel
+                layout="dialog"
+                verificationRequest={this.props.verificationRequest}
+                onClose={this.props.onFinished}
+                member={MatrixClientPeg.get().getUser(this.props.verificationRequest.otherUserId)}
+            />
+        </BaseDialog>;
+    }
+
+    onFinished() {
+        this.props.verificationRequest.cancel();
+        this.props.onFinished();
+    }
+}

src/components/views/dialogs/keybackup/RestoreKeyBackupDialog.js

@@ -16,12 +16,12 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 import { MatrixClient } from 'matrix-js-sdk';
 import Modal from '../../../../Modal';
 import { _t } from '../../../../languageHandler';
-import {Key} from "../../../../Keyboard";
 import { accessSecretStorage } from '../../../../CrossSigningManager';
 
 const RESTORE_TYPE_PASSPHRASE = 0;
@@ -32,6 +32,16 @@ const RESTORE_TYPE_SECRET_STORAGE = 2;
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
 export default class RestoreKeyBackupDialog extends React.PureComponent {
+    static propTypes = {
+        // if false, will close the dialog as soon as the restore completes succesfully
+        // default: true
+        showSummary: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        showSummary: true,
+    };
+
     constructor(props) {
         super(props);
         this.state = {
@@ -96,6 +106,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
             );
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -110,6 +124,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
     }
 
     _onRecoveryKeyNext = async () => {
+        if (!this.state.recoveryKeyValid) return;
+
         this.setState({
             loading: true,
             restoreError: null,
@@ -119,6 +135,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
             );
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -138,18 +158,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseKeyPress = (e) => {
-        if (e.key === Key.ENTER) {
-            this._onPassPhraseNext();
-        }
-    }
-
-    _onRecoveryKeyKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
-            this._onRecoveryKeyNext();
-        }
-    }
-
     async _restoreWithSecretStorage() {
         this.setState({
             loading: true,
@@ -229,7 +237,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         } else if (this.state.restoreError) {
             if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
                 if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
-                    title = _t("Recovery Key Mismatch");
+                    title = _t("Recovery key mismatch");
                     content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this key: " +
@@ -237,7 +245,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                         )}</p>
                     </div>;
                 } else {
-                    title = _t("Incorrect Recovery Passphrase");
+                    title = _t("Incorrect recovery passphrase");
                     content = <div>
                         <p>{_t(
                             "Backup could not be decrypted with this passphrase: " +
@@ -253,7 +261,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             title = _t("Error");
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
-            title = _t("Backup Restored");
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+            title = _t("Backup restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -264,11 +273,16 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = <div>
                 <p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
                 {failedToDecrypt}
+                <DialogButtons primaryButton={_t('OK')}
+                    onPrimaryButtonClick={this._onDone}
+                    hasCancel={false}
+                    focus={true}
+                />
             </div>;
         } else if (backupHasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter Recovery Passphrase");
+            title = _t("Enter recovery passphrase");
             content = <div>
                 <p>{_t(
                     "<b>Warning</b>: you should only set up key backup " +
@@ -280,21 +294,22 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     "messaging by entering your recovery passphrase.",
                 )}</p>
 
-                <div className="mx_RestoreKeyBackupDialog_primaryContainer">
+                <form className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input type="password"
                         className="mx_RestoreKeyBackupDialog_passPhraseInput"
                         onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
                         value={this.state.passPhrase}
                         autoFocus={true}
                     />
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
+                        primaryIsSubmit={true}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
@@ -315,7 +330,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter Recovery Key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
@@ -346,7 +361,6 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 <div className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"
                         onChange={this._onRecoveryKeyChange}
-                        onKeyPress={this._onRecoveryKeyKeyPress}
                         value={this.state.recoveryKey}
                         autoFocus={true}
                     />

src/components/views/dialogs/secretstorage/AccessSecretStorageDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018, 2019 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.
@@ -21,7 +21,6 @@ import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 
 import { _t } from '../../../../languageHandler';
-import { Key } from "../../../../Keyboard";
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -68,7 +67,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseNext = async () => {
+    _onPassPhraseNext = async (e) => {
+        e.preventDefault();
+
+        if (this.state.passPhrase.length <= 0) return;
+
         this.setState({ keyMatches: null });
         const input = { passphrase: this.state.passPhrase };
         const keyMatches = await this.props.checkPrivateKey(input);
@@ -79,7 +82,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         }
     }
 
-    _onRecoveryKeyNext = async () => {
+    _onRecoveryKeyNext = async (e) => {
+        e.preventDefault();
+
+        if (!this.state.recoveryKeyValid) return;
+
         this.setState({ keyMatches: null });
         const input = { recoveryKey: this.state.recoveryKey };
         const keyMatches = await this.props.checkPrivateKey(input);
@@ -97,18 +104,6 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.passPhrase.length > 0) {
-            this._onPassPhraseNext();
-        }
-    }
-
-    _onRecoveryKeyKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
-            this._onRecoveryKeyNext();
-        }
-    }
-
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -135,7 +130,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                     )}
                 </div>;
             } else {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
             }
 
             content = <div>
@@ -146,26 +141,28 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other devices by entering your passphrase.",
+                    "identity for verifying other sessions by entering your passphrase.",
                 )}</p>
 
-                <div className="mx_AccessSecretStorageDialog_primaryContainer">
-                    <input type="password"
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
+                    <input
+                        type="password"
                         className="mx_AccessSecretStorageDialog_passPhraseInput"
                         onChange={this._onPassPhraseChange}
-                        onKeyPress={this._onPassPhraseKeyPress}
                         value={this.state.passPhrase}
                         autoFocus={true}
+                        autoComplete="new-password"
                     />
                     {keyStatus}
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
@@ -192,11 +189,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             let keyStatus;
             if (this.state.recoveryKey.length === 0) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
-            } else if (this.state.recoveryKeyValid) {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
-                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
-                </div>;
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
             } else if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
@@ -204,6 +197,10 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         "entered the correct recovery key.",
                     )}
                 </div>;
+            } else if (this.state.recoveryKeyValid) {
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
+                    {"\uD83D\uDC4D "}{_t("This looks like a valid recovery key!")}
+                </div>;
             } else {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t("Not a valid recovery key")}
@@ -218,25 +215,25 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 )}</p>
                 <p>{_t(
                     "Access your secure message history and your cross-signing " +
-                    "identity for verifying other devices by entering your recovery key.",
+                    "identity for verifying other sessions by entering your recovery key.",
                 )}</p>
 
-                <div className="mx_AccessSecretStorageDialog_primaryContainer">
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext}>
                     <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
                         onChange={this._onRecoveryKeyChange}
-                        onKeyPress={this._onRecoveryKeyKeyPress}
                         value={this.state.recoveryKey}
                         autoFocus={true}
                     />
                     {keyStatus}
-                    <DialogButtons primaryButton={_t('Next')}
+                    <DialogButtons
+                        primaryButton={_t('Next')}
                         onPrimaryButtonClick={this._onRecoveryKeyNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
-                </div>
+                </form>
                 {_t(
                     "If you've forgotten your recovery key you can "+
                     "<button>set up new recovery options</button>."

src/components/views/elements/AppTile.js

@@ -552,7 +552,7 @@ export default class AppTile extends React.Component {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
         // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener'}).click();
+            { target: '_blank', href: this._getSafeUrl(), rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {

src/components/views/elements/DialogButtons.js

@@ -34,12 +34,19 @@ export default createReactClass({
         // A node to insert into the cancel button instead of default "Cancel"
         cancelButton: PropTypes.node,
 
+        // If true, make the primary button a form submit button (input type="submit")
+        primaryIsSubmit: PropTypes.bool,
+
         // onClick handler for the primary button.
-        onPrimaryButtonClick: PropTypes.func.isRequired,
+        onPrimaryButtonClick: PropTypes.func,
 
         // should there be a cancel button? default: true
         hasCancel: PropTypes.bool,
 
+        // The class of the cancel button, only used if a cancel button is
+        // enabled
+        cancelButtonClass: PropTypes.node,
+
         // onClick handler for the cancel button.
         onCancel: PropTypes.func,
 
@@ -69,16 +76,26 @@ export default createReactClass({
             primaryButtonClassName += " " + this.props.primaryButtonClass;
         }
         let cancelButton;
+
         if (this.props.cancelButton || this.props.hasCancel) {
-            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+            cancelButton = <button
+                // important: the default type is 'submit' and this button comes before the
+                // primary in the DOM so will get form submissions unless we make it not a submit.
+                type="button"
+                onClick={this._onCancelClick}
+                className={this.props.cancelButtonClass}
+                disabled={this.props.disabled}
+            >
                 { this.props.cancelButton || _t("Cancel") }
             </button>;
         }
+
         return (
             <div className="mx_Dialog_buttons">
                 { cancelButton }
                 { this.props.children }
-                <button className={primaryButtonClassName}
+                <button type={this.props.primaryIsSubmit ? 'submit' : 'button'}
+                    className={primaryButtonClassName}
                     onClick={this.props.onPrimaryButtonClick}
                     autoFocus={this.props.focus}
                     disabled={this.props.disabled || this.props.primaryDisabled}

src/components/views/elements/ImageView.js

@@ -91,7 +91,7 @@ export default class ImageView extends React.Component {
     getName() {
         let name = this.props.name;
         if (name && this.props.link) {
-            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
+            name = <a href={ this.props.link } target="_blank" rel="noreferrer noopener">{ name }</a>;
         }
         return name;
     }

src/components/views/elements/Pill.js

@@ -23,7 +23,6 @@ import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { getDisplayAliasForRoom } from '../../../Rooms';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
@@ -128,7 +127,8 @@ const Pill = createReactClass({
             case Pill.TYPE_ROOM_MENTION: {
                 const localRoom = resourceId[0] === '#' ?
                     MatrixClientPeg.get().getRooms().find((r) => {
-                        return r.getAliases().includes(resourceId);
+                        return r.getCanonicalAlias() === resourceId ||
+                               r.getAltAliases().includes(resourceId);
                     }) : MatrixClientPeg.get().getRoom(resourceId);
                 room = localRoom;
                 if (!localRoom) {
@@ -211,7 +211,7 @@ const Pill = createReactClass({
                 if (room) {
                     linkText = "@room";
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
                     pillClass = 'mx_AtRoomPill';
                 }
@@ -225,7 +225,7 @@ const Pill = createReactClass({
                         member.rawDisplayName = member.rawDisplayName || '';
                         linkText = member.rawDisplayName;
                         if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16} />;
+                            avatar = <MemberAvatar member={member} width={16} height={16} aria-hidden="true" />;
                         }
                         pillClass = 'mx_UserPill';
                         href = null;
@@ -236,12 +236,12 @@ const Pill = createReactClass({
             case Pill.TYPE_ROOM_MENTION: {
                 const room = this.state.room;
                 if (room) {
-                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    linkText = resource;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                        avatar = <RoomAvatar room={room} width={16} height={16} aria-hidden="true" />;
                     }
-                    pillClass = 'mx_RoomPill';
                 }
+                pillClass = 'mx_RoomPill';
             }
                 break;
             case Pill.TYPE_GROUP_MENTION: {
@@ -251,7 +251,7 @@ const Pill = createReactClass({
 
                     linkText = groupId;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <BaseAvatar name={name || groupId} width={16} height={16}
+                        avatar = <BaseAvatar name={name || groupId} width={16} height={16} aria-hidden="true"
                                              url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
                     }
                     pillClass = 'mx_GroupPill';

src/components/views/elements/RoomAliasField.js

@@ -92,6 +92,7 @@ export default class RoomAliasField extends React.PureComponent {
                 invalid: () => _t("Please provide a room alias"),
             }, {
                 key: "taken",
+                final: true,
                 test: async ({value}) => {
                     if (!value) {
                         return true;

src/components/views/elements/SSOButton.js

@@ -0,0 +1,41 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import PlatformPeg from "../../../PlatformPeg";
+import AccessibleButton from "./AccessibleButton";
+import {_t} from "../../../languageHandler";
+
+const SSOButton = ({matrixClient, loginType, ...props}) => {
+    const onClick = () => {
+        PlatformPeg.get().startSingleSignOn(matrixClient, loginType);
+    };
+
+    return (
+        <AccessibleButton {...props} kind="primary" onClick={onClick}>
+            {_t("Sign in with single sign-on")}
+        </AccessibleButton>
+    );
+};
+
+SSOButton.propTypes = {
+    matrixClient: PropTypes.object.isRequired, // does not use context as may use a temporary client
+    loginType: PropTypes.oneOf(["sso", "cas"]), // defaults to "sso" in base-apis
+};
+
+export default SSOButton;

src/components/views/elements/Validation.js

@@ -28,9 +28,11 @@ import classNames from 'classnames';
  *     An array of rules describing how to check to input value. Each rule in an object
  *     and may have the following properties:
  *     - `key`: A unique ID for the rule. Required.
+ *     - `skip`: A function used to determine whether the rule should even be evaluated.
  *     - `test`: A function used to determine the rule's current validity. Required.
  *     - `valid`: Function returning text to show when the rule is valid. Only shown if set.
  *     - `invalid`: Function returning text to show when the rule is invalid. Only shown if set.
+ *     - `final`: A Boolean if true states that this rule will only be considered if all rules before it returned valid.
  * @returns {Function}
  *     A validation function that takes in the current input value and returns
  *     the overall validity and a feedback UI that can be rendered for more detail.
@@ -51,9 +53,20 @@ export default function withValidation({ description, rules }) {
                 if (!rule.key || !rule.test) {
                     continue;
                 }
+
+                if (!valid && rule.final) {
+                    continue;
+                }
+
+                const data = { value, allowEmpty };
+
+                if (rule.skip && rule.skip.call(this, data)) {
+                    continue;
+                }
+
                 // We're setting `this` to whichever component holds the validation
                 // function. That allows rules to access the state of the component.
-                const ruleValid = await rule.test.call(this, { value, allowEmpty });
+                const ruleValid = await rule.test.call(this, data);
                 valid = valid && ruleValid;
                 if (ruleValid && rule.valid) {
                     // If the rule's result is valid and has text to show for

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

@@ -0,0 +1,167 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+import PropTypes from "prop-types";
+import {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,
+    };
+
+    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,
+        };
+        this.generateQrCode();
+    }
+
+    componentDidUpdate(prevProps): void {
+        if (JSON.stringify(this.props) === JSON.stringify(prevProps)) return; // No prop change
+
+        this.generateQRCode();
+    }
+
+    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'}], {
+            errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
+        });
+        this.setState({dataUri: uri});
+    }
+
+    render() {
+        if (!this.state.dataUri) {
+            return <div className='mx_VerificationQRCode'><Spinner /></div>;
+        }
+
+        return <img src={this.state.dataUri} className='mx_VerificationQRCode' />;
+    }
+}

src/components/views/emojipicker/EmojiPicker.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-import * as recent from './recent';
+import * as recent from '../../../emojipicker/recent';
 import {DATA_BY_CATEGORY, getEmojiFromUnicode} from "../../../emoji";
 
 export const CATEGORY_HEADER_HEIGHT = 22;

src/components/views/emojipicker/recent.js

@@ -1,35 +0,0 @@
-/*
-Copyright 2019 Tulir Asokan <tulir@maunium.net>
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-const REACTION_COUNT = JSON.parse(window.localStorage.mx_reaction_count || '{}');
-let sorted = null;
-
-export function add(emoji) {
-    const [count] = REACTION_COUNT[emoji] || [0];
-    REACTION_COUNT[emoji] = [count + 1, Date.now()];
-    window.localStorage.mx_reaction_count = JSON.stringify(REACTION_COUNT);
-    sorted = null;
-}
-
-export function get(limit = 24) {
-    if (sorted === null) {
-        sorted = Object.entries(REACTION_COUNT)
-            .sort(([, [count1, date1]], [, [count2, date2]]) =>
-                count2 === count1 ? date2 - date1 : count2 - count1)
-            .map(([emoji, count]) => emoji);
-    }
-    return sorted.slice(0, limit);
-}

src/components/views/groups/GroupInviteTile.js

@@ -26,6 +26,7 @@ import classNames from 'classnames';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ContextMenu, ContextMenuButton, toRightOf} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
 
 // XXX this class copies a lot from RoomTile.js
 export default createReactClass({
@@ -127,7 +128,8 @@ export default createReactClass({
             'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed,
         });
 
-        const label = <div title={this.props.group.groupId} className={nameClasses} dir="auto">
+        // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
+        const label = <div title={this.props.group.groupId} className={nameClasses} tabIndex={-1} dir="auto">
             { groupName }
         </div>;
 
@@ -137,16 +139,6 @@ export default createReactClass({
         });
 
         const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
-        const badge = (
-            <ContextMenuButton
-                className={badgeClasses}
-                onClick={this.onContextMenuButtonClick}
-                label={_t("Options")}
-                isExpanded={isMenuDisplayed}
-            >
-                { badgeContent }
-            </ContextMenuButton>
-        );
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {
@@ -171,22 +163,37 @@ export default createReactClass({
         }
 
         return <React.Fragment>
-            <AccessibleButton
-                className={classes}
-                onClick={this.onClick}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-                onContextMenu={this.onContextMenu}
-            >
-                <div className="mx_RoomTile_avatar">
-                    { av }
-                </div>
-                <div className="mx_RoomTile_nameContainer">
-                    { label }
-                    { badge }
-                </div>
-                { tooltip }
-            </AccessibleButton>
+            <RovingTabIndexWrapper>
+                {({onFocus, isActive, ref}) =>
+                    <AccessibleButton
+                        onFocus={onFocus}
+                        tabIndex={isActive ? 0 : -1}
+                        inputRef={ref}
+                        className={classes}
+                        onClick={this.onClick}
+                        onMouseEnter={this.onMouseEnter}
+                        onMouseLeave={this.onMouseLeave}
+                        onContextMenu={this.onContextMenu}
+                    >
+                        <div className="mx_RoomTile_avatar">
+                            { av }
+                        </div>
+                        <div className="mx_RoomTile_nameContainer">
+                            { label }
+                            <ContextMenuButton
+                                className={badgeClasses}
+                                onClick={this.onContextMenuButtonClick}
+                                label={_t("Options")}
+                                isExpanded={isMenuDisplayed}
+                                tabIndex={isActive ? 0 : -1}
+                            >
+                                { badgeContent }
+                            </ContextMenuButton>
+                        </div>
+                        { tooltip }
+                    </AccessibleButton>
+                }
+            </RovingTabIndexWrapper>
 
             { contextMenu }
         </React.Fragment>;

src/components/views/groups/GroupMemberTile.js

@@ -60,6 +60,7 @@ export default createReactClass({
 
         const av = (
             <BaseAvatar
+                aria-hidden="true"
                 name={this.props.member.displayname || this.props.member.userId}
                 idName={this.props.member.userId}
                 width={36} height={36}

src/components/views/messages/EditHistoryMessage.js

@@ -20,7 +20,7 @@ import * as HtmlUtils from '../../../HtmlUtils';
 import { editBodyDiffToHtml } from '../../../utils/MessageDiffUtils';
 import {formatTime} from '../../../DateUtils';
 import {MatrixEvent} from 'matrix-js-sdk';
-import {pillifyLinks} from '../../../utils/pillify';
+import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
@@ -53,6 +53,7 @@ export default class EditHistoryMessage extends React.PureComponent {
         this.state = {canRedact, sendStatus: event.getAssociatedStatus()};
 
         this._content = createRef();
+        this._pills = [];
     }
 
     _onAssociatedStatusChanged = () => {
@@ -81,7 +82,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     pillifyLinks() {
         // not present for redacted events
         if (this._content.current) {
-            pillifyLinks(this._content.current.children, this.props.mxEvent);
+            pillifyLinks(this._content.current.children, this.props.mxEvent, this._pills);
         }
     }
 
@@ -90,6 +91,7 @@ export default class EditHistoryMessage extends React.PureComponent {
     }
 
     componentWillUnmount() {
+        unmountPills(this._pills);
         const event = this.props.mxEvent;
         if (event.localRedactionEvent()) {
             event.localRedactionEvent().off("status", this._onAssociatedStatusChanged);

src/components/views/messages/EncryptionEvent.js

@@ -0,0 +1,58 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+
+export default class EncryptionEvent extends React.Component {
+    render() {
+        const {mxEvent} = this.props;
+
+        let body;
+        let classes = "mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon";
+        if (
+            mxEvent.getContent().algorithm === 'm.megolm.v1.aes-sha2' &&
+            MatrixClientPeg.get().isRoomEncrypted(mxEvent.getRoomId())
+        ) {
+            body = <div>
+                <div className="mx_cryptoEvent_title">{_t("Encryption enabled")}</div>
+                <div className="mx_cryptoEvent_subtitle">
+                    {_t(
+                        "Messages in this room are end-to-end encrypted. " +
+                        "Learn more & verify this user in their user profile.",
+                    )}
+                </div>
+            </div>;
+        } else {
+            body = <div>
+                <div className="mx_cryptoEvent_title">{_t("Encryption not enabled")}</div>
+                <div className="mx_cryptoEvent_subtitle">{_t("The encryption used by this room isn't supported.")}</div>
+            </div>;
+            classes += " mx_cryptoEvent_icon_warning";
+        }
+
+        return (<div className={classes}>
+            {body}
+        </div>);
+    }
+}
+
+EncryptionEvent.propTypes = {
+    /* the MatrixEvent to show */
+    mxEvent: PropTypes.object.isRequired,
+};

src/components/views/messages/MFileBody.js

@@ -26,7 +26,7 @@ import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
 import request from 'browser-request';
 import Modal from '../../../Modal';
-import SdkConfig from "../../../SdkConfig";
+import AccessibleButton from "../elements/AccessibleButton";
 
 
 // A cached tinted copy of require("../../../../res/img/download.svg")
@@ -94,84 +94,6 @@ Tinter.registerTintable(updateTintedDownloadImage);
 // The downside of using a second domain is that it complicates hosting,
 // the downside of using a sandboxed iframe is that the browers are overly
 // restrictive in what you are allowed to do with the generated URL.
-//
-// For now given how unusable the blobs generated in sandboxed iframes are we
-// default to using a renderer hosted on "usercontent.riot.im". This is
-// overridable so that people running their own version of the client can
-// choose a different renderer.
-//
-// To that end the current version of the blob generation is the following
-// html:
-//
-//      <html><head><script>
-//      var params = window.location.search.substring(1).split('&');
-//      var lockOrigin;
-//      for (var i = 0; i < params.length; ++i) {
-//          var parts = params[i].split('=');
-//          if (parts[0] == 'origin') lockOrigin = decodeURIComponent(parts[1]);
-//      }
-//      window.onmessage=function(e){
-//          if (lockOrigin === undefined || e.origin === lockOrigin) eval("("+e.data.code+")")(e);
-//      }
-//      </script></head><body></body></html>
-//
-// This waits to receive a message event sent using the window.postMessage API.
-// When it receives the event it evals a javascript function in data.code and
-// runs the function passing the event as an argument. This version adds
-// support for a query parameter controlling the origin from which messages
-// will be processed as an extra layer of security (note that the default URL
-// is still 'v1' since it is backwards compatible).
-//
-// In particular it means that the rendering function can be written as a
-// ordinary javascript function which then is turned into a string using
-// toString().
-//
-const DEFAULT_CROSS_ORIGIN_RENDERER = "https://usercontent.riot.im/v1.html";
-
-/**
- * Render the attachment inside the iframe.
- * We can't use imported libraries here so this has to be vanilla JS.
- */
-function remoteRender(event) {
-    const data = event.data;
-
-    const img = document.createElement("img");
-    img.id = "img";
-    img.src = data.imgSrc;
-
-    const a = document.createElement("a");
-    a.id = "a";
-    a.rel = data.rel;
-    a.target = data.target;
-    a.download = data.download;
-    a.style = data.style;
-    a.style.fontFamily = "Arial, Helvetica, Sans-Serif";
-    a.href = window.URL.createObjectURL(data.blob);
-    a.appendChild(img);
-    a.appendChild(document.createTextNode(data.textContent));
-
-    const body = document.body;
-    // Don't display scrollbars if the link takes more than one line
-    // to display.
-    body.style = "margin: 0px; overflow: hidden";
-    body.appendChild(a);
-}
-
-/**
- * Update the tint inside the iframe.
- * We can't use imported libraries here so this has to be vanilla JS.
- */
-function remoteSetTint(event) {
-    const data = event.data;
-
-    const img = document.getElementById("img");
-    img.src = data.imgSrc;
-    img.style = data.imgStyle;
-
-    const a = document.getElementById("a");
-    a.style = data.style;
-}
-
 
 /**
  * Get the current CSS style for a DOMElement.
@@ -283,7 +205,6 @@ export default createReactClass({
             // will be inside the iframe so we wont be able to update
             // it directly.
             this._iframe.current.contentWindow.postMessage({
-                code: remoteSetTint.toString(),
                 imgSrc: tintedDownloadImageURL,
                 style: computedStyle(this._dummyLink.current),
             }, "*");
@@ -306,7 +227,7 @@ export default createReactClass({
                 // Wait for the user to click on the link before downloading
                 // and decrypting the attachment.
                 let decrypting = false;
-                const decrypt = () => {
+                const decrypt = (e) => {
                     if (decrypting) {
                         return false;
                     }
@@ -323,16 +244,17 @@ export default createReactClass({
                         });
                     }).finally(() => {
                         decrypting = false;
-                        return;
                     });
                 };
 
+                // This button should actually Download because usercontent/ will try to click itself
+                // but it is not guaranteed between various browsers' settings.
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MFileBody_download">
-                            <a href="javascript:void(0)" onClick={decrypt}>
+                            <AccessibleButton onClick={decrypt}>
                                 { _t("Decrypt %(text)s", { text: text }) }
-                            </a>
+                            </AccessibleButton>
                         </div>
                     </span>
                 );
@@ -341,7 +263,6 @@ export default createReactClass({
             // When the iframe loads we tell it to render a download link
             const onIframeLoad = (ev) => {
                 ev.target.contentWindow.postMessage({
-                    code: remoteRender.toString(),
                     imgSrc: tintedDownloadImageURL,
                     style: computedStyle(this._dummyLink.current),
                     blob: this.state.decryptedBlob,
@@ -349,19 +270,15 @@ export default createReactClass({
                     // will have the correct name when the user tries to download it.
                     // We can't provide a Content-Disposition header like we would for HTTP.
                     download: fileName,
-                    rel: "noopener",
-                    target: "_blank",
                     textContent: _t("Download %(text)s", { text: text }),
+                    // only auto-download if a user triggered this iframe explicitly
+                    auto: !this.props.decryptedBlob,
                 }, "*");
             };
 
-            // If the attachment is encryped then put the link inside an iframe.
-            let renderer_url = DEFAULT_CROSS_ORIGIN_RENDERER;
-            const appConfig = SdkConfig.get();
-            if (appConfig && appConfig.cross_origin_renderer_url) {
-                renderer_url = appConfig.cross_origin_renderer_url;
-            }
-            renderer_url += "?origin=" + encodeURIComponent(window.location.origin);
+            const url = "usercontent/"; // XXX: this path should probably be passed from the skin
+
+            // If the attachment is encrypted then put the link inside an iframe.
             return (
                 <span className="mx_MFileBody">
                     <div className="mx_MFileBody_download">
@@ -373,14 +290,18 @@ export default createReactClass({
                               */ }
                             <a ref={this._dummyLink} />
                         </div>
-                        <iframe src={renderer_url} onLoad={onIframeLoad} ref={this._iframe} />
+                        <iframe
+                            src={`${url}?origin=${encodeURIComponent(window.location.origin)}`}
+                            onLoad={onIframeLoad}
+                            ref={this._iframe}
+                            sandbox="allow-scripts allow-downloads allow-downloads-without-user-activation" />
                     </div>
                 </span>
             );
         } else if (contentUrl) {
             const downloadProps = {
                 target: "_blank",
-                rel: "noopener",
+                rel: "noreferrer noopener",
 
                 // We set the href regardless of whether or not we intercept the download
                 // because we don't really want to convert the file to a blob eagerly, and

src/components/views/messages/MKeyVerificationConclusion.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -32,6 +32,7 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request) {
             request.on("change", this._onRequestChanged);
         }
+        MatrixClientPeg.get().on("userTrustStatusChanged", this._onTrustChanged);
     }
 
     componentWillUnmount() {
@@ -39,12 +40,25 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request) {
             request.off("change", this._onRequestChanged);
         }
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("userTrustStatusChanged", this._onTrustChanged);
+        }
     }
 
     _onRequestChanged = () => {
         this.forceUpdate();
     };
 
+    _onTrustChanged = (userId, status) => {
+        const { mxEvent } = this.props;
+        const request = mxEvent.verificationRequest;
+        if (!request || request.otherUserId !== userId) {
+            return;
+        }
+        this.forceUpdate();
+    };
+
     _shouldRender(mxEvent, request) {
         // normally should not happen
         if (!request) {
@@ -63,6 +77,14 @@ export default class MKeyVerificationConclusion extends React.Component {
         if (request.pending) {
             return false;
         }
+
+        // User isn't actually verified
+        if (!MatrixClientPeg.get()
+                            .checkUserTrust(request.otherUserId)
+                            .isCrossSigningVerified()) {
+            return false;
+        }
+
         return true;
     }
 
@@ -93,13 +115,13 @@ export default class MKeyVerificationConclusion extends React.Component {
         }
 
         if (title) {
-            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent);
-            const classes = classNames("mx_EventTile_bubble", "mx_KeyVerification", "mx_KeyVerification_icon", {
-                mx_KeyVerification_icon_verified: request.done,
+            const subtitle = userLabelForEventRoom(request.otherUserId, mxEvent.getRoomId());
+            const classes = classNames("mx_EventTile_bubble", "mx_cryptoEvent", "mx_cryptoEvent_icon", {
+                mx_cryptoEvent_icon_verified: request.done,
             });
             return (<div className={classes}>
-                <div className="mx_KeyVerification_title">{title}</div>
-                <div className="mx_KeyVerification_subtitle">{subtitle}</div>
+                <div className="mx_cryptoEvent_title">{title}</div>
+                <div className="mx_cryptoEvent_subtitle">{subtitle}</div>
             </div>);
         }
 

src/components/views/messages/MKeyVerificationRequest.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -27,6 +27,7 @@ import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
 export default class MKeyVerificationRequest extends React.Component {
     constructor(props) {
         super(props);
+        this.state = {};
     }
 
     componentDidMount() {
@@ -45,10 +46,11 @@ export default class MKeyVerificationRequest extends React.Component {
 
     _openRequest = () => {
         const {verificationRequest} = this.props.mxEvent;
+        const member = MatrixClientPeg.get().getUser(verificationRequest.otherUserId);
         dis.dispatch({
             action: "set_right_panel_phase",
             phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-            refireParams: {verificationRequest},
+            refireParams: {verificationRequest, member},
         });
     };
 
@@ -60,8 +62,8 @@ export default class MKeyVerificationRequest extends React.Component {
         const request = this.props.mxEvent.verificationRequest;
         if (request) {
             try {
-                await request.accept();
                 this._openRequest();
+                await request.accept();
             } catch (err) {
                 console.error(err.message);
             }
@@ -85,17 +87,27 @@ export default class MKeyVerificationRequest extends React.Component {
         if (userId === myUserId) {
             return _t("You accepted");
         } else {
-            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            return _t("%(name)s accepted", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
         }
     }
 
     _cancelledLabel(userId) {
         const client = MatrixClientPeg.get();
         const myUserId = client.getUserId();
+        const {cancellationCode} = this.props.mxEvent.verificationRequest;
+        const declined = cancellationCode === "m.user";
         if (userId === myUserId) {
-            return _t("You cancelled");
+            if (declined) {
+                return _t("You declined");
+            } else {
+                return _t("You cancelled");
+            }
         } else {
-            return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent)});
+            if (declined) {
+                return _t("%(name)s declined", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            } else {
+                return _t("%(name)s cancelled", {name: getNameForEventRoom(userId, this.props.mxEvent.getRoomId())});
+            }
         }
     }
 
@@ -114,39 +126,44 @@ export default class MKeyVerificationRequest extends React.Component {
         let subtitle;
         let stateNode;
 
-        const accepted = request.ready || request.started || request.done;
-        if (accepted || request.cancelled) {
+        if (!request.canAccept) {
             let stateLabel;
+            const accepted = request.ready || request.started || request.done;
             if (accepted) {
                 stateLabel = (<AccessibleButton onClick={this._openRequest}>
                     {this._acceptedLabel(request.receivingUserId)}
                 </AccessibleButton>);
-            } else {
+            } else if (request.cancelled) {
                 stateLabel = this._cancelledLabel(request.cancellingUserId);
+            } else if (request.accepting) {
+                stateLabel = _t("Accepting …");
+            } else if (request.declining) {
+                stateLabel = _t("Declining …");
             }
-            stateNode = (<div className="mx_KeyVerification_state">{stateLabel}</div>);
+            stateNode = (<div className="mx_cryptoEvent_state">{stateLabel}</div>);
         }
 
         if (!request.initiatedByMe) {
-            title = (<div className="mx_KeyVerification_title">{
-                _t("%(name)s wants to verify", {name: getNameForEventRoom(request.requestingUserId, mxEvent)})}</div>);
-            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.requestingUserId, mxEvent)}</div>);
-            if (request.requested && !request.observeOnly) {
-                stateNode = (<div className="mx_KeyVerification_buttons">
+            const name = getNameForEventRoom(request.requestingUserId, mxEvent.getRoomId());
+            title = (<div className="mx_cryptoEvent_title">{
+                _t("%(name)s wants to verify", {name})}</div>);
+            subtitle = (<div className="mx_cryptoEvent_subtitle">{
+                userLabelForEventRoom(request.requestingUserId, mxEvent.getRoomId())}</div>);
+            if (request.canAccept) {
+                stateNode = (<div className="mx_cryptoEvent_buttons">
                     <FormButton kind="danger" onClick={this._onRejectClicked} label={_t("Decline")} />
                     <FormButton onClick={this._onAcceptClicked} label={_t("Accept")} />
                 </div>);
             }
         } else { // request sent by us
-            title = (<div className="mx_KeyVerification_title">{
+            title = (<div className="mx_cryptoEvent_title">{
                 _t("You sent a verification request")}</div>);
-            subtitle = (<div className="mx_KeyVerification_subtitle">{
-                userLabelForEventRoom(request.receivingUserId, mxEvent)}</div>);
+            subtitle = (<div className="mx_cryptoEvent_subtitle">{
+                userLabelForEventRoom(request.receivingUserId, mxEvent.getRoomId())}</div>);
         }
 
         if (title) {
-            return (<div className="mx_EventTile_bubble mx_KeyVerification mx_KeyVerification_icon">
+            return (<div className="mx_EventTile_bubble mx_cryptoEvent mx_cryptoEvent_icon">
                 {title}
                 {subtitle}
                 {stateNode}

src/components/views/messages/TextualBody.js

@@ -30,7 +30,7 @@ import { _t } from '../../../languageHandler';
 import * as ContextMenu from '../../structures/ContextMenu';
 import SettingsStore from "../../../settings/SettingsStore";
 import ReplyThread from "../elements/ReplyThread";
-import {pillifyLinks} from '../../../utils/pillify';
+import {pillifyLinks, unmountPills} from '../../../utils/pillify';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {isPermalinkHost} from "../../../utils/permalinks/Permalinks";
 import {toRightOf} from "../../structures/ContextMenu";
@@ -92,6 +92,7 @@ export default createReactClass({
 
     componentDidMount: function() {
         this._unmounted = false;
+        this._pills = [];
         if (!this.props.editState) {
             this._applyFormatting();
         }
@@ -103,7 +104,7 @@ export default createReactClass({
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
-        pillifyLinks([this._content.current], this.props.mxEvent);
+        pillifyLinks([this._content.current], this.props.mxEvent, this._pills);
         HtmlUtils.linkifyElement(this._content.current);
         this.calculateUrlPreview();
 
@@ -146,6 +147,7 @@ export default createReactClass({
 
     componentWillUnmount: function() {
         this._unmounted = true;
+        unmountPills(this._pills);
     },
 
     shouldComponentUpdate: function(nextProps, nextState) {
@@ -372,7 +374,9 @@ export default createReactClass({
                     const height = window.screen.height > 800 ? 800 : window.screen.height;
                     const left = (window.screen.width - width) / 2;
                     const top = (window.screen.height - height) / 2;
-                    window.open(completeUrl, '_blank', `height=${height}, width=${width}, top=${top}, left=${left},`);
+                    const features = `height=${height}, width=${width}, top=${top}, left=${left},`;
+                    const wnd = window.open(completeUrl, '_blank', features);
+                    wnd.opener = null;
                 },
             });
         });

src/components/views/messages/ViewSourceEvent.js

@@ -32,6 +32,13 @@ export default class ViewSourceEvent extends React.PureComponent {
         };
     }
 
+    componentDidMount() {
+        const {mxEvent} = this.props;
+        if (mxEvent.isBeingDecrypted()) {
+            mxEvent.once("Event.decrypted", () => this.forceUpdate());
+        }
+    }
+
     onToggle = (ev) => {
         ev.preventDefault();
         const { expanded } = this.state;

src/components/views/right_panel/EncryptionInfo.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -14,18 +14,63 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import * as sdk from '../../../index';
+import React from "react";
+import PropTypes from "prop-types";
+
+import * as sdk from "../../../index";
 import {_t} from "../../../languageHandler";
 
-export default class EncryptionInfo extends React.PureComponent {
-    render() {
+export const PendingActionSpinner = ({text}) => {
+    const Spinner = sdk.getComponent('elements.Spinner');
+    return <div className="mx_EncryptionInfo_spinner">
+        <Spinner />
+        { text }
+    </div>;
+};
+
+const EncryptionInfo = ({waitingForOtherParty, waitingForNetwork, member, onStartVerification}) => {
+    let content;
+    if (waitingForOtherParty || waitingForNetwork) {
+        let text;
+        if (waitingForOtherParty) {
+            text = _t("Waiting for %(displayName)s to accept…", {
+                displayName: member.displayName || member.name || member.userId,
+            });
+        } else {
+            text = _t("Accepting…");
+        }
+        content = <PendingActionSpinner text={text} />;
+    } else {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        return (<div className="mx_UserInfo"><div className="mx_UserInfo_container">
-            <h3>{_t("Verify User")}</h3>
-            <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
-            <p>{_t("For maximum security, do this in person.")}</p>
-            <AccessibleButton kind="primary" onClick={this.props.onStartVerification}>{_t("Start Verification")}</AccessibleButton>
-        </div></div>);
+        content = (
+            <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={onStartVerification}>
+                {_t("Start Verification")}
+            </AccessibleButton>
+        );
     }
-}
+
+    return <React.Fragment>
+        <div className="mx_UserInfo_container">
+            <h3>{_t("Encryption")}</h3>
+            <div>
+                <p>{_t("Messages in this room are end-to-end encrypted.")}</p>
+                <p>{_t("Your messages are secured and only you and the recipient have the unique keys to unlock them.")}</p>
+            </div>
+        </div>
+        <div className="mx_UserInfo_container">
+            <h3>{_t("Verify User")}</h3>
+            <div>
+                <p>{_t("For extra security, verify this user by checking a one-time code on both of your devices.")}</p>
+                <p>{_t("To be secure, do this in person or use a trusted way to communicate.")}</p>
+                { content }
+            </div>
+        </div>
+    </React.Fragment>;
+};
+EncryptionInfo.propTypes = {
+    member: PropTypes.object.isRequired,
+    onStartVerification: PropTypes.func.isRequired,
+    request: PropTypes.object,
+};
+
+export default EncryptionInfo;

src/components/views/right_panel/EncryptionPanel.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -14,35 +14,111 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useEffect, useState} from "react";
+import PropTypes from "prop-types";
+
 import EncryptionInfo from "./EncryptionInfo";
 import VerificationPanel from "./VerificationPanel";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import {ensureDMExists} from "../../../createRoom";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import Modal from "../../../Modal";
+import {PHASE_REQUESTED, PHASE_UNSENT} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import * as sdk from "../../../index";
+import {_t} from "../../../languageHandler";
 
-export default class EncryptionPanel extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        this.state = {};
-    }
+// cancellation codes which constitute a key mismatch
+const MISMATCHES = ["m.key_mismatch", "m.user_error", "m.mismatched_sas"];
 
-    render() {
-        const request = this.props.verificationRequest || this.state.verificationRequest;
-        const {member} = this.props;
-        if (request) {
-            return <VerificationPanel request={request} key={request.channel.transactionId} />;
-        } else if (member) {
-            return <EncryptionInfo onStartVerification={this._onStartVerification} member={member} />;
-        } else {
-            return <p>Not a member nor request, not sure what to render</p>;
+const EncryptionPanel = ({verificationRequest, verificationRequestPromise, member, onClose, layout}) => {
+    const [request, setRequest] = useState(verificationRequest);
+    // state to show a spinner immediately after clicking "start verification",
+    // before we have a request
+    const [isRequesting, setRequesting] = useState(false);
+    const [phase, setPhase] = useState(request && request.phase);
+    useEffect(() => {
+        setRequest(verificationRequest);
+        if (verificationRequest) {
+            setRequesting(false);
+            setPhase(verificationRequest.phase);
         }
-    }
+    }, [verificationRequest]);
 
-    _onStartVerification = async () => {
-        const client = MatrixClientPeg.get();
-        const {member} = this.props;
-        const roomId = await ensureDMExists(client, member.userId);
-        const verificationRequest = await client.requestVerificationDM(member.userId, roomId);
-        this.setState({verificationRequest});
-    };
-}
+    useEffect(() => {
+        async function awaitPromise() {
+            setRequesting(true);
+            const request = await verificationRequestPromise;
+            setRequesting(false);
+            setRequest(request);
+            setPhase(request.phase);
+        }
+        if (verificationRequestPromise) {
+            awaitPromise();
+        }
+    }, [verificationRequestPromise]);
+    const changeHandler = useCallback(() => {
+        // handle transitions -> cancelled for mismatches which fire a modal instead of showing a card
+        if (request && request.cancelled && MISMATCHES.includes(request.cancellationCode)) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog("Verification failed", "insecure", ErrorDialog, {
+                headerImage: require("../../../../res/img/e2e/warning.svg"),
+                title: _t("Your messages are not secure"),
+                description: <div>
+                    {_t("One of the following may be compromised:")}
+                    <ul>
+                        <li>{_t("Your homeserver")}</li>
+                        <li>{_t("The homeserver the user you’re verifying is connected to")}</li>
+                        <li>{_t("Yours, or the other users’ internet connection")}</li>
+                        <li>{_t("Yours, or the other users’ session")}</li>
+                    </ul>
+                </div>,
+                onFinished: onClose,
+            });
+            return; // don't update phase here as we will be transitioning away from this view shortly
+        }
+
+        if (request) {
+            setPhase(request.phase);
+        }
+    }, [onClose, request]);
+    useEventEmitter(request, "change", changeHandler);
+
+    const onStartVerification = useCallback(async () => {
+        setRequesting(true);
+        const cli = MatrixClientPeg.get();
+        const roomId = await ensureDMExists(cli, member.userId);
+        const verificationRequest = await cli.requestVerificationDM(member.userId, roomId);
+        setRequest(verificationRequest);
+        setPhase(verificationRequest.phase);
+    }, [member.userId]);
+
+    const requested =
+        (!request && isRequesting) ||
+        (request && (phase === PHASE_REQUESTED || phase === PHASE_UNSENT || phase === undefined));
+    if (!request || requested) {
+        const initiatedByMe = (!request && isRequesting) || (request && request.initiatedByMe);
+        return <EncryptionInfo
+            onStartVerification={onStartVerification}
+            member={member}
+            waitingForOtherParty={requested && initiatedByMe}
+            waitingForNetwork={requested && !initiatedByMe} />;
+    } else {
+        return (
+            <VerificationPanel
+                layout={layout}
+                onClose={onClose}
+                member={member}
+                request={request}
+                key={request.channel.transactionId}
+                phase={phase} />
+        );
+    }
+};
+EncryptionPanel.propTypes = {
+    member: PropTypes.object.isRequired,
+    onClose: PropTypes.func.isRequired,
+    verificationRequest: PropTypes.object,
+    layout: PropTypes.string,
+};
+
+export default EncryptionPanel;

src/components/views/right_panel/RoomHeaderButtons.js

@@ -3,7 +3,7 @@ Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
 Copyright 2017 New Vector Ltd
 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.
@@ -23,7 +23,6 @@ import { _t } from '../../../languageHandler';
 import HeaderButton from './HeaderButton';
 import HeaderButtons, {HEADER_KIND_ROOM} from './HeaderButtons';
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
-import RightPanelStore from "../../../stores/RightPanelStore";
 
 const MEMBER_PHASES = [
     RIGHT_PANEL_PHASES.RoomMemberList,
@@ -60,7 +59,8 @@ export default class RoomHeaderButtons extends HeaderButtons {
     _onMembersClicked() {
         if (this.state.phase === RIGHT_PANEL_PHASES.RoomMemberInfo) {
             // send the active phase to trigger a toggle
-            this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo, RightPanelStore.getSharedInstance().roomPanelPhaseParams);
+            // XXX: we should pass refireParams here but then it won't collapse as we desire it to
+            this.setPhase(RIGHT_PANEL_PHASES.RoomMemberInfo);
         } else {
             // This toggles for us, if needed
             this.setPhase(RIGHT_PANEL_PHASES.RoomMemberList);

src/components/views/right_panel/UserInfo.js

@@ -2,7 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018 Vector Creations Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-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,7 +25,7 @@ import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import createRoom from '../../../createRoom';
+import createRoom, {findDMForUser} from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import AccessibleButton from '../elements/AccessibleButton';
 import SdkConfig from '../../../SdkConfig';
@@ -41,6 +41,8 @@ import {useEventEmitter} from "../../../hooks/useEventEmitter";
 import {textualPowerLevel} from '../../../Roles';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {RIGHT_PANEL_PHASES} from "../../../stores/RightPanelStorePhases";
+import EncryptionPanel from "./EncryptionPanel";
+import { useAsyncMemo } from '../../../hooks/useAsyncMemo';
 
 const _disambiguateDevices = (devices) => {
     const names = Object.create(null);
@@ -59,14 +61,16 @@ const _disambiguateDevices = (devices) => {
     }
 };
 
-const _getE2EStatus = (cli, userId, devices) => {
+export const getE2EStatus = (cli, userId, devices) => {
     if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
         const hasUnverifiedDevice = devices.some((device) => device.isUnverified());
         return hasUnverifiedDevice ? "warning" : "verified";
     }
     const isMe = userId === cli.getUserId();
     const userVerified = cli.checkUserTrust(userId).isCrossSigningVerified();
-    const allDevicesVerified = devices.every(device => {
+    if (!userVerified) return "normal";
+
+    const anyDeviceUnverified = devices.some(device => {
         const { deviceId } = device;
         // For your own devices, we use the stricter check of cross-signing
         // verification to encourage everyone to trust their own devices via
@@ -74,15 +78,12 @@ const _getE2EStatus = (cli, userId, devices) => {
         // For other people's devices, the more general verified check that
         // includes locally verified devices can be used.
         const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
-        return isMe ? deviceTrust.isCrossSigningVerified() : deviceTrust.isVerified();
+        return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
     });
-    if (allDevicesVerified) {
-        return userVerified ? "verified" : "normal";
-    }
-    return "warning";
+    return anyDeviceUnverified ? "warning" : "verified";
 };
 
-function openDMForUser(matrixClient, userId) {
+async function openDMForUser(matrixClient, userId) {
     const dmRooms = DMRoomMap.shared().getDMRoomsForUserId(userId);
     const lastActiveRoom = dmRooms.reduce((lastActiveRoom, roomId) => {
         const room = matrixClient.getRoom(roomId);
@@ -100,9 +101,27 @@ function openDMForUser(matrixClient, userId) {
             action: 'view_room',
             room_id: lastActiveRoom.roomId,
         });
-    } else {
-        createRoom({dmUserId: userId});
+        return;
     }
+
+    const createRoomOptions = {
+        dmUserId: userId,
+    };
+
+    if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        // Check whether all users have uploaded device keys before.
+        // If so, enable encryption in the new room.
+        const usersToDevicesMap = await matrixClient.downloadKeys([userId]);
+        const allHaveDeviceKeys = Object.values(usersToDevicesMap).every(devices => {
+            // `devices` is an object of the form { deviceId: deviceInfo, ... }.
+            return Object.keys(devices).length > 0;
+        });
+        if (allHaveDeviceKeys) {
+            createRoomOptions.encryption = true;
+        }
+    }
+
+    createRoom(createRoomOptions);
 }
 
 function useIsEncrypted(cli, room) {
@@ -117,19 +136,70 @@ function useIsEncrypted(cli, room) {
     return isEncrypted;
 }
 
-function verifyDevice(userId, device) {
-    const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-    Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
-        userId: userId,
-        device: device,
-    }, null, /* priority = */ false, /* static = */ true);
+function useHasCrossSigningKeys(cli, member, canVerify, setUpdating) {
+    return useAsyncMemo(async () => {
+        if (!canVerify) {
+            return false;
+        }
+        setUpdating(true);
+        try {
+            await cli.downloadKeys([member.userId]);
+            const xsi = cli.getStoredCrossSigningForUser(member.userId);
+            const key = xsi && xsi.getId();
+            return !!key;
+        } finally {
+            setUpdating(false);
+        }
+    }, [cli, member, canVerify], false);
+}
+
+async function verifyDevice(userId, device) {
+    const cli = MatrixClientPeg.get();
+    const member = cli.getUser(userId);
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+    Modal.createTrackedDialog("Verification warning", "unverified session", QuestionDialog, {
+        headerImage: require("../../../../res/img/e2e/warning.svg"),
+        title: _t("Not Trusted"),
+        description: <div>
+            <p>{_t("%(name)s (%(userId)s) signed in to a new session without verifying it:", {name: member.displayName, userId})}</p>
+            <p>{device.getDisplayName()} ({device.deviceId})</p>
+            <p>{_t("Ask this user to verify their session, or manually verify it below.")}</p>
+        </div>,
+        onFinished: async (doneClicked) => {
+            const manuallyVerifyClicked = !doneClicked;
+            if (!manuallyVerifyClicked) {
+                return;
+            }
+            const cli = MatrixClientPeg.get();
+            const verificationRequestPromise = cli.requestVerification(
+                userId,
+                [device.deviceId],
+            );
+            dis.dispatch({
+                action: "set_right_panel_phase",
+                phase: RIGHT_PANEL_PHASES.EncryptionPanel,
+                refireParams: {member, verificationRequestPromise},
+            });
+        },
+        primaryButton: _t("Done"),
+        cancelButton: _t("Manually Verify"),
+    });
 }
 
 function verifyUser(user) {
+    const cli = MatrixClientPeg.get();
+    const dmRoom = findDMForUser(cli, user.userId);
+    let existingRequest;
+    if (dmRoom) {
+        existingRequest = cli.findVerificationRequestDMInProgress(dmRoom.roomId);
+    }
     dis.dispatch({
         action: "set_right_panel_phase",
         phase: RIGHT_PANEL_PHASES.EncryptionPanel,
-        refireParams: {member: user},
+        refireParams: {
+            member: user,
+            verificationRequest: existingRequest,
+        },
     });
 }
 
@@ -137,6 +207,7 @@ function DeviceItem({userId, device}) {
     const cli = useContext(MatrixClientContext);
     const isMe = userId === cli.getUserId();
     const deviceTrust = cli.checkDeviceTrust(userId, device.deviceId);
+    const userTrust = cli.checkUserTrust(userId);
     // For your own devices, we use the stricter check of cross-signing
     // verification to encourage everyone to trust their own devices via
     // cross-signing so that other users can then safely trust you.
@@ -151,8 +222,9 @@ function DeviceItem({userId, device}) {
         mx_UserInfo_device_unverified: !isVerified,
     });
     const iconClasses = classNames("mx_E2EIcon", {
+        mx_E2EIcon_normal: !userTrust.isVerified(),
         mx_E2EIcon_verified: isVerified,
-        mx_E2EIcon_warning: !isVerified,
+        mx_E2EIcon_warning: userTrust.isVerified() && !isVerified,
     });
 
     const onDeviceClick = () => {
@@ -164,17 +236,25 @@ function DeviceItem({userId, device}) {
     const deviceName = device.ambiguous ?
             (device.getDisplayName() ? device.getDisplayName() : "") + " (" + device.deviceId + ")" :
             device.getDisplayName();
-    const trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
-    return (<AccessibleButton className={classes} onClick={onDeviceClick}>
-        <div className={iconClasses} />
-        <div className="mx_UserInfo_device_name">{deviceName}</div>
-        <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
-    </AccessibleButton>);
+    let trustedLabel = null;
+    if (userTrust.isVerified()) trustedLabel = isVerified ? _t("Trusted") : _t("Not trusted");
+    return (
+        <AccessibleButton
+            className={classes}
+            title={device.deviceId}
+            onClick={onDeviceClick}
+        >
+            <div className={iconClasses} />
+            <div className="mx_UserInfo_device_name">{deviceName}</div>
+            <div className="mx_UserInfo_device_trusted">{trustedLabel}</div>
+        </AccessibleButton>
+    );
 }
 
 function DevicesSection({devices, userId, loading}) {
     const Spinner = sdk.getComponent("elements.Spinner");
     const cli = useContext(MatrixClientContext);
+    const userTrust = cli.checkUserTrust(userId);
 
     const [isExpanded, setExpanded] = useState(false);
 
@@ -183,43 +263,61 @@ function DevicesSection({devices, userId, loading}) {
         return <Spinner />;
     }
     if (devices === null) {
-        return _t("Unable to load device list");
+        return _t("Unable to load session list");
     }
     const isMe = userId === cli.getUserId();
     const deviceTrusts = devices.map(d => cli.checkDeviceTrust(userId, d.deviceId));
 
+    let expandSectionDevices = [];
     const unverifiedDevices = [];
-    const verifiedDevices = [];
 
-    for (let i = 0; i < devices.length; ++i) {
-        const device = devices[i];
-        const deviceTrust = deviceTrusts[i];
-        // For your own devices, we use the stricter check of cross-signing
-        // verification to encourage everyone to trust their own devices via
-        // cross-signing so that other users can then safely trust you.
-        // For other people's devices, the more general verified check that
-        // includes locally verified devices can be used.
-        const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
-            deviceTrust.isCrossSigningVerified() :
-            deviceTrust.isVerified();
+    let expandCountCaption;
+    let expandHideCaption;
+    let expandIconClasses = "mx_E2EIcon";
 
-        if (isVerified) {
-            verifiedDevices.push(device);
-        } else {
-            unverifiedDevices.push(device);
+    if (userTrust.isVerified()) {
+        for (let i = 0; i < devices.length; ++i) {
+            const device = devices[i];
+            const deviceTrust = deviceTrusts[i];
+            // For your own devices, we use the stricter check of cross-signing
+            // verification to encourage everyone to trust their own devices via
+            // cross-signing so that other users can then safely trust you.
+            // For other people's devices, the more general verified check that
+            // includes locally verified devices can be used.
+            const isVerified = (isMe && SettingsStore.isFeatureEnabled("feature_cross_signing")) ?
+                deviceTrust.isCrossSigningVerified() :
+                deviceTrust.isVerified();
+
+            if (isVerified) {
+                expandSectionDevices.push(device);
+            } else {
+                unverifiedDevices.push(device);
+            }
         }
+        expandCountCaption = _t("%(count)s verified sessions", {count: expandSectionDevices.length});
+        expandHideCaption = _t("Hide verified sessions");
+        expandIconClasses += " mx_E2EIcon_verified";
+    } else {
+        expandSectionDevices = devices;
+        expandCountCaption = _t("%(count)s sessions", {count: devices.length});
+        expandHideCaption = _t("Hide sessions");
+        expandIconClasses += " mx_E2EIcon_normal";
     }
 
     let expandButton;
-    if (verifiedDevices.length) {
+    if (expandSectionDevices.length) {
         if (isExpanded) {
-            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(false)}>
-                <div>{_t("Hide verified sessions")}</div>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+                onClick={() => setExpanded(false)}
+            >
+                <div>{expandHideCaption}</div>
             </AccessibleButton>);
         } else {
-            expandButton = (<AccessibleButton className="mx_UserInfo_expand" onClick={() => setExpanded(true)}>
-                <div className="mx_E2EIcon mx_E2EIcon_verified" />
-                <div>{_t("%(count)s verified sessions", {count: verifiedDevices.length})}</div>
+            expandButton = (<AccessibleButton className="mx_UserInfo_expand mx_linkButton"
+                onClick={() => setExpanded(true)}
+            >
+                <div className={expandIconClasses} />
+                <div>{expandCountCaption}</div>
             </AccessibleButton>);
         }
     }
@@ -229,7 +327,7 @@ function DevicesSection({devices, userId, loading}) {
     });
     if (isExpanded) {
         const keyStart = unverifiedDevices.length;
-        deviceList = deviceList.concat(verifiedDevices.map((device, i) => {
+        deviceList = deviceList.concat(expandSectionDevices.map((device, i) => {
             return (<DeviceItem key={i + keyStart} userId={userId} device={device} />);
         }));
     }
@@ -836,6 +934,12 @@ const useIsSynapseAdmin = (cli) => {
     return isAdmin;
 };
 
+const useHomeserverSupportsCrossSigning = (cli) => {
+    return useAsyncMemo(async () => {
+        return cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
+    }, [cli], false);
+};
+
 function useRoomPermissions(cli, room, user) {
     const [roomPermissions, setRoomPermissions] = useState({
         // modifyLevelMax is the max PL we can set this user to, typically min(their PL, our PL) && canSetPL
@@ -1029,33 +1133,95 @@ const PowerLevelEditor = ({user, room, roomPermissions, onFinished}) => {
     );
 };
 
-const UserInfo = ({user, groupId, roomId, onClose}) => {
+export const useDevices = (userId) => {
     const cli = useContext(MatrixClientContext);
 
-    // Load room if we are given a room id and memoize it
-    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
-    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
-    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+    // undefined means yet to be loaded, null means failed to load, otherwise list of devices
+    const [devices, setDevices] = useState(undefined);
+    // Download device lists
+    useEffect(() => {
+        setDevices(undefined);
 
-    // only display the devices list if our client supports E2E
-    const _enableDevices = cli.isCryptoEnabled();
+        let cancelled = false;
+
+        async function _downloadDeviceList() {
+            try {
+                await cli.downloadKeys([userId], true);
+                const devices = await cli.getStoredDevicesForUser(userId);
+
+                if (cancelled) {
+                    // we got cancelled - presumably a different user now
+                    return;
+                }
+
+                _disambiguateDevices(devices);
+                setDevices(devices);
+            } catch (err) {
+                setDevices(null);
+            }
+        }
+        _downloadDeviceList();
+
+        // Handle being unmounted
+        return () => {
+            cancelled = true;
+        };
+    }, [cli, userId]);
+
+    // Listen to changes
+    useEffect(() => {
+        let cancel = false;
+        const updateDevices = async () => {
+            const newDevices = await cli.getStoredDevicesForUser(userId);
+            if (cancel) return;
+            setDevices(newDevices);
+        };
+        const onDevicesUpdated = (users) => {
+            if (!users.includes(userId)) return;
+            updateDevices();
+        };
+        const onDeviceVerificationChanged = (_userId, device) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        const onUserTrustStatusChanged = (_userId, trustStatus) => {
+            if (_userId !== userId) return;
+            updateDevices();
+        };
+        cli.on("crypto.devicesUpdated", onDevicesUpdated);
+        cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
+        cli.on("userTrustStatusChanged", onUserTrustStatusChanged);
+        // Handle being unmounted
+        return () => {
+            cancel = true;
+            cli.removeListener("crypto.devicesUpdated", onDevicesUpdated);
+            cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
+            cli.removeListener("userTrustStatusChanged", onUserTrustStatusChanged);
+        };
+    }, [cli, userId]);
+
+    return devices;
+};
+
+const BasicUserInfo = ({room, member, groupId, devices, isRoomEncrypted}) => {
+    const cli = useContext(MatrixClientContext);
 
     const powerLevels = useRoomPowerLevels(cli, room);
     // Load whether or not we are a Synapse Admin
     const isSynapseAdmin = useIsSynapseAdmin(cli);
 
     // Check whether the user is ignored
-    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(user.userId));
+    const [isIgnored, setIsIgnored] = useState(cli.isUserIgnored(member.userId));
     // Recheck if the user or client changes
     useEffect(() => {
-        setIsIgnored(cli.isUserIgnored(user.userId));
-    }, [cli, user.userId]);
+        setIsIgnored(cli.isUserIgnored(member.userId));
+    }, [cli, member.userId]);
     // Recheck also if we receive new accountData m.ignored_user_list
     const accountDataHandler = useCallback((ev) => {
         if (ev.getType() === "m.ignored_user_list") {
-            setIsIgnored(cli.isUserIgnored(user.userId));
+            setIsIgnored(cli.isUserIgnored(member.userId));
         }
-    }, [cli, user.userId]);
+    }, [cli, member.userId]);
     useEventEmitter(cli, "accountData", accountDataHandler);
 
     // Count of how many operations are currently in progress, if > 0 then show a Spinner
@@ -1086,7 +1252,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         const [accepted] = await finished;
         if (!accepted) return;
         try {
-            await cli.deactivateSynapseUser(user.userId);
+            await cli.deactivateSynapseUser(member.userId);
         } catch (err) {
             console.error("Failed to deactivate user");
             console.error(err);
@@ -1097,21 +1263,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
                 description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         }
-    }, [cli, user.userId]);
-
-    const onMemberAvatarClick = useCallback(() => {
-        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
-        if (!avatarUrl) return;
-
-        const httpUrl = cli.mxcUrlToHttp(avatarUrl);
-        const ImageView = sdk.getComponent("elements.ImageView");
-        const params = {
-            src: httpUrl,
-            name: member.name,
-        };
-
-        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
-    }, [cli, member]);
+    }, [cli, member.userId]);
 
     let synapseDeactivateButton;
     let spinner;
@@ -1119,7 +1271,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
     // We don't need a perfect check here, just something to pass as "probably not our homeserver". If
     // someone does figure out how to bypass this check the worst that happens is an error.
     // FIXME this should be using cli instead of MatrixClientPeg.matrixClient
-    if (isSynapseAdmin && user.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
+    if (isSynapseAdmin && member.userId.endsWith(`:${MatrixClientPeg.getHomeserverName()}`)) {
         synapseDeactivateButton = (
             <AccessibleButton onClick={onSynapseDeactivate} className="mx_UserInfo_field mx_UserInfo_destructive">
                 {_t("Deactivate user")}
@@ -1143,7 +1295,7 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         adminToolsContainer = (
             <GroupAdminToolsSection
                 groupId={groupId}
-                groupMember={user}
+                groupMember={member}
                 startUpdating={startUpdating}
                 stopUpdating={stopUpdating}>
                 { synapseDeactivateButton }
@@ -1162,7 +1314,134 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         spinner = <Loader imgClassName="mx_ContextualMenu_spinner" />;
     }
 
-    const displayName = member.name || member.displayname;
+    const memberDetails = (
+        <PowerLevelSection
+            powerLevels={powerLevels}
+            user={member}
+            room={room}
+            roomPermissions={roomPermissions}
+        />
+    );
+
+    // only display the devices list if our client supports E2E
+    const _enableDevices = cli.isCryptoEnabled();
+
+    let text;
+    if (!isRoomEncrypted) {
+        if (!_enableDevices) {
+            text = _t("This client does not support end-to-end encryption.");
+        } else if (room) {
+            text = _t("Messages in this room are not end-to-end encrypted.");
+        } else {
+            // TODO what to render for GroupMember
+        }
+    } else {
+        text = _t("Messages in this room are end-to-end encrypted.");
+    }
+
+    let verifyButton;
+    const homeserverSupportsCrossSigning = useHomeserverSupportsCrossSigning(cli);
+
+    const userTrust = cli.checkUserTrust(member.userId);
+    const userVerified = userTrust.isCrossSigningVerified();
+    const isMe = member.userId === cli.getUserId();
+    const canVerify = SettingsStore.isFeatureEnabled("feature_cross_signing") &&
+                        homeserverSupportsCrossSigning &&
+                        isRoomEncrypted && !userVerified && !isMe;
+
+    const setUpdating = (updating) => {
+        setPendingUpdateCount(count => count + (updating ? 1 : -1));
+    };
+    const hasCrossSigningKeys =
+        useHasCrossSigningKeys(cli, member, canVerify, setUpdating );
+
+    if (canVerify && hasCrossSigningKeys) {
+        verifyButton = (
+            <AccessibleButton className="mx_UserInfo_field" onClick={() => verifyUser(member)}>
+                {_t("Verify")}
+            </AccessibleButton>
+        );
+    }
+
+    let devicesSection;
+    if (isRoomEncrypted) {
+        devicesSection = <DevicesSection
+            loading={devices === undefined}
+            devices={devices}
+            userId={member.userId} />;
+    }
+
+    const securitySection = (
+        <div className="mx_UserInfo_container">
+            <h3>{ _t("Security") }</h3>
+            <p>{ text }</p>
+            { verifyButton }
+            { devicesSection }
+        </div>
+    );
+
+    return <React.Fragment>
+        { memberDetails &&
+        <div className="mx_UserInfo_container mx_UserInfo_separator mx_UserInfo_memberDetailsContainer">
+            <div className="mx_UserInfo_memberDetails">
+                { memberDetails }
+            </div>
+        </div> }
+
+        { securitySection }
+        <UserOptionsSection
+            devices={devices}
+            canInvite={roomPermissions.canInvite}
+            isIgnored={isIgnored}
+            member={member} />
+
+        { adminToolsContainer }
+
+        { spinner }
+    </React.Fragment>;
+};
+
+const UserInfoHeader = ({onClose, member, e2eStatus}) => {
+    const cli = useContext(MatrixClientContext);
+
+    let closeButton;
+    if (onClose) {
+        closeButton = <AccessibleButton className="mx_UserInfo_cancel" onClick={onClose} title={_t('Close')}>
+            <div />
+        </AccessibleButton>;
+    }
+
+    const onMemberAvatarClick = useCallback(() => {
+        const avatarUrl = member.getMxcAvatarUrl ? member.getMxcAvatarUrl() : member.avatarUrl;
+        if (!avatarUrl) return;
+
+        const httpUrl = cli.mxcUrlToHttp(avatarUrl);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: httpUrl,
+            name: member.name,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    }, [cli, member]);
+
+    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+    const avatarElement = (
+        <div className="mx_UserInfo_avatar">
+            <div>
+                <div>
+                    <MemberAvatar
+                        member={member}
+                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
+                        resizeMethod="scale"
+                        fallbackUserId={member.userId}
+                        onClick={onMemberAvatarClick}
+                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
+                </div>
+            </div>
+        </div>
+    );
 
     let presenceState;
     let presenceLastActiveAgo;
@@ -1198,179 +1477,79 @@ const UserInfo = ({user, groupId, roomId, onClose}) => {
         statusLabel = <span className="mx_UserInfo_statusMessage">{ statusMessage }</span>;
     }
 
-    // const avatarUrl = user.getMxcAvatarUrl ? user.getMxcAvatarUrl() : user.avatarUrl;
-    const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-    const avatarElement = (
-        <div className="mx_UserInfo_avatar">
-            <div>
-                <div>
-                    <MemberAvatar
-                        member={member}
-                        width={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        height={2 * 0.3 * window.innerHeight} // 2x@30vh
-                        resizeMethod="scale"
-                        fallbackUserId={member.userId}
-                        onClick={onMemberAvatarClick}
-                        urls={member.avatarUrl ? [member.avatarUrl] : undefined} />
-                </div>
-            </div>
-        </div>
-    );
-
-    let closeButton;
-    if (onClose) {
-        closeButton = <AccessibleButton
-            className="mx_UserInfo_cancel"
-            onClick={onClose}
-            title={_t('Close')} />;
-    }
-
-    const memberDetails = (
-        <PowerLevelSection
-            powerLevels={powerLevels}
-            user={member}
-            room={room}
-            roomPermissions={roomPermissions}
-        />
-    );
-
-    const isRoomEncrypted = useIsEncrypted(cli, room);
-    // undefined means yet to be loaded, null means failed to load, otherwise list of devices
-    const [devices, setDevices] = useState(undefined);
-    // Download device lists
-    useEffect(() => {
-        setDevices(undefined);
-
-        let cancelled = false;
-
-        async function _downloadDeviceList() {
-            try {
-                await cli.downloadKeys([user.userId], true);
-                const devices = await cli.getStoredDevicesForUser(user.userId);
-
-                if (cancelled) {
-                    // we got cancelled - presumably a different user now
-                    return;
-                }
-
-                _disambiguateDevices(devices);
-                setDevices(devices);
-            } catch (err) {
-                setDevices(null);
-            }
-        }
-        _downloadDeviceList();
-
-        // Handle being unmounted
-        return () => {
-            cancelled = true;
-        };
-    }, [cli, user.userId]);
-
-    // Listen to changes
-    useEffect(() => {
-        let cancel = false;
-        const onDeviceVerificationChanged = (_userId, device) => {
-            if (_userId === user.userId) {
-                // no need to re-download the whole thing; just update our copy of the list.
-
-                // Promise.resolve to handle transition from static result to promise; can be removed in future
-                Promise.resolve(cli.getStoredDevicesForUser(user.userId)).then((devices) => {
-                    if (cancel) return;
-                    setDevices(devices);
-                });
-            }
-        };
-        cli.on("deviceVerificationChanged", onDeviceVerificationChanged);
-        // Handle being unmounted
-        return () => {
-            cancel = true;
-            cli.removeListener("deviceVerificationChanged", onDeviceVerificationChanged);
-        };
-    }, [cli, user.userId]);
-
-    let text;
-    if (!isRoomEncrypted) {
-        if (!_enableDevices) {
-            text = _t("This client does not support end-to-end encryption.");
-        } else if (room) {
-            text = _t("Messages in this room are not end-to-end encrypted.");
-        } else {
-            // TODO what to render for GroupMember
-        }
-    } else {
-        text = _t("Messages in this room are end-to-end encrypted.");
-    }
-
-    const userTrust = cli.checkUserTrust(user.userId);
-    const userVerified = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
-        userTrust.isCrossSigningVerified() :
-        userTrust.isVerified();
-    const isMe = user.userId === cli.getUserId();
-    let verifyButton;
-    if (!userVerified && !isMe) {
-        verifyButton = <AccessibleButton className="mx_UserInfo_verify" onClick={() => verifyUser(user)}>
-            {_t("Verify")}
-        </AccessibleButton>;
-    }
-
-    const devicesSection = <DevicesSection
-        loading={devices === undefined}
-        devices={devices} userId={user.userId} />;
-
-    const securitySection = (
-        <div className="mx_UserInfo_container">
-            <h3>{ _t("Security") }</h3>
-            <p>{ text }</p>
-            { verifyButton }
-            { devicesSection }
-        </div>
-    );
-
     let e2eIcon;
-    if (isRoomEncrypted && devices) {
-        const e2eStatus = _getE2EStatus(cli, user.userId, devices);
+    if (e2eStatus) {
         e2eIcon = <E2EIcon size={18} status={e2eStatus} isUser={true} />;
     }
 
-    return (
-        <div className="mx_UserInfo" role="tabpanel">
-            { closeButton }
-            { avatarElement }
+    const displayName = member.name || member.displayname;
+    return <React.Fragment>
+        { closeButton }
+        { avatarElement }
 
-            <div className="mx_UserInfo_container">
-                <div className="mx_UserInfo_profile">
-                    <div>
-                        <h2 aria-label={displayName}>
-                            { e2eIcon }
-                            { displayName }
-                        </h2>
-                    </div>
-                    <div>{ user.userId }</div>
-                    <div className="mx_UserInfo_profileStatus">
-                        {presenceLabel}
-                        {statusLabel}
-                    </div>
+        <div className="mx_UserInfo_container mx_UserInfo_separator">
+            <div className="mx_UserInfo_profile">
+                <div>
+                    <h2 aria-label={displayName}>
+                        { e2eIcon }
+                        { displayName }
+                    </h2>
+                </div>
+                <div>{ member.userId }</div>
+                <div className="mx_UserInfo_profileStatus">
+                    {presenceLabel}
+                    {statusLabel}
                 </div>
             </div>
+        </div>
+    </React.Fragment>;
+};
 
-            { memberDetails && <div className="mx_UserInfo_container mx_UserInfo_memberDetailsContainer">
-                <div className="mx_UserInfo_memberDetails">
-                    { memberDetails }
-                </div>
-            </div> }
+const UserInfo = ({user, groupId, roomId, onClose, phase=RIGHT_PANEL_PHASES.RoomMemberInfo, ...props}) => {
+    const cli = useContext(MatrixClientContext);
 
-            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
-                { securitySection }
-                <UserOptionsSection
+    // Load room if we are given a room id and memoize it
+    const room = useMemo(() => roomId ? cli.getRoom(roomId) : null, [cli, roomId]);
+    // fetch latest room member if we have a room, so we don't show historical information, falling back to user
+    const member = useMemo(() => room ? (room.getMember(user.userId) || user) : user, [room, user]);
+
+    const isRoomEncrypted = useIsEncrypted(cli, room);
+    const devices = useDevices(user.userId);
+
+    let e2eStatus;
+    if (isRoomEncrypted && devices) {
+        e2eStatus = getE2EStatus(cli, user.userId, devices);
+    }
+
+    const classes = ["mx_UserInfo"];
+
+    let content;
+    switch (phase) {
+        case RIGHT_PANEL_PHASES.RoomMemberInfo:
+        case RIGHT_PANEL_PHASES.GroupMemberInfo:
+            content = (
+                <BasicUserInfo
+                    room={room}
+                    member={member}
+                    groupId={groupId}
                     devices={devices}
-                    canInvite={roomPermissions.canInvite}
-                    isIgnored={isIgnored}
-                    member={member} />
+                    isRoomEncrypted={isRoomEncrypted} />
+            );
+            break;
+        case RIGHT_PANEL_PHASES.EncryptionPanel:
+            classes.push("mx_UserInfo_smallAvatar");
+            content = (
+                <EncryptionPanel {...props} member={member} onClose={onClose} />
+            );
+            break;
+    }
 
-                { adminToolsContainer }
+    return (
+        <div className={classes.join(" ")} role="tabpanel">
+            <AutoHideScrollbar className="mx_UserInfo_scrollContainer">
+                <UserInfoHeader member={member} e2eStatus={e2eStatus} onClose={onClose} />
 
-                { spinner }
+                { content }
             </AutoHideScrollbar>
         </div>
     );

src/components/views/right_panel/VerificationPanel.js

@@ -1,5 +1,5 @@
 /*
-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.
@@ -14,86 +14,272 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React from "react";
+import PropTypes from "prop-types";
+
 import * as sdk from '../../../index';
 import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import {SCAN_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
+
+import VerificationQRCode from "../elements/crypto/VerificationQRCode";
+import {_t} from "../../../languageHandler";
+import E2EIcon from "../rooms/E2EIcon";
+import {
+    PHASE_UNSENT,
+    PHASE_REQUESTED,
+    PHASE_READY,
+    PHASE_DONE,
+    PHASE_STARTED,
+    PHASE_CANCELLED, VerificationRequest,
+} from "matrix-js-sdk/src/crypto/verification/request/VerificationRequest";
+import Spinner from "../elements/Spinner";
 
 export default class VerificationPanel extends React.PureComponent {
+    static propTypes = {
+        layout: PropTypes.string,
+        request: PropTypes.object.isRequired,
+        member: PropTypes.object.isRequired,
+        phase: PropTypes.oneOf([
+            PHASE_UNSENT,
+            PHASE_REQUESTED,
+            PHASE_READY,
+            PHASE_STARTED,
+            PHASE_CANCELLED,
+            PHASE_DONE,
+        ]).isRequired,
+        onClose: PropTypes.func.isRequired,
+    };
+
     constructor(props) {
         super(props);
-        this.state = {};
-        this._hasVerifier = !!props.request.verifier;
-    }
-
-    render() {
-        return <div className="mx_UserInfo">
-            <div className="mx_UserInfo_container">
-                { this.renderStatus() }
-            </div>
-        </div>;
-    }
-
-    renderStatus() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const Spinner = sdk.getComponent('elements.Spinner');
-        const {request} = this.props;
-
-        if (request.requested) {
-            return (<p>Waiting for {request.otherUserId} to accept ... <Spinner /></p>);
-        } else if (request.ready) {
-            const verifyButton = <AccessibleButton kind="primary" onClick={this._startSAS}>
-                Verify by emoji
-            </AccessibleButton>;
-            return (<p>{request.otherUserId} is ready, start {verifyButton}</p>);
-        } else if (request.started) {
-            if (this.state.sasWaitingForOtherParty) {
-                return <p>Waiting for {request.otherUserId} to confirm ...</p>;
-            } else if (this.state.sasEvent) {
-                const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
-                return (<div>
-                    <VerificationShowSas
-                        sas={this.state.sasEvent.sas}
-                        onCancel={this._onSasMismatchesClick}
-                        onDone={this._onSasMatchesClick}
-                    />
-                </div>);
-            } else {
-                return (<p>Setting up SAS verification...</p>);
-            }
-        } else if (request.done) {
-            return <p>verified {request.otherUserId}!!</p>;
-        } else if (request.cancelled) {
-            return <p>cancelled by {request.cancellingUserId}!</p>;
+        this.state = {
+            qrCodeProps: null, // generated by the VerificationQRCode component itself
+        };
+        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) {
+        const {member, request} = this.props;
+        const showSAS = request.methods.includes(verificationMethods.SAS);
+        const showQR = this.props.request.otherPartySupportsMethod(SCAN_QR_CODE_METHOD);
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const noCommonMethodError = !showSAS && !showQR ?
+            <p>{_t("The session you are trying to verify doesn't support scanning a QR code or emoji verification, which is what Riot supports. Try with a different client.")}</p> :
+            null;
+
+        if (this.props.layout === 'dialog') {
+            // HACK: This is a terrible idea.
+            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}
+                    </div>;
+            }
+            if (showSAS) {
+                sasBlock =
+                    <div className='mx_VerificationPanel_QRPhase_startOption'>
+                        <p>{_t("Compare unique emoji")}</p>
+                        <span className='mx_VerificationPanel_QRPhase_helpText'>{_t("Compare a unique set of emoji if you don't have a camera on either device")}</span>
+                        <AccessibleButton disabled={this.state.emojiButtonClicked} onClick={this._startSAS} kind='primary'>
+                            {_t("Start")}
+                        </AccessibleButton>
+                    </div>;
+            }
+            const or = qrBlock && sasBlock ?
+                <div className='mx_VerificationPanel_QRPhase_betweenText'>{_t("or")}</div> : null;
+            return (
+                <div>
+                    {_t("Verify this session by completing one of the following:")}
+                    <div className='mx_VerificationPanel_QRPhase_startOptions'>
+                        {qrBlock}
+                        {or}
+                        {sasBlock}
+                        {noCommonMethodError}
+                    </div>
+                </div>
+            );
+        }
+
+        let qrBlock;
+        if (this.state.qrCodeProps) {
+            qrBlock = <div className="mx_UserInfo_container">
+                <h3>{_t("Verify by scanning")}</h3>
+                <p>{_t("Ask %(displayName)s to scan your code:", {
+                    displayName: member.displayName || member.name || member.userId,
+                })}</p>
+
+                <div className="mx_VerificationPanel_qrCode">
+                    <VerificationQRCode {...this.state.qrCodeProps} />
+                </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 ?
+                _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 }
+            </div>;
+        }
+
+        const noCommonMethodBlock = noCommonMethodError ?
+             <div className="mx_UserInfo_container">{noCommonMethodError}</div> :
+             null;
+
+        // TODO: add way to open camera to scan a QR code
+        return <React.Fragment>
+            {qrBlock}
+            {sasBlock}
+            {noCommonMethodBlock}
+        </React.Fragment>;
+    }
+
+    renderVerifiedPhase() {
+        const {member} = this.props;
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return (
+            <div className="mx_UserInfo_container mx_VerificationPanel_verified_section">
+                <h3>Verified</h3>
+                <p>{_t("You've successfully verified %(displayName)s!", {
+                    displayName: member.displayName || member.name || member.userId,
+                })}</p>
+                <E2EIcon isUser={true} status="verified" size={128} hideTooltip={true} />
+                <p>Verify all users in a room to ensure it's secure.</p>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    renderCancelledPhase() {
+        const {member, request} = this.props;
+
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        let text;
+        if (request.cancellationCode === "m.timeout") {
+            text = _t("Verification timed out. Start verification again from their profile.");
+        } 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,
+            });
+        } else {
+            text = _t("You cancelled verification. Start verification again from their profile.");
+        }
+
+        return (
+            <div className="mx_UserInfo_container">
+                <h3>Verification cancelled</h3>
+                <p>{ text }</p>
+
+                <AccessibleButton kind="primary" className="mx_UserInfo_wideButton" onClick={this.props.onClose}>
+                    {_t("Got it")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+
+    render() {
+        const {member, phase} = this.props;
+
+        const displayName = member.displayName || member.name || member.userId;
+
+        switch (phase) {
+            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>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
+                }
+            case PHASE_DONE:
+                return this.renderVerifiedPhase();
+            case PHASE_CANCELLED:
+                return this.renderCancelledPhase();
+        }
+        console.error("VerificationPanel unhandled phase:", phase);
+        return null;
+    }
+
     _startSAS = async () => {
+        this.setState({emojiButtonClicked: true});
         const verifier = this.props.request.beginKeyVerification(verificationMethods.SAS);
         try {
             await verifier.verify();
         } catch (err) {
             console.error(err);
-        } finally {
-            this.setState({sasEvent: null});
         }
     };
 
     _onSasMatchesClick = () => {
-        this.setState({sasWaitingForOtherParty: true});
         this.state.sasEvent.confirm();
     };
 
     _onSasMismatchesClick = () => {
-        this.state.sasEvent.cancel();
+        this.state.sasEvent.mismatch();
     };
 
     _onVerifierShowSas = (sasEvent) => {
+        const {request} = this.props;
+        request.verifier.off('show_sas', this._onVerifierShowSas);
         this.setState({sasEvent});
     };
 
     _onRequestChange = async () => {
         const {request} = this.props;
-        if (!this._hasVerifier && !!request.verifier) {
+        const hadVerifier = this._hasVerifier;
+        this._hasVerifier = !!request.verifier;
+        if (!hadVerifier && this._hasVerifier) {
             request.verifier.on('show_sas', this._onVerifierShowSas);
             try {
                 // on the requester side, this is also awaited in _startSAS,
@@ -102,18 +288,23 @@ export default class VerificationPanel extends React.PureComponent {
             } catch (err) {
                 console.error("error verify", err);
             }
-        } else if (this._hasVerifier && !request.verifier) {
-            request.verifier.removeListener('show_sas', this._onVerifierShowSas);
         }
-        this._hasVerifier = !!request.verifier;
-        this.forceUpdate();
     };
 
     componentDidMount() {
-        this.props.request.on("change", this._onRequestChange);
+        const {request} = this.props;
+        request.on("change", this._onRequestChange);
+        if (request.verifier) {
+            this.setState({sasEvent: request.verifier.sasEvent});
+        }
+        this._onRequestChange();
     }
 
     componentWillUnmount() {
-        this.props.request.off("change", this._onRequestChange);
+        const {request} = this.props;
+        if (request.verifier) {
+            request.verifier.off('show_sas', this._onVerifierShowSas);
+        }
+        request.off("change", this._onRequestChange);
     }
 }

src/components/views/room_settings/AliasSettings.js

@@ -74,7 +74,6 @@ export default class AliasSettings extends React.Component {
         roomId: PropTypes.string.isRequired,
         canSetCanonicalAlias: PropTypes.bool.isRequired,
         canSetAliases: PropTypes.bool.isRequired,
-        aliasEvents: PropTypes.array, // [MatrixEvent]
         canonicalAliasEvent: PropTypes.object, // MatrixEvent
     };
 
@@ -92,14 +91,9 @@ export default class AliasSettings extends React.Component {
             remoteDomains: [], // [ domain.com, foobar.com ]
             canonicalAlias: null, // #canonical:domain.com
             updatingCanonicalAlias: false,
+            localAliasesLoading: true,
         };
 
-        const localDomain = MatrixClientPeg.get().getDomain();
-        state.domainToAliases = this.aliasEventsToDictionary(props.aliasEvents || []);
-        state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
-            return domain !== localDomain && state.domainToAliases[domain].length > 0;
-        });
-
         if (props.canonicalAliasEvent) {
             state.canonicalAlias = props.canonicalAliasEvent.getContent().alias;
         }
@@ -107,6 +101,46 @@ export default class AliasSettings extends React.Component {
         this.state = state;
     }
 
+    async componentWillMount() {
+        const cli = MatrixClientPeg.get();
+        try {
+            if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
+                const response = await cli.unstableGetLocalAliases(this.props.roomId);
+                const localAliases = response.aliases;
+                const localDomain = cli.getDomain();
+                const domainToAliases = Object.assign(
+                    {},
+                    // FIXME, any localhost alt_aliases will be ignored as they are overwritten by localAliases
+                    this.aliasesToDictionary(this._getAltAliases()),
+                    {[localDomain]: localAliases || []},
+                );
+                const remoteDomains = Object.keys(domainToAliases).filter((domain) => {
+                    return domain !== localDomain && domainToAliases[domain].length > 0;
+                });
+                this.setState({ domainToAliases, remoteDomains });
+            } else {
+                const state = {};
+                const localDomain = cli.getDomain();
+                state.domainToAliases = this.aliasEventsToDictionary(this.props.aliasEvents || []);
+                state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
+                    return domain !== localDomain && state.domainToAliases[domain].length > 0;
+                });
+                this.setState(state);
+            }
+        } finally {
+            this.setState({localAliasesLoading: false});
+        }
+    }
+
+    aliasesToDictionary(aliases) {
+        return aliases.reduce((dict, alias) => {
+            const domain = alias.split(":")[1];
+            dict[domain] = dict[domain] || [];
+            dict[domain].push(alias);
+            return dict;
+        }, {});
+    }
+
     aliasEventsToDictionary(aliasEvents) { // m.room.alias events
         const dict = {};
         aliasEvents.forEach((event) => {
@@ -117,6 +151,16 @@ export default class AliasSettings extends React.Component {
         return dict;
     }
 
+    _getAltAliases() {
+        if (this.props.canonicalAliasEvent) {
+            const altAliases = this.props.canonicalAliasEvent.getContent().alt_aliases;
+            if (Array.isArray(altAliases)) {
+                return altAliases;
+            }
+        }
+        return [];
+    }
+
     changeCanonicalAlias(alias) {
         if (!this.props.canSetCanonicalAlias) return;
 
@@ -126,6 +170,8 @@ export default class AliasSettings extends React.Component {
         });
 
         const eventContent = {};
+        const altAliases = this._getAltAliases();
+        if (altAliases) eventContent["alt_aliases"] = altAliases;
         if (alias) eventContent["alias"] = alias;
 
         MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.canonical_alias",
@@ -261,26 +307,34 @@ export default class AliasSettings extends React.Component {
             );
         }
 
+        let localAliasesList;
+        if (this.state.localAliasesLoading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            localAliasesList = <Spinner />;
+        } else {
+            localAliasesList = <EditableAliasesList
+                id="roomAliases"
+                className={"mx_RoomSettings_localAliases"}
+                items={this.state.domainToAliases[localDomain] || []}
+                newItem={this.state.newAlias}
+                onNewItemChanged={this.onNewAliasChanged}
+                canRemove={this.props.canSetAliases}
+                canEdit={this.props.canSetAliases}
+                onItemAdded={this.onLocalAliasAdded}
+                onItemRemoved={this.onLocalAliasDeleted}
+                itemsLabel={_t('Local addresses for this room:')}
+                noItemsLabel={_t('This room has no local addresses')}
+                placeholder={_t(
+                    'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
+                )}
+                domain={localDomain}
+            />;
+        }
+
         return (
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
-                <EditableAliasesList
-                    id="roomAliases"
-                    className={"mx_RoomSettings_localAliases"}
-                    items={this.state.domainToAliases[localDomain] || []}
-                    newItem={this.state.newAlias}
-                    onNewItemChanged={this.onNewAliasChanged}
-                    canRemove={this.props.canSetAliases}
-                    canEdit={this.props.canSetAliases}
-                    onItemAdded={this.onLocalAliasAdded}
-                    onItemRemoved={this.onLocalAliasDeleted}
-                    itemsLabel={_t('Local addresses for this room:')}
-                    noItemsLabel={_t('This room has no local addresses')}
-                    placeholder={_t(
-                        'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
-                    )}
-                    domain={localDomain}
-                />
+                {localAliasesList}
                 {remoteAliasesSection}
             </div>
         );

src/components/views/rooms/AuxPanel.js

@@ -219,7 +219,7 @@ export default createReactClass({
 
                 if (link) {
                     span = (
-                        <a href={link} target="_blank" rel="noopener">
+                        <a href={link} target="_blank" rel="noreferrer noopener">
                             { span }
                         </a>
                     );

src/components/views/rooms/BasicMessageComposer.js

@@ -94,6 +94,17 @@ export default class BasicMessageEditor extends React.Component {
         this._emoticonSettingHandle = null;
     }
 
+    componentDidUpdate(prevProps) {
+        if (this.props.placeholder !== prevProps.placeholder && this.props.placeholder) {
+            const {isEmpty} = this.props.model;
+            if (isEmpty) {
+                this._showPlaceholder();
+            } else {
+                this._hidePlaceholder();
+            }
+        }
+    }
+
     _replaceEmoticon = (caretPosition, inputType, diff) => {
         const {model} = this.props;
         const range = model.startRange(caretPosition);
@@ -209,6 +220,7 @@ export default class BasicMessageEditor extends React.Component {
             const range = getRangeForSelection(this._editorRef, model, selection);
             const selectedParts = range.parts.map(p => p.serialize());
             event.clipboardData.setData("application/x-riot-composer", JSON.stringify(selectedParts));
+            event.clipboardData.setData("text/plain", text); // so plain copy/paste works
             if (type === "cut") {
                 // Remove the text, updating the model as appropriate
                 this._modifiedFlag = true;
@@ -380,6 +392,20 @@ export default class BasicMessageEditor extends React.Component {
         } else if (event.key === Key.ENTER && (event.shiftKey || (IS_MAC && event.altKey))) {
             this._insertText("\n");
             handled = true;
+        // move selection to start of composer
+        } else if (modKey && event.key === Key.HOME && !event.shiftKey) {
+            setSelection(this._editorRef, model, {
+                index: 0,
+                offset: 0,
+            });
+            handled = true;
+        // move selection to end of composer
+        } else if (modKey && event.key === Key.END && !event.shiftKey) {
+            setSelection(this._editorRef, model, {
+                index: model.parts.length - 1,
+                offset: model.parts[model.parts.length - 1].text.length,
+            });
+            handled = true;
         // autocomplete or enter to send below shouldn't have any modifier keys pressed.
         } else {
             const metaOrAltPressed = event.metaKey || event.altKey;
@@ -445,10 +471,14 @@ export default class BasicMessageEditor extends React.Component {
                 const addedLen = range.replace([partCreator.pillCandidate(range.text)]);
                 return model.positionForOffset(caret.offset + addedLen, true);
             });
-            await model.autoComplete.onTab();
-            if (!model.autoComplete.hasSelection()) {
-                this.setState({showVisualBell: true});
-                model.autoComplete.close();
+
+            // Don't try to do things with the autocomplete if there is none shown
+            if (model.autoComplete) {
+                await model.autoComplete.onTab();
+                if (!model.autoComplete.hasSelection()) {
+                    this.setState({showVisualBell: true});
+                    model.autoComplete.close();
+                }
             }
         } catch (err) {
             console.error(err);
@@ -478,6 +508,7 @@ export default class BasicMessageEditor extends React.Component {
     }
 
     componentWillUnmount() {
+        document.removeEventListener("selectionchange", this._onSelectionChange);
         this._editorRef.removeEventListener("input", this._onInput, true);
         this._editorRef.removeEventListener("compositionstart", this._onCompositionStart, true);
         this._editorRef.removeEventListener("compositionend", this._onCompositionEnd, true);
@@ -532,6 +563,7 @@ export default class BasicMessageEditor extends React.Component {
             return;
         }
         this.historyManager.ensureLastChangesPushed(this.props.model);
+        this._modifiedFlag = true;
         switch (action) {
             case "bold":
                 toggleInlineFormat(range, "**");

src/components/views/rooms/E2EIcon.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2019 New Vector 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.
@@ -14,76 +15,102 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import React, {useState} from "react";
+import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { _t } from '../../../languageHandler';
-import AccessibleButton from '../elements/AccessibleButton';
-import SettingsStore from '../../../settings/SettingsStore';
 
-export default function(props) {
-    const { isUser } = props;
-    const isNormal = props.status === "normal";
-    const isWarning = props.status === "warning";
-    const isVerified = props.status === "verified";
-    const e2eIconClasses = classNames({
+import {_t, _td} from '../../../languageHandler';
+import {useFeatureEnabled} from "../../../hooks/useSettings";
+import AccessibleButton from "../elements/AccessibleButton";
+import Tooltip from "../elements/Tooltip";
+
+export const E2E_STATE = {
+    VERIFIED: "verified",
+    WARNING: "warning",
+    UNKNOWN: "unknown",
+    NORMAL: "normal",
+};
+
+const crossSigningUserTitles = {
+    [E2E_STATE.WARNING]: _td("This user has not verified all of their sessions."),
+    [E2E_STATE.NORMAL]: _td("You have not verified this user."),
+    [E2E_STATE.VERIFIED]: _td("You have verified this user. This user has verified all of their sessions."),
+};
+const crossSigningRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Someone is using an unknown session"),
+    [E2E_STATE.NORMAL]: _td("This room is end-to-end encrypted"),
+    [E2E_STATE.VERIFIED]: _td("Everyone in this room is verified"),
+};
+
+const legacyUserTitles = {
+    [E2E_STATE.WARNING]: _td("Some sessions for this user are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All sessions for this user are trusted"),
+};
+const legacyRoomTitles = {
+    [E2E_STATE.WARNING]: _td("Some sessions in this encrypted room are not trusted"),
+    [E2E_STATE.VERIFIED]: _td("All sessions in this encrypted room are trusted"),
+};
+
+const E2EIcon = ({isUser, status, className, size, onClick, hideTooltip}) => {
+    const [hover, setHover] = useState(false);
+
+    const classes = classNames({
         mx_E2EIcon: true,
-        mx_E2EIcon_warning: isWarning,
-        mx_E2EIcon_normal: isNormal,
-        mx_E2EIcon_verified: isVerified,
-    }, props.className);
+        mx_E2EIcon_warning: status === E2E_STATE.WARNING,
+        mx_E2EIcon_normal: status === E2E_STATE.NORMAL,
+        mx_E2EIcon_verified: status === E2E_STATE.VERIFIED,
+    }, className);
+
     let e2eTitle;
-
-    const crossSigning = SettingsStore.isFeatureEnabled("feature_cross_signing");
+    const crossSigning = useFeatureEnabled("feature_cross_signing");
     if (crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "This user has not verified all of their devices.",
-            );
-        } else if (isNormal) {
-            e2eTitle = _t(
-                "You have not verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "You have verified this user. " +
-                "This user has verified all of their devices.",
-            );
-        }
+        e2eTitle = crossSigningUserTitles[status];
     } else if (crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t(
-                "Some users in this encrypted room are not verified by you or " +
-                "they have not verified their own devices.",
-            );
-        } else if (isVerified) {
-            e2eTitle = _t(
-                "All users in this encrypted room are verified by you and " +
-                "they have verified their own devices.",
-            );
-        }
+        e2eTitle = crossSigningRoomTitles[status];
     } else if (!crossSigning && isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices for this user are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices for this user are trusted");
-        }
+        e2eTitle = legacyUserTitles[status];
     } else if (!crossSigning && !isUser) {
-        if (isWarning) {
-            e2eTitle = _t("Some devices in this encrypted room are not trusted");
-        } else if (isVerified) {
-            e2eTitle = _t("All devices in this encrypted room are trusted");
-        }
+        e2eTitle = legacyRoomTitles[status];
     }
 
-    let style = null;
-    if (props.size) {
-        style = {width: `${props.size}px`, height: `${props.size}px`};
+    let style;
+    if (size) {
+        style = {width: `${size}px`, height: `${size}px`};
     }
 
-    const icon = (<div className={e2eIconClasses} style={style} title={e2eTitle} />);
-    if (props.onClick) {
-        return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
-    } else {
-        return icon;
+    const onMouseOver = () => setHover(true);
+    const onMouseOut = () => setHover(false);
+
+    let tip;
+    if (hover && !hideTooltip) {
+        tip = <Tooltip label={e2eTitle ? _t(e2eTitle) : ""} />;
     }
-}
+
+    if (onClick) {
+        return (
+            <AccessibleButton
+                onClick={onClick}
+                onMouseOver={onMouseOver}
+                onMouseOut={onMouseOut}
+                className={classes}
+                style={style}
+            >
+                { tip }
+            </AccessibleButton>
+        );
+    }
+
+    return <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} className={classes} style={style}>
+        { tip }
+    </div>;
+};
+
+E2EIcon.propTypes = {
+    isUser: PropTypes.bool,
+    status: PropTypes.oneOf(Object.values(E2E_STATE)),
+    className: PropTypes.string,
+    size: PropTypes.number,
+    onClick: PropTypes.func,
+};
+
+export default E2EIcon;

src/components/views/rooms/EntityTile.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector 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.
@@ -22,7 +23,7 @@ import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
-
+import E2EIcon from './E2EIcon';
 
 const PRESENCE_CLASS = {
     "offline": "mx_EntityTile_offline",
@@ -30,7 +31,6 @@ const PRESENCE_CLASS = {
     "unavailable": "mx_EntityTile_unavailable",
 };
 
-
 function presenceClassForMember(presenceState, lastActiveAgo, showPresence) {
     if (showPresence === false) {
         return 'mx_EntityTile_online_beenactive';
@@ -69,6 +69,7 @@ const EntityTile = createReactClass({
         suppressOnHover: PropTypes.bool,
         showPresence: PropTypes.bool,
         subtextLabel: PropTypes.string,
+        e2eStatus: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -156,23 +157,26 @@ const EntityTile = createReactClass({
             );
         }
 
-        let power;
+        let powerLabel;
         const powerStatus = this.props.powerStatus;
         if (powerStatus) {
-            const src = {
-                [EntityTile.POWER_STATUS_MODERATOR]: require("../../../../res/img/mod.svg"),
-                [EntityTile.POWER_STATUS_ADMIN]: require("../../../../res/img/admin.svg"),
-            }[powerStatus];
-            const alt = {
-                [EntityTile.POWER_STATUS_MODERATOR]: _t("Moderator"),
+            const powerText = {
+                [EntityTile.POWER_STATUS_MODERATOR]: _t("Mod"),
                 [EntityTile.POWER_STATUS_ADMIN]: _t("Admin"),
             }[powerStatus];
-            power = <img src={src} className="mx_EntityTile_power" width="16" height="17" alt={alt} />;
+            powerLabel = <div className="mx_EntityTile_power">{powerText}</div>;
+        }
+
+        let e2eIcon;
+        const { e2eStatus } = this.props;
+        if (e2eStatus) {
+            e2eIcon = <E2EIcon status={e2eStatus} isUser={true} />;
         }
 
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
 
-        const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
+        const av = this.props.avatarJsx ||
+            <BaseAvatar name={this.props.name} width={36} height={36} aria-hidden="true" />;
 
         // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
@@ -181,9 +185,10 @@ const EntityTile = createReactClass({
                                   onClick={this.props.onClick}>
                     <div className="mx_EntityTile_avatar">
                         { av }
-                        { power }
+                        { e2eIcon }
                     </div>
                     { nameEl }
+                    { powerLabel }
                     { inviteButton }
                 </AccessibleButton>
             </div>
@@ -194,5 +199,4 @@ const EntityTile = createReactClass({
 EntityTile.POWER_STATUS_MODERATOR = "moderator";
 EntityTile.POWER_STATUS_ADMIN = "admin";
 
-
 export default EntityTile;

src/components/views/rooms/EventTile.js

@@ -33,18 +33,21 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {ALL_RULE_TYPES} from "../../../mjolnir/BanList";
 import * as ObjectUtils from "../../../ObjectUtils";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {E2E_STATE} from "./E2EIcon";
 
 const eventTileTypes = {
     'm.room.message': 'messages.MessageEvent',
     'm.sticker': 'messages.MessageEvent',
     'm.key.verification.cancel': 'messages.MKeyVerificationConclusion',
     'm.key.verification.done': 'messages.MKeyVerificationConclusion',
+    'm.room.encryption': 'messages.EncryptionEvent',
     'm.call.invite': 'messages.TextualEvent',
     'm.call.answer': 'messages.TextualEvent',
     'm.call.hangup': 'messages.TextualEvent',
 };
 
 const stateEventTileTypes = {
+    'm.room.encryption': 'messages.EncryptionEvent',
     'm.room.aliases': 'messages.TextualEvent',
     // 'm.room.aliases': 'messages.RoomAliasesEvent', // too complex
     'm.room.canonical_alias': 'messages.TextualEvent',
@@ -54,7 +57,6 @@ const stateEventTileTypes = {
     'm.room.avatar': 'messages.RoomAvatarEvent',
     'm.room.third_party_invite': 'messages.TextualEvent',
     'm.room.history_visibility': 'messages.TextualEvent',
-    'm.room.encryption': 'messages.TextualEvent',
     'm.room.topic': 'messages.TextualEvent',
     'm.room.power_levels': 'messages.TextualEvent',
     'm.room.pinned_events': 'messages.TextualEvent',
@@ -98,6 +100,17 @@ export function getHandlerTile(ev) {
         }
     }
 
+    // sometimes MKeyVerificationConclusion declines to render.  Jankily decline to render and
+    // fall back to showing hidden events, if we're viewing hidden events
+    // XXX: This is extremely a hack. Possibly these components should have an interface for
+    // declining to render?
+    if (type === "m.key.verification.cancel" && SettingsStore.getValue("showHiddenEventsInTimeline")) {
+        const MKeyVerificationConclusion = sdk.getComponent("messages.MKeyVerificationConclusion");
+        if (!MKeyVerificationConclusion.prototype._shouldRender.call(null, ev, ev.request)) {
+            return;
+        }
+    }
+
     return ev.isState() ? stateEventTileTypes[type] : eventTileTypes[type];
 }
 
@@ -235,6 +248,7 @@ export default createReactClass({
         this._suppressReadReceiptAnimation = false;
         const client = this.context;
         client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        client.on("userTrustStatusChanged", this.onUserVerificationChanged);
         this.props.mxEvent.on("Event.decrypted", this._onDecrypted);
         if (this.props.showReactions) {
             this.props.mxEvent.on("Event.relationsCreated", this._onReactionsCreated);
@@ -260,6 +274,7 @@ export default createReactClass({
     componentWillUnmount: function() {
         const client = this.context;
         client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        client.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
         this.props.mxEvent.removeListener("Event.decrypted", this._onDecrypted);
         if (this.props.showReactions) {
             this.props.mxEvent.removeListener("Event.relationsCreated", this._onReactionsCreated);
@@ -282,18 +297,56 @@ export default createReactClass({
         }
     },
 
+    onUserVerificationChanged: function(userId, _trustStatus) {
+        if (userId === this.props.mxEvent.getSender()) {
+            this._verifyEvent(this.props.mxEvent);
+        }
+    },
+
     _verifyEvent: async function(mxEvent) {
         if (!mxEvent.isEncrypted()) {
             return;
         }
 
+        // If we directly trust the device, short-circuit here
         const verified = await this.context.isEventSenderVerified(mxEvent);
+        if (verified) {
+            this.setState({
+                verified: E2E_STATE.VERIFIED,
+            }, () => {
+                // Decryption may have caused a change in size
+                this.props.onHeightChanged();
+            });
+            return;
+        }
+
+        // If cross-signing is off, the old behaviour is to scream at the user
+        // as if they've done something wrong, which they haven't
+        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            this.setState({
+                verified: E2E_STATE.WARNING,
+            }, this.props.onHeightChanged);
+            return;
+        }
+
+        if (!this.context.checkUserTrust(mxEvent.getSender()).isCrossSigningVerified()) {
+            this.setState({
+                verified: E2E_STATE.NORMAL,
+            }, this.props.onHeightChanged);
+            return;
+        }
+
+        const eventSenderTrust = await this.context.checkEventSenderTrust(mxEvent);
+        if (!eventSenderTrust) {
+            this.setState({
+                verified: E2E_STATE.UNKNOWN,
+            }, this.props.onHeightChanged); // Decryption may have cause a change in size
+            return;
+        }
+
         this.setState({
-            verified: verified,
-        }, () => {
-            // Decryption may have caused a change in size
-            this.props.onHeightChanged();
-        });
+            verified: eventSenderTrust.isVerified() ? E2E_STATE.VERIFIED : E2E_STATE.WARNING,
+        }, this.props.onHeightChanged); // Decryption may have caused a change in size
     },
 
     _propsEqual: function(objA, objB) {
@@ -473,8 +526,12 @@ export default createReactClass({
 
         // event is encrypted, display padlock corresponding to whether or not it is verified
         if (ev.isEncrypted()) {
-            if (this.state.verified) {
+            if (this.state.verified === E2E_STATE.NORMAL) {
+                return; // no icon if we've not even cross-signed the user
+            } else if (this.state.verified === E2E_STATE.VERIFIED) {
                 return; // no icon for verified
+            } else if (this.state.verified === E2E_STATE.UNKNOWN) {
+                return (<E2ePadlockUnknown />);
             } else {
                 return (<E2ePadlockUnverified />);
             }
@@ -527,6 +584,7 @@ export default createReactClass({
             console.error("EventTile attempted to get relations for an event without an ID");
             // Use event's special `toJSON` method to log key data.
             console.log(JSON.stringify(this.props.mxEvent, null, 4));
+            console.trace("Stacktrace for https://github.com/vector-im/riot-web/issues/11120");
         }
         return this.props.getRelationsForEvent(eventId, "m.annotation", "m.reaction");
     },
@@ -554,7 +612,8 @@ export default createReactClass({
 
         // Info messages are basically information about commands processed on a room
         const isBubbleMessage = eventType.startsWith("m.key.verification") ||
-            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification"));
+            (eventType === "m.room.message" && msgtype && msgtype.startsWith("m.key.verification")) ||
+            (eventType === "m.room.encryption");
         let isInfoMessage = (
             !isBubbleMessage && eventType !== 'm.room.message' &&
             eventType !== 'm.sticker' && eventType !== 'm.room.create'
@@ -604,8 +663,9 @@ export default createReactClass({
             mx_EventTile_last: this.props.last,
             mx_EventTile_contextual: this.props.contextual,
             mx_EventTile_actionBarFocused: this.state.actionBarFocused,
-            mx_EventTile_verified: !isBubbleMessage && this.state.verified === true,
-            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === false,
+            mx_EventTile_verified: !isBubbleMessage && this.state.verified === E2E_STATE.VERIFIED,
+            mx_EventTile_unverified: !isBubbleMessage && this.state.verified === E2E_STATE.WARNING,
+            mx_EventTile_unknown: !isBubbleMessage && this.state.verified === E2E_STATE.UNKNOWN,
             mx_EventTile_bad: isEncryptionFailure,
             mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_redacted: isRedacted,
@@ -686,15 +746,15 @@ export default createReactClass({
             <div className="mx_EventTile_keyRequestInfo_tooltip_contents">
                 <p>
                     { this.state.previouslyRequestedKeys ?
-                        _t( 'Your key share request has been sent - please check your other devices ' +
+                        _t( 'Your key share request has been sent - please check your other sessions ' +
                             'for key share requests.') :
-                        _t( 'Key share requests are sent to your other devices automatically. If you ' +
-                            'rejected or dismissed the key share request on your other devices, click ' +
+                        _t( 'Key share requests are sent to your other sessions automatically. If you ' +
+                            'rejected or dismissed the key share request on your other sessions, click ' +
                             'here to request the keys for this session again.')
                     }
                 </p>
                 <p>
-                    { _t( 'If your other devices do not have the key for this message you will not ' +
+                    { _t( 'If your other sessions do not have the key for this message you will not ' +
                             'be able to decrypt them.')
                     }
                 </p>
@@ -702,7 +762,7 @@ export default createReactClass({
         const keyRequestInfoContent = this.state.previouslyRequestedKeys ?
             _t('Key request sent.') :
             _t(
-                '<requestLink>Re-request encryption keys</requestLink> from your other devices.',
+                '<requestLink>Re-request encryption keys</requestLink> from your other sessions.',
                 {},
                 {'requestLink': (sub) => <a onClick={this.onRequestKeysClick}>{ sub }</a>},
             );
@@ -891,7 +951,7 @@ function E2ePadlockUndecryptable(props) {
 
 function E2ePadlockUnverified(props) {
     return (
-        <E2ePadlock title={_t("Encrypted by an unverified device")} icon="unverified" {...props} />
+        <E2ePadlock title={_t("Encrypted by an unverified session")} icon="unverified" {...props} />
     );
 }
 
@@ -901,6 +961,12 @@ function E2ePadlockUnencrypted(props) {
     );
 }
 
+function E2ePadlockUnknown(props) {
+    return (
+        <E2ePadlock title={_t("Encrypted by a deleted session")} icon="unknown" {...props} />
+    );
+}
+
 class E2ePadlock extends React.Component {
     static propTypes = {
         icon: PropTypes.string.isRequired,

src/components/views/rooms/InviteOnlyIcon.js

@@ -0,0 +1,58 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import SettingsStore from '../../../settings/SettingsStore';
+
+export default class InviteOnlyIcon extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onHoverStart = () => {
+        this.setState({hover: true});
+    };
+
+    onHoverEnd = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const classes = this.props.collapsedPanel ? "mx_InviteOnlyIcon_small": "mx_InviteOnlyIcon_large";
+
+        if (!SettingsStore.isFeatureEnabled("feature_invite_only_padlocks")) {
+            return null;
+        }
+
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        let tooltip;
+        if (this.state.hover) {
+            tooltip = <Tooltip className="mx_InviteOnlyIcon_tooltip" label={_t("Invite only")} dir="auto" />;
+        }
+        return (<div className={classes}
+          onMouseEnter={this.onHoverStart}
+          onMouseLeave={this.onHoverEnd}
+        >
+          { tooltip }
+        </div>);
+    }
+}

src/components/views/rooms/LinkPreviewWidget.js

@@ -136,7 +136,7 @@ export default createReactClass({
             <div className="mx_LinkPreviewWidget" >
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
-                    <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noopener">{ p["og:title"] }</a></div>
+                    <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a></div>
                     <div className="mx_LinkPreviewWidget_siteName">{ p["og:site_name"] ? (" - " + p["og:site_name"]) : null }</div>
                     <div className="mx_LinkPreviewWidget_description" ref={this._description}>
                         { description }

src/components/views/rooms/MemberInfo.js

@@ -260,7 +260,7 @@ export default createReactClass({
                 e2eStatus: self._getE2EStatus(devices),
             });
         }, function(err) {
-            console.log("Error downloading devices", err);
+            console.log("Error downloading sessions", err);
             self.setState({devicesLoading: false});
         });
     },
@@ -766,9 +766,9 @@ export default createReactClass({
             // still loading
             devComponents = <Spinner />;
         } else if (devices === null) {
-            devComponents = _t("Unable to load device list");
+            devComponents = _t("Unable to load session list");
         } else if (devices.length === 0) {
-            devComponents = _t("No devices with registered encryption keys");
+            devComponents = _t("No sessions with registered encryption keys");
         } else {
             devComponents = [];
             for (let i = 0; i < devices.length; i++) {
@@ -780,7 +780,7 @@ export default createReactClass({
 
         return (
             <div>
-                <h3>{ _t("Devices") }</h3>
+                <h3>{ _t("Sessions") }</h3>
                 <div className="mx_MemberInfo_devices">
                     { devComponents }
                 </div>
@@ -1113,7 +1113,8 @@ export default createReactClass({
             }
         }
 
-        const avatarUrl = this.props.member.getMxcAvatarUrl();
+        const {member} = this.props;
+        const avatarUrl = member.avatarUrl || (member.getMxcAvatarUrl && member.getMxcAvatarUrl());
         let avatarElement;
         if (avatarUrl) {
             const httpUrl = this.context.mxcUrlToHttp(avatarUrl, 800, 800);

src/components/views/rooms/MemberTile.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket 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.
@@ -22,6 +22,7 @@ import createReactClass from 'create-react-class';
 import * as sdk from "../../../index";
 import dis from "../../../dispatcher";
 import { _t } from '../../../languageHandler';
+import { MatrixClientPeg } from "../../../MatrixClientPeg";
 
 export default createReactClass({
     displayName: 'MemberTile',
@@ -40,29 +41,101 @@ export default createReactClass({
     getInitialState: function() {
         return {
             statusMessage: this.getStatusMessage(),
+            isRoomEncrypted: false,
+            e2eStatus: null,
         };
     },
 
     componentDidMount() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return;
+        const cli = MatrixClientPeg.get();
+
+        if (SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            const { user } = this.props.member;
+            if (user) {
+                user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+            }
         }
-        const { user } = this.props.member;
-        if (!user) {
-            return;
+
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            const { roomId } = this.props.member;
+            if (roomId) {
+                const isRoomEncrypted = cli.isRoomEncrypted(roomId);
+                this.setState({
+                    isRoomEncrypted,
+                });
+                if (isRoomEncrypted) {
+                    cli.on("userTrustStatusChanged", this.onUserTrustStatusChanged);
+                    this.updateE2EStatus();
+                } else {
+                    // Listen for room to become encrypted
+                    cli.on("RoomState.events", this.onRoomStateEvents);
+                }
+            }
         }
-        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     },
 
     componentWillUnmount() {
+        const cli = MatrixClientPeg.get();
+
         const { user } = this.props.member;
-        if (!user) {
+        if (user) {
+            user.removeListener(
+                "User._unstable_statusMessage",
+                this._onStatusMessageCommitted,
+            );
+        }
+
+        if (cli) {
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
+            cli.removeListener("userTrustStatusChanged", this.onUserTrustStatusChanged);
+        }
+    },
+
+    onRoomStateEvents: function(ev) {
+        if (ev.getType() !== "m.room.encryption") return;
+        const { roomId } = this.props.member;
+        if (ev.getRoomId() !== roomId) return;
+
+        // The room is encrypted now.
+        const cli = MatrixClientPeg.get();
+        cli.removeListener("RoomState.events", this.onRoomStateEvents);
+        this.setState({
+            isRoomEncrypted: true,
+        });
+        this.updateE2EStatus();
+    },
+
+    onUserTrustStatusChanged: function(userId, trustStatus) {
+        if (userId !== this.props.member.userId) return;
+        this.updateE2EStatus();
+    },
+
+    updateE2EStatus: async function() {
+        const cli = MatrixClientPeg.get();
+        const { userId } = this.props.member;
+        const isMe = userId === cli.getUserId();
+        const userVerified = cli.checkUserTrust(userId).isCrossSigningVerified();
+        if (!userVerified) {
+            this.setState({
+                e2eStatus: "normal",
+            });
             return;
         }
-        user.removeListener(
-            "User._unstable_statusMessage",
-            this._onStatusMessageCommitted,
-        );
+
+        const devices = await cli.getStoredDevicesForUser(userId);
+        const anyDeviceUnverified = devices.some(device => {
+            const { deviceId } = device;
+            // For your own devices, we use the stricter check of cross-signing
+            // verification to encourage everyone to trust their own devices via
+            // cross-signing so that other users can then safely trust you.
+            // For other people's devices, the more general verified check that
+            // includes locally verified devices can be used.
+            const deviceTrust = cli.checkDeviceTrust(userId, deviceId);
+            return isMe ? !deviceTrust.isCrossSigningVerified() : !deviceTrust.isVerified();
+        });
+        this.setState({
+            e2eStatus: anyDeviceUnverified ? "warning" : "verified",
+        });
     },
 
     getStatusMessage() {
@@ -94,6 +167,12 @@ export default createReactClass({
         ) {
             return true;
         }
+        if (
+            nextState.isRoomEncrypted !== this.state.isRoomEncrypted ||
+            nextState.e2eStatus !== this.state.e2eStatus
+        ) {
+            return true;
+        }
         return false;
     },
 
@@ -129,7 +208,7 @@ export default createReactClass({
         }
 
         const av = (
-            <MemberAvatar member={member} width={36} height={36} />
+            <MemberAvatar member={member} width={36} height={36} aria-hidden="true" />
         );
 
         if (member.user) {
@@ -153,14 +232,26 @@ export default createReactClass({
 
         const powerStatus = powerStatusMap.get(powerLevel);
 
+        let e2eStatus;
+        if (this.state.isRoomEncrypted) {
+            e2eStatus = this.state.e2eStatus;
+        }
+
         return (
-            <EntityTile {...this.props} presenceState={presenceState}
+            <EntityTile
+                {...this.props}
+                presenceState={presenceState}
                 presenceLastActiveAgo={member.user ? member.user.lastActiveAgo : 0}
                 presenceLastTs={member.user ? member.user.lastPresenceTs : 0}
                 presenceCurrentlyActive={member.user ? member.user.currentlyActive : false}
-                avatarJsx={av} title={this.getPowerLabel()} onClick={this.onClick}
-                name={name} powerStatus={powerStatus} showPresence={this.props.showPresence}
+                avatarJsx={av}
+                title={this.getPowerLabel()}
+                name={name}
+                powerStatus={powerStatus}
+                showPresence={this.props.showPresence}
                 subtextLabel={statusMessage}
+                e2eStatus={e2eStatus}
+                onClick={this.onClick}
             />
         );
     },

src/components/views/rooms/MessageComposer.js

@@ -26,6 +26,7 @@ import Stickerpicker from './Stickerpicker';
 import { makeRoomPermalink } from '../../../utils/permalinks/Permalinks';
 import ContentMessages from '../../../ContentMessages';
 import E2EIcon from './E2EIcon';
+import SettingsStore from "../../../settings/SettingsStore";
 
 function ComposerAvatar(props) {
     const MemberStatusMessageAvatar = sdk.getComponent('avatars.MemberStatusMessageAvatar');
@@ -168,7 +169,6 @@ export default class MessageComposer extends React.Component {
     constructor(props) {
         super(props);
         this.onInputStateChanged = this.onInputStateChanged.bind(this);
-        this.onEvent = this.onEvent.bind(this);
         this._onRoomStateEvents = this._onRoomStateEvents.bind(this);
         this._onRoomViewStoreUpdate = this._onRoomViewStoreUpdate.bind(this);
         this._onTombstoneClick = this._onTombstoneClick.bind(this);
@@ -182,11 +182,6 @@ export default class MessageComposer extends React.Component {
     }
 
     componentDidMount() {
-        // N.B. using 'event' rather than 'RoomEvents' otherwise the crypto handler
-        // for 'event' fires *after* 'RoomEvent', and our room won't have yet been
-        // marked as encrypted.
-        // XXX: fragile as all hell - fixme somehow, perhaps with a dedicated Room.encryption event or something.
-        MatrixClientPeg.get().on("event", this.onEvent);
         MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         this._waitForOwnMember();
@@ -210,7 +205,6 @@ export default class MessageComposer extends React.Component {
 
     componentWillUnmount() {
         if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("event", this.onEvent);
             MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
         }
         if (this._roomStoreToken) {
@@ -218,13 +212,6 @@ export default class MessageComposer extends React.Component {
         }
     }
 
-    onEvent(event) {
-        if (event.getType() !== 'm.room.encryption') return;
-        if (event.getRoomId() !== this.props.room.roomId) return;
-        // TODO: put (encryption state??) in state
-        this.forceUpdate();
-    }
-
     _onRoomStateEvents(ev, state) {
         if (ev.getRoomId() !== this.props.room.roomId) return;
 
@@ -282,18 +269,33 @@ export default class MessageComposer extends React.Component {
     }
 
     renderPlaceholderText() {
-        const roomIsEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
-        if (this.state.isQuoting) {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted reply…');
+        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (this.state.isQuoting) {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted reply…');
+                } else {
+                    return _t('Send a reply…');
+                }
             } else {
-                return _t('Send a reply (unencrypted)…');
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted message…');
+                } else {
+                    return _t('Send a message…');
+                }
             }
         } else {
-            if (roomIsEncrypted) {
-                return _t('Send an encrypted message…');
+            if (this.state.isQuoting) {
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted reply…');
+                } else {
+                    return _t('Send a reply (unencrypted)…');
+                }
             } else {
-                return _t('Send a message (unencrypted)…');
+                if (this.props.e2eStatus) {
+                    return _t('Send an encrypted message…');
+                } else {
+                    return _t('Send a message (unencrypted)…');
+                }
             }
         }
     }
@@ -339,7 +341,7 @@ export default class MessageComposer extends React.Component {
                 </a>
             ) : '';
 
-            controls.push(<div className="mx_MessageComposer_replaced_wrapper">
+            controls.push(<div className="mx_MessageComposer_replaced_wrapper" key="room_replaced">
                 <div className="mx_MessageComposer_replaced_valign">
                     <img className="mx_MessageComposer_roomReplaced_icon" src={require("../../../../res/img/room_replaced.svg")} />
                     <span className="mx_MessageComposer_roomReplaced_header">

src/components/views/rooms/RoomBreadcrumbs.js

@@ -363,7 +363,7 @@ export default class RoomBreadcrumbs extends React.Component {
             }
 
             let dmIndicator;
-            if (this._isDmRoom(r.room)) {
+            if (this._isDmRoom(r.room) && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
                 dmIndicator = <img
                     src={require("../../../../res/img/icon_person.svg")}
                     className="mx_RoomBreadcrumbs_dmIndicator"

src/components/views/rooms/RoomHeader.js

@@ -31,7 +31,9 @@ import ManageIntegsButton from '../elements/ManageIntegsButton';
 import {CancelButton} from './SimpleRoomHeader';
 import SettingsStore from "../../../settings/SettingsStore";
 import RoomHeaderButtons from '../right_panel/RoomHeaderButtons';
+import DMRoomMap from '../../../utils/DMRoomMap';
 import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';
 
 export default createReactClass({
     displayName: 'RoomHeader',
@@ -160,13 +162,16 @@ export default createReactClass({
             <E2EIcon status={this.props.e2eStatus} /> :
             undefined;
 
+        const dmUserId = DMRoomMap.shared().getUserIdForRoomId(this.props.room.roomId);
         const joinRules = this.props.room && this.props.room.currentState.getStateEvents("m.room.join_rules", "");
         const joinRule = joinRules && joinRules.getContent().join_rule;
-        const joinRuleClass = classNames("mx_RoomHeader_PrivateIcon",
-                                         {"mx_RoomHeader_isPrivate": joinRule === "invite"});
-        const privateIcon = SettingsStore.isFeatureEnabled("feature_cross_signing") ?
-            <div className={joinRuleClass} /> :
-            undefined;
+        let privateIcon;
+        // Don't show an invite-only icon for DMs. Users know they're invite-only.
+        if (!dmUserId && SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            if (joinRule == "invite") {
+                privateIcon = <InviteOnlyIcon />;
+            }
+        }
 
         if (this.props.onCancelClick) {
             cancelButton = <CancelButton onClick={this.props.onCancelClick} />;
@@ -309,9 +314,8 @@ export default createReactClass({
 
         return (
             <div className="mx_RoomHeader light-panel">
-                <div className="mx_RoomHeader_wrapper">
-                    <div className="mx_RoomHeader_avatar">{ roomAvatar }</div>
-                    { e2eIcon }
+                <div className="mx_RoomHeader_wrapper" aria-owns="mx_RightPanel">
+                    <div className="mx_RoomHeader_avatar">{ roomAvatar }{ e2eIcon }</div>
                     { privateIcon }
                     { name }
                     { topicElement }

src/components/views/rooms/RoomList.js

@@ -28,7 +28,7 @@ import rate_limited_func from "../../../ratelimitedfunc";
 import * as Rooms from '../../../Rooms';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import TagOrderStore from '../../../stores/TagOrderStore';
-import RoomListStore from '../../../stores/RoomListStore';
+import RoomListStore, {TAG_DM} from '../../../stores/RoomListStore';
 import CustomRoomTagStore from '../../../stores/CustomRoomTagStore';
 import GroupStore from '../../../stores/GroupStore';
 import RoomSubList from '../../structures/RoomSubList';
@@ -39,6 +39,7 @@ import * as sdk from "../../../index";
 import * as Receipt from "../../../utils/Receipt";
 import {Resizer} from '../../../resizer';
 import {Layout, Distributor} from '../../../resizer/distributors/roomsublist2';
+import {RovingTabIndexProvider} from "../../../accessibility/RovingTabIndex";
 
 const HIDE_CONFERENCE_CHANS = true;
 const STANDARD_TAGS_REGEX = /^(m\.(favourite|lowpriority|server_notice)|im\.vector\.fake\.(invite|recent|direct|archived))$/;
@@ -699,13 +700,11 @@ export default createReactClass({
                 list: [],
                 extraTiles: this._makeGroupInviteTiles(this.props.searchFilter),
                 label: _t('Community Invites'),
-                order: "recent",
                 isInvite: true,
             },
             {
                 list: this.state.lists['im.vector.fake.invite'],
                 label: _t('Invites'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.invite'),
                 isInvite: true,
             },
@@ -713,22 +712,19 @@ export default createReactClass({
                 list: this.state.lists['m.favourite'],
                 label: _t('Favourites'),
                 tagName: "m.favourite",
-                order: "manual",
                 incomingCall: incomingCallIfTaggedAs('m.favourite'),
             },
             {
-                list: this.state.lists['im.vector.fake.direct'],
-                label: _t('People'),
-                tagName: "im.vector.fake.direct",
-                order: "recent",
-                incomingCall: incomingCallIfTaggedAs('im.vector.fake.direct'),
+                list: this.state.lists[TAG_DM],
+                label: _t('Direct Messages'),
+                tagName: TAG_DM,
+                incomingCall: incomingCallIfTaggedAs(TAG_DM),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_chat'});},
                 addRoomLabel: _t("Start chat"),
             },
             {
                 list: this.state.lists['im.vector.fake.recent'],
                 label: _t('Rooms'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.recent'),
                 onAddRoom: () => {dis.dispatch({action: 'view_create_room'});},
             },
@@ -743,7 +739,6 @@ export default createReactClass({
                     key: tagName,
                     label: labelForTagName(tagName),
                     tagName: tagName,
-                    order: "manual",
                     incomingCall: incomingCallIfTaggedAs(tagName),
                 };
             });
@@ -753,13 +748,11 @@ export default createReactClass({
                 list: this.state.lists['m.lowpriority'],
                 label: _t('Low priority'),
                 tagName: "m.lowpriority",
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('m.lowpriority'),
             },
             {
                 list: this.state.lists['im.vector.fake.archived'],
                 label: _t('Historical'),
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('im.vector.fake.archived'),
                 startAsHidden: true,
                 showSpinner: this.state.isLoadingLeftRooms,
@@ -769,26 +762,28 @@ export default createReactClass({
                 list: this.state.lists['m.server_notice'],
                 label: _t('System Alerts'),
                 tagName: "m.lowpriority",
-                order: "recent",
                 incomingCall: incomingCallIfTaggedAs('m.server_notice'),
             },
         ]);
 
         const subListComponents = this._mapSubListProps(subLists);
 
-        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, ...props} = this.props; // eslint-disable-line
+        const {resizeNotifier, collapsed, searchFilter, ConferenceHandler, onKeyDown, ...props} = this.props; // eslint-disable-line
         return (
-            <div
-                {...props}
-                ref={this._collectResizeContainer}
-                className="mx_RoomList"
-                role="tree"
-                aria-label={_t("Rooms")}
-                onMouseMove={this.onMouseMove}
-                onMouseLeave={this.onMouseLeave}
-            >
-                { subListComponents }
-            </div>
+            <RovingTabIndexProvider handleHomeEnd={true} onKeyDown={onKeyDown}>
+                {({onKeyDownHandler}) => <div
+                    {...props}
+                    onKeyDown={onKeyDownHandler}
+                    ref={this._collectResizeContainer}
+                    className="mx_RoomList"
+                    role="tree"
+                    aria-label={_t("Rooms")}
+                    onMouseMove={this.onMouseMove}
+                    onMouseLeave={this.onMouseLeave}
+                >
+                    { subListComponents }
+                </div> }
+            </RovingTabIndexProvider>
         );
     },
 });

src/components/views/rooms/RoomPreviewBar.js

@@ -49,6 +49,7 @@ export default createReactClass({
     propTypes: {
         onJoinClick: PropTypes.func,
         onRejectClick: PropTypes.func,
+        onRejectAndIgnoreClick: PropTypes.func,
         onForgetClick: PropTypes.func,
         // if inviterName is specified, the preview bar will shown an invite to the room.
         // You should also specify onRejectClick if specifiying inviterName
@@ -282,6 +283,7 @@ export default createReactClass({
 
     render: function() {
         const Spinner = sdk.getComponent('elements.Spinner');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let showSpinner = false;
         let darkStyle = false;
@@ -292,6 +294,7 @@ export default createReactClass({
         let secondaryActionHandler;
         let secondaryActionLabel;
         let footer;
+        const extraComponents = [];
 
         const messageCase = this._getMessageCase();
         switch (messageCase) {
@@ -469,6 +472,14 @@ export default createReactClass({
                 primaryActionHandler = this.props.onJoinClick;
                 secondaryActionLabel = _t("Reject");
                 secondaryActionHandler = this.props.onRejectClick;
+
+                if (this.props.onRejectAndIgnoreClick) {
+                    extraComponents.push(
+                        <AccessibleButton kind="secondary" onClick={this.props.onRejectAndIgnoreClick} key="ignore">
+                            { _t("Reject & Ignore user") }
+                        </AccessibleButton>,
+                    );
+                }
                 break;
             }
             case MessageCase.ViewingRoom: {
@@ -498,15 +509,13 @@ export default createReactClass({
                         "<issueLink>submit a bug report</issueLink>.",
                         { errcode: this.props.error.errcode },
                         { issueLink: label => <a href="https://github.com/vector-im/riot-web/issues/new/choose"
-                            target="_blank" rel="noopener">{ label }</a> },
+                            target="_blank" rel="noreferrer noopener">{ label }</a> },
                     ),
                 ];
                 break;
             }
         }
 
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
         let subTitleElements;
         if (subTitle) {
             if (!Array.isArray(subTitle)) {
@@ -554,6 +563,7 @@ export default createReactClass({
                 </div>
                 <div className="mx_RoomPreviewBar_actions">
                     { secondaryButton }
+                    { extraComponents }
                     { primaryButton }
                 </div>
                 <div className="mx_RoomPreviewBar_footer">

src/components/views/rooms/RoomRecoveryReminder.js

@@ -124,7 +124,7 @@ export default class RoomRecoveryReminder extends React.PureComponent {
 
         let setupCaption;
         if (this.state.backupInfo) {
-            setupCaption = _t("Connect this device to Key Backup");
+            setupCaption = _t("Connect this session to Key Backup");
         } else {
             setupCaption = _t("Start using Key Backup");
         }

src/components/views/rooms/RoomTile.js

@@ -32,6 +32,11 @@ import ActiveRoomObserver from '../../../ActiveRoomObserver';
 import RoomViewStore from '../../../stores/RoomViewStore';
 import SettingsStore from "../../../settings/SettingsStore";
 import {_t} from "../../../languageHandler";
+import {RovingTabIndexWrapper} from "../../../accessibility/RovingTabIndex";
+import E2EIcon from './E2EIcon';
+import InviteOnlyIcon from './InviteOnlyIcon';
+// eslint-disable-next-line camelcase
+import rate_limited_func from '../../../ratelimitedfunc';
 
 export default createReactClass({
     displayName: 'RoomTile',
@@ -69,6 +74,7 @@ export default createReactClass({
             notificationCount: this.props.room.getUnreadNotificationCount(),
             selected: this.props.room.roomId === RoomViewStore.getRoomId(),
             statusMessage: this._getStatusMessage(),
+            e2eStatus: null,
         });
     },
 
@@ -101,6 +107,85 @@ export default createReactClass({
         return statusUser._unstable_statusMessage;
     },
 
+    onRoomStateMember: function(ev, state, member) {
+        // we only care about leaving users
+        // because trust state will change if someone joins a megolm session anyway
+        if (member.membership !== "leave") {
+            return;
+        }
+        // ignore members in other rooms
+        if (member.roomId !== this.props.room.roomId) {
+            return;
+        }
+
+        this._updateE2eStatus();
+    },
+
+    onUserVerificationChanged: function(userId, _trustStatus) {
+        if (!this.props.room.getMember(userId)) {
+            // Not in this room
+            return;
+        }
+        this._updateE2eStatus();
+    },
+
+    onRoomTimeline: function(ev, room) {
+        if (!room) return;
+        if (room.roomId != this.props.room.roomId) return;
+        if (ev.getType() !== "m.room.encryption") return;
+        MatrixClientPeg.get().removeListener("Room.timeline", this.onRoomTimeline);
+        this.onFindingRoomToBeEncrypted();
+    },
+
+    onFindingRoomToBeEncrypted: function() {
+        const cli = MatrixClientPeg.get();
+        cli.on("RoomState.members", this.onRoomStateMember);
+        cli.on("userTrustStatusChanged", this.onUserVerificationChanged);
+
+        this._updateE2eStatus();
+    },
+
+    _updateE2eStatus: async function() {
+        const cli = MatrixClientPeg.get();
+        if (!cli.isRoomEncrypted(this.props.room.roomId)) {
+            return;
+        }
+        if (!SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+            return;
+        }
+
+        // Duplication between here and _updateE2eStatus in RoomView
+        const e2eMembers = await this.props.room.getEncryptionTargetMembers();
+        const verified = [];
+        const unverified = [];
+        e2eMembers.map(({userId}) => userId)
+            .filter((userId) => userId !== cli.getUserId())
+            .forEach((userId) => {
+                (cli.checkUserTrust(userId).isCrossSigningVerified() ?
+                verified : unverified).push(userId);
+            });
+
+        /* Check all verified user devices. */
+        /* Don't alarm if no other users are verified  */
+        const targets = (verified.length > 0) ? [...verified, cli.getUserId()] : verified;
+        for (const userId of targets) {
+            const devices = await cli.getStoredDevicesForUser(userId);
+            const allDevicesVerified = devices.every(({deviceId}) => {
+                return cli.checkDeviceTrust(userId, deviceId).isVerified();
+            });
+            if (!allDevicesVerified) {
+                this.setState({
+                    e2eStatus: "warning",
+                });
+                return;
+            }
+        }
+
+        this.setState({
+            e2eStatus: unverified.length === 0 ? "verified" : "normal",
+        });
+    },
+
     onRoomName: function(room) {
         if (room !== this.props.room) return;
         this.setState({
@@ -150,10 +235,19 @@ export default createReactClass({
     },
 
     componentDidMount: function() {
+        /* We bind here rather than in the definition because otherwise we wind up with the
+           method only being callable once every 500ms across all instances, which would be wrong */
+        this._updateE2eStatus = rate_limited_func(this._updateE2eStatus, 500);
+
         const cli = MatrixClientPeg.get();
         cli.on("accountData", this.onAccountData);
         cli.on("Room.name", this.onRoomName);
         cli.on("RoomState.events", this.onJoinRule);
+        if (cli.isRoomEncrypted(this.props.room.roomId)) {
+            this.onFindingRoomToBeEncrypted();
+        } else {
+            cli.on("Room.timeline", this.onRoomTimeline);
+        }
         ActiveRoomObserver.addListener(this.props.room.roomId, this._onActiveRoomChange);
         this.dispatcherRef = dis.register(this.onAction);
 
@@ -171,6 +265,9 @@ export default createReactClass({
             MatrixClientPeg.get().removeListener("accountData", this.onAccountData);
             MatrixClientPeg.get().removeListener("Room.name", this.onRoomName);
             cli.removeListener("RoomState.events", this.onJoinRule);
+            cli.removeListener("RoomState.members", this.onRoomStateMember);
+            cli.removeListener("userTrustStatusChanged", this.onUserVerificationChanged);
+            cli.removeListener("Room.timeline", this.onRoomTimeline);
         }
         ActiveRoomObserver.removeListener(this.props.room.roomId, this._onActiveRoomChange);
         dis.unregister(this.dispatcherRef);
@@ -317,7 +414,6 @@ export default createReactClass({
             'mx_RoomTile_noBadges': !badges,
             'mx_RoomTile_transparent': this.props.transparent,
             'mx_RoomTile_hasSubtext': subtext && !this.props.collapsed,
-            'mx_RoomTile_isPrivate': this.state.joinRule == "invite" && !dmUserId,
         });
 
         const avatarClasses = classNames({
@@ -352,7 +448,8 @@ export default createReactClass({
             });
 
             subtextLabel = subtext ? <span className="mx_RoomTile_subtext">{ subtext }</span> : null;
-            label = <div title={name} className={nameClasses} dir="auto">{ name }</div>;
+            // XXX: this is a workaround for Firefox giving this div a tabstop :( [tabIndex]
+            label = <div title={name} className={nameClasses} tabIndex={-1} dir="auto">{ name }</div>;
         } else if (this.state.hover) {
             const Tooltip = sdk.getComponent("elements.Tooltip");
             tooltip = <Tooltip className="mx_RoomTile_tooltip" label={this.props.room.name} dir="auto" />;
@@ -383,7 +480,9 @@ export default createReactClass({
 
         let dmIndicator;
         let dmOnline;
-        if (dmUserId) {
+        /* Post-cross-signing we don't show DM indicators at all, instead relying on user
+           context to let them know when that is. */
+        if (dmUserId && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
             dmIndicator = <img
                 src={require("../../../../res/img/icon_person.svg")}
                 className="mx_RoomTile_dm"
@@ -391,16 +490,16 @@ export default createReactClass({
                 height="13"
                 alt="dm"
             />;
+        }
 
-            const { room } = this.props;
-            const member = room.getMember(dmUserId);
-            if (
-                member && member.membership === "join" && room.getJoinedMemberCount() === 2 &&
-                SettingsStore.isFeatureEnabled("feature_presence_in_room_list")
-            ) {
-                const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot');
-                dmOnline = <UserOnlineDot userId={dmUserId} />;
-            }
+        const { room } = this.props;
+        const member = room.getMember(dmUserId);
+        if (
+            member && member.membership === "join" && room.getJoinedMemberCount() === 2 &&
+            SettingsStore.isFeatureEnabled("feature_presence_in_room_list")
+        ) {
+            const UserOnlineDot = sdk.getComponent('rooms.UserOnlineDot');
+            dmOnline = <UserOnlineDot userId={dmUserId} />;
         }
 
         // The following labels are written in such a fashion to increase screen reader efficiency (speed).
@@ -428,40 +527,54 @@ export default createReactClass({
 
         let privateIcon = null;
         if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
-            privateIcon = <div className="mx_RoomTile_PrivateIcon" />;
+            if (this.state.joinRule == "invite" && !dmUserId) {
+                privateIcon = <InviteOnlyIcon collapsedPanel={this.props.collapsed} />;
+            }
+        }
+
+        let e2eIcon = null;
+        if (this.state.e2eStatus) {
+            e2eIcon = <E2EIcon status={this.state.e2eStatus} className="mx_RoomTile_e2eIcon" />;
         }
 
         return <React.Fragment>
-            <AccessibleButton
-                tabIndex="0"
-                className={classes}
-                onClick={this.onClick}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-                onContextMenu={this.onContextMenu}
-                aria-label={ariaLabel}
-                aria-selected={this.state.selected}
-                role="treeitem"
-            >
-                <div className={avatarClasses}>
-                    <div className="mx_RoomTile_avatar_container">
-                        <RoomAvatar room={this.props.room} width={24} height={24} />
-                        { dmIndicator }
-                    </div>
-                </div>
-                { privateIcon }
-                <div className="mx_RoomTile_nameContainer">
-                    <div className="mx_RoomTile_labelContainer">
-                        { label }
-                        { subtextLabel }
-                    </div>
-                    { dmOnline }
-                    { contextMenuButton }
-                    { badge }
-                </div>
-                { /* { incomingCallBox } */ }
-                { tooltip }
-            </AccessibleButton>
+            <RovingTabIndexWrapper>
+                {({onFocus, isActive, ref}) =>
+                    <AccessibleButton
+                        onFocus={onFocus}
+                        tabIndex={isActive ? 0 : -1}
+                        inputRef={ref}
+                        className={classes}
+                        onClick={this.onClick}
+                        onMouseEnter={this.onMouseEnter}
+                        onMouseLeave={this.onMouseLeave}
+                        onContextMenu={this.onContextMenu}
+                        aria-label={ariaLabel}
+                        aria-selected={this.state.selected}
+                        role="treeitem"
+                    >
+                        <div className={avatarClasses}>
+                            <div className="mx_RoomTile_avatar_container">
+                                <RoomAvatar room={this.props.room} width={24} height={24} />
+                                { dmIndicator }
+                                { e2eIcon }
+                            </div>
+                        </div>
+                        { privateIcon }
+                        <div className="mx_RoomTile_nameContainer">
+                            <div className="mx_RoomTile_labelContainer">
+                                { label }
+                                { subtextLabel }
+                            </div>
+                            { dmOnline }
+                            { contextMenuButton }
+                            { badge }
+                        </div>
+                        { /* { incomingCallBox } */ }
+                        { tooltip }
+                    </AccessibleButton>
+                }
+            </RovingTabIndexWrapper>
 
             { contextMenu }
         </React.Fragment>;

src/components/views/rooms/SendMessageComposer.js

@@ -24,6 +24,8 @@ import {
     containsEmote,
     stripEmoteCommand,
     unescapeMessage,
+    startsWith,
+    stripPrefix,
 } from '../../../editor/serialize';
 import {CommandPartCreator} from '../../../editor/parts';
 import BasicMessageComposer from "./BasicMessageComposer";
@@ -33,7 +35,7 @@ import ReplyThread from "../elements/ReplyThread";
 import {parseEvent} from '../../../editor/deserialize';
 import {findEditableEvent} from '../../../utils/EventUtils';
 import SendHistoryManager from "../../../SendHistoryManager";
-import {processCommandInput} from '../../../SlashCommands';
+import {getCommand} from '../../../SlashCommands';
 import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import {_t, _td} from '../../../languageHandler';
@@ -56,11 +58,15 @@ function addReplyToMessageContent(content, repliedToEvent, permalinkCreator) {
     }
 }
 
-function createMessageContent(model, permalinkCreator) {
+// exported for tests
+export function createMessageContent(model, permalinkCreator) {
     const isEmote = containsEmote(model);
     if (isEmote) {
         model = stripEmoteCommand(model);
     }
+    if (startsWith(model, "//")) {
+        model = stripPrefix(model, "/");
+    }
     model = unescapeMessage(model);
     const repliedToEvent = RoomViewStore.getQuotingEvent();
 
@@ -175,20 +181,21 @@ export default class SendMessageComposer extends React.Component {
         const parts = this.model.parts;
         const firstPart = parts[0];
         if (firstPart) {
-            if (firstPart.type === "command") {
+            if (firstPart.type === "command" && firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")) {
                 return true;
             }
             // be extra resilient when somehow the AutocompleteWrapperModel or
             // CommandPartCreator fails to insert a command part, so we don't send
             // a command as a message
-            if (firstPart.text.startsWith("/") && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
+            if (firstPart.text.startsWith("/") && !firstPart.text.startsWith("//")
+                && (firstPart.type === "plain" || firstPart.type === "pill-candidate")) {
                 return true;
             }
         }
         return false;
     }
 
-    async _runSlashCommand() {
+    _getSlashCommand() {
         const commandText = this.model.parts.reduce((text, part) => {
             // use mxid to textify user pills in a command
             if (part.type === "user-pill") {
@@ -196,50 +203,86 @@ export default class SendMessageComposer extends React.Component {
             }
             return text + part.text;
         }, "");
-        const cmd = processCommandInput(this.props.room.roomId, commandText);
+        return [getCommand(this.props.room.roomId, commandText), commandText];
+    }
 
-        if (cmd) {
-            let error = cmd.error;
-            if (cmd.promise) {
-                try {
-                    await cmd.promise;
-                } catch (err) {
-                    error = err;
-                }
+    async _runSlashCommand(fn) {
+        const cmd = fn();
+        let error = cmd.error;
+        if (cmd.promise) {
+            try {
+                await cmd.promise;
+            } catch (err) {
+                error = err;
             }
-            if (error) {
-                console.error("Command failure: %s", error);
-                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                // assume the error is a server error when the command is async
-                const isServerError = !!cmd.promise;
-                const title = isServerError ? _td("Server error") : _td("Command error");
+        }
+        if (error) {
+            console.error("Command failure: %s", error);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            // assume the error is a server error when the command is async
+            const isServerError = !!cmd.promise;
+            const title = isServerError ? _td("Server error") : _td("Command error");
 
-                let errText;
-                if (typeof error === 'string') {
-                    errText = error;
-                } else if (error.message) {
-                    errText = error.message;
-                } else {
-                    errText = _t("Server unavailable, overloaded, or something else went wrong.");
-                }
-
-                Modal.createTrackedDialog(title, '', ErrorDialog, {
-                    title: _t(title),
-                    description: errText,
-                });
+            let errText;
+            if (typeof error === 'string') {
+                errText = error;
+            } else if (error.message) {
+                errText = error.message;
             } else {
-                console.log("Command success.");
+                errText = _t("Server unavailable, overloaded, or something else went wrong.");
             }
+
+            Modal.createTrackedDialog(title, '', ErrorDialog, {
+                title: _t(title),
+                description: errText,
+            });
+        } else {
+            console.log("Command success.");
         }
     }
 
-    _sendMessage() {
+    async _sendMessage() {
         if (this.model.isEmpty) {
             return;
         }
+
+        let shouldSend = true;
+
         if (!containsEmote(this.model) && this._isSlashCommand()) {
-            this._runSlashCommand();
-        } else {
+            const [cmd, commandText] = this._getSlashCommand();
+            if (cmd) {
+                shouldSend = false;
+                this._runSlashCommand(cmd);
+            } else {
+                // ask the user if their unknown command should be sent as a message
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                const {finished} = Modal.createTrackedDialog("Unknown command", "", QuestionDialog, {
+                    title: _t("Unknown Command"),
+                    description: <div>
+                        <p>
+                            { _t("Unrecognised command: %(commandText)s", {commandText}) }
+                        </p>
+                        <p>
+                            { _t("You can use <code>/help</code> to list available commands. " +
+                                "Did you mean to send this as a message?", {}, {
+                                code: t => <code>{ t }</code>,
+                            }) }
+                        </p>
+                        <p>
+                            { _t("Hint: Begin your message with <code>//</code> to start it with a slash.", {}, {
+                                code: t => <code>{ t }</code>,
+                            }) }
+                        </p>
+                    </div>,
+                    button: _t('Send as message'),
+                });
+                const [sendAnyway] = await finished;
+                // if !sendAnyway bail to let the user edit the composer and try again
+                if (!sendAnyway) return;
+            }
+        }
+
+        if (shouldSend) {
             const isReply = !!RoomViewStore.getQuotingEvent();
             const {roomId} = this.props.room;
             const content = createMessageContent(this.model, this.props.permalinkCreator);
@@ -253,6 +296,7 @@ export default class SendMessageComposer extends React.Component {
                 });
             }
         }
+
         this.sendHistoryManager.save(this.model);
         // clear composer
         this.model.reset([]);

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -27,6 +27,7 @@ export default createReactClass({
 
     propTypes: {
         onScrollUpClick: PropTypes.func,
+        onCloseClick: PropTypes.func,
     },
 
     render: function() {
@@ -36,6 +37,10 @@ export default createReactClass({
                     title={_t('Jump to first unread message.')}
                     onClick={this.props.onScrollUpClick}>
                 </AccessibleButton>
+                <AccessibleButton className="mx_TopUnreadMessagesBar_markAsRead"
+                    title={_t('Mark all as read')}
+                    onClick={this.props.onCloseClick}>
+                </AccessibleButton>
             </div>
         );
     },

src/components/views/rooms/UserTile.js

@@ -1,53 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as Avatar from '../../../Avatar';
-import * as sdk from "../../../index";
-
-export default createReactClass({
-    displayName: 'UserTile',
-
-    propTypes: {
-        user: PropTypes.any.isRequired, // User
-    },
-
-    render: function() {
-        const EntityTile = sdk.getComponent("rooms.EntityTile");
-        const user = this.props.user;
-        const name = user.displayName || user.userId;
-        let active = -1;
-
-        // FIXME: make presence data update whenever User.presence changes...
-        active = user.lastActiveAgo ?
-            (Date.now() - (user.lastPresenceTs - user.lastActiveAgo)) : -1;
-
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatarJsx = (
-            <BaseAvatar width={36} height={36} name={name} idName={user.userId}
-                        url={Avatar.avatarUrlForUser(user, 36, 36, "crop")} />
-        );
-
-        return (
-            <EntityTile {...this.props} presenceState={user.presence} presenceActiveAgo={active}
-                presenceCurrentlyActive={user.currentlyActive}
-                name={name} title={user.userId} avatarJsx={avatarJsx} />
-        );
-    },
-});

src/components/views/rooms/WhoIsTypingTile.js

@@ -213,7 +213,7 @@ export default createReactClass({
         }
 
         return (
-            <li className="mx_WhoIsTypingTile">
+            <li className="mx_WhoIsTypingTile" aria-atomic="true">
                 <div className="mx_WhoIsTypingTile_avatars">
                     { this._renderTypingIndicatorAvatars(usersTyping, this.props.whoIsTypingLimit) }
                 </div>

src/components/views/settings/BridgeTile.js

@@ -0,0 +1,114 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import {_t} from "../../../languageHandler";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import Pill from "../elements/Pill";
+import {makeUserPermalink} from "../../../utils/permalinks/Permalinks";
+import BaseAvatar from "../avatars/BaseAvatar";
+import AccessibleButton from "../elements/AccessibleButton";
+import {replaceableComponent} from "../../../utils/replaceableComponent";
+
+@replaceableComponent("views.settings.BridgeTile")
+export default class BridgeTile extends React.PureComponent {
+    static propTypes = {
+        ev: PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
+    }
+
+    state = {
+        visible: false,
+    }
+
+    _toggleVisible() {
+        this.setState({
+            visible: !this.state.visible,
+        });
+    }
+
+    render() {
+        const content = this.props.ev.getContent();
+        const { channel, network, protocol } = content;
+        const protocolName = protocol.displayname || protocol.id;
+        const channelName = channel.displayname || channel.id;
+        const networkName = network ? network.displayname || network.id : protocolName;
+
+        let creator = null;
+        if (content.creator) {
+            creator = _t("This bridge was provisioned by <user />.", {}, {
+                    user: <Pill
+                        type={Pill.TYPE_USER_MENTION}
+                        room={this.props.room}
+                        url={makeUserPermalink(content.creator)}
+                        shouldShowPillAvatar={true}
+                    />,
+            });
+        }
+
+        const bot = _t("This bridge is managed by <user />.", {}, {
+            user: <Pill
+                type={Pill.TYPE_USER_MENTION}
+                room={this.props.room}
+                url={makeUserPermalink(this.props.ev.getSender())}
+                shouldShowPillAvatar={true}
+                />,
+        });
+
+        let networkIcon;
+
+        if (protocol.avatar) {
+            const avatarUrl = getHttpUriForMxc(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                protocol.avatar, 64, 64, "crop",
+            );
+
+            networkIcon = <BaseAvatar className="protocol-icon"
+                width={48}
+                height={48}
+                resizeMethod='crop'
+                name={ protocolName }
+                idName={ protocolName }
+                url={ avatarUrl }
+            />;
+        } else {
+            networkIcon = <div class="noProtocolIcon"></div>;
+        }
+
+        const id = this.props.ev.getId();
+        const metadataClassname = "metadata" + (this.state.visible ? " visible" : "");
+        return (<li key={id}>
+            <div className="column-icon">
+                {networkIcon}
+            </div>
+            <div className="column-data">
+                <h3>{protocolName}</h3>
+                <p className="workspace-channel-details">
+                    <span>{_t("Workspace: %(networkName)s", {networkName})}</span>
+                    <span className="channel">{_t("Channel: %(channelName)s", {channelName})}</span>
+                </p>
+                <p className={metadataClassname}>
+                    {creator} {bot}
+                </p>
+                <AccessibleButton className="mx_showMore" kind="secondary" onClick={this._toggleVisible.bind(this)}>
+                    { this.state.visible ? _t("Show less") : _t("Show more") }
+                </AccessibleButton>
+            </div>
+        </li>);
+    }
+}

src/components/views/settings/ChangePassword.js

@@ -113,13 +113,13 @@ export default createReactClass({
             description:
                 <div>
                     { _t(
-                        'Changing password will currently reset any end-to-end encryption keys on all devices, ' +
+                        'Changing password will currently reset any end-to-end encryption keys on all sessions, ' +
                         'making encrypted chat history unreadable, unless you first export your room keys ' +
                         'and re-import them afterwards. ' +
                         'In future this will be improved.',
                     ) }
                     {' '}
-                    <a href="https://github.com/vector-im/riot-web/issues/2671" target="_blank" rel="noopener">
+                    <a href="https://github.com/vector-im/riot-web/issues/2671" target="_blank" rel="noreferrer noopener">
                         https://github.com/vector-im/riot-web/issues/2671
                     </a>
                 </div>,
@@ -253,20 +253,24 @@ export default createReactClass({
                     <form className={this.props.className} onSubmit={this.onClickChange}>
                         { currentPassword }
                         <div className={rowClassName}>
-                            <Field id="mx_ChangePassword_newPassword"
+                            <Field
+                                id="mx_ChangePassword_newPassword"
                                 type="password"
                                 label={passwordLabel}
                                 value={this.state.newPassword}
                                 autoFocus={this.props.autoFocusNewPasswordInput}
                                 onChange={this.onChangeNewPassword}
+                                autoComplete="new-password"
                             />
                         </div>
                         <div className={rowClassName}>
-                            <Field id="mx_ChangePassword_newPasswordConfirm"
+                            <Field
+                                id="mx_ChangePassword_newPasswordConfirm"
                                 type="password"
                                 label={_t("Confirm password")}
                                 value={this.state.newPasswordConfirm}
                                 onChange={this.onChangeNewPasswordConfirm}
+                                autoComplete="new-password"
                             />
                         </div>
                         <AccessibleButton className={buttonClassName} kind={this.props.buttonKind} onClick={this.onClickChange}>

src/components/views/settings/CrossSigningPanel.js

@@ -20,6 +20,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import { accessSecretStorage } from '../../../CrossSigningManager';
+import Modal from '../../../Modal';
 
 export default class CrossSigningPanel extends React.PureComponent {
     constructor(props) {
@@ -71,11 +72,14 @@ export default class CrossSigningPanel extends React.PureComponent {
         const crossSigningPublicKeysOnDevice = crossSigning.getId();
         const crossSigningPrivateKeysInStorage = await crossSigning.isStoredInSecretStorage(secretStorage);
         const secretStorageKeyInAccount = await secretStorage.hasKey();
+        const homeserverSupportsCrossSigning =
+            await cli.doesServerSupportUnstableFeature("org.matrix.e2e_cross_signing");
 
         this.setState({
             crossSigningPublicKeysOnDevice,
             crossSigningPrivateKeysInStorage,
             secretStorageKeyInAccount,
+            homeserverSupportsCrossSigning,
         });
     }
 
@@ -86,11 +90,12 @@ export default class CrossSigningPanel extends React.PureComponent {
      * 2. Access existing secret storage by requesting passphrase and accessing
      *    cross-signing keys as needed.
      * 3. All keys are loaded and there's nothing to do.
+     * @param {bool} [force] Bootstrap again even if keys already present
      */
-    _bootstrapSecureSecretStorage = async () => {
+    _bootstrapSecureSecretStorage = async (force=false) => {
         this.setState({ error: null });
         try {
-            await accessSecretStorage();
+            await accessSecretStorage(() => undefined, force);
         } catch (e) {
             this.setState({ error: e });
             console.error("Error bootstrapping secret storage", e);
@@ -99,6 +104,18 @@ export default class CrossSigningPanel extends React.PureComponent {
         this._getUpdatedStatus();
     }
 
+    onDestroyStorage = (act) => {
+        if (!act) return;
+        this._bootstrapSecureSecretStorage(true);
+    }
+
+    _destroySecureSecretStorage = () => {
+        const ConfirmDestoryCrossSigningDialog = sdk.getComponent("dialogs.ConfirmDestroyCrossSigningDialog");
+        Modal.createDialog(ConfirmDestoryCrossSigningDialog, {
+            onFinished: this.onDestroyStorage,
+        });
+    }
+
     render() {
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
         const {
@@ -106,6 +123,7 @@ export default class CrossSigningPanel extends React.PureComponent {
             crossSigningPublicKeysOnDevice,
             crossSigningPrivateKeysInStorage,
             secretStorageKeyInAccount,
+            homeserverSupportsCrossSigning,
         } = this.state;
 
         let errorSection;
@@ -113,21 +131,26 @@ export default class CrossSigningPanel extends React.PureComponent {
             errorSection = <div className="error">{error.toString()}</div>;
         }
 
-        const enabled = (
-            crossSigningPublicKeysOnDevice &&
+        // Whether the various keys exist on your account (but not necessarily
+        // on this device).
+        const enabledForAccount = (
             crossSigningPrivateKeysInStorage &&
             secretStorageKeyInAccount
         );
 
         let summarisedStatus;
-        if (enabled) {
+        if (!homeserverSupportsCrossSigning) {
+            summarisedStatus = <p>{_t(
+                "Your homeserver does not support cross-signing.",
+            )}</p>;
+        } else if (enabledForAccount && crossSigningPublicKeysOnDevice) {
             summarisedStatus = <p>✅ {_t(
                 "Cross-signing and secret storage are enabled.",
             )}</p>;
         } else if (crossSigningPrivateKeysInStorage) {
             summarisedStatus = <p>{_t(
                 "Your account has a cross-signing identity in secret storage, but it " +
-                "is not yet trusted by this device.",
+                "is not yet trusted by this session.",
             )}</p>;
         } else {
             summarisedStatus = <p>{_t(
@@ -135,13 +158,28 @@ export default class CrossSigningPanel extends React.PureComponent {
             )}</p>;
         }
 
+        let resetButton;
+        if (enabledForAccount) {
+            resetButton = (
+                <div className="mx_CrossSigningPanel_buttonRow">
+                    <AccessibleButton kind="danger" onClick={this._destroySecureSecretStorage}>
+                        {_t("Reset cross-signing and secret storage")}
+                    </AccessibleButton>
+                </div>
+            );
+        }
         let bootstrapButton;
-        if (!enabled) {
-            bootstrapButton = <div className="mx_CrossSigningPanel_buttonRow">
-                <AccessibleButton kind="primary" onClick={this._bootstrapSecureSecretStorage}>
-                    {_t("Bootstrap cross-signing and secret storage")}
-                </AccessibleButton>
-            </div>;
+        if (
+            (!enabledForAccount || !crossSigningPublicKeysOnDevice) &&
+            homeserverSupportsCrossSigning
+        ) {
+            bootstrapButton = (
+                <div className="mx_CrossSigningPanel_buttonRow">
+                    <AccessibleButton kind="primary" onClick={this._bootstrapSecureSecretStorage}>
+                        {_t("Bootstrap cross-signing and secret storage")}
+                    </AccessibleButton>
+                </div>
+            );
         }
 
         return (
@@ -152,7 +190,7 @@ export default class CrossSigningPanel extends React.PureComponent {
                     <table className="mx_CrossSigningPanel_statusList"><tbody>
                         <tr>
                             <td>{_t("Cross-signing public keys:")}</td>
-                            <td>{crossSigningPublicKeysOnDevice ? _t("on device") : _t("not found")}</td>
+                            <td>{crossSigningPublicKeysOnDevice ? _t("in memory") : _t("not found")}</td>
                         </tr>
                         <tr>
                             <td>{_t("Cross-signing private keys:")}</td>
@@ -162,10 +200,15 @@ export default class CrossSigningPanel extends React.PureComponent {
                             <td>{_t("Secret storage public key:")}</td>
                             <td>{secretStorageKeyInAccount ? _t("in account data") : _t("not found")}</td>
                         </tr>
-                    </tbody></table>
+                        <tr>
+                            <td>{_t("Homeserver feature support:")}</td>
+                            <td>{homeserverSupportsCrossSigning ? _t("exists") : _t("not found")}</td>
+                        </tr>
+                   </tbody></table>
                 </details>
                 {errorSection}
                 {bootstrapButton}
+                {resetButton}
             </div>
         );
     }

src/components/views/settings/DevicesPanel.js

@@ -62,10 +62,10 @@ export default class DevicesPanel extends React.Component {
                 let errtxt;
                 if (error.httpStatus == 404) {
                     // 404 probably means the HS doesn't yet support the API.
-                    errtxt = _t("Your homeserver does not support device management.");
+                    errtxt = _t("Your homeserver does not support session management.");
                 } else {
-                    console.error("Error loading devices:", error);
-                    errtxt = _t("Unable to load device list");
+                    console.error("Error loading sessions:", error);
+                    errtxt = _t("Unable to load session list");
                 }
                 this.setState({deviceLoadError: errtxt});
             },
@@ -130,7 +130,7 @@ export default class DevicesPanel extends React.Component {
                 makeRequest: this._makeDeleteRequest.bind(this),
             });
         }).catch((e) => {
-            console.error("Error deleting devices", e);
+            console.error("Error deleting sessions", e);
             if (this._unmounted) { return; }
         }).finally(() => {
             this.setState({
@@ -188,7 +188,7 @@ export default class DevicesPanel extends React.Component {
         const deleteButton = this.state.deleting ?
             <Spinner w={22} h={22} /> :
             <AccessibleButton onClick={this._onDeleteClick} kind="danger_sm">
-               { _t("Delete %(count)s devices", {count: this.state.selectedDevices.length}) }
+               { _t("Delete %(count)s sessions", {count: this.state.selectedDevices.length}) }
             </AccessibleButton>;
 
         const classes = classNames(this.props.className, "mx_DevicesPanel");

src/components/views/settings/DevicesPanelEntry.js

@@ -40,7 +40,7 @@ export default class DevicesPanelEntry extends React.Component {
         return MatrixClientPeg.get().setDeviceDetails(device.device_id, {
             display_name: value,
         }).catch((e) => {
-            console.error("Error setting device display name", e);
+            console.error("Error setting session display name", e);
             throw new Error(_t("Failed to set display name"));
         });
     }

src/components/views/settings/EventIndexPanel.js

@@ -0,0 +1,201 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+
+import { _t } from '../../../languageHandler';
+import * as sdk from '../../../index';
+import Modal from '../../../Modal';
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import AccessibleButton from "../elements/AccessibleButton";
+import {formatBytes, formatCountLong} from "../../../utils/FormattingUtils";
+import EventIndexPeg from "../../../indexing/EventIndexPeg";
+
+export default class EventIndexPanel extends React.Component {
+    constructor() {
+        super();
+
+        this.state = {
+            enabling: false,
+            eventIndexSize: 0,
+            roomCount: 0,
+            eventIndexingEnabled:
+                SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableEventIndexing'),
+        };
+    }
+
+    updateCurrentRoom = async (room) => {
+        const eventIndex = EventIndexPeg.get();
+        let stats;
+
+        try {
+            stats = await eventIndex.getStats();
+        } catch {
+            // This call may fail if sporadically, not a huge issue as we will
+            // try later again and probably succeed.
+            return;
+        }
+
+        this.setState({
+            eventIndexSize: stats.size,
+            roomCount: stats.roomCount,
+        });
+    };
+
+    componentWillUnmount(): void {
+        const eventIndex = EventIndexPeg.get();
+
+        if (eventIndex !== null) {
+            eventIndex.removeListener("changedCheckpoint", this.updateCurrentRoom);
+        }
+    }
+
+    async componentWillMount(): void {
+        this.updateState();
+    }
+
+    async updateState() {
+        const eventIndex = EventIndexPeg.get();
+        const eventIndexingEnabled = SettingsStore.getValueAt(SettingLevel.DEVICE, 'enableEventIndexing');
+        const enabling = false;
+
+        let eventIndexSize = 0;
+        let roomCount = 0;
+
+        if (eventIndex !== null) {
+            eventIndex.on("changedCheckpoint", this.updateCurrentRoom);
+
+            try {
+                const stats = await eventIndex.getStats();
+                eventIndexSize = stats.size;
+                roomCount = stats.roomCount;
+            } catch {
+                // This call may fail if sporadically, not a huge issue as we
+                // will try later again in the updateCurrentRoom call and
+                // probably succeed.
+            }
+        }
+
+        this.setState({
+            enabling,
+            eventIndexSize,
+            roomCount,
+            eventIndexingEnabled,
+        });
+    }
+
+    _onManage = async () => {
+        Modal.createTrackedDialogAsync('Message search', 'Message search',
+            import('../../../async-components/views/dialogs/eventindex/ManageEventIndexDialog'),
+            {
+                onFinished: () => {},
+            }, null, /* priority = */ false, /* static = */ true,
+        );
+    }
+
+    _onEnable = async () => {
+        this.setState({
+            enabling: true,
+        });
+
+        await EventIndexPeg.initEventIndex();
+        await EventIndexPeg.get().addInitialCheckpoints();
+        await EventIndexPeg.get().startCrawler();
+        await SettingsStore.setValue('enableEventIndexing', null, SettingLevel.DEVICE, true);
+        await this.updateState();
+    }
+
+    render() {
+        let eventIndexingSettings = null;
+        const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+
+        if (EventIndexPeg.get() !== null) {
+            eventIndexingSettings = (
+                <div>
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t( "Securely cache encrypted messages locally for them " +
+                             "to appear in search results, using ")
+                        } {formatBytes(this.state.eventIndexSize, 0)}
+                        {_t( " to store messages from ")}
+                        {formatCountLong(this.state.roomCount)} {_t("rooms.")}
+                    </div>
+                    <div>
+                        <AccessibleButton kind="primary" onClick={this._onManage}>
+                            {_t("Manage")}
+                        </AccessibleButton>
+                    </div>
+                </div>
+            );
+        } else if (!this.state.eventIndexingEnabled && EventIndexPeg.supportIsInstalled()) {
+            eventIndexingSettings = (
+                <div>
+                    <div className='mx_SettingsTab_subsectionText'>
+                        {_t( "Securely cache encrypted messages locally for them to " +
+                             "appear in search results.")}
+                    </div>
+                    <div>
+                        <AccessibleButton kind="primary" disabled={this.state.enabling}
+                            onClick={this._onEnable}>
+                            {_t("Enable")}
+                        </AccessibleButton>
+                        {this.state.enabling ? <InlineSpinner /> : <div />}
+                    </div>
+                </div>
+            );
+        } else if (EventIndexPeg.platformHasSupport() && !EventIndexPeg.supportIsInstalled()) {
+            const nativeLink = (
+                "https://github.com/vector-im/riot-web/blob/develop/" +
+                "docs/native-node-modules.md#" +
+                "adding-seshat-for-search-in-e2e-encrypted-rooms"
+            );
+
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot is missing some components required for securely " +
+                            "caching encrypted messages locally. If you'd like to " +
+                            "experiment with this feature, build a custom Riot Desktop " +
+                            "with <nativeLink>search components added</nativeLink>.",
+                            {},
+                            {
+                                'nativeLink': (sub) => <a href={nativeLink} target="_blank"
+                                    rel="noreferrer noopener">{sub}</a>,
+                            },
+                        )
+                    }
+                </div>
+            );
+        } else {
+            eventIndexingSettings = (
+                <div>
+                    {
+                        _t( "Riot can't securely cache encrypted messages locally " +
+                            "while running in a web browser. Use <riotLink>Riot Desktop</riotLink> " +
+                            "for encrypted messages to appear in search results.",
+                            {},
+                            {
+                                'riotLink': (sub) => <a href="https://riot.im/download/desktop"
+                                    target="_blank" rel="noreferrer noopener">{sub}</a>,
+                            },
+                        )
+                    }
+                </div>
+            );
+        }
+
+        return eventIndexingSettings;
+    }
+}

src/components/views/settings/KeyBackupPanel.js

@@ -127,7 +127,6 @@ export default class KeyBackupPanel extends React.PureComponent {
         Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
             import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
             {
-                secureSecretStorage: SettingsStore.isFeatureEnabled("feature_cross_signing"),
                 onFinished: () => {
                     this._loadBackupStatus();
                 },
@@ -186,23 +185,23 @@ export default class KeyBackupPanel extends React.PureComponent {
             if (MatrixClientPeg.get().getKeyBackupEnabled()) {
                 clientBackupStatus = <div>
                     <p>{encryptedMessageAreEncrypted}</p>
-                    <p>✅ {_t("This device is backing up your keys. ")}</p>
+                    <p>✅ {_t("This session is backing up your keys. ")}</p>
                 </div>;
             } else {
                 clientBackupStatus = <div>
                     <p>{encryptedMessageAreEncrypted}</p>
                     <p>{_t(
-                        "This device is <b>not backing up your keys</b>, " +
+                        "This session is <b>not backing up your keys</b>, " +
                         "but you do have an existing backup you can restore from " +
                         "and add to going forward.", {},
                         {b: sub => <b>{sub}</b>},
                     )}</p>
                     <p>{_t(
-                        "Connect this device to key backup before signing out to avoid " +
-                        "losing any keys that may only be on this device.",
+                        "Connect this session to key backup before signing out to avoid " +
+                        "losing any keys that may only be on this session.",
                     )}</p>
                 </div>;
-                restoreButtonCaption = _t("Connect this device to Key Backup");
+                restoreButtonCaption = _t("Connect this session to Key Backup");
             }
 
             let keyStatus;
@@ -264,42 +263,42 @@ export default class KeyBackupPanel extends React.PureComponent {
                     );
                 } else if (!sig.device) {
                     sigStatus = _t(
-                        "Backup has a signature from <verify>unknown</verify> device with ID %(deviceId)s",
+                        "Backup has a signature from <verify>unknown</verify> session with ID %(deviceId)s",
                         { deviceId: sig.deviceId }, { verify },
                     );
                 } else if (sig.valid && fromThisDevice) {
                     sigStatus = _t(
-                        "Backup has a <validity>valid</validity> signature from this device",
+                        "Backup has a <validity>valid</validity> signature from this session",
                         {}, { validity },
                     );
                 } else if (!sig.valid && fromThisDevice) {
                     // it can happen...
                     sigStatus = _t(
-                        "Backup has an <validity>invalid</validity> signature from this device",
+                        "Backup has an <validity>invalid</validity> signature from this session",
                         {}, { validity },
                     );
                 } else if (sig.valid && sig.device.isVerified()) {
                     sigStatus = _t(
                         "Backup has a <validity>valid</validity> signature from " +
-                        "<verify>verified</verify> device <device></device>",
+                        "<verify>verified</verify> session <device></device>",
                         {}, { validity, verify, device },
                     );
                 } else if (sig.valid && !sig.device.isVerified()) {
                     sigStatus = _t(
                         "Backup has a <validity>valid</validity> signature from " +
-                        "<verify>unverified</verify> device <device></device>",
+                        "<verify>unverified</verify> session <device></device>",
                         {}, { validity, verify, device },
                     );
                 } else if (!sig.valid && sig.device.isVerified()) {
                     sigStatus = _t(
                         "Backup has an <validity>invalid</validity> signature from " +
-                        "<verify>verified</verify> device <device></device>",
+                        "<verify>verified</verify> session <device></device>",
                         {}, { validity, verify, device },
                     );
                 } else if (!sig.valid && !sig.device.isVerified()) {
                     sigStatus = _t(
                         "Backup has an <validity>invalid</validity> signature from " +
-                        "<verify>unverified</verify> device <device></device>",
+                        "<verify>unverified</verify> session <device></device>",
                         {}, { validity, verify, device },
                     );
                 }
@@ -309,12 +308,12 @@ export default class KeyBackupPanel extends React.PureComponent {
                 </div>;
             });
             if (this.state.backupSigStatus.sigs.length === 0) {
-                backupSigStatuses = _t("Backup is not signed by any of your devices");
+                backupSigStatuses = _t("Backup is not signed by any of your sessions");
             }
 
             let trustedLocally;
             if (this.state.backupSigStatus.trusted_locally) {
-                trustedLocally = _t("This backup is trusted because it has been restored on this device");
+                trustedLocally = _t("This backup is trusted because it has been restored on this session");
             }
 
             let buttonRow = (
@@ -330,7 +329,7 @@ export default class KeyBackupPanel extends React.PureComponent {
             if (this.state.backupKeyStored && !SettingsStore.isFeatureEnabled("feature_cross_signing")) {
                 buttonRow = <p>⚠️ {_t(
                     "Backup key stored in secret storage, but this feature is not " +
-                    "enabled on this device. Please enable cross-signing in Labs to " +
+                    "enabled on this session. Please enable cross-signing in Labs to " +
                     "modify key backup state.",
                 )}</p>;
             }
@@ -352,7 +351,7 @@ export default class KeyBackupPanel extends React.PureComponent {
             return <div>
                 <div>
                     <p>{_t(
-                        "Your keys are <b>not being backed up from this device</b>.", {},
+                        "Your keys are <b>not being backed up from this session</b>.", {},
                         {b: sub => <b>{sub}</b>},
                     )}</p>
                     <p>{encryptedMessageAreEncrypted}</p>

src/components/views/settings/Notifications.js

@@ -864,7 +864,7 @@ export default createReactClass({
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationsEnabled")}
                                           onChange={this.onEnableDesktopNotificationsChange}
-                                          label={_t('Enable desktop notifications for this device')} />
+                                          label={_t('Enable desktop notifications for this session')} />
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("notificationBodyEnabled")}
                                           onChange={this.onEnableDesktopNotificationBodyChange}
@@ -872,7 +872,7 @@ export default createReactClass({
 
                     <LabelledToggleSwitch value={SettingsStore.getValue("audioNotificationsEnabled")}
                                           onChange={this.onEnableAudioNotificationsChange}
-                                          label={_t('Enable audible notifications for this device')} />
+                                          label={_t('Enable audible notifications for this session')} />
 
                     { emailNotificationsRows }
 

src/components/views/settings/ProfileSettings.js

@@ -132,10 +132,10 @@ export default class ProfileSettings extends React.Component {
                 {_t(
                     "<a>Upgrade</a> to your own domain", {},
                     {
-                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener">{sub}</a>,
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">{sub}</a>,
                     },
                 )}
-                <a href={hostingSignupLink} target="_blank" rel="noopener">
+                <a href={hostingSignupLink} target="_blank" rel="noreferrer noopener">
                     <img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
                 </a>
             </span>;

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

@@ -18,16 +18,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../../../languageHandler";
 import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
-import Pill from "../../../elements/Pill";
-import {makeUserPermalink} from "../../../../../utils/permalinks/Permalinks";
-import BaseAvatar from "../../../avatars/BaseAvatar";
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
+import BridgeTile from "../../BridgeTile";
 
 const BRIDGE_EVENT_TYPES = [
     "uk.half-shot.bridge",
     // m.bridge
 ];
 
+const BRIDGES_LINK = "https://matrix.org/bridges/";
+
 export default class BridgeSettingsTab extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
@@ -38,99 +37,7 @@ export default class BridgeSettingsTab extends React.Component {
         if (!content || !content.channel || !content.protocol) {
             return null;
         }
-        const { channel, network } = content;
-        const protocolName = content.protocol.displayname || content.protocol.id;
-        const channelName = channel.displayname || channel.id;
-        const networkName = network ? network.displayname || network.id : protocolName;
-
-        let creator = null;
-        if (content.creator) {
-            creator = <p> { _t("This bridge was provisioned by <user />", {}, {
-                    user: <Pill
-                        type={Pill.TYPE_USER_MENTION}
-                        room={room}
-                        url={makeUserPermalink(content.creator)}
-                        shouldShowPillAvatar={true}
-                    />,
-                })}</p>;
-        }
-
-        const bot = (<p> {_t("This bridge is managed by <user />.", {}, {
-            user: <Pill
-                type={Pill.TYPE_USER_MENTION}
-                room={room}
-                url={makeUserPermalink(event.getSender())}
-                shouldShowPillAvatar={true}
-                />,
-        })} </p>);
-        let channelLink = channelName;
-        if (channel.external_url) {
-            channelLink = <a target="_blank" href={channel.external_url} rel="noopener">{channelName}</a>;
-        }
-
-        let networkLink = networkName;
-        if (network && network.external_url) {
-            networkLink = <a target="_blank" href={network.external_url} rel="noopener">{networkName}</a>;
-        }
-
-        const chanAndNetworkInfo = (
-            _t("Bridged into <channelLink /> <networkLink />, on <protocolName />", {}, {
-                channelLink,
-                networkLink,
-                protocolName,
-            })
-        );
-
-        let networkIcon = null;
-        if (networkName && network.avatar) {
-            const avatarUrl = getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                network.avatar, 32, 32, "crop",
-            );
-            networkIcon = <BaseAvatar
-                width={32}
-                height={32}
-                resizeMethod='crop'
-                name={ networkName }
-                idName={ networkName }
-                url={ avatarUrl }
-            />;
-        }
-
-        let channelIcon = null;
-        if (channel.avatar) {
-            const avatarUrl = getHttpUriForMxc(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                channel.avatar, 32, 32, "crop",
-            );
-            channelIcon = <BaseAvatar
-                width={32}
-                height={32}
-                resizeMethod='crop'
-                name={ networkName }
-                idName={ networkName }
-                url={ avatarUrl }
-            />;
-        }
-
-        const heading = _t("Connected to <channelIcon /> <channelName /> on <networkIcon /> <networkName />", { }, {
-            channelIcon,
-            channelName,
-            networkName,
-            networkIcon,
-        });
-
-        return (<li key={event.stateKey}>
-            <div>
-                <h3>{heading}</h3>
-                <p>{_t("Connected via %(protocolName)s", { protocolName })}</p>
-                <details>
-                    {creator}
-                    {bot}
-                    <p>{chanAndNetworkInfo}</p>
-                </details>
-            </div>
-        </li>);
+        return <BridgeTile room={room} ev={event}></BridgeTile>;
     }
 
     static getBridgeStateEvents(roomId) {
@@ -151,14 +58,40 @@ export default class BridgeSettingsTab extends React.Component {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
 
+        let content = null;
+
+        if (bridgeEvents.length > 0) {
+            content = <div>
+                <p>{_t(
+                    "This room is bridging messages to the following platforms. " +
+                    "<a>Learn more.</a>", {},
+                    {
+                        // TODO: We don't have this link yet: this will prevent the translators
+                        // having to re-translate the string when we do.
+                        a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noreferrer noopener">{sub}</a>,
+                    },
+                )}</p>
+                <ul className="mx_RoomSettingsDialog_BridgeList">
+                    { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
+                </ul>
+            </div>;
+        } else {
+            content = <p>{_t(
+                "This room isn’t bridging messages to any platforms. " +
+                "<a>Learn more.</a>", {},
+                {
+                    // TODO: We don't have this link yet: this will prevent the translators
+                    // having to re-translate the string when we do.
+                    a: sub => <a href={BRIDGES_LINK} target="_blank" rel="noreferrer noopener">{sub}</a>,
+                },
+            )}</p>;
+        }
+
         return (
             <div className="mx_SettingsTab">
-                <div className="mx_SettingsTab_heading">{_t("Bridge Info")}</div>
+                <div className="mx_SettingsTab_heading">{_t("Bridges")}</div>
                 <div className='mx_SettingsTab_section mx_SettingsTab_subsectionText'>
-                    <p>{ _t("Below is a list of bridges connected to this room.") }</p>
-                    <ul className="mx_RoomSettingsDialog_BridgeList">
-                        { bridgeEvents.map((event) => this._renderBridgeCard(event, room)) }
-                    </ul>
+                    {content}
                 </div>
             </div>
         );

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

@@ -107,20 +107,20 @@ export default class RolesRoomSettingsTab extends React.Component {
     };
 
     componentDidMount(): void {
-        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership.bind(this));
+        MatrixClientPeg.get().on("RoomState.members", this._onRoomMembership);
     }
 
     componentWillUnmount(): void {
         const client = MatrixClientPeg.get();
         if (client) {
-            client.removeListener("RoomState.members", this._onRoomMembership.bind(this));
+            client.removeListener("RoomState.members", this._onRoomMembership);
         }
     }
 
-    _onRoomMembership(event, state, member) {
+    _onRoomMembership = (event, state, member) => {
         if (state.roomId !== this.props.roomId) return;
         this.forceUpdate();
-    }
+    };
 
     _populateDefaultPlEvents(eventsSection, stateLevel, eventsLevel) {
         for (const desiredEvent of Object.keys(plEventsToShow)) {

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

@@ -36,11 +36,12 @@ export default class SecurityRoomSettingsTab extends React.Component {
             joinRule: "invite",
             guestAccess: "can_join",
             history: "shared",
+            hasAliases: false,
             encrypted: false,
         };
     }
 
-    componentWillMount(): void {
+    async componentWillMount(): void {
         MatrixClientPeg.get().on("RoomState.events", this._onStateEvent);
 
         const room = MatrixClientPeg.get().getRoom(this.props.roomId);
@@ -63,6 +64,8 @@ export default class SecurityRoomSettingsTab extends React.Component {
         );
         const encrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.roomId);
         this.setState({joinRule, guestAccess, history, encrypted});
+        const hasAliases = await this._hasAliases();
+        this.setState({hasAliases});
     }
 
     _pullContentPropertyFromEvent(event, key, defaultValue) {
@@ -94,7 +97,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
                 {},
                 {
                     'a': (sub) => {
-                        return <a rel='noopener' target='_blank'
+                        return <a rel='noreferrer noopener' target='_blank'
                                   href='https://about.riot.im/help#end-to-end-encryption'>{sub}</a>;
                     },
                 },
@@ -201,13 +204,25 @@ export default class SecurityRoomSettingsTab extends React.Component {
         MatrixClientPeg.get().getRoom(this.props.roomId).setBlacklistUnverifiedDevices(checked);
     };
 
+    async _hasAliases() {
+        const cli = MatrixClientPeg.get();
+        if (await cli.doesServerSupportUnstableFeature("org.matrix.msc2432")) {
+            const response = await cli.unstableGetLocalAliases(this.props.roomId);
+            const localAliases = response.aliases;
+            return Array.isArray(localAliases) && localAliases.length !== 0;
+        } else {
+            const room = cli.getRoom(this.props.roomId);
+            const aliasEvents = room.currentState.getStateEvents("m.room.aliases") || [];
+            const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
+            return hasAliases;
+        }
+    }
+
     _renderRoomAccess() {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(this.props.roomId);
         const joinRule = this.state.joinRule;
         const guestAccess = this.state.guestAccess;
-        const aliasEvents = room.currentState.getStateEvents("m.room.aliases") || [];
-        const hasAliases = !!aliasEvents.find((ev) => (ev.getContent().aliases || []).length > 0);
 
         const canChangeAccess = room.currentState.mayClientSendStateEvent("m.room.join_rules", client)
             && room.currentState.mayClientSendStateEvent("m.room.guest_access", client);
@@ -226,7 +241,7 @@ export default class SecurityRoomSettingsTab extends React.Component {
         }
 
         let aliasWarning = null;
-        if (joinRule === 'public' && !hasAliases) {
+        if (joinRule === 'public' && !this.state.hasAliases) {
             aliasWarning = (
                 <div className='mx_SecurityRoomSettingsTab_warning'>
                     <img src={require("../../../../../../res/img/warning.svg")} width={15} height={15} />

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

@@ -70,7 +70,16 @@ export default class GeneralUserSettingsTab extends React.Component {
         const cli = MatrixClientPeg.get();
 
         const serverSupportsSeparateAddAndBind = await cli.doesServerSupportSeparateAddAndBind();
-        this.setState({serverSupportsSeparateAddAndBind});
+
+        const capabilities = await cli.getCapabilities(); // this is cached
+        const changePasswordCap = capabilities['m.change_password'];
+
+        // You can change your password so long as the capability isn't explicitly disabled. The implicit
+        // behaviour is you can change your password when the capability is missing or has not-false as
+        // the enabled flag value.
+        const canChangePassword = !changePasswordCap || changePasswordCap['enabled'] !== false;
+
+        this.setState({serverSupportsSeparateAddAndBind, canChangePassword});
 
         this._getThreepidState();
     }
@@ -252,7 +261,7 @@ export default class GeneralUserSettingsTab extends React.Component {
             title: _t("Success"),
             description: _t(
                 "Your password was successfully changed. You will not receive " +
-                "push notifications on other devices until you log back in to them",
+                "push notifications on other sessions until you log back in to them",
             ) + ".",
         });
     };
@@ -280,7 +289,7 @@ export default class GeneralUserSettingsTab extends React.Component {
         const PhoneNumbers = sdk.getComponent("views.settings.account.PhoneNumbers");
         const Spinner = sdk.getComponent("views.elements.Spinner");
 
-        const passwordChangeForm = (
+        let passwordChangeForm = (
             <ChangePassword
                 className="mx_GeneralUserSettingsTab_changePassword"
                 rowClassName=""
@@ -314,11 +323,18 @@ export default class GeneralUserSettingsTab extends React.Component {
             threepidSection = <Spinner />;
         }
 
+        let passwordChangeText = _t("Set a new account password...");
+        if (!this.state.canChangePassword) {
+            // Just don't show anything if you can't do anything.
+            passwordChangeText = null;
+            passwordChangeForm = null;
+        }
+
         return (
             <div className="mx_SettingsTab_section mx_GeneralUserSettingsTab_accountSection">
                 <span className="mx_SettingsTab_subheading">{_t("Account")}</span>
                 <p className="mx_SettingsTab_subsectionText">
-                    {_t("Set a new account password...")}
+                    {passwordChangeText}
                 </p>
                 {passwordChangeForm}
                 {threepidSection}

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

@@ -21,15 +21,10 @@ import {MatrixClientPeg} from "../../../../../MatrixClientPeg";
 import AccessibleButton from "../../../elements/AccessibleButton";
 import SdkConfig from "../../../../../SdkConfig";
 import createRoom from "../../../../../createRoom";
-import packageJson from "../../../../../../package.json";
 import Modal from "../../../../../Modal";
 import * as sdk from "../../../../../";
 import PlatformPeg from "../../../../../PlatformPeg";
 
-// if this looks like a release, use the 'version' from package.json; else use
-// the git sha. Prepend version with v, to look like riot-web version
-const REACT_SDK_VERSION = 'dist' in packageJson ? packageJson.version : packageJson.gitHead || '<local>';
-
 // Simple method to help prettify GH Release Tags and Commit Hashes.
 const semVerRegex = /^v?(\d+\.\d+\.\d+(?:-rc.+)?)(?:-(?:\d+-g)?([0-9a-fA-F]+))?(?:-dirty)?$/i;
 const ghVersionLabel = function(repo, token='') {
@@ -42,7 +37,7 @@ const ghVersionLabel = function(repo, token='') {
     } else {
         url = `https://github.com/${repo}/commit/${token.split('-')[0]}`;
     }
-    return <a target="_blank" rel="noopener" href={url}>{ token }</a>;
+    return <a target="_blank" rel="noreferrer noopener" href={url}>{ token }</a>;
 };
 
 export default class HelpUserSettingsTab extends React.Component {
@@ -115,7 +110,7 @@ export default class HelpUserSettingsTab extends React.Component {
         const legalLinks = [];
         for (const tocEntry of SdkConfig.get().terms_and_conditions_links) {
             legalLinks.push(<div key={tocEntry.url}>
-                <a href={tocEntry.url} rel="noopener" target="_blank">{tocEntry.text}</a>
+                <a href={tocEntry.url} rel="noreferrer noopener" target="_blank">{tocEntry.text}</a>
             </div>);
         }
 
@@ -137,27 +132,27 @@ export default class HelpUserSettingsTab extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Credits")}</span>
                 <ul>
                     <li>
-                        The <a href="themes/riot/img/backgrounds/valley.jpg" rel="noopener" target="_blank">
+                        The <a href="themes/riot/img/backgrounds/valley.jpg" rel="noreferrer noopener" target="_blank">
                         default cover photo</a> is ©&nbsp;
-                        <a href="https://www.flickr.com/golan" rel="noopener" target="_blank">Jesús Roncero</a>{' '}
+                        <a href="https://www.flickr.com/golan" rel="noreferrer noopener" target="_blank">Jesús Roncero</a>{' '}
                         used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noopener" target="_blank">
+                        <a href="https://creativecommons.org/licenses/by-sa/4.0/" rel="noreferrer noopener" target="_blank">
                         CC-BY-SA 4.0</a>.
                     </li>
                     <li>
-                        The <a href="https://github.com/matrix-org/twemoji-colr" rel="noopener" target="_blank">
-                        twemoji-colr</a> font is ©&nbsp;
-                        <a href="https://mozilla.org" rel="noopener" target="_blank">Mozilla Foundation</a>{' '}
+                        The <a href="https://github.com/matrix-org/twemoji-colr" rel="noreferrer noopener"
+                               target="_blank"> twemoji-colr</a> font is ©&nbsp;
+                        <a href="https://mozilla.org" rel="noreferrer noopener" target="_blank">Mozilla Foundation</a>{' '}
                         used under the terms of&nbsp;
-                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noopener" target="_blank">
+                        <a href="http://www.apache.org/licenses/LICENSE-2.0" rel="noreferrer noopener" target="_blank">
                         Apache 2.0</a>.
                     </li>
                     <li>
-                        The <a href="https://twemoji.twitter.com/" rel="noopener" target="_blank">
+                        The <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">
                         Twemoji</a> emoji art is ©&nbsp;
-                        <a href="https://twemoji.twitter.com/" rel="noopener" target="_blank">Twitter, Inc and other
+                        <a href="https://twemoji.twitter.com/" rel="noreferrer noopener" target="_blank">Twitter, Inc and other
                         contributors</a> used under the terms of&nbsp;
-                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noopener" target="_blank">
+                        <a href="https://creativecommons.org/licenses/by/4.0/" rel="noreferrer noopener" target="_blank">
                         CC-BY 4.0</a>.
                     </li>
                 </ul>
@@ -167,7 +162,8 @@ export default class HelpUserSettingsTab extends React.Component {
 
     render() {
         let faqText = _t('For help with using Riot, click <a>here</a>.', {}, {
-            'a': (sub) => <a href="https://about.riot.im/need-help/" rel='noopener' target='_blank'>{sub}</a>,
+            'a': (sub) =>
+                <a href="https://about.riot.im/need-help/" rel="noreferrer noopener" target="_blank">{sub}</a>,
         });
         if (SdkConfig.get().welcomeUserId && getCurrentLanguage().startsWith('en')) {
             faqText = (
@@ -175,7 +171,7 @@ export default class HelpUserSettingsTab extends React.Component {
                     {
                         _t('For help with using Riot, click <a>here</a> or start a chat with our ' +
                             'bot using the button below.', {}, {
-                            'a': (sub) => <a href="https://about.riot.im/need-help/" rel='noopener'
+                            'a': (sub) => <a href="https://about.riot.im/need-help/" rel='noreferrer noopener'
                                              target='_blank'>{sub}</a>,
                         })
                     }
@@ -188,9 +184,6 @@ export default class HelpUserSettingsTab extends React.Component {
             );
         }
 
-        const reactSdkVersion = REACT_SDK_VERSION !== '<local>'
-            ? ghVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION)
-            : REACT_SDK_VERSION;
         const vectorVersion = this.state.vectorVersion
             ? ghVersionLabel('vector-im/riot-web', this.state.vectorVersion)
             : 'unknown';
@@ -232,6 +225,15 @@ export default class HelpUserSettingsTab extends React.Component {
                                 {_t("Clear cache and reload")}
                             </AccessibleButton>
                         </div>
+                        {
+                            _t( "To report a Matrix-related security issue, please read the Matrix.org " +
+                                "<a>Security Disclosure Policy</a>.", {},
+                                {
+                                    'a': (sub) =>
+                                        <a href="https://matrix.org/security-disclosure-policy/"
+                                        rel="noreferrer noopener" target="_blank">{sub}</a>,
+                                })
+                        }
                     </div>
                 </div>
                 <div className='mx_SettingsTab_section'>
@@ -243,7 +245,6 @@ export default class HelpUserSettingsTab extends React.Component {
                 <div className='mx_SettingsTab_section mx_HelpUserSettingsTab_versions'>
                     <span className='mx_SettingsTab_subheading'>{_t("Versions")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        {_t("matrix-react-sdk version:")} {reactSdkVersion}<br />
                         {_t("riot-web version:")} {vectorVersion}<br />
                         {_t("olm version:")} {olmVersion}<br />
                         {updateButton}

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

@@ -55,7 +55,7 @@ export default class LabsUserSettingsTab extends React.Component {
                             '<a>Learn more</a>.', {}, {
                             'a': (sub) => {
                                 return <a href="https://github.com/vector-im/riot-web/blob/develop/docs/labs.md"
-                                    rel='noopener' target='_blank'>{sub}</a>;
+                                    rel='noreferrer noopener' target='_blank'>{sub}</a>;
                             },
                         })
                     }
@@ -66,6 +66,7 @@ export default class LabsUserSettingsTab extends React.Component {
                     <SettingsFlag name={"showHiddenEventsInTimeline"} level={SettingLevel.DEVICE} />
                     <SettingsFlag name={"lowBandwidth"} level={SettingLevel.DEVICE} />
                     <SettingsFlag name={"sendReadReceipts"} level={SettingLevel.ACCOUNT} />
+                    <SettingsFlag name={"keepSecretStoragePassphraseForSession"} level={SettingLevel.DEVICE} />
                 </div>
             </div>
         );

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

@@ -25,6 +25,12 @@ import * as sdk from "../../../../..";
 import PlatformPeg from "../../../../../PlatformPeg";
 
 export default class PreferencesUserSettingsTab extends React.Component {
+    static ROOM_LIST_SETTINGS = [
+        'RoomList.orderAlphabetically',
+        'RoomList.orderByImportance',
+        'breadcrumbs',
+    ];
+
     static COMPOSER_SETTINGS = [
         'MessageComposerInput.autoReplaceEmoji',
         'MessageComposerInput.suggestEmoji',
@@ -32,6 +38,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
     ];
 
     static TIMELINE_SETTINGS = [
+        'showTypingNotifications',
         'autoplayGifsAndVideos',
         'urlPreviewsEnabled',
         'TextualBody.enableBigEmoji',
@@ -46,11 +53,6 @@ export default class PreferencesUserSettingsTab extends React.Component {
         'showImages',
     ];
 
-    static ROOM_LIST_SETTINGS = [
-        'RoomList.orderByImportance',
-        'breadcrumbs',
-    ];
-
     static ADVANCED_SETTINGS = [
         'alwaysShowEncryptionIcons',
         'Pill.shouldShowPillAvatar',
@@ -170,16 +172,23 @@ export default class PreferencesUserSettingsTab extends React.Component {
         return (
             <div className="mx_SettingsTab mx_PreferencesUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Preferences")}</div>
+
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
+                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
+                </div>
+
                 <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Composer")}</span>
                     {this._renderGroup(PreferencesUserSettingsTab.COMPOSER_SETTINGS)}
+                </div>
 
+                <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Timeline")}</span>
                     {this._renderGroup(PreferencesUserSettingsTab.TIMELINE_SETTINGS)}
+                </div>
 
-                    <span className="mx_SettingsTab_subheading">{_t("Room list")}</span>
-                    {this._renderGroup(PreferencesUserSettingsTab.ROOM_LIST_SETTINGS)}
-
+                <div className="mx_SettingsTab_section">
                     <span className="mx_SettingsTab_subheading">{_t("Advanced")}</span>
                     {this._renderGroup(PreferencesUserSettingsTab.ADVANCED_SETTINGS)}
                     {minimizeToTrayOption}

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

@@ -185,11 +185,11 @@ export default class SecurityUserSettingsTab extends React.Component {
                 <span className='mx_SettingsTab_subheading'>{_t("Cryptography")}</span>
                 <ul className='mx_SettingsTab_subsectionText mx_SecurityUserSettingsTab_deviceInfo'>
                     <li>
-                        <label>{_t("Device ID:")}</label>
+                        <label>{_t("Session ID:")}</label>
                         <span><code>{deviceId}</code></span>
                     </li>
                     <li>
-                        <label>{_t("Device key:")}</label>
+                        <label>{_t("Session key:")}</label>
                         <span><code><b>{identityKey}</b></code></span>
                     </li>
                 </ul>
@@ -242,6 +242,7 @@ export default class SecurityUserSettingsTab extends React.Component {
     render() {
         const DevicesPanel = sdk.getComponent('views.settings.DevicesPanel');
         const SettingsFlag = sdk.getComponent('views.elements.SettingsFlag');
+        const EventIndexPanel = sdk.getComponent('views.settings.EventIndexPanel');
 
         const KeyBackupPanel = sdk.getComponent('views.settings.KeyBackupPanel');
         const keyBackup = (
@@ -253,6 +254,16 @@ export default class SecurityUserSettingsTab extends React.Component {
             </div>
         );
 
+        let eventIndex;
+        if (SettingsStore.isFeatureEnabled("feature_event_indexing")) {
+            eventIndex = (
+                <div className="mx_SettingsTab_section">
+                    <span className="mx_SettingsTab_subheading">{_t("Message search")}</span>
+                    <EventIndexPanel />
+                </div>
+            );
+        }
+
         // XXX: There's no such panel in the current cross-signing designs, but
         // it's useful to have for testing the feature. If there's no interest
         // in having advanced details here once all flows are implemented, we
@@ -274,13 +285,14 @@ export default class SecurityUserSettingsTab extends React.Component {
             <div className="mx_SettingsTab mx_SecurityUserSettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("Security & Privacy")}</div>
                 <div className="mx_SettingsTab_section">
-                    <span className="mx_SettingsTab_subheading">{_t("Devices")}</span>
+                    <span className="mx_SettingsTab_subheading">{_t("Sessions")}</span>
                     <div className='mx_SettingsTab_subsectionText'>
-                        {_t("A device's public name is visible to people you communicate with")}
+                        {_t("A session's public name is visible to people you communicate with")}
                         <DevicesPanel />
                     </div>
                 </div>
                 {keyBackup}
+                {eventIndex}
                 {crossSigning}
                 {this._renderCurrentDeviceInfo()}
                 <div className='mx_SettingsTab_section'>

src/components/views/terms/InlineTermsAgreement.js

@@ -77,7 +77,7 @@ export default class InlineTermsAgreement extends React.Component {
                 "Accept <policyLink /> to continue:", {}, {
                     policyLink: () => {
                         return (
-                            <a href={policy.url} rel='noopener' target='_blank'>
+                            <a href={policy.url} rel='noreferrer noopener' target='_blank'>
                                 {policy.name}
                                 <span className='mx_InlineTermsAgreement_link' />
                             </a>