move non-Riot-specific components over from riot-web

src/components/views/context_menus/GenericElementContextMenu.js

@@ -0,0 +1,60 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+/*
+ * This component can be used to display generic HTML content in a contextual
+ * menu.
+ */
+
+
+export default class GenericElementContextMenu extends React.Component {
+    static PropTypes = {
+        element: PropTypes.element.isRequired,
+        // Function to be called when the parent window is resized
+        // This can be used to reposition or close the menu on resize and
+        // ensure that it is not displayed in a stale position.
+        onResize: PropTypes.func,
+    };
+
+    constructor(props) {
+        super(props);
+        this.resize = this.resize.bind(this);
+    }
+
+    componentDidMount() {
+        this.resize = this.resize.bind(this);
+        window.addEventListener("resize", this.resize);
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener("resize", this.resize);
+    }
+
+    resize() {
+        if (this.props.onResize) {
+            this.props.onResize();
+        }
+    }
+
+    render() {
+        return <div>{ this.props.element }</div>;
+    }
+}

src/components/views/context_menus/GenericTextContextMenu.js

@@ -0,0 +1,30 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+export default class GenericTextContextMenu extends React.Component {
+    static PropTypes = {
+        message: PropTypes.string.isRequired,
+    };
+
+    render() {
+        return <div>{ this.props.message }</div>;
+    }
+}

src/components/views/context_menus/MessageContextMenu.js

@@ -0,0 +1,326 @@
+/*
+Copyright 2015, 2016 OpenMarket 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.
+*/
+
+'use strict';
+
+import React from 'react';
+
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import sdk from 'matrix-react-sdk';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import Resend from "matrix-react-sdk/lib/Resend";
+import SettingsStore from "matrix-react-sdk/lib/settings/SettingsStore";
+import {makeEventPermalink} from 'matrix-react-sdk/lib/matrix-to';
+import { isUrlPermitted } from 'matrix-react-sdk/lib/HtmlUtils';
+
+module.exports = React.createClass({
+    displayName: 'MessageContextMenu',
+
+    propTypes: {
+        /* the MatrixEvent associated with the context menu */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        /* an optional EventTileOps implementation that can be used to unhide preview widgets */
+        eventTileOps: React.PropTypes.object,
+
+        /* callback called when the menu is dismissed */
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState: function() {
+        return {
+            canRedact: false,
+            canPin: false,
+        };
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkPermissions);
+        this._checkPermissions();
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener('RoomMember.powerLevel', this._checkPermissions);
+        }
+    },
+
+    _checkPermissions: function() {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+
+        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
+        let canPin = room.currentState.mayClientSendStateEvent('m.room.pinned_events', cli);
+
+        // HACK: Intentionally say we can't pin if the user doesn't want to use the functionality
+        if (!SettingsStore.isFeatureEnabled("feature_pinning")) canPin = false;
+
+        this.setState({canRedact, canPin});
+    },
+
+    _isPinned: function() {
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        const pinnedEvent = room.currentState.getStateEvents('m.room.pinned_events', '');
+        if (!pinnedEvent) return false;
+        return pinnedEvent.getContent().pinned.includes(this.props.mxEvent.getId());
+    },
+
+    onResendClick: function() {
+        Resend.resend(this.props.mxEvent);
+        this.closeMenu();
+    },
+
+    onViewSourceClick: function() {
+        const ViewSource = sdk.getComponent('structures.ViewSource');
+        Modal.createTrackedDialog('View Event Source', '', ViewSource, {
+            content: this.props.mxEvent.event,
+        }, 'mx_Dialog_viewsource');
+        this.closeMenu();
+    },
+
+    onViewClearSourceClick: function() {
+        const ViewSource = sdk.getComponent('structures.ViewSource');
+        Modal.createTrackedDialog('View Clear Event Source', '', ViewSource, {
+            // FIXME: _clearEvent is private
+            content: this.props.mxEvent._clearEvent,
+        }, 'mx_Dialog_viewsource');
+        this.closeMenu();
+    },
+
+    onRedactClick: function() {
+        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+        Modal.createTrackedDialog('Confirm Redact Dialog', '', ConfirmRedactDialog, {
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                const cli = MatrixClientPeg.get();
+                cli.redactEvent(this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()).catch(function(e) {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    // display error message stating you couldn't delete this.
+                    const code = e.errcode || e.statusCode;
+                    Modal.createTrackedDialog('You cannot delete this message', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: _t('You cannot delete this message. (%(code)s)', {code}),
+                    });
+                }).done();
+            },
+        }, 'mx_Dialog_confirmredact');
+        this.closeMenu();
+    },
+
+    onCancelSendClick: function() {
+        Resend.removeFromQueue(this.props.mxEvent);
+        this.closeMenu();
+    },
+
+    onForwardClick: function() {
+        dis.dispatch({
+            action: 'forward_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
+    onPinClick: function() {
+        MatrixClientPeg.get().getStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', '')
+            .catch((e) => {
+                // Intercept the Event Not Found error and fall through the promise chain with no event.
+                if (e.errcode === "M_NOT_FOUND") return null;
+                throw e;
+            })
+            .then((event) => {
+                const eventIds = (event ? event.pinned : []) || [];
+                if (!eventIds.includes(this.props.mxEvent.getId())) {
+                    // Not pinned - add
+                    eventIds.push(this.props.mxEvent.getId());
+                } else {
+                    // Pinned - remove
+                    eventIds.splice(eventIds.indexOf(this.props.mxEvent.getId()), 1);
+                }
+
+                const cli = MatrixClientPeg.get();
+                cli.sendStateEvent(this.props.mxEvent.getRoomId(), 'm.room.pinned_events', {pinned: eventIds}, '');
+            });
+        this.closeMenu();
+    },
+
+    closeMenu: function() {
+        if (this.props.onFinished) this.props.onFinished();
+    },
+
+    onUnhidePreviewClick: function() {
+        if (this.props.eventTileOps) {
+            this.props.eventTileOps.unhideWidget();
+        }
+        this.closeMenu();
+    },
+
+    onQuoteClick: function() {
+        dis.dispatch({
+            action: 'quote',
+            text: this.props.eventTileOps.getInnerText(),
+        });
+        this.closeMenu();
+    },
+
+    onReplyClick: function() {
+        dis.dispatch({
+            action: 'quote_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
+    render: function() {
+        const eventStatus = this.props.mxEvent.status;
+        let resendButton;
+        let redactButton;
+        let cancelButton;
+        let forwardButton;
+        let pinButton;
+        let viewClearSourceButton;
+        let unhidePreviewButton;
+        let externalURLButton;
+        let quoteButton;
+        let replyButton;
+
+        if (eventStatus === 'not_sent') {
+            resendButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
+                    { _t('Resend') }
+                </div>
+            );
+        }
+
+        if (!eventStatus && this.state.canRedact) {
+            redactButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
+                    { _t('Remove') }
+                </div>
+            );
+        }
+
+        if (eventStatus === "queued" || eventStatus === "not_sent") {
+            cancelButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
+                    { _t('Cancel Sending') }
+                </div>
+            );
+        }
+
+        if (!eventStatus && this.props.mxEvent.getType() === 'm.room.message') {
+            const content = this.props.mxEvent.getContent();
+            if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
+                forwardButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
+                        { _t('Forward Message') }
+                    </div>
+                );
+
+                if (SettingsStore.isFeatureEnabled("feature_rich_quoting")) {
+                    replyButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                            { _t('Reply') }
+                        </div>
+                    );
+                }
+
+                if (this.state.canPin) {
+                    pinButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        </div>
+                    );
+                }
+            }
+        }
+
+        const viewSourceButton = (
+            <div className="mx_MessageContextMenu_field" onClick={this.onViewSourceClick}>
+                { _t('View Source') }
+            </div>
+        );
+
+        if (this.props.mxEvent.getType() !== this.props.mxEvent.getWireType()) {
+            viewClearSourceButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onViewClearSourceClick}>
+                    { _t('View Decrypted Source') }
+                </div>
+            );
+        }
+
+        if (this.props.eventTileOps) {
+            if (this.props.eventTileOps.isWidgetHidden()) {
+                unhidePreviewButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onUnhidePreviewClick}>
+                        { _t('Unhide Preview') }
+                    </div>
+                );
+            }
+        }
+
+        // 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.closeMenu}>{ _t('Permalink') }</a>
+            </div>
+        );
+
+        if (this.props.eventTileOps && this.props.eventTileOps.getInnerText) {
+            quoteButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onQuoteClick}>
+                    { _t('Quote') }
+                </div>
+            );
+        }
+
+        // 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)
+        ) {
+            externalURLButton = (
+                <div className="mx_MessageContextMenu_field">
+                    <a href={this.props.mxEvent.event.content.external_url}
+                      rel="noopener" target="_blank" onClick={this.closeMenu}>{ _t('Source URL') }</a>
+                </div>
+          );
+        }
+
+
+        return (
+            <div>
+                { resendButton }
+                { redactButton }
+                { cancelButton }
+                { forwardButton }
+                { pinButton }
+                { viewSourceButton }
+                { viewClearSourceButton }
+                { unhidePreviewButton }
+                { permalinkButton }
+                { quoteButton }
+                { replyButton }
+                { externalURLButton }
+            </div>
+        );
+    },
+});

src/components/views/context_menus/PresenceContextMenu.js

