Merge branch 'develop' into matthew/low_bandwidth

src/components/views/auth/AuthButtons.js

@@ -1,57 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd
-Copyright 2018, 2019 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.
-*/
-
-'use strict';
-
-const React = require('react');
-import { _t } from '../../../languageHandler';
-const dis = require('../../../dispatcher');
-const AccessibleButton = require('../elements/AccessibleButton');
-
-module.exports = React.createClass({
-    displayName: 'AuthButtons',
-
-    propTypes: {
-    },
-
-    onLoginClick: function() {
-        dis.dispatch({ action: 'start_login' });
-    },
-
-    onRegisterClick: function() {
-        dis.dispatch({ action: 'start_registration' });
-    },
-
-    render: function() {
-        const loginButton = (
-            <div className="mx_AuthButtons_loginButton_wrapper">
-                <AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
-                    { _t("Login") }
-                </AccessibleButton>
-                <AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
-                    { _t("Register") }
-                </AccessibleButton>
-            </div>
-        );
-
-        return (
-            <div className="mx_AuthButtons">
-                { loginButton }
-            </div>
-        );
-    },
-});

src/components/views/auth/CaptchaForm.js

@@ -17,7 +17,6 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
@@ -61,29 +60,15 @@ module.exports = React.createClass({
         } else {
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
-            const protocol = global.location.protocol;
+            let protocol = global.location.protocol;
             if (protocol === "vector:") {
-                const warning = document.createElement('div');
-                // XXX: fix hardcoded app URL.  Better solutions include:
-                // * jumping straight to a hosted captcha page (but we don't support that yet)
-                // * embedding the captcha in an iframe (if that works)
-                // * using a better captcha lib
-                ReactDOM.render(_t(
-                    "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
-                    {},
-                    {
-                        'a': (sub) => {
-                            return <a target="_blank" rel="noopener" href='https://riot.im/app'>{ sub }</a>;
-                        },
-                    }), warning);
-                this.refs.recaptchaContainer.appendChild(warning);
-            } else {
-                const scriptTag = document.createElement('script');
-                scriptTag.setAttribute(
-                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit",
-                );
-                this.refs.recaptchaContainer.appendChild(scriptTag);
+                protocol = "https:";
             }
+            const scriptTag = document.createElement('script');
+            scriptTag.setAttribute(
+                'src', `${protocol}//www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+            );
+            this.refs.recaptchaContainer.appendChild(scriptTag);
         }
     },
 
@@ -141,8 +126,9 @@ module.exports = React.createClass({
 
         return (
             <div ref="recaptchaContainer">
-                { _t("This homeserver would like to make sure you are not a robot.") }
-                <br />
+                <p>{_t(
+                    "This homeserver would like to make sure you are not a robot.",
+                )}</p>
                 <div id={DIV_ID}></div>
                 { error }
             </div>

src/components/views/auth/CountryDropdown.js

@@ -113,7 +113,7 @@ export default class CountryDropdown extends React.Component {
         const options = displayedCountries.map((country) => {
             return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
-                { country.name } <span>(+{ country.prefix })</span>
+                { country.name } (+{ country.prefix })
             </div>;
         });
 

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations 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.
@@ -57,7 +58,6 @@ 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.
- * makeRegistrationUrl     A function that makes a registration URL
  *
  * Each component may also provide the following functions (beyond the standard React ones):
  *    focus: set the input focus appropriately in the form.
@@ -334,7 +334,7 @@ export const TermsAuthEntry = React.createClass({
         let submitButton;
         if (this.props.showContinue !== false) {
             // XXX: button classes
-            submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_UserSettings_button"
+            submitButton = <button className="mx_InteractiveAuthEntryComponents_termsSubmit mx_GeneralButton"
                                    onClick={this._trySubmit} disabled={!allChecked}>{_t("Accept")}</button>;
         }
 
@@ -365,7 +365,6 @@ export const EmailIdentityAuthEntry = React.createClass({
         stageState: PropTypes.object.isRequired,
         fail: PropTypes.func.isRequired,
         setEmailSid: PropTypes.func.isRequired,
-        makeRegistrationUrl: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -374,38 +373,6 @@ export const EmailIdentityAuthEntry = React.createClass({
         };
     },
 
-    componentWillMount: function() {
-        if (this.props.stageState.emailSid === null) {
-            this.setState({requestingToken: true});
-            this._requestEmailToken().catch((e) => {
-                this.props.fail(e);
-            }).finally(() => {
-                this.setState({requestingToken: false});
-            }).done();
-        }
-    },
-
-    /*
-     * Requests a verification token by email.
-     */
-    _requestEmailToken: function() {
-        const nextLink = this.props.makeRegistrationUrl({
-            client_secret: this.props.clientSecret,
-            hs_url: this.props.matrixClient.getHomeserverUrl(),
-            is_url: this.props.matrixClient.getIdentityServerUrl(),
-            session_id: this.props.authSessionId,
-        });
-
-        return this.props.matrixClient.requestRegisterEmailToken(
-            this.props.inputs.emailAddress,
-            this.props.clientSecret,
-            1, // TODO: Multiple send attempts?
-            nextLink,
-        ).then((result) => {
-            this.props.setEmailSid(result.sid);
-        });
-    },
-
     render: function() {
         if (this.state.requestingToken) {
             const Loader = sdk.getComponent("elements.Spinner");
@@ -525,7 +492,7 @@ export const MsisdnAuthEntry = React.createClass({
             const enableSubmit = Boolean(this.state.token);
             const submitClasses = classnames({
                 mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
-                mx_UserSettings_button: true, // XXX button classes
+                mx_GeneralButton: true,
             });
             let errorSection;
             if (this.state.errorText) {

src/components/views/auth/ModularServerConfig.js

@@ -18,9 +18,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import SdkConfig from "../../../SdkConfig";
+import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
+import * as ServerType from '../../views/auth/ServerTypeSelector';
 
 const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
+// TODO: TravisR - Can this extend ServerConfig for most things?
+
 /*
  * Configure the Modular server name.
  *
@@ -31,65 +37,107 @@ export default class ModularServerConfig extends React.PureComponent {
     static propTypes = {
         onServerConfigChange: PropTypes.func,
 
-        // default URLs are defined in config.json (or the hardcoded defaults)
-        // they are used if the user has not overridden them with a custom URL.
-        // In other words, if the custom URL is blank, the default is used.
-        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
-
-        // This component always uses the default IS URL and doesn't allow it
-        // to be changed.  We still receive it as a prop here to simplify
-        // consumers by still passing the IS URL via onServerConfigChange.
-        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
-
-        // custom URLs are explicitly provided by the user and override the
-        // default URLs.  The user enters them via the component's input fields,
-        // which is reflected on these properties whenever on..UrlChanged fires.
-        // They are persisted in localStorage by MatrixClientPeg, and so can
-        // override the default URLs when the component initially loads.
-        customHsUrl: PropTypes.string,
+        // The current configuration that the user is expecting to change.
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
 
         delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
-    }
+
+        // Called after the component calls onServerConfigChange
+        onAfterSubmit: PropTypes.func,
+
+        // Optional text for the submit button. If falsey, no button will be shown.
+        submitText: PropTypes.string,
+
+        // Optional class for the submit button. Only applies if the submit button
+        // is to be rendered.
+        submitClass: PropTypes.string,
+    };
 
     static defaultProps = {
         onServerConfigChange: function() {},
         customHsUrl: "",
         delayTimeMs: 0,
-    }
+    };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            hsUrl: props.customHsUrl,
+            busy: false,
+            errorText: "",
+            hsUrl: props.serverConfig.hsUrl,
+            isUrl: props.serverConfig.isUrl,
         };
     }
 
     componentWillReceiveProps(newProps) {
-        if (newProps.customHsUrl === this.state.hsUrl) return;
+        if (newProps.serverConfig.hsUrl === this.state.hsUrl &&
+            newProps.serverConfig.isUrl === this.state.isUrl) return;
+
+        this.validateAndApplyServer(newProps.serverConfig.hsUrl, newProps.serverConfig.isUrl);
+    }
+
+    async validateAndApplyServer(hsUrl, isUrl) {
+        // Always try and use the defaults first
+        const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
+        if (defaultConfig.hsUrl === hsUrl && defaultConfig.isUrl === isUrl) {
+            this.setState({busy: false, errorText: ""});
+            this.props.onServerConfigChange(defaultConfig);
+            return defaultConfig;
+        }
 
         this.setState({
-            hsUrl: newProps.customHsUrl,
-        });
-        this.props.onServerConfigChange({
-            hsUrl: newProps.customHsUrl,
-            isUrl: this.props.defaultIsUrl,
+            hsUrl,
+            isUrl,
+            busy: true,
+            errorText: "",
         });
+
+        try {
+            const result = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
+            this.setState({busy: false, errorText: ""});
+            this.props.onServerConfigChange(result);
+            return result;
+        } catch (e) {
+            console.error(e);
+            let message = _t("Unable to validate homeserver/identity server");
+            if (e.translatedMessage) {
+                message = e.translatedMessage;
+            }
+            this.setState({
+                busy: false,
+                errorText: message,
+            });
+        }
+    }
+
+    async validateServer() {
+        // TODO: Do we want to support .well-known lookups here?
+        // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
+        // find their homeserver without demanding they use "https://matrix.org"
+        return this.validateAndApplyServer(this.state.hsUrl, ServerType.TYPES.PREMIUM.identityServerUrl);
     }
 
     onHomeserverBlur = (ev) => {
         this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
-            this.props.onServerConfigChange({
-                hsUrl: this.state.hsUrl,
-                isUrl: this.props.defaultIsUrl,
-            });
+            this.validateServer();
         });
-    }
+    };
 
     onHomeserverChange = (ev) => {
         const hsUrl = ev.target.value;
         this.setState({ hsUrl });
-    }
+    };
+
+    onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        await this.validateServer();
+
+        if (this.props.onAfterSubmit) {
+            this.props.onAfterSubmit();
+        }
+    };
 
     _waitThenInvoke(existingTimeoutId, fn) {
         if (existingTimeoutId) {
@@ -100,6 +148,16 @@ export default class ModularServerConfig extends React.PureComponent {
 
     render() {
         const Field = sdk.getComponent('elements.Field');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const submitButton = this.props.submitText
+            ? <AccessibleButton
+                element="button"
+                type="submit"
+                className={this.props.submitClass}
+                onClick={this.onSubmit}
+                disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
+            : null;
 
         return (
             <div className="mx_ServerConfig">
@@ -113,15 +171,18 @@ export default class ModularServerConfig extends React.PureComponent {
                         </a>,
                     },
                 )}
-                <div className="mx_ServerConfig_fields">
-                    <Field id="mx_ServerConfig_hsUrl"
-                        label={_t("Server Name")}
-                        placeholder={this.props.defaultHsUrl}
-                        value={this.state.hsUrl}
-                        onBlur={this.onHomeserverBlur}
-                        onChange={this.onHomeserverChange}
-                    />
-                </div>
+                <form onSubmit={this.onSubmit} autoComplete={false} action={null}>
+                    <div className="mx_ServerConfig_fields">
+                        <Field id="mx_ServerConfig_hsUrl"
+                            label={_t("Server Name")}
+                            placeholder={this.props.serverConfig.hsUrl}
+                            value={this.state.hsUrl}
+                            onBlur={this.onHomeserverBlur}
+                            onChange={this.onHomeserverChange}
+                        />
+                    </div>
+                    {submitButton}
+                </form>
             </div>
         );
     }

src/components/views/auth/PasswordLogin.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2019 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.
@@ -21,11 +22,29 @@ import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 
 /**
  * A pure UI component which displays a username/password form.
  */
-class PasswordLogin extends React.Component {
+export default class PasswordLogin extends React.Component {
+    static propTypes = {
+        onSubmit: PropTypes.func.isRequired, // fn(username, password)
+        onError: PropTypes.func,
+        onForgotPasswordClick: PropTypes.func, // fn()
+        initialUsername: PropTypes.string,
+        initialPhoneCountry: PropTypes.string,
+        initialPhoneNumber: PropTypes.string,
+        initialPassword: PropTypes.string,
+        onUsernameChanged: PropTypes.func,
+        onPhoneCountryChanged: PropTypes.func,
+        onPhoneNumberChanged: PropTypes.func,
+        onPasswordChanged: PropTypes.func,
+        loginIncorrect: PropTypes.bool,
+        disableSubmit: PropTypes.bool,
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
+    };
+
     static defaultProps = {
         onError: function() {},
         onEditServerDetailsClick: null,
@@ -40,9 +59,12 @@ class PasswordLogin extends React.Component {
         initialPhoneNumber: "",
         initialPassword: "",
         loginIncorrect: false,
-        hsUrl: "",
         disableSubmit: false,
-    }
+    };
+
+    static LOGIN_FIELD_EMAIL = "login_field_email";
+    static LOGIN_FIELD_MXID = "login_field_mxid";
+    static LOGIN_FIELD_PHONE = "login_field_phone";
 
     constructor(props) {
         super(props);
@@ -54,6 +76,7 @@ class PasswordLogin extends React.Component {
             loginType: PasswordLogin.LOGIN_FIELD_MXID,
         };
 
+        this.onForgotPasswordClick = this.onForgotPasswordClick.bind(this);
         this.onSubmitForm = this.onSubmitForm.bind(this);
         this.onUsernameChanged = this.onUsernameChanged.bind(this);
         this.onUsernameBlur = this.onUsernameBlur.bind(this);
@@ -65,9 +88,10 @@ class PasswordLogin extends React.Component {
         this.isLoginEmpty = this.isLoginEmpty.bind(this);
     }
 
-    componentWillMount() {
-        this._passwordField = null;
-        this._loginField = null;
+    onForgotPasswordClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onForgotPasswordClick();
     }
 
     onSubmitForm(ev) {
@@ -127,7 +151,8 @@ class PasswordLogin extends React.Component {
         this.props.onUsernameBlur(ev.target.value);
     }
 
-    onLoginTypeChange(loginType) {
+    onLoginTypeChange(ev) {
+        const loginType = ev.target.value;
         this.props.onError(null); // send a null error to clear any error messages
         this.setState({
             loginType: loginType,
@@ -158,67 +183,64 @@ class PasswordLogin extends React.Component {
     }
 
     renderLoginField(loginType) {
-        const classes = {
-            mx_Login_field: true,
-        };
+        const Field = sdk.getComponent('elements.Field');
+
+        const classes = {};
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
                 classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
-                    className="mx_Login_field"
-                    ref={(e) => {this._loginField = e;}}
+                return <Field
+                    className={classNames(classes)}
+                    id="mx_PasswordLogin_email"
+                    name="username" // make it a little easier for browser's remember-password
                     key="email_input"
                     type="text"
-                    name="username" // make it a little easier for browser's remember-password
-                    onChange={this.onUsernameChanged}
-                    onBlur={this.onUsernameBlur}
+                    label={_t("Email")}
                     placeholder="joe@example.com"
                     value={this.state.username}
+                    onChange={this.onUsernameChanged}
+                    onBlur={this.onUsernameBlur}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
                 classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
+                return <Field
                     className={classNames(classes)}
-                    ref={(e) => {this._loginField = e;}}
+                    id="mx_PasswordLogin_username"
+                    name="username" // make it a little easier for browser's remember-password
                     key="username_input"
                     type="text"
-                    name="username" // make it a little easier for browser's remember-password
+                    label={_t("Username")}
+                    value={this.state.username}
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
-                    placeholder={SdkConfig.get().disable_custom_urls ?
-                                      _t("Username on %(hs)s", {
-                                        hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
-                                      }) : _t("Username")}
-                    value={this.state.username}
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-                classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
-                return <div className="mx_Login_phoneSection">
-                    <CountryDropdown
-                        className="mx_Login_phoneCountry mx_Login_field_prefix"
-                        onOptionChange={this.onPhoneCountryChanged}
-                        value={this.state.phoneCountry}
-                        isSmall={true}
-                        showPrefix={true}
-                    />
-                    <input
-                        className={classNames(classes)}
-                        ref={(e) => {this._loginField = e;}}
-                        key="phone_input"
-                        type="text"
-                        name="phoneNumber"
-                        onChange={this.onPhoneNumberChanged}
-                        onBlur={this.onPhoneNumberBlur}
-                        placeholder={_t("Mobile phone number")}
-                        value={this.state.phoneNumber}
-                        autoFocus
-                    />
-                </div>;
+
+                const phoneCountry = <CountryDropdown
+                    value={this.state.phoneCountry}
+                    isSmall={true}
+                    showPrefix={true}
+                    onOptionChange={this.onPhoneCountryChanged}
+                />;
+
+                return <Field
+                    className={classNames(classes)}
+                    id="mx_PasswordLogin_phoneNumber"
+                    name="phoneNumber"
+                    key="phone_input"
+                    type="text"
+                    label={_t("Phone")}
+                    value={this.state.phoneNumber}
+                    prefix={phoneCountry}
+                    onChange={this.onPhoneNumberChanged}
+                    onBlur={this.onPhoneNumberBlur}
+                    autoFocus
+                />;
             }
         }
     }
@@ -234,13 +256,15 @@ class PasswordLogin extends React.Component {
     }
 
     render() {
+        const Field = sdk.getComponent('elements.Field');
+
         let forgotPasswordJsx;
 
         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.props.onForgotPasswordClick}
+                        onClick={this.onForgotPasswordClick}
                         href="#"
                     >
                         {sub}
@@ -249,14 +273,22 @@ class PasswordLogin extends React.Component {
             </span>;
         }
 
-        let yourMatrixAccountText = _t('Your account');
-        try {
-            const parsedHsUrl = new URL(this.props.hsUrl);
-            yourMatrixAccountText = _t('Your %(serverName)s account', {
-                serverName: parsedHsUrl.hostname,
+        let signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
+            serverName: this.props.serverConfig.hsName,
+        });
+        if (this.props.serverConfig.hsNameIsDifferent) {
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
+            signInToText = _t('Sign in to your Matrix account on <underlinedServerName />', {}, {
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
             });
-        } catch (e) {
-            // ignore
         }
 
         let editLink = null;
@@ -264,17 +296,14 @@ class PasswordLogin extends React.Component {
             editLink = <a className="mx_AuthBody_editServerDetails"
                 href="#" onClick={this.props.onEditServerDetailsClick}
             >
-                {_t('Edit')}
+                {_t('Change')}
             </a>;
         }
 
         const pwFieldClass = classNames({
-            mx_Login_field: true,
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
-        const Dropdown = sdk.getComponent('elements.Dropdown');
-
         const loginField = this.renderLoginField(this.state.loginType);
 
         let loginType;
@@ -282,14 +311,32 @@ class PasswordLogin extends React.Component {
             loginType = (
                 <div className="mx_Login_type_container">
                     <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
-                    <Dropdown
+                    <Field
                         className="mx_Login_type_dropdown"
+                        id="mx_PasswordLogin_type"
+                        element="select"
                         value={this.state.loginType}
-                        onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
-                    </Dropdown>
+                        onChange={this.onLoginTypeChange}
+                    >
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_MXID}
+                            value={PasswordLogin.LOGIN_FIELD_MXID}
+                        >
+                            {_t('Username')}
+                        </option>
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_EMAIL}
+                            value={PasswordLogin.LOGIN_FIELD_EMAIL}
+                        >
+                            {_t('Email address')}
+                        </option>
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_PHONE}
+                            value={PasswordLogin.LOGIN_FIELD_PHONE}
+                        >
+                            {_t('Phone')}
+                        </option>
+                    </Field>
                 </div>
             );
         }
@@ -297,19 +344,22 @@ class PasswordLogin extends React.Component {
         return (
             <div>
                 <h3>
-                    {yourMatrixAccountText}
+                    {signInToText}
                     {editLink}
                 </h3>
                 <form onSubmit={this.onSubmitForm}>
-                    { loginType }
-                    { loginField }
-                    <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
+                    {loginType}
+                    {loginField}
+                    <Field
+                        className={pwFieldClass}
+                        id="mx_PasswordLogin_password"
+                        type="password"
                         name="password"
-                        value={this.state.password} onChange={this.onPasswordChanged}
-                        placeholder={_t('Password')}
+                        label={_t('Password')}
+                        value={this.state.password}
+                        onChange={this.onPasswordChanged}
                     />
-                    <br />
-                    { forgotPasswordJsx }
+                    {forgotPasswordJsx}
                     <input className="mx_Login_submit"
                         type="submit"
                         value={_t('Sign in')}
@@ -320,25 +370,3 @@ class PasswordLogin extends React.Component {
         );
     }
 }
-
-PasswordLogin.LOGIN_FIELD_EMAIL = "login_field_email";
-PasswordLogin.LOGIN_FIELD_MXID = "login_field_mxid";
-PasswordLogin.LOGIN_FIELD_PHONE = "login_field_phone";
-
-PasswordLogin.propTypes = {
-    onSubmit: PropTypes.func.isRequired, // fn(username, password)
-    onError: PropTypes.func,
-    onForgotPasswordClick: PropTypes.func, // fn()
-    initialUsername: PropTypes.string,
-    initialPhoneCountry: PropTypes.string,
-    initialPhoneNumber: PropTypes.string,
-    initialPassword: PropTypes.string,
-    onUsernameChanged: PropTypes.func,
-    onPhoneCountryChanged: PropTypes.func,
-    onPhoneNumberChanged: PropTypes.func,
-    onPasswordChanged: PropTypes.func,
-    loginIncorrect: PropTypes.bool,
-    disableSubmit: PropTypes.bool,
-};
-
-module.exports = PasswordLogin;

src/components/views/auth/RegistrationForm.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -25,6 +25,8 @@ import Modal from '../../../Modal';
 import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
+import withValidation from '../elements/Validation';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -32,6 +34,8 @@ const FIELD_USERNAME = 'field_username';
 const FIELD_PASSWORD = 'field_password';
 const FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
 
+const PASSWORD_MIN_SCORE = 3; // safely unguessable: moderate protection from offline slow-hash scenario.
+
 /**
  * A pure UI component which displays a registration form.
  */
@@ -45,77 +49,72 @@ module.exports = React.createClass({
         defaultPhoneNumber: PropTypes.string,
         defaultUsername: PropTypes.string,
         defaultPassword: PropTypes.string,
-        minPasswordLength: PropTypes.number,
-        onError: PropTypes.func,
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
         onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
-        hsUrl: PropTypes.string,
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
     },
 
     getDefaultProps: function() {
         return {
-            minPasswordLength: 6,
-            onError: function(e) {
-                console.error(e);
-            },
+            onValidationChange: console.error,
         };
     },
 
     getInitialState: function() {
         return {
+            // Field error codes by field ID
             fieldValid: {},
             // The ISO2 country code selected in the phone number entry
             phoneCountry: this.props.defaultPhoneCountry,
+            username: "",
+            email: "",
+            phoneNumber: "",
+            password: "",
+            passwordConfirm: "",
+            passwordComplexity: null,
+            passwordSafe: false,
         };
     },
 
-    onSubmit: function(ev) {
+    onSubmit: async function(ev) {
         ev.preventDefault();
 
-        // validate everything, in reverse order so
-        // the error that ends up being displayed
-        // is the one from the first invalid field.
-        // It's not super ideal that this just calls
-        // onError once for each invalid field.
-        this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
-        this.validateField(FIELD_PASSWORD, ev.type);
-        this.validateField(FIELD_USERNAME, ev.type);
-        this.validateField(FIELD_PHONE_NUMBER, ev.type);
-        this.validateField(FIELD_EMAIL, ev.type);
+        const allFieldsValid = await this.verifyFieldsBeforeSubmit();
+        if (!allFieldsValid) {
+            return;
+        }
 
         const self = this;
-        if (this.allFieldsValid()) {
-            if (this.refs.email.value == '') {
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
-                    title: _t("Warning!"),
-                    description:
-                        <div>
-                            { _t("If you don't specify an email address, you won't be able to reset your password. " +
-                                "Are you sure?") }
-                        </div>,
-                    button: _t("Continue"),
-                    onFinished: function(confirmed) {
-                        if (confirmed) {
-                            self._doSubmit(ev);
-                        }
-                    },
-                });
-            } else {
-                self._doSubmit(ev);
-            }
+        if (this.state.email == '') {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
+                title: _t("Warning!"),
+                description:
+                    <div>
+                        { _t("If you don't specify an email address, you won't be able to reset your password. " +
+                            "Are you sure?") }
+                    </div>,
+                button: _t("Continue"),
+                onFinished: function(confirmed) {
+                    if (confirmed) {
+                        self._doSubmit(ev);
+                    }
+                },
+            });
+        } else {
+            self._doSubmit(ev);
         }
     },
 
     _doSubmit: function(ev) {
-        const email = this.refs.email.value.trim();
+        const email = this.state.email.trim();
         const promise = this.props.onRegisterClick({
-            username: this.refs.username.value.trim(),
-            password: this.refs.password.value.trim(),
+            username: this.state.username.trim(),
+            password: this.state.password.trim(),
             email: email,
             phoneCountry: this.state.phoneCountry,
-            phoneNumber: this.refs.phoneNumber ? this.refs.phoneNumber.value.trim() : '',
+            phoneNumber: this.state.phoneNumber,
         });
 
         if (promise) {
@@ -126,135 +125,211 @@ module.exports = React.createClass({
         }
     },
 
+    async verifyFieldsBeforeSubmit() {
+        // Blur the active element if any, so we first run its blur validation,
+        // which is less strict than the pass we're about to do below for all fields.
+        const activeElement = document.activeElement;
+        if (activeElement) {
+            activeElement.blur();
+        }
+
+        const fieldIDsInDisplayOrder = [
+            FIELD_USERNAME,
+            FIELD_PASSWORD,
+            FIELD_PASSWORD_CONFIRM,
+            FIELD_EMAIL,
+            FIELD_PHONE_NUMBER,
+        ];
+
+        // Run all fields with stricter validation that no longer allows empty
+        // values for required fields.
+        for (const fieldID of fieldIDsInDisplayOrder) {
+            const field = this[fieldID];
+            if (!field) {
+                continue;
+            }
+            // We must wait for these validations to finish before queueing
+            // up the setState below so our setState goes in the queue after
+            // all the setStates from these validate calls (that's how we
+            // know they've finished).
+            await field.validate({ allowEmpty: false });
+        }
+
+        // Validation and state updates are async, so we need to wait for them to complete
+        // first. Queue a `setState` callback and wait for it to resolve.
+        await new Promise(resolve => this.setState({}, resolve));
+
+        if (this.allFieldsValid()) {
+            return true;
+        }
+
+        const invalidField = this.findFirstInvalidField(fieldIDsInDisplayOrder);
+
+        if (!invalidField) {
+            return true;
+        }
+
+        // Focus the first invalid field and show feedback in the stricter mode
+        // that no longer allows empty values for required fields.
+        invalidField.focus();
+        invalidField.validate({ allowEmpty: false, focused: true });
+        return false;
+    },
+
     /**
      * @returns {boolean} true if all fields were valid last time they were validated.
      */
     allFieldsValid: function() {
         const keys = Object.keys(this.state.fieldValid);
         for (let i = 0; i < keys.length; ++i) {
-            if (this.state.fieldValid[keys[i]] == false) {
+            if (!this.state.fieldValid[keys[i]]) {
                 return false;
             }
         }
         return true;
     },
 
-    validateField: function(fieldID, eventType) {
-        const pwd1 = this.refs.password.value.trim();
-        const pwd2 = this.refs.passwordConfirm.value.trim();
-        const allowEmpty = eventType === "blur";
-
-        switch (fieldID) {
-            case FIELD_EMAIL: {
-                const email = this.refs.email.value;
-                const emailValid = email === '' || Email.looksValid(email);
-                if (this._authStepIsRequired('m.login.email.identity') && (!emailValid || email === '')) {
-                    this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_EMAIL");
-                } else this.markFieldValid(fieldID, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
-                break;
+    findFirstInvalidField(fieldIDs) {
+        for (const fieldID of fieldIDs) {
+            if (!this.state.fieldValid[fieldID] && this[fieldID]) {
+                return this[fieldID];
             }
-            case FIELD_PHONE_NUMBER: {
-                const phoneNumber = this.refs.phoneNumber ? this.refs.phoneNumber.value : '';
-                const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
-                if (this._authStepIsRequired('m.login.msisdn') && (!phoneNumberValid || phoneNumber === '')) {
-                    this.markFieldValid(fieldID, false, "RegistrationForm.ERR_MISSING_PHONE_NUMBER");
-                } else this.markFieldValid(fieldID, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
-                break;
-            }
-            case FIELD_USERNAME: {
-                const username = this.refs.username.value.trim();
-                if (allowEmpty && username === '') {
-                    this.markFieldValid(fieldID, true);
-                } else if (!SAFE_LOCALPART_REGEX.test(username)) {
-                    this.markFieldValid(
-                        fieldID,
-                        false,
-                        "RegistrationForm.ERR_USERNAME_INVALID",
-                    );
-                } else if (username == '') {
-                    this.markFieldValid(
-                        fieldID,
-                        false,
-                        "RegistrationForm.ERR_USERNAME_BLANK",
-                    );
-                } else {
-                    this.markFieldValid(fieldID, true);
-                }
-                break;
-            }
-            case FIELD_PASSWORD:
-                if (allowEmpty && pwd1 === "") {
-                    this.markFieldValid(fieldID, true);
-                } else if (pwd1 == '') {
-                    this.markFieldValid(
-                        fieldID,
-                        false,
-                        "RegistrationForm.ERR_PASSWORD_MISSING",
-                    );
-                } else if (pwd1.length < this.props.minPasswordLength) {
-                    this.markFieldValid(
-                        fieldID,
-                        false,
-                        "RegistrationForm.ERR_PASSWORD_LENGTH",
-                    );
-                } else {
-                    this.markFieldValid(fieldID, true);
-                }
-                break;
-            case FIELD_PASSWORD_CONFIRM:
-                this.markFieldValid(
-                    fieldID, pwd1 == pwd2,
-                    "RegistrationForm.ERR_PASSWORD_MISMATCH",
-                );
-                break;
         }
+        return null;
     },
 
-    markFieldValid: function(fieldID, val, errorCode) {
-        const fieldValid = this.state.fieldValid;
-        fieldValid[fieldID] = val;
-        this.setState({fieldValid: fieldValid});
-        if (!val) {
-            this.props.onError(errorCode);
-        }
+    markFieldValid: function(fieldID, valid) {
+        const { fieldValid } = this.state;
+        fieldValid[fieldID] = valid;
+        this.setState({
+            fieldValid,
+        });
     },
 
-    fieldElementById(fieldID) {
-        switch (fieldID) {
-            case FIELD_EMAIL:
-                return this.refs.email;
-            case FIELD_PHONE_NUMBER:
-                return this.refs.phoneNumber;
-            case FIELD_USERNAME:
-                return this.refs.username;
-            case FIELD_PASSWORD:
-                return this.refs.password;
-            case FIELD_PASSWORD_CONFIRM:
-                return this.refs.passwordConfirm;
-        }
+    onEmailChange(ev) {
+        this.setState({
+            email: ev.target.value,
+        });
     },
 
-    _classForField: function(fieldID, ...baseClasses) {
-        let cls = baseClasses.join(' ');
-        if (this.state.fieldValid[fieldID] === false) {
-            if (cls) cls += ' ';
-            cls += 'error';
-        }
-        return cls;
+    async onEmailValidate(fieldState) {
+        const result = await this.validateEmailRules(fieldState);
+        this.markFieldValid(FIELD_EMAIL, result.valid);
+        return result;
     },
 
-    onEmailBlur(ev) {
-        this.validateField(FIELD_EMAIL, ev.type);
+    validateEmailRules: withValidation({
+        description: () => _t("Use an email address to recover your account"),
+        rules: [
+            {
+                key: "required",
+                test: function({ value, allowEmpty }) {
+                    return allowEmpty || !this._authStepIsRequired('m.login.email.identity') || !!value;
+                },
+                invalid: () => _t("Enter email address (required on this homeserver)"),
+            },
+            {
+                key: "email",
+                test: ({ value }) => !value || Email.looksValid(value),
+                invalid: () => _t("Doesn't look like a valid email address"),
+            },
+        ],
+    }),
+
+    onPasswordChange(ev) {
+        this.setState({
+            password: ev.target.value,
+        });
     },
 
-    onPasswordBlur(ev) {
-        this.validateField(FIELD_PASSWORD, ev.type);
+    async onPasswordValidate(fieldState) {
+        const result = await this.validatePasswordRules(fieldState);
+        this.markFieldValid(FIELD_PASSWORD, result.valid);
+        return result;
     },
 
-    onPasswordConfirmBlur(ev) {
-        this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
+    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,
+        });
     },
 
+    async onPasswordConfirmValidate(fieldState) {
+        const result = await this.validatePasswordConfirmRules(fieldState);
+        this.markFieldValid(FIELD_PASSWORD_CONFIRM, result.valid);
+        return result;
+    },
+
+    validatePasswordConfirmRules: withValidation({
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t("Confirm password"),
+            },
+            {
+                key: "match",
+                test: function({ value }) {
+                    return !value || value === this.state.password;
+                },
+                invalid: () => _t("Passwords don't match"),
+            },
+         ],
+    }),
+
     onPhoneCountryChange(newVal) {
         this.setState({
             phoneCountry: newVal.iso2,
@@ -262,14 +337,64 @@ module.exports = React.createClass({
         });
     },
 
-    onPhoneNumberBlur(ev) {
-        this.validateField(FIELD_PHONE_NUMBER, ev.type);
+    onPhoneNumberChange(ev) {
+        this.setState({
+            phoneNumber: ev.target.value,
+        });
     },
 
-    onUsernameBlur(ev) {
-        this.validateField(FIELD_USERNAME, ev.type);
+    async onPhoneNumberValidate(fieldState) {
+        const result = await this.validatePhoneNumberRules(fieldState);
+        this.markFieldValid(FIELD_PHONE_NUMBER, result.valid);
+        return result;
     },
 
+    validatePhoneNumberRules: withValidation({
+        description: () => _t("Other users can invite you to rooms using your contact details"),
+        rules: [
+            {
+                key: "required",
+                test: function({ value, allowEmpty }) {
+                    return allowEmpty || !this._authStepIsRequired('m.login.msisdn') || !!value;
+                },
+                invalid: () => _t("Enter phone number (required on this homeserver)"),
+            },
+            {
+                key: "email",
+                test: ({ value }) => !value || phoneNumberLooksValid(value),
+                invalid: () => _t("Doesn't look like a valid phone number"),
+            },
+        ],
+    }),
+
+    onUsernameChange(ev) {
+        this.setState({
+            username: ev.target.value,
+        });
+    },
+
+    async onUsernameValidate(fieldState) {
+        const result = await this.validateUsernameRules(fieldState);
+        this.markFieldValid(FIELD_USERNAME, result.valid);
+        return result;
+    },
+
+    validateUsernameRules: withValidation({
+        description: () => _t("Use letters, numbers, dashes and underscores only"),
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t("Enter username"),
+            },
+            {
+                key: "safeLocalpart",
+                test: ({ value }) => !value || SAFE_LOCALPART_REGEX.test(value),
+                invalid: () => _t("Some characters not allowed"),
+            },
+        ],
+    }),
+
     /**
      * A step is required if all flows include that step.
      *
@@ -294,15 +419,115 @@ module.exports = React.createClass({
         });
     },
 
+    renderEmail() {
+        if (!this._authStepIsUsed('m.login.email.identity')) {
+            return null;
+        }
+        const Field = sdk.getComponent('elements.Field');
+        const emailPlaceholder = this._authStepIsRequired('m.login.email.identity') ?
+            _t("Email") :
+            _t("Email (optional)");
+        return <Field
+            id="mx_RegistrationForm_email"
+            ref={field => this[FIELD_EMAIL] = field}
+            type="text"
+            label={emailPlaceholder}
+            defaultValue={this.props.defaultEmail}
+            value={this.state.email}
+            onChange={this.onEmailChange}
+            onValidate={this.onEmailValidate}
+        />;
+    },
+
+    renderPassword() {
+        const Field = sdk.getComponent('elements.Field');
+        return <Field
+            id="mx_RegistrationForm_password"
+            ref={field => this[FIELD_PASSWORD] = field}
+            type="password"
+            label={_t("Password")}
+            defaultValue={this.props.defaultPassword}
+            value={this.state.password}
+            onChange={this.onPasswordChange}
+            onValidate={this.onPasswordValidate}
+        />;
+    },
+
+    renderPasswordConfirm() {
+        const Field = sdk.getComponent('elements.Field');
+        return <Field
+            id="mx_RegistrationForm_passwordConfirm"
+            ref={field => this[FIELD_PASSWORD_CONFIRM] = field}
+            type="password"
+            label={_t("Confirm")}
+            defaultValue={this.props.defaultPassword}
+            value={this.state.passwordConfirm}
+            onChange={this.onPasswordConfirmChange}
+            onValidate={this.onPasswordConfirmValidate}
+        />;
+    },
+
+    renderPhoneNumber() {
+        const threePidLogin = !SdkConfig.get().disable_3pid_login;
+        if (!threePidLogin || !this._authStepIsUsed('m.login.msisdn')) {
+            return null;
+        }
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
+        const Field = sdk.getComponent('elements.Field');
+        const phoneLabel = this._authStepIsRequired('m.login.msisdn') ?
+            _t("Phone") :
+            _t("Phone (optional)");
+        const phoneCountry = <CountryDropdown
+            value={this.state.phoneCountry}
+            isSmall={true}
+            showPrefix={true}
+            onOptionChange={this.onPhoneCountryChange}
+        />;
+        return <Field
+            id="mx_RegistrationForm_phoneNumber"
+            ref={field => this[FIELD_PHONE_NUMBER] = field}
+            type="text"
+            label={phoneLabel}
+            defaultValue={this.props.defaultPhoneNumber}
+            value={this.state.phoneNumber}
+            prefix={phoneCountry}
+            onChange={this.onPhoneNumberChange}
+            onValidate={this.onPhoneNumberValidate}
+        />;
+    },
+
+    renderUsername() {
+        const Field = sdk.getComponent('elements.Field');
+        return <Field
+            id="mx_RegistrationForm_username"
+            ref={field => this[FIELD_USERNAME] = field}
+            type="text"
+            autoFocus={true}
+            label={_t("Username")}
+            defaultValue={this.props.defaultUsername}
+            value={this.state.username}
+            onChange={this.onUsernameChange}
+            onValidate={this.onUsernameValidate}
+        />;
+    },
+
     render: function() {
-        let yourMatrixAccountText = _t('Create your account');
-        try {
-            const parsedHsUrl = new URL(this.props.hsUrl);
-            yourMatrixAccountText = _t('Create your %(serverName)s account', {
-                serverName: parsedHsUrl.hostname,
+        let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+            serverName: this.props.serverConfig.hsName,
+        });
+        if (this.props.serverConfig.hsNameIsDifferent) {
+            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
+
+            yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
+                'underlinedServerName': () => {
+                    return <TextWithTooltip
+                        class="mx_Login_underlinedServerName"
+                        tooltip={this.props.serverConfig.hsUrl}
+                    >
+                        {this.props.serverConfig.hsName}
+                    </TextWithTooltip>;
+                },
             });
-        } catch (e) {
-            // ignore
         }
 
         let editLink = null;
@@ -310,66 +535,14 @@ module.exports = React.createClass({
             editLink = <a className="mx_AuthBody_editServerDetails"
                 href="#" onClick={this.props.onEditServerDetailsClick}
             >
-                {_t('Edit')}
+                {_t('Change')}
             </a>;
         }
 
-        let emailSection;
-        if (this._authStepIsUsed('m.login.email.identity')) {
-            const emailPlaceholder = this._authStepIsRequired('m.login.email.identity') ?
-                _t("Email") :
-                _t("Email (optional)");
-
-            emailSection = (
-                <div>
-                    <input type="text" ref="email"
-                        placeholder={emailPlaceholder}
-                        defaultValue={this.props.defaultEmail}
-                        className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
-                        onBlur={this.onEmailBlur}
-                        value={this.state.email} />
-                </div>
-            );
-        }
-
-        const threePidLogin = !SdkConfig.get().disable_3pid_login;
-        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-        let phoneSection;
-        if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) {
-            const phonePlaceholder = this._authStepIsRequired('m.login.msisdn') ?
-                _t("Phone") :
-                _t("Phone (optional)");
-            phoneSection = (
-                <div className="mx_Login_phoneSection">
-                    <CountryDropdown ref="phone_country"
-                        className="mx_Login_phoneCountry mx_Login_field_prefix"
-                        value={this.state.phoneCountry}
-                        isSmall={true}
-                        showPrefix={true}
-                        onOptionChange={this.onPhoneCountryChange}
-                    />
-                    <input type="text" ref="phoneNumber"
-                        placeholder={phonePlaceholder}
-                        defaultValue={this.props.defaultPhoneNumber}
-                        className={this._classForField(
-                            FIELD_PHONE_NUMBER,
-                            'mx_Login_phoneNumberField',
-                            'mx_Login_field',
-                            'mx_Login_field_has_prefix',
-                        )}
-                        onBlur={this.onPhoneNumberBlur}
-                        value={this.state.phoneNumber}
-                    />
-                </div>
-            );
-        }
-
         const registerButton = (
             <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
 
-        const placeholderUsername = _t("Username");
-
         return (
             <div>
                 <h3>
@@ -378,31 +551,18 @@ module.exports = React.createClass({
                 </h3>
                 <form onSubmit={this.onSubmit}>
                     <div className="mx_AuthBody_fieldRow">
-                        <input type="text" ref="username"
-                            autoFocus={true}
-                            placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
-                            className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
-                            onBlur={this.onUsernameBlur} />
+                        {this.renderUsername()}
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        <input type="password" ref="password"
-                            className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
-                            onBlur={this.onPasswordBlur}
-                            placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
-                        <input type="password" ref="passwordConfirm"
-                            placeholder={_t("Confirm")}
-                            className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
-                            onBlur={this.onPasswordConfirmBlur}
-                            defaultValue={this.props.defaultPassword} />
+                        {this.renderPassword()}
+                        {this.renderPasswordConfirm()}
                     </div>
                     <div className="mx_AuthBody_fieldRow">
-                        { emailSection }
-                        { phoneSection }
+                        {this.renderEmail()}
+                        {this.renderPhoneNumber()}
                     </div>
-                    {_t(
-                        "Use an email address to recover your account. Other users " +
-                        "can invite you to rooms using your contact details.",
-                    )}
+                    {_t("Use an email address to recover your account.") + " "}
+                    {_t("Other users can invite you to rooms using your contact details.")}
                     { registerButton }
                 </form>
             </div>

src/components/views/auth/ServerConfig.js

@@ -20,6 +20,9 @@ import PropTypes from 'prop-types';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
+import SdkConfig from "../../../SdkConfig";
 
 /*
  * A pure UI component which displays the HS and IS to use.
@@ -27,82 +30,119 @@ import { _t } from '../../../languageHandler';
 
 export default class ServerConfig extends React.PureComponent {
     static propTypes = {
-        onServerConfigChange: PropTypes.func,
+        onServerConfigChange: PropTypes.func.isRequired,
 
-        // default URLs are defined in config.json (or the hardcoded defaults)
-        // they are used if the user has not overridden them with a custom URL.
-        // In other words, if the custom URL is blank, the default is used.
-        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
-        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
-
-        // custom URLs are explicitly provided by the user and override the
-        // default URLs.  The user enters them via the component's input fields,
-        // which is reflected on these properties whenever on..UrlChanged fires.
-        // They are persisted in localStorage by MatrixClientPeg, and so can
-        // override the default URLs when the component initially loads.
-        customHsUrl: PropTypes.string,
-        customIsUrl: PropTypes.string,
+        // The current configuration that the user is expecting to change.
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
 
         delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
-    }
+
+        // Called after the component calls onServerConfigChange
+        onAfterSubmit: PropTypes.func,
+
+        // Optional text for the submit button. If falsey, no button will be shown.
+        submitText: PropTypes.string,
+
+        // Optional class for the submit button. Only applies if the submit button
+        // is to be rendered.
+        submitClass: PropTypes.string,
+    };
 
     static defaultProps = {
         onServerConfigChange: function() {},
-        customHsUrl: "",
-        customIsUrl: "",
         delayTimeMs: 0,
-    }
+    };
 
     constructor(props) {
         super(props);
 
         this.state = {
-            hsUrl: props.customHsUrl,
-            isUrl: props.customIsUrl,
+            busy: false,
+            errorText: "",
+            hsUrl: props.serverConfig.hsUrl,
+            isUrl: props.serverConfig.isUrl,
         };
     }
 
     componentWillReceiveProps(newProps) {
-        if (newProps.customHsUrl === this.state.hsUrl &&
-            newProps.customIsUrl === this.state.isUrl) return;
+        if (newProps.serverConfig.hsUrl === this.state.hsUrl &&
+            newProps.serverConfig.isUrl === this.state.isUrl) return;
+
+        this.validateAndApplyServer(newProps.serverConfig.hsUrl, newProps.serverConfig.isUrl);
+    }
+
+    async validateServer() {
+        // TODO: Do we want to support .well-known lookups here?
+        // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
+        // find their homeserver without demanding they use "https://matrix.org"
+        return this.validateAndApplyServer(this.state.hsUrl, this.state.isUrl);
+    }
+
+    async validateAndApplyServer(hsUrl, isUrl) {
+        // Always try and use the defaults first
+        const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
+        if (defaultConfig.hsUrl === hsUrl && defaultConfig.isUrl === isUrl) {
+            this.setState({busy: false, errorText: ""});
+            this.props.onServerConfigChange(defaultConfig);
+            return defaultConfig;
+        }
 
         this.setState({
-            hsUrl: newProps.customHsUrl,
-            isUrl: newProps.customIsUrl,
-        });
-        this.props.onServerConfigChange({
-            hsUrl: newProps.customHsUrl,
-            isUrl: newProps.customIsUrl,
+            hsUrl,
+            isUrl,
+            busy: true,
+            errorText: "",
         });
+
+        try {
+            const result = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
+            this.setState({busy: false, errorText: ""});
+            this.props.onServerConfigChange(result);
+            return result;
+        } catch (e) {
+            console.error(e);
+            let message = _t("Unable to validate homeserver/identity server");
+            if (e.translatedMessage) {
+                message = e.translatedMessage;
+            }
+            this.setState({
+                busy: false,
+                errorText: message,
+            });
+        }
     }
 
     onHomeserverBlur = (ev) => {
         this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
-            this.props.onServerConfigChange({
-                hsUrl: this.state.hsUrl,
-                isUrl: this.state.isUrl,
-            });
+            this.validateServer();
         });
-    }
+    };
 
     onHomeserverChange = (ev) => {
         const hsUrl = ev.target.value;
         this.setState({ hsUrl });
-    }
+    };
 
     onIdentityServerBlur = (ev) => {
         this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
-            this.props.onServerConfigChange({
-                hsUrl: this.state.hsUrl,
-                isUrl: this.state.isUrl,
-            });
+            this.validateServer();
         });
-    }
+    };
 
     onIdentityServerChange = (ev) => {
         const isUrl = ev.target.value;
         this.setState({ isUrl });
-    }
+    };
+
+    onSubmit = async (ev) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+        await this.validateServer();
+
+        if (this.props.onAfterSubmit) {
+            this.props.onAfterSubmit();
+        }
+    };
 
     _waitThenInvoke(existingTimeoutId, fn) {
         if (existingTimeoutId) {
@@ -114,10 +154,24 @@ export default class ServerConfig extends React.PureComponent {
     showHelpPopup = () => {
         const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
-    }
+    };
 
     render() {
         const Field = sdk.getComponent('elements.Field');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const errorText = this.state.errorText
+            ? <span className='mx_ServerConfig_error'>{this.state.errorText}</span>
+            : null;
+
+        const submitButton = this.props.submitText
+            ? <AccessibleButton
+                  element="button"
+                  type="submit"
+                  className={this.props.submitClass}
+                  onClick={this.onSubmit}
+                  disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
+            : null;
 
         return (
             <div className="mx_ServerConfig">
@@ -127,22 +181,28 @@ export default class ServerConfig extends React.PureComponent {
                         { sub }
                     </a>,
                 })}
-                <div className="mx_ServerConfig_fields">
-                    <Field id="mx_ServerConfig_hsUrl"
-                        label={_t("Homeserver URL")}
-                        placeholder={this.props.defaultHsUrl}
-                        value={this.state.hsUrl}
-                        onBlur={this.onHomeserverBlur}
-                        onChange={this.onHomeserverChange}
-                    />
-                    <Field id="mx_ServerConfig_isUrl"
-                        label={_t("Identity Server URL")}
-                        placeholder={this.props.defaultIsUrl}
-                        value={this.state.isUrl}
-                        onBlur={this.onIdentityServerBlur}
-                        onChange={this.onIdentityServerChange}
-                    />
-                </div>
+                {errorText}
+                <form onSubmit={this.onSubmit} autoComplete={false} action={null}>
+                    <div className="mx_ServerConfig_fields">
+                        <Field id="mx_ServerConfig_hsUrl"
+                            label={_t("Homeserver URL")}
+                            placeholder={this.props.serverConfig.hsUrl}
+                            value={this.state.hsUrl}
+                            onBlur={this.onHomeserverBlur}
+                            onChange={this.onHomeserverChange}
+                            disabled={this.state.busy}
+                        />
+                        <Field id="mx_ServerConfig_isUrl"
+                            label={_t("Identity Server URL")}
+                            placeholder={this.props.serverConfig.isUrl}
+                            value={this.state.isUrl}
+                            onBlur={this.onIdentityServerBlur}
+                            onChange={this.onIdentityServerChange}
+                            disabled={this.state.busy}
+                        />
+                    </div>
+                    {submitButton}
+                </form>
             </div>
         );
     }

src/components/views/auth/ServerTypeSelector.js

@@ -19,6 +19,8 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 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';
 
@@ -30,40 +32,47 @@ export const TYPES = {
     FREE: {
         id: FREE,
         label: () => _t('Free'),
-        logo: () => <img src={require('../../../../res/img/feather-icons/matrix-org-bw-logo.svg')} />,
+        logo: () => <img src={require('../../../../res/img/matrix-org-bw-logo.svg')} />,
         description: () => _t('Join millions for free on the largest public server'),
-        hsUrl: 'https://matrix.org',
-        isUrl: 'https://vector.im',
+        serverConfig: makeType(ValidatedServerConfig, {
+            hsUrl: "https://matrix.org",
+            hsName: "matrix.org",
+            hsNameIsDifferent: false,
+            isUrl: "https://vector.im",
+            identityEnabled: true,
+        }),
     },
     PREMIUM: {
         id: PREMIUM,
         label: () => _t('Premium'),
-        logo: () => <img src={require('../../../../res/img/feather-icons/modular-bw-logo.svg')} />,
+        logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
             a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
                 {sub}
             </a>,
         }),
+        identityServerUrl: "https://vector.im",
     },
     ADVANCED: {
         id: ADVANCED,
         label: () => _t('Advanced'),
         logo: () => <div>
-            <img src={require('../../../../res/img/feather-icons/globe.svg')} />
+            <img src={require('../../../../res/img/feather-customised/globe.svg')} />
             {_t('Other')}
         </div>,
         description: () => _t('Find other public servers or use a custom server'),
     },
 };
 
-function getDefaultType(defaultHsUrl) {
-    if (!defaultHsUrl) {
+export function getTypeFromServerConfig(config) {
+    const {hsUrl} = config;
+    if (!hsUrl) {
         return null;
-    } else if (defaultHsUrl === TYPES.FREE.hsUrl) {
+    } else if (hsUrl === TYPES.FREE.serverConfig.hsUrl) {
         return FREE;
-    } else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) {
-        // TODO: Use a Riot config parameter to detect Modular-ness.
-        // https://github.com/vector-im/riot-web/issues/8253
+    } else if (new URL(hsUrl).hostname.endsWith('.modular.im')) {
+        // This is an unlikely case to reach, as Modular defaults to hiding the
+        // server type selector.
         return PREMIUM;
     } else {
         return ADVANCED;
@@ -72,26 +81,22 @@ function getDefaultType(defaultHsUrl) {
 
 export default class ServerTypeSelector extends React.PureComponent {
     static propTypes = {
-        // The default HS URL as another way to set the initially selected type.
-        defaultHsUrl: PropTypes.string,
+        // The default selected type.
+        selected: PropTypes.string,
         // Handler called when the selected type changes.
         onChange: PropTypes.func.isRequired,
-    }
+    };
 
     constructor(props) {
         super(props);
 
         const {
-            defaultHsUrl,
-            onChange,
+            selected,
         } = props;
-        const type = getDefaultType(defaultHsUrl);
+
         this.state = {
-            selected: type,
+            selected,
         };
-        if (onChange) {
-            onChange(type);
-        }
     }
 
     updateSelectedType(type) {
@@ -110,7 +115,7 @@ export default class ServerTypeSelector extends React.PureComponent {
         e.stopPropagation();
         const type = e.currentTarget.dataset.id;
         this.updateSelectedType(type);
-    }
+    };
 
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');

src/components/views/auth/Welcome.js

@@ -0,0 +1,47 @@
+/*
+Copyright 2019 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 sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+
+export default class Welcome extends React.PureComponent {
+    render() {
+        const AuthPage = sdk.getComponent("auth.AuthPage");
+        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
+        const LanguageSelector = sdk.getComponent('auth.LanguageSelector');
+
+        const pagesConfig = SdkConfig.get().embeddedPages;
+        let pageUrl = null;
+        if (pagesConfig) {
+            pageUrl = pagesConfig.welcomeUrl;
+        }
+        if (!pageUrl) {
+            pageUrl = 'welcome.html';
+        }
+
+        return (
+            <AuthPage>
+                <div className="mx_Welcome">
+                    <EmbeddedPage className="mx_WelcomePage"
+                        url={pageUrl}
+                    />
+                    <LanguageSelector />
+                </div>
+            </AuthPage>
+        );
+    }
+}

src/components/views/avatars/BaseAvatar.js

@@ -138,40 +138,7 @@ module.exports = React.createClass({
         }
     },
 
-    /**
-     * returns the first (non-sigil) character of 'name',
-     * converted to uppercase
-     */
-    _getInitialLetter: function(name) {
-        if (name.length < 1) {
-            return undefined;
-        }
-
-        let idx = 0;
-        const initial = name[0];
-        if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
-            idx++;
-        }
-
-        // string.codePointAt(0) would do this, but that isn't supported by
-        // some browsers (notably PhantomJS).
-        let chars = 1;
-        const first = name.charCodeAt(idx);
-
-        // check if it’s the start of a surrogate pair
-        if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
-            const second = name.charCodeAt(idx+1);
-            if (second >= 0xDC00 && second <= 0xDFFF) {
-                chars++;
-            }
-        }
-
-        const firstChar = name.substring(idx, idx+chars);
-        return firstChar.toUpperCase();
-    },
-
     render: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
         const imageUrl = this.state.imageUrls[this.state.urlsIndex];
 
         const {
@@ -181,20 +148,20 @@ module.exports = React.createClass({
         } = this.props;
 
         if (imageUrl === this.state.defaultImageUrl) {
-            const initialLetter = this._getInitialLetter(name);
+            const initialLetter = AvatarLogic.getInitialLetter(name);
             const textNode = (
-                <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                <span className="mx_BaseAvatar_initial" aria-hidden="true"
                     style={{ fontSize: (width * 0.65) + "px",
                     width: width + "px",
                     lineHeight: height + "px" }}
                 >
                     { initialLetter }
-                </EmojiText>
+                </span>
             );
             const imgNode = (
                 <img className="mx_BaseAvatar_image" src={imageUrl}
                     alt="" title={title} onError={this.onError}
-                    width={width} height={height} />
+                    width={width} height={height} aria-hidden="true" />
             );
             if (onClick != null) {
                 return (

src/components/views/avatars/RoomAvatar.js

@@ -19,7 +19,7 @@ import {ContentRepo} from "matrix-js-sdk";
 import MatrixClientPeg from "../../../MatrixClientPeg";
 import Modal from '../../../Modal';
 import sdk from "../../../index";
-import DMRoomMap from '../../../utils/DMRoomMap';
+import Avatar from '../../../Avatar';
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -89,7 +89,6 @@ module.exports = React.createClass({
                 props.resizeMethod,
             ), // highest priority
             this.getRoomAvatarUrl(props),
-            this.getOneToOneAvatar(props), // lowest priority
         ].filter(function(url) {
             return (url != null && url != "");
         });
@@ -98,41 +97,14 @@ module.exports = React.createClass({
     getRoomAvatarUrl: function(props) {
         if (!props.room) return null;
 
-        return props.room.getAvatarUrl(
-            MatrixClientPeg.get().getHomeserverUrl(),
+        return Avatar.avatarUrlForRoom(
+            props.room,
             Math.floor(props.width * window.devicePixelRatio),
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
-            false,
         );
     },
 
-    getOneToOneAvatar: function(props) {
-        const room = props.room;
-        if (!room) {
-            return null;
-        }
-        let otherMember = null;
-        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
-        if (otherUserId) {
-            otherMember = room.getMember(otherUserId);
-        } else {
-            // if the room is not marked as a 1:1, but only has max 2 members
-            // then still try to show any avatar (pref. other member)
-            otherMember = room.getAvatarFallbackMember();
-        }
-        if (otherMember) {
-            return otherMember.getAvatarUrl(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod,
-                false,
-            );
-        }
-        return null;
-    },
-
     onRoomAvatarClick: function() {
         const avatarUrl = this.props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),

src/components/views/context_menus/MessageContextMenu.js

@@ -26,8 +26,8 @@ import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
 import Resend from '../../../Resend';
 import SettingsStore from '../../../settings/SettingsStore';
-import {makeEventPermalink} from '../../../matrix-to';
 import { isUrlPermitted } from '../../../HtmlUtils';
+import { isContentActionable } from '../../../utils/EventUtils';
 
 module.exports = React.createClass({
     displayName: 'MessageContextMenu',
@@ -90,9 +90,16 @@ module.exports = React.createClass({
         this.closeMenu();
     },
 
+    e2eInfoClicked: function() {
+        this.props.e2eInfoCallback();
+        this.closeMenu();
+    },
+
     onViewSourceClick: function() {
         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,
         }, 'mx_Dialog_viewsource');
         this.closeMenu();
@@ -101,6 +108,8 @@ module.exports = React.createClass({
     onViewClearSourceClick: function() {
         const ViewSource = sdk.getComponent('structures.ViewSource');
         Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
+            roomId: this.props.mxEvent.getRoomId(),
+            eventId: this.props.mxEvent.getId(),
             // FIXME: _clearEvent is private
             content: this.props.mxEvent._clearEvent,
         }, 'mx_Dialog_viewsource');
@@ -188,14 +197,7 @@ module.exports = React.createClass({
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
             target: this.props.mxEvent,
-        });
-        this.closeMenu();
-    },
-
-    onReplyClick: function() {
-        dis.dispatch({
-            action: 'reply_to_event',
-            event: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
     },
@@ -206,7 +208,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const eventStatus = this.props.mxEvent.status;
+        const mxEvent = this.props.mxEvent;
+        const eventStatus = mxEvent.status;
         let resendButton;
         let redactButton;
         let cancelButton;
@@ -216,7 +219,6 @@ module.exports = React.createClass({
         let unhidePreviewButton;
         let externalURLButton;
         let quoteButton;
-        let replyButton;
         let collapseReplyThread;
 
         // status is SENT before remote-echo, null after
@@ -246,28 +248,19 @@ module.exports = React.createClass({
             );
         }
 
-        if (isSent && this.props.mxEvent.getType() === 'm.room.message') {
-            const content = this.props.mxEvent.getContent();
-            if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
-                forwardButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
-                        { _t('Forward Message') }
+        if (isContentActionable(mxEvent)) {
+            forwardButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
+                    { _t('Forward Message') }
+                </div>
+            );
+
+            if (this.state.canPin) {
+                pinButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                        { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
                     </div>
                 );
-
-                replyButton = (
-                    <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
-                        { _t('Reply') }
-                    </div>
-                );
-
-                if (this.state.canPin) {
-                    pinButton = (
-                        <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
-                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
-                        </div>
-                    );
-                }
             }
         }
 
@@ -277,7 +270,7 @@ module.exports = React.createClass({
             </div>
         );
 
-        if (this.props.mxEvent.getType() !== this.props.mxEvent.getWireType()) {
+        if (mxEvent.getType() !== mxEvent.getWireType()) {
             viewClearSourceButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
                     { _t('View Decrypted Source') }
@@ -295,11 +288,18 @@ module.exports = React.createClass({
             }
         }
 
+        let permalink;
+        if (this.props.permalinkCreator) {
+            permalink = this.props.permalinkCreator.forEvent(this.props.mxEvent.getId());
+        }
         // XXX: if we use room ID, we should also include a server where the event can be found (other than in the domain of the event ID)
         const permalinkButton = (
             <div className="mx_MessageContextMenu_field">
-                <a href={makeEventPermalink(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId())}
-                  target="_blank" rel="noopener" onClick={this.onPermalinkClick}>{ _t('Share Message') }</a>
+                <a href={permalink}
+                  target="_blank" rel="noopener" onClick={this.onPermalinkClick}>
+                    { mxEvent.isRedacted() || mxEvent.getType() !== 'm.room.message'
+                        ? _t('Share Permalink') : _t('Share Message') }
+                </a>
             </div>
         );
 
@@ -313,12 +313,12 @@ module.exports = React.createClass({
 
         // Bridges can provide a 'external_url' to link back to the source.
         if (
-            typeof(this.props.mxEvent.event.content.external_url) === "string" &&
-            isUrlPermitted(this.props.mxEvent.event.content.external_url)
+            typeof(mxEvent.event.content.external_url) === "string" &&
+            isUrlPermitted(mxEvent.event.content.external_url)
         ) {
             externalURLButton = (
                 <div className="mx_MessageContextMenu_field">
-                    <a href={this.props.mxEvent.event.content.external_url}
+                    <a href={mxEvent.event.content.external_url}
                       rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
                 </div>
           );
@@ -332,6 +332,13 @@ module.exports = React.createClass({
             );
         }
 
+        let e2eInfo;
+        if (this.props.e2eInfoCallback) {
+            e2eInfo = <div className="mx_MessageContextMenu_field" onClick={this.e2eInfoClicked}>
+                    { _t('End-to-end encryption information') }
+                </div>;
+        }
+
         return (
             <div className="mx_MessageContextMenu">
                 { resendButton }
@@ -344,9 +351,9 @@ module.exports = React.createClass({
                 { unhidePreviewButton }
                 { permalinkButton }
                 { quoteButton }
-                { replyButton }
                 { externalURLButton }
                 { collapseReplyThread }
+                { e2eInfo }
             </div>
         );
     },

src/components/views/context_menus/RoomTileContextMenu.js

@@ -271,6 +271,27 @@ module.exports = React.createClass({
         );
     },
 
+    _onClickSettings: function() {
+        dis.dispatch({
+            action: 'open_room_settings',
+            room_id: this.props.room.roomId,
+        });
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    _renderSettingsMenu: function() {
+        return (
+            <div>
+                <div className="mx_RoomTileContextMenu_tag_field" onClick={this._onClickSettings} >
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icons-settings-room.svg")} width="15" height="15" />
+                    { _t('Settings') }
+                </div>
+            </div>
+        );
+    },
+
     _renderLeaveMenu: function(membership) {
         if (!membership) {
             return null;
@@ -350,7 +371,11 @@ module.exports = React.createClass({
 
         // Can't set notif level or tags on non-join rooms
         if (myMembership !== 'join') {
-            return this._renderLeaveMenu(myMembership);
+            return <div>
+                { this._renderLeaveMenu(myMembership) }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderSettingsMenu() }
+            </div>;
         }
 
         return (
@@ -360,6 +385,8 @@ module.exports = React.createClass({
                 { this._renderLeaveMenu(myMembership) }
                 <hr className="mx_RoomTileContextMenu_separator" />
                 { this._renderRoomTagMenu() }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderSettingsMenu() }
             </div>
         );
     },

src/components/views/context_menus/StatusMessageContextMenu.js

@@ -25,8 +25,6 @@ export default class StatusMessageContextMenu extends React.Component {
     static propTypes = {
         // js-sdk User object. Not required because it might not exist.
         user: PropTypes.object,
-        // True when waiting for status change to complete.
-        waiting: false,
     };
 
     constructor(props, context) {
@@ -45,7 +43,7 @@ export default class StatusMessageContextMenu extends React.Component {
         user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     }
 
-    componentWillUmount() {
+    componentWillUnmount() {
         const { user } = this.props;
         if (!user) {
             return;

src/components/views/context_menus/TagTileContextMenu.js

@@ -68,7 +68,7 @@ export default class TagTileContextMenu extends React.Component {
             <hr className="mx_TagTileContextMenu_separator" />
             <div 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" />
-                { _t('Remove') }
+                { _t('Hide') }
             </div>
         </div>;
     }

src/components/views/context_menus/TopLeftMenu.js

@@ -1,5 +1,6 @@
 /*
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,34 +16,116 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import LogoutDialog from "../dialogs/LogoutDialog";
 import Modal from "../../../Modal";
+import SdkConfig from '../../../SdkConfig';
+import { getHostingLink } from '../../../utils/HostingLink';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 export class TopLeftMenu extends React.Component {
+    static propTypes = {
+        displayName: PropTypes.string.isRequired,
+        userId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func,
+
+        // Optional function to collect a reference to the container
+        // of this component directly.
+        containerRef: PropTypes.func,
+    };
+
     constructor() {
         super();
+        this.viewHomePage = this.viewHomePage.bind(this);
         this.openSettings = this.openSettings.bind(this);
+        this.signIn = this.signIn.bind(this);
         this.signOut = this.signOut.bind(this);
     }
 
+    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;
+    }
+
     render() {
-        return <div className="mx_TopLeftMenu">
-            <ul className="mx_TopLeftMenu_section">
-                <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
-            </ul>
-            <ul className="mx_TopLeftMenu_section">
-                <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
+        const isGuest = MatrixClientPeg.get().isGuest();
+
+        const hostingSignupLink = getHostingLink('user-context-menu');
+        let hostingSignup = null;
+        if (hostingSignupLink) {
+            hostingSignup = <div className="mx_TopLeftMenu_upgradeLink">
+                {_t(
+                    "<a>Upgrade</a> to your own domain", {},
+                    {
+                        a: sub => <a href={hostingSignupLink} target="_blank" rel="noopener" tabIndex="0">{sub}</a>,
+                    },
+                )}
+                <a href={hostingSignupLink} target="_blank" rel="noopener" aria-hidden={true}>
+                    <img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
+                </a>
+            </div>;
+        }
+
+        let homePageItem = null;
+        if (this.hasHomePage()) {
+            homePageItem = <li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage} tabIndex={0}>
+                {_t("Home")}
+            </li>;
+        }
+
+        let signInOutItem;
+        if (isGuest) {
+            signInOutItem = <li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn} tabIndex={0}>
+                {_t("Sign in")}
+            </li>;
+        } else {
+            signInOutItem = <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut} tabIndex={0}>
+                {_t("Sign out")}
+            </li>;
+        }
+
+        const settingsItem = <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings} tabIndex={0}>
+            {_t("Settings")}
+        </li>;
+
+        return <div className="mx_TopLeftMenu mx_HiddenFocusable" tabIndex={0} ref={this.props.containerRef}>
+            <div className="mx_TopLeftMenu_section_noIcon" aria-readonly={true}>
+                <div>{this.props.displayName}</div>
+                <div className="mx_TopLeftMenu_greyedText" aria-hidden={true}>{this.props.userId}</div>
+                {hostingSignup}
+            </div>
+            <ul className="mx_TopLeftMenu_section_withIcon">
+                {homePageItem}
+                {settingsItem}
+                {signInOutItem}
             </ul>
         </div>;
     }
 
+    viewHomePage() {
+        dis.dispatch({action: 'view_home_page'});
+        this.closeMenu();
+    }
+
     openSettings() {
         dis.dispatch({action: 'view_user_settings'});
         this.closeMenu();
     }
 
+    signIn() {
+        dis.dispatch({action: 'start_login'});
+        this.closeMenu();
+    }
+
     signOut() {
         Modal.createTrackedDialog('Logout E2E Export', '', LogoutDialog);
         this.closeMenu();

src/components/views/dialogs/AddressPickerDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 2018 New Vector Ltd
+Copyright 2017, 2018, 2019 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.
@@ -566,7 +566,7 @@ module.exports = React.createClass({
                 rows="1"
                 id="textinput"
                 ref="textinput"
-                className="mx_ChatInviteDialog_input"
+                className="mx_AddressPickerDialog_input"
                 onChange={this.onQueryChanged}
                 placeholder={this.props.placeholder}
                 defaultValue={this.props.value}
@@ -578,7 +578,7 @@ module.exports = React.createClass({
         let addressSelector;
         if (this.state.error) {
             const validTypeDescriptions = this.props.validAddressTypes.map((t) => _t(addressTypeName[t]));
-            error = <div className="mx_ChatInviteDialog_error">
+            error = <div className="mx_AddressPickerDialog_error">
                 { _t("You have entered an invalid address.") }
                 <br />
                 { _t("Try using one of the following valid address types: %(validTypesList)s.", {
@@ -586,9 +586,9 @@ module.exports = React.createClass({
                 }) }
             </div>;
         } else if (this.state.searchError) {
-            error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
+            error = <div className="mx_AddressPickerDialog_error">{ this.state.searchError }</div>;
         } else if (this.state.query.length > 0 && filteredSuggestedList.length === 0 && !this.state.busy) {
-            error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
+            error = <div className="mx_AddressPickerDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
@@ -601,13 +601,13 @@ module.exports = React.createClass({
         }
 
         return (
-            <BaseDialog className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}
+            <BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
                 onFinished={this.props.onFinished} title={this.props.title}>
-                <div className="mx_ChatInviteDialog_label">
+                <div className="mx_AddressPickerDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
                 <div className="mx_Dialog_content">
-                    <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
+                    <div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
                     { error }
                     { addressSelector }
                     { this.props.extraNode }

src/components/views/dialogs/BaseDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -55,6 +55,11 @@ export default React.createClass({
         // CSS class to apply to dialog div
         className: PropTypes.string,
 
+        // if true, dialog container is 60% of the viewport width. Otherwise,
+        // the container will have no fixed size, allowing its contents to
+        // determine its size. Default: true.
+        fixedWidth: PropTypes.bool,
+
         // Title for the dialog.
         title: PropTypes.node.isRequired,
 
@@ -72,6 +77,7 @@ export default React.createClass({
     getDefaultProps: function() {
         return {
             hasCancel: true,
+            fixedWidth: true,
         };
     },
 
@@ -113,7 +119,10 @@ export default React.createClass({
 
         return (
             <FocusTrap onKeyDown={this._onKeyDown}
-                className={this.props.className}
+                className={classNames({
+                    [this.props.className]: true,
+                    'mx_Dialog_fixedWidth': this.props.fixedWidth,
+                })}
                 role="dialog"
                 aria-labelledby='mx_BaseDialog_title'
                 // This should point to a node describing the dialog.
@@ -131,8 +140,8 @@ export default React.createClass({
                         { this.props.title }
                     </div>
                     { this.props.headerButton }
+                    { cancelButton }
                 </div>
-                { cancelButton }
                 { this.props.children }
             </FocusTrap>
         );

src/components/views/dialogs/BugReportDialog.js

@@ -108,6 +108,7 @@ export default class BugReportDialog extends React.Component {
         const Loader = sdk.getComponent("elements.Spinner");
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Field = sdk.getComponent('elements.Field');
 
         let error = null;
         if (this.state.err) {
@@ -154,36 +155,29 @@ export default class BugReportDialog extends React.Component {
                             },
                         ) }
                     </b></p>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_issueUrl"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("What GitHub issue are these logs for?") }
-                        </label>
-                        <input
-                            id="mx_BugReportDialog_issueUrl"
-                            type="text"
-                            className="mx_BugReportDialog_field_input"
-                            onChange={this._onIssueUrlChange}
-                            value={this.state.issueUrl}
-                            placeholder="https://github.com/vector-im/riot-web/issues/..."
-                        />
-                    </div>
-                    <div className="mx_BugReportDialog_field_container">
-                        <label
-                            htmlFor="mx_BugReportDialog_notes_label"
-                            className="mx_BugReportDialog_field_label"
-                        >
-                            { _t("Notes:") }
-                        </label>
-                        <textarea
-                            className="mx_BugReportDialog_field_input"
-                            rows={5}
-                            onChange={this._onTextChange}
-                            value={this.state.text}
-                        />
-                    </div>
+                    <Field
+                        id="mx_BugReportDialog_issueUrl"
+                        type="text"
+                        className="mx_BugReportDialog_field_input"
+                        label={_t("GitHub issue")}
+                        onChange={this._onIssueUrlChange}
+                        value={this.state.issueUrl}
+                        placeholder="https://github.com/vector-im/riot-web/issues/..."
+                    />
+                    <Field
+                        className="mx_BugReportDialog_field_input"
+                        element="textarea"
+                        label={_t("Notes")}
+                        rows={5}
+                        onChange={this._onTextChange}
+                        value={this.state.text}
+                        placeholder={_t(
+                            "If there is additional context that would help in " +
+                            "analysing the issue, such as what you were doing at " +
+                            "the time, room IDs, user IDs, etc., " +
+                            "please include those things here.",
+                        )}
+                    />
                     {progress}
                     {error}
                 </div>

src/components/views/dialogs/ChangelogDialog.js

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

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -21,7 +21,7 @@ import sdk from '../../../index';
 import Analytics from '../../../Analytics';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import * as Lifecycle from '../../../Lifecycle';
-import Velocity from 'velocity-vector';
+import Velocity from 'velocity-animate';
 import { _t } from '../../../languageHandler';
 
 export default class DeactivateAccountDialog extends React.Component {

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -22,7 +22,6 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
-import SettingsStore from '../../../settings/SettingsStore';
 import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
 
 const MODE_LEGACY = 'legacy';
@@ -48,7 +47,7 @@ export default class DeviceVerifyDialog extends React.Component {
         this._showSasEvent = null;
         this.state = {
             phase: PHASE_START,
-            mode: SettingsStore.isFeatureEnabled("feature_sas") ? MODE_SAS : MODE_LEGACY,
+            mode: MODE_SAS,
             sasVerified: false,
         };
     }
@@ -61,6 +60,11 @@ export default class DeviceVerifyDialog extends React.Component {
     }
 
     _onSwitchToLegacyClick = () => {
+        if (this._verifier) {
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier.cancel('User cancel');
+            this._verifier = null;
+        }
         this.setState({mode: MODE_LEGACY});
     }
 
@@ -185,11 +189,21 @@ export default class DeviceVerifyDialog extends React.Component {
 
     _renderSasVerificationPhaseWaitAccept() {
         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>
         );
     }
@@ -241,7 +255,7 @@ export default class DeviceVerifyDialog extends React.Component {
                         "and ask them whether the key they see in their User Settings " +
                         "for this device matches the key below:") }
                 </p>
-                <div className="mx_UserSettings_cryptoSection">
+                <div className="mx_DeviceVerifyDialog_cryptoSection">
                     <ul>
                         <li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
                         <li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>

src/components/views/dialogs/DevtoolsDialog.js

@@ -20,6 +20,7 @@ import sdk from '../../../index';
 import SyntaxHighlight from '../elements/SyntaxHighlight';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import Field from "../elements/Field";
 
 class DevtoolsComponent extends React.Component {
     static contextTypes = {
@@ -56,14 +57,8 @@ class GenericEditor extends DevtoolsComponent {
     }
 
     textInput(id, label) {
-        return <div className="mx_DevTools_inputRow">
-            <div className="mx_DevTools_inputLabelCell">
-                <label htmlFor={id}>{ label }</label>
-            </div>
-            <div className="mx_DevTools_inputCell">
-                <input id={id} className="mx_TextInputDialog_input" onChange={this._onChange} value={this.state[id]} size="32" autoFocus={true} />
-            </div>
-        </div>;
+        return <Field id={id} label={label} size="42" autoFocus={true} type="text" autoComplete="on"
+                      value={this.state[id]} onChange={this._onChange} />;
     }
 }
 
@@ -133,17 +128,15 @@ class SendCustomEvent extends GenericEditor {
 
         return <div>
             <div className="mx_DevTools_content">
-                { this.textInput('eventType', _t('Event Type')) }
-                { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
+                <div className="mx_DevTools_eventTypeStateKeyGroup">
+                    { this.textInput('eventType', _t('Event Type')) }
+                    { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
+                </div>
 
                 <br />
 
-                <div className="mx_DevTools_inputLabelCell">
-                    <label htmlFor="evContent"> { _t('Event Content') } </label>
-                </div>
-                <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
-                </div>
+                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
+                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -223,12 +216,8 @@ class SendAccountData extends GenericEditor {
                 { this.textInput('eventType', _t('Event Type')) }
                 <br />
 
-                <div className="mx_DevTools_inputLabelCell">
-                    <label htmlFor="evContent"> { _t('Event Content') } </label>
-                </div>
-                <div>
-                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
-                </div>
+                <Field id="evContent" label={_t("Event Content")} type="text" className="mx_DevTools_textarea"
+                       autoComplete="off" value={this.state.evContent} onChange={this._onChange} element="textarea" />
             </div>
             <div className="mx_Dialog_buttons">
                 <button onClick={this.onBack}>{ _t('Back') }</button>
@@ -302,14 +291,12 @@ class FilteredList extends React.Component {
     render() {
         const TruncatedList = sdk.getComponent("elements.TruncatedList");
         return <div>
-            <input size="64"
-                   autoFocus={true}
-                   onChange={this.onQuery}
-                   value={this.props.query}
-                   placeholder={_t('Filter results')}
+            <Field id="DevtoolsDialog_FilteredList_filter" label={_t('Filter results')} autoFocus={true} size={64}
+                   type="text" autoComplete="off" value={this.props.query} onChange={this.onQuery}
                    className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
                    // force re-render so that autoFocus is applied when this component is re-used
                    key={this.props.children[0] ? this.props.children[0].key : ''} />
+
             <TruncatedList getChildren={this.getChildren}
                            getChildCount={this.getChildCount}
                            truncateAt={this.state.truncateAt}
@@ -566,11 +553,53 @@ class AccountDataExplorer extends DevtoolsComponent {
     }
 }
 
+class ServersInRoomList extends DevtoolsComponent {
+    static getLabel() { return _t('View Servers in Room'); }
+
+    static propTypes = {
+        onBack: PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        const room = MatrixClientPeg.get().getRoom(this.context.roomId);
+        const servers = new Set();
+        room.currentState.getStateEvents("m.room.member").forEach(ev => servers.add(ev.getSender().split(":")[1]));
+        this.servers = Array.from(servers).map(s =>
+            <button key={s} className="mx_DevTools_ServersInRoomList_button">
+                { s }
+            </button>);
+
+        this.state = {
+            query: '',
+        };
+    }
+
+    onQuery = (query) => {
+        this.setState({ query });
+    }
+
+    render() {
+        return <div>
+            <div className="mx_Dialog_content">
+                <FilteredList query={this.state.query} onChange={this.onQuery}>
+                    { this.servers }
+                </FilteredList>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.props.onBack}>{ _t('Back') }</button>
+            </div>
+        </div>;
+    }
+}
+
 const Entries = [
     SendCustomEvent,
     RoomStateExplorer,
     SendAccountData,
     AccountDataExplorer,
+    ServersInRoomList,
 ];
 
 export default class DevtoolsDialog extends React.Component {

src/components/views/dialogs/IncomingSasDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
@@ -37,9 +38,12 @@ export default class IncomingSasDialog extends React.Component {
         this.state = {
             phase: PHASE_START,
             sasVerified: false,
+            opponentProfile: null,
+            opponentProfileError: null,
         };
         this.props.verifier.on('show_sas', this._onVerifierShowSas);
         this.props.verifier.on('cancel', this._onVerifierCancel);
+        this._fetchOpponentProfile();
     }
 
     componentWillUnmount() {
@@ -49,6 +53,21 @@ export default class IncomingSasDialog extends React.Component {
         this.props.verifier.removeListener('show_sas', this._onVerifierShowSas);
     }
 
+    async _fetchOpponentProfile() {
+        try {
+            const prof = await MatrixClientPeg.get().getProfileInfo(
+                this.props.verifier.userId,
+            );
+            this.setState({
+                opponentProfile: prof,
+            });
+        } catch (e) {
+            this.setState({
+                opponentProfileError: e,
+            });
+        }
+    }
+
     _onFinished = () => {
         this.props.onFinished(this.state.phase === PHASE_VERIFIED);
     }
@@ -93,10 +112,39 @@ export default class IncomingSasDialog extends React.Component {
 
     _renderPhaseStart() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Spinner = sdk.getComponent("views.elements.Spinner");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+
+        let profile;
+        if (this.state.opponentProfile) {
+            profile = <div className="mx_IncomingSasDialog_opponentProfile">
+                <BaseAvatar name={this.state.opponentProfile.displayname}
+                    idName={this.props.verifier.userId}
+                    url={MatrixClientPeg.get().mxcUrlToHttp(
+                        this.state.opponentProfile.avatar_url,
+                        Math.floor(48 * window.devicePixelRatio),
+                        Math.floor(48 * window.devicePixelRatio),
+                        'crop',
+                    )}
+                    width={48} height={48} resizeMethod='crop'
+                />
+                <h2>{this.state.opponentProfile.displayname}</h2>
+            </div>;
+        } else if (this.state.opponentProfileError) {
+            profile = <div>
+                <BaseAvatar name={this.props.verifier.userId.slice(1)}
+                    idName={this.props.verifier.userId}
+                    width={48} height={48}
+                />
+                <h2>{this.props.verifier.userId}</h2>
+            </div>;
+        } else {
+            profile = <Spinner />;
+        }
 
         return (
             <div>
-                <h2>{this.props.verifier.userId}</h2>
+                {profile}
                 <p>{_t(
                     "Verify this user to mark them as trusted. " +
                     "Trusting users gives you extra peace of mind when using " +

src/components/views/dialogs/InfoDialog.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd.
+Copyright 2019 Bastian Masanek, Noxware IT <matrix@noxware.de>
+
+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 sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default React.createClass({
+    displayName: 'InfoDialog',
+    propTypes: {
+        title: PropTypes.string,
+        description: PropTypes.node,
+        button: PropTypes.string,
+        onFinished: PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            title: '',
+            description: '',
+        };
+    },
+
+    onFinished: function() {
+        this.props.onFinished();
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return (
+            <BaseDialog className="mx_InfoDialog" onFinished={this.props.onFinished}
+                title={this.props.title}
+                contentId='mx_Dialog_content'
+                hasCancel={false}
+            >
+                <div className="mx_Dialog_content" id="mx_Dialog_content">
+                    { this.props.description }
+                </div>
+                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                    onPrimaryButtonClick={this.onFinished}
+                    hasCancel={false}
+                >
+                </DialogButtons>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -77,7 +77,7 @@ export default React.createClass({
                     <div role="alert">{ this.state.authError.message || this.state.authError.toString() }</div>
                     <br />
                     <AccessibleButton onClick={this._onDismissClick}
-                        className="mx_UserSettings_button"
+                        className="mx_GeneralButton"
                         autoFocus="true"
                     >
                         { _t("Dismiss") }

src/components/views/dialogs/LogoutDialog.js

@@ -20,9 +20,12 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import SettingsStore from "../../../settings/SettingsStore";
 
 export default class LogoutDialog extends React.Component {
+    defaultProps = {
+        onFinished: function() {},
+    }
+
     constructor() {
         super();
         this._onSettingsLinkClick = this._onSettingsLinkClick.bind(this);
@@ -30,13 +33,39 @@ export default class LogoutDialog extends React.Component {
         this._onFinished = this._onFinished.bind(this);
         this._onSetRecoveryMethodClick = this._onSetRecoveryMethodClick.bind(this);
         this._onLogoutConfirm = this._onLogoutConfirm.bind(this);
+
+        const shouldLoadBackupStatus = !MatrixClientPeg.get().getKeyBackupEnabled();
+
+        this.state = {
+            loading: shouldLoadBackupStatus,
+            backupInfo: null,
+            error: null,
+        };
+
+        if (shouldLoadBackupStatus) {
+            this._loadBackupStatus();
+        }
+    }
+
+    async _loadBackupStatus() {
+        try {
+            const backupInfo = await MatrixClientPeg.get().getKeyBackupVersion();
+            this.setState({
+                loading: false,
+                backupInfo,
+            });
+        } catch (e) {
+            console.log("Unable to fetch key backup status", e);
+            this.setState({
+                loading: false,
+                error: e,
+            });
+        }
     }
 
     _onSettingsLinkClick() {
         // close dialog
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
+        this.props.onFinished();
     }
 
     _onExportE2eKeysClicked() {
@@ -53,112 +82,102 @@ export default class LogoutDialog extends React.Component {
             dis.dispatch({action: 'logout'});
         }
         // close dialog
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
+        this.props.onFinished();
     }
 
     _onSetRecoveryMethodClick() {
-        Modal.createTrackedDialogAsync('Key Backup', 'Key Backup',
-            import('../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog'),
-        );
+        if (this.state.backupInfo) {
+            // A key backup exists for this account, but the creating device is not
+            // verified, so restore the backup which will give us the keys from it and
+            // allow us to trust it (ie. upload keys to it)
+            const RestoreKeyBackupDialog = sdk.getComponent('dialogs.keybackup.RestoreKeyBackupDialog');
+            Modal.createTrackedDialog('Restore Backup', '', RestoreKeyBackupDialog, {});
+        } else {
+            Modal.createTrackedDialogAsync("Key Backup", "Key Backup",
+                import("../../../async-components/views/dialogs/keybackup/CreateKeyBackupDialog"),
+            );
+        }
 
         // close dialog
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
+        this.props.onFinished();
     }
 
     _onLogoutConfirm() {
         dis.dispatch({action: 'logout'});
 
         // close dialog
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
+        this.props.onFinished();
     }
 
     render() {
-        let description;
-        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
-            description = <div>
-                <p>{_t(
-                    "When you log out, you'll lose your secure message history. To prevent " +
-                    "this, set up a recovery method.",
-                )}</p>
-                <p>{_t(
-                    "Alternatively, advanced users can also manually export encryption keys in " +
-                    "<a>Settings</a> before logging out.", {},
-                    {
-                        a: sub => <a href='#/settings' onClick={this._onSettingsLinkClick}>{sub}</a>,
-                    },
-                )}</p>
-            </div>;
-        } else {
-            description = <div>{_t(
-                "For security, logging out will delete any end-to-end " +
-                "encryption keys from this browser. If you want to be able " +
-                "to decrypt your conversation history from future Riot sessions, " +
-                "please export your room keys for safe-keeping.",
-            )}</div>;
-        }
+        const description = <div>
+            <p>{_t(
+                "Encrypted messages are secured with end-to-end encryption. " +
+                "Only you and the recipient(s) have the keys to read these messages.",
+            )}</p>
+            <p>{_t("Back up your keys before signing out to avoid losing them.")}</p>
+        </div>;
 
-        if (SettingsStore.isFeatureEnabled("feature_keybackup")) {
-            if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
-                const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        if (!MatrixClientPeg.get().getKeyBackupEnabled()) {
+            const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
+            let dialogContent;
+            if (this.state.loading) {
+                const Spinner = sdk.getComponent('views.elements.Spinner');
+
+                dialogContent = <Spinner />;
+            } else {
                 const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
-                // Not quite a standard question dialog as the primary button cancels
-                // the action and does something else instead, whilst non-default button
-                // confirms the action.
-                return (<BaseDialog
-                    title={_t("Warning!")}
-                    contentId='mx_Dialog_content'
-                    hasCancel={false}
-                    onFinsihed={this._onFinished}
-                >
+                let setupButtonCaption;
+                if (this.state.backupInfo) {
+                    setupButtonCaption = _t("Connect this device to Key Backup");
+                } else {
+                    // if there's an error fetching the backup info, we'll just assume there's
+                    // no backup for the purpose of the button caption
+                    setupButtonCaption = _t("Start using Key Backup");
+                }
+
+                dialogContent = <div>
                     <div className="mx_Dialog_content" id='mx_Dialog_content'>
                         { description }
                     </div>
-                    <DialogButtons primaryButton={_t('Set a Recovery Method')}
+                    <DialogButtons primaryButton={setupButtonCaption}
                         hasCancel={false}
                         onPrimaryButtonClick={this._onSetRecoveryMethodClick}
                         focus={true}
                     >
                         <button onClick={this._onLogoutConfirm}>
-                            {_t("I understand, log out without")}
+                            {_t("I don't want my encrypted messages")}
                         </button>
                     </DialogButtons>
-                </BaseDialog>);
-            } else {
-                const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
-                return (<QuestionDialog
-                    hasCancelButton={true}
-                    title={_t("Sign out")}
-                    // TODO: This is made up by me and would need to also mention verifying
-                    // once you can restorew a backup by verifying a device
-                    description={_t(
-                        "When signing in again, you can access encrypted chat history by " +
-                        "restoring your key backup. You'll need your recovery passphrase " +
-                        "or, if you didn't set a recovery passphrase, your recovery key " +
-                        "(that you downloaded).",
-                    )}
-                    button={_t("Sign out")}
-                    onFinished={this._onFinished}
-                />);
+                    <details>
+                        <summary>{_t("Advanced")}</summary>
+                        <p><button onClick={this._onExportE2eKeysClicked}>
+                            {_t("Manually export keys")}
+                        </button></p>
+                    </details>
+                </div>;
             }
+            // Not quite a standard question dialog as the primary button cancels
+            // the action and does something else instead, whilst non-default button
+            // confirms the action.
+            return (<BaseDialog
+                title={_t("You'll lose access to your encrypted messages")}
+                contentId='mx_Dialog_content'
+                hasCancel={true}
+                onFinished={this._onFinished}
+            >
+                {dialogContent}
+            </BaseDialog>);
         } else {
             const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
             return (<QuestionDialog
                 hasCancelButton={true}
                 title={_t("Sign out")}
-                description={description}
+                description={_t(
+                    "Are you sure you want to sign out?",
+                )}
                 button={_t("Sign out")}
-                extraButtons={[
-                    (<button key="export" className="mx_Dialog_primary"
-                            onClick={this._onExportE2eKeysClicked}>
-                       { _t("Export E2E room keys") }
-                    </button>),
-                ]}
                 onFinished={this._onFinished}
             />);
         }

src/components/views/dialogs/RedesignFeedbackDialog.js

@@ -20,14 +20,12 @@ import { _t } from '../../../languageHandler';
 
 export default (props) => {
     const existingIssuesUrl = "https://github.com/vector-im/riot-web/issues" +
-        "?q=is%3Aopen+is%3Aissue+label%3Aredesign+sort%3Areactions-%2B1-desc";
-    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new" +
-        "?assignees=&labels=redesign&template=redesign_issue.md&title=";
+        "?q=is%3Aopen+is%3Aissue+sort%3Areactions-%2B1-desc";
+    const newIssueUrl = "https://github.com/vector-im/riot-web/issues/new";
 
     const description1 =
-        _t("Thanks for testing the Riot Redesign. " +
-            "If you run into any bugs or visual issues, " +
-            "please let us know on GitHub.");
+        _t("If you run into any bugs or have feedback you'd like to share, " +
+           "please let us know on GitHub.");
     const description2 = _t("To help avoid duplicate issues, " +
         "please <existingIssuesLink>view existing issues</existingIssuesLink> " +
         "first (and add a +1) or <newIssueLink>create a new issue</newIssueLink> " +

src/components/views/dialogs/RoomSettingsDialog.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -18,28 +19,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
-import AdvancedRoomSettingsTab from "../settings/tabs/AdvancedRoomSettingsTab";
-import dis from '../../../dispatcher';
-import RolesRoomSettingsTab from "../settings/tabs/RolesRoomSettingsTab";
-import GeneralRoomSettingsTab from "../settings/tabs/GeneralRoomSettingsTab";
-import SecurityRoomSettingsTab from "../settings/tabs/SecurityRoomSettingsTab";
+import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
+import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
+import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
+import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
 import sdk from "../../../index";
-
-// TODO: Ditch this whole component
-export class TempTab extends React.Component {
-    static propTypes = {
-        onClose: PropTypes.func.isRequired,
-    };
-
-    componentDidMount(): void {
-        dis.dispatch({action: "open_old_room_settings"});
-        this.props.onClose();
-    }
-
-    render() {
-        return <div>Hello World</div>;
-    }
-}
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import dis from "../../../dispatcher";
 
 export default class RoomSettingsDialog extends React.Component {
     static propTypes = {
@@ -47,17 +33,20 @@ export default class RoomSettingsDialog extends React.Component {
         onFinished: PropTypes.func.isRequired,
     };
 
-    componentWillMount(): void {
-        this.dispatcherRef = dis.register(this._onAction);
+    componentWillMount() {
+        this._dispatcherRef = dis.register(this._onAction);
     }
 
-    componentWillUnmount(): void {
-        dis.unregister(this.dispatcherRef);
+    componentWillUnmount() {
+        dis.unregister(this._dispatcherRef);
     }
 
     _onAction = (payload) => {
-        if (payload.action !== 'close_room_settings') return;
-        this.props.onFinished();
+        // When room changes below us, close the room settings
+        // whilst the modal is open this can only be triggered when someone hits Leave Room
+        if (payload.action === 'view_next_room') {
+            this.props.onFinished();
+        }
     };
 
     _getTabs() {
@@ -81,13 +70,8 @@ export default class RoomSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Advanced"),
             "mx_RoomSettingsDialog_warningIcon",
-            <AdvancedRoomSettingsTab roomId={this.props.roomId} />,
+            <AdvancedRoomSettingsTab roomId={this.props.roomId} closeSettingsFn={this.props.onFinished} />,
         ));
-        // tabs.push(new Tab(
-        //     _td("Visit old settings"),
-        //     "mx_RoomSettingsDialog_warningIcon",
-        //     <TempTab onClose={this.props.onFinished} />,
-        // ));
 
         return tabs;
     }
@@ -95,9 +79,10 @@ export default class RoomSettingsDialog extends React.Component {
     render() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
+        const roomName = MatrixClientPeg.get().getRoom(this.props.roomId).name;
         return (
             <BaseDialog className='mx_RoomSettingsDialog' hasCancel={true}
-                        onFinished={this.props.onFinished} title={_t("Room Settings")}>
+                        onFinished={this.props.onFinished} title={_t("Room Settings - %(roomName)s", {roomName})}>
                 <div className='ms_SettingsDialog_content'>
                     <TabbedView tabs={this._getTabs()} />
                 </div>

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -47,7 +47,9 @@ export default React.createClass({
 
     _onUpgradeClick: function() {
         this.setState({busy: true});
-        MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).catch((err) => {
+        MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).then(() => {
+            this.props.onFinished(true);
+        }).catch((err) => {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Failed to upgrade room', '', ErrorDialog, {
                 title: _t("Failed to upgrade room"),
@@ -82,10 +84,9 @@ export default React.createClass({
 
         return (
             <BaseDialog className="mx_RoomUpgradeDialog"
-                onFinished={this.onCancelled}
+                onFinished={this.props.onFinished}
                 title={_t("Upgrade Room Version")}
                 contentId='mx_Dialog_content'
-                onFinished={this.props.onFinished}
                 hasCancel={true}
             >
                 <p>

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -41,7 +41,7 @@ export default React.createClass({
         Modal.createTrackedDialog('Session Restore Confirm Logout', '', QuestionDialog, {
             title: _t("Sign out"),
             description:
-                <div>{ _t("Log out and remove encryption keys?") }</div>,
+                <div>{ _t("Sign out and remove encryption keys?") }</div>,
             button: _t("Sign out"),
             danger: true,
             onFinished: this.props.onFinished,

src/components/views/dialogs/SetMxIdDialog.js

@@ -115,7 +115,7 @@ export default React.createClass({
         // user ID roughly looks okay from a Matrix perspective.
         if (!SAFE_LOCALPART_REGEX.test(this.state.username)) {
             this.setState({
-                usernameError: _t("Only use lower case letters, numbers and '=_-./'"),
+                usernameError: _t("A username can only contain lower case letters, numbers and '=_-./'"),
             });
             return Promise.reject();
         }

src/components/views/dialogs/ShareDialog.js

@@ -20,7 +20,7 @@ import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import QRCode from 'qrcode-react';
-import {makeEventPermalink, makeGroupPermalink, makeRoomPermalink, makeUserPermalink} from "../../../matrix-to";
+import {RoomPermalinkCreator, makeGroupPermalink, makeUserPermalink} from "../../../matrix-to";
 import * as ContextualMenu from "../../structures/ContextualMenu";
 
 const socials = [
@@ -114,7 +114,8 @@ export default class ShareDialog extends React.Component {
             top: y,
             message: successful ? _t('Copied!') : _t('Failed to copy'),
         }, false);
-        e.target.onmouseleave = close;
+        // Drop a reference to this close handler for componentWillUnmount
+        this.closeCopiedTooltip = e.target.onmouseleave = close;
     }
 
     onLinkSpecificEventCheckboxClick() {
@@ -123,6 +124,20 @@ 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;
         let matrixToUrl;
@@ -146,9 +161,9 @@ export default class ShareDialog extends React.Component {
             }
 
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = makeEventPermalink(this.props.target.roomId, events[events.length - 1].getId());
+                matrixToUrl = this.state.permalinkCreator.forEvent(events[events.length - 1].getId());
             } else {
-                matrixToUrl = makeRoomPermalink(this.props.target.roomId);
+                matrixToUrl = this.state.permalinkCreator.forRoom();
             }
         } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
             title = _t('Share User');
@@ -169,9 +184,9 @@ export default class ShareDialog extends React.Component {
             </div>;
 
             if (this.state.linkSpecificEvent) {
-                matrixToUrl = makeEventPermalink(this.props.target.getRoomId(), this.props.target.getId());
+                matrixToUrl = this.props.permalinkCreator.forEvent(this.props.target.getId());
             } else {
-                matrixToUrl = makeRoomPermalink(this.props.target.getRoomId());
+                matrixToUrl = this.props.permalinkCreator.forRoom();
             }
         }
 

src/components/views/dialogs/StorageEvictedDialog.js

@@ -0,0 +1,77 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+import sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+
+export default class StorageEvictedDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _sendBugReport = ev => {
+        ev.preventDefault();
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        Modal.createTrackedDialog('Storage evicted', 'Send Bug Report Dialog', BugReportDialog, {});
+    };
+
+    _onSignOutClick = () => {
+        this.props.onFinished(true);
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let logRequest;
+        if (SdkConfig.get().bug_report_endpoint_url) {
+            logRequest = _t(
+                "To help us prevent this in future, please <a>send us logs</a>.", {},
+            {
+                a: text => <a href="#" onClick={this._sendBugReport}>{text}</a>,
+            });
+        }
+
+        return (
+            <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
+                title={_t('Missing session data')}
+                contentId='mx_Dialog_content'
+                hasCancel={false}
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    <p>{_t(
+                        "Some session data, including encrypted message keys, is " +
+                        "missing. Sign out and sign in to fix this, restoring keys " +
+                        "from backup.",
+                    )}</p>
+                    <p>{_t(
+                        "Your browser likely removed this data when running low on " +
+                        "disk space.",
+                    )} {logRequest}</p>
+                </div>
+                <DialogButtons primaryButton={_t("Sign out")}
+                    onPrimaryButtonClick={this._onSignOutClick}
+                    focus={true}
+                    hasCancel={false}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -25,35 +25,12 @@ import { _t } from '../../../languageHandler';
 import SettingsStore from "../../../settings/SettingsStore";
 import { markAllDevicesKnown } from '../../../cryptodevices';
 
-function DeviceListEntry(props) {
-    const {userId, device} = props;
-
-    const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-
-    return (
-        <li>
-            { device.deviceId }
-            <DeviceVerifyButtons device={device} userId={userId} />
-            <br />
-            { device.getDisplayName() }
-        </li>
-    );
-}
-
-DeviceListEntry.propTypes = {
-    userId: PropTypes.string.isRequired,
-
-    // deviceinfo
-    device: PropTypes.object.isRequired,
-};
-
-
 function UserUnknownDeviceList(props) {
+    const MemberDeviceInfo = sdk.getComponent('rooms.MemberDeviceInfo');
     const {userId, userDevices} = props;
 
     const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-       <DeviceListEntry key={deviceId} userId={userId}
-           device={userDevices[deviceId]} />,
+        <li key={deviceId}><MemberDeviceInfo device={userDevices[deviceId]} userId={userId} showDeviceId={true} /></li>,
     );
 
     return (

src/components/views/dialogs/UploadConfirmDialog.js

@@ -0,0 +1,107 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+export default class UploadConfirmDialog extends React.Component {
+    static propTypes = {
+        file: PropTypes.object.isRequired,
+        currentIndex: PropTypes.number,
+        totalFiles: PropTypes.number,
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    static defaultProps = {
+        totalFiles: 1,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this._objectUrl = URL.createObjectURL(props.file);
+    }
+
+    componentWillUnmount() {
+        if (this._objectUrl) URL.revokeObjectURL(this._objectUrl);
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    _onUploadClick = () => {
+        this.props.onFinished(true);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let title;
+        if (this.props.totalFiles > 1 && this.props.currentIndex !== undefined) {
+            title = _t(
+                "Upload files (%(current)s of %(total)s)",
+                {
+                    current: this.props.currentIndex + 1,
+                    total: this.props.totalFiles,
+                },
+            );
+        } else {
+            title = _t('Upload files');
+        }
+
+        let preview;
+        if (this.props.file.type.startsWith('image/')) {
+            preview = <div className="mx_UploadConfirmDialog_previewOuter">
+                <div className="mx_UploadConfirmDialog_previewInner">
+                    <div><img className="mx_UploadConfirmDialog_imagePreview" src={this._objectUrl} /></div>
+                    <div>{this.props.file.name}</div>
+                </div>
+            </div>;
+        } else {
+            preview = <div>
+                <div>
+                    <img className="mx_UploadConfirmDialog_fileIcon"
+                        src={require("../../../../res/img/files.png")}
+                    />
+                    {this.props.file.name}
+                </div>
+            </div>;
+        }
+
+        return (
+            <BaseDialog className='mx_UploadConfirmDialog'
+                fixedWidth={false}
+                onFinished={this._onCancelClick}
+                title={title}
+                contentId='mx_Dialog_content'
+            >
+                <div id='mx_Dialog_content'>
+                    {preview}
+                </div>
+
+                <DialogButtons primaryButton={_t('Upload')}
+                    hasCancel={false}
+                    onPrimaryButtonClick={this._onUploadClick}
+                    focus={true}
+                />
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/UploadFailureDialog.js

@@ -0,0 +1,120 @@
+/*
+Copyright 2019 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 filesize from 'filesize';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import ContentMessages from '../../../ContentMessages';
+
+/*
+ * Tells the user about files we know cannot be uploaded before we even try uploading
+ * them. This is named fairly generically but the only thing we check right now is
+ * the size of the file.
+ */
+export default class UploadFailureDialog extends React.Component {
+    static propTypes = {
+        badFiles: PropTypes.arrayOf(PropTypes.object).isRequired,
+        totalFiles: PropTypes.number.isRequired,
+        contentMessages: PropTypes.instanceOf(ContentMessages).isRequired,
+        onFinished: PropTypes.func.isRequired,
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    _onUploadClick = () => {
+        this.props.onFinished(true);
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let message;
+        let preview;
+        let buttons;
+        if (this.props.totalFiles === 1 && this.props.badFiles.length === 1) {
+            message = _t(
+                "This file is <b>too large</b> to upload. " +
+                "The file size limit is %(limit)s but this file is %(sizeOfThisFile)s.",
+                {
+                    limit: filesize(this.props.contentMessages.getUploadLimit()),
+                    sizeOfThisFile: filesize(this.props.badFiles[0].size),
+                }, {
+                    b: sub => <b>{sub}</b>,
+                },
+            );
+            buttons = <DialogButtons primaryButton={_t('OK')}
+                hasCancel={false}
+                onPrimaryButtonClick={this._onCancelClick}
+                focus={true}
+            />;
+        } else if (this.props.totalFiles === this.props.badFiles.length) {
+            message = _t(
+                "These files are <b>too large</b> to upload. " +
+                "The file size limit is %(limit)s.",
+                {
+                    limit: filesize(this.props.contentMessages.getUploadLimit()),
+                }, {
+                    b: sub => <b>{sub}</b>,
+                },
+            );
+            buttons = <DialogButtons primaryButton={_t('OK')}
+                hasCancel={false}
+                onPrimaryButtonClick={this._onCancelClick}
+                focus={true}
+            />;
+        } else {
+            message = _t(
+                "Some files are <b>too large</b> to be uploaded. " +
+                "The file size limit is %(limit)s.",
+                {
+                    limit: filesize(this.props.contentMessages.getUploadLimit()),
+                }, {
+                    b: sub => <b>{sub}</b>,
+                },
+            );
+            const howManyOthers = this.props.totalFiles - this.props.badFiles.length;
+            buttons = <DialogButtons
+                primaryButton={_t('Upload %(count)s other files', { count: howManyOthers })}
+                onPrimaryButtonClick={this._onUploadClick}
+                hasCancel={true}
+                cancelButton={_t("Cancel All")}
+                onCancel={this._onCancelClick}
+                focus={true}
+            />;
+        }
+
+        return (
+            <BaseDialog className='mx_UploadFailureDialog'
+                onFinished={this._onCancelClick}
+                title={_t("Upload Error")}
+                contentId='mx_Dialog_content'
+            >
+                <div id='mx_Dialog_content'>
+                    {message}
+                    {preview}
+                </div>
+
+                {buttons}
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/UserSettingsDialog.js

@@ -18,34 +18,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Tab, TabbedView} from "../../structures/TabbedView";
 import {_t, _td} from "../../../languageHandler";
-import GeneralUserSettingsTab from "../settings/tabs/GeneralUserSettingsTab";
-import dis from '../../../dispatcher';
+import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
 import SettingsStore from "../../../settings/SettingsStore";
-import LabsSettingsTab from "../settings/tabs/LabsSettingsTab";
-import SecuritySettingsTab from "../settings/tabs/SecuritySettingsTab";
-import NotificationSettingsTab from "../settings/tabs/NotificationSettingsTab";
-import PreferencesSettingsTab from "../settings/tabs/PreferencesSettingsTab";
-import VoiceSettingsTab from "../settings/tabs/VoiceSettingsTab";
-import HelpSettingsTab from "../settings/tabs/HelpSettingsTab";
-import FlairSettingsTab from "../settings/tabs/FlairSettingsTab";
+import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import SecurityUserSettingsTab from "../settings/tabs/user/SecurityUserSettingsTab";
+import NotificationUserSettingsTab from "../settings/tabs/user/NotificationUserSettingsTab";
+import PreferencesUserSettingsTab from "../settings/tabs/user/PreferencesUserSettingsTab";
+import VoiceUserSettingsTab from "../settings/tabs/user/VoiceUserSettingsTab";
+import HelpUserSettingsTab from "../settings/tabs/user/HelpUserSettingsTab";
+import FlairUserSettingsTab from "../settings/tabs/user/FlairUserSettingsTab";
 import sdk from "../../../index";
 
-// TODO: Ditch this whole component
-export class TempTab extends React.Component {
-    static propTypes = {
-        onClose: PropTypes.func.isRequired,
-    };
-
-    componentDidMount(): void {
-        dis.dispatch({action: "view_old_user_settings"});
-        this.props.onClose();
-    }
-
-    render() {
-        return <div>Hello World</div>;
-    }
-}
-
 export default class UserSettingsDialog extends React.Component {
     static propTypes = {
         onFinished: PropTypes.func.isRequired,
@@ -62,45 +45,40 @@ export default class UserSettingsDialog extends React.Component {
         tabs.push(new Tab(
             _td("Flair"),
             "mx_UserSettingsDialog_flairIcon",
-            <FlairSettingsTab />,
+            <FlairUserSettingsTab />,
         ));
         tabs.push(new Tab(
             _td("Notifications"),
             "mx_UserSettingsDialog_bellIcon",
-            <NotificationSettingsTab />,
+            <NotificationUserSettingsTab />,
         ));
         tabs.push(new Tab(
             _td("Preferences"),
             "mx_UserSettingsDialog_preferencesIcon",
-            <PreferencesSettingsTab />,
+            <PreferencesUserSettingsTab />,
         ));
         tabs.push(new Tab(
             _td("Voice & Video"),
             "mx_UserSettingsDialog_voiceIcon",
-            <VoiceSettingsTab />,
+            <VoiceUserSettingsTab />,
         ));
         tabs.push(new Tab(
             _td("Security & Privacy"),
             "mx_UserSettingsDialog_securityIcon",
-            <SecuritySettingsTab />,
+            <SecurityUserSettingsTab />,
         ));
         if (SettingsStore.getLabsFeatures().length > 0) {
             tabs.push(new Tab(
                 _td("Labs"),
                 "mx_UserSettingsDialog_labsIcon",
-                <LabsSettingsTab />,
+                <LabsUserSettingsTab />,
             ));
         }
         tabs.push(new Tab(
             _td("Help & About"),
             "mx_UserSettingsDialog_helpIcon",
-            <HelpSettingsTab closeSettingsFn={this.props.onFinished} />,
+            <HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
         ));
-        // tabs.push(new Tab(
-        //     _td("Visit old settings"),
-        //     "mx_UserSettingsDialog_helpIcon",
-        //     <TempTab onClose={this.props.onFinished} />,
-        // ));
 
         return tabs;
     }

src/components/views/dialogs/WidgetOpenIDPermissionsDialog.js

@@ -0,0 +1,103 @@
+/*
+Copyright 2019 Travis Ralston
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {_t} from "../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import sdk from "../../../index";
+import LabelledToggleSwitch from "../elements/LabelledToggleSwitch";
+import WidgetUtils from "../../../utils/WidgetUtils";
+
+export default class WidgetOpenIDPermissionsDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+        widgetUrl: PropTypes.string.isRequired,
+        widgetId: PropTypes.string.isRequired,
+        isUserWidget: PropTypes.bool.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            rememberSelection: false,
+        };
+    }
+
+    _onAllow = () => {
+        this._onPermissionSelection(true);
+    };
+
+    _onDeny = () => {
+        this._onPermissionSelection(false);
+    };
+
+    _onPermissionSelection(allowed) {
+        if (this.state.rememberSelection) {
+            console.log(`Remembering ${this.props.widgetId} as allowed=${allowed} for OpenID`);
+
+            const currentValues = SettingsStore.getValue("widgetOpenIDPermissions");
+            if (!currentValues.allow) currentValues.allow = [];
+            if (!currentValues.deny) currentValues.deny = [];
+
+            const securityKey = WidgetUtils.getWidgetSecurityKey(
+                this.props.widgetId,
+                this.props.widgetUrl,
+                this.props.isUserWidget);
+            (allowed ? currentValues.allow : currentValues.deny).push(securityKey);
+            SettingsStore.setValue("widgetOpenIDPermissions", null, SettingLevel.DEVICE, currentValues);
+        }
+
+        this.props.onFinished(allowed);
+    }
+
+    _onRememberSelectionChange = (newVal) => {
+        this.setState({rememberSelection: newVal});
+    };
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        return (
+            <BaseDialog className='mx_WidgetOpenIDPermissionsDialog' hasCancel={true}
+                        onFinished={this.props.onFinished}
+                        title={_t("A widget would like to verify your identity")}>
+                <div className='mx_WidgetOpenIDPermissionsDialog_content'>
+                    <p>
+                        {_t(
+                            "A widget located at %(widgetUrl)s would like to verify your identity. " +
+                            "By allowing this, the widget will be able to verify your user ID, but not " +
+                            "perform actions as you.", {
+                                widgetUrl: this.props.widgetUrl,
+                            },
+                        )}
+                    </p>
+                    <LabelledToggleSwitch value={this.state.rememberSelection} toggleInFront={true}
+                                          onChange={this._onRememberSelectionChange}
+                                          label={_t("Remember my selection for this widget")} />
+                </div>
+                <DialogButtons
+                    primaryButton={_t("Allow")}
+                    onPrimaryButtonClick={this._onAllow}
+                    cancelButton={_t("Deny")}
+                    onCancel={this._onDeny}
+                />
+            </BaseDialog>
+        );
+    }
+}

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

@@ -19,8 +19,13 @@ import sdk from '../../../../index';
 import MatrixClientPeg from '../../../../MatrixClientPeg';
 import Modal from '../../../../Modal';
 
+import { MatrixClient } from 'matrix-js-sdk';
+
 import { _t } from '../../../../languageHandler';
 
+const RESTORE_TYPE_PASSPHRASE = 0;
+const RESTORE_TYPE_RECOVERYKEY = 1;
+
 /**
  * Dialog for restoring e2e keys from a backup and the user's recovery key
  */
@@ -36,6 +41,7 @@ export default React.createClass({
             recoveryKeyValid: false,
             forceRecoveryKey: false,
             passPhrase: '',
+            restoreType: null,
         };
     },
 
@@ -80,10 +86,11 @@ export default React.createClass({
         this.setState({
             loading: true,
             restoreError: null,
+            restoreType: RESTORE_TYPE_PASSPHRASE,
         });
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithPassword(
-                this.state.passPhrase, undefined, undefined, this.state.backupInfo.version,
+                this.state.passPhrase, undefined, undefined, this.state.backupInfo,
             );
             this.setState({
                 loading: false,
@@ -102,10 +109,11 @@ export default React.createClass({
         this.setState({
             loading: true,
             restoreError: null,
+            restoreType: RESTORE_TYPE_RECOVERYKEY,
         });
         try {
             const recoverInfo = await MatrixClientPeg.get().restoreKeyBackupWithRecoveryKey(
-                this.state.recoveryKey, undefined, undefined, this.state.backupInfo.version,
+                this.state.recoveryKey, undefined, undefined, this.state.backupInfo,
             );
             this.setState({
                 loading: false,
@@ -179,19 +187,31 @@ export default React.createClass({
             title = _t("Error");
             content = _t("Unable to load backup status");
         } else if (this.state.restoreError) {
-            title = _t("Error");
-            content = _t("Unable to restore backup");
+            if (this.state.restoreError.errcode === MatrixClient.RESTORE_BACKUP_ERROR_BAD_KEY) {
+                if (this.state.restoreType === RESTORE_TYPE_RECOVERYKEY) {
+                    title = _t("Recovery Key Mismatch");
+                    content = <div>
+                        <p>{_t(
+                            "Backup could not be decrypted with this key: " +
+                            "please verify that you entered the correct recovery key.",
+                        )}</p>
+                    </div>;
+                } else {
+                    title = _t("Incorrect Recovery Passphrase");
+                    content = <div>
+                        <p>{_t(
+                            "Backup could not be decrypted with this passphrase: " +
+                            "please verify that you entered the correct recovery passphrase.",
+                        )}</p>
+                    </div>;
+                }
+            } else {
+                title = _t("Error");
+                content = _t("Unable to restore backup");
+            }
         } else if (this.state.backupInfo === null) {
             title = _t("Error");
             content = _t("No backup found!");
-        } else if (this.state.recoverInfo && this.state.recoverInfo.imported === 0) {
-            title = _t("Error Restoring Backup");
-            content = <div>
-                <p>{_t(
-                    "Backup could not be decrypted with this key: " +
-                    "please verify that you entered the correct recovery key.",
-                )}</p>
-            </div>;
         } else if (this.state.recoverInfo) {
             title = _t("Backup Restored");
             let failedToDecrypt;
@@ -210,10 +230,15 @@ export default React.createClass({
             const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
             title = _t("Enter Recovery Passphrase");
             content = <div>
-                {_t(
+                <p>{_t(
+                    "<b>Warning</b>: you should only set up key backup " +
+                    "from a trusted computer.", {},
+                    { b: sub => <b>{sub}</b> },
+                )}</p>
+                <p>{_t(
                     "Access your secure message history and set up secure " +
                     "messaging by entering your recovery passphrase.",
-                )}<br />
+                )}</p>
 
                 <div className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input type="password"
@@ -268,10 +293,15 @@ export default React.createClass({
             }
 
             content = <div>
-                {_t(
+                <p>{_t(
+                    "<b>Warning</b>: you should only set up key backup " +
+                    "from a trusted computer.", {},
+                    { b: sub => <b>{sub}</b> },
+                )}</p>
+                <p>{_t(
                     "Access your secure message history and set up secure " +
                     "messaging by entering your recovery key.",
-                )}<br />
+                )}</p>
 
                 <div className="mx_RestoreKeyBackupDialog_primaryContainer">
                     <input className="mx_RestoreKeyBackupDialog_recoveryKeyInput"

src/components/views/directory/NetworkDropdown.js

@@ -41,7 +41,7 @@ export default class NetworkDropdown extends React.Component {
         this.state = {
             expanded: false,
             selectedServer: server,
-            selectedInstance: null,
+            selectedInstanceId: null,
             includeAllNetworks: false,
         };
     }
@@ -52,7 +52,8 @@ export default class NetworkDropdown extends React.Component {
         document.addEventListener('click', this.onDocumentClick, false);
 
         // fire this now so the defaults can be set up
-        this.props.onOptionChange(this.state.selectedServer, this.state.selectedInstance, this.state.includeAllNetworks);
+        const {selectedServer, selectedInstanceId, includeAllNetworks} = this.state;
+        this.props.onOptionChange(selectedServer, selectedInstanceId, includeAllNetworks);
     }
 
     componentWillUnmount() {
@@ -97,17 +98,18 @@ export default class NetworkDropdown extends React.Component {
             expanded: false,
             selectedServer: server,
             selectedInstanceId: instance ? instance.instance_id : null,
-            includeAll: includeAll,
+            includeAllNetworks: includeAll,
         });
         this.props.onOptionChange(server, instance ? instance.instance_id : null, includeAll);
     }
 
     onInputKeyUp(e) {
-        if (e.key == 'Enter') {
+        if (e.key === 'Enter') {
             this.setState({
                 expanded: false,
                 selectedServer: e.target.value,
                 selectedNetwork: null,
+                includeAllNetworks: false,
             });
             this.props.onOptionChange(e.target.value, null);
         }
@@ -129,13 +131,14 @@ export default class NetworkDropdown extends React.Component {
 
     _getMenuOptions() {
         const options = [];
+        const roomDirectory = this.props.config.roomDirectory || {};
 
         let servers = [];
-        if (this.props.config.servers) {
-            servers = servers.concat(this.props.config.servers);
+        if (roomDirectory.servers) {
+            servers = servers.concat(roomDirectory.servers);
         }
 
-        if (servers.indexOf(MatrixClientPeg.getHomeServerName()) == -1) {
+        if (!servers.includes(MatrixClientPeg.getHomeServerName())) {
             servers.unshift(MatrixClientPeg.getHomeServerName());
         }
 
@@ -145,7 +148,7 @@ export default class NetworkDropdown extends React.Component {
         // we can only show the default room list.
         for (const server of servers) {
             options.push(this._makeMenuOption(server, null, true));
-            if (server == MatrixClientPeg.getHomeServerName()) {
+            if (server === MatrixClientPeg.getHomeServerName()) {
                 options.push(this._makeMenuOption(server, null, false));
                 if (this.props.protocols) {
                     for (const proto of Object.keys(this.props.protocols)) {
@@ -181,18 +184,15 @@ export default class NetworkDropdown extends React.Component {
 
         let icon;
         let name;
-        let span_class;
         let key;
 
         if (!instance && includeAll) {
             key = server;
             name = server;
-            span_class = 'mx_NetworkDropdown_menu_all';
         } else if (!instance) {
             key = server + '_all';
             name = 'Matrix';
             icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
-            span_class = 'mx_NetworkDropdown_menu_network';
         } else {
             key = server + '_inst_' + instance.instance_id;
             const imgUrl = instance.icon ?
@@ -200,41 +200,40 @@ export default class NetworkDropdown extends React.Component {
                 DEFAULT_ICON_URL;
             icon = <img src={imgUrl} />;
             name = instance.desc;
-            span_class = 'mx_NetworkDropdown_menu_network';
         }
 
-        const click_handler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
+        const clickHandler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
 
-        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
+        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={clickHandler}>
             {icon}
             <span className="mx_NetworkDropdown_menu_network">{name}</span>
         </div>;
     }
 
     render() {
-        let current_value;
+        let currentValue;
 
         let menu;
         if (this.state.expanded) {
-            const menu_options = this._getMenuOptions();
+            const menuOptions = this._getMenuOptions();
             menu = <div className="mx_NetworkDropdown_menu">
-                {menu_options}
+                {menuOptions}
             </div>;
-            current_value = <input type="text" className="mx_NetworkDropdown_networkoption"
+            currentValue = <input type="text" className="mx_NetworkDropdown_networkoption"
                 ref={this.collectInputTextBox} onKeyUp={this.onInputKeyUp}
                 placeholder="matrix.org" // 'matrix.org' as an example of an HS name
             />;
         } else {
             const instance = instanceForInstanceId(this.props.protocols, this.state.selectedInstanceId);
-            current_value = this._makeMenuOption(
-                this.state.selectedServer, instance, this.state.includeAll, false,
+            currentValue = this._makeMenuOption(
+                this.state.selectedServer, instance, this.state.includeAllNetworks, false,
             );
         }
 
         return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
             <div className="mx_NetworkDropdown_input mx_no_textinput" onClick={this.onInputClick}>
-                {current_value}
-                <span className="mx_NetworkDropdown_arrow"></span>
+                {currentValue}
+                <span className="mx_NetworkDropdown_arrow" />
                 {menu}
             </div>
         </div>;

src/components/views/elements/AccessibleButton.js

@@ -63,6 +63,10 @@ export default function AccessibleButton(props) {
         };
     }
 
+    // Pass through the ref - used for keyboard shortcut access to some buttons
+    restProps.ref = restProps.inputRef;
+    delete restProps.inputRef;
+
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") +
@@ -89,6 +93,7 @@ export default function AccessibleButton(props) {
  */
 AccessibleButton.propTypes = {
     children: PropTypes.node,
+    inputRef: PropTypes.func,
     element: PropTypes.string,
     onClick: PropTypes.func.isRequired,
 

src/components/views/elements/ActionButton.js

@@ -69,8 +69,8 @@ export default React.createClass({
 
         let tooltip;
         if (this.state.showTooltip) {
-            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
+            const Tooltip = sdk.getComponent("elements.Tooltip");
+            tooltip = <Tooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
         }
 
         const icon = this.props.iconPath ?

src/components/views/elements/AppPermission.js

@@ -47,7 +47,7 @@ export default class AppPermission extends React.Component {
         return (
             <div className='mx_AppPermissionWarning'>
                 <div className='mx_AppPermissionWarningImage'>
-                    <img src={require("../../../../res/img/feather-icons/warning-triangle.svg")} alt={_t('Warning!')} />
+                    <img src={require("../../../../res/img/feather-customised/warning-triangle.svg")} alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
                     <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>

src/components/views/elements/AppTile.js

@@ -241,11 +241,18 @@ export default class AppTile extends React.Component {
             this.props.onEditClick();
         } else {
             const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-            const src = this._scalarClient.getScalarInterfaceUrlForRoom(
-                this.props.room, 'type_' + this.props.type, this.props.id);
-            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-                src: src,
-            }, "mx_IntegrationsManager");
+            this._scalarClient.connect().done(() => {
+                const src = this._scalarClient.getScalarInterfaceUrlForRoom(
+                    this.props.room, 'type_' + this.props.type, this.props.id);
+                Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                    src: src,
+                }, "mx_IntegrationsManager");
+            }, (err) => {
+                this.setState({
+                    error: err.message,
+                });
+                console.error('Error ensuring a valid scalar_token exists', err);
+            });
         }
     }
 
@@ -329,9 +336,12 @@ export default class AppTile extends React.Component {
      * Called when widget iframe has finished loading
      */
     _onLoaded() {
-        if (!ActiveWidgetStore.getWidgetMessaging(this.props.id)) {
-            this._setupWidgetMessaging();
-        }
+        // 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);
+        this._setupWidgetMessaging();
+
         ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
         this.setState({loading: false});
     }
@@ -339,7 +349,8 @@ export default class AppTile extends React.Component {
     _setupWidgetMessaging() {
         // 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.refs.appFrame.contentWindow);
+        const widgetMessaging = new WidgetMessaging(
+            this.props.id, this.props.url, this.props.userWidget, this.refs.appFrame.contentWindow);
         ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging);
         widgetMessaging.getCapabilities().then((requestedCapabilities) => {
             console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities);
@@ -435,10 +446,14 @@ export default class AppTile extends React.Component {
         }
 
         // Toggle the view state of the apps drawer
-        dis.dispatch({
-            action: 'appsDrawer',
-            show: !this.props.show,
-        });
+        if (this.props.userWidget) {
+            this._onMinimiseClick();
+        } else {
+            dis.dispatch({
+                action: 'appsDrawer',
+                show: !this.props.show,
+            });
+        }
     }
 
     _getSafeUrl() {
@@ -478,9 +493,9 @@ export default class AppTile extends React.Component {
 
     _onPopoutWidgetClick(e) {
         // Using Object.assign workaround as the following opens in a new window instead of a new tab.
-        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes,noreferrer=yes');
+        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes');
         Object.assign(document.createElement('a'),
-            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener noreferrer'}).click();
+            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener'}).click();
     }
 
     _onReloadWidgetClick(e) {
@@ -579,8 +594,8 @@ export default class AppTile extends React.Component {
         // editing is done in scalar
         const canUserModify = this._canUserModify();
         const showEditButton = Boolean(this._scalarClient && canUserModify);
-        const showDeleteButton = canUserModify;
-        const showCancelButton = !showDeleteButton;
+        const showDeleteButton = (this.props.showDelete === undefined || this.props.showDelete) && canUserModify;
+        const showCancelButton = (this.props.showCancel === undefined || this.props.showCancel) && !showDeleteButton;
         // Picture snapshot - only show button when apps are maximised.
         const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
         const showMinimiseButton = this.props.showMinimise && this.props.show;
@@ -614,7 +629,7 @@ export default class AppTile extends React.Component {
                         { /* Maximise widget */ }
                         { showMaximiseButton && <AccessibleButton
                             className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_maximise"
-                            title={_t('Minimize apps')}
+                            title={_t('Maximize apps')}
                             onClick={this._onMinimiseClick}
                         /> }
                         { /* Title */ }

src/components/views/elements/EditableItemList.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 2019 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.
@@ -16,142 +16,145 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import sdk from '../../../index';
 import {_t} from '../../../languageHandler.js';
+import Field from "./Field";
+import AccessibleButton from "./AccessibleButton";
 
-const EditableItem = React.createClass({
-    displayName: 'EditableItem',
-
-    propTypes: {
-        initialValue: PropTypes.string,
+export class EditableItem extends React.Component {
+    static propTypes = {
         index: PropTypes.number,
-        placeholder: PropTypes.string,
-
-        onChange: PropTypes.func,
+        value: PropTypes.string,
         onRemove: PropTypes.func,
-        onAdd: PropTypes.func,
+    };
 
-        addOnChange: PropTypes.bool,
-    },
+    constructor() {
+        super();
 
-    onChange: function(value) {
-        this.setState({ value });
-        if (this.props.onChange) this.props.onChange(value, this.props.index);
-        if (this.props.addOnChange && this.props.onAdd) this.props.onAdd(value);
-    },
+        this.state = {
+            verifyRemove: false,
+        };
+    }
+
+    _onRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: true});
+    };
+
+    _onDontRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        this.setState({verifyRemove: false});
+    };
+
+    _onActuallyRemove = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
 
-    onRemove: function() {
         if (this.props.onRemove) this.props.onRemove(this.props.index);
-    },
+        this.setState({verifyRemove: false});
+    };
 
-    onAdd: function() {
-        if (this.props.onAdd) this.props.onAdd(this.state.value);
-    },
-
-    render: function() {
-        const EditableText = sdk.getComponent('elements.EditableText');
-        return <div className="mx_EditableItem">
-            <EditableText
-                className="mx_EditableItem_editable"
-                placeholderClassName="mx_EditableItem_editablePlaceholder"
-                placeholder={this.props.placeholder}
-                blurToCancel={false}
-                editable={true}
-                initialValue={this.props.initialValue}
-                onValueChanged={this.onChange} />
-            { this.props.onAdd ?
-                <div className="mx_EditableItem_addButton">
-                    <img className="mx_filterFlipColor"
-                        src={require("../../../../res/img/plus.svg")} width="14" height="14"
-                        alt={_t("Add")} onClick={this.onAdd} />
+    render() {
+        if (this.state.verifyRemove) {
+            return (
+                <div className="mx_EditableItem">
+                    <span className="mx_EditableItem_promptText">
+                        {_t("Are you sure?")}
+                    </span>
+                    <AccessibleButton onClick={this._onActuallyRemove} kind="primary_sm"
+                                      className="mx_EditableItem_confirmBtn">
+                        {_t("Yes")}
+                    </AccessibleButton>
+                    <AccessibleButton onClick={this._onDontRemove} kind="danger_sm"
+                                      className="mx_EditableItem_confirmBtn">
+                        {_t("No")}
+                    </AccessibleButton>
                 </div>
-                :
-                <div className="mx_EditableItem_removeButton">
-                    <img className="mx_filterFlipColor"
-                        src={require("../../../../res/img/cancel-small.svg")} width="14" height="14"
-                        alt={_t("Delete")} onClick={this.onRemove} />
-                </div>
-            }
-        </div>;
-    },
-});
+            );
+        }
 
-// TODO: Make this use the new Field element
-module.exports = React.createClass({
-    displayName: 'EditableItemList',
+        return (
+            <div className="mx_EditableItem">
+                <img src={require("../../../../res/img/feather-customised/cancel.svg")} width={14} height={14}
+                     onClick={this._onRemove} className="mx_EditableItem_delete" alt={_t("Remove")} />
+                <span className="mx_EditableItem_item">{this.props.value}</span>
+            </div>
+        );
+    }
+}
 
-    propTypes: {
+export default class EditableItemList extends React.Component {
+    static propTypes = {
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
-        onNewItemChanged: PropTypes.func,
+        itemsLabel: PropTypes.string,
+        noItemsLabel: PropTypes.string,
+        placeholder: PropTypes.string,
+        newItem: PropTypes.string,
+
         onItemAdded: PropTypes.func,
-        onItemEdited: PropTypes.func,
         onItemRemoved: PropTypes.func,
+        onNewItemChanged: PropTypes.func,
 
         canEdit: PropTypes.bool,
-    },
+        canRemove: PropTypes.bool,
+    };
 
-    getDefaultProps: function() {
-        return {
-            onItemAdded: () => {},
-            onItemEdited: () => {},
-            onItemRemoved: () => {},
-            onNewItemChanged: () => {},
-        };
-    },
+    _onItemAdded = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
 
-    onItemAdded: function(value) {
-        this.props.onItemAdded(value);
-    },
+        if (this.props.onItemAdded) this.props.onItemAdded(this.props.newItem);
+    };
 
-    onItemEdited: function(value, index) {
-        if (value.length === 0) {
-            this.onItemRemoved(index);
-        } else {
-            this.props.onItemEdited(value, index);
-        }
-    },
+    _onItemRemoved = (index) => {
+        if (this.props.onItemRemoved) this.props.onItemRemoved(index);
+    };
 
-    onItemRemoved: function(index) {
-        this.props.onItemRemoved(index);
-    },
+    _onNewItemChanged = (e) => {
+        if (this.props.onNewItemChanged) this.props.onNewItemChanged(e.target.value);
+    };
 
-    onNewItemChanged: function(value) {
-        this.props.onNewItemChanged(value);
-    },
+    _renderNewItemField() {
+        return (
+            <form onSubmit={this._onItemAdded} autoComplete={false}
+                  noValidate={true} className="mx_EditableItemList_newItem">
+                <Field id="newEmailAddress" label={this.props.placeholder}
+                       type="text" autoComplete="off" value={this.props.newItem}
+                       onChange={this._onNewItemChanged}
+                />
+                <AccessibleButton onClick={this._onItemAdded} kind="primary">
+                    {_t("Add")}
+                </AccessibleButton>
+            </form>
+        );
+    }
 
-    render: function() {
+    render() {
         const editableItems = this.props.items.map((item, index) => {
+            if (!this.props.canRemove) {
+                return <li>{item}</li>;
+            }
+
             return <EditableItem
                 key={index}
                 index={index}
-                initialValue={item}
-                onChange={this.onItemEdited}
-                onRemove={this.onItemRemoved}
-                placeholder={this.props.placeholder}
+                value={item}
+                onRemove={this._onItemRemoved}
             />;
         });
 
-        const label = this.props.items.length > 0 ?
-            this.props.itemsLabel : this.props.noItemsLabel;
+        const editableItemsSection = this.props.canRemove ? editableItems : <ul>{editableItems}</ul>;
+        const label = this.props.items.length > 0 ? this.props.itemsLabel : this.props.noItemsLabel;
 
         return (<div className="mx_EditableItemList">
             <div className="mx_EditableItemList_label">
                 { label }
             </div>
-            { editableItems }
-            { this.props.canEdit ?
-                // This is slightly evil; we want a new instance of
-                // EditableItem when the list grows. To make sure it's
-                // reset to its initial state.
-                <EditableItem
-                    key={editableItems.length}
-                    initialValue={this.props.newItem}
-                    onAdd={this.onItemAdded}
-                    onChange={this.onNewItemChanged}
-                    addOnChange={true}
-                    placeholder={this.props.placeholder}
-                /> : <div />
-            }
+            { editableItemsSection }
+            { this.props.canEdit ? this._renderNewItemField() : <div /> }
         </div>);
-    },
-});
+    }
+}

src/components/views/elements/EmojiText.js

@@ -1,42 +0,0 @@
-/*
- Copyright 2016 Aviral Dasgupta
- 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 PropTypes from 'prop-types';
-import {emojifyText, containsEmoji} from '../../../HtmlUtils';
-
-export default function EmojiText(props) {
-    const {element, children, ...restProps} = props;
-
-    // fast path: simple regex to detect strings that don't contain
-    // emoji and just return them
-    if (containsEmoji(children)) {
-        restProps.dangerouslySetInnerHTML = emojifyText(children);
-        return React.createElement(element, restProps);
-    } else {
-        return React.createElement(element, restProps, children);
-    }
-}
-
-EmojiText.propTypes = {
-    element: PropTypes.string,
-    children: PropTypes.string.isRequired,
-};
-
-EmojiText.defaultProps = {
-    element: 'span',
-};

src/components/views/elements/Field.js

@@ -16,53 +16,160 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import sdk from '../../../index';
+import { throttle } from 'lodash';
+
+// Invoke validation from user input (when typing, etc.) at most once every N ms.
+const VALIDATION_THROTTLE_MS = 200;
 
 export default class Field extends React.PureComponent {
     static propTypes = {
         // The field's ID, which binds the input and label together.
         id: PropTypes.string.isRequired,
-        // The field's <input> type. Defaults to "text".
+        // 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,
         // The field's label string.
         label: PropTypes.string,
         // The field's placeholder string. Defaults to the label.
         placeholder: PropTypes.string,
-        // The type of field to create. Defaults to "input". Should be "input" or "select".
-        // To define options for a select, use <Field><option ... /></Field>
-        element: 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,
+        // 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,
         // All other props pass through to the <input>.
     };
 
-    get value() {
-        if (!this.refs.fieldInput) return null;
-        return this.refs.fieldInput.value;
+    constructor() {
+        super();
+        this.state = {
+            valid: undefined,
+            feedback: undefined,
+        };
     }
 
-    set value(newValue) {
-        if (!this.refs.fieldInput) {
-            throw new Error("No field input reference");
+    onFocus = (ev) => {
+        this.validate({
+            focused: true,
+        });
+        // Parent component may have supplied its own `onFocus` as well
+        if (this.props.onFocus) {
+            this.props.onFocus(ev);
         }
-        this.refs.fieldInput.value = newValue;
+    };
+
+    onChange = (ev) => {
+        this.validateOnChange();
+        // Parent component may have supplied its own `onChange` as well
+        if (this.props.onChange) {
+            this.props.onChange(ev);
+        }
+    };
+
+    onBlur = (ev) => {
+        this.validate({
+            focused: false,
+        });
+        // Parent component may have supplied its own `onBlur` as well
+        if (this.props.onBlur) {
+            this.props.onBlur(ev);
+        }
+    };
+
+    focus() {
+        this.input.focus();
     }
 
+    async validate({ focused, allowEmpty = true }) {
+        if (!this.props.onValidate) {
+            return;
+        }
+        const value = this.input ? this.input.value : null;
+        const { valid, feedback } = await this.props.onValidate({
+            value,
+            focused,
+            allowEmpty,
+        });
+
+        if (feedback) {
+            this.setState({
+                valid,
+                feedback,
+                feedbackVisible: true,
+            });
+        } else {
+            // When we receive null `feedback`, we want to hide the tooltip.
+            // We leave the previous `feedback` content in state without updating it,
+            // so that we can hide the tooltip containing the most recent feedback
+            // via CSS animation.
+            this.setState({
+                valid,
+                feedbackVisible: false,
+            });
+        }
+    }
+
+    validateOnChange = throttle(() => {
+        this.validate({
+            focused: true,
+        });
+    }, VALIDATION_THROTTLE_MS);
+
     render() {
-        const extraProps = Object.assign({}, this.props);
+        const { element, prefix, onValidate, children, ...inputProps } = this.props;
 
-        // Remove explicit properties that shouldn't be copied
-        delete extraProps.element;
-        delete extraProps.children;
+        const inputElement = element || "input";
 
-        // Set some defaults for the element
-        extraProps.type = extraProps.type || "text";
-        extraProps.ref = "fieldInput";
-        extraProps.placeholder = extraProps.placeholder || extraProps.label;
+        // Set some defaults for the <input> element
+        inputProps.type = inputProps.type || "text";
+        inputProps.ref = input => this.input = input;
+        inputProps.placeholder = inputProps.placeholder || inputProps.label;
 
-        const element = this.props.element || "input";
-        const fieldInput = React.createElement(element, extraProps, this.props.children);
+        inputProps.onFocus = this.onFocus;
+        inputProps.onChange = this.onChange;
+        inputProps.onBlur = this.onBlur;
 
-        return <div className={`mx_Field mx_Field_${element}`}>
+        const fieldInput = React.createElement(inputElement, inputProps, children);
+
+        let prefixContainer = null;
+        if (prefix) {
+            prefixContainer = <span className="mx_Field_prefix">{prefix}</span>;
+        }
+
+        const fieldClasses = classNames("mx_Field", `mx_Field_${inputElement}`, {
+            // 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_invalid: onValidate && this.state.valid === false,
+        });
+
+        // Handle displaying feedback on validity
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        let tooltip;
+        if (this.state.feedback) {
+            tooltip = <Tooltip
+                tooltipClassName="mx_Field_tooltip"
+                visible={this.state.feedbackVisible}
+                label={this.state.feedback}
+            />;
+        }
+
+        return <div className={fieldClasses}>
+            {prefixContainer}
             {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
+            {tooltip}
         </div>;
     }
 }

src/components/views/elements/Flair.js

@@ -117,7 +117,7 @@ export default class Flair extends React.Component {
 
     render() {
         if (this.state.profiles.length === 0) {
-            return <div />;
+            return <span className="mx_Flair" />;
         }
         const avatars = this.state.profiles.map((profile, index) => {
             return <FlairAvatar key={index} groupProfile={profile} />;

src/components/views/elements/HexVerify.js

@@ -1,103 +0,0 @@
-/*
-Copyright 2019 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 PropTypes from "prop-types";
-import classnames from 'classnames';
-
-import sdk from '../../../index';
-
-class HexVerifyPair extends React.Component {
-    static propTypes = {
-        text: PropTypes.string.isRequired,
-        index: PropTypes.number,
-        verified: PropTypes.bool,
-        onChange: PropTypes.func.isRequired,
-    }
-
-    _onClick = () => {
-        this.setState({verified: !this.props.verified});
-        this.props.onChange(this.props.index, !this.props.verified);
-    }
-
-    render() {
-        const classNames = {
-            mx_HexVerify_pair: true,
-            mx_HexVerify_pair_verified: this.props.verified,
-        };
-        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
-        return <AccessibleButton className={classnames(classNames)}
-            onClick={this._onClick}
-        >
-            {this.props.text}
-        </AccessibleButton>;
-    }
-}
-
-/*
- * Helps a user verify a hexadecimal code matches one displayed
- * elsewhere (eg. on a different device)
- */
-export default class HexVerify extends React.Component {
-    static propTypes = {
-        text: PropTypes.string.isRequired,
-        onVerifiedStateChange: PropTypes.func,
-    }
-
-    static defaultProps = {
-        onVerifiedStateChange: function() {},
-    }
-
-    constructor(props) {
-        super(props);
-        this.state = {
-            pairsVerified: [],
-        };
-        for (let i = 0; i < props.text.length; i += 2) {
-            this.state.pairsVerified.push(false);
-        }
-    }
-
-    _onPairChange = (index, newVal) => {
-        const oldVerified = this.state.pairsVerified.reduce((acc, val) => {
-            return acc && val;
-        }, true);
-        const newPairsVerified = this.state.pairsVerified.slice(0);
-        newPairsVerified[index] = newVal;
-        const newVerified = newPairsVerified.reduce((acc, val) => {
-            return acc && val;
-        }, true);
-        this.setState({pairsVerified: newPairsVerified});
-        if (oldVerified !== newVerified) {
-            this.props.onVerifiedStateChange(newVerified);
-        }
-    }
-
-    render() {
-        const pairs = [];
-
-        for (let i = 0; i < this.props.text.length / 2; ++i) {
-            pairs.push(<HexVerifyPair key={i} index={i}
-                text={this.props.text.substr(i * 2, 2)}
-                verified={this.state.pairsVerified[i]}
-                onChange={this._onPairChange}
-            />);
-        }
-        return <div className="mx_HexVerify">
-            {pairs}
-        </div>;
-    }
-}

src/components/views/elements/HomeButton.js

@@ -1,39 +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 sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const HomeButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton action="view_home_page"
-            label={_t("Home")}
-            iconPath={require("../../../../res/img/icons-home.svg")}
-            size={props.size}
-            tooltip={props.tooltip}
-        />
-    );
-};
-
-HomeButton.propTypes = {
-    size: PropTypes.string,
-    tooltip: PropTypes.bool,
-};
-
-export default HomeButton;

src/components/views/elements/ImageView.js

@@ -27,10 +27,8 @@ const Modal = require('../../../Modal');
 const sdk = require('../../../index');
 import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
-    displayName: 'ImageView',
-
-    propTypes: {
+export default class ImageView extends React.Component {
+    static propTypes = {
         src: React.PropTypes.string.isRequired, // the source of the image being displayed
         name: React.PropTypes.string, // the main title ('name') for the image
         link: React.PropTypes.string, // the link (if any) applied to the name of the image
@@ -44,27 +42,32 @@ module.exports = React.createClass({
         // properties above, which let us use lightboxes to display images which aren't associated
         // with events.
         mxEvent: React.PropTypes.object,
-    },
+    };
+
+    constructor(props) {
+        super(props);
+        this.state = { rotationDegrees: 0 };
+    }
 
     // XXX: keyboard shortcuts for managing dialogs should be done by the modal
     // dialog base class somehow, surely...
-    componentDidMount: function() {
+    componentDidMount() {
         document.addEventListener("keydown", this.onKeyDown);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         document.removeEventListener("keydown", this.onKeyDown);
-    },
+    }
 
-    onKeyDown: function(ev) {
+    onKeyDown = (ev) => {
         if (ev.keyCode == 27) { // escape
             ev.stopPropagation();
             ev.preventDefault();
             this.props.onFinished();
         }
-    },
+    };
 
-    onRedactClick: function() {
+    onRedactClick = () => {
         const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
         Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
             onFinished: (proceed) => {
@@ -83,17 +86,29 @@ module.exports = React.createClass({
                 }).done();
             },
         });
-    },
+    };
 
-    getName: function() {
+    getName() {
         let name = this.props.name;
         if (name && this.props.link) {
             name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
         }
         return name;
-    },
+    }
 
-    render: function() {
+    rotateCounterClockwise = () => {
+        const cur = this.state.rotationDegrees;
+        const rotationDegrees = (cur - 90) % 360;
+        this.setState({ rotationDegrees });
+    };
+
+    rotateClockwise = () => {
+        const cur = this.state.rotationDegrees;
+        const rotationDegrees = (cur + 90) % 360;
+        this.setState({ rotationDegrees });
+    };
+
+    render() {
 /*
         // In theory max-width: 80%, max-height: 80% on the CSS should work
         // but in practice, it doesn't, so do it manually:
@@ -122,7 +137,8 @@ module.exports = React.createClass({
             height: displayHeight
         };
 */
-        let style; let res;
+        let style = {};
+        let res;
 
         if (this.props.width && this.props.height) {
             style = {
@@ -168,15 +184,26 @@ module.exports = React.createClass({
             </div>);
         }
 
+        const rotationDegrees = this.state.rotationDegrees;
+        const effectiveStyle = {transform: `rotate(${rotationDegrees}deg)`, ...style};
+
         return (
             <div className="mx_ImageView">
                 <div className="mx_ImageView_lhs">
                 </div>
                 <div className="mx_ImageView_content">
-                    <img src={this.props.src} style={style} />
+                    <img src={this.props.src} title={this.props.name} style={effectiveStyle} className="mainImage" />
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_rotateCounterClockwise" title={_t("Rotate Left")} onClick={ this.rotateCounterClockwise }>
+                                <img src={require("../../../../res/img/rotate-ccw.svg")} alt={ _t('Rotate counter-clockwise') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_rotateClockwise" title={_t("Rotate Right")} onClick={ this.rotateClockwise }>
+                                <img src={require("../../../../res/img/rotate-cw.svg")} alt={ _t('Rotate clockwise') } width="18" height="18" />
+                            </AccessibleButton>
+                            <AccessibleButton className="mx_ImageView_cancel" title={_t("Close")} onClick={ this.props.onFinished }>
+                              <img src={require("../../../../res/img/cancel-white.svg")} width="18" height="18" alt={ _t('Close') } />
+                            </AccessibleButton>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">
@@ -199,5 +226,5 @@ module.exports = React.createClass({
                 </div>
             </div>
         );
-    },
-});
+    }
+}

src/components/views/elements/LabelledToggleSwitch.js

@@ -31,15 +31,29 @@ export default class LabelledToggleSwitch extends React.Component {
 
         // Whether or not to disable the toggle switch
         disabled: PropTypes.bool,
+
+        // True to put the toggle in front of the label
+        // Default false.
+        toggleInFront: PropTypes.bool,
     };
 
     render() {
         // This is a minimal version of a SettingsFlag
+
+        let firstPart = <span className="mx_SettingsFlag_label">{this.props.label}</span>;
+        let secondPart = <ToggleSwitch checked={this.props.value} disabled={this.props.disabled}
+                                         onChange={this.props.onChange} />;
+
+        if (this.props.toggleInFront) {
+            const temp = firstPart;
+            firstPart = secondPart;
+            secondPart = temp;
+        }
+
         return (
             <div className="mx_SettingsFlag">
-                <span className="mx_SettingsFlag_label">{this.props.label}</span>
-                <ToggleSwitch checked={this.props.value} disabled={this.props.disabled}
-                              onChange={this.props.onChange} />
+                {firstPart}
+                {secondPart}
             </div>
         );
     }

src/components/views/elements/LazyRenderList.js

@@ -0,0 +1,91 @@
+/*
+Copyright 2019 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";
+
+const OVERFLOW_ITEMS = 20;
+const OVERFLOW_MARGIN = 5;
+
+class ItemRange {
+    constructor(topCount, renderCount, bottomCount) {
+        this.topCount = topCount;
+        this.renderCount = renderCount;
+        this.bottomCount = bottomCount;
+    }
+
+    contains(range) {
+        return range.topCount >= this.topCount &&
+            (range.topCount + range.renderCount) <= (this.topCount + this.renderCount);
+    }
+
+    expand(amount) {
+        const topGrow = Math.min(amount, this.topCount);
+        const bottomGrow = Math.min(amount, this.bottomCount);
+        return new ItemRange(
+            this.topCount - topGrow,
+            this.renderCount + topGrow + bottomGrow,
+            this.bottomCount - bottomGrow,
+        );
+    }
+}
+
+export default class LazyRenderList extends React.Component {
+    constructor(props) {
+        super(props);
+        const renderRange = LazyRenderList.getVisibleRangeFromProps(props).expand(OVERFLOW_ITEMS);
+        this.state = {renderRange};
+    }
+
+    static getVisibleRangeFromProps(props) {
+        const {items, itemHeight, scrollTop, height} = props;
+        const length = items ? items.length : 0;
+        const topCount = Math.max(0, Math.floor(scrollTop / itemHeight));
+        const itemsAfterTop = length - topCount;
+        const renderCount = Math.min(Math.ceil(height / itemHeight), itemsAfterTop);
+        const bottomCount = itemsAfterTop - renderCount;
+        return new ItemRange(topCount, renderCount, bottomCount);
+    }
+
+    componentWillReceiveProps(props) {
+        const state = this.state;
+        const range = LazyRenderList.getVisibleRangeFromProps(props);
+        const intersectRange = range.expand(OVERFLOW_MARGIN);
+
+        const prevSize = this.props.items ? this.props.items.length : 0;
+        const listHasChangedSize = props.items.length !== prevSize;
+        // only update renderRange if the list has shrunk/grown and we need to adjust padding or
+        // if the new range isn't contained by the old anymore
+        if (listHasChangedSize || !state.renderRange || !state.renderRange.contains(intersectRange)) {
+            this.setState({renderRange: range.expand(OVERFLOW_ITEMS)});
+        }
+    }
+
+    render() {
+        const {itemHeight, items, renderItem} = this.props;
+
+        const {renderRange} = this.state;
+        const paddingTop = renderRange.topCount * itemHeight;
+        const paddingBottom = renderRange.bottomCount * itemHeight;
+        const renderedItems = (items || []).slice(
+            renderRange.topCount,
+            renderRange.topCount + renderRange.renderCount,
+        );
+
+        return (<div style={{paddingTop: `${paddingTop}px`, paddingBottom: `${paddingBottom}px`}}>
+            { renderedItems.map(renderItem) }
+        </div>);
+    }
+}

src/components/views/elements/ManageIntegsButton.js

@@ -24,7 +24,6 @@ import ScalarMessaging from '../../../ScalarMessaging';
 import Modal from "../../../Modal";
 import { _t } from '../../../languageHandler';
 import AccessibleButton from './AccessibleButton';
-import TintableSvg from './TintableSvg';
 
 export default class ManageIntegsButton extends React.Component {
     constructor(props) {
@@ -46,7 +45,7 @@ export default class ManageIntegsButton extends React.Component {
             this.scalarClient.connect().done(() => {
                 this.forceUpdate();
             }, (err) => {
-                this.setState({ scalarError: err});
+                this.setState({scalarError: err});
                 console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
             });
         }
@@ -62,11 +61,16 @@ export default class ManageIntegsButton extends React.Component {
             return;
         }
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        Modal.createDialog(IntegrationsManager, {
-            src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room) :
-                null,
-        }, "mx_IntegrationsManager");
+        this.scalarClient.connect().done(() => {
+            Modal.createDialog(IntegrationsManager, {
+                src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+                    this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room) :
+                    null,
+            }, "mx_IntegrationsManager");
+        }, (err) => {
+            this.setState({scalarError: err});
+            console.error('Error ensuring a valid scalar_token exists', err);
+        });
     }
 
     render() {
@@ -76,7 +80,8 @@ export default class ManageIntegsButton extends React.Component {
         if (this.scalarClient !== null) {
             const integrationsButtonClasses = classNames({
                 mx_RoomHeader_button: true,
-                mx_RoomSettings_integrationsButton_error: !!this.state.scalarError,
+                mx_RoomHeader_manageIntegsButton: true,
+                mx_ManageIntegsButton_error: !!this.state.scalarError,
             });
 
             if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
@@ -87,15 +92,17 @@ export default class ManageIntegsButton extends React.Component {
                 />;
                 // Popup shown when hovering over integrationsButton_error (via CSS)
                 integrationsErrorPopup = (
-                    <span className="mx_RoomSettings_integrationsButton_errorPopup">
+                    <span className="mx_ManageIntegsButton_errorPopup">
                         { _t('Could not connect to the integration server') }
                     </span>
                 );
             }
 
             integrationsButton = (
-                <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
-                    <TintableSvg src={require("../../../../res/img/feather-icons/grid.svg")} width="20" height="20" />
+                <AccessibleButton className={integrationsButtonClasses}
+                    onClick={this.onManageIntegrations}
+                    title={_t('Manage Integrations')}
+                >
                     { integrationsWarningTriangle }
                     { integrationsErrorPopup }
                 </AccessibleButton>

src/components/views/elements/MemberEventListSummary.js

@@ -1,5 +1,6 @@
 /*
 Copyright 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.
@@ -13,11 +14,13 @@ 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 sdk from '../../../index';
-const MemberAvatar = require('../avatars/MemberAvatar.js');
+import MemberAvatar from '../avatars/MemberAvatar';
 import { _t } from '../../../languageHandler';
+import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
 
 module.exports = React.createClass({
     displayName: 'MemberEventListSummary',
@@ -105,7 +108,7 @@ module.exports = React.createClass({
                 );
             });
 
-            const desc = this._renderCommaSeparatedList(descs);
+            const desc = formatCommaSeparatedList(descs);
 
             return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
         });
@@ -114,13 +117,9 @@ module.exports = React.createClass({
             return null;
         }
 
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                <EmojiText>
-                    { summaries.join(", ") }
-                </EmojiText>
+                { summaries.join(", ") }
             </span>
         );
     },
@@ -132,7 +131,7 @@ module.exports = React.createClass({
      * included before "and [n] others".
      */
     _renderNameList: function(users) {
-        return this._renderCommaSeparatedList(users, this.props.summaryLength);
+        return formatCommaSeparatedList(users, this.props.summaryLength);
     },
 
     /**
@@ -283,35 +282,6 @@ module.exports = React.createClass({
         return res;
     },
 
-    /**
-     * Constructs a written English string representing `items`, with an optional limit on
-     * the number of items included in the result. If specified and if the length of
-     *`items` is greater than the limit, the string "and n others" will be appended onto
-     * the result.
-     * If `items` is empty, returns the empty string. If there is only one item, return
-     * it.
-     * @param {string[]} items the items to construct a string from.
-     * @param {number?} itemLimit the number by which to limit the list.
-     * @returns {string} a string constructed by joining `items` with a comma between each
-     * item, but with the last item appended as " and [lastItem]".
-     */
-    _renderCommaSeparatedList(items, itemLimit) {
-        const remaining = itemLimit === undefined ? 0 : Math.max(
-            items.length - itemLimit, 0,
-        );
-        if (items.length === 0) {
-            return "";
-        } else if (items.length === 1) {
-            return items[0];
-        } else if (remaining > 0) {
-            items = items.slice(0, itemLimit);
-            return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
-        } else {
-            const lastItem = items.pop();
-            return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
-        }
-    },
-
     _renderAvatars: function(roomMembers) {
         const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
             return (

src/components/views/elements/MessageEditor.js

@@ -0,0 +1,240 @@
+/*
+Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 sdk from '../../../index';
+import {_t} from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import dis from '../../../dispatcher';
+import EditorModel from '../../../editor/model';
+import {setCaretPosition} from '../../../editor/caret';
+import {getCaretOffsetAndText} from '../../../editor/dom';
+import {htmlSerializeIfNeeded, textSerialize} from '../../../editor/serialize';
+import {findEditableEvent} from '../../../utils/EventUtils';
+import {parseEvent} from '../../../editor/deserialize';
+import Autocomplete from '../rooms/Autocomplete';
+import {PartCreator} from '../../../editor/parts';
+import {renderModel} from '../../../editor/render';
+import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+import classNames from 'classnames';
+
+export default class MessageEditor extends React.Component {
+    static propTypes = {
+        // the message event being edited
+        event: PropTypes.instanceOf(MatrixEvent).isRequired,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        const room = this._getRoom();
+        const partCreator = new PartCreator(
+            () => this._autocompleteRef,
+            query => this.setState({query}),
+            room,
+        );
+        this.model = new EditorModel(
+            parseEvent(this.props.event, room),
+            partCreator,
+            this._updateEditorState,
+        );
+        this.state = {
+            autoComplete: null,
+            room,
+        };
+        this._editorRef = null;
+        this._autocompleteRef = null;
+        this._hasModifications = false;
+    }
+
+    _getRoom() {
+        return this.context.matrixClient.getRoom(this.props.event.getRoomId());
+    }
+
+    _updateEditorState = (caret) => {
+        renderModel(this._editorRef, this.model);
+        if (caret) {
+            try {
+                setCaretPosition(this._editorRef, this.model, caret);
+            } catch (err) {
+                console.error(err);
+            }
+        }
+        this.setState({autoComplete: this.model.autoComplete});
+    }
+
+    _onInput = (event) => {
+        this._hasModifications = true;
+        const sel = document.getSelection();
+        const {caret, text} = getCaretOffsetAndText(this._editorRef, sel);
+        this.model.update(text, event.inputType, caret);
+    }
+
+    _isCaretAtStart() {
+        const {caret} = getCaretOffsetAndText(this._editorRef, document.getSelection());
+        return caret.offset === 0;
+    }
+
+    _isCaretAtEnd() {
+        const {caret, text} = getCaretOffsetAndText(this._editorRef, document.getSelection());
+        return caret.offset === text.length;
+    }
+
+    _onKeyDown = (event) => {
+        // insert newline on Shift+Enter
+        if (event.shiftKey && event.key === "Enter") {
+            event.preventDefault(); // just in case the browser does support this
+            document.execCommand("insertHTML", undefined, "\n");
+            return;
+        }
+        // autocomplete or enter to send below shouldn't have any modifier keys pressed.
+        if (event.metaKey || event.altKey || event.shiftKey) {
+            return;
+        }
+        if (this.model.autoComplete) {
+            const autoComplete = this.model.autoComplete;
+            switch (event.key) {
+                case "Enter":
+                    autoComplete.onEnter(event); break;
+                case "ArrowUp":
+                    autoComplete.onUpArrow(event); break;
+                case "ArrowDown":
+                    autoComplete.onDownArrow(event); break;
+                case "Tab":
+                    autoComplete.onTab(event); break;
+                case "Escape":
+                    autoComplete.onEscape(event); break;
+                default:
+                    return; // don't preventDefault on anything else
+            }
+            event.preventDefault();
+        } else if (event.key === "Enter") {
+            this._sendEdit();
+            event.preventDefault();
+        } else if (event.key === "Escape") {
+            this._cancelEdit();
+        } else if (event.key === "ArrowUp") {
+            if (this._hasModifications || !this._isCaretAtStart()) {
+                return;
+            }
+            const previousEvent = findEditableEvent(this._getRoom(), false, this.props.event.getId());
+            if (previousEvent) {
+                dis.dispatch({action: 'edit_event', event: previousEvent});
+                event.preventDefault();
+            }
+        } else if (event.key === "ArrowDown") {
+            if (this._hasModifications || !this._isCaretAtEnd()) {
+                return;
+            }
+            const nextEvent = findEditableEvent(this._getRoom(), true, this.props.event.getId());
+            if (nextEvent) {
+                dis.dispatch({action: 'edit_event', event: nextEvent});
+            } else {
+                dis.dispatch({action: 'edit_event', event: null});
+                dis.dispatch({action: 'focus_composer'});
+            }
+            event.preventDefault();
+        }
+    }
+
+    _cancelEdit = () => {
+        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({action: 'focus_composer'});
+    }
+
+    _sendEdit = () => {
+        const newContent = {
+            "msgtype": "m.text",
+            "body": textSerialize(this.model),
+        };
+        const contentBody = {
+            msgtype: newContent.msgtype,
+            body: ` * ${newContent.body}`,
+        };
+        const formattedBody = htmlSerializeIfNeeded(this.model);
+        if (formattedBody) {
+            newContent.format = "org.matrix.custom.html";
+            newContent.formatted_body = formattedBody;
+            contentBody.format = newContent.format;
+            contentBody.formatted_body = ` * ${newContent.formatted_body}`;
+        }
+        const content = Object.assign({
+            "m.new_content": newContent,
+            "m.relates_to": {
+                "rel_type": "m.replace",
+                "event_id": this.props.event.getId(),
+            },
+        }, contentBody);
+
+        const roomId = this.props.event.getRoomId();
+        this.context.matrixClient.sendMessage(roomId, content);
+
+        dis.dispatch({action: "edit_event", event: null});
+        dis.dispatch({action: 'focus_composer'});
+    }
+
+    _onAutoCompleteConfirm = (completion) => {
+        this.model.autoComplete.onComponentConfirm(completion);
+    }
+
+    _onAutoCompleteSelectionChange = (completion) => {
+        this.model.autoComplete.onComponentSelectionChange(completion);
+    }
+
+    componentDidMount() {
+        this._updateEditorState();
+        setCaretPosition(this._editorRef, this.model, this.model.getPositionAtEnd());
+        this._editorRef.focus();
+    }
+
+    render() {
+        let autoComplete;
+        if (this.state.autoComplete) {
+            const query = this.state.query;
+            const queryLen = query.length;
+            autoComplete = <div className="mx_MessageEditor_AutoCompleteWrapper">
+                <Autocomplete
+                    ref={ref => this._autocompleteRef = ref}
+                    query={query}
+                    onConfirm={this._onAutoCompleteConfirm}
+                    onSelectionChange={this._onAutoCompleteSelectionChange}
+                    selection={{beginning: true, end: queryLen, start: queryLen}}
+                    room={this.state.room}
+                />
+            </div>;
+        }
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        return <div className={classNames("mx_MessageEditor", this.props.className)}>
+                { autoComplete }
+                <div
+                    className="mx_MessageEditor_editor"
+                    contentEditable="true"
+                    tabIndex="1"
+                    onInput={this._onInput}
+                    onKeyDown={this._onKeyDown}
+                    ref={ref => this._editorRef = ref}
+                    aria-label={_t("Edit message")}
+                ></div>
+                <div className="mx_MessageEditor_buttons">
+                    <AccessibleButton kind="secondary" onClick={this._cancelEdit}>{_t("Cancel")}</AccessibleButton>
+                    <AccessibleButton kind="primary" onClick={this._sendEdit}>{_t("Save")}</AccessibleButton>
+                </div>
+            </div>;
+    }
+}

src/components/views/elements/PowerSelector.js

@@ -20,6 +20,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
+import Field from "./Field";
 
 module.exports = React.createClass({
     displayName: 'PowerSelector',
@@ -32,19 +33,15 @@ module.exports = React.createClass({
         // Default user power level for the room
         usersDefault: PropTypes.number.isRequired,
 
-        // if true, the <select/> should be a 'controlled' form element and updated by React
-        // to reflect the current value, rather than left freeform.
-        // MemberInfo uses controlled; RoomSettings uses non-controlled.
-        //
-        // ignored if disabled is truthy. false by default.
-        controlled: PropTypes.bool,
-
         // should the user be able to change the value? false by default.
         disabled: PropTypes.bool,
         onChange: PropTypes.func,
 
         // Optional key to pass as the second argument to `onChange`
         powerLevelKey: PropTypes.string,
+
+        // The name to annotate the selector with
+        label: PropTypes.string,
     },
 
     getInitialState: function() {
@@ -52,6 +49,9 @@ module.exports = React.createClass({
             levelRoleMap: {},
             // List of power levels to show in the drop-down
             options: [],
+
+            customValue: this.props.value,
+            selectValue: 0,
         };
     },
 
@@ -73,65 +73,69 @@ module.exports = React.createClass({
     _initStateFromProps: function(newProps) {
         // This needs to be done now because levelRoleMap has translated strings
         const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
-        const options = Object.keys(levelRoleMap).filter((l) => {
-            return l === undefined || l <= newProps.maxValue;
+        const options = Object.keys(levelRoleMap).filter(level => {
+            return (
+                level === undefined ||
+                level <= newProps.maxValue ||
+                level == newProps.value
+            );
         });
 
+        const isCustom = levelRoleMap[newProps.value] === undefined;
+
         this.setState({
             levelRoleMap,
             options,
-            custom: levelRoleMap[newProps.value] === undefined,
+            custom: isCustom,
+            customLevel: newProps.value,
+            selectValue: isCustom ? "SELECT_VALUE_CUSTOM" : newProps.value,
         });
     },
 
     onSelectChange: function(event) {
-        this.setState({ custom: event.target.value === "SELECT_VALUE_CUSTOM" });
-        if (event.target.value !== "SELECT_VALUE_CUSTOM") {
+        const isCustom = event.target.value === "SELECT_VALUE_CUSTOM";
+        if (isCustom) {
+            this.setState({custom: true});
+        } else {
             this.props.onChange(event.target.value, this.props.powerLevelKey);
+            this.setState({selectValue: event.target.value});
         }
     },
 
-    onCustomBlur: function(event) {
-        this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
+    onCustomChange: function(event) {
+        this.setState({customValue: event.target.value});
     },
 
-    onCustomKeyDown: function(event) {
-        if (event.key == "Enter") {
-            this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
+    onCustomBlur: function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        this.props.onChange(parseInt(this.state.customValue), this.props.powerLevelKey);
+    },
+
+    onCustomKeyPress: function(event) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            event.stopPropagation();
+
+            // Do not call the onChange handler directly here - it can cause an infinite loop.
+            // Long story short, a user hits Enter to submit the value which onChange handles as
+            // raising a dialog which causes a blur which causes a dialog which causes a blur and
+            // so on. By not causing the onChange to be called here, we avoid the loop because we
+            // handle the onBlur safely.
+            event.target.blur();
         }
     },
 
     render: function() {
-        let customPicker;
+        let picker;
         if (this.state.custom) {
-            if (this.props.disabled) {
-                customPicker = <span>{ _t(
-                    "Custom of %(powerLevel)s",
-                    { powerLevel: this.props.value },
-                ) }</span>;
-            } else {
-                customPicker = <span> = <input
-                    ref="custom"
-                    type="text"
-                    size="3"
-                    defaultValue={this.props.value}
-                    onBlur={this.onCustomBlur}
-                    onKeyDown={this.onCustomKeyDown}
-                />
-                </span>;
-            }
-        }
-
-        let selectValue;
-        if (this.state.custom) {
-            selectValue = "SELECT_VALUE_CUSTOM";
-        } else {
-            selectValue = this.state.levelRoleMap[this.props.value] ?
-                this.props.value : "SELECT_VALUE_CUSTOM";
-        }
-        let select;
-        if (this.props.disabled) {
-            select = <span>{ this.state.levelRoleMap[selectValue] }</span>;
+            picker = (
+                <Field id={`powerSelector_custom_${this.props.powerLevelKey}`} type="number"
+                       label={this.props.label || _t("Power level")} max={this.props.maxValue}
+                       onBlur={this.onCustomBlur} onKeyPress={this.onCustomKeyPress} onChange={this.onCustomChange}
+                       value={String(this.state.customValue)} disabled={this.props.disabled} />
+            );
         } else {
             // Each level must have a definition in this.state.levelRoleMap
             let options = this.state.options.map((level) => {
@@ -145,20 +149,19 @@ module.exports = React.createClass({
                 return <option value={op.value} key={op.value}>{ op.text }</option>;
             });
 
-            select =
-                <select ref="select"
-                        value={this.props.controlled ? selectValue : undefined}
-                        defaultValue={!this.props.controlled ? selectValue : undefined}
-                        onChange={this.onSelectChange}>
-                    { options }
-                </select>;
+            picker = (
+                <Field id={`powerSelector_notCustom_${this.props.powerLevelKey}`} element="select"
+                       label={this.props.label || _t("Power level")} onChange={this.onSelectChange}
+                       value={String(this.state.selectValue)} disabled={this.props.disabled}>
+                    {options}
+                </Field>
+            );
         }
 
         return (
-            <span className="mx_PowerSelector">
-                { select }
-                { customPicker }
-            </span>
+            <div className="mx_PowerSelector">
+                { picker }
+            </div>
         );
     },
 });

src/components/views/elements/ReplyThread.js

@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 import dis from '../../../dispatcher';
 import {wantsDateSeparator} from '../../../DateUtils';
 import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
-import {makeEventPermalink, makeUserPermalink} from "../../../matrix-to";
+import {makeUserPermalink, RoomPermalinkCreator} from "../../../matrix-to";
 import SettingsStore from "../../../settings/SettingsStore";
 
 // This component does no cycle detection, simply because the only way to make such a cycle would be to
@@ -31,7 +31,8 @@ export default class ReplyThread extends React.Component {
         // the latest event in this chain of replies
         parentEv: PropTypes.instanceOf(MatrixEvent),
         // called when the ReplyThread contents has changed, including EventTiles thereof
-        onWidgetLoad: PropTypes.func.isRequired,
+        onHeightChanged: PropTypes.func.isRequired,
+        permalinkCreator: PropTypes.instanceOf(RoomPermalinkCreator).isRequired,
     };
 
     static contextTypes = {
@@ -62,6 +63,11 @@ export default class ReplyThread extends React.Component {
     static getParentEventId(ev) {
         if (!ev || ev.isRedacted()) return;
 
+        // XXX: For newer relations (annotations, replacements, etc.), we now
+        // have a `getRelation` helper on the event, and you might assume it
+        // could be used here for replies as well... However, the helper
+        // currently assumes the relation has a `rel_type`, which older replies
+        // do not, so this block is left as-is for now.
         const mRelatesTo = ev.getWireContent()['m.relates_to'];
         if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
             const mInReplyTo = mRelatesTo['m.in_reply_to'];
@@ -85,7 +91,7 @@ export default class ReplyThread extends React.Component {
     }
 
     // Part of Replies fallback support
-    static getNestedReplyText(ev) {
+    static getNestedReplyText(ev, permalinkCreator) {
         if (!ev) return null;
 
         let {body, formatted_body: html} = ev.getContent();
@@ -94,7 +100,7 @@ export default class ReplyThread extends React.Component {
             if (html) html = this.stripHTMLReply(html);
         }
 
-        const evLink = makeEventPermalink(ev.getRoomId(), ev.getId());
+        const evLink = permalinkCreator.forEvent(ev.getId());
         const userLink = makeUserPermalink(ev.getSender());
         const mxid = ev.getSender();
 
@@ -159,11 +165,12 @@ export default class ReplyThread extends React.Component {
         };
     }
 
-    static makeThread(parentEv, onWidgetLoad, ref) {
+    static makeThread(parentEv, onHeightChanged, permalinkCreator, ref) {
         if (!ReplyThread.getParentEventId(parentEv)) {
             return <div />;
         }
-        return <ReplyThread parentEv={parentEv} onWidgetLoad={onWidgetLoad} ref={ref} />;
+        return <ReplyThread parentEv={parentEv} onHeightChanged={onHeightChanged}
+            ref={ref} permalinkCreator={permalinkCreator} />;
     }
 
     componentWillMount() {
@@ -173,7 +180,7 @@ export default class ReplyThread extends React.Component {
     }
 
     componentDidUpdate() {
-        this.props.onWidgetLoad();
+        this.props.onHeightChanged();
     }
 
     componentWillUnmount() {
@@ -293,7 +300,8 @@ export default class ReplyThread extends React.Component {
                 { dateSep }
                 <EventTile mxEvent={ev}
                            tileShape="reply"
-                           onWidgetLoad={this.props.onWidgetLoad}
+                           onHeightChanged={this.props.onHeightChanged}
+                           permalinkCreator={this.props.permalinkCreator}
                            isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
             </blockquote>;
         });

src/components/views/elements/SettingsButton.js

@@ -1,39 +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 sdk from '../../../index';
-import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
-
-const SettingsButton = function(props) {
-    const ActionButton = sdk.getComponent('elements.ActionButton');
-    return (
-        <ActionButton action="view_user_settings"
-            label={_t("Settings")}
-            iconPath={require("../../../../res/img/icons-settings.svg")}
-            size={props.size}
-            tooltip={props.tooltip}
-        />
-    );
-};
-
-SettingsButton.propTypes = {
-    size: PropTypes.string,
-    tooltip: PropTypes.bool,
-};
-
-export default SettingsButton;

src/components/views/elements/TagTile.js

@@ -23,9 +23,11 @@ import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
 import * as ContextualMenu from '../../structures/ContextualMenu';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
 
 import FlairStore from '../../../stores/FlairStore';
 import GroupStore from '../../../stores/GroupStore';
+import TagOrderStore from '../../../stores/TagOrderStore';
 
 // A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
 // a thing to click on for the user to filter the visible rooms in the RoomList to:
@@ -154,7 +156,7 @@ export default React.createClass({
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+        const Tooltip = sdk.getComponent('elements.Tooltip');
         const profile = this.state.profile || {};
         const name = profile.name || this.props.tag;
         const avatarHeight = 40;
@@ -168,8 +170,18 @@ export default React.createClass({
             mx_TagTile_selected: this.props.selected,
         });
 
+        const badge = TagOrderStore.getGroupBadge(this.props.tag);
+        let badgeElement;
+        if (badge && !this.state.hover) {
+            const badgeClasses = classNames({
+                "mx_TagTile_badge": true,
+                "mx_TagTile_badgeHighlight": badge.highlight,
+            });
+            badgeElement = (<div className={badgeClasses}>{FormattingUtils.formatCount(badge.count)}</div>);
+        }
+
         const tip = this.state.hover ?
-            <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
+            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
             <div />;
         const contextButton = this.state.hover || this.state.menuDisplayed ?
             <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
@@ -186,6 +198,7 @@ export default React.createClass({
                 />
                 { tip }
                 { contextButton }
+                { badgeElement }
             </div>
         </AccessibleButton>;
     },

src/components/views/elements/TextWithTooltip.js

@@ -0,0 +1,56 @@
+/*
+ Copyright 2019 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 PropTypes from 'prop-types';
+import sdk from '../../../index';
+
+export default class TextWithTooltip extends React.Component {
+    static propTypes = {
+        class: PropTypes.string,
+        tooltip: PropTypes.string.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            hover: false,
+        };
+    }
+
+    onMouseOver = () => {
+        this.setState({hover: true});
+    };
+
+    onMouseOut = () => {
+        this.setState({hover: false});
+    };
+
+    render() {
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+
+        return (
+            <span onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} className={this.props.class}>
+                {this.props.children}
+                <Tooltip
+                    label={this.props.tooltip}
+                    visible={this.state.hover}
+                    className={"mx_TextWithTooltip_tooltip"} />
+            </span>
+        );
+    }
+}

src/components/views/elements/ToggleSwitch.js

@@ -38,6 +38,12 @@ export default class ToggleSwitch extends React.Component {
         };
     }
 
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.checked !== this.state.checked) {
+            this.setState({checked: nextProps.checked});
+        }
+    }
+
     _onClick = (e) => {
         e.stopPropagation();
         e.preventDefault();

src/components/views/elements/ToolTipButton.js

@@ -39,8 +39,8 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-        const tip = this.state.hover ? <RoomTooltip
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        const tip = this.state.hover ? <Tooltip
             className="mx_ToolTipButton_container"
             tooltipClassName="mx_ToolTipButton_helpText"
             label={this.props.helpText}

src/components/views/elements/Tooltip.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 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.
@@ -23,22 +24,31 @@ import classNames from 'classnames';
 const MIN_TOOLTIP_HEIGHT = 25;
 
 module.exports = React.createClass({
-    displayName: 'RoomTooltip',
+    displayName: 'Tooltip',
 
     propTypes: {
         // Class applied to the element used to position the tooltip
-        className: React.PropTypes.string.isRequired,
+        className: React.PropTypes.string,
         // Class applied to the tooltip itself
         tooltipClassName: React.PropTypes.string,
-        // The tooltip is derived from either the room name or a label
-        room: React.PropTypes.object,
+        // Whether the tooltip is visible or hidden.
+        // The hidden state allows animating the tooltip away via CSS.
+        // Defaults to visible if unset.
+        visible: React.PropTypes.bool,
+        // the react element to put into the tooltip
         label: React.PropTypes.node,
     },
 
+    getDefaultProps() {
+        return {
+            visible: true,
+        };
+    },
+
     // Create a wrapper for the tooltip outside the parent and attach it to the body element
     componentDidMount: function() {
         this.tooltipContainer = document.createElement("div");
-        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
+        this.tooltipContainer.className = "mx_Tooltip_wrapper";
         document.body.appendChild(this.tooltipContainer);
         window.addEventListener('scroll', this._renderTooltip, true);
 
@@ -69,6 +79,10 @@ module.exports = React.createClass({
         let offset = 0;
         if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
             offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
+        } else {
+            // The tooltip is larger than the parent height: figure out what offset
+            // we need so that we're still centered.
+            offset = Math.floor(parentBox.height - MIN_TOOLTIP_HEIGHT);
         }
         style.top = (parentBox.top - 2) + window.pageYOffset + offset;
         style.left = 6 + parentBox.right + window.pageXOffset;
@@ -85,11 +99,14 @@ module.exports = React.createClass({
         style = this._updatePosition(style);
         style.display = "block";
 
-        const tooltipClasses = classNames("mx_RoomTooltip", this.props.tooltipClassName);
+        const tooltipClasses = classNames("mx_Tooltip", this.props.tooltipClassName, {
+            "mx_Tooltip_visible": this.props.visible,
+            "mx_Tooltip_invisible": !this.props.visible,
+        });
 
         const tooltip = (
             <div className={tooltipClasses} style={style}>
-                <div className="mx_RoomTooltip_chevron" />
+                <div className="mx_Tooltip_chevron" />
                 { this.props.label }
             </div>
         );

src/components/views/elements/Validation.js

@@ -0,0 +1,131 @@
+/*
+Copyright 2019 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.
+*/
+
+/* eslint-disable babel/no-invalid-this */
+
+import classNames from 'classnames';
+
+/**
+ * Creates a validation function from a set of rules describing what to validate.
+ *
+ * @param {Function} description
+ *     Function that returns a string summary of the kind of value that will
+ *     meet the validation rules. Shown at the top of the validation feedback.
+ * @param {Object} rules
+ *     An array of rules describing how to check to input value. Each rule in an object
+ *     and may have the following properties:
+ *     - `key`: A unique ID for the rule. Required.
+ *     - `test`: A function used to determine the rule's current validity. Required.
+ *     - `valid`: Function returning text to show when the rule is valid. Only shown if set.
+ *     - `invalid`: Function returning text to show when the rule is invalid. Only shown if set.
+ * @returns {Function}
+ *     A validation function that takes in the current input value and returns
+ *     the overall validity and a feedback UI that can be rendered for more detail.
+ */
+export default function withValidation({ description, rules }) {
+    return async function onValidate({ value, focused, allowEmpty = true }) {
+        if (!value && allowEmpty) {
+            return {
+                valid: null,
+                feedback: null,
+            };
+        }
+
+        const results = [];
+        let valid = true;
+        if (rules && rules.length) {
+            for (const rule of rules) {
+                if (!rule.key || !rule.test) {
+                    continue;
+                }
+                // We're setting `this` to whichever component holds the validation
+                // function. That allows rules to access the state of the component.
+                const ruleValid = await rule.test.call(this, { value, allowEmpty });
+                valid = valid && ruleValid;
+                if (ruleValid && rule.valid) {
+                    // If the rule's result is valid and has text to show for
+                    // the valid state, show it.
+                    const text = rule.valid.call(this);
+                    if (!text) {
+                        continue;
+                    }
+                    results.push({
+                        key: rule.key,
+                        valid: true,
+                        text,
+                    });
+                } else if (!ruleValid && rule.invalid) {
+                    // If the rule's result is invalid and has text to show for
+                    // the invalid state, show it.
+                    const text = rule.invalid.call(this);
+                    if (!text) {
+                        continue;
+                    }
+                    results.push({
+                        key: rule.key,
+                        valid: false,
+                        text,
+                    });
+                }
+            }
+        }
+
+        // Hide feedback when not focused
+        if (!focused) {
+            return {
+                valid,
+                feedback: null,
+            };
+        }
+
+        let details;
+        if (results && results.length) {
+            details = <ul className="mx_Validation_details">
+                {results.map(result => {
+                    const classes = classNames({
+                        "mx_Validation_detail": true,
+                        "mx_Validation_valid": result.valid,
+                        "mx_Validation_invalid": !result.valid,
+                    });
+                    return <li key={result.key} className={classes}>
+                        {result.text}
+                    </li>;
+                })}
+            </ul>;
+        }
+
+        let summary;
+        if (description) {
+            // We're setting `this` to whichever component holds the validation
+            // function. That allows rules to access the state of the component.
+            const content = description.call(this);
+            summary = <div className="mx_Validation_description">{content}</div>;
+        }
+
+        let feedback;
+        if (summary || details) {
+            feedback = <div className="mx_Validation">
+                {summary}
+                {details}
+            </div>;
+        }
+
+        return {
+            valid,
+            feedback,
+        };
+    };
+}

src/components/views/groups/GroupInviteTile.js

@@ -117,7 +117,6 @@ export default React.createClass({
 
     render: function() {
         const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const EmojiText = sdk.getComponent('elements.EmojiText');
 
         const groupName = this.props.group.name || this.props.group.groupId;
         const httpAvatarUrl = this.props.group.avatarUrl ?
@@ -129,9 +128,9 @@ export default React.createClass({
             'mx_RoomTile_badgeShown': this.state.badgeHover || this.state.menuDisplayed,
         });
 
-        const label = <EmojiText element="div" title={this.props.group.groupId} className={nameClasses} dir="auto">
+        const label = <div title={this.props.group.groupId} className={nameClasses} dir="auto">
             { groupName }
-        </EmojiText>;
+        </div>;
 
         const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed;
         const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', {
@@ -143,13 +142,14 @@ export default React.createClass({
 
         let tooltip;
         if (this.props.collapsed && this.state.hover) {
-            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" label={groupName} dir="auto" />;
+            const Tooltip = sdk.getComponent("elements.Tooltip");
+            tooltip = <Tooltip className="mx_RoomTile_tooltip" label={groupName} dir="auto" />;
         }
 
         const classes = classNames('mx_RoomTile mx_RoomTile_highlight', {
             'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
             'mx_RoomTile_selected': this.state.selected,
+            'mx_GroupInviteTile': true,
         });
 
         return (

src/components/views/groups/GroupMemberInfo.js

@@ -180,7 +180,6 @@ module.exports = React.createClass({
             this.props.groupMember.displayname || this.props.groupMember.userId
         );
 
-        const EmojiText = sdk.getComponent('elements.EmojiText');
         const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
         return (
             <div className="mx_MemberInfo">
@@ -189,7 +188,7 @@ module.exports = React.createClass({
                         <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
                     { avatarElement }
-                    <EmojiText element="h2">{ groupMemberName }</EmojiText>
+                    <h2>{ groupMemberName }</h2>
 
                     <div className="mx_MemberInfo_profile">
                         <div className="mx_MemberInfo_profileField">

src/components/views/groups/GroupPublicityToggle.js

@@ -68,7 +68,9 @@ export default React.createClass({
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
         return <div className="mx_GroupPublicity_toggle">
-            <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
+            <GroupTile groupId={this.props.groupId} showDescription={false}
+                       avatarHeight={40} draggable={false}
+            />
             <ToggleSwitch checked={this.state.isGroupPublicised}
                           disabled={!this.state.ready || this.state.busy}
                           onChange={this._onPublicityToggle} />

src/components/views/groups/GroupRoomInfo.js

@@ -149,7 +149,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
@@ -221,7 +220,7 @@ module.exports = React.createClass({
                     </AccessibleButton>
                     { avatarElement }
 
-                    <EmojiText element="h2">{ groupRoomName }</EmojiText>
+                    <h2>{ groupRoomName }</h2>
 
                     <div className="mx_MemberInfo_profile">
                         <div className="mx_MemberInfo_profileField">

src/components/views/groups/GroupTile.js

@@ -33,6 +33,7 @@ const GroupTile = React.createClass({
         showDescription: PropTypes.bool,
         // Height of the group avatar in pixels
         avatarHeight: PropTypes.number,
+        draggable: PropTypes.bool,
     },
 
     contextTypes: {
@@ -49,6 +50,7 @@ const GroupTile = React.createClass({
         return {
             showDescription: true,
             avatarHeight: 50,
+            draggable: true,
         };
     },
 
@@ -78,54 +80,54 @@ const GroupTile = React.createClass({
             <div className="mx_GroupTile_desc">{ profile.shortDescription }</div> :
             <div />;
         const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
-            profile.avatarUrl, avatarHeight, avatarHeight, "crop",
-        ) : null;
+            profile.avatarUrl, avatarHeight, avatarHeight, "crop") : null;
+
+        let avatarElement = (
+            <div className="mx_GroupTile_avatar">
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.groupId}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight} />
+            </div>
+        );
+        if (this.props.draggable) {
+            const avatarClone = avatarElement;
+            avatarElement = (
+                <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
+                    { (droppableProvided, droppableSnapshot) => (
+                        <div ref={droppableProvided.innerRef}>
+                            <Draggable
+                                key={"GroupTile " + this.props.groupId}
+                                draggableId={"GroupTile " + this.props.groupId}
+                                index={this.props.groupId}
+                                type="draggable-TagTile"
+                            >
+                                { (provided, snapshot) => (
+                                    <div>
+                                        <div
+                                            ref={provided.innerRef}
+                                            {...provided.draggableProps}
+                                            {...provided.dragHandleProps}
+                                        >
+                                            {avatarClone}
+                                        </div>
+                                        { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
+                                        { provided.placeholder ? avatarClone : <div /> }
+                                    </div>
+                                ) }
+                            </Draggable>
+                        </div>
+                    ) }
+                </Droppable>
+            );
+        }
+
         // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
         // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
         return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
-            <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
-                { (droppableProvided, droppableSnapshot) => (
-                    <div ref={droppableProvided.innerRef}>
-                        <Draggable
-                            key={"GroupTile " + this.props.groupId}
-                            draggableId={"GroupTile " + this.props.groupId}
-                            index={this.props.groupId}
-                            type="draggable-TagTile"
-                        >
-                            { (provided, snapshot) => (
-                                <div>
-                                    <div
-                                        ref={provided.innerRef}
-                                        {...provided.draggableProps}
-                                        {...provided.dragHandleProps}
-                                    >
-                                        <div className="mx_GroupTile_avatar">
-                                            <BaseAvatar
-                                                name={name}
-                                                idName={this.props.groupId}
-                                                url={httpUrl}
-                                                width={avatarHeight}
-                                                height={avatarHeight} />
-                                        </div>
-                                    </div>
-                                    { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
-                                    { provided.placeholder ?
-                                        <div className="mx_GroupTile_avatar">
-                                            <BaseAvatar
-                                                name={name}
-                                                idName={this.props.groupId}
-                                                url={httpUrl}
-                                                width={avatarHeight}
-                                                height={avatarHeight} />
-                                        </div> :
-                                        <div />
-                                    }
-                                </div>
-                            ) }
-                        </Draggable>
-                    </div>
-                ) }
-            </Droppable>
+            { avatarElement }
             <div className="mx_GroupTile_profile">
                 <div className="mx_GroupTile_name">{ name }</div>
                 { descElement }

src/components/views/messages/MFileBody.js

@@ -145,6 +145,7 @@ function remoteRender(event) {
     a.target = data.target;
     a.download = data.download;
     a.style = data.style;
+    a.style.fontFamily = "Arial, Helvetica, Sans-Serif";
     a.href = window.URL.createObjectURL(data.blob);
     a.appendChild(img);
     a.appendChild(document.createTextNode(data.textContent));
@@ -203,6 +204,17 @@ module.exports = React.createClass({
         };
     },
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+        /* already decrypted blob */
+        decryptedBlob: PropTypes.object,
+        /* called when the download link iframe is shown */
+        onHeightChanged: PropTypes.func,
+        /* the shape of the tile, used */
+        tileShape: PropTypes.string,
+    },
+
     contextTypes: {
         appConfig: PropTypes.object,
     },
@@ -248,6 +260,12 @@ module.exports = React.createClass({
         this.tint();
     },
 
+    componentDidUpdate: function(prevProps, prevState) {
+        if (this.props.onHeightChanged && !prevState.decryptedBlob && this.state.decryptedBlob) {
+            this.props.onHeightChanged();
+        }
+    },
+
     componentWillUnmount: function() {
         // Remove this from the list of mounted components
         delete mounts[this.id];
@@ -277,6 +295,8 @@ module.exports = React.createClass({
         const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
         const contentUrl = this._getContentUrl();
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const fileSize = content.info ? content.info.size : null;
+        const fileType = content.info ? content.info.mimetype : "application/octet-stream";
 
         if (isEncrypted) {
             if (this.state.decryptedBlob === null) {
@@ -355,6 +375,50 @@ module.exports = React.createClass({
                 </span>
             );
         } else if (contentUrl) {
+            const downloadProps = {
+                target: "_blank",
+                rel: "noopener",
+
+                // We set the href regardless of whether or not we intercept the download
+                // because we don't really want to convert the file to a blob eagerly, and
+                // still want "open in new tab" and "save link as" to work.
+                href: contentUrl,
+            };
+
+            // Blobs can only have up to 500mb, so if the file reports as being too large then
+            // we won't try and convert it. Likewise, if the file size is unknown then we'll assume
+            // it is too big. There is the risk of the reported file size and the actual file size
+            // being different, however the user shouldn't normally run into this problem.
+            const fileTooBig = typeof(fileSize) === 'number' ? fileSize > 524288000 : true;
+
+            if (["application/pdf"].includes(fileType) && !fileTooBig) {
+                // We want to force a download on this type, so use an onClick handler.
+                downloadProps["onClick"] = (e) => {
+                    console.log(`Downloading ${fileType} as blob (unencrypted)`);
+
+                    // Avoid letting the <a> do its thing
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    // Start a fetch for the download
+                    // Based upon https://stackoverflow.com/a/49500465
+                    fetch(contentUrl).then((response) => response.blob()).then((blob) => {
+                        const blobUrl = URL.createObjectURL(blob);
+
+                        // We have to create an anchor to download the file
+                        const tempAnchor = document.createElement('a');
+                        tempAnchor.download = fileName;
+                        tempAnchor.href = blobUrl;
+                        document.body.appendChild(tempAnchor); // for firefox: https://stackoverflow.com/a/32226068
+                        tempAnchor.click();
+                        tempAnchor.remove();
+                    });
+                };
+            } else {
+                // Else we are hoping the browser will do the right thing
+                downloadProps["download"] = fileName;
+            }
+
             // If the attachment is not encrypted then we check whether we
             // are being displayed in the room timeline or in a list of
             // files in the right hand side of the screen.
@@ -362,7 +426,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MFileBody_download">
-                            <a className="mx_MFileBody_downloadLink" href={contentUrl} download={fileName} target="_blank">
+                            <a className="mx_MFileBody_downloadLink" {...downloadProps}>
                                 { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
@@ -375,7 +439,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MFileBody_download">
-                            <a href={contentUrl} download={fileName} target="_blank" rel="noopener">
+                            <a {...downloadProps}>
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage" />
                                 { _t("Download %(text)s", { text: text }) }
                             </a>

src/components/views/messages/MImageBody.js

@@ -34,7 +34,7 @@ export default class MImageBody extends React.Component {
         mxEvent: PropTypes.object.isRequired,
 
         /* called when the image has loaded */
-        onWidgetLoad: PropTypes.func.isRequired,
+        onHeightChanged: PropTypes.func.isRequired,
 
         /* the maximum image height to use */
         maxImageHeight: PropTypes.number,
@@ -144,13 +144,13 @@ export default class MImageBody extends React.Component {
     }
 
     onImageLoad() {
-        this.props.onWidgetLoad();
+        this.props.onHeightChanged();
 
         let loadedImageDimensions;
 
         if (this.refs.image) {
             const { naturalWidth, naturalHeight } = this.refs.image;
-
+            // this is only used as a fallback in case content.info.w/h is missing
             loadedImageDimensions = { naturalWidth, naturalHeight };
         }
 
@@ -167,6 +167,14 @@ export default class MImageBody extends React.Component {
     }
 
     _getThumbUrl() {
+        // FIXME: the dharma skin lets images grow as wide as you like, rather than capped to 800x600.
+        // So either we need to support custom timeline widths here, or reimpose the cap, otherwise the
+        // thumbnail resolution will be unnecessarily reduced.
+        // custom timeline widths seems preferable.
+        const pixelRatio = window.devicePixelRatio;
+        const thumbWidth = Math.round(800 * pixelRatio);
+        const thumbHeight = Math.round(600 * pixelRatio);
+
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             // Don't use the thumbnail for clients wishing to autoplay gifs.
@@ -175,14 +183,67 @@ export default class MImageBody extends React.Component {
             }
             return this.state.decryptedUrl;
         } else if (content.info && content.info.mimetype === "image/svg+xml" && content.info.thumbnail_url) {
-            // special case to return client-generated thumbnails for SVGs, if any,
+            // special case to return clientside sender-generated thumbnails for SVGs, if any,
             // given we deliberately don't thumbnail them serverside to prevent
             // billion lol attacks and similar
             return this.context.matrixClient.mxcUrlToHttp(
-                content.info.thumbnail_url, 800, 600,
+                content.info.thumbnail_url,
+                thumbWidth,
+                thumbHeight,
             );
         } else {
-            return this.context.matrixClient.mxcUrlToHttp(content.url, 800, 600);
+            // we try to download the correct resolution
+            // for hi-res images (like retina screenshots).
+            // synapse only supports 800x600 thumbnails for now though,
+            // so we'll need to download the original image for this to work
+            // well for now. First, let's try a few cases that let us avoid
+            // downloading the original, including:
+            //   - When displaying a GIF, we always want to thumbnail so that we can
+            //     properly respect the user's GIF autoplay setting (which relies on
+            //     thumbnailing to produce the static preview image)
+            //   - On a low DPI device, always thumbnail to save bandwidth
+            //   - If there's no sizing info in the event, default to thumbnail
+            const info = content.info;
+            if (
+                this._isGif() ||
+                pixelRatio === 1.0 ||
+                (!info || !info.w || !info.h || !info.size)
+            ) {
+                return this.context.matrixClient.mxcUrlToHttp(content.url, thumbWidth, thumbHeight);
+            } else {
+                // we should only request thumbnails if the image is bigger than 800x600
+                // (or 1600x1200 on retina) otherwise the image in the timeline will just
+                // end up resampled and de-retina'd for no good reason.
+                // Ideally the server would pregen 1600x1200 thumbnails in order to provide retina
+                // thumbnails, but we don't do this currently in synapse for fear of disk space.
+                // As a compromise, let's switch to non-retina thumbnails only if the original
+                // image is both physically too large and going to be massive to load in the
+                // timeline (e.g. >1MB).
+
+                const isLargerThanThumbnail = (
+                    info.w > thumbWidth ||
+                    info.h > thumbHeight
+                );
+                const isLargeFileSize = info.size > 1*1024*1024;
+
+                if (isLargeFileSize && isLargerThanThumbnail) {
+                    // image is too large physically and bytewise to clutter our timeline so
+                    // we ask for a thumbnail, despite knowing that it will be max 800x600
+                    // despite us being retina (as synapse doesn't do 1600x1200 thumbs yet).
+                    return this.context.matrixClient.mxcUrlToHttp(
+                        content.url,
+                        thumbWidth,
+                        thumbHeight,
+                    );
+                } else {
+                    // download the original image otherwise, so we can scale it client side
+                    // to take pixelRatio into account.
+                    // ( no width/height means we want the original image)
+                    return this.context.matrixClient.mxcUrlToHttp(
+                        content.url,
+                    );
+                }
+            }
         }
     }
 

src/components/views/messages/MStickerBody.js

@@ -44,9 +44,9 @@ export default class MStickerBody extends MImageBody {
 
         if (!content || !content.body || !content.info || !content.info.w) return null;
 
-        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+        const Tooltip = sdk.getComponent('elements.Tooltip');
         return <div style={{left: content.info.w + 'px'}} className="mx_MStickerBody_tooltip">
-            <RoomTooltip label={content.body} />
+            <Tooltip label={content.body} />
         </div>;
     }
 

src/components/views/messages/MVideoBody.js

@@ -33,7 +33,7 @@ module.exports = React.createClass({
         mxEvent: PropTypes.object.isRequired,
 
         /* called when the video has loaded */
-        onWidgetLoad: PropTypes.func.isRequired,
+        onHeightChanged: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -108,7 +108,7 @@ module.exports = React.createClass({
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
-                    this.props.onWidgetLoad();
+                    this.props.onHeightChanged();
                 });
             }).catch((err) => {
                 console.warn("Unable to decrypt attachment: ", err);

src/components/views/messages/MessageActionBar.js

@@ -0,0 +1,170 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import { createMenu } from '../../structures/ContextualMenu';
+import SettingsStore from '../../../settings/SettingsStore';
+import { isContentActionable, canEditContent } from '../../../utils/EventUtils';
+
+export default class MessageActionBar extends React.PureComponent {
+    static propTypes = {
+        mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
+        permalinkCreator: PropTypes.object,
+        getTile: PropTypes.func,
+        getReplyThread: PropTypes.func,
+        onFocusChange: PropTypes.func,
+    };
+
+    onFocusChange = (focused) => {
+        if (!this.props.onFocusChange) {
+            return;
+        }
+        this.props.onFocusChange(focused);
+    }
+
+    onCryptoClicked = () => {
+        const event = this.props.mxEvent;
+        Modal.createTrackedDialogAsync('Encrypted Event Dialog', '',
+            import('../../../async-components/views/dialogs/EncryptedEventDialog'),
+            {event},
+        );
+    }
+
+    onReplyClick = (ev) => {
+        dis.dispatch({
+            action: 'reply_to_event',
+            event: this.props.mxEvent,
+        });
+    }
+
+    onEditClick = (ev) => {
+        dis.dispatch({
+            action: 'edit_event',
+            event: this.props.mxEvent,
+        });
+    }
+
+    onOptionsClick = (ev) => {
+        const MessageContextMenu = sdk.getComponent('context_menus.MessageContextMenu');
+        const buttonRect = ev.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = buttonRect.right + window.pageXOffset;
+        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+
+        const { getTile, getReplyThread } = this.props;
+        const tile = getTile && getTile();
+        const replyThread = getReplyThread && getReplyThread();
+
+        let e2eInfoCallback = null;
+        if (this.props.mxEvent.isEncrypted()) {
+            e2eInfoCallback = () => this.onCryptoClicked();
+        }
+
+        createMenu(MessageContextMenu, {
+            chevronOffset: 10,
+            mxEvent: this.props.mxEvent,
+            left: x,
+            top: y,
+            permalinkCreator: this.props.permalinkCreator,
+            eventTileOps: tile && tile.getEventTileOps ? tile.getEventTileOps() : undefined,
+            collapseReplyThread: replyThread && replyThread.canCollapse() ? replyThread.collapse : undefined,
+            e2eInfoCallback: e2eInfoCallback,
+            onFinished: () => {
+                this.onFocusChange(false);
+            },
+        });
+
+        this.onFocusChange(true);
+    }
+
+    isReactionsEnabled() {
+        return SettingsStore.isFeatureEnabled("feature_reactions");
+    }
+
+    isEditingEnabled() {
+        return SettingsStore.isFeatureEnabled("feature_message_editing");
+    }
+
+    renderAgreeDimension() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
+        return <ReactionDimension
+            title={_t("Agree or Disagree")}
+            options={["👍", "👎"]}
+            reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
+        />;
+    }
+
+    renderLikeDimension() {
+        if (!this.isReactionsEnabled()) {
+            return null;
+        }
+
+        const ReactionDimension = sdk.getComponent('messages.ReactionDimension');
+        return <ReactionDimension
+            title={_t("Like or Dislike")}
+            options={["🙂", "😔"]}
+            reactions={this.props.reactions}
+            mxEvent={this.props.mxEvent}
+        />;
+    }
+
+    render() {
+        let agreeDimensionReactionButtons;
+        let likeDimensionReactionButtons;
+        let replyButton;
+        let editButton;
+
+        if (isContentActionable(this.props.mxEvent)) {
+            agreeDimensionReactionButtons = this.renderAgreeDimension();
+            likeDimensionReactionButtons = this.renderLikeDimension();
+            replyButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_replyButton"
+                title={_t("Reply")}
+                onClick={this.onReplyClick}
+            />;
+        }
+        if (this.isEditingEnabled() && canEditContent(this.props.mxEvent)) {
+            editButton = <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_editButton"
+                title={_t("Edit")}
+                onClick={this.onEditClick}
+            />;
+        }
+
+        return <div className="mx_MessageActionBar">
+            {agreeDimensionReactionButtons}
+            {likeDimensionReactionButtons}
+            {replyButton}
+            {editButton}
+            <span className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+                title={_t("Options")}
+                onClick={this.onOptionsClick}
+            />
+        </div>;
+    }
+}

src/components/views/messages/MessageEvent.js

@@ -37,7 +37,7 @@ module.exports = React.createClass({
         showUrlPreview: PropTypes.bool,
 
         /* callback called when dynamic content in events are loaded */
-        onWidgetLoad: PropTypes.func,
+        onHeightChanged: PropTypes.func,
 
         /* the shape of the tile, used */
         tileShape: PropTypes.string,
@@ -89,6 +89,8 @@ module.exports = React.createClass({
             showUrlPreview={this.props.showUrlPreview}
             tileShape={this.props.tileShape}
             maxImageHeight={this.props.maxImageHeight}
-            onWidgetLoad={this.props.onWidgetLoad} />;
+            replacingEventId={this.props.replacingEventId}
+            isEditing={this.props.isEditing}
+            onHeightChanged={this.props.onHeightChanged} />;
     },
 });

src/components/views/messages/ReactionDimension.js

@@ -0,0 +1,176 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default class ReactionDimension extends React.PureComponent {
+    static propTypes = {
+        mxEvent: PropTypes.object.isRequired,
+        // Array of strings containing the emoji for each option
+        options: PropTypes.array.isRequired,
+        title: PropTypes.string,
+        // The Relations model from the JS SDK for reactions
+        reactions: PropTypes.object,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = this.getSelection();
+
+        if (props.reactions) {
+            props.reactions.on("Relations.add", this.onReactionsChange);
+            props.reactions.on("Relations.remove", this.onReactionsChange);
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.remove", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.add",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.remove",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        this.setState(this.getSelection());
+    }
+
+    getSelection() {
+        const myReactions = this.getMyReactions();
+        if (!myReactions) {
+            return {
+                selectedOption: null,
+                selectedReactionEvent: null,
+            };
+        }
+        const { options } = this.props;
+        let selectedOption = null;
+        let selectedReactionEvent = null;
+        for (const option of options) {
+            const reactionForOption = myReactions.find(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
+                return mxEvent.getRelation().key === option;
+            });
+            if (!reactionForOption) {
+                continue;
+            }
+            if (selectedOption) {
+                // If there are multiple selected values (only expected to occur via
+                // non-Riot clients), then act as if none are selected.
+                return {
+                    selectedOption: null,
+                    selectedReactionEvent: null,
+                };
+            }
+            selectedOption = option;
+            selectedReactionEvent = reactionForOption;
+        }
+        return { selectedOption, selectedReactionEvent };
+    }
+
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        const myReactions = reactions.getAnnotationsBySender()[userId];
+        if (!myReactions) {
+            return null;
+        }
+        return [...myReactions.values()];
+    }
+
+    onOptionClick = (ev) => {
+        const { key } = ev.target.dataset;
+        this.toggleDimension(key);
+    }
+
+    toggleDimension(key) {
+        const { selectedOption, selectedReactionEvent } = this.state;
+        const newSelectedOption = selectedOption !== key ? key : null;
+        this.setState({
+            selectedOption: newSelectedOption,
+        });
+        if (selectedReactionEvent) {
+            MatrixClientPeg.get().redactEvent(
+                this.props.mxEvent.getRoomId(),
+                selectedReactionEvent.getId(),
+            );
+        }
+        if (newSelectedOption) {
+            MatrixClientPeg.get().sendEvent(this.props.mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": this.props.mxEvent.getId(),
+                    "key": newSelectedOption,
+                },
+            });
+        }
+    }
+
+    render() {
+        const { selectedOption } = this.state;
+        const { options } = this.props;
+
+        const items = options.map(option => {
+            const disabled = selectedOption && selectedOption !== option;
+            const classes = classNames({
+                mx_ReactionDimension_disabled: disabled,
+            });
+            return <span key={option}
+                data-key={option}
+                className={classes}
+                onClick={this.onOptionClick}
+            >
+                {option}
+            </span>;
+        });
+
+        return <span className="mx_ReactionDimension"
+            title={this.props.title}
+            aria-hidden={true}
+        >
+            {items}
+        </span>;
+    }
+}

src/components/views/messages/ReactionsRow.js

@@ -0,0 +1,129 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+
+import sdk from '../../../index';
+import { isContentActionable } from '../../../utils/EventUtils';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default class ReactionsRow extends React.PureComponent {
+    static propTypes = {
+        // The event we're displaying reactions for
+        mxEvent: PropTypes.object.isRequired,
+        // The Relations model from the JS SDK for reactions to `mxEvent`
+        reactions: PropTypes.object,
+    }
+
+    constructor(props) {
+        super(props);
+
+        if (props.reactions) {
+            props.reactions.on("Relations.add", this.onReactionsChange);
+            props.reactions.on("Relations.remove", this.onReactionsChange);
+            props.reactions.on("Relations.redaction", this.onReactionsChange);
+        }
+
+        this.state = {
+            myReactions: this.getMyReactions(),
+        };
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.reactions !== this.props.reactions) {
+            this.props.reactions.on("Relations.add", this.onReactionsChange);
+            this.props.reactions.on("Relations.remove", this.onReactionsChange);
+            this.props.reactions.on("Relations.redaction", this.onReactionsChange);
+            this.onReactionsChange();
+        }
+    }
+
+    componentWillUnmount() {
+        if (this.props.reactions) {
+            this.props.reactions.removeListener(
+                "Relations.add",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.remove",
+                this.onReactionsChange,
+            );
+            this.props.reactions.removeListener(
+                "Relations.redaction",
+                this.onReactionsChange,
+            );
+        }
+    }
+
+    onReactionsChange = () => {
+        // TODO: Call `onHeightChanged` as needed
+        this.setState({
+            myReactions: this.getMyReactions(),
+        });
+        // Using `forceUpdate` for the moment, since we know the overall set of reactions
+        // has changed (this is triggered by events for that purpose only) and
+        // `PureComponent`s shallow state / props compare would otherwise filter this out.
+        this.forceUpdate();
+    }
+
+    getMyReactions() {
+        const reactions = this.props.reactions;
+        if (!reactions) {
+            return null;
+        }
+        const userId = MatrixClientPeg.get().getUserId();
+        const myReactions = reactions.getAnnotationsBySender()[userId];
+        if (!myReactions) {
+            return null;
+        }
+        return [...myReactions.values()];
+    }
+
+    render() {
+        const { mxEvent, reactions } = this.props;
+        const { myReactions } = this.state;
+
+        if (!reactions || !isContentActionable(mxEvent)) {
+            return null;
+        }
+
+        const ReactionsRowButton = sdk.getComponent('messages.ReactionsRowButton');
+        const items = reactions.getSortedAnnotationsByKey().map(([content, events]) => {
+            const count = events.size;
+            if (!count) {
+                return null;
+            }
+            const myReactionEvent = myReactions && myReactions.find(mxEvent => {
+                if (mxEvent.isRedacted()) {
+                    return false;
+                }
+                return mxEvent.getRelation().key === content;
+            });
+            return <ReactionsRowButton
+                key={content}
+                content={content}
+                mxEvent={mxEvent}
+                reactionEvents={events}
+                myReactionEvent={myReactionEvent}
+            />;
+        });
+
+        return <div className="mx_ReactionsRow">
+            {items}
+        </div>;
+    }
+}

src/components/views/messages/ReactionsRowButton.js

@@ -0,0 +1,111 @@
+/*
+Copyright 2019 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 PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+
+export default class ReactionsRowButton extends React.PureComponent {
+    static propTypes = {
+        // The event we're displaying reactions for
+        mxEvent: PropTypes.object.isRequired,
+        // The reaction content / key / emoji
+        content: PropTypes.string.isRequired,
+        // A Set of Martix reaction events for this key
+        reactionEvents: PropTypes.object.isRequired,
+        // A possible Matrix event if the current user has voted for this type
+        myReactionEvent: PropTypes.object,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            tooltipVisible: false,
+        };
+    }
+
+    onClick = (ev) => {
+        const { mxEvent, myReactionEvent, content } = this.props;
+        if (myReactionEvent) {
+            MatrixClientPeg.get().redactEvent(
+                mxEvent.getRoomId(),
+                myReactionEvent.getId(),
+            );
+        } else {
+            MatrixClientPeg.get().sendEvent(mxEvent.getRoomId(), "m.reaction", {
+                "m.relates_to": {
+                    "rel_type": "m.annotation",
+                    "event_id": mxEvent.getId(),
+                    "key": content,
+                },
+            });
+        }
+    };
+
+    onMouseOver = () => {
+        this.setState({
+            // To avoid littering the DOM with a tooltip for every reaction,
+            // only render it on first use.
+            tooltipRendered: true,
+            tooltipVisible: true,
+        });
+    }
+
+    onMouseOut = () => {
+        this.setState({
+            tooltipVisible: false,
+        });
+    }
+
+    render() {
+        const ReactionsRowButtonTooltip =
+            sdk.getComponent('messages.ReactionsRowButtonTooltip');
+        const { content, reactionEvents, myReactionEvent } = this.props;
+
+        const count = reactionEvents.size;
+        if (!count) {
+            return null;
+        }
+
+        const classes = classNames({
+            mx_ReactionsRowButton: true,
+            mx_ReactionsRowButton_selected: !!myReactionEvent,
+        });
+
+        let tooltip;
+        if (this.state.tooltipRendered) {
+            tooltip = <ReactionsRowButtonTooltip
+                mxEvent={this.props.mxEvent}
+                content={content}
+                reactionEvents={reactionEvents}
+                visible={this.state.tooltipVisible}
+            />;
+        }
+
+        return <span className={classes}
+            onClick={this.onClick}
+            onMouseOver={this.onMouseOver}
+            onMouseOut={this.onMouseOut}
+        >
+            {content} {count}
+            {tooltip}
+        </span>;
+    }
+}

src/components/views/messages/ReactionsRowButtonTooltip.js

@@ -0,0 +1,84 @@
+/*
+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 MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import { unicodeToShortcode } from '../../../HtmlUtils';
+import { _t } from '../../../languageHandler';
+import { formatCommaSeparatedList } from '../../../utils/FormattingUtils';
+
+export default class ReactionsRowButtonTooltip extends React.PureComponent {
+    static propTypes = {
+        // The event we're displaying reactions for
+        mxEvent: PropTypes.object.isRequired,
+        // The reaction content / key / emoji
+        content: PropTypes.string.isRequired,
+        // A Set of Martix reaction events for this key
+        reactionEvents: PropTypes.object.isRequired,
+        visible: PropTypes.bool.isRequired,
+    }
+
+    render() {
+        const Tooltip = sdk.getComponent('elements.Tooltip');
+        const { content, reactionEvents, mxEvent, visible } = this.props;
+
+        const room = MatrixClientPeg.get().getRoom(mxEvent.getRoomId());
+        let tooltipLabel;
+        if (room) {
+            const senders = [];
+            for (const reactionEvent of reactionEvents) {
+                const { name } = room.getMember(reactionEvent.getSender());
+                senders.push(name);
+            }
+            const shortName = unicodeToShortcode(content);
+            tooltipLabel = <div>{_t(
+                "<reactors/><reactedWith>reacted with %(shortName)s</reactedWith>",
+                {
+                    shortName,
+                },
+                {
+                    reactors: () => {
+                        return <div className="mx_ReactionsRowButtonTooltip_senders">
+                            {formatCommaSeparatedList(senders, 6)}
+                        </div>;
+                    },
+                    reactedWith: (sub) => {
+                        if (!shortName) {
+                            return null;
+                        }
+                        return <div className="mx_ReactionsRowButtonTooltip_reactedWith">
+                            {sub}
+                        </div>;
+                    },
+                },
+            )}</div>;
+        }
+
+        let tooltip;
+        if (tooltipLabel) {
+            tooltip = <Tooltip
+                tooltipClassName="mx_Tooltip_timeline"
+                visible={visible}
+                label={tooltipLabel}
+            />;
+        }
+
+        return tooltip;
+    }
+}

src/components/views/messages/RoomCreate.js

@@ -18,8 +18,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import dis from '../../../dispatcher';
-import { makeEventPermalink } from '../../../matrix-to';
+import { RoomPermalinkCreator } from '../../../matrix-to';
 import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 module.exports = React.createClass({
     displayName: 'RoomCreate',
@@ -47,13 +48,17 @@ module.exports = React.createClass({
         if (predecessor === undefined) {
             return <div />; // We should never have been instaniated in this case
         }
+        const prevRoom = MatrixClientPeg.get().getRoom(predecessor['room_id']);
+        const permalinkCreator = new RoomPermalinkCreator(prevRoom, predecessor['room_id']);
+        permalinkCreator.load();
+        const predecessorPermalink = permalinkCreator.forEvent(predecessor['event_id']);
         return <div className="mx_CreateEvent">
-            <img className="mx_CreateEvent_image" src={require("../../../../res/img/room-continuation.svg")} />
+            <div className="mx_CreateEvent_image" />
             <div className="mx_CreateEvent_header">
                 {_t("This room is a continuation of another conversation.")}
             </div>
             <a className="mx_CreateEvent_link"
-                href={makeEventPermalink(predecessor['room_id'], predecessor['event_id'])}
+                href={predecessorPermalink}
                 onClick={this._onLinkClicked}
             >
                 {_t("Click here to see older messages.")}

src/components/views/messages/SenderProfile.js

@@ -19,11 +19,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {MatrixClient} from 'matrix-js-sdk';
-import sdk from '../../../index';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
 import { _t } from '../../../languageHandler';
-import {hashCode} from '../../../utils/FormattingUtils';
+import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 
 export default React.createClass({
     displayName: 'SenderProfile',
@@ -95,9 +94,8 @@ export default React.createClass({
     },
 
     render() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
         const {mxEvent} = this.props;
-        const colorNumber = hashCode(mxEvent.getSender()) % 8;
+        const colorClass = getUserNameColorClass(mxEvent.getSender());
         const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         const {msgtype} = mxEvent.getContent();
 
@@ -117,11 +115,11 @@ export default React.createClass({
             />;
         }
 
-        const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
+        const nameElem = name || '';
 
         // Name + flair
         const nameFlair = <span>
-            <span className={`mx_SenderProfile_name mx_SenderProfile_color${colorNumber}`}>
+            <span className={`mx_SenderProfile_name ${colorClass}`}>
                 { nameElem }
             </span>
             { flair }

src/components/views/messages/TextualBody.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -22,9 +23,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import highlight from 'highlight.js';
 import * as HtmlUtils from '../../../HtmlUtils';
-import * as linkify from 'linkifyjs';
-import linkifyElement from 'linkifyjs/element';
-import linkifyMatrix from '../../../linkify-matrix';
+import {formatDate} from '../../../DateUtils';
 import sdk from '../../../index';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import Modal from '../../../Modal';
@@ -38,8 +37,6 @@ import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 import ReplyThread from "../elements/ReplyThread";
 import {host as matrixtoHost} from '../../../matrix-to';
 
-linkifyMatrix(linkify);
-
 module.exports = React.createClass({
     displayName: 'TextualBody',
 
@@ -57,7 +54,7 @@ module.exports = React.createClass({
         showUrlPreview: PropTypes.bool,
 
         /* callback for when our widget has loaded */
-        onWidgetLoad: PropTypes.func,
+        onHeightChanged: PropTypes.func,
 
         /* the shape of the tile, used */
         tileShape: PropTypes.string,
@@ -93,12 +90,17 @@ module.exports = React.createClass({
 
     componentDidMount: function() {
         this._unmounted = false;
+        if (!this.props.isEditing) {
+            this._applyFormatting();
+        }
+    },
 
+    _applyFormatting() {
         // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
         // are still sent as plaintext URLs. If these are ever pillified in the composer,
         // we should be pillify them here by doing the linkifying BEFORE the pillifying.
         this.pillifyLinks(this.refs.content.children);
-        linkifyElement(this.refs.content, linkifyMatrix.options);
+        HtmlUtils.linkifyElement(this.refs.content);
         this.calculateUrlPreview();
 
         if (this.props.mxEvent.getContent().format === "org.matrix.custom.html") {
@@ -128,8 +130,14 @@ module.exports = React.createClass({
         }
     },
 
-    componentDidUpdate: function() {
-        this.calculateUrlPreview();
+    componentDidUpdate: function(prevProps) {
+        if (!this.props.isEditing) {
+            const stoppedEditing = prevProps.isEditing && !this.props.isEditing;
+            const messageWasEdited = prevProps.replacingEventId !== this.props.replacingEventId;
+            if (messageWasEdited || stoppedEditing) {
+                this._applyFormatting();
+            }
+        }
     },
 
     componentWillUnmount: function() {
@@ -142,16 +150,19 @@ module.exports = React.createClass({
         // exploit that events are immutable :)
         return (nextProps.mxEvent.getId() !== this.props.mxEvent.getId() ||
                 nextProps.highlights !== this.props.highlights ||
+                nextProps.replacingEventId !== this.props.replacingEventId ||
                 nextProps.highlightLink !== this.props.highlightLink ||
                 nextProps.showUrlPreview !== this.props.showUrlPreview ||
+                nextProps.isEditing !== this.props.isEditing ||
                 nextState.links !== this.state.links ||
+                nextState.editedMarkerHovered !== this.state.editedMarkerHovered ||
                 nextState.widgetHidden !== this.state.widgetHidden);
     },
 
     calculateUrlPreview: function() {
         //console.log("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
-        if (this.props.showUrlPreview && !this.state.links.length) {
+        if (this.props.showUrlPreview) {
             let links = this.findLinks(this.refs.content.children);
             if (links.length) {
                 // de-dup the links (but preserve ordering)
@@ -429,17 +440,51 @@ module.exports = React.createClass({
         });
     },
 
+    _onMouseEnterEditedMarker: function() {
+        this.setState({editedMarkerHovered: true});
+    },
+
+    _onMouseLeaveEditedMarker: function() {
+        this.setState({editedMarkerHovered: false});
+    },
+
+    _renderEditedMarker: function() {
+        let editedTooltip;
+        if (this.state.editedMarkerHovered) {
+            const Tooltip = sdk.getComponent('elements.Tooltip');
+            const editEvent = this.props.mxEvent.replacingEvent();
+            const date = editEvent && formatDate(editEvent.getDate());
+            editedTooltip = <Tooltip
+                tooltipClassName="mx_Tooltip_timeline"
+                label={_t("Edited at %(date)s", {date})}
+            />;
+        }
+        return (
+            <div
+                key="editedMarker" className="mx_EventTile_edited"
+                onMouseEnter={this._onMouseEnterEditedMarker}
+                onMouseLeave={this._onMouseLeaveEditedMarker}
+            >{editedTooltip}<span>{`(${_t("edited")})`}</span></div>
+        );
+    },
+
     render: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
+        if (this.props.isEditing) {
+            const MessageEditor = sdk.getComponent('elements.MessageEditor');
+            return <MessageEditor event={this.props.mxEvent} className="mx_EventTile_content" />;
+        }
         const mxEvent = this.props.mxEvent;
         const content = mxEvent.getContent();
 
         const stripReply = ReplyThread.getParentEventId(mxEvent);
         let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
-            disableBigEmoji: !SettingsStore.getValue('TextualBody.enableBigEmoji'),
+            disableBigEmoji: content.msgtype === "m.emote" || !SettingsStore.getValue('TextualBody.enableBigEmoji'),
             // Part of Replies fallback support
             stripReplyFallback: stripReply,
         });
+        if (this.props.replacingEventId) {
+            body = [body, this._renderEditedMarker()];
+        }
 
         if (this.props.highlightLink) {
             body = <a href={this.props.highlightLink}>{ body }</a>;
@@ -456,7 +501,7 @@ module.exports = React.createClass({
                             link={link}
                             mxEvent={this.props.mxEvent}
                             onCancelClick={this.onCancelClick}
-                            onWidgetLoad={this.props.onWidgetLoad} />;
+                            onHeightChanged={this.props.onHeightChanged} />;
             });
         }
 
@@ -466,12 +511,12 @@ module.exports = React.createClass({
                 return (
                     <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
                         *&nbsp;
-                        <EmojiText
+                        <span
                             className="mx_MEmoteBody_sender"
                             onClick={this.onEmoteSenderClick}
                         >
                             { name }
-                        </EmojiText>
+                        </span>
                         &nbsp;
                         { body }
                         { widgets }

src/components/views/messages/TextualEvent.js

@@ -20,7 +20,6 @@ const React = require('react');
 import PropTypes from 'prop-types';
 
 const TextForEvent = require('../../../TextForEvent');
-import sdk from '../../../index';
 
 module.exports = React.createClass({
     displayName: 'TextualEvent',
@@ -31,11 +30,10 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const EmojiText = sdk.getComponent('elements.EmojiText');
         const text = TextForEvent.textForEvent(this.props.mxEvent);
         if (text == null || text.length === 0) return null;
         return (
-            <EmojiText element="div" className="mx_TextualEvent">{ text }</EmojiText>
+            <div className="mx_TextualEvent">{ text }</div>
         );
     },
 });

src/components/views/messages/ViewSourceEvent.js

@@ -0,0 +1,67 @@
+/*
+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 classNames from 'classnames';
+
+export default class ViewSourceEvent extends React.PureComponent {
+    static propTypes = {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            expanded: false,
+        };
+    }
+
+    onToggle = (ev) => {
+        ev.preventDefault();
+        const { expanded } = this.state;
+        this.setState({
+            expanded: !expanded,
+        });
+    }
+
+    render() {
+        const { mxEvent } = this.props;
+        const { expanded } = this.state;
+
+        let content;
+        if (expanded) {
+            content = <pre>{JSON.stringify(mxEvent, null, 4)}</pre>;
+        } else {
+            content = <code>{`{ "type": ${mxEvent.getType()} }`}</code>;
+        }
+
+        const classes = classNames("mx_ViewSourceEvent mx_EventTile_content", {
+            mx_ViewSourceEvent_expanded: expanded,
+        });
+
+        return <span className={classes}>
+            {content}
+            <a
+                className="mx_ViewSourceEvent_toggle"
+                href="#"
+                onClick={this.onToggle}
+            />
+        </span>;
+    }
+}

src/components/views/right_panel/GroupHeaderButtons.js

@@ -19,23 +19,30 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
 import HeaderButton from './HeaderButton';
 import HeaderButtons from './HeaderButtons';
 import RightPanel from '../../structures/RightPanel';
 
+const GROUP_PHASES = [
+    RightPanel.Phase.GroupMemberInfo,
+    RightPanel.Phase.GroupMemberList,
+];
+const ROOM_PHASES = [
+    RightPanel.Phase.GroupRoomList,
+    RightPanel.Phase.GroupRoomInfo,
+];
+
 export default class GroupHeaderButtons extends HeaderButtons {
     constructor(props) {
         super(props, RightPanel.Phase.GroupMemberList);
+        this._onMembersClicked = this._onMembersClicked.bind(this);
+        this._onRoomsClicked = this._onRoomsClicked.bind(this);
     }
 
     onAction(payload) {
         super.onAction(payload);
 
         if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
             if (payload.member) {
                 this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
             } else {
@@ -54,25 +61,26 @@ export default class GroupHeaderButtons extends HeaderButtons {
         }
     }
 
-    renderButtons() {
-        const groupPhases = [
-            RightPanel.Phase.GroupMemberInfo,
-            RightPanel.Phase.GroupMemberList,
-        ];
-        const roomPhases = [
-            RightPanel.Phase.GroupRoomList,
-            RightPanel.Phase.GroupRoomInfo,
-        ];
+    _onMembersClicked() {
+        this.togglePhase(RightPanel.Phase.GroupMemberList, GROUP_PHASES);
+    }
 
+    _onRoomsClicked() {
+        this.togglePhase(RightPanel.Phase.GroupRoomList, ROOM_PHASES);
+    }
+
+    renderButtons() {
         return [
-            <HeaderButton key="_groupMembersButton" title={_t('Members')} iconSrc={require("../../../../res/img/icons-people.svg")}
-                isHighlighted={this.isPhase(groupPhases)}
-                clickPhase={RightPanel.Phase.GroupMemberList}
+            <HeaderButton key="groupMembersButton" name="groupMembersButton"
+                title={_t('Members')}
+                isHighlighted={this.isPhase(GROUP_PHASES)}
+                onClick={this._onMembersClicked}
                 analytics={['Right Panel', 'Group Member List Button', 'click']}
             />,
-            <HeaderButton key="_roomsButton" title={_t('Rooms')} iconSrc={require("../../../../res/img/icons-room-nobg.svg")}
-                isHighlighted={this.isPhase(roomPhases)}
-                clickPhase={RightPanel.Phase.GroupRoomList}
+            <HeaderButton key="roomsButton" name="roomsButton"
+                title={_t('Rooms')}
+                isHighlighted={this.isPhase(ROOM_PHASES)}
+                onClick={this._onRoomsClicked}
                 analytics={['Right Panel', 'Group Room List Button', 'click']}
             />,
         ];

src/components/views/right_panel/HeaderButton.js

@@ -20,10 +20,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import dis from '../../../dispatcher';
 import Analytics from '../../../Analytics';
 import AccessibleButton from '../elements/AccessibleButton';
-import TintableSvg from '../elements/TintableSvg';
 
 export default class HeaderButton extends React.Component {
     constructor() {
@@ -33,17 +31,14 @@ export default class HeaderButton extends React.Component {
 
     onClick(ev) {
         Analytics.trackEvent(...this.props.analytics);
-        dis.dispatch({
-            action: 'view_right_panel_phase',
-            phase: this.props.clickPhase,
-            fromHeader: true,
-        });
+        this.props.onClick();
     }
 
     render() {
         const classes = classNames({
             mx_RightPanel_headerButton: true,
             mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
+            [`mx_RightPanel_${this.props.name}`]: true,
         });
 
         return <AccessibleButton
@@ -51,25 +46,23 @@ export default class HeaderButton extends React.Component {
             aria-expanded={this.props.isHighlighted}
             title={this.props.title}
             className={classes}
-            onClick={this.onClick} >
-                <TintableSvg src={this.props.iconSrc} width="20" height="20" />
-            </AccessibleButton>;
+            onClick={this.onClick}>
+        </AccessibleButton>;
     }
 }
 
 HeaderButton.propTypes = {
     // Whether this button is highlighted
     isHighlighted: PropTypes.bool.isRequired,
-    // The phase to swap to when the button is clicked
-    clickPhase: PropTypes.string.isRequired,
-    // The source file of the icon to display
-    iconSrc: PropTypes.string.isRequired,
-
+    // click handler
+    onClick: PropTypes.func.isRequired,
     // The badge to display above the icon
     badge: PropTypes.node,
     // The parameters to track the click event
     analytics: PropTypes.arrayOf(PropTypes.string).isRequired,
 
+    // Button name
+    name: PropTypes.string.isRequired,
     // Button title
     title: PropTypes.string.isRequired,
 };

src/components/views/right_panel/HeaderButtons.js

@@ -40,14 +40,36 @@ export default class HeaderButtons extends React.Component {
         dis.unregister(this.dispatcherRef);
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.collapsedRhs && this.props.collapsedRhs) {
+            this.setState({
+                phase: null,
+            });
+        }
+    }
+
     setPhase(phase, extras) {
-        // TODO: delay?
+        if (this.props.collapsedRhs) {
+            dis.dispatch({
+                action: 'show_right_panel',
+            });
+        }
         dis.dispatch(Object.assign({
             action: 'view_right_panel_phase',
             phase: phase,
         }, extras));
     }
 
+    togglePhase(phase, validPhases = [phase]) {
+        if (validPhases.includes(this.state.phase)) {
+            dis.dispatch({
+                action: 'hide_right_panel',
+            });
+        } else {
+            this.setPhase(phase);
+        }
+    }
+
     isPhase(phases) {
         if (this.props.collapsedRhs) {
             return false;
@@ -61,34 +83,15 @@ export default class HeaderButtons extends React.Component {
 
     onAction(payload) {
         if (payload.action === "view_right_panel_phase") {
-            // only actions coming from header buttons should collapse the right panel
-            if (this.state.phase === payload.phase && payload.fromHeader) {
-                dis.dispatch({
-                    action: 'hide_right_panel',
-                });
-                this.setState({
-                    phase: null,
-                });
-            } else {
-                if (this.props.collapsedRhs && payload.fromHeader) {
-                    dis.dispatch({
-                        action: 'show_right_panel',
-                    });
-                    // emit payload again as the RightPanel didn't exist up
-                    // till show_right_panel, just without the fromHeader flag
-                    // as that would hide the right panel again
-                    dis.dispatch(Object.assign({}, payload, {fromHeader: false}));
-                }
-                this.setState({
-                    phase: payload.phase,
-                });
-            }
+            this.setState({
+                phase: payload.phase,
+            });
         }
     }
 
     render() {
         // inline style as this will be swapped around in future commits
-        return <div style={{display: 'flex'}}>
+        return <div className="mx_HeaderButtons">
             { this.renderButtons() }
         </div>;
     }

src/components/views/right_panel/RoomHeaderButtons.js

@@ -19,52 +19,73 @@ limitations under the License.
 
 import React from 'react';
 import { _t } from '../../../languageHandler';
-import dis from '../../../dispatcher';
 import HeaderButton from './HeaderButton';
 import HeaderButtons from './HeaderButtons';
 import RightPanel from '../../structures/RightPanel';
 
+const MEMBER_PHASES = [
+    RightPanel.Phase.RoomMemberList,
+    RightPanel.Phase.RoomMemberInfo,
+    RightPanel.Phase.Room3pidMemberInfo,
+];
+
 export default class RoomHeaderButtons extends HeaderButtons {
     constructor(props) {
         super(props, RightPanel.Phase.RoomMemberList);
+        this._onMembersClicked = this._onMembersClicked.bind(this);
+        this._onFilesClicked = this._onFilesClicked.bind(this);
+        this._onNotificationsClicked = this._onNotificationsClicked.bind(this);
     }
 
     onAction(payload) {
         super.onAction(payload);
         if (payload.action === "view_user") {
-            dis.dispatch({
-                action: 'show_right_panel',
-            });
             if (payload.member) {
                 this.setPhase(RightPanel.Phase.RoomMemberInfo, {member: payload.member});
             } else {
                 this.setPhase(RightPanel.Phase.RoomMemberList);
             }
-        } else if (payload.action === "view_room") {
+        } else if (payload.action === "view_room" && !this.props.collapsedRhs) {
             this.setPhase(RightPanel.Phase.RoomMemberList);
+        } else if (payload.action === "view_3pid_invite") {
+            if (payload.event) {
+                this.setPhase(RightPanel.Phase.Room3pidMemberInfo, {event: payload.event});
+            } else {
+                this.setPhase(RightPanel.Phase.RoomMemberList);
+            }
         }
     }
 
-    renderButtons() {
-        const membersPhases = [
-            RightPanel.Phase.RoomMemberList,
-            RightPanel.Phase.RoomMemberInfo,
-        ];
+    _onMembersClicked() {
+        this.togglePhase(RightPanel.Phase.RoomMemberList, MEMBER_PHASES);
+    }
 
+    _onFilesClicked() {
+        this.togglePhase(RightPanel.Phase.FilePanel);
+    }
+
+    _onNotificationsClicked() {
+        this.togglePhase(RightPanel.Phase.NotificationPanel);
+    }
+
+    renderButtons() {
         return [
-            <HeaderButton key="_membersButton" title={_t('Members')} iconSrc={require("../../../../res/img/feather-icons/user.svg")}
-                isHighlighted={this.isPhase(membersPhases)}
-                clickPhase={RightPanel.Phase.RoomMemberList}
+            <HeaderButton key="membersButton" name="membersButton"
+                title={_t('Members')}
+                isHighlighted={this.isPhase(MEMBER_PHASES)}
+                onClick={this._onMembersClicked}
                 analytics={['Right Panel', 'Member List Button', 'click']}
             />,
-            <HeaderButton key="_filesButton" title={_t('Files')} iconSrc={require("../../../../res/img/feather-icons/files.svg")}
+            <HeaderButton key="filesButton" name="filesButton"
+                title={_t('Files')}
                 isHighlighted={this.isPhase(RightPanel.Phase.FilePanel)}
-                clickPhase={RightPanel.Phase.FilePanel}
+                onClick={this._onFilesClicked}
                 analytics={['Right Panel', 'File List Button', 'click']}
             />,
-            <HeaderButton key="_notifsButton" title={_t('Notifications')} iconSrc={require("../../../../res/img/feather-icons/notifications.svg")}
+            <HeaderButton key="notifsButton" name="notifsButton"
+                title={_t('Notifications')}
                 isHighlighted={this.isPhase(RightPanel.Phase.NotificationPanel)}
-                clickPhase={RightPanel.Phase.NotificationPanel}
+                onClick={this._onNotificationsClicked}
                 analytics={['Right Panel', 'Notification List Button', 'click']}
             />,
         ];

src/components/views/room_settings/AliasSettings.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 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.
@@ -15,112 +15,55 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Promise from 'bluebird';
 const React = require('react');
 import PropTypes from 'prop-types';
-const ObjectUtils = require("../../../ObjectUtils");
 const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require("../../../index");
 import { _t } from '../../../languageHandler';
 import Field from "../elements/Field";
+import ErrorDialog from "../dialogs/ErrorDialog";
 const Modal = require("../../../Modal");
 
-module.exports = React.createClass({
-    displayName: 'AliasSettings',
-
-    propTypes: {
+export default class AliasSettings extends React.Component {
+    static propTypes = {
         roomId: PropTypes.string.isRequired,
         canSetCanonicalAlias: PropTypes.bool.isRequired,
         canSetAliases: PropTypes.bool.isRequired,
         aliasEvents: PropTypes.array, // [MatrixEvent]
         canonicalAliasEvent: PropTypes.object, // MatrixEvent
-    },
+    };
 
-    getDefaultProps: function() {
-        return {
-            canSetAliases: false,
-            canSetCanonicalAlias: false,
-            aliasEvents: [],
-        };
-    },
+    static defaultProps = {
+        canSetAliases: false,
+        canSetCanonicalAlias: false,
+        aliasEvents: [],
+    };
 
-    getInitialState: function() {
-        return this.recalculateState(this.props.aliasEvents, this.props.canonicalAliasEvent);
-    },
-
-    recalculateState: function(aliasEvents, canonicalAliasEvent) {
-        aliasEvents = aliasEvents || [];
+    constructor(props) {
+        super(props);
 
         const state = {
             domainToAliases: {}, // { domain.com => [#alias1:domain.com, #alias2:domain.com] }
             remoteDomains: [], // [ domain.com, foobar.com ]
             canonicalAlias: null, // #canonical:domain.com
+            updatingCanonicalAlias: false,
+            newItem: "",
         };
+
         const localDomain = MatrixClientPeg.get().getDomain();
-
-        state.domainToAliases = this.aliasEventsToDictionary(aliasEvents);
-
+        state.domainToAliases = this.aliasEventsToDictionary(props.aliasEvents || []);
         state.remoteDomains = Object.keys(state.domainToAliases).filter((domain) => {
             return domain !== localDomain && state.domainToAliases[domain].length > 0;
         });
 
-        if (canonicalAliasEvent) {
-            state.canonicalAlias = canonicalAliasEvent.getContent().alias;
+        if (props.canonicalAliasEvent) {
+            state.canonicalAlias = props.canonicalAliasEvent.getContent().alias;
         }
 
-        return state;
-    },
+        this.state = state;
+    }
 
-    saveSettings: function() {
-        let promises = [];
-
-        // save new aliases for m.room.aliases
-        const aliasOperations = this.getAliasOperations();
-        for (let i = 0; i < aliasOperations.length; i++) {
-            const alias_operation = aliasOperations[i];
-            console.log("alias %s %s", alias_operation.place, alias_operation.val);
-            switch (alias_operation.place) {
-                case 'add':
-                    promises.push(
-                        MatrixClientPeg.get().createAlias(
-                            alias_operation.val, this.props.roomId,
-                        ),
-                    );
-                    break;
-                case 'del':
-                    promises.push(
-                        MatrixClientPeg.get().deleteAlias(
-                            alias_operation.val,
-                        ),
-                    );
-                    break;
-                default:
-                    console.log("Unknown alias operation, ignoring: " + alias_operation.place);
-            }
-        }
-
-        let oldCanonicalAlias = null;
-        if (this.props.canonicalAliasEvent) {
-            oldCanonicalAlias = this.props.canonicalAliasEvent.getContent().alias;
-        }
-
-        const newCanonicalAlias = this.state.canonicalAlias;
-
-        if (this.props.canSetCanonicalAlias && oldCanonicalAlias !== newCanonicalAlias) {
-            console.log("AliasSettings: Updating canonical alias");
-            promises = [Promise.all(promises).then(
-                MatrixClientPeg.get().sendStateEvent(
-                    this.props.roomId, "m.room.canonical_alias", {
-                        alias: newCanonicalAlias,
-                    }, "",
-                ),
-            )];
-        }
-
-        return promises;
-    },
-
-    aliasEventsToDictionary: function(aliasEvents) { // m.room.alias events
+    aliasEventsToDictionary(aliasEvents) { // m.room.alias events
         const dict = {};
         aliasEvents.forEach((event) => {
             dict[event.getStateKey()] = (
@@ -128,35 +71,72 @@ module.exports = React.createClass({
             );
         });
         return dict;
-    },
+    }
 
-    isAliasValid: function(alias) {
+    isAliasValid(alias) {
         // XXX: FIXME https://github.com/matrix-org/matrix-doc/issues/668
-        return (alias.match(/^#([^\/:,]+?):(.+)$/) && encodeURI(alias) === alias);
-    },
+        return (alias.match(/^#([^/:,]+?):(.+)$/) && encodeURI(alias) === alias);
+    }
 
-    getAliasOperations: function() {
-        const oldAliases = this.aliasEventsToDictionary(this.props.aliasEvents);
-        return ObjectUtils.getKeyValueArrayDiffs(oldAliases, this.state.domainToAliases);
-    },
+    changeCanonicalAlias(alias) {
+        if (!this.props.canSetCanonicalAlias) return;
 
-    onNewAliasChanged: function(value) {
+        this.setState({
+            canonicalAlias: alias,
+            updatingCanonicalAlias: true,
+        });
+
+        const eventContent = {};
+        if (alias) eventContent["alias"] = alias;
+
+        MatrixClientPeg.get().sendStateEvent(this.props.roomId, "m.room.canonical_alias",
+            eventContent, "").catch((err) => {
+            console.error(err);
+            Modal.createTrackedDialog('Error updating main address', '', ErrorDialog, {
+                title: _t("Error updating main address"),
+                description: _t(
+                    "There was an error updating the room's main address. It may not be allowed by the server " +
+                    "or a temporary failure occurred.",
+                ),
+            });
+        }).finally(() => {
+            this.setState({updatingCanonicalAlias: false});
+        });
+    }
+
+    onNewAliasChanged = (value) => {
         this.setState({newAlias: value});
-    },
+    };
 
-    onLocalAliasAdded: function(alias) {
+    onLocalAliasAdded = (alias) => {
         if (!alias || alias.length === 0) return; // ignore attempts to create blank aliases
 
         const localDomain = MatrixClientPeg.get().getDomain();
         if (!alias.includes(':')) alias += ':' + localDomain;
         if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
-            this.state.domainToAliases[localDomain] = this.state.domainToAliases[localDomain] || [];
-            this.state.domainToAliases[localDomain].push(alias);
+            MatrixClientPeg.get().createAlias(alias, this.props.roomId).then(() => {
+                const localAliases = this.state.domainToAliases[localDomain] || [];
+                const domainAliases = Object.assign({}, this.state.domainToAliases);
+                domainAliases[localDomain] = [...localAliases, alias];
 
-            this.setState({
-                domainToAliases: this.state.domainToAliases,
-                // Reset the add field
-                newAlias: "",
+                this.setState({
+                    domainToAliases: domainAliases,
+                    // Reset the add field
+                    newAlias: "",
+                });
+
+                if (!this.state.canonicalAlias) {
+                    this.changeCanonicalAlias(alias);
+                }
+            }).catch((err) => {
+                console.error(err);
+                Modal.createTrackedDialog('Error creating alias', '', ErrorDialog, {
+                    title: _t("Error creating alias"),
+                    description: _t(
+                        "There was an error creating that alias. It may not be allowed by the server " +
+                        "or a temporary failure occurred.",
+                    ),
+                });
             });
         } else {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
@@ -165,130 +145,102 @@ module.exports = React.createClass({
                 description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
             });
         }
+    };
 
-        if (!this.props.canonicalAlias) {
-            this.setState({
-                canonicalAlias: alias,
-            });
-        }
-    },
-
-    onLocalAliasChanged: function(alias, index) {
-        if (alias === "") return; // hit the delete button to delete please
+    onLocalAliasDeleted = (index) => {
         const localDomain = MatrixClientPeg.get().getDomain();
-        if (!alias.includes(':')) alias += ':' + localDomain;
-        if (this.isAliasValid(alias) && alias.endsWith(localDomain)) {
-            this.state.domainToAliases[localDomain][index] = alias;
-        } else {
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Invalid address format', '', ErrorDialog, {
-                title: _t('Invalid address format'),
-                description: _t('\'%(alias)s\' is not a valid format for an address', { alias: alias }),
+
+        const alias = this.state.domainToAliases[localDomain][index];
+
+        // TODO: In future, we should probably be making sure that the alias actually belongs
+        // to this room. See https://github.com/vector-im/riot-web/issues/7353
+        MatrixClientPeg.get().deleteAlias(alias).then(() => {
+            const localAliases = this.state.domainToAliases[localDomain].filter((a) => a !== alias);
+            const domainAliases = Object.assign({}, this.state.domainToAliases);
+            domainAliases[localDomain] = localAliases;
+
+            this.setState({domainToAliases: domainAliases});
+
+            if (this.state.canonicalAlias === alias) {
+                this.changeCanonicalAlias(null);
+            }
+        }).catch((err) => {
+            console.error(err);
+            Modal.createTrackedDialog('Error removing alias', '', ErrorDialog, {
+                title: _t("Error removing alias"),
+                description: _t(
+                    "There was an error removing that alias. It may no longer exist or a temporary " +
+                    "error occurred.",
+                ),
             });
-        }
-    },
-
-    onLocalAliasDeleted: function(index) {
-        const localDomain = MatrixClientPeg.get().getDomain();
-        // It's a bit naughty to directly manipulate this.state, and React would
-        // normally whine at you, but it can't see us doing the splice.  Given we
-        // promptly setState anyway, it's just about acceptable.  The alternative
-        // would be to arbitrarily deepcopy to a temp variable and then setState
-        // that, but why bother when we can cut this corner.
-        const alias = this.state.domainToAliases[localDomain].splice(index, 1);
-        this.setState({
-            domainToAliases: this.state.domainToAliases,
         });
-        if (this.props.canonicalAlias === alias) {
-            this.setState({
-                canonicalAlias: null,
-            });
-        }
-    },
+    };
 
-    onCanonicalAliasChange: function(event) {
-        this.setState({
-            canonicalAlias: event.target.value,
-        });
-    },
+    onCanonicalAliasChange = (event) => {
+        this.changeCanonicalAlias(event.target.value);
+    };
 
-    render: function() {
-        const self = this;
-        const EditableText = sdk.getComponent("elements.EditableText");
+    render() {
         const EditableItemList = sdk.getComponent("elements.EditableItemList");
         const localDomain = MatrixClientPeg.get().getDomain();
 
-        let canonical_alias_section;
-        if (this.props.canSetCanonicalAlias) {
-            let found = false;
-            const canonicalValue = this.state.canonicalAlias || "";
-            canonical_alias_section = (
-                <Field onChange={this.onCanonicalAliasChange} value={canonicalValue}
-                       element='select' id='canonicalAlias' label={_t('Main address')}>
-                    <option value="" key="unset">{ _t('not specified') }</option>
-                    {
-                        Object.keys(self.state.domainToAliases).map((domain, i) => {
-                            return self.state.domainToAliases[domain].map((alias, j) => {
-                                if (alias === this.state.canonicalAlias) found = true;
-                                return (
-                                    <option value={alias} key={i + "_" + j}>
-                                        { alias }
-                                    </option>
-                                );
-                            });
-                        })
-                    }
-                    {
-                        found || !this.stateCanonicalAlias ? '' :
-                        <option value={ this.state.canonicalAlias } key='arbitrary'>
-                            { this.state.canonicalAlias }
-                        </option>
-                    }
-                </Field>
-            );
-        } else {
-            canonical_alias_section = (
-                <b>{ this.state.canonicalAlias || _t('not set') }</b>
-            );
-        }
+        let found = false;
+        const canonicalValue = this.state.canonicalAlias || "";
+        const canonicalAliasSection = (
+            <Field onChange={this.onCanonicalAliasChange} value={canonicalValue}
+                   disabled={this.state.updatingCanonicalAlias || !this.props.canSetCanonicalAlias}
+                   element='select' id='canonicalAlias' label={_t('Main address')}>
+                <option value="" key="unset">{ _t('not specified') }</option>
+                {
+                    Object.keys(this.state.domainToAliases).map((domain, i) => {
+                        return this.state.domainToAliases[domain].map((alias, j) => {
+                            if (alias === this.state.canonicalAlias) found = true;
+                            return (
+                                <option value={alias} key={i + "_" + j}>
+                                    { alias }
+                                </option>
+                            );
+                        });
+                    })
+                }
+                {
+                    found || !this.state.canonicalAlias ? '' :
+                    <option value={ this.state.canonicalAlias } key='arbitrary'>
+                        { this.state.canonicalAlias }
+                    </option>
+                }
+            </Field>
+        );
 
-        let remote_aliases_section;
+        let remoteAliasesSection;
         if (this.state.remoteDomains.length) {
-            remote_aliases_section = (
+            remoteAliasesSection = (
                 <div>
-                    <div className="mx_RoomSettings_aliasLabel">
+                    <div>
                         { _t("Remote addresses for this room:") }
                     </div>
-                    <div className="mx_RoomSettings_aliasesTable">
+                    <ul>
                         { this.state.remoteDomains.map((domain, i) => {
-                            return this.state.domainToAliases[domain].map(function(alias, j) {
-                                return (
-                                    <div className="mx_RoomSettings_aliasesTableRow" key={i + "_" + j}>
-                                        <EditableText
-                                             className="mx_RoomSettings_alias mx_RoomSettings_editable"
-                                             blurToCancel={false}
-                                             editable={false}
-                                             initialValue={alias} />
-                                    </div>
-                                );
+                            return this.state.domainToAliases[domain].map((alias, j) => {
+                                return <li key={i + "_" + j}>{alias}</li>;
                             });
                         }) }
-                    </div>
+                    </ul>
                 </div>
             );
         }
 
         return (
             <div className='mx_AliasSettings'>
-                {canonical_alias_section}
+                {canonicalAliasSection}
                 <EditableItemList
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}
                     newItem={this.state.newAlias}
                     onNewItemChanged={this.onNewAliasChanged}
+                    canRemove={this.props.canSetAliases}
                     canEdit={this.props.canSetAliases}
                     onItemAdded={this.onLocalAliasAdded}
-                    onItemEdited={this.onLocalAliasChanged}
                     onItemRemoved={this.onLocalAliasDeleted}
                     itemsLabel={_t('Local addresses for this room:')}
                     noItemsLabel={_t('This room has no local addresses')}
@@ -296,10 +248,8 @@ module.exports = React.createClass({
                         'New address (e.g. #foo:%(localDomain)s)', {localDomain: localDomain},
                     )}
                 />
-
-                { remote_aliases_section }
-
+                {remoteAliasesSection}
             </div>
         );
-    },
-});
+    }
+}

src/components/views/room_settings/ColorSettings.js

@@ -39,6 +39,10 @@ const ROOM_COLORS = [
     //["#595959", "#ececec"], // Grey makes everything appear disabled, so remove it for now
 ];
 
+// Dev note: this component is not attached anywhere, but is left here as it
+// has a high possibility of being used in the nearish future.
+// Ref: https://github.com/vector-im/riot-web/issues/8421
+
 module.exports = React.createClass({
     displayName: 'ColorSettings',
 
@@ -125,24 +129,24 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <div className="mx_RoomSettings_roomColors">
+            <div className="mx_ColorSettings_roomColors">
                 { ROOM_COLORS.map((room_color, i) => {
                     let selected;
                     if (i === this.state.index) {
                         selected = (
-                            <div className="mx_RoomSettings_roomColor_selected">
+                            <div className="mx_ColorSettings_roomColor_selected">
                                 <img src={require("../../../../res/img/tick.svg")} width="17" height="14" alt="./" />
                             </div>
                         );
                     }
                     const boundClick = this._onColorSchemeChanged.bind(this, i);
                     return (
-                        <div className="mx_RoomSettings_roomColor"
+                        <div className="mx_ColorSettings_roomColor"
                               key={"room_color_" + i}
                               style={{ backgroundColor: room_color[1] }}
                               onClick={boundClick}>
                             { selected }
-                            <div className="mx_RoomSettings_roomColorPrimary" style={{ backgroundColor: room_color[0] }}></div>
+                            <div className="mx_ColorSettings_roomColorPrimary" style={{ backgroundColor: room_color[0] }}></div>
                         </div>
                     );
                 }) }

src/components/views/room_settings/RelatedGroupSettings.js

@@ -1,5 +1,5 @@
 /*
-Copyright 2017 New Vector Ltd.
+Copyright 2017, 2019 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.
@@ -20,61 +20,50 @@ import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import Modal from '../../../Modal';
-import isEqual from 'lodash/isEqual';
+import ErrorDialog from "../dialogs/ErrorDialog";
 
 const GROUP_ID_REGEX = /\+\S+:\S+/;
 
-module.exports = React.createClass({
-    displayName: 'RelatedGroupSettings',
-
-    propTypes: {
+export default class RelatedGroupSettings extends React.Component {
+    static propTypes = {
         roomId: PropTypes.string.isRequired,
         canSetRelatedGroups: PropTypes.bool.isRequired,
         relatedGroupsEvent: PropTypes.instanceOf(MatrixEvent),
-    },
+    };
 
-    contextTypes: {
+    static contextTypes = {
         matrixClient: PropTypes.instanceOf(MatrixClient),
-    },
+    };
 
-    getDefaultProps: function() {
-        return {
-            canSetRelatedGroups: false,
+    static defaultProps = {
+        canSetRelatedGroups: false,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            newGroupId: "",
+            newGroupsList: props.relatedGroupsEvent ? (props.relatedGroupsEvent.getContent().groups || []) : [],
         };
-    },
+    }
 
-    getInitialState: function() {
-        return {
-            newGroupsList: this.getInitialGroupList(),
-            newGroupId: null,
-        };
-    },
+    updateGroups(newGroupsList) {
+        this.context.matrixClient.sendStateEvent(this.props.roomId, 'm.room.related_groups', {
+            groups: newGroupsList,
+        }, '').catch((err) => {
+            console.error(err);
+            Modal.createTrackedDialog('Error updating flair', '', ErrorDialog, {
+                title: _t("Error updating flair"),
+                description: _t(
+                    "There was an error updating the flair for this room. The server may not allow it or " +
+                    "a temporary error occurred.",
+                ),
+            });
+        });
+    }
 
-    getInitialGroupList: function() {
-        return this.props.relatedGroupsEvent ? (this.props.relatedGroupsEvent.getContent().groups || []) : [];
-    },
-
-    needsSaving: function() {
-        const cli = this.context.matrixClient;
-        const room = cli.getRoom(this.props.roomId);
-        if (!room.currentState.maySendStateEvent('m.room.related_groups', cli.getUserId())) return false;
-        return !isEqual(this.getInitialGroupList(), this.state.newGroupsList);
-    },
-
-    saveSettings: function() {
-        if (!this.needsSaving()) return Promise.resolve();
-
-        return this.context.matrixClient.sendStateEvent(
-            this.props.roomId,
-            'm.room.related_groups',
-            {
-                groups: this.state.newGroupsList,
-            },
-            '',
-        );
-    },
-
-    validateGroupId: function(groupId) {
+    validateGroupId(groupId) {
         if (!GROUP_ID_REGEX.test(groupId)) {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createTrackedDialog('Invalid related community ID', '', ErrorDialog, {
@@ -84,38 +73,32 @@ module.exports = React.createClass({
             return false;
         }
         return true;
-    },
+    }
 
-    onNewGroupChanged: function(newGroupId) {
+    onNewGroupChanged = (newGroupId) => {
         this.setState({ newGroupId });
-    },
+    };
 
-    onGroupAdded: function(groupId) {
+    onGroupAdded = (groupId) => {
         if (groupId.length === 0 || !this.validateGroupId(groupId)) {
             return;
         }
+        const newGroupsList = [...this.state.newGroupsList, groupId];
         this.setState({
-            newGroupsList: this.state.newGroupsList.concat([groupId]),
+            newGroupsList: newGroupsList,
             newGroupId: '',
         });
-    },
+        this.updateGroups(newGroupsList);
+    };
 
-    onGroupEdited: function(groupId, index) {
-        if (groupId.length === 0 || !this.validateGroupId(groupId)) {
-            return;
-        }
-        this.setState({
-            newGroupsList: Object.assign(this.state.newGroupsList, {[index]: groupId}),
-        });
-    },
-
-    onGroupDeleted: function(index) {
-        const newGroupsList = this.state.newGroupsList.slice();
-        newGroupsList.splice(index, 1);
+    onGroupDeleted = (index) => {
+        const group = this.state.newGroupsList[index];
+        const newGroupsList = this.state.newGroupsList.filter((g) => g !== group);
         this.setState({ newGroupsList });
-    },
+        this.updateGroups(newGroupsList);
+    };
 
-    render: function() {
+    render() {
         const localDomain = this.context.matrixClient.getDomain();
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
@@ -123,10 +106,10 @@ module.exports = React.createClass({
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}
                 newItem={this.state.newGroupId}
+                canRemove={this.props.canSetRelatedGroups}
                 canEdit={this.props.canSetRelatedGroups}
                 onNewItemChanged={this.onNewGroupChanged}
                 onItemAdded={this.onGroupAdded}
-                onItemEdited={this.onGroupEdited}
                 onItemRemoved={this.onGroupDeleted}
                 itemsLabel={_t('Showing flair for these communities:')}
                 noItemsLabel={_t('This room is not showing flair for any communities')}
@@ -135,5 +118,5 @@ module.exports = React.createClass({
                 )}
             />
         </div>;
-    },
-});
+    }
+}

src/components/views/room_settings/RoomProfileSettings.js

@@ -34,14 +34,20 @@ export default class RoomProfileSettings extends React.Component {
         const client = MatrixClientPeg.get();
         const room = client.getRoom(props.roomId);
         if (!room) throw new Error("Expected a room for ID: ", props.roomId);
+
         const avatarEvent = room.currentState.getStateEvents("m.room.avatar", "");
         let avatarUrl = avatarEvent && avatarEvent.getContent() ? avatarEvent.getContent()["url"] : null;
         if (avatarUrl) avatarUrl = client.mxcUrlToHttp(avatarUrl, 96, 96, 'crop', false);
+
         const topicEvent = room.currentState.getStateEvents("m.room.topic", "");
         const topic = topicEvent && topicEvent.getContent() ? topicEvent.getContent()['topic'] : '';
+
+        const nameEvent = room.currentState.getStateEvents('m.room.name', '');
+        const name = nameEvent && nameEvent.getContent() ? nameEvent.getContent()['name'] : '';
+
         this.state = {
-            originalDisplayName: room.name,
-            displayName: room.name,
+            originalDisplayName: name,
+            displayName: name,
             originalAvatarUrl: avatarUrl,
             avatarUrl: avatarUrl,
             avatarFile: null,
@@ -91,7 +97,6 @@ export default class RoomProfileSettings extends React.Component {
             newState.originalTopic = this.state.topic;
         }
 
-        newState.enableProfileSave = true;
         this.setState(newState);
     };
 

src/components/views/rooms/AppsDrawer.js

@@ -144,12 +144,16 @@ module.exports = React.createClass({
 
     _launchManageIntegrations: function() {
         const IntegrationsManager = sdk.getComponent('views.settings.IntegrationsManager');
-        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+        this.scalarClient.connect().done(() => {
+            const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
                 this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room, 'add_integ') :
                 null;
-        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-            src: src,
-        }, 'mx_IntegrationsManager');
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                src: src,
+            }, 'mx_IntegrationsManager');
+        }, (err) => {
+            console.error('Error ensuring a valid scalar_token exists', err);
+        });
     },
 
     onClickAddWidget: function(e) {

src/components/views/rooms/Autocomplete.js

@@ -60,18 +60,22 @@ export default class Autocomplete extends React.Component {
         };
     }
 
-    componentWillReceiveProps(newProps, state) {
-        if (this.props.room.roomId !== newProps.room.roomId) {
+    componentDidMount() {
+        this._applyNewProps();
+    }
+
+    _applyNewProps(oldQuery, oldRoom) {
+        if (oldRoom && this.props.room.roomId !== oldRoom.roomId) {
             this.autocompleter.destroy();
-            this.autocompleter = new Autocompleter(newProps.room);
+            this.autocompleter = new Autocompleter(this.props.room);
         }
 
         // Query hasn't changed so don't try to complete it
-        if (newProps.query === this.props.query) {
+        if (oldQuery === this.props.query) {
             return;
         }
 
-        this.complete(newProps.query, newProps.selection);
+        this.complete(this.props.query, this.props.selection);
     }
 
     componentWillUnmount() {
@@ -233,7 +237,8 @@ export default class Autocomplete extends React.Component {
         }
     }
 
-    componentDidUpdate() {
+    componentDidUpdate(prevProps) {
+        this._applyNewProps(prevProps.query, prevProps.room);
         // this is the selected completion, so scroll it into view if needed
         const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
         if (selectedCompletion && this.container) {
@@ -251,8 +256,6 @@ export default class Autocomplete extends React.Component {
     }
 
     render() {
-        const EmojiText = sdk.getComponent('views.elements.EmojiText');
-
         let position = 1;
         const renderedCompletions = this.state.completions.map((completionResult, i) => {
             const completions = completionResult.completions.map((completion, i) => {
@@ -277,7 +280,7 @@ export default class Autocomplete extends React.Component {
 
             return completions.length > 0 ? (
                 <div key={i} className="mx_Autocomplete_ProviderSection">
-                    <EmojiText element="div" className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</EmojiText>
+                    <div className="mx_Autocomplete_provider_name">{ completionResult.provider.getName() }</div>
                     { completionResult.provider.renderCompletions(completions) }
                 </div>
             ) : null;
@@ -298,6 +301,9 @@ Autocomplete.propTypes = {
     // method invoked with range and text content when completion is confirmed
     onConfirm: PropTypes.func.isRequired,
 
+    // method invoked when selected (if any) completion changes
+    onSelectionChange: PropTypes.func,
+
     // The room in which we're autocompleting
     room: PropTypes.instanceOf(Room),
 };

src/components/views/rooms/AuxPanel.js

@@ -122,7 +122,9 @@ module.exports = React.createClass({
                 const severity = ev.getContent().severity || "normal";
                 const stateKey = ev.getStateKey();
 
-                if (title && value && severity) {
+                // We want a non-empty title but can accept falsey values (e.g.
+                // zero)
+                if (title && value !== undefined) {
                     counters.push({
                         "title": title,
                         "value": value,
@@ -211,35 +213,33 @@ module.exports = React.createClass({
                 const severity = counter.severity;
                 const stateKey = counter.stateKey;
 
-                if (title && value && severity) {
-                    let span = <span>{ title }: { value }</span>
-
-                    if (link) {
-                        span = (
-                            <a href={link} target="_blank" rel="noopener">
-                                { span }
-                            </a>
-                        );
-                    }
+                let span = <span>{ title }: { value }</span>
 
+                if (link) {
                     span = (
-                        <span
-                            className="m_RoomView_auxPanel_stateViews_span"
-                            data-severity={severity}
-                            key={ "x-" + stateKey }
-                        >
-                            {span}
-                        </span>
-                    );
-
-                    counters.push(span);
-                    counters.push(
-                        <span
-                            className="m_RoomView_auxPanel_stateViews_delim"
-                            key={"delim" + idx}
-                        > ─ </span>
+                        <a href={link} target="_blank" rel="noopener">
+                            { span }
+                        </a>
                     );
                 }
+
+                span = (
+                    <span
+                        className="m_RoomView_auxPanel_stateViews_span"
+                        data-severity={severity}
+                        key={ "x-" + stateKey }
+                    >
+                        {span}
+                    </span>
+                );
+
+                counters.push(span);
+                counters.push(
+                    <span
+                        className="m_RoomView_auxPanel_stateViews_delim"
+                        key={"delim" + idx}
+                    > ─ </span>
+                );
             });
 
             if (counters.length > 0) {

src/components/views/rooms/E2EIcon.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import classNames from 'classnames';
 import { _t } from '../../../languageHandler';
+import AccessibleButton from '../elements/AccessibleButton';
 
 export default function(props) {
     const isWarning = props.status === "warning";
@@ -35,5 +36,10 @@ export default function(props) {
             _t("All devices for this user are trusted") :
             _t("All devices in this encrypted room are trusted");
     }
-    return (<div className={e2eIconClasses} title={e2eTitle} />);
+    const icon = (<div className={e2eIconClasses} title={e2eTitle} />);
+    if (props.onClick) {
+        return (<AccessibleButton onClick={props.onClick}>{ icon }</AccessibleButton>);
+    } else {
+        return icon;
+    }
 }

src/components/views/rooms/EntityTile.js

@@ -19,11 +19,10 @@ limitations under the License.
 
 const React = require('react');
 import PropTypes from 'prop-types';
-
-const MatrixClientPeg = require('../../../MatrixClientPeg');
 const sdk = require('../../../index');
 import AccessibleButton from '../elements/AccessibleButton';
 import { _t } from '../../../languageHandler';
+import classNames from "classnames";
 
 
 const PRESENCE_CLASS = {
@@ -97,62 +96,55 @@ const EntityTile = React.createClass({
         return this.props.shouldComponentUpdate(nextProps, nextState);
     },
 
-    mouseEnter: function(e) {
-        this.setState({ 'hover': true });
-    },
-
-    mouseLeave: function(e) {
-        this.setState({ 'hover': false });
-    },
-
     render: function() {
+        const mainClassNames = {
+            "mx_EntityTile": true,
+            "mx_EntityTile_noHover": this.props.suppressOnHover,
+        };
+        if (this.props.className) mainClassNames[this.props.className] = true;
+
         const presenceClass = presenceClassForMember(
             this.props.presenceState, this.props.presenceLastActiveAgo, this.props.showPresence,
         );
+        mainClassNames[presenceClass] = true;
 
-        let mainClassName = "mx_EntityTile ";
-        mainClassName += presenceClass + (this.props.className ? (" " + this.props.className) : "");
         let nameEl;
         const {name} = this.props;
 
-        const EmojiText = sdk.getComponent('elements.EmojiText');
-        if (this.state.hover && !this.props.suppressOnHover) {
+        if (!this.props.suppressOnHover) {
             const activeAgo = this.props.presenceLastActiveAgo ?
                 (Date.now() - (this.props.presenceLastTs - this.props.presenceLastActiveAgo)) : -1;
 
-            mainClassName += " mx_EntityTile_hover";
             const PresenceLabel = sdk.getComponent("rooms.PresenceLabel");
             let presenceLabel = null;
-            let nameClasses = 'mx_EntityTile_name';
             if (this.props.showPresence) {
                 presenceLabel = <PresenceLabel activeAgo={activeAgo}
                     currentlyActive={this.props.presenceCurrentlyActive}
                     presenceState={this.props.presenceState} />;
-                nameClasses += ' mx_EntityTile_name_hover';
             }
             if (this.props.subtextLabel) {
                 presenceLabel = <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>;
             }
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <EmojiText element="div" className={nameClasses} dir="auto">
+                    <div className="mx_EntityTile_name" dir="auto">
                         { name }
-                    </EmojiText>
+                    </div>
                     {presenceLabel}
                 </div>
             );
         } else if (this.props.subtextLabel) {
             nameEl = (
                 <div className="mx_EntityTile_details">
-                    <EmojiText element="div" className="mx_EntityTile_name" dir="auto">
+                    <div className="mx_EntityTile_name" dir="auto">
                         {name}
-                    </EmojiText>
+                    </div>
                     <span className="mx_EntityTile_subtext">{this.props.subtextLabel}</span>
                 </div>
             );
         } else {
             nameEl = (
-                <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{ name }</EmojiText>
+                <div className="mx_EntityTile_name" dir="auto">{ name }</div>
             );
         }
 
@@ -183,17 +175,19 @@ const EntityTile = React.createClass({
 
         const av = this.props.avatarJsx || <BaseAvatar name={this.props.name} width={36} height={36} />;
 
+        // The wrapping div is required to make the magic mouse listener work, for some reason.
         return (
-            <AccessibleButton className={mainClassName} title={this.props.title}
-                    onClick={this.props.onClick} onMouseEnter={this.mouseEnter}
-                    onMouseLeave={this.mouseLeave}>
-                <div className="mx_EntityTile_avatar">
-                    { av }
-                    { power }
-                </div>
-                { nameEl }
-                { inviteButton }
-            </AccessibleButton>
+            <div ref={(c) => this.container = c} >
+                <AccessibleButton className={classNames(mainClassNames)} title={this.props.title}
+                                  onClick={this.props.onClick}>
+                    <div className="mx_EntityTile_avatar">
+                        { av }
+                        { power }
+                    </div>
+                    { nameEl }
+                    { inviteButton }
+                </AccessibleButton>
+            </div>
         );
     },
 });