Merge branch 'develop' into matthew/retina

src/components/structures/AutoHideScrollbar.js

@@ -20,6 +20,7 @@ import React from "react";
 // Copyright (c) Noel Delgado <pixelia.me@gmail.com> (pixelia.me)
 function getScrollbarWidth(alternativeOverflow) {
     const div = document.createElement('div');
+    div.className = 'mx_AutoHideScrollbar'; //to get width of css scrollbar
     div.style.position = 'absolute';
     div.style.top = '-9999px';
     div.style.width = '100px';
@@ -101,10 +102,6 @@ export default class AutoHideScrollbar extends React.Component {
         installBodyClassesIfNeeded();
         this._needsOverflowListener =
             document.body.classList.contains("mx_scrollbar_nooverlay");
-        if (this._needsOverflowListener) {
-            this.containerRef.addEventListener("overflow", this.onOverflow);
-            this.containerRef.addEventListener("underflow", this.onUnderflow);
-        }
         this.checkOverflow();
     }
 
@@ -117,17 +114,16 @@ export default class AutoHideScrollbar extends React.Component {
         }
     }
 
-    componentWillUnmount() {
-        if (this._needsOverflowListener && this.containerRef) {
-            this.containerRef.removeEventListener("overflow", this.onOverflow);
-            this.containerRef.removeEventListener("underflow", this.onUnderflow);
-        }
+    getScrollTop() {
+        return this.containerRef.scrollTop;
     }
 
     render() {
         return (<div
                     ref={this._collectContainerRef}
+                    style={this.props.style}
                     className={["mx_AutoHideScrollbar", this.props.className].join(" ")}
+                    onScroll={this.props.onScroll}
                 >
             <div className="mx_AutoHideScrollbar_offset">
                 { this.props.children }

src/components/structures/BottomLeftMenu.js

@@ -19,8 +19,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import sdk from '../../index';
 import dis from '../../dispatcher';
-import Velocity from 'velocity-vector';
-import 'velocity-vector/velocity.ui';
+import Velocity from 'velocity-animate';
+import 'velocity-animate/velocity.ui';
 import SettingsStore from '../../settings/SettingsStore';
 
 const CALLOUT_ANIM_DURATION = 1000;
@@ -145,8 +145,8 @@ module.exports = React.createClass({
     // Get the label/tooltip to show
     getLabel: function(label, show) {
         if (show) {
-            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
-            return <RoomTooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
+            const Tooltip = sdk.getComponent("elements.Tooltip");
+            return <Tooltip className="mx_BottomLeftMenu_tooltip" label={label} />;
         }
     },
 
@@ -170,7 +170,7 @@ module.exports = React.createClass({
         const SettingsButton = sdk.getComponent('elements.SettingsButton');
         const GroupsButton = sdk.getComponent('elements.GroupsButton');
 
-        const groupsButton = SettingsStore.getValue("TagPanel.disableTagPanel") ?
+        const groupsButton = !SettingsStore.getValue("TagPanel.enableTagPanel") ?
             <GroupsButton tooltip={true} /> : null;
 
         return (

src/components/structures/CompatibilityPage.js

@@ -41,26 +41,30 @@ module.exports = React.createClass({
             <div className="mx_CompatibilityPage_box">
                 <p>{ _t("Sorry, your browser is <b>not</b> able to run Riot.", {}, { 'b': (sub) => <b>{sub}</b> }) } </p>
                 <p>
-                { _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
+                { _t(
+                    "Riot uses many advanced browser features, some of which are not available " +
+                    "or experimental in your current browser.",
+                ) }
                 </p>
                 <p>
-                { _t('Please install <chromeLink>Chrome</chromeLink> or <firefoxLink>Firefox</firefoxLink> for the best experience.',
+                { _t(
+                    'Please install <chromeLink>Chrome</chromeLink>, <firefoxLink>Firefox</firefoxLink>, ' +
+                    'or <safariLink>Safari</safariLink> for the best experience.',
                     {},
                     {
                         'chromeLink': (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
-                        'firefoxLink': (sub) => <a href="https://getfirefox.com">{sub}</a>,
-                    },
-                )}
-                { _t('<safariLink>Safari</safariLink> and <operaLink>Opera</operaLink> work too.',
-                    {},
-                    {
-                        'safariLink': (sub) => <a href="http://apple.com/safari">{sub}</a>,
-                        'operaLink': (sub) => <a href="http://opera.com">{sub}</a>,
+                        'firefoxLink': (sub) => <a href="https://firefox.com">{sub}</a>,
+                        'safariLink': (sub) => <a href="https://apple.com/safari">{sub}</a>,
                     },
                 )}
                 </p>
                 <p>
-                { _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
+                { _t(
+                    "With your current browser, the look and feel of the application may be " +
+                    "completely incorrect, and some or all features may not function. " +
+                    "If you want to try it anyway you can continue, but you are on your own in terms " +
+                    "of any issues you may encounter!",
+                ) }
                 </p>
                 <button onClick={this.onAccept}>
                     { _t("I understand the risks and wish to continue") }

src/components/structures/ContextualMenu.js

@@ -56,6 +56,7 @@ export default class ContextualMenu extends React.Component {
         menuPaddingRight: PropTypes.number,
         menuPaddingBottom: PropTypes.number,
         menuPaddingLeft: PropTypes.number,
+        zIndex: PropTypes.number,
 
         // If true, insert an invisible screen-sized element behind the
         // menu that when clicked will close it.
@@ -215,16 +216,22 @@ export default class ContextualMenu extends React.Component {
             menuStyle["paddingRight"] = props.menuPaddingRight;
         }
 
+        const wrapperStyle = {};
+        if (!isNaN(Number(props.zIndex))) {
+            menuStyle["zIndex"] = props.zIndex + 1;
+            wrapperStyle["zIndex"] = props.zIndex;
+        }
+
         const ElementClass = props.elementClass;
 
         // FIXME: If a menu uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the menu from a button click!
-        return <div className={className} style={position}>
+        return <div className={className} style={{...position, ...wrapperStyle}}>
             <div className={menuClasses} style={menuStyle} ref={this.collectContextMenuRect}>
                 { chevron }
                 <ElementClass {...props} onFinished={props.closeMenu} onResize={props.windowResize} />
             </div>
-            { props.hasBackground && <div className="mx_ContextualMenu_background"
+            { props.hasBackground && <div className="mx_ContextualMenu_background" style={wrapperStyle}
                                           onClick={props.closeMenu} onContextMenu={this.onContextMenu} /> }
             <style>{ chevronCSS }</style>
         </div>;

src/components/structures/CustomRoomTagPanel.js

@@ -0,0 +1,125 @@
+/*
+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 CustomRoomTagStore from '../../stores/CustomRoomTagStore';
+import AutoHideScrollbar from './AutoHideScrollbar';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import classNames from 'classnames';
+import * as FormattingUtils from '../../utils/FormattingUtils';
+
+class CustomRoomTagPanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            tags: CustomRoomTagStore.getSortedTags(),
+        };
+    }
+
+    componentWillMount() {
+        this._tagStoreToken = CustomRoomTagStore.addListener(() => {
+            this.setState({tags: CustomRoomTagStore.getSortedTags()});
+        });
+    }
+
+    componentWillUnmount() {
+        if (this._tagStoreToken) {
+            this._tagStoreToken.remove();
+        }
+    }
+
+    render() {
+        const tags = this.state.tags.map((tag) => {
+            return (<CustomRoomTagTile tag={tag} key={tag.name} />);
+        });
+
+        const classes = classNames('mx_CustomRoomTagPanel', {
+            mx_CustomRoomTagPanel_empty: this.state.tags.length === 0,
+        });
+
+        return (<div className={classes}>
+            <div className="mx_CustomRoomTagPanel_divider" />
+            <AutoHideScrollbar className="mx_CustomRoomTagPanel_scroller">
+                {tags}
+            </AutoHideScrollbar>
+        </div>);
+    }
+}
+
+class CustomRoomTagTile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {hover: false};
+        this.onClick = this.onClick.bind(this);
+        this.onMouseOut = this.onMouseOut.bind(this);
+        this.onMouseOver = this.onMouseOver.bind(this);
+    }
+
+    onMouseOver() {
+        this.setState({hover: true});
+    }
+
+    onMouseOut() {
+        this.setState({hover: false});
+    }
+
+    onClick() {
+        dis.dispatch({action: 'select_custom_room_tag', tag: this.props.tag.name});
+    }
+
+    render() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const Tooltip = sdk.getComponent('elements.Tooltip');
+
+        const tag = this.props.tag;
+        const avatarHeight = 40;
+        const className = classNames({
+            CustomRoomTagPanel_tileSelected: tag.selected,
+        });
+        const name = tag.name;
+        const badge = tag.badge;
+        let badgeElement;
+        if (badge) {
+            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 ?
+            <Tooltip className="mx_TagTile_tooltip" label={name} /> :
+            <div />);
+        return (
+            <AccessibleButton className={className} onClick={this.onClick}>
+                <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                    <BaseAvatar
+                        name={tag.avatarLetter}
+                        idName={name}
+                        width={avatarHeight}
+                        height={avatarHeight}
+                    />
+                    { badgeElement }
+                    { tip }
+                </div>
+            </AccessibleButton>
+        );
+    }
+}
+
+export default CustomRoomTagPanel;

src/components/structures/EmbeddedPage.js

@@ -0,0 +1,116 @@
+/*
+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.
+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';
+import PropTypes from 'prop-types';
+import request from 'browser-request';
+import { _t } from '../../languageHandler';
+import sanitizeHtml from 'sanitize-html';
+import sdk from '../../index';
+import { MatrixClient } from 'matrix-js-sdk';
+import classnames from 'classnames';
+
+export default class EmbeddedPage extends React.PureComponent {
+    static propTypes = {
+        // URL to request embedded page content from
+        url: PropTypes.string,
+        // Class name prefix to apply for a given instance
+        className: PropTypes.string,
+        // Whether to wrap the page in a scrollbar
+        scrollbar: PropTypes.bool,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            page: '',
+        };
+    }
+
+    translate(s) {
+        // default implementation - skins may wish to extend this
+        return sanitizeHtml(_t(s));
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+
+        if (!this.props.url) {
+            return;
+        }
+
+        // we use request() to inline the page into the react component
+        // so that it can inherit CSS and theming easily rather than mess around
+        // with iframes and trying to synchronise document.stylesheets.
+
+        request(
+            { method: "GET", url: this.props.url },
+            (err, response, body) => {
+                if (this._unmounted) {
+                    return;
+                }
+
+                if (err || response.status < 200 || response.status >= 300) {
+                    console.warn(`Error loading page: ${err}`);
+                    this.setState({ page: _t("Couldn't load page") });
+                    return;
+                }
+
+                body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
+                this.setState({ page: body });
+            },
+        );
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    render() {
+        const client = this.context.matrixClient;
+        const isGuest = client ? client.isGuest() : true;
+        const className = this.props.className;
+        const classes = classnames({
+            [className]: true,
+            [`${className}_guest`]: isGuest,
+        });
+
+        const content = <div className={`${className}_body`}
+            dangerouslySetInnerHTML={{ __html: this.state.page }}
+        >
+        </div>;
+
+        if (this.props.scrollbar) {
+            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+            return <GeminiScrollbarWrapper autoshow={true} className={classes}>
+                {content}
+            </GeminiScrollbarWrapper>;
+        } else {
+            return <div className={classes}>
+                {content}
+            </div>;
+        }
+    }
+}

src/components/structures/FilePanel.js

@@ -123,6 +123,7 @@ const FilePanel = React.createClass({
                     timelineSet={this.state.timelineSet}
                     showUrlPreview = {false}
                     tileShape="file_grid"
+                    resizeNotifier={this.props.resizeNotifier}
                     empty={_t('There are no visible files in this room')}
                 />
             );

src/components/structures/GroupGridView.js

@@ -1,127 +0,0 @@
-/*
-Copyright 2017 Vector Creations Ltd.
-Copyright 2017, 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 OpenRoomsStore from '../../stores/OpenRoomsStore';
-import dis from '../../dispatcher';
-import {_t} from '../../languageHandler';
-import RoomView from './RoomView';
-import classNames from 'classnames';
-import MainSplit from './MainSplit';
-import RightPanel from './RightPanel';
-import RoomHeaderButtons from '../views/right_panel/RoomHeaderButtons';
-
-export default class RoomGridView extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            roomStores: OpenRoomsStore.getRoomStores(),
-            activeRoomStore: OpenRoomsStore.getActiveRoomStore(),
-        };
-        this.onRoomsChanged = this.onRoomsChanged.bind(this);
-    }
-
-    componentDidUpdate(_, prevState) {
-        const store = this.state.activeRoomStore;
-        if (store) {
-            store.getDispatcher().dispatch({action: 'focus_composer'});
-        }
-    }
-
-    componentDidMount() {
-        this.componentDidUpdate();
-    }
-
-    componentWillMount() {
-        this._unmounted = false;
-        this._openRoomsStoreRegistration = OpenRoomsStore.addListener(this.onRoomsChanged);
-    }
-
-    componentWillUnmount() {
-        this._unmounted = true;
-        if (this._openRoomsStoreRegistration) {
-            this._openRoomsStoreRegistration.remove();
-        }
-    }
-
-    onRoomsChanged() {
-        if (this._unmounted) return;
-        this.setState({
-            roomStores: OpenRoomsStore.getRoomStores(),
-            activeRoomStore: OpenRoomsStore.getActiveRoomStore(),
-        });
-    }
-
-    _setActive(i) {
-        const store = OpenRoomsStore.getRoomStoreAt(i);
-        if (store !== this.state.activeRoomStore) {
-            dis.dispatch({
-                action: 'group_grid_set_active',
-                room_id: store.getRoomId(),
-            });
-        }
-    }
-
-    render() {
-        let roomStores = this.state.roomStores.slice(0, 6);
-        const emptyCount = 6 - roomStores.length;
-        if (emptyCount) {
-            const emptyTiles = Array.from({length: emptyCount}, () => null);
-            roomStores = roomStores.concat(emptyTiles);
-        }
-        const activeRoomId = this.state.activeRoomStore && this.state.activeRoomStore.getRoomId();
-        let rightPanel;
-        if (activeRoomId) {
-            rightPanel = (
-                <div className="mx_GroupGridView_rightPanel">
-                    <div className="mx_GroupGridView_tabs"><RoomHeaderButtons /></div>
-                    <RightPanel roomId={activeRoomId} />
-                </div>
-            );
-        }
-
-        return (<main className="mx_GroupGridView">
-            <MainSplit panel={rightPanel} collapsedRhs={this.props.collapsedRhs} >
-                <div className="mx_GroupGridView_rooms">
-                    { roomStores.map((roomStore, i) => {
-                        if (roomStore) {
-                            const isActive = roomStore === this.state.activeRoomStore;
-                            const tileClasses = classNames({
-                                "mx_GroupGridView_tile": true,
-                                "mx_GroupGridView_activeTile": isActive,
-                            });
-                            return (<section
-                                    onClick={() => {this._setActive(i);}}
-                                    key={roomStore.getRoomId()}
-                                    className={tileClasses}
-                                >
-                                    <RoomView
-                                        collapsedRhs={this.props.collapsedRhs}
-                                        isGrid={true}
-                                        roomViewStore={roomStore}
-                                        isActive={isActive}
-                                    />
-                                </section>);
-                        } else {
-                            return (<section className={"mx_GroupGridView_emptyTile"} key={`empty-${i}`}>{_t("No room in this tile yet.")}</section>);
-                        }
-                    }) }
-                </div>
-            </MainSplit>
-        </main>);
-    }
-}

src/components/structures/GroupView.js

@@ -21,6 +21,7 @@ import Promise from 'bluebird';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import { getHostingLink } from '../../utils/HostingLink';
 import { sanitizedHtmlNode } from '../../HtmlUtils';
 import { _t, _td } from '../../languageHandler';
 import AccessibleButton from '../views/elements/AccessibleButton';
@@ -34,6 +35,7 @@ import GroupStore from '../../stores/GroupStore';
 import FlairStore from '../../stores/FlairStore';
 import { showGroupAddRoomDialog } from '../../GroupAddressPicker';
 import {makeGroupPermalink, makeUserPermalink} from "../../matrix-to";
+import {Group} from "matrix-js-sdk";
 
 const LONG_DESC_PLACEHOLDER = _td(
 `<h1>HTML for your community's page</h1>
@@ -125,7 +127,7 @@ const CategoryRoomList = React.createClass({
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton"
                 onClick={this.onAddRoomsToSummaryClicked}
             >
-                <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                 <div className="mx_GroupView_featuredThings_addButton_label">
                     { _t('Add a Room') }
                 </div>
@@ -226,7 +228,7 @@ const FeaturedRoom = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -300,7 +302,7 @@ const RoleUserList = React.createClass({
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const addButton = this.props.editing ?
             (<AccessibleButton className="mx_GroupView_featuredThings_addButton" onClick={this.onAddUsersClicked}>
-                 <TintableSvg src="img/icons-create-room.svg" width="64" height="64" />
+                 <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="64" height="64" />
                  <div className="mx_GroupView_featuredThings_addButton_label">
                      { _t('Add a User') }
                  </div>
@@ -379,7 +381,7 @@ const FeaturedUser = React.createClass({
         const deleteButton = this.props.editing ?
             <img
                 className="mx_GroupView_featuredThing_deleteButton"
-                src="img/cancel-small.svg"
+                src={require("../../../res/img/cancel-small.svg")}
                 width="14"
                 height="14"
                 alt="Delete"
@@ -569,7 +571,7 @@ export default React.createClass({
     _onShareClick: function() {
         const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
         Modal.createTrackedDialog('share community dialog', '', ShareDialog, {
-            target: this._matrixClient.getGroup(this.props.groupId),
+            target: this._matrixClient.getGroup(this.props.groupId) || new Group(this.props.groupId),
         });
     },
 
@@ -815,6 +817,23 @@ export default React.createClass({
         });
 
         const header = this.state.editing ? <h2> { _t('Community Settings') } </h2> : <div />;
+
+        const hostingSignupLink = getHostingLink('community-settings');
+        let hostingSignup = null;
+        if (hostingSignupLink && this.state.isUserPrivileged) {
+            hostingSignup = <div className="mx_GroupView_hostingSignup">
+                {_t(
+                    "Want more than a community? <a>Get your own server</a>", {},
+                    {
+                        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>;
+        }
+
         const changeDelayWarning = this.state.editing && this.state.isUserPrivileged ?
             <div className="mx_GroupView_changeDelayWarning">
                 { _t(
@@ -829,6 +848,7 @@ export default React.createClass({
             </div> : <div />;
         return <div className={groupSettingsSectionClasses}>
             { header }
+            { hostingSignup }
             { changeDelayWarning }
             { this._getJoinableNode() }
             { this._getLongDescriptionNode() }
@@ -855,7 +875,7 @@ export default React.createClass({
                 onClick={this._onAddRoomsClick}
             >
                 <div className="mx_GroupView_rooms_header_addRow_button">
-                    <TintableSvg src="img/icons-room-add.svg" width="24" height="24" />
+                    <TintableSvg src={require("../../../res/img/icons-room-add.svg")} width="24" height="24" />
                 </div>
                 <div className="mx_GroupView_rooms_header_addRow_label">
                     { _t('Add rooms to this community') }
@@ -1157,7 +1177,6 @@ export default React.createClass({
     render: function() {
         const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
         const Spinner = sdk.getComponent("elements.Spinner");
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
 
         if (this.state.summaryLoading && this.state.error === null || this.state.saving) {
@@ -1178,7 +1197,7 @@ export default React.createClass({
                     avatarImage = <GroupAvatar groupId={this.props.groupId}
                         groupName={this.state.profileForm.name}
                         groupAvatarUrl={this.state.profileForm.avatar_url}
-                        width={48} height={48} resizeMethod='crop'
+                        width={28} height={28} resizeMethod='crop'
                     />;
                 }
 
@@ -1189,7 +1208,7 @@ export default React.createClass({
                         </label>
                         <div className="mx_GroupView_avatarPicker_edit">
                             <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
-                                <img src="img/camera.svg"
+                                <img src={require("../../../res/img/camera.svg")}
                                     alt={_t("Upload avatar")} title={_t("Upload avatar")}
                                     width="17" height="15" />
                             </label>
@@ -1228,7 +1247,7 @@ export default React.createClass({
                     groupAvatarUrl={groupAvatarUrl}
                     groupName={groupName}
                     onClick={onGroupHeaderItemClick}
-                    width={48} height={48}
+                    width={28} height={28}
                 />;
                 if (summary.profile && summary.profile.name) {
                     nameNode = <div onClick={onGroupHeaderItemClick}>
@@ -1248,30 +1267,38 @@ export default React.createClass({
             if (this.state.editing) {
                 rightButtons.push(
                     <AccessibleButton className="mx_GroupView_textButton mx_RoomHeader_textButton"
-                        onClick={this._onSaveClick} key="_saveButton"
+                        key="_saveButton"
+                        onClick={this._onSaveClick}
                     >
                         { _t('Save') }
                     </AccessibleButton>,
                 );
                 rightButtons.push(
-                    <AccessibleButton className="mx_RoomHeader_cancelButton" onClick={this._onCancelClick} key="_cancelButton">
-                        <img src="img/cancel.svg" className="mx_filterFlipColor"
+                    <AccessibleButton className="mx_RoomHeader_cancelButton"
+                        key="_cancelButton"
+                        onClick={this._onCancelClick}
+                    >
+                        <img src={require("../../../res/img/cancel.svg")} className="mx_filterFlipColor"
                             width="18" height="18" alt={_t("Cancel")} />
                     </AccessibleButton>,
                 );
             } else {
                 if (summary.user && summary.user.membership === 'join') {
                     rightButtons.push(
-                        <AccessibleButton className="mx_GroupHeader_button"
-                            onClick={this._onEditClick} title={_t("Community Settings")} key="_editButton"
+                        <AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_editButton"
+                            key="_editButton"
+                            onClick={this._onEditClick}
+                            title={_t("Community Settings")}
                         >
-                            <TintableSvg src="img/icons-settings-room.svg" width="16" height="16" />
                         </AccessibleButton>,
                     );
                 }
                 rightButtons.push(
-                    <AccessibleButton className="mx_GroupHeader_button" onClick={this._onShareClick} title={_t('Share Community')} key="_shareButton">
-                        <TintableSvg src="img/icons-share.svg" width="16" height="16" />
+                    <AccessibleButton className="mx_GroupHeader_button mx_GroupHeader_shareButton"
+                        key="_shareButton"
+                        onClick={this._onShareClick}
+                        title={_t('Share Community')}
+                    >
                     </AccessibleButton>,
                 );
             }
@@ -1324,7 +1351,7 @@ export default React.createClass({
             } else {
                 let extraText;
                 if (this.state.error.errcode === 'M_UNRECOGNIZED') {
-                    extraText = <div>{ _t('This Home server does not support communities') }</div>;
+                    extraText = <div>{ _t('This homeserver does not support communities') }</div>;
                 }
                 return (
                     <div className="mx_GroupView_error">

src/components/structures/HomePage.js

@@ -1,155 +0,0 @@
-/*
-Copyright 2016 OpenMarket Ltd
-Copyright 2017 Vector Creations Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import request from 'browser-request';
-import { _t } from '../../languageHandler';
-import sanitizeHtml from 'sanitize-html';
-import sdk from '../../index';
-import { MatrixClient } from 'matrix-js-sdk';
-import dis from '../../dispatcher';
-
-class HomePage extends React.Component {
-    static displayName = 'HomePage';
-
-    static propTypes = {
-        // URL base of the team server. Optional.
-        teamServerUrl: PropTypes.string,
-        // Team token. Optional. If set, used to get the static homepage of the team
-        //      associated. If unset, homePageUrl will be used.
-        teamToken: PropTypes.string,
-        // URL to use as the iFrame src. Defaults to /home.html.
-        homePageUrl: PropTypes.string,
-    };
-
-    static contextTypes = {
-        matrixClient: PropTypes.instanceOf(MatrixClient),
-    };
-
-    state = {
-            iframeSrc: '',
-            page: '',
-    };
-
-    translate(s) {
-        // default implementation - skins may wish to extend this
-        return sanitizeHtml(_t(s));
-    }
-
-    componentWillMount() {
-        this._unmounted = false;
-
-        if (this.props.teamToken && this.props.teamServerUrl) {
-            this.setState({
-                iframeSrc: `${this.props.teamServerUrl}/static/${this.props.teamToken}/home.html`,
-            });
-        } else {
-            // we use request() to inline the homepage into the react component
-            // so that it can inherit CSS and theming easily rather than mess around
-            // with iframes and trying to synchronise document.stylesheets.
-
-            const src = this.props.homePageUrl || 'home.html';
-
-            request(
-                { method: "GET", url: src },
-                (err, response, body) => {
-                    if (this._unmounted) {
-                        return;
-                    }
-
-                    if (err || response.status < 200 || response.status >= 300) {
-                        console.warn(`Error loading home page: ${err}`);
-                        this.setState({ page: _t("Couldn't load home page") });
-                        return;
-                    }
-
-                    body = body.replace(/_t\(['"]([\s\S]*?)['"]\)/mg, (match, g1)=>this.translate(g1));
-                    this.setState({ page: body });
-                },
-            );
-        }
-    }
-
-    componentWillUnmount() {
-        this._unmounted = true;
-    }
-
-    onLoginClick(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        dis.dispatch({ action: 'start_login' });
-    }
-
-    onRegisterClick(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        dis.dispatch({ action: 'start_registration' });
-    }
-
-    render() {
-        let guestWarning = "";
-        if (this.context.matrixClient.isGuest()) {
-            guestWarning = (
-                <div className="mx_HomePage_guest_warning">
-                    <img src="img/warning.svg" width="24" height="23" />
-                    <div>
-                        <div>
-                            { _t("You are currently using Riot anonymously as a guest.") }
-                        </div>
-                        <div>
-                            { _t(
-                                'If you would like to create a Matrix account you can <a>register</a> now.',
-                                {},
-                                { 'a': (sub) => <a href="#" onClick={this.onRegisterClick}>{ sub }</a> },
-                            ) }
-                        </div>
-                        <div>
-                            { _t(
-                                'If you already have a Matrix account you can <a>log in</a> instead.',
-                                {},
-                                { 'a': (sub) => <a href="#" onClick={this.onLoginClick}>{ sub }</a> },
-                            ) }
-                        </div>
-                    </div>
-                </div>
-            );
-        }
-
-        if (this.state.iframeSrc) {
-            return (
-                <div className="mx_HomePage">
-                    { guestWarning }
-                    <iframe src={ this.state.iframeSrc } />
-                </div>
-            );
-        } else {
-            const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-            return (
-                <GeminiScrollbarWrapper autoshow={true} className="mx_HomePage">
-                    { guestWarning }
-                    <div className="mx_HomePage_body" dangerouslySetInnerHTML={{ __html: this.state.page }}>
-                    </div>
-                </GeminiScrollbarWrapper>
-            );
-        }
-    }
-}
-
-module.exports = HomePage;

src/components/structures/IndicatorScrollbar.js

@@ -15,9 +15,17 @@ limitations under the License.
 */
 
 import React from "react";
+import PropTypes from "prop-types";
 import AutoHideScrollbar from "./AutoHideScrollbar";
 
 export default class IndicatorScrollbar extends React.Component {
+    static PropTypes = {
+        // If true, the scrollbar will append mx_IndicatorScrollbar_leftOverflowIndicator
+        // and mx_IndicatorScrollbar_rightOverflowIndicator elements to the list for positioning
+        // by the parent element.
+        trackHorizontalOverflow: PropTypes.bool,
+    };
+
     constructor(props) {
         super(props);
         this._collectScroller = this._collectScroller.bind(this);
@@ -25,6 +33,11 @@ export default class IndicatorScrollbar extends React.Component {
         this.checkOverflow = this.checkOverflow.bind(this);
         this._scrollElement = null;
         this._autoHideScrollbar = null;
+
+        this.state = {
+            leftIndicatorOffset: 0,
+            rightIndicatorOffset: 0,
+        };
     }
 
     _collectScroller(scroller) {
@@ -43,6 +56,10 @@ export default class IndicatorScrollbar extends React.Component {
         const hasTopOverflow = this._scrollElement.scrollTop > 0;
         const hasBottomOverflow = this._scrollElement.scrollHeight >
             (this._scrollElement.scrollTop + this._scrollElement.clientHeight);
+        const hasLeftOverflow = this._scrollElement.scrollLeft > 0;
+        const hasRightOverflow = this._scrollElement.scrollWidth >
+            (this._scrollElement.scrollLeft + this._scrollElement.clientWidth);
+
         if (hasTopOverflow) {
             this._scrollElement.classList.add("mx_IndicatorScrollbar_topOverflow");
         } else {
@@ -53,10 +70,34 @@ export default class IndicatorScrollbar extends React.Component {
         } else {
             this._scrollElement.classList.remove("mx_IndicatorScrollbar_bottomOverflow");
         }
+        if (hasLeftOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_leftOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_leftOverflow");
+        }
+        if (hasRightOverflow) {
+            this._scrollElement.classList.add("mx_IndicatorScrollbar_rightOverflow");
+        } else {
+            this._scrollElement.classList.remove("mx_IndicatorScrollbar_rightOverflow");
+        }
 
         if (this._autoHideScrollbar) {
             this._autoHideScrollbar.checkOverflow();
         }
+
+        if (this.props.trackHorizontalOverflow) {
+            this.setState({
+                // Offset from absolute position of the container
+                leftIndicatorOffset: hasLeftOverflow ? `${this._scrollElement.scrollLeft}px` : '0',
+
+                // Negative because we're coming from the right
+                rightIndicatorOffset: hasRightOverflow ? `-${this._scrollElement.scrollLeft}px` : '0',
+            });
+        }
+    }
+
+    getScrollTop() {
+        return this._autoHideScrollbar.getScrollTop();
     }
 
     componentWillUnmount() {
@@ -66,8 +107,21 @@ export default class IndicatorScrollbar extends React.Component {
     }
 
     render() {
-        return (<AutoHideScrollbar ref={this._collectScrollerComponent} wrappedRef={this._collectScroller} {... this.props}>
+        const leftIndicatorStyle = {left: this.state.leftIndicatorOffset};
+        const rightIndicatorStyle = {right: this.state.rightIndicatorOffset};
+        const leftOverflowIndicator = this.props.trackHorizontalOverflow
+            ? <div className="mx_IndicatorScrollbar_leftOverflowIndicator" style={leftIndicatorStyle} /> : null;
+        const rightOverflowIndicator = this.props.trackHorizontalOverflow
+            ? <div className="mx_IndicatorScrollbar_rightOverflowIndicator" style={rightIndicatorStyle} /> : null;
+
+        return (<AutoHideScrollbar
+            ref={this._collectScrollerComponent}
+            wrappedRef={this._collectScroller}
+            {... this.props}
+        >
+            { leftOverflowIndicator }
             { this.props.children }
+            { rightOverflowIndicator }
         </AutoHideScrollbar>);
     }
 }

src/components/structures/InteractiveAuth.js

@@ -20,7 +20,7 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
+import {getEntryComponentForLoginType} from '../views/auth/InteractiveAuthEntryComponents';
 
 export default React.createClass({
     displayName: 'InteractiveAuth',

src/components/structures/LeftPanel.js

@@ -24,8 +24,9 @@ import { KeyCode } from '../../Keyboard';
 import sdk from '../../index';
 import dis from '../../dispatcher';
 import VectorConferenceHandler from '../../VectorConferenceHandler';
-
+import TagPanelButtons from './TagPanelButtons';
 import SettingsStore from '../../settings/SettingsStore';
+import {_t} from "../../languageHandler";
 
 
 const LeftPanel = React.createClass({
@@ -182,13 +183,25 @@ const LeftPanel = React.createClass({
 
     render: function() {
         const RoomList = sdk.getComponent('rooms.RoomList');
+        const RoomBreadcrumbs = sdk.getComponent('rooms.RoomBreadcrumbs');
         const TagPanel = sdk.getComponent('structures.TagPanel');
+        const CustomRoomTagPanel = sdk.getComponent('structures.CustomRoomTagPanel');
         const TopLeftMenuButton = sdk.getComponent('structures.TopLeftMenuButton');
         const SearchBox = sdk.getComponent('structures.SearchBox');
         const CallPreview = sdk.getComponent('voip.CallPreview');
 
-        const tagPanelEnabled = !SettingsStore.getValue("TagPanel.disableTagPanel");
-        const tagPanel = tagPanelEnabled ? <TagPanel /> : <div />;
+        const tagPanelEnabled = SettingsStore.getValue("TagPanel.enableTagPanel");
+        let tagPanelContainer;
+
+        const isCustomTagsEnabled = SettingsStore.isFeatureEnabled("feature_custom_tags");
+
+        if (tagPanelEnabled) {
+            tagPanelContainer = (<div className="mx_LeftPanel_tagPanelContainer">
+                <TagPanel />
+                { isCustomTagsEnabled ? <CustomRoomTagPanel /> : undefined }
+                <TagPanelButtons />
+            </div>);
+        }
 
         const containerClasses = classNames(
             "mx_LeftPanel_container", "mx_fadable",
@@ -199,19 +212,29 @@ const LeftPanel = React.createClass({
             },
         );
 
-        const searchBox = !this.props.collapsed ?
-            <SearchBox onSearch={ this.onSearch } onCleared={ this.onSearchCleared } /> :
-            undefined;
+        const searchBox = (<SearchBox
+            enableRoomSearchFocus={true}
+            placeholder={ _t('Filter room names') }
+            onSearch={ this.onSearch }
+            onCleared={ this.onSearchCleared }
+            collapsed={this.props.collapsed} />);
+
+        let breadcrumbs;
+        if (SettingsStore.isFeatureEnabled("feature_room_breadcrumbs")) {
+            breadcrumbs = (<RoomBreadcrumbs collapsed={this.props.collapsed} />);
+        }
 
         return (
             <div className={containerClasses}>
-                { tagPanel }
+                { tagPanelContainer }
                 <aside className={"mx_LeftPanel dark-panel"} onKeyDown={ this._onKeyDown } onFocus={ this._onFocus } onBlur={ this._onBlur }>
                     <TopLeftMenuButton collapsed={ this.props.collapsed } />
+                    { breadcrumbs }
                     { searchBox }
                     <CallPreview ConferenceHandler={VectorConferenceHandler} />
                     <RoomList
                         ref={this.collectRoomList}
+                        resizeNotifier={this.props.resizeNotifier}
                         collapsed={this.props.collapsed}
                         searchFilter={this.state.searchFilter}
                         ConferenceHandler={VectorConferenceHandler} />

src/components/structures/LoggedInView.js

@@ -22,7 +22,6 @@ import PropTypes from 'prop-types';
 import { DragDropContext } from 'react-beautiful-dnd';
 
 import { KeyCode, isOnlyCtrlOrCmdKeyEvent } from '../../Keyboard';
-import Notifier from '../../Notifier';
 import PageTypes from '../../PageTypes';
 import CallMediaHandler from '../../CallMediaHandler';
 import sdk from '../../index';
@@ -31,12 +30,12 @@ import sessionStore from '../../stores/SessionStore';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import SettingsStore from "../../settings/SettingsStore";
 import RoomListStore from "../../stores/RoomListStore";
-import OpenRoomsStore from "../../stores/OpenRoomsStore";
+import { getHomePageUrl } from '../../utils/pages';
 
 import TagOrderActions from '../../actions/TagOrderActions';
 import RoomListActions from '../../actions/RoomListActions';
 import ResizeHandle from '../views/elements/ResizeHandle';
-import {Resizer, CollapseDistributor} from '../../resizer'
+import {Resizer, CollapseDistributor} from '../../resizer';
 // We need to fetch each pinned message individually (if we don't already have it)
 // so each pinned message may trigger a request. Limit the number per room for sanity.
 // NB. this is just for server notices rather than pinned messages in general.
@@ -58,13 +57,11 @@ const LoggedInView = React.createClass({
         matrixClient: PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
         page_type: PropTypes.string.isRequired,
         onRoomCreated: PropTypes.func,
-        onUserSettingsClose: PropTypes.func,
 
         // Called with the credentials of a registered user (if they were a ROU that
         // transitioned to PWLU)
         onRegistered: PropTypes.func,
         collapsedRhs: PropTypes.bool,
-        teamToken: PropTypes.string,
 
         // Used by the RoomView to handle joining rooms
         viaServers: PropTypes.arrayOf(PropTypes.string),
@@ -123,6 +120,18 @@ const LoggedInView = React.createClass({
         this._matrixClient.on("RoomState.events", this.onRoomStateEvents);
     },
 
+    componentDidUpdate(prevProps) {
+        // attempt to guess when a banner was opened or closed
+        if (
+            (prevProps.showCookieBar !== this.props.showCookieBar) ||
+            (prevProps.hasNewVersion !== this.props.hasNewVersion) ||
+            (prevProps.userHasGeneratedPassword !== this.props.userHasGeneratedPassword) ||
+            (prevProps.showNotifierToolbar !== this.props.showNotifierToolbar)
+        ) {
+            this.props.resizeNotifier.notifyBannersChanged();
+        }
+    },
+
     componentWillUnmount: function() {
         document.removeEventListener('keydown', this._onKeyDown);
         this._matrixClient.removeListener("accountData", this.onAccountData);
@@ -161,18 +170,21 @@ const LoggedInView = React.createClass({
         const classNames = {
             handle: "mx_ResizeHandle",
             vertical: "mx_ResizeHandle_vertical",
-            reverse: "mx_ResizeHandle_reverse"
+            reverse: "mx_ResizeHandle_reverse",
         };
         const collapseConfig = {
             toggleSize: 260 - 50,
             onCollapsed: (collapsed) => {
-                this.setState({collapseLhs: collapsed});
                 if (collapsed) {
+                    dis.dispatch({action: "hide_left_panel"}, true);
                     window.localStorage.setItem("mx_lhs_size", '0');
+                } else {
+                    dis.dispatch({action: "show_left_panel"}, true);
                 }
             },
             onResized: (size) => {
                 window.localStorage.setItem("mx_lhs_size", '' + size);
+                this.props.resizeNotifier.notifyLeftHandleResized();
             },
         };
         const resizer = new Resizer(
@@ -184,10 +196,13 @@ const LoggedInView = React.createClass({
     },
 
     _loadResizerPreferences() {
-        const lhsSize = window.localStorage.getItem("mx_lhs_size");
+        let lhsSize = window.localStorage.getItem("mx_lhs_size");
         if (lhsSize !== null) {
-            this.resizer.forHandleAt(0).resize(parseInt(lhsSize, 10));
+            lhsSize = parseInt(lhsSize, 10);
+        } else {
+            lhsSize = 350;
         }
+        this.resizer.forHandleAt(0).resize(lhsSize);
     },
 
     onAccountData: function(event) {
@@ -202,7 +217,11 @@ const LoggedInView = React.createClass({
     },
 
     onSync: function(syncState, oldSyncState, data) {
-        const oldErrCode = this.state.syncErrorData && this.state.syncErrorData.error && this.state.syncErrorData.error.errcode;
+        const oldErrCode = (
+            this.state.syncErrorData &&
+            this.state.syncErrorData.error &&
+            this.state.syncErrorData.error.errcode
+        );
         const newErrCode = data && data.error && data.error.errcode;
         if (syncState === oldSyncState && oldErrCode === newErrCode) return;
 
@@ -311,12 +330,13 @@ const LoggedInView = React.createClass({
         }
     },
 
-    /** dispatch a page-up/page-down/etc to the appropriate component */
+    /**
+     * dispatch a page-up/page-down/etc to the appropriate component
+     * @param {Object} ev The key event
+     */
     _onScrollKeyPressed: function(ev) {
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
-        } else if (this.refs.roomDirectory) {
-            this.refs.roomDirectory.handleScrollKey(ev);
         }
     },
 
@@ -413,11 +433,9 @@ const LoggedInView = React.createClass({
     render: function() {
         const LeftPanel = sdk.getComponent('structures.LeftPanel');
         const RoomView = sdk.getComponent('structures.RoomView');
-        const UserSettings = sdk.getComponent('structures.UserSettings');
-        const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
-        const HomePage = sdk.getComponent('structures.HomePage');
+        const UserView = sdk.getComponent('structures.UserView');
+        const EmbeddedPage = sdk.getComponent('structures.EmbeddedPage');
         const GroupView = sdk.getComponent('structures.GroupView');
-        const GroupGridView = sdk.getComponent('structures.GroupGridView');
         const MyGroups = sdk.getComponent('structures.MyGroups');
         const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
         const CookieBar = sdk.getComponent('globals.CookieBar');
@@ -426,18 +444,11 @@ const LoggedInView = React.createClass({
         const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
         const ServerLimitBar = sdk.getComponent('globals.ServerLimitBar');
 
-        let page_element;
+        let pageElement;
 
         switch (this.props.page_type) {
             case PageTypes.RoomView:
-                if (!OpenRoomsStore.getActiveRoomStore()) {
-                    console.warn(`LoggedInView: getCurrentRoomStore not set!`);
-                }
-                else if (OpenRoomsStore.getActiveRoomStore().getRoomId() !== this.props.currentRoomId) {
-                    console.warn(`LoggedInView: room id in store not the same as in props: ${OpenRoomsStore.getActiveRoomStore().getRoomId()} & ${this.props.currentRoomId}`);
-                }
-                page_element = <RoomView
-                        roomViewStore={OpenRoomsStore.getActiveRoomStore()}
+                pageElement = <RoomView
                         ref='roomView'
                         autoJoin={this.props.autoJoin}
                         onRegistered={this.props.onRegistered}
@@ -449,54 +460,33 @@ const LoggedInView = React.createClass({
                         disabled={this.props.middleDisabled}
                         collapsedRhs={this.props.collapsedRhs}
                         ConferenceHandler={this.props.ConferenceHandler}
+                        resizeNotifier={this.props.resizeNotifier}
                     />;
                 break;
-            case PageTypes.GroupGridView:
-                page_element = <GroupGridView collapsedRhs={this.props.collapsedRhs} />;
-                break;
-            case PageTypes.UserSettings:
-                page_element = <UserSettings
-                    onClose={this.props.onCloseAllSettings}
-                    brand={this.props.config.brand}
-                    referralBaseUrl={this.props.config.referralBaseUrl}
-                    teamToken={this.props.teamToken}
-                />;
-                break;
 
             case PageTypes.MyGroups:
-                page_element = <MyGroups />;
+                pageElement = <MyGroups />;
                 break;
 
             case PageTypes.RoomDirectory:
-                page_element = <RoomDirectory
-                    ref="roomDirectory"
-                    config={this.props.config.roomDirectory}
-                />;
+                // handled by MatrixChat for now
                 break;
 
             case PageTypes.HomePage:
                 {
-                    // If team server config is present, pass the teamServerURL. props.teamToken
-                    // must also be set for the team page to be displayed, otherwise the
-                    // welcomePageUrl is used (which might be undefined).
-                    const teamServerUrl = this.props.config.teamServerConfig ?
-                        this.props.config.teamServerConfig.teamServerURL : null;
-
-                    page_element = <HomePage
-                        teamServerUrl={teamServerUrl}
-                        teamToken={this.props.teamToken}
-                        homePageUrl={this.props.config.welcomePageUrl}
+                    const pageUrl = getHomePageUrl(this.props.config);
+                    pageElement = <EmbeddedPage className="mx_HomePage"
+                        url={pageUrl}
+                        scrollbar={true}
                     />;
                 }
                 break;
 
             case PageTypes.UserView:
-                page_element = null; // deliberately null for now
-                // TODO: fix/remove UserView
-                // right_panel = <RightPanel disabled={this.props.rightDisabled} />;
+                pageElement = <UserView userId={this.props.currentUserId} />;
                 break;
             case PageTypes.GroupView:
-                page_element = <GroupView
+                pageElement = <GroupView
                     groupId={this.props.currentGroupId}
                     isNew={this.props.currentGroupIsNew}
                     collapsedRhs={this.props.collapsedRhs}
@@ -512,7 +502,6 @@ const LoggedInView = React.createClass({
         });
 
         let topBar;
-        const isGuest = this.props.matrixClient.isGuest();
         if (this.state.syncErrorData && this.state.syncErrorData.error.errcode === 'M_RESOURCE_LIMIT_EXCEEDED') {
             topBar = <ServerLimitBar kind='hard'
                 adminContact={this.state.syncErrorData.error.data.admin_contact}
@@ -536,7 +525,7 @@ const LoggedInView = React.createClass({
             topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
         } else if (this.state.userHasGeneratedPassword) {
             topBar = <PasswordNagBar />;
-        } else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
+        } else if (this.props.showNotifierToolbar) {
             topBar = <MatrixToolbar />;
         }
 
@@ -554,11 +543,12 @@ const LoggedInView = React.createClass({
                 <DragDropContext onDragEnd={this._onDragEnd}>
                     <div ref={this._setResizeContainerRef} className={bodyClasses}>
                         <LeftPanel
-                            collapsed={this.props.collapseLhs || this.state.collapseLhs || false}
+                            resizeNotifier={this.props.resizeNotifier}
+                            collapsed={this.props.collapseLhs || false}
                             disabled={this.props.leftDisabled}
                         />
-                        <ResizeHandle/>
-                        { page_element }
+                        <ResizeHandle />
+                        { pageElement }
                     </div>
                 </DragDropContext>
             </div>

src/components/structures/MainSplit.js

@@ -27,6 +27,9 @@ export default class MainSplit extends React.Component {
 
     _onResized(size) {
         window.localStorage.setItem("mx_rhs_size", size);
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.notifyRightHandleResized();
+        }
     }
 
     _createResizer() {
@@ -71,13 +74,14 @@ export default class MainSplit extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const shouldAllowResizing =
-            !this.props.collapsedRhs &&
-            this.props.panel;
+        const wasExpanded = !this.props.collapsedRhs && prevProps.collapsedRhs;
+        const wasCollapsed = this.props.collapsedRhs && !prevProps.collapsedRhs;
+        const wasPanelSet = this.props.panel && !prevProps.panel;
+        const wasPanelCleared = !this.props.panel && prevProps.panel;
 
-        if (shouldAllowResizing && !this.resizer) {
+        if (wasExpanded || wasPanelSet) {
             this._createResizer();
-        } else if (!shouldAllowResizing && this.resizer) {
+        } else if (wasCollapsed || wasPanelCleared) {
             this.resizer.detach();
             this.resizer = null;
         }

src/components/structures/MatrixChat.js

@@ -29,6 +29,7 @@ import PlatformPeg from "../../PlatformPeg";
 import SdkConfig from "../../SdkConfig";
 import * as RoomListSorter from "../../RoomListSorter";
 import dis from "../../dispatcher";
+import Notifier from '../../Notifier';
 
 import Modal from "../../Modal";
 import Tinter from "../../Tinter";
@@ -40,6 +41,7 @@ import * as Lifecycle from '../../Lifecycle';
 // LifecycleStore is not used but does listen to and dispatch actions
 require('../../stores/LifecycleStore');
 import PageTypes from '../../PageTypes';
+import { getHomePageUrl } from '../../utils/pages';
 
 import createRoom from "../../createRoom";
 import KeyRequestHandler from '../../KeyRequestHandler';
@@ -47,6 +49,8 @@ import { _t, getCurrentLanguage } from '../../languageHandler';
 import SettingsStore, {SettingLevel} from "../../settings/SettingsStore";
 import { startAnyRegistrationFlow } from "../../Registration.js";
 import { messageForSyncError } from '../../utils/ErrorUtils';
+import ResizeNotifier from "../../utils/ResizeNotifier";
+import TimelineExplosionDialog from "../views/dialogs/TimelineExplosionDialog";
 
 const AutoDiscovery = Matrix.AutoDiscovery;
 
@@ -60,27 +64,30 @@ const VIEWS = {
     // trying to re-animate a matrix client or register as a guest.
     LOADING: 0,
 
+    // we are showing the welcome view
+    WELCOME: 1,
+
     // we are showing the login view
-    LOGIN: 1,
+    LOGIN: 2,
 
     // we are showing the registration view
-    REGISTER: 2,
+    REGISTER: 3,
 
     // completeing the registration flow
-    POST_REGISTRATION: 3,
+    POST_REGISTRATION: 4,
 
     // showing the 'forgot password' view
-    FORGOT_PASSWORD: 4,
+    FORGOT_PASSWORD: 5,
 
     // we have valid matrix credentials (either via an explicit login, via the
     // initial re-animation/guest registration, or via a registration), and are
     // now setting up a matrixclient to talk to it. This isn't an instant
-    // process because (a) we need to clear out indexeddb, and (b) we need to
-    // talk to the team server; while it is going on we show a big spinner.
-    LOGGING_IN: 5,
+    // process because we need to clear out indexeddb. While it is going on we
+    // show a big spinner.
+    LOGGING_IN: 6,
 
     // we are logged in with an active matrix client.
-    LOGGED_IN: 6,
+    LOGGED_IN: 7,
 };
 
 // Actions that are redirected through the onboarding process prior to being
@@ -136,10 +143,6 @@ export default React.createClass({
         appConfig: PropTypes.object,
     },
 
-    AuxPanel: {
-        RoomSettings: "room_settings",
-    },
-
     getChildContext: function() {
         return {
             appConfig: this.props.config,
@@ -161,7 +164,7 @@ export default React.createClass({
 
             // If we're trying to just view a user ID (i.e. /user URL), this is it
             viewUserId: null,
-
+            // this is persisted as mx_lhs_size, loaded in LoggedInView
             collapseLhs: false,
             collapsedRhs: window.localStorage.getItem("mx_rhs_collapsed") === "true",
             leftDisabled: false,
@@ -183,7 +186,7 @@ export default React.createClass({
             register_is_url: null,
             register_id_sid: null,
 
-            // Parameters used for setting up the login/registration views
+            // Parameters used for setting up the authentication views
             defaultServerName: this.props.config.default_server_name,
             defaultHsUrl: this.props.config.default_hs_url,
             defaultIsUrl: this.props.config.default_is_url,
@@ -194,6 +197,8 @@ export default React.createClass({
             hideToSRUsers: false,
 
             syncError: null, // If the current syncing status is ERROR, the error object, otherwise null.
+            resizeNotifier: new ResizeNotifier(),
+            showNotifierToolbar: false,
         };
         return s;
     },
@@ -245,6 +250,17 @@ export default React.createClass({
         return this.state.defaultIsUrl || "https://vector.im";
     },
 
+    /**
+     * Whether to skip the server details phase of registration and start at the
+     * actual form.
+     * @return {boolean}
+     *     If there was a configured default HS or default server name, skip the
+     *     the server details.
+     */
+    skipServerDetailsForRegistration() {
+        return !!this.state.defaultHsUrl;
+    },
+
     componentWillMount: function() {
         SdkConfig.put(this.props.config);
 
@@ -256,42 +272,6 @@ export default React.createClass({
             MatrixClientPeg.opts.initialSyncLimit = this.props.config.sync_timeline_limit;
         }
 
-        // To enable things like riot.im/geektime in a nicer way than rewriting the URL
-        // and appending a team token query parameter, use the first path segment to
-        // indicate a team, with "public" team tokens stored in the config teamTokenMap.
-        let routedTeamToken = null;
-        if (this.props.config.teamTokenMap) {
-            const teamName = window.location.pathname.split('/')[1];
-            if (teamName && this.props.config.teamTokenMap.hasOwnProperty(teamName)) {
-                routedTeamToken = this.props.config.teamTokenMap[teamName];
-            }
-        }
-
-        // Persist the team token across refreshes using sessionStorage. A new window or
-        // tab will not persist sessionStorage, but refreshes will.
-        if (this.props.startingFragmentQueryParams.team_token) {
-            window.sessionStorage.setItem(
-                'mx_team_token',
-                this.props.startingFragmentQueryParams.team_token,
-            );
-        }
-
-        // Use the locally-stored team token first, then as a fall-back, check to see if
-        // a referral link was used, which will contain a query parameter `team_token`.
-        this._teamToken = routedTeamToken ||
-            window.localStorage.getItem('mx_team_token') ||
-            window.sessionStorage.getItem('mx_team_token');
-
-        // Some users have ended up with "undefined" as their local storage team token,
-        // treat that as undefined.
-        if (this._teamToken === "undefined") {
-            this._teamToken = undefined;
-        }
-
-        if (this._teamToken) {
-            console.info(`Team token set to ${this._teamToken}`);
-        }
-
         // Set up the default URLs (async)
         if (this.getDefaultServerName() && !this.getDefaultHsUrl(false)) {
             this.setState({loadingDefaultHomeserver: true});
@@ -302,7 +282,10 @@ export default React.createClass({
             // will check their settings.
             this.setState({
                 defaultServerName: null, // To un-hide any secrets people might be keeping
-                defaultServerDiscoveryError: _t("Invalid configuration: Cannot supply a default homeserver URL and a default server name"),
+                defaultServerDiscoveryError: _t(
+                    "Invalid configuration: Cannot supply a default homeserver URL and " +
+                    "a default server name",
+                ),
             });
         }
 
@@ -338,6 +321,9 @@ export default React.createClass({
         // N.B. we don't call the whole of setTheme() here as we may be
         // racing with the theme CSS download finishing from index.js
         Tinter.tint();
+
+        // For PersistentElement
+        this.state.resizeNotifier.on("middlePanelResized", this._dispatchTimelineResize);
     },
 
     componentDidMount: function() {
@@ -357,9 +343,6 @@ export default React.createClass({
             linkifyMatrix.onGroupClick = this.onGroupClick;
         }
 
-        const teamServerConfig = this.props.config.teamServerConfig || {};
-        Lifecycle.initRtsClient(teamServerConfig.teamServerURL);
-
         // the first thing to do is to try the token params in the query-string
         Lifecycle.attemptTokenLogin(this.props.realQueryParams).then((loggedIn) => {
             if (loggedIn) {
@@ -382,25 +365,7 @@ export default React.createClass({
                 return;
             }
 
-            // the extra Promise.resolve() ensures that synchronous exceptions hit the same codepath as
-            // asynchronous ones.
-            return Promise.resolve().then(() => {
-                return Lifecycle.loadSession({
-                    fragmentQueryParams: this.props.startingFragmentQueryParams,
-                    enableGuest: this.props.enableGuest,
-                    guestHsUrl: this.getCurrentHsUrl(),
-                    guestIsUrl: this.getCurrentIsUrl(),
-                    defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
-                });
-            }).then((loadedSession) => {
-                if (!loadedSession) {
-                    // fall back to showing the login screen
-                    dis.dispatch({action: "start_login"});
-                }
-            });
-            // Note we don't catch errors from this: we catch everything within
-            // loadSession as there's logic there to ask the user if they want
-            // to try logging out.
+            return this._loadSession();
         });
 
         if (SettingsStore.getValue("showCookieBar")) {
@@ -414,11 +379,34 @@ export default React.createClass({
         }
     },
 
+    _loadSession: function() {
+        // the extra Promise.resolve() ensures that synchronous exceptions hit the same codepath as
+        // asynchronous ones.
+        return Promise.resolve().then(() => {
+            return Lifecycle.loadSession({
+                fragmentQueryParams: this.props.startingFragmentQueryParams,
+                enableGuest: this.props.enableGuest,
+                guestHsUrl: this.getCurrentHsUrl(),
+                guestIsUrl: this.getCurrentIsUrl(),
+                defaultDeviceDisplayName: this.props.defaultDeviceDisplayName,
+            });
+        }).then((loadedSession) => {
+            if (!loadedSession) {
+                // fall back to showing the welcome screen
+                dis.dispatch({action: "view_welcome_page"});
+            }
+        });
+        // Note we don't catch errors from this: we catch everything within
+        // loadSession as there's logic there to ask the user if they want
+        // to try logging out.
+    },
+
     componentWillUnmount: function() {
         Lifecycle.stopMatrixClient();
         dis.unregister(this.dispatcherRef);
         window.removeEventListener("focus", this.onFocus);
         window.removeEventListener('resize', this.handleResize);
+        this.state.resizeNotifier.removeListener("middlePanelResized", this._dispatchTimelineResize);
     },
 
     componentWillUpdate: function(props, state) {
@@ -607,31 +595,15 @@ export default React.createClass({
             case 'view_indexed_room':
                 this._viewIndexedRoom(payload.roomIndex);
                 break;
-            case 'view_user_settings':
-                this._setPage(PageTypes.UserSettings);
-                this.notifyNewScreen('settings');
-                break;
-            case 'close_settings':
-                this.setState({
-                    leftDisabled: false,
-                    rightDisabled: false,
-                    middleDisabled: false,
-                });
-                if (this.state.page_type === PageTypes.UserSettings) {
-                    // We do this to get setPage and notifyNewScreen
-                    if (this.state.currentRoomId) {
-                        this._viewRoom({
-                            room_id: this.state.currentRoomId,
-                        });
-                    } else if (this.state.currentGroupId) {
-                        this._viewGroup({
-                            group_id: this.state.currentGroupId,
-                        });
-                    } else {
-                        this._viewHome();
-                    }
-                }
+            case 'view_user_settings': {
+                const UserSettingsDialog = sdk.getComponent("dialogs.UserSettingsDialog");
+                Modal.createTrackedDialog('User settings', '', UserSettingsDialog, {}, 'mx_SettingsDialog',
+                    /*isPriority=*/false, /*isStatic=*/true);
+
+                // View the welcome or home page if we need something to look at
+                this._viewSomethingBehindModal();
                 break;
+            }
             case 'view_create_room':
                 this._createRoom();
                 break;
@@ -640,10 +612,16 @@ export default React.createClass({
                 Modal.createTrackedDialog('Create Community', '', CreateGroupDialog);
             }
             break;
-            case 'view_room_directory':
-                this._setPage(PageTypes.RoomDirectory);
-                this.notifyNewScreen('directory');
-                break;
+            case 'view_room_directory': {
+                const RoomDirectory = sdk.getComponent("structures.RoomDirectory");
+                Modal.createTrackedDialog('Room directory', '', RoomDirectory, {
+                    config: this.props.config,
+                }, 'mx_RoomDirectory_dialogWrapper');
+
+                // View the welcome or home page if we need something to look at
+                this._viewSomethingBehindModal();
+            }
+            break;
             case 'view_my_groups':
                 this._setPage(PageTypes.MyGroups);
                 this.notifyNewScreen('groups');
@@ -651,8 +629,8 @@ export default React.createClass({
             case 'view_group':
                 this._viewGroup(payload);
                 break;
-            case 'group_grid_view':
-                this._viewGroupGrid(payload);
+            case 'view_welcome_page':
+                this._viewWelcome();
                 break;
             case 'view_home_page':
                 this._viewHome();
@@ -669,8 +647,9 @@ export default React.createClass({
             case 'view_invite':
                 showRoomInviteDialog(payload.roomId);
                 break;
-            case 'notifier_enabled':
-                this.forceUpdate();
+            case 'notifier_enabled': {
+                    this.setState({showNotifierToolbar: Notifier.shouldShowToolbar()});
+                }
                 break;
             case 'hide_left_panel':
                 this.setState({
@@ -702,11 +681,9 @@ export default React.createClass({
                 });
                 break;
             }
-            // case 'set_theme':
-                // disable changing the theme for now
-                // as other themes are not compatible with dharma
-                // this._onSetTheme(payload.value);
-                // break;
+            case 'set_theme':
+                this._onSetTheme(payload.value);
+                break;
             case 'on_logging_in':
                 // We are now logging in, so set the state to reflect that
                 // NB. This does not touch 'ready' since if our dispatches
@@ -716,7 +693,7 @@ export default React.createClass({
                 });
                 break;
             case 'on_logged_in':
-                this._onLoggedIn(payload.teamToken);
+                this._onLoggedIn();
                 break;
             case 'on_logged_out':
                 this._onLoggedOut();
@@ -865,9 +842,9 @@ export default React.createClass({
     //                               room name and avatar from an invite email)
     _viewRoom: function(roomInfo) {
         this.focusComposer = true;
-        console.log("!!! MatrixChat._viewRoom", roomInfo);
 
         const newState = {
+            view: VIEWS.LOGGED_IN,
             currentRoomId: roomInfo.room_id || null,
             page_type: PageTypes.RoomView,
             thirdPartyInvite: roomInfo.third_party_invite,
@@ -914,9 +891,6 @@ export default React.createClass({
             if (roomInfo.event_id && roomInfo.highlighted) {
                 presentedId += "/" + roomInfo.event_id;
             }
-
-
-            // TODO: only emit this when we're not in grid mode?
             this.notifyNewScreen('room/' + presentedId);
             newState.ready = true;
             this.setState(newState);
@@ -933,9 +907,21 @@ export default React.createClass({
         this.notifyNewScreen('group/' + groupId);
     },
 
-    _viewGroupGrid: function(payload) {
-        this._setPage(PageTypes.GroupGridView);
-        // this.notifyNewScreen('grid/' + payload.group_id);
+    _viewSomethingBehindModal() {
+        if (this.state.view !== VIEWS.LOGGED_IN) {
+            this._viewWelcome();
+            return;
+        }
+        if (!this.state.currentGroupId && !this.state.currentRoomId) {
+            this._viewHome();
+        }
+    },
+
+    _viewWelcome() {
+        this.setStateForNewView({
+            view: VIEWS.WELCOME,
+        });
+        this.notifyNewScreen('welcome');
     },
 
     _viewHome: function() {
@@ -1011,11 +997,11 @@ export default React.createClass({
             }
             dis.dispatch({
                 action: 'require_registration',
-                // If the set_mxid dialog is cancelled, view /home because if the browser
-                // was pointing at /user/@someone:domain?action=chat, the URL needs to be
-                // reset so that they can revisit /user/.. // (and trigger
+                // If the set_mxid dialog is cancelled, view /welcome because if the
+                // browser was pointing at /user/@someone:domain?action=chat, the URL
+                // needs to be reset so that they can revisit /user/.. // (and trigger
                 // `_chatCreateOrReuse` again)
-                go_home_on_cancel: true,
+                go_welcome_on_cancel: true,
             });
             return;
         }
@@ -1082,34 +1068,48 @@ export default React.createClass({
             button: _t("Leave"),
             onFinished: (shouldLeave) => {
                 if (shouldLeave) {
-                    const d = MatrixClientPeg.get().leave(roomId);
+                    const d = MatrixClientPeg.get().leaveRoomChain(roomId);
 
                     // FIXME: controller shouldn't be loading a view :(
                     const Loader = sdk.getComponent("elements.Spinner");
                     const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
 
-                    d.then(() => {
+                    d.then((errors) => {
                         modal.close();
+
+                        for (const leftRoomId of Object.keys(errors)) {
+                            const err = errors[leftRoomId];
+                            if (!err) continue;
+
+                            console.error("Failed to leave room " + leftRoomId + " " + err);
+                            let title = _t("Failed to leave room");
+                            let message = _t("Server may be unavailable, overloaded, or you hit a bug.");
+                            if (err.errcode === 'M_CANNOT_LEAVE_SERVER_NOTICE_ROOM') {
+                                title = _t("Can't leave Server Notices room");
+                                message = _t(
+                                    "This room is used for important messages from the Homeserver, " +
+                                    "so you cannot leave it.",
+                                );
+                            } else if (err && err.message) {
+                                message = err.message;
+                            }
+                            Modal.createTrackedDialog('Failed to leave room', '', ErrorDialog, {
+                                title: title,
+                                description: message,
+                            });
+                            return;
+                        }
+
                         if (this.state.currentRoomId === roomId) {
                             dis.dispatch({action: 'view_next_room'});
                         }
                     }, (err) => {
+                        // This should only happen if something went seriously wrong with leaving the chain.
                         modal.close();
                         console.error("Failed to leave room " + roomId + " " + err);
-                        let title = _t("Failed to leave room");
-                        let message = _t("Server may be unavailable, overloaded, or you hit a bug.");
-                        if (err.errcode == 'M_CANNOT_LEAVE_SERVER_NOTICE_ROOM') {
-                            title = _t("Can't leave Server Notices room");
-                            message = _t(
-                                "This room is used for important messages from the Homeserver, " +
-                                "so you cannot leave it.",
-                            );
-                        } else if (err && err.message) {
-                            message = err.message;
-                        }
                         Modal.createTrackedDialog('Failed to leave room', '', ErrorDialog, {
-                            title: title,
-                            description: message,
+                            title: _t("Failed to leave room"),
+                            description: _t("Unknown error"),
                         });
                     });
                 }
@@ -1195,16 +1195,10 @@ export default React.createClass({
 
     /**
      * Called when a new logged in session has started
-     *
-     * @param {string} teamToken
      */
-    _onLoggedIn: async function(teamToken) {
-        this.setStateForNewView({view: VIEWS.LOGGED_IN});
-        if (teamToken) {
-            // A team member has logged in, not a guest
-            this._teamToken = teamToken;
-            dis.dispatch({action: 'view_home_page'});
-        } else if (this._is_registered) {
+    _onLoggedIn: async function() {
+        this.setStateForNewView({ view: VIEWS.LOGGED_IN });
+        if (this._is_registered) {
             this._is_registered = false;
 
             if (this.props.config.welcomeUserId && getCurrentLanguage().startsWith("en")) {
@@ -1243,7 +1237,15 @@ export default React.createClass({
                 room_id: localStorage.getItem('mx_last_room_id'),
             });
         } else {
-            dis.dispatch({action: 'view_home_page'});
+            if (MatrixClientPeg.get().isGuest()) {
+                dis.dispatch({action: 'view_welcome_page'});
+            } else if (getHomePageUrl(this.props.config)) {
+                dis.dispatch({action: 'view_home_page'});
+            } else {
+                this.firstSyncPromise.promise.then(() => {
+                    dis.dispatch({action: 'view_next_room'});
+                });
+            }
         }
     },
 
@@ -1260,7 +1262,6 @@ export default React.createClass({
             currentRoomId: null,
             page_type: PageTypes.RoomDirectory,
         });
-        this._teamToken = null;
         this._setPageSubtitle();
     },
 
@@ -1277,6 +1278,7 @@ export default React.createClass({
         this.firstSyncComplete = false;
         this.firstSyncPromise = Promise.defer();
         const cli = MatrixClientPeg.get();
+        const IncomingSasDialog = sdk.getComponent('views.dialogs.IncomingSasDialog');
 
         // Allow the JS SDK to reap timeline events. This reduces the amount of
         // memory consumed as the JS SDK stores multiple distinct copies of room
@@ -1300,6 +1302,17 @@ export default React.createClass({
             return self._loggedInView.child.canResetTimelineInRoom(roomId);
         });
 
+        cli.on('sync.unexpectedError', function(err) {
+            if (err.message && err.message.includes("live timeline ") && err.message.includes(" is no longer live ")) {
+                console.error("Caught timeline explosion - trying to ask user for more information");
+                if (Modal.hasDialogs()) {
+                    console.warn("User has another dialog open - skipping prompt");
+                    return;
+                }
+                Modal.createTrackedDialog('Timeline exploded', '', TimelineExplosionDialog, {});
+            }
+        });
+
         cli.on('sync', function(state, prevState, data) {
             // LifecycleStore and others cannot directly subscribe to matrix client for
             // events because flux only allows store state changes during flux dispatches.
@@ -1328,7 +1341,10 @@ export default React.createClass({
             self.firstSyncPromise.resolve();
 
             dis.dispatch({action: 'focus_composer'});
-            self.setState({ready: true});
+            self.setState({
+                ready: true,
+                showNotifierToolbar: Notifier.shouldShowToolbar(),
+            });
         });
         cli.on('Call.incoming', function(call) {
             // we dispatch this synchronously to make sure that the event
@@ -1476,6 +1492,12 @@ export default React.createClass({
             }
         });
 
+        cli.on("crypto.verification.start", (verifier) => {
+            Modal.createTrackedDialog('Incoming Verification', '', IncomingSasDialog, {
+                verifier,
+            });
+        });
+
         // Fire the tinter right on startup to ensure the default theme is applied
         // A later sync can/will correct the tint to be the right value for the user
         const colorScheme = SettingsStore.getValue("roomColor");
@@ -1523,6 +1545,10 @@ export default React.createClass({
             dis.dispatch({
                 action: 'view_user_settings',
             });
+        } else if (screen == 'welcome') {
+            dis.dispatch({
+                action: 'view_welcome_page',
+            });
         } else if (screen == 'home') {
             dis.dispatch({
                 action: 'view_home_page',
@@ -1547,7 +1573,16 @@ export default React.createClass({
         } else if (screen.indexOf('room/') == 0) {
             const segments = screen.substring(5).split('/');
             const roomString = segments[0];
-            const eventId = segments[1]; // undefined if no event id given
+            let eventId = segments.splice(1).join("/"); // empty string if no event id given
+
+            // Previously we pulled the eventID from the segments in such a way
+            // where if there was no eventId then we'd get undefined. However, we
+            // now do a splice and join to handle v3 event IDs which results in
+            // an empty string. To maintain our potential contract with the rest
+            // of the app, we coerce the eventId to be undefined where applicable.
+            if (!eventId) eventId = undefined;
+
+            // TODO: Handle encoded room/event IDs: https://github.com/vector-im/riot-web/issues/9149
 
             // FIXME: sort_out caseConsistency
             const thirdPartyInvite = {
@@ -1588,11 +1623,7 @@ export default React.createClass({
                 payload.room_id = roomString;
             }
 
-            // we can't view a room unless we're logged in
-            // (a guest account is fine)
-            if (this.state.view === VIEWS.LOGGED_IN) {
-                dis.dispatch(payload);
-            }
+            dis.dispatch(payload);
         } else if (screen.indexOf('user/') == 0) {
             const userId = screen.substring(5);
 
@@ -1605,14 +1636,9 @@ export default React.createClass({
                     this._chatCreateOrReuse(userId);
                     return;
                 }
-
-                this._setPage(PageTypes.UserView);
                 this.notifyNewScreen('user/' + userId);
-                const member = new Matrix.RoomMember(null, userId);
-                dis.dispatch({
-                    action: 'view_user',
-                    member: member,
-                });
+                this.setState({currentUserId: userId});
+                this._setPage(PageTypes.UserView);
             });
         } else if (screen.indexOf('group/') == 0) {
             const groupId = screen.substring(6);
@@ -1682,9 +1708,14 @@ export default React.createClass({
             dis.dispatch({ action: 'show_right_panel' });
         }
 
+        this.state.resizeNotifier.notifyWindowResized();
         this._windowWidth = window.innerWidth;
     },
 
+    _dispatchTimelineResize() {
+        dis.dispatch({ action: 'timeline_resize' });
+    },
+
     onRoomCreated: function(roomId) {
         dis.dispatch({
             action: "view_room",
@@ -1704,18 +1735,46 @@ export default React.createClass({
         this.showScreen("forgot_password");
     },
 
-    onReturnToAppClick: function() {
-        // treat it the same as if the user had completed the login
-        this._onLoggedIn(null);
-    },
-
     // returns a promise which resolves to the new MatrixClient
-    onRegistered: function(credentials, teamToken) {
-        // XXX: These both should be in state or ideally store(s) because we risk not
+    onRegistered: function(credentials) {
+        // XXX: This should be in state or ideally store(s) because we risk not
         //      rendering the most up-to-date view of state otherwise.
-        // teamToken may not be truthy
-        this._teamToken = teamToken;
         this._is_registered = true;
+        if (this.state.register_session_id) {
+            // The user came in through an email validation link. To avoid overwriting
+            // their session, check to make sure the session isn't someone else.
+            const sessionOwner = Lifecycle.getStoredSessionOwner();
+            if (sessionOwner && sessionOwner !== credentials.userId) {
+                console.log(
+                    `Found a session for ${sessionOwner} but ${credentials.userId} is trying to verify their ` +
+                    `email address. Restoring the session for ${sessionOwner} with warning.`,
+                );
+                this._loadSession();
+
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                // N.B. first param is passed to piwik and so doesn't want i18n
+                Modal.createTrackedDialog('Existing session on register', '',
+                    QuestionDialog, {
+                    title: _t('You are logged in to another account'),
+                    description: _t(
+                        "Thank you for verifying your email! The account you're logged into here " +
+                        "(%(sessionUserId)s) appears to be different from the account you've verified an " +
+                        "email for (%(verifiedUserId)s). If you would like to log in to %(verifiedUserId2)s, " +
+                        "please log out first.", {
+                            sessionUserId: sessionOwner,
+                            verifiedUserId: credentials.userId,
+
+                            // TODO: Fix translations to support reusing variables.
+                            // https://github.com/vector-im/riot-web/issues/9086
+                            verifiedUserId2: credentials.userId,
+                        },
+                    ),
+                    hasCancelButton: false,
+                });
+
+                return;
+            }
+        }
         return Lifecycle.setLoggedIn(credentials);
     },
 
@@ -1845,7 +1904,11 @@ export default React.createClass({
     render: function() {
         // console.log(`Rendering MatrixChat with view ${this.state.view}`);
 
-        if (this.state.view === VIEWS.LOADING || this.state.view === VIEWS.LOGGING_IN || this.state.loadingDefaultHomeserver) {
+        if (
+            this.state.view === VIEWS.LOADING ||
+            this.state.view === VIEWS.LOGGING_IN ||
+            this.state.loadingDefaultHomeserver
+        ) {
             const Spinner = sdk.getComponent('elements.Spinner');
             return (
                 <div className="mx_MatrixChat_splash">
@@ -1856,7 +1919,7 @@ export default React.createClass({
 
         // needs to be before normal PageTypes as you are logged in technically
         if (this.state.view === VIEWS.POST_REGISTRATION) {
-            const PostRegistration = sdk.getComponent('structures.login.PostRegistration');
+            const PostRegistration = sdk.getComponent('structures.auth.PostRegistration');
             return (
                 <PostRegistration
                     onComplete={this.onFinishPostRegistration} />
@@ -1883,7 +1946,6 @@ export default React.createClass({
                         onCloseAllSettings={this.onCloseAllSettings}
                         onRegistered={this.onRegistered}
                         currentRoomId={this.state.currentRoomId}
-                        teamToken={this._teamToken}
                         showCookieBar={this.state.showCookieBar}
                         {...this.props}
                         {...this.state}
@@ -1910,29 +1972,30 @@ export default React.createClass({
             }
         }
 
+        if (this.state.view === VIEWS.WELCOME) {
+            const Welcome = sdk.getComponent('auth.Welcome');
+            return <Welcome />;
+        }
+
         if (this.state.view === VIEWS.REGISTER) {
-            const Registration = sdk.getComponent('structures.login.Registration');
+            const Registration = sdk.getComponent('structures.auth.Registration');
             return (
                 <Registration
                     clientSecret={this.state.register_client_secret}
                     sessionId={this.state.register_session_id}
                     idSid={this.state.register_id_sid}
                     email={this.props.startingFragmentQueryParams.email}
-                    referrer={this.props.startingFragmentQueryParams.referrer}
                     defaultServerName={this.getDefaultServerName()}
                     defaultServerDiscoveryError={this.state.defaultServerDiscoveryError}
                     defaultHsUrl={this.getDefaultHsUrl()}
                     defaultIsUrl={this.getDefaultIsUrl()}
+                    skipServerDetails={this.skipServerDetailsForRegistration()}
                     brand={this.props.config.brand}
-                    teamServerConfig={this.props.config.teamServerConfig}
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     makeRegistrationUrl={this._makeRegistrationUrl}
-                    defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
                     onLoggedIn={this.onRegistered}
                     onLoginClick={this.onLoginClick}
-                    onRegisterClick={this.onRegisterClick}
-                    onCancelClick={MatrixClientPeg.get() ? this.onReturnToAppClick : null}
                     onServerConfigChange={this.onServerConfigChange}
                     />
             );
@@ -1940,7 +2003,7 @@ export default React.createClass({
 
 
         if (this.state.view === VIEWS.FORGOT_PASSWORD) {
-            const ForgotPassword = sdk.getComponent('structures.login.ForgotPassword');
+            const ForgotPassword = sdk.getComponent('structures.auth.ForgotPassword');
             return (
                 <ForgotPassword
                     defaultServerName={this.getDefaultServerName()}
@@ -1950,13 +2013,12 @@ export default React.createClass({
                     customHsUrl={this.getCurrentHsUrl()}
                     customIsUrl={this.getCurrentIsUrl()}
                     onComplete={this.onLoginClick}
-                    onRegisterClick={this.onRegisterClick}
                     onLoginClick={this.onLoginClick} />
             );
         }
 
         if (this.state.view === VIEWS.LOGIN) {
-            const Login = sdk.getComponent('structures.login.Login');
+            const Login = sdk.getComponent('structures.auth.Login');
             return (
                 <Login
                     onLoggedIn={Lifecycle.setLoggedIn}
@@ -1971,7 +2033,6 @@ export default React.createClass({
                     defaultDeviceDisplayName={this.props.defaultDeviceDisplayName}
                     onForgotPasswordClick={this.onForgotPasswordClick}
                     enableGuest={this.props.enableGuest}
-                    onCancelClick={MatrixClientPeg.get() ? this.onReturnToAppClick : null}
                     onServerConfigChange={this.onServerConfigChange}
                 />
             );

src/components/structures/MessagePanel.js

@@ -21,7 +21,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import shouldHideEvent from '../../shouldHideEvent';
 import {wantsDateSeparator} from '../../DateUtils';
-import dis from "../../dispatcher";
 import sdk from '../../index';
 
 import MatrixClientPeg from '../../MatrixClientPeg';
@@ -387,7 +386,7 @@ module.exports = React.createClass({
 
                 ret.push(<MemberEventListSummary key={key}
                     events={summarisedEvents}
-                    onToggle={this._onWidgetLoad} // Update scroll state
+                    onToggle={this._onHeightChanged} // Update scroll state
                     startExpanded={highlightInMels}
                 >
                         { eventTiles }
@@ -517,7 +516,7 @@ module.exports = React.createClass({
                         data-scroll-tokens={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         isRedacted={mxEv.isRedacted()}
-                        onWidgetLoad={this._onWidgetLoad}
+                        onHeightChanged={this._onHeightChanged}
                         readReceipts={readReceipts}
                         readReceiptMap={this._readReceiptMap}
                         showUrlPreview={this.props.showUrlPreview}
@@ -525,6 +524,7 @@ module.exports = React.createClass({
                         eventSendStatus={mxEv.status}
                         tileShape={this.props.tileShape}
                         isTwelveHour={this.props.isTwelveHour}
+                        permalinkCreator={this.props.permalinkCreator}
                         last={last} isSelectedEvent={highlight} />
                 </li>,
         );
@@ -624,22 +624,57 @@ module.exports = React.createClass({
 
     // once dynamic content in the events load, make the scrollPanel check the
     // scroll offsets.
-    _onWidgetLoad: function() {
-        const scrollPanel = this.refs.scrollPanel;
-        if (scrollPanel) {
-            scrollPanel.forceUpdate();
-        }
-    },
-
-    _scrollDownIfAtBottom: function() {
+    _onHeightChanged: function() {
         const scrollPanel = this.refs.scrollPanel;
         if (scrollPanel) {
             scrollPanel.checkScroll();
         }
     },
 
-    onResize: function() {
-        dis.dispatch({ action: 'timeline_resize' }, true);
+    _onTypingShown: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        // this will make the timeline grow, so checkScroll
+        scrollPanel.checkScroll();
+        if (scrollPanel && scrollPanel.getScrollState().stuckAtBottom) {
+            scrollPanel.preventShrinking();
+        }
+    },
+
+    _onTypingHidden: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            // as hiding the typing notifications doesn't
+            // update the scrollPanel, we tell it to apply
+            // the shrinking prevention once the typing notifs are hidden
+            scrollPanel.updatePreventShrinking();
+            // order is important here as checkScroll will scroll down to
+            // reveal added padding to balance the notifs disappearing.
+            scrollPanel.checkScroll();
+        }
+    },
+
+    updateTimelineMinHeight: function() {
+        const scrollPanel = this.refs.scrollPanel;
+
+        if (scrollPanel) {
+            const isAtBottom = scrollPanel.isAtBottom();
+            const whoIsTyping = this.refs.whoIsTyping;
+            const isTypingVisible = whoIsTyping && whoIsTyping.isVisible();
+            // when messages get added to the timeline,
+            // but somebody else is still typing,
+            // update the min-height, so once the last
+            // person stops typing, no jumping occurs
+            if (isAtBottom && isTypingVisible) {
+                scrollPanel.preventShrinking();
+            }
+        }
+    },
+
+    onTimelineReset: function() {
+        const scrollPanel = this.refs.scrollPanel;
+        if (scrollPanel) {
+            scrollPanel.clearPreventShrinking();
+        }
     },
 
     render: function() {
@@ -666,7 +701,12 @@ module.exports = React.createClass({
 
         let whoIsTyping;
         if (this.props.room) {
-            whoIsTyping = (<WhoIsTypingTile room={this.props.room} onVisible={this._scrollDownIfAtBottom} />);
+            whoIsTyping = (<WhoIsTypingTile
+                room={this.props.room}
+                onShown={this._onTypingShown}
+                onHidden={this._onTypingHidden}
+                ref="whoIsTyping" />
+            );
         }
 
         return (
@@ -676,7 +716,8 @@ module.exports = React.createClass({
                     onFillRequest={this.props.onFillRequest}
                     onUnfillRequest={this.props.onUnfillRequest}
                     style={style}
-                    stickyBottom={this.props.stickyBottom}>
+                    stickyBottom={this.props.stickyBottom}
+                    resizeNotifier={this.props.resizeNotifier}>
                 { topSpinner }
                 { this._getEventTiles() }
                 { whoIsTyping }

src/components/structures/MyGroups.js

@@ -107,7 +107,7 @@ export default withMatrixClient(React.createClass({
         }
 
         return <div className="mx_MyGroups">
-            <SimpleRoomHeader title={_t("Communities")} icon="img/icons-groups.svg" />
+            <SimpleRoomHeader title={_t("Communities")} icon={require("../../../res/img/icons-groups.svg")} />
             <div className='mx_MyGroups_header'>
                 <div className="mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onCreateGroupClick}>
@@ -124,7 +124,7 @@ export default withMatrixClient(React.createClass({
                 </div>
                 {/*<div className="mx_MyGroups_joinBox mx_MyGroups_headerCard">
                     <AccessibleButton className='mx_MyGroups_headerCard_button' onClick={this._onJoinGroupClick}>
-                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                        <TintableSvg src={require("../../../res/img/icons-create-room.svg")} width="50" height="50" />
                     </AccessibleButton>
                     <div className="mx_MyGroups_headerCard_content">
                         <div className="mx_MyGroups_headerCard_header">

src/components/structures/RightPanel.js

@@ -32,6 +32,7 @@ export default class RightPanel extends React.Component {
         return {
             roomId: React.PropTypes.string, // if showing panels for a given room, this is set
             groupId: React.PropTypes.string, // if showing panels for a given group, this is set
+            user: React.PropTypes.object,
         };
     }
 
@@ -49,13 +50,14 @@ export default class RightPanel extends React.Component {
         FilePanel: 'FilePanel',
         NotificationPanel: 'NotificationPanel',
         RoomMemberInfo: 'RoomMemberInfo',
+        Room3pidMemberInfo: 'Room3pidMemberInfo',
         GroupMemberInfo: 'GroupMemberInfo',
     });
 
     constructor(props, context) {
         super(props, context);
         this.state = {
-            phase: this.props.groupId ? RightPanel.Phase.GroupMemberList : RightPanel.Phase.RoomMemberList,
+            phase: this._getPhaseFromProps(),
             isUserPrivilegedInGroup: null,
         };
         this.onAction = this.onAction.bind(this);
@@ -69,11 +71,24 @@ export default class RightPanel extends React.Component {
         }, 500);
     }
 
+    _getPhaseFromProps() {
+        if (this.props.groupId) {
+            return RightPanel.Phase.GroupMemberList;
+        } else if (this.props.user) {
+            return RightPanel.Phase.RoomMemberInfo;
+        } else {
+            return RightPanel.Phase.RoomMemberList;
+        }
+    }
+
     componentWillMount() {
         this.dispatcherRef = dis.register(this.onAction);
         const cli = this.context.matrixClient;
         cli.on("RoomState.members", this.onRoomStateMember);
         this._initGroupStore(this.props.groupId);
+        if (this.props.user) {
+            this.setState({member: this.props.user});
+        }
     }
 
     componentWillUnmount() {
@@ -141,6 +156,7 @@ export default class RightPanel extends React.Component {
                 groupRoomId: payload.groupRoomId,
                 groupId: payload.groupId,
                 member: payload.member,
+                event: payload.event,
             });
         }
     }
@@ -148,6 +164,7 @@ export default class RightPanel extends React.Component {
     render() {
         const MemberList = sdk.getComponent('rooms.MemberList');
         const MemberInfo = sdk.getComponent('rooms.MemberInfo');
+        const ThirdPartyMemberInfo = sdk.getComponent('rooms.ThirdPartyMemberInfo');
         const NotificationPanel = sdk.getComponent('structures.NotificationPanel');
         const FilePanel = sdk.getComponent('structures.FilePanel');
 
@@ -165,7 +182,9 @@ export default class RightPanel extends React.Component {
         } else if (this.state.phase === RightPanel.Phase.GroupRoomList) {
             panel = <GroupRoomList groupId={this.props.groupId} key={this.props.groupId} />;
         } else if (this.state.phase === RightPanel.Phase.RoomMemberInfo) {
-            panel = <MemberInfo roomId={this.props.roomId} member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+            panel = <MemberInfo member={this.state.member} key={this.props.roomId || this.state.member.userId} />;
+        } else if (this.state.phase === RightPanel.Phase.Room3pidMemberInfo) {
+            panel = <ThirdPartyMemberInfo event={this.state.event} key={this.props.roomId} />;
         } else if (this.state.phase === RightPanel.Phase.GroupMemberInfo) {
             panel = <GroupMemberInfo
                 groupMember={this.state.member}
@@ -179,7 +198,7 @@ export default class RightPanel extends React.Component {
         } else if (this.state.phase === RightPanel.Phase.NotificationPanel) {
             panel = <NotificationPanel />;
         } else if (this.state.phase === RightPanel.Phase.FilePanel) {
-            panel = <FilePanel roomId={this.props.roomId} />;
+            panel = <FilePanel roomId={this.props.roomId} resizeNotifier={this.props.resizeNotifier} />;
         }
 
         const classes = classNames("mx_RightPanel", "mx_fadable", {

src/components/structures/RoomDirectory.js

@@ -24,23 +24,25 @@ const Modal = require('../../Modal');
 const sdk = require('../../index');
 const dis = require('../../dispatcher');
 
-const linkify = require('linkifyjs');
-const linkifyString = require('linkifyjs/string');
-const linkifyMatrix = require('../../linkify-matrix');
-const sanitizeHtml = require('sanitize-html');
+import { linkifyAndSanitizeHtml } from '../../HtmlUtils';
 import Promise from 'bluebird';
-
 import { _t } from '../../languageHandler';
+import { instanceForInstanceId, protocolNameForInstanceId } from '../../utils/DirectoryUtils';
+import Analytics from '../../Analytics';
 
-import {instanceForInstanceId, protocolNameForInstanceId} from '../../utils/DirectoryUtils';
+const MAX_NAME_LENGTH = 80;
+const MAX_TOPIC_LENGTH = 160;
 
-linkifyMatrix(linkify);
+function track(action) {
+    Analytics.trackEvent('RoomDirectory', action);
+}
 
 module.exports = React.createClass({
     displayName: 'RoomDirectory',
 
     propTypes: {
         config: React.PropTypes.object,
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -54,6 +56,7 @@ module.exports = React.createClass({
             publicRooms: [],
             loading: true,
             protocolsLoading: true,
+            error: null,
             instanceId: null,
             includeAll: false,
             roomServer: null,
@@ -61,6 +64,16 @@ module.exports = React.createClass({
         };
     },
 
+    childContextTypes: {
+        matrixClient: React.PropTypes.object,
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+        };
+    },
+
     componentWillMount: function() {
         this._unmounted = false;
         this.nextBatch = null;
@@ -69,6 +82,11 @@ module.exports = React.createClass({
         this.protocols = null;
 
         this.setState({protocolsLoading: true});
+        if (!MatrixClientPeg.get()) {
+            // We may not have a client yet when invoked from welcome page
+            this.setState({protocolsLoading: false});
+            return;
+        }
         MatrixClientPeg.get().getThirdpartyProtocols().done((response) => {
             this.protocols = response;
             this.setState({protocolsLoading: false});
@@ -81,10 +99,12 @@ module.exports = React.createClass({
                 // thing you see when loading the client!
                 return;
             }
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to get protocol list from Home Server', '', ErrorDialog, {
-                title: _t('Failed to get protocol list from Home Server'),
-                description: _t('The Home Server may be too old to support third party networks'),
+            track('Failed to get protocol list from homeserver');
+            this.setState({
+                error: _t(
+                    'Riot failed to get the protocol list from the homeserver. ' +
+                    'The homeserver may be too old to support third party networks.',
+                ),
             });
         });
 
@@ -173,12 +193,14 @@ module.exports = React.createClass({
                 return;
             }
 
-            this.setState({ loading: false });
             console.error("Failed to get publicRooms: %s", JSON.stringify(err));
-            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createTrackedDialog('Failed to get public room list', '', ErrorDialog, {
-                title: _t('Failed to get public room list'),
-                description: ((err && err.message) ? err.message : _t('The server may be unavailable or overloaded')),
+            track('Failed to get public room list');
+            this.setState({
+                loading: false,
+                error:
+                    `${_t('Riot failed to get the public room list.')} ` +
+                    `${(err && err.message) ? err.message : _t('The homeserver may be unavailable or overloaded.')}`
+                ,
             });
         });
     },
@@ -298,6 +320,11 @@ module.exports = React.createClass({
         }
     },
 
+    onCreateRoomClicked: function() {
+        this.props.onFinished();
+        dis.dispatch({action: 'view_create_room'});
+    },
+
     onJoinClick: function(alias) {
         // If we don't have a particular instance id selected, just show that rooms alias
         if (!this.state.instanceId) {
@@ -345,6 +372,7 @@ module.exports = React.createClass({
     },
 
     showRoom: function(room, room_alias) {
+        this.props.onFinished();
         const payload = {action: 'view_room'};
         if (room) {
             // Don't let the user view a room they won't be able to either
@@ -390,7 +418,6 @@ module.exports = React.createClass({
         const self = this;
         let guestRead; let guestJoin; let perms;
         for (let i = 0; i < rooms.length; i++) {
-            const name = rooms[i].name || get_display_alias_for_room(rooms[i]) || _t('Unnamed room');
             guestRead = null;
             guestJoin = null;
 
@@ -410,8 +437,16 @@ module.exports = React.createClass({
                 perms = <div className="mx_RoomDirectory_perms">{guestRead}{guestJoin}</div>;
             }
 
+            let name = rooms[i].name || get_display_alias_for_room(rooms[i]) || _t('Unnamed room');
+            if (name.length > MAX_NAME_LENGTH) {
+                name = `${name.substring(0, MAX_NAME_LENGTH)}...`;
+            }
+
             let topic = rooms[i].topic || '';
-            topic = linkifyString(sanitizeHtml(topic));
+            if (topic.length > MAX_TOPIC_LENGTH) {
+                topic = `${topic.substring(0, MAX_TOPIC_LENGTH)}...`;
+            }
+            topic = linkifyAndSanitizeHtml(topic);
 
             rows.push(
                 <tr key={ rooms[i].room_id }
@@ -484,23 +519,15 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
         const Loader = sdk.getComponent("elements.Spinner");
-
-        if (this.state.protocolsLoading) {
-            return (
-                <div className="mx_RoomDirectory">
-                    <SimpleRoomHeader title={ _t('Directory') } />
-                    <Loader />
-                </div>
-            );
-        }
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         let content;
-        if (this.state.loading) {
-            content = <div className="mx_RoomDirectory">
-                <Loader />
-            </div>;
+        if (this.state.error) {
+            content = this.state.error;
+        } else if (this.state.protocolsLoading || this.state.loading) {
+            content = <Loader />;
         } else {
             const rows = this.getRows();
             // we still show the scrollpanel, at least for now, because
@@ -522,58 +549,75 @@ module.exports = React.createClass({
                 onFillRequest={ this.onFillRequest }
                 stickyBottom={false}
                 startAtBottom={false}
-                onResize={function() {}}
             >
                 { scrollpanel_content }
             </ScrollPanel>;
         }
 
-        const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
-        let instance_expected_field_type;
-        if (
-            protocolName &&
-            this.protocols &&
-            this.protocols[protocolName] &&
-            this.protocols[protocolName].location_fields.length > 0 &&
-            this.protocols[protocolName].field_types
-        ) {
-            const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
-            instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
-        }
+        let listHeader;
+        if (!this.state.protocolsLoading) {
+            const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
+            const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
 
-
-        let placeholder = _t('Search for a room');
-        if (!this.state.instanceId) {
-            placeholder = _t('#example') + ':' + this.state.roomServer;
-        } else if (instance_expected_field_type) {
-            placeholder = instance_expected_field_type.placeholder;
-        }
-
-        let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
-        if (protocolName) {
-            const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
-            if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
-                showJoinButton = false;
+            const protocolName = protocolNameForInstanceId(this.protocols, this.state.instanceId);
+            let instance_expected_field_type;
+            if (
+                protocolName &&
+                this.protocols &&
+                this.protocols[protocolName] &&
+                this.protocols[protocolName].location_fields.length > 0 &&
+                this.protocols[protocolName].field_types
+            ) {
+                const last_field = this.protocols[protocolName].location_fields.slice(-1)[0];
+                instance_expected_field_type = this.protocols[protocolName].field_types[last_field];
             }
+
+
+            let placeholder = _t('Search for a room');
+            if (!this.state.instanceId) {
+                placeholder = _t('Search for a room like #example') + ':' + this.state.roomServer;
+            } else if (instance_expected_field_type) {
+                placeholder = instance_expected_field_type.placeholder;
+            }
+
+            let showJoinButton = this._stringLooksLikeId(this.state.filterString, instance_expected_field_type);
+            if (protocolName) {
+                const instance = instanceForInstanceId(this.protocols, this.state.instanceId);
+                if (this._getFieldsForThirdPartyLocation(this.state.filterString, this.protocols[protocolName], instance) === null) {
+                    showJoinButton = false;
+                }
+            }
+
+            listHeader = <div className="mx_RoomDirectory_listheader">
+                <DirectorySearchBox
+                    className="mx_RoomDirectory_searchbox"
+                    onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
+                    placeholder={placeholder} showJoinButton={showJoinButton}
+                />
+                <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
+            </div>;
         }
 
-        const NetworkDropdown = sdk.getComponent('directory.NetworkDropdown');
-        const DirectorySearchBox = sdk.getComponent('elements.DirectorySearchBox');
+        const createRoomButton = (<AccessibleButton
+            onClick={this.onCreateRoomClicked}
+            className="mx_RoomDirectory_createRoom"
+        >{_t("Create new room")}</AccessibleButton>);
+
         return (
-            <div className="mx_RoomDirectory">
-                <SimpleRoomHeader title={ _t('Directory') } icon="img/icons-directory.svg" />
-                <div className="mx_RoomDirectory_list">
-                    <div className="mx_RoomDirectory_listheader">
-                        <DirectorySearchBox
-                            className="mx_RoomDirectory_searchbox"
-                            onChange={this.onFilterChange} onClear={this.onFilterClear} onJoinClick={this.onJoinClick}
-                            placeholder={placeholder} showJoinButton={showJoinButton}
-                        />
-                        <NetworkDropdown config={this.props.config} protocols={this.protocols} onOptionChange={this.onOptionChange} />
+            <BaseDialog
+                className={'mx_RoomDirectory_dialog'}
+                hasCancel={true}
+                onFinished={this.props.onFinished}
+                headerButton={createRoomButton}
+                title={_t("Room directory")}
+            >
+                <div className="mx_RoomDirectory">
+                    <div className="mx_RoomDirectory_list">
+                        {listHeader}
+                        {content}
                     </div>
-                    {content}
                 </div>
-            </div>
+            </BaseDialog>
         );
     },
 });

src/components/structures/RoomStatusBar.js

@@ -45,14 +45,6 @@ module.exports = React.createClass({
     propTypes: {
         // the room this statusbar is representing.
         room: PropTypes.object.isRequired,
-
-        // the number of messages which have arrived since we've been scrolled up
-        numUnreadMessages: PropTypes.number,
-
-        // this is true if we are fully scrolled-down, and are looking at
-        // the end of the live timeline.
-        atEndOfLiveTimeline: PropTypes.bool,
-
         // This is true when the user is alone in the room, but has also sent a message.
         // Used to suggest to the user to invite someone
         sentMessageAndIsAlone: PropTypes.bool,
@@ -82,9 +74,6 @@ module.exports = React.createClass({
         // 'you are alone' bar
         onStopWarningClick: PropTypes.func,
 
-        // callback for when the user clicks on the 'scroll to bottom' button
-        onScrollToBottomClick: PropTypes.func,
-
         // callback for when we do something that changes the size of the
         // status bar. This is used to trigger a re-layout in the parent
         // component.
@@ -180,8 +169,6 @@ module.exports = React.createClass({
     // indicate other sizes.
     _getSize: function() {
         if (this._shouldShowConnectionError() ||
-            this.props.numUnreadMessages ||
-            !this.props.atEndOfLiveTimeline ||
             this.props.hasActiveCall ||
             this.props.sentMessageAndIsAlone
         ) {
@@ -194,32 +181,10 @@ module.exports = React.createClass({
 
     // return suitable content for the image on the left of the status bar.
     _getIndicator: function() {
-        if (this.props.numUnreadMessages) {
-            return (
-                <div className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/newmessages.svg" width="24" height="24"
-                        alt="" />
-                </div>
-            );
-        }
-
-            const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
-        if (!this.props.atEndOfLiveTimeline) {
-            return (
-                <AccessibleButton className="mx_RoomStatusBar_scrollDownIndicator"
-                        onClick={this.props.onScrollToBottomClick}>
-                    <img src="img/scrolldown.svg" width="24" height="24"
-                        alt={_t("Scroll to bottom of page")}
-                        title={_t("Scroll to bottom of page")} />
-                </AccessibleButton>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             const TintableSvg = sdk.getComponent("elements.TintableSvg");
             return (
-                <TintableSvg src="img/sound-indicator.svg" width="23" height="20" />
+                <TintableSvg src={require("../../../res/img/sound-indicator.svg")} width="23" height="20" />
             );
         }
 
@@ -231,9 +196,7 @@ module.exports = React.createClass({
     },
 
     _shouldShowConnectionError: function() {
-        // no conn bar trumps unread count since you can't get unread messages
-        // without a connection! (technically may already have some but meh)
-        // It also trumps the "some not sent" msg since you can't resend without
+        // no conn bar trumps the "some not sent" msg since you can't resend without
         // a connection!
         // There's one situation in which we don't show this 'no connection' bar, and that's
         // if it's a resource limit exceeded error: those are shown in the top bar.
@@ -327,7 +290,7 @@ module.exports = React.createClass({
         }
 
         return <div className="mx_RoomStatusBar_connectionLostBar">
-            <img src="img/warning.svg" width="24" height="23" title={_t("Warning")} alt="" />
+            <img src={require("../../../res/img/e2e/warning.svg")} width="24" height="24" title={_t("Warning")} alt="" />
             <div>
                 <div className="mx_RoomStatusBar_connectionLostBar_title">
                     { title }
@@ -346,7 +309,7 @@ module.exports = React.createClass({
         if (this._shouldShowConnectionError()) {
             return (
                 <div className="mx_RoomStatusBar_connectionLostBar">
-                    <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ " />
+                    <img src={require("../../../res/img/e2e/warning.svg")} width="24" height="24" title="/!\ " alt="/!\ " />
                     <div>
                         <div className="mx_RoomStatusBar_connectionLostBar_title">
                             { _t('Connectivity to the server has been lost.') }
@@ -363,20 +326,6 @@ module.exports = React.createClass({
             return this._getUnsentMessageContent();
         }
 
-        // unread count trumps who is typing since the unread count is only
-        // set when you've scrolled up
-        if (this.props.numUnreadMessages) {
-            // MUST use var name "count" for pluralization to kick in
-            const unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
-
-            return (
-                <div className="mx_RoomStatusBar_unreadMessagesBar"
-                        onClick={this.props.onScrollToBottomClick}>
-                    { unreadMsgs }
-                </div>
-            );
-        }
-
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">

src/components/structures/RoomSubList.js

@@ -27,7 +27,9 @@ import IndicatorScrollbar from './IndicatorScrollbar';
 import { KeyCode } from '../../Keyboard';
 import { Group } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
-
+import RoomTile from "../views/rooms/RoomTile";
+import LazyRenderList from "../views/elements/LazyRenderList";
+import MatrixClientPeg from "../../MatrixClientPeg";
 
 // turn this on for drop & drag console debugging galore
 const debug = false;
@@ -60,6 +62,9 @@ const RoomSubList = React.createClass({
     getInitialState: function() {
         return {
             hidden: this.props.startAsHidden || false,
+            // some values to get LazyRenderList starting
+            scrollerHeight: 800,
+            scrollTop: 0,
         };
     },
 
@@ -84,7 +89,7 @@ const RoomSubList = React.createClass({
     // The dataset elements are added in the RoomList _initAndPositionStickyHeaders method
     isCollapsableOnClick: function() {
         const stuck = this.refs.header.dataset.stuck;
-        if (this.state.hidden || stuck === undefined || stuck === "none") {
+        if (!this.props.forceExpand && (this.state.hidden || stuck === undefined || stuck === "none")) {
             return true;
         } else {
             return false;
@@ -127,46 +132,6 @@ const RoomSubList = React.createClass({
         });
     },
 
-    _shouldShowNotifBadge: function(roomNotifState) {
-        const showBadgeInStates = [RoomNotifs.ALL_MESSAGES, RoomNotifs.ALL_MESSAGES_LOUD];
-        return showBadgeInStates.indexOf(roomNotifState) > -1;
-    },
-
-    _shouldShowMentionBadge: function(roomNotifState) {
-        return roomNotifState !== RoomNotifs.MUTE;
-    },
-
-    /**
-     * Total up all the notification counts from the rooms
-     *
-     * @returns {Array} The array takes the form [total, highlight] where highlight is a bool
-     */
-    roomNotificationCount: function() {
-        const self = this;
-
-        if (this.props.isInvite) {
-            return [0, true];
-        }
-
-        return this.props.list.reduce(function(result, room, index) {
-            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-            const highlight = room.getUnreadNotificationCount('highlight') > 0;
-            const notificationCount = room.getUnreadNotificationCount();
-
-            const notifBadges = notificationCount > 0 && self._shouldShowNotifBadge(roomNotifState);
-            const mentionBadges = highlight && self._shouldShowMentionBadge(roomNotifState);
-            const badges = notifBadges || mentionBadges;
-
-            if (badges) {
-                result[0] += notificationCount;
-                if (highlight) {
-                    result[1] = true;
-                }
-            }
-            return result;
-        }, [0, false]);
-    },
-
     _updateSubListCount: function() {
         // Force an update by setting the state to the current state
         // Doing it this way rather than using forceUpdate(), so that the shouldComponentUpdate()
@@ -174,45 +139,55 @@ const RoomSubList = React.createClass({
         this.setState(this.state);
     },
 
-    makeRoomTiles: function() {
-        const RoomTile = sdk.getComponent("rooms.RoomTile");
-        return this.props.list.map((room, index) => {
-            return <RoomTile
-                room={room}
-                roomSubList={this}
-                tagName={this.props.tagName}
-                key={room.roomId}
-                collapsed={this.props.collapsed || false}
-                unread={Unread.doesRoomHaveUnreadMessages(room)}
-                highlight={room.getUnreadNotificationCount('highlight') > 0 || this.props.isInvite}
-                isInvite={this.props.isInvite}
-                refreshSubList={this._updateSubListCount}
-                incomingCall={null}
-                onClick={this.onRoomTileClick}
-            />;
-        });
+    getUnreadNotificationCount: function(room, type=null) {
+        let notificationCount = room.getUnreadNotificationCount(type);
+
+        // Check notification counts in the old room just in case there's some lost
+        // there. We only go one level down to avoid performance issues, and theory
+        // is that 1st generation rooms will have already been read by the 3rd generation.
+        const createEvent = room.currentState.getStateEvents("m.room.create", "");
+        if (createEvent && createEvent.getContent()['predecessor']) {
+            const oldRoomId = createEvent.getContent()['predecessor']['room_id'];
+            const oldRoom = MatrixClientPeg.get().getRoom(oldRoomId);
+            if (oldRoom) {
+                // We only ever care if there's highlights in the old room. No point in
+                // notifying the user for unread messages because they would have extreme
+                // difficulty changing their notification preferences away from "All Messages"
+                // and "Noisy".
+                notificationCount += oldRoom.getUnreadNotificationCount("highlight");
+            }
+        }
+
+        return notificationCount;
+    },
+
+    makeRoomTile: function(room) {
+        return <RoomTile
+            room={room}
+            roomSubList={this}
+            tagName={this.props.tagName}
+            key={room.roomId}
+            collapsed={this.props.collapsed || false}
+            unread={Unread.doesRoomHaveUnreadMessages(room)}
+            highlight={this.props.isInvite || this.getUnreadNotificationCount(room, 'highlight') > 0}
+            notificationCount={this.getUnreadNotificationCount(room)}
+            isInvite={this.props.isInvite}
+            refreshSubList={this._updateSubListCount}
+            incomingCall={null}
+            onClick={this.onRoomTileClick}
+        />;
     },
 
     _onNotifBadgeClick: function(e) {
         // prevent the roomsublist collapsing
         e.preventDefault();
         e.stopPropagation();
-        // find first room which has notifications and switch to it
-        for (const room of this.props.list) {
-            const roomNotifState = RoomNotifs.getRoomNotifsState(room.roomId);
-            const highlight = room.getUnreadNotificationCount('highlight') > 0;
-            const notificationCount = room.getUnreadNotificationCount();
-
-            const notifBadges = notificationCount > 0 && this._shouldShowNotifBadge(roomNotifState);
-            const mentionBadges = highlight && this._shouldShowMentionBadge(roomNotifState);
-
-            if (notifBadges || mentionBadges) {
-                dis.dispatch({
-                    action: 'view_room',
-                    room_id: room.roomId,
-                });
-                return;
-            }
+        const room = this.props.list.find(room => RoomNotifs.getRoomHasBadge(room));
+        if (room) {
+            dis.dispatch({
+                action: 'view_room',
+                room_id: room.roomId,
+            });
         }
     },
 
@@ -238,11 +213,13 @@ const RoomSubList = React.createClass({
         }
     },
 
-    _getHeaderJsx: function() {
+    _getHeaderJsx: function(isCollapsed) {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-        const subListNotifications = this.roomNotificationCount();
-        const subListNotifCount = subListNotifications[0];
-        const subListNotifHighlight = subListNotifications[1];
+        const subListNotifications = !this.props.isInvite ?
+            RoomNotifs.aggregateNotificationCount(this.props.list) :
+            {count: 0, highlight: true};
+        const subListNotifCount = subListNotifications.count;
+        const subListNotifHighlight = subListNotifications.highlight;
 
         let badge;
         if (!this.props.collapsed) {
@@ -254,9 +231,9 @@ const RoomSubList = React.createClass({
                 badge = <div className={badgeClasses} onClick={this._onNotifBadgeClick}>
                     { FormattingUtils.formatCount(subListNotifCount) }
                 </div>;
-            } else if (this.props.isInvite) {
+            } else if (this.props.isInvite && this.props.list.length) {
                 // no notifications but highlight anyway because this is an invite badge
-                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>!</div>;
+                badge = <div className={badgeClasses} onClick={this._onInviteBadgeClick}>{this.props.list.length}</div>;
             }
         }
 
@@ -287,8 +264,8 @@ const RoomSubList = React.createClass({
         if (len) {
             const chevronClasses = classNames({
                 'mx_RoomSubList_chevron': true,
-                'mx_RoomSubList_chevronRight': this.state.hidden,
-                'mx_RoomSubList_chevronDown': !this.state.hidden,
+                'mx_RoomSubList_chevronRight': isCollapsed,
+                'mx_RoomSubList_chevronDown': !isCollapsed,
             });
             chevron = (<div className={chevronClasses}></div>);
         }
@@ -313,24 +290,59 @@ const RoomSubList = React.createClass({
         }
     },
 
+    setHeight: function(height) {
+        if (this.refs.subList) {
+            this.refs.subList.style.height = `${height}px`;
+        }
+        this._updateLazyRenderHeight(height);
+    },
+
+    _updateLazyRenderHeight: function(height) {
+        this.setState({scrollerHeight: height});
+    },
+
+    _onScroll: function() {
+        this.setState({scrollTop: this.refs.scroller.getScrollTop()});
+    },
+
+    _canUseLazyListRendering() {
+        // for now disable lazy rendering as they are already rendered tiles
+        // not rooms like props.list we pass to LazyRenderList
+        return !this.props.extraTiles || !this.props.extraTiles.length;
+    },
+
     render: function() {
         const len = this.props.list.length + this.props.extraTiles.length;
+        const isCollapsed = this.state.hidden && !this.props.forceExpand;
         if (len) {
             const subListClasses = classNames({
                 "mx_RoomSubList": true,
-                "mx_RoomSubList_hidden": this.state.hidden,
-                "mx_RoomSubList_nonEmpty": len && !this.state.hidden,
+                "mx_RoomSubList_hidden": isCollapsed,
+                "mx_RoomSubList_nonEmpty": len && !isCollapsed,
             });
-            if (this.state.hidden) {
-                return <div className={subListClasses}>
-                    {this._getHeaderJsx()}
+
+            if (isCollapsed) {
+                return <div ref="subList" className={subListClasses}>
+                    {this._getHeaderJsx(isCollapsed)}
+                </div>;
+            } else if (this._canUseLazyListRendering()) {
+                return <div ref="subList" className={subListClasses}>
+                    {this._getHeaderJsx(isCollapsed)}
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
+                        <LazyRenderList
+                            scrollTop={this.state.scrollTop }
+                            height={ this.state.scrollerHeight }
+                            renderItem={ this.makeRoomTile }
+                            itemHeight={34}
+                            items={ this.props.list } />
+                    </IndicatorScrollbar>
                 </div>;
             } else {
-                const tiles = this.makeRoomTiles();
-                tiles.push(...this.props.extraTiles);
-                return <div className={subListClasses}>
-                    {this._getHeaderJsx()}
-                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll">
+                const roomTiles = this.props.list.map(r => this.makeRoomTile(r));
+                const tiles = roomTiles.concat(this.props.extraTiles);
+                return <div ref="subList" className={subListClasses}>
+                    {this._getHeaderJsx(isCollapsed)}
+                    <IndicatorScrollbar ref="scroller" className="mx_RoomSubList_scroll" onScroll={ this._onScroll }>
                         { tiles }
                     </IndicatorScrollbar>
                 </div>;
@@ -338,13 +350,13 @@ const RoomSubList = React.createClass({
         } else {
             const Loader = sdk.getComponent("elements.Spinner");
             let content;
-            if (this.props.showSpinner && !this.state.hidden) {
+            if (this.props.showSpinner && !isCollapsed) {
                 content = <Loader />;
             }
 
             return (
-                <div className="mx_RoomSubList">
-                    { this._getHeaderJsx() }
+                <div ref="subList" className="mx_RoomSubList">
+                    { this._getHeaderJsx(isCollapsed) }
                     { content }
                 </div>
             );

src/components/structures/ScrollPanel.js

@@ -15,14 +15,13 @@ limitations under the License.
 */
 
 const React = require("react");
-const ReactDOM = require("react-dom");
 import PropTypes from 'prop-types';
 import Promise from 'bluebird';
 import { KeyCode } from '../../Keyboard';
-import sdk from '../../index.js';
+import Timer from '../../utils/Timer';
+import AutoHideScrollbar from "./AutoHideScrollbar";
 
 const DEBUG_SCROLL = false;
-// var DEBUG_SCROLL = true;
 
 // The amount of extra scroll distance to allow prior to unfilling.
 // See _getExcessHeight.
@@ -30,12 +29,18 @@ const UNPAGINATION_PADDING = 6000;
 // The number of milliseconds to debounce calls to onUnfillRequest, to prevent
 // many scroll events causing many unfilling requests.
 const UNFILL_REQUEST_DEBOUNCE_MS = 200;
+// _updateHeight makes the height a ceiled multiple of this so we
+// don't have to update the height too often. It also allows the user
+// to scroll past the pagination spinner a bit so they don't feel blocked so
+// much while the content loads.
+const PAGE_SIZE = 400;
 
+let debuglog;
 if (DEBUG_SCROLL) {
     // using bind means that we get to keep useful line numbers in the console
-    var debuglog = console.log.bind(console);
+    debuglog = console.log.bind(console, "ScrollPanel debuglog:");
 } else {
-    var debuglog = function() {};
+    debuglog = function() {};
 }
 
 /* This component implements an intelligent scrolling list.
@@ -78,6 +83,7 @@ if (DEBUG_SCROLL) {
  * scroll down further. If stickyBottom is disabled, we just save the scroll
  * offset as normal.
  */
+
 module.exports = React.createClass({
     displayName: 'ScrollPanel',
 
@@ -128,11 +134,6 @@ module.exports = React.createClass({
          */
         onScroll: PropTypes.func,
 
-        /* onResize: a callback which is called whenever the Gemini scroll
-         * panel is resized
-         */
-        onResize: PropTypes.func,
-
         /* className: classnames to add to the top-level div
          */
         className: PropTypes.string,
@@ -140,6 +141,9 @@ module.exports = React.createClass({
         /* style: styles to add to the top-level div
          */
         style: PropTypes.object,
+        /* resizeNotifier: ResizeNotifier to know when middle column has changed size
+         */
+        resizeNotifier: PropTypes.object,
     },
 
     getDefaultProps: function() {
@@ -149,12 +153,18 @@ module.exports = React.createClass({
             onFillRequest: function(backwards) { return Promise.resolve(false); },
             onUnfillRequest: function(backwards, scrollToken) {},
             onScroll: function() {},
-            onResize: function() {},
         };
     },
 
     componentWillMount: function() {
+        this._fillRequestWhileRunning = false;
+        this._isFilling = false;
         this._pendingFillRequests = {b: null, f: null};
+
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.on("middlePanelResized", this.onResize);
+        }
+
         this.resetScrollState();
     },
 
@@ -169,6 +179,7 @@ module.exports = React.createClass({
         //
         // This will also re-check the fill state, in case the paginate was inadequate
         this.checkScroll();
+        this.updatePreventShrinking();
     },
 
     componentWillUnmount: function() {
@@ -177,54 +188,27 @@ module.exports = React.createClass({
         //
         // (We could use isMounted(), but facebook have deprecated that.)
         this.unmounted = true;
+
+        if (this.props.resizeNotifier) {
+            this.props.resizeNotifier.removeListener("middlePanelResized", this.onResize);
+        }
     },
 
     onScroll: function(ev) {
-        const sn = this._getScrollNode();
-        debuglog("Scroll event: offset now:", sn.scrollTop,
-                 "_lastSetScroll:", this._lastSetScroll);
-
-        // Sometimes we see attempts to write to scrollTop essentially being
-        // ignored. (Or rather, it is successfully written, but on the next
-        // scroll event, it's been reset again).
-        //
-        // This was observed on Chrome 47, when scrolling using the trackpad in OS
-        // X Yosemite.  Can't reproduce on El Capitan. Our theory is that this is
-        // due to Chrome not being able to cope with the scroll offset being reset
-        // while a two-finger drag is in progress.
-        //
-        // By way of a workaround, we detect this situation and just keep
-        // resetting scrollTop until we see the scroll node have the right
-        // value.
-        if (this._lastSetScroll !== undefined && sn.scrollTop < this._lastSetScroll-200) {
-            console.log("Working around vector-im/vector-web#528");
-            this._restoreSavedScrollState();
-            return;
-        }
-
-        // If there weren't enough children to fill the viewport, the scroll we
-        // got might be different to the scroll we wanted; we don't want to
-        // forget what we wanted, so don't overwrite the saved state unless
-        // this appears to be a user-initiated scroll.
-        if (sn.scrollTop != this._lastSetScroll) {
-            this._saveScrollState();
-        } else {
-            debuglog("Ignoring scroll echo");
-
-            // only ignore the echo once, otherwise we'll get confused when the
-            // user scrolls away from, and back to, the autoscroll point.
-            this._lastSetScroll = undefined;
-        }
-
+        debuglog("onScroll", this._getScrollNode().scrollTop);
+        this._scrollTimeout.restart();
+        this._saveScrollState();
+        this.updatePreventShrinking();
         this.props.onScroll(ev);
-
         this.checkFillState();
     },
 
     onResize: function() {
-        this.props.onResize();
         this.checkScroll();
-        if (this._gemScroll) this._gemScroll.forceUpdate();
+        // update preventShrinkingState if present
+        if (this.preventShrinkingState) {
+            this.preventShrinking();
+        }
     },
 
     // after an update to the contents of the panel, check that the scroll is
@@ -237,18 +221,16 @@ module.exports = React.createClass({
     // return true if the content is fully scrolled down right now; else false.
     //
     // note that this is independent of the 'stuckAtBottom' state - it is simply
-    // about whether the the content is scrolled down right now, irrespective of
+    // about whether the content is scrolled down right now, irrespective of
     // whether it will stay that way when the children update.
     isAtBottom: function() {
         const sn = this._getScrollNode();
+        // fractional values (both too big and too small)
+        // for scrollTop happen on certain browsers/platforms
+        // when scrolled all the way down. E.g. Chrome 72 on debian.
+        // so check difference <= 1;
+        return Math.abs(sn.scrollHeight - (sn.scrollTop + sn.clientHeight)) <= 1;
 
-        // there seems to be some bug with flexbox/gemini/chrome/richvdh's
-        // understanding of the box model, wherein the scrollNode ends up 2
-        // pixels higher than the available space, even when there are less
-        // than a screenful of messages. + 3 is a fudge factor to pretend
-        // that we're at the bottom when we're still a few pixels off.
-
-        return sn.scrollHeight - Math.ceil(sn.scrollTop) <= sn.clientHeight + 3;
     },
 
     // returns the vertical height in the given direction that can be removed from
@@ -284,19 +266,25 @@ module.exports = React.createClass({
     //   `---------'                                       -
     _getExcessHeight: function(backwards) {
         const sn = this._getScrollNode();
+        const contentHeight = this._getMessagesHeight();
+        const listHeight = this._getListHeight();
+        const clippedHeight = contentHeight - listHeight;
+        const unclippedScrollTop = sn.scrollTop + clippedHeight;
+
         if (backwards) {
-            return sn.scrollTop - sn.clientHeight - UNPAGINATION_PADDING;
+            return unclippedScrollTop - sn.clientHeight - UNPAGINATION_PADDING;
         } else {
-            return sn.scrollHeight - (sn.scrollTop + 2*sn.clientHeight) - UNPAGINATION_PADDING;
+            return contentHeight - (unclippedScrollTop + 2*sn.clientHeight) - UNPAGINATION_PADDING;
         }
     },
 
     // check the scroll state and send out backfill requests if necessary.
-    checkFillState: function() {
+    checkFillState: async function(depth=0) {
         if (this.unmounted) {
             return;
         }
 
+        const isFirstCall = depth === 0;
         const sn = this._getScrollNode();
 
         // if there is less than a screenful of messages above or below the
@@ -323,13 +311,53 @@ module.exports = React.createClass({
         //   `---------'                            -
         //
 
-        if (sn.scrollTop < sn.clientHeight) {
-            // need to back-fill
-            this._maybeFill(true);
+        // as filling is async and recursive,
+        // don't allow more than 1 chain of calls concurrently
+        // do make a note when a new request comes in while already running one,
+        // so we can trigger a new chain of calls once done.
+        if (isFirstCall) {
+            if (this._isFilling) {
+                debuglog("_isFilling: not entering while request is ongoing, marking for a subsequent request");
+                this._fillRequestWhileRunning = true;
+                return;
+            }
+            debuglog("_isFilling: setting");
+            this._isFilling = true;
         }
-        if (sn.scrollTop > sn.scrollHeight - sn.clientHeight * 2) {
+
+        const itemlist = this.refs.itemlist;
+        const firstTile = itemlist && itemlist.firstElementChild;
+        const contentTop = firstTile && firstTile.offsetTop;
+        const fillPromises = [];
+
+        // if scrollTop gets to 1 screen from the top of the first tile,
+        // try backward filling
+        if (!firstTile || (sn.scrollTop - contentTop) < sn.clientHeight) {
+            // need to back-fill
+            fillPromises.push(this._maybeFill(depth, true));
+        }
+        // if scrollTop gets to 2 screens from the end (so 1 screen below viewport),
+        // try forward filling
+        if ((sn.scrollHeight - sn.scrollTop) < sn.clientHeight * 2) {
             // need to forward-fill
-            this._maybeFill(false);
+            fillPromises.push(this._maybeFill(depth, false));
+        }
+
+        if (fillPromises.length) {
+            try {
+                await Promise.all(fillPromises);
+            } catch (err) {
+                console.error(err);
+            }
+        }
+        if (isFirstCall) {
+            debuglog("_isFilling: clearing");
+            this._isFilling = false;
+        }
+
+        if (this._fillRequestWhileRunning) {
+            this._fillRequestWhileRunning = false;
+            this.checkFillState();
         }
     },
 
@@ -339,6 +367,9 @@ module.exports = React.createClass({
         if (excessHeight <= 0) {
             return;
         }
+
+        const origExcessHeight = excessHeight;
+
         const tiles = this.refs.itemlist.children;
 
         // The scroll token of the first/last tile to be unpaginated
@@ -350,8 +381,9 @@ module.exports = React.createClass({
         // pagination.
         //
         // If backwards is true, we unpaginate (remove) tiles from the back (top).
+        let tile;
         for (let i = 0; i < tiles.length; i++) {
-            const tile = tiles[backwards ? i : tiles.length - 1 - i];
+            tile = tiles[backwards ? i : tiles.length - 1 - i];
             // Subtract height of tile as if it were unpaginated
             excessHeight -= tile.clientHeight;
             //If removing the tile would lead to future pagination, break before setting scroll token
@@ -372,26 +404,31 @@ module.exports = React.createClass({
             }
             this._unfillDebouncer = setTimeout(() => {
                 this._unfillDebouncer = null;
+                debuglog("unfilling now", backwards, origExcessHeight);
                 this.props.onUnfillRequest(backwards, markerScrollToken);
             }, UNFILL_REQUEST_DEBOUNCE_MS);
         }
     },
 
     // check if there is already a pending fill request. If not, set one off.
-    _maybeFill: function(backwards) {
+    _maybeFill: function(depth, backwards) {
         const dir = backwards ? 'b' : 'f';
         if (this._pendingFillRequests[dir]) {
-            debuglog("ScrollPanel: Already a "+dir+" fill in progress - not starting another");
+            debuglog("Already a "+dir+" fill in progress - not starting another");
             return;
         }
 
-        debuglog("ScrollPanel: starting "+dir+" fill");
+        debuglog("starting "+dir+" fill");
 
         // onFillRequest can end up calling us recursively (via onScroll
         // events) so make sure we set this before firing off the call.
         this._pendingFillRequests[dir] = true;
 
-        Promise.try(() => {
+        // wait 1ms before paginating, because otherwise
+        // this will block the scroll event handler for +700ms
+        // if messages are already cached in memory,
+        // This would cause jumping to happen on Chrome/macOS.
+        return new Promise(resolve => setTimeout(resolve, 1)).then(() => {
             return this.props.onFillRequest(backwards);
         }).finally(() => {
             this._pendingFillRequests[dir] = false;
@@ -402,14 +439,14 @@ module.exports = React.createClass({
             // Unpaginate once filling is complete
             this._checkUnfillState(!backwards);
 
-            debuglog("ScrollPanel: "+dir+" fill complete; hasMoreResults:"+hasMoreResults);
+            debuglog(""+dir+" fill complete; hasMoreResults:"+hasMoreResults);
             if (hasMoreResults) {
                 // further pagination requests have been disabled until now, so
                 // it's time to check the fill state again in case the pagination
                 // was insufficient.
-                this.checkFillState();
+                return this.checkFillState(depth + 1);
             }
-        }).done();
+        });
     },
 
     /* get the current scroll state. This returns an object with the following
@@ -422,7 +459,7 @@ module.exports = React.createClass({
      *   false, the first token in data-scroll-tokens of the child which we are
      *   tracking.
      *
-     * number pixelOffset: undefined if stuckAtBottom is true; if it is false,
+     * number bottomOffset: undefined if stuckAtBottom is true; if it is false,
      *   the number of pixels the bottom of the tracked child is above the
      *   bottom of the scroll panel.
      */
@@ -443,14 +480,20 @@ module.exports = React.createClass({
      * child list.)
      */
     resetScrollState: function() {
-        this.scrollState = {stuckAtBottom: this.props.startAtBottom};
+        this.scrollState = {
+            stuckAtBottom: this.props.startAtBottom,
+        };
+        this._bottomGrowth = 0;
+        this._pages = 0;
+        this._scrollTimeout = new Timer(100);
+        this._heightUpdateInProgress = false;
     },
 
     /**
      * jump to the top of the content.
      */
     scrollToTop: function() {
-        this._setScrollTop(0);
+        this._getScrollNode().scrollTop = 0;
         this._saveScrollState();
     },
 
@@ -462,24 +505,26 @@ module.exports = React.createClass({
         // saved is to do the scroll, then save the updated state. (Calculating
         // it ourselves is hard, and we can't rely on an onScroll callback
         // happening, since there may be no user-visible change here).
-        this._setScrollTop(Number.MAX_VALUE);
+        const sn = this._getScrollNode();
+        sn.scrollTop = sn.scrollHeight;
         this._saveScrollState();
     },
 
     /**
      * Page up/down.
      *
-     * mult: -1 to page up, +1 to page down
+     * @param {number} mult: -1 to page up, +1 to page down
      */
     scrollRelative: function(mult) {
         const scrollNode = this._getScrollNode();
         const delta = mult * scrollNode.clientHeight * 0.5;
-        this._setScrollTop(scrollNode.scrollTop + delta);
+        scrollNode.scrollTop = scrollNode.scrollTop + delta;
         this._saveScrollState();
     },
 
     /**
      * Scroll up/down in response to a scroll key
+     * @param {object} ev the keyboard event
      */
     handleScrollKey: function(ev) {
         switch (ev.keyCode) {
@@ -524,135 +569,193 @@ module.exports = React.createClass({
         pixelOffset = pixelOffset || 0;
         offsetBase = offsetBase || 0;
 
-        // convert pixelOffset so that it is based on the bottom of the
-        // container.
-        pixelOffset += this._getScrollNode().clientHeight * (1-offsetBase);
-
-        // save the desired scroll state. It's important we do this here rather
-        // than as a result of the scroll event, because (a) we might not *get*
-        // a scroll event, and (b) it might not currently be possible to set
-        // the requested scroll state (eg, because we hit the end of the
-        // timeline and need to do more pagination); we want to save the
-        // *desired* scroll state rather than what we end up achieving.
+        // set the trackedScrollToken so we can get the node through _getTrackedNode
         this.scrollState = {
             stuckAtBottom: false,
             trackedScrollToken: scrollToken,
-            pixelOffset: pixelOffset,
         };
-
-        // ... then make it so.
-        this._restoreSavedScrollState();
-    },
-
-    // set the scrollTop attribute appropriately to position the given child at the
-    // given offset in the window. A helper for _restoreSavedScrollState.
-    _scrollToToken: function(scrollToken, pixelOffset) {
-        /* find the dom node with the right scrolltoken */
-        let node;
-        const messages = this.refs.itemlist.children;
-        for (let i = messages.length-1; i >= 0; --i) {
-            const m = messages[i];
-            // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
-            // There might only be one scroll token
-            if (m.dataset.scrollTokens &&
-                m.dataset.scrollTokens.split(',').indexOf(scrollToken) !== -1) {
-                node = m;
-                break;
-            }
-        }
-
-        if (!node) {
-            debuglog("ScrollPanel: No node with scrollToken '"+scrollToken+"'");
-            return;
-        }
-
+        const trackedNode = this._getTrackedNode();
         const scrollNode = this._getScrollNode();
-        const wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
-        const boundingRect = node.getBoundingClientRect();
-        const scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
-
-        debuglog("ScrollPanel: scrolling to token '" + scrollToken + "'+" +
-                 pixelOffset + " (delta: "+scrollDelta+")");
-
-        if (scrollDelta != 0) {
-            this._setScrollTop(scrollNode.scrollTop + scrollDelta);
+        if (trackedNode) {
+            // set the scrollTop to the position we want.
+            // note though, that this might not succeed if the combination of offsetBase and pixelOffset
+            // would position the trackedNode towards the top of the viewport.
+            // This because when setting the scrollTop only 10 or so events might be loaded,
+            // not giving enough content below the trackedNode to scroll downwards
+            // enough so it ends up in the top of the viewport.
+            debuglog("scrollToken: setting scrollTop", {offsetBase, pixelOffset, offsetTop: trackedNode.offsetTop});
+            scrollNode.scrollTop = (trackedNode.offsetTop - (scrollNode.clientHeight * offsetBase)) + pixelOffset;
+            this._saveScrollState();
         }
     },
 
     _saveScrollState: function() {
         if (this.props.stickyBottom && this.isAtBottom()) {
             this.scrollState = { stuckAtBottom: true };
-            debuglog("ScrollPanel: Saved scroll state", this.scrollState);
+            debuglog("saved stuckAtBottom state");
             return;
         }
 
+        const scrollNode = this._getScrollNode();
+        const viewportBottom = scrollNode.scrollHeight - (scrollNode.scrollTop + scrollNode.clientHeight);
+
         const itemlist = this.refs.itemlist;
-        const wrapperRect = ReactDOM.findDOMNode(this).getBoundingClientRect();
         const messages = itemlist.children;
-        let newScrollState = null;
+        let node = null;
 
+        // TODO: do a binary search here, as items are sorted by offsetTop
+        // loop backwards, from bottom-most message (as that is the most common case)
         for (let i = messages.length-1; i >= 0; --i) {
-            const node = messages[i];
-            if (!node.dataset.scrollTokens) continue;
-
-            const boundingRect = node.getBoundingClientRect();
-            newScrollState = {
-                stuckAtBottom: false,
-                trackedScrollToken: node.dataset.scrollTokens.split(',')[0],
-                pixelOffset: wrapperRect.bottom - boundingRect.bottom,
-            };
-            // If the bottom of the panel intersects the ClientRect of node, use this node
-            // as the scrollToken.
-            // If this is false for the entire for-loop, we default to the last node
-            // (which is why newScrollState is set on every iteration).
-            if (boundingRect.top < wrapperRect.bottom) {
+            if (!messages[i].dataset.scrollTokens) {
+                continue;
+            }
+            node = messages[i];
+            // break at the first message (coming from the bottom)
+            // that has it's offsetTop above the bottom of the viewport.
+            if (this._topFromBottom(node) > viewportBottom) {
                 // Use this node as the scrollToken
                 break;
             }
         }
-        // This is only false if there were no nodes with `node.dataset.scrollTokens` set.
-        if (newScrollState) {
-            this.scrollState = newScrollState;
-            debuglog("ScrollPanel: saved scroll state", this.scrollState);
-        } else {
-            debuglog("ScrollPanel: unable to save scroll state: found no children in the viewport");
+
+        if (!node) {
+            debuglog("unable to save scroll state: found no children in the viewport");
+            return;
         }
+        const scrollToken = node.dataset.scrollTokens.split(',')[0];
+        debuglog("saving anchored scroll state to message", node && node.innerText, scrollToken);
+        const bottomOffset = this._topFromBottom(node);
+        this.scrollState = {
+            stuckAtBottom: false,
+            trackedNode: node,
+            trackedScrollToken: scrollToken,
+            bottomOffset: bottomOffset,
+            pixelOffset: bottomOffset - viewportBottom, //needed for restoring the scroll position when coming back to the room
+        };
     },
 
-    _restoreSavedScrollState: function() {
+    _restoreSavedScrollState: async function() {
         const scrollState = this.scrollState;
-        const scrollNode = this._getScrollNode();
 
         if (scrollState.stuckAtBottom) {
-            this._setScrollTop(Number.MAX_VALUE);
+            const sn = this._getScrollNode();
+            sn.scrollTop = sn.scrollHeight;
         } else if (scrollState.trackedScrollToken) {
-            this._scrollToToken(scrollState.trackedScrollToken,
-                               scrollState.pixelOffset);
+            const itemlist = this.refs.itemlist;
+            const trackedNode = this._getTrackedNode();
+            if (trackedNode) {
+                const newBottomOffset = this._topFromBottom(trackedNode);
+                const bottomDiff = newBottomOffset - scrollState.bottomOffset;
+                this._bottomGrowth += bottomDiff;
+                scrollState.bottomOffset = newBottomOffset;
+                itemlist.style.height = `${this._getListHeight()}px`;
+                debuglog("balancing height because messages below viewport grew by", bottomDiff);
+            }
+        }
+        if (!this._heightUpdateInProgress) {
+            this._heightUpdateInProgress = true;
+            try {
+                await this._updateHeight();
+            } finally {
+                this._heightUpdateInProgress = false;
+            }
+        } else {
+            debuglog("not updating height because request already in progress");
+        }
+    },
+    // need a better name that also indicates this will change scrollTop? Rebalance height? Reveal content?
+    async _updateHeight() {
+        // wait until user has stopped scrolling
+        if (this._scrollTimeout.isRunning()) {
+            debuglog("updateHeight waiting for scrolling to end ... ");
+            await this._scrollTimeout.finished();
+        } else {
+            debuglog("updateHeight getting straight to business, no scrolling going on.");
+        }
+
+        const sn = this._getScrollNode();
+        const itemlist = this.refs.itemlist;
+        const contentHeight = this._getMessagesHeight();
+        const minHeight = sn.clientHeight;
+        const height = Math.max(minHeight, contentHeight);
+        this._pages = Math.ceil(height / PAGE_SIZE);
+        this._bottomGrowth = 0;
+        const newHeight = this._getListHeight();
+
+        const scrollState = this.scrollState;
+        if (scrollState.stuckAtBottom) {
+            itemlist.style.height = `${newHeight}px`;
+            sn.scrollTop = sn.scrollHeight;
+            debuglog("updateHeight to", newHeight);
+        } else if (scrollState.trackedScrollToken) {
+            const trackedNode = this._getTrackedNode();
+            // if the timeline has been reloaded
+            // this can be called before scrollToBottom or whatever has been called
+            // so don't do anything if the node has disappeared from
+            // the currently filled piece of the timeline
+            if (trackedNode) {
+                const oldTop = trackedNode.offsetTop;
+                // changing the height might change the scrollTop
+                // if the new height is smaller than the scrollTop.
+                // We calculate the diff that needs to be applied
+                // ourselves, so be sure to measure the
+                // scrollTop before changing the height.
+                const preexistingScrollTop = sn.scrollTop;
+                itemlist.style.height = `${newHeight}px`;
+                const newTop = trackedNode.offsetTop;
+                const topDiff = newTop - oldTop;
+                sn.scrollTop = preexistingScrollTop + topDiff;
+                debuglog("updateHeight to", {newHeight, topDiff, preexistingScrollTop});
+            }
         }
     },
 
-    _setScrollTop: function(scrollTop) {
-        const scrollNode = this._getScrollNode();
+    _getTrackedNode() {
+        const scrollState = this.scrollState;
+        const trackedNode = scrollState.trackedNode;
 
-        const prevScroll = scrollNode.scrollTop;
+        if (!trackedNode || !trackedNode.parentElement) {
+            let node;
+            const messages = this.refs.itemlist.children;
+            const scrollToken = scrollState.trackedScrollToken;
 
-        // FF ignores attempts to set scrollTop to very large numbers
-        scrollNode.scrollTop = Math.min(scrollTop, scrollNode.scrollHeight);
-
-        // If this change generates a scroll event, we should not update the
-        // saved scroll state on it. See the comments in onScroll.
-        //
-        // If we *don't* expect a scroll event, we need to leave _lastSetScroll
-        // alone, otherwise we'll end up ignoring a future scroll event which is
-        // nothing to do with this change.
-
-        if (scrollNode.scrollTop != prevScroll) {
-            this._lastSetScroll = scrollNode.scrollTop;
+            for (let i = messages.length-1; i >= 0; --i) {
+                const m = messages[i];
+                // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
+                // There might only be one scroll token
+                if (m.dataset.scrollTokens &&
+                    m.dataset.scrollTokens.split(',').indexOf(scrollToken) !== -1) {
+                    node = m;
+                    break;
+                }
+            }
+            if (node) {
+                debuglog("had to find tracked node again for " + scrollState.trackedScrollToken);
+            }
+            scrollState.trackedNode = node;
         }
 
-        debuglog("ScrollPanel: set scrollTop:", scrollNode.scrollTop,
-                 "requested:", scrollTop,
-                 "_lastSetScroll:", this._lastSetScroll);
+        if (!scrollState.trackedNode) {
+            debuglog("No node with ; '"+scrollState.trackedScrollToken+"'");
+            return;
+        }
+
+        return scrollState.trackedNode;
+    },
+
+    _getListHeight() {
+        return this._bottomGrowth + (this._pages * PAGE_SIZE);
+    },
+
+    _getMessagesHeight() {
+        const itemlist = this.refs.itemlist;
+        const lastNode = itemlist.lastElementChild;
+        // 18 is itemlist padding
+        return (lastNode.offsetTop + lastNode.clientHeight) - itemlist.firstElementChild.offsetTop + (18 * 2);
+    },
+
+    _topFromBottom(node) {
+        return this.refs.itemlist.clientHeight - node.offsetTop;
     },
 
     /* get the DOM node which has the scrollTop property we care about for our
@@ -665,33 +768,112 @@ module.exports = React.createClass({
             throw new Error("ScrollPanel._getScrollNode called when unmounted");
         }
 
-        if (!this._gemScroll) {
+        if (!this._divScroll) {
             // Likewise, we should have the ref by this point, but if not
             // turn the NPE into something meaningful.
             throw new Error("ScrollPanel._getScrollNode called before gemini ref collected");
         }
 
-        return this._gemScroll.scrollbar.getViewElement();
+        return this._divScroll;
     },
 
-    _collectGeminiScroll: function(gemScroll) {
-        this._gemScroll = gemScroll;
+    _collectScroll: function(divScroll) {
+        this._divScroll = divScroll;
+    },
+
+    /**
+    Mark the bottom offset of the last tile so we can balance it out when
+    anything below it changes, by calling updatePreventShrinking, to keep
+    the same minimum bottom offset, effectively preventing the timeline to shrink.
+    */
+    preventShrinking: function() {
+        const messageList = this.refs.itemlist;
+        const tiles = messageList && messageList.children;
+        if (!messageList) {
+            return;
+        }
+        let lastTileNode;
+        for (let i = tiles.length - 1; i >= 0; i--) {
+            const node = tiles[i];
+            if (node.dataset.scrollTokens) {
+                lastTileNode = node;
+                break;
+            }
+        }
+        if (!lastTileNode) {
+            return;
+        }
+        this.clearPreventShrinking();
+        const offsetFromBottom = messageList.clientHeight - (lastTileNode.offsetTop + lastTileNode.clientHeight);
+        this.preventShrinkingState = {
+            offsetFromBottom: offsetFromBottom,
+            offsetNode: lastTileNode,
+        };
+        debuglog("prevent shrinking, last tile ", offsetFromBottom, "px from bottom");
+    },
+
+    /** Clear shrinking prevention. Used internally, and when the timeline is reloaded. */
+    clearPreventShrinking: function() {
+        const messageList = this.refs.itemlist;
+        const balanceElement = messageList && messageList.parentElement;
+        if (balanceElement) balanceElement.style.paddingBottom = null;
+        this.preventShrinkingState = null;
+        debuglog("prevent shrinking cleared");
+    },
+
+    /**
+    update the container padding to balance
+    the bottom offset of the last tile since
+    preventShrinking was called.
+    Clears the prevent-shrinking state ones the offset
+    from the bottom of the marked tile grows larger than
+    what it was when marking.
+    */
+    updatePreventShrinking: function() {
+        if (this.preventShrinkingState) {
+            const sn = this._getScrollNode();
+            const scrollState = this.scrollState;
+            const messageList = this.refs.itemlist;
+            const {offsetNode, offsetFromBottom} = this.preventShrinkingState;
+            // element used to set paddingBottom to balance the typing notifs disappearing
+            const balanceElement = messageList.parentElement;
+            // if the offsetNode got unmounted, clear
+            let shouldClear = !offsetNode.parentElement;
+            // also if 200px from bottom
+            if (!shouldClear && !scrollState.stuckAtBottom) {
+                const spaceBelowViewport = sn.scrollHeight - (sn.scrollTop + sn.clientHeight);
+                shouldClear = spaceBelowViewport >= 200;
+            }
+            // try updating if not clearing
+            if (!shouldClear) {
+                const currentOffset = messageList.clientHeight - (offsetNode.offsetTop + offsetNode.clientHeight);
+                const offsetDiff = offsetFromBottom - currentOffset;
+                if (offsetDiff > 0) {
+                    balanceElement.style.paddingBottom = `${offsetDiff}px`;
+                    debuglog("update prevent shrinking ", offsetDiff, "px from bottom");
+                } else if (offsetDiff < 0) {
+                    shouldClear = true;
+                }
+            }
+            if (shouldClear) {
+                this.clearPreventShrinking();
+            }
+        }
     },
 
     render: function() {
-        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
         // TODO: the classnames on the div and ol could do with being updated to
         // reflect the fact that we don't necessarily contain a list of messages.
         // it's not obvious why we have a separate div and ol anyway.
-        return (<GeminiScrollbarWrapper autoshow={true} wrappedRef={this._collectGeminiScroll}
-                onScroll={this.onScroll} onResize={this.onResize}
-                className={this.props.className} style={this.props.style}>
+        return (<AutoHideScrollbar wrappedRef={this._collectScroll}
+                onScroll={this.onScroll}
+                className={`mx_ScrollPanel ${this.props.className}`} style={this.props.style}>
                     <div className="mx_RoomView_messageListWrapper">
                         <ol ref="itemlist" className="mx_RoomView_MessageList" aria-live="polite">
                             { this.props.children }
                         </ol>
                     </div>
-                </GeminiScrollbarWrapper>
-               );
+                </AutoHideScrollbar>
+            );
     },
 });

src/components/structures/SearchBox.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,22 +15,32 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
-import { _t } from '../../languageHandler';
+import PropTypes from 'prop-types';
 import { KeyCode } from '../../Keyboard';
-import sdk from '../../index';
 import dis from '../../dispatcher';
-import rate_limited_func from '../../ratelimitedfunc';
+import { throttle } from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 
 module.exports = React.createClass({
     displayName: 'SearchBox',
 
     propTypes: {
-        onSearch: React.PropTypes.func,
-        onCleared: React.PropTypes.func,
+        onSearch: PropTypes.func,
+        onCleared: PropTypes.func,
+        className: PropTypes.string,
+        placeholder: PropTypes.string.isRequired,
+
+        // If true, the search box will focus and clear itself
+        // on room search focus action (it would be nicer to take
+        // this functionality out, but not obvious how that would work)
+        enableRoomSearchFocus: PropTypes.bool,
+    },
+
+    getDefaultProps: function() {
+        return {
+            enableRoomSearchFocus: false,
+        };
     },
 
     getInitialState: function() {
@@ -47,6 +58,8 @@ module.exports = React.createClass({
     },
 
     onAction: function(payload) {
+        if (!this.props.enableRoomSearchFocus) return;
+
         switch (payload.action) {
             case 'view_room':
                 if (this.refs.search && payload.clear_search) {
@@ -67,12 +80,9 @@ module.exports = React.createClass({
         this.onSearch();
     },
 
-    onSearch: new rate_limited_func(
-        function() {
-            this.props.onSearch(this.refs.search.value);
-        },
-        100,
-    ),
+    onSearch: throttle(function() {
+        this.props.onSearch(this.refs.search.value);
+    }, 200, {trailing: true, leading: true}),
 
     _onKeyDown: function(ev) {
         switch (ev.keyCode) {
@@ -95,26 +105,32 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent('elements.TintableSvg');
-
+        // check for collapsed here and
+        // not at parent so we keep
+        // searchTerm in our state
+        // when collapsing and expanding
+        if (this.props.collapsed) {
+            return null;
+        }
         const clearButton = this.state.searchTerm.length > 0 ?
             (<AccessibleButton key="button"
                     className="mx_SearchBox_closeButton"
-                    onClick={ () => {this._clearSearch("button")} }>
-            </AccessibleButton>) :  undefined;
+                    onClick={ () => {this._clearSearch("button"); } }>
+            </AccessibleButton>) : undefined;
 
+        const className = this.props.className || "";
         return (
             <div className="mx_SearchBox mx_textinput">
                 <input
                     key="searchfield"
                     type="text"
                     ref="search"
-                    className="mx_textinput_icon mx_textinput_search"
+                    className={"mx_textinput_icon mx_textinput_search " + className}
                     value={ this.state.searchTerm }
                     onFocus={ this._onFocus }
                     onChange={ this.onChange }
                     onKeyDown={ this._onKeyDown }
-                    placeholder={ _t('Filter room names') }
+                    placeholder={ this.props.placeholder }
                 />
                 { clearButton }
             </div>

src/components/structures/TabbedView.js

@@ -0,0 +1,119 @@
+/*
+Copyright 2017 Travis Ralston
+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 * as React from "react";
+import {_t} from '../../languageHandler';
+import PropTypes from "prop-types";
+
+/**
+ * Represents a tab for the TabbedView.
+ */
+export class Tab {
+    /**
+     * Creates a new tab.
+     * @param {string} tabLabel The untranslated tab label.
+     * @param {string} tabIconClass The class for the tab icon. This should be a simple mask.
+     * @param {string} tabJsx The JSX for the tab container.
+     */
+    constructor(tabLabel, tabIconClass, tabJsx) {
+        this.label = tabLabel;
+        this.icon = tabIconClass;
+        this.body = tabJsx;
+    }
+}
+
+export class TabbedView extends React.Component {
+    static propTypes = {
+        // The tabs to show
+        tabs: PropTypes.arrayOf(PropTypes.instanceOf(Tab)).isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            activeTabIndex: 0,
+        };
+    }
+
+    _getActiveTabIndex() {
+        if (!this.state || !this.state.activeTabIndex) return 0;
+        return this.state.activeTabIndex;
+    }
+
+    /**
+     * Shows the given tab
+     * @param {Tab} tab the tab to show
+     * @private
+     */
+    _setActiveTab(tab) {
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx !== -1) {
+            this.setState({activeTabIndex: idx});
+        } else {
+            console.error("Could not find tab " + tab.label + " in tabs");
+        }
+    }
+
+    _renderTabLabel(tab) {
+        let classes = "mx_TabbedView_tabLabel ";
+
+        const idx = this.props.tabs.indexOf(tab);
+        if (idx === this._getActiveTabIndex()) classes += "mx_TabbedView_tabLabel_active";
+
+        let tabIcon = null;
+        if (tab.icon) {
+            tabIcon = <span className={`mx_TabbedView_maskedIcon ${tab.icon}`} />;
+        }
+
+        const onClickHandler = () => this._setActiveTab(tab);
+
+        return (
+            <span className={classes} key={"tab_label_" + tab.label}
+                  onClick={onClickHandler}>
+                {tabIcon}
+                <span className="mx_TabbedView_tabLabel_text">
+                    {_t(tab.label)}
+                </span>
+            </span>
+        );
+    }
+
+    _renderTabPanel(tab) {
+        return (
+            <div className="mx_TabbedView_tabPanel" key={"mx_tabpanel_" + tab.label}>
+                <div className='mx_TabbedView_tabPanelContent'>
+                    {tab.body}
+                </div>
+            </div>
+        );
+    }
+
+    render() {
+        const labels = this.props.tabs.map(tab => this._renderTabLabel(tab));
+        const panel = this._renderTabPanel(this.props.tabs[this._getActiveTabIndex()]);
+
+        return (
+            <div className="mx_TabbedView">
+                <div className="mx_TabbedView_tabLabels">
+                    {labels}
+                </div>
+                {panel}
+            </div>
+        );
+    }
+}

src/components/structures/TagPanel.js

@@ -23,7 +23,6 @@ import GroupActions from '../../actions/GroupActions';
 
 import sdk from '../../index';
 import dis from '../../dispatcher';
-import Modal from '../../Modal';
 import { _t } from '../../languageHandler';
 
 import { Droppable } from 'react-beautiful-dnd';
@@ -48,8 +47,6 @@ const TagPanel = React.createClass({
         this.context.matrixClient.on("Group.myMembership", this._onGroupMyMembership);
         this.context.matrixClient.on("sync", this._onClientSync);
 
-        this._dispatcherRef = dis.register(this._onAction);
-
         this._tagOrderStoreToken = TagOrderStore.addListener(() => {
             if (this.unmounted) {
                 return;
@@ -70,9 +67,6 @@ const TagPanel = React.createClass({
         if (this._filterStoreToken) {
             this._filterStoreToken.remove();
         }
-        if (this._dispatcherRef) {
-            dis.unregister(this._dispatcherRef);
-        }
     },
 
     _onGroupMyMembership() {
@@ -106,21 +100,11 @@ const TagPanel = React.createClass({
         dis.dispatch({action: 'deselect_tags'});
     },
 
-    _onAction(payload) {
-        if (payload.action === "show_redesign_feedback_dialog") {
-            const RedesignFeedbackDialog =
-                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
-            Modal.createDialog(RedesignFeedbackDialog);
-        }
-    },
-
     render() {
-        const GroupsButton = sdk.getComponent('elements.GroupsButton');
         const DNDTagTile = sdk.getComponent('elements.DNDTagTile');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         const TintableSvg = sdk.getComponent('elements.TintableSvg');
         const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
-        const ActionButton = sdk.getComponent("elements.ActionButton");
 
         const tags = this.state.orderedTags.map((tag, index) => {
             return <DNDTagTile
@@ -136,7 +120,7 @@ const TagPanel = React.createClass({
         let clearButton;
         if (itemsSelected) {
             clearButton = <AccessibleButton className="mx_TagPanel_clearButton" onClick={this.onClearFilterClick}>
-                <TintableSvg src="img/icons-close.svg" width="24" height="24"
+                <TintableSvg src={require("../../../res/img/icons-close.svg")} width="24" height="24"
                              alt={_t("Clear filter")}
                              title={_t("Clear filter")}
                 />
@@ -174,13 +158,6 @@ const TagPanel = React.createClass({
                     ) }
                 </Droppable>
             </GeminiScrollbarWrapper>
-            <div className="mx_TagPanel_divider" />
-            <div className="mx_TagPanel_groupsButton">
-                <GroupsButton />
-                <ActionButton
-                    className="mx_TagPanel_report" action="show_redesign_feedback_dialog"
-                    label={_t("Report bugs & give feedback")} tooltip={true} />
-            </div>
         </div>;
     },
 });

src/components/structures/TagPanelButtons.js

@@ -0,0 +1,58 @@
+/*
+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 dis from '../../dispatcher';
+import Modal from '../../Modal';
+import { _t } from '../../languageHandler';
+
+const TagPanelButtons = React.createClass({
+    displayName: 'TagPanelButtons',
+
+
+    componentWillMount: function() {
+        this._dispatcherRef = dis.register(this._onAction);
+    },
+
+    componentWillUnmount() {
+        if (this._dispatcherRef) {
+            dis.unregister(this._dispatcherRef);
+            this._dispatcherRef = null;
+        }
+    },
+
+    _onAction(payload) {
+        if (payload.action === "show_redesign_feedback_dialog") {
+            const RedesignFeedbackDialog =
+                sdk.getComponent("views.dialogs.RedesignFeedbackDialog");
+            Modal.createDialog(RedesignFeedbackDialog);
+        }
+    },
+
+    render() {
+        const GroupsButton = sdk.getComponent('elements.GroupsButton');
+        const ActionButton = sdk.getComponent("elements.ActionButton");
+
+        return (<div className="mx_TagPanelButtons">
+            <GroupsButton />
+            <ActionButton
+                className="mx_TagPanelButtons_report" action="show_redesign_feedback_dialog"
+                label={_t("Report bugs & give feedback")} tooltip={true} />
+        </div>);
+    },
+});
+export default TagPanelButtons;

src/components/structures/TimelinePanel.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.
@@ -451,12 +452,12 @@ var TimelinePanel = React.createClass({
                 //
                 // We ignore events we have sent ourselves; we don't want to see the
                 // read-marker when a remote echo of an event we have just sent takes
-                // more than the timeout on userCurrentlyActive.
+                // more than the timeout on userActiveRecently.
                 //
                 const myUserId = MatrixClientPeg.get().credentials.userId;
                 const sender = ev.sender ? ev.sender.userId : null;
-                var callback = null;
-                if (sender != myUserId && !UserActivity.userCurrentlyActive()) {
+                var callRMUpdated = false;
+                if (sender != myUserId && !UserActivity.sharedInstance().userActiveRecently()) {
                     updatedState.readMarkerVisible = true;
                 } else if (lastEv && this.getReadMarkerPosition() === 0) {
                     // we know we're stuckAtBottom, so we can advance the RM
@@ -465,11 +466,16 @@ var TimelinePanel = React.createClass({
                     this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
                     updatedState.readMarkerVisible = false;
                     updatedState.readMarkerEventId = lastEv.getId();
-                    callback = this.props.onReadMarkerUpdated;
+                    callRMUpdated = true;
                 }
             }
 
-            this.setState(updatedState, callback);
+            this.setState(updatedState, () => {
+                this.refs.messagePanel.updateTimelineMinHeight();
+                if (callRMUpdated) {
+                    this.props.onReadMarkerUpdated();
+                }
+            });
         });
     },
 
@@ -557,7 +563,7 @@ var TimelinePanel = React.createClass({
         this._readMarkerActivityTimer = new Timer(initialTimeout);
 
         while (this._readMarkerActivityTimer) { //unset on unmount
-            UserActivity.timeWhileActive(this._readMarkerActivityTimer);
+            UserActivity.sharedInstance().timeWhileActiveRecently(this._readMarkerActivityTimer);
             try {
                 await this._readMarkerActivityTimer.finished();
             } catch(e) { continue; /* aborted */ }
@@ -569,7 +575,7 @@ var TimelinePanel = React.createClass({
     updateReadReceiptOnUserActivity: async function() {
         this._readReceiptActivityTimer = new Timer(READ_RECEIPT_INTERVAL_MS);
         while (this._readReceiptActivityTimer) { //unset on unmount
-            UserActivity.timeWhileActive(this._readReceiptActivityTimer);
+            UserActivity.sharedInstance().timeWhileActiveNow(this._readReceiptActivityTimer);
             try {
                 await this._readReceiptActivityTimer.finished();
             } catch(e) { continue; /* aborted */ }
@@ -930,6 +936,11 @@ var TimelinePanel = React.createClass({
             {windowLimit: this.props.timelineCap});
 
         const onLoaded = () => {
+            // clear the timeline min-height when
+            // (re)loading the timeline
+            if (this.refs.messagePanel) {
+                this.refs.messagePanel.onTimelineReset();
+            }
             this._reloadEvents();
 
             // If we switched away from the room while there were pending
@@ -1197,6 +1208,7 @@ var TimelinePanel = React.createClass({
         return (
             <MessagePanel ref="messagePanel"
                           room={this.props.timelineSet.room}
+                          permalinkCreator={this.props.permalinkCreator}
                           hidden={this.props.hidden}
                           backPaginating={this.state.backPaginating}
                           forwardPaginating={forwardPaginating}
@@ -1216,6 +1228,7 @@ var TimelinePanel = React.createClass({
                           alwaysShowTimestamps={this.state.alwaysShowTimestamps}
                           className={this.props.className}
                           tileShape={this.props.tileShape}
+                          resizeNotifier={this.props.resizeNotifier}
             />
         );
     },

src/components/structures/TopLeftMenuButton.js

@@ -22,6 +22,7 @@ import AccessibleButton from '../views/elements/AccessibleButton';
 import BaseAvatar from '../views/avatars/BaseAvatar';
 import MatrixClientPeg from '../../MatrixClientPeg';
 import Avatar from '../../Avatar';
+import { _t } from '../../languageHandler';
 
 const AVATAR_SIZE = 28;
 
@@ -67,10 +68,18 @@ export default class TopLeftMenuButton extends React.Component {
         }
     }
 
+    _getDisplayName() {
+        if (MatrixClientPeg.get().isGuest()) {
+            return _t("Guest");
+        } else if (this.state.profileInfo) {
+            return this.state.profileInfo.name;
+        } else {
+            return MatrixClientPeg.get().getUserId();
+        }
+    }
+
     render() {
-        const fallbackUserId = MatrixClientPeg.get().getUserId();
-        const profileInfo = this.state.profileInfo;
-        const name = profileInfo ? profileInfo.name : fallbackUserId;
+        const name = this._getDisplayName();
         let nameElement;
         if (!this.props.collapsed) {
             nameElement = <div className="mx_TopLeftMenuButton_name">
@@ -81,15 +90,15 @@ export default class TopLeftMenuButton extends React.Component {
         return (
             <AccessibleButton className="mx_TopLeftMenuButton" onClick={this.onToggleMenu}>
                 <BaseAvatar
-                    idName={fallbackUserId}
+                    idName={MatrixClientPeg.get().getUserId()}
                     name={name}
-                    url={profileInfo && profileInfo.avatarUrl}
+                    url={this.state.profileInfo && this.state.profileInfo.avatarUrl}
                     width={AVATAR_SIZE}
                     height={AVATAR_SIZE}
                     resizeMethod="crop"
                 />
                 { nameElement }
-                <img className="mx_TopLeftMenuButton_chevron" src="img/topleft-chevron.svg" width="11" height="6" />
+                <span className="mx_TopLeftMenuButton_chevron"></span>
             </AccessibleButton>
         );
     }
@@ -106,6 +115,8 @@ export default class TopLeftMenuButton extends React.Component {
             chevronFace: "none",
             left: x,
             top: y,
+            userId: MatrixClientPeg.get().getUserId(),
+            displayName: this._getDisplayName(),
             onFinished: () => {
                 this.setState({ menuDisplayed: false });
             },

src/components/structures/UploadBar.js

@@ -47,7 +47,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
     },
 
     render: function() {
-        const uploads = ContentMessages.getCurrentUploads();
+        const uploads = ContentMessages.sharedInstance().getCurrentUploads();
 
         // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length
         // check in RoomView
@@ -91,9 +91,9 @@ module.exports = React.createClass({displayName: 'UploadBar',
                 <div className="mx_UploadBar_uploadProgressOuter">
                     <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
                 </div>
-                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src="img/fileicon.png" width="17" height="22" />
-                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src="img/cancel.svg" width="18" height="18"
-                    onClick={function() { ContentMessages.cancelUpload(upload.promise); }}
+                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
+                <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
+                    onClick={function() { ContentMessages.sharedInstance().cancelUpload(upload.promise); }}
                 />
                 <div className="mx_UploadBar_uploadBytes">
                     { uploadedSize } / { totalSize }

src/components/structures/UserView.js

@@ -0,0 +1,82 @@
+/*
+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 Matrix from "matrix-js-sdk";
+import MatrixClientPeg from "../../MatrixClientPeg";
+import sdk from "../../index";
+import Modal from '../../Modal';
+import { _t } from '../../languageHandler';
+
+export default class UserView extends React.Component {
+    static get propTypes() {
+        return {
+            userId: React.PropTypes.string,
+        };
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {};
+    }
+
+    componentWillMount() {
+        if (this.props.userId) {
+            this._loadProfileInfo();
+        }
+    }
+
+    componentDidUpdate(prevProps) {
+        if (prevProps.userId !== this.props.userId) {
+            this._loadProfileInfo();
+        }
+    }
+
+    async _loadProfileInfo() {
+        const cli = MatrixClientPeg.get();
+        this.setState({loading: true});
+        let profileInfo;
+        try {
+            profileInfo = await cli.getProfileInfo(this.props.userId);
+        } catch (err) {
+            const ErrorDialog = sdk.getComponent('dialogs.ErrorDialog');
+            Modal.createTrackedDialog(_t('Could not load user profile'), '', ErrorDialog, {
+                title: _t('Could not load user profile'),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+            this.setState({loading: false});
+            return;
+        }
+        const fakeEvent = new Matrix.MatrixEvent({type: "m.room.member", content: profileInfo});
+        const member = new Matrix.RoomMember(null, this.props.userId);
+        member.setMembershipEvent(fakeEvent);
+        this.setState({member, loading: false});
+    }
+
+    render() {
+        if (this.state.loading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        } else if (this.state.member) {
+            const RightPanel = sdk.getComponent('structures.RightPanel');
+            const MainSplit = sdk.getComponent('structures.MainSplit');
+            const panel = <RightPanel user={this.state.member} />;
+            return (<MainSplit panel={panel}><div style={{flex: "1"}} /></MainSplit>);
+        } else {
+            return (<div />);
+        }
+    }
+}

src/components/structures/ViewSource.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,11 +15,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import SyntaxHighlight from '../views/elements/SyntaxHighlight';
+import {_t} from "../../languageHandler";
+import sdk from "../../index";
 
 
 module.exports = React.createClass({
@@ -27,31 +28,24 @@ module.exports = React.createClass({
     propTypes: {
         content: PropTypes.object.isRequired,
         onFinished: PropTypes.func.isRequired,
-    },
-
-    componentDidMount: function() {
-        document.addEventListener("keydown", this.onKeyDown);
-    },
-
-    componentWillUnmount: function() {
-        document.removeEventListener("keydown", this.onKeyDown);
-    },
-
-    onKeyDown: function(ev) {
-        if (ev.keyCode == 27) { // escape
-            ev.stopPropagation();
-            ev.preventDefault();
-            this.props.onFinished();
-        }
+        roomId: PropTypes.string.isRequired,
+        eventId: PropTypes.string.isRequired,
     },
 
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_ViewSource">
-                <SyntaxHighlight className="json">
-                    { JSON.stringify(this.props.content, null, 2) }
-                </SyntaxHighlight>
-            </div>
+            <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t('View Source')}>
+                <div className="mx_ViewSource_label_left">Room ID: { this.props.roomId }</div>
+                <div className="mx_ViewSource_label_right">Event ID: { this.props.eventId }</div>
+                <div className="mx_ViewSource_label_bottom" />
+
+                <div className="mx_Dialog_content">
+                    <SyntaxHighlight className="json">
+                        { JSON.stringify(this.props.content, null, 2) }
+                    </SyntaxHighlight>
+                </div>
+            </BaseDialog>
         );
     },
 });

src/components/structures/auth/ForgotPassword.js

@@ -0,0 +1,365 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017, 2018, 2019 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+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 Modal from "../../../Modal";
+import SdkConfig from "../../../SdkConfig";
+
+import PasswordReset from "../../../PasswordReset";
+
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the forgot password inputs
+const PHASE_FORGOT = 1;
+// Email is in the process of being sent
+const PHASE_SENDING_EMAIL = 2;
+// Email has been sent
+const PHASE_EMAIL_SENT = 3;
+// User has clicked the link in email and completed reset
+const PHASE_DONE = 4;
+
+module.exports = React.createClass({
+    displayName: 'ForgotPassword',
+
+    propTypes: {
+        // The default server name to use when the user hasn't specified
+        // one. If set, `defaultHsUrl` and `defaultHsUrl` were derived for this
+        // via `.well-known` discovery. The server name is used instead of the
+        // HS URL when talking about "your account".
+        defaultServerName: PropTypes.string,
+        // An error passed along from higher up explaining that something
+        // went wrong when finding the defaultHsUrl.
+        defaultServerDiscoveryError: PropTypes.string,
+
+        defaultHsUrl: PropTypes.string,
+        defaultIsUrl: PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+
+        onLoginClick: PropTypes.func,
+        onComplete: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            enteredHsUrl: this.props.customHsUrl || this.props.defaultHsUrl,
+            enteredIsUrl: this.props.customIsUrl || this.props.defaultIsUrl,
+            phase: PHASE_FORGOT,
+            email: "",
+            password: "",
+            password2: "",
+            errorText: null,
+        };
+    },
+
+    submitPasswordReset: function(hsUrl, identityUrl, email, password) {
+        this.setState({
+            phase: PHASE_SENDING_EMAIL,
+        });
+        this.reset = new PasswordReset(hsUrl, identityUrl);
+        this.reset.resetPassword(email, password).done(() => {
+            this.setState({
+                phase: PHASE_EMAIL_SENT,
+            });
+        }, (err) => {
+            this.showErrorDialog(_t('Failed to send email') + ": " + err.message);
+            this.setState({
+                phase: PHASE_FORGOT,
+            });
+        });
+    },
+
+    onVerify: function(ev) {
+        ev.preventDefault();
+        if (!this.reset) {
+            console.error("onVerify called before submitPasswordReset!");
+            return;
+        }
+        this.reset.checkEmailLinkClicked().done((res) => {
+            this.setState({ phase: PHASE_DONE });
+        }, (err) => {
+            this.showErrorDialog(err.message);
+        });
+    },
+
+    onSubmitForm: function(ev) {
+        ev.preventDefault();
+
+        // Don't allow the user to register if there's a discovery error
+        // Without this, the user could end up registering on the wrong homeserver.
+        if (this.props.defaultServerDiscoveryError) {
+            this.setState({errorText: this.props.defaultServerDiscoveryError});
+            return;
+        }
+
+        if (!this.state.email) {
+            this.showErrorDialog(_t('The email address linked to your account must be entered.'));
+        } else if (!this.state.password || !this.state.password2) {
+            this.showErrorDialog(_t('A new password must be entered.'));
+        } else if (this.state.password !== this.state.password2) {
+            this.showErrorDialog(_t('New passwords must match each other.'));
+        } else {
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            Modal.createTrackedDialog('Forgot Password Warning', '', QuestionDialog, {
+                title: _t('Warning!'),
+                description:
+                    <div>
+                        { _t(
+                            "Changing your password will reset any end-to-end encryption keys " +
+                            "on all of your devices, making encrypted chat history unreadable. Set up " +
+                            "Key Backup or export your room keys from another device before resetting your " +
+                            "password.",
+                        ) }
+                    </div>,
+                button: _t('Continue'),
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        this.submitPasswordReset(
+                            this.state.enteredHsUrl, this.state.enteredIsUrl,
+                            this.state.email, this.state.password,
+                        );
+                    }
+                },
+            });
+        }
+    },
+
+    onInputChanged: function(stateKey, ev) {
+        this.setState({
+            [stateKey]: ev.target.value,
+        });
+    },
+
+    onServerConfigChange: function(config) {
+        const newState = {};
+        if (config.hsUrl !== undefined) {
+            newState.enteredHsUrl = config.hsUrl;
+        }
+        if (config.isUrl !== undefined) {
+            newState.enteredIsUrl = config.isUrl;
+        }
+        this.setState(newState);
+    },
+
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_FORGOT,
+        });
+    },
+
+    onEditServerDetailsClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_SERVER_DETAILS,
+        });
+    },
+
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
+    showErrorDialog: function(body, title) {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
+            title: title,
+            description: body,
+        });
+    },
+
+    renderServerDetails() {
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
+        }
+
+        return <div>
+            <ServerConfig
+                defaultHsUrl={this.props.defaultHsUrl}
+                defaultIsUrl={this.props.defaultIsUrl}
+                customHsUrl={this.state.enteredHsUrl}
+                customIsUrl={this.state.enteredIsUrl}
+                onServerConfigChange={this.onServerConfigChange}
+                delayTimeMs={0} />
+            <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>
+        </div>;
+    },
+
+    renderForgot() {
+        const Field = sdk.getComponent('elements.Field');
+
+        let errorText = null;
+        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
+        if (err) {
+            errorText = <div className="mx_Login_error">{ err }</div>;
+        }
+
+        let yourMatrixAccountText = _t('Your Matrix account');
+        if (this.state.enteredHsUrl === this.props.defaultHsUrl) {
+            yourMatrixAccountText = _t('Your Matrix account on %(serverName)s', {
+                serverName: this.props.defaultServerName,
+            });
+        } else {
+            try {
+                const parsedHsUrl = new URL(this.state.enteredHsUrl);
+                yourMatrixAccountText = _t('Your Matrix account on %(serverName)s', {
+                    serverName: parsedHsUrl.hostname,
+                });
+            } catch (e) {
+                errorText = <div className="mx_Login_error">{_t(
+                    "The homeserver URL %(hsUrl)s doesn't seem to be valid URL. Please " +
+                    "enter a valid URL including the protocol prefix.",
+                {
+                    hsUrl: this.state.enteredHsUrl,
+                })}</div>;
+            }
+        }
+
+        // If custom URLs are allowed, wire up the server details edit link.
+        let editLink = null;
+        if (!SdkConfig.get()['disable_custom_urls']) {
+            editLink = <a className="mx_AuthBody_editServerDetails"
+                href="#" onClick={this.onEditServerDetailsClick}
+            >
+                {_t('Change')}
+            </a>;
+        }
+
+        return <div>
+            <h3>
+                {yourMatrixAccountText}
+                {editLink}
+            </h3>
+            {errorText}
+            <form onSubmit={this.onSubmitForm}>
+                <div className="mx_AuthBody_fieldRow">
+                    <Field
+                        id="mx_ForgotPassword_email"
+                        name="reset_email" // define a name so browser's password autofill gets less confused
+                        type="text"
+                        label={_t('Email')}
+                        value={this.state.email}
+                        onChange={this.onInputChanged.bind(this, "email")}
+                        autoFocus
+                    />
+                </div>
+                <div className="mx_AuthBody_fieldRow">
+                    <Field
+                        id="mx_ForgotPassword_password"
+                        name="reset_password"
+                        type="password"
+                        label={_t('Password')}
+                        value={this.state.password}
+                        onChange={this.onInputChanged.bind(this, "password")}
+                    />
+                    <Field
+                        id="mx_ForgotPassword_passwordConfirm"
+                        name="reset_password_confirm"
+                        type="password"
+                        label={_t('Confirm')}
+                        value={this.state.password2}
+                        onChange={this.onInputChanged.bind(this, "password2")}
+                    />
+                </div>
+                <span>{_t(
+                    'A verification email will be sent to your inbox to confirm ' +
+                    'setting your new password.',
+                )}</span>
+                <input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
+            </form>
+            <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
+                {_t('Sign in instead')}
+            </a>
+        </div>;
+    },
+
+    renderSendingEmail() {
+        const Spinner = sdk.getComponent("elements.Spinner");
+        return <Spinner />;
+    },
+
+    renderEmailSent() {
+        return <div>
+            {_t("An email has been sent to %(emailAddress)s. Once you've followed the " +
+                "link it contains, click below.", { emailAddress: this.state.email })}
+            <br />
+            <input className="mx_Login_submit" type="button" onClick={this.onVerify}
+                value={_t('I have verified my email address')} />
+        </div>;
+    },
+
+    renderDone() {
+        return <div>
+            <p>{_t("Your password has been reset.")}</p>
+            <p>{_t(
+                "You have been logged out of all devices and will no longer receive " +
+                "push notifications. To re-enable notifications, sign in again on each " +
+                "device.",
+            )}</p>
+            <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
+                value={_t('Return to login screen')} />
+        </div>;
+    },
+
+    render: function() {
+        const AuthPage = sdk.getComponent("auth.AuthPage");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
+
+        let resetPasswordJsx;
+        switch (this.state.phase) {
+            case PHASE_SERVER_DETAILS:
+                resetPasswordJsx = this.renderServerDetails();
+                break;
+            case PHASE_FORGOT:
+                resetPasswordJsx = this.renderForgot();
+                break;
+            case PHASE_SENDING_EMAIL:
+                resetPasswordJsx = this.renderSendingEmail();
+                break;
+            case PHASE_EMAIL_SENT:
+                resetPasswordJsx = this.renderEmailSent();
+                break;
+            case PHASE_DONE:
+                resetPasswordJsx = this.renderDone();
+                break;
+        }
+
+        return (
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2> { _t('Set a new password') } </h2>
+                    {resetPasswordJsx}
+                </AuthBody>
+            </AuthPage>
+        );
+    },
+});

src/components/structures/auth/Login.js

@@ -1,7 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -24,13 +24,21 @@ import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import { AutoDiscovery } from "matrix-js-sdk";
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the appropriate login flow(s) for the server
+const PHASE_LOGIN = 1;
+
+// Enable phases for login
+const PHASES_ENABLED = true;
+
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
 _td("Invalid homeserver discovery response");
@@ -48,23 +56,24 @@ module.exports = React.createClass({
 
         enableGuest: PropTypes.bool,
 
+        // The default server name to use when the user hasn't specified
+        // one. If set, `defaultHsUrl` and `defaultHsUrl` were derived for this
+        // via `.well-known` discovery. The server name is used instead of the
+        // HS URL when talking about where to "sign in to".
+        defaultServerName: PropTypes.string,
+        // An error passed along from higher up explaining that something
+        // went wrong when finding the defaultHsUrl.
+        defaultServerDiscoveryError: PropTypes.string,
+
         customHsUrl: PropTypes.string,
         customIsUrl: PropTypes.string,
         defaultHsUrl: PropTypes.string,
         defaultIsUrl: PropTypes.string,
         // Secondary HS which we try to log into if the user is using
         // the default HS but login fails. Useful for migrating to a
-        // different home server without confusing users.
+        // different homeserver without confusing users.
         fallbackHsUrl: PropTypes.string,
 
-        // The default server name to use when the user hasn't specified
-        // one. This is used when displaying the defaultHsUrl in the UI.
-        defaultServerName: PropTypes.string,
-
-        // An error passed along from higher up explaining that something
-        // went wrong when finding the defaultHsUrl.
-        defaultServerDiscoveryError: PropTypes.string,
-
         defaultDeviceDisplayName: PropTypes.string,
 
         // login shouldn't know or care how registration is done.
@@ -72,7 +81,6 @@ module.exports = React.createClass({
 
         // login shouldn't care how password recovery is done.
         onForgotPasswordClick: PropTypes.func,
-        onCancelClick: PropTypes.func,
         onServerConfigChange: PropTypes.func.isRequired,
     },
 
@@ -81,18 +89,21 @@ module.exports = React.createClass({
             busy: false,
             errorText: null,
             loginIncorrect: false,
-            enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
-            enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
+
+            enteredHsUrl: this.props.customHsUrl || this.props.defaultHsUrl,
+            enteredIsUrl: this.props.customIsUrl || this.props.defaultIsUrl,
 
             // used for preserving form values when changing homeserver
             username: "",
             phoneCountry: null,
             phoneNumber: "",
+
+            // Phase of the overall login dialog.
+            phase: PHASE_LOGIN,
+            // The current login flow, such as password, SSO, etc.
             currentFlow: "m.login.password",
 
             // .well-known discovery
-            discoveredHsUrl: "",
-            discoveredIsUrl: "",
             discoveryError: "",
             findingHomeserver: false,
         };
@@ -149,7 +160,7 @@ module.exports = React.createClass({
             // Some error strings only apply for logging in
             const usingEmail = username.indexOf("@") > 0;
             if (error.httpStatus === 400 && usingEmail) {
-                errorText = _t('This Home Server does not support login using email address.');
+                errorText = _t('This homeserver does not support login using email address.');
             } else if (error.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
                 const errorTop = messageForResourceLimitError(
                     error.data.limit_type,
@@ -230,7 +241,7 @@ module.exports = React.createClass({
         }, function(error) {
             let errorText;
             if (error.httpStatus === 403) {
-                errorText = _t("Guest access is disabled on this Home Server.");
+                errorText = _t("Guest access is disabled on this homeserver.");
             } else {
                 errorText = self._errorTextFromError(error);
             }
@@ -250,7 +261,10 @@ module.exports = React.createClass({
     },
 
     onUsernameBlur: function(username) {
-        this.setState({ username: username });
+        this.setState({
+            username: username,
+            discoveryError: null,
+        });
         if (username[0] === "@") {
             const serverName = username.split(':').slice(1).join(':');
             try {
@@ -270,16 +284,22 @@ module.exports = React.createClass({
     },
 
     onPhoneNumberChanged: function(phoneNumber) {
-        // Validate the phone number entered
-        if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
-            this.setState({ errorText: _t('The phone number entered looks invalid') });
-            return;
-        }
-
         this.setState({
             phoneNumber: phoneNumber,
+        });
+    },
+
+    onPhoneNumberBlur: function(phoneNumber) {
+        this.setState({
             errorText: null,
         });
+
+        // Validate the phone number entered
+        if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
+            this.setState({
+                errorText: _t('The phone number entered looks invalid'),
+            });
+        }
     },
 
     onServerConfigChange: function(config) {
@@ -288,10 +308,10 @@ module.exports = React.createClass({
             errorText: null, // reset err messages
         };
         if (config.hsUrl !== undefined) {
-            newState.enteredHomeserverUrl = config.hsUrl;
+            newState.enteredHsUrl = config.hsUrl;
         }
         if (config.isUrl !== undefined) {
-            newState.enteredIdentityServerUrl = config.isUrl;
+            newState.enteredIsUrl = config.isUrl;
         }
 
         this.props.onServerConfigChange(config);
@@ -306,46 +326,60 @@ module.exports = React.createClass({
         this.props.onRegisterClick();
     },
 
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_LOGIN,
+        });
+    },
+
+    onEditServerDetailsClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_SERVER_DETAILS,
+        });
+    },
+
     _tryWellKnownDiscovery: async function(serverName) {
         if (!serverName.trim()) {
             // Nothing to discover
-            this.setState({discoveryError: "", discoveredHsUrl: "", discoveredIsUrl: "", findingHomeserver: false});
+            this.setState({
+                discoveryError: "",
+                findingHomeserver: false,
+            });
             return;
         }
 
         this.setState({findingHomeserver: true});
         try {
             const discovery = await AutoDiscovery.findClientConfig(serverName);
+
             const state = discovery["m.homeserver"].state;
             if (state !== AutoDiscovery.SUCCESS && state !== AutoDiscovery.PROMPT) {
                 this.setState({
-                    discoveredHsUrl: "",
-                    discoveredIsUrl: "",
                     discoveryError: discovery["m.homeserver"].error,
                     findingHomeserver: false,
                 });
             } else if (state === AutoDiscovery.PROMPT) {
                 this.setState({
-                    discoveredHsUrl: "",
-                    discoveredIsUrl: "",
                     discoveryError: "",
                     findingHomeserver: false,
                 });
             } else if (state === AutoDiscovery.SUCCESS) {
                 this.setState({
-                    discoveredHsUrl: discovery["m.homeserver"].base_url,
-                    discoveredIsUrl:
-                        discovery["m.identity_server"].state === AutoDiscovery.SUCCESS
-                            ? discovery["m.identity_server"].base_url
-                            : "",
                     discoveryError: "",
                     findingHomeserver: false,
                 });
+                this.onServerConfigChange({
+                    hsUrl: discovery["m.homeserver"].base_url,
+                    isUrl: discovery["m.identity_server"].state === AutoDiscovery.SUCCESS
+                        ? discovery["m.identity_server"].base_url
+                        : "",
+                });
             } else {
                 console.warn("Unknown state for m.homeserver in discovery response: ", discovery);
                 this.setState({
-                    discoveredHsUrl: "",
-                    discoveredIsUrl: "",
                     discoveryError: _t("Unknown failure discovering homeserver"),
                     findingHomeserver: false,
                 });
@@ -361,8 +395,8 @@ module.exports = React.createClass({
 
     _initLoginLogic: function(hsUrl, isUrl) {
         const self = this;
-        hsUrl = hsUrl || this.state.enteredHomeserverUrl;
-        isUrl = isUrl || this.state.enteredIdentityServerUrl;
+        hsUrl = hsUrl || this.state.enteredHsUrl;
+        isUrl = isUrl || this.state.enteredIsUrl;
 
         const fallbackHsUrl = hsUrl === this.props.defaultHsUrl ? this.props.fallbackHsUrl : null;
 
@@ -372,8 +406,8 @@ module.exports = React.createClass({
         this._loginLogic = loginLogic;
 
         this.setState({
-            enteredHomeserverUrl: hsUrl,
-            enteredIdentityServerUrl: isUrl,
+            enteredHsUrl: hsUrl,
+            enteredIsUrl: isUrl,
             busy: true,
             loginIncorrect: false,
         });
@@ -439,15 +473,17 @@ module.exports = React.createClass({
 
         if (err.cors === 'rejected') {
             if (window.location.protocol === 'https:' &&
-                (this.state.enteredHomeserverUrl.startsWith("http:") ||
-                 !this.state.enteredHomeserverUrl.startsWith("http"))
+                (this.state.enteredHsUrl.startsWith("http:") ||
+                 !this.state.enteredHsUrl.startsWith("http"))
             ) {
                 errorText = <span>
                     { _t("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
                         "Either use HTTPS or <a>enable unsafe scripts</a>.", {},
                         {
                             'a': (sub) => {
-                                return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">
+                                return <a target="_blank" rel="noopener"
+                                    href="https://www.google.com/search?&q=enable%20unsafe%20scripts"
+                                >
                                     { sub }
                                 </a>;
                             },
@@ -461,7 +497,9 @@ module.exports = React.createClass({
                         "is not blocking requests.", {},
                         {
                             'a': (sub) => {
-                                return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>;
+                                return <a target="_blank" rel="noopener"
+                                    href={this.state.enteredHsUrl}
+                                >{ sub }</a>;
                             },
                         },
                     ) }
@@ -472,7 +510,49 @@ module.exports = React.createClass({
         return errorText;
     },
 
-    componentForStep: function(step) {
+    renderServerComponent() {
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
+        }
+
+        if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
+            return null;
+        }
+
+        const serverDetails = <ServerConfig
+            customHsUrl={this.state.enteredHsUrl}
+            customIsUrl={this.state.enteredIsUrl}
+            defaultHsUrl={this.props.defaultHsUrl}
+            defaultIsUrl={this.props.defaultIsUrl}
+            onServerConfigChange={this.onServerConfigChange}
+            delayTimeMs={250}
+        />;
+
+        let nextButton = null;
+        if (PHASES_ENABLED) {
+            nextButton = <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>;
+        }
+
+        return <div>
+            {serverDetails}
+            {nextButton}
+        </div>;
+    },
+
+    renderLoginComponentForStep() {
+        if (PHASES_ENABLED && this.state.phase !== PHASE_LOGIN) {
+            return null;
+        }
+
+        const step = this.state.currentFlow;
+
         if (!step) {
             return null;
         }
@@ -487,11 +567,26 @@ module.exports = React.createClass({
     },
 
     _renderPasswordStep: function() {
-        const PasswordLogin = sdk.getComponent('login.PasswordLogin');
+        const PasswordLogin = sdk.getComponent('auth.PasswordLogin');
+
+        let onEditServerDetailsClick = null;
+        // If custom URLs are allowed, wire up the server details edit link.
+        if (PHASES_ENABLED && !SdkConfig.get()['disable_custom_urls']) {
+            onEditServerDetailsClick = this.onEditServerDetailsClick;
+        }
+
+        // If the current HS URL is the default HS URL, then we can label it
+        // with the default HS name (if it exists).
+        let hsName;
+        if (this.state.enteredHsUrl === this.props.defaultHsUrl) {
+            hsName = this.props.defaultServerName;
+        }
+
         return (
             <PasswordLogin
                onSubmit={this.onPasswordLogin}
                onError={this.onPasswordLoginError}
+               onEditServerDetailsClick={onEditServerDetailsClick}
                initialUsername={this.state.username}
                initialPhoneCountry={this.state.phoneCountry}
                initialPhoneNumber={this.state.phoneNumber}
@@ -499,27 +594,35 @@ module.exports = React.createClass({
                onUsernameBlur={this.onUsernameBlur}
                onPhoneCountryChanged={this.onPhoneCountryChanged}
                onPhoneNumberChanged={this.onPhoneNumberChanged}
+               onPhoneNumberBlur={this.onPhoneNumberBlur}
                onForgotPasswordClick={this.props.onForgotPasswordClick}
                loginIncorrect={this.state.loginIncorrect}
-               hsUrl={this.state.enteredHomeserverUrl}
-               hsName={this.props.defaultServerName}
+               hsName={hsName}
+               hsUrl={this.state.enteredHsUrl}
                disableSubmit={this.state.findingHomeserver}
                />
         );
     },
 
     _renderSsoStep: function(url) {
+        // XXX: This link does *not* have a target="_blank" because single sign-on relies on
+        // redirecting the user back to a URI once they're logged in. On the web, this means
+        // we use the same window and redirect back to riot. On electron, this actually
+        // opens the SSO page in the electron app itself due to
+        // https://github.com/electron/electron/issues/8841 and so happens to work.
+        // If this bug gets fixed, it will break SSO since it will open the SSO page in the
+        // user's browser, let them log into their SSO provider, then redirect their browser
+        // to vector://vector which, of course, will not work.
         return (
-            <a href={url} className="mx_Login_sso_link">{ _t('Sign in with single sign-on') }</a>
+            <a href={url} className="mx_Login_sso_link mx_Login_submit">{ _t('Sign in with single sign-on') }</a>
         );
     },
 
     render: function() {
         const Loader = sdk.getComponent("elements.Spinner");
-        const LoginPage = sdk.getComponent("login.LoginPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const AuthPage = sdk.getComponent("auth.AuthPage");
+        const AuthHeader = sdk.getComponent("auth.AuthHeader");
+        const AuthBody = sdk.getComponent("auth.AuthBody");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -527,35 +630,11 @@ module.exports = React.createClass({
         let loginAsGuestJsx;
         if (this.props.enableGuest) {
             loginAsGuestJsx =
-                <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
+                <a className="mx_AuthBody_changeFlow" onClick={this._onLoginAsGuestClick} href="#">
                     { _t('Try the app first') }
                 </a>;
         }
 
-        let serverConfig;
-        let header;
-
-        if (!SdkConfig.get()['disable_custom_urls']) {
-            serverConfig = <ServerConfig ref="serverConfig"
-                withToggleButton={true}
-                customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
-                customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
-                defaultHsUrl={this.props.defaultHsUrl}
-                defaultIsUrl={this.props.defaultIsUrl}
-                onServerConfigChange={this.onServerConfigChange}
-                delayTimeMs={1000} />;
-        }
-
-        // FIXME: remove status.im theme tweaks
-        const theme = SettingsStore.getValue("theme");
-        if (theme !== "status") {
-            header = <h2>{ _t('Sign in') } { loader }</h2>;
-        } else {
-            if (!errorText) {
-                header = <h2>{ _t('Sign in to get started') } { loader }</h2>;
-            }
-        }
-
         let errorTextSection;
         if (errorText) {
             errorTextSection = (
@@ -565,26 +644,23 @@ module.exports = React.createClass({
             );
         }
 
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
-                    <div>
-                        { header }
-                        { errorTextSection }
-                        { this.componentForStep(this.state.currentFlow) }
-                        { serverConfig }
-                        <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
-                            { _t('Create an account') }
-                        </a>
-                        { loginAsGuestJsx }
-                        <LanguageSelector />
-                        <LoginFooter />
-                    </div>
-                </div>
-            </LoginPage>
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2>
+                        {_t('Sign in')}
+                        {loader}
+                    </h2>
+                    { errorTextSection }
+                    { this.renderServerComponent() }
+                    { this.renderLoginComponentForStep() }
+                    <a className="mx_AuthBody_changeFlow" onClick={this.onRegisterClick} href="#">
+                        { _t('Create account') }
+                    </a>
+                    { loginAsGuestJsx }
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/PostRegistration.js

@@ -60,12 +60,13 @@ module.exports = React.createClass({
     render: function() {
         const ChangeDisplayName = sdk.getComponent('settings.ChangeDisplayName');
         const ChangeAvatar = sdk.getComponent('settings.ChangeAvatar');
-        const LoginPage = sdk.getComponent('login.LoginPage');
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
+        const AuthPage = sdk.getComponent('auth.AuthPage');
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
         return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
                     <div className="mx_Login_profile">
                         { _t('Set a display name:') }
                         <ChangeDisplayName />
@@ -75,8 +76,8 @@ module.exports = React.createClass({
                         <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
                         { this.state.errorString }
                     </div>
-                </div>
-            </LoginPage>
+                </AuthBody>
+            </AuthPage>
         );
     },
 });

src/components/structures/auth/Registration.js

@@ -0,0 +1,585 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+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.
+*/
+
+import Matrix from 'matrix-js-sdk';
+
+import Promise from 'bluebird';
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import sdk from '../../../index';
+import { _t, _td } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
+import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
+import * as ServerType from '../../views/auth/ServerTypeSelector';
+
+const MIN_PASSWORD_LENGTH = 6;
+
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the appropriate registration flow(s) for the server
+const PHASE_REGISTRATION = 1;
+
+// Enable phases for registration
+const PHASES_ENABLED = true;
+
+module.exports = React.createClass({
+    displayName: 'Registration',
+
+    propTypes: {
+        onLoggedIn: PropTypes.func.isRequired,
+        clientSecret: PropTypes.string,
+        sessionId: PropTypes.string,
+        makeRegistrationUrl: PropTypes.func.isRequired,
+        idSid: PropTypes.string,
+        // The default server name to use when the user hasn't specified
+        // one. If set, `defaultHsUrl` and `defaultHsUrl` were derived for this
+        // via `.well-known` discovery. The server name is used instead of the
+        // HS URL when talking about "your account".
+        defaultServerName: PropTypes.string,
+        // An error passed along from higher up explaining that something
+        // went wrong when finding the defaultHsUrl.
+        defaultServerDiscoveryError: PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
+        defaultHsUrl: PropTypes.string,
+        defaultIsUrl: PropTypes.string,
+        skipServerDetails: PropTypes.bool,
+        brand: PropTypes.string,
+        email: PropTypes.string,
+        // registration shouldn't know or care how login is done.
+        onLoginClick: PropTypes.func.isRequired,
+        onServerConfigChange: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        const serverType = ServerType.getTypeFromHsUrl(this.props.customHsUrl);
+
+        const customURLsAllowed = !SdkConfig.get()['disable_custom_urls'];
+        let initialPhase = this.getDefaultPhaseForServerType(serverType);
+        if (
+            // if we have these two, skip to the good bit
+            // (they could come in from the URL params in a
+            // registration email link)
+            (this.props.clientSecret && this.props.sessionId) ||
+            // if custom URLs aren't allowed, skip to form
+            !customURLsAllowed ||
+            // if other logic says to, skip to form
+            this.props.skipServerDetails
+        ) {
+            // TODO: It would seem we've now added enough conditions here that the initial
+            // phase will _always_ be the form. It's tempting to remove the complexity and
+            // just do that, but we keep tweaking and changing auth, so let's wait until
+            // things settle a bit.
+            // Filed https://github.com/vector-im/riot-web/issues/8886 to track this.
+            initialPhase = PHASE_REGISTRATION;
+        }
+
+        return {
+            busy: false,
+            errorText: null,
+            // We remember the values entered by the user because
+            // the registration form will be unmounted during the
+            // course of registration, but if there's an error we
+            // want to bring back the registration form with the
+            // values the user entered still in it. We can keep
+            // them in this component's state since this component
+            // persist for the duration of the registration process.
+            formVals: {
+                email: this.props.email,
+            },
+            // true if we're waiting for the user to complete
+            // user-interactive auth
+            // If we've been given a session ID, we're resuming
+            // straight back into UI auth
+            doingUIAuth: Boolean(this.props.sessionId),
+            serverType,
+            hsUrl: this.props.customHsUrl,
+            isUrl: this.props.customIsUrl,
+            // Phase of the overall registration dialog.
+            phase: initialPhase,
+            flows: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._replaceClient();
+    },
+
+    onServerConfigChange: function(config) {
+        const newState = {};
+        if (config.hsUrl !== undefined) {
+            newState.hsUrl = config.hsUrl;
+        }
+        if (config.isUrl !== undefined) {
+            newState.isUrl = config.isUrl;
+        }
+        this.props.onServerConfigChange(config);
+        this.setState(newState, () => {
+            this._replaceClient();
+        });
+    },
+
+    getDefaultPhaseForServerType(type) {
+        switch (type) {
+            case ServerType.FREE: {
+                // Move directly to the registration phase since the server
+                // details are fixed.
+                return PHASE_REGISTRATION;
+            }
+            case ServerType.PREMIUM:
+            case ServerType.ADVANCED:
+                return PHASE_SERVER_DETAILS;
+        }
+    },
+
+    onServerTypeChange(type) {
+        this.setState({
+            serverType: type,
+        });
+
+        // When changing server types, set the HS / IS URLs to reasonable defaults for the
+        // the new type.
+        switch (type) {
+            case ServerType.FREE: {
+                const { hsUrl, isUrl } = ServerType.TYPES.FREE;
+                this.onServerConfigChange({
+                    hsUrl,
+                    isUrl,
+                });
+                break;
+            }
+            case ServerType.PREMIUM:
+            case ServerType.ADVANCED:
+                this.onServerConfigChange({
+                    hsUrl: this.props.defaultHsUrl,
+                    isUrl: this.props.defaultIsUrl,
+                });
+                break;
+        }
+
+        // Reset the phase to default phase for the server type.
+        this.setState({
+            phase: this.getDefaultPhaseForServerType(type),
+        });
+    },
+
+    _replaceClient: async function() {
+        this.setState({
+            errorText: null,
+        });
+        this._matrixClient = Matrix.createClient({
+            baseUrl: this.state.hsUrl,
+            idBaseUrl: this.state.isUrl,
+        });
+        try {
+            await this._makeRegisterRequest({});
+            // This should never succeed since we specified an empty
+            // auth object.
+            console.log("Expecting 401 from register request but got success!");
+        } catch (e) {
+            if (e.httpStatus === 401) {
+                this.setState({
+                    flows: e.data.flows,
+                });
+            } else if (e.httpStatus === 403 && e.errcode === "M_UNKNOWN") {
+                this.setState({
+                    errorText: _t("Registration has been disabled on this homeserver."),
+                });
+            } else {
+                this.setState({
+                    errorText: _t("Unable to query for supported registration methods."),
+                });
+            }
+        }
+    },
+
+    onFormSubmit: function(formVals) {
+        // Don't allow the user to register if there's a discovery error
+        // Without this, the user could end up registering on the wrong homeserver.
+        if (this.props.defaultServerDiscoveryError) {
+            this.setState({errorText: this.props.defaultServerDiscoveryError});
+            return;
+        }
+        this.setState({
+            errorText: "",
+            busy: true,
+            formVals: formVals,
+            doingUIAuth: true,
+        });
+    },
+
+    _onUIAuthFinished: async function(success, response, extra) {
+        if (!success) {
+            let msg = response.message || response.toString();
+            // can we give a better error message?
+            if (response.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
+                const errorTop = messageForResourceLimitError(
+                    response.data.limit_type,
+                    response.data.admin_contact, {
+                    'monthly_active_user': _td(
+                        "This homeserver has hit its Monthly Active User limit.",
+                    ),
+                    '': _td(
+                        "This homeserver has exceeded one of its resource limits.",
+                    ),
+                });
+                const errorDetail = messageForResourceLimitError(
+                    response.data.limit_type,
+                    response.data.admin_contact, {
+                    '': _td(
+                        "Please <a>contact your service administrator</a> to continue using this service.",
+                    ),
+                });
+                msg = <div>
+                    <p>{errorTop}</p>
+                    <p>{errorDetail}</p>
+                </div>;
+            } else if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
+                let msisdnAvailable = false;
+                for (const flow of response.available_flows) {
+                    msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
+                }
+                if (!msisdnAvailable) {
+                    msg = _t('This server does not support authentication with a phone number.');
+                }
+            }
+            this.setState({
+                busy: false,
+                doingUIAuth: false,
+                errorText: msg,
+            });
+            return;
+        }
+
+        this.setState({
+            // we're still busy until we get unmounted: don't show the registration form again
+            busy: true,
+            doingUIAuth: false,
+        });
+
+        const cli = await this.props.onLoggedIn({
+            userId: response.user_id,
+            deviceId: response.device_id,
+            homeserverUrl: this._matrixClient.getHomeserverUrl(),
+            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
+            accessToken: response.access_token,
+        });
+
+        this._setupPushers(cli);
+    },
+
+    _setupPushers: function(matrixClient) {
+        if (!this.props.brand) {
+            return Promise.resolve();
+        }
+        return matrixClient.getPushers().then((resp)=>{
+            const pushers = resp.pushers;
+            for (let i = 0; i < pushers.length; ++i) {
+                if (pushers[i].kind === 'email') {
+                    const emailPusher = pushers[i];
+                    emailPusher.data = { brand: this.props.brand };
+                    matrixClient.setPusher(emailPusher).done(() => {
+                        console.log("Set email branding to " + this.props.brand);
+                    }, (error) => {
+                        console.error("Couldn't set email branding: " + error);
+                    });
+                }
+            }
+        }, (error) => {
+            console.error("Couldn't get pushers: " + error);
+        });
+    },
+
+    onFormValidationChange: function(fieldErrors) {
+        // `fieldErrors` is an object mapping field IDs to error codes when there is an
+        // error or `null` for no error, so the values array will be something like:
+        // `[ null, "RegistrationForm.ERR_PASSWORD_MISSING", null]`
+        // Find the first non-null error code and show that.
+        const errCode = Object.values(fieldErrors).find(value => !!value);
+        if (!errCode) {
+            this.setState({
+                errorText: null,
+            });
+            return;
+        }
+
+        let errMsg;
+        switch (errCode) {
+            case "RegistrationForm.ERR_PASSWORD_MISSING":
+                errMsg = _t('Missing password.');
+                break;
+            case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+                errMsg = _t('Passwords don\'t match.');
+                break;
+            case "RegistrationForm.ERR_PASSWORD_LENGTH":
+                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
+                break;
+            case "RegistrationForm.ERR_EMAIL_INVALID":
+                errMsg = _t('This doesn\'t look like a valid email address.');
+                break;
+            case "RegistrationForm.ERR_PHONE_NUMBER_INVALID":
+                errMsg = _t('This doesn\'t look like a valid phone number.');
+                break;
+            case "RegistrationForm.ERR_MISSING_EMAIL":
+                errMsg = _t('An email address is required to register on this homeserver.');
+                break;
+            case "RegistrationForm.ERR_MISSING_PHONE_NUMBER":
+                errMsg = _t('A phone number is required to register on this homeserver.');
+                break;
+            case "RegistrationForm.ERR_USERNAME_INVALID":
+                errMsg = _t("A username can only contain lower case letters, numbers and '=_-./'");
+                break;
+            case "RegistrationForm.ERR_USERNAME_BLANK":
+                errMsg = _t('You need to enter a username.');
+                break;
+            default:
+                console.error("Unknown error code: %s", errCode);
+                errMsg = _t('An unknown error occurred.');
+                break;
+        }
+        this.setState({
+            errorText: errMsg,
+        });
+    },
+
+    onLoginClick: function(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.props.onLoginClick();
+    },
+
+    onGoToFormClicked(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this._replaceClient();
+        this.setState({
+            busy: false,
+            doingUIAuth: false,
+            phase: PHASE_REGISTRATION,
+        });
+    },
+
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_REGISTRATION,
+        });
+    },
+
+    onEditServerDetailsClick(ev) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_SERVER_DETAILS,
+        });
+    },
+
+    _makeRegisterRequest: function(auth) {
+        // Only send the bind params if we're sending username / pw params
+        // (Since we need to send no params at all to use the ones saved in the
+        // session).
+        const bindThreepids = this.state.formVals.password ? {
+            email: true,
+            msisdn: true,
+        } : {};
+
+        return this._matrixClient.register(
+            this.state.formVals.username,
+            this.state.formVals.password,
+            undefined, // session id: included in the auth dict already
+            auth,
+            bindThreepids,
+            null,
+        );
+    },
+
+    _getUIAuthInputs: function() {
+        return {
+            emailAddress: this.state.formVals.email,
+            phoneCountry: this.state.formVals.phoneCountry,
+            phoneNumber: this.state.formVals.phoneNumber,
+        };
+    },
+
+    renderServerComponent() {
+        const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
+        }
+
+        // If we're on a different phase, we only show the server type selector,
+        // which is always shown if we allow custom URLs at all.
+        if (PHASES_ENABLED && this.state.phase !== PHASE_SERVER_DETAILS) {
+            return <div>
+                <ServerTypeSelector
+                    selected={this.state.serverType}
+                    onChange={this.onServerTypeChange}
+                />
+            </div>;
+        }
+
+        let serverDetails = null;
+        switch (this.state.serverType) {
+            case ServerType.FREE:
+                break;
+            case ServerType.PREMIUM:
+                serverDetails = <ModularServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={250}
+                />;
+                break;
+            case ServerType.ADVANCED:
+                serverDetails = <ServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={250}
+                />;
+                break;
+        }
+
+        let nextButton = null;
+        if (PHASES_ENABLED) {
+            nextButton = <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>;
+        }
+
+        return <div>
+            <ServerTypeSelector
+                selected={this.state.serverType}
+                onChange={this.onServerTypeChange}
+            />
+            {serverDetails}
+            {nextButton}
+        </div>;
+    },
+
+    renderRegisterComponent() {
+        if (PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) {
+            return null;
+        }
+
+        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
+        const Spinner = sdk.getComponent('elements.Spinner');
+        const RegistrationForm = sdk.getComponent('auth.RegistrationForm');
+
+        if (this.state.doingUIAuth) {
+            return <InteractiveAuth
+                matrixClient={this._matrixClient}
+                makeRequest={this._makeRegisterRequest}
+                onAuthFinished={this._onUIAuthFinished}
+                inputs={this._getUIAuthInputs()}
+                makeRegistrationUrl={this.props.makeRegistrationUrl}
+                sessionId={this.props.sessionId}
+                clientSecret={this.props.clientSecret}
+                emailSid={this.props.idSid}
+                poll={true}
+            />;
+        } else if (this.state.busy || !this.state.flows) {
+            return <div className="mx_AuthBody_spinner">
+                <Spinner />
+            </div>;
+        } else {
+            let onEditServerDetailsClick = null;
+            // If custom URLs are allowed and we haven't selected the Free server type, wire
+            // up the server details edit link.
+            if (
+                PHASES_ENABLED &&
+                !SdkConfig.get()['disable_custom_urls'] &&
+                this.state.serverType !== ServerType.FREE
+            ) {
+                onEditServerDetailsClick = this.onEditServerDetailsClick;
+            }
+
+            // If the current HS URL is the default HS URL, then we can label it
+            // with the default HS name (if it exists).
+            let hsName;
+            if (this.state.hsUrl === this.props.defaultHsUrl) {
+                hsName = this.props.defaultServerName;
+            }
+
+            return <RegistrationForm
+                defaultUsername={this.state.formVals.username}
+                defaultEmail={this.state.formVals.email}
+                defaultPhoneCountry={this.state.formVals.phoneCountry}
+                defaultPhoneNumber={this.state.formVals.phoneNumber}
+                defaultPassword={this.state.formVals.password}
+                minPasswordLength={MIN_PASSWORD_LENGTH}
+                onValidationChange={this.onFormValidationChange}
+                onRegisterClick={this.onFormSubmit}
+                onEditServerDetailsClick={onEditServerDetailsClick}
+                flows={this.state.flows}
+                hsName={hsName}
+                hsUrl={this.state.hsUrl}
+            />;
+        }
+    },
+
+    render: function() {
+        const AuthHeader = sdk.getComponent('auth.AuthHeader');
+        const AuthBody = sdk.getComponent("auth.AuthBody");
+        const AuthPage = sdk.getComponent('auth.AuthPage');
+
+        let errorText;
+        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
+        if (err) {
+            errorText = <div className="mx_Login_error">{ err }</div>;
+        }
+
+        const signIn = <a className="mx_AuthBody_changeFlow" onClick={this.onLoginClick} href="#">
+            { _t('Sign in instead') }
+        </a>;
+
+        // Only show the 'go back' button if you're not looking at the form
+        let goBack;
+        if ((PHASES_ENABLED && this.state.phase !== PHASE_REGISTRATION) || this.state.doingUIAuth) {
+            goBack = <a className="mx_AuthBody_changeFlow" onClick={this.onGoToFormClicked} href="#">
+                { _t('Go back') }
+            </a>;
+        }
+
+        return (
+            <AuthPage>
+                <AuthHeader />
+                <AuthBody>
+                    <h2>{ _t('Create your account') }</h2>
+                    { errorText }
+                    { this.renderServerComponent() }
+                    { this.renderRegisterComponent() }
+                    { goBack }
+                    { signIn }
+                </AuthBody>
+            </AuthPage>
+        );
+    },
+});

src/components/structures/login/ForgotPassword.js

@@ -1,291 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017, 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 { _t } from '../../../languageHandler';
-import sdk from '../../../index';
-import Modal from "../../../Modal";
-import MatrixClientPeg from "../../../MatrixClientPeg";
-import SdkConfig from "../../../SdkConfig";
-
-import PasswordReset from "../../../PasswordReset";
-
-module.exports = React.createClass({
-    displayName: 'ForgotPassword',
-
-    propTypes: {
-        defaultHsUrl: PropTypes.string,
-        defaultIsUrl: PropTypes.string,
-        customHsUrl: PropTypes.string,
-        customIsUrl: PropTypes.string,
-        onLoginClick: PropTypes.func,
-        onRegisterClick: PropTypes.func,
-        onComplete: PropTypes.func.isRequired,
-
-        // The default server name to use when the user hasn't specified
-        // one. This is used when displaying the defaultHsUrl in the UI.
-        defaultServerName: PropTypes.string,
-
-        // An error passed along from higher up explaining that something
-        // went wrong when finding the defaultHsUrl.
-        defaultServerDiscoveryError: PropTypes.string,
-    },
-
-    getInitialState: function() {
-        return {
-            enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
-            enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
-            progress: null,
-            password: null,
-            password2: null,
-            errorText: null,
-        };
-    },
-
-    submitPasswordReset: function(hsUrl, identityUrl, email, password) {
-        this.setState({
-            progress: "sending_email",
-        });
-        this.reset = new PasswordReset(hsUrl, identityUrl);
-        this.reset.resetPassword(email, password).done(() => {
-            this.setState({
-                progress: "sent_email",
-            });
-        }, (err) => {
-            this.showErrorDialog(_t('Failed to send email') + ": " + err.message);
-            this.setState({
-                progress: null,
-            });
-        });
-    },
-
-    onVerify: function(ev) {
-        ev.preventDefault();
-        if (!this.reset) {
-            console.error("onVerify called before submitPasswordReset!");
-            return;
-        }
-        this.reset.checkEmailLinkClicked().done((res) => {
-            this.setState({ progress: "complete" });
-        }, (err) => {
-            this.showErrorDialog(err.message);
-        });
-    },
-
-    onSubmitForm: function(ev) {
-        ev.preventDefault();
-
-        // Don't allow the user to register if there's a discovery error
-        // Without this, the user could end up registering on the wrong homeserver.
-        if (this.props.defaultServerDiscoveryError) {
-            this.setState({errorText: this.props.defaultServerDiscoveryError});
-            return;
-        }
-
-        if (!this.state.email) {
-            this.showErrorDialog(_t('The email address linked to your account must be entered.'));
-        } else if (!this.state.password || !this.state.password2) {
-            this.showErrorDialog(_t('A new password must be entered.'));
-        } else if (this.state.password !== this.state.password2) {
-            this.showErrorDialog(_t('New passwords must match each other.'));
-        } else {
-            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            Modal.createTrackedDialog('Forgot Password Warning', '', QuestionDialog, {
-                title: _t('Warning!'),
-                description:
-                    <div>
-                        { _t(
-                            'Resetting password will currently reset any ' +
-                            'end-to-end encryption keys on all devices, ' +
-                            'making encrypted chat history unreadable, ' +
-                            'unless you first export your room keys and re-import ' +
-                            'them afterwards. In future this will be improved.',
-                        ) }
-                    </div>,
-                button: _t('Continue'),
-                extraButtons: [
-                    <button key="export_keys" className="mx_Dialog_primary"
-                            onClick={this._onExportE2eKeysClicked}>
-                        { _t('Export E2E room keys') }
-                    </button>,
-                ],
-                onFinished: (confirmed) => {
-                    if (confirmed) {
-                        this.submitPasswordReset(
-                            this.state.enteredHomeserverUrl, this.state.enteredIdentityServerUrl,
-                            this.state.email, this.state.password,
-                        );
-                    }
-                },
-            });
-        }
-    },
-
-    _onExportE2eKeysClicked: function() {
-        Modal.createTrackedDialogAsync('Export E2E Keys', 'Forgot Password',
-            import('../../../async-components/views/dialogs/ExportE2eKeysDialog'),
-            {
-                matrixClient: MatrixClientPeg.get(),
-            },
-        );
-    },
-
-    onInputChanged: function(stateKey, ev) {
-        this.setState({
-            [stateKey]: ev.target.value,
-        });
-    },
-
-    onServerConfigChange: function(config) {
-        const newState = {};
-        if (config.hsUrl !== undefined) {
-            newState.enteredHomeserverUrl = config.hsUrl;
-        }
-        if (config.isUrl !== undefined) {
-            newState.enteredIdentityServerUrl = config.isUrl;
-        }
-        this.setState(newState);
-    },
-
-    onLoginClick: function(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.props.onLoginClick();
-    },
-
-    onRegisterClick: function(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.props.onRegisterClick();
-    },
-
-    showErrorDialog: function(body, title) {
-        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-        Modal.createTrackedDialog('Forgot Password Error', '', ErrorDialog, {
-            title: title,
-            description: body,
-        });
-    },
-
-    render: function() {
-        const LoginPage = sdk.getComponent("login.LoginPage");
-        const LoginHeader = sdk.getComponent("login.LoginHeader");
-        const LoginFooter = sdk.getComponent("login.LoginFooter");
-        const ServerConfig = sdk.getComponent("login.ServerConfig");
-        const Spinner = sdk.getComponent("elements.Spinner");
-
-        let resetPasswordJsx;
-
-        if (this.state.progress === "sending_email") {
-            resetPasswordJsx = <Spinner />;
-        } else if (this.state.progress === "sent_email") {
-            resetPasswordJsx = (
-                <div className="mx_Login_prompt">
-                    { _t("An email has been sent to %(emailAddress)s. Once you've followed the link it contains, " +
-                        "click below.", { emailAddress: this.state.email }) }
-                    <br />
-                    <input className="mx_Login_submit" type="button" onClick={this.onVerify}
-                        value={_t('I have verified my email address')} />
-                </div>
-            );
-        } else if (this.state.progress === "complete") {
-            resetPasswordJsx = (
-                <div className="mx_Login_prompt">
-                    <p>{ _t('Your password has been reset') }.</p>
-                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. ' +
-                        'To re-enable notifications, sign in again on each device') }.</p>
-                    <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
-                        value={_t('Return to login screen')} />
-                </div>
-            );
-        } else {
-            let serverConfigSection;
-            if (!SdkConfig.get()['disable_custom_urls']) {
-                serverConfigSection = (
-                    <ServerConfig ref="serverConfig"
-                        withToggleButton={true}
-                        defaultHsUrl={this.props.defaultHsUrl}
-                        defaultIsUrl={this.props.defaultIsUrl}
-                        customHsUrl={this.props.customHsUrl}
-                        customIsUrl={this.props.customIsUrl}
-                        onServerConfigChange={this.onServerConfigChange}
-                        delayTimeMs={0} />
-                );
-            }
-
-            let errorText = null;
-            const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
-            }
-
-            const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
-            resetPasswordJsx = (
-            <div>
-                <div className="mx_Login_prompt">
-                    { _t('To reset your password, enter the email address linked to your account') }:
-                </div>
-                <div>
-                    <form onSubmit={this.onSubmitForm}>
-                        <input className="mx_Login_field" ref="user" type="text"
-                            name="reset_email" // define a name so browser's password autofill gets less confused
-                            value={this.state.email}
-                            onChange={this.onInputChanged.bind(this, "email")}
-                            placeholder={_t('Email address')} autoFocus />
-                        <br />
-                        <input className="mx_Login_field" ref="pass" type="password"
-                            name="reset_password"
-                            value={this.state.password}
-                            onChange={this.onInputChanged.bind(this, "password")}
-                            placeholder={_t('New password')} />
-                        <br />
-                        <input className="mx_Login_field" ref="pass" type="password"
-                            name="reset_password_confirm"
-                            value={this.state.password2}
-                            onChange={this.onInputChanged.bind(this, "password2")}
-                            placeholder={_t('Confirm your new password')} />
-                        <br />
-                        <input className="mx_Login_submit" type="submit" value={_t('Send Reset Email')} />
-                    </form>
-                    { serverConfigSection }
-                    { errorText }
-                    <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
-                        { _t('Return to login screen') }
-                    </a>
-                    <a className="mx_Login_create" onClick={this.onRegisterClick} href="#">
-                        { _t('Create an account') }
-                    </a>
-                    <LanguageSelector />
-                    <LoginFooter />
-                </div>
-            </div>
-            );
-        }
-
-
-        return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader />
-                    { resetPasswordJsx }
-                </div>
-            </LoginPage>
-        );
-    },
-});

src/components/structures/login/Registration.js

@@ -1,504 +0,0 @@
-/*
-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 Matrix from 'matrix-js-sdk';
-
-import Promise from 'bluebird';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-import RegistrationForm from '../../views/login/RegistrationForm';
-import RtsClient from '../../../RtsClient';
-import { _t, _td } from '../../../languageHandler';
-import SdkConfig from '../../../SdkConfig';
-import SettingsStore from "../../../settings/SettingsStore";
-import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-
-const MIN_PASSWORD_LENGTH = 6;
-
-module.exports = React.createClass({
-    displayName: 'Registration',
-
-    propTypes: {
-        onLoggedIn: PropTypes.func.isRequired,
-        clientSecret: PropTypes.string,
-        sessionId: PropTypes.string,
-        makeRegistrationUrl: PropTypes.func.isRequired,
-        idSid: PropTypes.string,
-        customHsUrl: PropTypes.string,
-        customIsUrl: PropTypes.string,
-        defaultHsUrl: PropTypes.string,
-        defaultIsUrl: PropTypes.string,
-        brand: PropTypes.string,
-        email: PropTypes.string,
-        referrer: PropTypes.string,
-        teamServerConfig: PropTypes.shape({
-            // Email address to request new teams
-            supportEmail: PropTypes.string.isRequired,
-            // URL of the riot-team-server to get team configurations and track referrals
-            teamServerURL: PropTypes.string.isRequired,
-        }),
-        teamSelected: PropTypes.object,
-
-        // The default server name to use when the user hasn't specified
-        // one. This is used when displaying the defaultHsUrl in the UI.
-        defaultServerName: PropTypes.string,
-
-        // An error passed along from higher up explaining that something
-        // went wrong when finding the defaultHsUrl.
-        defaultServerDiscoveryError: PropTypes.string,
-
-        defaultDeviceDisplayName: PropTypes.string,
-
-        // registration shouldn't know or care how login is done.
-        onLoginClick: PropTypes.func.isRequired,
-        onCancelClick: PropTypes.func,
-        onServerConfigChange: PropTypes.func.isRequired,
-
-        rtsClient: PropTypes.shape({
-            getTeamsConfig: PropTypes.func.isRequired,
-            trackReferral: PropTypes.func.isRequired,
-            getTeam: PropTypes.func.isRequired,
-        }),
-    },
-
-    getInitialState: function() {
-        return {
-            busy: false,
-            teamServerBusy: false,
-            errorText: null,
-            // We remember the values entered by the user because
-            // the registration form will be unmounted during the
-            // course of registration, but if there's an error we
-            // want to bring back the registration form with the
-            // values the user entered still in it. We can keep
-            // them in this component's state since this component
-            // persist for the duration of the registration process.
-            formVals: {
-                email: this.props.email,
-            },
-            // true if we're waiting for the user to complete
-            // user-interactive auth
-            // If we've been given a session ID, we're resuming
-            // straight back into UI auth
-            doingUIAuth: Boolean(this.props.sessionId),
-            hsUrl: this.props.customHsUrl,
-            isUrl: this.props.customIsUrl,
-            flows: null,
-        };
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-
-        this._replaceClient();
-
-        if (
-            this.props.teamServerConfig &&
-            this.props.teamServerConfig.teamServerURL &&
-            !this._rtsClient
-        ) {
-            this._rtsClient = this.props.rtsClient || new RtsClient(this.props.teamServerConfig.teamServerURL);
-
-            this.setState({
-                teamServerBusy: true,
-            });
-            // GET team configurations including domains, names and icons
-            this._rtsClient.getTeamsConfig().then((data) => {
-                const teamsConfig = {
-                    teams: data,
-                    supportEmail: this.props.teamServerConfig.supportEmail,
-                };
-                console.log('Setting teams config to ', teamsConfig);
-                this.setState({
-                    teamsConfig: teamsConfig,
-                    teamServerBusy: false,
-                });
-            }, (err) => {
-                console.error('Error retrieving config for teams', err);
-                this.setState({
-                    teamServerBusy: false,
-                });
-            });
-        }
-    },
-
-    onServerConfigChange: function(config) {
-        const newState = {};
-        if (config.hsUrl !== undefined) {
-            newState.hsUrl = config.hsUrl;
-        }
-        if (config.isUrl !== undefined) {
-            newState.isUrl = config.isUrl;
-        }
-        this.props.onServerConfigChange(config);
-        this.setState(newState, () => {
-            this._replaceClient();
-        });
-    },
-
-    _replaceClient: async function() {
-        this._matrixClient = Matrix.createClient({
-            baseUrl: this.state.hsUrl,
-            idBaseUrl: this.state.isUrl,
-        });
-        try {
-            await this._makeRegisterRequest({});
-            // This should never succeed since we specified an empty
-            // auth object.
-            console.log("Expecting 401 from register request but got success!");
-        } catch (e) {
-            if (e.httpStatus === 401) {
-                this.setState({
-                    flows: e.data.flows,
-                });
-            } else {
-                this.setState({
-                    errorText: _t("Unable to query for supported registration methods"),
-                });
-            }
-        }
-    },
-
-    onFormSubmit: function(formVals) {
-        // Don't allow the user to register if there's a discovery error
-        // Without this, the user could end up registering on the wrong homeserver.
-        if (this.props.defaultServerDiscoveryError) {
-            this.setState({errorText: this.props.defaultServerDiscoveryError});
-            return;
-        }
-        this.setState({
-            errorText: "",
-            busy: true,
-            formVals: formVals,
-            doingUIAuth: true,
-        });
-    },
-
-    _onUIAuthFinished: function(success, response, extra) {
-        if (!success) {
-            let msg = response.message || response.toString();
-            // can we give a better error message?
-            if (response.errcode == 'M_RESOURCE_LIMIT_EXCEEDED') {
-                const errorTop = messageForResourceLimitError(
-                    response.data.limit_type,
-                    response.data.admin_contact, {
-                    'monthly_active_user': _td(
-                        "This homeserver has hit its Monthly Active User limit.",
-                    ),
-                    '': _td(
-                        "This homeserver has exceeded one of its resource limits.",
-                    ),
-                });
-                const errorDetail = messageForResourceLimitError(
-                    response.data.limit_type,
-                    response.data.admin_contact, {
-                    '': _td(
-                        "Please <a>contact your service administrator</a> to continue using this service.",
-                    ),
-                });
-                msg = <div>
-                    <p>{errorTop}</p>
-                    <p>{errorDetail}</p>
-                </div>;
-            } else if (response.required_stages && response.required_stages.indexOf('m.login.msisdn') > -1) {
-                let msisdnAvailable = false;
-                for (const flow of response.available_flows) {
-                    msisdnAvailable |= flow.stages.indexOf('m.login.msisdn') > -1;
-                }
-                if (!msisdnAvailable) {
-                    msg = _t('This server does not support authentication with a phone number.');
-                }
-            }
-            this.setState({
-                busy: false,
-                doingUIAuth: false,
-                errorText: msg,
-            });
-            return;
-        }
-
-        this.setState({
-            // we're still busy until we get unmounted: don't show the registration form again
-            busy: true,
-            doingUIAuth: false,
-        });
-
-        // Done regardless of `teamSelected`. People registering with non-team emails
-        // will just nop. The point of this being we might not have the email address
-        // that the user registered with at this stage (depending on whether this
-        // is the client they initiated registration).
-        let trackPromise = Promise.resolve(null);
-        if (this._rtsClient && extra.emailSid) {
-            // Track referral if this.props.referrer set, get team_token in order to
-            // retrieve team config and see welcome page etc.
-            trackPromise = this._rtsClient.trackReferral(
-                this.props.referrer || '', // Default to empty string = not referred
-                extra.emailSid,
-                extra.clientSecret,
-            ).then((data) => {
-                const teamToken = data.team_token;
-                // Store for use /w welcome pages
-                window.localStorage.setItem('mx_team_token', teamToken);
-
-                this._rtsClient.getTeam(teamToken).then((team) => {
-                    console.log(
-                        `User successfully registered with team ${team.name}`,
-                    );
-                    if (!team.rooms) {
-                        return;
-                    }
-                    // Auto-join rooms
-                    team.rooms.forEach((room) => {
-                        if (room.auto_join && room.room_id) {
-                            console.log(`Auto-joining ${room.room_id}`);
-                            MatrixClientPeg.get().joinRoom(room.room_id);
-                        }
-                    });
-                }, (err) => {
-                    console.error('Error getting team config', err);
-                });
-
-                return teamToken;
-            }, (err) => {
-                console.error('Error tracking referral', err);
-            });
-        }
-
-        trackPromise.then((teamToken) => {
-            return this.props.onLoggedIn({
-                userId: response.user_id,
-                deviceId: response.device_id,
-                homeserverUrl: this._matrixClient.getHomeserverUrl(),
-                identityServerUrl: this._matrixClient.getIdentityServerUrl(),
-                accessToken: response.access_token,
-            }, teamToken);
-        }).then((cli) => {
-            return this._setupPushers(cli);
-        });
-    },
-
-    _setupPushers: function(matrixClient) {
-        if (!this.props.brand) {
-            return Promise.resolve();
-        }
-        return matrixClient.getPushers().then((resp)=>{
-            const pushers = resp.pushers;
-            for (let i = 0; i < pushers.length; ++i) {
-                if (pushers[i].kind === 'email') {
-                    const emailPusher = pushers[i];
-                    emailPusher.data = { brand: this.props.brand };
-                    matrixClient.setPusher(emailPusher).done(() => {
-                        console.log("Set email branding to " + this.props.brand);
-                    }, (error) => {
-                        console.error("Couldn't set email branding: " + error);
-                    });
-                }
-            }
-        }, (error) => {
-            console.error("Couldn't get pushers: " + error);
-        });
-    },
-
-    onFormValidationFailed: function(errCode) {
-        let errMsg;
-        switch (errCode) {
-            case "RegistrationForm.ERR_PASSWORD_MISSING":
-                errMsg = _t('Missing password.');
-                break;
-            case "RegistrationForm.ERR_PASSWORD_MISMATCH":
-                errMsg = _t('Passwords don\'t match.');
-                break;
-            case "RegistrationForm.ERR_PASSWORD_LENGTH":
-                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH});
-                break;
-            case "RegistrationForm.ERR_EMAIL_INVALID":
-                errMsg = _t('This doesn\'t look like a valid email address.');
-                break;
-            case "RegistrationForm.ERR_PHONE_NUMBER_INVALID":
-                errMsg = _t('This doesn\'t look like a valid phone number.');
-                break;
-            case "RegistrationForm.ERR_MISSING_EMAIL":
-                errMsg = _t('An email address is required to register on this homeserver.');
-                break;
-            case "RegistrationForm.ERR_MISSING_PHONE_NUMBER":
-                errMsg = _t('A phone number is required to register on this homeserver.');
-                break;
-            case "RegistrationForm.ERR_USERNAME_INVALID":
-                errMsg = _t("Only use lower case letters, numbers and '=_-./'");
-                break;
-            case "RegistrationForm.ERR_USERNAME_BLANK":
-                errMsg = _t('You need to enter a user name.');
-                break;
-            default:
-                console.error("Unknown error code: %s", errCode);
-                errMsg = _t('An unknown error occurred.');
-                break;
-        }
-        this.setState({
-            errorText: errMsg,
-        });
-    },
-
-    onTeamSelected: function(teamSelected) {
-        if (!this._unmounted) {
-            this.setState({ teamSelected });
-        }
-    },
-
-    onLoginClick: function(ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.props.onLoginClick();
-    },
-
-    _makeRegisterRequest: function(auth) {
-        // Only send the bind params if we're sending username / pw params
-        // (Since we need to send no params at all to use the ones saved in the
-        // session).
-        const bindThreepids = this.state.formVals.password ? {
-            email: true,
-            msisdn: true,
-        } : {};
-
-        return this._matrixClient.register(
-            this.state.formVals.username,
-            this.state.formVals.password,
-            undefined, // session id: included in the auth dict already
-            auth,
-            bindThreepids,
-            null,
-        );
-    },
-
-    _getUIAuthInputs: function() {
-        return {
-            emailAddress: this.state.formVals.email,
-            phoneCountry: this.state.formVals.phoneCountry,
-            phoneNumber: this.state.formVals.phoneNumber,
-        };
-    },
-
-    render: function() {
-        const LoginHeader = sdk.getComponent('login.LoginHeader');
-        const LoginFooter = sdk.getComponent('login.LoginFooter');
-        const LoginPage = sdk.getComponent('login.LoginPage');
-        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
-        const Spinner = sdk.getComponent("elements.Spinner");
-        const ServerConfig = sdk.getComponent('views.login.ServerConfig');
-
-        const theme = SettingsStore.getValue("theme");
-
-        let registerBody;
-        if (this.state.doingUIAuth) {
-            registerBody = (
-                <InteractiveAuth
-                    matrixClient={this._matrixClient}
-                    makeRequest={this._makeRegisterRequest}
-                    onAuthFinished={this._onUIAuthFinished}
-                    inputs={this._getUIAuthInputs()}
-                    makeRegistrationUrl={this.props.makeRegistrationUrl}
-                    sessionId={this.props.sessionId}
-                    clientSecret={this.props.clientSecret}
-                    emailSid={this.props.idSid}
-                    poll={true}
-                />
-            );
-        } else if (this.state.busy || this.state.teamServerBusy || !this.state.flows) {
-            registerBody = <Spinner />;
-        } else {
-            let serverConfigSection;
-            if (!SdkConfig.get()['disable_custom_urls']) {
-                serverConfigSection = (
-                    <ServerConfig ref="serverConfig"
-                        withToggleButton={true}
-                        customHsUrl={this.props.customHsUrl}
-                        customIsUrl={this.props.customIsUrl}
-                        defaultHsUrl={this.props.defaultHsUrl}
-                        defaultIsUrl={this.props.defaultIsUrl}
-                        onServerConfigChange={this.onServerConfigChange}
-                        delayTimeMs={1000}
-                    />
-                );
-            }
-            registerBody = (
-                <div>
-                    <RegistrationForm
-                        defaultUsername={this.state.formVals.username}
-                        defaultEmail={this.state.formVals.email}
-                        defaultPhoneCountry={this.state.formVals.phoneCountry}
-                        defaultPhoneNumber={this.state.formVals.phoneNumber}
-                        defaultPassword={this.state.formVals.password}
-                        teamsConfig={this.state.teamsConfig}
-                        minPasswordLength={MIN_PASSWORD_LENGTH}
-                        onError={this.onFormValidationFailed}
-                        onRegisterClick={this.onFormSubmit}
-                        onTeamSelected={this.onTeamSelected}
-                        flows={this.state.flows}
-                    />
-                    { serverConfigSection }
-                </div>
-            );
-        }
-
-        let header;
-        let errorText;
-        // FIXME: remove hardcoded Status team tweaks at some point
-        const err = this.state.errorText || this.props.defaultServerDiscoveryError;
-        if (theme === 'status' && err) {
-            header = <div className="mx_Login_error">{ err }</div>;
-        } else {
-            header = <h2>{ _t('Create an account') }</h2>;
-            if (err) {
-                errorText = <div className="mx_Login_error">{ err }</div>;
-            }
-        }
-
-        let signIn;
-        if (!this.state.doingUIAuth) {
-            signIn = (
-                <a className="mx_Login_create" onClick={this.onLoginClick} href="#">
-                    { theme === 'status' ? _t('Sign in') : _t('I already have an account') }
-                </a>
-            );
-        }
-
-        const LanguageSelector = sdk.getComponent('structures.login.LanguageSelector');
-
-        return (
-            <LoginPage>
-                <div className="mx_Login_box">
-                    <LoginHeader
-                        icon={this.state.teamSelected ?
-                            this.props.teamServerConfig.teamServerURL + "/static/common/" +
-                            this.state.teamSelected.domain + "/icon.png" :
-                            null}
-                    />
-                    { header }
-                    { registerBody }
-                    { signIn }
-                    { errorText }
-                    <LanguageSelector />
-                    <LoginFooter />
-                </div>
-            </LoginPage>
-        );
-    },
-});

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

@@ -1,6 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
-Copyright 2018 New Vector Ltd
+Copyright 2018, 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -18,12 +18,12 @@ limitations under the License.
 'use strict';
 
 const React = require('react');
-import { _t } from '../../languageHandler';
-const dis = require('../../dispatcher');
-const AccessibleButton = require('../../components/views/elements/AccessibleButton');
+import { _t } from '../../../languageHandler';
+const dis = require('../../../dispatcher');
+const AccessibleButton = require('../elements/AccessibleButton');
 
 module.exports = React.createClass({
-    displayName: 'LoginBox',
+    displayName: 'AuthButtons',
 
     propTypes: {
     },
@@ -38,18 +38,18 @@ module.exports = React.createClass({
 
     render: function() {
         const loginButton = (
-            <div className="mx_LoginBox_loginButton_wrapper">
-                <AccessibleButton className="mx_LoginBox_loginButton" element="button" onClick={this.onLoginClick}>
+            <div className="mx_AuthButtons_loginButton_wrapper">
+                <AccessibleButton className="mx_AuthButtons_loginButton" element="button" onClick={this.onLoginClick}>
                     { _t("Login") }
                 </AccessibleButton>
-                <AccessibleButton className="mx_LoginBox_registerButton" element="button" onClick={this.onRegisterClick}>
+                <AccessibleButton className="mx_AuthButtons_registerButton" element="button" onClick={this.onRegisterClick}>
                     { _t("Register") }
                 </AccessibleButton>
             </div>
         );
 
         return (
-            <div className="mx_LoginBox">
+            <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

@@ -32,7 +32,8 @@ export default function LanguageSelector() {
     if (SdkConfig.get()['disable_login_language_selector']) return <div />;
 
     const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
-    return <div className="mx_Login_language_div">
-        <LanguageDropdown onOptionChange={onChange} className="mx_Login_language" value={getCurrentLanguage()} />
-    </div>;
+    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>