@@ -0,0 +1,101 @@
+/*
+Copyright 2017 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 { _t, _td } from 'matrix-react-sdk/lib/languageHandler';
+import sdk from 'matrix-react-sdk';
+
+const STATUS_LABELS = {
+    "online": _td("Online"),
+    "unavailable": _td("Away"),
+    "offline": _td("Appear Offline"),
+};
+
+const PresenceContextMenuOption = React.createClass({
+    displayName: 'PresenceContextMenuOption',
+
+    propTypes: {
+        forStatus: React.PropTypes.string.isRequired,
+        isCurrent: React.PropTypes.bool,
+        onChange: React.PropTypes.func.isRequired,
+    },
+
+    onClick: function() {
+        if (this.isCurrent) return;
+        this.props.onChange(this.props.forStatus);
+    },
+
+    render: function() {
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
+
+        const indicatorClasses = "mx_PresenceContextMenuOption_indicator "
+            + "mx_PresenceContextMenuOption_indicator_" + this.props.forStatus;
+
+        let classNames = "mx_PresenceContextMenuOption";
+        if (this.props.isCurrent) classNames += " mx_PresenceContextMenuOption_current";
+
+        return (
+            <AccessibleButton className={classNames} element="div" onClick={this.onClick}>
+                <div className={indicatorClasses}></div>
+                { _t(STATUS_LABELS[this.props.forStatus]) }
+            </AccessibleButton>
+        );
+    },
+});
+
+module.exports = React.createClass({
+    displayName: 'PresenceContextMenu',
+
+    propTypes: {
+        // "online", "unavailable", or "offline"
+        currentStatus: React.PropTypes.string.isRequired,
+
+        // Called when the user wants to change their status.
+        // Args: (newStatus:string)
+        onChange: React.PropTypes.func.isRequired,
+
+        // callback called when the menu is dismissed
+        onFinished: React.PropTypes.func,
+    },
+
+    getInitialState() {
+        return {
+            currentStatus: this.props.currentStatus,
+        };
+    },
+
+    onChange: function(newStatus) {
+        this.props.onChange(newStatus);
+        this.setState({currentStatus: newStatus});
+    },
+
+    render: function() {
+        const statusElements = [];
+        for (let status of Object.keys(STATUS_LABELS)) {
+            statusElements.push((
+                <PresenceContextMenuOption forStatus={status} key={status}
+                                           onChange={this.onChange}
+                                           isCurrent={status === this.state.currentStatus} />
+            ));
+        }
+
+        return (
+            <div>
+                { statusElements }
+            </div>
+        );
+    },
+});

src/components/views/context_menus/RoomTileContextMenu.js

@@ -0,0 +1,368 @@
+/*
+Copyright 2015, 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 Promise from 'bluebird';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import sdk from 'matrix-react-sdk';
+import { _t, _td } from 'matrix-react-sdk/lib/languageHandler';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import DMRoomMap from 'matrix-react-sdk/lib/utils/DMRoomMap';
+import * as Rooms from 'matrix-react-sdk/lib/Rooms';
+import * as RoomNotifs from 'matrix-react-sdk/lib/RoomNotifs';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import RoomListActions from 'matrix-react-sdk/lib/actions/RoomListActions';
+
+module.exports = React.createClass({
+    displayName: 'RoomTileContextMenu',
+
+    propTypes: {
+        room: PropTypes.object.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: PropTypes.func,
+    },
+
+    getInitialState() {
+        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
+        return {
+            roomNotifState: RoomNotifs.getRoomNotifsState(this.props.room.roomId),
+            isFavourite: this.props.room.tags.hasOwnProperty("m.favourite"),
+            isLowPriority: this.props.room.tags.hasOwnProperty("m.lowpriority"),
+            isDirectMessage: Boolean(dmRoomMap.getUserIdForRoomId(this.props.room.roomId)),
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _toggleTag: function(tagNameOn, tagNameOff) {
+        if (!MatrixClientPeg.get().isGuest()) {
+            Promise.delay(500).then(() => {
+                dis.dispatch(RoomListActions.tagRoom(
+                    MatrixClientPeg.get(),
+                    this.props.room,
+                    tagNameOff, tagNameOn,
+                    undefined, 0,
+                ), true);
+
+                this.props.onFinished();
+            });
+        }
+    },
+
+    _onClickFavourite: function() {
+        // Tag room as 'Favourite'
+        if (!this.state.isFavourite && this.state.isLowPriority) {
+            this.setState({
+                isFavourite: true,
+                isLowPriority: false,
+            });
+            this._toggleTag("m.favourite", "m.lowpriority");
+        } else if (this.state.isFavourite) {
+            this.setState({isFavourite: false});
+            this._toggleTag(null, "m.favourite");
+        } else if (!this.state.isFavourite) {
+            this.setState({isFavourite: true});
+            this._toggleTag("m.favourite");
+        }
+    },
+
+    _onClickLowPriority: function() {
+        // Tag room as 'Low Priority'
+        if (!this.state.isLowPriority && this.state.isFavourite) {
+            this.setState({
+                isFavourite: false,
+                isLowPriority: true,
+            });
+            this._toggleTag("m.lowpriority", "m.favourite");
+        } else if (this.state.isLowPriority) {
+            this.setState({isLowPriority: false});
+            this._toggleTag(null, "m.lowpriority");
+        } else if (!this.state.isLowPriority) {
+            this.setState({isLowPriority: true});
+            this._toggleTag("m.lowpriority");
+        }
+    },
+
+    _onClickDM: function() {
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        const newIsDirectMessage = !this.state.isDirectMessage;
+        this.setState({
+            isDirectMessage: newIsDirectMessage,
+        });
+
+        Rooms.guessAndSetDMRoom(
+            this.props.room, newIsDirectMessage,
+        ).delay(500).finally(() => {
+            // Close the context menu
+            if (this.props.onFinished) {
+                this.props.onFinished();
+            }
+        }, (err) => {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to set Direct Message status of room', '', ErrorDialog, {
+                title: _t('Failed to set Direct Message status of room'),
+                description: ((err && err.message) ? err.message : _t('Operation failed')),
+            });
+        });
+    },
+
+    _onClickLeave: function() {
+        // Leave room
+        dis.dispatch({
+            action: 'leave_room',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    _onClickReject: function() {
+        dis.dispatch({
+            action: 'reject_invite',
+            room_id: this.props.room.roomId,
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    _onClickForget: function() {
+        // FIXME: duplicated with RoomSettings (and dead code in RoomView)
+        MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
+            dis.dispatch({ action: 'view_next_room' });
+        }, function(err) {
+            const errCode = err.errcode || _td("unknown error code");
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to forget room', '', ErrorDialog, {
+                title: _t('Failed to forget room %(errCode)s', {errCode: errCode}),
+                description: ((err && err.message) ? err.message : _t('Operation failed')),
+            });
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    },
+
+    _saveNotifState: function(newState) {
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        const oldState = this.state.roomNotifState;
+        const roomId = this.props.room.roomId;
+
+        this.setState({
+            roomNotifState: newState,
+        });
+        RoomNotifs.setRoomNotifsState(roomId, newState).done(() => {
+            // delay slightly so that the user can see their state change
+            // before closing the menu
+            return Promise.delay(500).then(() => {
+                if (this._unmounted) return;
+                // Close the context menu
+                if (this.props.onFinished) {
+                    this.props.onFinished();
+                }
+            });
+        }, (error) => {
+            // TODO: some form of error notification to the user
+            // to inform them that their state change failed.
+            // For now we at least set the state back
+            if (this._unmounted) return;
+            this.setState({
+                roomNotifState: oldState,
+            });
+        });
+    },
+
+    _onClickAlertMe: function() {
+        this._saveNotifState(RoomNotifs.ALL_MESSAGES_LOUD);
+    },
+
+    _onClickAllNotifs: function() {
+        this._saveNotifState(RoomNotifs.ALL_MESSAGES);
+    },
+
+    _onClickMentions: function() {
+        this._saveNotifState(RoomNotifs.MENTIONS_ONLY);
+    },
+
+    _onClickMute: function() {
+        this._saveNotifState(RoomNotifs.MUTE);
+    },
+
+    _renderNotifMenu: function() {
+        const alertMeClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES_LOUD,
+        });
+
+        const allNotifsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.ALL_MESSAGES,
+        });
+
+        const mentionsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MENTIONS_ONLY,
+        });
+
+        const muteNotifsClasses = classNames({
+            'mx_RoomTileContextMenu_notif_field': true,
+            'mx_RoomTileContextMenu_notif_fieldSet': this.state.roomNotifState == RoomNotifs.MUTE,
+        });
+
+        return (
+            <div>
+                <div className="mx_RoomTileContextMenu_notif_picker" >
+                    <img src="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" />
+                    { _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" />
+                    { _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" />
+                    { _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" />
+                    { _t('Mute') }
+                </div>
+            </div>
+        );
+    },
+
+    _renderLeaveMenu: function(membership) {
+        if (!membership) {
+            return null;
+        }
+
+        let leaveClickHandler = null;
+        let leaveText = null;
+
+        switch (membership) {
+            case "join":
+                leaveClickHandler = this._onClickLeave;
+                leaveText = _t('Leave');
+                break;
+            case "leave":
+            case "ban":
+                leaveClickHandler = this._onClickForget;
+                leaveText = _t('Forget');
+                break;
+            case "invite":
+                leaveClickHandler = this._onClickReject;
+                leaveText = _t('Reject');
+                break;
+        }
+
+        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" />
+                    { leaveText }
+                </div>
+            </div>
+        );
+    },
+
+    _renderRoomTagMenu: function() {
+        const favouriteClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isFavourite,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        const lowPriorityClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isLowPriority,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        const dmClasses = classNames({
+            'mx_RoomTileContextMenu_tag_field': true,
+            'mx_RoomTileContextMenu_tag_fieldSet': this.state.isDirectMessage,
+            'mx_RoomTileContextMenu_tag_fieldDisabled': false,
+        });
+
+        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" />
+                    { _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" />
+                    { _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" />
+                    { _t('Direct Chat') }
+                </div>
+            </div>
+        );
+    },
+
+    render: function() {
+        const myMember = this.props.room.getMember(
+            MatrixClientPeg.get().credentials.userId,
+        );
+
+        // Can't set notif level or tags on non-join rooms
+        if (myMember.membership !== 'join') {
+            return this._renderLeaveMenu(myMember.membership);
+        }
+
+        return (
+            <div>
+                { this._renderNotifMenu() }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderLeaveMenu(myMember.membership) }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderRoomTagMenu() }
+            </div>
+        );
+    },
+});

src/components/views/context_menus/TagTileContextMenu.js

@@ -0,0 +1,75 @@
+/*
+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 { _t } from 'matrix-react-sdk/lib/languageHandler';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import TagOrderActions from 'matrix-react-sdk/lib/actions/TagOrderActions';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import sdk from 'matrix-react-sdk/lib/index';
+
+export default class TagTileContextMenu extends React.Component {
+    static propTypes = {
+        tag: PropTypes.string.isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor() {
+        super();
+
+        this._onViewCommunityClick = this._onViewCommunityClick.bind(this);
+        this._onRemoveClick = this._onRemoveClick.bind(this);
+    }
+
+    _onViewCommunityClick() {
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.tag,
+        });
+        this.props.onFinished();
+    }
+
+    _onRemoveClick() {
+        dis.dispatch(TagOrderActions.removeTag(
+            // XXX: Context menus don't have a MatrixClient context
+            MatrixClientPeg.get(),
+            this.props.tag,
+        ));
+        this.props.onFinished();
+    }
+
+    render() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        return <div>
+            <div className="mx_TagTileContextMenu_item" onClick={this._onViewCommunityClick} >
+                <TintableSvg
+                    className="mx_TagTileContextMenu_item_icon"
+                    src="img/icons-groups.svg"
+                    width="15"
+                    height="15"
+                />
+                { _t('View Community') }
+            </div>
+            <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') }
+            </div>
+        </div>;
+    }
+}

src/components/views/dialogs/BugReportDialog.js

@@ -0,0 +1,212 @@
+/*
+Copyright 2017 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+
+export default class BugReportDialog extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.state = {
+            sendLogs: true,
+            busy: false,
+            err: null,
+            issueUrl: "",
+            text: "",
+            progress: null,
+        };
+        this._unmounted = false;
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onCancel = this._onCancel.bind(this);
+        this._onTextChange = this._onTextChange.bind(this);
+        this._onIssueUrlChange = this._onIssueUrlChange.bind(this);
+        this._onSendLogsChange = this._onSendLogsChange.bind(this);
+        this._sendProgressCallback = this._sendProgressCallback.bind(this);
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    _onCancel(ev) {
+        this.props.onFinished(false);
+    }
+
+    _onSubmit(ev) {
+        const userText =
+            (this.state.text.length > 0 ? this.state.text + '\n\n': '') + 'Issue: ' +
+            (this.state.issueUrl.length > 0 ? this.state.issueUrl : 'No issue link given');
+
+        this.setState({ busy: true, progress: null, err: null });
+        this._sendProgressCallback(_t("Preparing to send logs"));
+
+        require(['../../../vector/submit-rageshake'], (s) => {
+            s(SdkConfig.get().bug_report_endpoint_url, {
+                userText,
+                sendLogs: true,
+                progressCallback: this._sendProgressCallback,
+            }).then(() => {
+                if (!this._unmounted) {
+                    this.props.onFinished(false);
+                    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                    Modal.createTrackedDialog('Bug report sent', '', QuestionDialog, {
+                        title: _t('Logs sent'),
+                        description: _t('Thank you!'),
+                        hasCancelButton: false,
+                    });
+                }
+            }, (err) => {
+                if (!this._unmounted) {
+                    this.setState({
+                        busy: false,
+                        progress: null,
+                        err: _t("Failed to send logs: ") + `${err.message}`,
+                    });
+                }
+            });
+        });
+    }
+
+    _onTextChange(ev) {
+        this.setState({ text: ev.target.value });
+    }
+
+    _onIssueUrlChange(ev) {
+        this.setState({ issueUrl: ev.target.value });
+    }
+
+   _onSendLogsChange(ev) {
+        this.setState({ sendLogs: ev.target.checked });
+    }
+
+    _sendProgressCallback(progress) {
+        if (this._unmounted) {
+            return;
+        }
+        this.setState({progress: progress});
+    }
+
+    render() {
+        const Loader = sdk.getComponent("elements.Spinner");
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        let cancelButton = null;
+        if (!this.state.busy) {
+            cancelButton = <button onClick={this._onCancel}>
+                { _t("Cancel") }
+            </button>;
+        }
+
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    <Loader />
+                    {this.state.progress} ...
+                </div>
+            );
+        }
+
+        return (
+            <div className="mx_BugReportDialog">
+                <div className="mx_Dialog_title">
+                    { _t("Submit debug logs") }
+                </div>
+                <div className="mx_Dialog_content">
+                    <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>
+                    <p>
+                        { _t(
+                            "<a>Click here</a> to create a GitHub issue.",
+                            {},
+                            {
+                                a: (sub) => <a
+                                    target="_blank"
+                                    href="https://github.com/vector-im/riot-web/issues/new"
+                                >
+                                    { sub }
+                                </a>,
+                            },
+                        ) }
+                    </p>
+                    <div className="mx_BugReportDialog_field_container">
+                        <label
+                            htmlFor="mx_BugReportDialog_issueUrl"
+                            className="mx_BugReportDialog_field_label"
+                        >
+                            { _t("GitHub issue link:") }
+                        </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/1337"
+                        />
+                    </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>
+                    {progress}
+                    {error}
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button
+                        className="mx_Dialog_primary danger"
+                        onClick={this._onSubmit}
+                        autoFocus={true}
+                        disabled={this.state.busy}
+                    >
+                        { _t("Send logs") }
+                    </button>
+
+                    {cancelButton}
+                </div>
+            </div>
+        );
+    }
+}
+
+BugReportDialog.propTypes = {
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/dialogs/ChangelogDialog.js

@@ -0,0 +1,94 @@
+/*
+ Copyright 2016 Aviral Dasgupta
+
+ 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 'matrix-react-sdk';
+import request from 'browser-request';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+
+const REPOS = ['vector-im/riot-web', 'matrix-org/matrix-react-sdk', 'matrix-org/matrix-js-sdk'];
+
+export default class ChangelogDialog extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {};
+    }
+
+    componentDidMount() {
+        const version = this.props.newVersion.split('-');
+        const version2 = this.props.version.split('-');
+        if(version == null || version2 == null) return;
+        // parse versions of form: [vectorversion]-react-[react-sdk-version]-js-[js-sdk-version]
+        for(let i=0; i<REPOS.length; i++) {
+            const oldVersion = version2[2*i];
+            const newVersion = version[2*i];
+            request(`https://api.github.com/repos/${REPOS[i]}/compare/${oldVersion}...${newVersion}`, (a, b, body) => {
+                if(body == null) return;
+                this.setState({[REPOS[i]]: JSON.parse(body).commits});
+            });
+        }
+    }
+
+    _elementsForCommit(commit) {
+        return (
+            <li key={commit.sha} className="mx_ChangelogDialog_li">
+                <a href={commit.html_url} target="_blank" rel="noopener">
+                    {commit.commit.message}
+                </a>
+            </li>
+        );
+    }
+
+    render() {
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+
+        const logs = REPOS.map(repo => {
+            if (this.state[repo] == null) return <Spinner key={repo} />;
+            return (
+                <div key={repo}>
+                    <h2>{repo}</h2>
+                    <ul>
+                    {this.state[repo].map(this._elementsForCommit)}
+                    </ul>
+                </div>
+            )
+        });
+
+        const content = (
+            <div className="mx_ChangelogDialog_content">
+                {this.props.version == null || this.props.newVersion == null ? <h2>{_t("Unavailable")}</h2> : logs}
+            </div>
+        );
+
+
+        return (
+            <QuestionDialog
+                title={_t("Changelog")}
+                description={content}
+                button={_t("Update")}
+                onFinished={this.props.onFinished}
+                />
+        )
+    }
+}
+
+ChangelogDialog.propTypes = {
+    version: React.PropTypes.string.isRequired,
+    newVersion: React.PropTypes.string.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/dialogs/DevtoolsDialog.js

@@ -0,0 +1,623 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from 'matrix-react-sdk';
+import SyntaxHighlight from '../elements/SyntaxHighlight';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+
+class DevtoolsComponent extends React.Component {
+    static contextTypes = {
+        roomId: PropTypes.string.isRequired,
+    };
+}
+
+class GenericEditor extends DevtoolsComponent {
+    // static propTypes = {onBack: PropTypes.func.isRequired};
+
+    constructor(props, context) {
+        super(props, context);
+        this._onChange = this._onChange.bind(this);
+        this.onBack = this.onBack.bind(this);
+    }
+
+    onBack() {
+        if (this.state.message) {
+            this.setState({ message: null });
+        } else {
+            this.props.onBack();
+        }
+    }
+
+    _onChange(e) {
+        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
+    }
+
+    _buttons() {
+        return <div className="mx_Dialog_buttons">
+            <button onClick={this.onBack}>{ _t('Back') }</button>
+            { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+        </div>;
+    }
+
+    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" />
+            </div>
+        </div>;
+    }
+}
+
+class SendCustomEvent extends GenericEditor {
+    static getLabel() { return _t('Send Custom Event'); }
+
+    static propTypes = {
+        onBack: PropTypes.func.isRequired,
+        forceStateEvent: PropTypes.bool,
+        inputs: PropTypes.object,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this._send = this._send.bind(this);
+
+        const {eventType, stateKey, evContent} = Object.assign({
+            eventType: '',
+            stateKey: '',
+            evContent: '{\n\n}',
+        }, this.props.inputs);
+
+        this.state = {
+            isStateEvent: Boolean(this.props.forceStateEvent),
+
+            eventType,
+            stateKey,
+            evContent,
+        };
+    }
+
+    send(content) {
+        const cli = MatrixClientPeg.get();
+        if (this.state.isStateEvent) {
+            return cli.sendStateEvent(this.context.roomId, this.state.eventType, content, this.state.stateKey);
+        } else {
+            return cli.sendEvent(this.context.roomId, this.state.eventType, content);
+        }
+    }
+
+    async _send() {
+        if (this.state.eventType === '') {
+            this.setState({ message: _t('You must specify an event type!') });
+            return;
+        }
+
+        let message;
+        try {
+            const content = JSON.parse(this.state.evContent);
+            await this.send(content);
+            message = _t('Event sent!');
+        } catch (e) {
+            message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
+        }
+        this.setState({ message });
+    }
+
+    render() {
+        if (this.state.message) {
+            return <div>
+                <div className="mx_Dialog_content">
+                    { this.state.message }
+                </div>
+                { this._buttons() }
+            </div>;
+        }
+
+        return <div>
+            <div className="mx_Dialog_content">
+                { this.textInput('eventType', _t('Event Type')) }
+                { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
+
+                <br />
+
+                <div className="mx_UserSettings_profileLabelCell">
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
+                </div>
+                <div>
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
+                </div>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.onBack}>{ _t('Back') }</button>
+                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && !this.props.forceStateEvent && <div style={{float: "right"}}>
+                    <input id="isStateEvent" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isStateEvent} />
+                    <label className="mx_DevTools_tgl-btn" data-tg-off="Event" data-tg-on="State Event" htmlFor="isStateEvent" />
+                </div> }
+            </div>
+        </div>;
+    }
+}
+
+class SendAccountData extends GenericEditor {
+    static getLabel() { return _t('Send Account Data'); }
+
+    static propTypes = {
+        isRoomAccountData: PropTypes.bool,
+        forceMode: PropTypes.bool,
+        inputs: PropTypes.object,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this._send = this._send.bind(this);
+
+        const {eventType, evContent} = Object.assign({
+            eventType: '',
+            evContent: '{\n\n}',
+        }, this.props.inputs);
+
+        this.state = {
+            isRoomAccountData: Boolean(this.props.isRoomAccountData),
+
+            eventType,
+            evContent,
+        };
+    }
+
+    send(content) {
+        const cli = MatrixClientPeg.get();
+        if (this.state.isRoomAccountData) {
+            return cli.setRoomAccountData(this.context.roomId, this.state.eventType, content);
+        }
+        return cli.setAccountData(this.state.eventType, content);
+    }
+
+    async _send() {
+        if (this.state.eventType === '') {
+            this.setState({ message: _t('You must specify an event type!') });
+            return;
+        }
+
+        let message;
+        try {
+            const content = JSON.parse(this.state.evContent);
+            await this.send(content);
+            message = _t('Event sent!');
+        } catch (e) {
+            message = _t('Failed to send custom event.') + ' (' + e.toString() + ')';
+        }
+        this.setState({ message });
+    }
+
+    render() {
+        if (this.state.message) {
+            return <div>
+                <div className="mx_Dialog_content">
+                    { this.state.message }
+                </div>
+                { this._buttons() }
+            </div>;
+        }
+
+        return <div>
+            <div className="mx_Dialog_content">
+                { this.textInput('eventType', _t('Event Type')) }
+                <br />
+
+                <div className="mx_UserSettings_profileLabelCell">
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
+                </div>
+                <div>
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_TextInputDialog_input" cols="63" rows="5" />
+                </div>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.onBack}>{ _t('Back') }</button>
+                { !this.state.message && <button onClick={this._send}>{ _t('Send') }</button> }
+                { !this.state.message && <div style={{float: "right"}}>
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} disabled={this.props.forceMode} />
+                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
+                </div> }
+            </div>
+        </div>;
+    }
+}
+
+class FilteredList extends React.Component {
+    static propTypes = {
+        children: PropTypes.any,
+        query: PropTypes.string,
+        onChange: PropTypes.func,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.onQuery = this.onQuery.bind(this);
+    }
+
+    onQuery(ev) {
+        if (this.props.onChange) this.props.onChange(ev.target.value);
+    }
+
+    filterChildren() {
+        if (this.props.query) {
+            const lowerQuery = this.props.query.toLowerCase();
+            return this.props.children.filter((child) => child.key.toLowerCase().includes(lowerQuery));
+        }
+        return this.props.children;
+    }
+
+    render() {
+        return <div>
+            <input size="64"
+                   onChange={this.onQuery}
+                   value={this.props.query}
+                   placeholder={_t('Filter results')}
+                   className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query" />
+            { this.filterChildren() }
+        </div>;
+    }
+}
+
+class RoomStateExplorer extends DevtoolsComponent {
+    static getLabel() { return _t('Explore Room State'); }
+
+
+    static propTypes = {
+        onBack: PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        const room = MatrixClientPeg.get().getRoom(this.context.roomId);
+        this.roomStateEvents = room.currentState.events;
+
+        this.onBack = this.onBack.bind(this);
+        this.editEv = this.editEv.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
+        this.onQueryStateKey = this.onQueryStateKey.bind(this);
+
+        this.state = {
+            eventType: null,
+            event: null,
+            editing: false,
+
+            queryEventType: '',
+            queryStateKey: '',
+        };
+    }
+
+    browseEventType(eventType) {
+        return () => {
+            this.setState({ eventType });
+        };
+    }
+
+    onViewSourceClick(event) {
+        return () => {
+            this.setState({ event });
+        };
+    }
+
+    onBack() {
+        if (this.state.editing) {
+            this.setState({ editing: false });
+        } else if (this.state.event) {
+            this.setState({ event: null });
+        } else if (this.state.eventType) {
+            this.setState({ eventType: null });
+        } else {
+            this.props.onBack();
+        }
+    }
+
+    editEv() {
+        this.setState({ editing: true });
+    }
+
+    onQueryEventType(filterEventType) {
+        this.setState({ queryEventType: filterEventType });
+    }
+
+    onQueryStateKey(filterStateKey) {
+        this.setState({ queryStateKey: filterStateKey });
+    }
+
+    render() {
+        if (this.state.event) {
+            if (this.state.editing) {
+                return <SendCustomEvent forceStateEvent={true} onBack={this.onBack} inputs={{
+                    eventType: this.state.event.getType(),
+                    evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
+                    stateKey: this.state.event.getStateKey(),
+                }} />;
+            }
+
+            return <div className="mx_ViewSource">
+                <div className="mx_Dialog_content">
+                    <SyntaxHighlight className="json">
+                        { JSON.stringify(this.state.event.event, null, 2) }
+                    </SyntaxHighlight>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onBack}>{ _t('Back') }</button>
+                    <button onClick={this.editEv}>{ _t('Edit') }</button>
+                </div>
+            </div>;
+        }
+
+        let list = null;
+
+        const classes = 'mx_DevTools_RoomStateExplorer_button';
+        if (this.state.eventType === null) {
+            list = <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
+                {
+                    Object.keys(this.roomStateEvents).map((evType) => {
+                        const stateGroup = this.roomStateEvents[evType];
+                        const stateKeys = Object.keys(stateGroup);
+
+                        let onClickFn;
+                        if (stateKeys.length > 1) {
+                            onClickFn = this.browseEventType(evType);
+                        } else if (stateKeys.length === 1) {
+                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        }
+
+                        return <button className={classes} key={evType} onClick={onClickFn}>
+                            { evType }
+                        </button>;
+                    })
+                }
+            </FilteredList>;
+        } else {
+            const stateGroup = this.roomStateEvents[this.state.eventType];
+
+            list = <FilteredList query={this.state.queryStateKey} onChange={this.onQueryStateKey}>
+                {
+                    Object.keys(stateGroup).map((stateKey) => {
+                        const ev = stateGroup[stateKey];
+                        return <button className={classes} key={stateKey} onClick={this.onViewSourceClick(ev)}>
+                            { stateKey }
+                        </button>;
+                    })
+                }
+            </FilteredList>;
+        }
+
+        return <div>
+            <div className="mx_Dialog_content">
+                { list }
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.onBack}>{ _t('Back') }</button>
+            </div>
+        </div>;
+    }
+}
+
+class AccountDataExplorer extends DevtoolsComponent {
+    static getLabel() { return _t('Explore Account Data'); }
+
+    static propTypes = {
+        onBack: PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.onBack = this.onBack.bind(this);
+        this.editEv = this.editEv.bind(this);
+        this._onChange = this._onChange.bind(this);
+        this.onQueryEventType = this.onQueryEventType.bind(this);
+
+        this.state = {
+            isRoomAccountData: false,
+            event: null,
+            editing: false,
+
+            queryEventType: '',
+        };
+    }
+
+    getData() {
+        const cli = MatrixClientPeg.get();
+        if (this.state.isRoomAccountData) {
+            return cli.getRoom(this.context.roomId).accountData;
+        }
+        return cli.store.accountData;
+    }
+
+    onViewSourceClick(event) {
+        return () => {
+            this.setState({ event });
+        };
+    }
+
+    onBack() {
+        if (this.state.editing) {
+            this.setState({ editing: false });
+        } else if (this.state.event) {
+            this.setState({ event: null });
+        } else {
+            this.props.onBack();
+        }
+    }
+
+    _onChange(e) {
+        this.setState({[e.target.id]: e.target.type === 'checkbox' ? e.target.checked : e.target.value});
+    }
+
+    editEv() {
+        this.setState({ editing: true });
+    }
+
+    onQueryEventType(queryEventType) {
+        this.setState({ queryEventType });
+    }
+
+    render() {
+        if (this.state.event) {
+            if (this.state.editing) {
+                return <SendAccountData isRoomAccountData={this.state.isRoomAccountData} onBack={this.onBack} inputs={{
+                    eventType: this.state.event.getType(),
+                    evContent: JSON.stringify(this.state.event.getContent(), null, '\t'),
+                }} forceMode={true} />;
+            }
+
+            return <div className="mx_ViewSource">
+                <div className="mx_Dialog_content">
+                    <SyntaxHighlight className="json">
+                        { JSON.stringify(this.state.event.event, null, 2) }
+                    </SyntaxHighlight>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onBack}>{ _t('Back') }</button>
+                    <button onClick={this.editEv}>{ _t('Edit') }</button>
+                </div>
+            </div>;
+        }
+
+        const rows = [];
+
+        const classes = 'mx_DevTools_RoomStateExplorer_button';
+
+        const data = this.getData();
+        Object.keys(data).forEach((evType) => {
+            const ev = data[evType];
+            rows.push(<button className={classes} key={evType} onClick={this.onViewSourceClick(ev)}>
+                { evType }
+            </button>);
+        });
+
+        return <div>
+            <div className="mx_Dialog_content">
+                <FilteredList query={this.state.queryEventType} onChange={this.onQueryEventType}>
+                    { rows }
+                </FilteredList>
+            </div>
+            <div className="mx_Dialog_buttons">
+                <button onClick={this.onBack}>{ _t('Back') }</button>
+                { !this.state.message && <div style={{float: "right"}}>
+                    <input id="isRoomAccountData" className="mx_DevTools_tgl mx_DevTools_tgl-flip" type="checkbox" onChange={this._onChange} checked={this.state.isRoomAccountData} />
+                    <label className="mx_DevTools_tgl-btn" data-tg-off="Account Data" data-tg-on="Room Data" htmlFor="isRoomAccountData" />
+                </div> }
+            </div>
+        </div>;
+    }
+}
+
+const Entries = [
+    SendCustomEvent,
+    RoomStateExplorer,
+    SendAccountData,
+    AccountDataExplorer,
+];
+
+export default class DevtoolsDialog extends React.Component {
+    static childContextTypes = {
+        roomId: PropTypes.string.isRequired,
+        // client: PropTypes.instanceOf(MatixClient),
+    };
+
+    static propTypes = {
+        roomId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+        this.onBack = this.onBack.bind(this);
+        this.onCancel = this.onCancel.bind(this);
+
+        this.state = {
+            mode: null,
+        };
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    getChildContext() {
+        return { roomId: this.props.roomId };
+    }
+
+    _setMode(mode) {
+        return () => {
+            this.setState({ mode });
+        };
+    }
+
+    onBack() {
+        if (this.prevMode) {
+            this.setState({ mode: this.prevMode });
+            this.prevMode = null;
+        } else {
+            this.setState({ mode: null });
+        }
+    }
+
+    onCancel() {
+        this.props.onFinished(false);
+    }
+
+    render() {
+        let body;
+
+        if (this.state.mode) {
+            body = <div>
+                <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
+                <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
+                <div className="mx_DevTools_label_bottom" />
+                <this.state.mode onBack={this.onBack} />
+            </div>;
+        } else {
+            const classes = "mx_DevTools_RoomStateExplorer_button";
+            body = <div>
+                <div>
+                    <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
+                    <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
+                    <div className="mx_DevTools_label_bottom" />
+
+                    <div className="mx_Dialog_content">
+                        { Entries.map((Entry) => {
+                            const label = Entry.getLabel();
+                            const onClick = this._setMode(Entry);
+                            return <button className={classes} key={label} onClick={onClick}>{ label }</button>;
+                        }) }
+                    </div>
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this.onCancel}>{ _t('Cancel') }</button>
+                </div>
+            </div>;
+        }
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        return (
+            <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished} title={_t('Developer Tools')}>
+                { body }
+            </BaseDialog>
+        );
+    }
+}

src/components/views/dialogs/SetPasswordDialog.js

@@ -0,0 +1,137 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import Modal from 'matrix-react-sdk/lib/Modal';
+
+const WarmFuzzy = function(props) {
+    const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+    let title = _t('You have successfully set a password!');
+    if (props.didSetEmail) {
+        title = _t('You have successfully set a password and an email address!');
+    }
+    const advice = _t('You can now return to your account after signing out, and sign in on other devices.');
+    let extraAdvice = null;
+    if (!props.didSetEmail) {
+        extraAdvice = _t('Remember, you can always set an email address in user settings if you change your mind.');
+    }
+
+    return <BaseDialog className="mx_SetPasswordDialog"
+        onFinished={props.onFinished}
+        title={ title }
+    >
+        <div className="mx_Dialog_content">
+            <p>
+                { advice }
+            </p>
+            <p>
+                { extraAdvice }
+            </p>
+        </div>
+        <div className="mx_Dialog_buttons">
+            <button
+                className="mx_Dialog_primary"
+                autoFocus={true}
+                onClick={props.onFinished}>
+                    { _t('Continue') }
+            </button>
+        </div>
+    </BaseDialog>;
+};
+
+/**
+ * Prompt the user to set a password
+ *
+ * On success, `onFinished()` when finished
+ */
+export default React.createClass({
+    displayName: 'SetPasswordDialog',
+    propTypes: {
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            error: null,
+        };
+    },
+
+    componentWillMount: function() {
+        console.info('SetPasswordDialog component will mount');
+    },
+
+    _onPasswordChanged: function(res) {
+        Modal.createDialog(WarmFuzzy, {
+            didSetEmail: res.didSetEmail,
+            onFinished: () => {
+                this._onContinueClicked();
+            },
+        });
+    },
+
+    _onContinueClicked: function() {
+        this.props.onFinished(true);
+    },
+
+    _onPasswordChangeError: function(err) {
+        let errMsg = err.error || "";
+        if (err.httpStatus === 403) {
+            errMsg = _t('Failed to change password. Is your password correct?');
+        } else if (err.httpStatus) {
+            errMsg += ' ' + _t(
+                '(HTTP status %(httpStatus)s)',
+                { httpStatus: err.httpStatus },
+            );
+        }
+        this.setState({
+            error: errMsg,
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const ChangePassword = sdk.getComponent('views.settings.ChangePassword');
+
+        return (
+            <BaseDialog className="mx_SetPasswordDialog"
+                onFinished={this.props.onFinished}
+                title={ _t('Please set a password!') }
+            >
+                <div className="mx_Dialog_content">
+                    <p>
+                        { _t('This will allow you to return to your account after signing out, and sign in on other devices.') }
+                    </p>
+                    <ChangePassword
+                        className="mx_SetPasswordDialog_change_password"
+                        rowClassName=""
+                        rowLabelClassName=""
+                        rowInputClassName=""
+                        buttonClassName="mx_Dialog_primary mx_SetPasswordDialog_change_password_button"
+                        confirm={false}
+                        autoFocusNewPasswordInput={true}
+                        shouldAskForEmail={true}
+                        onError={this._onPasswordChangeError}
+                        onFinished={this._onPasswordChanged} />
+                    <div className="error">
+                        { this.state.error }
+                    </div>
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/directory/NetworkDropdown.js

@@ -0,0 +1,254 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import {instanceForInstanceId} from '../../../utils/DirectoryUtils';
+
+const DEFAULT_ICON_URL = "img/network-matrix.svg";
+
+export default class NetworkDropdown extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.dropdownRootElement = null;
+        this.ignoreEvent = null;
+
+        this.onInputClick = this.onInputClick.bind(this);
+        this.onRootClick = this.onRootClick.bind(this);
+        this.onDocumentClick = this.onDocumentClick.bind(this);
+        this.onMenuOptionClick = this.onMenuOptionClick.bind(this);
+        this.onInputKeyUp = this.onInputKeyUp.bind(this);
+        this.collectRoot = this.collectRoot.bind(this);
+        this.collectInputTextBox = this.collectInputTextBox.bind(this);
+
+        this.inputTextBox = null;
+
+        const server = MatrixClientPeg.getHomeServerName();
+        this.state = {
+            expanded: false,
+            selectedServer: server,
+            selectedInstance: null,
+            includeAllNetworks: false,
+        };
+    }
+
+    componentWillMount() {
+        // Listen for all clicks on the document so we can close the
+        // menu when the user clicks somewhere else
+        document.addEventListener('click', this.onDocumentClick, false);
+
+        // fire this now so the defaults can be set up
+        this.props.onOptionChange(this.state.selectedServer, this.state.selectedInstance, this.state.includeAllNetworks);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this.onDocumentClick, false);
+    }
+
+    componentDidUpdate() {
+        if (this.state.expanded && this.inputTextBox) {
+            this.inputTextBox.focus();
+        }
+    }
+
+    onDocumentClick(ev) {
+        // Close the dropdown if the user clicks anywhere that isn't
+        // within our root element
+        if (ev !== this.ignoreEvent) {
+            this.setState({
+                expanded: false,
+            });
+        }
+    }
+
+    onRootClick(ev) {
+        // This captures any clicks that happen within our elements,
+        // such that we can then ignore them when they're seen by the
+        // click listener on the document handler, ie. not close the
+        // dropdown immediately after opening it.
+        // NB. We can't just stopPropagation() because then the event
+        // doesn't reach the React onClick().
+        this.ignoreEvent = ev;
+    }
+
+    onInputClick(ev) {
+        this.setState({
+            expanded: !this.state.expanded,
+        });
+        ev.preventDefault();
+    }
+
+    onMenuOptionClick(server, instance, includeAll) {
+        this.setState({
+            expanded: false,
+            selectedServer: server,
+            selectedInstanceId: instance ? instance.instance_id : null,
+            includeAll: includeAll,
+        });
+        this.props.onOptionChange(server, instance ? instance.instance_id : null, includeAll);
+    }
+
+    onInputKeyUp(e) {
+        if (e.key == 'Enter') {
+            this.setState({
+                expanded: false,
+                selectedServer: e.target.value,
+                selectedNetwork: null,
+            });
+            this.props.onOptionChange(e.target.value, null);
+        }
+    }
+
+    collectRoot(e) {
+        if (this.dropdownRootElement) {
+            this.dropdownRootElement.removeEventListener('click', this.onRootClick, false);
+        }
+        if (e) {
+            e.addEventListener('click', this.onRootClick, false);
+        }
+        this.dropdownRootElement = e;
+    }
+
+    collectInputTextBox(e) {
+        this.inputTextBox = e;
+    }
+
+    _getMenuOptions() {
+        const options = [];
+
+        let servers = [];
+        if (this.props.config.servers) {
+            servers = servers.concat(this.props.config.servers);
+        }
+
+        if (servers.indexOf(MatrixClientPeg.getHomeServerName()) == -1) {
+            servers.unshift(MatrixClientPeg.getHomeServerName());
+        }
+
+        // For our own HS, we can use the instance_ids given in the third party protocols
+        // response to get the server to filter the room list by network for us.
+        // We can't get thirdparty protocols for remote server yet though, so for those
+        // we can only show the default room list.
+        for (const server of servers) {
+            options.push(this._makeMenuOption(server, null, true));
+            if (server == MatrixClientPeg.getHomeServerName()) {
+                options.push(this._makeMenuOption(server, null, false));
+                if (this.props.protocols) {
+                    for (const proto of Object.keys(this.props.protocols)) {
+                        if (!this.props.protocols[proto].instances) continue;
+
+                        const sortedInstances = this.props.protocols[proto].instances;
+                        sortedInstances.sort(function(x, y) {
+                            const a = x.desc
+                            const b = y.desc
+                            if (a < b) {
+                                return -1;
+                            } else if (a > b) {
+                                return 1;
+                            } else {
+                                return 0;
+                            }
+                        });
+
+                        for (const instance of sortedInstances) {
+                            if (!instance.instance_id) continue;
+                            options.push(this._makeMenuOption(server, instance, false));
+                        }
+                    }
+                }
+            }
+        }
+
+        return options;
+    }
+
+    _makeMenuOption(server, instance, includeAll, handleClicks) {
+        if (handleClicks === undefined) handleClicks = true;
+
+        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';
+        } else {
+            key = server + '_inst_' + instance.instance_id;
+            const imgUrl = instance.icon ?
+                MatrixClientPeg.get().mxcUrlToHttp(instance.icon, 25, 25, 'crop', true) :
+                DEFAULT_ICON_URL;
+            icon = <img src={imgUrl} />;
+            name = instance.desc;
+            span_class = 'mx_NetworkDropdown_menu_network';
+        }
+
+        const click_handler = handleClicks ? this.onMenuOptionClick.bind(this, server, instance, includeAll) : null;
+
+        return <div key={key} className="mx_NetworkDropdown_networkoption" onClick={click_handler}>
+            {icon}
+            <span className="mx_NetworkDropdown_menu_network">{name}</span>
+        </div>
+    }
+
+    render() {
+        let current_value;
+
+        let menu;
+        if (this.state.expanded) {
+            const menu_options = this._getMenuOptions();
+            menu = <div className="mx_NetworkDropdown_menu">
+                {menu_options}
+            </div>;
+            current_value = <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
+            );
+        }
+
+        return <div className="mx_NetworkDropdown" ref={this.collectRoot}>
+            <div className="mx_NetworkDropdown_input" onClick={this.onInputClick}>
+                {current_value}
+                <span className="mx_NetworkDropdown_arrow"></span>
+                {menu}
+            </div>
+        </div>;
+    }
+}
+
+NetworkDropdown.propTypes = {
+    onOptionChange: React.PropTypes.func.isRequired,
+    protocols: React.PropTypes.object,
+    // The room directory config. May have a 'servers' key that is a list of server names to include in the dropdown
+    config: React.PropTypes.object,
+};
+
+NetworkDropdown.defaultProps = {
+    protocols: {},
+    config: {},
+};

