Merge branch 'develop' into matthew/retina

src/components/views/auth/AuthBody.js

@@ -0,0 +1,27 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthBody extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthBody">
+            { this.props.children }
+        </div>;
+    }
+}

src/components/views/auth/AuthButtons.js

@@ -0,0 +1,57 @@
+/*
+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/AuthFooter.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.
@@ -20,12 +21,12 @@ import { _t } from '../../../languageHandler';
 import React from 'react';
 
 module.exports = React.createClass({
-    displayName: 'LoginFooter',
+    displayName: 'AuthFooter',
 
     render: function() {
         return (
-            <div className="mx_Login_links">
-                <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
+            <div className="mx_AuthFooter">
+                <a href="https://matrix.org" target="_blank" rel="noopener">{ _t("powered by Matrix") }</a>
             </div>
         );
     },

src/components/views/auth/AuthHeader.js

@@ -0,0 +1,37 @@
+/*
+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.
+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 sdk from '../../../index';
+
+module.exports = React.createClass({
+    displayName: 'AuthHeader',
+
+    render: function() {
+        const AuthHeaderLogo = sdk.getComponent('auth.AuthHeaderLogo');
+        const LanguageSelector = sdk.getComponent('views.auth.LanguageSelector');
+
+        return (
+            <div className="mx_AuthHeader">
+                <AuthHeaderLogo />
+                <LanguageSelector />
+            </div>
+        );
+    },
+});

src/components/views/auth/AuthHeaderLogo.js

@@ -0,0 +1,27 @@
+/*
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+
+export default class AuthHeaderLogo extends React.PureComponent {
+    render() {
+        return <div className="mx_AuthHeaderLogo">
+            Matrix
+        </div>;
+    }
+}

src/components/views/auth/AuthPage.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.
@@ -17,14 +18,20 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
+import sdk from '../../../index';
 
 module.exports = React.createClass({
-    displayName: 'LoginHeader',
+    displayName: 'AuthPage',
 
     render: function() {
+        const AuthFooter = sdk.getComponent('auth.AuthFooter');
+
         return (
-            <div className="mx_Login_logo">
-                Matrix
+            <div className="mx_AuthPage">
+                <div className="mx_AuthPage_modal">
+                    { this.props.children }
+                </div>
+                <AuthFooter />
             </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,25 +60,15 @@ module.exports = React.createClass({
         } else {
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
-            const protocol = global.location.protocol;
-            if (protocol === "file:") {
-                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 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);
+            let protocol = global.location.protocol;
+            if (protocol === "vector:") {
+                protocol = "https:";
             }
+            const scriptTag = document.createElement('script');
+            scriptTag.setAttribute(
+                'src', `${protocol}//www.recaptcha.net/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit`,
+            );
+            this.refs.recaptchaContainer.appendChild(scriptTag);
         }
     },
 
@@ -137,8 +126,9 @@ module.exports = React.createClass({
 
         return (
             <div ref="recaptchaContainer">
-                { _t("This Home Server 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

@@ -21,7 +21,7 @@ import sdk from '../../../index';
 
 import { COUNTRIES } from '../../../phonenumber';
 
-const COUNTRIES_BY_ISO2 = new Object(null);
+const COUNTRIES_BY_ISO2 = {};
 for (const c of COUNTRIES) {
     COUNTRIES_BY_ISO2[c.iso2] = c;
 }
@@ -70,7 +70,7 @@ export default class CountryDropdown extends React.Component {
     }
 
     _flagImgForIso2(iso2) {
-        return <img src={`img/flags/${iso2}.png`} />;
+        return <img src={require(`../../../../res/img/flags/${iso2}.png`)} />;
     }
 
     _getShortOption(iso2) {
@@ -81,7 +81,7 @@ export default class CountryDropdown extends React.Component {
         if (this.props.showPrefix) {
             countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
         }
-        return <span>
+        return <span className="mx_CountryDropdown_shortOption">
             { this._flagImgForIso2(iso2) }
             { countryPrefix }
         </span>;
@@ -111,9 +111,9 @@ export default class CountryDropdown extends React.Component {
         }
 
         const options = displayedCountries.map((country) => {
-            return <div key={country.iso2}>
+            return <div className="mx_CountryDropdown_option" key={country.iso2}>
                 { this._flagImgForIso2(country.iso2) }
-                { country.name } <span>(+{ country.prefix })</span>
+                { country.name } (+{ country.prefix })
             </div>;
         });
 
@@ -121,7 +121,7 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || COUNTRIES[0].iso2;
 
-        return <Dropdown className={this.props.className + " left_aligned"}
+        return <Dropdown className={this.props.className + " mx_CountryDropdown"}
             onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
             menuWidth={298} getShortOption={this._getShortOption}
             value={value} searchEnabled={true} disabled={this.props.disabled}

src/components/views/auth/CustomServerDialog.js

@@ -27,17 +27,17 @@ module.exports = React.createClass({
                     { _t("Custom Server Options") }
                 </div>
                 <div className="mx_Dialog_content">
-                    <span>
-                        { _t("You can use the custom server options to sign into other Matrix " +
-                        "servers by specifying a different Home server URL.") }
-                        <br />
-                        { _t("This allows you to use this app with an existing Matrix account on " +
-                            "a different home server.") }
-                        <br />
-                        <br />
-                        { _t("You can also set a custom identity server but this will typically prevent " +
-                            "interaction with users based on email address.") }
-                    </span>
+                    <p>{_t(
+                        "You can use the custom server options to sign into other " +
+                        "Matrix servers by specifying a different homeserver URL. This " +
+                        "allows you to use this app with an existing Matrix account on a " +
+                        "different homeserver.",
+                    )}</p>
+                    <p>{_t(
+                        "You can also set a custom identity server, but you won't be " +
+                        "able to invite users by email address, or be invited by email " +
+                        "address yourself.",
+                    )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.props.onFinished} autoFocus={true}>

src/components/views/auth/InteractiveAuthEntryComponents.js

@@ -187,7 +187,7 @@ export const RecaptchaAuthEntry = React.createClass({
             return <Loader />;
         }
 
-        const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
+        const CaptchaForm = sdk.getComponent("views.auth.CaptchaForm");
         const sitePublicKey = this.props.stageParams.public_key;
 
         let errorSection;
@@ -294,7 +294,7 @@ export const TermsAuthEntry = React.createClass({
     _trySubmit: function() {
         let allChecked = true;
         for (const policy of this.state.policies) {
-            let checked = this.state.toggledPolicies[policy.id];
+            const checked = this.state.toggledPolicies[policy.id];
             allChecked = allChecked && checked;
         }
 
@@ -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>;
         }
 
@@ -440,7 +440,6 @@ export const MsisdnAuthEntry = React.createClass({
         clientSecret: PropTypes.func,
         submitAuthDict: PropTypes.func.isRequired,
         matrixClient: PropTypes.object,
-        submitAuthDict: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -526,7 +525,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/LanguageSelector.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2018 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 SdkConfig from "../../../SdkConfig";
+import {getCurrentLanguage} from "../../../languageHandler";
+import SettingsStore, {SettingLevel} from "../../../settings/SettingsStore";
+import PlatformPeg from "../../../PlatformPeg";
+import sdk from '../../../index';
+import React from 'react';
+
+function onChange(newLang) {
+    if (getCurrentLanguage() !== newLang) {
+        SettingsStore.setValue("language", null, SettingLevel.DEVICE, newLang);
+        PlatformPeg.get().reload();
+    }
+}
+
+export default function LanguageSelector() {
+    if (SdkConfig.get()['disable_login_language_selector']) return <div />;
+
+    const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+    return <LanguageDropdown className="mx_AuthBody_language"
+        onOptionChange={onChange}
+        value={getCurrentLanguage()}
+    />;
+}

src/components/views/auth/ModularServerConfig.js

@@ -0,0 +1,128 @@
+/*
+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';
+
+const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+
+/*
+ * Configure the Modular server name.
+ *
+ * This is a variant of ServerConfig with only the HS field and different body
+ * text that is specific to the Modular case.
+ */
+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,
+
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+    }
+
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: this.props.defaultIsUrl,
+        });
+    }
+
+    onHomeserverBlur = (ev) => {
+        this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
+            this.props.onServerConfigChange({
+                hsUrl: this.state.hsUrl,
+                isUrl: this.props.defaultIsUrl,
+            });
+        });
+    }
+
+    onHomeserverChange = (ev) => {
+        const hsUrl = ev.target.value;
+        this.setState({ hsUrl });
+    }
+
+    _waitThenInvoke(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    }
+
+    render() {
+        const Field = sdk.getComponent('elements.Field');
+
+        return (
+            <div className="mx_ServerConfig">
+                <h3>{_t("Your Modular server")}</h3>
+                {_t(
+                    "Enter the location of your Modular homeserver. It may use your own " +
+                    "domain name or be a subdomain of <a>modular.im</a>.",
+                    {}, {
+                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                            {sub}
+                        </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>
+            </div>
+        );
+    }
+}

src/components/views/auth/PasswordLogin.js

@@ -20,7 +20,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import {field_input_incorrect} from '../../../UiEffects';
 import SdkConfig from '../../../SdkConfig';
 
 /**
@@ -29,18 +28,23 @@ import SdkConfig from '../../../SdkConfig';
 class PasswordLogin extends React.Component {
     static defaultProps = {
         onError: function() {},
+        onEditServerDetailsClick: null,
         onUsernameChanged: function() {},
         onUsernameBlur: function() {},
         onPasswordChanged: function() {},
         onPhoneCountryChanged: function() {},
         onPhoneNumberChanged: function() {},
+        onPhoneNumberBlur: function() {},
         initialUsername: "",
         initialPhoneCountry: "",
         initialPhoneNumber: "",
         initialPassword: "",
         loginIncorrect: false,
-        hsDomain: "",
+        // This is optional and only set if we used a server name to determine
+        // the HS URL via `.well-known` discovery. The server name is used
+        // instead of the HS URL when talking about where to "sign in to".
         hsName: null,
+        hsUrl: "",
         disableSubmit: false,
     }
 
@@ -54,25 +58,22 @@ 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);
         this.onLoginTypeChange = this.onLoginTypeChange.bind(this);
         this.onPhoneCountryChanged = this.onPhoneCountryChanged.bind(this);
         this.onPhoneNumberChanged = this.onPhoneNumberChanged.bind(this);
+        this.onPhoneNumberBlur = this.onPhoneNumberBlur.bind(this);
         this.onPasswordChanged = this.onPasswordChanged.bind(this);
         this.isLoginEmpty = this.isLoginEmpty.bind(this);
     }
 
-    componentWillMount() {
-        this._passwordField = null;
-        this._loginField = null;
-    }
-
-    componentWillReceiveProps(nextProps) {
-        if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
-            field_input_incorrect(this.isLoginEmpty() ? this._loginField : this._passwordField);
-        }
+    onForgotPasswordClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onForgotPasswordClick();
     }
 
     onSubmitForm(ev) {
@@ -93,7 +94,7 @@ class PasswordLogin extends React.Component {
             case PasswordLogin.LOGIN_FIELD_MXID:
                 username = this.state.username;
                 if (!username) {
-                    error = _t('The user name field must not be blank.');
+                    error = _t('The username field must not be blank.');
                 }
                 break;
             case PasswordLogin.LOGIN_FIELD_PHONE:
@@ -129,10 +130,11 @@ class PasswordLogin extends React.Component {
     }
 
     onUsernameBlur(ev) {
-        this.props.onUsernameBlur(this.state.username);
+        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,
@@ -153,80 +155,77 @@ class PasswordLogin extends React.Component {
         this.props.onPhoneNumberChanged(ev.target.value);
     }
 
+    onPhoneNumberBlur(ev) {
+        this.props.onPhoneNumberBlur(ev.target.value);
+    }
+
     onPasswordChanged(ev) {
         this.setState({password: ev.target.value});
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType, disabled) {
-        const classes = {
-            mx_Login_field: true,
-            mx_Login_field_disabled: disabled,
-        };
+    renderLoginField(loginType) {
+        const Field = sdk.getComponent('elements.Field');
+
+        const classes = {};
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
-                classes.mx_Login_email = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
+                return <Field
                     className={classNames(classes)}
-                    ref={(e) => {this._loginField = e;}}
+                    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}
-                    autoFocus
-                    disabled={disabled}
-                />;
-            case PasswordLogin.LOGIN_FIELD_MXID:
-                classes.mx_Login_username = true;
-                classes.error = this.props.loginIncorrect && !this.state.username;
-                return <input
-                    className={classNames(classes)}
-                    ref={(e) => {this._loginField = e;}}
-                    key="username_input"
-                    type="text"
-                    name="username" // make it a little easier for browser's remember-password
                     onChange={this.onUsernameChanged}
                     onBlur={this.onUsernameBlur}
-                    placeholder={SdkConfig.get().disable_custom_urls ?
-                                      _t("Username on %(hs)s", {
-                                        hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
-                                      }) : _t("User name")}
-                    value={this.state.username}
                     autoFocus
-                    disabled={disabled}
+                />;
+            case PasswordLogin.LOGIN_FIELD_MXID:
+                classes.error = this.props.loginIncorrect && !this.state.username;
+                return <Field
+                    className={classNames(classes)}
+                    id="mx_PasswordLogin_username"
+                    name="username" // make it a little easier for browser's remember-password
+                    key="username_input"
+                    type="text"
+                    label={SdkConfig.get().disable_custom_urls ?
+                        _t("Username on %(hs)s", {
+                            hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
+                        }) : _t("Username")}
+                    value={this.state.username}
+                    onChange={this.onUsernameChanged}
+                    onBlur={this.onUsernameBlur}
+                    autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
-                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-                classes.mx_Login_phoneNumberField = true;
-                classes.mx_Login_field_has_prefix = true;
+                const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
                 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}
-                        disabled={disabled}
-                    />
-                    <input
-                        className={classNames(classes)}
-                        ref={(e) => {this._loginField = e;}}
-                        key="phone_input"
-                        type="text"
-                        name="phoneNumber"
-                        onChange={this.onPhoneNumberChanged}
-                        placeholder={_t("Mobile phone number")}
-                        value={this.state.phoneNumber}
-                        autoFocus
-                        disabled={disabled}
-                    />
-                </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
+                />;
             }
         }
     }
@@ -242,72 +241,113 @@ class PasswordLogin extends React.Component {
     }
 
     render() {
+        const Field = sdk.getComponent('elements.Field');
+
         let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
-            forgotPasswordJsx = (
-                <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    { _t('Forgot your password?') }
-                </a>
-            );
+            forgotPasswordJsx = <span>
+                {_t('Not sure of your password? <a>Set a new one</a>', {}, {
+                    a: sub => <a className="mx_Login_forgot"
+                        onClick={this.onForgotPasswordClick}
+                        href="#"
+                    >
+                        {sub}
+                    </a>,
+                })}
+            </span>;
         }
 
-        let matrixIdText = _t('Matrix ID');
+        let signInToText = _t('Sign in to your Matrix account');
         if (this.props.hsName) {
-            matrixIdText = _t('%(serverName)s Matrix ID', {serverName: this.props.hsName});
+            signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
+                serverName: this.props.hsName,
+            });
         } else {
             try {
                 const parsedHsUrl = new URL(this.props.hsUrl);
-                matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
+                signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
+                    serverName: parsedHsUrl.hostname,
+                });
             } catch (e) {
                 // ignore
             }
         }
 
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_AuthBody_editServerDetails"
+                href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_t('Change')}
+            </a>;
+        }
+
         const pwFieldClass = classNames({
-            mx_Login_field: true,
-            mx_Login_field_disabled: matrixIdText === '',
             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, matrixIdText === '');
+        const loginField = this.renderLoginField(this.state.loginType);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
             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}
-                        disabled={matrixIdText === ''}
-                        onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ matrixIdText }</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>
             );
         }
 
-        const disableSubmit = this.props.disableSubmit || matrixIdText === '';
-
         return (
             <div>
+                <h3>
+                    {signInToText}
+                    {editLink}
+                </h3>
                 <form onSubmit={this.onSubmitForm}>
-                { loginType }
-                { loginField }
-                <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
-                    name="password"
-                    value={this.state.password} onChange={this.onPasswordChanged}
-                    placeholder={_t('Password')}
-                    disabled={matrixIdText === ''}
-                />
-                <br />
-                { forgotPasswordJsx }
-                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={disableSubmit} />
+                    {loginType}
+                    {loginField}
+                    <Field
+                        className={pwFieldClass}
+                        id="mx_PasswordLogin_password"
+                        type="password"
+                        name="password"
+                        label={_t('Password')}
+                        value={this.state.password}
+                        onChange={this.onPasswordChanged}
+                    />
+                    {forgotPasswordJsx}
+                    <input className="mx_Login_submit"
+                        type="submit"
+                        value={_t('Sign in')}
+                        disabled={this.props.disableSubmit}
+                    />
                 </form>
             </div>
         );
@@ -332,6 +372,7 @@ PasswordLogin.propTypes = {
     onPasswordChanged: PropTypes.func,
     loginIncorrect: PropTypes.bool,
     hsName: PropTypes.string,
+    hsUrl: PropTypes.string,
     disableSubmit: PropTypes.bool,
 };
 

src/components/views/auth/RegistrationForm.js

@@ -0,0 +1,462 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 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 Email from '../../../email';
+import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
+import { SAFE_LOCALPART_REGEX } from '../../../Registration';
+
+const FIELD_EMAIL = 'field_email';
+const FIELD_PHONE_NUMBER = 'field_phone_number';
+const FIELD_USERNAME = 'field_username';
+const FIELD_PASSWORD = 'field_password';
+const FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+    displayName: 'RegistrationForm',
+
+    propTypes: {
+        // Values pre-filled in the input boxes when the component loads
+        defaultEmail: PropTypes.string,
+        defaultPhoneCountry: PropTypes.string,
+        defaultPhoneNumber: PropTypes.string,
+        defaultUsername: PropTypes.string,
+        defaultPassword: PropTypes.string,
+        minPasswordLength: PropTypes.number,
+        onValidationChange: PropTypes.func,
+        onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
+        onEditServerDetailsClick: PropTypes.func,
+        flows: PropTypes.arrayOf(PropTypes.object).isRequired,
+        // This is optional and only set if we used a server name to determine
+        // the HS URL via `.well-known` discovery. The server name is used
+        // instead of the HS URL when talking about "your account".
+        hsName: PropTypes.string,
+        hsUrl: PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            minPasswordLength: 6,
+            onValidationChange: console.error,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            // Field error codes by field ID
+            fieldErrors: {},
+            // The ISO2 country code selected in the phone number entry
+            phoneCountry: this.props.defaultPhoneCountry,
+            username: "",
+            email: "",
+            phoneNumber: "",
+            password: "",
+            passwordConfirm: "",
+        };
+    },
+
+    onSubmit: 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
+        // onValidationChange once for each invalid field.
+        this.validateField(FIELD_PHONE_NUMBER, ev.type);
+        this.validateField(FIELD_EMAIL, ev.type);
+        this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
+        this.validateField(FIELD_PASSWORD, ev.type);
+        this.validateField(FIELD_USERNAME, ev.type);
+
+        const self = this;
+        if (this.allFieldsValid()) {
+            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.state.email.trim();
+        const promise = this.props.onRegisterClick({
+            username: this.state.username.trim(),
+            password: this.state.password.trim(),
+            email: email,
+            phoneCountry: this.state.phoneCountry,
+            phoneNumber: this.state.phoneNumber,
+        });
+
+        if (promise) {
+            ev.target.disabled = true;
+            promise.finally(function() {
+                ev.target.disabled = false;
+            });
+        }
+    },
+
+    /**
+     * @returns {boolean} true if all fields were valid last time they were validated.
+     */
+    allFieldsValid: function() {
+        const keys = Object.keys(this.state.fieldErrors);
+        for (let i = 0; i < keys.length; ++i) {
+            if (this.state.fieldErrors[keys[i]]) {
+                return false;
+            }
+        }
+        return true;
+    },
+
+    validateField: function(fieldID, eventType) {
+        const pwd1 = this.state.password.trim();
+        const pwd2 = this.state.passwordConfirm.trim();
+        const allowEmpty = eventType === "blur";
+
+        switch (fieldID) {
+            case FIELD_EMAIL: {
+                const email = this.state.email;
+                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;
+            }
+            case FIELD_PHONE_NUMBER: {
+                const phoneNumber = this.state.phoneNumber;
+                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.state.username;
+                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:
+                if (allowEmpty && pwd2 === "") {
+                    this.markFieldValid(fieldID, true);
+                } else {
+                    this.markFieldValid(
+                        fieldID, pwd1 == pwd2,
+                        "RegistrationForm.ERR_PASSWORD_MISMATCH",
+                    );
+                }
+                break;
+        }
+    },
+
+    markFieldValid: function(fieldID, valid, errorCode) {
+        const { fieldErrors } = this.state;
+        if (valid) {
+            fieldErrors[fieldID] = null;
+        } else {
+            fieldErrors[fieldID] = errorCode;
+        }
+        this.setState({
+            fieldErrors,
+        });
+        this.props.onValidationChange(fieldErrors);
+    },
+
+    _classForField: function(fieldID, ...baseClasses) {
+        let cls = baseClasses.join(' ');
+        if (this.state.fieldErrors[fieldID]) {
+            if (cls) cls += ' ';
+            cls += 'error';
+        }
+        return cls;
+    },
+
+    onEmailBlur(ev) {
+        this.validateField(FIELD_EMAIL, ev.type);
+    },
+
+    onEmailChange(ev) {
+        this.setState({
+            email: ev.target.value,
+        });
+    },
+
+    onPasswordBlur(ev) {
+        this.validateField(FIELD_PASSWORD, ev.type);
+    },
+
+    onPasswordChange(ev) {
+        this.setState({
+            password: ev.target.value,
+        });
+    },
+
+    onPasswordConfirmBlur(ev) {
+        this.validateField(FIELD_PASSWORD_CONFIRM, ev.type);
+    },
+
+    onPasswordConfirmChange(ev) {
+        this.setState({
+            passwordConfirm: ev.target.value,
+        });
+    },
+
+    onPhoneCountryChange(newVal) {
+        this.setState({
+            phoneCountry: newVal.iso2,
+            phonePrefix: newVal.prefix,
+        });
+    },
+
+    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);
+    },
+
+    onUsernameChange(ev) {
+        this.setState({
+            username: ev.target.value,
+        });
+    },
+
+    /**
+     * A step is required if all flows include that step.
+     *
+     * @param {string} step A stage name to check
+     * @returns {boolean} Whether it is required
+     */
+    _authStepIsRequired(step) {
+        return this.props.flows.every((flow) => {
+            return flow.stages.includes(step);
+        });
+    },
+
+    /**
+     * A step is used if any flows include that step.
+     *
+     * @param {string} step A stage name to check
+     * @returns {boolean} Whether it is used
+     */
+    _authStepIsUsed(step) {
+        return this.props.flows.some((flow) => {
+            return flow.stages.includes(step);
+        });
+    },
+
+    render: function() {
+        const Field = sdk.getComponent('elements.Field');
+
+        let yourMatrixAccountText = _t('Create your Matrix account');
+        if (this.props.hsName) {
+            yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+                serverName: this.props.hsName,
+            });
+        } else {
+            try {
+                const parsedHsUrl = new URL(this.props.hsUrl);
+                yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+                    serverName: parsedHsUrl.hostname,
+                });
+            } catch (e) {
+                // ignore
+            }
+        }
+
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_AuthBody_editServerDetails"
+                href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_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 = (
+                <Field
+                    className={this._classForField(FIELD_EMAIL)}
+                    id="mx_RegistrationForm_email"
+                    type="text"
+                    label={emailPlaceholder}
+                    defaultValue={this.props.defaultEmail}
+                    value={this.state.email}
+                    onBlur={this.onEmailBlur}
+                    onChange={this.onEmailChange}
+                />
+            );
+        }
+
+        const threePidLogin = !SdkConfig.get().disable_3pid_login;
+        const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
+        let phoneSection;
+        if (threePidLogin && this._authStepIsUsed('m.login.msisdn')) {
+            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}
+            />;
+
+            phoneSection = <Field
+                className={this._classForField(FIELD_PHONE_NUMBER)}
+                id="mx_RegistrationForm_phoneNumber"
+                type="text"
+                label={phoneLabel}
+                defaultValue={this.props.defaultPhoneNumber}
+                value={this.state.phoneNumber}
+                prefix={phoneCountry}
+                onBlur={this.onPhoneNumberBlur}
+                onChange={this.onPhoneNumberChange}
+            />;
+        }
+
+        const registerButton = (
+            <input className="mx_Login_submit" type="submit" value={_t("Register")} />
+        );
+
+        return (
+            <div>
+                <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3>
+                <form onSubmit={this.onSubmit}>
+                    <div className="mx_AuthBody_fieldRow">
+                        <Field
+                            className={this._classForField(FIELD_USERNAME)}
+                            id="mx_RegistrationForm_username"
+                            type="text"
+                            autoFocus={true}
+                            label={_t("Username")}
+                            defaultValue={this.props.defaultUsername}
+                            value={this.state.username}
+                            onBlur={this.onUsernameBlur}
+                            onChange={this.onUsernameChange}
+                        />
+                    </div>
+                    <div className="mx_AuthBody_fieldRow">
+                        <Field
+                            className={this._classForField(FIELD_PASSWORD)}
+                            id="mx_RegistrationForm_password"
+                            type="password"
+                            label={_t("Password")}
+                            defaultValue={this.props.defaultPassword}
+                            value={this.state.password}
+                            onBlur={this.onPasswordBlur}
+                            onChange={this.onPasswordChange}
+                        />
+                        <Field
+                            className={this._classForField(FIELD_PASSWORD_CONFIRM)}
+                            id="mx_RegistrationForm_passwordConfirm"
+                            type="password"
+                            label={_t("Confirm")}
+                            defaultValue={this.props.defaultPassword}
+                            value={this.state.passwordConfirm}
+                            onBlur={this.onPasswordConfirmBlur}
+                            onChange={this.onPasswordConfirmChange}
+                        />
+                    </div>
+                    <div className="mx_AuthBody_fieldRow">
+                        { emailSection }
+                        { phoneSection }
+                    </div>
+                    {_t(
+                        "Use an email address to recover your account. Other users " +
+                        "can invite you to rooms using your contact details.",
+                    )}
+                    { registerButton }
+                </form>
+            </div>
+        );
+    },
+});

