merge in develop

src/components/views/avatars/BaseAvatar.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -14,10 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-var AvatarLogic = require("../../../Avatar");
+import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
+import AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
 import AccessibleButton from '../elements/AccessibleButton';
 
@@ -25,16 +26,20 @@ module.exports = React.createClass({
     displayName: 'BaseAvatar',
 
     propTypes: {
-        name: React.PropTypes.string.isRequired, // The name (first initial used as default)
-        idName: React.PropTypes.string, // ID for generating hash colours
-        title: React.PropTypes.string, // onHover title text
-        url: React.PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
-        urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
+        name: PropTypes.string.isRequired, // The name (first initial used as default)
+        idName: PropTypes.string, // ID for generating hash colours
+        title: PropTypes.string, // onHover title text
+        url: PropTypes.string, // highest priority of them all, shortcut to set in urls[0]
+        urls: PropTypes.array, // [highest_priority, ... , lowest_priority]
+        width: PropTypes.number,
+        height: PropTypes.number,
         // XXX resizeMethod not actually used.
-        resizeMethod: React.PropTypes.string,
-        defaultToInitialLetter: React.PropTypes.bool // true to add default url
+        resizeMethod: PropTypes.string,
+        defaultToInitialLetter: PropTypes.bool, // true to add default url
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
     },
 
     getDefaultProps: function() {
@@ -42,7 +47,7 @@ module.exports = React.createClass({
             width: 40,
             height: 40,
             resizeMethod: 'crop',
-            defaultToInitialLetter: true
+            defaultToInitialLetter: true,
         };
     },
 
@@ -50,17 +55,26 @@ module.exports = React.createClass({
         return this._getState(this.props);
     },
 
+    componentWillMount() {
+        this.unmounted = false;
+        this.context.matrixClient.on('sync', this.onClientSync);
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.context.matrixClient.removeListener('sync', this.onClientSync);
+    },
+
     componentWillReceiveProps: function(nextProps) {
         // work out if we need to call setState (if the image URLs array has changed)
-        var newState = this._getState(nextProps);
-        var newImageUrls = newState.imageUrls;
-        var oldImageUrls = this.state.imageUrls;
+        const newState = this._getState(nextProps);
+        const newImageUrls = newState.imageUrls;
+        const oldImageUrls = this.state.imageUrls;
         if (newImageUrls.length !== oldImageUrls.length) {
             this.setState(newState); // detected a new entry
-        }
-        else {
+        } else {
             // check each one to see if they are the same
-            for (var i = 0; i < newImageUrls.length; i++) {
+            for (let i = 0; i < newImageUrls.length; i++) {
                 if (oldImageUrls[i] !== newImageUrls[i]) {
                     this.setState(newState); // detected a diff
                     break;
@@ -69,35 +83,52 @@ module.exports = React.createClass({
         }
     },
 
+    onClientSync: function(syncState, prevState) {
+        if (this.unmounted) return;
+
+        // Consider the client reconnected if there is no error with syncing.
+        // This means the state could be RECONNECTING, SYNCING, PREPARED or CATCHUP.
+        const reconnected = syncState !== "ERROR" && prevState !== syncState;
+        if (reconnected &&
+            // Did we fall back?
+            this.state.urlsIndex > 0
+        ) {
+            // Start from the highest priority URL again
+            this.setState({
+                urlsIndex: 0,
+            });
+        }
+    },
+
     _getState: function(props) {
         // work out the full set of urls to try to load. This is formed like so:
         // imageUrls: [ props.url, props.urls, default image ]
 
-        var urls = props.urls || [];
+        const urls = props.urls || [];
         if (props.url) {
             urls.unshift(props.url); // put in urls[0]
         }
 
-        var defaultImageUrl = null;
+        let defaultImageUrl = null;
         if (props.defaultToInitialLetter) {
             defaultImageUrl = AvatarLogic.defaultAvatarUrlForString(
-                props.idName || props.name
+                props.idName || props.name,
             );
             urls.push(defaultImageUrl); // lowest priority
         }
         return {
             imageUrls: urls,
             defaultImageUrl: defaultImageUrl,
-            urlsIndex: 0
+            urlsIndex: 0,
         };
     },
 
     onError: function(ev) {
-        var nextIndex = this.state.urlsIndex + 1;
+        const nextIndex = this.state.urlsIndex + 1;
         if (nextIndex < this.state.imageUrls.length) {
             // try the next one
             this.setState({
-                urlsIndex: nextIndex
+                urlsIndex: nextIndex,
             });
         }
     },
@@ -111,32 +142,32 @@ module.exports = React.createClass({
             return undefined;
         }
 
-        var idx = 0;
-        var initial = name[0];
-        if ((initial === '@' || initial === '#') && name[1]) {
+        let idx = 0;
+        const initial = name[0];
+        if ((initial === '@' || initial === '#' || initial === '+') && name[1]) {
             idx++;
         }
 
         // string.codePointAt(0) would do this, but that isn't supported by
         // some browsers (notably PhantomJS).
-        var chars = 1;
-        var first = name.charCodeAt(idx);
+        let chars = 1;
+        const first = name.charCodeAt(idx);
 
         // check if it’s the start of a surrogate pair
         if (first >= 0xD800 && first <= 0xDBFF && name[idx+1]) {
-            var second = name.charCodeAt(idx+1);
+            const second = name.charCodeAt(idx+1);
             if (second >= 0xDC00 && second <= 0xDFFF) {
                 chars++;
             }
         }
 
-        var firstChar = name.substring(idx, idx+chars);
+        const firstChar = name.substring(idx, idx+chars);
         return firstChar.toUpperCase();
     },
 
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
-        var imageUrl = this.state.imageUrls[this.state.urlsIndex];
+        const imageUrl = this.state.imageUrls[this.state.urlsIndex];
 
         const {
             name, idName, title, url, urls, width, height, resizeMethod,
@@ -152,7 +183,7 @@ module.exports = React.createClass({
                     width: width + "px",
                     lineHeight: height + "px" }}
                 >
-                    {initialLetter}
+                    { initialLetter }
                 </EmojiText>
             );
             const imgNode = (
@@ -165,15 +196,15 @@ module.exports = React.createClass({
                     <AccessibleButton element='span' className="mx_BaseAvatar"
                         onClick={onClick} {...otherProps}
                     >
-                        {textNode}
-                        {imgNode}
+                        { textNode }
+                        { imgNode }
                     </AccessibleButton>
                 );
             } else {
                 return (
                     <span className="mx_BaseAvatar" {...otherProps}>
-                        {textNode}
-                        {imgNode}
+                        { textNode }
+                        { imgNode }
                     </span>
                 );
             }
@@ -198,5 +229,5 @@ module.exports = React.createClass({
                     {...otherProps} />
             );
         }
-    }
+    },
 });

src/components/views/avatars/GroupAvatar.js

@@ -24,10 +24,12 @@ export default React.createClass({
 
     propTypes: {
         groupId: PropTypes.string,
+        groupName: PropTypes.string,
         groupAvatarUrl: PropTypes.string,
         width: PropTypes.number,
         height: PropTypes.number,
         resizeMethod: PropTypes.string,
+        onClick: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -52,11 +54,11 @@ export default React.createClass({
         // extract the props we use from props so we can pass any others through
         // should consider adding this as a global rule in js-sdk?
         /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
-        const {groupId, groupAvatarUrl, ...otherProps} = this.props;
+        const {groupId, groupAvatarUrl, groupName, ...otherProps} = this.props;
 
         return (
             <BaseAvatar
-                name={this.props.groupId[1]}
+                name={groupName || this.props.groupId[1]}
                 idName={this.props.groupId}
                 url={this.getGroupAvatarUrl()}
                 {...otherProps}

src/components/views/avatars/MemberAvatar.js

@@ -16,24 +16,25 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var Avatar = require('../../../Avatar');
-var sdk = require("../../../index");
+const React = require('react');
+import PropTypes from 'prop-types';
+const Avatar = require('../../../Avatar');
+const sdk = require("../../../index");
 const dispatcher = require("../../../dispatcher");
 
 module.exports = React.createClass({
     displayName: 'MemberAvatar',
 
     propTypes: {
-        member: React.PropTypes.object.isRequired,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string,
+        member: PropTypes.object.isRequired,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
         // The onClick to give the avatar
-        onClick: React.PropTypes.func,
+        onClick: PropTypes.func,
         // Whether the onClick of the avatar should be overriden to dispatch 'view_user'
-        viewUserOnClick: React.PropTypes.bool,
-        title: React.PropTypes.string,
+        viewUserOnClick: PropTypes.bool,
+        title: PropTypes.string,
     },
 
     getDefaultProps: function() {
@@ -63,14 +64,14 @@ module.exports = React.createClass({
             imageUrl: Avatar.avatarUrlForMember(props.member,
                                          props.width,
                                          props.height,
-                                         props.resizeMethod)
+                                         props.resizeMethod),
         };
     },
 
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {member, onClick, viewUserOnClick, ...otherProps} = this.props;
+        let {member, onClick, viewUserOnClick, ...otherProps} = this.props;
 
         if (viewUserOnClick) {
             onClick = () => {
@@ -83,7 +84,7 @@ module.exports = React.createClass({
 
         return (
             <BaseAvatar {...otherProps} name={this.state.name} title={this.state.title}
-                idName={member.userId} url={this.state.imageUrl} onClick={onClick}/>
+                idName={member.userId} url={this.state.imageUrl} onClick={onClick} />
         );
-    }
+    },
 });

src/components/views/avatars/RoomAvatar.js

@@ -13,11 +13,13 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-var React = require('react');
-var ContentRepo = require("matrix-js-sdk").ContentRepo;
-var MatrixClientPeg = require('../../../MatrixClientPeg');
-var Avatar = require('../../../Avatar');
-var sdk = require("../../../index");
+import React from "react";
+import PropTypes from 'prop-types';
+import {ContentRepo} from "matrix-js-sdk";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import Modal from '../../../Modal';
+import sdk from "../../../index";
+import DMRoomMap from '../../../utils/DMRoomMap';
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -26,11 +28,12 @@ module.exports = React.createClass({
     // oobData.avatarUrl should be set (else there
     // would be nowhere to get the avatar from)
     propTypes: {
-        room: React.PropTypes.object,
-        oobData: React.PropTypes.object,
-        width: React.PropTypes.number,
-        height: React.PropTypes.number,
-        resizeMethod: React.PropTypes.string
+        room: PropTypes.object,
+        oobData: PropTypes.object,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
+        viewAvatarOnClick: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -44,13 +47,35 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            urls: this.getImageUrls(this.props)
+            urls: this.getImageUrls(this.props),
         };
     },
 
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
     componentWillReceiveProps: function(newProps) {
         this.setState({
-            urls: this.getImageUrls(newProps)
+            urls: this.getImageUrls(newProps),
+        });
+    },
+
+    onRoomStateEvents: function(ev) {
+        if (!this.props.room ||
+            ev.getRoomId() !== this.props.room.roomId ||
+            ev.getType() !== 'm.room.avatar'
+        ) return;
+
+        this.setState({
+            urls: this.getImageUrls(this.props),
         });
     },
 
@@ -61,11 +86,10 @@ module.exports = React.createClass({
                 props.oobData.avatarUrl,
                 Math.floor(props.width * window.devicePixelRatio),
                 Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod
+                props.resizeMethod,
             ), // highest priority
             this.getRoomAvatarUrl(props),
-            this.getOneToOneAvatar(props),
-            this.getFallbackAvatar(props) // lowest priority
+            this.getOneToOneAvatar(props), // lowest priority
         ].filter(function(url) {
             return (url != null && url != "");
         });
@@ -79,76 +103,62 @@ module.exports = React.createClass({
             Math.floor(props.width * window.devicePixelRatio),
             Math.floor(props.height * window.devicePixelRatio),
             props.resizeMethod,
-            false
+            false,
         );
     },
 
     getOneToOneAvatar: function(props) {
-        if (!props.room) return null;
-
-        var mlist = props.room.currentState.members;
-        var userIds = [];
-        // for .. in optimisation to return early if there are >2 keys
-        for (var uid in mlist) {
-            if (mlist.hasOwnProperty(uid)) {
-                userIds.push(uid);
-            }
-            if (userIds.length > 2) {
-                return null;
-            }
-        }
-
-        if (userIds.length == 2) {
-            var theOtherGuy = null;
-            if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
-                theOtherGuy = mlist[userIds[1]];
-            } else {
-                theOtherGuy = mlist[userIds[0]];
-            }
-            return theOtherGuy.getAvatarUrl(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod,
-                false
-            );
-        } else if (userIds.length == 1) {
-            return mlist[userIds[0]].getAvatarUrl(
-                MatrixClientPeg.get().getHomeserverUrl(),
-                Math.floor(props.width * window.devicePixelRatio),
-                Math.floor(props.height * window.devicePixelRatio),
-                props.resizeMethod,
-                false
-            );
-        } else {
-           return null;
-        }
-    },
-
-    getFallbackAvatar: function(props) {
-        let roomId = null;
-        if (props.oobData && props.oobData.roomId) {
-            roomId = this.props.oobData.roomId;
-        } else if (props.room) {
-            roomId = props.room.roomId;
-        } else {
+        const room = props.room;
+        if (!room) {
             return null;
         }
+        let otherMember = null;
+        const otherUserId = DMRoomMap.shared().getUserIdForRoomId(room.roomId);
+        if (otherUserId) {
+            otherMember = room.getMember(otherUserId);
+        } else {
+            // if the room is not marked as a 1:1, but only has max 2 members
+            // then still try to show any avatar (pref. other member)
+            otherMember = room.getAvatarFallbackMember();
+        }
+        if (otherMember) {
+            return otherMember.getAvatarUrl(
+                MatrixClientPeg.get().getHomeserverUrl(),
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
+                props.resizeMethod,
+                false,
+            );
+        }
+        return null;
+    },
 
-        return Avatar.defaultAvatarUrlForString(roomId);
+    onRoomAvatarClick: function() {
+        const avatarUrl = this.props.room.getAvatarUrl(
+            MatrixClientPeg.get().getHomeserverUrl(),
+            null, null, null, false);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: avatarUrl,
+            name: this.props.room.name,
+        };
+
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
     },
 
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {room, oobData, ...otherProps} = this.props;
+        /*eslint no-unused-vars: ["error", { "ignoreRestSiblings": true }]*/
+        const {room, oobData, viewAvatarOnClick, ...otherProps} = this.props;
 
-        var roomName = room ? room.name : oobData.name;
+        const roomName = room ? room.name : oobData.name;
 
         return (
             <BaseAvatar {...otherProps} name={roomName}
                 idName={room ? room.roomId : null}
-                urls={this.state.urls} />
+                urls={this.state.urls}
+                onClick={this.props.viewAvatarOnClick ? this.onRoomAvatarClick : null} />
         );
-    }
+    },
 });

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

@@ -0,0 +1,87 @@
+/*
+Copyright 2018 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 PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import {Group} from 'matrix-js-sdk';
+import GroupStore from "../../../stores/GroupStore";
+
+export default class GroupInviteTileContextMenu extends React.Component {
+    static propTypes = {
+        group: PropTypes.instanceOf(Group).isRequired,
+        /* callback called when the menu is dismissed */
+        onFinished: PropTypes.func,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this._onClickReject = this._onClickReject.bind(this);
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    _onClickReject() {
+        const QuestionDialog = sdk.getComponent('dialogs.QuestionDialog');
+        Modal.createTrackedDialog('Reject community invite', '', QuestionDialog, {
+            title: _t('Reject invitation'),
+            description: _t('Are you sure you want to reject the invitation?'),
+            onFinished: async (shouldLeave) => {
+                if (!shouldLeave) return;
+
+                // FIXME: controller shouldn't be loading a view :(
+                const Loader = sdk.getComponent("elements.Spinner");
+                const modal = Modal.createDialog(Loader, null, 'mx_Dialog_spinner');
+
+                try {
+                    await GroupStore.leaveGroup(this.props.group.groupId);
+                } catch (e) {
+                    console.error("Error rejecting community invite: ", e);
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Error rejecting invite', '', ErrorDialog, {
+                        title: _t("Error"),
+                        description: _t("Unable to reject invite"),
+                    });
+                } finally {
+                    modal.close();
+                }
+            },
+        });
+
+        // Close the context menu
+        if (this.props.onFinished) {
+            this.props.onFinished();
+        }
+    }
+
+    render() {
+        return <div>
+            <div className="mx_RoomTileContextMenu_leave" onClick={this._onClickReject} >
+                <img className="mx_RoomTileContextMenu_tag_icon" src="img/icon_context_delete.svg" width="15" height="15" />
+                { _t('Reject') }
+            </div>
+        </div>;
+    }
+}

src/components/views/context_menus/MessageContextMenu.js

@@ -0,0 +1,353 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import {EventStatus} from 'matrix-js-sdk';
+
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+import Resend from '../../../Resend';
+import SettingsStore from '../../../settings/SettingsStore';
+import {makeEventPermalink} from '../../../matrix-to';
+import { isUrlPermitted } from '../../../HtmlUtils';
+
+module.exports = React.createClass({
+    displayName: 'MessageContextMenu',
+
+    propTypes: {
+        /* the MatrixEvent associated with the context menu */
+        mxEvent: PropTypes.object.isRequired,
+
+        /* an optional EventTileOps implementation that can be used to unhide preview widgets */
+        eventTileOps: PropTypes.object,
+
+        /* an optional function to be called when the user clicks collapse thread, if not provided hide button */
+        collapseReplyThread: PropTypes.func,
+
+        /* callback called when the menu is dismissed */
+        onFinished: 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',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
+    onPermalinkClick: function(e: Event) {
+        e.preventDefault();
+        const ShareDialog = sdk.getComponent("dialogs.ShareDialog");
+        Modal.createTrackedDialog('share room message dialog', '', ShareDialog, {
+            target: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
+    onReplyClick: function() {
+        dis.dispatch({
+            action: 'reply_to_event',
+            event: this.props.mxEvent,
+        });
+        this.closeMenu();
+    },
+
+    onCollapseReplyThreadClick: function() {
+        this.props.collapseReplyThread();
+        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;
+        let collapseReplyThread;
+
+        // status is SENT before remote-echo, null after
+        const isSent = !eventStatus || eventStatus === EventStatus.SENT;
+
+        if (eventStatus === EventStatus.NOT_SENT) {
+            resendButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onResendClick}>
+                    { _t('Resend') }
+                </div>
+            );
+        }
+
+        if (isSent && this.state.canRedact) {
+            redactButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
+                    { _t('Remove') }
+                </div>
+            );
+        }
+
+        if (eventStatus === EventStatus.QUEUED || eventStatus === EventStatus.NOT_SENT) {
+            cancelButton = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onCancelSendClick}>
+                    { _t('Cancel Sending') }
+                </div>
+            );
+        }
+
+        if (isSent && this.props.mxEvent.getType() === 'm.room.message') {
+            const content = this.props.mxEvent.getContent();
+            if (content.msgtype && content.msgtype !== 'm.bad.encrypted' && content.hasOwnProperty('body')) {
+                forwardButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onForwardClick}>
+                        { _t('Forward Message') }
+                    </div>
+                );
+
+                replyButton = (
+                    <div className="mx_MessageContextMenu_field" onClick={this.onReplyClick}>
+                        { _t('Reply') }
+                    </div>
+                );
+
+                if (this.state.canPin) {
+                    pinButton = (
+                        <div className="mx_MessageContextMenu_field" onClick={this.onPinClick}>
+                            { this._isPinned() ? _t('Unpin Message') : _t('Pin Message') }
+                        </div>
+                    );
+                }
+            }
+        }
+
+        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.onPermalinkClick}>{ _t('Share Message') }</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>
+          );
+        }
+
+        if (this.props.collapseReplyThread) {
+            collapseReplyThread = (
+                <div className="mx_MessageContextMenu_field" onClick={this.onCollapseReplyThreadClick}>
+                    { _t('Collapse Reply Thread') }
+                </div>
+            );
+        }
+
+        return (
+            <div>
+                { resendButton }
+                { redactButton }
+                { cancelButton }
+                { forwardButton }
+                { pinButton }
+                { viewSourceButton }
+                { viewClearSourceButton }
+                { unhidePreviewButton }
+                { permalinkButton }
+                { quoteButton }
+                { replyButton }
+                { externalURLButton }
+                { collapseReplyThread }
+            </div>
+        );
+    },
+});

src/components/views/context_menus/RoomTileContextMenu.js

@@ -0,0 +1,366 @@
+/*
+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 '../../../index';
+import { _t, _td } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import * as Rooms from '../../../Rooms';
+import * as RoomNotifs from '../../../RoomNotifs';
+import Modal from '../../../Modal';
+import RoomListActions from '../../../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 myMembership = this.props.room.getMyMembership();
+
+        // Can't set notif level or tags on non-join rooms
+        if (myMembership !== 'join') {
+            return this._renderLeaveMenu(myMembership);
+        }
+
+        return (
+            <div>
+                { this._renderNotifMenu() }
+                <hr className="mx_RoomTileContextMenu_separator" />
+                { this._renderLeaveMenu(myMembership) }
+                <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 '../../../languageHandler';
+import dis from '../../../dispatcher';
+import TagOrderActions from '../../../actions/TagOrderActions';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../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/create_room/CreateRoomButton.js

@@ -17,11 +17,12 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 module.exports = React.createClass({
     displayName: 'CreateRoomButton',
     propTypes: {
-        onCreateRoom: React.PropTypes.func,
+        onCreateRoom: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -36,7 +37,7 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <button className="mx_CreateRoomButton" onClick={this.onClick}>{_t("Create Room")}</button>
+            <button className="mx_CreateRoomButton" onClick={this.onClick}>{ _t("Create Room") }</button>
         );
-    }
+    },
 });

src/components/views/create_room/Presets.js

@@ -16,10 +16,11 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
-var Presets = {
+const Presets = {
     PrivateChat: "private_chat",
     PublicChat: "public_chat",
     Custom: "custom",
@@ -28,8 +29,8 @@ var Presets = {
 module.exports = React.createClass({
     displayName: 'CreateRoomPresets',
     propTypes: {
-        onChange: React.PropTypes.func,
-        preset: React.PropTypes.string
+        onChange: PropTypes.func,
+        preset: PropTypes.string,
     },
 
     Presets: Presets,
@@ -47,10 +48,10 @@ module.exports = React.createClass({
     render: function() {
         return (
             <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
-                <option value={this.Presets.PrivateChat}>{_t("Private Chat")}</option>
-                <option value={this.Presets.PublicChat}>{_t("Public Chat")}</option>
-                <option value={this.Presets.Custom}>{_t("Custom")}</option>
+                <option value={this.Presets.PrivateChat}>{ _t("Private Chat") }</option>
+                <option value={this.Presets.PublicChat}>{ _t("Public Chat") }</option>
+                <option value={this.Presets.Custom}>{ _t("Custom") }</option>
             </select>
         );
-    }
+    },
 });

src/components/views/create_room/RoomAlias.js

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
+const React = require('react');
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
@@ -22,9 +23,9 @@ module.exports = React.createClass({
     propTypes: {
         // Specifying a homeserver will make magical things happen when you,
         // e.g. start typing in the room alias box.
-        homeserver: React.PropTypes.string,
-        alias: React.PropTypes.string,
-        onChange: React.PropTypes.func,
+        homeserver: PropTypes.string,
+        alias: PropTypes.string,
+        onChange: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -35,10 +36,10 @@ module.exports = React.createClass({
     },
 
     getAliasLocalpart: function() {
-        var room_alias = this.props.alias;
+        let room_alias = this.props.alias;
 
         if (room_alias && this.props.homeserver) {
-            var suffix = ":" + this.props.homeserver;
+            const suffix = ":" + this.props.homeserver;
             if (room_alias.startsWith("#") && room_alias.endsWith(suffix)) {
                 room_alias = room_alias.slice(1, -suffix.length);
             }
@@ -52,22 +53,22 @@ module.exports = React.createClass({
     },
 
     onFocus: function(ev) {
-        var target = ev.target;
-        var curr_val = ev.target.value;
+        const target = ev.target;
+        const curr_val = ev.target.value;
 
         if (this.props.homeserver) {
             if (curr_val == "") {
-                var self = this;
+                const self = this;
                 setTimeout(function() {
                     target.value = "#:" + self.props.homeserver;
                     target.setSelectionRange(1, 1);
                 }, 0);
             } else {
-                var suffix = ":" + this.props.homeserver;
+                const suffix = ":" + this.props.homeserver;
                 setTimeout(function() {
                     target.setSelectionRange(
                         curr_val.startsWith("#") ? 1 : 0,
-                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length
+                        curr_val.endsWith(suffix) ? (target.value.length - suffix.length) : target.value.length,
                     );
                 }, 0);
             }
@@ -75,7 +76,7 @@ module.exports = React.createClass({
     },
 
     onBlur: function(ev) {
-        var curr_val = ev.target.value;
+        const curr_val = ev.target.value;
 
         if (this.props.homeserver) {
             if (curr_val == "#:" + this.props.homeserver) {
@@ -84,8 +85,8 @@ module.exports = React.createClass({
             }
 
             if (curr_val != "") {
-                var new_val = ev.target.value;
-                var suffix = ":" + this.props.homeserver;
+                let new_val = ev.target.value;
+                const suffix = ":" + this.props.homeserver;
                 if (!curr_val.startsWith("#")) new_val = "#" + new_val;
                 if (!curr_val.endsWith(suffix)) new_val = new_val + suffix;
                 ev.target.value = new_val;
@@ -97,7 +98,7 @@ module.exports = React.createClass({
         return (
             <input type="text" className="mx_RoomAlias" placeholder={_t("Alias (optional)")}
                 onChange={this.onValueChanged} onFocus={this.onFocus} onBlur={this.onBlur}
-                value={this.props.alias}/>
+                value={this.props.alias} />
         );
-    }
+    },
 });

src/components/views/dialogs/AddressPickerDialog.js

@@ -1,6 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2017 New Vector Ltd
+Copyright 2017, 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,22 +17,31 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import AccessibleButton from '../elements/AccessibleButton';
 import Promise from 'bluebird';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
+import GroupStore from '../../../stores/GroupStore';
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
 
+const addressTypeName = {
+    'mx-user-id': _td("Matrix ID"),
+    'mx-room-id': _td("Matrix Room ID"),
+    'email': _td("email address"),
+};
+
+
 module.exports = React.createClass({
-    displayName: "UserPickerDialog",
+    displayName: "AddressPickerDialog",
 
     propTypes: {
         title: PropTypes.string.isRequired,
         description: PropTypes.node,
+        // Extra node inserted after picker input, dropdown and errors
+        extraNode: PropTypes.node,
         value: PropTypes.string,
         placeholder: PropTypes.string,
         roomId: PropTypes.string,
@@ -40,6 +49,12 @@ module.exports = React.createClass({
         focus: PropTypes.bool,
         validAddressTypes: PropTypes.arrayOf(PropTypes.oneOf(addressTypes)),
         onFinished: PropTypes.func.isRequired,
+        groupId: PropTypes.string,
+        // The type of entity to search for. Default: 'user'.
+        pickerType: PropTypes.oneOf(['user', 'room']),
+        // Whether the current user should be included in the addresses returned. Only
+        // applicable when pickerType is `user`. Default: false.
+        includeSelf: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -47,6 +62,8 @@ module.exports = React.createClass({
             value: "",
             focus: true,
             validAddressTypes: addressTypes,
+            pickerType: 'user',
+            includeSelf: false,
         };
     },
 
@@ -56,7 +73,7 @@ module.exports = React.createClass({
 
             // List of UserAddressType objects representing
             // the list of addresses we're going to invite
-            userList: [],
+            selectedList: [],
 
             // Whether a search is ongoing
             busy: false,
@@ -66,10 +83,9 @@ module.exports = React.createClass({
             serverSupportsUserDirectory: true,
             // The query being searched for
             query: "",
-            // List of UserAddressType objects representing
-            // the set of auto-completion results for the current search
-            // query.
-            queryList: [],
+            // List of UserAddressType objects representing the set of
+            // auto-completion results for the current search query.
+            suggestedList: [],
         };
     },
 
@@ -81,14 +97,14 @@ module.exports = React.createClass({
     },
 
     onButtonClick: function() {
-        let userList = this.state.userList.slice();
+        let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
-        // If there is and it's valid add it to the local userList
+        // If there is and it's valid add it to the local selectedList
         if (this.refs.textinput.value !== '') {
-            userList = this._addInputToList();
-            if (userList === null) return;
+            selectedList = this._addInputToList();
+            if (selectedList === null) return;
         }
-        this.props.onFinished(true, userList);
+        this.props.onFinished(true, selectedList);
     },
 
     onCancel: function() {
@@ -108,18 +124,18 @@ module.exports = React.createClass({
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.moveSelectionDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
+        } else if (this.state.suggestedList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.chooseSelection();
-        } else if (this.refs.textinput.value.length === 0 && this.state.userList.length && e.keyCode === 8) { // backspace
+        } else if (this.refs.textinput.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
-            this.onDismissed(this.state.userList.length - 1)();
+            this.onDismissed(this.state.selectedList.length - 1)();
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.refs.textinput.value == '') {
+            if (this.refs.textinput.value === '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
@@ -138,17 +154,29 @@ module.exports = React.createClass({
             clearTimeout(this.queryChangedDebouncer);
         }
         // Only do search if there is something to search
-        if (query.length > 0 && query != '@' && query.length >= 2) {
+        if (query.length > 0 && query !== '@' && query.length >= 2) {
             this.queryChangedDebouncer = setTimeout(() => {
-                if (this.state.serverSupportsUserDirectory) {
-                    this._doUserDirectorySearch(query);
+                if (this.props.pickerType === 'user') {
+                    if (this.props.groupId) {
+                        this._doNaiveGroupSearch(query);
+                    } else if (this.state.serverSupportsUserDirectory) {
+                        this._doUserDirectorySearch(query);
+                    } else {
+                        this._doLocalSearch(query);
+                    }
+                } else if (this.props.pickerType === 'room') {
+                    if (this.props.groupId) {
+                        this._doNaiveGroupRoomSearch(query);
+                    } else {
+                        this._doRoomSearch(query);
+                    }
                 } else {
-                    this._doLocalSearch(query);
+                    console.error('Unknown pickerType', this.props.pickerType);
                 }
             }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
         } else {
             this.setState({
-                queryList: [],
+                suggestedList: [],
                 query: "",
                 searchError: null,
             });
@@ -157,11 +185,11 @@ module.exports = React.createClass({
 
     onDismissed: function(index) {
         return () => {
-            const userList = this.state.userList.slice();
-            userList.splice(index, 1);
+            const selectedList = this.state.selectedList.slice();
+            selectedList.splice(index, 1);
             this.setState({
-                userList: userList,
-                queryList: [],
+                selectedList,
+                suggestedList: [],
                 query: "",
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
@@ -175,16 +203,129 @@ module.exports = React.createClass({
     },
 
     onSelected: function(index) {
-        const userList = this.state.userList.slice();
-        userList.push(this.state.queryList[index]);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(this.state.suggestedList[index]);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
+    _doNaiveGroupSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        this.setState({
+            busy: true,
+            query,
+            searchError: null,
+        });
+        MatrixClientPeg.get().getGroupUsers(this.props.groupId).then((resp) => {
+            const results = [];
+            resp.chunk.forEach((u) => {
+                const userIdMatch = u.user_id.toLowerCase().includes(lowerCaseQuery);
+                const displayNameMatch = (u.displayname || '').toLowerCase().includes(lowerCaseQuery);
+                if (!(userIdMatch || displayNameMatch)) {
+                    return;
+                }
+                results.push({
+                    user_id: u.user_id,
+                    avatar_url: u.avatar_url,
+                    display_name: u.displayname,
+                });
+            });
+            this._processResults(results, query);
+        }).catch((err) => {
+            console.error('Error whilst searching group rooms: ', err);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    _doNaiveGroupRoomSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        const results = [];
+        GroupStore.getGroupRooms(this.props.groupId).forEach((r) => {
+            const nameMatch = (r.name || '').toLowerCase().includes(lowerCaseQuery);
+            const topicMatch = (r.topic || '').toLowerCase().includes(lowerCaseQuery);
+            const aliasMatch = (r.canonical_alias || '').toLowerCase().includes(lowerCaseQuery);
+            if (!(nameMatch || topicMatch || aliasMatch)) {
+                return;
+            }
+            results.push({
+                room_id: r.room_id,
+                avatar_url: r.avatar_url,
+                name: r.name || r.canonical_alias,
+            });
+        });
+        this._processResults(results, query);
+        this.setState({
+            busy: false,
+        });
+    },
+
+    _doRoomSearch: function(query) {
+        const lowerCaseQuery = query.toLowerCase();
+        const rooms = MatrixClientPeg.get().getRooms();
+        const results = [];
+        rooms.forEach((room) => {
+            let rank = Infinity;
+            const nameEvent = room.currentState.getStateEvents('m.room.name', '');
+            const name = nameEvent ? nameEvent.getContent().name : '';
+            const canonicalAlias = room.getCanonicalAlias();
+            const aliasEvents = room.currentState.getStateEvents('m.room.aliases');
+            const aliases = aliasEvents.map((ev) => ev.getContent().aliases).reduce((a, b) => {
+                return a.concat(b);
+            }, []);
+
+            const nameMatch = (name || '').toLowerCase().includes(lowerCaseQuery);
+            let aliasMatch = false;
+            let shortestMatchingAliasLength = Infinity;
+            aliases.forEach((alias) => {
+                if ((alias || '').toLowerCase().includes(lowerCaseQuery)) {
+                    aliasMatch = true;
+                    if (shortestMatchingAliasLength > alias.length) {
+                        shortestMatchingAliasLength = alias.length;
+                    }
+                }
+            });
+
+            if (!(nameMatch || aliasMatch)) {
+                return;
+            }
+
+            if (aliasMatch) {
+                // A shorter matching alias will give a better rank
+                rank = shortestMatchingAliasLength;
+            }
+
+            const avatarEvent = room.currentState.getStateEvents('m.room.avatar', '');
+            const avatarUrl = avatarEvent ? avatarEvent.getContent().url : undefined;
+
+            results.push({
+                rank,
+                room_id: room.roomId,
+                avatar_url: avatarUrl,
+                name: name || canonicalAlias || aliases[0] || _t('Unnamed Room'),
+            });
+        });
+
+        // Sort by rank ascending (a high rank being less relevant)
+        const sortedResults = results.sort((a, b) => {
+            return a.rank - b.rank;
+        });
+
+        this._processResults(sortedResults, query);
+        this.setState({
+            busy: false,
+        });
+    },
+
     _doUserDirectorySearch: function(query) {
         this.setState({
             busy: true,
@@ -244,18 +385,31 @@ module.exports = React.createClass({
     },
 
     _processResults: function(results, query) {
-        const queryList = [];
-        results.forEach((user) => {
-            if (user.user_id === MatrixClientPeg.get().credentials.userId) {
+        const suggestedList = [];
+        results.forEach((result) => {
+            if (result.room_id) {
+                suggestedList.push({
+                    addressType: 'mx-room-id',
+                    address: result.room_id,
+                    displayName: result.name,
+                    avatarMxc: result.avatar_url,
+                    isKnown: true,
+                });
                 return;
             }
+            if (!this.props.includeSelf &&
+                result.user_id === MatrixClientPeg.get().credentials.userId
+            ) {
+                return;
+            }
+
             // Return objects, structure of which is defined
             // by UserAddressType
-            queryList.push({
-                addressType: 'mx',
-                address: user.user_id,
-                displayName: user.display_name,
-                avatarMxc: user.avatar_url,
+            suggestedList.push({
+                addressType: 'mx-user-id',
+                address: result.user_id,
+                displayName: result.display_name,
+                avatarMxc: result.avatar_url,
                 isKnown: true,
             });
         });
@@ -265,18 +419,18 @@ module.exports = React.createClass({
         // a perfectly valid address if there are close matches.
         const addrType = getAddressType(query);
         if (this.props.validAddressTypes.includes(addrType)) {
-            queryList.unshift({
+            suggestedList.unshift({
                 addressType: addrType,
                 address: query,
                 isKnown: false,
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-            if (addrType == 'email') {
+            if (addrType === 'email') {
                 this._lookupThreepid(addrType, query).done();
             }
         }
         this.setState({
-            queryList,
+            suggestedList,
             error: false,
         }, () => {
             if (this.addressSelector) this.addressSelector.moveSelectionTop();
@@ -291,27 +445,34 @@ module.exports = React.createClass({
             address: addressText,
             isKnown: false,
         };
-        if (addrType == null) {
+        if (!this.props.validAddressTypes.includes(addrType)) {
             this.setState({ error: true });
             return null;
-        } else if (addrType == 'mx') {
+        } else if (addrType === 'mx-user-id') {
             const user = MatrixClientPeg.get().getUser(addrObj.address);
             if (user) {
                 addrObj.displayName = user.displayName;
                 addrObj.avatarMxc = user.avatarUrl;
                 addrObj.isKnown = true;
             }
+        } else if (addrType === 'mx-room-id') {
+            const room = MatrixClientPeg.get().getRoom(addrObj.address);
+            if (room) {
+                addrObj.displayName = room.name;
+                addrObj.avatarMxc = room.avatarUrl;
+                addrObj.isKnown = true;
+            }
         }
 
-        const userList = this.state.userList.slice();
-        userList.push(addrObj);
+        const selectedList = this.state.selectedList.slice();
+        selectedList.push(addrObj);
         this.setState({
-            userList: userList,
-            queryList: [],
+            selectedList,
+            suggestedList: [],
             query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-        return userList;
+        return selectedList;
     },
 
     _lookupThreepid: function(medium, address) {
@@ -337,7 +498,7 @@ module.exports = React.createClass({
             if (res === null) return null;
             if (cancelled) return null;
             this.setState({
-                queryList: [{
+                suggestedList: [{
                     // a UserAddressType
                     addressType: medium,
                     address: address,
@@ -350,24 +511,42 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const AddressSelector = sdk.getComponent("elements.AddressSelector");
         this.scrollElement = null;
 
+        // map addressType => set of addresses to avoid O(n*m) operation
+        const selectedAddresses = {};
+        this.state.selectedList.forEach(({address, addressType}) => {
+            if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
+            selectedAddresses[addressType].add(address);
+        });
+
+        // Filter out any addresses in the above already selected addresses (matching both type and address)
+        const filteredSuggestedList = this.state.suggestedList.filter(({address, addressType}) => {
+            return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
+        });
+
         const query = [];
         // create the invite list
-        if (this.state.userList.length > 0) {
+        if (this.state.selectedList.length > 0) {
             const AddressTile = sdk.getComponent("elements.AddressTile");
-            for (let i = 0; i < this.state.userList.length; i++) {
+            for (let i = 0; i < this.state.selectedList.length; i++) {
                 query.push(
-                    <AddressTile key={i} address={this.state.userList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />,
+                    <AddressTile
+                        key={i}
+                        address={this.state.selectedList[i]}
+                        canDismiss={true}
+                        onDismissed={this.onDismissed(i)}
+                        showAddress={this.props.pickerType === 'user'} />,
                 );
             }
         }
 
         // Add the query at the end
         query.push(
-            <textarea key={this.state.userList.length}
+            <textarea key={this.state.selectedList.length}
                 rows="1"
                 id="textinput"
                 ref="textinput"
@@ -382,36 +561,32 @@ module.exports = React.createClass({
         let error;
         let addressSelector;
         if (this.state.error) {
+            const validTypeDescriptions = this.props.validAddressTypes.map((t) => _t(addressTypeName[t]));
             error = <div className="mx_ChatInviteDialog_error">
-                {_t("You have entered an invalid contact. Try using their Matrix ID or email address.")}
+                { _t("You have entered an invalid address.") }
+                <br />
+                { _t("Try using one of the following valid address types: %(validTypesList)s.", {
+                    validTypesList: validTypeDescriptions.join(", "),
+                }) }
             </div>;
         } else if (this.state.searchError) {
-            error = <div className="mx_ChatInviteDialog_error">{this.state.searchError}</div>;
-        } else if (
-            this.state.query.length > 0 &&
-            this.state.queryList.length === 0 &&
-            !this.state.busy
-        ) {
-            error = <div className="mx_ChatInviteDialog_error">{_t("No results")}</div>;
+            error = <div className="mx_ChatInviteDialog_error">{ this.state.searchError }</div>;
+        } else if (this.state.query.length > 0 && filteredSuggestedList.length === 0 && !this.state.busy) {
+            error = <div className="mx_ChatInviteDialog_error">{ _t("No results") }</div>;
         } else {
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
-                    addressList={ this.state.queryList }
-                    onSelected={ this.onSelected }
-                    truncateAt={ TRUNCATE_QUERY_LIST }
+                    addressList={filteredSuggestedList}
+                    showAddress={this.props.pickerType === 'user'}
+                    onSelected={this.onSelected}
+                    truncateAt={TRUNCATE_QUERY_LIST}
                 />
             );
         }
 
         return (
-            <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
-                <AccessibleButton className="mx_ChatInviteDialog_cancel"
-                        onClick={this.onCancel} >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </AccessibleButton>
+            <BaseDialog className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}
+                onFinished={this.props.onFinished} title={this.props.title}>
                 <div className="mx_ChatInviteDialog_label">
                     <label htmlFor="textinput">{ this.props.description }</label>
                 </div>
@@ -419,13 +594,12 @@ module.exports = React.createClass({
                     <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
                     { error }
                     { addressSelector }
+                    { this.props.extraNode }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
-                        {this.props.button}
-                    </button>
-                </div>
-            </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onButtonClick}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
         );
     },
 });

src/components/views/dialogs/BaseDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,10 +16,16 @@ limitations under the License.
 */
 
 import React from 'react';
+import FocusTrap from 'focus-trap-react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-import * as KeyCode from '../../../KeyCode';
+import { MatrixClient } from 'matrix-js-sdk';
+
+import { KeyCode } from '../../../Keyboard';
 import AccessibleButton from '../elements/AccessibleButton';
 import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
 
 /**
  * Basic container for modal dialogs.
@@ -31,55 +38,103 @@ export default React.createClass({
 
     propTypes: {
         // onFinished callback to call when Escape is pressed
-        onFinished: React.PropTypes.func.isRequired,
+        // Take a boolean which is true if the dialog was dismissed
+        // with a positive / confirm action or false if it was
+        // cancelled (BaseDialog itself only calls this with false).
+        onFinished: PropTypes.func.isRequired,
 
-        // callback to call when Enter is pressed
-        onEnterPressed: React.PropTypes.func,
+        // Whether the dialog should have a 'close' button that will
+        // cause the dialog to be cancelled. This should only be set
+        // to false if there is nothing the app can sensibly do if the
+        // dialog is cancelled, eg. "We can't restore your session and
+        // the app cannot work". Default: true.
+        hasCancel: PropTypes.bool,
+
+        // called when a key is pressed
+        onKeyDown: PropTypes.func,
 
         // CSS class to apply to dialog div
-        className: React.PropTypes.string,
+        className: PropTypes.string,
 
         // Title for the dialog.
         // (could probably actually be something more complicated than a string if desired)
-        title: React.PropTypes.string.isRequired,
+        title: PropTypes.string.isRequired,
 
         // children should be the content of the dialog
-        children: React.PropTypes.node,
+        children: PropTypes.node,
+
+        // Id of content element
+        // If provided, this is used to add a aria-describedby attribute
+        contentId: PropTypes.string,
+
+        // optional additional class for the title element
+        titleClass: PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            hasCancel: true,
+        };
+    },
+
+    childContextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getChildContext: function() {
+        return {
+            matrixClient: this._matrixClient,
+        };
+    },
+
+    componentWillMount() {
+        this._matrixClient = MatrixClientPeg.get();
     },
 
     _onKeyDown: function(e) {
-        if (e.keyCode === KeyCode.ESCAPE) {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(e);
+        }
+        if (this.props.hasCancel && e.keyCode === KeyCode.ESCAPE) {
             e.stopPropagation();
             e.preventDefault();
-            this.props.onFinished();
-        } else if (e.keyCode === KeyCode.ENTER) {
-            if (this.props.onEnterPressed) {
-                e.stopPropagation();
-                e.preventDefault();
-                this.props.onEnterPressed(e);
-            }
+            this.props.onFinished(false);
         }
     },
 
     _onCancelClick: function(e) {
-        this.props.onFinished();
+        this.props.onFinished(false);
     },
 
     render: function() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
+        let cancelButton;
+        if (this.props.hasCancel) {
+            cancelButton = <AccessibleButton onClick={this._onCancelClick} className="mx_Dialog_cancelButton">
+                <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
+            </AccessibleButton>;
+        }
+
         return (
-            <div onKeyDown={this._onKeyDown} className={this.props.className}>
-                <AccessibleButton onClick={this._onCancelClick}
-                    className="mx_Dialog_cancelButton"
-                >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </AccessibleButton>
-                <div className='mx_Dialog_title'>
+            <FocusTrap onKeyDown={this._onKeyDown}
+                className={this.props.className}
+                role="dialog"
+                aria-labelledby='mx_BaseDialog_title'
+                // This should point to a node describing the dialog.
+                // If we were about to completely follow this recommendation we'd need to
+                // make all the components relying on BaseDialog to be aware of it.
+                // So instead we will use the whole content as the description.
+                // Description comes first and if the content contains more text,
+                // AT users can skip its presentation.
+                aria-describedby={this.props.contentId}
+            >
+                { cancelButton }
+                <div className={classNames('mx_Dialog_title', this.props.titleClass)} id='mx_BaseDialog_title'>
                     { this.props.title }
                 </div>
                 { this.props.children }
-            </div>
+            </FocusTrap>
         );
     },
 });

src/components/views/dialogs/BugReportDialog.js

@@ -0,0 +1,203 @@
+/*
+Copyright 2017 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.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+import { _t } from '../../../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(['../../../rageshake/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");
+                    // N.B. first param is passed to piwik and so doesn't want i18n
+                    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");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+
+        let error = null;
+        if (this.state.err) {
+            error = <div className="error">
+                {this.state.err}
+            </div>;
+        }
+
+        let progress = null;
+        if (this.state.busy) {
+            progress = (
+                <div className="progress">
+                    <Loader />
+                    {this.state.progress} ...
+                </div>
+            );
+        }
+
+        return (
+            <BaseDialog className="mx_BugReportDialog" onFinished={this._onCancel}
+                    title={_t('Submit debug logs')}
+                contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    <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(
+                            "Riot bugs are tracked on GitHub: <a>create a GitHub issue</a>.",
+                            {},
+                            {
+                                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>
+                <DialogButtons primaryButton={_t("Send logs")}
+                    onPrimaryButtonClick={this._onSubmit}
+                    focus={true}
+                    onCancel={this._onCancel}
+                    disabled={this.state.busy}
+                />
+            </BaseDialog>
+        );
+    }
+}
+
+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 '../../../index';
+import request from 'browser-request';
+import { _t } from '../../../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/ChatCreateOrReuseDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
@@ -27,6 +29,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
 
     constructor(props) {
         super(props);
+        this.onFinished = this.onFinished.bind(this);
         this.onRoomTileClick = this.onRoomTileClick.bind(this);
 
         this.state = {
@@ -51,18 +54,16 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         for (const roomId of dmRooms) {
             const room = client.getRoom(roomId);
             if (room) {
-                const me = room.getMember(client.credentials.userId);
-                const highlight = (
-                    room.getUnreadNotificationCount('highlight') > 0 ||
-                    me.membership == "invite"
-                );
+                const isInvite = room.getMyMembership() === "invite";
+                const highlight = room.getUnreadNotificationCount('highlight') > 0 || isInvite;
                 tiles.push(
                     <RoomTile key={room.roomId} room={room}
+                        transparent={true}
                         collapsed={false}
                         selected={false}
                         unread={Unread.doesRoomHaveUnreadMessages(room)}
                         highlight={highlight}
-                        isInvite={me.membership == "invite"}
+                        isInvite={isInvite}
                         onClick={this.onRoomTileClick}
                     />,
                 );
@@ -108,6 +109,10 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         this.props.onExistingRoomSelected(roomId);
     }
 
+    onFinished() {
+        this.props.onFinished(false);
+    }
+
     render() {
         let title = '';
         let content = null;
@@ -127,7 +132,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                 </div>
                 <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
             </AccessibleButton>;
-            content = <div className="mx_Dialog_content">
+            content = <div className="mx_Dialog_content" id='mx_Dialog_content'>
                 { _t('You already have existing direct chats with this user:') }
                 <div className="mx_ChatCreateOrReuseDialog_tiles">
                     { this.state.tiles }
@@ -137,6 +142,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
         } else {
             // Show the avatar, name and a button to confirm that a new chat is requested
             const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+            const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
             const Spinner = sdk.getComponent('elements.Spinner');
             title = _t('Start chatting');
 
@@ -144,7 +150,7 @@ export default class ChatCreateOrReuseDialog extends React.Component {
             if (this.state.busyProfile) {
                 profile = <Spinner />;
             } else if (this.state.profileError) {
-                profile = <div className="error">
+                profile = <div className="error" role="alert">
                     Unable to load profile information for { this.props.userId }
                 </div>;
             } else {
@@ -155,30 +161,28 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                         width={48} height={48}
                     />
                     <div className="mx_ChatCreateOrReuseDialog_profile_name">
-                        {this.state.profile.displayName || this.props.userId}
+                        { this.state.profile.displayName || this.props.userId }
                     </div>
                 </div>;
             }
             content = <div>
-                <div className="mx_Dialog_content">
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <p>
                         { _t('Click on the button below to start chatting!') }
                     </p>
                     { profile }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick}>
-                        { _t('Start Chatting') }
-                    </button>
-                </div>
+                <DialogButtons primaryButton={_t('Start Chatting')}
+                    onPrimaryButtonClick={this.props.onNewDMClick} focus={true} />
             </div>;
         }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className='mx_ChatCreateOrReuseDialog'
-                onFinished={ this.props.onFinished.bind(false) }
+                onFinished={this.onFinished}
                 title={title}
+                contentId='mx_Dialog_content'
             >
                 { content }
             </BaseDialog>
@@ -186,10 +190,10 @@ export default class ChatCreateOrReuseDialog extends React.Component {
     }
 }
 
-ChatCreateOrReuseDialog.propTyps = {
-    userId: React.PropTypes.string.isRequired,
+ChatCreateOrReuseDialog.propTypes = {
+    userId: PropTypes.string.isRequired,
     // Called when clicking outside of the dialog
-    onFinished: React.PropTypes.func.isRequired,
-    onNewDMClick: React.PropTypes.func.isRequired,
-    onExistingRoomSelected: React.PropTypes.func.isRequired,
+    onFinished: PropTypes.func.isRequired,
+    onNewDMClick: PropTypes.func.isRequired,
+    onExistingRoomSelected: PropTypes.func.isRequired,
 };

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import classnames from 'classnames';
 import { _t } from '../../../languageHandler';
 
 /*
@@ -24,51 +23,17 @@ import { _t } from '../../../languageHandler';
  */
 export default React.createClass({
     displayName: 'ConfirmRedactDialog',
-    propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
-    },
-
-    defaultProps: {
-        danger: false,
-    },
-
-    onOk: function() {
-        this.props.onFinished(true);
-    },
-
-    onCancel: function() {
-        this.props.onFinished(false);
-    },
 
     render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-
-        const title = _t("Confirm Removal");
-
-        const confirmButtonClass = classnames({
-            'mx_Dialog_primary': true,
-            'danger': false,
-        });
-
+        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
         return (
-            <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
-                title={title}
-            >
-                <div className="mx_Dialog_content">
-                    {_t("Are you sure you wish to remove (delete) this event? " +
-                        "Note that if you delete a room name or topic change, it could undo the change.")}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className={confirmButtonClass} onClick={this.onOk}>
-                        {_t("Remove")}
-                    </button>
-
-                    <button onClick={this.onCancel}>
-                        {_t("Cancel")}
-                    </button>
-                </div>
-            </BaseDialog>
+            <QuestionDialog onFinished={this.props.onFinished}
+                title={_t("Confirm Removal")}
+                description={
+                    _t("Are you sure you wish to remove (delete) this event? " +
+                       "Note that if you delete a room name or topic change, it could undo the change.")}
+                button={_t("Remove")}>
+            </QuestionDialog>
         );
     },
 });

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -15,9 +15,11 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import { MatrixClient } from 'matrix-js-sdk';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
-import classnames from 'classnames';
+import { GroupMemberType } from '../../../groups';
 
 /*
  * A dialog for confirming an operation on another user.
@@ -30,15 +32,21 @@ import classnames from 'classnames';
 export default React.createClass({
     displayName: 'ConfirmUserActionDialog',
     propTypes: {
-        member: React.PropTypes.object.isRequired, // matrix-js-sdk member object
-        action: React.PropTypes.string.isRequired, // eg. 'Ban'
+        // matrix-js-sdk (room) member object. Supply either this or 'groupMember'
+        member: PropTypes.object,
+        // group member object. Supply either this or 'member'
+        groupMember: GroupMemberType,
+        // needed if a group member is specified
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+        action: PropTypes.string.isRequired, // eg. 'Ban'
+        title: PropTypes.string.isRequired, // eg. 'Ban this user?'
 
         // Whether to display a text field for a reason
         // If true, the second argument to onFinished will
         // be the string entered.
-        askReason: React.PropTypes.bool,
-        danger: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        askReason: PropTypes.bool,
+        danger: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     defaultProps: {
@@ -68,13 +76,11 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
+        const BaseAvatar = sdk.getComponent("views.avatars.BaseAvatar");
 
-        const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
-        const confirmButtonClass = classnames({
-            'mx_Dialog_primary': true,
-            'danger': this.props.danger,
-        });
+        const confirmButtonClass = this.props.danger ? 'danger' : '';
 
         let reasonBox;
         if (this.props.askReason) {
@@ -83,7 +89,7 @@ export default React.createClass({
                     <form onSubmit={this.onOk}>
                         <input className="mx_ConfirmUserActionDialog_reasonField"
                             ref={this._collectReasonField}
-                            placeholder={ _t("Reason") }
+                            placeholder={_t("Reason")}
                             autoFocus={true}
                         />
                     </form>
@@ -91,30 +97,39 @@ export default React.createClass({
             );
         }
 
+        let avatar;
+        let name;
+        let userId;
+        if (this.props.member) {
+            avatar = <MemberAvatar member={this.props.member} width={48} height={48} />;
+            name = this.props.member.name;
+            userId = this.props.member.userId;
+        } else {
+            const httpAvatarUrl = this.props.groupMember.avatarUrl ?
+                this.props.matrixClient.mxcUrlToHttp(this.props.groupMember.avatarUrl, 48, 48) : null;
+            name = this.props.groupMember.displayname || this.props.groupMember.userId;
+            userId = this.props.groupMember.userId;
+            avatar = <BaseAvatar name={name} url={httpAvatarUrl} width={48} height={48} />;
+        }
+
         return (
             <BaseDialog className="mx_ConfirmUserActionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
-                title={title}
+                title={this.props.title}
+                contentId='mx_Dialog_content'
             >
-                <div className="mx_Dialog_content">
+                <div id="mx_Dialog_content" className="mx_Dialog_content">
                     <div className="mx_ConfirmUserActionDialog_avatar">
-                        <MemberAvatar member={this.props.member} width={48} height={48} />
+                        { avatar }
                     </div>
-                    <div className="mx_ConfirmUserActionDialog_name">{this.props.member.name}</div>
-                    <div className="mx_ConfirmUserActionDialog_userId">{this.props.member.userId}</div>
-                </div>
-                {reasonBox}
-                <div className="mx_Dialog_buttons">
-                    <button className={confirmButtonClass}
-                        onClick={this.onOk} autoFocus={!this.props.askReason}
-                    >
-                        {this.props.action}
-                    </button>
-
-                    <button onClick={this.onCancel}>
-                        { _t("Cancel") }
-                    </button>
+                    <div className="mx_ConfirmUserActionDialog_name">{ name }</div>
+                    <div className="mx_ConfirmUserActionDialog_userId">{ userId }</div>
                 </div>
+                { reasonBox }
+                <DialogButtons primaryButton={this.props.action}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={confirmButtonClass}
+                    focus={!this.props.askReason}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/CreateGroupDialog.js

@@ -21,10 +21,6 @@ import dis from '../../../dispatcher';
 import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 
-// We match fairly liberally and leave it up to the server to reject if
-// there are invalid characters etc.
-const GROUP_REGEX = /^\+(.*?):(.*)$/;
-
 export default React.createClass({
     displayName: 'CreateGroupDialog',
     propTypes: {
@@ -58,25 +54,16 @@ export default React.createClass({
     },
 
     _checkGroupId: function(e) {
-        const parsedGroupId = this._parseGroupId(this.state.groupId);
         let error = null;
-        if (parsedGroupId === null) {
-            error = _t(
-                "Group IDs must be of the form +localpart:%(domain)s",
-                {domain: MatrixClientPeg.get().getDomain()},
-            );
-        } else {
-            const domain = parsedGroupId[1];
-            if (domain !== MatrixClientPeg.get().getDomain()) {
-                error = _t(
-                    "It is currently only possible to create groups on your own home server: "+
-                    "use a group ID ending with %(domain)s",
-                    {domain: MatrixClientPeg.get().getDomain()},
-                );
-            }
+        if (!this.state.groupId) {
+            error = _t("Community IDs cannot be empty.");
+        } else if (!/^[a-z0-9=_\-\.\/]*$/.test(this.state.groupId)) {
+            error = _t("Community IDs may only contain characters a-z, 0-9, or '=_-./'");
         }
         this.setState({
             groupIdError: error,
+            // Reset createError to get rid of now stale error message
+            createError: null,
         });
         return error;
     },
@@ -86,19 +73,19 @@ export default React.createClass({
 
         if (this._checkGroupId()) return;
 
-        const parsedGroupId = this._parseGroupId(this.state.groupId);
         const profile = {};
         if (this.state.groupName !== '') {
             profile.name = this.state.groupName;
         }
         this.setState({creating: true});
         MatrixClientPeg.get().createGroup({
-            localpart: parsedGroupId[0],
+            localpart: this.state.groupId,
             profile: profile,
         }).then((result) => {
             dis.dispatch({
                 action: 'view_group',
                 group_id: result.group_id,
+                group_is_new: true,
             });
             this.props.onFinished(true);
         }).catch((e) => {
@@ -112,22 +99,6 @@ export default React.createClass({
         this.props.onFinished(false);
     },
 
-    /**
-     * Parse a string that may be a group ID
-     * If the string is a valid group ID, return a list of [localpart, domain],
-     * otherwise return null.
-     *
-     * @param {string} groupId The ID of the group
-     * @return {string[]} array of localpart, domain
-     */
-    _parseGroupId: function(groupId) {
-        const matches = GROUP_REGEX.exec(this.state.groupId);
-        if (!matches || matches.length < 3) {
-            return null;
-        }
-        return [matches[1], matches[2]];
-    },
-
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Spinner = sdk.getComponent('elements.Spinner');
@@ -141,22 +112,21 @@ export default React.createClass({
             // XXX: We should catch errcodes and give sensible i18ned messages for them,
             // rather than displaying what the server gives us, but synapse doesn't give
             // any yet.
-            createErrorNode = <div className="error">
-                <div>{_t('Room creation failed')}</div>
-                <div>{this.state.createError.message}</div>
+            createErrorNode = <div className="error" role="alert">
+                <div>{ _t('Something went wrong whilst creating your community') }</div>
+                <div>{ this.state.createError.message }</div>
             </div>;
         }
 
         return (
             <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
-                onEnterPressed={this._onFormSubmit}
-                title={_t('Create Group')}
+                title={_t('Create Community')}
             >
                 <form onSubmit={this._onFormSubmit}>
                     <div className="mx_Dialog_content">
                         <div className="mx_CreateGroupDialog_inputRow">
                             <div className="mx_CreateGroupDialog_label">
-                                <label htmlFor="groupname">{_t('Group Name')}</label>
+                                <label htmlFor="groupname">{ _t('Community Name') }</label>
                             </div>
                             <div>
                                 <input id="groupname" className="mx_CreateGroupDialog_input"
@@ -169,28 +139,33 @@ export default React.createClass({
                         </div>
                         <div className="mx_CreateGroupDialog_inputRow">
                             <div className="mx_CreateGroupDialog_label">
-                                <label htmlFor="groupid">{_t('Group ID')}</label>
+                                <label htmlFor="groupid">{ _t('Community ID') }</label>
                             </div>
-                            <div>
-                                <input id="groupid" className="mx_CreateGroupDialog_input"
-                                    size="64"
-                                    placeholder={_t('+example:%(domain)s', {domain: MatrixClientPeg.get().getDomain()})}
+                            <div className="mx_CreateGroupDialog_input_group">
+                                <span className="mx_CreateGroupDialog_prefix">+</span>
+                                <input id="groupid"
+                                    className="mx_CreateGroupDialog_input mx_CreateGroupDialog_input_hasPrefixAndSuffix"
+                                    size="32"
+                                    placeholder={_t('example')}
                                     onChange={this._onGroupIdChange}
                                     onBlur={this._onGroupIdBlur}
                                     value={this.state.groupId}
                                 />
+                                <span className="mx_CreateGroupDialog_suffix">
+                                    :{ MatrixClientPeg.get().getDomain() }
+                                </span>
                             </div>
                         </div>
                         <div className="error">
-                            {this.state.groupIdError}
+                            { this.state.groupIdError }
                         </div>
-                        {createErrorNode}
+                        { createErrorNode }
                     </div>
                     <div className="mx_Dialog_buttons">
+                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                         <button onClick={this._onCancel}>
                             { _t("Cancel") }
                         </button>
-                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
                     </div>
                 </form>
             </BaseDialog>

src/components/views/dialogs/CreateRoomDialog.js

@@ -0,0 +1,79 @@
+/*
+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 '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import { _t } from '../../../languageHandler';
+
+export default React.createClass({
+    displayName: 'CreateRoomDialog',
+    propTypes: {
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    componentWillMount: function() {
+        const config = SdkConfig.get();
+        // Dialog shows inverse of m.federate (noFederate) strict false check to skip undefined check (default = true)
+        this.defaultNoFederate = config.default_federate === false;
+    },
+
+    onOk: function() {
+        this.props.onFinished(true, this.refs.textinput.value, this.refs.checkbox.checked);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        return (
+            <BaseDialog className="mx_CreateRoomDialog" onFinished={this.props.onFinished}
+                title={_t('Create Room')}
+            >
+                <form onSubmit={this.onOk}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_CreateRoomDialog_label">
+                            <label htmlFor="textinput"> { _t('Room name (optional)') } </label>
+                        </div>
+                        <div className="mx_CreateRoomDialog_input_container">
+                            <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} />
+                        </div>
+                        <br />
+
+                        <details className="mx_CreateRoomDialog_details">
+                            <summary className="mx_CreateRoomDialog_details_summary">{ _t('Advanced options') }</summary>
+                            <div>
+                                <input type="checkbox" id="checkbox" ref="checkbox" defaultChecked={this.defaultNoFederate} />
+                                <label htmlFor="checkbox">
+                                { _t('Block users on other matrix homeservers from joining this room') }
+                                    <br />
+                                    ({ _t('This setting cannot be changed later!') })
+                                </label>
+                            </div>
+                        </details>
+                    </div>
+                </form>
+                <DialogButtons primaryButton={_t('Create Room')}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import Analytics from '../../../Analytics';
@@ -32,10 +33,21 @@ export default class DeactivateAccountDialog extends React.Component {
         this._onOk = this._onOk.bind(this);
         this._onCancel = this._onCancel.bind(this);
         this._onPasswordFieldChange = this._onPasswordFieldChange.bind(this);
+        this._onEraseFieldChange = this._onEraseFieldChange.bind(this);
+
+        const deactivationPreferences =
+            MatrixClientPeg.get().getAccountData('im.riot.account_deactivation_preferences');
+
+        const shouldErase = (
+            deactivationPreferences &&
+            deactivationPreferences.getContent() &&
+            deactivationPreferences.getContent().shouldErase
+        ) || false;
 
         this.state = {
             confirmButtonEnabled: false,
             busy: false,
+            shouldErase,
             errStr: null,
         };
     }
@@ -46,19 +58,55 @@ export default class DeactivateAccountDialog extends React.Component {
         });
     }
 
-    _onOk() {
-        // This assumes that the HS requires password UI auth
-        // for this endpoint. In reality it could be any UI auth.
+    _onEraseFieldChange(ev) {
+        this.setState({
+            shouldErase: ev.target.checked,
+        });
+    }
+
+    async _onOk() {
         this.setState({busy: true});
-        MatrixClientPeg.get().deactivateAccount({
-            type: 'm.login.password',
-            user: MatrixClientPeg.get().credentials.userId,
-            password: this._passwordField.value,
-        }).done(() => {
-            Analytics.trackEvent('Account', 'Deactivate Account');
-            Lifecycle.onLoggedOut();
-            this.props.onFinished(false);
-        }, (err) => {
+
+        // Before we deactivate the account insert an event into
+        // the user's account data indicating that they wish to be
+        // erased from the homeserver.
+        //
+        // We do this because the API for erasing after deactivation
+        // might not be supported by the connected homeserver. Leaving
+        // an indication in account data is only best-effort, and
+        // in the worse case, the HS maintainer would have to run a
+        // script to erase deactivated accounts that have shouldErase
+        // set to true in im.riot.account_deactivation_preferences.
+        //
+        // Note: The preferences are scoped to Riot, hence the
+        // "im.riot..." event type.
+        //
+        // Note: This may have already been set on previous attempts
+        // where, for example, the user entered the wrong password.
+        // This is fine because the UI always indicates the preference
+        // prior to us calling `deactivateAccount`.
+        try {
+            await MatrixClientPeg.get().setAccountData('im.riot.account_deactivation_preferences', {
+                shouldErase: this.state.shouldErase,
+            });
+        } catch (err) {
+            this.setState({
+                busy: false,
+                errStr: _t('Failed to indicate account erasure'),
+            });
+            return;
+        }
+
+        try {
+            // This assumes that the HS requires password UI auth
+            // for this endpoint. In reality it could be any UI auth.
+            const auth = {
+                type: 'm.login.password',
+                user: MatrixClientPeg.get().credentials.userId,
+                password: this._passwordField.value,
+            };
+            await MatrixClientPeg.get().deactivateAccount(auth, this.state.shouldErase);
+        } catch (err) {
             let errStr = _t('Unknown error');
             // https://matrix.org/jira/browse/SYN-744
             if (err.httpStatus == 401 || err.httpStatus == 403) {
@@ -69,7 +117,12 @@ export default class DeactivateAccountDialog extends React.Component {
                 busy: false,
                 errStr: errStr,
             });
-        });
+            return;
+        }
+
+        Analytics.trackEvent('Account', 'Deactivate Account');
+        Lifecycle.onLoggedOut();
+        this.props.onFinished(false);
     }
 
     _onCancel() {
@@ -77,13 +130,14 @@ export default class DeactivateAccountDialog extends React.Component {
     }
 
     render() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const Loader = sdk.getComponent("elements.Spinner");
         let passwordBoxClass = '';
 
         let error = null;
         if (this.state.errStr) {
             error = <div className="error">
-                {this.state.errStr}
+                { this.state.errStr }
             </div>;
             passwordBoxClass = 'error';
         }
@@ -94,30 +148,74 @@ export default class DeactivateAccountDialog extends React.Component {
         let cancelButton = null;
         if (!this.state.busy) {
             cancelButton = <button onClick={this._onCancel} autoFocus={true}>
-                {_t("Cancel")}
+                { _t("Cancel") }
             </button>;
         }
 
         return (
-            <div className="mx_DeactivateAccountDialog">
-                <div className="mx_Dialog_title danger">
-                    {_t("Deactivate Account")}
-                </div>
+            <BaseDialog className="mx_DeactivateAccountDialog"
+                onFinished={this.props.onFinished}
+                onEnterPressed={this.onOk}
+                titleClass="danger"
+                title={_t("Deactivate Account")}
+            >
                 <div className="mx_Dialog_content">
-                    <p>{_t("This will make your account permanently unusable. You will not be able to re-register the same user ID.")}</p>
+                    <p>{ _t(
+                        "This will make your account permanently unusable. " +
+                        "You will not be able to log in, and no one will be able to re-register the same " +
+                        "user ID. " +
+                        "This will cause your account to leave all rooms it is participating in, and it " +
+                        "will remove your account details from your identity server. " +
+                        "<b>This action is irreversible.</b>",
+                        {},
+                        { b: (sub) => <b> { sub } </b> },
+                    ) }</p>
 
-                    <p>{_t("This action is irreversible.")}</p>
+                    <p>{ _t(
+                        "Deactivating your account <b>does not by default cause us to forget messages you " +
+                        "have sent.</b> " +
+                        "If you would like us to forget your messages, please tick the box below.",
+                        {},
+                        { b: (sub) => <b> { sub } </b> },
+                    ) }</p>
 
-                    <p>{_t("To continue, please enter your password.")}</p>
+                    <p>{ _t(
+                        "Message visibility in Matrix is similar to email. " +
+                        "Our forgetting your messages means that messages you have sent will not be shared " +
+                        "with any new or unregistered users, but registered users who already have access " +
+                        "to these messages will still have access to their copy.",
+                    ) }</p>
 
-                    <p>{_t("Password")}:</p>
-                    <input
-                        type="password"
-                        onChange={this._onPasswordFieldChange}
-                        ref={(e) => {this._passwordField = e;}}
-                        className={passwordBoxClass}
-                    />
-                    {error}
+                    <div className="mx_DeactivateAccountDialog_input_section">
+                        <p>
+                            <label htmlFor="mx_DeactivateAccountDialog_erase_account_input">
+                                <input
+                                    id="mx_DeactivateAccountDialog_erase_account_input"
+                                    type="checkbox"
+                                    checked={this.state.shouldErase}
+                                    onChange={this._onEraseFieldChange}
+                                />
+                                { _t(
+                                    "Please forget all messages I have sent when my account is deactivated " +
+                                    "(<b>Warning:</b> this will cause future users to see an incomplete view " +
+                                    "of conversations)",
+                                    {},
+                                    { b: (sub) => <b>{ sub }</b> },
+                                ) }
+                            </label>
+                        </p>
+
+                        <p>{ _t("To continue, please enter your password:") }</p>
+                        <input
+                            type="password"
+                            placeholder={_t("password")}
+                            onChange={this._onPasswordFieldChange}
+                            ref={(e) => {this._passwordField = e;}}
+                            className={passwordBoxClass}
+                        />
+                    </div>
+
+                    { error }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button
@@ -125,16 +223,16 @@ export default class DeactivateAccountDialog extends React.Component {
                         onClick={this._onOk}
                         disabled={!okEnabled}
                     >
-                        {okLabel}
+                        { okLabel }
                     </button>
 
-                    {cancelButton}
+                    { cancelButton }
                 </div>
-            </div>
+            </BaseDialog>
         );
     }
 }
 
 DeactivateAccountDialog.propTypes = {
-    onFinished: React.PropTypes.func.isRequired,
+    onFinished: PropTypes.func.isRequired,
 };

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import * as FormattingUtils from '../../../utils/FormattingUtils';
@@ -28,25 +29,25 @@ export default function DeviceVerifyDialog(props) {
     const body = (
         <div>
             <p>
-                {_t("To verify that this device can be trusted, please contact its " +
+                { _t("To verify that this device can be trusted, please contact its " +
                     "owner using some other means (e.g. in person or a phone call) " +
                     "and ask them whether the key they see in their User Settings " +
-                    "for this device matches the key below:")}
+                    "for this device matches the key below:") }
             </p>
             <div className="mx_UserSettings_cryptoSection">
                 <ul>
-                    <li><label>{_t("Device name")}:</label> <span>{ props.device.getDisplayName() }</span></li>
-                    <li><label>{_t("Device ID")}:</label> <span><code>{ props.device.deviceId}</code></span></li>
-                    <li><label>{_t("Device key")}:</label> <span><code><b>{ key }</b></code></span></li>
+                    <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
+                    <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
+                    <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
                 </ul>
             </div>
             <p>
-                {_t("If it matches, press the verify button below. " +
+                { _t("If it matches, press the verify button below. " +
                     "If it doesn't, then someone else is intercepting this device " +
-                    "and you probably want to press the blacklist button instead.")}
+                    "and you probably want to press the blacklist button instead.") }
             </p>
             <p>
-                {_t("In future this verification process will be more sophisticated.")}
+                { _t("In future this verification process will be more sophisticated.") }
             </p>
         </div>
     );
@@ -71,7 +72,7 @@ export default function DeviceVerifyDialog(props) {
 }
 
 DeviceVerifyDialog.propTypes = {
-    userId: React.PropTypes.string.isRequired,
-    device: React.PropTypes.object.isRequired,
-    onFinished: React.PropTypes.func.isRequired,
+    userId: PropTypes.string.isRequired,
+    device: PropTypes.object.isRequired,
+    onFinished: PropTypes.func.isRequired,
 };

src/components/views/dialogs/DevtoolsDialog.js

@@ -0,0 +1,663 @@
+/*
+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 '../../../index';
+import SyntaxHighlight from '../elements/SyntaxHighlight';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../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" autoFocus={true} />
+            </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_DevTools_content">
+                { this.textInput('eventType', _t('Event Type')) }
+                { this.state.isStateEvent && this.textInput('stateKey', _t('State Key')) }
+
+                <br />
+
+                <div className="mx_DevTools_inputLabelCell">
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
+                </div>
+                <div>
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
+                </div>
+            </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_DevTools_content">
+                { this.textInput('eventType', _t('Event Type')) }
+                <br />
+
+                <div className="mx_DevTools_inputLabelCell">
+                    <label htmlFor="evContent"> { _t('Event Content') } </label>
+                </div>
+                <div>
+                    <textarea id="evContent" onChange={this._onChange} value={this.state.evContent} className="mx_DevTools_textarea" />
+                </div>
+            </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>;
+    }
+}
+
+const INITIAL_LOAD_TILES = 20;
+const LOAD_TILES_STEP_SIZE = 50;
+
+class FilteredList extends React.Component {
+    static propTypes = {
+        children: PropTypes.any,
+        query: PropTypes.string,
+        onChange: PropTypes.func,
+    };
+
+    static filterChildren(children, query) {
+        if (!query) return children;
+        const lcQuery = query.toLowerCase();
+        return children.filter((child) => child.key.toLowerCase().includes(lcQuery));
+    }
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            filteredChildren: FilteredList.filterChildren(this.props.children, this.props.query),
+            truncateAt: INITIAL_LOAD_TILES,
+        };
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (this.props.children === nextProps.children && this.props.query === nextProps.query) return;
+        this.setState({
+            filteredChildren: FilteredList.filterChildren(nextProps.children, nextProps.query),
+            truncateAt: INITIAL_LOAD_TILES,
+        });
+    }
+
+    showAll = () => {
+        this.setState({
+            truncateAt: this.state.truncateAt + LOAD_TILES_STEP_SIZE,
+        });
+    };
+
+    createOverflowElement = (overflowCount: number, totalCount: number) => {
+        return <button className="mx_DevTools_RoomStateExplorer_button" onClick={this.showAll}>
+            { _t("and %(count)s others...", { count: overflowCount }) }
+        </button>;
+    };
+
+    onQuery = (ev) => {
+        if (this.props.onChange) this.props.onChange(ev.target.value);
+    };
+
+    getChildren = (start: number, end: number) => {
+        return this.state.filteredChildren.slice(start, end);
+    };
+
+    getChildCount = (): number => {
+        return this.state.filteredChildren.length;
+    };
+
+    render() {
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return <div>
+            <input size="64"
+                   autoFocus={true}
+                   onChange={this.onQuery}
+                   value={this.props.query}
+                   placeholder={_t('Filter results')}
+                   className="mx_TextInputDialog_input mx_DevTools_RoomStateExplorer_query"
+                   // force re-render so that autoFocus is applied when this component is re-used
+                   key={this.props.children[0] ? this.props.children[0].key : ''} />
+            <TruncatedList getChildren={this.getChildren}
+                           getChildCount={this.getChildCount}
+                           truncateAt={this.state.truncateAt}
+                           createOverflowElement={this.createOverflowElement} />
+        </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 && stateKeys[0] === '') {
+                            onClickFn = this.onViewSourceClick(stateGroup[stateKeys[0]]);
+                        } else {
+                            onClickFn = this.browseEventType(evType);
+                        }
+
+                        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_DevTools_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/ErrorDialog.js

@@ -26,20 +26,21 @@ limitations under the License.
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'ErrorDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
+        title: PropTypes.string,
+        description: PropTypes.oneOfType([
+            PropTypes.element,
+            PropTypes.string,
         ]),
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        button: PropTypes.string,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -51,23 +52,19 @@ export default React.createClass({
         };
     },
 
-    componentDidMount: function() {
-        if (this.props.focus) {
-            this.refs.button.focus();
-        }
-    },
-
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={this.props.title || _t('Error')}>
-                <div className="mx_Dialog_content">
-                    {this.props.description || _t('An error has occurred.')}
+                    title={this.props.title || _t('Error')}
+                    contentId='mx_Dialog_content'
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    { this.props.description || _t('An error has occurred.') }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
-                        {this.props.button || _t('OK')}
+                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={this.props.focus}>
+                        { this.props.button || _t('OK') }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
@@ -27,28 +28,28 @@ export default React.createClass({
 
     propTypes: {
         // matrix client to use for UI auth requests
-        matrixClient: React.PropTypes.object.isRequired,
+        matrixClient: PropTypes.object.isRequired,
 
         // response from initial request. If not supplied, will do a request on
         // mount.
-        authData: React.PropTypes.shape({
-            flows: React.PropTypes.array,
-            params: React.PropTypes.object,
-            session: React.PropTypes.string,
+        authData: PropTypes.shape({
+            flows: PropTypes.array,
+            params: PropTypes.object,
+            session: PropTypes.string,
         }),
 
         // callback
-        makeRequest: React.PropTypes.func.isRequired,
+        makeRequest: PropTypes.func.isRequired,
 
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
 
-        title: React.PropTypes.string,
+        title: PropTypes.string,
     },
 
     getInitialState: function() {
         return {
             authError: null,
-        }
+        };
     },
 
     _onAuthFinished: function(success, result) {
@@ -72,19 +73,20 @@ export default React.createClass({
         let content;
         if (this.state.authError) {
             content = (
-                <div>
-                    <div>{this.state.authError.message || this.state.authError.toString()}</div>
+                <div id='mx_Dialog_content'>
+                    <div role="alert">{ this.state.authError.message || this.state.authError.toString() }</div>
                     <br />
                     <AccessibleButton onClick={this._onDismissClick}
                         className="mx_UserSettings_button"
+                        autoFocus="true"
                     >
-                        {_t("Dismiss")}
+                        { _t("Dismiss") }
                     </AccessibleButton>
                 </div>
             );
         } else {
             content = (
-                <div>
+                <div id='mx_Dialog_content'>
                     <InteractiveAuth ref={this._collectInteractiveAuth}
                         matrixClient={this.props.matrixClient}
                         authData={this.props.authData}
@@ -99,8 +101,9 @@ export default React.createClass({
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
                 title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+                contentId='mx_Dialog_content'
             >
-                {content}
+                { content }
             </BaseDialog>
         );
     },

src/components/views/dialogs/KeyShareDialog.js

@@ -16,9 +16,10 @@ limitations under the License.
 
 import Modal from '../../../Modal';
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 
 /**
  * Dialog which asks the user whether they want to share their keys with
@@ -30,10 +31,10 @@ import { _t } from '../../../languageHandler';
  */
 export default React.createClass({
     propTypes: {
-        matrixClient: React.PropTypes.object.isRequired,
-        userId: React.PropTypes.string.isRequired,
-        deviceId: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        matrixClient: PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        deviceId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -54,7 +55,7 @@ export default React.createClass({
 
             const deviceInfo = r[userId][deviceId];
 
-            if(!deviceInfo) {
+            if (!deviceInfo) {
                 console.warn(`No details found for device ${userId}:${deviceId}`);
 
                 this.props.onFinished(false);
@@ -116,27 +117,27 @@ export default React.createClass({
 
         let text;
         if (this.state.wasNewDevice) {
-            text = "You added a new device '%(displayName)s', which is"
-                + " requesting encryption keys.";
+            text = _td("You added a new device '%(displayName)s', which is"
+                + " requesting encryption keys.");
         } else {
-            text = "Your unverified device '%(displayName)s' is requesting"
-                + " encryption keys.";
+            text = _td("Your unverified device '%(displayName)s' is requesting"
+                + " encryption keys.");
         }
         text = _t(text, {displayName: displayName});
 
         return (
-            <div>
-                <p>{text}</p>
+            <div id='mx_Dialog_content'>
+                <p>{ text }</p>
 
                 <div className="mx_Dialog_buttons">
-                    <button onClick={this._onVerifyClicked}>
-                        {_t('Start verification')}
+                    <button onClick={this._onVerifyClicked} autoFocus="true">
+                        { _t('Start verification') }
                     </button>
                     <button onClick={this._onShareClicked}>
-                        {_t('Share without verifying')}
+                        { _t('Share without verifying') }
                     </button>
                     <button onClick={this._onIgnoreClicked}>
-                        {_t('Ignore request')}
+                        { _t('Ignore request') }
                     </button>
                 </div>
             </div>
@@ -153,8 +154,8 @@ export default React.createClass({
             content = this._renderContent();
         } else {
             content = (
-                <div>
-                    <p>{_t('Loading device info...')}</p>
+                <div id='mx_Dialog_content'>
+                    <p>{ _t('Loading device info...') }</p>
                     <Spinner />
                 </div>
             );
@@ -164,8 +165,9 @@ export default React.createClass({
             <BaseDialog className='mx_KeyShareRequestDialog'
                 onFinished={this.props.onFinished}
                 title={_t('Encryption key request')}
+                contentId='mx_Dialog_content'
             >
-                {content}
+                { content }
             </BaseDialog>
         );
     },

src/components/views/dialogs/QuestionDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,18 +16,20 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.node,
-        extraButtons: React.PropTypes.node,
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        title: PropTypes.string,
+        description: PropTypes.node,
+        extraButtons: PropTypes.node,
+        button: PropTypes.string,
+        danger: PropTypes.bool,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -36,6 +39,7 @@ export default React.createClass({
             extraButtons: null,
             focus: true,
             hasCancelButton: true,
+            danger: false,
         };
     },
 
@@ -49,26 +53,29 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        const cancelButton = this.props.hasCancelButton ? (
-            <button onClick={this.onCancel}>
-                {_t("Cancel")}
-            </button>
-        ) : null;
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        let primaryButtonClass = "";
+        if (this.props.danger) {
+            primaryButtonClass = "danger";
+        }
         return (
             <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
-                onEnterPressed={ this.onOk }
                 title={this.props.title}
+                contentId='mx_Dialog_content'
             >
-                <div className="mx_Dialog_content">
-                    {this.props.description}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
-                        {this.props.button || _t('OK')}
-                    </button>
-                    {this.props.extraButtons}
-                    {cancelButton}
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    { this.props.description }
                 </div>
+                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                    primaryButtonClass={primaryButtonClass}
+                    cancelButton={this.props.cancelButton}
+                    hasCancel={this.props.hasCancelButton}
+                    onPrimaryButtonClick={this.onOk}
+                    focus={this.props.focus}
+                    onCancel={this.onCancel}
+                >
+                    { this.props.extraButtons }
+                </DialogButtons>
             </BaseDialog>
         );
     },

src/components/views/dialogs/RoomUpgradeDialog.js

@@ -0,0 +1,106 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+
+export default React.createClass({
+    displayName: 'RoomUpgradeDialog',
+
+    propTypes: {
+        room: PropTypes.object.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    componentWillMount: function() {
+        this._targetVersion = this.props.room.shouldUpgradeToVersion();
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+        };
+    },
+
+    _onCancelClick: function() {
+        this.props.onFinished(false);
+    },
+
+    _onUpgradeClick: function() {
+        this.setState({busy: true});
+        MatrixClientPeg.get().upgradeRoom(this.props.room.roomId, this._targetVersion).catch((err) => {
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to upgrade room', '', ErrorDialog, {
+                title: _t("Failed to upgrade room"),
+                description: ((err && err.message) ? err.message : _t("The room upgrade could not be completed")),
+            });
+        }).finally(() => {
+            this.setState({busy: false});
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+
+        let buttons;
+        if (this.state.busy) {
+            buttons = <Spinner />;
+        } else {
+            buttons = <DialogButtons
+                primaryButton={_t(
+                    'Upgrade this room to version %(version)s',
+                    {version: this._targetVersion},
+                )}
+                primaryButtonClass="danger"
+                hasCancel={true}
+                onPrimaryButtonClick={this._onUpgradeClick}
+                focus={this.props.focus}
+                onCancel={this._onCancelClick}
+            />;
+        }
+
+        return (
+            <BaseDialog className="mx_RoomUpgradeDialog"
+                onFinished={this.onCancelled}
+                title={_t("Upgrade Room Version")}
+                contentId='mx_Dialog_content'
+                onFinished={this.props.onFinished}
+                hasCancel={true}
+            >
+                <p>
+                    {_t(
+                        "Upgrading this room requires closing down the current " +
+                        "instance of the room and creating a new room it its place. " +
+                        "To give room members the best possible experience, we will:",
+                    )}
+                </p>
+                <ol>
+                    <li>{_t("Create a new room with the same name, description and avatar")}</li>
+                    <li>{_t("Update any local room aliases to point to the new room")}</li>
+                    <li>{_t("Stop users from speaking in the old version of the room, and post a message advising users to move to the new room")}</li>
+                    <li>{_t("Put a link back to the old room at the start of the new room so people can see old messages")}</li>
+                </ol>
+                {buttons}
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,18 +16,19 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
-import { _t, _tJsx } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 
 
 export default React.createClass({
     displayName: 'SessionRestoreErrorDialog',
 
     propTypes: {
-        error: React.PropTypes.string.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        error: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     _sendBugReport: function() {
@@ -34,44 +36,74 @@ export default React.createClass({
         Modal.createTrackedDialog('Session Restore Error', 'Send Bug Report Dialog', BugReportDialog, {});
     },
 
-    _continueClicked: function() {
-        this.props.onFinished(true);
+    _onClearStorageClick: function() {
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createTrackedDialog('Session Restore Confirm Logout', '', QuestionDialog, {
+            title: _t("Sign out"),
+            description:
+                <div>{ _t("Log out and remove encryption keys?") }</div>,
+            button: _t("Sign out"),
+            danger: true,
+            onFinished: this.props.onFinished,
+        });
+    },
+
+    _onRefreshClick: function() {
+        // Is this likely to help? Probably not, but giving only one button
+        // that clears your storage seems awful.
+        window.location.reload(true);
     },
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        let bugreport;
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
 
+        const clearStorageButton = (
+            <button onClick={this._onClearStorageClick} className="danger">
+                { _t("Clear Storage and Sign Out") }
+            </button>
+        );
+
+        let dialogButtons;
         if (SdkConfig.get().bug_report_endpoint_url) {
-            bugreport = (
-                <p>
-                {_tJsx(
-                    "Otherwise, <a>click here</a> to send a bug report.",
-                    /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{sub}</a>,
-                )}
-                </p>
-            );
+            dialogButtons = <DialogButtons primaryButton={_t("Send Logs")}
+                onPrimaryButtonClick={this._sendBugReport}
+                focus={true}
+                hasCancel={false}
+            >
+                { clearStorageButton }
+            </DialogButtons>;
+        } else {
+            dialogButtons = <DialogButtons primaryButton={_t("Refresh")}
+                onPrimaryButtonClick={this._onRefreshClick}
+                focus={true}
+                hasCancel={false}
+            >
+                { clearStorageButton }
+            </DialogButtons>;
         }
 
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={_t('Unable to restore session')}>
-                <div className="mx_Dialog_content">
-                    <p>{_t("We encountered an error trying to restore your previous session. If " +
-                    "you continue, you will need to log in again, and encrypted chat " +
-                    "history will be unreadable.")}</p>
+                title={_t('Unable to restore session')}
+                contentId='mx_Dialog_content'
+                hasCancel={false}
+            >
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
+                    <p>{ _t("We encountered an error trying to restore your previous session.") }</p>
 
-                    <p>{_t("If you have previously used a more recent version of Riot, your session " +
-                    "may be incompatible with this version. Close this window and return " +
-                    "to the more recent version.")}</p>
+                    <p>{ _t(
+                        "If you have previously used a more recent version of Riot, your session " +
+                        "may be incompatible with this version. Close this window and return " +
+                        "to the more recent version.",
+                     ) }</p>
 
-                    {bugreport}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this._continueClicked}>
-                        {_t("Continue anyway")}
-                    </button>
+                    <p>{ _t(
+                        "Clearing your browser's storage may fix the problem, but will sign you " +
+                        "out and cause any encrypted chat history to become unreadable.",
+                    ) }</p>
                 </div>
+                { dialogButtons }
             </BaseDialog>
         );
     },

src/components/views/dialogs/SetEmailDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import Email from '../../../email';
 import AddThreepid from '../../../AddThreepid';
@@ -30,19 +32,16 @@ import Modal from '../../../Modal';
 export default React.createClass({
     displayName: 'SetEmailDialog',
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
         return {
-            emailAddress: null,
+            emailAddress: '',
             emailBusy: false,
         };
     },
 
-    componentDidMount: function() {
-    },
-
     onEmailAddressChanged: function(value) {
         this.setState({
             emailAddress: value,
@@ -129,19 +128,22 @@ export default React.createClass({
         const EditableText = sdk.getComponent('elements.EditableText');
 
         const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
+            initialValue={this.state.emailAddress}
             className="mx_SetEmailDialog_email_input"
-            placeholder={ _t("Email address") }
+            autoFocus="true"
+            placeholder={_t("Email address")}
             placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
-            blurToCancel={ false }
-            onValueChanged={ this.onEmailAddressChanged } />;
+            blurToCancel={false}
+            onValueChanged={this.onEmailAddressChanged} />;
 
         return (
             <BaseDialog className="mx_SetEmailDialog"
                 onFinished={this.onCancelled}
                 title={this.props.title}
+                contentId='mx_Dialog_content'
             >
                 <div className="mx_Dialog_content">
-                    <p>
+                    <p id='mx_Dialog_content'>
                         { _t('This will allow you to reset your password and receive notifications.') }
                     </p>
                     { emailInput }

src/components/views/dialogs/SetMxIdDialog.js

@@ -17,11 +17,12 @@ limitations under the License.
 
 import Promise from 'bluebird';
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import classnames from 'classnames';
-import KeyCode from '../../../KeyCode';
-import { _t, _tJsx } from '../../../languageHandler';
+import { KeyCode } from '../../../Keyboard';
+import { _t } from '../../../languageHandler';
 
 // The amount of time to wait for further changes to the input username before
 // sending a request to the server
@@ -35,11 +36,11 @@ const USERNAME_CHECK_DEBOUNCE_MS = 250;
 export default React.createClass({
     displayName: 'SetMxIdDialog',
     propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
+        onFinished: PropTypes.func.isRequired,
         // Called when the user requests to register with a different homeserver
-        onDifferentServerClicked: React.PropTypes.func.isRequired,
+        onDifferentServerClicked: PropTypes.func.isRequired,
         // Called if the user wants to switch to login instead
-        onLoginClick: React.PropTypes.func.isRequired,
+        onLoginClick: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -226,7 +227,7 @@ export default React.createClass({
         let usernameIndicator = null;
         let usernameBusyIndicator = null;
         if (this.state.usernameBusy) {
-            usernameBusyIndicator = <Spinner w="24" h="24"/>;
+            usernameBusyIndicator = <Spinner w="24" h="24" />;
         } else {
             const usernameAvailable = this.state.username &&
                 this.state.usernameCheckSupport && !this.state.usernameError;
@@ -234,14 +235,14 @@ export default React.createClass({
                 "error": Boolean(this.state.usernameError),
                 "success": usernameAvailable,
             });
-            usernameIndicator = <div className={usernameIndicatorClasses}>
+            usernameIndicator = <div className={usernameIndicatorClasses} role="alert">
                 { usernameAvailable ? _t('Username available') : this.state.usernameError }
             </div>;
         }
 
         let authErrorIndicator = null;
         if (this.state.authError) {
-            authErrorIndicator = <div className="error">
+            authErrorIndicator = <div className="error" role="alert">
                 { this.state.authError }
             </div>;
         }
@@ -253,8 +254,9 @@ export default React.createClass({
             <BaseDialog className="mx_SetMxIdDialog"
                 onFinished={this.props.onFinished}
                 title={_t('To get started, please pick a username!')}
+                contentId='mx_Dialog_content'
             >
-                <div className="mx_Dialog_content">
+                <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <div className="mx_SetMxIdDialog_input_group">
                         <input type="text" ref="input_value" value={this.state.username}
                             autoFocus={true}
@@ -267,25 +269,22 @@ export default React.createClass({
                     </div>
                     { usernameIndicator }
                     <p>
-                        { _tJsx(
+                        { _t(
                             'This will be your account name on the <span></span> ' +
                             'homeserver, or you can pick a <a>different server</a>.',
-                            [
-                                /<span><\/span>/,
-                                /<a>(.*?)<\/a>/,
-                            ],
-                            [
-                                (sub) => <span>{this.props.homeserverUrl}</span>,
-                                (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{sub}</a>,
-                            ],
-                        )}
+                            {},
+                            {
+                                'span': <span>{ this.props.homeserverUrl }</span>,
+                                'a': (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
+                            },
+                        ) }
                     </p>
                     <p>
-                        { _tJsx(
+                        { _t(
                             'If you already have a Matrix account you can <a>log in</a> instead.',
-                            /<a>(.*?)<\/a>/,
-                            [(sub) => <a href="#" onClick={this.props.onLoginClick}>{sub}</a>],
-                        )}
+                            {},
+                            { 'a': (sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a> },
+                        ) }
                     </p>
                     { auth }
                     { authErrorIndicator }

src/components/views/dialogs/SetPasswordDialog.js

@@ -0,0 +1,134 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../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.props.onFinished();
+            },
+        });
+    },
+
+    _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/dialogs/ShareDialog.js

@@ -0,0 +1,224 @@
+/*
+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 {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import QRCode from 'qrcode-react';
+import {makeEventPermalink, makeGroupPermalink, makeRoomPermalink, makeUserPermalink} from "../../../matrix-to";
+import * as ContextualMenu from "../../structures/ContextualMenu";
+
+const socials = [
+    {
+        name: 'Facebook',
+        img: 'img/social/facebook.png',
+        url: (url) => `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+    }, {
+        name: 'Twitter',
+        img: 'img/social/twitter-2.png',
+        url: (url) => `https://twitter.com/home?status=${url}`,
+    }, /* // icon missing
+        name: 'Google Plus',
+        img: 'img/social/',
+        url: (url) => `https://plus.google.com/share?url=${url}`,
+    },*/ {
+        name: 'LinkedIn',
+        img: 'img/social/linkedin.png',
+        url: (url) => `https://www.linkedin.com/shareArticle?mini=true&url=${url}`,
+    }, {
+        name: 'Reddit',
+        img: 'img/social/reddit.png',
+        url: (url) => `http://www.reddit.com/submit?url=${url}`,
+    }, {
+        name: 'email',
+        img: 'img/social/email-1.png',
+        url: (url) => `mailto:?body=${url}`,
+    },
+];
+
+export default class ShareDialog extends React.Component {
+    static propTypes = {
+        onFinished: PropTypes.func.isRequired,
+        target: PropTypes.oneOfType([
+            PropTypes.instanceOf(Room),
+            PropTypes.instanceOf(User),
+            PropTypes.instanceOf(Group),
+            PropTypes.instanceOf(RoomMember),
+            PropTypes.instanceOf(MatrixEvent),
+        ]).isRequired,
+    };
+
+    constructor(props) {
+        super(props);
+
+        this.onCopyClick = this.onCopyClick.bind(this);
+        this.onLinkSpecificEventCheckboxClick = this.onLinkSpecificEventCheckboxClick.bind(this);
+
+        this.state = {
+            // MatrixEvent defaults to share linkSpecificEvent
+            linkSpecificEvent: this.props.target instanceof MatrixEvent,
+        };
+    }
+
+    static _selectText(target) {
+        const range = document.createRange();
+        range.selectNodeContents(target);
+
+        const selection = window.getSelection();
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+
+    static onLinkClick(e) {
+        e.preventDefault();
+        const {target} = e;
+        ShareDialog._selectText(target);
+    }
+
+    onCopyClick(e) {
+        e.preventDefault();
+
+        ShareDialog._selectText(this.refs.link);
+
+        let successful;
+        try {
+            successful = document.execCommand('copy');
+        } catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+
+        const GenericTextContextMenu = sdk.getComponent('context_menus.GenericTextContextMenu');
+        const buttonRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = buttonRect.right + window.pageXOffset;
+        const y = (buttonRect.top + (buttonRect.height / 2) + window.pageYOffset) - 19;
+        const {close} = ContextualMenu.createMenu(GenericTextContextMenu, {
+            chevronOffset: 10,
+            left: x,
+            top: y,
+            message: successful ? _t('Copied!') : _t('Failed to copy'),
+        }, false);
+        e.target.onmouseleave = close;
+    }
+
+    onLinkSpecificEventCheckboxClick() {
+        this.setState({
+            linkSpecificEvent: !this.state.linkSpecificEvent,
+        });
+    }
+
+    render() {
+        let title;
+        let matrixToUrl;
+
+        let checkbox;
+
+        if (this.props.target instanceof Room) {
+            title = _t('Share Room');
+
+            const events = this.props.target.getLiveTimeline().getEvents();
+            if (events.length > 0) {
+                checkbox = <div>
+                    <input type="checkbox"
+                           id="mx_ShareDialog_checkbox"
+                           checked={this.state.linkSpecificEvent}
+                           onClick={this.onLinkSpecificEventCheckboxClick} />
+                    <label htmlFor="mx_ShareDialog_checkbox">
+                        { _t('Link to most recent message') }
+                    </label>
+                </div>;
+            }
+
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = makeEventPermalink(this.props.target.roomId, events[events.length - 1].getId());
+            } else {
+                matrixToUrl = makeRoomPermalink(this.props.target.roomId);
+            }
+        } else if (this.props.target instanceof User || this.props.target instanceof RoomMember) {
+            title = _t('Share User');
+            matrixToUrl = makeUserPermalink(this.props.target.userId);
+        } else if (this.props.target instanceof Group) {
+            title = _t('Share Community');
+            matrixToUrl = makeGroupPermalink(this.props.target.groupId);
+        } else if (this.props.target instanceof MatrixEvent) {
+            title = _t('Share Room Message');
+            checkbox = <div>
+                <input type="checkbox"
+                       id="mx_ShareDialog_checkbox"
+                       checked={this.state.linkSpecificEvent}
+                       onClick={this.onLinkSpecificEventCheckboxClick} />
+                <label htmlFor="mx_ShareDialog_checkbox">
+                    { _t('Link to selected message') }
+                </label>
+            </div>;
+
+            if (this.state.linkSpecificEvent) {
+                matrixToUrl = makeEventPermalink(this.props.target.getRoomId(), this.props.target.getId());
+            } else {
+                matrixToUrl = makeRoomPermalink(this.props.target.getRoomId());
+            }
+        }
+
+        const encodedUrl = encodeURIComponent(matrixToUrl);
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        return <BaseDialog title={title}
+                           className='mx_ShareDialog'
+                           contentId='mx_Dialog_content'
+                           onFinished={this.props.onFinished}
+        >
+            <div className="mx_ShareDialog_content">
+                <div className="mx_ShareDialog_matrixto">
+                    <a ref="link"
+                       href={matrixToUrl}
+                       onClick={ShareDialog.onLinkClick}
+                       className="mx_ShareDialog_matrixto_link"
+                    >
+                        { matrixToUrl }
+                    </a>
+                    <a href={matrixToUrl} className="mx_ShareDialog_matrixto_copy" onClick={this.onCopyClick}>
+                        { _t('COPY') }
+                        <div>&nbsp;</div>
+                    </a>
+                </div>
+                { checkbox }
+                <hr />
+
+                <div className="mx_ShareDialog_split">
+                    <div className="mx_ShareDialog_qrcode_container">
+                        <QRCode value={matrixToUrl} size={256} logoWidth={48} logo="img/matrix-m.svg" />
+                    </div>
+                    <div className="mx_ShareDialog_social_container">
+                        {
+                            socials.map((social) => <a rel="noopener"
+                                                       target="_blank"
+                                                       key={social.name}
+                                                       name={social.name}
+                                                       href={social.url(encodedUrl)}
+                                                       className="mx_ShareDialog_social_icon"
+                            >
+                                <img src={social.img} alt={social.name} height={64} width={64} />
+                            </a>)
+                        }
+                    </div>
+                </div>
+            </div>
+        </BaseDialog>;
+    }
+}

src/components/views/dialogs/TextInputDialog.js

@@ -15,21 +15,21 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
-import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'TextInputDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
+        title: PropTypes.string,
+        description: PropTypes.oneOfType([
+            PropTypes.element,
+            PropTypes.string,
         ]),
-        value: React.PropTypes.string,
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired,
+        value: PropTypes.string,
+        button: PropTypes.string,
+        focus: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
@@ -58,27 +58,24 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className="mx_TextInputDialog" onFinished={this.props.onFinished}
-                onEnterPressed={this.onOk}
                 title={this.props.title}
             >
-                <div className="mx_Dialog_content">
-                    <div className="mx_TextInputDialog_label">
-                        <label htmlFor="textinput"> {this.props.description} </label>
+                <form onSubmit={this.onOk}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_TextInputDialog_label">
+                            <label htmlFor="textinput"> { this.props.description } </label>
+                        </div>
+                        <div>
+                            <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" />
+                        </div>
                     </div>
-                    <div>
-                        <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" onKeyDown={this.onKeyDown}/>
-                    </div>
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onCancel}>
-                        { _t("Cancel") }
-                    </button>
-                    <button className="mx_Dialog_primary" onClick={this.onOk}>
-                        {this.props.button}
-                    </button>
-                </div>
+                </form>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
             </BaseDialog>
         );
     },

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,11 +16,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import Resend from '../../../Resend';
 import { _t } from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
+import { markAllDevicesKnown } from '../../../cryptodevices';
 
 function DeviceListEntry(props) {
     const {userId, device} = props;
@@ -28,19 +32,19 @@ function DeviceListEntry(props) {
 
     return (
         <li>
-            <DeviceVerifyButtons device={ device } userId={ userId } />
+            <DeviceVerifyButtons device={device} userId={userId} />
             { device.deviceId }
-            <br/>
+            <br />
             { device.getDisplayName() }
         </li>
     );
 }
 
 DeviceListEntry.propTypes = {
-    userId: React.PropTypes.string.isRequired,
+    userId: PropTypes.string.isRequired,
 
     // deviceinfo
-    device: React.PropTypes.object.isRequired,
+    device: PropTypes.object.isRequired,
 };
 
 
@@ -48,22 +52,22 @@ function UserUnknownDeviceList(props) {
     const {userId, userDevices} = props;
 
     const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
-       <DeviceListEntry key={ deviceId } userId={ userId }
-           device={ userDevices[deviceId] } />,
+       <DeviceListEntry key={deviceId} userId={userId}
+           device={userDevices[deviceId]} />,
     );
 
     return (
         <ul className="mx_UnknownDeviceDialog_deviceList">
-            {deviceListEntries}
+            { deviceListEntries }
         </ul>
     );
 }
 
 UserUnknownDeviceList.propTypes = {
-    userId: React.PropTypes.string.isRequired,
+    userId: PropTypes.string.isRequired,
 
     // map from deviceid -> deviceinfo
-    userDevices: React.PropTypes.object.isRequired,
+    userDevices: PropTypes.object.isRequired,
 };
 
 
@@ -71,18 +75,18 @@ function UnknownDeviceList(props) {
     const {devices} = props;
 
     const userListEntries = Object.keys(devices).map((userId) =>
-        <li key={ userId }>
+        <li key={userId}>
             <p>{ userId }:</p>
-            <UserUnknownDeviceList userId={ userId } userDevices={ devices[userId] } />
+            <UserUnknownDeviceList userId={userId} userDevices={devices[userId]} />
         </li>,
     );
 
-    return <ul>{userListEntries}</ul>;
+    return <ul>{ userListEntries }</ul>;
 }
 
 UnknownDeviceList.propTypes = {
     // map from userid -> deviceid -> deviceinfo
-    devices: React.PropTypes.object.isRequired,
+    devices: PropTypes.object.isRequired,
 };
 
 
@@ -90,90 +94,116 @@ export default React.createClass({
     displayName: 'UnknownDeviceDialog',
 
     propTypes: {
-        room: React.PropTypes.object.isRequired,
+        room: PropTypes.object.isRequired,
 
-        // map from userid -> deviceid -> deviceinfo
-        devices: React.PropTypes.object.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
+        // map from userid -> deviceid -> deviceinfo or null if devices are not yet loaded
+        devices: PropTypes.object,
+
+        onFinished: PropTypes.func.isRequired,
+
+        // Label for the button that marks all devices known and tries the send again
+        sendAnywayLabel: PropTypes.string.isRequired,
+
+        // Label for the button that to send the event if you've verified all devices
+        sendLabel: PropTypes.string.isRequired,
+
+        // function to retry the request once all devices are verified / known
+        onSend: PropTypes.func.isRequired,
     },
 
-    componentDidMount: function() {
-        // Given we've now shown the user the unknown device, it is no longer
-        // unknown to them. Therefore mark it as 'known'.
-        Object.keys(this.props.devices).forEach((userId) => {
-            Object.keys(this.props.devices[userId]).map((deviceId) => {
-                MatrixClientPeg.get().setDeviceKnown(userId, deviceId, true);
-            });
-        });
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
+    },
 
-        // XXX: temporary logging to try to diagnose
-        // https://github.com/vector-im/riot-web/issues/3148
-        console.log('Opening UnknownDeviceDialog');
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("deviceVerificationChanged", this._onDeviceVerificationChanged);
+        }
+    },
+
+    _onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
+        if (this.props.devices[userId] && this.props.devices[userId][deviceId]) {
+            // XXX: Mutating props :/
+            this.props.devices[userId][deviceId] = deviceInfo;
+            this.forceUpdate();
+        }
+    },
+
+    _onDismissClicked: function() {
+        this.props.onFinished();
+    },
+
+    _onSendAnywayClicked: function() {
+        markAllDevicesKnown(MatrixClientPeg.get(), this.props.devices);
+
+        this.props.onFinished();
+        this.props.onSend();
+    },
+
+    _onSendClicked: function() {
+        this.props.onFinished();
+        this.props.onSend();
     },
 
     render: function() {
-        const client = MatrixClientPeg.get();
-        const blacklistUnverified = client.getGlobalBlacklistUnverifiedDevices() ||
-              this.props.room.getBlacklistUnverifiedDevices();
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+        if (this.props.devices === null) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
 
         let warning;
-        if (blacklistUnverified) {
+        if (SettingsStore.getValue("blacklistUnverifiedDevices", this.props.room.roomId)) {
             warning = (
                 <h4>
-                    {_t("You are currently blacklisting unverified devices; to send " +
-                    "messages to these devices you must verify them.")}
+                    { _t("You are currently blacklisting unverified devices; to send " +
+                    "messages to these devices you must verify them.") }
                 </h4>
             );
         } else {
             warning = (
                 <div>
                     <p>
-                        {_t("We recommend you go through the verification process " +
+                        { _t("We recommend you go through the verification process " +
                             "for each device to confirm they belong to their legitimate owner, " +
-                            "but you can resend the message without verifying if you prefer.")}
+                            "but you can resend the message without verifying if you prefer.") }
                     </p>
                 </div>
             );
         }
 
+        let haveUnknownDevices = false;
+        Object.keys(this.props.devices).forEach((userId) => {
+            Object.keys(this.props.devices[userId]).map((deviceId) => {
+                const device = this.props.devices[userId][deviceId];
+                if (device.isUnverified() && !device.isKnown()) {
+                    haveUnknownDevices = true;
+                }
+            });
+        });
+        const sendButtonOnClick = haveUnknownDevices ? this._onSendAnywayClicked : this._onSendClicked;
+        const sendButtonLabel = haveUnknownDevices ? this.props.sendAnywayLabel : this.props.sendAnywayLabel;
+
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
             <BaseDialog className='mx_UnknownDeviceDialog'
-                onFinished={() => {
-                            // XXX: temporary logging to try to diagnose
-                            // https://github.com/vector-im/riot-web/issues/3148
-                            console.log("UnknownDeviceDialog closed by escape");
-                            this.props.onFinished();
-                }}
+                onFinished={this.props.onFinished}
                 title={_t('Room contains unknown devices')}
+                contentId='mx_Dialog_content'
             >
-                <GeminiScrollbar autoshow={false} className="mx_Dialog_content">
+                <GeminiScrollbarWrapper autoshow={false} className="mx_Dialog_content" id='mx_Dialog_content'>
                     <h4>
-                        {_t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name})}
+                        { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
                     </h4>
                     { warning }
-                    {_t("Unknown devices")}:
+                    { _t("Unknown devices") }:
 
                     <UnknownDeviceList devices={this.props.devices} />
-                </GeminiScrollbar>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" autoFocus={ true }
-                            onClick={() => {
-                                this.props.onFinished();
-                                Resend.resendUnsentEvents(this.props.room);
-                            }}>
-                        {_t("Send anyway")}
-                    </button>
-                    <button className="mx_Dialog_primary" autoFocus={ true }
-                            onClick={() => {
-                                // XXX: temporary logging to try to diagnose
-                                // https://github.com/vector-im/riot-web/issues/3148
-                                console.log("UnknownDeviceDialog closed by OK");
-                                this.props.onFinished();
-                            }}>
-                        OK
-                    </button>
-                </div>
+                </GeminiScrollbarWrapper>
+                <DialogButtons primaryButton={sendButtonLabel}
+                    onPrimaryButtonClick={sendButtonOnClick}
+                    onCancel={this._onDismissClicked} />
             </BaseDialog>
         );
         // XXX: do we want to give the user the option to enable blacklistUnverifiedDevices for this room (or globally) at this point?

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 '../../../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/AccessibleButton.js

@@ -15,6 +15,9 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+
+import { KeyCode } from '../../../Keyboard';
 
 /**
  * AccessibleButton is a generic wrapper for any element that should be treated
@@ -27,12 +30,38 @@ import React from 'react';
 export default function AccessibleButton(props) {
     const {element, onClick, children, ...restProps} = props;
     restProps.onClick = onClick;
+    // We need to consume enter onKeyDown and space onKeyUp
+    // otherwise we are risking also activating other keyboard focusable elements
+    // that might receive focus as a result of the AccessibleButtonClick action
+    // It's because we are using html buttons at a few places e.g. inside dialogs
+    // And divs which we report as role button to assistive technologies.
+    // Browsers handle space and enter keypresses differently and we are only adjusting to the
+    // inconsistencies here
+    restProps.onKeyDown = function(e) {
+        if (e.keyCode === KeyCode.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+            return onClick(e);
+        }
+        if (e.keyCode === KeyCode.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
     restProps.onKeyUp = function(e) {
-        if (e.keyCode == 13 || e.keyCode == 32) return onClick(e);
+        if (e.keyCode === KeyCode.SPACE) {
+            e.stopPropagation();
+            e.preventDefault();
+            return onClick(e);
+        }
+        if (e.keyCode === KeyCode.ENTER) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
     };
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
-    restProps.className = (restProps.className ? restProps.className + " " : "") + 
+    restProps.className = (restProps.className ? restProps.className + " " : "") +
                           "mx_AccessibleButton";
     return React.createElement(element, restProps, children);
 }
@@ -44,9 +73,9 @@ export default function AccessibleButton(props) {
  *           implemented exactly like a normal onClick handler.
  */
 AccessibleButton.propTypes = {
-    children: React.PropTypes.node,
-    element: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
+    children: PropTypes.node,
+    element: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
 };
 
 AccessibleButton.defaultProps = {

src/components/views/elements/ActionButton.js

@@ -19,6 +19,7 @@ import PropTypes from 'prop-types';
 import AccessibleButton from './AccessibleButton';
 import dis from '../../../dispatcher';
 import sdk from '../../../index';
+import Analytics from '../../../Analytics';
 
 export default React.createClass({
     displayName: 'RoleButton',
@@ -47,6 +48,7 @@ export default React.createClass({
 
     _onClick: function(ev) {
         ev.stopPropagation();
+        Analytics.trackEvent('Action Button', 'click', this.props.action);
         dis.dispatch({action: this.props.action});
     },
 
@@ -75,10 +77,11 @@ export default React.createClass({
                 onClick={this._onClick}
                 onMouseEnter={this._onMouseEnter}
                 onMouseLeave={this._onMouseLeave}
+                aria-label={this.props.label}
             >
                 <TintableSvg src={this.props.iconPath} width={this.props.size} height={this.props.size} />
-                {tooltip}
+                { tooltip }
             </AccessibleButton>
         );
-    }
+    },
 });

src/components/views/elements/AddressSelector.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import classNames from 'classnames';
 import { UserAddressType } from '../../../UserAddress';
@@ -26,15 +27,17 @@ export default React.createClass({
     displayName: 'AddressSelector',
 
     propTypes: {
-        onSelected: React.PropTypes.func.isRequired,
+        onSelected: PropTypes.func.isRequired,
 
         // List of the addresses to display
-        addressList: React.PropTypes.arrayOf(UserAddressType).isRequired,
-        truncateAt: React.PropTypes.number.isRequired,
-        selected: React.PropTypes.number,
+        addressList: PropTypes.arrayOf(UserAddressType).isRequired,
+        // Whether to show the address on the address tiles
+        showAddress: PropTypes.bool,
+        truncateAt: PropTypes.number.isRequired,
+        selected: PropTypes.number,
 
         // Element to put as a header on top of the list
-        header: React.PropTypes.node,
+        header: PropTypes.node,
     },
 
     getInitialState: function() {
@@ -46,8 +49,8 @@ export default React.createClass({
 
     componentWillReceiveProps: function(props) {
         // Make sure the selected item isn't outside the list bounds
-        var selected = this.state.selected;
-        var maxSelected = this._maxSelected(props.addressList);
+        const selected = this.state.selected;
+        const maxSelected = this._maxSelected(props.addressList);
         if (selected > maxSelected) {
             this.setState({ selected: maxSelected });
         }
@@ -57,7 +60,7 @@ export default React.createClass({
         // As the user scrolls with the arrow keys keep the selected item
         // at the top of the window.
         if (this.scrollElement && this.props.addressList.length > 0 && !this.state.hover) {
-            var elementHeight = this.addressListElement.getBoundingClientRect().height;
+            const elementHeight = this.addressListElement.getBoundingClientRect().height;
             this.scrollElement.scrollTop = (this.state.selected * elementHeight) - elementHeight;
         }
     },
@@ -75,7 +78,7 @@ export default React.createClass({
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
-                hover : false,
+                hover: false,
             });
         }
     },
@@ -84,7 +87,7 @@ export default React.createClass({
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
-                hover : false,
+                hover: false,
             });
         }
     },
@@ -105,7 +108,7 @@ export default React.createClass({
     },
 
     onMouseLeave: function() {
-        this.setState({ hover : false });
+        this.setState({ hover: false });
     },
 
     selectAddress: function(index) {
@@ -117,15 +120,15 @@ export default React.createClass({
     },
 
     createAddressListTiles: function() {
-        var self = this;
-        var AddressTile = sdk.getComponent("elements.AddressTile");
-        var maxSelected = this._maxSelected(this.props.addressList);
-        var addressList = [];
+        const self = this;
+        const AddressTile = sdk.getComponent("elements.AddressTile");
+        const maxSelected = this._maxSelected(this.props.addressList);
+        const addressList = [];
 
         // Only create the address elements if there are address
         if (this.props.addressList.length > 0) {
-            for (var i = 0; i <= maxSelected; i++) {
-                var classes = classNames({
+            for (let i = 0; i <= maxSelected; i++) {
+                const classes = classNames({
                     "mx_AddressSelector_addressListElement": true,
                     "mx_AddressSelector_selected": this.state.selected === i,
                 });
@@ -142,8 +145,14 @@ export default React.createClass({
                         key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
                         ref={(ref) => { this.addressListElement = ref; }}
                     >
-                        <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
-                    </div>
+                        <AddressTile
+                            address={this.props.addressList[i]}
+                            showAddress={this.props.showAddress}
+                            justified={true}
+                            networkName="vector"
+                            networkUrl="img/search-icon-vector.svg"
+                        />
+                    </div>,
                 );
             }
         }
@@ -151,13 +160,13 @@ export default React.createClass({
     },
 
     _maxSelected: function(list) {
-        var listSize = list.length === 0 ? 0 : list.length - 1;
-        var maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
+        const listSize = list.length === 0 ? 0 : list.length - 1;
+        const maxSelected = listSize > (this.props.truncateAt - 1) ? (this.props.truncateAt - 1) : listSize;
         return maxSelected;
     },
 
     render: function() {
-        var classes = classNames({
+        const classes = classNames({
             "mx_AddressSelector": true,
             "mx_AddressSelector_empty": this.props.addressList.length === 0,
         });
@@ -168,5 +177,5 @@ export default React.createClass({
                 { this.createAddressListTiles() }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/AddressTile.js

@@ -16,6 +16,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import sdk from "../../../index";
 import MatrixClientPeg from "../../../MatrixClientPeg";
@@ -28,9 +29,9 @@ export default React.createClass({
 
     propTypes: {
         address: UserAddressType.isRequired,
-        canDismiss: React.PropTypes.bool,
-        onDismissed: React.PropTypes.func,
-        justified: React.PropTypes.bool,
+        canDismiss: PropTypes.bool,
+        onDismissed: PropTypes.func,
+        justified: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -45,11 +46,12 @@ export default React.createClass({
         const address = this.props.address;
         const name = address.displayName || address.address;
 
-        let imgUrls = [];
+        const imgUrls = [];
+        const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType);
 
-        if (address.addressType === "mx" && address.avatarMxc) {
+        if (isMatrixAddress && address.avatarMxc) {
             imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
-                address.avatarMxc, 25, 25, 'crop'
+                address.avatarMxc, 25, 25, 'crop',
             ));
         } else if (address.addressType === 'email') {
             imgUrls.push('img/icon-email-user.svg');
@@ -77,7 +79,7 @@ export default React.createClass({
 
         let info;
         let error = false;
-        if (address.addressType === "mx" && address.isKnown) {
+        if (isMatrixAddress && address.isKnown) {
             const idClasses = classNames({
                 "mx_AddressTile_id": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -86,10 +88,13 @@ export default React.createClass({
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={nameClasses}>{ name }</div>
-                    <div className={idClasses}>{ address.address }</div>
+                    { this.props.showAddress ?
+                        <div className={idClasses}>{ address.address }</div> :
+                        <div />
+                    }
                 </div>
             );
-        } else if (address.addressType === "mx") {
+        } else if (isMatrixAddress) {
             const unknownMxClasses = classNames({
                 "mx_AddressTile_unknownMx": true,
                 "mx_AddressTile_justified": this.props.justified,
@@ -106,24 +111,24 @@ export default React.createClass({
 
             let nameNode = null;
             if (address.displayName) {
-                nameNode = <div className={nameClasses}>{ address.displayName }</div>
+                nameNode = <div className={nameClasses}>{ address.displayName }</div>;
             }
 
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={emailClasses}>{ address.address }</div>
-                    {nameNode}
+                    { nameNode }
                 </div>
             );
         } else {
             error = true;
-            var unknownClasses = classNames({
+            const unknownClasses = classNames({
                 "mx_AddressTile_unknown": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
             info = (
-                <div className={unknownClasses}>{_t("Unknown Address")}</div>
+                <div className={unknownClasses}>{ _t("Unknown Address") }</div>
             );
         }
 
@@ -150,5 +155,5 @@ export default React.createClass({
                 { dismiss }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/AppPermission.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import url from 'url';
 import { _t } from '../../../languageHandler';
+import WidgetUtils from "../../../utils/WidgetUtils";
 
 export default class AppPermission extends React.Component {
     constructor(props) {
@@ -19,9 +20,9 @@ export default class AppPermission extends React.Component {
 
         const searchParams = new URLSearchParams(wurl.search);
 
-        if(this.isScalarWurl(wurl) && searchParams && searchParams.get('url')) {
+        if (WidgetUtils.isScalarUrl(wurl) && searchParams && searchParams.get('url')) {
             curl = url.parse(searchParams.get('url'));
-            if(curl) {
+            if (curl) {
                 curl.search = curl.query = "";
                 curlString = curl.format();
             }
@@ -33,33 +34,25 @@ export default class AppPermission extends React.Component {
         return curlString;
     }
 
-    isScalarWurl(wurl) {
-        if(wurl && wurl.hostname && (
-            wurl.hostname === 'scalar.vector.im' ||
-            wurl.hostname === 'scalar-staging.riot.im' ||
-            wurl.hostname === 'scalar-develop.riot.im' ||
-            wurl.hostname === 'demo.riot.im' ||
-            wurl.hostname === 'localhost'
-        )) {
-            return true;
-        }
-        return false;
-    }
-
     render() {
         let e2eWarningText;
         if (this.props.isRoomEncrypted) {
             e2eWarningText =
-                <span className='mx_AppPermissionWarningTextLabel'>{_t('NOTE: Apps are not end-to-end encrypted')}</span>;
+                <span className='mx_AppPermissionWarningTextLabel'>{ _t('NOTE: Apps are not end-to-end encrypted') }</span>;
         }
+        const cookieWarning =
+            <span className='mx_AppPermissionWarningTextLabel'>
+                { _t('Warning: This widget might use cookies.') }
+            </span>;
         return (
             <div className='mx_AppPermissionWarning'>
                 <div className='mx_AppPermissionWarningImage'>
-                    <img src='img/warning.svg' alt={_t('Warning!')}/>
+                    <img src='img/warning.svg' alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
-                    <span className='mx_AppPermissionWarningTextLabel'>{_t('Do you want to load widget from URL:')}</span> <span className='mx_AppPermissionWarningTextURL'>{this.state.curlBase}</span>
-                    {e2eWarningText}
+                    <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>
+                    { e2eWarningText }
+                    { cookieWarning }
                 </div>
                 <input
                     className='mx_AppPermissionButton'

src/components/views/elements/AppTile.js

@@ -1,5 +1,6 @@
-/*
+/**
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,75 +18,115 @@ limitations under the License.
 'use strict';
 
 import url from 'url';
+import qs from 'querystring';
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import PlatformPeg from '../../../PlatformPeg';
 import ScalarAuthClient from '../../../ScalarAuthClient';
-import SdkConfig from '../../../SdkConfig';
+import WidgetMessaging from '../../../WidgetMessaging';
+import TintableSvgButton from './TintableSvgButton';
 import Modal from '../../../Modal';
-import { _t } from '../../../languageHandler';
+import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import AppPermission from './AppPermission';
 import AppWarning from './AppWarning';
 import MessageSpinner from './MessageSpinner';
-import WidgetUtils from '../../../WidgetUtils';
+import WidgetUtils from '../../../utils/WidgetUtils';
 import dis from '../../../dispatcher';
+import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 
 const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
+const ENABLE_REACT_PERF = false;
 
-export default React.createClass({
-    displayName: 'AppTile',
+export default class AppTile extends React.Component {
+    constructor(props) {
+        super(props);
 
-    propTypes: {
-        id: React.PropTypes.string.isRequired,
-        url: React.PropTypes.string.isRequired,
-        name: React.PropTypes.string.isRequired,
-        room: React.PropTypes.object.isRequired,
-        type: React.PropTypes.string.isRequired,
-        // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
-        // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
-        fullWidth: React.PropTypes.bool,
-        // UserId of the current user
-        userId: React.PropTypes.string.isRequired,
-        // UserId of the entity that added / modified the widget
-        creatorUserId: React.PropTypes.string,
-    },
+        // The key used for PersistedElement
+        this._persistKey = 'widget_' + this.props.id;
 
-    getDefaultProps: function() {
-        return {
-            url: "",
-        };
-    },
+        this.state = this._getNewState(props);
 
-    getInitialState: function() {
-        const widgetPermissionId = [this.props.room.roomId, encodeURIComponent(this.props.url)].join('_');
+        this._onAction = this._onAction.bind(this);
+        this._onMessage = this._onMessage.bind(this);
+        this._onLoaded = this._onLoaded.bind(this);
+        this._onEditClick = this._onEditClick.bind(this);
+        this._onDeleteClick = this._onDeleteClick.bind(this);
+        this._onSnapshotClick = this._onSnapshotClick.bind(this);
+        this.onClickMenuBar = this.onClickMenuBar.bind(this);
+        this._onMinimiseClick = this._onMinimiseClick.bind(this);
+        this._grantWidgetPermission = this._grantWidgetPermission.bind(this);
+        this._revokeWidgetPermission = this._revokeWidgetPermission.bind(this);
+        this._onPopoutWidgetClick = this._onPopoutWidgetClick.bind(this);
+        this._onReloadWidgetClick = this._onReloadWidgetClick.bind(this);
+    }
+
+    /**
+     * Set initial component state when the App wUrl (widget URL) is being updated.
+     * Component props *must* be passed (rather than relying on this.props).
+     * @param  {Object} newProps The new properties of the component
+     * @return {Object} Updated component state to be set with setState
+     */
+    _getNewState(newProps) {
+        const widgetPermissionId = [newProps.room.roomId, encodeURIComponent(newProps.url)].join('_');
         const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
+
+        const PersistedElement = sdk.getComponent("elements.PersistedElement");
         return {
-            loading: false,
-            widgetUrl: this.props.url,
+            initialising: true, // True while we are mangling the widget URL
+            // True while the iframe content is loading
+            loading: this.props.waitForIframeLoad && !PersistedElement.isMounted(this._persistKey),
+            widgetUrl: this._addWurlParams(newProps.url),
             widgetPermissionId: widgetPermissionId,
-            // Assume that widget has permission to load if we are the user who added it to the room, or if explicitly granted by the user
-            hasPermissionToLoad: hasPermissionToLoad === 'true' || this.props.userId === this.props.creatorUserId,
+            // Assume that widget has permission to load if we are the user who
+            // added it to the room, or if explicitly granted by the user
+            hasPermissionToLoad: hasPermissionToLoad === 'true' || newProps.userId === newProps.creatorUserId,
             error: null,
             deleting: false,
+            widgetPageTitle: newProps.widgetPageTitle,
         };
-    },
+    }
 
-    // Returns true if props.url is a scalar URL, typically https://scalar.vector.im/api
-    isScalarUrl: function() {
-        let scalarUrls = SdkConfig.get().integrations_widgets_urls;
-        if (!scalarUrls || scalarUrls.length == 0) {
-            scalarUrls = [SdkConfig.get().integrations_rest_url];
+    /**
+     * Does the widget support a given capability
+     * @param  {string}  capability Capability to check for
+     * @return {Boolean}            True if capability supported
+     */
+    _hasCapability(capability) {
+        return ActiveWidgetStore.widgetHasCapability(this.props.id, capability);
+    }
+
+    /**
+     * Add widget instance specific parameters to pass in wUrl
+     * Properties passed to widget instance:
+     *  - widgetId
+     *  - origin / parent URL
+     * @param {string} urlString Url string to modify
+     * @return {string}
+     * Url string with parameters appended.
+     * If url can not be parsed, it is returned unmodified.
+     */
+    _addWurlParams(urlString) {
+        const u = url.parse(urlString);
+        if (!u) {
+            console.error("_addWurlParams", "Invalid URL", urlString);
+            return url;
         }
 
-        for (let i = 0; i < scalarUrls.length; i++) {
-            if (this.props.url.startsWith(scalarUrls[i])) {
-                return true;
-            }
-        }
-        return false;
-    },
+        const params = qs.parse(u.query);
+        // Append widget ID to query parameters
+        params.widgetId = this.props.id;
+        // Append current / parent URL, minus the hash because that will change when
+        // we view a different room (ie. may change for persistent widgets)
+        params.parentUrl = window.location.href.split('#', 2)[0];
+        u.search = undefined;
+        u.query = params;
 
-    isMixedContent: function() {
+        return u.format();
+    }
+
+    isMixedContent() {
         const parentContentProtocol = window.location.protocol;
         const u = url.parse(this.props.url);
         const childContentProtocol = u.protocol;
@@ -95,108 +136,322 @@ export default React.createClass({
             return true;
         }
         return false;
-    },
+    }
 
-    componentWillMount: function() {
-        if (!this.isScalarUrl()) {
+    componentWillMount() {
+        this.setScalarToken();
+    }
+
+    componentDidMount() {
+        // Legacy Jitsi widget messaging -- TODO replace this with standard widget
+        // postMessaging API
+        window.addEventListener('message', this._onMessage, false);
+
+        // Widget action listeners
+        this.dispatcherRef = dis.register(this._onAction);
+    }
+
+    componentWillUnmount() {
+        // Widget action listeners
+        dis.unregister(this.dispatcherRef);
+
+        // Jitsi listener
+        window.removeEventListener('message', this._onMessage);
+
+        // if it's not remaining on screen, get rid of the PersistedElement container
+        if (!ActiveWidgetStore.getWidgetPersistence(this.props.id)) {
+            ActiveWidgetStore.destroyPersistentWidget();
+            const PersistedElement = sdk.getComponent("elements.PersistedElement");
+            PersistedElement.destroyElement(this._persistKey);
+        }
+    }
+
+    /**
+     * Adds a scalar token to the widget URL, if required
+     * Component initialisation is only complete when this function has resolved
+     */
+    setScalarToken() {
+        this.setState({initialising: true});
+
+        if (!WidgetUtils.isScalarUrl(this.props.url)) {
+            console.warn('Non-scalar widget, not setting scalar token!', url);
+            this.setState({
+                error: null,
+                widgetUrl: this._addWurlParams(this.props.url),
+                initialising: false,
+            });
             return;
         }
-        // Fetch the token before loading the iframe as we need to mangle the URL
-        this.setState({
-            loading: true,
-        });
-        this._scalarClient = new ScalarAuthClient();
+
+        // Fetch the token before loading the iframe as we need it to mangle the URL
+        if (!this._scalarClient) {
+            this._scalarClient = new ScalarAuthClient();
+        }
         this._scalarClient.getScalarToken().done((token) => {
-            // Append scalar_token as a query param
+            // Append scalar_token as a query param if not already present
             this._scalarClient.scalarToken = token;
-            const u = url.parse(this.props.url);
-            if (!u.search) {
-                u.search = "?scalar_token=" + encodeURIComponent(token);
-            } else {
-                u.search += "&scalar_token=" + encodeURIComponent(token);
+            const u = url.parse(this._addWurlParams(this.props.url));
+            const params = qs.parse(u.query);
+            if (!params.scalar_token) {
+                params.scalar_token = encodeURIComponent(token);
+                // u.search must be set to undefined, so that u.format() uses query paramerters - https://nodejs.org/docs/latest/api/url.html#url_url_format_url_options
+                u.search = undefined;
+                u.query = params;
             }
 
             this.setState({
                 error: null,
                 widgetUrl: u.format(),
-                loading: false,
+                initialising: false,
             });
+
+            // Fetch page title from remote content if not already set
+            if (!this.state.widgetPageTitle && params.url) {
+                this._fetchWidgetTitle(params.url);
+            }
         }, (err) => {
+            console.error("Failed to get scalar_token", err);
             this.setState({
                 error: err.message,
-                loading: false,
+                initialising: false,
             });
         });
-    },
+    }
 
-    _canUserModify: function() {
-        return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
-    },
-
-    _onEditClick: function(e) {
-        console.log("Edit widget ID ", this.props.id);
-        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
-        const src = this._scalarClient.getScalarInterfaceUrlForRoom(
-            this.props.room.roomId, 'type_' + this.props.type, this.props.id);
-        Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
-            src: src,
-        }, "mx_IntegrationsManager");
-    },
-
-    /* If user has permission to modify widgets, delete the widget, otherwise revoke access for the widget to load in the user's browser
-    */
-    _onDeleteClick: function() {
-        if (this._canUserModify()) {
-            console.log("Delete widget %s", this.props.id);
-            this.setState({deleting: true});
-            MatrixClientPeg.get().sendStateEvent(
-                this.props.room.roomId,
-                'im.vector.modular.widgets',
-                {}, // empty content
-                this.props.id,
-            ).then(() => {
-                console.log('Deleted widget');
-            }, (e) => {
-                console.error('Failed to delete widget', e);
-                this.setState({deleting: false});
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.url !== this.props.url) {
+            this._getNewState(nextProps);
+            this.setScalarToken();
+        } else if (nextProps.show && !this.props.show && this.props.waitForIframeLoad) {
+            this.setState({
+                loading: true,
+            });
+        } else if (nextProps.widgetPageTitle !== this.props.widgetPageTitle) {
+            this.setState({
+                widgetPageTitle: nextProps.widgetPageTitle,
             });
-        } else {
-            console.log("Revoke widget permissions - %s", this.props.id);
-            this._revokeWidgetPermission();
         }
-    },
+    }
+
+    // Legacy Jitsi widget messaging
+    // TODO -- This should be replaced with the new widget postMessaging API
+    _onMessage(event) {
+        if (this.props.type !== 'jitsi') {
+            return;
+        }
+        if (!event.origin) {
+            event.origin = event.originalEvent.origin;
+        }
+
+        const widgetUrlObj = url.parse(this.state.widgetUrl);
+        const eventOrigin = url.parse(event.origin);
+        if (
+            eventOrigin.protocol !== widgetUrlObj.protocol ||
+            eventOrigin.host !== widgetUrlObj.host
+        ) {
+            return;
+        }
+
+        if (event.data.widgetAction === 'jitsi_iframe_loaded') {
+            const iframe = this.refs.appFrame.contentWindow
+                .document.querySelector('iframe[id^="jitsiConferenceFrame"]');
+            PlatformPeg.get().setupScreenSharingForIframe(iframe);
+        }
+    }
+
+    _canUserModify() {
+        // User widgets should always be modifiable by their creator
+        if (this.props.userWidget && MatrixClientPeg.get().credentials.userId === this.props.creatorUserId) {
+            return true;
+        }
+        // Check if the current user can modify widgets in the current room
+        return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
+    }
+
+    _onEditClick(e) {
+        console.log("Edit widget ID ", this.props.id);
+        if (this.props.onEditClick) {
+            this.props.onEditClick();
+        } else {
+            const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+            const src = this._scalarClient.getScalarInterfaceUrlForRoom(
+                this.props.room, 'type_' + this.props.type, this.props.id);
+            Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, {
+                src: src,
+            }, "mx_IntegrationsManager");
+        }
+    }
+
+    _onSnapshotClick(e) {
+        console.warn("Requesting widget snapshot");
+        ActiveWidgetStore.getWidgetMessaging(this.props.id).getScreenshot()
+            .catch((err) => {
+                console.error("Failed to get screenshot", err);
+            })
+            .then((screenshot) => {
+                dis.dispatch({
+                    action: 'picture_snapshot',
+                    file: screenshot,
+                }, true);
+            });
+    }
+
+    /* If user has permission to modify widgets, delete the widget,
+     * otherwise revoke access for the widget to load in the user's browser
+    */
+    _onDeleteClick() {
+        if (this.props.onDeleteClick) {
+            this.props.onDeleteClick();
+        } else {
+            if (this._canUserModify()) {
+                // Show delete confirmation dialog
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                Modal.createTrackedDialog('Delete Widget', '', QuestionDialog, {
+                    title: _t("Delete Widget"),
+                    description: _t(
+                        "Deleting a widget removes it for all users in this room." +
+                        " Are you sure you want to delete this widget?"),
+                    button: _t("Delete widget"),
+                    onFinished: (confirmed) => {
+                        if (!confirmed) {
+                            return;
+                        }
+                        this.setState({deleting: true});
+
+                        WidgetUtils.setRoomWidget(
+                            this.props.room.roomId,
+                            this.props.id,
+                        ).catch((e) => {
+                            console.error('Failed to delete widget', e);
+                            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+
+                            Modal.createTrackedDialog('Failed to remove widget', '', ErrorDialog, {
+                                title: _t('Failed to remove widget'),
+                                description: _t('An error ocurred whilst trying to remove the widget from the room'),
+                            });
+                        }).finally(() => {
+                            this.setState({deleting: false});
+                        });
+                    },
+                });
+            } else {
+                console.log("Revoke widget permissions - %s", this.props.id);
+                this._revokeWidgetPermission();
+            }
+        }
+    }
+
+    /**
+     * Called when widget iframe has finished loading
+     */
+    _onLoaded() {
+        if (!ActiveWidgetStore.getWidgetMessaging(this.props.id)) {
+            this._setupWidgetMessaging();
+        }
+        ActiveWidgetStore.setRoomId(this.props.id, this.props.room.roomId);
+        this.setState({loading: false});
+    }
+
+    _setupWidgetMessaging() {
+        // FIXME: There's probably no reason to do this here: it should probably be done entirely
+        // in ActiveWidgetStore.
+        const widgetMessaging = new WidgetMessaging(this.props.id, this.props.url, this.refs.appFrame.contentWindow);
+        ActiveWidgetStore.setWidgetMessaging(this.props.id, widgetMessaging);
+        widgetMessaging.getCapabilities().then((requestedCapabilities) => {
+            console.log(`Widget ${this.props.id} requested capabilities: ` + requestedCapabilities);
+            requestedCapabilities = requestedCapabilities || [];
+
+            // Allow whitelisted capabilities
+            let requestedWhitelistCapabilies = [];
+
+            if (this.props.whitelistCapabilities && this.props.whitelistCapabilities.length > 0) {
+                requestedWhitelistCapabilies = requestedCapabilities.filter(function(e) {
+                    return this.indexOf(e)>=0;
+                }, this.props.whitelistCapabilities);
+
+                if (requestedWhitelistCapabilies.length > 0 ) {
+                    console.warn(`Widget ${this.props.id} allowing requested, whitelisted properties: ` +
+                        requestedWhitelistCapabilies,
+                    );
+                }
+            }
+
+            // TODO -- Add UI to warn about and optionally allow requested capabilities
+
+            ActiveWidgetStore.setWidgetCapabilities(this.props.id, requestedWhitelistCapabilies);
+
+            if (this.props.onCapabilityRequest) {
+                this.props.onCapabilityRequest(requestedCapabilities);
+            }
+        }).catch((err) => {
+            console.log(`Failed to get capabilities for widget type ${this.props.type}`, this.props.id, err);
+        });
+    }
+
+    _onAction(payload) {
+        if (payload.widgetId === this.props.id) {
+            switch (payload.action) {
+                case 'm.sticker':
+                if (this._hasCapability('m.sticker')) {
+                    dis.dispatch({action: 'post_sticker_message', data: payload.data});
+                } else {
+                    console.warn('Ignoring sticker message. Invalid capability');
+                }
+                break;
+            }
+        }
+    }
+
+    /**
+     * Set remote content title on AppTile
+     * @param {string} url Url to check for title
+     */
+    _fetchWidgetTitle(url) {
+        this._scalarClient.getScalarPageTitle(url).then((widgetPageTitle) => {
+            if (widgetPageTitle) {
+                this.setState({widgetPageTitle: widgetPageTitle});
+            }
+        }, (err) =>{
+            console.error("Failed to get page title", err);
+        });
+    }
 
     // Widget labels to render, depending upon user permissions
     // These strings are translated at the point that they are inserted in to the DOM, in the render method
     _deleteWidgetLabel() {
         if (this._canUserModify()) {
-            return 'Delete widget';
+            return _td('Delete widget');
         }
-        return 'Revoke widget access';
-    },
+        return _td('Revoke widget access');
+    }
 
     /* TODO -- Store permission in account data so that it is persisted across multiple devices */
     _grantWidgetPermission() {
         console.warn('Granting permission to load widget - ', this.state.widgetUrl);
         localStorage.setItem(this.state.widgetPermissionId, true);
         this.setState({hasPermissionToLoad: true});
-    },
+    }
 
     _revokeWidgetPermission() {
         console.warn('Revoking permission to load widget - ', this.state.widgetUrl);
         localStorage.removeItem(this.state.widgetPermissionId);
         this.setState({hasPermissionToLoad: false});
-    },
 
-    formatAppTileName: function() {
+        // Force the widget to be non-persistent
+        ActiveWidgetStore.destroyPersistentWidget();
+        const PersistedElement = sdk.getComponent("elements.PersistedElement");
+        PersistedElement.destroyElement(this._persistKey);
+    }
+
+    formatAppTileName() {
         let appTileName = "No name";
-        if(this.props.name && this.props.name.trim()) {
+        if (this.props.name && this.props.name.trim()) {
             appTileName = this.props.name.trim();
         }
         return appTileName;
-    },
+    }
 
-    onClickMenuBar: function(ev) {
+    onClickMenuBar(ev) {
         ev.preventDefault();
 
         // Ignore clicks on menu bar children
@@ -209,9 +464,56 @@ export default React.createClass({
             action: 'appsDrawer',
             show: !this.props.show,
         });
-    },
+    }
 
-    render: function() {
+    _getSafeUrl() {
+        const parsedWidgetUrl = url.parse(this.state.widgetUrl, true);
+        if (ENABLE_REACT_PERF) {
+            parsedWidgetUrl.search = null;
+            parsedWidgetUrl.query.react_perf = true;
+        }
+        let safeWidgetUrl = '';
+        if (ALLOWED_APP_URL_SCHEMES.indexOf(parsedWidgetUrl.protocol) !== -1) {
+            safeWidgetUrl = url.format(parsedWidgetUrl);
+        }
+        return safeWidgetUrl;
+    }
+
+    _getTileTitle() {
+        const name = this.formatAppTileName();
+        const titleSpacer = <span>&nbsp;-&nbsp;</span>;
+        let title = '';
+        if (this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName()) {
+            title = this.state.widgetPageTitle;
+        }
+
+        return (
+            <span>
+                <b>{ name }</b>
+                <span>{ title ? titleSpacer : '' }{ title }</span>
+            </span>
+        );
+    }
+
+    _onMinimiseClick(e) {
+        if (this.props.onMinimiseClick) {
+            this.props.onMinimiseClick();
+        }
+    }
+
+    _onPopoutWidgetClick(e) {
+        // Using Object.assign workaround as the following opens in a new window instead of a new tab.
+        // window.open(this._getSafeUrl(), '_blank', 'noopener=yes,noreferrer=yes');
+        Object.assign(document.createElement('a'),
+            { target: '_blank', href: this._getSafeUrl(), rel: 'noopener noreferrer'}).click();
+    }
+
+    _onReloadWidgetClick(e) {
+        // Reload iframe in this way to avoid cross-origin restrictions
+        this.refs.appFrame.src = this.refs.appFrame.src;
+    }
+
+    render() {
         let appTileBody;
 
         // Don't render widget if it is in the process of being deleted
@@ -226,44 +528,69 @@ export default React.createClass({
         // a link to it.
         const sandboxFlags = "allow-forms allow-popups allow-popups-to-escape-sandbox "+
             "allow-same-origin allow-scripts allow-presentation";
-        const parsedWidgetUrl = url.parse(this.state.widgetUrl);
-        let safeWidgetUrl = '';
-        if (ALLOWED_APP_URL_SCHEMES.indexOf(parsedWidgetUrl.protocol) !== -1) {
-            safeWidgetUrl = url.format(parsedWidgetUrl);
-        }
+
+        // Additional iframe feature pemissions
+        // (see - https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-permissions-in-cross-origin-iframes and https://wicg.github.io/feature-policy/)
+        const iframeFeatures = "microphone; camera; encrypted-media;";
+
+        const appTileBodyClass = 'mx_AppTileBody' + (this.props.miniMode ? '_mini  ' : ' ');
 
         if (this.props.show) {
-            if (this.state.loading) {
+            const loadingElement = (
+                <div className="mx_AppLoading_spinner_fadeIn">
+                    <MessageSpinner msg='Loading...' />
+                </div>
+            );
+            if (this.state.initialising) {
                 appTileBody = (
-                    <div className='mx_AppTileBody mx_AppLoading'>
-                        <MessageSpinner msg='Loading...'/>
+                    <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                        { loadingElement }
                     </div>
                 );
             } else if (this.state.hasPermissionToLoad == true) {
                 if (this.isMixedContent()) {
                     appTileBody = (
-                        <div className="mx_AppTileBody">
-                            <AppWarning
-                                errorMsg="Error - Mixed content"
-                            />
+                        <div className={appTileBodyClass}>
+                            <AppWarning errorMsg="Error - Mixed content" />
                         </div>
                     );
                 } else {
                     appTileBody = (
-                        <div className="mx_AppTileBody">
+                        <div className={appTileBodyClass + (this.state.loading ? 'mx_AppLoading' : '')}>
+                            { this.state.loading && loadingElement }
+                            { /*
+                                The "is" attribute in the following iframe tag is needed in order to enable rendering of the
+                                "allow" attribute, which is unknown to react 15.
+                            */ }
                             <iframe
+                                is
+                                allow={iframeFeatures}
                                 ref="appFrame"
-                                src={safeWidgetUrl}
+                                src={this._getSafeUrl()}
                                 allowFullScreen="true"
                                 sandbox={sandboxFlags}
+                                onLoad={this._onLoaded}
                             ></iframe>
                         </div>
                     );
+                    // if the widget would be allowed to remian on screen, we must put it in
+                    // a PersistedElement from the get-go, otherwise the iframe will be
+                    // re-mounted later when we do.
+                    if (this.props.whitelistCapabilities.includes('m.always_on_screen')) {
+                        const PersistedElement = sdk.getComponent("elements.PersistedElement");
+                        // Also wrap the PersistedElement in a div to fix the height, otherwise
+                        // AppTile's border is in the wrong place
+                        appTileBody = <div className="mx_AppTile_persistedWrapper">
+                            <PersistedElement persistKey={this._persistKey}>
+                                {appTileBody}
+                            </PersistedElement>
+                        </div>;
+                    }
                 }
             } else {
                 const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
                 appTileBody = (
-                    <div className="mx_AppTileBody">
+                    <div className={appTileBodyClass}>
                         <AppPermission
                             isRoomEncrypted={isRoomEncrypted}
                             url={this.state.widgetUrl}
@@ -277,40 +604,167 @@ export default React.createClass({
         // editing is done in scalar
         const showEditButton = Boolean(this._scalarClient && this._canUserModify());
         const deleteWidgetLabel = this._deleteWidgetLabel();
-        let deleteIcon = 'img/cancel.svg';
-        let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget';
-        if(this._canUserModify()) {
-            deleteIcon = 'img/cancel-red.svg';
+        let deleteIcon = 'img/cancel_green.svg';
+        let deleteClasses = 'mx_AppTileMenuBarWidget';
+        if (this._canUserModify()) {
+            deleteIcon = 'img/icon-delete-pink.svg';
             deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
         }
 
+        // Picture snapshot - only show button when apps are maximised.
+        const showPictureSnapshotButton = this._hasCapability('m.capability.screenshot') && this.props.show;
+        const showPictureSnapshotIcon = 'img/camera_green.svg';
+        const popoutWidgetIcon = 'img/button-new-window.svg';
+        const reloadWidgetIcon = 'img/button-refresh.svg';
+        const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
+
+        let appTileClass;
+        if (this.props.miniMode) {
+            appTileClass = 'mx_AppTile_mini';
+        } else if (this.props.fullWidth) {
+            appTileClass = 'mx_AppTileFullWidth';
+        } else {
+            appTileClass = 'mx_AppTile';
+        }
+
         return (
-            <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
+            <div className={appTileClass} id={this.props.id}>
+                { this.props.showMenubar &&
                 <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
-                    {this.formatAppTileName()}
+                    <span className="mx_AppTileMenuBarTitle" style={{pointerEvents: (this.props.handleMinimisePointerEvents ? 'all' : false)}}>
+                        { this.props.showMinimise && <TintableSvgButton
+                            src={windowStateIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Minimize apps')}
+                            width="10"
+                            height="10"
+                            onClick={this._onMinimiseClick}
+                        /> }
+                        { this.props.showTitle && this._getTileTitle() }
+                    </span>
                     <span className="mx_AppTileMenuBarWidgets">
-                        {/* Edit widget */}
-                        {showEditButton && <img
-                            src="img/edit.svg"
-                            className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
-                            width="8" height="8"
-                            alt={_t('Edit')}
+                        { /* Reload widget */ }
+                        { this.props.showReload && <TintableSvgButton
+                            src={reloadWidgetIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Reload widget')}
+                            onClick={this._onReloadWidgetClick}
+                            width="10"
+                            height="10"
+                        /> }
+
+                        { /* Popout widget */ }
+                        { this.props.showPopout && <TintableSvgButton
+                            src={popoutWidgetIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Popout widget')}
+                            onClick={this._onPopoutWidgetClick}
+                            width="10"
+                            height="10"
+                        /> }
+
+                        { /* Snapshot widget */ }
+                        { showPictureSnapshotButton && <TintableSvgButton
+                            src={showPictureSnapshotIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Picture')}
+                            onClick={this._onSnapshotClick}
+                            width="10"
+                            height="10"
+                        /> }
+
+                        { /* Edit widget */ }
+                        { showEditButton && <TintableSvgButton
+                            src="img/edit_green.svg"
+                            className={"mx_AppTileMenuBarWidget " +
+                              (this.props.showDelete ? "mx_AppTileMenuBarWidgetPadding" : "")}
                             title={_t('Edit')}
                             onClick={this._onEditClick}
-                        />}
+                            width="10"
+                            height="10"
+                        /> }
 
-                        {/* Delete widget */}
-                        <img src={deleteIcon}
-                        className={deleteClasses}
-                        width="8" height="8"
-                        alt={_t(deleteWidgetLabel)}
-                        title={_t(deleteWidgetLabel)}
-                        onClick={this._onDeleteClick}
-                        />
+                        { /* Delete widget */ }
+                        { this.props.showDelete && <TintableSvgButton
+                            src={deleteIcon}
+                            className={deleteClasses}
+                            title={_t(deleteWidgetLabel)}
+                            onClick={this._onDeleteClick}
+                            width="10"
+                            height="10"
+                        /> }
                     </span>
-                </div>
-                {appTileBody}
+                </div> }
+                { appTileBody }
             </div>
         );
-    },
-});
+    }
+}
+
+AppTile.displayName ='AppTile';
+
+AppTile.propTypes = {
+    id: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    room: PropTypes.object.isRequired,
+    type: PropTypes.string.isRequired,
+    // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
+    // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
+    fullWidth: PropTypes.bool,
+    // Optional. If set, renders a smaller view of the widget
+    miniMode: PropTypes.bool,
+    // UserId of the current user
+    userId: PropTypes.string.isRequired,
+    // UserId of the entity that added / modified the widget
+    creatorUserId: PropTypes.string,
+    waitForIframeLoad: PropTypes.bool,
+    showMenubar: PropTypes.bool,
+    // Should the AppTile render itself
+    show: PropTypes.bool,
+    // Optional onEditClickHandler (overrides default behaviour)
+    onEditClick: PropTypes.func,
+    // Optional onDeleteClickHandler (overrides default behaviour)
+    onDeleteClick: PropTypes.func,
+    // Optional onMinimiseClickHandler
+    onMinimiseClick: PropTypes.func,
+    // Optionally hide the tile title
+    showTitle: PropTypes.bool,
+    // Optionally hide the tile minimise icon
+    showMinimise: PropTypes.bool,
+    // Optionally handle minimise button pointer events (default false)
+    handleMinimisePointerEvents: PropTypes.bool,
+    // Optionally hide the delete icon
+    showDelete: PropTypes.bool,
+    // Optionally hide the popout widget icon
+    showPopout: PropTypes.bool,
+    // Optionally show the reload widget icon
+    // This is not currently intended for use with production widgets. However
+    // it can be useful when developing persistent widgets in order to avoid
+    // having to reload all of riot to get new widget content.
+    showReload: PropTypes.bool,
+    // Widget capabilities to allow by default (without user confirmation)
+    // NOTE -- Use with caution. This is intended to aid better integration / UX
+    // basic widget capabilities, e.g. injecting sticker message events.
+    whitelistCapabilities: PropTypes.array,
+    // Optional function to be called on widget capability request
+    // Called with an array of the requested capabilities
+    onCapabilityRequest: PropTypes.func,
+    // Is this an instance of a user widget
+    userWidget: PropTypes.bool,
+};
+
+AppTile.defaultProps = {
+    url: "",
+    waitForIframeLoad: true,
+    showMenubar: true,
+    showTitle: true,
+    showMinimise: true,
+    showDelete: true,
+    showPopout: true,
+    showReload: false,
+    handleMinimisePointerEvents: false,
+    whitelistCapabilities: [],
+    userWidget: false,
+    miniMode: false,
+};

src/components/views/elements/AppWarning.js

@@ -6,10 +6,10 @@ const AppWarning = (props) => {
     return (
         <div className='mx_AppPermissionWarning'>
             <div className='mx_AppPermissionWarningImage'>
-                <img src='img/warning.svg' alt={_t('Warning!')}/>
+                <img src='img/warning.svg' alt={_t('Warning!')} />
             </div>
             <div className='mx_AppPermissionWarningText'>
-                <span className='mx_AppPermissionWarningTextLabel'>{props.errorMsg}</span>
+                <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
             </div>
         </div>
     );

src/components/views/elements/CreateRoomButton.js

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

src/components/views/elements/DNDTagTile.js

@@ -0,0 +1,45 @@
+/* eslint new-cap: "off" */
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import TagTile from './TagTile';
+
+import React from 'react';
+import { Draggable } from 'react-beautiful-dnd';
+
+export default function DNDTagTile(props) {
+    return <div>
+        <Draggable
+            key={props.tag}
+            draggableId={props.tag}
+            index={props.index}
+            type="draggable-TagTile"
+        >
+            { (provided, snapshot) => (
+                <div>
+                    <div
+                        ref={provided.innerRef}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                    >
+                        <TagTile {...props} />
+                    </div>
+                    { provided.placeholder }
+                </div>
+            ) }
+        </Draggable>
+    </div>;
+}

src/components/views/elements/DeviceVerifyButtons.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
@@ -24,13 +25,13 @@ export default React.createClass({
     displayName: 'DeviceVerifyButtons',
 
     propTypes: {
-        userId: React.PropTypes.string.isRequired,
-        device: React.PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        device: PropTypes.object.isRequired,
     },
 
     getInitialState: function() {
         return {
-            device: this.props.device
+            device: this.props.device,
         };
     },
 
@@ -60,37 +61,37 @@ export default React.createClass({
 
     onUnverifyClick: function() {
         MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.state.device.deviceId, false
+            this.props.userId, this.state.device.deviceId, false,
         );
     },
 
     onBlacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, true
+            this.props.userId, this.state.device.deviceId, true,
         );
     },
 
     onUnblacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.state.device.deviceId, false
+            this.props.userId, this.state.device.deviceId, false,
         );
     },
 
     render: function() {
-        var blacklistButton = null, verifyButton = null;
+        let blacklistButton = null, verifyButton = null;
 
         if (this.state.device.isBlocked()) {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
                   onClick={this.onUnblacklistClick}>
-                    {_t("Unblacklist")}
+                    { _t("Unblacklist") }
                 </button>
             );
         } else {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
                   onClick={this.onBlacklistClick}>
-                    {_t("Blacklist")}
+                    { _t("Blacklist") }
                 </button>
             );
         }
@@ -99,14 +100,14 @@ export default React.createClass({
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
                   onClick={this.onUnverifyClick}>
-                    {_t("Unverify")}
+                    { _t("Unverify") }
                 </button>
             );
         } else {
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
-                    {_t("Verify...")}
+                    { _t("Verify...") }
                 </button>
             );
         }

src/components/views/elements/DialogButtons.js

@@ -0,0 +1,85 @@
+/*
+Copyright 2017 Aidan Gauland
+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 '../../../languageHandler';
+
+/**
+ * Basic container for buttons in modal dialogs.
+ */
+module.exports = React.createClass({
+    displayName: "DialogButtons",
+
+    propTypes: {
+        // The primary button which is styled differently and has default focus.
+        primaryButton: PropTypes.node.isRequired,
+
+        // A node to insert into the cancel button instead of default "Cancel"
+        cancelButton: PropTypes.node,
+
+        // onClick handler for the primary button.
+        onPrimaryButtonClick: PropTypes.func.isRequired,
+
+        // should there be a cancel button? default: true
+        hasCancel: PropTypes.bool,
+
+        // onClick handler for the cancel button.
+        onCancel: PropTypes.func,
+
+        focus: PropTypes.bool,
+
+        disabled: PropTypes.bool,
+    },
+
+    getDefaultProps: function() {
+        return {
+            hasCancel: true,
+            disabled: false,
+        };
+    },
+
+    _onCancelClick: function() {
+        this.props.onCancel();
+    },
+
+    render: function() {
+        let primaryButtonClassName = "mx_Dialog_primary";
+        if (this.props.primaryButtonClass) {
+            primaryButtonClassName += " " + this.props.primaryButtonClass;
+        }
+        let cancelButton;
+        if (this.props.cancelButton || this.props.hasCancel) {
+            cancelButton = <button onClick={this._onCancelClick} disabled={this.props.disabled}>
+                { this.props.cancelButton || _t("Cancel") }
+            </button>;
+        }
+        return (
+            <div className="mx_Dialog_buttons">
+                <button className={primaryButtonClassName}
+                    onClick={this.props.onPrimaryButtonClick}
+                    autoFocus={this.props.focus}
+                    disabled={this.props.disabled}
+                >
+                    { this.props.primaryButton }
+                </button>
+                { this.props.children }
+                { cancelButton }
+            </div>
+        );
+    },
+});

src/components/views/elements/DirectorySearchBox.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 export default class DirectorySearchBox extends React.Component {
@@ -95,7 +96,7 @@ export default class DirectorySearchBox extends React.Component {
                     onChange={this._onChange} onKeyUp={this._onKeyUp}
                     placeholder={this.props.placeholder} autoFocus
                 />
-                {join_button}
+                { join_button }
                 <span className="mx_DirectorySearchBox_clear_wrapper">
                     <span className="mx_DirectorySearchBox_clear" onClick={this._onClearClick} />
                 </span>
@@ -105,10 +106,10 @@ export default class DirectorySearchBox extends React.Component {
 }
 
 DirectorySearchBox.propTypes = {
-    className: React.PropTypes.string,
-    onChange: React.PropTypes.func,
-    onClear: React.PropTypes.func,
-    onJoinClick: React.PropTypes.func,
-    placeholder: React.PropTypes.string,
-    showJoinButton: React.PropTypes.bool,
+    className: PropTypes.string,
+    onChange: PropTypes.func,
+    onClear: PropTypes.func,
+    onJoinClick: PropTypes.func,
+    placeholder: PropTypes.string,
+    showJoinButton: PropTypes.bool,
 };

src/components/views/elements/Dropdown.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
 import { _t } from '../../../languageHandler';
@@ -26,6 +27,10 @@ class MenuOption extends React.Component {
         this._onClick = this._onClick.bind(this);
     }
 
+    static defaultProps = {
+        disabled: false,
+    };
+
     _onMouseEnter() {
         this.props.onMouseEnter(this.props.dropdownKey);
     }
@@ -46,20 +51,20 @@ class MenuOption extends React.Component {
             onClick={this._onClick} onKeyPress={this._onKeyPress}
             onMouseEnter={this._onMouseEnter}
         >
-            {this.props.children}
-        </div>
+            { this.props.children }
+        </div>;
     }
-};
+}
 
 MenuOption.propTypes = {
-    children: React.PropTypes.oneOfType([
-      React.PropTypes.arrayOf(React.PropTypes.node),
-      React.PropTypes.node
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(React.PropTypes.node),
+      PropTypes.node,
     ]),
-    highlighted: React.PropTypes.bool,
-    dropdownKey: React.PropTypes.string,
-    onClick: React.PropTypes.func.isRequired,
-    onMouseEnter: React.PropTypes.func.isRequired,
+    highlighted: PropTypes.bool,
+    dropdownKey: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
 };
 
 /*
@@ -153,6 +158,8 @@ export default class Dropdown extends React.Component {
     }
 
     _onInputClick(ev) {
+        if (this.props.disabled) return;
+
         if (!this.state.expanded) {
             this.setState({
                 expanded: true,
@@ -250,13 +257,13 @@ export default class Dropdown extends React.Component {
                     onMouseEnter={this._setHighlightedOption}
                     onClick={this._onMenuOptionClick}
                 >
-                    {child}
+                    { child }
                 </MenuOption>
             );
         });
         if (options.length === 0) {
             return [<div key="0" className="mx_Dropdown_option">
-                {_t("No results")}
+                { _t("No results") }
             </div>];
         }
         return options;
@@ -279,7 +286,7 @@ export default class Dropdown extends React.Component {
                 />;
             }
             menu = <div className="mx_Dropdown_menu" style={menuStyle}>
-                {this._getMenuOptions()}
+                { this._getMenuOptions() }
             </div>;
         }
 
@@ -288,12 +295,13 @@ export default class Dropdown extends React.Component {
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
             currentValue = <div className="mx_Dropdown_option">
-                {selectedChild}
-            </div>
+                { selectedChild }
+            </div>;
         }
 
         const dropdownClasses = {
             mx_Dropdown: true,
+            mx_Dropdown_disabled: this.props.disabled,
         };
         if (this.props.className) {
             dropdownClasses[this.props.className] = true;
@@ -303,9 +311,9 @@ export default class Dropdown extends React.Component {
         // to the input, but overflows below it. The root contains both.
         return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
             <AccessibleButton className="mx_Dropdown_input" onClick={this._onInputClick}>
-                {currentValue}
+                { currentValue }
                 <span className="mx_Dropdown_arrow"></span>
-                {menu}
+                { menu }
             </AccessibleButton>
         </div>;
     }
@@ -315,18 +323,20 @@ Dropdown.propTypes = {
     // The width that the dropdown should be. If specified,
     // the dropped-down part of the menu will be set to this
     // width.
-    menuWidth: React.PropTypes.number,
+    menuWidth: PropTypes.number,
     // Called when the selected option changes
-    onOptionChange: React.PropTypes.func.isRequired,
+    onOptionChange: PropTypes.func.isRequired,
     // Called when the value of the search field changes
-    onSearchChange: React.PropTypes.func,
-    searchEnabled: React.PropTypes.bool,
+    onSearchChange: PropTypes.func,
+    searchEnabled: PropTypes.bool,
     // Function that, given the key of an option, returns
     // a node representing that option to be displayed in the
     // box itself as the currently-selected option (ie. as
     // opposed to in the actual dropped-down part). If
     // unspecified, the appropriate child element is used as
     // in the dropped-down menu.
-    getShortOption: React.PropTypes.func,
-    value: React.PropTypes.string,
-}
+    getShortOption: PropTypes.func,
+    value: PropTypes.string,
+    // negative for consistency with HTML
+    disabled: PropTypes.bool,
+};

src/components/views/elements/EditableItemList.js

@@ -0,0 +1,156 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import {_t} from '../../../languageHandler.js';
+
+const EditableItem = React.createClass({
+    displayName: 'EditableItem',
+
+    propTypes: {
+        initialValue: PropTypes.string,
+        index: PropTypes.number,
+        placeholder: PropTypes.string,
+
+        onChange: PropTypes.func,
+        onRemove: PropTypes.func,
+        onAdd: PropTypes.func,
+
+        addOnChange: PropTypes.bool,
+    },
+
+    onChange: function(value) {
+        this.setState({ value });
+        if (this.props.onChange) this.props.onChange(value, this.props.index);
+        if (this.props.addOnChange && this.props.onAdd) this.props.onAdd(value);
+    },
+
+    onRemove: function() {
+        if (this.props.onRemove) this.props.onRemove(this.props.index);
+    },
+
+    onAdd: function() {
+        if (this.props.onAdd) this.props.onAdd(this.state.value);
+    },
+
+    render: function() {
+        const EditableText = sdk.getComponent('elements.EditableText');
+        return <div className="mx_EditableItem">
+            <EditableText
+                className="mx_EditableItem_editable"
+                placeholderClassName="mx_EditableItem_editablePlaceholder"
+                placeholder={this.props.placeholder}
+                blurToCancel={false}
+                editable={true}
+                initialValue={this.props.initialValue}
+                onValueChanged={this.onChange} />
+            { this.props.onAdd ?
+                <div className="mx_EditableItem_addButton">
+                    <img className="mx_filterFlipColor"
+                        src="img/plus.svg" width="14" height="14"
+                        alt={_t("Add")} onClick={this.onAdd} />
+                </div>
+                :
+                <div className="mx_EditableItem_removeButton">
+                    <img className="mx_filterFlipColor"
+                        src="img/cancel-small.svg" width="14" height="14"
+                        alt={_t("Delete")} onClick={this.onRemove} />
+                </div>
+            }
+        </div>;
+    },
+});
+
+module.exports = React.createClass({
+    displayName: 'EditableItemList',
+
+    propTypes: {
+        items: PropTypes.arrayOf(PropTypes.string).isRequired,
+        onNewItemChanged: PropTypes.func,
+        onItemAdded: PropTypes.func,
+        onItemEdited: PropTypes.func,
+        onItemRemoved: PropTypes.func,
+
+        canEdit: PropTypes.bool,
+    },
+
+    getDefaultProps: function() {
+        return {
+            onItemAdded: () => {},
+            onItemEdited: () => {},
+            onItemRemoved: () => {},
+            onNewItemChanged: () => {},
+        };
+    },
+
+    onItemAdded: function(value) {
+        this.props.onItemAdded(value);
+    },
+
+    onItemEdited: function(value, index) {
+        if (value.length === 0) {
+            this.onItemRemoved(index);
+        } else {
+            this.props.onItemEdited(value, index);
+        }
+    },
+
+    onItemRemoved: function(index) {
+        this.props.onItemRemoved(index);
+    },
+
+    onNewItemChanged: function(value) {
+        this.props.onNewItemChanged(value);
+    },
+
+    render: function() {
+        const editableItems = this.props.items.map((item, index) => {
+            return <EditableItem
+                key={index}
+                index={index}
+                initialValue={item}
+                onChange={this.onItemEdited}
+                onRemove={this.onItemRemoved}
+                placeholder={this.props.placeholder}
+            />;
+        });
+
+        const label = this.props.items.length > 0 ?
+            this.props.itemsLabel : this.props.noItemsLabel;
+
+        return (<div className="mx_EditableItemList">
+            <div className="mx_EditableItemList_label">
+                { label }
+            </div>
+            { editableItems }
+            { this.props.canEdit ?
+                // This is slightly evil; we want a new instance of
+                // EditableItem when the list grows. To make sure it's
+                // reset to its initial state.
+                <EditableItem
+                    key={editableItems.length}
+                    initialValue={this.props.newItem}
+                    onAdd={this.onItemAdded}
+                    onChange={this.onNewItemChanged}
+                    addOnChange={true}
+                    placeholder={this.props.placeholder}
+                /> : <div />
+            }
+        </div>);
+    },
+});

src/components/views/elements/EditableText.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -14,30 +15,25 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-var React = require('react');
-
-const KEY_TAB = 9;
-const KEY_SHIFT = 16;
-const KEY_WINDOWS = 91;
+import React from 'react';
+import PropTypes from 'prop-types';
 
 module.exports = React.createClass({
     displayName: 'EditableText',
 
     propTypes: {
-        onValueChanged: React.PropTypes.func,
-        initialValue: React.PropTypes.string,
-        label: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
-        className: React.PropTypes.string,
-        labelClassName: React.PropTypes.string,
-        placeholderClassName: React.PropTypes.string,
+        onValueChanged: PropTypes.func,
+        initialValue: PropTypes.string,
+        label: PropTypes.string,
+        placeholder: PropTypes.string,
+        className: PropTypes.string,
+        labelClassName: PropTypes.string,
+        placeholderClassName: PropTypes.string,
         // Overrides blurToSubmit if true
-        blurToCancel: React.PropTypes.bool,
+        blurToCancel: PropTypes.bool,
         // Will cause onValueChanged(value, true) to fire on blur
-        blurToSubmit: React.PropTypes.bool,
-        editable: React.PropTypes.bool,
+        blurToSubmit: PropTypes.bool,
+        editable: PropTypes.bool,
     },
 
     Phases: {
@@ -93,8 +89,7 @@ module.exports = React.createClass({
             this.refs.editable_div.setAttribute("class", this.props.className + " " + this.props.placeholderClassName);
             this.placeholder = true;
             this.value = '';
-        }
-        else {
+        } else {
             this.refs.editable_div.textContent = this.value;
             this.refs.editable_div.setAttribute("class", this.props.className);
             this.placeholder = false;
@@ -137,7 +132,7 @@ module.exports = React.createClass({
             this.showPlaceholder(false);
         }
 
-        if (ev.key == "Enter") {
+        if (ev.key === "Enter") {
             ev.stopPropagation();
             ev.preventDefault();
         }
@@ -150,14 +145,13 @@ module.exports = React.createClass({
 
         if (!ev.target.textContent) {
             this.showPlaceholder(true);
-        }
-        else if (!this.placeholder) {
+        } else if (!this.placeholder) {
             this.value = ev.target.textContent;
         }
 
-        if (ev.key == "Enter") {
+        if (ev.key === "Enter") {
             this.onFinish(ev);
-        } else if (ev.key == "Escape") {
+        } else if (ev.key === "Escape") {
             this.cancelEdit();
         }
 
@@ -175,24 +169,24 @@ module.exports = React.createClass({
     onFocus: function(ev) {
         //ev.target.setSelectionRange(0, ev.target.textContent.length);
 
-        var node = ev.target.childNodes[0];
+        const node = ev.target.childNodes[0];
         if (node) {
-            var range = document.createRange();
+            const range = document.createRange();
             range.setStart(node, 0);
             range.setEnd(node, node.length);
 
-            var sel = window.getSelection();
+            const sel = window.getSelection();
             sel.removeAllRanges();
             sel.addRange(range);
         }
     },
 
     onFinish: function(ev, shouldSubmit) {
-        var self = this;
-        var submit = (ev.key === "Enter") || shouldSubmit;
+        const self = this;
+        const submit = (ev.key === "Enter") || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
-        }, function() {
+        }, () => {
             if (this.value !== this.props.initialValue) {
                 self.onValueChanged(submit);
             }
@@ -200,29 +194,38 @@ module.exports = React.createClass({
     },
 
     onBlur: function(ev) {
-        var sel = window.getSelection();
+        const sel = window.getSelection();
         sel.removeAllRanges();
 
-        if (this.props.blurToCancel)
-            {this.cancelEdit();}
-        else
-            {this.onFinish(ev, this.props.blurToSubmit);}
+        if (this.props.blurToCancel) {
+            this.cancelEdit();
+        } else {
+            this.onFinish(ev, this.props.blurToSubmit);
+        }
 
         this.showPlaceholder(!this.value);
     },
 
     render: function() {
-        var editable_el;
+        const {className, editable, initialValue, label, labelClassName} = this.props;
+        let editableEl;
 
-        if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
+        if (!editable || (this.state.phase === this.Phases.Display && (label || labelClassName) && !this.value)) {
             // show the label
-            editable_el = <div className={this.props.className + " " + this.props.labelClassName} onClick={this.onClickDiv}>{ this.props.label || this.props.initialValue }</div>;
+            editableEl = <div className={className + " " + labelClassName} onClick={this.onClickDiv}>
+                { label || initialValue }
+            </div>;
         } else {
             // show the content editable div, but manually manage its contents as react and contentEditable don't play nice together
-            editable_el = <div ref="editable_div" contentEditable="true" className={this.props.className}
-                               onKeyDown={this.onKeyDown} onKeyUp={this.onKeyUp} onFocus={this.onFocus} onBlur={this.onBlur}></div>;
+            editableEl = <div ref="editable_div"
+                              contentEditable={true}
+                              className={className}
+                              onKeyDown={this.onKeyDown}
+                              onKeyUp={this.onKeyUp}
+                              onFocus={this.onFocus}
+                              onBlur={this.onBlur} />;
         }
 
-        return editable_el;
-    }
+        return editableEl;
+    },
 });

src/components/views/elements/EditableTextContainer.js

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 import Promise from 'bluebird';
 
@@ -64,7 +65,7 @@ export default class EditableTextContainer extends React.Component {
                     errorString: error.toString(),
                     busy: false,
                 });
-            }
+            },
         );
     }
 
@@ -96,22 +97,22 @@ export default class EditableTextContainer extends React.Component {
                     errorString: error.toString(),
                     busy: false,
                 });
-            }
+            },
         );
     }
 
     render() {
         if (this.state.busy) {
-            var Loader = sdk.getComponent("elements.Spinner");
+            const Loader = sdk.getComponent("elements.Spinner");
             return (
                 <Loader />
             );
         } else if (this.state.errorString) {
             return (
-                <div className="error">{this.state.errorString}</div>
+                <div className="error">{ this.state.errorString }</div>
             );
         } else {
-            var EditableText = sdk.getComponent('elements.EditableText');
+            const EditableText = sdk.getComponent('elements.EditableText');
             return (
                 <EditableText initialValue={this.state.value}
                     placeholder={this.props.placeholder}
@@ -126,21 +127,21 @@ export default class EditableTextContainer extends React.Component {
 
 EditableTextContainer.propTypes = {
     /* callback to retrieve the initial value. */
-    getInitialValue: React.PropTypes.func,
+    getInitialValue: PropTypes.func,
 
     /* initial value; used if getInitialValue is not given */
-    initialValue: React.PropTypes.string,
+    initialValue: PropTypes.string,
 
     /* placeholder text to use when the value is empty (and not being
      * edited) */
-    placeholder: React.PropTypes.string,
+    placeholder: PropTypes.string,
 
     /* callback to update the value. Called with a single argument: the new
      * value. */
-    onSubmit: React.PropTypes.func,
+    onSubmit: PropTypes.func,
 
     /* should the input submit when focus is lost? */
-    blurToSubmit: React.PropTypes.bool,
+    blurToSubmit: PropTypes.bool,
 };
 
 

src/components/views/elements/EmojiText.js

@@ -16,6 +16,7 @@
  */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
@@ -32,8 +33,8 @@ export default function EmojiText(props) {
 }
 
 EmojiText.propTypes = {
-    element: React.PropTypes.string,
-    children: React.PropTypes.string.isRequired,
+    element: PropTypes.string,
+    children: PropTypes.string.isRequired,
 };
 
 EmojiText.defaultProps = {

src/components/views/elements/Flair.js

@@ -0,0 +1,142 @@
+/*
+ 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';
+import {MatrixClient} from 'matrix-js-sdk';
+import FlairStore from '../../../stores/FlairStore';
+import dis from '../../../dispatcher';
+
+
+class FlairAvatar extends React.Component {
+    constructor() {
+        super();
+        this.onClick = this.onClick.bind(this);
+    }
+
+    onClick(ev) {
+        ev.preventDefault();
+        // Don't trigger onClick of parent element
+        ev.stopPropagation();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupProfile.groupId,
+        });
+    }
+
+    render() {
+        const httpUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupProfile.avatarUrl, 16, 16, 'scale', false);
+        const tooltip = this.props.groupProfile.name ?
+            `${this.props.groupProfile.name} (${this.props.groupProfile.groupId})`:
+            this.props.groupProfile.groupId;
+        return <img
+            src={httpUrl}
+            width="16"
+            height="16"
+            onClick={this.onClick}
+            title={tooltip} />;
+    }
+}
+
+FlairAvatar.propTypes = {
+    groupProfile: PropTypes.shape({
+        groupId: PropTypes.string.isRequired,
+        name: PropTypes.string,
+        avatarUrl: PropTypes.string.isRequired,
+    }),
+};
+
+FlairAvatar.contextTypes = {
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
+export default class Flair extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            profiles: [],
+        };
+    }
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    }
+
+    componentWillMount() {
+        this._unmounted = false;
+        this._generateAvatars(this.props.groups);
+    }
+
+    componentWillReceiveProps(newProps) {
+        this._generateAvatars(newProps.groups);
+    }
+
+    async _getGroupProfiles(groups) {
+        const profiles = [];
+        for (const groupId of groups) {
+            let groupProfile = null;
+            try {
+                groupProfile = await FlairStore.getGroupProfileCached(this.context.matrixClient, groupId);
+            } catch (err) {
+                console.error('Could not get profile for group', groupId, err);
+            }
+            profiles.push(groupProfile);
+        }
+        return profiles.filter((p) => p !== null);
+    }
+
+    async _generateAvatars(groups) {
+        if (!groups || groups.length === 0) {
+            return;
+        }
+        const profiles = await this._getGroupProfiles(groups);
+        if (!this.unmounted) {
+            this.setState({
+                profiles: profiles.filter((profile) => {
+                    return profile ? profile.avatarUrl : false;
+                }),
+            });
+        }
+    }
+
+    render() {
+        if (this.state.profiles.length === 0) {
+            return <div />;
+        }
+        const avatars = this.state.profiles.map((profile, index) => {
+            return <FlairAvatar key={index} groupProfile={profile} />;
+        });
+        return (
+            <span className="mx_Flair">
+                { avatars }
+            </span>
+        );
+    }
+}
+
+Flair.propTypes = {
+    groups: PropTypes.arrayOf(PropTypes.string),
+};
+
+// TODO: We've decided that all components should follow this pattern, which means removing withMatrixClient and using
+// this.context.matrixClient everywhere instead of this.props.matrixClient.
+// See https://github.com/vector-im/riot-web/issues/4951.
+Flair.contextTypes = {
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+};

src/components/views/elements/GeminiScrollbarWrapper.js

@@ -0,0 +1,35 @@
+/*
+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 GeminiScrollbar from 'react-gemini-scrollbar';
+
+function GeminiScrollbarWrapper(props) {
+    const {wrappedRef, ...wrappedProps} = props;
+
+    // Enable forceGemini so that gemini is always enabled. This is
+    // to avoid future issues where a feature is implemented without
+    // doing QA on every OS/browser combination.
+    //
+    // By default GeminiScrollbar allows native scrollbars to be used
+    // on macOS. Use forceGemini to enable Gemini's non-native
+    // scrollbars on all OSs.
+    return <GeminiScrollbar ref={wrappedRef} forceGemini={true} {...wrappedProps}>
+        { props.children }
+    </GeminiScrollbar>;
+}
+export default GeminiScrollbarWrapper;
+

src/components/views/elements/GroupsButton.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const GroupsButton = function(props) {
+    const ActionButton = sdk.getComponent('elements.ActionButton');
+    return (
+        <ActionButton action="view_my_groups"
+            label={_t("Communities")}
+            iconPath="img/icons-groups.svg"
+            size={props.size}
+            tooltip={props.tooltip}
+        />
+    );
+};
+
+GroupsButton.propTypes = {
+    size: PropTypes.string,
+    tooltip: PropTypes.bool,
+};
+
+export default GroupsButton;

src/components/views/elements/HomeButton.js

@@ -23,7 +23,7 @@ const HomeButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_home_page"
-            label={ _t("Home") }
+            label={_t("Home")}
             iconPath="img/icons-home.svg"
             size={props.size}
             tooltip={props.tooltip}

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('../../../MatrixClientPeg');
+
+import {formatDate} from '../../../DateUtils';
+var filesize = require('filesize');
+var AccessibleButton = require('../../../components/views/elements/AccessibleButton');
+const Modal = require('../../../Modal');
+const sdk = require('../../../index');
+import { _t } from '../../../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/LanguageDropdown.js

@@ -16,10 +16,11 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
-import UserSettingsStore from '../../../UserSettingsStore';
 import * as languageHandler from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
 
 function languageMatchesSearchQuery(query, language) {
     if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
@@ -35,14 +36,14 @@ export default class LanguageDropdown extends React.Component {
         this.state = {
             searchQuery: '',
             langs: null,
-        }
+        };
     }
 
     componentWillMount() {
         languageHandler.getAllLanguagesFromJson().then((langs) => {
-            langs.sort(function(a, b){
-                if(a.label < b.label) return -1;
-                if(a.label > b.label) return 1;
+            langs.sort(function(a, b) {
+                if (a.label < b.label) return -1;
+                if (a.label > b.label) return 1;
                 return 0;
             });
             this.setState({langs});
@@ -54,10 +55,10 @@ export default class LanguageDropdown extends React.Component {
             // If no value is given, we start with the first
             // country selected, but our parent component
             // doesn't know this, therefore we do this.
-            const _localSettings = UserSettingsStore.getLocalSettings();
-            if (_localSettings.hasOwnProperty('language')) {
-              this.props.onOptionChange(_localSettings.language);
-            }else {
+            const language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
+            if (language) {
+              this.props.onOptionChange(language);
+            } else {
               const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
               this.props.onOptionChange(language);
             }
@@ -89,18 +90,18 @@ export default class LanguageDropdown extends React.Component {
 
         const options = displayedLanguages.map((language) => {
             return <div key={language.value}>
-                {language.label}
+                { language.label }
             </div>;
         });
 
         // default value here too, otherwise we need to handle null / undefined
         // values between mounting and the initial value propgating
+        let language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
         let value = null;
-        const _localSettings = UserSettingsStore.getLocalSettings();
-        if (_localSettings.hasOwnProperty('language')) {
-          value = this.props.value || _localSettings.language;
+        if (language) {
+          value = this.props.value || language;
         } else {
-          const language = navigator.language || navigator.userLanguage;
+          language = navigator.language || navigator.userLanguage;
           value = this.props.value || language;
         }
 
@@ -108,13 +109,13 @@ export default class LanguageDropdown extends React.Component {
             onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
             searchEnabled={true} value={value}
         >
-            {options}
-        </Dropdown>
+            { options }
+        </Dropdown>;
     }
 }
 
 LanguageDropdown.propTypes = {
-    className: React.PropTypes.string,
-    onOptionChange: React.PropTypes.func.isRequired,
-    value: React.PropTypes.string,
+    className: PropTypes.string,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
 };

src/components/views/elements/ManageIntegsButton.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
+import classNames from 'classnames';
 import SdkConfig from '../../../SdkConfig';
 import ScalarAuthClient from '../../../ScalarAuthClient';
 import ScalarMessaging from '../../../ScalarMessaging';
@@ -31,11 +32,9 @@ export default class ManageIntegsButton extends React.Component {
 
         this.state = {
             scalarError: null,
-            showIntegrationsError: false,
         };
 
         this.onManageIntegrations = this.onManageIntegrations.bind(this);
-        this.onShowIntegrationsError = this.onShowIntegrationsError.bind(this);
     }
 
     componentWillMount() {
@@ -48,7 +47,7 @@ export default class ManageIntegsButton extends React.Component {
                 this.forceUpdate();
             }, (err) => {
                 this.setState({ scalarError: err});
-                console.error(err);
+                console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
             });
         }
     }
@@ -59,53 +58,44 @@ export default class ManageIntegsButton extends React.Component {
 
     onManageIntegrations(ev) {
         ev.preventDefault();
+        if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
+            return;
+        }
         const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
         Modal.createDialog(IntegrationsManager, {
             src: (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
-                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.roomId) :
+                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room) :
                 null,
         }, "mx_IntegrationsManager");
     }
 
-    onShowIntegrationsError(ev) {
-        ev.preventDefault();
-        this.setState({
-            showIntegrationsError: !this.state.showIntegrationsError,
-        });
-    }
-
     render() {
         let integrationsButton = <div />;
-        let integrationsError;
+        let integrationsWarningTriangle = <div />;
+        let integrationsErrorPopup = <div />;
         if (this.scalarClient !== null) {
-            if (this.state.showIntegrationsError && this.state.scalarError) {
-                integrationsError = (
+            const integrationsButtonClasses = classNames({
+                mx_RoomHeader_button: true,
+                mx_RoomSettings_integrationsButton_error: !!this.state.scalarError,
+            });
+
+            if (this.state.scalarError && !this.scalarClient.hasCredentials()) {
+                integrationsWarningTriangle = <img src="img/warning.svg" title={_t('Integrations Error')} width="17" />;
+                // Popup shown when hovering over integrationsButton_error (via CSS)
+                integrationsErrorPopup = (
                     <span className="mx_RoomSettings_integrationsButton_errorPopup">
                         { _t('Could not connect to the integration server') }
                     </span>
                 );
             }
 
-            if (this.scalarClient.hasCredentials()) {
-                integrationsButton = (
-                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
-                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
-                    </AccessibleButton>
-                );
-            } else if (this.state.scalarError) {
-                integrationsButton = (
-                    <div className="mx_RoomSettings_integrationsButton_error" onClick={ this.onShowIntegrationsError }>
-                        <img src="img/warning.svg" title={_t('Integrations Error')} width="17"/>
-                        { integrationsError }
-                    </div>
-                );
-            } else {
-                integrationsButton = (
-                    <AccessibleButton className="mx_RoomHeader_button" onClick={this.onManageIntegrations} title={ _t('Manage Integrations') }>
-                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
-                    </AccessibleButton>
-                );
-            }
+            integrationsButton = (
+                <AccessibleButton className={integrationsButtonClasses} onClick={this.onManageIntegrations} title={_t('Manage Integrations')}>
+                    <TintableSvg src="img/icons-apps.svg" width="35" height="35" />
+                    { integrationsWarningTriangle }
+                    { integrationsErrorPopup }
+                </AccessibleButton>
+            );
         }
 
         return integrationsButton;
@@ -113,5 +103,5 @@ export default class ManageIntegsButton extends React.Component {
 }
 
 ManageIntegsButton.propTypes = {
-    roomId: PropTypes.string.isRequired,
+    room: PropTypes.object.isRequired,
 };

src/components/views/elements/MemberEventListSummary.js

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
 import { _t } from '../../../languageHandler';
@@ -23,22 +24,24 @@ module.exports = React.createClass({
 
     propTypes: {
         // An array of member events to summarise
-        events: React.PropTypes.array.isRequired,
+        events: PropTypes.array.isRequired,
         // An array of EventTiles to render when expanded
-        children: React.PropTypes.array.isRequired,
+        children: PropTypes.array.isRequired,
         // The maximum number of names to show in either each summary e.g. 2 would result "A, B and 234 others left"
-        summaryLength: React.PropTypes.number,
+        summaryLength: PropTypes.number,
         // The maximum number of avatars to display in the summary
-        avatarsMaxLength: React.PropTypes.number,
+        avatarsMaxLength: PropTypes.number,
         // The minimum number of events needed to trigger summarisation
-        threshold: React.PropTypes.number,
+        threshold: PropTypes.number,
         // Called when the MELS expansion is toggled
-        onToggle: React.PropTypes.func,
+        onToggle: PropTypes.func,
+        // Whether or not to begin with state.expanded=true
+        startExpanded: PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
-            expanded: false,
+            expanded: Boolean(this.props.startExpanded),
         };
     },
 
@@ -84,7 +87,6 @@ module.exports = React.createClass({
         const summaries = orderedTransitionSequences.map((transitions) => {
             const userNames = eventAggregates[transitions];
             const nameList = this._renderNameList(userNames);
-            const plural = userNames.length > 1;
 
             const splitTransitions = transitions.split(',');
 
@@ -94,18 +96,18 @@ module.exports = React.createClass({
             // Transform into consecutive repetitions of the same transition (like 5
             // consecutive 'joined_and_left's)
             const coalescedTransitions = this._coalesceRepeatedTransitions(
-                canonicalTransitions
+                canonicalTransitions,
             );
 
             const descs = coalescedTransitions.map((t) => {
                 return this._getDescriptionForTransition(
-                    t.transitionType, plural, t.repeats
+                    t.transitionType, userNames.length, t.repeats,
                 );
             });
 
             const desc = this._renderCommaSeparatedList(descs);
 
-            return nameList + " " + desc;
+            return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
         });
 
         if (!summaries) {
@@ -117,7 +119,7 @@ module.exports = React.createClass({
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
                 <EmojiText>
-                    {summaries.join(", ")}
+                    { summaries.join(", ") }
                 </EmojiText>
             </span>
         );
@@ -206,148 +208,75 @@ module.exports = React.createClass({
      * For a certain transition, t, describe what happened to the users that
      * underwent the transition.
      * @param {string} t the transition type.
-     * @param {boolean} plural whether there were multiple users undergoing the same
-     * transition.
+     * @param {integer} userCount number of usernames
      * @param {number} repeats the number of times the transition was repeated in a row.
      * @returns {string} the written Human Readable equivalent of the transition.
      */
-    _getDescriptionForTransition(t, plural, repeats) {
+    _getDescriptionForTransition(t, userCount, repeats) {
         // The empty interpolations 'severalUsers' and 'oneUser'
         // are there only to show translators to non-English languages
         // that the verb is conjugated to plural or singular Subject.
         let res = null;
-        switch(t) {
+        switch (t) {
             case "joined":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sjoined %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined", { severalUsers: "" })
-                        : _t("%(oneUser)sjoined", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sjoined %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sjoined %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "left":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sleft %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft", { severalUsers: "" })
-                        : _t("%(oneUser)sleft", { oneUser: "" });
-                }
-               break;
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sleft %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sleft %(count)s times", { oneUser: "", count: repeats });
+                break;
             case "joined_and_left":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined and left %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sjoined and left %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sjoined and left", { severalUsers: "" })
-                        : _t("%(oneUser)sjoined and left", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sjoined and left %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sjoined and left %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "left_and_joined":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft and rejoined %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)sleft and rejoined %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)sleft and rejoined", { severalUsers: "" })
-                        : _t("%(oneUser)sleft and rejoined", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sleft and rejoined %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sleft and rejoined %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invite_reject":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)srejected their invitations %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)srejected their invitation %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)srejected their invitations", { severalUsers: "" })
-                        : _t("%(oneUser)srejected their invitation", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)srejected their invitations %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)srejected their invitation %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invite_withdrawal":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)shad their invitations withdrawn %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)shad their invitation withdrawn %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)shad their invitations withdrawn", { severalUsers: "" })
-                        : _t("%(oneUser)shad their invitation withdrawn", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)shad their invitations withdrawn %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)shad their invitation withdrawn %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "invited":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were invited %(repeats)s times", { repeats: repeats })
-                        : _t("was invited %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were invited")
-                        : _t("was invited");
-                }
+                res = (userCount > 1)
+                    ? _t("were invited %(count)s times", { count: repeats })
+                    : _t("was invited %(count)s times", { count: repeats });
                 break;
             case "banned":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were banned %(repeats)s times", { repeats: repeats })
-                        : _t("was banned %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were banned")
-                        : _t("was banned");
-                }
+                res = (userCount > 1)
+                    ? _t("were banned %(count)s times", { count: repeats })
+                    : _t("was banned %(count)s times", { count: repeats });
                 break;
             case "unbanned":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were unbanned %(repeats)s times", { repeats: repeats })
-                        : _t("was unbanned %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were unbanned")
-                        : _t("was unbanned");
-                }
+                res = (userCount > 1)
+                    ? _t("were unbanned %(count)s times", { count: repeats })
+                    : _t("was unbanned %(count)s times", { count: repeats });
                 break;
             case "kicked":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("were kicked %(repeats)s times", { repeats: repeats })
-                        : _t("was kicked %(repeats)s times", { repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("were kicked")
-                        : _t("was kicked");
-                }
+                res = (userCount > 1)
+                    ? _t("were kicked %(count)s times", { count: repeats })
+                    : _t("was kicked %(count)s times", { count: repeats });
                 break;
             case "changed_name":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their name %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)schanged their name %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their name", { severalUsers: "" })
-                        : _t("%(oneUser)schanged their name", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)schanged their name %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)schanged their name %(count)s times", { oneUser: "", count: repeats });
                 break;
             case "changed_avatar":
-                if (repeats > 1) {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their avatar %(repeats)s times", { severalUsers: "", repeats: repeats })
-                        : _t("%(oneUser)schanged their avatar %(repeats)s times", { oneUser: "", repeats: repeats });
-                } else {
-                    res = (plural)
-                        ? _t("%(severalUsers)schanged their avatar", { severalUsers: "" })
-                        : _t("%(oneUser)schanged their avatar", { oneUser: "" });
-                }
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)schanged their avatar %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)schanged their avatar %(count)s times", { oneUser: "", count: repeats });
                 break;
         }
 
@@ -368,17 +297,15 @@ module.exports = React.createClass({
      */
     _renderCommaSeparatedList(items, itemLimit) {
         const remaining = itemLimit === undefined ? 0 : Math.max(
-            items.length - itemLimit, 0
+            items.length - itemLimit, 0,
         );
         if (items.length === 0) {
             return "";
         } else if (items.length === 1) {
             return items[0];
-        } else if (remaining) {
+        } else if (remaining > 0) {
             items = items.slice(0, itemLimit);
-            return (remaining > 1) 
-                ? _t("%(items)s and %(remaining)s others", { items: items.join(', '), remaining: remaining } )
-                : _t("%(items)s and one other", { items: items.join(', ') });
+            return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
         } else {
             const lastItem = items.pop();
             return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
@@ -392,8 +319,8 @@ module.exports = React.createClass({
             );
         });
         return (
-            <span className="mx_MemberEventListSummary_avatars" onClick={ this._toggleSummary }>
-                {avatars}
+            <span className="mx_MemberEventListSummary_avatars" onClick={this._toggleSummary}>
+                { avatars }
             </span>
         );
     },
@@ -417,19 +344,15 @@ module.exports = React.createClass({
             case 'join':
                 if (e.mxEvent.getPrevContent().membership === 'join') {
                     if (e.mxEvent.getContent().displayname !==
-                        e.mxEvent.getPrevContent().displayname)
-                    {
+                        e.mxEvent.getPrevContent().displayname) {
                         return 'changed_name';
-                    }
-                    else if (e.mxEvent.getContent().avatar_url !==
-                        e.mxEvent.getPrevContent().avatar_url)
-                    {
+                    } else if (e.mxEvent.getContent().avatar_url !==
+                        e.mxEvent.getPrevContent().avatar_url) {
                         return 'changed_avatar';
                     }
                     // console.log("MELS ignoring duplicate membership join event");
                     return null;
-                }
-                else {
+                } else {
                     return 'joined';
                 }
             case 'leave':
@@ -481,7 +404,7 @@ module.exports = React.createClass({
                     firstEvent.index < aggregateIndices[seq]) {
                         aggregateIndices[seq] = firstEvent.index;
                 }
-            }
+            },
         );
 
         return {
@@ -492,7 +415,7 @@ module.exports = React.createClass({
 
     render: function() {
         const eventsToRender = this.props.events;
-        const eventIds = eventsToRender.map(e => e.getId()).join(',');
+        const eventIds = eventsToRender.map((e) => e.getId()).join(',');
         const fewEvents = eventsToRender.length < this.props.threshold;
         const expanded = this.state.expanded || fewEvents;
 
@@ -504,7 +427,7 @@ module.exports = React.createClass({
         if (fewEvents) {
             return (
                 <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
-                    {expandedEvents}
+                    { expandedEvents }
                 </div>
             );
         }
@@ -540,7 +463,7 @@ module.exports = React.createClass({
 
         // Sort types by order of lowest event index within sequence
         const orderedTransitionSequences = Object.keys(aggregate.names).sort(
-            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2]
+            (seq1, seq2) => aggregate.indices[seq1] > aggregate.indices[seq2],
         );
 
         let summaryContainer = null;
@@ -548,24 +471,24 @@ module.exports = React.createClass({
             summaryContainer = (
                 <div className="mx_EventTile_line">
                     <div className="mx_EventTile_info">
-                        {this._renderAvatars(avatarMembers)}
-                        {this._renderSummary(aggregate.names, orderedTransitionSequences)}
+                        { this._renderAvatars(avatarMembers) }
+                        { this._renderSummary(aggregate.names, orderedTransitionSequences) }
                     </div>
                 </div>
             );
         }
         const toggleButton = (
             <div className={"mx_MemberEventListSummary_toggle"} onClick={this._toggleSummary}>
-                {expanded ? 'collapse' : 'expand'}
+                { expanded ? _t('collapse') : _t('expand') }
             </div>
         );
 
         return (
             <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
-                {toggleButton}
-                {summaryContainer}
-                {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}
-                {expandedEvents}
+                { toggleButton }
+                { summaryContainer }
+                { expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null }
+                { expandedEvents }
             </div>
         );
     },

src/components/views/elements/MessageSpinner.js

@@ -26,8 +26,8 @@ module.exports = React.createClass({
         const msg = this.props.msg || "Loading...";
         return (
             <div className="mx_Spinner">
-                <div className="mx_Spinner_Msg">{msg}</div>&nbsp;
-                <img src="img/spinner.gif" width={w} height={h} className={imgClass}/>
+                <div className="mx_Spinner_Msg">{ msg }</div>&nbsp;
+                <img src="img/spinner.gif" width={w} height={h} className={imgClass} />
             </div>
         );
     },

src/components/views/elements/PersistedElement.js

@@ -0,0 +1,172 @@
+/*
+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 ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+
+import ResizeObserver from 'resize-observer-polyfill';
+
+import dis from '../../../dispatcher';
+
+// Shamelessly ripped off Modal.js.  There's probably a better way
+// of doing reusable widgets like dialog boxes & menus where we go and
+// pass in a custom control as the actual body.
+
+function getContainer(containerId) {
+    return document.getElementById(containerId);
+}
+
+function getOrCreateContainer(containerId) {
+    let container = getContainer(containerId);
+
+    if (!container) {
+        container = document.createElement("div");
+        container.id = containerId;
+        document.body.appendChild(container);
+    }
+
+    return container;
+}
+
+/*
+ * Class of component that renders its children in a separate ReactDOM virtual tree
+ * in a container element appended to document.body.
+ *
+ * This prevents the children from being unmounted when the parent of PersistedElement
+ * unmounts, allowing them to persist.
+ *
+ * When PE is unmounted, it hides the children using CSS. When mounted or updated, the
+ * children are made visible and are positioned into a div that is given the same
+ * bounding rect as the parent of PE.
+ */
+export default class PersistedElement extends React.Component {
+
+    static propTypes = {
+        // Unique identifier for this PersistedElement instance
+        // Any PersistedElements with the same persistKey will use
+        // the same DOM container.
+        persistKey: PropTypes.string.isRequired,
+    };
+
+    constructor() {
+        super();
+        this.collectChildContainer = this.collectChildContainer.bind(this);
+        this.collectChild = this.collectChild.bind(this);
+        this._repositionChild = this._repositionChild.bind(this);
+        this._onAction = this._onAction.bind(this);
+
+        this.resizeObserver = new ResizeObserver(this._repositionChild);
+        // Annoyingly, a resize observer is insufficient, since we also care
+        // about when the element moves on the screen without changing its
+        // dimensions. Doesn't look like there's a ResizeObserver equivalent
+        // for this, so we bodge it by listening for document resize and
+        // the timeline_resize action.
+        window.addEventListener('resize', this._repositionChild);
+        this._dispatcherRef = dis.register(this._onAction);
+    }
+
+    /**
+     * Removes the DOM elements created when a PersistedElement with the given
+     * persistKey was mounted. The DOM elements will be re-added if another
+     * PeristedElement is mounted in the future.
+     *
+     * @param {string} persistKey Key used to uniquely identify this PersistedElement
+     */
+    static destroyElement(persistKey) {
+        const container = getContainer('mx_persistedElement_' + persistKey);
+        if (container) {
+            container.remove();
+        }
+    }
+
+    static isMounted(persistKey) {
+        return Boolean(getContainer('mx_persistedElement_' + persistKey));
+    }
+
+    collectChildContainer(ref) {
+        if (this.childContainer) {
+            this.resizeObserver.unobserve(this.childContainer);
+        }
+        this.childContainer = ref;
+        if (ref) {
+            this.resizeObserver.observe(ref);
+        }
+    }
+
+    collectChild(ref) {
+        this.child = ref;
+        this.updateChild();
+    }
+
+    componentDidMount() {
+        this.updateChild();
+    }
+
+    componentDidUpdate() {
+        this.updateChild();
+    }
+
+    componentWillUnmount() {
+        this.updateChildVisibility(this.child, false);
+        this.resizeObserver.disconnect();
+        window.removeEventListener('resize', this._repositionChild);
+        dis.unregister(this._dispatcherRef);
+    }
+
+    _onAction(payload) {
+        if (payload.action === 'timeline_resize') {
+            this._repositionChild();
+        }
+    }
+
+    _repositionChild() {
+        this.updateChildPosition(this.child, this.childContainer);
+    }
+
+    updateChild() {
+        this.updateChildPosition(this.child, this.childContainer);
+        this.updateChildVisibility(this.child, true);
+    }
+
+    updateChildVisibility(child, visible) {
+        if (!child) return;
+        child.style.display = visible ? 'block' : 'none';
+    }
+
+    updateChildPosition(child, parent) {
+        if (!child || !parent) return;
+
+        const parentRect = parent.getBoundingClientRect();
+        Object.assign(child.style, {
+            position: 'absolute',
+            top: parentRect.top + 'px',
+            left: parentRect.left + 'px',
+            width: parentRect.width + 'px',
+            height: parentRect.height + 'px',
+        });
+    }
+
+    render() {
+        const content = <div ref={this.collectChild} style={this.props.style}>
+            {this.props.children}
+        </div>;
+
+        ReactDOM.render(content, getOrCreateContainer('mx_persistedElement_'+this.props.persistKey));
+
+        return <div ref={this.collectChildContainer}></div>;
+    }
+}

src/components/views/elements/PersistentApp.js

@@ -0,0 +1,96 @@
+/*
+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 RoomViewStore from '../../../stores/RoomViewStore';
+import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
+import WidgetUtils from '../../../utils/WidgetUtils';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+module.exports = React.createClass({
+    displayName: 'PersistentApp',
+
+    getInitialState: function() {
+        return {
+            roomId: RoomViewStore.getRoomId(),
+            persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+        };
+    },
+
+    componentWillMount: function() {
+        this._roomStoreToken = RoomViewStore.addListener(this._onRoomViewStoreUpdate);
+        ActiveWidgetStore.on('update', this._onActiveWidgetStoreUpdate);
+    },
+
+    componentWillUnmount: function() {
+        if (this._roomStoreToken) {
+            this._roomStoreToken.remove();
+        }
+        ActiveWidgetStore.removeListener('update', this._onActiveWidgetStoreUpdate);
+    },
+
+    _onRoomViewStoreUpdate: function(payload) {
+        if (RoomViewStore.getRoomId() === this.state.roomId) return;
+        this.setState({
+            roomId: RoomViewStore.getRoomId(),
+        });
+    },
+
+    _onActiveWidgetStoreUpdate: function() {
+        this.setState({
+            persistentWidgetId: ActiveWidgetStore.getPersistentWidgetId(),
+        });
+    },
+
+    render: function() {
+        if (this.state.persistentWidgetId) {
+            const persistentWidgetInRoomId = ActiveWidgetStore.getRoomId(this.state.persistentWidgetId);
+            if (this.state.roomId !== persistentWidgetInRoomId) {
+                const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
+                // get the widget data
+                const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
+                    return ev.getStateKey() === ActiveWidgetStore.getPersistentWidgetId();
+                });
+                const app = WidgetUtils.makeAppConfig(
+                    appEvent.getStateKey(), appEvent.getContent(), appEvent.sender, persistentWidgetInRoomId,
+                );
+                const capWhitelist = WidgetUtils.getCapWhitelistForAppTypeInRoomId(app.type, persistentWidgetInRoomId);
+                const AppTile = sdk.getComponent('elements.AppTile');
+                return <AppTile
+                    key={app.id}
+                    id={app.id}
+                    url={app.url}
+                    name={app.name}
+                    type={app.type}
+                    fullWidth={true}
+                    room={persistentWidgetInRoom}
+                    userId={MatrixClientPeg.get().credentials.userId}
+                    show={true}
+                    creatorUserId={app.creatorUserId}
+                    widgetPageTitle={(app.data && app.data.title) ? app.data.title : ''}
+                    waitForIframeLoad={app.waitForIframeLoad}
+                    whitelistCapabilities={capWhitelist}
+                    showDelete={false}
+                    showMinimise={false}
+                    miniMode={true}
+                />;
+            }
+        }
+        return null;
+    },
+});
+

src/components/views/elements/Pill.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,17 +18,18 @@ import React from 'react';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import classNames from 'classnames';
-import { Room, RoomMember } from 'matrix-js-sdk';
+import { Room, RoomMember, MatrixClient } from 'matrix-js-sdk';
 import PropTypes from 'prop-types';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
 import { getDisplayAliasForRoom } from '../../../Rooms';
+import FlairStore from "../../../stores/FlairStore";
 
 const REGEX_MATRIXTO = new RegExp(MATRIXTO_URL_PATTERN);
 
 // For URLs of matrix.to links in the timeline which have been reformatted by
 // HttpUtils transformTags to relative links. This excludes event URLs (with `[^\/]*`)
-const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room)\/(([\#\!\@\+])[^\/]*)$/;
+const REGEX_LOCAL_MATRIXTO = /^#\/(?:user|room|group)\/(([#!@+])[^\/]*)$/;
 
 const Pill = React.createClass({
     statics: {
@@ -37,11 +39,21 @@ const Pill = React.createClass({
         isMessagePillUrl: (url) => {
             return !!REGEX_LOCAL_MATRIXTO.exec(url);
         },
+        roomNotifPos: (text) => {
+            return text.indexOf("@room");
+        },
+        roomNotifLen: () => {
+            return "@room".length;
+        },
         TYPE_USER_MENTION: 'TYPE_USER_MENTION',
         TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
+        TYPE_GROUP_MENTION: 'TYPE_GROUP_MENTION',
+        TYPE_AT_ROOM_MENTION: 'TYPE_AT_ROOM_MENTION', // '@room' mention
     },
 
     props: {
+        // The Type of this Pill. If url is given, this is auto-detected.
+        type: PropTypes.string,
         // The URL to pillify (no validation is done, see isPillUrl and isMessagePillUrl)
         url: PropTypes.string,
         // Whether the pill is in a message
@@ -50,6 +62,19 @@ const Pill = React.createClass({
         room: PropTypes.instanceOf(Room),
         // Whether to include an avatar in the pill
         shouldShowPillAvatar: PropTypes.bool,
+        // Whether to render this pill as if it were highlit by a selection
+        isSelected: PropTypes.bool,
+    },
+
+
+    childContextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getChildContext() {
+        return {
+            matrixClient: this._matrixClient,
+        };
     },
 
     getInitialState() {
@@ -61,33 +86,47 @@ const Pill = React.createClass({
 
             // The member related to the user pill
             member: null,
+            // The group related to the group pill
+            group: null,
             // The room related to the room pill
             room: null,
         };
     },
 
-    componentWillReceiveProps(nextProps) {
+    async componentWillReceiveProps(nextProps) {
         let regex = REGEX_MATRIXTO;
         if (nextProps.inMessage) {
             regex = REGEX_LOCAL_MATRIXTO;
         }
 
-        // Default to the empty array if no match for simplicity
-        // resource and prefix will be undefined instead of throwing
-        const matrixToMatch = regex.exec(nextProps.url) || [];
+        let matrixToMatch;
+        let resourceId;
+        let prefix;
 
-        const resourceId = matrixToMatch[1]; // The room/user ID
-        const prefix = matrixToMatch[2]; // The first character of prefix
+        if (nextProps.url) {
+            // Default to the empty array if no match for simplicity
+            // resource and prefix will be undefined instead of throwing
+            matrixToMatch = regex.exec(nextProps.url) || [];
 
-        const pillType = {
+            resourceId = matrixToMatch[1]; // The room/user ID
+            prefix = matrixToMatch[2]; // The first character of prefix
+        }
+
+        const pillType = this.props.type || {
             '@': Pill.TYPE_USER_MENTION,
             '#': Pill.TYPE_ROOM_MENTION,
             '!': Pill.TYPE_ROOM_MENTION,
+            '+': Pill.TYPE_GROUP_MENTION,
         }[prefix];
 
         let member;
+        let group;
         let room;
         switch (pillType) {
+            case Pill.TYPE_AT_ROOM_MENTION: {
+                room = nextProps.room;
+            }
+                break;
             case Pill.TYPE_USER_MENTION: {
                 const localMember = nextProps.room.getMember(resourceId);
                 member = localMember;
@@ -110,12 +149,26 @@ const Pill = React.createClass({
                 }
             }
                 break;
+            case Pill.TYPE_GROUP_MENTION: {
+                const cli = MatrixClientPeg.get();
+
+                try {
+                    group = await FlairStore.getGroupProfileCached(cli, resourceId);
+                } catch (e) { // if FlairStore failed, fall back to just groupId
+                    group = {
+                        groupId: resourceId,
+                        avatarUrl: null,
+                        name: null,
+                    };
+                }
+            }
         }
-        this.setState({resourceId, pillType, member, room});
+        this.setState({resourceId, pillType, member, group, room});
     },
 
     componentWillMount() {
         this._unmounted = false;
+        this._matrixClient = MatrixClientPeg.get();
         this.componentWillReceiveProps(this.props);
     },
 
@@ -134,6 +187,9 @@ const Pill = React.createClass({
                 getContent: () => {
                     return {avatar_url: resp.avatar_url};
                 },
+                getDirectionalContent: function() {
+                    return this.getContent();
+                },
             };
             this.setState({member});
         }).catch((err) => {
@@ -148,6 +204,7 @@ const Pill = React.createClass({
         });
     },
     render: function() {
+        const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar');
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
 
@@ -160,14 +217,26 @@ const Pill = React.createClass({
         let href = this.props.url;
         let onClick;
         switch (this.state.pillType) {
+            case Pill.TYPE_AT_ROOM_MENTION: {
+                const room = this.props.room;
+                if (room) {
+                    linkText = "@room";
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                    }
+                    pillClass = 'mx_AtRoomPill';
+                }
+            }
+                break;
             case Pill.TYPE_USER_MENTION: {
                     // If this user is not a member of this room, default to the empty member
                     const member = this.state.member;
                     if (member) {
                         userId = member.userId;
+                        member.rawDisplayName = member.rawDisplayName || '';
                         linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
                         if (this.props.shouldShowPillAvatar) {
-                            avatar = <MemberAvatar member={member} width={16} height={16}/>;
+                            avatar = <MemberAvatar member={member} width={16} height={16} />;
                         }
                         pillClass = 'mx_UserPill';
                         href = null;
@@ -180,27 +249,42 @@ const Pill = React.createClass({
                 if (room) {
                     linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
                     if (this.props.shouldShowPillAvatar) {
-                        avatar = <RoomAvatar room={room} width={16} height={16}/>;
+                        avatar = <RoomAvatar room={room} width={16} height={16} />;
                     }
                     pillClass = 'mx_RoomPill';
                 }
             }
                 break;
+            case Pill.TYPE_GROUP_MENTION: {
+                if (this.state.group) {
+                    const {avatarUrl, groupId, name} = this.state.group;
+                    const cli = MatrixClientPeg.get();
+
+                    linkText = groupId;
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <BaseAvatar name={name || groupId} width={16} height={16}
+                                             url={avatarUrl ? cli.mxcUrlToHttp(avatarUrl, 16, 16) : null} />;
+                    }
+                    pillClass = 'mx_GroupPill';
+                }
+            }
+                break;
         }
 
         const classes = classNames(pillClass, {
             "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+            "mx_UserPill_selected": this.props.isSelected,
         });
 
         if (this.state.pillType) {
             return this.props.inMessage ?
                 <a className={classes} href={href} onClick={onClick} title={resource} data-offset-key={this.props.offsetKey}>
-                    {avatar}
-                    {linkText}
+                    { avatar }
+                    { linkText }
                 </a> :
                 <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
-                    {avatar}
-                    {linkText}
+                    { avatar }
+                    { linkText }
                 </span>;
         } else {
             // Deliberately render nothing if the URL isn't recognised

src/components/views/elements/PowerSelector.js

@@ -17,116 +17,139 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import * as Roles from '../../../Roles';
 import { _t } from '../../../languageHandler';
 
-var LEVEL_ROLE_MAP = {};
-var reverseRoles = {};
-
 module.exports = React.createClass({
     displayName: 'PowerSelector',
 
     propTypes: {
-        value: React.PropTypes.number.isRequired,
+        value: PropTypes.number.isRequired,
+        // The maximum value that can be set with the power selector
+        maxValue: PropTypes.number.isRequired,
+
+        // Default user power level for the room
+        usersDefault: PropTypes.number.isRequired,
 
         // if true, the <select/> should be a 'controlled' form element and updated by React
         // to reflect the current value, rather than left freeform.
         // MemberInfo uses controlled; RoomSettings uses non-controlled.
         //
         // ignored if disabled is truthy. false by default.
-        controlled: React.PropTypes.bool,
+        controlled: PropTypes.bool,
 
         // should the user be able to change the value? false by default.
-        disabled: React.PropTypes.bool,
-        onChange: React.PropTypes.func,
+        disabled: PropTypes.bool,
+        onChange: PropTypes.func,
+
+        // Optional key to pass as the second argument to `onChange`
+        powerLevelKey: PropTypes.string,
     },
 
     getInitialState: function() {
         return {
-            custom: (LEVEL_ROLE_MAP[this.props.value] === undefined),
+            levelRoleMap: {},
+            // List of power levels to show in the drop-down
+            options: [],
         };
     },
-    
+
+    getDefaultProps: function() {
+        return {
+            maxValue: Infinity,
+            usersDefault: 0,
+        };
+    },
+
     componentWillMount: function() {
-    	LEVEL_ROLE_MAP = Roles.levelRoleMap();
-    	Object.keys(LEVEL_ROLE_MAP).forEach(function(key) {
-			reverseRoles[LEVEL_ROLE_MAP[key]] = key;
-		});
+        this._initStateFromProps(this.props);
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        this._initStateFromProps(newProps);
+    },
+
+    _initStateFromProps: function(newProps) {
+        // This needs to be done now because levelRoleMap has translated strings
+        const levelRoleMap = Roles.levelRoleMap(newProps.usersDefault);
+        const options = Object.keys(levelRoleMap).filter((l) => {
+            return l === undefined || l <= newProps.maxValue;
+        });
+
+        this.setState({
+            levelRoleMap,
+            options,
+            custom: levelRoleMap[newProps.value] === undefined,
+        });
     },
 
     onSelectChange: function(event) {
-        this.setState({ custom: event.target.value === "Custom" });
-        if (event.target.value !== "Custom") {
-            this.props.onChange(this.getValue());
+        this.setState({ custom: event.target.value === "SELECT_VALUE_CUSTOM" });
+        if (event.target.value !== "SELECT_VALUE_CUSTOM") {
+            this.props.onChange(event.target.value, this.props.powerLevelKey);
         }
     },
 
     onCustomBlur: function(event) {
-        this.props.onChange(this.getValue());
+        this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
     },
 
     onCustomKeyDown: function(event) {
         if (event.key == "Enter") {
-            this.props.onChange(this.getValue());
+            this.props.onChange(parseInt(this.refs.custom.value), this.props.powerLevelKey);
         }
     },
 
-    getValue: function() {
-        var value;
-        if (this.refs.select) {
-            value = reverseRoles[this.refs.select.value];
-            if (this.refs.custom) {
-                if (value === undefined) value = parseInt( this.refs.custom.value );
-            }
-        }
-        return value;
-    },
-
     render: function() {
-        var customPicker;
+        let customPicker;
         if (this.state.custom) {
-            var input;
             if (this.props.disabled) {
-                input = <span>{ this.props.value }</span>;
+                customPicker = <span>{ _t(
+                    "Custom of %(powerLevel)s",
+                    { powerLevel: this.props.value },
+                ) }</span>;
+            } else {
+                customPicker = <span> = <input
+                    ref="custom"
+                    type="text"
+                    size="3"
+                    defaultValue={this.props.value}
+                    onBlur={this.onCustomBlur}
+                    onKeyDown={this.onCustomKeyDown}
+                />
+                </span>;
             }
-            else {
-                input = <input ref="custom" type="text" size="3" defaultValue={ this.props.value } onBlur={ this.onCustomBlur } onKeyDown={ this.onCustomKeyDown }/>;
-            }
-            customPicker = <span> of { input }</span>;
         }
 
-        var selectValue;
+        let selectValue;
         if (this.state.custom) {
-            selectValue = "Custom";
+            selectValue = "SELECT_VALUE_CUSTOM";
+        } else {
+            selectValue = this.state.levelRoleMap[this.props.value] ?
+                this.props.value : "SELECT_VALUE_CUSTOM";
         }
-        else {
-            selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
-        }
-        var select;
+        let select;
         if (this.props.disabled) {
-            select = <span>{ selectValue }</span>;
-        }
-        else {
-            // Each level must have a definition in LEVEL_ROLE_MAP
-            const levels = [0, 50, 100];
-            let options = levels.map((level) => {
+            select = <span>{ this.state.levelRoleMap[selectValue] }</span>;
+        } else {
+            // Each level must have a definition in this.state.levelRoleMap
+            let options = this.state.options.map((level) => {
                 return {
-                    value: LEVEL_ROLE_MAP[level],
-                    // Give a userDefault (users_default in the power event) of 0 but
-                    // because level !== undefined, this should never be used.
-                    text: Roles.textualPowerLevel(level, 0),
-                }
+                    value: level,
+                    text: Roles.textualPowerLevel(level, this.props.usersDefault),
+                };
             });
-            options.push({ value: "Custom", text: _t("Custom level") });
+            options.push({ value: "SELECT_VALUE_CUSTOM", text: _t("Custom level") });
             options = options.map((op) => {
-                return <option value={op.value} key={op.value}>{op.text}</option>;
+                return <option value={op.value} key={op.value}>{ op.text }</option>;
             });
 
             select =
                 <select ref="select"
-                        value={ this.props.controlled ? selectValue : undefined }
-                        defaultValue={ !this.props.controlled ? selectValue : undefined }
-                        onChange={ this.onSelectChange }>
+                        value={this.props.controlled ? selectValue : undefined}
+                        defaultValue={!this.props.controlled ? selectValue : undefined}
+                        onChange={this.onSelectChange}>
                     { options }
                 </select>;
         }
@@ -137,5 +160,5 @@ module.exports = React.createClass({
                 { customPicker }
             </span>
         );
-    }
+    },
 });

src/components/views/elements/ProgressBar.js

@@ -16,23 +16,24 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
+import PropTypes from 'prop-types';
 
 module.exports = React.createClass({
     displayName: 'ProgressBar',
     propTypes: {
-        value: React.PropTypes.number,
-        max: React.PropTypes.number
+        value: PropTypes.number,
+        max: PropTypes.number,
     },
 
     render: function() {
         // Would use an HTML5 progress tag but if that doesn't animate if you
         // use the HTML attributes rather than styles
-        var progressStyle = {
-            width: ((this.props.value / this.props.max) * 100)+"%"
+        const progressStyle = {
+            width: ((this.props.value / this.props.max) * 100)+"%",
         };
         return (
             <div className="mx_ProgressBar"><div className="mx_ProgressBar_fill" style={progressStyle}></div></div>
         );
-    }
+    },
 });

src/components/views/elements/ReplyThread.js

@@ -0,0 +1,306 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import sdk from '../../../index';
+import {_t} from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import dis from '../../../dispatcher';
+import {wantsDateSeparator} from '../../../DateUtils';
+import {MatrixEvent, MatrixClient} from 'matrix-js-sdk';
+import {makeEventPermalink, makeUserPermalink} from "../../../matrix-to";
+import SettingsStore from "../../../settings/SettingsStore";
+
+// This component does no cycle detection, simply because the only way to make such a cycle would be to
+// craft event_id's, using a homeserver that generates predictable event IDs; even then the impact would
+// be low as each event being loaded (after the first) is triggered by an explicit user action.
+export default class ReplyThread extends React.Component {
+    static propTypes = {
+        // the latest event in this chain of replies
+        parentEv: PropTypes.instanceOf(MatrixEvent),
+        // called when the ReplyThread contents has changed, including EventTiles thereof
+        onWidgetLoad: PropTypes.func.isRequired,
+    };
+
+    static contextTypes = {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            // The loaded events to be rendered as linear-replies
+            events: [],
+
+            // The latest loaded event which has not yet been shown
+            loadedEv: null,
+            // Whether the component is still loading more events
+            loading: true,
+
+            // Whether as error was encountered fetching a replied to event.
+            err: false,
+        };
+
+        this.onQuoteClick = this.onQuoteClick.bind(this);
+        this.canCollapse = this.canCollapse.bind(this);
+        this.collapse = this.collapse.bind(this);
+    }
+
+    static getParentEventId(ev) {
+        if (!ev || ev.isRedacted()) return;
+
+        const mRelatesTo = ev.getWireContent()['m.relates_to'];
+        if (mRelatesTo && mRelatesTo['m.in_reply_to']) {
+            const mInReplyTo = mRelatesTo['m.in_reply_to'];
+            if (mInReplyTo && mInReplyTo['event_id']) return mInReplyTo['event_id'];
+        }
+    }
+
+    // Part of Replies fallback support
+    static stripPlainReply(body) {
+        // Removes lines beginning with `> ` until you reach one that doesn't.
+        const lines = body.split('\n');
+        while (lines.length && lines[0].startsWith('> ')) lines.shift();
+        // Reply fallback has a blank line after it, so remove it to prevent leading newline
+        if (lines[0] === '') lines.shift();
+        return lines.join('\n');
+    }
+
+    // Part of Replies fallback support
+    static stripHTMLReply(html) {
+        return html.replace(/^<mx-reply>[\s\S]+?<\/mx-reply>/, '');
+    }
+
+    // Part of Replies fallback support
+    static getNestedReplyText(ev) {
+        if (!ev) return null;
+
+        let {body, formatted_body: html} = ev.getContent();
+        if (this.getParentEventId(ev)) {
+            if (body) body = this.stripPlainReply(body);
+            if (html) html = this.stripHTMLReply(html);
+        }
+
+        const evLink = makeEventPermalink(ev.getRoomId(), ev.getId());
+        const userLink = makeUserPermalink(ev.getSender());
+        const mxid = ev.getSender();
+
+        // This fallback contains text that is explicitly EN.
+        switch (ev.getContent().msgtype) {
+            case 'm.text':
+            case 'm.notice': {
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
+                    + `<br>${html || body}</blockquote></mx-reply>`;
+                const lines = body.trim().split('\n');
+                if (lines.length > 0) {
+                    lines[0] = `<${mxid}> ${lines[0]}`;
+                    body = lines.map((line) => `> ${line}`).join('\n') + '\n\n';
+                }
+                break;
+            }
+            case 'm.image':
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
+                    + `<br>sent an image.</blockquote></mx-reply>`;
+                body = `> <${mxid}> sent an image.\n\n`;
+                break;
+            case 'm.video':
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
+                    + `<br>sent a video.</blockquote></mx-reply>`;
+                body = `> <${mxid}> sent a video.\n\n`;
+                break;
+            case 'm.audio':
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
+                    + `<br>sent an audio file.</blockquote></mx-reply>`;
+                body = `> <${mxid}> sent an audio file.\n\n`;
+                break;
+            case 'm.file':
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> <a href="${userLink}">${mxid}</a>`
+                    + `<br>sent a file.</blockquote></mx-reply>`;
+                body = `> <${mxid}> sent a file.\n\n`;
+                break;
+            case 'm.emote': {
+                html = `<mx-reply><blockquote><a href="${evLink}">In reply to</a> * `
+                    + `<a href="${userLink}">${mxid}</a><br>${html || body}</blockquote></mx-reply>`;
+                const lines = body.trim().split('\n');
+                if (lines.length > 0) {
+                    lines[0] = `* <${mxid}> ${lines[0]}`;
+                    body = lines.map((line) => `> ${line}`).join('\n') + '\n\n';
+                }
+                break;
+            }
+            default:
+                return null;
+        }
+
+        return {body, html};
+    }
+
+    static makeReplyMixIn(ev) {
+        if (!ev) return {};
+        return {
+            'm.relates_to': {
+                'm.in_reply_to': {
+                    'event_id': ev.getId(),
+                },
+            },
+        };
+    }
+
+    static makeThread(parentEv, onWidgetLoad, ref) {
+        if (!ReplyThread.getParentEventId(parentEv)) {
+            return <div />;
+        }
+        return <ReplyThread parentEv={parentEv} onWidgetLoad={onWidgetLoad} ref={ref} />;
+    }
+
+    componentWillMount() {
+        this.unmounted = false;
+        this.room = this.context.matrixClient.getRoom(this.props.parentEv.getRoomId());
+        this.initialize();
+    }
+
+    componentDidUpdate() {
+        this.props.onWidgetLoad();
+    }
+
+    componentWillUnmount() {
+        this.unmounted = true;
+    }
+
+    async initialize() {
+        const {parentEv} = this.props;
+        // at time of making this component we checked that props.parentEv has a parentEventId
+        const ev = await this.getEvent(ReplyThread.getParentEventId(parentEv));
+        if (this.unmounted) return;
+
+        if (ev) {
+            this.setState({
+                events: [ev],
+            }, this.loadNextEvent);
+        } else {
+            this.setState({err: true});
+        }
+    }
+
+    async loadNextEvent() {
+        if (this.unmounted) return;
+        const ev = this.state.events[0];
+        const inReplyToEventId = ReplyThread.getParentEventId(ev);
+
+        if (!inReplyToEventId) {
+            this.setState({
+                loading: false,
+            });
+            return;
+        }
+
+        const loadedEv = await this.getEvent(inReplyToEventId);
+        if (this.unmounted) return;
+
+        if (loadedEv) {
+            this.setState({loadedEv});
+        } else {
+            this.setState({err: true});
+        }
+    }
+
+    async getEvent(eventId) {
+        const event = this.room.findEventById(eventId);
+        if (event) return event;
+
+        try {
+            // ask the client to fetch the event we want using the context API, only interface to do so is to ask
+            // for a timeline with that event, but once it is loaded we can use findEventById to look up the ev map
+            await this.context.matrixClient.getEventTimeline(this.room.getUnfilteredTimelineSet(), eventId);
+        } catch (e) {
+            // if it fails catch the error and return early, there's no point trying to find the event in this case.
+            // Return null as it is falsey and thus should be treated as an error (as the event cannot be resolved).
+            return null;
+        }
+        return this.room.findEventById(eventId);
+    }
+
+    canCollapse() {
+        return this.state.events.length > 1;
+    }
+
+    collapse() {
+        this.initialize();
+    }
+
+    onQuoteClick() {
+        const events = [this.state.loadedEv, ...this.state.events];
+
+        this.setState({
+            loadedEv: null,
+            events,
+        }, this.loadNextEvent);
+
+        dis.dispatch({action: 'focus_composer'});
+    }
+
+    render() {
+        let header = null;
+
+        if (this.state.err) {
+            header = <blockquote className="mx_ReplyThread mx_ReplyThread_error">
+                {
+                    _t('Unable to load event that was replied to, ' +
+                        'it either does not exist or you do not have permission to view it.')
+                }
+            </blockquote>;
+        } else if (this.state.loadedEv) {
+            const ev = this.state.loadedEv;
+            const Pill = sdk.getComponent('elements.Pill');
+            const room = this.context.matrixClient.getRoom(ev.getRoomId());
+            header = <blockquote className="mx_ReplyThread">
+                {
+                    _t('<a>In reply to</a> <pill>', {}, {
+                        'a': (sub) => <a onClick={this.onQuoteClick} className="mx_ReplyThread_show">{ sub }</a>,
+                        'pill': <Pill type={Pill.TYPE_USER_MENTION} room={room}
+                                      url={makeUserPermalink(ev.getSender())} shouldShowPillAvatar={true} />,
+                    })
+                }
+            </blockquote>;
+        } else if (this.state.loading) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            header = <Spinner w={16} h={16} />;
+        }
+
+        const EventTile = sdk.getComponent('views.rooms.EventTile');
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const evTiles = this.state.events.map((ev) => {
+            let dateSep = null;
+
+            if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
+                dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
+            }
+
+            return <blockquote className="mx_ReplyThread" key={ev.getId()}>
+                { dateSep }
+                <EventTile mxEvent={ev}
+                           tileShape="reply"
+                           onWidgetLoad={this.props.onWidgetLoad}
+                           isTwelveHour={SettingsStore.getValue("showTwelveHourTimestamps")} />
+            </blockquote>;
+        });
+
+        return <div>
+            <div>{ header }</div>
+            <div>{ evTiles }</div>
+        </div>;
+    }
+}

src/components/views/elements/RoomDirectoryButton.js

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

src/components/views/elements/SettingsButton.js

@@ -23,7 +23,7 @@ const SettingsButton = function(props) {
     const ActionButton = sdk.getComponent('elements.ActionButton');
     return (
         <ActionButton action="view_user_settings"
-            label={ _t("Settings") }
+            label={_t("Settings")}
             iconPath="img/icons-settings.svg"
             size={props.size}
             tooltip={props.tooltip}

src/components/views/elements/SettingsFlag.js

@@ -0,0 +1,111 @@
+/*
+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 PropTypes from 'prop-types';
+import SettingsStore from "../../../settings/SettingsStore";
+import { _t } from '../../../languageHandler';
+
+module.exports = React.createClass({
+    displayName: 'SettingsFlag',
+    propTypes: {
+        name: PropTypes.string.isRequired,
+        level: PropTypes.string.isRequired,
+        roomId: PropTypes.string, // for per-room settings
+        label: PropTypes.string, // untranslated
+        onChange: PropTypes.func,
+        isExplicit: PropTypes.bool,
+        manualSave: PropTypes.bool,
+
+        // If group is supplied, then this will create a radio button instead.
+        group: PropTypes.string,
+        value: PropTypes.any, // the value for the radio button
+    },
+
+    getInitialState: function() {
+        return {
+            value: SettingsStore.getValueAt(
+                this.props.level,
+                this.props.name,
+                this.props.roomId,
+                this.props.isExplicit,
+            ),
+        };
+    },
+
+    onChange: function(e) {
+        if (this.props.group && !e.target.checked) return;
+
+        const newState = this.props.group ? this.props.value : e.target.checked;
+        if (!this.props.manualSave) this.save(newState);
+        else this.setState({ value: newState });
+        if (this.props.onChange) this.props.onChange(newState);
+    },
+
+    save: function(val = undefined) {
+        return SettingsStore.setValue(
+            this.props.name,
+            this.props.roomId,
+            this.props.level,
+            val !== undefined ? val : this.state.value,
+        );
+    },
+
+    render: function() {
+        const value = this.props.manualSave ? this.state.value : SettingsStore.getValueAt(
+            this.props.level,
+            this.props.name,
+            this.props.roomId,
+            this.props.isExplicit,
+        );
+
+        const canChange = SettingsStore.canSetValue(this.props.name, this.props.roomId, this.props.level);
+
+        let label = this.props.label;
+        if (!label) label = SettingsStore.getDisplayName(this.props.name, this.props.level);
+        else label = _t(label);
+
+        // We generate a relatively complex ID to avoid conflicts
+        const id = this.props.name + "_" + this.props.group + "_" + this.props.value + "_" + this.props.level;
+        let checkbox = (
+            <input id={id}
+                   type="checkbox"
+                   defaultChecked={value}
+                   onChange={this.onChange}
+                   disabled={!canChange}
+            />
+        );
+        if (this.props.group) {
+            checkbox = (
+                <input id={id}
+                       type="radio"
+                       name={this.props.group}
+                       value={this.props.value}
+                       checked={value === this.props.value}
+                       onChange={this.onChange}
+                       disabled={!canChange}
+                />
+            );
+        }
+
+        return (
+            <label>
+                { checkbox }
+                { label }
+            </label>
+        );
+    },
+});

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

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

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/elements/TagTile.js

@@ -0,0 +1,192 @@
+/*
+Copyright 2017 New Vector 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 classNames from 'classnames';
+import { MatrixClient } from 'matrix-js-sdk';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
+import * as ContextualMenu from '../../structures/ContextualMenu';
+
+import FlairStore from '../../../stores/FlairStore';
+import GroupStore from '../../../stores/GroupStore';
+
+// A class for a child of TagPanel (possibly wrapped in a DNDTagTile) that represents
+// a thing to click on for the user to filter the visible rooms in the RoomList to:
+//  - Rooms that are part of the group
+//  - Direct messages with members of the group
+// with the intention that this could be expanded to arbitrary tags in future.
+export default React.createClass({
+    displayName: 'TagTile',
+
+    propTypes: {
+        // A string tag such as "m.favourite" or a group ID such as "+groupid:domain.bla"
+        // For now, only group IDs are handled.
+        tag: PropTypes.string,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    },
+
+    getInitialState() {
+        return {
+            // Whether the mouse is over the tile
+            hover: false,
+            // The profile data of the group if this.props.tag is a group ID
+            profile: null,
+        };
+    },
+
+    componentWillMount() {
+        this.unmounted = false;
+        if (this.props.tag[0] === '+') {
+            FlairStore.addListener('updateGroupProfile', this._onFlairStoreUpdated);
+            this._onFlairStoreUpdated();
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
+        }
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        if (this.props.tag[0] === '+') {
+            FlairStore.removeListener('updateGroupProfile', this._onFlairStoreUpdated);
+        }
+    },
+
+    _onFlairStoreUpdated() {
+        if (this.unmounted) return;
+        FlairStore.getGroupProfileCached(
+            this.context.matrixClient,
+            this.props.tag,
+        ).then((profile) => {
+            if (this.unmounted) return;
+            this.setState({profile});
+        }).catch((err) => {
+            console.warn('Could not fetch group profile for ' + this.props.tag, err);
+        });
+    },
+
+    _refreshGroup(groupId) {
+        GroupStore.refreshGroupRooms(groupId);
+        GroupStore.refreshGroupMembers(groupId);
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch({
+            action: 'select_tag',
+            tag: this.props.tag,
+            ctrlOrCmdKey: isOnlyCtrlOrCmdIgnoreShiftKeyEvent(e),
+            shiftKey: e.shiftKey,
+        });
+        if (this.props.tag[0] === '+') {
+            // New rooms or members may have been added to the group, fetch async
+            this._refreshGroup(this.props.tag);
+        }
+    },
+
+    _openContextMenu: function(x, y, chevronOffset) {
+        // Hide the (...) immediately
+        this.setState({ hover: false });
+
+        const TagTileContextMenu = sdk.getComponent('context_menus.TagTileContextMenu');
+        ContextualMenu.createMenu(TagTileContextMenu, {
+            chevronOffset: chevronOffset,
+            left: x,
+            top: y,
+            tag: this.props.tag,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
+    onContextButtonClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._openContextMenu(x, y, chevronOffset);
+    },
+
+    onContextMenu: function(e) {
+        e.preventDefault();
+
+        const chevronOffset = 12;
+        this._openContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
+    },
+
+    onMouseOver: function() {
+        this.setState({hover: true});
+    },
+
+    onMouseOut: function() {
+        this.setState({hover: false});
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const RoomTooltip = sdk.getComponent('rooms.RoomTooltip');
+        const profile = this.state.profile || {};
+        const name = profile.name || this.props.tag;
+        const avatarHeight = 35;
+
+        const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
+            profile.avatarUrl, avatarHeight, avatarHeight, "crop",
+        ) : null;
+
+        const className = classNames({
+            mx_TagTile: true,
+            mx_TagTile_selected: this.props.selected,
+        });
+
+        const tip = this.state.hover ?
+            <RoomTooltip className="mx_TagTile_tooltip" label={name} /> :
+            <div />;
+        const contextButton = this.state.hover || this.state.menuDisplayed ?
+            <div className="mx_TagTile_context_button" onClick={this.onContextButtonClick}>
+                { "\u00B7\u00B7\u00B7" }
+            </div> : <div />;
+        return <AccessibleButton className={className} onClick={this.onClick} onContextMenu={this.onContextMenu}>
+            <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                <BaseAvatar
+                    name={name}
+                    idName={this.props.tag}
+                    url={httpUrl}
+                    width={avatarHeight}
+                    height={avatarHeight}
+                />
+                { tip }
+                { contextButton }
+            </div>
+        </AccessibleButton>;
+    },
+});

src/components/views/elements/TintableSvg.js

@@ -16,18 +16,19 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require("react-dom");
-var Tinter = require("../../../Tinter");
+const React = require('react');
+const ReactDOM = require("react-dom");
+import PropTypes from 'prop-types';
+const Tinter = require("../../../Tinter");
 
 var TintableSvg = React.createClass({
     displayName: 'TintableSvg',
 
     propTypes: {
-        src: React.PropTypes.string.isRequired,
-        width: React.PropTypes.string.isRequired,
-        height: React.PropTypes.string.isRequired,
-        className: React.PropTypes.string,
+        src: PropTypes.string.isRequired,
+        width: PropTypes.string.isRequired,
+        height: PropTypes.string.isRequired,
+        className: PropTypes.string,
     },
 
     statics: {
@@ -63,16 +64,16 @@ var TintableSvg = React.createClass({
 
     render: function() {
         return (
-            <object className={ "mx_TintableSvg " + (this.props.className ? this.props.className : "") }
+            <object className={"mx_TintableSvg " + (this.props.className ? this.props.className : "")}
                     type="image/svg+xml"
-                    data={ this.props.src }
-                    width={ this.props.width }
-                    height={ this.props.height }
-                    onLoad={ this.onLoad }
+                    data={this.props.src}
+                    width={this.props.width}
+                    height={this.props.height}
+                    onLoad={this.onLoad}
                     tabIndex="-1"
                 />
         );
-    }
+    },
 });
 
 // Register with the Tinter so that we will be told if the tint changes

src/components/views/elements/TintableSvgButton.js

@@ -0,0 +1,64 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import TintableSvg from './TintableSvg';
+import AccessibleButton from './AccessibleButton';
+
+export default class TintableSvgButton extends React.Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let classes = "mx_TintableSvgButton";
+        if (this.props.className) {
+            classes += " " + this.props.className;
+        }
+        return (
+            <span
+                width={this.props.width}
+                height={this.props.height}
+                className={classes}>
+                <TintableSvg
+                    src={this.props.src}
+                    width={this.props.width}
+                    height={this.props.height}
+                ></TintableSvg>
+                <AccessibleButton
+                    onClick={this.props.onClick}
+                    element='span'
+                    title={this.props.title}
+                />
+            </span>
+        );
+    }
+}
+
+TintableSvgButton.propTypes = {
+    src: PropTypes.string,
+    title: PropTypes.string,
+    className: PropTypes.string,
+    width: PropTypes.string.isRequired,
+    height: PropTypes.string.isRequired,
+    onClick: PropTypes.func,
+};
+
+TintableSvgButton.defaultProps = {
+    onClick: function() {},
+};

src/components/views/elements/ToolTipButton.js

@@ -0,0 +1,55 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+
+module.exports = React.createClass({
+    displayName: 'ToolTipButton',
+
+    getInitialState: function() {
+        return {
+            hover: false,
+        };
+    },
+
+    onMouseOver: function() {
+        this.setState({
+            hover: true,
+        });
+    },
+
+    onMouseOut: function() {
+        this.setState({
+            hover: false,
+        });
+    },
+
+    render: function() {
+        const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+        const tip = this.state.hover ? <RoomTooltip
+            className="mx_ToolTipButton_container"
+            tooltipClassName="mx_ToolTipButton_helpText"
+            label={this.props.helpText}
+        /> : <div />;
+        return (
+            <div className="mx_ToolTipButton" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut} >
+                ?
+                { tip }
+            </div>
+        );
+    },
+});

src/components/views/elements/TruncatedList.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -13,7 +14,9 @@ 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.
 */
-var React = require('react');
+
+import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
@@ -21,12 +24,21 @@ module.exports = React.createClass({
 
     propTypes: {
         // The number of elements to show before truncating. If negative, no truncation is done.
-        truncateAt: React.PropTypes.number,
+        truncateAt: PropTypes.number,
         // The className to apply to the wrapping div
-        className: React.PropTypes.string,
+        className: PropTypes.string,
+        // A function that returns the children to be rendered into the element.
+        // function getChildren(start: number, end: number): Array<React.Node>
+        // The start element is included, the end is not (as in `slice`).
+        // If omitted, the React child elements will be used. This parameter can be used
+        // to avoid creating unnecessary React elements.
+        getChildren: PropTypes.func,
+        // A function that should return the total number of child element available.
+        // Required if getChildren is supplied.
+        getChildCount: PropTypes.func,
         // A function which will be invoked when an overflow element is required.
         // This will be inserted after the children.
-        createOverflowElement: React.PropTypes.func
+        createOverflowElement: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -34,40 +46,56 @@ module.exports = React.createClass({
             truncateAt: 2,
             createOverflowElement: function(overflowCount, totalCount) {
                 return (
-                    <div>{_t("And %(count)s more...", {count: overflowCount})}</div>
+                    <div>{ _t("And %(count)s more...", {count: overflowCount}) }</div>
                 );
-            }
+            },
         };
     },
 
+    _getChildren: function(start, end) {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildren(start, end);
+        } else {
+            // XXX: I'm not sure why anything would pass null into this, it seems
+            // like a bizzare case to handle, but I'm preserving the behaviour.
+            // (see commit 38d5c7d5c5d5a34dc16ef5d46278315f5c57f542)
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).slice(start, end);
+        }
+    },
+
+    _getChildCount: function() {
+        if (this.props.getChildren && this.props.getChildCount) {
+            return this.props.getChildCount();
+        } else {
+            return React.Children.toArray(this.props.children).filter((c) => {
+                return c != null;
+            }).length;
+        }
+    },
+
     render: function() {
-        var childsJsx = this.props.children;
-        var overflowJsx;
-        var childArray = React.Children.toArray(this.props.children).filter((c) => {
-            return c != null;
-        });
-
-        var childCount = childArray.length;
+        let overflowNode = null;
 
+        const totalChildren = this._getChildCount();
+        let upperBound = totalChildren;
         if (this.props.truncateAt >= 0) {
-            var overflowCount = childCount - this.props.truncateAt;
-
+            const overflowCount = totalChildren - this.props.truncateAt;
             if (overflowCount > 1) {
-                overflowJsx = this.props.createOverflowElement(
-                    overflowCount, childCount
+                overflowNode = this.props.createOverflowElement(
+                    overflowCount, totalChildren,
                 );
-
-                // cut out the overflow elements
-                childArray.splice(childCount - overflowCount, overflowCount);
-                childsJsx = childArray; // use what is left
+                upperBound = this.props.truncateAt;
             }
         }
+        const childNodes = this._getChildren(0, upperBound);
 
         return (
             <div className={this.props.className}>
-                {childsJsx}
-                {overflowJsx}
+                { childNodes }
+                { overflowNode }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/UserSelector.js

@@ -17,14 +17,15 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UserSelector',
 
     propTypes: {
-        onChange: React.PropTypes.func,
-        selected_users: React.PropTypes.arrayOf(React.PropTypes.string),
+        onChange: PropTypes.func,
+        selected_users: PropTypes.arrayOf(React.PropTypes.string),
     },
 
     getDefaultProps: function() {
@@ -52,19 +53,19 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var self = this;
+        const self = this;
         return (
             <div>
                 <ul className="mx_UserSelector_UserIdList" ref="list">
-                    {this.props.selected_users.map(function(user_id, i) {
-                        return <li key={user_id}>{user_id} - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>;
-                    })}
+                    { this.props.selected_users.map(function(user_id, i) {
+                        return <li key={user_id}>{ user_id } - <span onClick={function() {self.removeUser(user_id);}}>X</span></li>;
+                    }) }
                 </ul>
-                <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder={_t("ex. @bob:example.com")}/>
+                <input type="text" ref="user_id_input" defaultValue="" className="mx_UserSelector_userIdInput" placeholder={_t("ex. @bob:example.com")} />
                 <button onClick={this.onAddUserId} className="mx_UserSelector_AddUserId">
-                    {_t("Add User")}
+                    { _t("Add User") }
                 </button>
             </div>
         );
-    }
+    },
 });

src/components/views/globals/CookieBar.js

@@ -0,0 +1,103 @@
+/*
+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 dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import Analytics from '../../../Analytics';
+
+export default class CookieBar extends React.Component {
+    static propTypes = {
+        policyUrl: PropTypes.string,
+    }
+
+    constructor() {
+        super();
+    }
+
+    onUsageDataClicked() {
+        Analytics.showDetailsModal();
+    }
+
+    onAccept() {
+        dis.dispatch({
+            action: 'accept_cookies',
+        });
+    }
+
+    onReject() {
+        dis.dispatch({
+            action: 'reject_cookies',
+        });
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const toolbarClasses = "mx_MatrixToolbar";
+        return (
+            <div className={toolbarClasses}>
+                <img className="mx_MatrixToolbar_warning" src="img/warning.svg" width="24" height="23" alt="Warning" />
+                <div className="mx_MatrixToolbar_content">
+                    { this.props.policyUrl ? _t(
+                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
+                        "This will use a cookie " +
+                        "(please see our <PolicyLink>Cookie Policy</PolicyLink>).",
+                        {},
+                        {
+                            'UsageDataLink': (sub) => <a
+                                className="mx_MatrixToolbar_link"
+                                href="javascript:;"
+                                onClick={this.onUsageDataClicked}
+                            >
+                                { sub }
+                            </a>,
+                            // XXX: We need to link to the page that explains our cookies
+                            'PolicyLink': (sub) => <a
+                                    className="mx_MatrixToolbar_link"
+                                    target="_blank"
+                                    href={this.props.policyUrl}
+                                >
+                                    { sub }
+                                </a>
+                            ,
+                        },
+                    ) : _t(
+                        "Please help improve Riot.im by sending <UsageDataLink>anonymous usage data</UsageDataLink>. " +
+                        "This will use a cookie.",
+                        {},
+                        {
+                            'UsageDataLink': (sub) => <a
+                                className="mx_MatrixToolbar_link"
+                                href="javascript:;"
+                                onClick={this.onUsageDataClicked}
+                            >
+                                { sub }
+                            </a>,
+                        },
+                    ) }
+                </div>
+                <AccessibleButton element='button' className="mx_MatrixToolbar_action" onClick={this.onAccept}>
+                    { _t("Yes, I want to help!") }
+                </AccessibleButton>
+                <AccessibleButton className="mx_MatrixToolbar_close" onClick={this.onReject}>
+                    <img src="img/cancel.svg" width="18" height="18" />
+                </AccessibleButton>
+            </div>
+        );
+    }
+}

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 '../../../languageHandler';
+import Notifier from '../../../Notifier';
+import AccessibleButton from '../../../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 '../../../index';
+import Modal from '../../../Modal';
+import PlatformPeg from '../../../PlatformPeg';
+import { _t } from '../../../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,52 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+
+export default React.createClass({
+    onUpdateClicked: function() {
+        const SetPasswordDialog = sdk.getComponent('dialogs.SetPasswordDialog');
+        Modal.createTrackedDialog('Set Password Dialog', 'Password Nag Bar', SetPasswordDialog);
+    },
+
+    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/ServerLimitBar.js

@@ -0,0 +1,98 @@
+/*
+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 classNames from 'classnames';
+import { _td } from '../../../languageHandler';
+import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
+
+export default React.createClass({
+    propTypes: {
+        // 'hard' if the logged in user has been locked out, 'soft' if they haven't
+        kind: PropTypes.string,
+        adminContact: PropTypes.string,
+        // The type of limit that has been hit.
+        limitType: PropTypes.string.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            kind: 'hard',
+        };
+    },
+
+    render: function() {
+        const toolbarClasses = {
+            'mx_MatrixToolbar': true,
+        };
+
+        let adminContact;
+        let limitError;
+        if (this.props.kind === 'hard') {
+            toolbarClasses['mx_MatrixToolbar_error'] = true;
+
+            adminContact = messageForResourceLimitError(
+                this.props.limitType,
+                this.props.adminContact,
+                {
+                    '': _td("Please <a>contact your service administrator</a> to continue using the service."),
+                },
+            );
+            limitError = messageForResourceLimitError(
+                this.props.limitType,
+                this.props.adminContact,
+                {
+                    'monthly_active_user': _td("This homeserver has hit its Monthly Active User limit."),
+                    '': _td("This homeserver has exceeded one of its resource limits."),
+                },
+            );
+        } else {
+            toolbarClasses['mx_MatrixToolbar_info'] = true;
+            adminContact = messageForResourceLimitError(
+                this.props.limitType,
+                this.props.adminContact,
+                {
+                    '': _td("Please <a>contact your service administrator</a> to get this limit increased."),
+                },
+            );
+            limitError = messageForResourceLimitError(
+                this.props.limitType,
+                this.props.adminContact,
+                {
+                    'monthly_active_user': _td(
+                        "This homeserver has hit its Monthly Active User limit so " +
+                        "<b>some users will not be able to log in</b>.",
+                    ),
+                    '': _td(
+                        "This homeserver has exceeded one of its resource limits so " +
+                        "<b>some users will not be able to log in</b>.",
+                    ),
+                },
+                {'b': sub => <b>{sub}</b>},
+            );
+        }
+        return (
+            <div className={classNames(toolbarClasses)}>
+                <div className="mx_MatrixToolbar_content">
+                    {limitError}
+                    {' '}
+                    {adminContact}
+                </div>
+            </div>
+        );
+    },
+});

src/components/views/globals/UpdateCheckBar.js

@@ -0,0 +1,91 @@
+/*
+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 '../../../languageHandler';
+import PlatformPeg from '../../../PlatformPeg';
+import AccessibleButton from '../../../components/views/elements/AccessibleButton';
+
+export default React.createClass({
+    propTypes: {
+        status: React.PropTypes.string.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() {
+        // we can't import the enum from riot-web as we don't want matrix-react-sdk
+        // to depend on riot-web. so we grab it as a normal object via API instead.
+        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
+        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');
+
+        if (!'getUpdateCheckStatusEnum' in PlatformPeg.get()) {
+            return <div></div>;
+        }
+
+        const updateCheckStatusEnum = PlatformPeg.get().getUpdateCheckStatusEnum();
+        const doneStatuses = [
+            updateCheckStatusEnum.ERROR,
+            updateCheckStatusEnum.NOTAVAILABLE,
+        ];
+
+        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/groups/GroupInviteTile.js

@@ -0,0 +1,173 @@
+/*
+Copyright 2017, 2018 New Vector 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 { MatrixClient } from 'matrix-js-sdk';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
+import classNames from 'classnames';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import {createMenu} from "../../structures/ContextualMenu";
+
+export default React.createClass({
+    displayName: 'GroupInviteTile',
+
+    propTypes: {
+        group: PropTypes.object.isRequired,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getInitialState: function() {
+        return ({
+            hover: false,
+            badgeHover: false,
+            menuDisplayed: false,
+            selected: this.props.group.groupId === null, // XXX: this needs linking to LoggedInView/GroupView state
+        });
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.group.groupId,
+        });
+    },
+
+    onMouseEnter: function() {
+        const state = {hover: true};
+        // Only allow non-guests to access the context menu
+        if (!this.context.matrixClient.isGuest()) {
+            state.badgeHover = true;
+        }
+        this.setState(state);
+    },
+
+    onMouseLeave: function() {
+        this.setState({
+            badgeHover: false,
+            hover: false,
+        });
+    },
+
+    _showContextMenu: function(x, y, chevronOffset) {
+        const GroupInviteTileContextMenu = sdk.getComponent('context_menus.GroupInviteTileContextMenu');
+
+        createMenu(GroupInviteTileContextMenu, {
+            chevronOffset,
+            left: x,
+            top: y,
+            group: this.props.group,
+            onFinished: () => {
+                this.setState({ menuDisplayed: false });
+            },
+        });
+        this.setState({ menuDisplayed: true });
+    },
+
+    onContextMenu: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.preventDefault();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        const chevronOffset = 12;
+        this._showContextMenu(e.clientX, e.clientY - (chevronOffset + 8), chevronOffset);
+    },
+
+    onBadgeClicked: function(e) {
+        // Prevent the RoomTile onClick event firing as well
+        e.stopPropagation();
+        // Only allow non-guests to access the context menu
+        if (MatrixClientPeg.get().isGuest()) return;
+
+        // If the badge is clicked, then no longer show tooltip
+        if (this.props.collapsed) {
+            this.setState({ hover: false });
+        }
+
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = elementRect.right + window.pageXOffset + 3;
+        const chevronOffset = 12;
+        let y = (elementRect.top + (elementRect.height / 2) + window.pageYOffset);
+        y = y - (chevronOffset + 8); // where 8 is half the height of the chevron
+
+        this._showContextMenu(x, y, chevronOffset);
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        const groupName = this.props.group.name || this.props.group.groupId;
+        const httpAvatarUrl = this.props.group.avatarUrl ?
+            this.context.matrixClient.mxcUrlToHttp(this.props.group.avatarUrl, 24, 24) : null;
+
+        const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
+
+        const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', {
+            'mx_RoomTile_badgeShown': this.state.badgeHover || this.state.menuDisplayed,
+        });
+
+        const label = <EmojiText element="div" title={this.props.group.groupId} className={nameClasses} dir="auto">
+            { groupName }
+        </EmojiText>;
+
+        const badgeEllipsis = this.state.badgeHover || this.state.menuDisplayed;
+        const badgeClasses = classNames('mx_RoomTile_badge mx_RoomTile_highlight', {
+            'mx_RoomTile_badgeButton': badgeEllipsis,
+        });
+
+        const badgeContent = badgeEllipsis ? '\u00B7\u00B7\u00B7' : '!';
+        const badge = <div className={badgeClasses} onClick={this.onBadgeClicked}>{ badgeContent }</div>;
+
+        let tooltip;
+        if (this.props.collapsed && this.state.hover) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip className="mx_RoomTile_tooltip" label={groupName} dir="auto" />;
+        }
+
+        const classes = classNames('mx_RoomTile mx_RoomTile_highlight', {
+            'mx_RoomTile_menuDisplayed': this.state.menuDisplayed,
+            'mx_RoomTile_selected': this.state.selected,
+        });
+
+        return (
+            <AccessibleButton className={classes}
+                              onClick={this.onClick}
+                              onMouseEnter={this.onMouseEnter}
+                              onMouseLeave={this.onMouseLeave}
+                              onContextMenu={this.onContextMenu}
+            >
+                <div className="mx_RoomTile_avatar">
+                    { av }
+                </div>
+                <div className="mx_RoomTile_nameContainer">
+                    { label }
+                    { badge }
+                </div>
+                { tooltip }
+            </AccessibleButton>
+        );
+    },
+});

src/components/views/groups/GroupMemberInfo.js

@@ -0,0 +1,210 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { GroupMemberType } from '../../../groups';
+import GroupStore from '../../../stores/GroupStore';
+import AccessibleButton from '../elements/AccessibleButton';
+
+module.exports = React.createClass({
+    displayName: 'GroupMemberInfo',
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    propTypes: {
+        groupId: PropTypes.string,
+        groupMember: GroupMemberType,
+        isInvited: PropTypes.bool,
+    },
+
+    getInitialState: function() {
+        return {
+            removingUser: false,
+            isUserPrivilegedInGroup: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore(this.props.groupId);
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    componentWillUnmount() {
+        this._unmounted = true;
+        this._unregisterGroupStore(this.props.groupId);
+    },
+
+    _initGroupStore(groupId) {
+        GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore(groupId) {
+        GroupStore.unregisterListener(this.onGroupStoreUpdated);
+    },
+
+    onGroupStoreUpdated: function() {
+        if (this._unmounted) return;
+        this.setState({
+            isUserInvited: GroupStore.getGroupInvitedMembers(this.props.groupId).some(
+                (m) => m.userId === this.props.groupMember.userId,
+            ),
+            isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
+        });
+    },
+
+    _onKick: function() {
+        const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
+        Modal.createDialog(ConfirmUserActionDialog, {
+            matrixClient: this.context.matrixClient,
+            groupMember: this.props.groupMember,
+            action: this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community'),
+            title: this.state.isUserInvited ? _t('Disinvite this user from community?')
+                                            : _t('Remove this user from community?'),
+            danger: true,
+            onFinished: (proceed) => {
+                if (!proceed) return;
+
+                this.setState({removingUser: true});
+                this.context.matrixClient.removeUserFromGroup(
+                    this.props.groupId, this.props.groupMember.userId,
+                ).then(() => {
+                    // return to the user list
+                    dis.dispatch({
+                        action: "view_user",
+                        member: null,
+                    });
+                }).catch((e) => {
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Failed to remove user from group', '', ErrorDialog, {
+                        title: _t('Error'),
+                        description: this.state.isUserInvited ?
+                            _t('Failed to withdraw invitation') :
+                            _t('Failed to remove user from community'),
+                    });
+                }).finally(() => {
+                    this.setState({removingUser: false});
+                });
+            },
+        });
+    },
+
+    _onCancel: function(e) {
+        // Go back to the user list
+        dis.dispatch({
+            action: "view_user",
+            member: null,
+        });
+    },
+
+    onRoomTileClick(roomId) {
+        dis.dispatch({
+            action: 'view_room',
+            room_id: roomId,
+        });
+    },
+
+    render: function() {
+        if (this.state.removingUser) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <div className="mx_MemberInfo">
+                <Spinner />
+            </div>;
+        }
+
+        let adminTools;
+        if (this.state.isUserPrivilegedInGroup) {
+            const kickButton = (
+                <AccessibleButton className="mx_MemberInfo_field"
+                        onClick={this._onKick}>
+                    { this.state.isUserInvited ? _t('Disinvite') : _t('Remove from community') }
+                </AccessibleButton>
+            );
+
+            // No make/revoke admin API yet
+            /*const opLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
+            giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
+                {giveOpLabel}
+            </AccessibleButton>;*/
+
+            if (kickButton) {
+                adminTools =
+                    <div className="mx_MemberInfo_adminTools">
+                        <h3>{ _t("Admin Tools") }</h3>
+                        <div className="mx_MemberInfo_buttons">
+                            { kickButton }
+                        </div>
+                    </div>;
+            }
+        }
+
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupMember.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const avatar = (
+            <BaseAvatar name={this.props.groupMember.userId} width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        const groupMemberName = (
+            this.props.groupMember.displayname || this.props.groupMember.userId
+        );
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbarWrapper autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                    </AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        { avatar }
+                    </div>
+
+                    <EmojiText element="h2">{ groupMemberName }</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.groupMember.userId }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbarWrapper>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupMemberList.js

@@ -0,0 +1,175 @@
+/*
+Copyright 2017 Vector Creations Ltd.
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import GroupStore from '../../../stores/GroupStore';
+import PropTypes from 'prop-types';
+
+const INITIAL_LOAD_NUM_MEMBERS = 30;
+
+export default React.createClass({
+    displayName: 'GroupMemberList',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            members: null,
+            invitedMembers: null,
+            truncateAt: INITIAL_LOAD_NUM_MEMBERS,
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+    _initGroupStore: function(groupId) {
+        GroupStore.registerListener(groupId, () => {
+            this._fetchMembers();
+        });
+    },
+
+    _fetchMembers: function() {
+        if (this._unmounted) return;
+        this.setState({
+            members: GroupStore.getGroupMembers(this.props.groupId),
+            invitedMembers: GroupStore.getGroupInvitedMembers(this.props.groupId),
+        });
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        const EntityTile = sdk.getComponent("rooms.EntityTile");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={this._showFullMemberList} />
+        );
+    },
+
+    _showFullMemberList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+    },
+
+    onSearchQueryChanged: function(ev) {
+        this.setState({ searchQuery: ev.target.value });
+    },
+
+    makeGroupMemberTiles: function(query, memberList) {
+        const GroupMemberTile = sdk.getComponent("groups.GroupMemberTile");
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        query = (query || "").toLowerCase();
+        if (query) {
+            memberList = memberList.filter((m) => {
+                const matchesName = (m.displayname || "").toLowerCase().includes(query);
+                const matchesId = m.userId.toLowerCase().includes(query);
+
+                if (!matchesName && !matchesId) {
+                    return false;
+                }
+
+                return true;
+            });
+        }
+
+        const uniqueMembers = {};
+        memberList.forEach((m) => {
+            if (!uniqueMembers[m.userId]) uniqueMembers[m.userId] = m;
+        });
+        memberList = Object.keys(uniqueMembers).map((userId) => uniqueMembers[userId]);
+        // Descending sort on isPrivileged = true = 1 to isPrivileged = false = 0
+        memberList.sort((a, b) => {
+            if (a.isPrivileged === b.isPrivileged) {
+                const aName = a.displayname || a.userId;
+                const bName = b.displayname || b.userId;
+                if (aName < bName) {
+                    return -1;
+                } else if (aName > bName) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            } else {
+                return a.isPrivileged ? -1 : 1;
+            }
+        });
+
+        const memberTiles = memberList.map((m) => {
+            return (
+                <GroupMemberTile key={m.userId} groupId={this.props.groupId} member={m} />
+            );
+        });
+
+        return <TruncatedList className="mx_MemberList_wrapper" truncateAt={this.state.truncateAt}
+            createOverflowElement={this._createOverflowTile}
+        >
+            { memberTiles }
+        </TruncatedList>;
+    },
+
+    render: function() {
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+        if (this.state.fetching || this.state.fetchingInvitedMembers) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return (<div className="mx_MemberList">
+                <Spinner />
+            </div>);
+        }
+
+        const inputBox = (
+            <form autoComplete="off">
+                <input className="mx_GroupMemberList_query" id="mx_GroupMemberList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter community members')} />
+            </form>
+        );
+
+        const joined = this.state.members ? <div className="mx_MemberList_joined">
+            { this.makeGroupMemberTiles(this.state.searchQuery, this.state.members) }
+        </div> : <div />;
+
+        const invited = (this.state.invitedMembers && this.state.invitedMembers.length > 0) ?
+            <div className="mx_MemberList_invited">
+                <h2>{ _t("Invited") }</h2>
+                { this.makeGroupMemberTiles(this.state.searchQuery, this.state.invitedMembers) }
+            </div> : <div />;
+
+        return (
+            <div className="mx_MemberList">
+                { inputBox }
+                <GeminiScrollbarWrapper autoshow={true} className="mx_MemberList_outerWrapper">
+                    { joined }
+                    { invited }
+                </GeminiScrollbarWrapper>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupMemberTile.js

@@ -0,0 +1,70 @@
+/*
+Copyright 2017 Vector Creations Ltd
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { GroupMemberType } from '../../../groups';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
+
+export default withMatrixClient(React.createClass({
+    displayName: 'GroupMemberTile',
+
+    propTypes: {
+        matrixClient: PropTypes.object,
+        groupId: PropTypes.string.isRequired,
+        member: GroupMemberType.isRequired,
+    },
+
+    getInitialState: function() {
+        return {};
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group_user',
+            member: this.props.member,
+            groupId: this.props.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EntityTile = sdk.getComponent('rooms.EntityTile');
+
+        const name = this.props.member.displayname || this.props.member.userId;
+        const avatarUrl = this.props.matrixClient.mxcUrlToHttp(
+            this.props.member.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const av = (
+            <BaseAvatar name={this.props.member.userId}
+                width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        return (
+            <EntityTile name={name} avatarJsx={av} onClick={this.onClick}
+                suppressOnHover={true} presenceState="online"
+                powerStatus={this.props.member.isPrivileged ? EntityTile.POWER_STATUS_ADMIN : null}
+            />
+        );
+    },
+}));

src/components/views/groups/GroupPublicityToggle.js

@@ -0,0 +1,88 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import GroupStore from '../../../stores/GroupStore';
+import { _t } from '../../../languageHandler.js';
+
+export default React.createClass({
+    displayName: 'GroupPublicityToggle',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState() {
+        return {
+            busy: false,
+            ready: false,
+            isGroupPublicised: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._initGroupStore(this.props.groupId);
+    },
+
+    _initGroupStore: function(groupId) {
+        this._groupStoreToken = GroupStore.registerListener(groupId, () => {
+            this.setState({
+                isGroupPublicised: GroupStore.getGroupPublicity(groupId),
+                ready: GroupStore.isStateReady(groupId, GroupStore.STATE_KEY.Summary),
+            });
+        });
+    },
+
+    componentWillUnmount() {
+        if (this._groupStoreToken) this._groupStoreToken.unregister();
+    },
+
+    _onPublicityToggle: function(e) {
+        e.stopPropagation();
+        this.setState({
+            busy: true,
+            // Optimistic early update
+            isGroupPublicised: !this.state.isGroupPublicised,
+        });
+        GroupStore.setGroupPublicity(this.props.groupId, !this.state.isGroupPublicised).then(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    render() {
+        const GroupTile = sdk.getComponent('groups.GroupTile');
+        const input = <input type="checkbox"
+            onChange={this._onPublicityToggle}
+            checked={this.state.isGroupPublicised}
+        />;
+        const labelText = !this.state.ready ? _t("Loading...") :
+            (this.state.isGroupPublicised ?
+             _t("Flair will appear if enabled in room settings") :
+             _t("Flair will not appear")
+            );
+        return <div className="mx_GroupPublicity_toggle">
+            <GroupTile groupId={this.props.groupId} showDescription={false} avatarHeight={40} />
+            <label onClick={this._onPublicityToggle}>
+                { input }
+                { labelText }
+            </label>
+        </div>;
+    },
+});

src/components/views/groups/GroupRoomInfo.js

@@ -0,0 +1,237 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import { MatrixClient } from 'matrix-js-sdk';
+import dis from '../../../dispatcher';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import GroupStore from '../../../stores/GroupStore';
+
+module.exports = React.createClass({
+    displayName: 'GroupRoomInfo',
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    propTypes: {
+        groupId: PropTypes.string,
+        groupRoomId: PropTypes.string,
+    },
+
+    getInitialState: function() {
+        return {
+            isUserPrivilegedInGroup: null,
+            groupRoom: null,
+            groupRoomPublicityLoading: false,
+            groupRoomRemoveLoading: false,
+        };
+    },
+
+    componentWillMount: function() {
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore(this.props.groupId);
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    componentWillUnmount() {
+        this._unregisterGroupStore(this.props.groupId);
+    },
+
+    _initGroupStore(groupId) {
+        GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore(groupId) {
+        GroupStore.unregisterListener(this.onGroupStoreUpdated);
+    },
+
+    _updateGroupRoom() {
+        this.setState({
+            groupRoom: GroupStore.getGroupRooms(this.props.groupId).find(
+                (r) => r.roomId === this.props.groupRoomId,
+            ),
+        });
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserPrivilegedInGroup: GroupStore.isUserPrivileged(this.props.groupId),
+        });
+        this._updateGroupRoom();
+    },
+
+    _onRemove: function(e) {
+        const groupId = this.props.groupId;
+        const roomName = this.state.groupRoom.displayname;
+        e.preventDefault();
+        e.stopPropagation();
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+        Modal.createTrackedDialog('Confirm removal of group from room', '', QuestionDialog, {
+            title: _t("Are you sure you want to remove '%(roomName)s' from %(groupId)s?", {roomName, groupId}),
+            description: _t("Removing a room from the community will also remove it from the community page."),
+            button: _t("Remove"),
+            onFinished: (proceed) => {
+                if (!proceed) return;
+                this.setState({groupRoomRemoveLoading: true});
+                const groupId = this.props.groupId;
+                const roomId = this.props.groupRoomId;
+                GroupStore.removeRoomFromGroup(this.props.groupId, roomId).then(() => {
+                    dis.dispatch({
+                        action: "view_group_room_list",
+                    });
+                }).catch((err) => {
+                    console.error(`Error whilst removing ${roomId} from ${groupId}`, err);
+                    const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                    Modal.createTrackedDialog('Failed to remove room from group', '', ErrorDialog, {
+                        title: _t("Failed to remove room from community"),
+                        description: _t(
+                            "Failed to remove '%(roomName)s' from %(groupId)s", {groupId, roomName},
+                        ),
+                    });
+                }).finally(() => {
+                    this.setState({groupRoomRemoveLoading: false});
+                });
+            },
+        });
+    },
+
+    _onCancel: function(e) {
+        dis.dispatch({
+            action: "view_group_room_list",
+        });
+    },
+
+    _changeGroupRoomPublicity(e) {
+        const isPublic = e.target.value === "public";
+        this.setState({
+            groupRoomPublicityLoading: true,
+        });
+        const groupId = this.props.groupId;
+        const roomId = this.props.groupRoomId;
+        const roomName = this.state.groupRoom.displayname;
+        GroupStore.updateGroupRoomVisibility(this.props.groupId, roomId, isPublic).catch((err) => {
+            console.error(`Error whilst changing visibility of ${roomId} in ${groupId} to ${isPublic}`, err);
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            Modal.createTrackedDialog('Failed to remove room from group', '', ErrorDialog, {
+                title: _t("Something went wrong!"),
+                description: _t(
+                    "The visibility of '%(roomName)s' in %(groupId)s could not be updated.",
+                    {roomName, groupId},
+                ),
+            });
+        }).finally(() => {
+            this.setState({
+                groupRoomPublicityLoading: false,
+            });
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const InlineSpinner = sdk.getComponent('elements.InlineSpinner');
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+        if (this.state.groupRoomRemoveLoading || !this.state.groupRoom) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <div className="mx_MemberInfo">
+                <Spinner />
+            </div>;
+        }
+
+        let adminTools;
+        if (this.state.isUserPrivilegedInGroup) {
+            adminTools =
+                <div className="mx_MemberInfo_adminTools">
+                    <h3>{ _t("Admin Tools") }</h3>
+                    <div className="mx_MemberInfo_buttons">
+                        <AccessibleButton className="mx_MemberInfo_field" onClick={this._onRemove}>
+                            { _t('Remove from community') }
+                        </AccessibleButton>
+                    </div>
+                    <h3>
+                        { _t('Visibility in Room List') }
+                        { this.state.groupRoomPublicityLoading ?
+                            <InlineSpinner /> : <div />
+                        }
+                    </h3>
+                    <div>
+                        <label>
+                            <input type="radio"
+                                value="public"
+                                checked={this.state.groupRoom.isPublic}
+                                onClick={this._changeGroupRoomPublicity}
+                            />
+                            <div className="mx_MemberInfo_label_text">
+                                { _t('Visible to everyone') }
+                            </div>
+                        </label>
+                    </div>
+                    <div>
+                        <label>
+                            <input type="radio"
+                                value="private"
+                                checked={!this.state.groupRoom.isPublic}
+                                onClick={this._changeGroupRoomPublicity}
+                            />
+                            <div className="mx_MemberInfo_label_text">
+                                { _t('Only visible to community members') }
+                            </div>
+                        </label>
+                    </div>
+                </div>;
+        }
+
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.state.groupRoom.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const groupRoomName = this.state.groupRoom.displayname;
+        const avatar = <BaseAvatar name={groupRoomName} width={36} height={36} url={avatarUrl} />;
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbarWrapper autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this._onCancel}>
+                        <img src="img/cancel.svg" width="18" height="18" className="mx_filterFlipColor" />
+                    </AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        { avatar }
+                    </div>
+
+                    <EmojiText element="h2">{ groupRoomName }</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.state.groupRoom.canonical_alias }
+                        </div>
+                    </div>
+
+                    { adminTools }
+                </GeminiScrollbarWrapper>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupRoomList.js

@@ -0,0 +1,145 @@
+/*
+Copyright 2017 New Vector Ltd.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import GroupStore from '../../../stores/GroupStore';
+import PropTypes from 'prop-types';
+
+const INITIAL_LOAD_NUM_ROOMS = 30;
+
+export default React.createClass({
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            rooms: null,
+            truncateAt: INITIAL_LOAD_NUM_ROOMS,
+            searchQuery: "",
+        };
+    },
+
+    componentWillMount: function() {
+        this._unmounted = false;
+        this._initGroupStore(this.props.groupId);
+    },
+
+    componentWillUnmount() {
+        this._unmounted = true;
+        this._unregisterGroupStore();
+    },
+
+    _unregisterGroupStore() {
+        GroupStore.unregisterListener(this.onGroupStoreUpdated);
+    },
+
+    _initGroupStore: function(groupId) {
+        GroupStore.registerListener(groupId, this.onGroupStoreUpdated);
+        // XXX: This should be more fluxy - let's get the error from GroupStore .getError or something
+        // XXX: This is also leaked - we should remove it when unmounting
+        GroupStore.on('error', (err, errorGroupId) => {
+            if (errorGroupId !== groupId) return;
+            this.setState({
+                rooms: null,
+            });
+        });
+    },
+
+    onGroupStoreUpdated: function() {
+        if (this._unmounted) return;
+        this.setState({
+            rooms: GroupStore.getGroupRooms(this.props.groupId),
+        });
+    },
+
+    _createOverflowTile: function(overflowCount, totalCount) {
+        // For now we'll pretend this is any entity. It should probably be a separate tile.
+        const EntityTile = sdk.getComponent("rooms.EntityTile");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const text = _t("and %(count)s others...", { count: overflowCount });
+        return (
+            <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
+                <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
+            } name={text} presenceState="online" suppressOnHover={true}
+            onClick={this._showFullRoomList} />
+        );
+    },
+
+    _showFullRoomList: function() {
+        this.setState({
+            truncateAt: -1,
+        });
+    },
+
+    onSearchQueryChanged: function(ev) {
+        this.setState({ searchQuery: ev.target.value });
+    },
+
+    makeGroupRoomTiles: function(query) {
+        const GroupRoomTile = sdk.getComponent("groups.GroupRoomTile");
+        query = (query || "").toLowerCase();
+
+        let roomList = this.state.rooms;
+        if (query) {
+            roomList = roomList.filter((room) => {
+                const matchesName = (room.name || "").toLowerCase().includes(query);
+                const matchesAlias = (room.canonicalAlias || "").toLowerCase().includes(query);
+                return matchesName || matchesAlias;
+            });
+        }
+
+        roomList = roomList.map((groupRoom, index) => {
+            return (
+                <GroupRoomTile
+                    key={index}
+                    groupId={this.props.groupId}
+                    groupRoom={groupRoom} />
+            );
+        });
+
+        return roomList;
+    },
+
+    render: function() {
+        if (this.state.rooms === null) {
+            return null;
+        }
+
+        const inputBox = (
+            <form autoComplete="off">
+                <input className="mx_GroupRoomList_query" id="mx_GroupRoomList_query" type="text"
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={_t('Filter community rooms')} />
+            </form>
+        );
+
+        const GeminiScrollbarWrapper = sdk.getComponent("elements.GeminiScrollbarWrapper");
+        const TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return (
+            <div className="mx_GroupRoomList">
+                { inputBox }
+                <GeminiScrollbarWrapper autoshow={true} className="mx_GroupRoomList_joined mx_GroupRoomList_outerWrapper">
+                    <TruncatedList className="mx_GroupRoomList_wrapper" truncateAt={this.state.truncateAt}
+                            createOverflowElement={this._createOverflowTile}>
+                        { this.makeGroupRoomTiles(this.state.searchQuery) }
+                    </TruncatedList>
+                </GeminiScrollbarWrapper>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupRoomTile.js

@@ -0,0 +1,73 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import {MatrixClient} from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { GroupRoomType } from '../../../groups';
+
+const GroupRoomTile = React.createClass({
+    displayName: 'GroupRoomTile',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+        groupRoom: GroupRoomType.isRequired,
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group_room',
+            groupId: this.props.groupId,
+            groupRoomId: this.props.groupRoom.roomId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const avatarUrl = this.context.matrixClient.mxcUrlToHttp(
+            this.props.groupRoom.avatarUrl,
+            36, 36, 'crop',
+        );
+
+        const av = (
+            <BaseAvatar name={this.props.groupRoom.displayname}
+                width={36} height={36}
+                url={avatarUrl}
+            />
+        );
+
+        return (
+            <AccessibleButton className="mx_GroupRoomTile" onClick={this.onClick}>
+                <div className="mx_GroupRoomTile_avatar">
+                    { av }
+                </div>
+                <div className="mx_GroupRoomTile_name">
+                    { this.props.groupRoom.displayname }
+                </div>
+            </AccessibleButton>
+        );
+    },
+});
+
+GroupRoomTile.contextTypes = {
+    matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+};
+
+
+export default GroupRoomTile;

src/components/views/groups/GroupTile.js

@@ -0,0 +1,138 @@
+/*
+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 PropTypes from 'prop-types';
+import {MatrixClient} from 'matrix-js-sdk';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import FlairStore from '../../../stores/FlairStore';
+
+function nop() {}
+
+const GroupTile = React.createClass({
+    displayName: 'GroupTile',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+        // Whether to show the short description of the group on the tile
+        showDescription: PropTypes.bool,
+        // Height of the group avatar in pixels
+        avatarHeight: PropTypes.number,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient).isRequired,
+    },
+
+    getInitialState() {
+        return {
+            profile: null,
+        };
+    },
+
+    getDefaultProps() {
+        return {
+            showDescription: true,
+            avatarHeight: 50,
+        };
+    },
+
+    componentWillMount: function() {
+        FlairStore.getGroupProfileCached(this.context.matrixClient, this.props.groupId).then((profile) => {
+            this.setState({profile});
+        }).catch((err) => {
+            console.error('Error whilst getting cached profile for GroupTile', err);
+        });
+    },
+
+    onMouseDown: function(e) {
+        e.preventDefault();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupId,
+        });
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+        const profile = this.state.profile || {};
+        const name = profile.name || this.props.groupId;
+        const avatarHeight = this.props.avatarHeight;
+        const descElement = this.props.showDescription ?
+            <div className="mx_GroupTile_desc">{ profile.shortDescription }</div> :
+            <div />;
+        const httpUrl = profile.avatarUrl ? this.context.matrixClient.mxcUrlToHttp(
+            profile.avatarUrl, avatarHeight, avatarHeight, "crop",
+        ) : null;
+        // XXX: Use onMouseDown as a workaround for https://github.com/atlassian/react-beautiful-dnd/issues/273
+        // instead of onClick. Otherwise we experience https://github.com/vector-im/riot-web/issues/6156
+        return <AccessibleButton className="mx_GroupTile" onMouseDown={this.onMouseDown} onClick={nop}>
+            <Droppable droppableId="my-groups-droppable" type="draggable-TagTile">
+                { (droppableProvided, droppableSnapshot) => (
+                    <div ref={droppableProvided.innerRef}>
+                        <Draggable
+                            key={"GroupTile " + this.props.groupId}
+                            draggableId={"GroupTile " + this.props.groupId}
+                            index={this.props.groupId}
+                            type="draggable-TagTile"
+                        >
+                            { (provided, snapshot) => (
+                                <div>
+                                    <div
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}
+                                    >
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar
+                                                name={name}
+                                                idName={this.props.groupId}
+                                                url={httpUrl}
+                                                width={avatarHeight}
+                                                height={avatarHeight} />
+                                        </div>
+                                    </div>
+                                    { /* Instead of a blank placeholder, use a copy of the avatar itself. */ }
+                                    { provided.placeholder ?
+                                        <div className="mx_GroupTile_avatar">
+                                            <BaseAvatar
+                                                name={name}
+                                                idName={this.props.groupId}
+                                                url={httpUrl}
+                                                width={avatarHeight}
+                                                height={avatarHeight} />
+                                        </div> :
+                                        <div />
+                                    }
+                                </div>
+                            ) }
+                        </Draggable>
+                    </div>
+                ) }
+            </Droppable>
+            <div className="mx_GroupTile_profile">
+                <div className="mx_GroupTile_name">{ name }</div>
+                { descElement }
+                <div className="mx_GroupTile_groupId">{ this.props.groupId }</div>
+            </div>
+        </AccessibleButton>;
+    },
+});
+
+export default GroupTile;

src/components/views/groups/GroupUserSettings.js

@@ -0,0 +1,89 @@
+/*
+Copyright 2017 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { MatrixClient } from 'matrix-js-sdk';
+import { _t } from '../../../languageHandler';
+
+export default React.createClass({
+    displayName: 'GroupUserSettings',
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    getInitialState() {
+        return {
+            error: null,
+            groups: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this.context.matrixClient.getJoinedGroups().done((result) => {
+            this.setState({groups: result.groups || [], error: null});
+        }, (err) => {
+            console.error(err);
+            this.setState({groups: null, error: err});
+        });
+    },
+
+    _renderGroupPublicity() {
+        let text = "";
+        let scrollbox = <div />;
+        const groups = this.state.groups;
+
+        if (this.state.error) {
+            text = _t('Something went wrong when trying to get your communities.');
+        } else if (groups === null) {
+            text = _t('Loading...');
+        } else if (groups.length > 0) {
+            const GroupPublicityToggle = sdk.getComponent('groups.GroupPublicityToggle');
+            const GeminiScrollbarWrapper = sdk.getComponent('elements.GeminiScrollbarWrapper');
+            const groupPublicityToggles = groups.map((groupId, index) => {
+                return <GroupPublicityToggle key={index} groupId={groupId} />;
+            });
+            text = _t('Display your community flair in rooms configured to show it.');
+            scrollbox = <div className="mx_GroupUserSettings_groupPublicity_scrollbox">
+                <GeminiScrollbarWrapper>
+                    { groupPublicityToggles }
+                </GeminiScrollbarWrapper>
+            </div>;
+        } else {
+            text = _t("You're not currently a member of any communities.");
+        }
+
+        return <div>
+            <h3>{ _t('Flair') }</h3>
+            <div className="mx_UserSettings_section">
+                <p>
+                    { text }
+                </p>
+                { scrollbox }
+            </div>
+        </div>;
+    },
+
+    render() {
+        const groupPublicity = this._renderGroupPublicity();
+
+        return <div>
+            { groupPublicity }
+        </div>;
+    },
+});

src/components/views/login/CaptchaForm.js

@@ -18,9 +18,10 @@ limitations under the License.
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { _t, _tJsx } from '../../../languageHandler';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
 
-var DIV_ID = 'mx_recaptcha';
+const DIV_ID = 'mx_recaptcha';
 
 /**
  * A pure UI component which displays a captcha form.
@@ -29,10 +30,10 @@ module.exports = React.createClass({
     displayName: 'CaptchaForm',
 
     propTypes: {
-        sitePublicKey: React.PropTypes.string,
+        sitePublicKey: PropTypes.string,
 
         // called with the captcha response
-        onCaptchaResponse: React.PropTypes.func,
+        onCaptchaResponse: PropTypes.func,
     },
 
     getDefaultProps: function() {
@@ -60,23 +61,22 @@ module.exports = React.createClass({
         } else {
             console.log("Loading recaptcha script...");
             window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
-            var protocol = global.location.protocol;
+            const protocol = global.location.protocol;
             if (protocol === "file:") {
-                var warning = document.createElement('div');
+                const warning = document.createElement('div');
                 // XXX: fix hardcoded app URL.  Better solutions include:
                 // * jumping straight to a hosted captcha page (but we don't support that yet)
                 // * embedding the captcha in an iframe (if that works)
                 // * using a better captcha lib
-                ReactDOM.render(_tJsx(
+                ReactDOM.render(_t(
                     "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
-                    /<a>(.*?)<\/a>/,
-                    (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }), warning);
+                    {},
+                    { 'a': (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }}), warning);
                 this.refs.recaptchaContainer.appendChild(warning);
-            }
-            else {
-                var scriptTag = document.createElement('script');
+            } else {
+                const scriptTag = document.createElement('script');
                 scriptTag.setAttribute(
-                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
+                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit",
                 );
                 this.refs.recaptchaContainer.appendChild(scriptTag);
             }
@@ -93,7 +93,7 @@ module.exports = React.createClass({
             throw new Error("Recaptcha did not load successfully");
         }
 
-        var publicKey = this.props.sitePublicKey;
+        const publicKey = this.props.sitePublicKey;
         if (!publicKey) {
             console.error("No public key for recaptcha!");
             throw new Error(
@@ -130,18 +130,18 @@ module.exports = React.createClass({
         if (this.state.errorText) {
             error = (
                 <div className="error">
-                    {this.state.errorText}
+                    { this.state.errorText }
                 </div>
             );
         }
 
         return (
             <div ref="recaptchaContainer">
-                {_t("This Home Server would like to make sure you are not a robot")}
-                <br/>
+                { _t("This Home Server would like to make sure you are not a robot") }
+                <br />
                 <div id={DIV_ID}></div>
-                {error}
+                { error }
             </div>
         );
-    }
+    },
 });