src/components/views/elements/ImageView.js

@@ -0,0 +1,205 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+
+import {formatDate} from 'matrix-react-sdk/lib/DateUtils';
+var filesize = require('filesize');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+const Modal = require('matrix-react-sdk/lib/Modal');
+const sdk = require('matrix-react-sdk');
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'ImageView',
+
+    propTypes: {
+        src: React.PropTypes.string.isRequired, // the source of the image being displayed
+        name: React.PropTypes.string, // the main title ('name') for the image
+        link: React.PropTypes.string, // the link (if any) applied to the name of the image
+        width: React.PropTypes.number, // width of the image src in pixels
+        height: React.PropTypes.number, // height of the image src in pixels
+        fileSize: React.PropTypes.number, // size of the image src in bytes
+        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
+
+        // the event (if any) that the Image is displaying. Used for event-specific stuff like
+        // redactions, senders, timestamps etc.  Other descriptors are taken from the explicit
+        // properties above, which let us use lightboxes to display images which aren't associated
+        // with events.
+        mxEvent: React.PropTypes.object,
+    },
+
+    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
+    // dialog base class somehow, surely...
+    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();
+        }
+    },
+
+    onRedactClick: function() {
+        const ConfirmRedactDialog = sdk.getComponent("dialogs.ConfirmRedactDialog");
+        Modal.createTrackedDialog('Confirm Redact Dialog', 'Image View', ConfirmRedactDialog, {
+            onFinished: (proceed) => {
+                if (!proceed) return;
+                var self = this;
+                MatrixClientPeg.get().redactEvent(
+                    this.props.mxEvent.getRoomId(), this.props.mxEvent.getId()
+                ).catch(function(e) {
+                    var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    // display error message stating you couldn't delete this.
+                    var code = e.errcode || e.statusCode;
+                    Modal.createTrackedDialog('You cannot delete this image.', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: _t('You cannot delete this image. (%(code)s)', {code: code})
+                    });
+                }).done();
+            }
+        });
+    },
+
+    getName: function () {
+        var name = this.props.name;
+        if (name && this.props.link) {
+            name = <a href={ this.props.link } target="_blank" rel="noopener">{ name }</a>;
+        }
+        return name;
+    },
+
+    render: function() {
+
+/*
+        // In theory max-width: 80%, max-height: 80% on the CSS should work
+        // but in practice, it doesn't, so do it manually:
+
+        var width = this.props.width || 500;
+        var height = this.props.height || 500;
+
+        var maxWidth = document.documentElement.clientWidth * 0.8;
+        var maxHeight = document.documentElement.clientHeight * 0.8;
+
+        var widthFrac = width / maxWidth;
+        var heightFrac = height / maxHeight;
+
+        var displayWidth;
+        var displayHeight;
+        if (widthFrac > heightFrac) {
+            displayWidth = Math.min(width, maxWidth);
+            displayHeight = (displayWidth / width) * height;
+        } else {
+            displayHeight = Math.min(height, maxHeight);
+            displayWidth = (displayHeight / height) * width;
+        }
+
+        var style = {
+            width: displayWidth,
+            height: displayHeight
+        };
+*/
+        var style, res;
+
+        if (this.props.width && this.props.height) {
+            style = {
+                width: this.props.width,
+                height: this.props.height,
+            };
+            res = style.width + "x" + style.height + "px";
+        }
+
+        var size;
+        if (this.props.fileSize) {
+            size = filesize(this.props.fileSize);
+        }
+
+        var size_res;
+        if (size && res) {
+            size_res = size + ", " + res;
+        }
+        else {
+            size_res = size || res;
+        }
+
+        var showEventMeta = !!this.props.mxEvent;
+
+        var eventMeta;
+        if(showEventMeta) {
+            // Figure out the sender, defaulting to mxid
+            let sender = this.props.mxEvent.getSender();
+            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+            if (room) {
+                const member = room.getMember(sender);
+                if (member) sender = member.name;
+            }
+
+            eventMeta = (<div className="mx_ImageView_metadata">
+                { _t('Uploaded on %(date)s by %(user)s', {date: formatDate(new Date(this.props.mxEvent.getTs())), user: sender}) }
+            </div>);
+        }
+
+        var eventRedact;
+        if(showEventMeta) {
+            eventRedact = (<div className="mx_ImageView_button" onClick={this.onRedactClick}>
+                { _t('Remove') }
+            </div>);
+        }
+
+        return (
+            <div className="mx_ImageView">
+                <div className="mx_ImageView_lhs">
+                </div>
+                <div className="mx_ImageView_content">
+                    <img src={this.props.src} style={style}/>
+                    <div className="mx_ImageView_labelWrapper">
+                        <div className="mx_ImageView_label">
+                            <AccessibleButton className="mx_ImageView_cancel" onClick={ this.props.onFinished }><img src="img/cancel-white.svg" width="18" height="18" alt={ _t('Close') }/></AccessibleButton>
+                            <div className="mx_ImageView_shim">
+                            </div>
+                            <div className="mx_ImageView_name">
+                                { this.getName() }
+                            </div>
+                            { eventMeta }
+                            <a className="mx_ImageView_link" href={ this.props.src } download={ this.props.name } target="_blank" rel="noopener">
+                                <div className="mx_ImageView_download">
+                                        { _t('Download this file') }<br/>
+                                         <span className="mx_ImageView_size">{ size_res }</span>
+                                </div>
+                            </a>
+                            { eventRedact }
+                            <div className="mx_ImageView_shim">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="mx_ImageView_rhs">
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/elements/InlineSpinner.js

@@ -0,0 +1,33 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+const React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'InlineSpinner',
+
+    render: function() {
+        var w = this.props.w || 16;
+        var h = this.props.h || 16;
+        var imgClass = this.props.imgClassName || "";
+
+        return (
+            <div className="mx_InlineSpinner">
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+            </div>
+        );
+    }
+});

