Merge branches 'develop' and 't3chguy/emoji_picker_composer' of github.com:matrix-org/matrix-react-sdk into t3chguy/emoji_picker_composer

 Conflicts:

	src/components/views/rooms/MessageComposer.js

src/components/views/auth/AuthFooter.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 New Vector 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.
@@ -19,13 +20,13 @@ import { _t } from '../../../languageHandler';
 import React from 'react';
 import createReactClass from 'create-react-class';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'AuthFooter',
 
     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/AuthHeader.js

@@ -16,12 +16,17 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'AuthHeader',
 
+    propTypes: {
+        disableLanguageSelector: PropTypes.bool,
+    },
+
     render: function() {
         const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
         const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
@@ -29,7 +34,7 @@ module.exports = createReactClass({
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />
-                <LanguageSelector />
+                <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
         );
     },

src/components/views/auth/AuthPage.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 New Vector 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.
@@ -16,22 +17,21 @@ limitations under the License.
 */
 
 import React from 'react';
-import createReactClass from 'create-react-class';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
+import {replaceableComponent} from "../../../utils/replaceableComponent";
 
-module.exports = createReactClass({
-    displayName: 'AuthPage',
-
-    render: function() {
+@replaceableComponent("views.auth.AuthPage")
+export default class AuthPage extends React.PureComponent {
+    render() {
         const AuthFooter = sdk.getComponent('auth.AuthFooter');
 
         return (
             <div className="mx_AuthPage">
                 <div className="mx_AuthPage_modal">
-                    { this.props.children }
+                    {this.props.children}
                 </div>
                 <AuthFooter />
             </div>
         );
-    },
-});
+    }
+}

src/components/views/auth/CaptchaForm.js

@@ -24,7 +24,7 @@ const DIV_ID = 'mx_recaptcha';
 /**
  * A pure UI component which displays a captcha form.
  */
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'CaptchaForm',
 
     propTypes: {
@@ -46,7 +46,8 @@ module.exports = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
+    UNSAFE_componentWillMount: function() {
         this._captchaWidgetId = null;
 
         this._recaptchaContainer = createRef();
@@ -61,13 +62,9 @@ module.exports = 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/CountryDropdown.js

@@ -17,9 +17,9 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 
-import { COUNTRIES } from '../../../phonenumber';
+import {COUNTRIES, getEmojiFlag} from '../../../phonenumber';
 import SdkConfig from "../../../SdkConfig";
 import { _t } from "../../../languageHandler";
 
@@ -60,7 +60,7 @@ export default class CountryDropdown extends React.Component {
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!this.props.value) {
             // If no value is given, we start with the default
             // country selected, but our parent component
@@ -80,7 +80,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
+        return <div className="mx_Dropdown_option_emoji">{ getEmojiFlag(iso2) }</div>;
     }
 
     _getShortOption(iso2) {

src/components/views/auth/CustomServerDialog.js

@@ -19,7 +19,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'CustomServerDialog',
 
     render: function() {

src/components/views/auth/InteractiveAuthEntryComponents.js

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

src/components/views/auth/LanguageSelector.js

@@ -18,7 +18,7 @@ import SdkConfig from "../../../SdkConfig";
 import {getCurrentLanguage} from "../../../languageHandler";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import PlatformPeg from "../../../PlatformPeg";
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import React from 'react';
 
 function onChange(newLang) {
@@ -28,12 +28,14 @@ function onChange(newLang) {
     }
 }
 
-export default function LanguageSelector() {
+export default function LanguageSelector({disabled}) {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-    return <LanguageDropdown className="mx_AuthBody_language"
+    return <LanguageDropdown
+        className="mx_AuthBody_language"
         onOptionChange={onChange}
         value={getCurrentLanguage()}
+        disabled={disabled}
     />;
 }

src/components/views/auth/ModularServerConfig.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import SdkConfig from "../../../SdkConfig";
@@ -99,14 +99,15 @@ 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>,
                     },
                 )}
                 <form onSubmit={this.onSubmit} autoComplete="off" action={null}>
                     <div className="mx_ServerConfig_fields">
-                        <Field id="mx_ServerConfig_hsUrl"
+                        <Field
+                            id="mx_ServerConfig_hsUrl"
                             label={_t("Server Name")}
                             placeholder={this.props.serverConfig.hsUrl}
                             value={this.state.hsUrl}

src/components/views/auth/PassphraseField.tsx

@@ -0,0 +1,125 @@
+/*
+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, {PureComponent, RefCallback, RefObject} from "react";
+import classNames from "classnames";
+import zxcvbn from "zxcvbn";
+
+import SdkConfig from "../../../SdkConfig";
+import withValidation, {IFieldState, IValidationResult} from "../elements/Validation";
+import {_t, _td} from "../../../languageHandler";
+import Field from "../elements/Field";
+
+interface IProps {
+    autoFocus?: boolean;
+    id?: string;
+    className?: string;
+    minScore: 0 | 1 | 2 | 3 | 4;
+    value: string;
+    fieldRef?: RefCallback<Field> | RefObject<Field>;
+
+    label?: string;
+    labelEnterPassword?: string;
+    labelStrongPassword?: string;
+    labelAllowedButUnsafe?: string;
+
+    onChange(ev: React.FormEvent<HTMLElement>);
+    onValidate(result: IValidationResult);
+}
+
+interface IState {
+    complexity: zxcvbn.ZXCVBNResult;
+}
+
+class PassphraseField extends PureComponent<IProps, IState> {
+    static defaultProps = {
+        label: _td("Password"),
+        labelEnterPassword: _td("Enter password"),
+        labelStrongPassword: _td("Nice, strong password!"),
+        labelAllowedButUnsafe: _td("Password is allowed, but unsafe"),
+    };
+
+    state = { complexity: null };
+
+    public readonly validate = withValidation<this>({
+        description: function() {
+            const complexity = this.state.complexity;
+            const score = complexity ? complexity.score : 0;
+            return <progress className="mx_PassphraseField_progress" max={4} value={score} />;
+        },
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t(this.props.labelEnterPassword),
+            },
+            {
+                key: "complexity",
+                test: async function({ value }) {
+                    if (!value) {
+                        return false;
+                    }
+                    const { scorePassword } = await import('../../../utils/PasswordScorer');
+                    const complexity = scorePassword(value);
+                    this.setState({ complexity });
+                    const safe = complexity.score >= this.props.minScore;
+                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
+                    return allowUnsafe || safe;
+                },
+                valid: function() {
+                    // Unsafe passwords that are valid are only possible through a
+                    // configuration flag. We'll print some helper text to signal
+                    // to the user that their password is allowed, but unsafe.
+                    if (this.state.complexity.score >= this.props.minScore) {
+                        return _t(this.props.labelStrongPassword);
+                    }
+                    return _t(this.props.labelAllowedButUnsafe);
+                },
+                invalid: function() {
+                    const complexity = this.state.complexity;
+                    if (!complexity) {
+                        return null;
+                    }
+                    const { feedback } = complexity;
+                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
+                },
+            },
+        ],
+    });
+
+    onValidate = async (fieldState: IFieldState) => {
+        const result = await this.validate(fieldState);
+        this.props.onValidate(result);
+        return result;
+    };
+
+    render() {
+        return <Field
+            id={this.props.id}
+            autoFocus={this.props.autoFocus}
+            className={classNames("mx_PassphraseField", this.props.className)}
+            ref={this.props.fieldRef}
+            type="password"
+            autoComplete="new-password"
+            label={_t(this.props.label)}
+            value={this.props.value}
+            onChange={this.props.onChange}
+            onValidate={this.onValidate}
+        />
+    }
+}
+
+export default PassphraseField;

src/components/views/auth/PasswordLogin.js

@@ -19,10 +19,11 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AccessibleButton from "../elements/AccessibleButton";
 
 /**
  * A pure UI component which displays a username/password form.
@@ -44,6 +45,7 @@ export default class PasswordLogin extends React.Component {
         loginIncorrect: PropTypes.bool,
         disableSubmit: PropTypes.bool,
         serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+        busy: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -183,7 +185,7 @@ export default class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType) {
+    renderLoginField(loginType, autoFocus) {
         const Field = sdk.getComponent('elements.Field');
 
         const classes = {};
@@ -193,7 +195,6 @@ export default class PasswordLogin extends React.Component {
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_email"
                     name="username" // make it a little easier for browser's remember-password
                     key="email_input"
                     type="text"
@@ -202,13 +203,13 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
-                    autoFocus
+                    disabled={this.props.disableSubmit}
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_username"
                     name="username" // make it a little easier for browser's remember-password
                     key="username_input"
                     type="text"
@@ -216,7 +217,8 @@ export default class PasswordLogin extends React.Component {
                     value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
-                    autoFocus
+                    disabled={this.props.disableSubmit}
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
@@ -231,7 +233,6 @@ export default class PasswordLogin extends React.Component {
 
                 return <Field
                     className={classNames(classes)}
-                    id="mx_PasswordLogin_phoneNumber"
                     name="phoneNumber"
                     key="phone_input"
                     type="text"
@@ -240,7 +241,8 @@ export default class PasswordLogin extends React.Component {
                     prefix={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
-                    autoFocus
+                    disabled={this.props.disableSubmit}
+                    autoFocus={autoFocus}
                 />;
             }
         }
@@ -265,12 +267,16 @@ export default class PasswordLogin extends React.Component {
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = <span>
                 {_t('Not sure of your password? <a>Set a new one</a>', {}, {
-                    a: sub => <a className="mx_Login_forgot"
-                        onClick={this.onForgotPasswordClick}
-                        href="#"
-                    >
-                        {sub}
-                    </a>,
+                    a: sub => (
+                        <AccessibleButton
+                            className="mx_Login_forgot"
+                            disabled={this.props.busy}
+                            kind="link"
+                            onClick={this.onForgotPasswordClick}
+                        >
+                            {sub}
+                        </AccessibleButton>
+                    ),
                 })}
             </span>;
         }
@@ -279,7 +285,10 @@ export default class PasswordLogin extends React.Component {
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
-        const loginField = this.renderLoginField(this.state.loginType);
+        // If login is empty, autoFocus login, otherwise autoFocus password.
+        // this is for when auto server discovery remounts us when the user tries to tab from username to password
+        const autoFocusPassword = !this.isLoginEmpty();
+        const loginField = this.renderLoginField(this.state.loginType, !autoFocusPassword);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
@@ -287,10 +296,10 @@ export default class PasswordLogin extends React.Component {
                 <div className="mx_Login_type_container">
                     <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
                     <Field
-                        id="mx_PasswordLogin_type"
                         element="select"
                         value={this.state.loginType}
                         onChange={this.onLoginTypeChange}
+                        disabled={this.props.disableSubmit}
                     >
                         <option
                             key={PasswordLogin.LOGIN_FIELD_MXID}
@@ -324,19 +333,20 @@ export default class PasswordLogin extends React.Component {
                     {loginField}
                     <Field
                         className={pwFieldClass}
-                        id="mx_PasswordLogin_password"
                         type="password"
                         name="password"
                         label={_t('Password')}
                         value={this.state.password}
                         onChange={this.onPasswordChanged}
+                        disabled={this.props.disableSubmit}
+                        autoFocus={autoFocusPassword}
                     />
                     {forgotPasswordJsx}
-                    <input className="mx_Login_submit"
+                    { !this.props.busy && <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}
                         disabled={this.props.disableSubmit}
-                    />
+                    /> }
                 </form>
             </div>
         );

src/components/views/auth/RegistrationForm.js

@@ -20,8 +20,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import Email from '../../../email';
+import * as sdk from '../../../index';
+import * as Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
@@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import PassphraseField from "./PassphraseField";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -41,7 +42,7 @@ const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from of
 /**
  * A pure UI component which displays a registration form.
  */
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'RegistrationForm',
 
     propTypes: {
@@ -76,9 +77,8 @@ module.exports = createReactClass({
             email: this.props.defaultEmail || "",
             phoneNumber: this.props.defaultPhoneNumber || "",
             password: this.props.defaultPassword || "",
-            passwordConfirm: "",
+            passwordConfirm: this.props.defaultPassword || "",
             passwordComplexity: null,
-            passwordSafe: false,
         };
     },
 
@@ -102,11 +102,15 @@ module.exports = createReactClass({
                     "No identity server is configured so you cannot add an email address in order to " +
                     "reset your password in the future.",
                 );
-            } else {
+            } else if (this._showEmail()) {
                 desc = _t(
                     "If you don't specify an email address, you won't be able to reset your password. " +
                     "Are you sure?",
                 );
+            } else {
+                // user can't set an e-mail so don't prompt them to
+                self._doSubmit(ev);
+                return;
             }
 
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@@ -260,65 +264,10 @@ module.exports = createReactClass({
         });
     },
 
-    async onPasswordValidate(fieldState) {
-        const result = await this.validatePasswordRules(fieldState);
+    onPasswordValidate(result) {
         this.markFieldValid(FIELD_PASSWORD, result.valid);
-        return result;
     },
 
-    validatePasswordRules: withValidation({
-        description: function() {
-            const complexity = this.state.passwordComplexity;
-            const score = complexity ? complexity.score : 0;
-            return <progress
-                className="mx_AuthBody_passwordScore"
-                max={PASSWORD_MIN_SCORE}
-                value={score}
-            />;
-        },
-        rules: [
-            {
-                key: "required",
-                test: ({ value, allowEmpty }) => allowEmpty || !!value,
-                invalid: () => _t("Enter password"),
-            },
-            {
-                key: "complexity",
-                test: async function({ value }) {
-                    if (!value) {
-                        return false;
-                    }
-                    const { scorePassword } = await import('../../../utils/PasswordScorer');
-                    const complexity = scorePassword(value);
-                    const safe = complexity.score >= PASSWORD_MIN_SCORE;
-                    const allowUnsafe = SdkConfig.get()["dangerously_allow_unsafe_and_insecure_passwords"];
-                    this.setState({
-                        passwordComplexity: complexity,
-                        passwordSafe: safe,
-                    });
-                    return allowUnsafe || safe;
-                },
-                valid: function() {
-                    // Unsafe passwords that are valid are only possible through a
-                    // configuration flag. We'll print some helper text to signal
-                    // to the user that their password is allowed, but unsafe.
-                    if (!this.state.passwordSafe) {
-                        return _t("Password is allowed, but unsafe");
-                    }
-                    return _t("Nice, strong password!");
-                },
-                invalid: function() {
-                    const complexity = this.state.passwordComplexity;
-                    if (!complexity) {
-                        return null;
-                    }
-                    const { feedback } = complexity;
-                    return feedback.warning || feedback.suggestions[0] || _t("Keep going...");
-                },
-            },
-        ],
-    }),
-
     onPasswordConfirmChange(ev) {
         this.setState({
             passwordConfirm: ev.target.value,
@@ -470,7 +419,6 @@ module.exports = createReactClass({
             _t("Email") :
             _t("Email (optional)");
         return <Field
-            id="mx_RegistrationForm_email"
             ref={field => this[FIELD_EMAIL] = field}
             type="text"
             label={emailPlaceholder}
@@ -481,12 +429,10 @@ module.exports = createReactClass({
     },
 
     renderPassword() {
-        const Field = sdk.getComponent('elements.Field');
-        return <Field
+        return <PassphraseField
             id="mx_RegistrationForm_password"
-            ref={field => this[FIELD_PASSWORD] = field}
-            type="password"
-            label={_t("Password")}
+            fieldRef={field => this[FIELD_PASSWORD] = field}
+            minScore={PASSWORD_MIN_SCORE}
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}
@@ -499,6 +445,7 @@ module.exports = 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}
@@ -522,7 +469,6 @@ module.exports = createReactClass({
             onOptionChange={this.onPhoneCountryChange}
         />;
         return <Field
-            id="mx_RegistrationForm_phoneNumber"
             ref={field => this[FIELD_PHONE_NUMBER] = field}
             type="text"
             label={phoneLabel}

src/components/views/auth/ServerConfig.js

@@ -19,12 +19,12 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import Modal from '../../../Modal';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import SdkConfig from "../../../SdkConfig";
-import { createClient } from 'matrix-js-sdk/lib/matrix';
+import { createClient } from 'matrix-js-sdk/src/matrix';
 import classNames from 'classnames';
 
 /*
@@ -72,7 +72,8 @@ export default class ServerConfig extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
         if (newProps.serverConfig.hsUrl === this.state.hsUrl &&
             newProps.serverConfig.isUrl === this.state.isUrl) return;
 
@@ -223,7 +224,8 @@ export default class ServerConfig extends React.PureComponent {
                     {sub}
                 </a>,
             })}
-            <Field id="mx_ServerConfig_hsUrl"
+            <Field
+                id="mx_ServerConfig_hsUrl"
                 label={_t("Homeserver URL")}
                 placeholder={this.props.serverConfig.hsUrl}
                 value={this.state.hsUrl}
@@ -246,7 +248,7 @@ export default class ServerConfig extends React.PureComponent {
                     {sub}
             </a>,
             })}
-            <Field id="mx_ServerConfig_isUrl"
+            <Field
                 label={_t("Identity Server URL")}
                 placeholder={this.props.serverConfig.isUrl}
                 value={this.state.isUrl || ''}
@@ -274,15 +276,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

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import classnames from 'classnames';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import {makeType} from "../../../utils/TypeUtils";
@@ -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/auth/SignInToText.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import {_t} from "../../../languageHandler";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 import PropTypes from "prop-types";
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 

src/components/views/auth/Welcome.js

@@ -15,12 +15,18 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
+import AuthPage from "./AuthPage";
+import * as Matrix from "matrix-js-sdk";
+import {_td} from "../../../languageHandler";
+import PlatformPeg from "../../../PlatformPeg";
+
+// translatable strings for Welcome pages
+_td("Sign in with SSO");
 
 export default class Welcome extends React.PureComponent {
     render() {
-        const AuthPage = sdk.getComponent("auth.AuthPage");
         const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
 
@@ -33,11 +39,25 @@ export default class Welcome extends React.PureComponent {
             pageUrl = 'welcome.html';
         }
 
+        const {hsUrl, isUrl} = this.props.serverConfig;
+        const tmpClient = Matrix.createClient({
+            baseUrl: hsUrl,
+            idBaseUrl: isUrl,
+        });
+        const plaf = PlatformPeg.get();
+        const callbackUrl = plaf.getSSOCallbackUrl(tmpClient.getHomeserverUrl(), tmpClient.getIdentityServerUrl(),
+            this.props.fragmentAfterLogin);
+
         return (
             <AuthPage>
                 <div className="mx_Welcome">
-                    <EmbeddedPage className="mx_WelcomePage"
+                    <EmbeddedPage
+                        className="mx_WelcomePage"
                         url={pageUrl}
+                        replaceMap={{
+                            "$riot:ssoUrl": tmpClient.getSsoLoginUrl(callbackUrl.toString(), "sso"),
+                            "$riot:casUrl": tmpClient.getSsoLoginUrl(callbackUrl.toString(), "cas"),
+                        }}
                     />
                     <LanguageSelector />
                 </div>

src/components/views/avatars/BaseAvatar.js

@@ -2,6 +2,7 @@
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+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.
@@ -16,195 +17,182 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
 import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { MatrixClient } from 'matrix-js-sdk';
-import AvatarLogic from '../../../Avatar';
+import * as AvatarLogic from '../../../Avatar';
 import SettingsStore from "../../../settings/SettingsStore";
 import AccessibleButton from '../elements/AccessibleButton';
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
+import {toPx} from "../../../utils/units";
 
-module.exports = createReactClass({
-    displayName: 'BaseAvatar',
+const useImageUrl = ({url, urls}) => {
+    const [imageUrls, setUrls] = useState([]);
+    const [urlsIndex, setIndex] = useState();
 
-    propTypes: {
-        name: PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: PropTypes.string, // ID for generating hash colours
-        title: PropTypes.string, // onHover title text
-        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: PropTypes.number,
-        height: PropTypes.number,
-        // XXX resizeMethod not actually used.
-        resizeMethod: PropTypes.string,
-        defaultToInitialLetter: PropTypes.bool, // true to add default url
-    },
+    const onError = useCallback(() => {
+        setIndex(i => i + 1); // try the next one
+    }, []);
+    const memoizedUrls = useMemo(() => urls, [JSON.stringify(urls)]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    contextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    },
-
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            defaultToInitialLetter: true,
-        };
-    },
-
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
-
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.matrixClient.on('sync', this.onClientSync);
-    },
-
-    componentWillUnmount() {
-        this.unmounted = true;
-        this.context.matrixClient.removeListener('sync', this.onClientSync);
-    },
-
-    componentWillReceiveProps: function(nextProps) {
-        // work out if we need to call setState (if the image URLs array has changed)
-        const newState = this._getState(nextProps);
-        const newImageUrls = newState.imageUrls;
-        const oldImageUrls = this.state.imageUrls;
-        if (newImageUrls.length !== oldImageUrls.length) {
-            this.setState(newState); // detected a new entry
-        } else {
-            // check each one to see if they are the same
-            for (let i = 0; i < newImageUrls.length; i++) {
-                if (oldImageUrls[i] !== newImageUrls[i]) {
-                    this.setState(newState); // detected a diff
-                    break;
-                }
-            }
-        }
-    },
-
-    onClientSync: function(syncState, prevState) {
-        if (this.unmounted) return;
-
-        // Consider the client reconnected if there is no error with syncing.
-        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
-        const reconnected = syncState !== "ERROR" && prevState !== syncState;
-        if (reconnected &&
-            // Did we fall back?
-            this.state.urlsIndex > 0
-        ) {
-            // Start from the highest priority URL again
-            this.setState({
-                urlsIndex: 0,
-            });
-        }
-    },
-
-    _getState: function(props) {
+    useEffect(() => {
         // work out the full set of urls to try to load. This is formed like so:
-        // imageUrls: [ props.url, props.urls, default image ]
+        // imageUrls: [ props.url, ...props.urls ]
 
-        let urls = [];
+        let _urls = [];
         if (!SettingsStore.getValue("lowBandwidth")) {
-            urls = props.urls || [];
+            _urls = memoizedUrls || [];
 
-            if (props.url) {
-                urls.unshift(props.url); // put in urls[0]
+            if (url) {
+                _urls.unshift(url); // put in urls[0]
             }
         }
 
-        let defaultImageUrl = null;
-        if (props.defaultToInitialLetter) {
-            defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name,
-            );
-            urls.push(defaultImageUrl); // lowest priority
-        }
-
         // deduplicate URLs
-        urls = Array.from(new Set(urls));
+        _urls = Array.from(new Set(_urls));
 
-        return {
-            imageUrls: urls,
-            defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0,
-        };
-    },
+        setIndex(0);
+        setUrls(_urls);
+    }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
 
-    onError: function(ev) {
-        const nextIndex = this.state.urlsIndex + 1;
-        if (nextIndex < this.state.imageUrls.length) {
-            // try the next one
-            this.setState({
-                urlsIndex: nextIndex,
-            });
+    const cli = useContext(MatrixClientContext);
+    const onClientSync = useCallback((syncState, prevState) => {
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected) {
+            setIndex(0);
         }
-    },
+    }, []);
+    useEventEmitter(cli, "sync", onClientSync);
 
-    render: function() {
-        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
+    const imageUrl = imageUrls[urlsIndex];
+    return [imageUrl, onError];
+};
 
-        const {
-            name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter, onClick,
-            ...otherProps
-        } = this.props;
+const BaseAvatar = (props) => {
+    const {
+        name,
+        idName,
+        title,
+        url,
+        urls,
+        width=40,
+        height=40,
+        resizeMethod="crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter=true,
+        onClick,
+        inputRef,
+        ...otherProps
+    } = props;
+
+    const [imageUrl, onError] = useImageUrl({url, urls});
+
+    if (!imageUrl && defaultToInitialLetter) {
+        const initialLetter = AvatarLogic.getInitialLetter(name);
+        const textNode = (
+            <span
+                className="mx_BaseAvatar_initial"
+                aria-hidden="true"
+                style={{
+                    fontSize: toPx(width * 0.65),
+                    width: toPx(width),
+                    lineHeight: toPx(height),
+                }}
+            >
+                { initialLetter }
+            </span>
+        );
+        const imgNode = (
+            <img
+                className="mx_BaseAvatar_image"
+                src={AvatarLogic.defaultAvatarUrlForString(idName || name)}
+                alt=""
+                title={title}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                aria-hidden="true" />
+        );
 
-        if (imageUrl === this.state.defaultImageUrl) {
-            const initialLetter = AvatarLogic.getInitialLetter(name);
-            const textNode = (
-                <span className="mx_BaseAvatar_initial" aria-hidden="true"
-                    style={{ fontSize: (width * 0.65) + "px",
-                    width: width + "px",
-                    lineHeight: height + "px" }}
-                >
-                    { initialLetter }
-                </span>
-            );
-            const imgNode = (
-                <img className="mx_BaseAvatar_image" src={imageUrl}
-                    alt="" title={title} onError={this.onError}
-                    width={width} height={height} aria-hidden="true" />
-            );
-            if (onClick != null) {
-                return (
-                    <AccessibleButton element='span' className="mx_BaseAvatar"
-                        onClick={onClick} {...otherProps}
-                    >
-                        { textNode }
-                        { imgNode }
-                    </AccessibleButton>
-                );
-            } else {
-                return (
-                    <span className="mx_BaseAvatar" {...otherProps}>
-                        { textNode }
-                        { imgNode }
-                    </span>
-                );
-            }
-        }
         if (onClick != null) {
             return (
-                <AccessibleButton className="mx_BaseAvatar mx_BaseAvatar_image"
-                    element='img'
-                    src={imageUrl}
+                <AccessibleButton
+                    {...otherProps}
+                    element="span"
+                    className="mx_BaseAvatar"
                     onClick={onClick}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    {...otherProps} />
+                    inputRef={inputRef}
+                >
+                    { textNode }
+                    { imgNode }
+                </AccessibleButton>
             );
         } else {
             return (
-                <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    {...otherProps} />
+                <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
+                    { textNode }
+                    { imgNode }
+                </span>
             );
         }
-    },
-});
+    }
+
+    if (onClick != null) {
+        return (
+            <AccessibleButton
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                element='img'
+                src={imageUrl}
+                onClick={onClick}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                inputRef={inputRef}
+                {...otherProps} />
+        );
+    } else {
+        return (
+            <img
+                className="mx_BaseAvatar mx_BaseAvatar_image"
+                src={imageUrl}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                ref={inputRef}
+                {...otherProps} />
+        );
+    }
+};
+
+BaseAvatar.displayName = "BaseAvatar";
+
+BaseAvatar.propTypes = {
+    name: PropTypes.string.isRequired, // The name (first initial used as default)
+    idName: PropTypes.string, // ID for generating hash colours
+    title: PropTypes.string, // onHover title text
+    url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+    urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+    width: PropTypes.number,
+    height: PropTypes.number,
+    // XXX resizeMethod not actually used.
+    resizeMethod: PropTypes.string,
+    defaultToInitialLetter: PropTypes.bool, // true to add default url
+    onClick: PropTypes.func,
+    inputRef: PropTypes.oneOfType([
+        // Either a function
+        PropTypes.func,
+        // Or the instance of a DOM native element
+        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+    ]),
+};
+
+export default BaseAvatar;

src/components/views/avatars/GroupAvatar.js

@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 
 export default createReactClass({
     displayName: 'GroupAvatar',

src/components/views/avatars/MemberAvatar.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -17,11 +18,12 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-const Avatar = require('../../../Avatar');
-const sdk = require("../../../index");
-const dispatcher = require("../../../dispatcher");
+import * as sdk from "../../../index";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'MemberAvatar',
 
     propTypes: {
@@ -32,7 +34,7 @@ module.exports = createReactClass({
         resizeMethod: PropTypes.string,
         // The onClick to give the avatar
         onClick: PropTypes.func,
-        // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
+        // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
         viewUserOnClick: PropTypes.bool,
         title: PropTypes.string,
     },
@@ -50,19 +52,24 @@ module.exports = createReactClass({
         return this._getState(this.props);
     },
 
-    componentWillReceiveProps: function(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(nextProps) {
         this.setState(this._getState(nextProps));
     },
 
     _getState: function(props) {
-        if (props.member) {
+        if (props.member && props.member.name) {
             return {
                 name: props.member.name,
                 title: props.title || props.member.userId,
-                imageUrl: Avatar.avatarUrlForMember(props.member,
-                                             props.width,
-                                             props.height,
-                                             props.resizeMethod),
+                imageUrl: props.member.getAvatarUrl(
+                    MatrixClientPeg.get().getHomeserverUrl(),
+                    Math.floor(props.width * window.devicePixelRatio),
+                    Math.floor(props.height * window.devicePixelRatio),
+                    props.resizeMethod,
+                    false,
+                    false,
+                ),
             };
         } else if (props.fallbackUserId) {
             return {
@@ -82,8 +89,8 @@ module.exports = createReactClass({
 
         if (viewUserOnClick) {
             onClick = () => {
-                dispatcher.dispatch({
-                    action: 'view_user',
+                dis.dispatch({
+                    action: Action.ViewUser,
                     member: this.props.member,
                 });
             };

src/components/views/avatars/MemberStatusMessageAvatar.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {_t} from "../../../languageHandler";
 import MemberAvatar from '../avatars/MemberAvatar';
 import classNames from 'classnames';
@@ -38,8 +38,8 @@ export default class MemberStatusMessageAvatar extends React.Component {
         resizeMethod: 'crop',
     };
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
 
         this.state = {
             hasStatus: this.hasStatus,
@@ -49,7 +49,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         this._button = createRef();
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }
@@ -63,7 +63,7 @@ export default class MemberStatusMessageAvatar extends React.Component {
         user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     }
 
-    componentWillUmount() {
+    componentWillUnmount() {
         const { user } = this.props.member;
         if (!user) {
             return;

src/components/views/avatars/RoomAvatar.js

@@ -16,13 +16,13 @@ limitations under the License.
 import React from "react";
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import {ContentRepo} from "matrix-js-sdk";
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import Modal from '../../../Modal';
-import sdk from "../../../index";
-import Avatar from '../../../Avatar';
+import * as sdk from "../../../index";
+import * as Avatar from '../../../Avatar';
+import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'RoomAvatar',
 
     // Room may be left unset here, but if it is,
@@ -63,7 +63,8 @@ module.exports = createReactClass({
         }
     },
 
-    componentWillReceiveProps: function(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(newProps) {
         this.setState({
             urls: this.getImageUrls(newProps),
         });
@@ -82,7 +83,7 @@ module.exports = createReactClass({
 
     getImageUrls: function(props) {
         return [
-            ContentRepo.getHttpUriForMxc(
+            getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import {Group} from 'matrix-js-sdk';
@@ -31,8 +31,8 @@ export default class GroupInviteTileContextMenu extends React.Component {
         onFinished: PropTypes.func,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
 
         this._onClickReject = this._onClickReject.bind(this);
     }

src/components/views/context_menus/MessageContextMenu.js

@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
-import sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
@@ -37,7 +37,7 @@ function canCancel(eventStatus) {
     return eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT;
 }
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'MessageContextMenu',
 
     propTypes: {
@@ -61,7 +61,7 @@ module.exports = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
         this._checkPermissions();
     },
@@ -90,7 +90,8 @@ module.exports = 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() {
@@ -115,11 +116,6 @@ module.exports = createReactClass({
         this.closeMenu();
     },
 
-    e2eInfoClicked: function() {
-        this.props.e2eInfoCallback();
-        this.closeMenu();
-    },
-
     onReportEventClick: function() {
         const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
         Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
@@ -129,22 +125,24 @@ module.exports = createReactClass({
     },
 
     onViewSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
-            content: this.props.mxEvent.event,
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
+            content: ev.event,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },
 
     onViewClearSourceClick: function() {
+        const ev = this.props.mxEvent.replacingEvent() || this.props.mxEvent;
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
-            roomId: this.props.mxEvent.getRoomId(),
-            eventId: this.props.mxEvent.getId(),
+            roomId: ev.getRoomId(),
+            eventId: ev.getId(),
             // FIXME: _clearEvent is private
-            content: this.props.mxEvent._clearEvent,
+            content: ev._clearEvent,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
     },
@@ -414,15 +412,20 @@ module.exports = 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>
         );
 
-        if (this.props.eventTileOps && this.props.eventTileOps.getInnerText) {
+        if (this.props.eventTileOps) { // this event is rendered using TextualBody
             quoteButton = (
                 <MenuItem className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
                     { _t('Quote') }
@@ -436,16 +439,15 @@ module.exports = 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>
           );
         }
@@ -458,15 +460,6 @@ module.exports = createReactClass({
             );
         }
 
-        let e2eInfo;
-        if (this.props.e2eInfoCallback) {
-            e2eInfo = (
-                <MenuItem className="mx_MessageContextMenu_field" onClick={this.e2eInfoClicked}>
-                    { _t('End-to-end encryption information') }
-                </MenuItem>
-            );
-        }
-
         let reportEventButton;
         if (mxEvent.getSender() !== me) {
             reportEventButton = (
@@ -493,7 +486,6 @@ module.exports = createReactClass({
                 { quoteButton }
                 { externalURLButton }
                 { collapseReplyThread }
-                { e2eInfo }
                 { reportEventButton }
             </div>
         );

src/components/views/context_menus/RoomTileContextMenu.js

@@ -21,10 +21,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import * as Rooms from '../../../Rooms';
 import * as RoomNotifs from '../../../RoomNotifs';
@@ -63,7 +63,7 @@ const NotifOption = ({active, onClick, src, label}) => {
     );
 };
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'RoomTileContextMenu',
 
     propTypes: {
@@ -82,7 +82,7 @@ module.exports = createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
     },
 
@@ -306,7 +306,7 @@ module.exports = 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/StatusMessageContextMenu.js

@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 
 export default class StatusMessageContextMenu extends React.Component {
@@ -27,15 +27,15 @@ export default class StatusMessageContextMenu extends React.Component {
         user: PropTypes.object,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
 
         this.state = {
             message: this.comittedStatusMessage,
         };
     }
 
-    componentWillMount() {
+    componentDidMount() {
         const { user } = this.props;
         if (!user) {
             return;

src/components/views/context_menus/TagTileContextMenu.js

@@ -17,12 +17,12 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { MatrixClient } from 'matrix-js-sdk';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import {MenuItem} from "../../structures/ContextMenu";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
@@ -31,9 +31,7 @@ export default class TagTileContextMenu extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    static contextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    };
+    static contextType = MatrixClientContext;
 
     constructor() {
         super();
@@ -51,7 +49,7 @@ export default class TagTileContextMenu extends React.Component {
     }
 
     _onRemoveClick() {
-        dis.dispatch(TagOrderActions.removeTag(this.context.matrixClient, this.props.tag));
+        dis.dispatch(TagOrderActions.removeTag(this.context, this.props.tag));
         this.props.onFinished();
     }
 

src/components/views/context_menus/TopLeftMenu.js

@@ -17,16 +17,19 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import LogoutDialog from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
 import SdkConfig from '../../../SdkConfig';
 import { getHostingLink } from '../../../utils/HostingLink';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {MenuItem} from "../../structures/ContextMenu";
+import * as sdk from "../../../index";
+import {getHomePageUrl} from "../../../utils/pages";
+import {Action} from "../../../dispatcher/actions";
 
-export class TopLeftMenu extends React.Component {
+export default class TopLeftMenu extends React.Component {
     static propTypes = {
         displayName: PropTypes.string.isRequired,
         userId: PropTypes.string.isRequired,
@@ -46,15 +49,7 @@ export class TopLeftMenu extends React.Component {
     }
 
     hasHomePage() {
-        const config = SdkConfig.get();
-        const pagesConfig = config.embeddedPages;
-        if (pagesConfig && pagesConfig.homeUrl) {
-            return true;
-        }
-        // This is a deprecated config option for the home page
-        // (despite the name, given we also now have a welcome
-        // page, which is not the same).
-        return !!config.welcomePageUrl;
+        return !!getHomePageUrl(SdkConfig.get());
     }
 
     render() {
@@ -67,10 +62,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>;
@@ -100,6 +96,12 @@ export class TopLeftMenu extends React.Component {
             );
         }
 
+        const helpItem = (
+            <MenuItem className="mx_TopLeftMenu_icon_help" onClick={this.openHelp}>
+                {_t("Help")}
+            </MenuItem>
+        );
+
         const settingsItem = (
             <MenuItem className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>
                 {_t("Settings")}
@@ -115,18 +117,25 @@ export class TopLeftMenu extends React.Component {
             <ul className="mx_TopLeftMenu_section_withIcon" role="none">
                 {homePageItem}
                 {settingsItem}
+                {helpItem}
                 {signInOutItem}
             </ul>
         </div>;
     }
 
+    openHelp = () => {
+        this.closeMenu();
+        const RedesignFeedbackDialog = sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+        Modal.createTrackedDialog('Report bugs & give feedback', '', RedesignFeedbackDialog);
+    };
+
     viewHomePage() {
         dis.dispatch({action: 'view_home_page'});
         this.closeMenu();
     }
 
     openSettings() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.fire(Action.ViewUserSettings);
         this.closeMenu();
     }
 

src/components/views/create_room/CreateRoomButton.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -19,7 +20,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'CreateRoomButton',
     propTypes: {
         onCreateRoom: PropTypes.func,

src/components/views/create_room/Presets.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -25,7 +26,7 @@ const Presets = {
     Custom: "custom",
 };
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'CreateRoomPresets',
     propTypes: {
         onChange: PropTypes.func,

src/components/views/create_room/RoomAlias.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -19,7 +20,7 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: 'RoomAlias',
     propTypes: {
         // Specifying a homeserver will make magical things happen when you,
@@ -97,7 +98,7 @@ module.exports = createReactClass({
 
     render: function() {
         return (
-            <input type="text" className="mx_RoomAlias" placeholder={_t("Alias (optional)")}
+            <input type="text" className="mx_RoomAlias" placeholder={_t("Address (optional)")}
                 onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
                 value={this.props.alias} />
         );

src/components/views/dialogs/AddressPickerDialog.js

@@ -22,9 +22,9 @@ import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
 import { _t, _td } from '../../../languageHandler';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher/dispatcher';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
@@ -33,6 +33,7 @@ import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../
 import { abbreviateUrl } from '../../../utils/UrlUtils';
 import {sleep} from "../../../utils/promise";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -44,7 +45,7 @@ const addressTypeName = {
 };
 
 
-module.exports = createReactClass({
+export default createReactClass({
     displayName: "AddressPickerDialog",
 
     propTypes: {
@@ -107,6 +108,7 @@ module.exports = createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._textinput = createRef();
     },
@@ -614,7 +616,7 @@ module.exports = createReactClass({
 
     onManageSettingsClick(e) {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.onCancel();
     },
 

src/components/views/dialogs/AskInviteAnywayDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {SettingLevel} from "../../../settings/SettingsStore";
 import SettingsStore from "../../../settings/SettingsStore";
@@ -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

@@ -22,12 +22,11 @@ import FocusLock from 'react-focus-lock';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import { MatrixClient } from 'matrix-js-sdk';
-
 import { Key } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from "../../../languageHandler";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 /**
  * Basic container for modal dialogs.
@@ -66,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,
 
@@ -84,17 +86,8 @@ export default createReactClass({
         };
     },
 
-    childContextTypes: {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    },
-
-    getChildContext: function() {
-        return {
-            matrixClient: this._matrixClient,
-        };
-    },
-
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         this._matrixClient = MatrixClientPeg.get();
     },
 
@@ -121,37 +114,47 @@ export default createReactClass({
             );
         }
 
+        let headerImage;
+        if (this.props.headerImage) {
+            headerImage = <img className="mx_Dialog_titleImage" src={this.props.headerImage}
+                alt=""
+            />;
+        }
+
         return (
-            <FocusLock
-                returnFocus={true}
-                lockProps={{
-                    onKeyDown: this._onKeyDown,
-                    role: "dialog",
-                    ["aria-labelledby"]: "mx_BaseDialog_title",
-                    // This should point to a node describing the dialog.
-                    // If we were about to completely follow this recommendation we'd need to
-                    // make all the components relying on BaseDialog to be aware of it.
-                    // So instead we will use the whole content as the description.
-                    // Description comes first and if the content contains more text,
-                    // AT users can skip its presentation.
-                    ["aria-describedby"]: this.props.contentId,
-                }}
-                className={classNames({
-                    [this.props.className]: true,
-                    'mx_Dialog_fixedWidth': this.props.fixedWidth,
-                })}
-            >
-                <div className={classNames('mx_Dialog_header', {
-                    'mx_Dialog_headerWithButton': !!this.props.headerButton,
-                })}>
-                    <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
-                        { this.props.title }
+            <MatrixClientContext.Provider value={this._matrixClient}>
+                <FocusLock
+                    returnFocus={true}
+                    lockProps={{
+                        onKeyDown: this._onKeyDown,
+                        role: "dialog",
+                        ["aria-labelledby"]: "mx_BaseDialog_title",
+                        // This should point to a node describing the dialog.
+                        // If we were about to completely follow this recommendation we'd need to
+                        // make all the components relying on BaseDialog to be aware of it.
+                        // So instead we will use the whole content as the description.
+                        // Description comes first and if the content contains more text,
+                        // AT users can skip its presentation.
+                        ["aria-describedby"]: this.props.contentId,
+                    }}
+                    className={classNames({
+                        [this.props.className]: true,
+                        'mx_Dialog_fixedWidth': this.props.fixedWidth,
+                    })}
+                >
+                    <div className={classNames('mx_Dialog_header', {
+                        '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 }
+                        { cancelButton }
                     </div>
-                    { this.props.headerButton }
-                    { cancelButton }
-                </div>
-                { this.props.children }
-            </FocusLock>
+                    { this.props.children }
+                </FocusLock>
+            </MatrixClientContext.Provider>
         );
     },
 });

src/components/views/dialogs/BugReportDialog.js

@@ -19,14 +19,15 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
+import sendBugReport from '../../../rageshake/submit-rageshake';
 
 export default class BugReportDialog extends React.Component {
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
         this.state = {
             sendLogs: true,
             busy: false,
@@ -67,32 +68,30 @@ export default class BugReportDialog extends React.Component {
         this.setState({ busy: true, progress: null, err: null });
         this._sendProgressCallback(_t("Preparing to send logs"));
 
-        require(['../../../rageshake/submit-rageshake'], (s) => {
-            s(SdkConfig.get().bug_report_endpoint_url, {
-                userText,
-                sendLogs: true,
-                progressCallback: this._sendProgressCallback,
-                label: this.props.label,
-            }).then(() => {
-                if (!this._unmounted) {
-                    this.props.onFinished(false);
-                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                    // N.B. first param is passed to piwik and so doesn't want i18n
-                    Modal.createTrackedDialog('Bug report sent', '', QuestionDialog, {
-                        title: _t('Logs sent'),
-                        description: _t('Thank you!'),
-                        hasCancelButton: false,
-                    });
-                }
-            }, (err) => {
-                if (!this._unmounted) {
-                    this.setState({
-                        busy: false,
-                        progress: null,
-                        err: _t("Failed to send logs: ") + `${err.message}`,
-                    });
-                }
-            });
+        sendBugReport(SdkConfig.get().bug_report_endpoint_url, {
+            userText,
+            sendLogs: true,
+            progressCallback: this._sendProgressCallback,
+            label: this.props.label,
+        }).then(() => {
+            if (!this._unmounted) {
+                this.props.onFinished(false);
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                // N.B. first param is passed to piwik and so doesn't want i18n
+                Modal.createTrackedDialog('Bug report sent', '', QuestionDialog, {
+                    title: _t('Logs sent'),
+                    description: _t('Thank you!'),
+                    hasCancelButton: false,
+                });
+            }
+        }, (err) => {
+            if (!this._unmounted) {
+                this.setState({
+                    busy: false,
+                    progress: null,
+                    err: _t("Failed to send logs: ") + `${err.message}`,
+                });
+            }
         });
     }
 
@@ -138,12 +137,20 @@ export default class BugReportDialog extends React.Component {
             );
         }
 
+        let warning;
+        if (window.Modernizr && Object.values(window.Modernizr).some(support => support === false)) {
+            warning = <p><b>
+                { _t("Reminder: Your browser is unsupported, so your experience may be unpredictable.") }
+            </b></p>;
+        }
+
         return (
             <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
                     title={_t('Submit debug logs')}
                 contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    { warning }
                     <p>
                         { _t(
                             "Debug logs contain application usage data including your " +
@@ -167,7 +174,6 @@ export default class BugReportDialog extends React.Component {
                         ) }
                     </b></p>
                     <Field
-                        id="mx_BugReportDialog_issueUrl"
                         type="text"
                         className="mx_BugReportDialog_field_input"
                         label={_t("GitHub issue")}
@@ -176,7 +182,6 @@ export default class BugReportDialog extends React.Component {
                         placeholder="https://github.com/vector-im/riot-web/issues/..."
                     />
                     <Field
-                        id="mx_BugReportDialog_notes"
                         className="mx_BugReportDialog_field_input"
                         element="textarea"
                         label={_t("Notes")}

src/components/views/dialogs/ChangelogDialog.js

@@ -17,7 +17,7 @@ Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import request from 'browser-request';
 import { _t } from '../../../languageHandler';
 
@@ -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/ConfirmAndWaitRedactDialog.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 /*

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/ConfirmRedactDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import createReactClass from 'create-react-class';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 /*

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -18,7 +18,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { MatrixClient } from 'matrix-js-sdk';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import { GroupMemberType } from '../../../groups';
 
@@ -55,7 +55,8 @@ export default createReactClass({
         askReason: false,
     }),
 
-    componentWillMount: function() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount: function() {
         this._reasonField = null;
     },
 

src/components/views/dialogs/ConfirmWipeDeviceDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 
 export default class ConfirmWipeDeviceDialog extends React.Component {
     static propTypes = {
@@ -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/CreateGroupDialog.js

@@ -17,10 +17,10 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import dis from '../../../dispatcher';
+import * as sdk from '../../../index';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 
 export default createReactClass({
     displayName: 'CreateGroupDialog',

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.
@@ -17,23 +18,26 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'CreateRoomDialog',
     propTypes: {
         onFinished: PropTypes.func.isRequired,
+        defaultPublic: PropTypes.bool,
     },
 
     getInitialState() {
         const config = SdkConfig.get();
         return {
-            isPublic: false,
+            isPublic: this.props.defaultPublic || false,
+            isEncrypted: true,
             name: "",
             topic: "",
             alias: "",
@@ -44,13 +48,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 +65,12 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
-        return createOpts;
+
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+            opts.encryption = this.state.isEncrypted;
+        }
+
+        return opts;
     },
 
     componentDidMount() {
@@ -126,6 +135,10 @@ export default createReactClass({
         this.setState({isPublic});
     },
 
+    onEncryptedChange(isEncrypted) {
+        this.setState({isEncrypted});
+    },
+
     onAliasChange(alias) {
         this.setState({alias});
     },
@@ -165,19 +178,31 @@ export default createReactClass({
         const LabelledToggleSwitch = sdk.getComponent('views.elements.LabelledToggleSwitch');
         const RoomAliasField = sdk.getComponent('views.elements.RoomAliasField');
 
-        let privateLabel;
-        let publicLabel;
+        let publicPrivateLabel;
         let aliasField;
         if (this.state.isPublic) {
-            publicLabel = (<p>{_t("Set a room alias to easily share your room with other people.")}</p>);
+            publicPrivateLabel = (<p>{_t("Set a room address to easily share your room with other people.")}</p>);
             const domain = MatrixClientPeg.get().getDomain();
             aliasField = (
                 <div className="mx_CreateRoomDialog_aliasContainer">
-                    <RoomAliasField id="alias" ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} />
+                    <RoomAliasField ref={ref => this._aliasFieldRef = ref} onChange={this.onAliasChange} domain={domain} value={this.state.alias} />
                 </div>
             );
         } else {
-            privateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+            publicPrivateLabel = (<p>{_t("This room is private, and can only be joined by invitation.")}</p>);
+        }
+
+        let e2eeSection;
+        if (!this.state.isPublic && SettingsStore.getValue("feature_cross_signing")) {
+            e2eeSection = <React.Fragment>
+                <LabelledToggleSwitch
+                    label={ _t("Enable end-to-end encryption")}
+                    onChange={this.onEncryptedChange}
+                    value={this.state.isEncrypted}
+                    className='mx_CreateRoomDialog_e2eSwitch' // for end-to-end tests
+                />
+                <p>{ _t("You can’t disable this later. Bridges & most bots won’t work yet.") }</p>
+            </React.Fragment>;
         }
 
         const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
@@ -187,11 +212,11 @@ export default createReactClass({
             >
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
-                        <Field id="name" ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
-                        <Field id="topic" label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} />
+                        <Field ref={ref => this._nameFieldRef = ref} label={ _t('Name') } onChange={this.onNameChange} onValidate={this.onNameValidate} value={this.state.name} className="mx_CreateRoomDialog_name" />
+                        <Field label={ _t('Topic (optional)') } onChange={this.onTopicChange} value={this.state.topic} className="mx_CreateRoomDialog_topic" />
                         <LabelledToggleSwitch label={ _t("Make this room public")} onChange={this.onPublicChange} value={this.state.isPublic} />
-                        { privateLabel }
-                        { publicLabel }
+                        { publicPrivateLabel }
+                        { e2eeSection }
                         { aliasField }
                         <details ref={this.collectDetailsRef} className="mx_CreateRoomDialog_details">
                             <summary className="mx_CreateRoomDialog_details_summary">{ this.state.detailsOpen ? _t('Hide advanced') : _t('Show advanced') }</summary>

src/components/views/dialogs/CryptoStoreTooNewDialog.js

@@ -15,8 +15,8 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../index';
-import dis from '../../../dispatcher';
+import * as sdk from '../../../index';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 
@@ -42,11 +42,9 @@ export default (props) => {
     };
 
     const description =
-        _t("You've previously used a newer version of Riot on %(host)s. " +
+        _t("You've previously used a newer version of Riot with this session. " +
             "To use this version again with end to end encryption, you will " +
-            "need to sign out and back in again. ",
-            {host: props.host},
-        );
+            "need to sign out and back in again.");
 
     const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
     const DialogButtons = sdk.getComponent('views.elements.DialogButtons');

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 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.
@@ -18,110 +18,165 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import * as Lifecycle from '../../../Lifecycle';
 import { _t } from '../../../languageHandler';
+import InteractiveAuth, {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
+import {DEFAULT_PHASE, PasswordAuthEntry, SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
 export default class DeactivateAccountDialog extends React.Component {
-    constructor(props, context) {
-        super(props, context);
-
-        this._onOk = this._onOk.bind(this);
-        this._onCancel = this._onCancel.bind(this);
-        this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
-        this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
+    constructor(props) {
+        super(props);
 
         this.state = {
-            password: "",
-            busy: false,
             shouldErase: false,
             errStr: null,
+            authData: null, // for UIA
+            authEnabled: true, // see usages for information
+
+            // A few strings that are passed to InteractiveAuth for design or are displayed
+            // next to the InteractiveAuth component.
+            bodyText: null,
+            continueText: null,
+            continueKind: null,
         };
+
+        this._initAuth(/* shouldErase= */false);
     }
 
-    _onPasswordFieldChange(ev) {
-        this.setState({
-            password: ev.target.value,
-        });
-    }
+    _onStagePhaseChange = (stage, phase) => {
+        const dialogAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                body: _t("Confirm your account deactivation by using Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "danger",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                body: _t("Are you sure you want to deactivate your account? This is irreversible."),
+                continueText: _t("Confirm account deactivation"),
+                continueKind: "danger",
+            },
+        };
 
-    _onEraseFieldChange(ev) {
-        this.setState({
-            shouldErase: ev.target.checked,
-        });
-    }
-
-    async _onOk() {
-        this.setState({busy: true});
-
-        try {
-            // This assumes that the HS requires password UI auth
-            // for this endpoint. In reality it could be any UI auth.
-            const auth = {
-                type: 'm.login.password',
-                // TODO: Remove `user` once servers support proper UIA
-                // See https://github.com/vector-im/riot-web/issues/10312
-                user: MatrixClientPeg.get().credentials.userId,
-                identifier: {
-                    type: "m.id.user",
-                    user: MatrixClientPeg.get().credentials.userId,
+        // This is the same as aestheticsForStagePhases in InteractiveAuthDialog minus the `title`
+        const DEACTIVATE_AESTHETICS = {
+            [SSOAuthEntry.LOGIN_TYPE]: dialogAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: dialogAesthetics,
+            [PasswordAuthEntry.LOGIN_TYPE]: {
+                [DEFAULT_PHASE]: {
+                    body: _t("To continue, please enter your password:"),
                 },
-                password: this.state.password,
-            };
-            await MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase);
-        } catch (err) {
-            let errStr = _t('Unknown error');
-            // https://matrix.org/jira/browse/SYN-744
-            if (err.httpStatus === 401 || err.httpStatus === 403) {
-                errStr = _t('Incorrect password');
-            }
-            this.setState({
-                busy: false,
-                errStr: errStr,
-            });
+            },
+        };
+
+        const aesthetics = DEACTIVATE_AESTHETICS[stage];
+        let bodyText = null;
+        let continueText = null;
+        let continueKind = null;
+        if (aesthetics) {
+            const phaseAesthetics = aesthetics[phase];
+            if (phaseAesthetics && phaseAesthetics.body) bodyText = phaseAesthetics.body;
+            if (phaseAesthetics && phaseAesthetics.continueText) continueText = phaseAesthetics.continueText;
+            if (phaseAesthetics && phaseAesthetics.continueKind) continueKind = phaseAesthetics.continueKind;
+        }
+        this.setState({bodyText, continueText, continueKind});
+    };
+
+    _onUIAuthFinished = (success, result, extra) => {
+        if (success) return; // great! makeRequest() will be called too.
+
+        if (result === ERROR_USER_CANCELLED) {
+            this._onCancel();
             return;
         }
 
-        Analytics.trackEvent('Account', 'Deactivate Account');
-        Lifecycle.onLoggedOut();
-        this.props.onFinished(true);
-    }
+        console.error("Error during UI Auth:", {result, extra});
+        this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+    };
+
+    _onUIAuthComplete = (auth) => {
+        MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase).then(r => {
+            // Deactivation worked - logout & close this dialog
+            Analytics.trackEvent('Account', 'Deactivate Account');
+            Lifecycle.onLoggedOut();
+            this.props.onFinished(true);
+        }).catch(e => {
+            console.error(e);
+            this.setState({errStr: _t("There was a problem communicating with the server. Please try again.")});
+        });
+    };
+
+    _onEraseFieldChange = (ev) => {
+        this.setState({
+            shouldErase: ev.target.checked,
+
+            // Disable the auth form because we're going to have to reinitialize the auth
+            // information. We do this because we can't modify the parameters in the UIA
+            // session, and the user will have selected something which changes the request.
+            // Therefore, we throw away the last auth session and try a new one.
+            authEnabled: false,
+        });
+
+        // As mentioned above, set up for auth again to get updated UIA session info
+        this._initAuth(/* shouldErase= */ev.target.checked);
+    };
 
     _onCancel() {
         this.props.onFinished(false);
     }
 
+    _initAuth(shouldErase) {
+        MatrixClientPeg.get().deactivateAccount(null, shouldErase).then(r => {
+            // If we got here, oops. The server didn't require any auth.
+            // Our application lifecycle will catch the error and do the logout bits.
+            // We'll try to log something in an vain attempt to record what happened (storage
+            // is also obliterated on logout).
+            console.warn("User's account got deactivated without confirmation: Server had no auth");
+            this.setState({errStr: _t("Server did not require any authentication")});
+        }).catch(e => {
+            if (e && e.httpStatus === 401 && e.data) {
+                // Valid UIA response
+                this.setState({authData: e.data, authEnabled: true});
+            } else {
+                this.setState({errStr: _t("Server did not return valid authentication information.")});
+            }
+        });
+    }
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Loader = sdk.getComponent("elements.Spinner");
-        let passwordBoxClass = '';
 
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
                 { this.state.errStr }
             </div>;
-            passwordBoxClass = 'error';
         }
 
-        const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
-        const okEnabled = this.state.password && !this.state.busy;
-
-        let cancelButton = null;
-        if (!this.state.busy) {
-            cancelButton = <button onClick={this._onCancel} autoFocus={true}>
-                { _t("Cancel") }
-            </button>;
+        let auth = <div>{_t("Loading...")}</div>;
+        if (this.state.authData && this.state.authEnabled) {
+            auth = (
+                <div>
+                    {this.state.bodyText}
+                    <InteractiveAuth
+                        matrixClient={MatrixClientPeg.get()}
+                        authData={this.state.authData}
+                        makeRequest={this._onUIAuthComplete}
+                        onAuthFinished={this._onUIAuthFinished}
+                        onStagePhaseChange={this._onStagePhaseChange}
+                        continueText={this.state.continueText}
+                        continueKind={this.state.continueKind}
+                    />
+                </div>
+            );
         }
 
-        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}
-                onEnterPressed={this.onOk}
                 titleClass="danger"
                 title={_t("Deactivate Account")}
             >
@@ -171,29 +226,10 @@ export default class DeactivateAccountDialog extends React.Component {
                             </label>
                         </p>
 
-                        <p>{ _t("To continue, please enter your password:") }</p>
-                        <Field
-                            id="mx_DeactivateAccountDialog_password"
-                            type="password"
-                            label={_t('Password')}
-                            onChange={this._onPasswordFieldChange}
-                            value={this.state.password}
-                            className={passwordBoxClass}
-                        />
+                        {error}
+                        {auth}
                     </div>
 
-                    { error }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button
-                        className="mx_Dialog_primary danger"
-                        onClick={this._onOk}
-                        disabled={!okEnabled}
-                    >
-                        { okLabel }
-                    </button>
-
-                    { cancelButton }
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -19,25 +19,27 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
-import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
-import DMRoomMap from '../../../utils/DMRoomMap';
-import createRoom from "../../../createRoom";
-import dis from "../../../dispatcher";
+import {verificationMethods} from 'matrix-js-sdk/src/crypto';
+import {ensureDMExists} from "../../../createRoom";
+import dis from "../../../dispatcher/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 = {
@@ -50,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,
@@ -81,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(
@@ -97,17 +119,33 @@ export default class DeviceVerifyDialog extends React.Component {
         const client = MatrixClientPeg.get();
         const verifyingOwnDevice = this.props.userId === client.getUserId();
         try {
-            if (!verifyingOwnDevice && SettingsStore.getValue("feature_dm_verification")) {
+            if (!verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
                 const roomId = await ensureDMExistsAndOpen(this.props.userId);
                 // throws upon cancellation before having started
-                this._verifier = await client.requestVerificationDM(
-                    this.props.userId, roomId, [verificationMethods.SAS],
+                const request = await client.requestVerificationDM(
+                    this.props.userId, roomId,
                 );
+                await request.waitFor(r => r.ready || r.started);
+                if (request.ready) {
+                    this._verifier = request.beginKeyVerification(verificationMethods.SAS);
+                } else {
+                    this._verifier = request.verifier;
+                }
+            } else if (verifyingOwnDevice && SettingsStore.getValue("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();
@@ -145,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();
@@ -157,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}
@@ -175,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 (
@@ -189,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')}
@@ -204,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');
 
@@ -225,12 +263,23 @@ 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}
+            inDialog={true}
         />;
     }
 
@@ -244,12 +293,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} />;
     }
@@ -260,12 +309,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());
@@ -281,14 +330,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>
@@ -296,7 +345,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}
@@ -316,23 +365,7 @@ export default class DeviceVerifyDialog extends React.Component {
 }
 
 async function ensureDMExistsAndOpen(userId) {
-    const client = MatrixClientPeg.get();
-    const roomIds = DMRoomMap.shared().getDMRoomsForUserId(userId);
-    const rooms = roomIds.map(id => client.getRoom(id));
-    const suitableDMRooms = rooms.filter(r => {
-        if (r && r.getMyMembership() === "join") {
-            const member = r.getMember(userId);
-            return member && (member.membership === "invite" || member.membership === "join");
-        }
-        return false;
-    });
-    let roomId;
-    if (suitableDMRooms.length) {
-        const room = suitableDMRooms[0];
-        roomId = room.roomId;
-    } else {
-        roomId = await createRoom({dmUserId: userId, spinner: false, andView: false});
-    }
+    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,25 +14,30 @@ 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 sdk from '../../../index';
+import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import { Room } from "matrix-js-sdk";
 import Field from "../elements/Field";
+import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {useEventEmitter} from "../../../hooks/useEventEmitter";
 
-class DevtoolsComponent extends React.Component {
-    static contextTypes = {
-        roomId: PropTypes.string.isRequired,
-    };
-}
+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 DevtoolsComponent {
+class GenericEditor extends React.PureComponent {
     // static propTypes = {onBack: PropTypes.func.isRequired};
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
         this._onChange = this._onChange.bind(this);
         this.onBack = this.onBack.bind(this);
     }
@@ -67,12 +72,15 @@ class SendCustomEvent extends GenericEditor {
 
     static propTypes = {
         onBack: PropTypes.func.isRequired,
+        room: PropTypes.instanceOf(Room).isRequired,
         forceStateEvent: PropTypes.bool,
         inputs: PropTypes.object,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    static contextType = MatrixClientContext;
+
+    constructor(props) {
+        super(props);
         this._send = this._send.bind(this);
 
         const {eventType, stateKey, evContent} = Object.assign({
@@ -91,11 +99,11 @@ class SendCustomEvent extends GenericEditor {
     }
 
     send(content) {
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
         if (this.state.isStateEvent) {
-            return cli.sendStateEvent(this.context.roomId, this.state.eventType, content, this.state.stateKey);
+            return cli.sendStateEvent(this.props.room.roomId, this.state.eventType, content, this.state.stateKey);
         } else {
-            return cli.sendEvent(this.context.roomId, this.state.eventType, content);
+            return cli.sendEvent(this.props.room.roomId, this.state.eventType, content);
         }
     }
 
@@ -154,13 +162,16 @@ class SendAccountData extends GenericEditor {
     static getLabel() { return _t('Send Account Data'); }
 
     static propTypes = {
+        room: PropTypes.instanceOf(Room).isRequired,
         isRoomAccountData: PropTypes.bool,
         forceMode: PropTypes.bool,
         inputs: PropTypes.object,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    static contextType = MatrixClientContext;
+
+    constructor(props) {
+        super(props);
         this._send = this._send.bind(this);
 
         const {eventType, evContent} = Object.assign({
@@ -177,9 +188,9 @@ class SendAccountData extends GenericEditor {
     }
 
     send(content) {
-        const cli = MatrixClientPeg.get();
+        const cli = this.context;
         if (this.state.isRoomAccountData) {
-            return cli.setRoomAccountData(this.context.roomId, this.state.eventType, content);
+            return cli.setRoomAccountData(this.props.room.roomId, this.state.eventType, content);
         }
         return cli.setAccountData(this.state.eventType, content);
     }
@@ -234,7 +245,7 @@ class SendAccountData extends GenericEditor {
 const INITIAL_LOAD_TILES = 20;
 const LOAD_TILES_STEP_SIZE = 50;
 
-class FilteredList extends React.Component {
+class FilteredList extends React.PureComponent {
     static propTypes = {
         children: PropTypes.any,
         query: PropTypes.string,
@@ -247,8 +258,8 @@ class FilteredList extends React.Component {
         return children.filter((child) => child.key.toLowerCase().includes(lcQuery));
     }
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
 
         this.state = {
             filteredChildren: FilteredList.filterChildren(this.props.children, this.props.query),
@@ -256,7 +267,8 @@ class FilteredList extends React.Component {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (this.props.children === nextProps.children && this.props.query === nextProps.query) return;
         this.setState({
             filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query),
@@ -291,7 +303,7 @@ class FilteredList extends React.Component {
     render() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
-            <Field id="DevtoolsDialog_FilteredList_filter" label={_t('Filter results')} autoFocus={true} size={64}
+            <Field label={_t('Filter results')} autoFocus={true} size={64}
                    type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
                    // force re-render so that autoFocus is applied when this component is re-used
@@ -305,19 +317,20 @@ class FilteredList extends React.Component {
     }
 }
 
-class RoomStateExplorer extends DevtoolsComponent {
+class RoomStateExplorer extends React.PureComponent {
     static getLabel() { return _t('Explore Room State'); }
 
-
     static propTypes = {
         onBack: PropTypes.func.isRequired,
+        room: PropTypes.instanceOf(Room).isRequired,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    static contextType = MatrixClientContext;
 
-        const room = MatrixClientPeg.get().getRoom(this.context.roomId);
-        this.roomStateEvents = room.currentState.events;
+    constructor(props) {
+        super(props);
+
+        this.roomStateEvents = this.props.room.currentState.events;
 
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
@@ -373,7 +386,7 @@ class RoomStateExplorer extends DevtoolsComponent {
     render() {
         if (this.state.event) {
             if (this.state.editing) {
-                return <SendCustomEvent forceStateEvent={true} onBack={this.onBack} inputs={{
+                return <SendCustomEvent room={this.props.room} forceStateEvent={true} onBack={this.onBack} inputs={{
                     eventType: this.state.event.getType(),
                     evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
                     stateKey: this.state.event.getStateKey(),
@@ -442,15 +455,18 @@ class RoomStateExplorer extends DevtoolsComponent {
     }
 }
 
-class AccountDataExplorer extends DevtoolsComponent {
+class AccountDataExplorer extends React.PureComponent {
     static getLabel() { return _t('Explore Account Data'); }
 
     static propTypes = {
         onBack: PropTypes.func.isRequired,
+        room: PropTypes.instanceOf(Room).isRequired,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    static contextType = MatrixClientContext;
+
+    constructor(props) {
+        super(props);
 
         this.onBack = this.onBack.bind(this);
         this.editEv = this.editEv.bind(this);
@@ -467,11 +483,10 @@ class AccountDataExplorer extends DevtoolsComponent {
     }
 
     getData() {
-        const cli = MatrixClientPeg.get();
         if (this.state.isRoomAccountData) {
-            return cli.getRoom(this.context.roomId).accountData;
+            return this.props.room.accountData;
         }
-        return cli.store.accountData;
+        return this.context.store.accountData;
     }
 
     onViewSourceClick(event) {
@@ -505,10 +520,14 @@ class AccountDataExplorer extends DevtoolsComponent {
     render() {
         if (this.state.event) {
             if (this.state.editing) {
-                return <SendAccountData isRoomAccountData={this.state.isRoomAccountData} onBack={this.onBack} inputs={{
-                    eventType: this.state.event.getType(),
-                    evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
-                }} forceMode={true} />;
+                return <SendAccountData
+                    room={this.props.room}
+                    isRoomAccountData={this.state.isRoomAccountData}
+                    onBack={this.onBack}
+                    inputs={{
+                        eventType: this.state.event.getType(),
+                        evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
+                    }} forceMode={true} />;
             }
 
             return <div className="mx_ViewSource">
@@ -553,17 +572,20 @@ class AccountDataExplorer extends DevtoolsComponent {
     }
 }
 
-class ServersInRoomList extends DevtoolsComponent {
+class ServersInRoomList extends React.PureComponent {
     static getLabel() { return _t('View Servers in Room'); }
 
     static propTypes = {
         onBack: PropTypes.func.isRequired,
+        room: PropTypes.instanceOf(Room).isRequired,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    static contextType = MatrixClientContext;
 
-        const room = MatrixClientPeg.get().getRoom(this.context.roomId);
+    constructor(props) {
+        super(props);
+
+        const room = this.props.room;
         const servers = new Set();
         room.currentState.getStateEvents("m.room.member").forEach(ev => servers.add(ev.getSender().split(":")[1]));
         this.servers = Array.from(servers).map(s =>
@@ -594,27 +616,110 @@ class ServersInRoomList extends DevtoolsComponent {
     }
 }
 
+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 className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>{_t("Back")}</button>
+            </div>
+        </div>);
+    }
+}
+
 const Entries = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
     AccountDataExplorer,
     ServersInRoomList,
+    VerificationExplorer,
 ];
 
-export default class DevtoolsDialog extends React.Component {
-    static childContextTypes = {
-        roomId: PropTypes.string.isRequired,
-        // client: PropTypes.instanceOf(MatixClient),
-    };
-
+export default class DevtoolsDialog extends React.PureComponent {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
         onFinished: PropTypes.func.isRequired,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
         this.onBack = this.onBack.bind(this);
         this.onCancel = this.onCancel.bind(this);
 
@@ -627,10 +732,6 @@ export default class DevtoolsDialog extends React.Component {
         this._unmounted = true;
     }
 
-    getChildContext() {
-        return { roomId: this.props.roomId };
-    }
-
     _setMode(mode) {
         return () => {
             this.setState({ mode });
@@ -654,15 +755,17 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <div>
-                <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
-                <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
-                <div className="mx_DevTools_label_bottom" />
-                <this.state.mode onBack={this.onBack} />
-            </div>;
+            body = <MatrixClientContext.Consumer>
+                {(cli) => <React.Fragment>
+                    <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
+                    <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
+                    <div className="mx_DevTools_label_bottom" />
+                    <this.state.mode onBack={this.onBack} room={cli.getRoom(this.props.roomId)} />
+                </React.Fragment>}
+            </MatrixClientContext.Consumer>;
         } else {
             const classes = "mx_DevTools_RoomStateExplorer_button";
-            body = <div>
+            body = <React.Fragment>
                 <div>
                     <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
                     <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
@@ -679,7 +782,7 @@ export default class DevtoolsDialog extends React.Component {
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onCancel}>{ _t('Cancel') }</button>
                 </div>
-            </div>;
+            </React.Fragment>;
         }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

src/components/views/dialogs/ErrorDialog.js

@@ -28,7 +28,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default createReactClass({
@@ -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

@@ -16,8 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 const PHASE_START = 0;
@@ -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,8 @@ export default class IncomingSasDialog extends React.Component {
             sas={this._showSasEvent.sas}
             onCancel={this._onCancelClick}
             onDone={this._onSasMatchesClick}
+            isSelf={this.props.verifier.userId === MatrixClientPeg.get().getUserId()}
+            inDialog={true}
         />;
     }
 
@@ -227,6 +247,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/InfoDialog.js

@@ -19,7 +19,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import classNames from "classnames";
 
@@ -32,6 +32,7 @@ export default createReactClass({
         button: PropTypes.string,
         onFinished: PropTypes.func,
         hasCloseButton: PropTypes.bool,
+        onKeyDown: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -50,10 +51,13 @@ export default createReactClass({
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
-            <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
+            <BaseDialog
+                className="mx_InfoDialog"
+                onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
                 hasCancel={this.props.hasCloseButton}
+                onKeyDown={this.props.onKeyDown}
             >
                 <div className={classNames("mx_Dialog_content", this.props.className)} id="mx_Dialog_content">
                     { this.props.description }

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -17,8 +17,9 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
-import sdk from "../../../index";
-import dis from '../../../dispatcher';
+import * as sdk from "../../../index";
+import dis from '../../../dispatcher/dispatcher';
+import {Action} from "../../../dispatcher/actions";
 
 export default class IntegrationsDisabledDialog extends React.Component {
     static propTypes = {
@@ -31,7 +32,7 @@ export default class IntegrationsDisabledDialog extends React.Component {
 
     _onOpenSettingsClick = () => {
         this.props.onFinished();
-        dis.dispatch({action: "view_user_settings"});
+        dis.fire(Action.ViewUserSettings);
     };
 
     render() {

src/components/views/dialogs/IntegrationsImpossibleDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 
 export default class IntegrationsImpossibleDialog extends React.Component {
     static propTypes = {

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -19,10 +20,12 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
+import {ERROR_USER_CANCELLED} from "../../structures/InteractiveAuth";
+import {SSOAuthEntry} from "../auth/InteractiveAuthEntryComponents";
 
 export default createReactClass({
     displayName: 'InteractiveAuthDialog',
@@ -44,12 +47,60 @@ export default createReactClass({
 
         onFinished: PropTypes.func.isRequired,
 
+        // Optional title and body to show when not showing a particular stage
         title: PropTypes.string,
+        body: PropTypes.string,
+
+        // Optional title and body pairs for particular stages and phases within
+        // those stages. Object structure/example is:
+        // {
+        //     "org.example.stage_type": {
+        //         1: {
+        //             "body": "This is a body for phase 1" of org.example.stage_type,
+        //             "title": "Title for phase 1 of org.example.stage_type"
+        //         },
+        //         2: {
+        //             "body": "This is a body for phase 2 of org.example.stage_type",
+        //             "title": "Title for phase 2 of org.example.stage_type"
+        //             "continueText": "Confirm identity with Example Auth",
+        //             "continueKind": "danger"
+        //         }
+        //     }
+        // }
+        //
+        // Default is defined in _getDefaultDialogAesthetics()
+        aestheticsForStagePhases: PropTypes.object,
     },
 
     getInitialState: function() {
         return {
             authError: null,
+
+            // See _onUpdateStagePhase()
+            uiaStage: null,
+            uiaStagePhase: null,
+        };
+    },
+
+    _getDefaultDialogAesthetics: function() {
+        const ssoAesthetics = {
+            [SSOAuthEntry.PHASE_PREAUTH]: {
+                title: _t("Use Single Sign On to continue"),
+                body: _t("To continue, use Single Sign On to prove your identity."),
+                continueText: _t("Single Sign On"),
+                continueKind: "primary",
+            },
+            [SSOAuthEntry.PHASE_POSTAUTH]: {
+                title: _t("Confirm to continue"),
+                body: _t("Click the button below to confirm your identity."),
+                continueText: _t("Confirm"),
+                continueKind: "primary",
+            },
+        };
+
+        return {
+            [SSOAuthEntry.LOGIN_TYPE]: ssoAesthetics,
+            [SSOAuthEntry.UNSTABLE_LOGIN_TYPE]: ssoAesthetics,
         };
     },
 
@@ -57,12 +108,21 @@ export default createReactClass({
         if (success) {
             this.props.onFinished(true, result);
         } else {
-            this.setState({
-                authError: result,
-            });
+            if (result === ERROR_USER_CANCELLED) {
+                this.props.onFinished(false, null);
+            } else {
+                this.setState({
+                    authError: result,
+                });
+            }
         }
     },
 
+    _onUpdateStagePhase: function(newStage, newPhase) {
+        // We copy the stage and stage phase params into state for title selection in render()
+        this.setState({uiaStage: newStage, uiaStagePhase: newPhase});
+    },
+
     _onDismissClick: function() {
         this.props.onFinished(false);
     },
@@ -71,6 +131,24 @@ export default createReactClass({
         const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
+        // Let's pick a title, body, and other params text that we'll show to the user. The order
+        // is most specific first, so stagePhase > our props > defaults.
+
+        let title = this.state.authError ? 'Error' : (this.props.title || _t('Authentication'));
+        let body = this.state.authError ? null : this.props.body;
+        let continueText = null;
+        let continueKind = null;
+        const dialogAesthetics = this.props.aestheticsForStagePhases || this._getDefaultDialogAesthetics();
+        if (!this.state.authError && dialogAesthetics) {
+            if (dialogAesthetics[this.state.uiaStage]) {
+                const aesthetics = dialogAesthetics[this.state.uiaStage][this.state.uiaStagePhase];
+                if (aesthetics && aesthetics.title) title = aesthetics.title;
+                if (aesthetics && aesthetics.body) body = aesthetics.body;
+                if (aesthetics && aesthetics.continueText) continueText = aesthetics.continueText;
+                if (aesthetics && aesthetics.continueKind) continueKind = aesthetics.continueKind;
+            }
+        }
+
         let content;
         if (this.state.authError) {
             content = (
@@ -88,11 +166,16 @@ export default createReactClass({
         } else {
             content = (
                 <div id='mx_Dialog_content'>
-                    <InteractiveAuth ref={this._collectInteractiveAuth}
+                    {body}
+                    <InteractiveAuth
+                        ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
                         makeRequest={this.props.makeRequest}
                         onAuthFinished={this._onAuthFinished}
+                        onStagePhaseChange={this._onUpdateStagePhase}
+                        continueText={continueText}
+                        continueKind={continueKind}
                     />
                 </div>
             );
@@ -101,7 +184,7 @@ export default createReactClass({
         return (
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
-                title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+                title={title}
                 contentId='mx_Dialog_content'
             >
                 { content }

src/components/views/dialogs/KeyShareDialog.js

@@ -1,175 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-
-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 Modal from '../../../Modal';
-import React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import sdk from '../../../index';
-
-import { _t, _td } from '../../../languageHandler';
-
-/**
- * Dialog which asks the user whether they want to share their keys with
- * an unverified device.
- *
- * onFinished is called with `true` if the key should be shared, `false` if it
- * should not, and `undefined` if the dialog is cancelled. (In other words:
- * truthy: do the key share. falsy: don't share the keys).
- */
-export default createReactClass({
-    propTypes: {
-        matrixClient: PropTypes.object.isRequired,
-        userId: PropTypes.string.isRequired,
-        deviceId: PropTypes.string.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            deviceInfo: null,
-            wasNewDevice: false,
-        };
-    },
-
-    componentDidMount: function() {
-        this._unmounted = false;
-        const userId = this.props.userId;
-        const deviceId = this.props.deviceId;
-
-        // give the client a chance to refresh the device list
-        this.props.matrixClient.downloadKeys([userId], false).then((r) => {
-            if (this._unmounted) { return; }
-
-            const deviceInfo = r[userId][deviceId];
-
-            if (!deviceInfo) {
-                console.warn(`No details found for device ${userId}:${deviceId}`);
-
-                this.props.onFinished(false);
-                return;
-            }
-
-            const wasNewDevice = !deviceInfo.isKnown();
-
-            this.setState({
-                deviceInfo: deviceInfo,
-                wasNewDevice: wasNewDevice,
-            });
-
-            // if the device was new before, it's not any more.
-            if (wasNewDevice) {
-                this.props.matrixClient.setDeviceKnown(
-                    userId,
-                    deviceId,
-                    true,
-                );
-            }
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-
-    _onVerifyClicked: function() {
-        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-
-        console.log("KeyShareDialog: Starting verify dialog");
-        Modal.createTrackedDialog('Key Share', 'Starting dialog', DeviceVerifyDialog, {
-            userId: this.props.userId,
-            device: this.state.deviceInfo,
-            onFinished: (verified) => {
-                if (verified) {
-                    // can automatically share the keys now.
-                    this.props.onFinished(true);
-                }
-            },
-        }, null, /* priority = */ false, /* static = */ true);
-    },
-
-    _onShareClicked: function() {
-        console.log("KeyShareDialog: User clicked 'share'");
-        this.props.onFinished(true);
-    },
-
-    _onIgnoreClicked: function() {
-        console.log("KeyShareDialog: User clicked 'ignore'");
-        this.props.onFinished(false);
-    },
-
-    _renderContent: function() {
-        const displayName = this.state.deviceInfo.getDisplayName() ||
-            this.state.deviceInfo.deviceId;
-
-        let text;
-        if (this.state.wasNewDevice) {
-            text = _td("You added a new device '%(displayName)s', which is"
-                + " requesting encryption keys.");
-        } else {
-            text = _td("Your unverified device '%(displayName)s' is requesting"
-                + " encryption keys.");
-        }
-        text = _t(text, {displayName: displayName});
-
-        return (
-            <div id='mx_Dialog_content'>
-                <p>{ text }</p>
-
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this._onVerifyClicked} autoFocus="true">
-                        { _t('Start verification') }
-                    </button>
-                    <button onClick={this._onShareClicked}>
-                        { _t('Share without verifying') }
-                    </button>
-                    <button onClick={this._onIgnoreClicked}>
-                        { _t('Ignore request') }
-                    </button>
-                </div>
-            </div>
-        );
-    },
-
-    render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-
-        let content;
-
-        if (this.state.deviceInfo) {
-            content = this._renderContent();
-        } else {
-            content = (
-                <div id='mx_Dialog_content'>
-                    <p>{ _t('Loading device info...') }</p>
-                    <Spinner />
-                </div>
-            );
-        }
-
-        return (
-            <BaseDialog className='mx_KeyShareRequestDialog'
-                onFinished={this.props.onFinished}
-                title={_t('Encryption key request')}
-                contentId='mx_Dialog_content'
-            >
-                { content }
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/KeySignatureUploadFailedDialog.js

@@ -0,0 +1,108 @@
+/*
+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, {useState, useCallback, useRef} from 'react';
+import * as sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default function KeySignatureUploadFailedDialog({
+        failures,
+        source,
+        continuation,
+        onFinished,
+    }) {
+    const RETRIES = 2;
+    const BaseDialog = sdk.getComponent('dialogs.BaseDialog');
+    const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+    const Spinner = sdk.getComponent('elements.Spinner');
+    const [retry, setRetry] = useState(RETRIES);
+    const [cancelled, setCancelled] = useState(false);
+    const [retrying, setRetrying] = useState(false);
+    const [success, setSuccess] = useState(false);
+    const onCancel = useRef(onFinished);
+
+    const causes = new Map([
+        ["_afterCrossSigningLocalKeyChange", _t("a new master key signature")],
+        ["checkOwnCrossSigningTrust", _t("a new cross-signing key signature")],
+        ["setDeviceVerification", _t("a device cross-signing signature")],
+    ]);
+    const defaultCause = _t("a key signature");
+
+    const onRetry = useCallback(async () => {
+        try {
+            setRetrying(true);
+            const cancel = new Promise((resolve, reject) => {
+                onCancel.current = reject;
+            }).finally(() => {
+                setCancelled(true);
+            });
+            await Promise.race([
+                continuation(),
+                cancel,
+            ]);
+            setSuccess(true);
+        } catch (e) {
+            setRetry(r => r-1);
+        } finally {
+            onCancel.current = onFinished;
+            setRetrying(false);
+        }
+    }, [continuation, onFinished]);
+
+    let body;
+    if (!success && !cancelled && continuation && retry > 0) {
+        const reason = causes.get(source) || defaultCause;
+
+        body = (<div>
+            <p>{_t("Riot encountered an error during upload of:")}</p>
+            <p>{reason}</p>
+            {retrying && <Spinner />}
+            <pre>{JSON.stringify(failures, null, 2)}</pre>
+            <DialogButtons
+                primaryButton='Retry'
+                hasCancel={true}
+                onPrimaryButtonClick={onRetry}
+                onCancel={onCancel.current}
+                primaryDisabled={retrying}
+            />
+        </div>);
+    } else {
+        body = (<div>
+            {success ?
+              <span>{_t("Upload completed")}</span> :
+              cancelled ?
+                <span>{_t("Cancelled signature upload")}</span> :
+                <span>{_t("Unable to upload")}</span>}
+            <DialogButtons
+                primaryButton={_t("OK")}
+                hasCancel={false}
+                onPrimaryButtonClick={onFinished}
+            />
+        </div>);
+    }
+
+    return (
+        <BaseDialog
+            title={success ?
+                _t("Signature upload success") :
+                _t("Signature upload failed")}
+            fixedWidth={false}
+            onFinished={() => {}}
+        >
+            {body}
+        </BaseDialog>
+    );
+}

src/components/views/dialogs/LogoutDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2018, 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.
@@ -16,11 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import Modal from '../../../Modal';
-import sdk from '../../../index';
-import dis from '../../../dispatcher';
+import * as sdk from '../../../index';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import SettingsStore from "../../../settings/SettingsStore";
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 
 export default class LogoutDialog extends React.Component {
     defaultProps = {
@@ -35,8 +35,8 @@ export default class LogoutDialog extends React.Component {
         this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
         this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
 
-        const lowBandwidth = SettingsStore.getValue("lowBandwidth");
-        const shouldLoadBackupStatus = !lowBandwidth && !MatrixClientPeg.get().getKeyBackupEnabled();
+        const cli = MatrixClientPeg.get();
+        const shouldLoadBackupStatus = cli.isCryptoEnabled() && !cli.getKeyBackupEnabled();
 
         this.state = {
             shouldLoadBackupStatus: shouldLoadBackupStatus,
@@ -94,10 +94,14 @@ export default class LogoutDialog extends React.Component {
             // verified, so restore the backup which will give us the keys from it and
             // allow us to trust it (ie. upload keys to it)
             const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
-            Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {});
+            Modal.createTrackedDialog(
+                'Restore Backup', '', RestoreKeyBackupDialog, null, null,
+                /* priority = */ false, /* static = */ true,
+            );
         } else {
             Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
                 import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
+                null, null, /* priority = */ false, /* static = */ true,
             );
         }
 
@@ -133,7 +137,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/ManualDeviceKeyVerificationDialog.js

@@ -0,0 +1,86 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2019 New Vector Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 * as FormattingUtils from '../../../utils/FormattingUtils';
+import { _t } from '../../../languageHandler';
+
+export default class ManualDeviceKeyVerificationDialog extends React.Component {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    _onLegacyFinished = (confirm) => {
+        if (confirm) {
+            MatrixClientPeg.get().setDeviceVerified(
+                this.props.userId, this.props.device.deviceId, true,
+            );
+        }
+        this.props.onFinished(confirm);
+    }
+
+    render() {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+        let text;
+        if (MatrixClientPeg.get().getUserId() === this.props.userId) {
+            text = _t("Confirm by comparing the following with the User Settings in your other session:");
+        } else {
+            text = _t("Confirm this user's session by comparing the following with their User Settings:");
+        }
+
+        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
+        const body = (
+            <div>
+                <p>
+                    { text }
+                </p>
+                <div className="mx_DeviceVerifyDialog_cryptoSection">
+                    <ul>
+                        <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 they don't match, the security of your communication may be compromised.") }
+                </p>
+            </div>
+        );
+
+        return (
+            <QuestionDialog
+                title={_t("Verify session")}
+                description={body}
+                button={_t("Verify session")}
+                onFinished={this._onLegacyFinished}
+            />
+        );
+    }
+}

src/components/views/dialogs/MessageEditHistoryDialog.js

@@ -16,9 +16,9 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 import {wantsDateSeparator} from '../../../DateUtils';
 import SettingsStore from '../../../settings/SettingsStore';
 

src/components/views/dialogs/NewSessionReviewDialog.js

@@ -0,0 +1,117 @@
+/*
+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 = () => {
+        const { userId, device } = this.props;
+        const cli = MatrixClientPeg.get();
+        const requestPromise = cli.requestVerification(
+            userId,
+            [device.deviceId],
+        );
+
+        this.props.onFinished(true);
+        Modal.createTrackedDialog('New Session Verification', 'Starting dialog', VerificationRequestDialog, {
+            verificationRequestPromise: requestPromise,
+            member: cli.getUser(userId),
+        });
+    }
+
+    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

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default createReactClass({
@@ -31,6 +31,9 @@ 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].
+        fixedWidth: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -41,6 +44,7 @@ export default createReactClass({
             focus: true,
             hasCancelButton: true,
             danger: false,
+            quitOnly: false,
         };
     },
 
@@ -60,10 +64,14 @@ export default createReactClass({
             primaryButtonClass = "danger";
         }
         return (
-            <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
+            <BaseDialog
+                className="mx_QuestionDialog"
+                onFinished={this.props.onFinished}
                 title={this.props.title}
                 contentId='mx_Dialog_content'
+                headerImage={this.props.headerImage}
                 hasCancel={this.props.hasCancelButton}
+                fixedWidth={this.props.fixedWidth}
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     { this.props.description }
@@ -71,7 +79,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

@@ -15,11 +15,13 @@ limitations under the License.
 */
 
 import React, {PureComponent} from 'react';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import PropTypes from "prop-types";
 import {MatrixEvent} from "matrix-js-sdk";
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import SdkConfig from '../../../SdkConfig';
+import Markdown from '../../../Markdown';
 
 /*
  * A dialog for reporting an event.
@@ -30,8 +32,8 @@ export default class ReportEventDialog extends PureComponent {
         onFinished: PropTypes.func.isRequired,
     };
 
-    constructor(props, context) {
-        super(props, context);
+    constructor(props) {
+        super(props);
 
         this.state = {
             reason: "",
@@ -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,9 +121,8 @@ 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"
                         element="textarea"
                         label={_t("Reason")}

src/components/views/dialogs/RoomSettingsDialog.js

@@ -17,16 +17,18 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Tab, TabbedView} from "../../structures/TabbedView";
+import TabbedView, {Tab} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
 import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
 import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
 import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
 import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsTab";
-import sdk from "../../../index";
-import MatrixClientPeg from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
+import * as sdk from "../../../index";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import dis from "../../../dispatcher/dispatcher";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
@@ -34,12 +36,12 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    componentWillMount() {
+    componentDidMount() {
         this._dispatcherRef = dis.register(this._onAction);
     }
 
     componentWillUnmount() {
-        dis.unregister(this._dispatcherRef);
+        if (this._dispatcherRef) dis.unregister(this._dispatcherRef);
     }
 
     _onAction = (payload) => {
@@ -70,9 +72,18 @@ export default class RoomSettingsDialog extends React.Component {
         ));
         tabs.push(new Tab(
             _td("Notifications"),
-            "mx_RoomSettingsDialog_rolesIcon",
+            "mx_RoomSettingsDialog_notificationsIcon",
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
+
+        if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
+            tabs.push(new Tab(
+                _td("Bridges"),
+                "mx_RoomSettingsDialog_bridgesIcon",
+                <BridgeSettingsTab roomId={this.props.roomId} />,
+            ));
+        }
+
         tabs.push(new Tab(
             _td("Advanced"),
             "mx_RoomSettingsDialog_warningIcon",

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -17,8 +17,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
@@ -30,7 +30,7 @@ export default createReactClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: async function() {
+    componentDidMount: async function() {
         const recommended = await this.props.room.getRecommendedVersion();
         this._targetVersion = recommended.version;
         this.setState({busy: false});

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -17,9 +17,9 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import Modal from "../../../Modal";
 
 export default class RoomUpgradeWarningDialog extends React.Component {

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';

src/components/views/dialogs/SetEmailDialog.js

@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import Email from '../../../email';
+import * as sdk from '../../../index';
+import * as Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';

src/components/views/dialogs/SetMxIdDialog.js

@@ -18,8 +18,8 @@ limitations under the License.
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import classnames from 'classnames';
 import { Key } from '../../../Keyboard';
 import { _t } from '../../../languageHandler';
@@ -62,6 +62,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._input_value = createRef();
         this._uiAuth = createRef();

src/components/views/dialogs/SetPasswordDialog.js

@@ -19,7 +19,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 
@@ -75,8 +75,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
-        console.info('SetPasswordDialog component will mount');
+    componentDidMount: function() {
+        console.info('SetPasswordDialog component did mount');
     },
 
     _onPasswordChanged: function(res) {
@@ -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/SetupEncryptionDialog.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 SetupEncryptionBody from '../../structures/auth/SetupEncryptionBody';
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import { SetupEncryptionStore, PHASE_DONE } from '../../../stores/SetupEncryptionStore';
+
+function iconFromPhase(phase) {
+    if (phase === PHASE_DONE) {
+        return require("../../../../res/img/e2e/verified.svg");
+    } else {
+        return require("../../../../res/img/e2e/warning.svg");
+    }
+}
+
+export default class SetupEncryptionDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.store = SetupEncryptionStore.sharedInstance();
+        this.state = {icon: iconFromPhase(this.store.phase)};
+    }
+
+    componentDidMount() {
+        this.store.on("update", this._onStoreUpdate);
+    }
+
+    componentWillUnmount() {
+        this.store.removeListener("update", this._onStoreUpdate);
+    }
+
+    _onStoreUpdate = () => {
+        this.setState({icon: iconFromPhase(this.store.phase)});
+    };
+
+    render() {
+        return <BaseDialog
+            headerImage={this.state.icon}
+            onFinished={this.props.onFinished}
+            title={_t("Verify this session")}
+        >
+            <SetupEncryptionBody onFinished={this.props.onFinished} />
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/ShareDialog.tsx

@@ -1,5 +1,6 @@
 /*
 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.
@@ -14,15 +15,20 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, {createRef} from 'react';
-import PropTypes from 'prop-types';
-import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
-import sdk from '../../../index';
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {Room} from "matrix-js-sdk/src/models/room";
+import {User} from "matrix-js-sdk/src/models/user";
+import {Group} from "matrix-js-sdk/src/models/group";
+import {RoomMember} from "matrix-js-sdk/src/models/room-member";
+import {MatrixEvent} from "matrix-js-sdk/src/models/event";
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import QRCode from 'qrcode-react';
+import QRCode from "../elements/QRCode";
 import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../utils/permalinks/Permalinks";
 import * as ContextMenu from "../../structures/ContextMenu";
 import {toRightOf} from "../../structures/ContextMenu";
+import {copyPlaintext, selectText} from "../../../utils/strings";
 
 const socials = [
     {
@@ -52,7 +58,18 @@ const socials = [
     },
 ];
 
-export default class ShareDialog extends React.Component {
+interface IProps {
+    onFinished: () => void;
+    target: Room | User | Group | RoomMember | MatrixEvent;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+interface IState {
+    linkSpecificEvent: boolean;
+    permalinkCreator: RoomPermalinkCreator;
+}
+
+export default class ShareDialog extends React.PureComponent<IProps, IState> {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
         target: PropTypes.oneOfType([
@@ -64,55 +81,45 @@ export default class ShareDialog extends React.Component {
         ]).isRequired,
     };
 
+    protected closeCopiedTooltip: () => void;
+
     constructor(props) {
         super(props);
 
         this.onCopyClick = this.onCopyClick.bind(this);
         this.onLinkSpecificEventCheckboxClick = this.onLinkSpecificEventCheckboxClick.bind(this);
 
+        let permalinkCreator: RoomPermalinkCreator = null;
+        if (props.target instanceof Room) {
+            permalinkCreator = new RoomPermalinkCreator(props.target);
+            permalinkCreator.load();
+        }
+
         this.state = {
             // MatrixEvent defaults to share linkSpecificEvent
             linkSpecificEvent: this.props.target instanceof MatrixEvent,
+            permalinkCreator,
         };
-
-        this._link = createRef();
-    }
-
-    static _selectText(target) {
-        const range = document.createRange();
-        range.selectNodeContents(target);
-
-        const selection = window.getSelection();
-        selection.removeAllRanges();
-        selection.addRange(range);
     }
 
     static onLinkClick(e) {
         e.preventDefault();
-        const {target} = e;
-        ShareDialog._selectText(target);
+        selectText(e.target);
     }
 
-    onCopyClick(e) {
+    async onCopyClick(e) {
         e.preventDefault();
+        const target = e.target; // copy target before we go async and React throws it away
 
-        ShareDialog._selectText(this._link.current);
-
-        let successful;
-        try {
-            successful = document.execCommand('copy');
-        } catch (err) {
-            console.error('Failed to copy: ', err);
-        }
-
-        const buttonRect = e.target.getBoundingClientRect();
+        const successful = await copyPlaintext(this.getUrl());
+        const buttonRect = target.getBoundingClientRect();
         const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
         const {close} = ContextMenu.createMenu(GenericTextContextMenu, {
             ...toRightOf(buttonRect, 2),
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         });
         // Drop a reference to this close handler for componentWillUnmount
-        this.closeCopiedTooltip = e.target.onmouseleave = close;
+        this.closeCopiedTooltip = target.onmouseleave = close;
     }
 
     onLinkSpecificEventCheckboxClick() {
@@ -121,24 +128,38 @@ export default class ShareDialog extends React.Component {
         });
     }
 
-    componentWillMount() {
-        if (this.props.target instanceof Room) {
-            const permalinkCreator = new RoomPermalinkCreator(this.props.target);
-            permalinkCreator.load();
-            this.setState({permalinkCreator});
-        }
-    }
-
     componentWillUnmount() {
         // if the Copied tooltip is open then get rid of it, there are ways to close the modal which wouldn't close
         // the tooltip otherwise, such as pressing Escape or clicking X really quickly
         if (this.closeCopiedTooltip) this.closeCopiedTooltip();
     }
 
-    render() {
-        let title;
+    getUrl() {
         let matrixToUrl;
 
+        if (this.props.target instanceof Room) {
+            if (this.state.linkSpecificEvent) {
+                const events = this.props.target.getLiveTimeline().getEvents();
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
+            } else {
+                matrixToUrl = this.state.permalinkCreator.forRoom();
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
+            } else {
+                matrixToUrl = this.props.permalinkCreator.forRoom();
+            }
+        }
+        return matrixToUrl;
+    }
+
+    render() {
+        let title;
         let checkbox;
 
         if (this.props.target instanceof Room) {
@@ -156,18 +177,10 @@ export default class ShareDialog extends React.Component {
                     </label>
                 </div>;
             }
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
-            } else {
-                matrixToUrl = this.state.permalinkCreator.forRoom();
-            }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
-            matrixToUrl = makeUserPermalink(this.props.target.userId);
         } else if (this.props.target instanceof Group) {
             title = _t('Share Community');
-            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
         } else if (this.props.target instanceof MatrixEvent) {
             title = _t('Share Room Message');
             checkbox = <div>
@@ -179,14 +192,9 @@ export default class ShareDialog extends React.Component {
                     { _t('Link to selected message') }
                 </label>
             </div>;
-
-            if (this.state.linkSpecificEvent) {
-                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
-            } else {
-                matrixToUrl = this.props.permalinkCreator.forRoom();
-            }
         }
 
+        const matrixToUrl = this.getUrl();
         const encodedUrl = encodeURIComponent(matrixToUrl);
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
@@ -197,8 +205,7 @@ export default class ShareDialog extends React.Component {
         >
             <div className="mx_ShareDialog_content">
                 <div className="mx_ShareDialog_matrixto">
-                    <a ref={this._link}
-                       href={matrixToUrl}
+                    <a href={matrixToUrl}
                        onClick={ShareDialog.onLinkClick}
                        className="mx_ShareDialog_matrixto_link"
                     >
@@ -214,20 +221,21 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
+                        <QRCode data={matrixToUrl} width={256} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
-                        {
-                            socials.map((social) => <a rel="noopener"
-                                                       target="_blank"
-                                                       key={social.name}
-                                                       name={social.name}
-                                                       href={social.url(encodedUrl)}
-                                                       className="mx_ShareDialog_social_icon"
+                        { socials.map((social) => (
+                            <a
+                                rel="noreferrer noopener"
+                                target="_blank"
+                                key={social.name}
+                                title={social.name}
+                                href={social.url(encodedUrl)}
+                                className="mx_ShareDialog_social_icon"
                             >
                                 <img src={social.img} alt={social.name} height={64} width={64} />
-                            </a>)
-                        }
+                            </a>
+                        )) }
                     </div>
                 </div>
             </div>

src/components/views/dialogs/SlashCommandHelpDialog.js

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

src/components/views/dialogs/StorageEvictedDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';

src/components/views/dialogs/TabbedIntegrationManagerDialog.js

@@ -18,10 +18,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import {Room} from "matrix-js-sdk";
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import {dialogTermsInteractionCallback, TermsNotSignedError} from "../../../Terms";
 import classNames from 'classnames';
-import ScalarMessaging from "../../../ScalarMessaging";
+import * as ScalarMessaging from "../../../ScalarMessaging";
 
 export default class TabbedIntegrationManagerDialog extends React.Component {
     static propTypes = {

src/components/views/dialogs/TermsDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 import url from 'url';
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t, pickBestLanguage } from '../../../languageHandler';
 
 import Matrix from 'matrix-js-sdk';
@@ -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/TextInputDialog.js

@@ -17,7 +17,8 @@ limitations under the License.
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
+import Field from "../elements/Field";
 
 export default createReactClass({
     displayName: 'TextInputDialog',
@@ -28,9 +29,13 @@ export default createReactClass({
             PropTypes.string,
         ]),
         value: PropTypes.string,
+        placeholder: PropTypes.string,
         button: PropTypes.string,
         focus: PropTypes.bool,
         onFinished: PropTypes.func.isRequired,
+        hasCancel: PropTypes.bool,
+        validator: PropTypes.func, // result of withValidation
+        fixedWidth: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -39,34 +44,71 @@ export default createReactClass({
             value: "",
             description: "",
             focus: true,
+            hasCancel: true,
         };
     },
 
+    getInitialState: function() {
+        return {
+            value: this.props.value,
+            valid: false,
+        };
+    },
+
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
-        this._textinput = createRef();
+        this._field = createRef();
     },
 
     componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
-            this._textinput.current.value = this.props.value;
+            // this._field.current.value = this.props.value;
+            this._field.current.focus();
         }
     },
 
-    onOk: function() {
-        this.props.onFinished(true, this._textinput.current.value);
+    onOk: async function(ev) {
+        ev.preventDefault();
+        if (this.props.validator) {
+            await this._field.current.validate({ allowEmpty: false });
+
+            if (!this._field.current.state.valid) {
+                this._field.current.focus();
+                this._field.current.validate({ allowEmpty: false, focused: true });
+                return;
+            }
+        }
+        this.props.onFinished(true, this.state.value);
     },
 
     onCancel: function() {
         this.props.onFinished(false);
     },
 
+    onChange: function(ev) {
+        this.setState({
+            value: ev.target.value,
+        });
+    },
+
+    onValidate: async function(fieldState) {
+        const result = await this.props.validator(fieldState);
+        this.setState({
+            valid: result.valid,
+        });
+        return result;
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
-            <BaseDialog className="mx_TextInputDialog" onFinished={this.props.onFinished}
+            <BaseDialog
+                className="mx_TextInputDialog"
+                onFinished={this.props.onFinished}
                 title={this.props.title}
+                fixedWidth={this.props.fixedWidth}
             >
                 <form onSubmit={this.onOk}>
                     <div className="mx_Dialog_content">
@@ -74,19 +116,25 @@ export default createReactClass({
                             <label htmlFor="textinput"> { this.props.description } </label>
                         </div>
                         <div>
-                            <input
-                                id="textinput"
-                                ref={this._textinput}
+                            <Field
                                 className="mx_TextInputDialog_input"
-                                defaultValue={this.props.value}
-                                autoFocus={this.props.focus}
-                                size="64" />
+                                ref={this._field}
+                                type="text"
+                                label={this.props.placeholder}
+                                value={this.state.value}
+                                onChange={this.onChange}
+                                onValidate={this.props.validator ? this.onValidate : undefined}
+                                size="64"
+                            />
                         </div>
                     </div>
                 </form>
-                <DialogButtons primaryButton={this.props.button}
+                <DialogButtons
+                    primaryButton={this.props.button}
                     onPrimaryButtonClick={this.onOk}
-                    onCancel={this.onCancel} />
+                    onCancel={this.onCancel}
+                    hasCancel={this.props.hasCancel}
+                />
             </BaseDialog>
         );
     },

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -18,8 +18,8 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { markAllDevicesKnown } from '../../../cryptodevices';
@@ -87,7 +87,7 @@ export default createReactClass({
         onSend: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
     },
 
@@ -122,7 +122,6 @@ export default createReactClass({
     },
 
     render: function() {
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         if (this.props.devices === null) {
             const Spinner = sdk.getComponent("elements.Spinner");
             return <Spinner />;
@@ -132,8 +131,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 +140,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,18 +164,18 @@ 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'>
+                <div 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>
+                </div>
                 <DialogButtons primaryButton={sendButtonLabel}
                     onPrimaryButtonClick={sendButtonOnClick}
                     onCancel={this._onDismissClicked} />

src/components/views/dialogs/UploadConfirmDialog.js

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import filesize from "filesize";
 

src/components/views/dialogs/UploadFailureDialog.js

@@ -18,7 +18,7 @@ import filesize from 'filesize';
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import ContentMessages from '../../../ContentMessages';
 

src/components/views/dialogs/UserSettingsDialog.js

@@ -17,18 +17,19 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {Tab, TabbedView} from "../../structures/TabbedView";
+import TabbedView, {Tab} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
 import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore from "../../../settings/SettingsStore";
 import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import AppearanceUserSettingsTab from "../settings/tabs/user/AppearanceUserSettingsTab";
 import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
 import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
 import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
 import VoiceUserSettingsTab from "../settings/tabs/user/VoiceUserSettingsTab";
 import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
 import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 
@@ -66,6 +67,11 @@ export default class UserSettingsDialog extends React.Component {
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
+        tabs.push(new Tab(
+            _td("Appearance"),
+            "mx_UserSettingsDialog_appearanceIcon",
+            <AppearanceUserSettingsTab />,
+        ));
         tabs.push(new Tab(
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
@@ -89,7 +95,7 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
-            <SecurityUserSettingsTab />,
+            <SecurityUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         if (SdkConfig.get()['showLabsSettings'] || SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(

src/components/views/dialogs/VerificationRequestDialog.js

@@ -0,0 +1,76 @@
+/*
+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,
+        verificationRequestPromise: PropTypes.object,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(...args) {
+        super(...args);
+        this.onFinished = this.onFinished.bind(this);
+        this.state = {};
+        if (this.props.verificationRequest) {
+            this.state.verificationRequest = this.props.verificationRequest;
+        } else if (this.props.verificationRequestPromise) {
+            this.props.verificationRequestPromise.then(r => {
+                this.setState({verificationRequest: r});
+            });
+        }
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent("views.dialogs.BaseDialog");
+        const EncryptionPanel = sdk.getComponent("views.right_panel.EncryptionPanel");
+        const request = this.state.verificationRequest;
+        const otherUserId = request && request.otherUserId;
+        const member = this.props.member ||
+            otherUserId && MatrixClientPeg.get().getUser(otherUserId);
+        const title = request && request.isSelfVerification ?
+            _t("Verify other session") : _t("Verification Request");
+
+        return <BaseDialog className="mx_InfoDialog" onFinished={this.onFinished}
+                contentId="mx_Dialog_content"
+                title={title}
+                hasCancel={true}
+            >
+            <EncryptionPanel
+                layout="dialog"
+                verificationRequest={this.props.verificationRequest}
+                verificationRequestPromise={this.props.verificationRequestPromise}
+                onClose={this.props.onFinished}
+                member={member}
+            />
+        </BaseDialog>;
+    }
+
+    async onFinished() {
+        this.props.onFinished();
+        let request = this.props.verificationRequest;
+        if (!request && this.props.verificationRequestPromise) {
+            request = await this.props.verificationRequestPromise;
+        }
+        request.cancel();
+    }
+}

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import WidgetUtils from "../../../utils/WidgetUtils";
 

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

@@ -1,5 +1,6 @@
 /*
 Copyright 2018, 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.
@@ -15,26 +16,41 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
-import Modal from '../../../../Modal';
-
+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';
+import SettingsStore from "../../../../settings/SettingsStore";
 
 const RESTORE_TYPE_PASSPHRASE = 0;
 const RESTORE_TYPE_RECOVERYKEY = 1;
+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,
+        // If specified, gather the key from the user but then call the function with the backup
+        // key rather than actually (necessarily) restoring the backup.
+        keyCallback: PropTypes.func,
+    };
+
+    static defaultProps = {
+        showSummary: true,
+    };
+
     constructor(props) {
         super(props);
         this.state = {
             backupInfo: null,
+            backupKeyStored: null,
             loading: false,
             loadError: null,
             restoreError: null,
@@ -44,6 +60,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             restoreType: null,
+            progress: { stage: "prefetch" },
         };
     }
 
@@ -65,16 +82,29 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
+    _progressCallback = (data) => {
+        this.setState({
+            progress: data,
+        });
+    }
+
     _onResetRecoveryClick = () => {
         this.props.onFinished(false);
-        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
-            import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
-            {
-                onFinished: () => {
-                    this._loadBackupStatus();
-                },
-            },
-        );
+
+        if (SettingsStore.getValue("feature_cross_signing")) {
+            // If cross-signing is enabled, we reset the SSSS recovery passphrase (and cross-signing keys)
+            this.props.onFinished(false);
+            accessSecretStorage(() => {}, /* forceReset = */ true);
+        } else {
+            Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
+                import('../../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
+                {
+                    onFinished: () => {
+                        this._loadBackupStatus();
+                    },
+                }, null, /* priority = */ false, /* static = */ true,
+            );
+        }
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -91,9 +121,23 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             restoreType: RESTORE_TYPE_PASSPHRASE,
         });
         try {
+            // We do still restore the key backup: we must ensure that the key backup key
+            // is the right one and restoring it is currently the only way we can do this.
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
                 this.state.passPhrase, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
+            if (this.props.keyCallback) {
+                const key = await MatrixClientPeg.get().keyBackupKeyFromPassword(
+                    this.state.passPhrase, this.state.backupInfo,
+                );
+                this.props.keyCallback(key);
+            }
+
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -108,6 +152,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
     }
 
     _onRecoveryKeyNext = async () => {
+        if (!this.state.recoveryKeyValid) return;
+
         this.setState({
             loading: true,
             restoreError: null,
@@ -116,7 +162,16 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
                 this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
+                { progressCallback: this._progressCallback },
             );
+            if (this.props.keyCallback) {
+                const key = MatrixClientPeg.get().keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
+                this.props.keyCallback(key);
+            }
+            if (!this.props.showSummary) {
+                this.props.onFinished(true);
+                return;
+            }
             this.setState({
                 loading: false,
                 recoverInfo,
@@ -136,15 +191,49 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
     }
 
-    _onPassPhraseKeyPress = (e) => {
-        if (e.key === Key.ENTER) {
-            this._onPassPhraseNext();
+    async _restoreWithSecretStorage() {
+        this.setState({
+            loading: true,
+            restoreError: null,
+            restoreType: RESTORE_TYPE_SECRET_STORAGE,
+        });
+        try {
+            // `accessSecretStorage` may prompt for storage access as needed.
+            const recoverInfo = await accessSecretStorage(async () => {
+                return MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
+                    this.state.backupInfo, undefined, undefined,
+                    { progressCallback: this._progressCallback },
+                );
+            });
+            this.setState({
+                loading: false,
+                recoverInfo,
+            });
+        } catch (e) {
+            console.log("Error restoring backup", e);
+            this.setState({
+                restoreError: e,
+                loading: false,
+            });
         }
     }
 
-    _onRecoveryKeyKeyPress = (e) => {
-        if (e.key === Key.ENTER && this.state.recoveryKeyValid) {
-            this._onRecoveryKeyNext();
+    async _restoreWithCachedKey(backupInfo) {
+        if (!backupInfo) return false;
+        try {
+            const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithCache(
+                undefined, /* targetRoomId */
+                undefined, /* targetSessionId */
+                backupInfo,
+                { progressCallback: this._progressCallback },
+            );
+            this.setState({
+                recoverInfo,
+            });
+            return true;
+        } catch (e) {
+            console.log("restoreWithCachedKey failed:", e);
+            return false;
         }
     }
 
@@ -155,10 +244,29 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         });
         try {
             const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            const backupKeyStored = await MatrixClientPeg.get().isKeyBackupKeyStored();
+            this.setState({
+                backupInfo,
+                backupKeyStored,
+            });
+
+            const gotCache = await this._restoreWithCachedKey(backupInfo);
+            if (gotCache) {
+                console.log("RestoreKeyBackupDialog: found cached backup key");
+                this.setState({
+                    loading: false,
+                });
+                return;
+            }
+
+            // If the backup key is stored, we can proceed directly to restore.
+            if (backupKeyStored) {
+                return this._restoreWithSecretStorage();
+            }
+
             this.setState({
                 loadError: null,
                 loading: false,
-                backupInfo,
             });
         } catch (e) {
             console.log("Error loading backup status", e);
@@ -183,26 +291,38 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
         let content;
         let title;
         if (this.state.loading) {
-            title = _t("Loading...");
-            content = <Spinner />;
+            title = _t("Restoring keys from backup");
+            let details;
+            if (this.state.progress.stage === "fetch") {
+                details = _t("Fetching keys from server...");
+            } else if (this.state.progress.stage === "load_keys") {
+                const { total, successes, failures } = this.state.progress;
+                details = _t("%(completed)s of %(total)s keys restored", { total, completed: successes + failures });
+            } else if (this.state.progress.stage === "prefetch") {
+                details = _t("Fetching keys from server...");
+            }
+            content = <div>
+                <div>{details}</div>
+                <Spinner />
+            </div>;
         } else if (this.state.loadError) {
             title = _t("Error");
             content = _t("Unable to load backup status");
         } 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: " +
+                            "Backup could not be decrypted with this recovery key: " +
                             "please verify that you entered the correct recovery key.",
                         )}</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: " +
+                            "Backup could not be decrypted with this recovery passphrase: " +
                             "please verify that you entered the correct recovery passphrase.",
                         )}</p>
                     </div>;
@@ -215,7 +335,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("Keys restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -224,13 +345,18 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 )}</p>;
             }
             content = <div>
-                <p>{_t("Restored %(sessionCount)s session keys", {sessionCount: this.state.recoverInfo.imported})}</p>
+                <p>{_t("Successfully restored %(sessionCount)s 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 " +
@@ -242,21 +368,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 " +
@@ -277,7 +404,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');
 
@@ -308,7 +435,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}
                     />
@@ -340,7 +466,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 onFinished={this.props.onFinished}
                 title={title}
             >
-            <div>
+            <div className='mx_RestoreKeyBackupDialog_content'>
                 {content}
             </div>
             </BaseDialog>

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.
@@ -17,11 +17,11 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from "prop-types";
-import sdk from '../../../../index';
-import MatrixClientPeg from '../../../../MatrixClientPeg';
+import * as sdk from '../../../../index';
+import {MatrixClientPeg} from '../../../../MatrixClientPeg';
 
 import { _t } from '../../../../languageHandler';
-import { Key } from "../../../../Keyboard";
+import { accessSecretStorage } from '../../../../CrossSigningManager';
 
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
@@ -56,8 +56,9 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
     }
 
     _onResetRecoveryClick = () => {
+        // Re-enter the access flow, but resetting storage this time around.
         this.props.onFinished(false);
-        throw new Error("Resetting secret storage unimplemented");
+        accessSecretStorage(() => {}, /* forceReset = */ true);
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -68,7 +69,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 +84,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 +106,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');
 
@@ -124,50 +121,51 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         if (hasPassphrase && !this.state.forceRecoveryKey) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-            title = _t("Enter secret storage passphrase");
+            title = _t("Enter recovery passphrase");
 
             let keyStatus;
             if (this.state.keyMatches === false) {
                 keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus">
                     {"\uD83D\uDC4E "}{_t(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct passphrase.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you entered the correct recovery passphrase.",
                     )}
                 </div>;
             } else {
-                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus"></div>;
+                keyStatus = <div className="mx_AccessSecretStorageDialog_keyStatus" />;
             }
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</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 recovery 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 "+
+                    "If you've forgotten your recovery passphrase you can "+
                     "<button1>use your recovery key</button1> or " +
                     "<button2>set up new recovery options</button2>."
                 , {}, {
@@ -186,24 +184,24 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                 })}
             </div>;
         } else {
-            title = _t("Enter secret storage recovery key");
+            title = _t("Enter recovery key");
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
             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(
-                        "Unable to access secret storage. Please verify that you " +
-                        "entered the correct recovery key.",
+                        "Unable to access secret storage. " +
+                        "Please verify that you 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")}
@@ -212,31 +210,30 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
             content = <div>
                 <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
+                    "<b>Warning</b>: You should only do this on a trusted computer.", {},
                     { b: sub => <b>{sub}</b> },
                 )}</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/directory/NetworkDropdown.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,241 +16,275 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+import {
+    ContextMenu,
+    useContextMenu,
+    ContextMenuButton,
+    MenuItemRadio,
+    MenuItem,
+    MenuGroup,
+} from "../../structures/ContextMenu";
+import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
+import {useSettingValue} from "../../../hooks/useSettings";
+import * as sdk from "../../../index";
+import Modal from "../../../Modal";
+import SettingsStore from "../../../settings/SettingsStore";
+import withValidation from "../elements/Validation";
 
-const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
+export const ALL_ROOMS = Symbol("ALL_ROOMS");
 
-export default class NetworkDropdown extends React.Component {
-    constructor(props) {
-        super(props);
+const SETTING_NAME = "room_directory_servers";
 
-        this.dropdownRootElement = null;
-        this.ignoreEvent = null;
+const inPlaceOf = (elementRect) => ({
+    right: window.innerWidth - elementRect.right,
+    top: elementRect.top,
+    chevronOffset: 0,
+    chevronFace: "none",
+});
 
-        this.onInputClick = this.onInputClick.bind(this);
-        this.onRootClick = this.onRootClick.bind(this);
-        this.onDocumentClick = this.onDocumentClick.bind(this);
-        this.onMenuOptionClick = this.onMenuOptionClick.bind(this);
-        this.onInputKeyUp = this.onInputKeyUp.bind(this);
-        this.collectRoot = this.collectRoot.bind(this);
-        this.collectInputTextBox = this.collectInputTextBox.bind(this);
+const validServer = withValidation({
+    rules: [
+        {
+            key: "required",
+            test: async ({ value }) => !!value,
+            invalid: () => _t("Enter a server name"),
+        }, {
+            key: "available",
+            final: true,
+            test: async ({ value }) => {
+                try {
+                    const opts = {
+                        limit: 1,
+                        server: value,
+                    };
+                    // check if we can successfully load this server's room directory
+                    await MatrixClientPeg.get().publicRooms(opts);
+                    return true;
+                } catch (e) {
+                    return false;
+                }
+            },
+            valid: () => _t("Looks good"),
+            invalid: () => _t("Can't find this server or its room list"),
+        },
+    ],
+});
 
-        this.inputTextBox = null;
+// This dropdown sources homeservers from three places:
+// + your currently connected homeserver
+// + homeservers in config.json["roomDirectory"]
+// + homeservers in SettingsStore["room_directory_servers"]
+// if a server exists in multiple, only keep the top-most entry.
 
-        const server = MatrixClientPeg.getHomeserverName();
-        this.state = {
-            expanded: false,
-            selectedServer: server,
-            selectedInstanceId: null,
-            includeAllNetworks: false,
+const NetworkDropdown = ({onOptionChange, protocols = {}, selectedServerName, selectedInstanceId}) => {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+    const _userDefinedServers = useSettingValue(SETTING_NAME);
+    const [userDefinedServers, _setUserDefinedServers] = useState(_userDefinedServers);
+
+    const handlerFactory = (server, instanceId) => {
+        return () => {
+            onOptionChange(server, instanceId);
+            closeMenu();
         };
-    }
+    };
 
-    componentWillMount() {
-        // Listen for all clicks on the document so we can close the
-        // menu when the user clicks somewhere else
-        document.addEventListener('click', this.onDocumentClick, false);
+    const setUserDefinedServers = servers => {
+        _setUserDefinedServers(servers);
+        SettingsStore.setValue(SETTING_NAME, null, "account", servers);
+    };
+    // keep local echo up to date with external changes
+    useEffect(() => {
+        _setUserDefinedServers(_userDefinedServers);
+    }, [_userDefinedServers]);
 
-        // fire this now so the defaults can be set up
-        const {selectedServer, selectedInstanceId, includeAllNetworks} = this.state;
-        this.props.onOptionChange(selectedServer, selectedInstanceId, includeAllNetworks);
-    }
+    // we either show the button or the dropdown in its place.
+    let content;
+    if (menuDisplayed) {
+        const config = SdkConfig.get();
+        const roomDirectory = config.roomDirectory || {};
 
-    componentWillUnmount() {
-        document.removeEventListener('click', this.onDocumentClick, false);
-    }
+        const hsName = MatrixClientPeg.getHomeserverName();
+        const configServers = new Set(roomDirectory.servers);
 
-    componentDidUpdate() {
-        if (this.state.expanded && this.inputTextBox) {
-            this.inputTextBox.focus();
-        }
-    }
-
-    onDocumentClick(ev) {
-        // Close the dropdown if the user clicks anywhere that isn't
-        // within our root element
-        if (ev !== this.ignoreEvent) {
-            this.setState({
-                expanded: false,
-            });
-        }
-    }
-
-    onRootClick(ev) {
-        // This captures any clicks that happen within our elements,
-        // such that we can then ignore them when they're seen by the
-        // click listener on the document handler, ie. not close the
-        // dropdown immediately after opening it.
-        // NB. We can't just stopPropagation() because then the event
-        // doesn't reach the React onClick().
-        this.ignoreEvent = ev;
-    }
-
-    onInputClick(ev) {
-        this.setState({
-            expanded: !this.state.expanded,
-        });
-        ev.preventDefault();
-    }
-
-    onMenuOptionClick(server, instance, includeAll) {
-        this.setState({
-            expanded: false,
-            selectedServer: server,
-            selectedInstanceId: instance ? instance.instance_id : null,
-            includeAllNetworks: includeAll,
-        });
-        this.props.onOptionChange(server, instance ? instance.instance_id : null, includeAll);
-    }
-
-    onInputKeyUp(e) {
-        if (e.key === 'Enter') {
-            this.setState({
-                expanded: false,
-                selectedServer: e.target.value,
-                selectedNetwork: null,
-                includeAllNetworks: false,
-            });
-            this.props.onOptionChange(e.target.value, null);
-        }
-    }
-
-    collectRoot(e) {
-        if (this.dropdownRootElement) {
-            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
-        }
-        if (e) {
-            e.addEventListener('click', this.onRootClick, false);
-        }
-        this.dropdownRootElement = e;
-    }
-
-    collectInputTextBox(e) {
-        this.inputTextBox = e;
-    }
-
-    _getMenuOptions() {
-        const options = [];
-        const roomDirectory = this.props.config.roomDirectory || {};
-
-        let servers = [];
-        if (roomDirectory.servers) {
-            servers = servers.concat(roomDirectory.servers);
-        }
-
-        if (!servers.includes(MatrixClientPeg.getHomeserverName())) {
-            servers.unshift(MatrixClientPeg.getHomeserverName());
-        }
+        // configured servers take preference over user-defined ones, if one occurs in both ignore the latter one.
+        const removableServers = new Set(userDefinedServers.filter(s => !configServers.has(s) && s !== hsName));
+        const servers = [
+            // we always show our connected HS, this takes precedence over it being configured or user-defined
+            hsName,
+            ...Array.from(configServers).filter(s => s !== hsName).sort(),
+            ...Array.from(removableServers).sort(),
+        ];
 
         // For our own HS, we can use the instance_ids given in the third party protocols
         // response to get the server to filter the room list by network for us.
         // We can't get thirdparty protocols for remote server yet though, so for those
         // we can only show the default room list.
-        for (const server of servers) {
-            options.push(this._makeMenuOption(server, null, true));
-            if (server === MatrixClientPeg.getHomeserverName()) {
-                options.push(this._makeMenuOption(server, null, false));
-                if (this.props.protocols) {
-                    for (const proto of Object.keys(this.props.protocols)) {
-                        if (!this.props.protocols[proto].instances) continue;
+        const options = servers.map(server => {
+            const serverSelected = server === selectedServerName;
+            const entries = [];
 
-                        const sortedInstances = this.props.protocols[proto].instances;
-                        sortedInstances.sort(function(x, y) {
-                            const a = x.desc;
-                            const b = y.desc;
-                            if (a < b) {
-                                return -1;
-                            } else if (a > b) {
-                                return 1;
-                            } else {
-                                return 0;
-                            }
-                        });
-
-                        for (const instance of sortedInstances) {
-                            if (!instance.instance_id) continue;
-                            options.push(this._makeMenuOption(server, instance, false));
-                        }
-                    }
-                }
+            const protocolsList = server === hsName ? Object.values(protocols) : [];
+            if (protocolsList.length > 0) {
+                // add a fake protocol with the ALL_ROOMS symbol
+                protocolsList.push({
+                    instances: [{
+                        instance_id: ALL_ROOMS,
+                        desc: _t("All rooms"),
+                    }],
+                });
             }
-        }
 
-        return options;
-    }
+            protocolsList.forEach(({instances=[]}) => {
+                [...instances].sort((b, a) => {
+                    return a.desc.localeCompare(b.desc);
+                }).forEach(({desc, instance_id: instanceId}) => {
+                    entries.push(
+                        <MenuItemRadio
+                            key={String(instanceId)}
+                            active={serverSelected && instanceId === selectedInstanceId}
+                            onClick={handlerFactory(server, instanceId)}
+                            label={desc}
+                            className="mx_NetworkDropdown_server_network"
+                        >
+                            { desc }
+                        </MenuItemRadio>);
+                });
+            });
 
-    _makeMenuOption(server, instance, includeAll, handleClicks) {
-        if (handleClicks === undefined) handleClicks = true;
+            let subtitle;
+            if (server === hsName) {
+                subtitle = (
+                    <div className="mx_NetworkDropdown_server_subtitle">
+                        {_t("Your server")}
+                    </div>
+                );
+            }
 
-        let icon;
-        let name;
-        let key;
+            let removeButton;
+            if (removableServers.has(server)) {
+                const onClick = async () => {
+                    closeMenu();
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    const {finished} = Modal.createTrackedDialog("Network Dropdown", "Remove server", QuestionDialog, {
+                        title: _t("Are you sure?"),
+                        description: _t("Are you sure you want to remove <b>%(serverName)s</b>", {
+                            serverName: server,
+                        }, {
+                            b: serverName => <b>{ serverName }</b>,
+                        }),
+                        button: _t("Remove"),
+                        fixedWidth: false,
+                    }, "mx_NetworkDropdown_dialog");
 
-        if (!instance && includeAll) {
-            key = server;
-            name = server;
-        } else if (!instance) {
-            key = server + '_all';
-            name = 'Matrix';
-            icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
-        } else {
-            key = server + '_inst_' + instance.instance_id;
-            const imgUrl = instance.icon ?
-                MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
-                DEFAULT_ICON_URL;
-            icon = <img src={imgUrl} />;
-            name = instance.desc;
-        }
+                    const [ok] = await finished;
+                    if (!ok) return;
 
-        const clickHandler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
+                    // delete from setting
+                    setUserDefinedServers(servers.filter(s => s !== server));
 
-        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={clickHandler}>
-            {icon}
-            <span className="mx_NetworkDropdown_menu_network">{name}</span>
-        </div>;
-    }
+                    // the selected server is being removed, reset to our HS
+                    if (serverSelected === server) {
+                        onOptionChange(hsName, undefined);
+                    }
+                };
+                removeButton = <MenuItem onClick={onClick} label={_t("Remove server")} />;
+            }
 
-    render() {
-        let currentValue;
+            // ARIA: in actual fact the entire menu is one large radio group but for better screen reader support
+            // we use group to notate server wrongly.
+            return (
+                <MenuGroup label={server} className="mx_NetworkDropdown_server" key={server}>
+                    <div className="mx_NetworkDropdown_server_title">
+                        { server }
+                        { removeButton }
+                    </div>
+                    { subtitle }
 
-        let menu;
-        if (this.state.expanded) {
-            const menuOptions = this._getMenuOptions();
-            menu = <div className="mx_NetworkDropdown_menu">
-                {menuOptions}
-            </div>;
-            currentValue = <input type="text" className="mx_NetworkDropdown_networkoption"
-                ref={this.collectInputTextBox} onKeyUp={this.onInputKeyUp}
-                placeholder="matrix.org" // 'matrix.org' as an example of an HS name
-            />;
-        } else {
-            const instance = instanceForInstanceId(this.props.protocols, this.state.selectedInstanceId);
-            currentValue = this._makeMenuOption(
-                this.state.selectedServer, instance, this.state.includeAllNetworks, false,
+                    <MenuItemRadio
+                        active={serverSelected && !selectedInstanceId}
+                        onClick={handlerFactory(server, undefined)}
+                        label={_t("Matrix")}
+                        className="mx_NetworkDropdown_server_network"
+                    >
+                        {_t("Matrix")}
+                    </MenuItemRadio>
+                    { entries }
+                </MenuGroup>
             );
+        });
+
+        const onClick = async () => {
+            closeMenu();
+            const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+            const { finished } = Modal.createTrackedDialog("Network Dropdown", "Add a new server", TextInputDialog, {
+                title: _t("Add a new server"),
+                description: _t("Enter the name of a new server you want to explore."),
+                button: _t("Add"),
+                hasCancel: false,
+                placeholder: _t("Server name"),
+                validator: validServer,
+                fixedWidth: false,
+            }, "mx_NetworkDropdown_dialog");
+
+            const [ok, newServer] = await finished;
+            if (!ok) return;
+
+            if (!userDefinedServers.includes(newServer)) {
+                setUserDefinedServers([...userDefinedServers, newServer]);
+            }
+
+            onOptionChange(newServer); // change filter to the new server
+        };
+
+        const buttonRect = handle.current.getBoundingClientRect();
+        content = <ContextMenu {...inPlaceOf(buttonRect)} onFinished={closeMenu}>
+            <div className="mx_NetworkDropdown_menu">
+                {options}
+                <MenuItem className="mx_NetworkDropdown_server_add" label={undefined} onClick={onClick}>
+                    {_t("Add a new server...")}
+                </MenuItem>
+            </div>
+        </ContextMenu>;
+    } else {
+        let currentValue;
+        if (selectedInstanceId === ALL_ROOMS) {
+            currentValue = _t("All rooms");
+        } else if (selectedInstanceId) {
+            const instance = instanceForInstanceId(protocols, selectedInstanceId);
+            currentValue = _t("%(networkName)s rooms", {
+                networkName: instance.desc,
+            });
+        } else {
+            currentValue = _t("Matrix rooms");
         }
 
-        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
-            <div className="mx_NetworkDropdown_input mx_no_textinput" onClick={this.onInputClick}>
+        content = <ContextMenuButton
+            className="mx_NetworkDropdown_handle"
+            onClick={openMenu}
+            isExpanded={menuDisplayed}
+        >
+            <span>
                 {currentValue}
-                <span className="mx_NetworkDropdown_arrow" />
-                {menu}
-            </div>
-        </div>;
+            </span> <span className="mx_NetworkDropdown_handle_server">
+                ({selectedServerName})
+            </span>
+        </ContextMenuButton>;
     }
-}
+
+    return <div className="mx_NetworkDropdown" ref={handle}>
+        {content}
+    </div>;
+};
 
 NetworkDropdown.propTypes = {
     onOptionChange: PropTypes.func.isRequired,
     protocols: PropTypes.object,
-    // The room directory config. May have a 'servers' key that is a list of server names to include in the dropdown
-    config: PropTypes.object,
 };
 
-NetworkDropdown.defaultProps = {
-    protocols: {},
-    config: {},
-};
+export default NetworkDropdown;

src/components/views/elements/AccessibleTooltipButton.js

@@ -19,7 +19,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import AccessibleButton from "./AccessibleButton";
-import sdk from "../../../index";
+import * as sdk from "../../../index";
 
 export default class AccessibleTooltipButton extends React.PureComponent {
     static propTypes = {
@@ -48,7 +48,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
-        const {title, ...props} = this.props;
+        const {title, children, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
@@ -57,6 +57,7 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         /> : <div />;
         return (
             <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+                { children }
                 { tip }
             </AccessibleButton>
         );

src/components/views/elements/ActionButton.js

@@ -18,8 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import AccessibleButton from './AccessibleButton';
-import dis from '../../../dispatcher';
-import sdk from '../../../index';
+import dis from '../../../dispatcher/dispatcher';
+import * as sdk from '../../../index';
 import Analytics from '../../../Analytics';
 
 export default createReactClass({

src/components/views/elements/AddressSelector.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
 
@@ -46,7 +46,8 @@ export default createReactClass({
         };
     },
 
-    componentWillReceiveProps: function(props) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps: function(props) {
         // Make sure the selected item isn't outside the list bounds
         const selected = this.state.selected;
         const maxSelected = this._maxSelected(props.addressList);

src/components/views/elements/AddressTile.js

@@ -19,8 +19,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 import classNames from 'classnames';
-import sdk from "../../../index";
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import * as sdk from "../../../index";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 import { _t } from '../../../languageHandler';
 import { UserAddressType } from '../../../UserAddress.js';
 

src/components/views/elements/AppPermission.js

@@ -19,10 +19,10 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import url from 'url';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import WidgetUtils from "../../../utils/WidgetUtils";
-import MatrixClientPeg from "../../../MatrixClientPeg";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
 export default class AppPermission extends React.Component {
     static propTypes = {

src/components/views/elements/AppTile.js

@@ -2,6 +2,7 @@
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,36 +18,55 @@ limitations under the License.
 */
 
 import url from 'url';
-import qs from 'querystring';
+import qs from 'qs';
 import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import WidgetMessaging from '../../../WidgetMessaging';
 import AccessibleButton from './AccessibleButton';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../utils/WidgetUtils';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import classNames from 'classnames';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
 import {aboveLeftOf, ContextMenu, ContextMenuButton} from "../../structures/ContextMenu";
 import PersistedElement from "./PersistedElement";
+import {WidgetType} from "../../../widgets/WidgetType";
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
 
+/**
+ * Does template substitution on a URL (or any string). Variables will be
+ * passed through encodeURIComponent.
+ * @param {string} uriTemplate The path with template variables e.g. '/foo/$bar'.
+ * @param {Object} variables The key/value pairs to replace the template
+ * variables with. E.g. { '$bar': 'baz' }.
+ * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
+ */
+function uriFromTemplate(uriTemplate, variables) {
+    let out = uriTemplate;
+    for (const [key, val] of Object.entries(variables)) {
+        out = out.replace(
+            '$' + key, encodeURIComponent(val),
+        );
+    }
+    return out;
+}
+
 export default class AppTile extends React.Component {
     constructor(props) {
         super(props);
 
         // The key used for PersistedElement
-        this._persistKey = 'widget_' + this.props.id;
+        this._persistKey = 'widget_' + this.props.app.id;
 
         this.state = this._getNewState(props);
 
@@ -78,7 +98,7 @@ export default class AppTile extends React.Component {
         // This is a function to make the impact of calling SettingsStore slightly less
         const hasPermissionToLoad = () => {
             const currentlyAllowedWidgets = SettingsStore.getValue("allowedWidgets", newProps.room.roomId);
-            return !!currentlyAllowedWidgets[newProps.eventId];
+            return !!currentlyAllowedWidgets[newProps.app.eventId];
         };
 
         const PersistedElement = sdk.getComponent("elements.PersistedElement");
@@ -86,7 +106,7 @@ export default class AppTile extends React.Component {
             initialising: true, // True while we are mangling the widget URL
             // True while the iframe content is loading
             loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
-            widgetUrl: this._addWurlParams(newProps.url),
+            widgetUrl: this._addWurlParams(newProps.app.url),
             // Assume that widget has permission to load if we are the user who
             // added it to the room, or if explicitly granted by the user
             hasPermissionToLoad: newProps.userId === newProps.creatorUserId || hasPermissionToLoad(),
@@ -103,7 +123,7 @@ export default class AppTile extends React.Component {
      * @return {Boolean}            True if capability supported
      */
     _hasCapability(capability) {
-        return ActiveWidgetStore.widgetHasCapability(this.props.id, capability);
+        return ActiveWidgetStore.widgetHasCapability(this.props.app.id, capability);
     }
 
     /**
@@ -117,70 +137,68 @@ export default class AppTile extends React.Component {
      * If url can not be parsed, it is returned unmodified.
      */
     _addWurlParams(urlString) {
-        const u = url.parse(urlString);
-        if (!u) {
-            console.error("_addWurlParams", "Invalid URL", urlString);
-            return url;
+        try {
+            const parsed = new URL(urlString);
+
+            // TODO: Replace these with proper widget params
+            // See https://github.com/matrix-org/matrix-doc/pull/1958/files#r405714833
+            parsed.searchParams.set('widgetId', this.props.app.id);
+            parsed.searchParams.set('parentUrl', window.location.href.split('#', 2)[0]);
+
+            // Replace the encoded dollar signs back to dollar signs. They have no special meaning
+            // in HTTP, but URL parsers encode them anyways.
+            return parsed.toString().replace(/%24/g, '$');
+        } catch (e) {
+            console.error("Failed to add widget URL params:", e);
+            return urlString;
         }
-
-        const params = qs.parse(u.query);
-        // Append widget ID to query parameters
-        params.widgetId = this.props.id;
-        // Append current / parent URL, minus the hash because that will change when
-        // we view a different room (ie. may change for persistent widgets)
-        params.parentUrl = window.location.href.split('#', 2)[0];
-        u.search = undefined;
-        u.query = params;
-
-        return u.format();
     }
 
     isMixedContent() {
         const parentContentProtocol = window.location.protocol;
-        const u = url.parse(this.props.url);
+        const u = url.parse(this.props.app.url);
         const childContentProtocol = u.protocol;
         if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
             console.warn("Refusing to load mixed-content app:",
-            parentContentProtocol, childContentProtocol, window.location, this.props.url);
+            parentContentProtocol, childContentProtocol, window.location, this.props.app.url);
             return true;
         }
         return false;
     }
 
-    componentWillMount() {
+    componentDidMount() {
         // Only fetch IM token on mount if we're showing and have permission to load
         if (this.props.show && this.state.hasPermissionToLoad) {
             this.setScalarToken();
         }
-    }
 
-    componentDidMount() {
         // Widget action listeners
         this.dispatcherRef = dis.register(this._onAction);
     }
 
     componentWillUnmount() {
         // Widget action listeners
-        dis.unregister(this.dispatcherRef);
+        if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
 
         // if it's not remaining on screen, get rid of the PersistedElement container
-        if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) {
-            ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+        if (!ActiveWidgetStore.getWidgetPersistence(this.props.app.id)) {
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }
     }
 
+    // TODO: Generify the name of this function. It's not just scalar tokens.
     /**
      * Adds a scalar token to the widget URL, if required
      * Component initialisation is only complete when this function has resolved
      */
     setScalarToken() {
-        if (!WidgetUtils.isScalarUrl(this.props.url)) {
-            console.warn('Non-scalar widget, not setting scalar token!', url);
+        if (!WidgetUtils.isScalarUrl(this.props.app.url)) {
+            console.warn('Widget does not match integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -191,7 +209,7 @@ export default class AppTile extends React.Component {
             console.warn("No integration manager - not setting scalar token", url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -201,10 +219,10 @@ export default class AppTile extends React.Component {
 
         const defaultManager = managers.getPrimaryManager();
         if (!WidgetUtils.isScalarUrl(defaultManager.apiUrl)) {
-            console.warn('Non-scalar manager, not setting scalar token!', url);
+            console.warn('Unknown integration manager, refusing to set auth token', url);
             this.setState({
                 error: null,
-                widgetUrl: this._addWurlParams(this.props.url),
+                widgetUrl: this._addWurlParams(this.props.app.url),
                 initialising: false,
             });
             return;
@@ -217,7 +235,7 @@ export default class AppTile extends React.Component {
         this._scalarClient.getScalarToken().then((token) => {
             // Append scalar_token as a query param if not already present
             this._scalarClient.scalarToken = token;
-            const u = url.parse(this._addWurlParams(this.props.url));
+            const u = url.parse(this._addWurlParams(this.props.app.url));
             const params = qs.parse(u.query);
             if (!params.scalar_token) {
                 params.scalar_token = encodeURIComponent(token);
@@ -245,14 +263,17 @@ export default class AppTile extends React.Component {
         });
     }
 
-    componentWillReceiveProps(nextProps) {
-        if (nextProps.url !== this.props.url) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
+        if (nextProps.app.url !== this.props.app.url) {
             this._getNewState(nextProps);
             // Fetch IM token for new URL if we're showing and have permission to load
             if (this.props.show && this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.show && !this.props.show) {
+        }
+
+        if (nextProps.show && !this.props.show) {
             // We assume that persisted widgets are loaded and don't need a spinner.
             if (this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey)) {
                 this.setState({
@@ -263,7 +284,9 @@ export default class AppTile extends React.Component {
             if (this.state.hasPermissionToLoad) {
                 this.setScalarToken();
             }
-        } else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
+        }
+
+        if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
             this.setState({
                 widgetPageTitle: nextProps.widgetPageTitle,
             });
@@ -280,7 +303,7 @@ export default class AppTile extends React.Component {
     }
 
     _onEditClick() {
-        console.log("Edit widget ID ", this.props.id);
+        console.log("Edit widget ID ", this.props.app.id);
         if (this.props.onEditClick) {
             this.props.onEditClick();
         } else {
@@ -289,21 +312,21 @@ export default class AppTile extends React.Component {
                 IntegrationManagers.sharedInstance().openAll(
                     this.props.room,
                     'type_' + this.props.type,
-                    this.props.id,
+                    this.props.app.id,
                 );
             } else {
                 IntegrationManagers.sharedInstance().getPrimaryManager().open(
                     this.props.room,
                     'type_' + this.props.type,
-                    this.props.id,
+                    this.props.app.id,
                 );
             }
         }
     }
 
     _onSnapshotClick() {
-        console.warn("Requesting widget snapshot");
-        ActiveWidgetStore.getWidgetMessaging(this.props.id).getScreenshot()
+        console.log("Requesting widget snapshot");
+        ActiveWidgetStore.getWidgetMessaging(this.props.app.id).getScreenshot()
             .catch((err) => {
                 console.error("Failed to get screenshot", err);
             })
@@ -315,6 +338,28 @@ export default class AppTile extends React.Component {
             });
     }
 
+    /**
+     * Ends all widget interaction, such as cancelling calls and disabling webcams.
+     * @private
+     */
+    _endWidgetActions() {
+        // HACK: This is a really dirty way to ensure that Jitsi cleans up
+        // its hold on the webcam. Without this, the widget holds a media
+        // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+        if (this._appFrame.current) {
+            // In practice we could just do `+= ''` to trick the browser
+            // into thinking the URL changed, however I can foresee this
+            // being optimized out by a browser. Instead, we'll just point
+            // the iframe at a page that is reasonably safe to use in the
+            // event the iframe doesn't wink away.
+            // This is relative to where the Riot instance is located.
+            this._appFrame.current.src = 'about:blank';
+        }
+
+        // Delete the widget from the persisted store for good measure.
+        PersistedElement.destroyElement(this._persistKey);
+    }
+
     /* If user has permission to modify widgets, delete the widget,
      * otherwise revoke access for the widget to load in the user's browser
     */
@@ -336,22 +381,11 @@ export default class AppTile extends React.Component {
                     }
                     this.setState({deleting: true});
 
-                    // HACK: This is a really dirty way to ensure that Jitsi cleans up
-                    // its hold on the webcam. Without this, the widget holds a media
-                    // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
-                    if (this._appFrame.current) {
-                        // In practice we could just do `+= ''` to trick the browser
-                        // into thinking the URL changed, however I can foresee this
-                        // being optimized out by a browser. Instead, we'll just point
-                        // the iframe at a page that is reasonably safe to use in the
-                        // event the iframe doesn't wink away.
-                        // This is relative to where the Riot instance is located.
-                        this._appFrame.current.src = 'about:blank';
-                    }
+                    this._endWidgetActions();
 
                     WidgetUtils.setRoomWidget(
                         this.props.room.roomId,
-                        this.props.id,
+                        this.props.app.id,
                     ).catch((e) => {
                         console.error('Failed to delete widget', e);
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -369,7 +403,7 @@ export default class AppTile extends React.Component {
     }
 
     _onRevokeClicked() {
-        console.info("Revoke widget permissions - %s", this.props.id);
+        console.info("Revoke widget permissions - %s", this.props.app.id);
         this._revokeWidgetPermission();
     }
 
@@ -380,10 +414,10 @@ export default class AppTile extends React.Component {
         // Destroy the old widget messaging before starting it back up again. Some widgets
         // have startup routines that run when they are loaded, so we just need to reinitialize
         // the messaging for them.
-        ActiveWidgetStore.delWidgetMessaging(this.props.id);
+        ActiveWidgetStore.delWidgetMessaging(this.props.app.id);
         this._setupWidgetMessaging();
 
-        ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
+        ActiveWidgetStore.setRoomId(this.props.app.id, this.props.room.roomId);
         this.setState({loading: false});
     }
 
@@ -391,10 +425,15 @@ export default class AppTile extends React.Component {
         // FIXME: There's probably no reason to do this here: it should probably be done entirely
         // in ActiveWidgetStore.
         const widgetMessaging = new WidgetMessaging(
-            this.props.id, this.props.url, this.props.userWidget, this._appFrame.current.contentWindow);
-        ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging);
+            this.props.app.id,
+            this.props.app.url,
+            this._getRenderedUrl(),
+            this.props.userWidget,
+            this._appFrame.current.contentWindow,
+        );
+        ActiveWidgetStore.setWidgetMessaging(this.props.app.id, widgetMessaging);
         widgetMessaging.getCapabilities().then((requestedCapabilities) => {
-            console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities);
+            console.log(`Widget ${this.props.app.id} requested capabilities: ` + requestedCapabilities);
             requestedCapabilities = requestedCapabilities || [];
 
             // Allow whitelisted capabilities
@@ -406,7 +445,7 @@ export default class AppTile extends React.Component {
                 }, this.props.whitelistCapabilities);
 
                 if (requestedWhitelistCapabilies.length > 0 ) {
-                    console.warn(`Widget ${this.props.id} allowing requested, whitelisted properties: ` +
+                    console.log(`Widget ${this.props.app.id} allowing requested, whitelisted properties: ` +
                         requestedWhitelistCapabilies,
                     );
                 }
@@ -414,18 +453,24 @@ export default class AppTile extends React.Component {
 
             // TODO -- Add UI to warn about and optionally allow requested capabilities
 
-            ActiveWidgetStore.setWidgetCapabilities(this.props.id, requestedWhitelistCapabilies);
+            ActiveWidgetStore.setWidgetCapabilities(this.props.app.id, requestedWhitelistCapabilies);
 
             if (this.props.onCapabilityRequest) {
                 this.props.onCapabilityRequest(requestedCapabilities);
             }
+
+            // We only tell Jitsi widgets that we're ready because they're realistically the only ones
+            // using this custom extension to the widget API.
+            if (WidgetType.JITSI.matches(this.props.app.type)) {
+                widgetMessaging.flagReadyToContinue();
+            }
         }).catch((err) => {
-            console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
+            console.log(`Failed to get capabilities for widget type ${this.props.app.type}`, this.props.app.id, err);
         });
     }
 
     _onAction(payload) {
-        if (payload.widgetId === this.props.id) {
+        if (payload.widgetId === this.props.app.id) {
             switch (payload.action) {
                 case 'm.sticker':
                 if (this._hasCapability('m.sticker')) {
@@ -454,9 +499,9 @@ export default class AppTile extends React.Component {
 
     _grantWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Granting permission for widget to load: " + this.props.eventId);
+        console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = true;
+        current[this.props.app.eventId] = true;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: true});
 
@@ -470,14 +515,14 @@ export default class AppTile extends React.Component {
 
     _revokeWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Revoking permission for widget to load: " + this.props.eventId);
+        console.info("Revoking permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = false;
+        current[this.props.app.eventId] = false;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: false});
 
             // Force the widget to be non-persistent (able to be deleted/forgotten)
-            ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }).catch(err => {
@@ -488,8 +533,8 @@ export default class AppTile extends React.Component {
 
     formatAppTileName() {
         let appTileName = "No name";
-        if (this.props.name && this.props.name.trim()) {
-            appTileName = this.props.name.trim();
+        if (this.props.app.name && this.props.app.name.trim()) {
+            appTileName = this.props.app.name.trim();
         }
         return appTileName;
     }
@@ -506,6 +551,10 @@ export default class AppTile extends React.Component {
         if (this.props.userWidget) {
             this._onMinimiseClick();
         } else {
+            if (this.props.show) {
+                // if we were being shown, end the widget as we're about to be minimized.
+                this._endWidgetActions();
+            }
             dis.dispatch({
                 action: 'appsDrawer',
                 show: !this.props.show,
@@ -513,17 +562,88 @@ export default class AppTile extends React.Component {
         }
     }
 
-    _getSafeUrl() {
-        const parsedWidgetUrl = url.parse(this.state.widgetUrl, true);
+    /**
+     * Replace the widget template variables in a url with their values
+     *
+     * @param {string} u The URL with template variables
+     * @param {string} widgetType The widget's type
+     *
+     * @returns {string} url with temlate variables replaced
+     */
+    _templatedUrl(u, widgetType: string) {
+        const targetData = {};
+        if (WidgetType.JITSI.matches(widgetType)) {
+            targetData['domain'] = 'jitsi.riot.im'; // v1 jitsi widgets have this hardcoded
+        }
+        const myUserId = MatrixClientPeg.get().credentials.userId;
+        const myUser = MatrixClientPeg.get().getUser(myUserId);
+        const vars = Object.assign(targetData, this.props.app.data, {
+            'matrix_user_id': myUserId,
+            'matrix_room_id': this.props.room.roomId,
+            'matrix_display_name': myUser ? myUser.displayName : myUserId,
+            'matrix_avatar_url': myUser ? MatrixClientPeg.get().mxcUrlToHttp(myUser.avatarUrl) : '',
+
+            // TODO: Namespace themes through some standard
+            'theme': SettingsStore.getValue("theme"),
+        });
+
+        if (vars.conferenceId === undefined) {
+            // we'll need to parse the conference ID out of the URL for v1 Jitsi widgets
+            const parsedUrl = new URL(this.props.app.url);
+            vars.conferenceId = parsedUrl.searchParams.get("confId");
+        }
+
+        return uriFromTemplate(u, vars);
+    }
+
+    /**
+     * Get the URL used in the iframe
+     * In cases where we supply our own UI for a widget, this is an internal
+     * URL different to the one used if the widget is popped out to a separate
+     * tab / browser
+     *
+     * @returns {string} url
+     */
+    _getRenderedUrl() {
+        let url;
+
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            console.log("Replacing Jitsi widget URL with local wrapper");
+            url = WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: true});
+            url = this._addWurlParams(url);
+        } else {
+            url = this._getSafeUrl(this.state.widgetUrl);
+        }
+        return this._templatedUrl(url, this.props.app.type);
+    }
+
+    _getPopoutUrl() {
+        if (WidgetType.JITSI.matches(this.props.app.type)) {
+            return this._templatedUrl(
+                WidgetUtils.getLocalJitsiWrapperUrl({forLocalRender: false}),
+                this.props.app.type,
+            );
+        } else {
+            // use app.url, not state.widgetUrl, because we want the one without
+            // the wURL params for the popped-out version.
+            return this._templatedUrl(this._getSafeUrl(this.props.app.url), this.props.app.type);
+        }
+    }
+
+    _getSafeUrl(u) {
+        const parsedWidgetUrl = url.parse(u, true);
         if (ENABLE_REACT_PERF) {
             parsedWidgetUrl.search = null;
             parsedWidgetUrl.query.react_perf = true;
         }
         let safeWidgetUrl = '';
-        if (ALLOWED_APP_URL_SCHEMES.indexOf(parsedWidgetUrl.protocol) !== -1) {
+        if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
-        return safeWidgetUrl;
+
+        // Replace all the dollar signs back to dollar signs as they don't affect HTTP at all.
+        // We also need the dollar signs in-tact for variable substitution.
+        return safeWidgetUrl.replace(/%24/g, '$');
     }
 
     _getTileTitle() {
@@ -550,9 +670,9 @@ export default class AppTile extends React.Component {
 
     _onPopoutWidgetClick() {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
-        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
+        // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener'}).click();
+            { target: '_blank', href: this._getPopoutUrl(), rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {
@@ -629,7 +749,7 @@ export default class AppTile extends React.Component {
                             <iframe
                                 allow={iframeFeatures}
                                 ref={this._appFrame}
-                                src={this._getSafeUrl()}
+                                src={this._getRenderedUrl()}
                                 allowFullScreen={true}
                                 sandbox={sandboxFlags}
                                 onLoad={this._onLoaded} />
@@ -694,7 +814,7 @@ export default class AppTile extends React.Component {
         }
 
         return <React.Fragment>
-            <div className={appTileClass} id={this.props.id}>
+            <div className={appTileClass} id={this.props.app.id}>
                 { this.props.showMenubar &&
                 <div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
@@ -741,12 +861,8 @@ export default class AppTile extends React.Component {
 AppTile.displayName = 'AppTile';
 
 AppTile.propTypes = {
-    id: PropTypes.string.isRequired,
-    eventId: PropTypes.string, // required for room widgets
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    app: PropTypes.object.isRequired,
     room: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
     // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
     fullWidth: PropTypes.bool,
@@ -793,7 +909,6 @@ AppTile.propTypes = {
 };
 
 AppTile.defaultProps = {
-    url: "",
     waitForIframeLoad: true,
     showMenubar: true,
     showTitle: true,

src/components/views/elements/CreateRoomButton.js

@@ -15,7 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 

src/components/views/elements/DNDTagTile.js

@@ -19,8 +19,22 @@ import TagTile from './TagTile';
 
 import React from 'react';
 import { Draggable } from 'react-beautiful-dnd';
+import { ContextMenu, toRightOf, useContextMenu } from "../../structures/ContextMenu";
+import * as sdk from '../../../index';
 
 export default function DNDTagTile(props) {
+    const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu();
+
+    let contextMenu = null;
+    if (menuDisplayed && handle.current) {
+        const elementRect = handle.current.getBoundingClientRect();
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        contextMenu = (
+            <ContextMenu {...toRightOf(elementRect)} onFinished={closeMenu}>
+                <TagTileContextMenu tag={props.tag} onFinished={closeMenu} />
+            </ContextMenu>
+        );
+    }
     return <div>
         <Draggable
             key={props.tag}
@@ -28,18 +42,21 @@ export default function DNDTagTile(props) {
             index={props.index}
             type="draggable-TagTile"
         >
-            { (provided, snapshot) => (
-                <div>
-                    <div
-                        ref={provided.innerRef}
-                        {...provided.draggableProps}
-                        {...provided.dragHandleProps}
-                    >
-                        <TagTile {...props} />
-                    </div>
-                    { provided.placeholder }
+            {(provided, snapshot) => (
+                <div
+                    ref={provided.innerRef}
+                    {...provided.draggableProps}
+                    {...provided.dragHandleProps}
+                >
+                    <TagTile
+                        {...props}
+                        contextMenuButtonRef={handle}
+                        menuDisplayed={menuDisplayed}
+                        openMenu={openMenu}
+                    />
                 </div>
-            ) }
+            )}
         </Draggable>
+        {contextMenu}
     </div>;
 }

src/components/views/elements/DeviceVerifyButtons.js

@@ -17,11 +17,13 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import * as sdk from '../../../index';
 import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 
+// XXX: This component is *not* cross-signing aware. Once everything is
+// cross-signing, this component should just go away.
 export default createReactClass({
     displayName: 'DeviceVerifyButtons',
 
@@ -36,7 +38,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         const cli = MatrixClientPeg.get();
         cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
     },

src/components/views/elements/DialogButtons.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Aidan Gauland
 Copyright 2018 New Vector 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.
@@ -23,7 +24,7 @@ import { _t } from '../../../languageHandler';
 /**
  * Basic container for buttons in modal dialogs.
  */
-module.exports = createReactClass({
+export default createReactClass({
     displayName: "DialogButtons",
 
     propTypes: {
@@ -33,12 +34,19 @@ module.exports = 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,
 
@@ -68,16 +76,26 @@ module.exports = 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/DirectorySearchBox.js

@@ -17,7 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import sdk from '../../../index';
+import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default class DirectorySearchBox extends React.Component {

src/components/views/elements/Draggable.tsx

@@ -0,0 +1,84 @@
+/*
+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';
+
+interface IProps {
+    className: string,
+    dragFunc: (currentLocation: ILocationState, event: MouseEvent) => ILocationState,
+    onMouseUp: (event: MouseEvent) => void,
+}
+
+interface IState {
+    onMouseMove: (event: MouseEvent) => void,
+    onMouseUp: (event: MouseEvent) => void,
+    location: ILocationState,
+}
+
+export interface ILocationState {
+    currentX: number,
+    currentY: number,
+}
+
+export default class Draggable extends React.Component<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            onMouseMove: this.onMouseMove.bind(this),
+            onMouseUp: this.onMouseUp.bind(this),
+            location: {
+                currentX: 0,
+                currentY: 0,
+            },
+        };
+    }
+
+    private onMouseDown = (event: MouseEvent): void => {
+        this.setState({
+            location: {
+                currentX: event.clientX,
+                currentY: event.clientY,
+            },
+        });
+
+        document.addEventListener("mousemove", this.state.onMouseMove);
+        document.addEventListener("mouseup", this.state.onMouseUp);
+        console.log("Mouse down")
+    }
+
+    private onMouseUp = (event: MouseEvent): void => {
+        document.removeEventListener("mousemove", this.state.onMouseMove);
+        document.removeEventListener("mouseup", this.state.onMouseUp);
+        this.props.onMouseUp(event);
+        console.log("Mouse up")
+    }
+
+    private onMouseMove(event: MouseEvent): void {
+        console.log("Mouse Move")
+        const newLocation = this.props.dragFunc(this.state.location, event);
+
+        this.setState({
+            location: newLocation,
+        });
+    }
+
+    render() {
+        return <div className={this.props.className} onMouseDown={this.onMouseDown.bind(this)} />
+    }
+
+}

src/components/views/elements/Dropdown.js

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

src/components/views/elements/EditableItemList.js

@@ -78,8 +78,7 @@ export class EditableItem extends React.Component {
 
         return (
             <div className="mx_EditableItem">
-                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
-                     onClick={this._onRemove} className="mx_EditableItem_delete" alt={_t("Remove")} />
+                <div onClick={this._onRemove} className="mx_EditableItem_delete" title={_t("Remove")} role="button" />
                 <span className="mx_EditableItem_item">{this.props.value}</span>
             </div>
         );
@@ -122,9 +121,10 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete="off"
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
-                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
-                <AccessibleButton onClick={this._onItemAdded} kind="primary">
+                <Field label={this.props.placeholder} type="text"
+                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
+                       list={this.props.suggestionsListId} />
+                <AccessibleButton onClick={this._onItemAdded} kind="primary" type="submit">
                     {_t("Add")}
                 </AccessibleButton>
             </form>

src/components/views/elements/EditableText.js

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