src/components/views/auth/ServerConfig.js

@@ -0,0 +1,149 @@
+/*
+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.
+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 Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+/*
+ * A pure UI component which displays the HS and IS to use.
+ */
+
+export default class ServerConfig 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
+        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,
+
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+    }
+
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        customIsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+            isUrl: props.customIsUrl,
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl &&
+            newProps.customIsUrl === this.state.isUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+            isUrl: newProps.customIsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: newProps.customIsUrl,
+        });
+    }
+
+    onHomeserverBlur = (ev) => {
+        this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
+            this.props.onServerConfigChange({
+                hsUrl: this.state.hsUrl,
+                isUrl: this.state.isUrl,
+            });
+        });
+    }
+
+    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,
+            });
+        });
+    }
+
+    onIdentityServerChange = (ev) => {
+        const isUrl = ev.target.value;
+        this.setState({ isUrl });
+    }
+
+    _waitThenInvoke(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    }
+
+    showHelpPopup = () => {
+        const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
+        Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
+    }
+
+    render() {
+        const Field = sdk.getComponent('elements.Field');
+
+        return (
+            <div className="mx_ServerConfig">
+                <h3>{_t("Other servers")}</h3>
+                {_t("Enter custom server URLs <a>What does this mean?</a>", {}, {
+                    a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                        { 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>
+            </div>
+        );
+    }
+}

src/components/views/auth/ServerTypeSelector.js

@@ -0,0 +1,144 @@
+/*
+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 classnames from 'classnames';
+
+const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+
+export const FREE = 'Free';
+export const PREMIUM = 'Premium';
+export const ADVANCED = 'Advanced';
+
+export const TYPES = {
+    FREE: {
+        id: FREE,
+        label: () => _t('Free'),
+        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',
+    },
+    PREMIUM: {
+        id: PREMIUM,
+        label: () => _t('Premium'),
+        logo: () => <img src={require('../../../../res/img/modular-bw-logo.svg')} />,
+        description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
+            a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                {sub}
+            </a>,
+        }),
+    },
+    ADVANCED: {
+        id: ADVANCED,
+        label: () => _t('Advanced'),
+        logo: () => <div>
+            <img src={require('../../../../res/img/feather-customised/globe.svg')} />
+            {_t('Other')}
+        </div>,
+        description: () => _t('Find other public servers or use a custom server'),
+    },
+};
+
+export function getTypeFromHsUrl(hsUrl) {
+    if (!hsUrl) {
+        return null;
+    } else if (hsUrl === TYPES.FREE.hsUrl) {
+        return FREE;
+    } 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;
+    }
+}
+
+export default class ServerTypeSelector extends React.PureComponent {
+    static propTypes = {
+        // The default selected type.
+        selected: PropTypes.string,
+        // Handler called when the selected type changes.
+        onChange: PropTypes.func.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        const {
+            selected,
+        } = props;
+
+        this.state = {
+            selected,
+        };
+    }
+
+    updateSelectedType(type) {
+        if (this.state.selected === type) {
+            return;
+        }
+        this.setState({
+            selected: type,
+        });
+        if (this.props.onChange) {
+            this.props.onChange(type);
+        }
+    }
+
+    onClick = (e) => {
+        e.stopPropagation();
+        const type = e.currentTarget.dataset.id;
+        this.updateSelectedType(type);
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const serverTypes = [];
+        for (const type of Object.values(TYPES)) {
+            const { id, label, logo, description } = type;
+            const classes = classnames(
+                "mx_ServerTypeSelector_type",
+                `mx_ServerTypeSelector_type_${id}`,
+                {
+                    "mx_ServerTypeSelector_type_selected": id === this.state.selected,
+                },
+            );
+
+            serverTypes.push(<div className={classes} key={id} >
+                <div className="mx_ServerTypeSelector_label">
+                    {label()}
+                </div>
+                <AccessibleButton onClick={this.onClick} data-id={id}>
+                    <div className="mx_ServerTypeSelector_logo">
+                        {logo()}
+                    </div>
+                    <div className="mx_ServerTypeSelector_description">
+                        {description()}
+                    </div>
+                </AccessibleButton>
+            </div>);
+        }
+
+        return <div className="mx_ServerTypeSelector">
+            {serverTypes}
+        </div>;
+    }
+}

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

@@ -40,38 +40,50 @@ export default class MemberStatusMessageAvatar extends React.Component {
 
     constructor(props, context) {
         super(props, context);
+
+        this.state = {
+            hasStatus: this.hasStatus,
+        };
     }
 
     componentWillMount() {
         if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) {
             throw new Error("Cannot use MemberStatusMessageAvatar on anyone but the logged in user");
         }
-    }
-
-    componentDidMount() {
-        MatrixClientPeg.get().on("RoomState.events", this._onRoomStateEvents);
-
-        if (this.props.member.user) {
-            this.setState({message: this.props.member.user._unstable_statusMessage});
-        } else {
-            this.setState({message: ""});
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return;
         }
-    }
-
-    componentWillUnmount() {
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("RoomState.events", this._onRoomStateEvents);
+        const { user } = this.props.member;
+        if (!user) {
+            return;
         }
+        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
     }
 
-    _onRoomStateEvents = (ev, state) => {
-        if (ev.getStateKey() !== MatrixClientPeg.get().getUserId()) return;
-        if (ev.getType() !== "im.vector.user_status") return;
-        // TODO: We should be relying on `this.props.member.user._unstable_statusMessage`
-        // We don't currently because the js-sdk doesn't emit a specific event for this
-        // change, and we don't want to race it. This should be improved when we rip out
-        // the im.vector.user_status stuff and replace it with a complete solution.
-        this.setState({message: ev.getContent()["status"]});
+    componentWillUmount() {
+        const { user } = this.props.member;
+        if (!user) {
+            return;
+        }
+        user.removeListener(
+            "User._unstable_statusMessage",
+            this._onStatusMessageCommitted,
+        );
+    }
+
+    get hasStatus() {
+        const { user } = this.props.member;
+        if (!user) {
+            return false;
+        }
+        return !!user._unstable_statusMessage;
+    }
+
+    _onStatusMessageCommitted = () => {
+        // The `User` object has observed a status message change.
+        this.setState({
+            hasStatus: this.hasStatus,
+        });
     };
 
     _onClick = (e) => {
@@ -79,42 +91,43 @@ export default class MemberStatusMessageAvatar extends React.Component {
 
         const elementRect = e.target.getBoundingClientRect();
 
-        // The window X and Y offsets are to adjust position when zoomed in to page
-        const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
-        const chevronOffset = 12;
-        let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
-        y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
+        const x = (elementRect.left + window.pageXOffset);
+        const chevronWidth = 16; // See .mx_ContextualMenu_chevron_bottom
+        const chevronOffset = (elementRect.width - chevronWidth) / 2;
+        const chevronMargin = 1; // Add some spacing away from target
+        const y = elementRect.top + window.pageYOffset - chevronMargin;
 
         ContextualMenu.createMenu(StatusMessageContextMenu, {
             chevronOffset: chevronOffset,
             chevronFace: 'bottom',
             left: x,
             top: y,
-            menuWidth: 190,
+            menuWidth: 226,
             user: this.props.member.user,
         });
     };
 
     render() {
-        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
-            return <MemberAvatar member={this.props.member}
-                                 width={this.props.width}
-                                 height={this.props.height}
-                                 resizeMethod={this.props.resizeMethod} />;
-        }
+        const avatar = <MemberAvatar
+            member={this.props.member}
+            width={this.props.width}
+            height={this.props.height}
+            resizeMethod={this.props.resizeMethod}
+        />;
 
-        const hasStatus = this.props.member.user ? !!this.props.member.user._unstable_statusMessage : false;
+        if (!SettingsStore.isFeatureEnabled("feature_custom_status")) {
+            return avatar;
+        }
 
         const classes = classNames({
             "mx_MemberStatusMessageAvatar": true,
-            "mx_MemberStatusMessageAvatar_hasStatus": hasStatus,
+            "mx_MemberStatusMessageAvatar_hasStatus": this.state.hasStatus,
         });
 
-        return <AccessibleButton onClick={this._onClick} className={classes} element="div">
-            <MemberAvatar member={this.props.member}
-                          width={this.props.width}
-                          height={this.props.height}
-                          resizeMethod={this.props.resizeMethod} />
+        return <AccessibleButton className={classes}
+            element="div" onClick={this._onClick}
+        >
+            {avatar}
         </AccessibleButton>;
     }
 }

src/components/views/avatars/RoomAvatar.js

@@ -158,7 +158,8 @@ module.exports = React.createClass({
             <BaseAvatar {...otherProps} name={roomName}
                 idName={room ? room.roomId : null}
                 urls={this.state.urls}
-                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null} />
+                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null}
+                disabled={!this.state.urls[0]} />
         );
     },
 });

src/components/views/context_menus/GroupInviteTileContextMenu.js

@@ -79,7 +79,7 @@ export default class GroupInviteTileContextMenu extends React.Component {
     render() {
         return <div>
             <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
-                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                 { _t('Reject') }
             </div>
         </div>;

src/components/views/context_menus/MessageContextMenu.js

@@ -26,7 +26,6 @@ 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';
 
 module.exports = React.createClass({
@@ -90,9 +89,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 +107,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,6 +196,7 @@ module.exports = React.createClass({
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
             target: this.props.mxEvent,
+            permalinkCreator: this.props.permalinkCreator,
         });
         this.closeMenu();
     },
@@ -206,7 +215,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;
@@ -246,8 +256,8 @@ module.exports = React.createClass({
             );
         }
 
-        if (isSent && this.props.mxEvent.getType() === 'm.room.message') {
-            const content = this.props.mxEvent.getContent();
+        if (isSent && mxEvent.getType() === 'm.room.message') {
+            const content = mxEvent.getContent();
             if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
                 forwardButton = (
                     <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
@@ -277,7 +287,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 +305,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 +330,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 +349,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 }
@@ -347,6 +371,7 @@ module.exports = React.createClass({
                 { replyButton }
                 { externalURLButton }
                 { collapseReplyThread }
+                { e2eInfo }
             </div>
         );
     },

src/components/views/context_menus/RoomTileContextMenu.js

@@ -245,32 +245,53 @@ module.exports = React.createClass({
         return (
             <div className="mx_RoomTileContextMenu">
                 <div className="mx_RoomTileContextMenu_notif_picker" >
-                    <img src="img/notif-slider.svg" width="20" height="107" />
+                    <img src={require("../../../../res/img/notif-slider.svg")} width="20" height="107" />
                 </div>
                 <div className={alertMeClasses} onClick={this._onClickAlertMe} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off-copy.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off-copy.svg")} width="16" height="12" />
                     { _t('All messages (noisy)') }
                 </div>
                 <div className={allNotifsClasses} onClick={this._onClickAllNotifs} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-off.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-off.svg")} width="16" height="12" />
                     { _t('All messages') }
                 </div>
                 <div className={mentionsClasses} onClick={this._onClickMentions} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute-mentions.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute-mentions.svg")} width="16" height="12" />
                     { _t('Mentions only') }
                 </div>
                 <div className={muteNotifsClasses} onClick={this._onClickMute} >
-                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src="img/notif-active.svg" width="12" height="12" />
-                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src="img/icon-context-mute.svg" width="16" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_activeIcon" src={require("../../../../res/img/notif-active.svg")} width="12" height="12" />
+                    <img className="mx_RoomTileContextMenu_notif_icon mx_filterFlipColor" src={require("../../../../res/img/icon-context-mute.svg")} width="16" height="12" />
                     { _t('Mute') }
                 </div>
             </div>
         );
     },
 
+    _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;
@@ -298,7 +319,7 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className="mx_RoomTileContextMenu_leave" onClick={leaveClickHandler} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
                     { leaveText }
                 </div>
             </div>
@@ -327,18 +348,18 @@ module.exports = React.createClass({
         return (
             <div>
                 <div className={favouriteClasses} onClick={this._onClickFavourite} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_fave.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_fave_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_fave.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_fave_on.svg")} width="15" height="15" />
                     { _t('Favourite') }
                 </div>
                 <div className={lowPriorityClasses} onClick={this._onClickLowPriority} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_low.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_low_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_low.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_low_on.svg")} width="15" height="15" />
                     { _t('Low Priority') }
                 </div>
                 <div className={dmClasses} onClick={this._onClickDM} >
-                    <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_person.svg" width="15" height="15" />
-                    <img className="mx_RoomTileContextMenu_tag_icon_set" src="img/icon_context_person_on.svg" width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon" src={require("../../../../res/img/icon_context_person.svg")} width="15" height="15" />
+                    <img className="mx_RoomTileContextMenu_tag_icon_set" src={require("../../../../res/img/icon_context_person_on.svg")} width="15" height="15" />
                     { _t('Direct Chat') }
                 </div>
             </div>
@@ -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

@@ -18,8 +18,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
-import classNames from 'classnames';
 
 export default class StatusMessageContextMenu extends React.Component {
     static propTypes = {
@@ -31,56 +31,110 @@ export default class StatusMessageContextMenu extends React.Component {
         super(props, context);
 
         this.state = {
-            message: props.user ? props.user._unstable_statusMessage : "",
+            message: this.comittedStatusMessage,
         };
     }
 
-    _onClearClick = async (e) => {
-        await MatrixClientPeg.get()._unstable_setStatusMessage("");
-        this.setState({message: ""});
+    componentWillMount() {
+        const { user } = this.props;
+        if (!user) {
+            return;
+        }
+        user.on("User._unstable_statusMessage", this._onStatusMessageCommitted);
+    }
+
+    componentWillUnmount() {
+        const { user } = this.props;
+        if (!user) {
+            return;
+        }
+        user.removeListener(
+            "User._unstable_statusMessage",
+            this._onStatusMessageCommitted,
+        );
+    }
+
+    get comittedStatusMessage() {
+        return this.props.user ? this.props.user._unstable_statusMessage : "";
+    }
+
+    _onStatusMessageCommitted = () => {
+        // The `User` object has observed a status message change.
+        this.setState({
+            message: this.comittedStatusMessage,
+            waiting: false,
+        });
+    };
+
+    _onClearClick = (e) => {
+        MatrixClientPeg.get()._unstable_setStatusMessage("");
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onSubmit = (e) => {
         e.preventDefault();
         MatrixClientPeg.get()._unstable_setStatusMessage(this.state.message);
+        this.setState({
+            waiting: true,
+        });
     };
 
     _onStatusChange = (e) => {
-        this.setState({message: e.target.value});
+        // The input field's value was changed.
+        this.setState({
+            message: e.target.value,
+        });
     };
 
     render() {
-        const formSubmitClasses = classNames({
-            "mx_StatusMessageContextMenu_submit": true,
-            "mx_StatusMessageContextMenu_submitFaded": !this.state.message, // no message == faded
-        });
+        const Spinner = sdk.getComponent('views.elements.Spinner');
 
-        const form = <form className="mx_StatusMessageContextMenu_form" onSubmit={this._onSubmit} autoComplete="off">
-            <input type="text" key="message" placeholder={_t("Set a new status...")} autoFocus={true}
-                   className="mx_StatusMessageContextMenu_message"
-                   value={this.state.message} onChange={this._onStatusChange} maxLength="60" />
-            <AccessibleButton onClick={this._onSubmit} element="div" className={formSubmitClasses}>
-                <img src="img/icons-checkmark.svg" width="22" height="22" />
-            </AccessibleButton>
+        let actionButton;
+        if (this.comittedStatusMessage) {
+            if (this.state.message === this.comittedStatusMessage) {
+                actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_clear"
+                    onClick={this._onClearClick}
+                >
+                    <span>{_t("Clear status")}</span>
+                </AccessibleButton>;
+            } else {
+                actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
+                    onClick={this._onSubmit}
+                >
+                    <span>{_t("Update status")}</span>
+                </AccessibleButton>;
+            }
+        } else {
+            actionButton = <AccessibleButton className="mx_StatusMessageContextMenu_submit"
+                disabled={!this.state.message} onClick={this._onSubmit}
+            >
+                <span>{_t("Set status")}</span>
+            </AccessibleButton>;
+        }
+
+        let spinner = null;
+        if (this.state.waiting) {
+            spinner = <Spinner w="24" h="24" />;
+        }
+
+        const form = <form className="mx_StatusMessageContextMenu_form"
+            autoComplete="off" onSubmit={this._onSubmit}
+        >
+            <input type="text" className="mx_StatusMessageContextMenu_message"
+                key="message" placeholder={_t("Set a new status...")}
+                autoFocus={true} maxLength="60" value={this.state.message}
+                onChange={this._onStatusChange}
+            />
+            <div className="mx_StatusMessageContextMenu_actionContainer">
+                {actionButton}
+                {spinner}
+            </div>
         </form>;
 
-        const clearIcon = this.state.message ? "img/cancel-red.svg" : "img/cancel.svg";
-        const clearButton = <AccessibleButton onClick={this._onClearClick} disabled={!this.state.message}
-                                              className="mx_StatusMessageContextMenu_clear">
-            <img src={clearIcon} alt={_t('Clear status')} width="12" height="12"
-                 className="mx_filterFlipColor mx_StatusMessageContextMenu_clearIcon" />
-            <span>{_t("Clear status")}</span>
-        </AccessibleButton>;
-
-        const menuClasses = classNames({
-            "mx_StatusMessageContextMenu": true,
-            "mx_StatusMessageContextMenu_hasStatus": this.state.message,
-        });
-
-        return <div className={menuClasses}>
+        return <div className="mx_StatusMessageContextMenu">
             { form }
-            <hr />
-            { clearButton }
         </div>;
     }
 }

src/components/views/context_menus/TagTileContextMenu.js

@@ -21,7 +21,6 @@ import dis from '../../../dispatcher';
 import TagOrderActions from '../../../actions/TagOrderActions';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
-import SettingsStore from "../../../settings/SettingsStore";
 
 export default class TagTileContextMenu extends React.Component {
     static propTypes = {
@@ -35,7 +34,6 @@ export default class TagTileContextMenu extends React.Component {
 
         this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
         this._onRemoveClick = this._onRemoveClick.bind(this);
-        this._onViewAsGridClick = this._onViewAsGridClick.bind(this);
     }
 
     _onViewCommunityClick() {
@@ -55,43 +53,22 @@ export default class TagTileContextMenu extends React.Component {
         this.props.onFinished();
     }
 
-    _onViewAsGridClick() {
-        dis.dispatch({
-            action: 'group_grid_view',
-            group_id: this.props.tag,
-        });
-        this.props.onFinished();
-    }
-
     render() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
-        let gridViewOption;
-        if (SettingsStore.isFeatureEnabled("feature_gridview")) {
-            gridViewOption = (<div className="mx_TagTileContextMenu_item" onClick={this._onViewAsGridClick} >
-                <TintableSvg
-                    className="mx_TagTileContextMenu_item_icon"
-                    src="img/feather-icons/grid.svg"
-                    width="15"
-                    height="15"
-                />
-                { _t('View as Grid') }
-            </div>);
-        }
         return <div>
             <div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
                 <TintableSvg
                     className="mx_TagTileContextMenu_item_icon"
-                    src="img/icons-groups.svg"
+                    src={require("../../../../res/img/icons-groups.svg")}
                     width="15"
                     height="15"
                 />
                 { _t('View Community') }
             </div>
-            { gridViewOption }
             <hr className="mx_TagTileContextMenu_separator" />
             <div className="mx_TagTileContextMenu_item" onClick={this._onRemoveClick} >
-                <img className="mx_TagTileContextMenu_item_icon" src="img/icon_context_delete.svg" width="15" height="15" />
-                { _t('Remove') }
+                <img className="mx_TagTileContextMenu_item_icon" src={require("../../../../res/img/icon_context_delete.svg")} width="15" height="15" />
+                { _t('Hide') }
             </div>
         </div>;
     }

src/components/views/context_menus/TopLeftMenu.js

@@ -1,5 +1,5 @@
 /*
-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,34 +15,108 @@ 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,
+    };
+
     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() {
+        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">{sub}</a>,
+                    },
+                )}
+                <a href={hostingSignupLink} target="_blank" rel="noopener">
+                    <img src={require("../../../../res/img/external-link.svg")} width="11" height="10" alt='' />
+                </a>
+            </div>;
+        }
+
+        let homePageSection = null;
+        if (this.hasHomePage()) {
+            homePageSection = <ul className="mx_TopLeftMenu_section_withIcon">
+                <li className="mx_TopLeftMenu_icon_home" onClick={this.viewHomePage}>{_t("Home")}</li>
+            </ul>;
+        }
+
+        let signInOutSection;
+        if (isGuest) {
+            signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
+                <li className="mx_TopLeftMenu_icon_signin" onClick={this.signIn}>{_t("Sign in")}</li>
+            </ul>;
+        } else {
+            signInOutSection = <ul className="mx_TopLeftMenu_section_withIcon">
+                <li className="mx_TopLeftMenu_icon_signout" onClick={this.signOut}>{_t("Sign out")}</li>
+            </ul>;
+        }
+
         return <div className="mx_TopLeftMenu">
-            <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.openSettings}>{_t("Settings")}</li>
-            </ul>
-            <ul className="mx_TopLeftMenu_section">
-                <li onClick={this.signOut}>{_t("Sign out")}</li>
+            <div className="mx_TopLeftMenu_section_noIcon">
+                <div>{this.props.displayName}</div>
+                <div className="mx_TopLeftMenu_greyedText">{this.props.userId}</div>
+                {hostingSignup}
+            </div>
+            {homePageSection}
+            <ul className="mx_TopLeftMenu_section_withIcon">
+                <li className="mx_TopLeftMenu_icon_settings" onClick={this.openSettings}>{_t("Settings")}</li>
             </ul>
+            {signInOutSection}
         </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/AskInviteAnywayDialog.js

@@ -0,0 +1,81 @@
+/*
+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';
+import {SettingLevel} from "../../../settings/SettingsStore";
+import SettingsStore from "../../../settings/SettingsStore";
+
+export default React.createClass({
+    propTypes: {
+        unknownProfileUsers: PropTypes.array.isRequired, // [ {userId, errorText}... ]
+        onInviteAnyways: PropTypes.func.isRequired,
+        onGiveUp: PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    _onInviteClicked: function() {
+        this.props.onInviteAnyways();
+        this.props.onFinished(true);
+    },
+
+    _onInviteNeverWarnClicked: function() {
+        SettingsStore.setValue("promptBeforeInviteUnknownUsers", null, SettingLevel.ACCOUNT, false);
+        this.props.onInviteAnyways();
+        this.props.onFinished(true);
+    },
+
+    _onGiveUpClicked: function() {
+        this.props.onGiveUp();
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
+        const errorList = this.props.unknownProfileUsers
+            .map(address => <li key={address.userId}>{address.userId}: {address.errorText}</li>);
+
+        return (
+            <BaseDialog className='mx_RetryInvitesDialog'
+                onFinished={this._onGiveUpClicked}
+                title={_t('The following users may not exist')}
+                contentId='mx_Dialog_content'
+            >
+                <div id='mx_Dialog_content'>
+                    <p>{_t("Unable to find profiles for the Matrix IDs listed below - would you like to invite them anyway?")}</p>
+                    <ul>
+                        { errorList }
+                    </ul>
+                </div>
+
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this._onGiveUpClicked}>
+                        { _t('Close') }
+                    </button>
+                    <button onClick={this._onInviteNeverWarnClicked}>
+                        { _t('Invite anyway and never warn me again') }
+                    </button>
+                    <button onClick={this._onInviteClicked} autoFocus="true">
+                        { _t('Invite anyway') }
+                    </button>
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/BaseDialog.js

@@ -24,7 +24,6 @@ import { MatrixClient } from 'matrix-js-sdk';
 
 import { KeyCode } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
-import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
 /**
@@ -106,12 +105,9 @@ export default React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
-
         let cancelButton;
         if (this.props.hasCancel) {
             cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
-                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
             </AccessibleButton>;
         }
 
@@ -128,10 +124,15 @@ export default React.createClass({
                 // AT users can skip its presentation.
                 aria-describedby={this.props.contentId}
             >
-                { cancelButton }
-                <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
-                    { this.props.title }
+                <div className={classNames('mx_Dialog_header', {
+                    'mx_Dialog_headerWithButton': !!this.props.headerButton,
+                })}>
+                    <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
+                        { this.props.title }
+                    </div>
+                    { this.props.headerButton }
                 </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

@@ -36,7 +36,7 @@ export default class ChangelogDialog extends React.Component {
         for (let i=0; i<REPOS.length; i++) {
             const oldVersion = version2[2*i];
             const newVersion = version[2*i];
-            const url = `https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
+            const url = `https://riot.im/github/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`;
             request(url, (err, response, body) => {
                 if (response.statusCode < 200 || response.statusCode >= 300) {
                     this.setState({ [REPOS[i]]: response.statusText });
@@ -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/ChatCreateOrReuseDialog.js

@@ -127,7 +127,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 onClick={this.props.onNewDMClick}
             >
                 <div className="mx_RoomTile_avatar">
-                    <img src="img/create-big.svg" width="26" height="26" />
+                    <img src={require("../../../../res/img/create-big.svg")} width="26" height="26" />
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;

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

@@ -1,6 +1,7 @@
 /*
 Copyright 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,58 +22,272 @@ import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
 import { _t } from '../../../languageHandler';
+import {verificationMethods} from 'matrix-js-sdk/lib/crypto';
 
-export default function DeviceVerifyDialog(props) {
-    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+const MODE_LEGACY = 'legacy';
+const MODE_SAS = 'sas';
 
-    const key = FormattingUtils.formatCryptoKey(props.device.getFingerprint());
-    const body = (
-        <div>
-            <p>
-                { _t("To verify that this device can be trusted, please contact its " +
-                    "owner using some other means (e.g. in person or a phone call) " +
-                    "and ask them whether the key they see in their User Settings " +
-                    "for this device matches the key below:") }
-            </p>
-            <div className="mx_UserSettings_cryptoSection">
-                <ul>
-                    <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
-                    <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
-                    <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
-                </ul>
-            </div>
-            <p>
-                { _t("If it matches, press the verify button below. " +
-                    "If it doesn't, then someone else is intercepting this device " +
-                    "and you probably want to press the blacklist button instead.") }
-            </p>
-            <p>
-                { _t("In future this verification process will be more sophisticated.") }
-            </p>
-        </div>
-    );
+const PHASE_START = 0;
+const PHASE_WAIT_FOR_PARTNER_TO_ACCEPT = 1;
+const PHASE_SHOW_SAS = 2;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 3;
+const PHASE_VERIFIED = 4;
+const PHASE_CANCELLED = 5;
 
-    function onFinished(confirm) {
-        if (confirm) {
-            MatrixClientPeg.get().setDeviceVerified(
-                props.userId, props.device.deviceId, true,
-            );
-        }
-        props.onFinished(confirm);
+export default class DeviceVerifyDialog extends React.Component {
+    static propTypes = {
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+        this._verifier = null;
+        this._showSasEvent = null;
+        this.state = {
+            phase: PHASE_START,
+            mode: MODE_SAS,
+            sasVerified: false,
+        };
     }
 
-    return (
-        <QuestionDialog
-            title={_t("Verify device")}
-            description={body}
-            button={_t("I verify that the keys match")}
-            onFinished={onFinished}
-        />
-    );
+    componentWillUnmount() {
+        if (this._verifier) {
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier.cancel('User cancel');
+        }
+    }
+
+    _onSwitchToLegacyClick = () => {
+        if (this._verifier) {
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier.cancel('User cancel');
+            this._verifier = null;
+        }
+        this.setState({mode: MODE_LEGACY});
+    }
+
+    _onSwitchToSasClick = () => {
+        this.setState({mode: MODE_SAS});
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(false);
+    }
+
+    _onLegacyFinished = (confirm) => {
+        if (confirm) {
+            MatrixClientPeg.get().setDeviceVerified(
+                this.props.userId, this.props.device.deviceId, true,
+            );
+        }
+        this.props.onFinished(confirm);
+    }
+
+    _onSasRequestClick = () => {
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_ACCEPT,
+        });
+        this._verifier = MatrixClientPeg.get().beginKeyVerification(
+            verificationMethods.SAS, this.props.userId, this.props.device.deviceId,
+        );
+        this._verifier.on('show_sas', this._onVerifierShowSas);
+        this._verifier.verify().then(() => {
+            this.setState({phase: PHASE_VERIFIED});
+            this._verifier.removeListener('show_sas', this._onVerifierShowSas);
+            this._verifier = null;
+        }).catch((e) => {
+            console.log("Verification failed", e);
+            this.setState({
+                phase: PHASE_CANCELLED,
+            });
+            this._verifier = null;
+        });
+    }
+
+    _onSasMatchesClick = () => {
+        this._showSasEvent.confirm();
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
+        });
+    }
+
+    _onVerifiedDoneClick = () => {
+        this.props.onFinished(true);
+    }
+
+    _onVerifierShowSas = (e) => {
+        this._showSasEvent = e;
+        this.setState({
+            phase: PHASE_SHOW_SAS,
+        });
+    }
+
+    _renderSasVerification() {
+        let body;
+        switch (this.state.phase) {
+            case PHASE_START:
+                body = this._renderSasVerificationPhaseStart();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_ACCEPT:
+                body = this._renderSasVerificationPhaseWaitAccept();
+                break;
+            case PHASE_SHOW_SAS:
+                body = this._renderSasVerificationPhaseShowSas();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
+                body = this._renderSasVerificationPhaseWaitForPartnerToConfirm();
+                break;
+            case PHASE_VERIFIED:
+                body = this._renderSasVerificationPhaseVerified();
+                break;
+            case PHASE_CANCELLED:
+                body = this._renderSasVerificationPhaseCancelled();
+                break;
+        }
+
+        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+        return (
+            <BaseDialog
+                title={_t("Verify device")}
+                onFinished={this._onCancelClick}
+            >
+                {body}
+            </BaseDialog>
+        );
+    }
+
+    _renderSasVerificationPhaseStart() {
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return (
+            <div>
+                <AccessibleButton
+                    element="span" className="mx_linkButton" onClick={this._onSwitchToLegacyClick}
+                >
+                    {_t("Use Legacy Verification (for older clients)")}
+                </AccessibleButton>
+                <p>
+                    { _t("Verify by comparing a short text string.") }
+                </p>
+                <p>
+                    {_t(
+                        "For maximum security, we recommend you do this in person or " +
+                        "use another trusted means of communication.",
+                    )}
+                </p>
+                <DialogButtons
+                    primaryButton={_t('Begin Verifying')}
+                    hasCancel={true}
+                    onPrimaryButtonClick={this._onSasRequestClick}
+                    onCancel={this._onCancelClick}
+                />
+            </div>
+        );
+    }
+
+    _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>
+        );
+    }
+
+    _renderSasVerificationPhaseShowSas() {
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+        return <VerificationShowSas
+            sas={this._showSasEvent.sas}
+            onCancel={this._onCancelClick}
+            onDone={this._onSasMatchesClick}
+        />;
+    }
+
+    _renderSasVerificationPhaseWaitForPartnerToConfirm() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        return <div>
+            <Spinner />
+            <p>{_t(
+                "Waiting for %(userId)s to confirm...", {userId: this.props.userId},
+            )}</p>
+        </div>;
+    }
+
+    _renderSasVerificationPhaseVerified() {
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
+    }
+
+    _renderSasVerificationPhaseCancelled() {
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
+        return <VerificationCancelled onDone={this._onCancelClick} />;
+    }
+
+    _renderLegacyVerification() {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+
+        const key = FormattingUtils.formatCryptoKey(this.props.device.getFingerprint());
+        const body = (
+            <div>
+                <AccessibleButton
+                    element="span" className="mx_linkButton" onClick={this._onSwitchToSasClick}
+                >
+                    {_t("Use two-way text verification")}
+                </AccessibleButton>
+                <p>
+                    { _t("To verify that this device can be trusted, please contact its " +
+                        "owner using some other means (e.g. in person or a phone call) " +
+                        "and ask them whether the key they see in their User Settings " +
+                        "for this device matches the key below:") }
+                </p>
+                <div className="mx_DeviceVerifyDialog_cryptoSection">
+                    <ul>
+                        <li><label>{ _t("Device name") }:</label> <span>{ this.props.device.getDisplayName() }</span></li>
+                        <li><label>{ _t("Device ID") }:</label> <span><code>{ this.props.device.deviceId }</code></span></li>
+                        <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
+                    </ul>
+                </div>
+                <p>
+                    { _t("If it matches, press the verify button below. " +
+                        "If it doesn't, then someone else is intercepting this device " +
+                        "and you probably want to press the blacklist button instead.") }
+                </p>
+            </div>
+        );
+
+        return (
+            <QuestionDialog
+                title={_t("Verify device")}
+                description={body}
+                button={_t("I verify that the keys match")}
+                onFinished={this._onLegacyFinished}
+            />
+        );
+    }
+
+    render() {
+        if (this.state.mode === MODE_LEGACY) {
+            return this._renderLegacyVerification();
+        } else {
+            return <div>
+                {this._renderSasVerification()}
+            </div>;
+        }
+    }
 }
 
-DeviceVerifyDialog.propTypes = {
-    userId: PropTypes.string.isRequired,
-    device: PropTypes.object.isRequired,
-    onFinished: PropTypes.func.isRequired,
-};

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} />;
     }
 }
 
@@ -138,12 +133,8 @@ class SendCustomEvent extends GenericEditor {
 
                 <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 +214,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 +289,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}

src/components/views/dialogs/IncomingSasDialog.js

@@ -0,0 +1,230 @@
+/*
+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 MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+const PHASE_START = 0;
+const PHASE_SHOW_SAS = 1;
+const PHASE_WAIT_FOR_PARTNER_TO_CONFIRM = 2;
+const PHASE_VERIFIED = 3;
+const PHASE_CANCELLED = 4;
+
+export default class IncomingSasDialog extends React.Component {
+    static propTypes = {
+        verifier: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this._showSasEvent = null;
+        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() {
+        if (this.state.phase !== PHASE_CANCELLED && this.state.phase !== PHASE_VERIFIED) {
+            this.props.verifier.cancel('User cancel');
+        }
+        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);
+    }
+
+    _onCancelClick = () => {
+        this.props.onFinished(this.state.phase === PHASE_VERIFIED);
+    }
+
+    _onContinueClick = () => {
+        this.setState({phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM});
+        this.props.verifier.verify().then(() => {
+            this.setState({phase: PHASE_VERIFIED});
+        }).catch((e) => {
+            console.log("Verification failed", e);
+        });
+    }
+
+    _onVerifierShowSas = (e) => {
+        this._showSasEvent = e;
+        this.setState({
+            phase: PHASE_SHOW_SAS,
+            sas: e.sas,
+        });
+    }
+
+    _onVerifierCancel = (e) => {
+        this.setState({
+            phase: PHASE_CANCELLED,
+        });
+    }
+
+    _onSasMatchesClick = () => {
+        this._showSasEvent.confirm();
+        this.setState({
+            phase: PHASE_WAIT_FOR_PARTNER_TO_CONFIRM,
+        });
+    }
+
+    _onVerifiedDoneClick = () => {
+        this.props.onFinished(true);
+    }
+
+    _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>
+                {profile}
+                <p>{_t(
+                    "Verify this user to mark them as trusted. " +
+                    "Trusting users gives you extra peace of mind when using " +
+                    "end-to-end encrypted messages.",
+                )}</p>
+                <p>{_t(
+                    // NB. Below wording adjusted to singular 'device' until we have
+                    // cross-signing
+                    "Verifying this user will mark their device as trusted, and " +
+                    "also mark your device as trusted to them.",
+                )}</p>
+                <DialogButtons
+                    primaryButton={_t('Continue')}
+                    hasCancel={true}
+                    onPrimaryButtonClick={this._onContinueClick}
+                    onCancel={this._onCancelClick}
+                />
+            </div>
+        );
+    }
+
+    _renderPhaseShowSas() {
+        const VerificationShowSas = sdk.getComponent('views.verification.VerificationShowSas');
+        return <VerificationShowSas
+            sas={this._showSasEvent.sas}
+            onCancel={this._onCancelClick}
+            onDone={this._onSasMatchesClick}
+        />;
+    }
+
+    _renderPhaseWaitForPartnerToConfirm() {
+        const Spinner = sdk.getComponent("views.elements.Spinner");
+
+        return (
+            <div>
+                <Spinner />
+                <p>{_t("Waiting for partner to confirm...")}</p>
+            </div>
+        );
+    }
+
+    _renderPhaseVerified() {
+        const VerificationComplete = sdk.getComponent('views.verification.VerificationComplete');
+        return <VerificationComplete onDone={this._onVerifiedDoneClick} />;
+    }
+
+    _renderPhaseCancelled() {
+        const VerificationCancelled = sdk.getComponent('views.verification.VerificationCancelled');
+        return <VerificationCancelled onDone={this._onCancelClick} />;
+    }
+
+    render() {
+        let body;
+        switch (this.state.phase) {
+            case PHASE_START:
+                body = this._renderPhaseStart();
+                break;
+            case PHASE_SHOW_SAS:
+                body = this._renderPhaseShowSas();
+                break;
+            case PHASE_WAIT_FOR_PARTNER_TO_CONFIRM:
+                body = this._renderPhaseWaitForPartnerToConfirm();
+                break;
+            case PHASE_VERIFIED:
+                body = this._renderPhaseVerified();
+                break;
+            case PHASE_CANCELLED:
+                body = this._renderPhaseCancelled();
+                break;
+        }
+
+        const BaseDialog = sdk.getComponent("dialogs.BaseDialog");
+        return (
+            <BaseDialog
+                title={_t("Incoming Verification Request")}
+                onFinished={this._onFinished}
+            >
+                {body}
+            </BaseDialog>
+        );
+    }
+}
+

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,110 +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("Use 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 key.",
-                    )}
-                    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

@@ -0,0 +1,74 @@
+/*
+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 {Tab, TabbedView} from "../../structures/TabbedView";
+import {_t, _td} from "../../../languageHandler";
+import AdvancedRoomSettingsTab from "../settings/tabs/room/AdvancedRoomSettingsTab";
+import RolesRoomSettingsTab from "../settings/tabs/room/RolesRoomSettingsTab";
+import GeneralRoomSettingsTab from "../settings/tabs/room/GeneralRoomSettingsTab";
+import SecurityRoomSettingsTab from "../settings/tabs/room/SecurityRoomSettingsTab";
+import sdk from "../../../index";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+
+export default class RoomSettingsDialog extends React.Component {
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _getTabs() {
+        const tabs = [];
+
+        tabs.push(new Tab(
+            _td("General"),
+            "mx_RoomSettingsDialog_settingsIcon",
+            <GeneralRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_RoomSettingsDialog_securityIcon",
+            <SecurityRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Roles & Permissions"),
+            "mx_RoomSettingsDialog_rolesIcon",
+            <RolesRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+        tabs.push(new Tab(
+            _td("Advanced"),
+            "mx_RoomSettingsDialog_warningIcon",
+            <AdvancedRoomSettingsTab roomId={this.props.roomId} />,
+        ));
+
+        return tabs;
+    }
+
+    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 - %(roomName)s", {roomName})}>
+                <div className='ms_SettingsDialog_content'>
+                    <TabbedView tabs={this._getTabs()} />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -29,13 +29,15 @@ export default React.createClass({
         onFinished: PropTypes.func.isRequired,
     },
 
-    componentWillMount: function() {
-        this._targetVersion = this.props.room.shouldUpgradeToVersion();
+    componentWillMount: async function() {
+        const recommended = await this.props.room.getRecommendedVersion();
+        this._targetVersion = recommended.version;
+        this.setState({busy: false});
     },
 
     getInitialState: function() {
         return {
-            busy: false,
+            busy: true,
         };
     },
 

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();
         }
@@ -193,9 +193,6 @@ export default React.createClass({
             return;
         }
 
-        // XXX Implement RTS /register here
-        const teamToken = null;
-
         this.props.onFinished(true, {
             userId: response.user_id,
             deviceId: response.device_id,
@@ -203,7 +200,6 @@ export default React.createClass({
             identityServerUrl: this._matrixClient.getIdentityServerUrl(),
             accessToken: response.access_token,
             password: this._generatedPassword,
-            teamToken: teamToken,
         });
     },
 

src/components/views/dialogs/SetPasswordDialog.js

@@ -116,9 +116,8 @@ export default React.createClass({
                     <ChangePassword
                         className="mx_SetPasswordDialog_change_password"
                         rowClassName=""
-                        rowLabelClassName=""
-                        rowInputClassName=""
-                        buttonClassName="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonClassNames="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        buttonKind="primary"
                         confirm={false}
                         autoFocusNewPasswordInput={true}
                         shouldAskForEmail={true}

src/components/views/dialogs/ShareDialog.js

@@ -20,17 +20,17 @@ 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 = [
     {
         name: 'Facebook',
-        img: 'img/social/facebook.png',
+        img: require("../../../../res/img/social/facebook.png"),
         url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
     }, {
         name: 'Twitter',
-        img: 'img/social/twitter-2.png',
+        img: require("../../../../res/img/social/twitter-2.png"),
         url: (url) => `https://twitter.com/home?status=${url}`,
     }, /* // icon missing
         name: 'Google Plus',
@@ -38,15 +38,15 @@ const socials = [
         url: (url) => `https://plus.google.com/share?url=${url}`,
     },*/ {
         name: 'LinkedIn',
-        img: 'img/social/linkedin.png',
+        img: require("../../../../res/img/social/linkedin.png"),
         url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
     }, {
         name: 'Reddit',
-        img: 'img/social/reddit.png',
+        img: require("../../../../res/img/social/reddit.png"),
         url: (url) => `http://www.reddit.com/submit?url=${url}`,
     }, {
         name: 'email',
-        img: 'img/social/email-1.png',
+        img: require("../../../../res/img/social/email-1.png"),
         url: (url) => `mailto:?body=${url}`,
     },
 ];
@@ -123,6 +123,14 @@ 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});
+        }
+    }
+
     render() {
         let title;
         let matrixToUrl;
@@ -146,9 +154,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 +177,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();
             }
         }
 