src/components/views/elements/Spinner.js

@@ -0,0 +1,34 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'Spinner',
+
+    render: function() {
+        var w = this.props.w || 32;
+        var h = this.props.h || 32;
+        var imgClass = this.props.imgClassName || "";
+        return (
+            <div className="mx_Spinner">
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+            </div>
+        );
+    }
+});

src/components/views/elements/SyntaxHighlight.js

@@ -0,0 +1,53 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {highlightBlock} from 'highlight.js';
+
+export default class SyntaxHighlight extends React.Component {
+    static propTypes = {
+        className: PropTypes.string,
+        children: PropTypes.node,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this._ref = this._ref.bind(this);
+    }
+
+    // componentDidUpdate used here for reusability
+    // componentWillReceiveProps fires too early to call highlightBlock on.
+    componentDidUpdate() {
+        if (this._el) highlightBlock(this._el);
+    }
+
+    // call componentDidUpdate because _ref is fired on initial render
+    // which does not fire componentDidUpdate
+    _ref(el) {
+        this._el = el;
+        this.componentDidUpdate();
+    }
+
+    render() {
+        const { className, children } = this.props;
+
+        return <pre className={`${className} mx_SyntaxHighlight`} ref={this._ref}>
+            <code>{ children }</code>
+        </pre>;
+    }
+}

