Merge branches 'develop' and 'travis/download-logs' of github.com:matrix-org/matrix-react-sdk into travis/download-logs

 Conflicts:

	src/i18n/strings/en_EN.json

	src/rageshake/submit-rageshake.ts

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 * as sdk from '../../../index';
 
 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 @@ export default createReactClass({
         return (
             <div className="mx_AuthHeader">
                 <AuthHeaderLogo />
-                <LanguageSelector />
+                <LanguageSelector disabled={this.props.disableLanguageSelector} />
             </div>
         );
     },

src/components/views/auth/CaptchaForm.js

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

src/components/views/auth/CountryDropdown.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 
 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

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,11 +18,13 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default createReactClass({
     displayName: 'CustomServerDialog',
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         return (
             <div className="mx_ErrorDialog">
                 <div className="mx_Dialog_title">
@@ -32,8 +34,9 @@ export default createReactClass({
                     <p>{_t(
                         "You can use the custom server options to sign into other " +
                         "Matrix servers by specifying a different homeserver URL. This " +
-                        "allows you to use this app with an existing Matrix account on a " +
+                        "allows you to use %(brand)s with an existing Matrix account on a " +
                         "different homeserver.",
+                        { brand },
                     )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">

src/components/views/auth/InteractiveAuthEntryComponents.js

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

src/components/views/auth/LanguageSelector.js

@@ -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

@@ -23,7 +23,8 @@ import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import * as ServerType from '../../views/auth/ServerTypeSelector';
 import ServerConfig from "./ServerConfig";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://element.io/matrix-services' +
+    '?utm_source=element-web&utm_medium=web&utm_campaign=element-web-authentication';
 
 // TODO: TravisR - Can this extend ServerConfig for most things?
 
@@ -94,10 +95,10 @@ export default class ModularServerConfig extends ServerConfig {
 
         return (
             <div className="mx_ServerConfig">
-                <h3>{_t("Your Modular server")}</h3>
+                <h3>{_t("Your server")}</h3>
                 {_t(
-                    "Enter the location of your Modular homeserver. It may use your own " +
-                    "domain name or be a subdomain of <a>modular.im</a>.",
+                    "Enter the location of your Element Matrix Services homeserver. It may use your own " +
+                    "domain name or be a subdomain of <a>element.io</a>.",
                     {}, {
                         a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                             {sub}

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

@@ -23,6 +23,7 @@ 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 = {};
@@ -202,7 +204,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
@@ -216,7 +218,7 @@ export default class PasswordLogin extends React.Component {
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    autoFocus={autoFocus}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
@@ -236,11 +238,11 @@ export default class PasswordLogin extends React.Component {
                     type="text"
                     label={_t("Phone")}
                     value={this.state.phoneNumber}
-                    prefix={phoneCountry}
+                    prefixComponent={phoneCountry}
                     onChange={this.onPhoneNumberChanged}
                     onBlur={this.onPhoneNumberBlur}
                     disabled={this.props.disableSubmit}
-                    autoFocus
+                    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) {
@@ -330,13 +339,14 @@ export default class PasswordLogin extends React.Component {
                         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

@@ -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';
@@ -76,9 +77,8 @@ export default 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 @@ export default 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 @@ export default 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,
@@ -480,13 +429,10 @@ export default createReactClass({
     },
 
     renderPassword() {
-        const Field = sdk.getComponent('elements.Field');
-        return <Field
+        return <PassphraseField
             id="mx_RegistrationForm_password"
-            ref={field => this[FIELD_PASSWORD] = field}
-            type="password"
-            autoComplete="new-password"
-            label={_t("Password")}
+            fieldRef={field => this[FIELD_PASSWORD] = field}
+            minScore={PASSWORD_MIN_SCORE}
             value={this.state.password}
             onChange={this.onPasswordChange}
             onValidate={this.onPasswordValidate}
@@ -527,7 +473,7 @@ export default createReactClass({
             type="text"
             label={phoneLabel}
             value={this.state.phoneNumber}
-            prefix={phoneCountry}
+            prefixComponent={phoneCountry}
             onChange={this.onPhoneNumberChange}
             onValidate={this.onPhoneNumberValidate}
         />;

src/components/views/auth/ServerConfig.js

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

src/components/views/auth/ServerTypeSelector.js

@@ -22,7 +22,8 @@ import classnames from 'classnames';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import {makeType} from "../../../utils/TypeUtils";
 
-const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+const MODULAR_URL = 'https://element.io/matrix-services' +
+    '?utm_source=element-web&utm_medium=web&utm_campaign=element-web-authentication';
 
 export const FREE = 'Free';
 export const PREMIUM = 'Premium';
@@ -44,7 +45,7 @@ export const TYPES = {
     PREMIUM: {
         id: PREMIUM,
         label: () => _t('Premium'),
-        logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
+        logo: () => <img src={require('../../../../res/img/ems-logo.svg')} height={16} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
             a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
                 {sub}

src/components/views/auth/Welcome.js

@@ -18,6 +18,10 @@ import React from 'react';
 import * as sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import AuthPage from "./AuthPage";
+import {_td} from "../../../languageHandler";
+
+// translatable strings for Welcome pages
+_td("Sign in with SSO");
 
 export default class Welcome extends React.PureComponent {
     render() {
@@ -36,8 +40,13 @@ export default class Welcome extends React.PureComponent {
         return (
             <AuthPage>
                 <div className="mx_Welcome">
-                    <EmbeddedPage className="mx_WelcomePage"
+                    <EmbeddedPage
+                        className="mx_WelcomePage"
                         url={pageUrl}
+                        replaceMap={{
+                            "$riot:ssoUrl": "#/start_sso",
+                            "$riot:casUrl": "#/start_cas",
+                        }}
                     />
                     <LanguageSelector />
                 </div>

src/components/views/avatars/BaseAvatar.js

@@ -1,222 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as AvatarLogic from '../../../Avatar';
-import SettingsStore from "../../../settings/SettingsStore";
-import AccessibleButton from '../elements/AccessibleButton';
-import MatrixClientContext from "../../../contexts/MatrixClientContext";
-
-export default createReactClass({
-    displayName: '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
-        inputRef: PropTypes.oneOfType([
-            // Either a function
-            PropTypes.func,
-            // Or the instance of a DOM native element
-            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-        ]),
-    },
-
-    statics: {
-        contextType: MatrixClientContext,
-    },
-
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            defaultToInitialLetter: true,
-        };
-    },
-
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
-
-    componentDidMount() {
-        this.unmounted = false;
-        this.context.on('sync', this.onClientSync);
-    },
-
-    componentWillUnmount() {
-        this.unmounted = true;
-        this.context.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) {
-        // work out the full set of urls to try to load. This is formed like so:
-        // imageUrls: [ props.url, props.urls, default image ]
-
-        let urls = [];
-        if (!SettingsStore.getValue("lowBandwidth")) {
-            urls = props.urls || [];
-
-            if (props.url) {
-                urls.unshift(props.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));
-
-        return {
-            imageUrls: urls,
-            defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0,
-        };
-    },
-
-    onError: function(ev) {
-        const nextIndex = this.state.urlsIndex + 1;
-        if (nextIndex < this.state.imageUrls.length) {
-            // try the next one
-            this.setState({
-                urlsIndex: nextIndex,
-            });
-        }
-    },
-
-    render: function() {
-        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
-
-        const {
-            name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter, onClick, inputRef,
-            ...otherProps
-        } = this.props;
-
-        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} inputRef={inputRef} {...otherProps}
-                    >
-                        { textNode }
-                        { imgNode }
-                    </AccessibleButton>
-                );
-            } else {
-                return (
-                    <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={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    inputRef={inputRef}
-                    {...otherProps} />
-            );
-        } else {
-            return (
-                <img
-                    className="mx_BaseAvatar mx_BaseAvatar_image"
-                    src={imageUrl}
-                    onError={this.onError}
-                    width={width} height={height}
-                    title={title} alt=""
-                    ref={inputRef}
-                    {...otherProps} />
-            );
-        }
-    },
-});

src/components/views/avatars/BaseAvatar.tsx

@@ -0,0 +1,199 @@
+/*
+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.
+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, {useCallback, useContext, useEffect, useMemo, useState} from 'react';
+import classNames from 'classnames';
+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";
+
+interface IProps {
+    name: string; // The name (first initial used as default)
+    idName?: string; // ID for generating hash colours
+    title?: string; // onHover title text
+    url?: string; // highest priority of them all, shortcut to set in urls[0]
+    urls?: string[]; // [highest_priority, ... , lowest_priority]
+    width?: number;
+    height?: number;
+    // XXX: resizeMethod not actually used.
+    resizeMethod?: string;
+    defaultToInitialLetter?: boolean; // true to add default url
+    onClick?: React.MouseEventHandler;
+    inputRef?: React.RefObject<HTMLImageElement & HTMLSpanElement>;
+    className?: string;
+}
+
+const useImageUrl = ({url, urls}): [string, () => void] => {
+    const [imageUrls, setUrls] = useState<string[]>([]);
+    const [urlsIndex, setIndex] = useState<number>();
+
+    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
+
+    useEffect(() => {
+        // work out the full set of urls to try to load. This is formed like so:
+        // imageUrls: [ props.url, ...props.urls ]
+
+        let _urls = [];
+        if (!SettingsStore.getValue("lowBandwidth")) {
+            _urls = memoizedUrls || [];
+
+            if (url) {
+                _urls.unshift(url); // put in urls[0]
+            }
+        }
+
+        // deduplicate URLs
+        _urls = Array.from(new Set(_urls));
+
+        setIndex(0);
+        setUrls(_urls);
+    }, [url, memoizedUrls]); // eslint-disable-line react-hooks/exhaustive-deps
+
+    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);
+
+    const imageUrl = imageUrls[urlsIndex];
+    return [imageUrl, onError];
+};
+
+const BaseAvatar = (props: IProps) => {
+    const {
+        name,
+        idName,
+        title,
+        url,
+        urls,
+        width = 40,
+        height = 40,
+        resizeMethod = "crop", // eslint-disable-line no-unused-vars
+        defaultToInitialLetter = true,
+        onClick,
+        inputRef,
+        className,
+        ...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 (onClick !== null) {
+            return (
+                <AccessibleButton
+                    {...otherProps}
+                    element="span"
+                    className={classNames("mx_BaseAvatar", className)}
+                    onClick={onClick}
+                    inputRef={inputRef}
+                >
+                    { textNode }
+                    { imgNode }
+                </AccessibleButton>
+            );
+        } else {
+            return (
+                <span
+                    className={classNames("mx_BaseAvatar", className)}
+                    ref={inputRef}
+                    {...otherProps}
+                    role="presentation"
+                >
+                    { textNode }
+                    { imgNode }
+                </span>
+            );
+        }
+    }
+
+    if (onClick !== null) {
+        return (
+            <AccessibleButton
+                className={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
+                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={classNames("mx_BaseAvatar mx_BaseAvatar_image", className)}
+                src={imageUrl}
+                onError={onError}
+                style={{
+                    width: toPx(width),
+                    height: toPx(height),
+                }}
+                title={title} alt=""
+                ref={inputRef}
+                {...otherProps} />
+        );
+    }
+};
+
+export default BaseAvatar;
+export type BaseAvatarType = React.FC<IProps>;

src/components/views/avatars/DecoratedRoomAvatar.tsx

@@ -0,0 +1,73 @@
+/*
+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 { Room } from "matrix-js-sdk/src/models/room";
+
+import { TagID } from '../../../stores/room-list/models';
+import RoomAvatar from "./RoomAvatar";
+import RoomTileIcon from "../rooms/RoomTileIcon";
+import NotificationBadge from '../rooms/NotificationBadge';
+import { RoomNotificationStateStore } from "../../../stores/notifications/RoomNotificationStateStore";
+import { NotificationState } from "../../../stores/notifications/NotificationState";
+
+interface IProps {
+    room: Room;
+    avatarSize: number;
+    tag: TagID;
+    displayBadge?: boolean;
+    forceCount?: boolean;
+    oobData?: object;
+    viewAvatarOnClick?: boolean;
+}
+
+interface IState {
+    notificationState?: NotificationState;
+}
+
+export default class DecoratedRoomAvatar extends React.PureComponent<IProps, IState> {
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            notificationState: RoomNotificationStateStore.instance.getRoomState(this.props.room, this.props.tag),
+        };
+    }
+
+    public render(): React.ReactNode {
+        let badge: React.ReactNode;
+        if (this.props.displayBadge) {
+            badge = <NotificationBadge
+                notification={this.state.notificationState}
+                forceCount={this.props.forceCount}
+                roomId={this.props.room.roomId}
+            />;
+        }
+
+        return <div className="mx_DecoratedRoomAvatar">
+            <RoomAvatar
+                room={this.props.room}
+                width={this.props.avatarSize}
+                height={this.props.avatarSize}
+                oobData={this.props.oobData}
+                viewAvatarOnClick={this.props.viewAvatarOnClick}
+            />
+            <RoomTileIcon room={this.props.room} />
+            {badge}
+        </div>;
+    }
+}

src/components/views/avatars/GroupAvatar.tsx

@@ -15,43 +15,36 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
+import BaseAvatar from './BaseAvatar';
 
-export default createReactClass({
-    displayName: 'GroupAvatar',
+export interface IProps {
+        groupId?: string;
+        groupName?: string;
+        groupAvatarUrl?: string;
+        width?: number;
+        height?: number;
+        resizeMethod?: string;
+        onClick?: React.MouseEventHandler;
+}
 
-    propTypes: {
-        groupId: PropTypes.string,
-        groupName: PropTypes.string,
-        groupAvatarUrl: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-        onClick: PropTypes.func,
-    },
+export default class GroupAvatar extends React.Component<IProps> {
+    public static defaultProps = {
+        width: 36,
+        height: 36,
+        resizeMethod: 'crop',
+    };
 
-    getDefaultProps: function() {
-        return {
-            width: 36,
-            height: 36,
-            resizeMethod: 'crop',
-        };
-    },
-
-    getGroupAvatarUrl: function() {
+    getGroupAvatarUrl() {
         return MatrixClientPeg.get().mxcUrlToHttp(
             this.props.groupAvatarUrl,
             this.props.width,
             this.props.height,
             this.props.resizeMethod,
         );
-    },
+    }
 
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+    render() {
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
@@ -65,5 +58,5 @@ export default createReactClass({
                 {...otherProps}
             />
         );
-    },
-});
+    }
+}

src/components/views/avatars/MemberAvatar.tsx

@@ -16,54 +16,62 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import * as Avatar from '../../../Avatar';
-import * as sdk from "../../../index";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
+import {Action} from "../../../dispatcher/actions";
+import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import BaseAvatar from "./BaseAvatar";
 
-export default createReactClass({
-    displayName: 'MemberAvatar',
+interface IProps {
+    // TODO: replace with correct type
+    member: any;
+    fallbackUserId: string;
+    width: number;
+    height: number;
+    resizeMethod: string;
+    // The onClick to give the avatar
+    onClick: React.MouseEventHandler;
+    // Whether the onClick of the avatar should be overriden to dispatch `Action.ViewUser`
+    viewUserOnClick: boolean;
+    title: string;
+}
 
-    propTypes: {
-        member: PropTypes.object,
-        fallbackUserId: PropTypes.string,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        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'
-        viewUserOnClick: PropTypes.bool,
-        title: PropTypes.string,
-    },
+interface IState {
+    name: string;
+    title: string;
+    imageUrl?: string;
+}
 
-    getDefaultProps: function() {
-        return {
-            width: 40,
-            height: 40,
-            resizeMethod: 'crop',
-            viewUserOnClick: false,
-        };
-    },
+export default class MemberAvatar extends React.Component<IProps, IState> {
+    public static defaultProps = {
+        width: 40,
+        height: 40,
+        resizeMethod: 'crop',
+        viewUserOnClick: false,
+    };
 
-    getInitialState: function() {
-        return this._getState(this.props);
-    },
+    constructor(props: IProps) {
+        super(props);
 
-    componentWillReceiveProps: function(nextProps) {
-        this.setState(this._getState(nextProps));
-    },
+        this.state = MemberAvatar.getState(props);
+    }
 
-    _getState: function(props) {
+    public static getDerivedStateFromProps(nextProps: IProps): IState {
+        return MemberAvatar.getState(nextProps);
+    }
+
+    private static getState(props: IProps): IState {
         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 {
@@ -73,18 +81,16 @@ export default createReactClass({
         } else {
             console.error("MemberAvatar called somehow with null member or fallbackUserId");
         }
-    },
-
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+    }
 
+    render() {
         let {member, fallbackUserId, onClick, viewUserOnClick, ...otherProps} = this.props;
         const userId = member ? member.userId : fallbackUserId;
 
         if (viewUserOnClick) {
             onClick = () => {
                 dis.dispatch({
-                    action: 'view_user',
+                    action: Action.ViewUser,
                     member: this.props.member,
                 });
             };
@@ -94,5 +100,5 @@ export default createReactClass({
             <BaseAvatar {...otherProps} name={this.state.name} title={this.state.title}
                 idName={userId} url={this.state.imageUrl} onClick={onClick} />
         );
-    },
-});
+    }
+}

src/components/views/avatars/MemberStatusMessageAvatar.js

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

src/components/views/avatars/PulsedAvatar.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 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,23 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
-import * as sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
 
-const GroupsButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton className="mx_GroupsButton" action="toggle_my_groups"
-            label={_t("Communities")}
-            size={props.size}
-            tooltip={true}
-        />
-    );
+interface IProps {
+}
+
+const PulsedAvatar: React.FC<IProps> = (props) => {
+    return <div className="mx_PulsedAvatar">
+        {props.children}
+    </div>;
 };
 
-GroupsButton.propTypes = {
-    size: PropTypes.string,
-};
-
-export default GroupsButton;
+export default PulsedAvatar;

src/components/views/avatars/RoomAvatar.tsx

@@ -13,89 +13,96 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import {MatrixClientPeg} from "../../../MatrixClientPeg";
+import React from 'react';
+import Room from 'matrix-js-sdk/src/models/room';
+import {getHttpUriForMxc} from 'matrix-js-sdk/src/content-repo';
+
+import BaseAvatar from './BaseAvatar';
+import ImageView from '../elements/ImageView';
+import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
-import * as sdk from "../../../index";
 import * as Avatar from '../../../Avatar';
-import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
-
-export default createReactClass({
-    displayName: 'RoomAvatar',
 
+interface IProps {
     // Room may be left unset here, but if it is,
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
-    propTypes: {
-        room: PropTypes.object,
-        oobData: PropTypes.object,
-        width: PropTypes.number,
-        height: PropTypes.number,
-        resizeMethod: PropTypes.string,
-        viewAvatarOnClick: PropTypes.bool,
-    },
+    room?: Room;
+    // TODO: type when js-sdk has types
+    oobData?: any;
+    width?: number;
+    height?: number;
+    resizeMethod?: string;
+    viewAvatarOnClick?: boolean;
+}
 
-    getDefaultProps: function() {
-        return {
-            width: 36,
-            height: 36,
-            resizeMethod: 'crop',
-            oobData: {},
+interface IState {
+    urls: string[];
+}
+
+export default class RoomAvatar extends React.Component<IProps, IState> {
+    public static defaultProps = {
+        width: 36,
+        height: 36,
+        resizeMethod: 'crop',
+        oobData: {},
+    };
+
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            urls: RoomAvatar.getImageUrls(this.props),
         };
-    },
+    }
 
-    getInitialState: function() {
-        return {
-            urls: this.getImageUrls(this.props),
-        };
-    },
-
-    componentDidMount: function() {
+    public componentDidMount() {
         MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
-    },
+    }
 
-    componentWillUnmount: function() {
+    public componentWillUnmount() {
         const cli = MatrixClientPeg.get();
         if (cli) {
             cli.removeListener("RoomState.events", this.onRoomStateEvents);
         }
-    },
+    }
 
-    componentWillReceiveProps: function(newProps) {
-        this.setState({
-            urls: this.getImageUrls(newProps),
-        });
-    },
+    public static getDerivedStateFromProps(nextProps: IProps): IState {
+        return {
+            urls: RoomAvatar.getImageUrls(nextProps),
+        };
+    }
 
-    onRoomStateEvents: function(ev) {
+    // TODO: type when js-sdk has types
+    private onRoomStateEvents = (ev: any) => {
         if (!this.props.room ||
             ev.getRoomId() !== this.props.room.roomId ||
             ev.getType() !== 'm.room.avatar'
         ) return;
 
         this.setState({
-            urls: this.getImageUrls(this.props),
+            urls: RoomAvatar.getImageUrls(this.props),
         });
-    },
+    };
 
-    getImageUrls: function(props) {
+    private static getImageUrls(props: IProps): string[] {
         return [
             getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
+                // Default props don't play nicely with getDerivedStateFromProps
+                //props.oobData !== undefined ? props.oobData.avatarUrl : {},
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
                 props.resizeMethod,
             ), // highest priority
-            this.getRoomAvatarUrl(props),
+            RoomAvatar.getRoomAvatarUrl(props),
         ].filter(function(url) {
-            return (url != null && url != "");
+            return (url !== null && url !== "");
         });
-    },
+    }
 
-    getRoomAvatarUrl: function(props) {
+    private static getRoomAvatarUrl(props: IProps): string {
         if (!props.room) return null;
 
         return Avatar.avatarUrlForRoom(
@@ -104,35 +111,32 @@ export default createReactClass({
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
         );
-    },
+    }
 
-    onRoomAvatarClick: function() {
+    private onRoomAvatarClick = () => {
         const avatarUrl = this.props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
             null, null, null, false);
-        const ImageView = sdk.getComponent("elements.ImageView");
         const params = {
             src: avatarUrl,
             name: this.props.room.name,
         };
 
         Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
-    },
+    };
 
-    render: function() {
-        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-
-        /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+    public render() {
         const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
 
         const roomName = room ? room.name : oobData.name;
 
         return (
-            <BaseAvatar {...otherProps} name={roomName}
+            <BaseAvatar {...otherProps}
+                name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls}
-                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null}
-                disabled={!this.state.urls[0]} />
+                onClick={viewAvatarOnClick && this.state.urls[0] ? this.onRoomAvatarClick : null}
+            />
         );
-    },
-});
+    }
+}

src/components/views/context_menus/MessageContextMenu.js

@@ -23,7 +23,7 @@ import createReactClass from 'create-react-class';
 import {EventStatus} from 'matrix-js-sdk';
 
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
@@ -61,7 +61,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
         this._checkPermissions();
     },
@@ -116,11 +116,6 @@ export default createReactClass({
         this.closeMenu();
     },
 
-    e2eInfoClicked: function() {
-        this.props.e2eInfoCallback();
-        this.closeMenu();
-    },
-
     onReportEventClick: function() {
         const ReportEventDialog = sdk.getComponent("dialogs.ReportEventDialog");
         Modal.createTrackedDialog('Report Event', '', ReportEventDialog, {
@@ -130,22 +125,24 @@ export default 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();
     },
@@ -463,15 +460,6 @@ export default 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 = (
@@ -498,7 +486,6 @@ export default createReactClass({
                 { quoteButton }
                 { externalURLButton }
                 { collapseReplyThread }
-                { e2eInfo }
                 { reportEventButton }
             </div>
         );

src/components/views/context_menus/RoomTileContextMenu.js

@@ -24,7 +24,7 @@ import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import * as Rooms from '../../../Rooms';
 import * as RoomNotifs from '../../../RoomNotifs';
@@ -82,7 +82,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._unmounted = false;
     },
 

src/components/views/context_menus/StatusMessageContextMenu.js

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

src/components/views/context_menus/TagTileContextMenu.js

@@ -18,9 +18,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
-import * as sdk from '../../../index';
 import {MenuItem} from "../../structures/ContextMenu";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
@@ -54,21 +53,12 @@ export default class TagTileContextMenu extends React.Component {
     }
 
     render() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         return <div>
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick}>
-                <TintableSvg
-                    className="mx_TagTileContextMenu_item_icon"
-                    src={require("../../../../res/img/icons-groups.svg")}
-                    width="15"
-                    height="15"
-                />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_viewCommunity" onClick={this._onViewCommunityClick}>
                 { _t('View Community') }
             </MenuItem>
             <hr className="mx_TagTileContextMenu_separator" role="separator" />
-            <MenuItem className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick}>
-                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" alt="" />
+            <MenuItem className="mx_TagTileContextMenu_item mx_TagTileContextMenu_hideCommunity" onClick={this._onRemoveClick}>
                 { _t('Hide') }
             </MenuItem>
         </div>;

src/components/views/context_menus/TopLeftMenu.js

@@ -17,7 +17,7 @@ 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";
@@ -26,6 +26,8 @@ import { getHostingLink } from '../../../utils/HostingLink';
 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 default class TopLeftMenu extends React.Component {
     static propTypes = {
@@ -47,15 +49,7 @@ export default 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() {
@@ -141,7 +135,7 @@ export default class TopLeftMenu extends React.Component {
     }
 
     openSettings() {
-        dis.dispatch({action: 'view_user_settings'});
+        dis.fire(Action.ViewUserSettings);
         this.closeMenu();
     }
 

src/components/views/create_room/CreateRoomButton.js

@@ -1,44 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-import { _t } from '../../../languageHandler';
-
-export default createReactClass({
-    displayName: 'CreateRoomButton',
-    propTypes: {
-        onCreateRoom: PropTypes.func,
-    },
-
-    getDefaultProps: function() {
-        return {
-            onCreateRoom: function() {},
-        };
-    },
-
-    onClick: function() {
-        this.props.onCreateRoom();
-    },
-
-    render: function() {
-        return (
-            <button className="mx_CreateRoomButton" onClick={this.onClick}>{ _t("Create Room") }</button>
-        );
-    },
-});

src/components/views/create_room/RoomAlias.js

@@ -98,7 +98,7 @@ export default 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

@@ -24,7 +24,7 @@ import createReactClass from 'create-react-class';
 import { _t, _td } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import dis from '../../../dispatcher';
+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;
@@ -107,6 +108,7 @@ export default createReactClass({
         };
     },
 
+    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
     UNSAFE_componentWillMount: function() {
         this._textinput = createRef();
     },
@@ -614,7 +616,7 @@ export default createReactClass({
 
     onManageSettingsClick(e) {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.onCancel();
     },
 

src/components/views/dialogs/BaseDialog.js

@@ -75,8 +75,12 @@ export default createReactClass({
         // If provided, this is used to add a aria-describedby attribute
         contentId: PropTypes.string,
 
-        // optional additional class for the title element
-        titleClass: PropTypes.string,
+        // optional additional class for the title element (basically anything that can be passed to classnames)
+        titleClass: PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.object,
+            PropTypes.arrayOf(PropTypes.string),
+        ]),
     },
 
     getDefaultProps: function() {
@@ -86,7 +90,8 @@ export default createReactClass({
         };
     },
 
-    componentWillMount() {
+    // TODO: [REACT-WARNING] Move this to constructor
+    UNSAFE_componentWillMount() {
         this._matrixClient = MatrixClientPeg.get();
     },
 
@@ -143,6 +148,7 @@ export default createReactClass({
                 >
                     <div className={classNames('mx_Dialog_header', {
                         'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                        'mx_Dialog_headerWithCancel': !!cancelButton,
                     })}>
                         <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                             {headerImage}

src/components/views/dialogs/BugReportDialog.js

@@ -164,12 +164,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 " +

src/components/views/dialogs/ConfirmUserActionDialog.js

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

src/components/views/dialogs/CreateGroupDialog.js

@@ -18,7 +18,7 @@ import React from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 

src/components/views/dialogs/CreateRoomDialog.js

@@ -24,17 +24,20 @@ import withValidation from '../elements/Validation';
 import { _t } from '../../../languageHandler';
 import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import {Key} from "../../../Keyboard";
+import {privateShouldBeEncrypted} from "../../../createRoom";
 
 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: privateShouldBeEncrypted(),
             name: "",
             topic: "",
             alias: "",
@@ -62,6 +65,11 @@ export default createReactClass({
         if (this.state.noFederate) {
             createOpts.creation_content = {'m.federate': false};
         }
+
+        if (!this.state.isPublic) {
+            opts.encryption = this.state.isEncrypted;
+        }
+
         return opts;
     },
 
@@ -127,6 +135,10 @@ export default createReactClass({
         this.setState({isPublic});
     },
 
+    onEncryptedChange(isEncrypted) {
+        this.setState({isEncrypted});
+    },
+
     onAliasChange(alias) {
         this.setState({alias});
     },
@@ -166,11 +178,10 @@ 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">
@@ -178,7 +189,27 @@ export default createReactClass({
                 </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) {
+            let microcopy;
+            if (privateShouldBeEncrypted()) {
+                microcopy = _t("You can’t disable this later. Bridges & most bots won’t work yet.");
+            } else {
+                microcopy = _t("Your server admin has disabled end-to-end encryption by default " +
+                    "in private rooms & Direct Messages.");
+            }
+            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>{ microcopy }</p>
+            </React.Fragment>;
         }
 
         const title = this.state.isPublic ? _t('Create a public room') : _t('Create a private room');
@@ -189,10 +220,10 @@ export default createReactClass({
                 <form onSubmit={this.onOk} onKeyDown={this._onKeyDown}>
                     <div className="mx_Dialog_content">
                         <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} />
+                        <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

@@ -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.
@@ -16,11 +17,14 @@ limitations under the License.
 
 import React from 'react';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
 
 export default (props) => {
+    const brand = SdkConfig.get().brand;
+
     const _onLogoutClicked = () => {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createTrackedDialog('Logout e2e db too new', '', QuestionDialog, {
@@ -28,7 +32,8 @@ export default (props) => {
             description: _t(
                 "To avoid losing your chat history, you must export your room keys " +
                 "before logging out. You will need to go back to the newer version of " +
-                "Riot to do this",
+                "%(brand)s to do this",
+                { brand },
             ),
             button: _t("Sign out"),
             focus: false,
@@ -42,10 +47,11 @@ 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 %(brand)s 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.",
+            { brand },
         );
 
     const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');

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.
@@ -23,106 +23,161 @@ import Analytics from '../../../Analytics';
 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";
+import StyledCheckbox from "../elements/StyledCheckbox";
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props) {
         super(props);
 
-        this._onOk = this._onOk.bind(this);
-        this._onCancel = this._onCancel.bind(this);
-        this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
-        this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
-
         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")}
             >
@@ -155,45 +210,24 @@ export default class DeactivateAccountDialog extends React.Component {
 
                     <div className="mx_DeactivateAccountDialog_input_section">
                         <p>
-                            <label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
-                                <input
-                                    id="mx_DeactivateAccountDialog_erase_account_input"
-                                    type="checkbox"
-                                    checked={this.state.shouldErase}
-                                    onChange={this._onEraseFieldChange}
-                                />
-                                { _t(
+                            <StyledCheckbox
+                                checked={this.state.shouldErase}
+                                onChange={this._onEraseFieldChange}
+                            >
+                                {_t(
                                     "Please forget all messages I have sent when my account is deactivated " +
                                     "(<b>Warning:</b> this will cause future users to see an incomplete view " +
                                     "of conversations)",
                                     {},
                                     { b: (sub) => <b>{ sub }</b> },
-                                ) }
-                            </label>
+                                )}
+                            </StyledCheckbox>
                         </p>
 
-                        <p>{ _t("To continue, please enter your password:") }</p>
-                        <Field
-                            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

@@ -1,376 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-Copyright 2019 New Vector Ltd
-Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
-
-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';
-import {verificationMethods} from 'matrix-js-sdk/src/crypto';
-import {ensureDMExists} from "../../../createRoom";
-import dis from "../../../dispatcher";
-import SettingsStore from '../../../settings/SettingsStore';
-import {SHOW_QR_CODE_METHOD} from "matrix-js-sdk/src/crypto/verification/QRCode";
-import VerificationQREmojiOptions from "../verification/VerificationQREmojiOptions";
-
-const MODE_LEGACY = 'legacy';
-const MODE_SAS = 'sas';
-
-const PHASE_START = 0;
-const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
-const PHASE_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 = {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-        onFinished: PropTypes.func.isRequired,
-    };
-
-    constructor() {
-        super();
-        this._verifier = null;
-        this._showSasEvent = null;
-        this._request = null;
-        this.state = {
-            phase: PHASE_START,
-            mode: MODE_SAS,
-            sasVerified: false,
-        };
-    }
-
-    componentWillUnmount() {
-        if (this._verifier) {
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier.cancel('User cancel');
-        }
-    }
-
-    _onSwitchToLegacyClick = () => {
-        if (this._verifier) {
-            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
-            this._verifier.cancel('User cancel');
-            this._verifier = null;
-        }
-        this.setState({mode: MODE_LEGACY});
-    }
-
-    _onSwitchToSasClick = () => {
-        this.setState({mode: MODE_SAS});
-    }
-
-    _onCancelClick = () => {
-        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(
-                this.props.userId, this.props.device.deviceId, true,
-            );
-        }
-        this.props.onFinished(confirm);
-    }
-
-    _onSasRequestClick = async () => {
-        this.setState({
-            phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
-        });
-        const client = MatrixClientPeg.get();
-        const verifyingOwnDevice = this.props.userId === client.getUserId();
-        try {
-            if (!verifyingOwnDevice && SettingsStore.getValue("feature_cross_signing")) {
-                const roomId = await ensureDMExistsAndOpen(this.props.userId);
-                // throws upon cancellation before having started
-                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.isFeatureEnabled("feature_cross_signing")) {
-                this._request = await client.requestVerification(this.props.userId, [
-                    verificationMethods.SAS,
-                    SHOW_QR_CODE_METHOD,
-                    verificationMethods.RECIPROCATE_QR_CODE,
-                ]);
-
-                await this._request.waitFor(r => r.ready || r.started);
-                this.setState({phase: PHASE_PICK_VERIFICATION_OPTION});
-            } else {
-                this._verifier = client.beginKeyVerification(
-                    verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
-                );
-            }
-            if (!this._verifier) return;
-            this._verifier.on('show_sas', this._onVerifierShowSas);
-            // throws upon cancellation
-            await this._verifier.verify();
-            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;
-        }
-    }
-
-    _onSasMatchesClick = () => {
-        this._showSasEvent.confirm();
-        this.setState({
-            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
-        });
-    }
-
-    _onVerifiedDoneClick = () => {
-        this.props.onFinished(true);
-    }
-
-    _onVerifierShowSas = (e) => {
-        this._showSasEvent = e;
-        this.setState({
-            phase: PHASE_SHOW_SAS,
-        });
-    }
-
-    _renderSasVerification() {
-        let body;
-        switch (this.state.phase) {
-            case PHASE_START:
-                body = this._renderVerificationPhaseStart();
-                break;
-            case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
-                body = this._renderVerificationPhaseWaitAccept();
-                break;
-            case PHASE_PICK_VERIFICATION_OPTION:
-                body = this._renderVerificationPhasePick();
-                break;
-            case PHASE_SHOW_SAS:
-                body = this._renderSasVerificationPhaseShowSas();
-                break;
-            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
-                body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
-                break;
-            case PHASE_VERIFIED:
-                body = this._renderVerificationPhaseVerified();
-                break;
-            case PHASE_CANCELLED:
-                body = this._renderVerificationPhaseCancelled();
-                break;
-        }
-
-        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
-        return (
-            <BaseDialog
-                title={_t("Verify session")}
-                onFinished={this._onCancelClick}
-            >
-                {body}
-            </BaseDialog>
-        );
-    }
-
-    _renderVerificationPhaseStart() {
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return (
-            <div>
-                <AccessibleButton
-                    element="span" className="mx_linkButton" onClick={this._onSwitchToLegacyClick}
-                >
-                    {_t("Use Legacy Verification (for older clients)")}
-                </AccessibleButton>
-                <p>
-                    { _t("Verify by comparing a short text string.") }
-                </p>
-                <p>
-                    {_t("To be secure, do this in person or use a trusted way to communicate.")}
-                </p>
-                <DialogButtons
-                    primaryButton={_t('Begin Verifying')}
-                    hasCancel={true}
-                    onPrimaryButtonClick={this._onSasRequestClick}
-                    onCancel={this._onCancelClick}
-                />
-            </div>
-        );
-    }
-
-    _renderVerificationPhaseWaitAccept() {
-        const Spinner = sdk.getComponent("views.elements.Spinner");
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-
-        return (
-            <div>
-                <Spinner />
-                <p>{_t("Waiting for partner to accept...")}</p>
-                <p>{_t(
-                    "Nothing appearing? Not all clients support interactive verification yet. " +
-                    "<button>Use legacy verification</button>.",
-                    {}, {button: sub => <AccessibleButton element='span' className="mx_linkButton"
-                        onClick={this._onSwitchToLegacyClick}
-                    >
-                        {sub}
-                    </AccessibleButton>},
-                )}</p>
-            </div>
-        );
-    }
-
-    _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}
-        />;
-    }
-
-    _renderSasVerificationPhaseWaitForPartnerToConfirm() {
-        const Spinner = sdk.getComponent('views.elements.Spinner');
-        return <div>
-            <Spinner />
-            <p>{_t(
-                "Waiting for %(userId)s to confirm...", {userId: this.props.userId},
-            )}</p>
-        </div>;
-    }
-
-    _renderVerificationPhaseVerified() {
-        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
-        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
-    }
-
-    _renderVerificationPhaseCancelled() {
-        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
-        return <VerificationCancelled onDone={this._onCancelClick} />;
-    }
-
-    _renderLegacyVerification() {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-
-        let text;
-        if (MatrixClientPeg.get().getUserId() === this.props.userId) {
-            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 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 session matches the key below:");
-        }
-
-        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
-        const body = (
-            <div>
-                <AccessibleButton
-                    element="span" className="mx_linkButton" onClick={this._onSwitchToSasClick}
-                >
-                    {_t("Use two-way text verification")}
-                </AccessibleButton>
-                <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 it matches, press the verify button below. " +
-                        "If it doesn't, then someone else is intercepting this session " +
-                        "and you probably want to press the blacklist button instead.") }
-                </p>
-            </div>
-        );
-
-        return (
-            <QuestionDialog
-                title={_t("Verify session")}
-                description={body}
-                button={_t("I verify that the keys match")}
-                onFinished={this._onLegacyFinished}
-            />
-        );
-    }
-
-    render() {
-        if (this.state.mode === MODE_LEGACY) {
-            return this._renderLegacyVerification();
-        } else {
-            return <div>
-                {this._renderSasVerification()}
-            </div>;
-        }
-    }
-}
-
-async function ensureDMExistsAndOpen(userId) {
-    const roomId = await ensureDMExists(MatrixClientPeg.get(), userId);
-    // don't use andView and spinner in createRoom, together, they cause this dialog to close and reopen,
-    // we causes us to loose the verifier and restart, and we end up having two verification requests
-    dis.dispatch({
-        action: 'view_room',
-        room_id: roomId,
-        should_peek: false,
-    });
-    return roomId;
-}

src/components/views/dialogs/DevtoolsDialog.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types';
 import * as sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
-import { Room } from "matrix-js-sdk";
+import { Room, MatrixEvent } from "matrix-js-sdk";
 import Field from "../elements/Field";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 import {useEventEmitter} from "../../../hooks/useEventEmitter";
@@ -267,7 +267,8 @@ class FilteredList extends React.PureComponent {
         };
     }
 
-    componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(nextProps) { // eslint-disable-line camelcase
         if (this.props.children === nextProps.children && this.props.query === nextProps.query) return;
         this.setState({
             filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query),
@@ -326,6 +327,8 @@ class RoomStateExplorer extends React.PureComponent {
 
     static contextType = MatrixClientContext;
 
+    roomStateEvents: Map<string, Map<string, MatrixEvent>>;
+
     constructor(props) {
         super(props);
 
@@ -411,30 +414,26 @@ class RoomStateExplorer extends React.PureComponent {
         if (this.state.eventType === null) {
             list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
                 {
-                    Object.keys(this.roomStateEvents).map((evType) => {
-                        const stateGroup = this.roomStateEvents[evType];
-                        const stateKeys = Object.keys(stateGroup);
-
+                    Array.from(this.roomStateEvents.entries()).map(([eventType, allStateKeys]) => {
                         let onClickFn;
-                        if (stateKeys.length === 1 && stateKeys[0] === '') {
-                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        if (allStateKeys.size === 1 && allStateKeys.has("")) {
+                            onClickFn = this.onViewSourceClick(allStateKeys.get(""));
                         } else {
-                            onClickFn = this.browseEventType(evType);
+                            onClickFn = this.browseEventType(eventType);
                         }
 
-                        return <button className={classes} key={evType} onClick={onClickFn}>
-                            { evType }
+                        return <button className={classes} key={eventType} onClick={onClickFn}>
+                            {eventType}
                         </button>;
                     })
                 }
             </FilteredList>;
         } else {
-            const stateGroup = this.roomStateEvents[this.state.eventType];
+            const stateGroup = this.roomStateEvents.get(this.state.eventType);
 
             list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
                 {
-                    Object.keys(stateGroup).map((stateKey) => {
-                        const ev = stateGroup[stateKey];
+                    Array.from(stateGroup.entries()).map(([stateKey, ev]) => {
                         return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
                             { stateKey }
                         </button>;
@@ -695,6 +694,9 @@ class VerificationExplorer extends React.Component {
                     <VerificationRequest txnId={txnId} request={request} key={txnId} />,
                 )}
             </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>{_t("Back")}</button>
+            </div>
         </div>);
     }
 }

src/components/views/dialogs/IncomingSasDialog.js

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

src/components/views/dialogs/IntegrationsDisabledDialog.js

@@ -18,7 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
 import * as sdk from "../../../index";
-import dis from '../../../dispatcher';
+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

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 
 export default class IntegrationsImpossibleDialog extends React.Component {
@@ -29,6 +30,7 @@ export default class IntegrationsImpossibleDialog extends React.Component {
     };
 
     render() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -39,8 +41,9 @@ export default class IntegrationsImpossibleDialog extends React.Component {
                 <div className='mx_IntegrationsImpossibleDialog_content'>
                     <p>
                         {_t(
-                            "Your Riot doesn't allow you to use an Integration Manager to do this. " +
+                            "Your %(brand)s doesn't allow you to use an Integration Manager to do this. " +
                             "Please contact an admin.",
+                            { brand },
                         )}
                     </p>
                 </div>

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,6 +24,8 @@ 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/InviteDialog.js

@@ -27,15 +27,16 @@ import {getHttpUriForMxc} from "matrix-js-sdk/src/content-repo";
 import * as Email from "../../../email";
 import {getDefaultIdentityServerUrl, useDefaultIdentityServer} from "../../../utils/IdentityServerUtils";
 import {abbreviateUrl} from "../../../utils/UrlUtils";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import Modal from "../../../Modal";
 import {humanizeTime} from "../../../utils/humanize";
-import createRoom, {canEncryptToAllUsers} from "../../../createRoom";
+import createRoom, {canEncryptToAllUsers, privateShouldBeEncrypted} from "../../../createRoom";
 import {inviteMultipleToRoom} from "../../../RoomInvite";
-import SettingsStore from '../../../settings/SettingsStore';
-import RoomListStore, {TAG_DM} from "../../../stores/RoomListStore";
 import {Key} from "../../../Keyboard";
+import {Action} from "../../../dispatcher/actions";
+import {DefaultTagID} from "../../../stores/room-list/models";
+import RoomListStore from "../../../stores/room-list/RoomListStore";
 
 export const KIND_DM = "dm";
 export const KIND_INVITE = "invite";
@@ -343,10 +344,9 @@ export default class InviteDialog extends React.PureComponent {
     _buildRecents(excludedTargetIds: Set<string>): {userId: string, user: RoomMember, lastActive: number} {
         const rooms = DMRoomMap.shared().getUniqueRoomsWithIndividuals(); // map of userId => js-sdk Room
 
-        // Also pull in all the rooms tagged as TAG_DM so we don't miss anything. Sometimes the
+        // Also pull in all the rooms tagged as DefaultTagID.DM so we don't miss anything. Sometimes the
         // room list doesn't tag the room for the DMRoomMap, but does for the room list.
-        const taggedRooms = RoomListStore.getRoomLists();
-        const dmTaggedRooms = taggedRooms[TAG_DM];
+        const dmTaggedRooms = RoomListStore.instance.orderedLists[DefaultTagID.DM];
         const myUserId = MatrixClientPeg.get().getUserId();
         for (const dmRoom of dmTaggedRooms) {
             const otherMembers = dmRoom.getJoinedMembers().filter(u => u.userId !== myUserId);
@@ -574,13 +574,16 @@ export default class InviteDialog extends React.PureComponent {
 
         const createRoomOptions = {inlineErrors: true};
 
-        if (SettingsStore.isFeatureEnabled("feature_cross_signing")) {
+        if (privateShouldBeEncrypted()) {
             // Check whether all users have uploaded device keys before.
             // If so, enable encryption in the new room.
-            const client = MatrixClientPeg.get();
-            const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
-            if (allHaveDeviceKeys) {
-                createRoomOptions.encryption = true;
+            const has3PidMembers = targets.some(t => t instanceof ThreepidMember);
+            if (!has3PidMembers) {
+                const client = MatrixClientPeg.get();
+                const allHaveDeviceKeys = await canEncryptToAllUsers(client, targetIds);
+                if (allHaveDeviceKeys) {
+                    createRoomOptions.encryption = true;
+                }
             }
         }
 
@@ -899,7 +902,7 @@ export default class InviteDialog extends React.PureComponent {
 
     _onManageSettingsClick = (e) => {
         e.preventDefault();
-        dis.dispatch({ action: 'view_user_settings' });
+        dis.fire(Action.ViewUserSettings);
         this.props.onFinished();
     };
 
@@ -1067,9 +1070,8 @@ export default class InviteDialog extends React.PureComponent {
         let buttonText;
         let goButtonFn;
 
+        const userId = MatrixClientPeg.get().getUserId();
         if (this.props.kind === KIND_DM) {
-            const userId = MatrixClientPeg.get().getUserId();
-
             title = _t("Direct Messages");
             helpText = _t(
                 "Start a conversation with someone using their name, username (like <userId/>) or email address.",
@@ -1083,9 +1085,11 @@ export default class InviteDialog extends React.PureComponent {
         } else { // KIND_INVITE
             title = _t("Invite to this room");
             helpText = _t(
-                "If you can't find someone, ask them for their username (e.g. @user:server.com) or " +
-                "<a>share this room</a>.", {},
+                "Invite someone using their name, username (like <userId/>), email address or <a>share this room</a>.",
+                {},
                 {
+                    userId: () =>
+                        <a href={makeUserPermalink(userId)} rel="noreferrer noopener" target="_blank">{userId}</a>,
                     a: (sub) =>
                         <a href={makeRoomPermalink(this.props.roomId)} rel="noreferrer noopener" target="_blank">{sub}</a>,
                 },

src/components/views/dialogs/KeyShareDialog.js

@@ -1,178 +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 * as sdk from '../../../index';
-
-import { _t, _td } from '../../../languageHandler';
-
-// TODO: We can remove this once cross-signing is the only way.
-// https://github.com/vector-im/riot-web/issues/11908
-
-/**
- * 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 session ${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 session '%(displayName)s', which is"
-                + " requesting encryption keys.");
-        } else {
-            text = _td("Your unverified session '%(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 session 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

@@ -17,6 +17,7 @@ limitations under the License.
 import React, {useState, useCallback, useRef} from 'react';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default function KeySignatureUploadFailedDialog({
         failures,
@@ -65,9 +66,10 @@ export default function KeySignatureUploadFailedDialog({
     let body;
     if (!success && !cancelled && continuation && retry > 0) {
         const reason = causes.get(source) || defaultCause;
+        const brand = SdkConfig.get().brand;
 
         body = (<div>
-            <p>{_t("Riot encountered an error during upload of:")}</p>
+            <p>{_t("%(brand)s encountered an error during upload of:", { brand })}</p>
             <p>{reason}</p>
             {retrying && <Spinner />}
             <pre>{JSON.stringify(failures, null, 2)}</pre>
@@ -85,7 +87,7 @@ export default function KeySignatureUploadFailedDialog({
               <span>{_t("Upload completed")}</span> :
               cancelled ?
                 <span>{_t("Cancelled signature upload")}</span> :
-                <span>{_t("Unabled to upload")}</span>}
+                <span>{_t("Unable to upload")}</span>}
             <DialogButtons
                 primaryButton={_t("OK")}
                 hasCancel={false}

src/components/views/dialogs/LazyLoadingDisabledDialog.js

@@ -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.
@@ -17,17 +18,28 @@ limitations under the License.
 import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default (props) => {
-    const description1 =
-        _t("You've previously used Riot on %(host)s with lazy loading of members enabled. " +
-            "In this version lazy loading is disabled. " +
-            "As the local cache is not compatible between these two settings, " +
-            "Riot needs to resync your account.",
-            {host: props.host});
-    const description2 = _t("If the other version of Riot is still open in another tab, " +
-            "please close it as using Riot on the same host with both " +
-            "lazy loading enabled and disabled simultaneously will cause issues.");
+    const brand = SdkConfig.get().brand;
+    const description1 = _t(
+        "You've previously used %(brand)s on %(host)s with lazy loading of members enabled. " +
+        "In this version lazy loading is disabled. " +
+        "As the local cache is not compatible between these two settings, " +
+        "%(brand)s needs to resync your account.",
+        {
+            brand,
+            host: props.host,
+        },
+    );
+    const description2 = _t(
+        "If the other version of %(brand)s is still open in another tab, " +
+        "please close it as using %(brand)s on the same host with both " +
+        "lazy loading enabled and disabled simultaneously will cause issues.",
+        {
+            brand,
+        },
+    );
 
     return (<QuestionDialog
         hasCancelButton={false}

src/components/views/dialogs/LazyLoadingResyncDialog.js

@@ -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.
@@ -17,15 +18,21 @@ limitations under the License.
 import React from 'react';
 import QuestionDialog from './QuestionDialog';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 
 export default (props) => {
+    const brand = SdkConfig.get().brand;
     const description =
-        _t("Riot now uses 3-5x less memory, by only loading information about other users"
-        + " when needed. Please wait whilst we resynchronise with the server!");
+        _t(
+            "%(brand)s now uses 3-5x less memory, by only loading information " +
+            "about other users when needed. Please wait whilst we resynchronise " +
+            "with the server!",
+            { brand },
+        );
 
     return (<QuestionDialog
         hasCancelButton={false}
-        title={_t("Updating Riot")}
+        title={_t("Updating %(brand)s", { brand })}
         description={<div>{description}</div>}
         button={_t("OK")}
         onFinished={props.onFinished}

src/components/views/dialogs/LogoutDialog.js

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

src/components/views/dialogs/RebrandDialog.tsx

@@ -0,0 +1,116 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import DialogButtons from '../elements/DialogButtons';
+
+export enum RebrandDialogKind {
+    NAG,
+    ONE_TIME,
+}
+
+interface IProps {
+    onFinished: (bool) => void;
+    kind: RebrandDialogKind;
+    targetUrl?: string;
+}
+
+export default class RebrandDialog extends React.PureComponent<IProps> {
+    private onDoneClick = () => {
+        this.props.onFinished(true);
+    };
+
+    private onGoToElementClick = () => {
+        this.props.onFinished(true);
+    };
+
+    private onRemindMeLaterClick = () => {
+        this.props.onFinished(false);
+    };
+
+    private getPrettyTargetUrl() {
+        const u = new URL(this.props.targetUrl);
+        let ret = u.host;
+        if (u.pathname !== '/') ret += u.pathname;
+        return ret;
+    }
+
+    getBodyText() {
+        if (this.props.kind === RebrandDialogKind.NAG) {
+            return _t(
+                "Use your account to sign in to the latest version of the app at <a />", {},
+                {
+                    a: sub => <a href={this.props.targetUrl} rel="noopener noreferrer" target="_blank">{this.getPrettyTargetUrl()}</a>,
+                },
+            );
+        } else {
+            return _t(
+                "You’re already signed in and good to go here, but you can also grab the latest " +
+                "versions of the app on all platforms at <a>element.io/get-started</a>.", {},
+                {
+                    a: sub => <a href="https://element.io/get-started" rel="noopener noreferrer" target="_blank">{sub}</a>,
+                },
+            );
+        }
+    }
+
+    getDialogButtons() {
+        if (this.props.kind === RebrandDialogKind.NAG) {
+            return <DialogButtons primaryButton={_t("Go to Element")}
+                primaryButtonClass='primary'
+                onPrimaryButtonClick={this.onGoToElementClick}
+                hasCancel={true}
+                cancelButton={"Remind me later"}
+                onCancel={this.onRemindMeLaterClick}
+                focus={true}
+            />;
+        } else {
+            return <DialogButtons primaryButton={_t("Done")}
+                primaryButtonClass='primary'
+                hasCancel={false}
+                onPrimaryButtonClick={this.onDoneClick}
+                focus={true}
+            />;
+        }
+    }
+
+    render() {
+        return <BaseDialog title={_t("We’re excited to announce Riot is now Element!")}
+            className='mx_RebrandDialog'
+            contentId='mx_Dialog_content'
+            onFinished={this.props.onFinished}
+            hasCancel={false}
+        >
+            <div className="mx_RebrandDialog_body">{this.getBodyText()}</div>
+            <div className="mx_RebrandDialog_logoContainer">
+                <img className="mx_RebrandDialog_logo" src={require("../../../../res/img/riot-logo.svg")} alt="Riot Logo" />
+                <span className="mx_RebrandDialog_chevron" />
+                <img className="mx_RebrandDialog_logo" src={require("../../../../res/img/element-logo.svg")} alt="Element Logo" />
+            </div>
+            <div>
+                {_t(
+                    "Learn more at <a>element.io/previously-riot</a>", {}, {
+                        a: sub => <a href="https://element.io/previously-riot" rel="noopener noreferrer" target="_blank">{sub}</a>,
+                    }
+                )}
+            </div>
+            {this.getDialogButtons()}
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/RoomSettingsDialog.js

@@ -27,21 +27,28 @@ import NotificationSettingsTab from "../settings/tabs/room/NotificationSettingsT
 import BridgeSettingsTab from "../settings/tabs/room/BridgeSettingsTab";
 import * as sdk from "../../../index";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
-import dis from "../../../dispatcher";
+import dis from "../../../dispatcher/dispatcher";
 import SettingsStore from "../../../settings/SettingsStore";
 
+export const ROOM_GENERAL_TAB = "ROOM_GENERAL_TAB";
+export const ROOM_SECURITY_TAB = "ROOM_SECURITY_TAB";
+export const ROOM_ROLES_TAB = "ROOM_ROLES_TAB";
+export const ROOM_NOTIFICATIONS_TAB = "ROOM_NOTIFICATIONS_TAB";
+export const ROOM_BRIDGES_TAB = "ROOM_BRIDGES_TAB";
+export const ROOM_ADVANCED_TAB = "ROOM_ADVANCED_TAB";
+
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
         roomId: PropTypes.string.isRequired,
         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) => {
@@ -56,28 +63,33 @@ export default class RoomSettingsDialog extends React.Component {
         const tabs = [];
 
         tabs.push(new Tab(
+            ROOM_GENERAL_TAB,
             _td("General"),
             "mx_RoomSettingsDialog_settingsIcon",
             <GeneralRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_SECURITY_TAB,
             _td("Security & Privacy"),
             "mx_RoomSettingsDialog_securityIcon",
             <SecurityRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_ROLES_TAB,
             _td("Roles & Permissions"),
             "mx_RoomSettingsDialog_rolesIcon",
             <RolesRoomSettingsTab roomId={this.props.roomId} />,
         ));
         tabs.push(new Tab(
+            ROOM_NOTIFICATIONS_TAB,
             _td("Notifications"),
-            "mx_RoomSettingsDialog_rolesIcon",
+            "mx_RoomSettingsDialog_notificationsIcon",
             <NotificationSettingsTab roomId={this.props.roomId} />,
         ));
 
         if (SettingsStore.isFeatureEnabled("feature_bridge_state")) {
             tabs.push(new Tab(
+                ROOM_BRIDGES_TAB,
                 _td("Bridges"),
                 "mx_RoomSettingsDialog_bridgesIcon",
                 <BridgeSettingsTab roomId={this.props.roomId} />,
@@ -85,6 +97,7 @@ export default class RoomSettingsDialog extends React.Component {
         }
 
         tabs.push(new Tab(
+            ROOM_ADVANCED_TAB,
             _td("Advanced"),
             "mx_RoomSettingsDialog_warningIcon",
             <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,

src/components/views/dialogs/RoomUpgradeDialog.js

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

src/components/views/dialogs/RoomUpgradeWarningDialog.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import {_t} from "../../../languageHandler";
+import SdkConfig from "../../../SdkConfig";
 import * as sdk from "../../../index";
 import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -63,6 +64,7 @@ export default class RoomUpgradeWarningDialog extends React.Component {
     };
 
     render() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -96,8 +98,11 @@ export default class RoomUpgradeWarningDialog extends React.Component {
                     <p>
                         {_t(
                             "This usually only affects how the room is processed on the server. If you're " +
-                            "having problems with your Riot, please <a>report a bug</a>.",
-                            {}, {
+                            "having problems with your %(brand)s, please <a>report a bug</a>.",
+                            {
+                                brand,
+                            },
+                            {
                                 "a": (sub) => {
                                     return <a href='#' onClick={this._openBugReportDialog}>{sub}</a>;
                                 },

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018 New Vector Ltd
+Copyright 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -56,6 +57,7 @@ export default createReactClass({
     },
 
     render: function() {
+        const brand = SdkConfig.get().brand;
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
@@ -94,9 +96,10 @@ export default createReactClass({
                     <p>{ _t("We encountered an error trying to restore your previous session.") }</p>
 
                     <p>{ _t(
-                        "If you have previously used a more recent version of Riot, your session " +
+                        "If you have previously used a more recent version of %(brand)s, your session " +
                         "may be incompatible with this version. Close this window and return " +
                         "to the more recent version.",
+                        { brand },
                      ) }</p>
 
                     <p>{ _t(

src/components/views/dialogs/SetMxIdDialog.js

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

src/components/views/dialogs/SetPasswordDialog.js

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

src/components/views/dialogs/SetupEncryptionDialog.js

@@ -14,16 +14,52 @@ 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';
 
-export default function SetupEncryptionDialog({onFinished}) {
-    return <BaseDialog
-        headerImage={require("../../../../res/img/e2e/warning.svg")}
-        onFinished={onFinished}
-        title={_t("Verify this session")}
-    >
-        <SetupEncryptionBody onFinished={onFinished} />
-    </BaseDialog>;
+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,21 @@ 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 * 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";
+import StyledCheckbox from '../elements/StyledCheckbox';
 
 const socials = [
     {
@@ -52,7 +59,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 +82,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 +129,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) {
@@ -147,46 +169,31 @@ export default class ShareDialog extends React.Component {
             const events = this.props.target.getLiveTimeline().getEvents();
             if (events.length > 0) {
                 checkbox = <div>
-                    <input type="checkbox"
-                           id="mx_ShareDialog_checkbox"
-                           checked={this.state.linkSpecificEvent}
-                           onChange={this.onLinkSpecificEventCheckboxClick} />
-                    <label htmlFor="mx_ShareDialog_checkbox">
+                    <StyledCheckbox
+                        checked={this.state.linkSpecificEvent}
+                        onChange={this.onLinkSpecificEventCheckboxClick}
+                    >
                         { _t('Link to most recent message') }
-                    </label>
+                    </StyledCheckbox>
                 </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>
-                <input type="checkbox"
-                       id="mx_ShareDialog_checkbox"
+                <StyledCheckbox
                        checked={this.state.linkSpecificEvent}
-                       onClick={this.onLinkSpecificEventCheckboxClick} />
-                <label htmlFor="mx_ShareDialog_checkbox">
+                       onClick={this.onLinkSpecificEventCheckboxClick}
+                >
                     { _t('Link to selected message') }
-                </label>
+                </StyledCheckbox>
             </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 +204,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 +220,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="noreferrer 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 {CommandCategories, Commands} from "../../../SlashCommands";
 import * as sdk from "../../../index";
 
 export default ({onFinished}) => {
     const InfoDialog = sdk.getComponent('dialogs.InfoDialog');
 
     const categories = {};
-    Object.values(CommandMap).forEach(cmd => {
+    Commands.forEach(cmd => {
         if (!categories[cmd.category]) {
             categories[cmd.category] = [];
         }
@@ -41,7 +41,7 @@ export default ({onFinished}) => {
 
         categories[category].forEach(cmd => {
             rows.push(<tr key={cmd.command}>
-                <td><strong>{cmd.command}</strong></td>
+                <td><strong>{cmd.getCommand()}</strong></td>
                 <td>{cmd.args}</td>
                 <td>{cmd.description}</td>
             </tr>);

src/components/views/dialogs/TextInputDialog.js

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

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -1,187 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2017 New Vector 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 React from 'react';
-import createReactClass from 'create-react-class';
-import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
-import {MatrixClientPeg} from '../../../MatrixClientPeg';
-import { _t } from '../../../languageHandler';
-import SettingsStore from "../../../settings/SettingsStore";
-import { markAllDevicesKnown } from '../../../cryptodevices';
-
-function UserUnknownDeviceList(props) {
-    const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
-    const {userId, userDevices} = props;
-
-    const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-        <li key={deviceId}><MemberDeviceInfo device={userDevices[deviceId]} userId={userId} showDeviceId={true} /></li>,
-    );
-
-    return (
-        <ul className="mx_UnknownDeviceDialog_deviceList">
-            { deviceListEntries }
-        </ul>
-    );
-}
-
-UserUnknownDeviceList.propTypes = {
-    userId: PropTypes.string.isRequired,
-
-    // map from deviceid -> deviceinfo
-    userDevices: PropTypes.object.isRequired,
-};
-
-
-function UnknownDeviceList(props) {
-    const {devices} = props;
-
-    const userListEntries = Object.keys(devices).map((userId) =>
-        <li key={userId}>
-            <p>{ userId }:</p>
-            <UserUnknownDeviceList userId={userId} userDevices={devices[userId]} />
-        </li>,
-    );
-
-    return <ul>{ userListEntries }</ul>;
-}
-
-UnknownDeviceList.propTypes = {
-    // map from userid -> deviceid -> deviceinfo
-    devices: PropTypes.object.isRequired,
-};
-
-
-export default createReactClass({
-    displayName: 'UnknownDeviceDialog',
-
-    propTypes: {
-        room: PropTypes.object.isRequired,
-
-        // map from userid -> deviceid -> deviceinfo or null if devices are not yet loaded
-        devices: PropTypes.object,
-
-        onFinished: PropTypes.func.isRequired,
-
-        // Label for the button that marks all devices known and tries the send again
-        sendAnywayLabel: PropTypes.string.isRequired,
-
-        // Label for the button that to send the event if you've verified all devices
-        sendLabel: PropTypes.string.isRequired,
-
-        // function to retry the request once all devices are verified / known
-        onSend: PropTypes.func.isRequired,
-    },
-
-    componentWillMount: function() {
-        MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
-    },
-
-    componentWillUnmount: function() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("deviceVerificationChanged", this._onDeviceVerificationChanged);
-        }
-    },
-
-    _onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
-        if (this.props.devices[userId] && this.props.devices[userId][deviceId]) {
-            // XXX: Mutating props :/
-            this.props.devices[userId][deviceId] = deviceInfo;
-            this.forceUpdate();
-        }
-    },
-
-    _onDismissClicked: function() {
-        this.props.onFinished();
-    },
-
-    _onSendAnywayClicked: function() {
-        markAllDevicesKnown(MatrixClientPeg.get(), this.props.devices);
-
-        this.props.onFinished();
-        this.props.onSend();
-    },
-
-    _onSendClicked: function() {
-        this.props.onFinished();
-        this.props.onSend();
-    },
-
-    render: function() {
-        if (this.props.devices === null) {
-            const Spinner = sdk.getComponent("elements.Spinner");
-            return <Spinner />;
-        }
-
-        let warning;
-        if (SettingsStore.getValue("blacklistUnverifiedDevices", this.props.room.roomId)) {
-            warning = (
-                <h4>
-                    { _t("You are currently blacklisting unverified sessions; to send " +
-                    "messages to these sessions you must verify them.") }
-                </h4>
-            );
-        } else {
-            warning = (
-                <div>
-                    <p>
-                        { _t("We recommend you go through the verification process " +
-                            "for each session to confirm they belong to their legitimate owner, " +
-                            "but you can resend the message without verifying if you prefer.") }
-                    </p>
-                </div>
-            );
-        }
-
-        let haveUnknownDevices = false;
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                const device = this.props.devices[userId][deviceId];
-                if (device.isUnverified() && !device.isKnown()) {
-                    haveUnknownDevices = true;
-                }
-            });
-        });
-        const sendButtonOnClick = haveUnknownDevices ? this._onSendAnywayClicked : this._onSendClicked;
-        const sendButtonLabel = haveUnknownDevices ? this.props.sendAnywayLabel : this.props.sendAnywayLabel;
-
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-        return (
-            <BaseDialog className='mx_UnknownDeviceDialog'
-                onFinished={this.props.onFinished}
-                title={_t('Room contains unknown sessions')}
-                contentId='mx_Dialog_content'
-            >
-                <div className="mx_Dialog_content" id='mx_Dialog_content'>
-                    <h4>
-                        { _t('"%(RoomName)s" contains sessions that you haven\'t seen before.', {RoomName: this.props.room.name}) }
-                    </h4>
-                    { warning }
-                    { _t("Unknown sessions") }:
-
-                    <UnknownDeviceList devices={this.props.devices} />
-                </div>
-                <DialogButtons primaryButton={sendButtonLabel}
-                    onPrimaryButtonClick={sendButtonOnClick}
-                    onCancel={this._onDismissClicked} />
-            </BaseDialog>
-        );
-        // XXX: do we want to give the user the option to enable blacklistUnverifiedDevices for this room (or globally) at this point?
-        // It feels like confused users will likely turn it on and then disappear in a cloud of UISIs...
-    },
-});

src/components/views/dialogs/UploadConfirmDialog.js

@@ -84,7 +84,7 @@ export default class UploadConfirmDialog extends React.Component {
             preview = <div>
                 <div>
                     <img className="mx_UploadConfirmDialog_fileIcon"
-                        src={require("../../../../res/img/files.png")}
+                        src={require("../../../../res/img/feather-customised/files.svg")}
                     />
                     {this.props.file.name} ({filesize(this.props.file.size)})
                 </div>

src/components/views/dialogs/UserSettingsDialog.js

@@ -22,6 +22,7 @@ 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";
@@ -32,9 +33,21 @@ import * as sdk from "../../../index";
 import SdkConfig from "../../../SdkConfig";
 import MjolnirUserSettingsTab from "../settings/tabs/user/MjolnirUserSettingsTab";
 
+export const USER_GENERAL_TAB = "USER_GENERAL_TAB";
+export const USER_APPEARANCE_TAB = "USER_APPEARANCE_TAB";
+export const USER_FLAIR_TAB = "USER_FLAIR_TAB";
+export const USER_NOTIFICATIONS_TAB = "USER_NOTIFICATIONS_TAB";
+export const USER_PREFERENCES_TAB = "USER_PREFERENCES_TAB";
+export const USER_VOICE_TAB = "USER_VOICE_TAB";
+export const USER_SECURITY_TAB = "USER_SECURITY_TAB";
+export const USER_LABS_TAB = "USER_LABS_TAB";
+export const USER_MJOLNIR_TAB = "USER_MJOLNIR_TAB";
+export const USER_HELP_TAB = "USER_HELP_TAB";
+
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
+        initialTabId: PropTypes.string,
     };
 
     constructor() {
@@ -62,37 +75,50 @@ export default class UserSettingsDialog extends React.Component {
         const tabs = [];
 
         tabs.push(new Tab(
+            USER_GENERAL_TAB,
             _td("General"),
             "mx_UserSettingsDialog_settingsIcon",
             <GeneralUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
         tabs.push(new Tab(
+            USER_APPEARANCE_TAB,
+            _td("Appearance"),
+            "mx_UserSettingsDialog_appearanceIcon",
+            <AppearanceUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            USER_FLAIR_TAB,
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
             <FlairUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_NOTIFICATIONS_TAB,
             _td("Notifications"),
             "mx_UserSettingsDialog_bellIcon",
             <NotificationUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_PREFERENCES_TAB,
             _td("Preferences"),
             "mx_UserSettingsDialog_preferencesIcon",
             <PreferencesUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_VOICE_TAB,
             _td("Voice & Video"),
             "mx_UserSettingsDialog_voiceIcon",
             <VoiceUserSettingsTab />,
         ));
         tabs.push(new Tab(
+            USER_SECURITY_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(
+                USER_LABS_TAB,
                 _td("Labs"),
                 "mx_UserSettingsDialog_labsIcon",
                 <LabsUserSettingsTab />,
@@ -100,12 +126,14 @@ export default class UserSettingsDialog extends React.Component {
         }
         if (this.state.mjolnirEnabled) {
             tabs.push(new Tab(
+                USER_MJOLNIR_TAB,
                 _td("Ignored users"),
                 "mx_UserSettingsDialog_mjolnirIcon",
                 <MjolnirUserSettingsTab />,
             ));
         }
         tabs.push(new Tab(
+            USER_HELP_TAB,
             _td("Help & About"),
             "mx_UserSettingsDialog_helpIcon",
             <HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
@@ -121,7 +149,7 @@ export default class UserSettingsDialog extends React.Component {
             <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
                         onFinished={this.props.onFinished} title={_t("Settings")}>
                 <div className='ms_SettingsDialog_content'>
-                    <TabbedView tabs={this._getTabs()} />
+                    <TabbedView tabs={this._getTabs()} initialTabId={this.props.initialTabId} />
                 </div>
             </BaseDialog>
         );

src/components/views/dialogs/VerificationRequestDialog.js

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

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

@@ -20,7 +20,6 @@ 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 { accessSecretStorage } from '../../../../CrossSigningManager';
 
@@ -59,6 +58,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             forceRecoveryKey: false,
             passPhrase: '',
             restoreType: null,
+            progress: { stage: "prefetch" },
         };
     }
 
@@ -80,16 +80,15 @@ 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();
-                },
-            }, null, /* priority = */ false, /* static = */ true,
-        );
+        accessSecretStorage(() => {}, /* forceReset = */ true);
     }
 
     _onRecoveryKeyChange = (e) => {
@@ -110,6 +109,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // 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(
@@ -146,6 +146,7 @@ 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);
@@ -184,7 +185,8 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             // `accessSecretStorage` may prompt for storage access as needed.
             const recoverInfo = await accessSecretStorage(async () => {
                 return MatrixClientPeg.get().restoreKeyBackupWithSecretStorage(
-                    this.state.backupInfo,
+                    this.state.backupInfo, undefined, undefined,
+                    { progressCallback: this._progressCallback },
                 );
             });
             this.setState({
@@ -207,6 +209,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                 undefined, /* targetRoomId */
                 undefined, /* targetSessionId */
                 backupInfo,
+                { progressCallback: this._progressCallback },
             );
             this.setState({
                 recoverInfo,
@@ -224,8 +227,10 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             loadError: null,
         });
         try {
-            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
-            const backupKeyStored = await MatrixClientPeg.get().isKeyBackupKeyStored();
+            const cli = MatrixClientPeg.get();
+            const backupInfo = await cli.getKeyBackupVersion();
+            const has4S = await cli.hasSecretStorageKey();
+            const backupKeyStored = has4S && await cli.isKeyBackupKeyStored();
             this.setState({
                 backupInfo,
                 backupKeyStored,
@@ -272,8 +277,20 @@ 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");
@@ -283,7 +300,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     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>;
@@ -291,7 +308,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
                     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>;
@@ -305,7 +322,7 @@ export default class RestoreKeyBackupDialog extends React.PureComponent {
             content = _t("No backup found!");
         } else if (this.state.recoverInfo) {
             const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-            title = _t("Backup restored");
+            title = _t("Keys restored");
             let failedToDecrypt;
             if (this.state.recoverInfo.total > this.state.recoverInfo.imported) {
                 failedToDecrypt = <p>{_t(
@@ -314,7 +331,7 @@ 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}
@@ -435,7 +452,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

@@ -15,13 +15,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { debounce } from 'lodash';
+import classNames from 'classnames';
 import React from 'react';
 import PropTypes from "prop-types";
 import * as sdk from '../../../../index';
 import {MatrixClientPeg} from '../../../../MatrixClientPeg';
+import Field from '../../elements/Field';
+import AccessibleButton from '../../elements/AccessibleButton';
 
 import { _t } from '../../../../languageHandler';
 
+// Maximum acceptable size of a key file. It's 59 characters including the spaces we encode,
+// so this should be plenty and allow for people putting extra whitespace in the file because
+// maybe that's a thing people would do?
+const KEY_FILE_MAX_SIZE = 128;
+
+// Don't shout at the user that their key is invalid every time they type a key: wait a short time
+const VALIDATION_THROTTLE_MS = 200;
+
 /*
  * Access Secure Secret Storage by requesting the user's passphrase.
  */
@@ -35,9 +47,14 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
     constructor(props) {
         super(props);
+
+        this._fileUpload = React.createRef();
+
         this.state = {
             recoveryKey: "",
-            recoveryKeyValid: false,
+            recoveryKeyValid: null,
+            recoveryKeyCorrect: null,
+            recoveryKeyFileError: null,
             forceRecoveryKey: false,
             passPhrase: '',
             keyMatches: null,
@@ -54,17 +71,89 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
-    _onResetRecoveryClick = () => {
-        this.props.onFinished(false);
-        throw new Error("Resetting secret storage unimplemented");
+    _validateRecoveryKeyOnChange = debounce(() => {
+        this._validateRecoveryKey();
+    }, VALIDATION_THROTTLE_MS);
+
+    async _validateRecoveryKey() {
+        if (this.state.recoveryKey === '') {
+            this.setState({
+                recoveryKeyValid: null,
+                recoveryKeyCorrect: null,
+            });
+            return;
+        }
+
+        try {
+            const cli = MatrixClientPeg.get();
+            const decodedKey = cli.keyBackupKeyFromRecoveryKey(this.state.recoveryKey);
+            const correct = await cli.checkSecretStorageKey(
+                decodedKey, this.props.keyInfo,
+            );
+            this.setState({
+                recoveryKeyValid: true,
+                recoveryKeyCorrect: correct,
+            });
+        } catch (e) {
+            this.setState({
+                recoveryKeyValid: false,
+                recoveryKeyCorrect: false,
+            });
+        }
     }
 
     _onRecoveryKeyChange = (e) => {
         this.setState({
             recoveryKey: e.target.value,
-            recoveryKeyValid: MatrixClientPeg.get().isValidRecoveryKey(e.target.value),
-            keyMatches: null,
+            recoveryKeyFileError: null,
         });
+
+        // also clear the file upload control so that the user can upload the same file
+        // the did before (otherwise the onchange wouldn't fire)
+        if (this._fileUpload.current) this._fileUpload.current.value = null;
+
+        // We don't use Field's validation here because a) we want it in a separate place rather
+        // than in a tooltip and b) we want it to display feedback based on the uploaded file
+        // as well as the text box. Ideally we would refactor Field's validation logic so we could
+        // re-use some of it.
+        this._validateRecoveryKeyOnChange();
+    }
+
+    _onRecoveryKeyFileChange = async e => {
+        if (e.target.files.length === 0) return;
+
+        const f = e.target.files[0];
+
+        if (f.size > KEY_FILE_MAX_SIZE) {
+            this.setState({
+                recoveryKeyFileError: true,
+                recoveryKeyCorrect: false,
+                recoveryKeyValid: false,
+            });
+        } else {
+            const contents = await f.text();
+            // test it's within the base58 alphabet. We could be more strict here, eg. require the
+            // right number of characters, but it's really just to make sure that what we're reading is
+            // text because we'll put it in the text field.
+            if (/^[123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz\s]+$/.test(contents)) {
+                this.setState({
+                    recoveryKeyFileError: null,
+                    recoveryKey: contents.trim(),
+                });
+                this._validateRecoveryKey();
+            } else {
+                this.setState({
+                    recoveryKeyFileError: true,
+                    recoveryKeyCorrect: false,
+                    recoveryKeyValid: false,
+                    recoveryKey: '',
+                });
+            }
+        }
+    }
+
+    _onRecoveryKeyFileUploadClick = () => {
+        this._fileUpload.current.click();
     }
 
     _onPassPhraseNext = async (e) => {
@@ -104,6 +193,20 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
         });
     }
 
+    getKeyValidationText() {
+        if (this.state.recoveryKeyFileError) {
+            return _t("Wrong file type");
+        } else if (this.state.recoveryKeyCorrect) {
+            return _t("Looks good!");
+        } else if (this.state.recoveryKeyValid) {
+            return _t("Wrong Recovery Key");
+        } else if (this.state.recoveryKeyValid === null) {
+            return '';
+        } else {
+            return _t("Invalid Recovery Key");
+        }
+    }
+
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
@@ -116,17 +219,19 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
 
         let content;
         let title;
+        let titleClass;
         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("Security Phrase");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_securePhraseTitle'];
 
             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 {
@@ -135,13 +240,15 @@ 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: sub => <b>{sub}</b> },
-                )}</p>
-                <p>{_t(
-                    "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your passphrase.",
+                    "Enter your Security Phrase or <button>Use your Security Key</button> to continue.", {},
+                    {
+                        button: s => <AccessibleButton className="mx_linkButton"
+                            element="span"
+                            onClick={this._onUseRecoveryKeyClick}
+                        >
+                            {s}
+                        </AccessibleButton>,
+                    },
                 )}</p>
 
                 <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onPassPhraseNext}>
@@ -152,10 +259,11 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         value={this.state.passPhrase}
                         autoFocus={true}
                         autoComplete="new-password"
+                        placeholder={_t("Security Phrase")}
                     />
                     {keyStatus}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onPassPhraseNext}
                         hasCancel={true}
                         onCancel={this._onCancel}
@@ -163,88 +271,61 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
                         primaryDisabled={this.state.passPhrase.length === 0}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your passphrase you can "+
-                    "<button1>use your recovery key</button1> or " +
-                    "<button2>set up new recovery options</button2>."
-                , {}, {
-                    button1: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onUseRecoveryKeyClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                    button2: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         } else {
-            title = _t("Enter secret storage recovery key");
+            title = _t("Security Key");
+            titleClass = ['mx_AccessSecretStorageDialog_titleWithIcon mx_AccessSecretStorageDialog_secureBackupTitle'];
             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" />;
-            } 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.",
-                    )}
-                </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")}
-                </div>;
-            }
+            const feedbackClasses = classNames({
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback': true,
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback_valid': this.state.recoveryKeyCorrect === true,
+                'mx_AccessSecretStorageDialog_recoveryKeyFeedback_invalid': this.state.recoveryKeyCorrect === false,
+            });
+            const recoveryKeyFeedback = <div className={feedbackClasses}>
+                {this.getKeyValidationText()}
+            </div>;
 
             content = <div>
-                <p>{_t(
-                    "<b>Warning</b>: You should only access secret storage " +
-                    "from a trusted computer.", {},
-                    { b: sub => <b>{sub}</b> },
-                )}</p>
-                <p>{_t(
-                    "Access your secure message history and your cross-signing " +
-                    "identity for verifying other sessions by entering your recovery key.",
-                )}</p>
+                <p>{_t("Use your Security Key to continue.")}</p>
 
-                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext}>
-                    <input className="mx_AccessSecretStorageDialog_recoveryKeyInput"
-                        onChange={this._onRecoveryKeyChange}
-                        value={this.state.recoveryKey}
-                        autoFocus={true}
-                    />
-                    {keyStatus}
+                <form className="mx_AccessSecretStorageDialog_primaryContainer" onSubmit={this._onRecoveryKeyNext} spellCheck={false}>
+                    <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry">
+                        <div className="mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput">
+                            <Field
+                                type="text"
+                                label={_t('Security Key')}
+                                value={this.state.recoveryKey}
+                                onChange={this._onRecoveryKeyChange}
+                                forceValidity={this.state.recoveryKeyCorrect}
+                            />
+                        </div>
+                        <span className="mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText">
+                            {_t("or")}
+                        </span>
+                        <div>
+                            <input type="file"
+                                className="mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput"
+                                ref={this._fileUpload}
+                                onChange={this._onRecoveryKeyFileChange}
+                            />
+                            <AccessibleButton kind="primary" onClick={this._onRecoveryKeyFileUploadClick}>
+                                {_t("Upload")}
+                            </AccessibleButton>
+                        </div>
+                    </div>
+                    {recoveryKeyFeedback}
                     <DialogButtons
-                        primaryButton={_t('Next')}
+                        primaryButton={_t('Continue')}
                         onPrimaryButtonClick={this._onRecoveryKeyNext}
                         hasCancel={true}
+                        cancelButton={_t("Go Back")}
+                        cancelButtonClass='danger'
                         onCancel={this._onCancel}
                         focus={false}
                         primaryDisabled={!this.state.recoveryKeyValid}
                     />
                 </form>
-                {_t(
-                    "If you've forgotten your recovery key you can "+
-                    "<button>set up new recovery options</button>."
-                , {}, {
-                    button: s => <AccessibleButton className="mx_linkButton"
-                        element="span"
-                        onClick={this._onResetRecoveryClick}
-                    >
-                        {s}
-                    </AccessibleButton>,
-                })}
             </div>;
         }
 
@@ -252,6 +333,7 @@ export default class AccessSecretStorageDialog extends React.PureComponent {
             <BaseDialog className='mx_AccessSecretStorageDialog'
                 onFinished={this.props.onFinished}
                 title={title}
+                titleClass={titleClass}
             >
             <div>
                 {content}

src/components/views/elements/AccessibleButton.tsx

@@ -15,9 +15,36 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import {Key} from '../../../Keyboard';
+import classnames from 'classnames';
+
+export type ButtonEvent = React.MouseEvent<Element> | React.KeyboardEvent<Element>;
+
+/**
+ * children: React's magic prop. Represents all children given to the element.
+ * element:  (optional) The base element type. "div" by default.
+ * onClick:  (required) Event handler for button activation. Should be
+ *           implemented exactly like a normal onClick handler.
+ */
+interface IProps extends React.InputHTMLAttributes<Element> {
+    inputRef?: React.Ref<Element>;
+    element?: string;
+    // The kind of button, similar to how Bootstrap works.
+    // See available classes for AccessibleButton for options.
+    kind?: string;
+    // The ARIA role
+    role?: string;
+    // The tabIndex
+    tabIndex?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick?(e?: ButtonEvent): void;
+}
+
+interface IAccessibleButtonProps extends React.InputHTMLAttributes<Element> {
+    ref?: React.Ref<Element>;
+}
 
 /**
  * AccessibleButton is a generic wrapper for any element that should be treated
@@ -27,11 +54,19 @@ import {Key} from '../../../Keyboard';
  * @param {Object} props  react element properties
  * @returns {Object} rendered react
  */
-export default function AccessibleButton(props) {
-    const {element, onClick, children, kind, disabled, ...restProps} = props;
-
+export default function AccessibleButton({
+    element,
+    onClick,
+    children,
+    kind,
+    disabled,
+    inputRef,
+    className,
+    ...restProps
+}: IProps) {
+    const newProps: IAccessibleButtonProps = restProps;
     if (!disabled) {
-        restProps.onClick = onClick;
+        newProps.onClick = onClick;
         // We need to consume enter onKeyDown and space onKeyUp
         // otherwise we are risking also activating other keyboard focusable elements
         // that might receive focus as a result of the AccessibleButtonClick action
@@ -39,7 +74,7 @@ export default function AccessibleButton(props) {
         // And divs which we report as role button to assistive technologies.
         // Browsers handle space and enter keypresses differently and we are only adjusting to the
         // inconsistencies here
-        restProps.onKeyDown = function(e) {
+        newProps.onKeyDown = (e) => {
             if (e.key === Key.ENTER) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -50,7 +85,7 @@ export default function AccessibleButton(props) {
                 e.preventDefault();
             }
         };
-        restProps.onKeyUp = function(e) {
+        newProps.onKeyUp = (e) => {
             if (e.key === Key.SPACE) {
                 e.stopPropagation();
                 e.preventDefault();
@@ -64,57 +99,26 @@ export default function AccessibleButton(props) {
     }
 
     // Pass through the ref - used for keyboard shortcut access to some buttons
-    restProps.ref = restProps.inputRef;
-    delete restProps.inputRef;
+    newProps.ref = inputRef;
 
-    restProps.className = (restProps.className ? restProps.className + " " : "") + "mx_AccessibleButton";
-
-    if (kind) {
-        // We apply a hasKind class to maintain backwards compatibility with
-        // buttons which might not know about kind and break
-        restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
-    }
-
-    if (disabled) {
-        restProps.className += " mx_AccessibleButton_disabled";
-        restProps["aria-disabled"] = true;
-    }
+    newProps.className = classnames(
+        "mx_AccessibleButton",
+        className,
+        {
+            "mx_AccessibleButton_hasKind": kind,
+            [`mx_AccessibleButton_kind_${kind}`]: kind,
+            "mx_AccessibleButton_disabled": disabled,
+        },
+    );
 
+    // React.createElement expects InputHTMLAttributes
     return React.createElement(element, restProps, children);
 }
 
-/**
- * children: React's magic prop. Represents all children given to the element.
- * element:  (optional) The base element type. "div" by default.
- * onClick:  (required) Event handler for button activation. Should be
- *           implemented exactly like a normal onClick handler.
- */
-AccessibleButton.propTypes = {
-    children: PropTypes.node,
-    inputRef: PropTypes.oneOfType([
-        // Either a function
-        PropTypes.func,
-        // Or the instance of a DOM native element
-        PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
-    ]),
-    element: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-
-    // The kind of button, similar to how Bootstrap works.
-    // See available classes for AccessibleButton for options.
-    kind: PropTypes.string,
-    // The ARIA role
-    role: PropTypes.string,
-    // The tabIndex
-    tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-    disabled: PropTypes.bool,
-};
-
 AccessibleButton.defaultProps = {
     element: 'div',
     role: 'button',
-    tabIndex: "0",
+    tabIndex: 0,
 };
 
 AccessibleButton.displayName = "AccessibleButton";

src/components/views/elements/AccessibleTooltipButton.tsx

@@ -16,21 +16,28 @@ limitations under the License.
 */
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
 import AccessibleButton from "./AccessibleButton";
-import * as sdk from "../../../index";
+import Tooltip from './Tooltip';
 
-export default class AccessibleTooltipButton extends React.PureComponent {
-    static propTypes = {
-        ...AccessibleButton.propTypes,
-        // The tooltip to render on hover
-        title: PropTypes.string.isRequired,
-    };
+interface ITooltipProps extends React.ComponentProps<typeof AccessibleButton> {
+    title: string;
+    tooltip?: React.ReactNode;
+    tooltipClassName?: string;
+}
 
-    state = {
-        hover: false,
-    };
+interface IState {
+    hover: boolean;
+}
+
+export default class AccessibleTooltipButton extends React.PureComponent<ITooltipProps, IState> {
+    constructor(props: ITooltipProps) {
+        super(props);
+        this.state = {
+            hover: false,
+        };
+    }
 
     onMouseOver = () => {
         this.setState({
@@ -38,25 +45,27 @@ export default class AccessibleTooltipButton extends React.PureComponent {
         });
     };
 
-    onMouseOut = () => {
+    onMouseLeave = () => {
         this.setState({
             hover: false,
         });
     };
 
     render() {
-        const Tooltip = sdk.getComponent("elements.Tooltip");
-        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-
-        const {title, children, ...props} = this.props;
+        const {title, tooltip, children, tooltipClassName, ...props} = this.props;
 
         const tip = this.state.hover ? <Tooltip
             className="mx_AccessibleTooltipButton_container"
-            tooltipClassName="mx_AccessibleTooltipButton_tooltip"
-            label={title}
+            tooltipClassName={classNames("mx_AccessibleTooltipButton_tooltip", tooltipClassName)}
+            label={tooltip || title}
         /> : <div />;
         return (
-            <AccessibleButton {...props} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} aria-label={title}>
+            <AccessibleButton
+                {...props}
+                onMouseOver={this.onMouseOver}
+                onMouseLeave={this.onMouseLeave}
+                aria-label={title}
+            >
                 { children }
                 { tip }
             </AccessibleButton>

src/components/views/elements/ActionButton.js

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

src/components/views/elements/AddressSelector.js

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

src/components/views/elements/AddressTile.js

@@ -58,18 +58,6 @@ export default createReactClass({
             imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }
 
-        // Removing networks for now as they're not really supported
-        /*
-        var network;
-        if (this.props.networkUrl !== "") {
-            network = (
-                <div className="mx_AddressTile_network">
-                    <BaseAvatar width={25} height={25} name={this.props.networkName} title="Riot" url={this.props.networkUrl} />
-                </div>
-            );
-        }
-        */
-
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 

src/components/views/elements/AppPermission.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import url from 'url';
 import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
 import WidgetUtils from "../../../utils/WidgetUtils";
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
 
@@ -76,6 +77,7 @@ export default class AppPermission extends React.Component {
     }
 
     render() {
+        const brand = SdkConfig.get().brand;
         const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
         const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
@@ -96,7 +98,7 @@ export default class AppPermission extends React.Component {
                     <li>{_t("Your avatar URL")}</li>
                     <li>{_t("Your user ID")}</li>
                     <li>{_t("Your theme")}</li>
-                    <li>{_t("Riot URL")}</li>
+                    <li>{_t("%(brand)s URL", { brand })}</li>
                     <li>{_t("Room ID")}</li>
                     <li>{_t("Widget ID")}</li>
                 </ul>

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.
@@ -28,25 +29,46 @@ import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
-import MessageSpinner from './MessageSpinner';
+import Spinner from './Spinner';
 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";
+import {Capability} from "../../../widgets/WidgetApi";
+import {sleep} from "../../../utils/promise";
 
 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 +100,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 +108,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 +125,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 +139,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 +211,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 +221,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 +237,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 +265,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 +286,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 +305,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 +314,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 +340,42 @@ export default class AppTile extends React.Component {
             });
     }
 
+    /**
+     * Ends all widget interaction, such as cancelling calls and disabling webcams.
+     * @private
+     * @returns {Promise<*>} Resolves when the widget is terminated, or timeout passed.
+     */
+    _endWidgetActions() {
+        let terminationPromise;
+
+        if (this._hasCapability(Capability.ReceiveTerminate)) {
+            // Wait for widget to terminate within a timeout
+            const timeout = 2000;
+            const messaging = ActiveWidgetStore.getWidgetMessaging(this.props.app.id);
+            terminationPromise = Promise.race([messaging.terminate(), sleep(timeout)]);
+        } else {
+            terminationPromise = Promise.resolve();
+        }
+
+        return terminationPromise.finally(() => {
+            // 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,23 +397,12 @@ 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';
-                    }
-
-                    WidgetUtils.setRoomWidget(
-                        this.props.room.roomId,
-                        this.props.id,
-                    ).catch((e) => {
+                    this._endWidgetActions().then(() => {
+                        return WidgetUtils.setRoomWidget(
+                            this.props.room.roomId,
+                            this.props.app.id,
+                        );
+                    }).catch((e) => {
                         console.error('Failed to delete widget', e);
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
@@ -369,7 +419,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 +430,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 +441,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 +461,7 @@ export default class AppTile extends React.Component {
                 }, this.props.whitelistCapabilities);
 
                 if (requestedWhitelistCapabilies.length > 0 ) {
-                    console.warn(`Widget ${this.props.id} allowing requested, whitelisted properties: ` +
+                    console.log(`Widget ${this.props.app.id} allowing requested, whitelisted properties: ` +
                         requestedWhitelistCapabilies,
                     );
                 }
@@ -414,7 +469,7 @@ export default class AppTile extends React.Component {
 
             // TODO -- Add UI to warn about and optionally allow requested capabilities
 
-            ActiveWidgetStore.setWidgetCapabilities(this.props.id, requestedWhitelistCapabilies);
+            ActiveWidgetStore.setWidgetCapabilities(this.props.app.id, requestedWhitelistCapabilies);
 
             if (this.props.onCapabilityRequest) {
                 this.props.onCapabilityRequest(requestedCapabilities);
@@ -422,16 +477,16 @@ export default class AppTile extends React.Component {
 
             // We only tell Jitsi widgets that we're ready because they're realistically the only ones
             // using this custom extension to the widget API.
-            if (this.props.type === 'jitsi') {
+            if (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')) {
@@ -460,9 +515,9 @@ export default class AppTile extends React.Component {
 
     _grantWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Granting permission for widget to load: " + this.props.eventId);
+        console.info("Granting permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = true;
+        current[this.props.app.eventId] = true;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: true});
 
@@ -476,14 +531,14 @@ export default class AppTile extends React.Component {
 
     _revokeWidgetPermission() {
         const roomId = this.props.room.roomId;
-        console.info("Revoking permission for widget to load: " + this.props.eventId);
+        console.info("Revoking permission for widget to load: " + this.props.app.eventId);
         const current = SettingsStore.getValue("allowedWidgets", roomId);
-        current[this.props.eventId] = false;
+        current[this.props.app.eventId] = false;
         SettingsStore.setValue("allowedWidgets", roomId, SettingLevel.ROOM_ACCOUNT, current).then(() => {
             this.setState({hasPermissionToLoad: false});
 
             // Force the widget to be non-persistent (able to be deleted/forgotten)
-            ActiveWidgetStore.destroyPersistentWidget(this.props.id);
+            ActiveWidgetStore.destroyPersistentWidget(this.props.app.id);
             const PersistedElement = sdk.getComponent("elements.PersistedElement");
             PersistedElement.destroyElement(this._persistKey);
         }).catch(err => {
@@ -494,8 +549,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;
     }
@@ -512,6 +567,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,
@@ -519,23 +578,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.includes(parsedWidgetUrl.protocol) || (
-            // Check if the widget URL is a Jitsi widget in Electron
-            parsedWidgetUrl.protocol === 'vector:'
-            && parsedWidgetUrl.host === 'vector'
-            && parsedWidgetUrl.pathname === '/webapp/jitsi.html'
-            && this.props.type === 'jitsi'
-        )) {
+        if (ALLOWED_APP_URL_SCHEMES.includes(parsedWidgetUrl.protocol)) {
             safeWidgetUrl = url.format(parsedWidgetUrl);
         }
-        return safeWidgetUrl;
+
+        // 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() {
@@ -561,14 +685,26 @@ export default class AppTile extends React.Component {
     }
 
     _onPopoutWidgetClick() {
+        // Ensure Jitsi conferences are closed on pop-out, to not confuse the user to join them
+        // twice from the same computer, which Jitsi can have problems with (audio echo/gain-loop).
+        if (WidgetType.JITSI.matches(this.props.app.type) && this.props.show) {
+            this._endWidgetActions().then(() => {
+                if (this._appFrame.current) {
+                    // Reload iframe
+                    this._appFrame.current.src = this._getRenderedUrl();
+                    this.setState({});
+                }
+            });
+        }
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
-        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
+        // window.open(this._getPopoutUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noreferrer noopener'}).click();
+            { target: '_blank', href: this._getPopoutUrl(), rel: 'noreferrer noopener'}).click();
     }
 
     _onReloadWidgetClick() {
         // Reload iframe in this way to avoid cross-origin restrictions
+        // eslint-disable-next-line no-self-assign
         this._appFrame.current.src = this._appFrame.current.src;
     }
 
@@ -605,7 +741,7 @@ export default class AppTile extends React.Component {
         if (this.props.show) {
             const loadingElement = (
                 <div className="mx_AppLoading_spinner_fadeIn">
-                    <MessageSpinner msg='Loading...' />
+                    <Spinner message={_t("Loading...")} />
                 </div>
             );
             if (!this.state.hasPermissionToLoad) {
@@ -641,7 +777,7 @@ export default class AppTile extends React.Component {
                             <iframe
                                 allow={iframeFeatures}
                                 ref={this._appFrame}
-                                src={this._getSafeUrl()}
+                                src={this._getRenderedUrl()}
                                 allowFullScreen={true}
                                 sandbox={sandboxFlags}
                                 onLoad={this._onLoaded} />
@@ -706,7 +842,7 @@ export default class AppTile extends React.Component {
         }
 
         return <React.Fragment>
-            <div className={appTileClass} id={this.props.id}>
+            <div className={appTileClass} id={this.props.app.id}>
                 { this.props.showMenubar &&
                 <div ref={this._menu_bar} className={menuBarClasses} onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
@@ -753,12 +889,8 @@ export default class AppTile extends React.Component {
 AppTile.displayName = 'AppTile';
 
 AppTile.propTypes = {
-    id: PropTypes.string.isRequired,
-    eventId: PropTypes.string, // required for room widgets
-    url: PropTypes.string.isRequired,
-    name: PropTypes.string.isRequired,
+    app: PropTypes.object.isRequired,
     room: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
     // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
     fullWidth: PropTypes.bool,
@@ -805,7 +937,6 @@ AppTile.propTypes = {
 };
 
 AppTile.defaultProps = {
-    url: "",
     waitForIframeLoad: true,
     showMenubar: true,
     showTitle: true,

src/components/views/elements/CreateRoomButton.js

@@ -1,40 +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 React from 'react';
-import * as sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const CreateRoomButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton action="view_create_room"
-            mouseOverAction={props.callout ? "callout_create_room" : null}
-            label={_t("Create new room")}
-            iconPath={require("../../../../res/img/icons-create-room.svg")}
-            size={props.size}
-            tooltip={props.tooltip}
-        />
-    );
-};
-
-CreateRoomButton.propTypes = {
-    size: PropTypes.string,
-    tooltip: PropTypes.bool,
-};
-
-export default CreateRoomButton;

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

@@ -1,127 +0,0 @@
-/*
-Copyright 2016 OpenMarket 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 React from 'react';
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-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',
-
-    propTypes: {
-        userId: PropTypes.string.isRequired,
-        device: PropTypes.object.isRequired,
-    },
-
-    getInitialState: function() {
-        return {
-            device: this.props.device,
-        };
-    },
-
-    componentWillMount: function() {
-        const cli = MatrixClientPeg.get();
-        cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-    },
-
-    componentWillUnmount: function() {
-        const cli = MatrixClientPeg.get();
-        if (cli) {
-            cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        }
-    },
-
-    onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
-        if (userId === this.props.userId && deviceId === this.props.device.deviceId) {
-            this.setState({ device: deviceInfo });
-        }
-    },
-
-    onVerifyClick: function() {
-        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
-        Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
-            userId: this.props.userId,
-            device: this.state.device,
-        }, null, /* priority = */ false, /* static = */ true);
-    },
-
-    onUnverifyClick: function() {
-        MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.state.device.deviceId, false,
-        );
-    },
-
-    onBlacklistClick: function() {
-        MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, true,
-        );
-    },
-
-    onUnblacklistClick: function() {
-        MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, false,
-        );
-    },
-
-    render: function() {
-        let blacklistButton = null; let verifyButton = null;
-
-        if (this.state.device.isBlocked()) {
-            blacklistButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
-                  onClick={this.onUnblacklistClick}>
-                    { _t("Unblacklist") }
-                </button>
-            );
-        } else {
-            blacklistButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
-                  onClick={this.onBlacklistClick}>
-                    { _t("Blacklist") }
-                </button>
-            );
-        }
-
-        if (this.state.device.isVerified()) {
-            verifyButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
-                  onClick={this.onUnverifyClick}>
-                    { _t("Unverify") }
-                </button>
-            );
-        } else {
-            verifyButton = (
-                <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
-                  onClick={this.onVerifyClick}>
-                    { _t("Verify...") }
-                </button>
-            );
-        }
-
-        return (
-            <div className="mx_DeviceVerifyButtons" >
-                { verifyButton }
-                { blacklistButton }
-            </div>
-        );
-    },
-});

src/components/views/elements/Draggable.tsx

@@ -0,0 +1,81 @@
+/*
+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);
+    };
+
+    private onMouseUp = (event: MouseEvent): void => {
+        document.removeEventListener("mousemove", this.state.onMouseMove);
+        document.removeEventListener("mouseup", this.state.onMouseUp);
+        this.props.onMouseUp(event);
+    };
+
+    private onMouseMove(event: MouseEvent): void {
+        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

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import {_t} from '../../../languageHandler.js';
+import {_t} from '../../../languageHandler';
 import Field from "./Field";
 import AccessibleButton from "./AccessibleButton";
 

src/components/views/elements/EditableText.js

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

src/components/views/elements/EditableTextContainer.js

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

src/components/views/elements/EventListSummary.js

@@ -20,6 +20,7 @@ import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
 import {MatrixEvent, RoomMember} from "matrix-js-sdk";
 import {useStateToggle} from "../../../hooks/useStateToggle";
+import AccessibleButton from "./AccessibleButton";
 
 const EventListSummary = ({events, children, threshold=3, onToggle, startExpanded, summaryMembers=[], summaryText}) => {
     const [expanded, toggleExpanded] = useStateToggle(startExpanded);
@@ -42,24 +43,15 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
         );
     }
 
+    let body;
     if (expanded) {
-        return (
-            <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
-                <div className={"mx_EventListSummary_toggle"} onClick={toggleExpanded}>
-                    { _t('collapse') }
-                </div>
-                <div className="mx_EventListSummary_line">&nbsp;</div>
-                { children }
-            </div>
-        );
-    }
-
-    const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
-    return (
-        <div className="mx_EventListSummary" data-scroll-tokens={eventIds}>
-            <div className={"mx_EventListSummary_toggle"} onClick={toggleExpanded}>
-                { _t('expand') }
-            </div>
+        body = <React.Fragment>
+            <div className="mx_EventListSummary_line">&nbsp;</div>
+            { children }
+        </React.Fragment>;
+    } else {
+        const avatars = summaryMembers.map((m) => <MemberAvatar key={m.userId} member={m} width={14} height={14} />);
+        body = (
             <div className="mx_EventTile_line">
                 <div className="mx_EventTile_info">
                     <span className="mx_EventListSummary_avatars" onClick={toggleExpanded}>
@@ -70,7 +62,16 @@ const EventListSummary = ({events, children, threshold=3, onToggle, startExpande
                     </span>
                 </div>
             </div>
-        </div>
+        );
+    }
+
+    return (
+        <li className="mx_EventListSummary" data-scroll-tokens={eventIds}>
+            <AccessibleButton className="mx_EventListSummary_toggle" onClick={toggleExpanded} aria-expanded={expanded}>
+                { expanded ? _t('collapse') : _t('expand') }
+            </AccessibleButton>
+            { body }
+        </li>
     );
 };
 
@@ -89,7 +90,7 @@ EventListSummary.propTypes = {
     // The list of room members for which to show avatars next to the summary
     summaryMembers: PropTypes.arrayOf(PropTypes.instanceOf(RoomMember)),
     // The text to show as the summary of this event list
-    summaryText: PropTypes.string.isRequired,
+    summaryText: PropTypes.string,
 };
 
 export default EventListSummary;

src/components/views/elements/EventTilePreview.tsx

@@ -0,0 +1,129 @@
+/*
+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 classnames from 'classnames';
+import { MatrixEvent } from 'matrix-js-sdk/src/models/event';
+
+import * as Avatar from '../../../Avatar';
+import { MatrixClientPeg } from '../../../MatrixClientPeg';
+import EventTile from '../rooms/EventTile';
+
+interface IProps {
+    /**
+     * The text to be displayed in the message preview
+     */
+    message: string;
+
+    /**
+     * Whether to use the irc layout or not
+     */
+    useIRCLayout: boolean;
+
+    /**
+     * classnames to apply to the wrapper of the preview
+     */
+    className: string;
+}
+
+interface IState {
+    userId: string;
+    displayname: string;
+    avatar_url: string;
+}
+
+const AVATAR_SIZE = 32;
+
+export default class EventTilePreview extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            userId: "@erim:fink.fink",
+            displayname: "Erimayas Fink",
+            avatar_url: null,
+        };
+    }
+
+    async componentDidMount() {
+        // Fetch current user data
+        const client = MatrixClientPeg.get();
+        const userId = client.getUserId();
+        const profileInfo = await client.getProfileInfo(userId);
+        const avatar_url = Avatar.avatarUrlForUser(
+            {avatarUrl: profileInfo.avatar_url},
+            AVATAR_SIZE, AVATAR_SIZE, "crop");
+
+        this.setState({
+            userId,
+            displayname: profileInfo.displayname,
+            avatar_url,
+        });
+
+    }
+
+    private fakeEvent({userId, displayname, avatar_url}: IState) {
+        // Fake it till we make it
+        const event = new MatrixEvent(JSON.parse(`{
+                "type": "m.room.message",
+                "sender": "${userId}",
+                "content": {
+                  "m.new_content": {
+                    "msgtype": "m.text",
+                    "body": "${this.props.message}",
+                    "displayname": "${displayname}",
+                    "avatar_url": "${avatar_url}"
+                  },
+                  "msgtype": "m.text",
+                  "body": "${this.props.message}",
+                  "displayname": "${displayname}",
+                  "avatar_url": "${avatar_url}"
+                },
+                "unsigned": {
+                  "age": 97
+                },
+                "event_id": "$9999999999999999999999999999999999999999999",
+                "room_id": "!999999999999999999:matrix.org"
+              }`));
+
+        // Fake it more
+        event.sender = {
+            name: displayname,
+            userId: userId,
+            getAvatarUrl: (..._) => {
+                return avatar_url;
+            },
+        };
+
+        return event;
+    }
+
+    public render() {
+        const event = this.fakeEvent(this.state);
+
+        let className = classnames(
+            this.props.className,
+            {
+                "mx_IRCLayout": this.props.useIRCLayout,
+                "mx_GroupLayout": !this.props.useIRCLayout,
+            }
+        );
+
+        return <div className={className}>
+            <EventTile mxEvent={event} useIRCLayout={this.props.useIRCLayout} />
+        </div>;
+    }
+}

src/components/views/elements/Field.tsx

@@ -14,11 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, {InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes} from 'react';
 import classNames from 'classnames';
 import * as sdk from '../../../index';
 import { debounce } from 'lodash';
+import {IFieldState, IValidationResult} from "./Validation";
 
 // Invoke validation from user input (when typing, etc.) at most once every N ms.
 const VALIDATION_THROTTLE_MS = 200;
@@ -29,58 +29,111 @@ function getId() {
     return `${BASE_ID}_${count++}`;
 }
 
-export default class Field extends React.PureComponent {
-    static propTypes = {
-        // The field's ID, which binds the input and label together. Immutable.
-        id: PropTypes.string.isRequired,
-        // The element to create. Defaults to "input".
-        // To define options for a select, use <Field><option ... /></Field>
-        element: PropTypes.oneOf(["input", "select", "textarea"]),
-        // The field's type (when used as an <input>). Defaults to "text".
-        type: PropTypes.string,
-        // id of a <datalist> element for suggestions
-        list: PropTypes.string,
-        // The field's label string.
-        label: PropTypes.string,
-        // The field's placeholder string. Defaults to the label.
-        placeholder: PropTypes.string,
-        // The field's value.
-        // This is a controlled component, so the value is required.
-        value: PropTypes.string.isRequired,
-        // Optional component to include inside the field before the input.
-        prefix: PropTypes.node,
-        // Optional component to include inside the field after the input.
-        postfix: PropTypes.node,
-        // The callback called whenever the contents of the field
-        // changes.  Returns an object with `valid` boolean field
-        // and a `feedback` react component field to provide feedback
-        // to the user.
-        onValidate: PropTypes.func,
-        // If specified, overrides the value returned by onValidate.
-        flagInvalid: PropTypes.bool,
-        // If specified, contents will appear as a tooltip on the element and
-        // validation feedback tooltips will be suppressed.
-        tooltipContent: PropTypes.node,
-        // If specified alongside tooltipContent, the class name to apply to the
-        // tooltip itself.
-        tooltipClassName: PropTypes.string,
-        // If specified, an additional class name to apply to the field container
-        className: PropTypes.string,
-        // All other props pass through to the <input>.
+interface IProps {
+    // The field's ID, which binds the input and label together. Immutable.
+    id?: string;
+    // The field's type (when used as an <input>). Defaults to "text".
+    type?: string;
+    // id of a <datalist> element for suggestions
+    list?: string;
+    // The field's label string.
+    label?: string;
+    // The field's placeholder string. Defaults to the label.
+    placeholder?: string;
+    // Optional component to include inside the field before the input.
+    prefixComponent?: React.ReactNode;
+    // Optional component to include inside the field after the input.
+    postfixComponent?: React.ReactNode;
+    // The callback called whenever the contents of the field
+    // changes.  Returns an object with `valid` boolean field
+    // and a `feedback` react component field to provide feedback
+    // to the user.
+    onValidate?: (input: IFieldState) => Promise<IValidationResult>;
+    // If specified, overrides the value returned by onValidate.
+    forceValidity?: boolean;
+    // If specified, contents will appear as a tooltip on the element and
+    // validation feedback tooltips will be suppressed.
+    tooltipContent?: React.ReactNode;
+    // If specified the tooltip will be shown regardless of feedback
+    forceTooltipVisible?: boolean;
+    // If specified alongside tooltipContent, the class name to apply to the
+    // tooltip itself.
+    tooltipClassName?: string;
+    // If specified, an additional class name to apply to the field container
+    className?: string;
+    // All other props pass through to the <input>.
+}
+
+interface IInputProps extends IProps, InputHTMLAttributes<HTMLInputElement> {
+    // The element to create. Defaults to "input".
+    element?: "input";
+    // The input's value. This is a controlled component, so the value is required.
+    value: string;
+}
+
+interface ISelectProps extends IProps, SelectHTMLAttributes<HTMLSelectElement> {
+    // To define options for a select, use <Field><option ... /></Field>
+    element: "select";
+    // The select's value. This is a controlled component, so the value is required.
+    value: string;
+}
+
+interface ITextareaProps extends IProps, TextareaHTMLAttributes<HTMLTextAreaElement> {
+    element: "textarea";
+    // The textarea's value. This is a controlled component, so the value is required.
+    value: string;
+}
+
+type PropShapes = IInputProps | ISelectProps | ITextareaProps;
+
+interface IState {
+    valid: boolean;
+    feedback: React.ReactNode;
+    feedbackVisible: boolean;
+    focused: boolean;
+}
+
+export default class Field extends React.PureComponent<PropShapes, IState> {
+    private id: string;
+    private input: HTMLInputElement;
+
+    public static readonly defaultProps = {
+        element: "input",
+        type: "text",
     };
 
+    /*
+     * This was changed from throttle to debounce: this is more traditional for
+     * form validation since it means that the validation doesn't happen at all
+     * until the user stops typing for a bit (debounce defaults to not running on
+     * the leading edge). If we're doing an HTTP hit on each validation, we have more
+     * incentive to prevent validating input that's very unlikely to be valid.
+     * We may find that we actually want different behaviour for registration
+     * fields, in which case we can add some options to control it.
+     */
+    private validateOnChange = debounce(() => {
+        this.validate({
+            focused: true,
+        });
+    }, VALIDATION_THROTTLE_MS);
+
     constructor(props) {
         super(props);
         this.state = {
             valid: undefined,
             feedback: undefined,
+            feedbackVisible: false,
             focused: false,
         };
 
         this.id = this.props.id || getId();
     }
 
-    onFocus = (ev) => {
+    public focus() {
+        this.input.focus();
+    }
+
+    private onFocus = (ev) => {
         this.setState({
             focused: true,
         });
@@ -93,7 +146,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    onChange = (ev) => {
+    private onChange = (ev) => {
         this.validateOnChange();
         // Parent component may have supplied its own `onChange` as well
         if (this.props.onChange) {
@@ -101,7 +154,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    onBlur = (ev) => {
+    private onBlur = (ev) => {
         this.setState({
             focused: false,
         });
@@ -114,11 +167,7 @@ export default class Field extends React.PureComponent {
         }
     };
 
-    focus() {
-        this.input.focus();
-    }
-
-    async validate({ focused, allowEmpty = true }) {
+    private async validate({ focused, allowEmpty = true }: {focused: boolean, allowEmpty?: boolean}) {
         if (!this.props.onValidate) {
             return;
         }
@@ -149,59 +198,45 @@ export default class Field extends React.PureComponent {
         }
     }
 
-    /*
-     * This was changed from throttle to debounce: this is more traditional for
-     * form validation since it means that the validation doesn't happen at all
-     * until the user stops typing for a bit (debounce defaults to not running on
-     * the leading edge). If we're doing an HTTP hit on each validation, we have more
-     * incentive to prevent validating input that's very unlikely to be valid.
-     * We may find that we actually want different behaviour for registration
-     * fields, in which case we can add some options to control it.
-     */
-    validateOnChange = debounce(() => {
-        this.validate({
-            focused: true,
-        });
-    }, VALIDATION_THROTTLE_MS);
 
-    render() {
+
+    public render() {
         const {
-            element, prefix, postfix, className, onValidate, children,
-            tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
-
-        const inputElement = element || "input";
+            element, prefixComponent, postfixComponent, className, onValidate, children,
+            tooltipContent, forceValidity, tooltipClassName, list, ...inputProps} = this.props;
 
         // Set some defaults for the <input> element
-        inputProps.type = inputProps.type || "text";
-        inputProps.ref = input => this.input = input;
+        const ref = input => this.input = input;
         inputProps.placeholder = inputProps.placeholder || inputProps.label;
         inputProps.id = this.id; // this overwrites the id from props
 
         inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
         inputProps.onBlur = this.onBlur;
-        inputProps.list = list;
 
-        const fieldInput = React.createElement(inputElement, inputProps, children);
+        // Appease typescript's inference
+        const inputProps_ = {...inputProps, ref, list};
+
+        const fieldInput = React.createElement(this.props.element, inputProps_, children);
 
         let prefixContainer = null;
-        if (prefix) {
-            prefixContainer = <span className="mx_Field_prefix">{prefix}</span>;
+        if (prefixComponent) {
+            prefixContainer = <span className="mx_Field_prefix">{prefixComponent}</span>;
         }
         let postfixContainer = null;
-        if (postfix) {
-            postfixContainer = <span className="mx_Field_postfix">{postfix}</span>;
+        if (postfixComponent) {
+            postfixContainer = <span className="mx_Field_postfix">{postfixComponent}</span>;
         }
 
-        const hasValidationFlag = flagInvalid !== null && flagInvalid !== undefined;
-        const fieldClasses = classNames("mx_Field", `mx_Field_${inputElement}`, className, {
+        const hasValidationFlag = forceValidity !== null && forceValidity !== undefined;
+        const fieldClasses = classNames("mx_Field", `mx_Field_${this.props.element}`, className, {
             // If we have a prefix element, leave the label always at the top left and
             // don't animate it, as it looks a bit clunky and would add complexity to do
             // properly.
-            mx_Field_labelAlwaysTopLeft: prefix,
-            mx_Field_valid: onValidate && this.state.valid === true,
+            mx_Field_labelAlwaysTopLeft: prefixComponent,
+            mx_Field_valid: hasValidationFlag ? forceValidity : onValidate && this.state.valid === true,
             mx_Field_invalid: hasValidationFlag
-                ? flagInvalid
+                ? !forceValidity
                 : onValidate && this.state.valid === false,
         });
 
@@ -209,11 +244,11 @@ export default class Field extends React.PureComponent {
         const Tooltip = sdk.getComponent("elements.Tooltip");
         let fieldTooltip;
         if (tooltipContent || this.state.feedback) {
-            const addlClassName = tooltipClassName ? tooltipClassName : '';
             fieldTooltip = <Tooltip
-                tooltipClassName={`mx_Field_tooltip ${addlClassName}`}
-                visible={this.state.feedbackVisible}
+                tooltipClassName={classNames("mx_Field_tooltip", tooltipClassName)}
+                visible={(this.state.focused && this.props.forceTooltipVisible) || this.state.feedbackVisible}
                 label={tooltipContent || this.state.feedback}
+                forceOnRight
             />;
         }
 

src/components/views/elements/Flair.js

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import FlairStore from '../../../stores/FlairStore';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 
@@ -81,7 +81,8 @@ export default class Flair extends React.Component {
         this._unmounted = true;
     }
 
-    componentWillReceiveProps(newProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    UNSAFE_componentWillReceiveProps(newProps) {  // eslint-disable-line camelcase
         this._generateAvatars(newProps.groups);
     }
 

src/components/views/elements/IRCTimelineProfileResizer.tsx

@@ -0,0 +1,91 @@
+/*
+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 SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import Draggable, {ILocationState} from './Draggable';
+
+interface IProps {
+    // Current room
+    roomId: string;
+    minWidth: number;
+    maxWidth: number;
+}
+
+interface IState {
+    width: number;
+    IRCLayoutRoot: HTMLElement;
+}
+
+export default class IRCTimelineProfileResizer extends React.Component<IProps, IState> {
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            width: SettingsStore.getValue("ircDisplayNameWidth", this.props.roomId),
+            IRCLayoutRoot: null,
+        };
+    }
+
+    componentDidMount() {
+        this.setState({
+            IRCLayoutRoot: document.querySelector(".mx_IRCLayout") as HTMLElement,
+        }, () => this.updateCSSWidth(this.state.width));
+    }
+
+    private dragFunc = (location: ILocationState, event: React.MouseEvent<Element, MouseEvent>): ILocationState => {
+        const offset = event.clientX - location.currentX;
+        const newWidth = this.state.width + offset;
+
+        // If we're trying to go smaller than min width, don't.
+        if (newWidth < this.props.minWidth) {
+            return location;
+        }
+
+        if (newWidth > this.props.maxWidth) {
+            return location;
+        }
+
+        this.setState({
+            width: newWidth,
+        });
+
+        this.updateCSSWidth.bind(this)(newWidth);
+
+        return {
+            currentX: event.clientX,
+            currentY: location.currentY,
+        };
+    };
+
+    private updateCSSWidth(newWidth: number) {
+        this.state.IRCLayoutRoot.style.setProperty("--name-width", newWidth + "px");
+    }
+
+    private onMoueUp(event: MouseEvent) {
+        if (this.props.roomId) {
+            SettingsStore.setValue("ircDisplayNameWidth", this.props.roomId, SettingLevel.ROOM_DEVICE, this.state.width);
+        }
+    }
+
+    render() {
+        return <Draggable
+            className="mx_ProfileResizer"
+            dragFunc={this.dragFunc.bind(this)}
+            onMouseUp={this.onMoueUp.bind(this)}
+        />;
+    }
+}

src/components/views/elements/ImageView.js

@@ -15,8 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClientPeg} from "../../../MatrixClientPeg";
@@ -27,6 +25,7 @@ import AccessibleButton from "./AccessibleButton";
 import Modal from "../../../Modal";
 import * as sdk from "../../../index";
 import {Key} from "../../../Keyboard";
+import FocusLock from "react-focus-lock";
 
 export default class ImageView extends React.Component {
     static propTypes = {
@@ -50,16 +49,6 @@ export default class ImageView extends React.Component {
         this.state = { rotationDegrees: 0 };
     }
 
-    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
-    // dialog base class somehow, surely...
-    componentDidMount() {
-        document.addEventListener("keydown", this.onKeyDown);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("keydown", this.onKeyDown);
-    }
-
     onKeyDown = (ev) => {
         if (ev.key === Key.ESCAPE) {
             ev.stopPropagation();
@@ -73,6 +62,7 @@ export default class ImageView extends React.Component {
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
                 if (!proceed) return;
+                this.props.onFinished();
                 MatrixClientPeg.get().redactEvent(
                     this.props.mxEvent.getRoomId(), this.props.mxEvent.getId(),
                 ).catch(function(e) {
@@ -194,7 +184,14 @@ export default class ImageView extends React.Component {
         const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
 
         return (
-            <div className="mx_ImageView">
+            <FocusLock
+                returnFocus={true}
+                lockProps={{
+                    onKeyDown: this.onKeyDown,
+                    role: "dialog",
+                }}
+                className="mx_ImageView"
+            >
                 <div className="mx_ImageView_lhs">
                 </div>
                 <div className="mx_ImageView_content">
@@ -230,7 +227,7 @@ export default class ImageView extends React.Component {
                 </div>
                 <div className="mx_ImageView_rhs">
                 </div>
-            </div>
+            </FocusLock>
         );
     }
 }

src/components/views/elements/InlineSpinner.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 import React from "react";
 import createReactClass from 'create-react-class';
+import {_t} from "../../../languageHandler";
+import SettingsStore from "../../../settings/SettingsStore";
 
 export default createReactClass({
     displayName: 'InlineSpinner',
@@ -25,9 +27,22 @@ export default createReactClass({
         const h = this.props.h || 16;
         const imgClass = this.props.imgClassName || "";
 
+        let imageSource;
+        if (SettingsStore.isFeatureEnabled('feature_new_spinner')) {
+            imageSource = require("../../../../res/img/spinner.svg");
+        } else {
+            imageSource = require("../../../../res/img/spinner.gif");
+        }
+
         return (
             <div className="mx_InlineSpinner">
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
+                <img
+                    src={imageSource}
+                    width={w}
+                    height={h}
+                    className={imgClass}
+                    aria-label={_t("Loading...")}
+                />
             </div>
         );
     },

src/components/views/elements/InteractiveTooltip.js

@@ -1,336 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const InteractiveTooltipContainerId = "mx_InteractiveTooltip_Container";
-
-// If the distance from tooltip to window edge is below this value, the tooltip
-// will flip around to the other side of the target.
-const MIN_SAFE_DISTANCE_TO_WINDOW_EDGE = 20;
-
-function getOrCreateContainer() {
-    let container = document.getElementById(InteractiveTooltipContainerId);
-
-    if (!container) {
-        container = document.createElement("div");
-        container.id = InteractiveTooltipContainerId;
-        document.body.appendChild(container);
-    }
-
-    return container;
-}
-
-function isInRect(x, y, rect) {
-    const { top, right, bottom, left } = rect;
-    return x >= left && x <= right && y >= top && y <= bottom;
-}
-
-/**
- * Returns the positive slope of the diagonal of the rect.
- *
- * @param {DOMRect} rect
- * @return {integer}
- */
-function getDiagonalSlope(rect) {
-    const { top, right, bottom, left } = rect;
-    return (bottom - top) / (right - left);
-}
-
-function isInUpperLeftHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y <= bottom + diagonalSlope * (x - left));
-}
-
-function isInLowerRightHalf(x, y, rect) {
-    const { bottom, left } = rect;
-    // Negative slope because Y values grow downwards and for this case, the
-    // diagonal goes from larger to smaller Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * -1;
-    return isInRect(x, y, rect) && (y >= bottom + diagonalSlope * (x - left));
-}
-
-function isInUpperRightHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y <= top + diagonalSlope * (x - left));
-}
-
-function isInLowerLeftHalf(x, y, rect) {
-    const { top, left } = rect;
-    // Positive slope because Y values grow downwards and for this case, the
-    // diagonal goes from smaller to larger Y values.
-    const diagonalSlope = getDiagonalSlope(rect) * 1;
-    return isInRect(x, y, rect) && (y >= top + diagonalSlope * (x - left));
-}
-
-/*
- * This style of tooltip takes a "target" element as its child and centers the
- * tooltip along one edge of the target.
- */
-export default class InteractiveTooltip extends React.Component {
-    static propTypes = {
-        // Content to show in the tooltip
-        content: PropTypes.node.isRequired,
-        // Function to call when visibility of the tooltip changes
-        onVisibilityChange: PropTypes.func,
-        // flag to forcefully hide this tooltip
-        forceHidden: PropTypes.bool,
-    };
-
-    constructor() {
-        super();
-
-        this.state = {
-            contentRect: null,
-            visible: false,
-        };
-    }
-
-    componentDidUpdate() {
-        // Whenever this passthrough component updates, also render the tooltip
-        // in a separate DOM tree. This allows the tooltip content to participate
-        // the normal React rendering cycle: when this component re-renders, the
-        // tooltip content re-renders.
-        // Once we upgrade to React 16, this could be done a bit more naturally
-        // using the portals feature instead.
-        this.renderTooltip();
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    collectContentRect = (element) => {
-        // We don't need to clean up when unmounting, so ignore
-        if (!element) return;
-
-        this.setState({
-            contentRect: element.getBoundingClientRect(),
-        });
-    }
-
-    collectTarget = (element) => {
-        this.target = element;
-    }
-
-    canTooltipFitAboveTarget() {
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-        const targetTop = targetRect.top + window.pageYOffset;
-        return (
-            !contentRect ||
-            (targetTop - contentRect.height > MIN_SAFE_DISTANCE_TO_WINDOW_EDGE)
-        );
-    }
-
-    onMouseMove = (ev) => {
-        const { clientX: x, clientY: y } = ev;
-        const { contentRect } = this.state;
-        const targetRect = this.target.getBoundingClientRect();
-
-        // When moving the mouse from the target to the tooltip, we create a
-        // safe area that includes the tooltip, the target, and the trapezoid
-        // ABCD between them:
-        //                            ┌───────────┐
-        //                            │           │
-        //                            │           │
-        //                          A └───E───F───┘ B
-        //                                  V
-        //                                 ┌─┐
-        //                                 │ │
-        //                                C└─┘D
-        //
-        // As long as the mouse remains inside the safe area, the tooltip will
-        // stay open.
-        const buffer = 50;
-        if (isInRect(x, y, targetRect)) {
-            return;
-        }
-        if (this.canTooltipFitAboveTarget()) {
-            const contentRectWithBuffer = {
-                top: contentRect.top - buffer,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: contentRect.bottom,
-                right: targetRect.left,
-                bottom: targetRect.bottom,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: contentRect.bottom,
-                right: targetRect.right,
-                bottom: targetRect.bottom,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: contentRect.bottom,
-                right: contentRect.right + buffer,
-                bottom: targetRect.bottom,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInUpperRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInUpperLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        } else {
-            const contentRectWithBuffer = {
-                top: contentRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.bottom + buffer,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidLeft = {
-                top: targetRect.top,
-                right: targetRect.left,
-                bottom: contentRect.top,
-                left: contentRect.left - buffer,
-            };
-            const trapezoidCenter = {
-                top: targetRect.top,
-                right: targetRect.right,
-                bottom: contentRect.top,
-                left: targetRect.left,
-            };
-            const trapezoidRight = {
-                top: targetRect.top,
-                right: contentRect.right + buffer,
-                bottom: contentRect.top,
-                left: targetRect.right,
-            };
-
-            if (
-                isInRect(x, y, contentRectWithBuffer) ||
-                isInLowerRightHalf(x, y, trapezoidLeft) ||
-                isInRect(x, y, trapezoidCenter) ||
-                isInLowerLeftHalf(x, y, trapezoidRight)
-            ) {
-                return;
-            }
-        }
-
-        this.hideTooltip();
-    }
-
-    onTargetMouseOver = (ev) => {
-        this.showTooltip();
-    }
-
-    showTooltip() {
-        // Don't enter visible state if we haven't collected the target yet
-        if (!this.target) {
-            return;
-        }
-        this.setState({
-            visible: true,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(true);
-        }
-        document.addEventListener("mousemove", this.onMouseMove);
-    }
-
-    hideTooltip() {
-        this.setState({
-            visible: false,
-        });
-        if (this.props.onVisibilityChange) {
-            this.props.onVisibilityChange(false);
-        }
-        document.removeEventListener("mousemove", this.onMouseMove);
-    }
-
-    renderTooltip() {
-        const { contentRect, visible } = this.state;
-        if (this.props.forceHidden === true || !visible) {
-            ReactDOM.render(null, getOrCreateContainer());
-            return null;
-        }
-
-        const targetRect = this.target.getBoundingClientRect();
-
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const targetLeft = targetRect.left + window.pageXOffset;
-        const targetBottom = targetRect.bottom + window.pageYOffset;
-        const targetTop = targetRect.top + window.pageYOffset;
-
-        // Place the tooltip above the target by default. If we find that the
-        // tooltip content would extend past the safe area towards the window
-        // edge, flip around to below the target.
-        const position = {};
-        let chevronFace = null;
-        if (this.canTooltipFitAboveTarget()) {
-            position.bottom = window.innerHeight - targetTop;
-            chevronFace = "bottom";
-        } else {
-            position.top = targetBottom;
-            chevronFace = "top";
-        }
-
-        // Center the tooltip horizontally with the target's center.
-        position.left = targetLeft + targetRect.width / 2;
-
-        const chevron = <div className={"mx_InteractiveTooltip_chevron_" + chevronFace} />;
-
-        const menuClasses = classNames({
-            'mx_InteractiveTooltip': true,
-            'mx_InteractiveTooltip_withChevron_top': chevronFace === 'top',
-            'mx_InteractiveTooltip_withChevron_bottom': chevronFace === 'bottom',
-        });
-
-        const menuStyle = {};
-        if (contentRect) {
-            menuStyle.left = `-${contentRect.width / 2}px`;
-        }
-
-        const tooltip = <div className="mx_InteractiveTooltip_wrapper" style={{...position}}>
-            <div className={menuClasses}
-                style={menuStyle}
-                ref={this.collectContentRect}
-            >
-                {chevron}
-                {this.props.content}
-            </div>
-        </div>;
-
-        ReactDOM.render(tooltip, getOrCreateContainer());
-    }
-
-    render() {
-        // We use `cloneElement` here to append some props to the child content
-        // without using a wrapper element which could disrupt layout.
-        return React.cloneElement(this.props.children, {
-            ref: this.collectTarget,
-            onMouseOver: this.onTargetMouseOver,
-        });
-    }
-}

src/components/views/elements/LabelledToggleSwitch.js

@@ -35,6 +35,9 @@ export default class LabelledToggleSwitch extends React.Component {
         // True to put the toggle in front of the label
         // Default false.
         toggleInFront: PropTypes.bool,
+
+        // Additional class names to append to the switch. Optional.
+        className: PropTypes.string,
     };
 
     render() {
@@ -50,8 +53,9 @@ export default class LabelledToggleSwitch extends React.Component {
             secondPart = temp;
         }
 
+        const classes = `mx_SettingsFlag ${this.props.className || ""}`;
         return (
-            <div className="mx_SettingsFlag">
+            <div className={classes}>
                 {firstPart}
                 {secondPart}
             </div>

src/components/views/elements/LanguageDropdown.js

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

src/components/views/elements/ManageIntegsButton.js

@@ -17,10 +17,10 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import * as sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import {IntegrationManagers} from "../../../integrations/IntegrationManagers";
 import SettingsStore from "../../../settings/SettingsStore";
+import AccessibleTooltipButton from "./AccessibleTooltipButton";
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -45,9 +45,8 @@ export default class ManageIntegsButton extends React.Component {
     render() {
         let integrationsButton = <div />;
         if (IntegrationManagers.sharedInstance().hasManager()) {
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
             integrationsButton = (
-                <AccessibleButton
+                <AccessibleTooltipButton
                     className='mx_RoomHeader_button mx_RoomHeader_manageIntegsButton'
                     title={_t("Manage Integrations")}
                     onClick={this.onManageIntegrations}

src/components/views/elements/MemberEventListSummary.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.
 Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,6 +23,7 @@ import { _t } from '../../../languageHandler';
 import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 import * as sdk from "../../../index";
 import {MatrixEvent} from "matrix-js-sdk";
+import {isValid3pidInvite} from "../../../RoomInvite";
 
 export default createReactClass({
     displayName: 'MemberEventListSummary',
@@ -284,6 +285,9 @@ export default createReactClass({
     _getTransition: function(e) {
         if (e.mxEvent.getType() === 'm.room.third_party_invite') {
             // Handle 3pid invites the same as invites so they get bundled together
+            if (!isValid3pidInvite(e.mxEvent)) {
+                return 'invite_withdrawal';
+            }
             return 'invited';
         }
 

src/components/views/elements/MessageSpinner.js

@@ -1,35 +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 React from 'react';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'MessageSpinner',
-
-    render: function() {
-        const w = this.props.w || 32;
-        const h = this.props.h || 32;
-        const imgClass = this.props.imgClassName || "";
-        const msg = this.props.msg || "Loading...";
-        return (
-            <div className="mx_Spinner">
-                <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
-                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
-            </div>
-        );
-    },
-});

src/components/views/elements/PersistedElement.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 
 import ResizeObserver from 'resize-observer-polyfill';
 
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 
 // Shamelessly ripped off Modal.js.  There's probably a better way
 // of doing reusable widgets like dialog boxes & menus where we go and
@@ -113,10 +113,12 @@ export default class PersistedElement extends React.Component {
 
     componentDidMount() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentDidUpdate() {
         this.updateChild();
+        this.renderApp();
     }
 
     componentWillUnmount() {
@@ -141,6 +143,14 @@ export default class PersistedElement extends React.Component {
         this.updateChildVisibility(this.child, true);
     }
 
+    renderApp() {
+        const content = <div ref={this.collectChild} style={this.props.style}>
+            {this.props.children}
+        </div>;
+
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
+    }
+
     updateChildVisibility(child, visible) {
         if (!child) return;
         child.style.display = visible ? 'block' : 'none';
@@ -160,12 +170,6 @@ export default class PersistedElement extends React.Component {
     }
 
     render() {
-        const content = <div ref={this.collectChild} style={this.props.style}>
-            {this.props.children}
-        </div>;
-
-        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
-
         return <div ref={this.collectChildContainer}></div>;
     }
 }

src/components/views/elements/PersistentApp.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2018 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
+Copyright 2019, 2020 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -33,7 +33,7 @@ export default createReactClass({
         };
     },
 
-    componentWillMount: function() {
+    componentDidMount: function() {
         this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
         ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
     },
@@ -75,11 +75,7 @@ export default createReactClass({
                 const AppTile = sdk.getComponent('elements.AppTile');
                 return <AppTile
                     key={app.id}
-                    id={app.id}
-                    eventId={app.eventId}
-                    url={app.url}
-                    name={app.name}
-                    type={app.type}
+                    app={app}
                     fullWidth={true}
                     room={persistentWidgetInRoom}
                     userId={MatrixClientPeg.get().credentials.userId}

src/components/views/elements/Pill.js

@@ -18,7 +18,7 @@ limitations under the License.
 import React from 'react';
 import createReactClass from 'create-react-class';
 import * as sdk from '../../../index';
-import dis from '../../../dispatcher';
+import dis from '../../../dispatcher/dispatcher';
 import classNames from 'classnames';
 import { Room, RoomMember } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
@@ -26,6 +26,7 @@ import {MatrixClientPeg} from '../../../MatrixClientPeg';
 import FlairStore from "../../../stores/FlairStore";
 import {getPrimaryPermalinkEntity} from "../../../utils/permalinks/Permalinks";
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
+import {Action} from "../../../dispatcher/actions";
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
@@ -82,7 +83,8 @@ const Pill = createReactClass({
         };
     },
 
-    async componentWillReceiveProps(nextProps) {
+    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
+    async UNSAFE_componentWillReceiveProps(nextProps) {
         let resourceId;
         let prefix;
 
@@ -155,10 +157,12 @@ const Pill = createReactClass({
         this.setState({resourceId, pillType, member, group, room});
     },
 
-    componentWillMount() {
+    componentDidMount() {
         this._unmounted = false;
         this._matrixClient = MatrixClientPeg.get();
-        this.componentWillReceiveProps(this.props);
+
+        // eslint-disable-next-line new-cap
+        this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves.
     },
 
     componentWillUnmount() {
@@ -188,7 +192,7 @@ const Pill = createReactClass({
 
     onUserPillClicked: function() {
         dis.dispatch({
-            action: 'view_user',
+            action: Action.ViewUser,
             member: this.state.member,
         });
     },

src/components/views/elements/PowerSelector.js

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

src/components/views/elements/ProgressBar.js

@@ -1,39 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-import React from "react";
-import PropTypes from 'prop-types';
-import createReactClass from 'create-react-class';
-
-export default createReactClass({
-    displayName: 'ProgressBar',
-    propTypes: {
-        value: PropTypes.number,
-        max: PropTypes.number,
-    },
-
-    render: function() {
-        // Would use an HTML5 progress tag but if that doesn't animate if you
-        // use the HTML attributes rather than styles
-        const progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%",
-        };
-        return (
-            <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
-        );
-    },
-});

src/components/views/elements/ProgressBar.tsx

@@ -0,0 +1,28 @@
+/*
+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 {
+    value: number;
+    max: number;
+}
+
+const ProgressBar: React.FC<IProps> = ({value, max}) => {
+    return <progress className="mx_ProgressBar" max={max} value={value} />;
+};
+
+export default ProgressBar;

src/components/views/elements/QRCode.tsx

@@ -0,0 +1,51 @@
+/*
+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 * as React from "react";
+import {toDataURL, QRCodeSegment, QRCodeToDataURLOptions} from "qrcode";
+import classNames from "classnames";
+
+import {_t} from "../../../languageHandler";
+import Spinner from "./Spinner";
+
+interface IProps extends QRCodeToDataURLOptions {
+    data: string | QRCodeSegment[];
+    className?: string;
+}
+
+const defaultOptions: QRCodeToDataURLOptions = {
+    errorCorrectionLevel: 'L', // we want it as trivial-looking as possible
+};
+
+const QRCode: React.FC<IProps> = ({data, className, ...options}) => {
+    const [dataUri, setUri] = React.useState<string>(null);
+    React.useEffect(() => {
+        let cancelled = false;
+        toDataURL(data, {...defaultOptions, ...options}).then(uri => {
+            if (cancelled) return;
+            setUri(uri);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [JSON.stringify(data), options]);
+
+    return <div className={classNames("mx_QRCode", className)}>
+        { dataUri ? <img src={dataUri} className="mx_VerificationQRCode" alt={_t("QR Code")} /> : <Spinner /> }
+    </div>;
+};
+
+export default QRCode;