@@ -202,7 +210,7 @@ export default class ShareDialog extends React.Component {
 
                 <div className="mx_ShareDialog_split">
                     <div className="mx_ShareDialog_qrcode_container">
-                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo={require("../../../../res/img/matrix-m.svg")} />
                     </div>
                     <div className="mx_ShareDialog_social_container">
                         {

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

@@ -0,0 +1,130 @@
+/*
+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';
+import { _t } from '../../../languageHandler';
+
+// Dev note: this should be a temporary dialog while we work out what is
+// actually going on. See https://github.com/vector-im/riot-web/issues/8593
+// for more details. This dialog is almost entirely a copy/paste job of
+// BugReportDialog.
+export default class TimelineExplosionDialog extends React.Component {
+    static propTypes = {
+        onFinished: React.PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            busy: false,
+            progress: null,
+        };
+    }
+
+    _onCancel() {
+        console.log("Reloading without sending logs for timeline explosion");
+        window.location.reload();
+    }
+
+    _onSubmit = () => {
+        const userText = "Caught timeline explosion\n\nhttps://github.com/vector-im/riot-web/issues/8593";
+
+        this.setState({busy: true, progress: null});
+        this._sendProgressCallback(_t("Preparing to send logs"));
+
+        require(['../../../rageshake/submit-rageshake'], (s) => {
+            s(SdkConfig.get().bug_report_endpoint_url, {
+                userText,
+                sendLogs: true,
+                progressCallback: this._sendProgressCallback,
+            }).then(() => {
+                console.log("Logs sent for timeline explosion - reloading Riot");
+                window.location.reload();
+            }, (err) => {
+                console.error("Error sending logs for timeline explosion - reloading anyways.", err);
+                window.location.reload();
+            });
+        });
+    };
+
+    _sendProgressCallback = (progress) => {
+        this.setState({progress: progress});
+    };
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    {this.state.progress} ...
+                    <Loader />
+                </div>
+            );
+        }
+
+        return (
+            <BaseDialog className="mx_TimelineExplosionDialog" onFinished={this._onCancel}
+                        title={_t('Error showing you your room')} contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    <p>
+                        {_t(
+                            "Riot has run into a problem which makes it difficult to show you " +
+                            "your messages right now. Nothing has been lost and reloading the app " +
+                            "should fix this for you. In order to assist us in troubleshooting the " +
+                            "problem, we'd like to take a look at your debug logs. You do not need " +
+                            "to send your logs unless you want to, but we would really appreciate " +
+                            "it if you did. We'd also like to apologize for having to show this " +
+                            "message to you - we hope your debug logs are the key to solving the " +
+                            "issue once and for all. If you'd like more information on the bug you've " +
+                            "accidentally run into, please visit <a>the issue</a>.",
+                            {},
+                            {
+                                'a': (sub) => {
+                                    return <a href="https://github.com/vector-im/riot-web/issues/8593"
+                                              target="_blank" rel="noopener">{sub}</a>;
+                                },
+                            },
+                        )}
+                    </p>
+                    <p>
+                        {_t(
+                            "Debug logs contain application usage data including your " +
+                            "username, the IDs or aliases of the rooms or groups you " +
+                            "have visited and the usernames of other users. They do " +
+                            "not contain messages.",
+                        )}
+                    </p>
+                    {progress}
+                </div>
+                <DialogButtons primaryButton={_t("Send debug logs and reload Riot")}
+                               onPrimaryButtonClick={this._onSubmit}
+                               cancelButton={_t("Reload Riot without sending logs")}
+                               focus={true}
+                               onCancel={this._onCancel}
+                               disabled={this.state.busy}
+                />
+            </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>
-            <DeviceVerifyButtons device={device} userId={userId} />
-            { device.deviceId }
-            <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,106 @@
+/*
+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'
+                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

@@ -0,0 +1,98 @@
+/*
+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 {Tab, TabbedView} from "../../structures/TabbedView";
+import {_t, _td} from "../../../languageHandler";
+import GeneralUserSettingsTab from "../settings/tabs/user/GeneralUserSettingsTab";
+import SettingsStore from "../../../settings/SettingsStore";
+import LabsUserSettingsTab from "../settings/tabs/user/LabsUserSettingsTab";
+import 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";
+
+export default class UserSettingsDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    _getTabs() {
+        const tabs = [];
+
+        tabs.push(new Tab(
+            _td("General"),
+            "mx_UserSettingsDialog_settingsIcon",
+            <GeneralUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Flair"),
+            "mx_UserSettingsDialog_flairIcon",
+            <FlairUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Notifications"),
+            "mx_UserSettingsDialog_bellIcon",
+            <NotificationUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Preferences"),
+            "mx_UserSettingsDialog_preferencesIcon",
+            <PreferencesUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Voice & Video"),
+            "mx_UserSettingsDialog_voiceIcon",
+            <VoiceUserSettingsTab />,
+        ));
+        tabs.push(new Tab(
+            _td("Security & Privacy"),
+            "mx_UserSettingsDialog_securityIcon",
+            <SecurityUserSettingsTab />,
+        ));
+        if (SettingsStore.getLabsFeatures().length > 0) {
+            tabs.push(new Tab(
+                _td("Labs"),
+                "mx_UserSettingsDialog_labsIcon",
+                <LabsUserSettingsTab />,
+            ));
+        }
+        tabs.push(new Tab(
+            _td("Help & About"),
+            "mx_UserSettingsDialog_helpIcon",
+            <HelpUserSettingsTab closeSettingsFn={this.props.onFinished} />,
+        ));
+
+        return tabs;
+    }
+
+    render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+
+        return (
+            <BaseDialog className='mx_UserSettingsDialog' hasCancel={true}
+                        onFinished={this.props.onFinished} title={_t("Settings")}>
+                <div className='ms_SettingsDialog_content'>
+                    <TabbedView tabs={this._getTabs()} />
+                </div>
+            </BaseDialog>
+        );
+    }
+}

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

@@ -1,5 +1,5 @@
 /*
-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.
@@ -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,8 +187,28 @@ 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!");
@@ -202,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"
@@ -260,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

@@ -18,7 +18,7 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
 
-const DEFAULT_ICON_URL = "img/network-matrix.svg";
+const DEFAULT_ICON_URL = require("../../../../res/img/network-matrix.svg");
 
 export default class NetworkDropdown extends React.Component {
     constructor(props) {
@@ -41,8 +41,8 @@ export default class NetworkDropdown extends React.Component {
         this.state = {
             expanded: false,
             selectedServer: server,
-            selectedInstance: null,
-            includeAllNetworks: false,
+            selectedInstanceId: null,
+            includeAllNetworks: true,
         };
     }
 
@@ -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: true,
             });
             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="img/network-matrix.svg" />;
-            span_class = 'mx_NetworkDropdown_menu_network';
+            icon = <img src={require("../../../../res/img/network-matrix.svg")} />;
         } 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" onClick={this.onInputClick}>
-                {current_value}
-                <span className="mx_NetworkDropdown_arrow"></span>
+            <div className="mx_NetworkDropdown_input mx_no_textinput" onClick={this.onInputClick}>
+                {currentValue}
+                <span className="mx_NetworkDropdown_arrow" />
                 {menu}
             </div>
         </div>;

src/components/views/elements/AccessibleButton.js

@@ -28,41 +28,56 @@ import { KeyCode } from '../../../Keyboard';
  * @returns {Object} rendered react
  */
 export default function AccessibleButton(props) {
-    const {element, onClick, children, ...restProps} = props;
-    restProps.onClick = onClick;
-    // We need to consume enter onKeyDown and space onKeyUp
-    // otherwise we are risking also activating other keyboard focusable elements
-    // that might receive focus as a result of the AccessibleButtonClick action
-    // It's because we are using html buttons at a few places e.g. inside dialogs
-    // And divs which we report as role button to assistive technologies.
-    // Browsers handle space and enter keypresses differently and we are only adjusting to the
-    // inconsistencies here
-    restProps.onKeyDown = function(e) {
-        if (e.keyCode === KeyCode.ENTER) {
-            e.stopPropagation();
-            e.preventDefault();
-            return onClick(e);
-        }
-        if (e.keyCode === KeyCode.SPACE) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
-    restProps.onKeyUp = function(e) {
-        if (e.keyCode === KeyCode.SPACE) {
-            e.stopPropagation();
-            e.preventDefault();
-            return onClick(e);
-        }
-        if (e.keyCode === KeyCode.ENTER) {
-            e.stopPropagation();
-            e.preventDefault();
-        }
-    };
+    const {element, onClick, children, kind, disabled, ...restProps} = props;
+
+    if (!disabled) {
+        restProps.onClick = onClick;
+        // We need to consume enter onKeyDown and space onKeyUp
+        // otherwise we are risking also activating other keyboard focusable elements
+        // that might receive focus as a result of the AccessibleButtonClick action
+        // It's because we are using html buttons at a few places e.g. inside dialogs
+        // And divs which we report as role button to assistive technologies.
+        // Browsers handle space and enter keypresses differently and we are only adjusting to the
+        // inconsistencies here
+        restProps.onKeyDown = function(e) {
+            if (e.keyCode === KeyCode.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.keyCode === KeyCode.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+        restProps.onKeyUp = function(e) {
+            if (e.keyCode === KeyCode.SPACE) {
+                e.stopPropagation();
+                e.preventDefault();
+                return onClick(e);
+            }
+            if (e.keyCode === KeyCode.ENTER) {
+                e.stopPropagation();
+                e.preventDefault();
+            }
+        };
+    }
+
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
     restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
+
+    if (kind) {
+        // We apply a hasKind class to maintain backwards compatibility with
+        // buttons which might not know about kind and break
+        restProps.className += " mx_AccessibleButton_hasKind mx_AccessibleButton_kind_" + kind;
+    }
+
+    if (disabled) {
+        restProps.className += " mx_AccessibleButton_disabled";
+    }
+
     return React.createElement(element, restProps, children);
 }
 
@@ -76,6 +91,12 @@ AccessibleButton.propTypes = {
     children: PropTypes.node,
     element: PropTypes.string,
     onClick: PropTypes.func.isRequired,
+
+    // The kind of button, similar to how Bootstrap works.
+    // See available classes for AccessibleButton for options.
+    kind: PropTypes.string,
+
+    disabled: PropTypes.bool,
 };
 
 AccessibleButton.defaultProps = {

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

@@ -150,7 +150,7 @@ export default React.createClass({
                             showAddress={this.props.showAddress}
                             justified={true}
                             networkName="vector"
-                            networkUrl="img/search-icon-vector.svg"
+                            networkUrl={require("../../../../res/img/search-icon-vector.svg")}
                         />
                     </div>,
                 );

src/components/views/elements/AddressTile.js

@@ -54,7 +54,7 @@ export default React.createClass({
                 address.avatarMxc, 25, 25, 'crop',
             ));
         } else if (address.addressType === 'email') {
-            imgUrls.push('img/icon-email-user.svg');
+            imgUrls.push(require("../../../../res/img/icon-email-user.svg"));
         }
 
         // Removing networks for now as they're not really supported
@@ -141,7 +141,7 @@ export default React.createClass({
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
-                    <TintableSvg src="img/icon-address-delete.svg" width="9" height="9" />
+                    <TintableSvg src={require("../../../../res/img/icon-address-delete.svg")} width="9" height="9" />
                 </div>
             );
         }

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='img/warning.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

@@ -24,9 +24,9 @@ import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import WidgetMessaging from '../../../WidgetMessaging';
-import TintableSvgButton from './TintableSvgButton';
+import AccessibleButton from './AccessibleButton';
 import Modal from '../../../Modal';
-import { _t, _td } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
@@ -34,6 +34,7 @@ import MessageSpinner from './MessageSpinner';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher';
 import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import classNames from 'classnames';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
 const ENABLE_REACT_PERF = false;
@@ -51,6 +52,7 @@ export default class AppTile extends React.Component {
         this._onLoaded = this._onLoaded.bind(this);
         this._onEditClick = this._onEditClick.bind(this);
         this._onDeleteClick = this._onDeleteClick.bind(this);
+        this._onCancelClick = this._onCancelClick.bind(this);
         this._onSnapshotClick = this._onSnapshotClick.bind(this);
         this.onClickMenuBar = this.onClickMenuBar.bind(this);
         this._onMinimiseClick = this._onMinimiseClick.bind(this);
@@ -239,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);
+            });
         }
     }
 
@@ -267,55 +276,59 @@ export default class AppTile extends React.Component {
     _onDeleteClick() {
         if (this.props.onDeleteClick) {
             this.props.onDeleteClick();
-        } else {
-            if (this._canUserModify()) {
-                // Show delete confirmation dialog
-                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
-                    title: _t("Delete Widget"),
-                    description: _t(
-                        "Deleting a widget removes it for all users in this room." +
-                        " Are you sure you want to delete this widget?"),
-                    button: _t("Delete widget"),
-                    onFinished: (confirmed) => {
-                        if (!confirmed) {
-                            return;
-                        }
-                        this.setState({deleting: true});
+        } else if (this._canUserModify()) {
+            // Show delete confirmation dialog
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                title: _t("Delete Widget"),
+                description: _t(
+                    "Deleting a widget removes it for all users in this room." +
+                    " Are you sure you want to delete this widget?"),
+                button: _t("Delete widget"),
+                onFinished: (confirmed) => {
+                    if (!confirmed) {
+                        return;
+                    }
+                    this.setState({deleting: true});
 
-                        // HACK: This is a really dirty way to ensure that Jitsi cleans up
-                        // its hold on the webcam. Without this, the widget holds a media
-                        // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
-                        if (this.refs.appFrame) {
-                            // In practice we could just do `+= ''` to trick the browser
-                            // into thinking the URL changed, however I can foresee this
-                            // being optimized out by a browser. Instead, we'll just point
-                            // the iframe at a page that is reasonably safe to use in the
-                            // event the iframe doesn't wink away.
-                            // This is relative to where the Riot instance is located.
-                            this.refs.appFrame.src = 'about:blank';
-                        }
+                    // HACK: This is a really dirty way to ensure that Jitsi cleans up
+                    // its hold on the webcam. Without this, the widget holds a media
+                    // stream open, even after death. See https://github.com/vector-im/riot-web/issues/7351
+                    if (this.refs.appFrame) {
+                        // In practice we could just do `+= ''` to trick the browser
+                        // into thinking the URL changed, however I can foresee this
+                        // being optimized out by a browser. Instead, we'll just point
+                        // the iframe at a page that is reasonably safe to use in the
+                        // event the iframe doesn't wink away.
+                        // This is relative to where the Riot instance is located.
+                        this.refs.appFrame.src = 'about:blank';
+                    }
 
-                        WidgetUtils.setRoomWidget(
-                            this.props.room.roomId,
-                            this.props.id,
-                        ).catch((e) => {
-                            console.error('Failed to delete widget', e);
-                            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    WidgetUtils.setRoomWidget(
+                        this.props.room.roomId,
+                        this.props.id,
+                    ).catch((e) => {
+                        console.error('Failed to delete widget', e);
+                        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
-                            Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
-                                title: _t('Failed to remove widget'),
-                                description: _t('An error ocurred whilst trying to remove the widget from the room'),
-                            });
-                        }).finally(() => {
-                            this.setState({deleting: false});
+                        Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
+                            title: _t('Failed to remove widget'),
+                            description: _t('An error ocurred whilst trying to remove the widget from the room'),
                         });
-                    },
-                });
-            } else {
-                console.log("Revoke widget permissions - %s", this.props.id);
-                this._revokeWidgetPermission();
-            }
+                    }).finally(() => {
+                        this.setState({deleting: false});
+                    });
+                },
+            });
+        }
+    }
+
+    _onCancelClick() {
+        if (this.props.onDeleteClick) {
+            this.props.onDeleteClick();
+        } else {
+            console.log("Revoke widget permissions - %s", this.props.id);
+            this._revokeWidgetPermission();
         }
     }
 