src/components/views/globals/MatrixToolbar.js

@@ -0,0 +1,46 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import Notifier from 'matrix-react-sdk/lib/Notifier';
+import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+
+module.exports = React.createClass({
+    displayName: 'MatrixToolbar',
+
+    hideToolbar: function() {
+        Notifier.setToolbarHidden(true);
+    },
+
+    onClick: function() {
+        Notifier.setEnabled(true);
+    },
+
+    render: function() {
+        return (
+            <div className="mx_MatrixToolbar">
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning"/>
+                <div className="mx_MatrixToolbar_content">
+                   { _t('You are not receiving desktop notifications') } <a className="mx_MatrixToolbar_link" onClick={ this.onClick }> { _t('Enable them now') }</a>
+                </div>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+            </div>
+        );
+    },
+});

src/components/views/globals/NewVersionBar.js

@@ -0,0 +1,107 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import sdk from 'matrix-react-sdk';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+
+/**
+ * Check a version string is compatible with the Changelog
+ * dialog ([vectorversion]-react-[react-sdk-version]-js-[js-sdk-version])
+ */
+function checkVersion(ver) {
+    const parts = ver.split('-');
+    return parts.length == 5 && parts[1] == 'react' && parts[3] == 'js';
+}
+
+export default React.createClass({
+    propTypes: {
+        version: React.PropTypes.string.isRequired,
+        newVersion: React.PropTypes.string.isRequired,
+        releaseNotes: React.PropTypes.string,
+    },
+
+    displayReleaseNotes: function(releaseNotes) {
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+        Modal.createTrackedDialog('Display release notes', '', QuestionDialog, {
+            title: _t("What's New"),
+            description: <div className="mx_MatrixToolbar_changelog">{releaseNotes}</div>,
+            button: _t("Update"),
+            onFinished: (update) => {
+                if(update && PlatformPeg.get()) {
+                    PlatformPeg.get().installUpdate();
+                }
+            }
+        });
+    },
+
+    displayChangelog: function() {
+        const ChangelogDialog = sdk.getComponent('dialogs.ChangelogDialog');
+        Modal.createTrackedDialog('Display Changelog', '', ChangelogDialog, {
+            version: this.props.version,
+            newVersion: this.props.newVersion,
+            onFinished: (update) => {
+                if(update && PlatformPeg.get()) {
+                    PlatformPeg.get().installUpdate();
+                }
+            }
+        });
+    },
+
+    onUpdateClicked: function() {
+        PlatformPeg.get().installUpdate();
+    },
+
+    render: function() {
+        let action_button;
+        // If we have release notes to display, we display them. Otherwise,
+        // we display the Changelog Dialog which takes two versions and
+        // automatically tells you what's changed (provided the versions
+        // are in the right format)
+        if (this.props.releaseNotes) {
+            action_button = (
+                <button className="mx_MatrixToolbar_action" onClick={this.displayReleaseNotes}>
+                    { _t("What's new?") }
+                </button>
+            );
+        } else if (checkVersion(this.props.version) && checkVersion(this.props.newVersion)) {
+            action_button = (
+                <button className="mx_MatrixToolbar_action" onClick={this.displayChangelog}>
+                    { _t("What's new?") }
+                </button>
+            );
+        } else if (PlatformPeg.get()) {
+            action_button = (
+                <button className="mx_MatrixToolbar_action" onClick={this.onUpdateClicked}>
+                    { _t("Update") }
+                </button>
+            );
+        }
+        return (
+            <div className="mx_MatrixToolbar">
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning"/>
+                <div className="mx_MatrixToolbar_content">
+                    {_t("A new version of Riot is available.")}
+                </div>
+                {action_button}
+            </div>
+        );
+    }
+});

src/components/views/globals/PasswordNagBar.js