@@ -323,9 +336,14 @@ 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.
+        if (ActiveWidgetStore.getWidgetMessaging(this.props.id)) {
+            ActiveWidgetStore.delWidgetMessaging(this.props.id);
         }
+        this._setupWidgetMessaging();
+
         ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
         this.setState({loading: false});
     }
@@ -333,7 +351,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);
@@ -394,15 +413,6 @@ export default class AppTile extends React.Component {
         });
     }
 
-    // Widget labels to render, depending upon user permissions
-    // These strings are translated at the point that they are inserted in to the DOM, in the render method
-    _deleteWidgetLabel() {
-        if (this._canUserModify()) {
-            return _td('Delete widget');
-        }
-        return _td('Revoke widget access');
-    }
-
     /* TODO -- Store permission in account data so that it is persisted across multiple devices */
     _grantWidgetPermission() {
         console.warn('Granting permission to load widget - ', this.state.widgetUrl);
@@ -438,10 +448,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() {
@@ -481,9 +495,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) {
@@ -580,21 +594,14 @@ export default class AppTile extends React.Component {
         }
 
         // editing is done in scalar
-        const showEditButton = Boolean(this._scalarClient && this._canUserModify());
-        const deleteWidgetLabel = this._deleteWidgetLabel();
-        let deleteIcon = 'img/cancel_green.svg';
-        let deleteClasses = 'mx_AppTileMenuBarWidget';
-        if (this._canUserModify()) {
-            deleteIcon = 'img/icon-delete-pink.svg';
-            deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
-        }
-
+        const canUserModify = this._canUserModify();
+        const showEditButton = Boolean(this._scalarClient && canUserModify);
+        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 showPictureSnapshotIcon = 'img/camera_green.svg';
-        const popoutWidgetIcon = 'img/button-new-window.svg';
-        const reloadWidgetIcon = 'img/button-refresh.svg';
-        const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
+        const showMinimiseButton = this.props.showMinimise && this.props.show;
+        const showMaximiseButton = this.props.showMinimise && !this.props.show;
 
         let appTileClass;
         if (this.props.miniMode) {
@@ -605,71 +612,67 @@ export default class AppTile extends React.Component {
             appTileClass = 'mx_AppTile';
         }
 
+        const menuBarClasses = classNames({
+            mx_AppTileMenuBar: true,
+            mx_AppTileMenuBar_expanded: this.props.show,
+        });
+
         return (
             <div className={appTileClass} id={this.props.id}>
                 { this.props.showMenubar &&
-                <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
+                <div ref="menu_bar" className={menuBarClasses} onClick={this.onClickMenuBar}>
                     <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
-                        { this.props.showMinimise && <TintableSvgButton
-                            src={windowStateIcon}
-                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                        { /* Minimise widget */ }
+                        { showMinimiseButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_minimise"
                             title={_t('Minimize apps')}
-                            width="10"
-                            height="10"
                             onClick={this._onMinimiseClick}
                         /> }
+                        { /* Maximise widget */ }
+                        { showMaximiseButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_maximise"
+                            title={_t('Maximize apps')}
+                            onClick={this._onMinimiseClick}
+                        /> }
+                        { /* Title */ }
                         { this.props.showTitle && this._getTileTitle() }
                     </span>
                     <span className="mx_AppTileMenuBarWidgets">
                         { /* Reload widget */ }
-                        { this.props.showReload && <TintableSvgButton
-                            src={reloadWidgetIcon}
-                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                        { this.props.showReload && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_reload"
                             title={_t('Reload widget')}
                             onClick={this._onReloadWidgetClick}
-                            width="10"
-                            height="10"
                         /> }
-
                         { /* Popout widget */ }
-                        { this.props.showPopout && <TintableSvgButton
-                            src={popoutWidgetIcon}
-                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                        { this.props.showPopout && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
                             title={_t('Popout widget')}
                             onClick={this._onPopoutWidgetClick}
-                            width="10"
-                            height="10"
                         /> }
-
                         { /* Snapshot widget */ }
-                        { showPictureSnapshotButton && <TintableSvgButton
-                            src={showPictureSnapshotIcon}
-                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                        { showPictureSnapshotButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_snapshot"
                             title={_t('Picture')}
                             onClick={this._onSnapshotClick}
-                            width="10"
-                            height="10"
                         /> }
-
                         { /* Edit widget */ }
-                        { showEditButton && <TintableSvgButton
-                            src="img/edit_green.svg"
-                            className={"mx_AppTileMenuBarWidget " +
-                              (this.props.showDelete ? "mx_AppTileMenuBarWidgetPadding" : "")}
+                        { showEditButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_edit"
                             title={_t('Edit')}
                             onClick={this._onEditClick}
-                            width="10"
-                            height="10"
                         /> }
-
                         { /* Delete widget */ }
-                        { this.props.showDelete && <TintableSvgButton
-                            src={deleteIcon}
-                            className={deleteClasses}
-                            title={_t(deleteWidgetLabel)}
+                        { showDeleteButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_delete"
+                            title={_t('Delete widget')}
                             onClick={this._onDeleteClick}
-                            width="10"
-                            height="10"
+                        /> }
+                        { /* Cancel widget */ }
+                        { showCancelButton && <AccessibleButton
+                            className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_cancel"
+                            title={_t('Revoke widget access')}
+                            onClick={this._onCancelClick}
                         /> }
                     </span>
                 </div> }

src/components/views/elements/AppWarning.js

@@ -5,7 +5,7 @@ const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src='img/warning.svg' alt='' />
+                <img src={require("../../../../res/img/warning.svg")} alt='' />
             </div>
             <div className='mx_AppPermissionWarningText'>
                 <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>

src/components/views/elements/CreateRoomButton.js

@@ -25,7 +25,7 @@ const CreateRoomButton = function(props) {
         <ActionButton action="view_create_room"
             mouseOverAction={props.callout ? "callout_create_room" : null}
             label={_t("Create new room")}
-            iconPath="img/icons-create-room.svg"
+            iconPath={require("../../../../res/img/icons-create-room.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/DeviceVerifyButtons.js

@@ -42,7 +42,9 @@ export default React.createClass({
 
     componentWillUnmount: function() {
         const cli = MatrixClientPeg.get();
-        cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        if (cli) {
+            cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
+        }
     },
 
     onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
@@ -112,9 +114,8 @@ export default React.createClass({
             );
         }
 
-        // mx_MemberDeviceInfo because the vector's CSS on EncryptedEventDialog is awful
         return (
-            <div className="mx_MemberDeviceInfo mx_DeviceVerifyButtons" >
+            <div className="mx_DeviceVerifyButtons" >
                 { verifyButton }
                 { blacklistButton }
             </div>

src/components/views/elements/DirectorySearchBox.js

@@ -17,6 +17,8 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 export default class DirectorySearchBox extends React.Component {
     constructor() {
@@ -74,6 +76,8 @@ export default class DirectorySearchBox extends React.Component {
     }
 
     render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
         const searchbox_classes = {
             mx_DirectorySearchBox: true,
         };
@@ -81,27 +85,21 @@ export default class DirectorySearchBox extends React.Component {
 
         let join_button;
         if (this.props.showJoinButton) {
-            join_button = <span className="mx_DirectorySearchBox_joinButton"
+            join_button = <AccessibleButton className="mx_DirectorySearchBox_joinButton"
                 onClick={this._onJoinButtonClick}
-            >
-                Join
-            </span>;
+            >{_t("Join")}</AccessibleButton>;
         }
 
-        return <span className={classnames(searchbox_classes)}>
-            <div className="mx_DirectorySearchBox_container">
+        return <div className={`mx_DirectorySearchBox ${this.props.className} mx_textinput`}>
                 <input type="text" name="dirsearch" value={this.state.value}
-                    className="mx_DirectorySearchBox_input"
+                    className="mx_textinput_icon mx_textinput_search"
                     ref={this._collectInput}
                     onChange={this._onChange} onKeyUp={this._onKeyUp}
                     placeholder={this.props.placeholder} autoFocus
                 />
                 { join_button }
-                <span className="mx_DirectorySearchBox_clear_wrapper">
-                    <span className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
-                </span>
-            </div>
-        </span>;
+                <AccessibleButton className="mx_DirectorySearchBox_clear" onClick={this._onClearClick}></AccessibleButton>
+            </div>;
     }
 }
 

src/components/views/elements/Dropdown.js

@@ -310,7 +310,7 @@ export default class Dropdown extends React.Component {
         // Note the menu sits inside the AccessibleButton div so it's anchored
         // to the input, but overflows below it. The root contains both.
         return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
-            <AccessibleButton className="mx_Dropdown_input" onClick={this._onInputClick}>
+            <AccessibleButton className="mx_Dropdown_input mx_no_textinput" onClick={this._onInputClick}>
                 { currentValue }
                 <span className="mx_Dropdown_arrow"></span>
                 { menu }

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,141 +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="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="img/cancel-small.svg" width="14" height="14"
-                        alt={_t("Delete")} onClick={this.onRemove} />
-                </div>
-            }
-        </div>;
-    },
-});
+            );
+        }
 
-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

@@ -20,12 +20,12 @@ import PropTypes from 'prop-types';
 import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
-    const {element, children, ...restProps} = props;
+    const {element, children, addAlt, ...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);
+        restProps.dangerouslySetInnerHTML = emojifyText(children, addAlt);
         return React.createElement(element, restProps);
     } else {
         return React.createElement(element, restProps, children);
@@ -39,4 +39,5 @@ EmojiText.propTypes = {
 
 EmojiText.defaultProps = {
     element: 'span',
+    addAlt: true,
 };

src/components/views/elements/Field.js

@@ -0,0 +1,122 @@
+/*
+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';
+
+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 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 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>.
+    };
+
+    constructor() {
+        super();
+        this.state = {
+            valid: undefined,
+            feedback: undefined,
+        };
+    }
+
+    onChange = (ev) => {
+        if (this.props.onValidate) {
+            const result = this.props.onValidate(ev.target.value);
+            this.setState({
+                valid: result.valid,
+                feedback: result.feedback,
+            });
+        }
+        // Parent component may have supplied its own `onChange` as well
+        if (this.props.onChange) {
+            this.props.onChange(ev);
+        }
+    };
+
+    render() {
+        const { element, prefix, onValidate, children, ...inputProps } = this.props;
+
+        const inputElement = element || "input";
+
+        // Set some defaults for the <input> element
+        inputProps.type = inputProps.type || "text";
+        inputProps.ref = "fieldInput";
+        inputProps.placeholder = inputProps.placeholder || inputProps.label;
+
+        inputProps.onChange = this.onChange;
+
+        const fieldInput = React.createElement(inputElement, inputProps, children);
+
+        let prefixContainer = null;
+        if (prefix) {
+            prefixContainer = <span className="mx_Field_prefix">{prefix}</span>;
+        }
+
+        let validClass;
+        if (onValidate) {
+            validClass = classNames({
+                mx_Field_valid: this.state.valid === true,
+                mx_Field_invalid: this.state.valid === false,
+            });
+        }
+
+        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,
+            [validClass]: true,
+        });
+
+        // handle displaying feedback on validity
+        const Tooltip = sdk.getComponent("elements.Tooltip");
+        let feedback;
+        if (this.state.feedback) {
+            feedback = <Tooltip
+                tooltipClassName="mx_Field_tooltip"
+                label={this.state.feedback}
+            />;
+        }
+
+        return <div className={fieldClasses}>
+            {prefixContainer}
+            {fieldInput}
+            <label htmlFor={this.props.id}>{this.props.label}</label>
+            {feedback}
+        </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/HomeButton.js

@@ -24,7 +24,7 @@ const HomeButton = function(props) {
     return (
         <ActionButton action="view_home_page"
             label={_t("Home")}
-            iconPath="img/icons-home.svg"
+            iconPath={require("../../../../res/img/icons-home.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/ImageView.js

@@ -173,10 +173,10 @@ module.exports = React.createClass({
                 <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={style} />
                     <div className="mx_ImageView_labelWrapper">
                         <div className="mx_ImageView_label">
-                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt={ _t('Close') } /></AccessibleButton>
+                            <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>
                             <div className="mx_ImageView_shim">
                             </div>
                             <div className="mx_ImageView_name">

src/components/views/elements/InlineSpinner.js

@@ -26,7 +26,7 @@ module.exports = React.createClass({
 
         return (
             <div className="mx_InlineSpinner">
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/LabelledToggleSwitch.js

@@ -0,0 +1,60 @@
+/*
+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 ToggleSwitch from "./ToggleSwitch";
+
+export default class LabelledToggleSwitch extends React.Component {
+    static propTypes = {
+        // The value for the toggle switch
+        value: PropTypes.bool.isRequired,
+
+        // The function to call when the value changes
+        onChange: PropTypes.func.isRequired,
+
+        // The translated label for the switch
+        label: PropTypes.string.isRequired,
+
+        // 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">
+                {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,22 +80,29 @@ 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()) {
-                integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
+                integrationsWarningTriangle = <img
+                    src={require("../../../../res/img/warning.svg")}
+                    title={_t('Integrations Error')}
+                    width="17"
+                />;
                 // 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="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/MessageSpinner.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_Spinner">
                 <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </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,
         };
     },
 
@@ -77,61 +77,61 @@ module.exports = React.createClass({
             return l === undefined || l <= newProps.maxValue;
         });
 
+        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={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 +145,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={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 = {
@@ -85,7 +86,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 +95,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 +160,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 +175,7 @@ export default class ReplyThread extends React.Component {
     }
 
     componentDidUpdate() {
-        this.props.onWidgetLoad();
+        this.props.onHeightChanged();
     }
 
     componentWillUnmount() {
@@ -293,7 +295,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/RoomDirectoryButton.js

@@ -25,7 +25,7 @@ const RoomDirectoryButton = function(props) {
         <ActionButton action="view_room_directory"
             mouseOverAction={props.callout ? "callout_room_directory" : null}
             label={_t("Room directory")}
-            iconPath="img/icons-directory.svg"
+            iconPath={require("../../../../res/img/icons-directory.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/SettingsButton.js

@@ -24,7 +24,7 @@ const SettingsButton = function(props) {
     return (
         <ActionButton action="view_user_settings"
             label={_t("Settings")}
-            iconPath="img/icons-settings.svg"
+            iconPath={require("../../../../res/img/icons-settings.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

src/components/views/elements/SettingsFlag.js

@@ -18,6 +18,7 @@ import React from "react";
 import PropTypes from 'prop-types';
 import SettingsStore from "../../../settings/SettingsStore";
 import { _t } from '../../../languageHandler';
+import ToggleSwitch from "./ToggleSwitch";
 
 module.exports = React.createClass({
     displayName: 'SettingsFlag',
@@ -29,10 +30,6 @@ module.exports = React.createClass({
         onChange: PropTypes.func,
         isExplicit: PropTypes.bool,
         manualSave: PropTypes.bool,
-
-        // If group is supplied, then this will create a radio button instead.
-        group: PropTypes.string,
-        value: PropTypes.any, // the value for the radio button
     },
 
     getInitialState: function() {
@@ -46,13 +43,12 @@ module.exports = React.createClass({
         };
     },
 
-    onChange: function(e) {
-        if (this.props.group && !e.target.checked) return;
+    onChange: function(checked) {
+        if (this.props.group && !checked) return;
 
-        const newState = this.props.group ? this.props.value : e.target.checked;
-        if (!this.props.manualSave) this.save(newState);
-        else this.setState({ value: newState });
-        if (this.props.onChange) this.props.onChange(newState);
+        if (!this.props.manualSave) this.save(checked);
+        else this.setState({ value: checked });
+        if (this.props.onChange) this.props.onChange(checked);
     },
 
     save: function(val = undefined) {
@@ -78,34 +74,11 @@ module.exports = React.createClass({
         if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
         else label = _t(label);
 
-        // We generate a relatively complex ID to avoid conflicts
-        const id = this.props.name + "_" + this.props.group + "_" + this.props.value + "_" + this.props.level;
-        let checkbox = (
-            <input id={id}
-                   type="checkbox"
-                   defaultChecked={value}
-                   onChange={this.onChange}
-                   disabled={!canChange}
-            />
-        );
-        if (this.props.group) {
-            checkbox = (
-                <input id={id}
-                       type="radio"
-                       name={this.props.group}
-                       value={this.props.value}
-                       checked={value === this.props.value}
-                       onChange={this.onChange}
-                       disabled={!canChange}
-                />
-            );
-        }
-
         return (
-            <label>
-                { checkbox }
-                { label }
-            </label>
+            <div className="mx_SettingsFlag">
+                <span className="mx_SettingsFlag_label">{label}</span>
+                <ToggleSwitch checked={value} onChange={this.onChange} disabled={!canChange} />
+            </div>
         );
     },
 });

src/components/views/elements/Spinner.js

@@ -27,7 +27,7 @@ module.exports = React.createClass({
         const imgClass = this.props.imgClassName || "";
         return (
             <div className="mx_Spinner">
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
+                <img src={require("../../../../res/img/spinner.gif")} width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/StartChatButton.js

@@ -25,7 +25,7 @@ const StartChatButton = function(props) {
         <ActionButton action="view_create_chat"
             mouseOverAction={props.callout ? "callout_start_chat" : null}
             label={_t("Start chat")}
-            iconPath="img/icons-people.svg"
+            iconPath={require("../../../../res/img/icons-people.svg")}
             size={props.size}
             tooltip={props.tooltip}
         />

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

@@ -0,0 +1,72 @@
+/*
+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";
+
+export default class ToggleSwitch extends React.Component {
+    static propTypes = {
+        // Whether or not this toggle is in the 'on' position. Default false (off).
+        checked: PropTypes.bool,
+
+        // Whether or not the user can interact with the switch
+        disabled: PropTypes.bool,
+
+        // Called when the checked state changes. First argument will be the new state.
+        onChange: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            checked: props.checked || false, // default false
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.checked !== this.state.checked) {
+            this.setState({checked: nextProps.checked});
+        }
+    }
+
+    _onClick = (e) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        if (this.props.disabled) return;
+
+        const newState = !this.state.checked;
+        this.setState({checked: newState});
+        if (this.props.onChange) {
+            this.props.onChange(newState);
+        }
+    };
+
+    render() {
+        const classes = classNames({
+            "mx_ToggleSwitch": true,
+            "mx_ToggleSwitch_on": this.state.checked,
+            "mx_ToggleSwitch_enabled": !this.props.disabled,
+        });
+        return (
+            <div className={classes} onClick={this._onClick}>
+                <div className="mx_ToggleSwitch_ball" />
+            </div>
+        );
+    }
+}

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,21 @@ 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,
+        // the react element to put into the tooltip
         label: React.PropTypes.node,
     },
 
     // 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);
 
@@ -85,11 +85,11 @@ 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);
 
         const tooltip = (
             <div className={tooltipClasses} style={style}>
-                <div className="mx_RoomTooltip_chevron" />
+                <div className="mx_Tooltip_chevron" />
                 { this.props.label }
             </div>
         );

src/components/views/globals/CookieBar.js

@@ -51,7 +51,7 @@ export default class CookieBar extends React.Component {
         const toolbarClasses = "mx_MatrixToolbar";
         return (
             <div className={toolbarClasses}>
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />
                 <div className="mx_MatrixToolbar_content">
                     { this.props.policyUrl ? _t(
                         "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
@@ -95,7 +95,7 @@ export default class CookieBar extends React.Component {
                     { _t("Yes, I want to help!") }
                 </AccessibleButton>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
-                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
+                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );

src/components/views/globals/MatrixToolbar.js

@@ -35,11 +35,11 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                    { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
                 </div>
-                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} /></AccessibleButton>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} /></AccessibleButton>
             </div>
         );
     },

src/components/views/globals/NewVersionBar.js

@@ -96,7 +96,7 @@ export default React.createClass({
         }
         return (
             <div className="mx_MatrixToolbar">
-                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" />
+                <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" />
                 <div className="mx_MatrixToolbar_content">
                     {_t("A new version of Riot is available.")}
                 </div>

src/components/views/globals/PasswordNagBar.js

@@ -31,7 +31,7 @@ export default React.createClass({
         return (
             <div className={toolbarClasses} onClick={this.onUpdateClicked}>
                 <img className="mx_MatrixToolbar_warning"
-                    src="img/warning.svg"
+                    src={require("../../../../res/img/warning.svg")}
                     width="24"
                     height="23"
                     alt=""

src/components/views/globals/UpdateCheckBar.js

@@ -71,9 +71,9 @@ export default React.createClass({
 
         let image;
         if (doneStatuses.includes(this.props.status)) {
-            image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="" />;
+            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/warning.svg")} width="24" height="23" alt="" />;
         } else {
-            image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt="" />;
+            image = <img className="mx_MatrixToolbar_warning" src={require("../../../../res/img/spinner.gif")} width="24" height="23" alt="" />;
         }
 
         return (
@@ -83,7 +83,7 @@ export default React.createClass({
                     {message}
                 </div>
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
-                    <img src="img/cancel.svg" width="18" height="18" alt={_t('Close')} />
+                    <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" alt={_t('Close')} />
                 </AccessibleButton>
             </div>
         );

src/components/views/groups/GroupInviteTile.js

@@ -143,13 +143,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

@@ -166,17 +166,15 @@ module.exports = React.createClass({
             }
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.props.groupMember.avatarUrl,
-            36, 36, 'crop',
-        );
 
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        const avatar = (
-            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
-                url={avatarUrl}
-            />
-        );
+        const avatarUrl = this.props.groupMember.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = (<div className="mx_MemberInfo_avatar">
+                            <img src={httpUrl} />
+                        </div>);
+        }
 
         const groupMemberName = (
             this.props.groupMember.displayname || this.props.groupMember.userId
@@ -188,12 +186,9 @@ module.exports = React.createClass({
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
-
+                    { avatarElement }
                     <EmojiText element="h2">{ groupMemberName }</EmojiText>
 
                     <div className="mx_MemberInfo_profile">

src/components/views/groups/GroupMemberList.js

@@ -87,7 +87,7 @@ export default React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullMemberList} />
         );
@@ -214,7 +214,7 @@ export default React.createClass({
                 onClick={this.onInviteToGroupButtonClick}
             >
                 <div className="mx_RightPanel_icon" >
-                    <TintableSvg src="img/icon-invite-people.svg" width="18" height="14" />
+                    <TintableSvg src={require("../../../../res/img/icon-invite-people.svg")} width="18" height="14" />
                 </div>
                 <div className="mx_RightPanel_message">{ _t('Invite to this community') }</div>
             </AccessibleButton>);

src/components/views/groups/GroupPublicityToggle.js

@@ -18,7 +18,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import GroupStore from '../../../stores/GroupStore';
-import { _t } from '../../../languageHandler.js';
+import ToggleSwitch from "../elements/ToggleSwitch";
 
 export default React.createClass({
     displayName: 'GroupPublicityToggle',
@@ -52,8 +52,7 @@ export default React.createClass({
         if (this._groupStoreToken) this._groupStoreToken.unregister();
     },
 
-    _onPublicityToggle: function(e) {
-        e.stopPropagation();
+    _onPublicityToggle: function() {
         this.setState({
             busy: true,
             // Optimistic early update
@@ -68,21 +67,13 @@ export default React.createClass({
 
     render() {
         const GroupTile = sdk.getComponent('groups.GroupTile');
-        const input = <input type="checkbox"
-            onChange={this._onPublicityToggle}
-            checked={this.state.isGroupPublicised}
-        />;
-        const labelText = !this.state.ready ? _t("Loading...") :
-            (this.state.isGroupPublicised ?
-             _t("Flair will appear if enabled in room settings") :
-             _t("Flair will not appear")
-            );
         return <div className="mx_GroupPublicity_toggle">
-            <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
-            <label onClick={this._onPublicityToggle}>
-                { input }
-                { labelText }
-            </label>
+            <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} />
         </div>;
     },
 });

src/components/views/groups/GroupRoomInfo.js

@@ -149,7 +149,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
         const EmojiText = sdk.getComponent('elements.EmojiText');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
@@ -204,22 +203,23 @@ module.exports = React.createClass({
                 </div>;
         }
 
-        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
-            this.state.groupRoom.avatarUrl,
-            36, 36, 'crop',
-        );
+        const avatarUrl = this.state.groupRoom.avatarUrl;
+        let avatarElement;
+        if (avatarUrl) {
+            const httpUrl = this.context.matrixClient.mxcUrlToHttp(avatarUrl, 800, 800);
+            avatarElement = (<div className="mx_MemberInfo_avatar">
+                            <img src={httpUrl} />
+                        </div>);
+        }
 
         const groupRoomName = this.state.groupRoom.displayname;
-        const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
         return (
             <div className="mx_MemberInfo">
                 <GeminiScrollbarWrapper autoshow={true}>
                     <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
-                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                        <img src={require("../../../../res/img/cancel.svg")} width="18" height="18" className="mx_filterFlipColor" />
                     </AccessibleButton>
-                    <div className="mx_MemberInfo_avatar">
-                        { avatar }
-                    </div>
+                    { avatarElement }
 
                     <EmojiText element="h2">{ groupRoomName }</EmojiText>
 

src/components/views/groups/GroupRoomList.js

@@ -77,7 +77,7 @@ export default React.createClass({
         const text = _t("and %(count)s others...", { count: overflowCount });
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
-                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+                <BaseAvatar url={require("../../../../res/img/ellipsis.svg")} name="..." width={36} height={36} />
             } name={text} presenceState="online" suppressOnHover={true}
             onClick={this._showFullRoomList} />
         );
@@ -137,7 +137,7 @@ export default React.createClass({
                     onClick={this.onAddRoomToGroupButtonClick}
                 >
                     <div className="mx_RightPanel_icon" >
-                        <TintableSvg src="img/icons-room-add.svg" width="18" height="14" />
+                        <TintableSvg src={require("../../../../res/img/icons-room-add.svg")} width="18" height="14" />
                     </div>
                     <div className="mx_RightPanel_message">{ _t('Add rooms to this community') }</div>
                 </AccessibleButton>

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/groups/GroupUserSettings.js

@@ -43,9 +43,9 @@ export default React.createClass({
         });
     },
 
-    _renderGroupPublicity() {
+    render() {
         let text = "";
-        let scrollbox = <div />;
+        let groupPublicityToggles = null;
         const groups = this.state.groups;
 
         if (this.state.error) {
@@ -54,36 +54,21 @@ export default React.createClass({
             text = _t('Loading...');
         } else if (groups.length > 0) {
             const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle');
-            const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
-            const groupPublicityToggles = groups.map((groupId, index) => {
+            groupPublicityToggles = groups.map((groupId, index) => {
                 return <GroupPublicityToggle key={index} groupId={groupId} />;
             });
             text = _t('Display your community flair in rooms configured to show it.');
-            scrollbox = <div className="mx_GroupUserSettings_groupPublicity_scrollbox">
-                <GeminiScrollbarWrapper>
-                    { groupPublicityToggles }
-                </GeminiScrollbarWrapper>
-            </div>;
         } else {
             text = _t("You're not currently a member of any communities.");
         }
 
-        return <div>
-            <h3>{ _t('Flair') }</h3>
-            <div className="mx_UserSettings_section">
-                <p>
-                    { text }
-                </p>
-                { scrollbox }
+        return (
+            <div>
+                <p className="mx_SettingsTab_subsectionText">{ text }</p>
+                <div className='mx_SettingsTab_subsectionText'>
+                    { groupPublicityToggles }
+                </div>
             </div>
-        </div>;
-    },
-
-    render() {
-        const groupPublicity = this._renderGroupPublicity();
-
-        return <div>
-            { groupPublicity }
-        </div>;
+        );
     },
 });

src/components/views/login/LoginPage.js

@@ -1,59 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import SettingsStore from "../../../settings/SettingsStore";
-
-const React = require('react');
-
-module.exports = React.createClass({
-    displayName: 'LoginPage',
-
-    render: function() {
-        // FIXME: this should be turned into a proper skin with a StatusLoginPage component
-        if (SettingsStore.getValue("theme") === 'status') {
-            return (
-                <div className="mx_StatusLogin">
-                    <div className="mx_StatusLogin_brand">
-                        <img src="themes/status/img/logo.svg" alt="Status" width="221" height="53" />
-                    </div>
-                    <div className="mx_StatusLogin_content">
-                        <div className="mx_StatusLogin_header">
-                            <h1>Status Community Chat</h1>
-                            <div className="mx_StatusLogin_subtitle">
-                                A safer, decentralised communication
-                                platform <a href="https://riot.im">powered by Riot</a>
-                            </div>
-                        </div>
-                        { this.props.children }
-                        <div className="mx_StatusLogin_footer">
-                            <p>This channel is for our development community.</p>
-                            <p>Interested in SNT and discussions on the cryptocurrency market?</p>
-                            <p><a href="https://t.me/StatusNetworkChat" target="_blank" className="mx_StatusLogin_footer_cta">Join Telegram Chat</a></p>
-                        </div>
-                    </div>
-                </div>
-            );
-        } else {
-            return (
-                <div className="mx_Login">
-                    { this.props.children }
-                </div>
-            );
-        }
-    },
-});