@@ -0,0 +1,64 @@
+/*
+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 sdk from 'matrix-react-sdk';
+import Modal from 'matrix-react-sdk/lib/Modal';
+import dis from 'matrix-react-sdk/lib/dispatcher';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+
+export default React.createClass({
+    onUpdateClicked: function() {
+        const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
+        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog, {
+            onFinished: (passwordChanged) => {
+                if (!passwordChanged) {
+                    return;
+                }
+                // Notify SessionStore that the user's password was changed
+                dis.dispatch({
+                    action: 'password_changed',
+                });
+            },
+        });
+    },
+
+    render: function() {
+        const toolbarClasses = "mx_MatrixToolbar mx_MatrixToolbar_clickable";
+        return (
+            <div className={toolbarClasses} onClick={this.onUpdateClicked}>
+                <img className="mx_MatrixToolbar_warning"
+                    src="img/warning.svg"
+                    width="24"
+                    height="23"
+                    alt="Warning"
+                />
+                <div className="mx_MatrixToolbar_content">
+                    { _t(
+                        "To return to your account in future you need to <u>set a password</u>",
+                        {},
+                        { 'u': (sub) => <u>{ sub }</u> },
+                    ) }
+                </div>
+                <button className="mx_MatrixToolbar_action">
+                    { _t("Set Password") }
+                </button>
+            </div>
+        );
+    },
+});

src/components/views/globals/UpdateCheckBar.js

@@ -0,0 +1,85 @@
+/*
+Copyright 2017 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import PlatformPeg from 'matrix-react-sdk/lib/PlatformPeg';
+import {updateCheckStatusEnum} from '../../../vector/platform/VectorBasePlatform';
+import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
+
+const doneStatuses = [
+    updateCheckStatusEnum.ERROR,
+    updateCheckStatusEnum.NOTAVAILABLE,
+];
+
+export default React.createClass({
+    propTypes: {
+        status: React.PropTypes.oneOf(Object.values(updateCheckStatusEnum)).isRequired,
+        // Currently for error detail but will be usable for download progress
+        // once that is a thing that squirrel passes through electron.
+        detail: React.PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            detail: '',
+        }
+    },
+
+    getStatusText: function() {
+        switch(this.props.status) {
+            case updateCheckStatusEnum.ERROR:
+                return _t('Error encountered (%(errorDetail)s).', { errorDetail: this.props.detail });
+            case updateCheckStatusEnum.CHECKING:
+                return _t('Checking for an update...');
+            case updateCheckStatusEnum.NOTAVAILABLE:
+                return _t('No update available.');
+            case updateCheckStatusEnum.DOWNLOADING:
+                return _t('Downloading update...');
+        }
+    }
+    ,
+
+    hideToolbar: function() {
+        PlatformPeg.get().stopUpdateCheck();
+    },
+
+    render: function() {
+        const message = this.getStatusText();
+        const warning = _t('Warning');
+
+        let image;
+        if (doneStatuses.includes(this.props.status)) {
+            image = <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt={warning}/>;
+        } else {
+            image = <img className="mx_MatrixToolbar_warning" src="img/spinner.gif" width="24" height="23" alt={message}/>;
+        }
+
+        return (
+            <div className="mx_MatrixToolbar">
+                {image}
+                <div className="mx_MatrixToolbar_content">
+                    {message}
+                </div>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.hideToolbar}>
+                    <img src="img/cancel.svg" width="18" height="18" />
+                </AccessibleButton>
+            </div>
+        );
+    }
+});

src/components/views/messages/DateSeparator.js

@@ -0,0 +1,61 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import {formatFullDateNoTime} from 'matrix-react-sdk/lib/DateUtils';
+
+function getdaysArray() {
+	return [
+        _t('Sunday'),
+        _t('Monday'),
+        _t('Tuesday'),
+        _t('Wednesday'),
+        _t('Thursday'),
+        _t('Friday'),
+        _t('Saturday'),
+    ];
+}
+
+export default class DateSeparator extends React.Component {
+    static propTypes = {
+        ts: PropTypes.number.isRequired,
+    };
+
+    getLabel() {
+        const date = new Date(this.props.ts);
+        const today = new Date();
+        const yesterday = new Date();
+        const days = getdaysArray();
+        yesterday.setDate(today.getDate() - 1);
+
+        if (date.toDateString() === today.toDateString()) {
+            return _t('Today');
+        } else if (date.toDateString() === yesterday.toDateString()) {
+            return _t('Yesterday');
+        } else if (today.getTime() - date.getTime() < 6 * 24 * 60 * 60 * 1000) {
+            return days[date.getDay()];
+        } else {
+            return formatFullDateNoTime(date);
+        }
+    }
+
+    render() {
+        return <h2 className="mx_DateSeparator">{ this.getLabel() }</h2>;
+    }
+}

src/components/views/messages/MessageTimestamp.js

@@ -0,0 +1,36 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2018 Michael Telatynski <7t3chguy@gmail.com>
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {formatFullDate, formatTime} from 'matrix-react-sdk/lib/DateUtils';
+
+export default class MessageTimestamp extends React.Component {
+    static propTypes = {
+        ts: PropTypes.number.isRequired,
+        showTwelveHour: PropTypes.bool,
+    };
+
+    render() {
+        const date = new Date(this.props.ts);
+        return (
+            <span className="mx_MessageTimestamp" title={formatFullDate(date, this.props.showTwelveHour)}>
+                { formatTime(date, this.props.showTwelveHour) }
+            </span>
+        );
+    }
+}

src/components/views/rooms/DNDRoomTile.js

@@ -0,0 +1,65 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+import RoomTile from 'matrix-react-sdk/lib/components/views/rooms/RoomTile';
+
+import classNames from 'classnames';
+
+export default class DNDRoomTile extends React.PureComponent {
+    constructor() {
+        super();
+        this.getClassName = this.getClassName.bind(this);
+    }
+
+    getClassName(isDragging) {
+        return classNames({
+            "mx_DNDRoomTile": true,
+            "mx_DNDRoomTile_dragging": isDragging,
+        });
+    }
+
+    render() {
+        const props = this.props;
+
+        return <div>
+            <Draggable
+                key={props.room.roomId}
+                draggableId={props.tagName + '_' + props.room.roomId}
+                index={props.index}
+                type="draggable-RoomTile"
+            >
+                { (provided, snapshot) => {
+                    return (
+                        <div>
+                            <div
+                                ref={provided.innerRef}
+                                {...provided.draggableProps}
+                                {...provided.dragHandleProps}
+                            >
+                                <div className={this.getClassName(snapshot.isDragging)}>
+                                    <RoomTile {...props} />
+                                </div>
+                            </div>
+                            { provided.placeholder }
+                        </div>
+                    );
+                } }
+            </Draggable>
+        </div>;
+    }
+}

src/components/views/rooms/RoomDropTarget.js

@@ -0,0 +1,35 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+module.exports = React.createClass({
+    displayName: 'RoomDropTarget',
+
+    render: function() {
+        return (
+            <div className="mx_RoomDropTarget_container">
+                <div className="mx_RoomDropTarget">
+                    <div className="mx_RoomDropTarget_label">
+                        { this.props.label }
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

src/components/views/rooms/RoomTooltip.js

@@ -0,0 +1,120 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var ReactDOM = require('react-dom');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+import classNames from 'classnames';
+
+const MIN_TOOLTIP_HEIGHT = 25;
+
+module.exports = React.createClass({
+    displayName: 'RoomTooltip',
+
+    propTypes: {
+        // Class applied to the element used to position the tooltip
+        className: React.PropTypes.string.isRequired,
+        // Class applied to the tooltip itself
+        tooltipClassName: React.PropTypes.string,
+        // The tooltip is derived from either the room name or a label
+        room: React.PropTypes.object,
+        label: React.PropTypes.node,
+    },
+
+    // Create a wrapper for the tooltip outside the parent and attach it to the body element
+    componentDidMount: function() {
+        this.tooltipContainer = document.createElement("div");
+        this.tooltipContainer.className = "mx_RoomTileTooltip_wrapper";
+        document.body.appendChild(this.tooltipContainer);
+        window.addEventListener('scroll', this._renderTooltip, true);
+
+        this.parent = ReactDOM.findDOMNode(this).parentNode;
+
+        this._renderTooltip();
+    },
+
+    componentDidUpdate: function() {
+        this._renderTooltip();
+    },
+
+    // Remove the wrapper element, as the tooltip has finished using it
+    componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: null,
+            parent: null,
+        });
+
+        ReactDOM.unmountComponentAtNode(this.tooltipContainer);
+        document.body.removeChild(this.tooltipContainer);
+        window.removeEventListener('scroll', this._renderTooltip, true);
+    },
+
+    _updatePosition(style) {
+        const parentBox = this.parent.getBoundingClientRect();
+        let offset = 0;
+        if (parentBox.height > MIN_TOOLTIP_HEIGHT) {
+            offset = Math.floor((parentBox.height - MIN_TOOLTIP_HEIGHT) / 2);
+        }
+        style.top = (parentBox.top - 2) + window.pageYOffset + offset;
+        style.left = 6 + parentBox.right + window.pageXOffset;
+        return style;
+    },
+
+    _renderTooltip: function() {
+        var label = this.props.room ? this.props.room.name : this.props.label;
+
+        // Add the parent's position to the tooltips, so it's correctly
+        // positioned, also taking into account any window zoom
+        // NOTE: The additional 6 pixels for the left position, is to take account of the
+        // tooltips chevron
+        var parent = ReactDOM.findDOMNode(this).parentNode;
+        var style = {};
+        style = this._updatePosition(style);
+        style.display = "block";
+
+        const tooltipClasses = classNames(
+            "mx_RoomTooltip", this.props.tooltipClassName,
+        );
+
+        var tooltip = (
+            <div className={tooltipClasses} style={style} >
+                <div className="mx_RoomTooltip_chevron"></div>
+                { label }
+            </div>
+        );
+
+        // Render the tooltip manually, as we wish it not to be rendered within the parent
+        this.tooltip = ReactDOM.render(tooltip, this.tooltipContainer);
+
+        // Tell the roomlist about us so it can manipulate us if it wishes
+        dis.dispatch({
+            action: 'view_tooltip',
+            tooltip: this.tooltip,
+            parent: parent,
+        });
+    },
+
+    render: function() {
+        // Render a placeholder
+        return (
+            <div className={this.props.className} >
+            </div>
+        );
+    },
+});

src/components/views/rooms/SearchBar.js

@@ -0,0 +1,71 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var sdk = require('matrix-react-sdk');
+var classNames = require('classnames');
+var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+import { _t } from "matrix-react-sdk/lib/languageHandler";
+
+module.exports = React.createClass({
+    displayName: 'SearchBar',
+
+    getInitialState: function() {
+        return ({
+            scope: 'Room'
+        });
+    },
+
+    onThisRoomClick: function() {
+        this.setState({ scope: 'Room' });
+    },
+
+    onAllRoomsClick: function() {
+        this.setState({ scope: 'All' });
+    },
+
+    onSearchChange: function(e) {
+        if (e.keyCode === 13) { // on enter...
+            this.onSearch();
+        }
+        if (e.keyCode === 27) { // escape...
+            this.props.onCancelClick();
+        }
+    },
+
+    onSearch: function() {
+        this.props.onSearch(this.refs.search_term.value, this.state.scope);
+    },
+
+    render: function() {
+        var searchButtonClasses = classNames({ mx_SearchBar_searchButton : true, mx_SearchBar_searching: this.props.searchInProgress });
+        var thisRoomClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'Room' });
+        var allRoomsClasses = classNames({ mx_SearchBar_button : true, mx_SearchBar_unselected : this.state.scope !== 'All' });
+
+        return (
+            <div className="mx_SearchBar"> 
+                <input ref="search_term" className="mx_SearchBar_input" type="text" autoFocus={true} placeholder={_t("Search…")} onKeyDown={this.onSearchChange}/>
+                <AccessibleButton className={ searchButtonClasses } onClick={this.onSearch}><img src="img/search-button.svg" width="37" height="37" alt={_t("Search")}/></AccessibleButton>
+                <AccessibleButton className={ thisRoomClasses } onClick={this.onThisRoomClick}>{_t("This Room")}</AccessibleButton>
+                <AccessibleButton className={ allRoomsClasses } onClick={this.onAllRoomsClick}>{_t("All Rooms")}</AccessibleButton>
+                <AccessibleButton className="mx_SearchBar_cancel" onClick={this.props.onCancelClick}><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
+            </div>
+        );
+    }
+});

src/components/views/settings/IntegrationsManager.js

@@ -0,0 +1,63 @@
+/*
+Copyright 2015, 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+
+module.exports = React.createClass({
+    displayName: 'IntegrationsManager',
+
+    propTypes: {
+        src: React.PropTypes.string.isRequired, // the source of the integration manager being embedded
+        onFinished: React.PropTypes.func.isRequired, // callback when the lightbox is dismissed
+    },
+
+    // XXX: keyboard shortcuts for managing dialogs should be done by the modal
+    // dialog base class somehow, surely...
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        document.addEventListener("keydown", this.onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+        document.removeEventListener("keydown", this.onKeyDown);
+    },
+
+    onKeyDown: function(ev) {
+        if (ev.keyCode == 27) { // escape
+            ev.stopPropagation();
+            ev.preventDefault();
+            this.props.onFinished();
+        }
+    },
+
+    onAction: function(payload) {
+        if (payload.action === 'close_scalar') {
+            this.props.onFinished();
+        }
+    },
+
+    render: function() {
+        return (
+            <iframe src={ this.props.src }></iframe>
+        );
+    }
+});

src/components/views/settings/Notifications.js

@@ -0,0 +1,919 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import Promise from 'bluebird';
+import sdk from 'matrix-react-sdk';
+import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
+import SettingsStore, {SettingLevel} from "matrix-react-sdk/lib/settings/SettingsStore";
+import Modal from 'matrix-react-sdk/lib/Modal';
+import {
+    NotificationUtils,
+    VectorPushRulesDefinitions,
+    PushRuleVectorState,
+    ContentRules
+} from '../../../notifications';
+
+// TODO: this "view" component still has far too much application logic in it,
+// which should be factored out to other files.
+
+// TODO: this component also does a lot of direct poking into this.state, which
+// is VERY NAUGHTY.
+
+
+/**
+ * Rules that Vector used to set in order to override the actions of default rules.
+ * These are used to port peoples existing overrides to match the current API.
+ * These can be removed and forgotten once everyone has moved to the new client.
+ */
+const LEGACY_RULES = {
+    "im.vector.rule.contains_display_name": ".m.rule.contains_display_name",
+    "im.vector.rule.room_one_to_one": ".m.rule.room_one_to_one",
+    "im.vector.rule.room_message": ".m.rule.message",
+    "im.vector.rule.invite_for_me": ".m.rule.invite_for_me",
+    "im.vector.rule.call": ".m.rule.call",
+    "im.vector.rule.notices": ".m.rule.suppress_notices"
+};
+
+function portLegacyActions(actions) {
+    const decoded = NotificationUtils.decodeActions(actions);
+    if (decoded !== null) {
+        return NotificationUtils.encodeActions(decoded);
+    } else {
+        // We don't recognise one of the actions here, so we don't try to
+        // canonicalise them.
+        return actions;
+    }
+}
+
+module.exports = React.createClass({
+    displayName: 'Notifications',
+
+    phases: {
+        LOADING: "LOADING", // The component is loading or sending data to the hs
+        DISPLAY: "DISPLAY", // The component is ready and display data
+        ERROR: "ERROR"      // There was an error
+    },
+
+    propTypes: {
+        // The array of threepids from the JS SDK (required for email notifications)
+        threepids: React.PropTypes.array.isRequired,
+        // The brand string set when creating an email pusher
+        brand: React.PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            threepids: []
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            phase: this.phases.LOADING,
+            masterPushRule: undefined,      // The master rule ('.m.rule.master')
+            vectorPushRules: [],            // HS default push rules displayed in Vector UI
+            vectorContentRules: {           // Keyword push rules displayed in Vector UI
+                vectorState: PushRuleVectorState.ON,
+                rules: []
+            },
+            externalPushRules: [],          // Push rules (except content rule) that have been defined outside Vector UI
+            externalContentRules: []        // Keyword push rules that have been defined outside Vector UI
+        };
+    },
+
+    componentWillMount: function() {
+        this._refreshFromServer();
+    },
+
+    onEnableNotificationsChange: function(event) {
+        const self = this;
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        MatrixClientPeg.get().setPushRuleEnabled('global', self.state.masterPushRule.kind, self.state.masterPushRule.rule_id, !event.target.checked).done(function() {
+           self._refreshFromServer();
+        });
+    },
+
+    onEnableDesktopNotificationsChange: function(event) {
+        SettingsStore.setValue(
+            "notificationsEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
+    },
+
+    onEnableDesktopNotificationBodyChange: function(event) {
+        SettingsStore.setValue(
+            "notificationBodyEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
+    },
+
+    onEnableAudioNotificationsChange: function(event) {
+        SettingsStore.setValue(
+            "audioNotificationsEnabled", null,
+            SettingLevel.DEVICE,
+            event.target.checked,
+        ).finally(() => {
+            this.forceUpdate();
+        });
+    },
+
+    onEnableEmailNotificationsChange: function(address, event) {
+        let emailPusherPromise;
+        if (event.target.checked) {
+            const data = {}
+            data['brand'] = this.props.brand || 'Riot';
+            emailPusherPromise = UserSettingsStore.addEmailPusher(address, data);
+        } else {
+            const emailPusher = UserSettingsStore.getEmailPusher(this.state.pushers, address);
+            emailPusher.kind = null;
+            emailPusherPromise = MatrixClientPeg.get().setPusher(emailPusher);
+        }
+        emailPusherPromise.done(() => {
+            this._refreshFromServer();
+        }, (error) => {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Error saving email notification preferences', '', ErrorDialog, {
+                title: _t('Error saving email notification preferences'),
+                description: _t('An error occurred whilst saving your email notification preferences.'),
+            });
+        });
+    },
+
+    onNotifStateButtonClicked: function(event) {
+        // FIXME: use .bind() rather than className metadata here surely
+        const vectorRuleId = event.target.className.split("-")[0];
+        const newPushRuleVectorState = event.target.className.split("-")[1];
+
+        if ("_keywords" === vectorRuleId) {
+            this._setKeywordsPushRuleVectorState(newPushRuleVectorState)
+        }
+        else {
+            const rule = this.getRule(vectorRuleId);
+            if (rule) {
+                this._setPushRuleVectorState(rule, newPushRuleVectorState);
+            }
+        }
+    },
+
+    onKeywordsClicked: function(event) {
+        const self = this;
+
+        // Compute the keywords list to display
+        let keywords = [];
+        for (let i in this.state.vectorContentRules.rules) {
+            const rule = this.state.vectorContentRules.rules[i];
+            keywords.push(rule.pattern);
+        }
+        if (keywords.length) {
+            // As keeping the order of per-word push rules hs side is a bit tricky to code,
+            // display the keywords in alphabetical order to the user
+            keywords.sort();
+
+            keywords = keywords.join(", ");
+        }
+        else {
+            keywords = "";
+        }
+
+        const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        Modal.createTrackedDialog('Keywords Dialog', '', TextInputDialog, {
+            title: _t('Keywords'),
+            description: _t('Enter keywords separated by a comma:'),
+            button: _t('OK'),
+            value: keywords,
+            onFinished: function onFinished(should_leave, newValue) {
+
+                if (should_leave && newValue !== keywords) {
+                    let newKeywords = newValue.split(',');
+                    for (let i in newKeywords) {
+                        newKeywords[i] = newKeywords[i].trim();
+                    }
+
+                    // Remove duplicates and empty
+                    newKeywords = newKeywords.reduce(function(array, keyword){
+                        if (keyword !== "" && array.indexOf(keyword) < 0) {
+                            array.push(keyword);
+                        }
+                        return array;
+                    },[]);
+
+                    self._setKeywords(newKeywords);
+                }
+            }
+        });
+    },
+
+    getRule: function(vectorRuleId) {
+        for (let i in this.state.vectorPushRules) {
+            const rule = this.state.vectorPushRules[i];
+            if (rule.vectorRuleId === vectorRuleId) {
+                return rule;
+            }
+        }
+    },
+
+    _setPushRuleVectorState: function(rule, newPushRuleVectorState) {
+        if (rule && rule.vectorState !== newPushRuleVectorState) {
+
+            this.setState({
+                phase: this.phases.LOADING
+            });
+
+            const self = this;
+            const cli = MatrixClientPeg.get();
+            const deferreds = [];
+            const ruleDefinition = VectorPushRulesDefinitions[rule.vectorRuleId];
+
+            if (rule.rule) {
+                const actions = ruleDefinition.vectorStateToActions[newPushRuleVectorState];
+
+                if (!actions) {
+                    // The new state corresponds to disabling the rule.
+                    deferreds.push(cli.setPushRuleEnabled('global', rule.rule.kind, rule.rule.rule_id, false));
+                }
+                else {
+                    // The new state corresponds to enabling the rule and setting specific actions
+                    deferreds.push(this._updatePushRuleActions(rule.rule, actions, true));
+                }
+            }
+
+            Promise.all(deferreds).done(function() {
+                self._refreshFromServer();
+            }, function(error) {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Failed to change settings: " + error);
+                Modal.createTrackedDialog('Failed to change settings', '', ErrorDialog, {
+                    title: _t('Failed to change settings'),
+                    description: ((error && error.message) ? error.message : _t('Operation failed')),
+                    onFinished: self._refreshFromServer
+                });
+            });
+        }
+    },
+
+    _setKeywordsPushRuleVectorState: function(newPushRuleVectorState) {
+        // Is there really a change?
+        if (this.state.vectorContentRules.vectorState === newPushRuleVectorState
+            || this.state.vectorContentRules.rules.length === 0) {
+            return;
+        }
+
+        const self = this;
+        const cli = MatrixClientPeg.get();
+
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        // Update all rules in self.state.vectorContentRules
+        const deferreds = [];
+        for (let i in this.state.vectorContentRules.rules) {
+            const rule = this.state.vectorContentRules.rules[i];
+
+            let enabled, actions;
+            switch (newPushRuleVectorState) {
+                case PushRuleVectorState.ON:
+                    if (rule.actions.length !== 1) {
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.ON);
+                    }
+
+                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
+                        enabled = true;
+                    }
+                    break;
+
+                case PushRuleVectorState.LOUD:
+                    if (rule.actions.length !== 3) {
+                        actions = PushRuleVectorState.actionsFor(PushRuleVectorState.LOUD);
+                    }
+
+                    if (this.state.vectorContentRules.vectorState === PushRuleVectorState.OFF) {
+                        enabled = true;
+                    }
+                    break;
+
+                case PushRuleVectorState.OFF:
+                    enabled = false;
+                    break;
+            }
+
+            if (actions) {
+                // Note that the workaround in _updatePushRuleActions will automatically
+                // enable the rule
+                deferreds.push(this._updatePushRuleActions(rule, actions, enabled));
+            }
+            else if (enabled != undefined) {
+                deferreds.push(cli.setPushRuleEnabled('global', rule.kind, rule.rule_id, enabled));
+            }
+        }
+
+        Promise.all(deferreds).done(function(resps) {
+            self._refreshFromServer();
+        }, function(error) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Can't update user notification settings: " + error);
+            Modal.createTrackedDialog('Can\'t update user notifcation settings', '', ErrorDialog, {
+                title: _t('Can\'t update user notification settings'),
+                description: ((error && error.message) ? error.message : _t('Operation failed')),
+                onFinished: self._refreshFromServer
+            });
+        });
+    },
+
+    _setKeywords: function(newKeywords) {
+        this.setState({
+            phase: this.phases.LOADING
+        });
+
+        const self = this;
+        const cli = MatrixClientPeg.get();
+        const removeDeferreds = [];
+
+        // Remove per-word push rules of keywords that are no more in the list
+        const vectorContentRulesPatterns = [];
+        for (let i in self.state.vectorContentRules.rules) {
+            const rule = self.state.vectorContentRules.rules[i];
+
+            vectorContentRulesPatterns.push(rule.pattern);
+
+            if (newKeywords.indexOf(rule.pattern) < 0) {
+                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
+            }
+        }
+
+        // If the keyword is part of `externalContentRules`, remove the rule
+        // before recreating it in the right Vector path
+        for (let i in self.state.externalContentRules) {
+            const rule = self.state.externalContentRules[i];
+
+            if (newKeywords.indexOf(rule.pattern) >= 0) {
+                removeDeferreds.push(cli.deletePushRule('global', rule.kind, rule.rule_id));
+            }
+        }
+
+        const onError = function(error) {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to update keywords: " + error);
+            Modal.createTrackedDialog('Failed to update keywords', '', ErrorDialog, {
+                title: _t('Failed to update keywords'),
+                description: ((error && error.message) ? error.message : _t('Operation failed')),
+                onFinished: self._refreshFromServer
+            });
+        }
+
+        // Then, add the new ones
+        Promise.all(removeDeferreds).done(function(resps) {
+            const deferreds = [];
+
+            let pushRuleVectorStateKind = self.state.vectorContentRules.vectorState;
+            if (pushRuleVectorStateKind === PushRuleVectorState.OFF) {
+                // When the current global keywords rule is OFF, we need to look at
+                // the flavor of rules in 'vectorContentRules' to apply the same actions
+                // when creating the new rule.
+                // Thus, this new rule will join the 'vectorContentRules' set.
+                if (self.state.vectorContentRules.rules.length) {
+                    pushRuleVectorStateKind = PushRuleVectorState.contentRuleVectorStateKind(self.state.vectorContentRules.rules[0]);
+                }
+                else {
+                    // ON is default
+                    pushRuleVectorStateKind =  PushRuleVectorState.ON;
+                }
+            }
+
+            for (let i in newKeywords) {
+                const keyword = newKeywords[i];
+
+                if (vectorContentRulesPatterns.indexOf(keyword) < 0) {
+                    if (self.state.vectorContentRules.vectorState !== PushRuleVectorState.OFF) {
+                        deferreds.push(cli.addPushRule
+                        ('global', 'content', keyword, {
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
+                           pattern: keyword
+                        }));
+                    }
+                    else {
+                        deferreds.push(self._addDisabledPushRule('global', 'content', keyword, {
+                           actions: PushRuleVectorState.actionsFor(pushRuleVectorStateKind),
+                           pattern: keyword
+                        }));
+                    }
+                }
+            }
+
+            Promise.all(deferreds).done(function(resps) {
+                self._refreshFromServer();
+            }, onError);
+        }, onError);
+    },
+
+    // Create a push rule but disabled
+    _addDisabledPushRule: function(scope, kind, ruleId, body) {
+        const cli = MatrixClientPeg.get();
+        return cli.addPushRule(scope, kind, ruleId, body).then(() =>
+            cli.setPushRuleEnabled(scope, kind, ruleId, false)
+        );
+    },
+
+    // Check if any legacy im.vector rules need to be ported to the new API
+    // for overriding the actions of default rules.
+    _portRulesToNewAPI: function(rulesets) {
+        const self = this;
+        const needsUpdate = [];
+        const cli = MatrixClientPeg.get();
+
+        for (let kind in rulesets.global) {
+            const ruleset = rulesets.global[kind];
+            for (let i = 0; i < ruleset.length; ++i) {
+                const rule = ruleset[i];
+                if (rule.rule_id in LEGACY_RULES) {
+                    console.log("Porting legacy rule", rule);
+                    needsUpdate.push( function(kind, rule) {
+                        return cli.setPushRuleActions(
+                            'global', kind, LEGACY_RULES[rule.rule_id], portLegacyActions(rule.actions)
+                        ).then(() =>
+                            cli.deletePushRule('global', kind, rule.rule_id)
+                        ).catch( (e) => {
+                            console.warn(`Error when porting legacy rule: ${e}`);
+                        });
+                    }(kind, rule));
+                }
+            }
+        }
+
+        if (needsUpdate.length > 0) {
+            // If some of the rules need to be ported then wait for the porting
+            // to happen and then fetch the rules again.
+            return Promise.all(needsUpdate).then(() =>
+                cli.getPushRules()
+            );
+        } else {
+            // Otherwise return the rules that we already have.
+            return rulesets;
+        }
+    },
+
+    _refreshFromServer: function() {
+        const self = this;
+        const pushRulesPromise = MatrixClientPeg.get().getPushRules().then(self._portRulesToNewAPI).then(function(rulesets) {
+
+            /// XXX seriously? wtf is this?
+            MatrixClientPeg.get().pushRules = rulesets;
+
+            // Get homeserver default rules and triage them by categories
+            const rule_categories = {
+                // The master rule (all notifications disabling)
+                '.m.rule.master': 'master',
+
+                // The default push rules displayed by Vector UI
+                '.m.rule.contains_display_name': 'vector',
+                '.m.rule.contains_user_name': 'vector',
+                '.m.rule.room_one_to_one': 'vector',
+                '.m.rule.message': 'vector',
+                '.m.rule.invite_for_me': 'vector',
+                //'.m.rule.member_event': 'vector',
+                '.m.rule.call': 'vector',
+                '.m.rule.suppress_notices': 'vector'
+
+                // Others go to others
+            };
+
+            // HS default rules
+            const defaultRules = {master: [], vector: {}, others: []};
+
+            for (let kind in rulesets.global) {
+                for (let i = 0; i < Object.keys(rulesets.global[kind]).length; ++i) {
+                    const r = rulesets.global[kind][i];
+                    const cat = rule_categories[r.rule_id];
+                    r.kind = kind;
+
+                    if (r.rule_id[0] === '.') {
+                        if (cat === 'vector') {
+                            defaultRules.vector[r.rule_id] = r;
+                        }
+                        else if (cat === 'master') {
+                            defaultRules.master.push(r);
+                        }
+                        else {
+                            defaultRules['others'].push(r);
+                        }
+                    }
+                }
+            }
+
+            // Get the master rule if any defined by the hs
+            if (defaultRules.master.length > 0) {
+                self.state.masterPushRule = defaultRules.master[0];
+            }
+
+            // parse the keyword rules into our state
+            const contentRules = ContentRules.parseContentRules(rulesets);
+            self.state.vectorContentRules = {
+                vectorState: contentRules.vectorState,
+                rules: contentRules.rules,
+            };
+            self.state.externalContentRules = contentRules.externalRules;
+
+            // Build the rules displayed in the Vector UI matrix table
+            self.state.vectorPushRules = [];
+            self.state.externalPushRules = [];
+
+            const vectorRuleIds = [
+                '.m.rule.contains_display_name',
+                '.m.rule.contains_user_name',
+                '_keywords',
+                '.m.rule.room_one_to_one',
+                '.m.rule.message',
+                '.m.rule.invite_for_me',
+                //'im.vector.rule.member_event',
+                '.m.rule.call',
+                '.m.rule.suppress_notices'
+            ];
+            for (let i in vectorRuleIds) {
+                const vectorRuleId = vectorRuleIds[i];
+
+                if (vectorRuleId === '_keywords') {
+                    // keywords needs a special handling
+                    // For Vector UI, this is a single global push rule but translated in Matrix,
+                    // it corresponds to all content push rules (stored in self.state.vectorContentRule)
+                    self.state.vectorPushRules.push({
+                        "vectorRuleId": "_keywords",
+                        "description" : (
+                            <span>
+                            { _t('Messages containing <span>keywords</span>',
+                                {},
+                                { 'span': (sub) =>
+                                    <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>
+                                },
+                            )}
+                            </span>
+                        ),
+                        "vectorState": self.state.vectorContentRules.vectorState
+                    });
+                }
+                else {
+                    const ruleDefinition = VectorPushRulesDefinitions[vectorRuleId];
+                    const rule = defaultRules.vector[vectorRuleId];
+
+                    const vectorState = ruleDefinition.ruleToVectorState(rule);
+
+                    //console.log("Refreshing vectorPushRules for " + vectorRuleId +", "+ ruleDefinition.description +", " + rule +", " + vectorState);
+
+                    self.state.vectorPushRules.push({
+                        "vectorRuleId": vectorRuleId,
+                        "description" : _t(ruleDefinition.description), // Text from VectorPushRulesDefinitions.js
+                        "rule": rule,
+                        "vectorState": vectorState,
+                    });
+
+                    // if there was a rule which we couldn't parse, add it to the external list
+                    if (rule && !vectorState) {
+                        rule.description = ruleDefinition.description;
+                        self.state.externalPushRules.push(rule);
+                    }
+                }
+            }
+
+            // Build the rules not managed by Vector UI
+            const otherRulesDescriptions = {
+                '.m.rule.message': _t('Notify for all other messages/rooms'),
+                '.m.rule.fallback': _t('Notify me for anything else'),
+            };
+
+            for (let i in defaultRules.others) {
+                const rule = defaultRules.others[i];
+                const ruleDescription = otherRulesDescriptions[rule.rule_id];
+
+                // Show enabled default rules that was modified by the user
+                if (ruleDescription && rule.enabled && !rule.default) {
+                    rule.description = ruleDescription;
+                    self.state.externalPushRules.push(rule);
+                }
+            }
+        });
+
+        const pushersPromise = MatrixClientPeg.get().getPushers().then(function(resp) {
+            self.setState({pushers: resp.pushers});
+        });
+
+        Promise.all([pushRulesPromise, pushersPromise]).then(function() {
+            self.setState({
+                phase: self.phases.DISPLAY
+            });
+        }, function(error) {
+            console.error(error);
+            self.setState({
+                phase: self.phases.ERROR
+            });
+        }).finally(() => {
+            // actually explicitly update our state  having been deep-manipulating it
+            self.setState({
+                masterPushRule: self.state.masterPushRule,
+                vectorContentRules: self.state.vectorContentRules,
+                vectorPushRules: self.state.vectorPushRules,
+                externalContentRules: self.state.externalContentRules,
+                externalPushRules: self.state.externalPushRules,
+            });
+        }).done();
+    },
+
+    _updatePushRuleActions: function(rule, actions, enabled) {
+        const cli = MatrixClientPeg.get();
+
+        return cli.setPushRuleActions(
+            'global', rule.kind, rule.rule_id, actions
+        ).then( function() {
+            // Then, if requested, enabled or disabled the rule
+            if (undefined != enabled) {
+                return cli.setPushRuleEnabled(
+                    'global', rule.kind, rule.rule_id, enabled
+                );
+            }
+        });
+    },
+
+    renderNotifRulesTableRow: function(title, className, pushRuleVectorState) {
+        return (
+            <tr key={ className }>
+                <th>
+                    { title }
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.OFF}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.OFF }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.ON}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.ON }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+
+                <th>
+                    <input className= {className + "-" + PushRuleVectorState.LOUD}
+                        type="radio"
+                        checked={ pushRuleVectorState === PushRuleVectorState.LOUD }
+                        onChange={ this.onNotifStateButtonClicked } />
+                </th>
+            </tr>
+        );
+    },
+
+    renderNotifRulesTableRows: function() {
+        const rows = [];
+        for (let i in this.state.vectorPushRules) {
+            const rule = this.state.vectorPushRules[i];
+            //console.log("rendering: " + rule.description + ", " + rule.vectorRuleId + ", " + rule.vectorState);
+            rows.push(this.renderNotifRulesTableRow(rule.description, rule.vectorRuleId, rule.vectorState));
+        }
+        return rows;
+    },
+
+    emailNotificationsRow: function(address, label) {
+        return (<div className="mx_UserNotifSettings_tableRow">
+            <div className="mx_UserNotifSettings_inputCell">
+                <input id="enableEmailNotifications_{address}"
+                    ref="enableEmailNotifications_{address}"
+                    type="checkbox"
+                    checked={ UserSettingsStore.hasEmailPusher(this.state.pushers, address) }
+                    onChange={ this.onEnableEmailNotificationsChange.bind(this, address) }
+                />
+            </div>
+            <div className="mx_UserNotifSettings_labelCell">
+                <label htmlFor="enableEmailNotifications_{address}">
+                    {label}
+                </label>
+            </div>
+        </div>);
+    },
+
+    render: function() {
+        const self = this;
+
+        let spinner;
+        if (this.state.phase === this.phases.LOADING) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            spinner = <Loader />;
+        }
+
+        let masterPushRuleDiv;
+        if (this.state.masterPushRule) {
+            masterPushRuleDiv = (
+                <div className="mx_UserNotifSettings_tableRow">
+                    <div className="mx_UserNotifSettings_inputCell">
+                        <input id="enableNotifications"
+                            ref="enableNotifications"
+                            type="checkbox"
+                            checked={ !this.state.masterPushRule.enabled }
+                            onChange={ this.onEnableNotificationsChange }
+                        />
+                    </div>
+                    <div className="mx_UserNotifSettings_labelCell">
+                        <label htmlFor="enableNotifications">
+                            { _t('Enable notifications for this account') }
+                        </label>
+                    </div>
+                </div>
+            );
+        }
+
+        // When enabled, the master rule inhibits all existing rules
+        // So do not show all notification settings
+        if (this.state.masterPushRule && this.state.masterPushRule.enabled) {
+            return (
+                <div>
+                    {masterPushRuleDiv}
+
+                    <div className="mx_UserSettings_notifTable">
+                        { _t('All notifications are currently disabled for all targets.') }.
+                    </div>
+                </div>
+            );
+        }
+
+        const emailThreepids = this.props.threepids.filter((tp) => tp.medium === "email");
+        let emailNotificationsRow;
+        if (emailThreepids.length === 0) {
+            emailNotificationsRow = <div>
+                { _t('Add an email address above to configure email notifications') }
+            </div>;
+        } else {
+            // This only supports the first email address in your profile for now
+            emailNotificationsRow = this.emailNotificationsRow(
+                emailThreepids[0].address,
+                `${_t('Enable email notifications')} (${emailThreepids[0].address})`
+            );
+        }
+
+        // Build external push rules
+        const externalRules = [];
+        for (let i in this.state.externalPushRules) {
+            const rule = this.state.externalPushRules[i];
+            externalRules.push(<li>{ _t(rule.description) }</li>);
+        }
+
+        // Show keywords not displayed by the vector UI as a single external push rule
+        let externalKeywords = [];
+        for (let i in this.state.externalContentRules) {
+            const rule = this.state.externalContentRules[i];
+            externalKeywords.push(rule.pattern);
+        }
+        if (externalKeywords.length) {
+            externalKeywords = externalKeywords.join(", ");
+            externalRules.push(<li>{ _t('Notifications on the following keywords follow rules which can’t be displayed here:') } { externalKeywords }</li>);
+        }
+
+        let devicesSection;
+        if (this.state.pushers === undefined) {
+            devicesSection = <div className="error">{ _t('Unable to fetch notification target list') }</div>
+        } else if (this.state.pushers.length == 0) {
+            devicesSection = null;
+        } else {
+            // TODO: It would be great to be able to delete pushers from here too,
+            // and this wouldn't be hard to add.
+            const rows = [];
+            for (let i = 0; i < this.state.pushers.length; ++i) {
+                rows.push(<tr key={ i }>
+                    <td>{this.state.pushers[i].app_display_name}</td>
+                    <td>{this.state.pushers[i].device_display_name}</td>
+                </tr>);
+            }
+            devicesSection = (<table className="mx_UserSettings_devicesTable">
+                <tbody>
+                    {rows}
+                </tbody>
+            </table>);
+        }
+        if (devicesSection) {
+            devicesSection = (<div>
+                <h3>{ _t('Notification targets') }</h3>
+                { devicesSection }
+            </div>);
+        }
+
+        let advancedSettings;
+        if (externalRules.length) {
+            advancedSettings = (
+                <div>
+                    <h3>{ _t('Advanced notification settings') }</h3>
+                    { _t('There are advanced notifications which are not shown here') }.<br/>
+                    { _t('You might have configured them in a client other than Riot. You cannot tune them in Riot but they still apply') }.
+                    <ul>
+                        { externalRules }
+                    </ul>
+                </div>
+            );
+        }
+
+        return (
+            <div>
+
+                {masterPushRuleDiv}
+
+                <div className="mx_UserSettings_notifTable">
+
+                    { spinner }
+
+                    <div className="mx_UserNotifSettings_tableRow">
+                        <div className="mx_UserNotifSettings_inputCell">
+                            <input id="enableDesktopNotifications"
+                                ref="enableDesktopNotifications"
+                                type="checkbox"
+                                checked={ SettingsStore.getValue("notificationsEnabled") }
+                                onChange={ this.onEnableDesktopNotificationsChange } />
+                        </div>
+                        <div className="mx_UserNotifSettings_labelCell">
+                            <label htmlFor="enableDesktopNotifications">
+                                { _t('Enable desktop notifications') }
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="mx_UserNotifSettings_tableRow">
+                        <div className="mx_UserNotifSettings_inputCell">
+                            <input id="enableDesktopNotificationBody"
+                                ref="enableDesktopNotificationBody"
+                                type="checkbox"
+                                checked={ SettingsStore.getValue("notificationBodyEnabled") }
+                                onChange={ this.onEnableDesktopNotificationBodyChange } />
+                        </div>
+                        <div className="mx_UserNotifSettings_labelCell">
+                            <label htmlFor="enableDesktopNotificationBody">
+                                { _t('Show message in desktop notification') }
+                            </label>
+                        </div>
+                    </div>
+
+                    <div className="mx_UserNotifSettings_tableRow">
+                        <div className="mx_UserNotifSettings_inputCell">
+                            <input id="enableDesktopAudioNotifications"
+                                ref="enableDesktopAudioNotifications"
+                                type="checkbox"
+                                checked={ SettingsStore.getValue("audioNotificationsEnabled") }
+                                onChange={ this.onEnableAudioNotificationsChange } />
+                        </div>
+                        <div className="mx_UserNotifSettings_labelCell">
+                            <label htmlFor="enableDesktopAudioNotifications">
+                                { _t('Enable audible notifications in web client') }
+                            </label>
+                        </div>
+                    </div>
+
+                    { emailNotificationsRow }
+
+                    <div className="mx_UserNotifSettings_pushRulesTableWrapper">
+                        <table className="mx_UserNotifSettings_pushRulesTable">
+                            <thead>
+                                <tr>
+                                    <th width="55%"></th>
+                                    <th width="15%">{ _t('Off') }</th>
+                                    <th width="15%">{ _t('On') }</th>
+                                    <th width="15%">{ _t('Noisy') }</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+
+                                { this.renderNotifRulesTableRows() }
+
+                            </tbody>
+                        </table>
+                    </div>
+
+                    { advancedSettings }
+
+                    { devicesSection }
+
+                </div>
+
+            </div>
+        );
+    }
+});