Merge branch 'develop' into luke/fix-render-1-1-avatars-when-others-leave

src/components/views/avatars/BaseAvatar.js

@@ -14,25 +14,26 @@ 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 AvatarLogic from '../../../Avatar';
 import sdk from '../../../index';
+import AccessibleButton from '../elements/AccessibleButton';
 
 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,
-        resizeMethod: React.PropTypes.string,
-        defaultToInitialLetter: React.PropTypes.bool // true to add default url
+        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: PropTypes.string,
+        defaultToInitialLetter: PropTypes.bool, // true to add default url
     },
 
     getDefaultProps: function() {
@@ -40,8 +41,8 @@ module.exports = React.createClass({
             width: 40,
             height: 40,
             resizeMethod: 'crop',
-            defaultToInitialLetter: true
-        }
+            defaultToInitialLetter: true,
+        };
     },
 
     getInitialState: function() {
@@ -50,15 +51,14 @@ module.exports = React.createClass({
 
     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;
@@ -71,31 +71,31 @@ module.exports = React.createClass({
         // 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,
             });
         }
     },
@@ -109,59 +109,92 @@ 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,
-            defaultToInitialLetter,
+            defaultToInitialLetter, onClick,
             ...otherProps
         } = this.props;
 
         if (imageUrl === this.state.defaultImageUrl) {
             const initialLetter = this._getInitialLetter(name);
+            const textNode = (
+                <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
+                    style={{ fontSize: (width * 0.65) + "px",
+                    width: width + "px",
+                    lineHeight: height + "px" }}
+                >
+                    { initialLetter }
+                </EmojiText>
+            );
+            const imgNode = (
+                <img className="mx_BaseAvatar_image" src={imageUrl}
+                    alt="" title={title} onError={this.onError}
+                    width={width} height={height} />
+            );
+            if (onClick != null) {
+                return (
+                    <AccessibleButton element='span' className="mx_BaseAvatar"
+                        onClick={onClick} {...otherProps}
+                    >
+                        { textNode }
+                        { imgNode }
+                    </AccessibleButton>
+                );
+            } else {
+                return (
+                    <span className="mx_BaseAvatar" {...otherProps}>
+                        { textNode }
+                        { imgNode }
+                    </span>
+                );
+            }
+        }
+        if (onClick != null) {
             return (
-                <span className="mx_BaseAvatar" {...otherProps}>
-                    <EmojiText className="mx_BaseAvatar_initial" aria-hidden="true"
-                            style={{ fontSize: (width * 0.65) + "px",
-                                    width: width + "px",
-                                    lineHeight: height + "px" }}>{initialLetter}</EmojiText>
-                    <img className="mx_BaseAvatar_image" src={imageUrl}
-                        alt="" title={title} onError={this.onError}
-                        width={width} height={height} />
-                </span>
+                <AccessibleButton className="mx_BaseAvatar mx_BaseAvatar_image"
+                    element='img'
+                    src={imageUrl}
+                    onClick={onClick}
+                    onError={this.onError}
+                    width={width} height={height}
+                    title={title} alt=""
+                    {...otherProps} />
+            );
+        } else {
+            return (
+                <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
+                    onError={this.onError}
+                    width={width} height={height}
+                    title={title} alt=""
+                    {...otherProps} />
             );
         }
-        return (
-            <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
-                onError={this.onError}
-                width={width} height={height}
-                title={title} alt=""
-                {...otherProps} />
-        );
-    }
+    },
 });

src/components/views/avatars/GroupAvatar.js

@@ -0,0 +1,68 @@
+/*
+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 sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default React.createClass({
+    displayName: 'GroupAvatar',
+
+    propTypes: {
+        groupId: PropTypes.string,
+        groupName: PropTypes.string,
+        groupAvatarUrl: PropTypes.string,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
+        onClick: PropTypes.func,
+    },
+
+    getDefaultProps: function() {
+        return {
+            width: 36,
+            height: 36,
+            resizeMethod: 'crop',
+        };
+    },
+
+    getGroupAvatarUrl: function() {
+        return MatrixClientPeg.get().mxcUrlToHttp(
+            this.props.groupAvatarUrl,
+            this.props.width,
+            this.props.height,
+            this.props.resizeMethod,
+        );
+    },
+
+    render: function() {
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        // 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, groupName, ...otherProps} = this.props;
+
+        return (
+            <BaseAvatar
+                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() {
@@ -42,7 +43,7 @@ module.exports = React.createClass({
             height: 40,
             resizeMethod: 'crop',
             viewUserOnClick: false,
-        }
+        };
     },
 
     getInitialState: 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 = () => {
@@ -78,12 +79,12 @@ module.exports = React.createClass({
                     action: 'view_user',
                     member: this.props.member,
                 });
-            }
+            };
         }
 
         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/MemberPresenceAvatar.js

@@ -0,0 +1,169 @@
+/*
+ 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.
+ */
+
+'use strict';
+
+import React from "react";
+import PropTypes from 'prop-types';
+import * as sdk from "../../../index";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import AccessibleButton from '../elements/AccessibleButton';
+import Presence from "../../../Presence";
+import dispatcher from "../../../dispatcher";
+import * as ContextualMenu from "../../structures/ContextualMenu";
+import SettingsStore from "../../../settings/SettingsStore";
+
+// This is an avatar with presence information and controls on it.
+module.exports = React.createClass({
+    displayName: 'MemberPresenceAvatar',
+
+    propTypes: {
+        member: PropTypes.object.isRequired,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
+    },
+
+    getDefaultProps: function() {
+        return {
+            width: 40,
+            height: 40,
+            resizeMethod: 'crop',
+        };
+    },
+
+    getInitialState: function() {
+        let presenceState = null;
+        let presenceMessage = null;
+
+        // RoomMembers do not necessarily have a user.
+        if (this.props.member.user) {
+            presenceState = this.props.member.user.presence;
+            presenceMessage = this.props.member.user.presenceStatusMsg;
+        }
+
+        return {
+            status: presenceState,
+            message: presenceMessage,
+        };
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("User.presence", this.onUserPresence);
+        this.dispatcherRef = dispatcher.register(this.onAction);
+    },
+
+    componentWillUnmount: function() {
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("User.presence", this.onUserPresence);
+        }
+        dispatcher.unregister(this.dispatcherRef);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== "self_presence_updated") return;
+        if (this.props.member.userId !== MatrixClientPeg.get().getUserId()) return;
+        this.setState({
+            status: payload.statusInfo.presence,
+            message: payload.statusInfo.status_msg,
+        });
+    },
+
+    onUserPresence: function(event, user) {
+        if (user.userId !== MatrixClientPeg.get().getUserId()) return;
+        this.setState({
+            status: user.presence,
+            message: user.presenceStatusMsg,
+        });
+    },
+
+    onStatusChange: function(newStatus) {
+        Presence.stopMaintainingStatus();
+        if (newStatus === "online") {
+            Presence.setState(newStatus);
+        } else Presence.setState(newStatus, null, true);
+    },
+
+    onClick: function(e) {
+        const PresenceContextMenu = sdk.getComponent('context_menus.PresenceContextMenu');
+        const elementRect = e.target.getBoundingClientRect();
+
+        // The window X and Y offsets are to adjust position when zoomed in to page
+        const x = (elementRect.left + window.pageXOffset) - (elementRect.width / 2) + 3;
+        const chevronOffset = 12;
+        let y = elementRect.top + (elementRect.height / 2) + window.pageYOffset;
+        y = y - (chevronOffset + 4); // where 4 is 1/4 the height of the chevron
+
+        ContextualMenu.createMenu(PresenceContextMenu, {
+            chevronOffset: chevronOffset,
+            chevronFace: 'bottom',
+            left: x,
+            top: y,
+            menuWidth: 125,
+            currentStatus: this.state.status,
+            onChange: this.onStatusChange,
+        });
+
+        e.stopPropagation();
+
+        // XXX NB the following assumes that user is non-null, which is not valid
+        // const presenceState = this.props.member.user.presence;
+        // const presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
+        // const presenceLastTs = this.props.member.user.lastPresenceTs;
+        // const presenceCurrentlyActive = this.props.member.user.currentlyActive;
+        // const presenceMessage = this.props.member.user.presenceStatusMsg;
+    },
+
+    render: function() {
+        const MemberAvatar = sdk.getComponent("avatars.MemberAvatar");
+
+        let onClickFn = null;
+        if (this.props.member.userId === MatrixClientPeg.get().getUserId()) {
+            onClickFn = this.onClick;
+        }
+
+        const avatarNode = (
+            <MemberAvatar member={this.props.member} width={this.props.width} height={this.props.height}
+                          resizeMethod={this.props.resizeMethod} />
+        );
+        let statusNode = (
+            <span className={"mx_MemberPresenceAvatar_status mx_MemberPresenceAvatar_status_" + this.state.status} />
+        );
+
+        // LABS: Disable presence management functions for now
+        // Also disable the presence information if there's no status information
+        if (!SettingsStore.isFeatureEnabled("feature_presence_management") || !this.state.status) {
+            statusNode = null;
+            onClickFn = null;
+        }
+
+        let avatar = (
+            <div className="mx_MemberPresenceAvatar">
+                { avatarNode }
+                { statusNode }
+            </div>
+        );
+        if (onClickFn) {
+            avatar = (
+                <AccessibleButton onClick={onClickFn} className="mx_MemberPresenceAvatar" element="div">
+                    { avatarNode }
+                    { statusNode }
+                </AccessibleButton>
+            );
+        }
+        return avatar;
+    },
+});

src/components/views/avatars/RoomAvatar.js

@@ -13,11 +13,11 @@ 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 sdk from "../../../index";
 
 module.exports = React.createClass({
     displayName: 'RoomAvatar',
@@ -26,11 +26,11 @@ 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,
     },
 
     getDefaultProps: function() {
@@ -39,19 +39,19 @@ module.exports = React.createClass({
             height: 36,
             resizeMethod: 'crop',
             oobData: {},
-        }
+        };
     },
 
     getInitialState: function() {
         return {
-            urls: this.getImageUrls(this.props)
+            urls: this.getImageUrls(this.props),
         };
     },
 
     componentWillReceiveProps: function(newProps) {
         this.setState({
-            urls: this.getImageUrls(newProps)
-        })
+            urls: this.getImageUrls(newProps),
+        });
     },
 
     getImageUrls: function(props) {
@@ -59,34 +59,37 @@ module.exports = React.createClass({
             ContentRepo.getHttpUriForMxc(
                 MatrixClientPeg.get().getHomeserverUrl(),
                 props.oobData.avatarUrl,
-                props.width, props.height, props.resizeMethod
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
+                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 != "");
         });
     },
 
     getRoomAvatarUrl: function(props) {
-        if (!this.props.room) return null;
+        if (!props.room) return null;
 
         return props.room.getAvatarUrl(
             MatrixClientPeg.get().getHomeserverUrl(),
-            props.width, props.height, props.resizeMethod,
-            false
+            Math.floor(props.width * window.devicePixelRatio),
+            Math.floor(props.height * window.devicePixelRatio),
+            props.resizeMethod,
+            false,
         );
     },
 
     getOneToOneAvatar: function(props) {
-        if (!this.props.room) return null;
+        if (!props.room) return null;
 
-        var mlist = props.room.currentState.members;
-        var userIds = [];
-        var leftUserIds = [];
+        const mlist = props.room.currentState.members;
+        const userIds = [];
+        const leftUserIds = [];
         // for .. in optimisation to return early if there are >2 keys
-        for (var uid in mlist) {
+        for (const uid in mlist) {
             if (mlist.hasOwnProperty(uid)) {
                 if (["join", "invite"].includes(mlist[uid].membership)) {
                     userIds.push(uid);
@@ -100,7 +103,7 @@ module.exports = React.createClass({
         }
 
         if (userIds.length == 2) {
-            var theOtherGuy = null;
+            let theOtherGuy = null;
             if (mlist[userIds[0]].userId == MatrixClientPeg.get().credentials.userId) {
                 theOtherGuy = mlist[userIds[1]];
             } else {
@@ -108,8 +111,10 @@ module.exports = React.createClass({
             }
             return theOtherGuy.getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                props.width, props.height, props.resizeMethod,
-                false
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
+                props.resizeMethod,
+                false,
             );
         } else if (userIds.length == 1) {
             // The other 1-1 user left, leaving just the current user, so show the left user's avatar
@@ -122,31 +127,27 @@ module.exports = React.createClass({
             }
             return mlist[userIds[0]].getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                props.width, props.height, props.resizeMethod,
-                    false
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
+                props.resizeMethod,
+                false,
             );
         } else {
            return null;
         }
     },
 
-    getFallbackAvatar: function(props) {
-        if (!this.props.room) return null;
-
-        return Avatar.defaultAvatarUrlForString(props.room.roomId);
-    },
-
     render: function() {
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
 
-        var {room, oobData, ...otherProps} = this.props;
+        const {room, oobData, ...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} />
         );
-    }
+    },
 });

src/components/views/create_room/CreateRoomButton.js

@@ -16,12 +16,13 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-
+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}>Create Room</button>
+            <button className="mx_CreateRoomButton" onClick={this.onClick}>{ _t("Create Room") }</button>
         );
-    }
+    },
 });

src/components/views/create_room/Presets.js

@@ -16,9 +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",
@@ -27,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,
@@ -40,16 +42,16 @@ module.exports = React.createClass({
     },
 
     onValueChanged: function(ev) {
-        this.props.onChange(ev.target.value)
+        this.props.onChange(ev.target.value);
     },
 
     render: function() {
         return (
             <select className="mx_Presets" onChange={this.onValueChanged} value={this.props.preset}>
-                <option value={this.Presets.PrivateChat}>Private Chat</option>
-                <option value={this.Presets.PublicChat}>Public Chat</option>
-                <option value={this.Presets.Custom}>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,16 +14,18 @@ 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({
     displayName: 'RoomAlias',
     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() {
@@ -34,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);
             }
@@ -51,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);
             }
@@ -74,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) {
@@ -83,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;
@@ -94,9 +96,9 @@ module.exports = React.createClass({
 
     render: function() {
         return (
-            <input type="text" className="mx_RoomAlias" placeholder="Alias (optional)"
+            <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

@@ -0,0 +1,600 @@
+/*
+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.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Promise from 'bluebird';
+import { addressTypes, getAddressType } from '../../../UserAddress.js';
+import GroupStoreCache from '../../../stores/GroupStoreCache';
+
+const TRUNCATE_QUERY_LIST = 40;
+const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
+
+module.exports = React.createClass({
+    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,
+        button: PropTypes.string,
+        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() {
+        return {
+            value: "",
+            focus: true,
+            validAddressTypes: addressTypes,
+            pickerType: 'user',
+            includeSelf: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            error: false,
+
+            // List of UserAddressType objects representing
+            // the list of addresses we're going to invite
+            userList: [],
+
+            // Whether a search is ongoing
+            busy: false,
+            // An error message generated during the user directory search
+            searchError: null,
+            // Whether the server supports the user_directory API
+            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: [],
+        };
+    },
+
+    componentDidMount: function() {
+        if (this.props.focus) {
+            // Set the cursor at the end of the text input
+            this.refs.textinput.value = this.props.value;
+        }
+    },
+
+    onButtonClick: function() {
+        let userList = this.state.userList.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 (this.refs.textinput.value !== '') {
+            userList = this._addInputToList();
+            if (userList === null) return;
+        }
+        this.props.onFinished(true, userList);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    onKeyDown: function(e) {
+        if (e.keyCode === 27) { // escape
+            e.stopPropagation();
+            e.preventDefault();
+            this.props.onFinished(false);
+        } else if (e.keyCode === 38) { // up arrow
+            e.stopPropagation();
+            e.preventDefault();
+            if (this.addressSelector) this.addressSelector.moveSelectionUp();
+        } else if (e.keyCode === 40) { // down arrow
+            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
+            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
+            e.stopPropagation();
+            e.preventDefault();
+            this.onDismissed(this.state.userList.length - 1)();
+        } else if (e.keyCode === 13) { // enter
+            e.stopPropagation();
+            e.preventDefault();
+            if (this.refs.textinput.value == '') {
+                // if there's nothing in the input box, submit the form
+                this.onButtonClick();
+            } else {
+                this._addInputToList();
+            }
+        } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
+            e.stopPropagation();
+            e.preventDefault();
+            this._addInputToList();
+        }
+    },
+
+    onQueryChanged: function(ev) {
+        const query = ev.target.value;
+        if (this.queryChangedDebouncer) {
+            clearTimeout(this.queryChangedDebouncer);
+        }
+        // Only do search if there is something to search
+        if (query.length > 0 && query != '@' && query.length >= 2) {
+            this.queryChangedDebouncer = setTimeout(() => {
+                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 {
+                    console.error('Unknown pickerType', this.props.pickerType);
+                }
+            }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
+        } else {
+            this.setState({
+                queryList: [],
+                query: "",
+                searchError: null,
+            });
+        }
+    },
+
+    onDismissed: function(index) {
+        return () => {
+            const userList = this.state.userList.slice();
+            userList.splice(index, 1);
+            this.setState({
+                userList: userList,
+                queryList: [],
+                query: "",
+            });
+            if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+        };
+    },
+
+    onClick: function(index) {
+        return () => {
+            this.onSelected(index);
+        };
+    },
+
+    onSelected: function(index) {
+        const userList = this.state.userList.slice();
+        userList.push(this.state.queryList[index]);
+        this.setState({
+            userList: userList,
+            queryList: [],
+            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 groupStore = GroupStoreCache.getGroupStore(this.props.groupId);
+        const results = [];
+        groupStore.getGroupRooms().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,
+            query,
+            searchError: null,
+        });
+        MatrixClientPeg.get().searchUserDirectory({
+            term: query,
+        }).then((resp) => {
+            // The query might have changed since we sent the request, so ignore
+            // responses for anything other than the latest query.
+            if (this.state.query !== query) {
+                return;
+            }
+            this._processResults(resp.results, query);
+        }).catch((err) => {
+            console.error('Error whilst searching user directory: ', err);
+            this.setState({
+                searchError: err.errcode ? err.message : _t('Something went wrong!'),
+            });
+            if (err.errcode === 'M_UNRECOGNIZED') {
+                this.setState({
+                    serverSupportsUserDirectory: false,
+                });
+                // Do a local search immediately
+                this._doLocalSearch(query);
+            }
+        }).done(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    _doLocalSearch: function(query) {
+        this.setState({
+            query,
+            searchError: null,
+        });
+        const queryLowercase = query.toLowerCase();
+        const results = [];
+        MatrixClientPeg.get().getUsers().forEach((user) => {
+            if (user.userId.toLowerCase().indexOf(queryLowercase) === -1 &&
+                user.displayName.toLowerCase().indexOf(queryLowercase) === -1
+            ) {
+                return;
+            }
+
+            // Put results in the format of the new API
+            results.push({
+                user_id: user.userId,
+                display_name: user.displayName,
+                avatar_url: user.avatarUrl,
+            });
+        });
+        this._processResults(results, query);
+    },
+
+    _processResults: function(results, query) {
+        const queryList = [];
+        results.forEach((result) => {
+            if (result.room_id) {
+                queryList.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-user-id',
+                address: result.user_id,
+                displayName: result.display_name,
+                avatarMxc: result.avatar_url,
+                isKnown: true,
+            });
+        });
+
+        // If the query is a valid address, add an entry for that
+        // This is important, otherwise there's no way to invite
+        // a perfectly valid address if there are close matches.
+        const addrType = getAddressType(query);
+        if (this.props.validAddressTypes.includes(addrType)) {
+            queryList.unshift({
+                addressType: addrType,
+                address: query,
+                isKnown: false,
+            });
+            if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+            if (addrType == 'email') {
+                this._lookupThreepid(addrType, query).done();
+            }
+        }
+        this.setState({
+            queryList,
+            error: false,
+        }, () => {
+            if (this.addressSelector) this.addressSelector.moveSelectionTop();
+        });
+    },
+
+    _addInputToList: function() {
+        const addressText = this.refs.textinput.value.trim();
+        const addrType = getAddressType(addressText);
+        const addrObj = {
+            addressType: addrType,
+            address: addressText,
+            isKnown: false,
+        };
+        if (!this.props.validAddressTypes.includes(addrType)) {
+            this.setState({ error: true });
+            return null;
+        } 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);
+        this.setState({
+            userList: userList,
+            queryList: [],
+            query: "",
+        });
+        if (this._cancelThreepidLookup) this._cancelThreepidLookup();
+        return userList;
+    },
+
+    _lookupThreepid: function(medium, address) {
+        let cancelled = false;
+        // Note that we can't safely remove this after we're done
+        // because we don't know that it's the same one, so we just
+        // leave it: it's replacing the old one each time so it's
+        // not like they leak.
+        this._cancelThreepidLookup = function() {
+            cancelled = true;
+        };
+
+        // wait a bit to let the user finish typing
+        return Promise.delay(500).then(() => {
+            if (cancelled) return null;
+            return MatrixClientPeg.get().lookupThreePid(medium, address);
+        }).then((res) => {
+            if (res === null || !res.mxid) return null;
+            if (cancelled) return null;
+
+            return MatrixClientPeg.get().getProfileInfo(res.mxid);
+        }).then((res) => {
+            if (res === null) return null;
+            if (cancelled) return null;
+            this.setState({
+                queryList: [{
+                    // a UserAddressType
+                    addressType: medium,
+                    address: address,
+                    displayName: res.displayname,
+                    avatarMxc: res.avatar_url,
+                    isKnown: true,
+                }],
+            });
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        const AddressSelector = sdk.getComponent("elements.AddressSelector");
+        this.scrollElement = null;
+
+        const query = [];
+        // create the invite list
+        if (this.state.userList.length > 0) {
+            const AddressTile = sdk.getComponent("elements.AddressTile");
+            for (let i = 0; i < this.state.userList.length; i++) {
+                query.push(
+                    <AddressTile
+                        key={i}
+                        address={this.state.userList[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}
+                rows="1"
+                id="textinput"
+                ref="textinput"
+                className="mx_ChatInviteDialog_input"
+                onChange={this.onQueryChanged}
+                placeholder={this.props.placeholder}
+                defaultValue={this.props.value}
+                autoFocus={this.props.focus}>
+            </textarea>,
+        );
+
+        let error;
+        let addressSelector;
+        if (this.state.error) {
+            let tryUsing = '';
+            const validTypeDescriptions = this.props.validAddressTypes.map((t) => {
+                return {
+                    'mx-user-id': _t("Matrix ID"),
+                    'mx-room-id': _t("Matrix Room ID"),
+                    'email': _t("email address"),
+                }[t];
+            });
+            tryUsing = _t("Try using one of the following valid address types: %(validTypesList)s.", {
+                validTypesList: validTypeDescriptions.join(", "),
+            });
+            error = <div className="mx_ChatInviteDialog_error">
+                { _t("You have entered an invalid address.") }
+                <br />
+                { tryUsing }
+            </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>;
+        } else {
+            addressSelector = (
+                <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
+                    addressList={this.state.queryList}
+                    showAddress={this.props.pickerType === 'user'}
+                    onSelected={this.onSelected}
+                    truncateAt={TRUNCATE_QUERY_LIST}
+                />
+            );
+        }
+
+        return (
+            <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>
+                <div className="mx_Dialog_content">
+                    <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
+                    { error }
+                    { addressSelector }
+                    { this.props.extraNode }
+                </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onButtonClick}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/BaseDialog.js

@@ -0,0 +1,92 @@
+/*
+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 { KeyCode } from '../../../Keyboard';
+import AccessibleButton from '../elements/AccessibleButton';
+import sdk from '../../../index';
+
+/**
+ * Basic container for modal dialogs.
+ *
+ * Includes a div for the title, and a keypress handler which cancels the
+ * dialog on escape.
+ */
+export default React.createClass({
+    displayName: 'BaseDialog',
+
+    propTypes: {
+        // onFinished callback to call when Escape is pressed
+        onFinished: PropTypes.func.isRequired,
+
+        // callback to call when Enter is pressed
+        onEnterPressed: PropTypes.func,
+
+        // called when a key is pressed
+        onKeyDown: PropTypes.func,
+
+        // CSS class to apply to dialog div
+        className: PropTypes.string,
+
+        // Title for the dialog.
+        // (could probably actually be something more complicated than a string if desired)
+        title: PropTypes.string.isRequired,
+
+        // children should be the content of the dialog
+        children: PropTypes.node,
+    },
+
+    _onKeyDown: function(e) {
+        if (this.props.onKeyDown) {
+            this.props.onKeyDown(e);
+        }
+        if (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);
+            }
+        }
+    },
+
+    _onCancelClick: function(e) {
+        this.props.onFinished();
+    },
+
+    render: function() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        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 ' + this.props.titleClass}>
+                    { this.props.title }
+                </div>
+                { this.props.children }
+            </div>
+        );
+    },
+});

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -0,0 +1,194 @@
+/*
+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 sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import DMRoomMap from '../../../utils/DMRoomMap';
+import AccessibleButton from '../elements/AccessibleButton';
+import Unread from '../../../Unread';
+import classNames from 'classnames';
+
+export default class ChatCreateOrReuseDialog extends React.Component {
+
+    constructor(props) {
+        super(props);
+        this.onRoomTileClick = this.onRoomTileClick.bind(this);
+
+        this.state = {
+            tiles: [],
+            profile: {
+                displayName: null,
+                avatarUrl: null,
+            },
+            profileError: null,
+        };
+    }
+
+    componentWillMount() {
+        const client = MatrixClientPeg.get();
+
+        const dmRoomMap = new DMRoomMap(client);
+        const dmRooms = dmRoomMap.getDMRoomsForUserId(this.props.userId);
+
+        const RoomTile = sdk.getComponent("rooms.RoomTile");
+
+        const tiles = [];
+        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"
+                );
+                tiles.push(
+                    <RoomTile key={room.roomId} room={room}
+                        collapsed={false}
+                        selected={false}
+                        unread={Unread.doesRoomHaveUnreadMessages(room)}
+                        highlight={highlight}
+                        isInvite={me.membership == "invite"}
+                        onClick={this.onRoomTileClick}
+                    />,
+                );
+            }
+        }
+
+        this.setState({
+            tiles: tiles,
+        });
+
+        if (tiles.length === 0) {
+            this.setState({
+                busyProfile: true,
+            });
+            MatrixClientPeg.get().getProfileInfo(this.props.userId).done((resp) => {
+                const profile = {
+                    displayName: resp.displayname,
+                    avatarUrl: null,
+                };
+                if (resp.avatar_url) {
+                    profile.avatarUrl = MatrixClientPeg.get().mxcUrlToHttp(
+                        resp.avatar_url, 48, 48, "crop",
+                    );
+                }
+                this.setState({
+                    busyProfile: false,
+                    profile: profile,
+                });
+            }, (err) => {
+                console.error(
+                    'Unable to get profile for user ' + this.props.userId + ':',
+                    err,
+                );
+                this.setState({
+                    busyProfile: false,
+                    profileError: err,
+                });
+            });
+        }
+    }
+
+    onRoomTileClick(roomId) {
+        this.props.onExistingRoomSelected(roomId);
+    }
+
+    render() {
+        let title = '';
+        let content = null;
+        if (this.state.tiles.length > 0) {
+            // Show the existing rooms with a "+" to add a new dm
+            title = _t('Create a new chat or reuse an existing one');
+            const labelClasses = classNames({
+                mx_MemberInfo_createRoom_label: true,
+                mx_RoomTile_name: true,
+            });
+            const startNewChat = <AccessibleButton
+                className="mx_MemberInfo_createRoom"
+                onClick={this.props.onNewDMClick}
+            >
+                <div className="mx_RoomTile_avatar">
+                    <img src="img/create-big.svg" width="26" height="26" />
+                </div>
+                <div className={labelClasses}><i>{ _t("Start new chat") }</i></div>
+            </AccessibleButton>;
+            content = <div className="mx_Dialog_content">
+                { _t('You already have existing direct chats with this user:') }
+                <div className="mx_ChatCreateOrReuseDialog_tiles">
+                    { this.state.tiles }
+                    { startNewChat }
+                </div>
+            </div>;
+        } 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');
+
+            let profile = null;
+            if (this.state.busyProfile) {
+                profile = <Spinner />;
+            } else if (this.state.profileError) {
+                profile = <div className="error">
+                    Unable to load profile information for { this.props.userId }
+                </div>;
+            } else {
+                profile = <div className="mx_ChatCreateOrReuseDialog_profile">
+                    <BaseAvatar
+                        name={this.state.profile.displayName || this.props.userId}
+                        url={this.state.profile.avatarUrl}
+                        width={48} height={48}
+                    />
+                    <div className="mx_ChatCreateOrReuseDialog_profile_name">
+                        { this.state.profile.displayName || this.props.userId }
+                    </div>
+                </div>;
+            }
+            content = <div>
+                <div className="mx_Dialog_content">
+                    <p>
+                        { _t('Click on the button below to start chatting!') }
+                    </p>
+                    { profile }
+                </div>
+                <DialogButtons primaryButton={_t('Start Chatting')}
+                    onPrimaryButtonClick={this.props.onNewDMClick} />
+            </div>;
+        }
+
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        return (
+            <BaseDialog className='mx_ChatCreateOrReuseDialog'
+                onFinished={this.props.onFinished.bind(false)}
+                title={title}
+            >
+                { content }
+            </BaseDialog>
+        );
+    }
+}
+
+ChatCreateOrReuseDialog.propTyps = {
+    userId: PropTypes.string.isRequired,
+    // Called when clicking outside of the dialog
+    onFinished: PropTypes.func.isRequired,
+    onNewDMClick: PropTypes.func.isRequired,
+    onExistingRoomSelected: PropTypes.func.isRequired,
+};

src/components/views/dialogs/ChatInviteDialog.js

@@ -1,431 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-var React = require("react");
-var classNames = require('classnames');
-var sdk = require("../../../index");
-var Invite = require("../../../Invite");
-var createRoom = require("../../../createRoom");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var DMRoomMap = require('../../../utils/DMRoomMap');
-var rate_limited_func = require("../../../ratelimitedfunc");
-var dis = require("../../../dispatcher");
-var Modal = require('../../../Modal');
-
-const TRUNCATE_QUERY_LIST = 40;
-
-module.exports = React.createClass({
-    displayName: "ChatInviteDialog",
-    propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
-        ]),
-        value: React.PropTypes.string,
-        placeholder: React.PropTypes.string,
-        roomId: React.PropTypes.string,
-        button: React.PropTypes.string,
-        focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired
-    },
-
-    getDefaultProps: function() {
-        return {
-            title: "Start a chat",
-            description: "Who would you like to communicate with?",
-            value: "",
-            placeholder: "User ID, Name or email",
-            button: "Start Chat",
-            focus: true
-        };
-    },
-
-    getInitialState: function() {
-        return {
-            error: false,
-            inviteList: [],
-            queryList: [],
-        };
-    },
-
-    componentDidMount: function() {
-        if (this.props.focus) {
-            // Set the cursor at the end of the text input
-            this.refs.textinput.value = this.props.value;
-        }
-        this._updateUserList();
-    },
-
-    onButtonClick: function() {
-        var inviteList = this.state.inviteList.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 inviteList
-        var check = Invite.isValidAddress(this.refs.textinput.value);
-        if (check === true || check === null) {
-            inviteList.push(this.refs.textinput.value);
-        } else if (this.refs.textinput.value.length > 0) {
-            this.setState({ error: true });
-            return;
-        }
-
-        if (inviteList.length > 0) {
-            if (this._isDmChat(inviteList)) {
-                // Direct Message chat
-                var room = this._getDirectMessageRoom(inviteList[0]);
-                if (room) {
-                    // A Direct Message room already exists for this user and you
-                    // so go straight to that room
-                    dis.dispatch({
-                        action: 'view_room',
-                        room_id: room.roomId,
-                    });
-                    this.props.onFinished(true, inviteList[0]);
-                } else {
-                    this._startChat(inviteList);
-                }
-            } else {
-                // Multi invite chat
-                this._startChat(inviteList);
-            }
-        } else {
-            // No addresses supplied
-            this.setState({ error: true });
-        }
-    },
-
-    onCancel: function() {
-        this.props.onFinished(false);
-    },
-
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        } else if (e.keyCode === 38) { // up arrow
-            e.stopPropagation();
-            e.preventDefault();
-            this.addressSelector.onKeyUp();
-        } else if (e.keyCode === 40) { // down arrow
-            e.stopPropagation();
-            e.preventDefault();
-            this.addressSelector.onKeyDown();
-        } else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
-            e.stopPropagation();
-            e.preventDefault();
-            this.addressSelector.onKeySelect();
-        } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
-            e.stopPropagation();
-            e.preventDefault();
-            this.onDismissed(this.state.inviteList.length - 1)();
-        } else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            this.onButtonClick();
-        } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
-            e.stopPropagation();
-            e.preventDefault();
-            var check = Invite.isValidAddress(this.refs.textinput.value);
-            if (check === true || check === null) {
-                var inviteList = this.state.inviteList.slice();
-                inviteList.push(this.refs.textinput.value.trim());
-                this.setState({
-                    inviteList: inviteList,
-                    queryList: [],
-                });
-            } else {
-                this.setState({ error: true });
-            }
-        }
-    },
-
-    onQueryChanged: function(ev) {
-        var query = ev.target.value;
-        var queryList = [];
-
-        // Only do search if there is something to search
-        if (query.length > 0) {
-            queryList = this._userList.filter((user) => {
-                return this._matches(query, user);
-            });
-        }
-
-        this.setState({
-            queryList: queryList,
-            error: false,
-        });
-    },
-
-    onDismissed: function(index) {
-        var self = this;
-        return function() {
-            var inviteList = self.state.inviteList.slice();
-            inviteList.splice(index, 1);
-            self.setState({
-                inviteList: inviteList,
-                queryList: [],
-            });
-        }
-    },
-
-    onClick: function(index) {
-        var self = this;
-        return function() {
-            self.onSelected(index);
-        };
-    },
-
-    onSelected: function(index) {
-        var inviteList = this.state.inviteList.slice();
-        inviteList.push(this.state.queryList[index].userId);
-        this.setState({
-            inviteList: inviteList,
-            queryList: [],
-        });
-    },
-
-    _getDirectMessageRoom: function(addr) {
-        const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
-        var dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
-        if (dmRooms.length > 0) {
-            // Cycle through all the DM rooms and find the first non forgotten or parted room
-            for (let i = 0; i < dmRooms.length; i++) {
-                let room = MatrixClientPeg.get().getRoom(dmRooms[i]);
-                if (room) {
-                    const me = room.getMember(MatrixClientPeg.get().credentials.userId);
-                    if (me.membership == 'join') {
-                        return room;
-                    }
-                }
-            }
-        }
-        return null;
-    },
-
-    _startChat: function(addrs) {
-        if (MatrixClientPeg.get().isGuest()) {
-            var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: "Please Register",
-                description: "Guest users can't invite users. Please register."
-            });
-            return;
-        }
-
-        if (this.props.roomId) {
-            // Invite new user to a room
-            var self = this;
-            Invite.inviteMultipleToRoom(this.props.roomId, addrs)
-            .then(function(addrs) {
-                var room = MatrixClientPeg.get().getRoom(self.props.roomId);
-                return self._showAnyInviteErrors(addrs, room);
-            })
-            .catch(function(err) {
-                console.error(err.stack);
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failure to invite",
-                    description: err.toString()
-                });
-                return null;
-            })
-            .done();
-        } else if (this._isDmChat(addrs)) {
-            // Start the DM chat
-            createRoom({dmUserId: addrs[0]})
-            .catch(function(err) {
-                console.error(err.stack);
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failure to invite user",
-                    description: err.toString()
-                });
-                return null;
-            })
-            .done();
-        } else {
-            // Start multi user chat
-            var self = this;
-            var room;
-            createRoom().then(function(roomId) {
-                room = MatrixClientPeg.get().getRoom(roomId);
-                return Invite.inviteMultipleToRoom(roomId, addrs);
-            })
-            .then(function(addrs) {
-                return self._showAnyInviteErrors(addrs, room);
-            })
-            .catch(function(err) {
-                console.error(err.stack);
-                var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                Modal.createDialog(ErrorDialog, {
-                    title: "Failure to invite",
-                    description: err.toString()
-                });
-                return null;
-            })
-            .done();
-        }
-
-        // Close - this will happen before the above, as that is async
-        this.props.onFinished(true, addrs);
-    },
-
-    _updateUserList: new rate_limited_func(function() {
-        // Get all the users
-        this._userList = MatrixClientPeg.get().getUsers();
-    }, 500),
-
-    // This is the search algorithm for matching users
-    _matches: function(query, user) {
-        var name = user.displayName.toLowerCase();
-        var uid = user.userId.toLowerCase();
-        query = query.toLowerCase();
-
-        // don't match any that are already on the invite list
-        if (this._isOnInviteList(uid)) {
-            return false;
-        }
-
-        // ignore current user
-        if (uid === MatrixClientPeg.get().credentials.userId) {
-            return false;
-        }
-
-        // direct prefix matches
-        if (name.indexOf(query) === 0 || uid.indexOf(query) === 0) {
-            return true;
-        }
-
-        // strip @ on uid and try matching again
-        if (uid.length > 1 && uid[0] === "@" && uid.substring(1).indexOf(query) === 0) {
-            return true;
-        }
-
-        // split spaces in name and try matching constituent parts
-        var parts = name.split(" ");
-        for (var i = 0; i < parts.length; i++) {
-            if (parts[i].indexOf(query) === 0) {
-                return true;
-            }
-        }
-        return false;
-    },
-
-    _isOnInviteList: function(uid) {
-        for (let i = 0; i < this.state.inviteList.length; i++) {
-            if (this.state.inviteList[i].toLowerCase() === uid) {
-                return true;
-            }
-        }
-        return false;
-    },
-
-    _isDmChat: function(addrs) {
-        if (addrs.length === 1 && Invite.getAddressType(addrs[0]) === "mx" && !this.props.roomId) {
-            return true;
-        } else {
-            return false;
-        }
-    },
-
-    _showAnyInviteErrors: function(addrs, room) {
-        // Show user any errors
-        var errorList = [];
-        for (var addr in addrs) {
-            if (addrs.hasOwnProperty(addr) && addrs[addr] === "error") {
-                errorList.push(addr);
-            }
-        }
-
-        if (errorList.length > 0) {
-            var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-            Modal.createDialog(ErrorDialog, {
-                title: "Failed to invite the following users to the " + room.name + " room:",
-                description: errorList.join(", "),
-            });
-        }
-        return addrs;
-    },
-
-    render: function() {
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var AddressSelector = sdk.getComponent("elements.AddressSelector");
-        this.scrollElement = null;
-
-        var query = [];
-        // create the invite list
-        if (this.state.inviteList.length > 0) {
-            var AddressTile = sdk.getComponent("elements.AddressTile");
-            for (let i = 0; i < this.state.inviteList.length; i++) {
-                query.push(
-                    <AddressTile key={i} address={this.state.inviteList[i]} canDismiss={true} onDismissed={ this.onDismissed(i) } />
-                );
-            }
-        }
-
-        // Add the query at the end
-        query.push(
-            <textarea key={this.state.inviteList.length}
-                rows="1"
-                id="textinput"
-                ref="textinput"
-                className="mx_ChatInviteDialog_input"
-                onChange={this.onQueryChanged}
-                placeholder={this.props.placeholder}
-                defaultValue={this.props.value}
-                autoFocus={this.props.focus}>
-            </textarea>
-        );
-
-        var error;
-        var addressSelector;
-        if (this.state.error) {
-            error = <div className="mx_ChatInviteDialog_error">You have entered an invalid contact. Try using their Matrix ID or email address.</div>
-        } else {
-            addressSelector = (
-                <AddressSelector ref={(ref) => {this.addressSelector = ref}}
-                    addressList={ this.state.queryList }
-                    onSelected={ this.onSelected }
-                    truncateAt={ TRUNCATE_QUERY_LIST } />
-            );
-        }
-
-        return (
-            <div className="mx_ChatInviteDialog" onKeyDown={this.onKeyDown}>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
-                <div className="mx_ChatInviteDialog_cancel" onClick={this.onCancel} >
-                    <TintableSvg src="img/icons-close-button.svg" width="35" height="35" />
-                </div>
-                <div className="mx_ChatInviteDialog_label">
-                    <label htmlFor="textinput">{ this.props.description }</label>
-                </div>
-                <div className="mx_Dialog_content">
-                    <div className="mx_ChatInviteDialog_inputContainer">{ query }</div>
-                    { error }
-                    { addressSelector }
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onButtonClick}>
-                        {this.props.button}
-                    </button>
-                </div>
-            </div>
-        );
-    }
-});

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -0,0 +1,39 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+/*
+ * A dialog for confirming a redaction.
+ */
+export default React.createClass({
+    displayName: 'ConfirmRedactDialog',
+
+    render: function() {
+        const QuestionDialog = sdk.getComponent('views.dialogs.QuestionDialog');
+        return (
+            <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

@@ -0,0 +1,136 @@
+/*
+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 sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+import { GroupMemberType } from '../../../groups';
+
+/*
+ * A dialog for confirming an operation on another user.
+ * Takes a user ID and a verb, displays the target user prominently
+ * such that it should be easy to confirm that the operation is being
+ * performed on the right person, and displays the operation prominently
+ * to make it obvious what is going to happen.
+ * Also tweaks the style for 'dangerous' actions (albeit only with colour)
+ */
+export default React.createClass({
+    displayName: 'ConfirmUserActionDialog',
+    propTypes: {
+        // 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: PropTypes.bool,
+        danger: PropTypes.bool,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    defaultProps: {
+        danger: false,
+        askReason: false,
+    },
+
+    componentWillMount: function() {
+        this._reasonField = null;
+    },
+
+    onOk: function() {
+        let reason;
+        if (this._reasonField) {
+            reason = this._reasonField.value;
+        }
+        this.props.onFinished(true, reason);
+    },
+
+    onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    _collectReasonField: function(e) {
+        this._reasonField = e;
+    },
+
+    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 confirmButtonClass = this.props.danger ? 'danger' : '';
+
+        let reasonBox;
+        if (this.props.askReason) {
+            reasonBox = (
+                <div>
+                    <form onSubmit={this.onOk}>
+                        <input className="mx_ConfirmUserActionDialog_reasonField"
+                            ref={this._collectReasonField}
+                            placeholder={_t("Reason")}
+                            autoFocus={true}
+                        />
+                    </form>
+                </div>
+            );
+        }
+
+        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={this.props.title}
+            >
+                <div className="mx_Dialog_content">
+                    <div className="mx_ConfirmUserActionDialog_avatar">
+                        { avatar }
+                    </div>
+                    <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

@@ -0,0 +1,175 @@
+/*
+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 sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+
+export default React.createClass({
+    displayName: 'CreateGroupDialog',
+    propTypes: {
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            groupName: '',
+            groupId: '',
+            groupError: null,
+            creating: false,
+            createError: null,
+        };
+    },
+
+    _onGroupNameChange: function(e) {
+        this.setState({
+            groupName: e.target.value,
+        });
+    },
+
+    _onGroupIdChange: function(e) {
+        this.setState({
+            groupId: e.target.value,
+        });
+    },
+
+    _onGroupIdBlur: function(e) {
+        this._checkGroupId();
+    },
+
+    _checkGroupId: function(e) {
+        let error = null;
+        if (!this.state.groupId) {
+            error = _t("Community IDs cannot not 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;
+    },
+
+    _onFormSubmit: function(e) {
+        e.preventDefault();
+
+        if (this._checkGroupId()) return;
+
+        const profile = {};
+        if (this.state.groupName !== '') {
+            profile.name = this.state.groupName;
+        }
+        this.setState({creating: true});
+        MatrixClientPeg.get().createGroup({
+            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) => {
+            this.setState({createError: e});
+        }).finally(() => {
+            this.setState({creating: false});
+        }).done();
+    },
+
+    _onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('elements.Spinner');
+
+        if (this.state.creating) {
+            return <Spinner />;
+        }
+
+        let createErrorNode;
+        if (this.state.createError) {
+            // 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('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 Community')}
+            >
+                <form onSubmit={this._onFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_CreateGroupDialog_inputRow">
+                            <div className="mx_CreateGroupDialog_label">
+                                <label htmlFor="groupname">{ _t('Community Name') }</label>
+                            </div>
+                            <div>
+                                <input id="groupname" className="mx_CreateGroupDialog_input"
+                                    autoFocus={true} size="64"
+                                    placeholder={_t('Example')}
+                                    onChange={this._onGroupNameChange}
+                                    value={this.state.groupName}
+                                />
+                            </div>
+                        </div>
+                        <div className="mx_CreateGroupDialog_inputRow">
+                            <div className="mx_CreateGroupDialog_label">
+                                <label htmlFor="groupid">{ _t('Community ID') }</label>
+                            </div>
+                            <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 }
+                        </div>
+                        { createErrorNode }
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
+                        <button onClick={this._onCancel}>
+                            { _t("Cancel") }
+                        </button>
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/CreateRoomDialog.js

@@ -0,0 +1,78 @@
+/*
+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,
+    },
+
+    componentDidMount: 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}
+                onEnterPressed={this.onOk}
+                title={_t('Create Room')}
+            >
+                <div className="mx_Dialog_content">
+                    <div className="mx_CreateRoomDialog_label">
+                        <label htmlFor="textinput"> { _t('Room name (optional)') } </label>
+                    </div>
+                    <div>
+                        <input id="textinput" ref="textinput" className="mx_CreateRoomDialog_input" autoFocus={true} size="64" />
+                    </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>
+                <DialogButtons primaryButton={_t('Create Room')}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -15,11 +15,14 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
+import Analytics from '../../../Analytics';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import Lifecycle from '../../../Lifecycle';
+import * as Lifecycle from '../../../Lifecycle';
 import Velocity from 'velocity-vector';
+import { _t } from '../../../languageHandler';
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props, context) {
@@ -53,13 +56,14 @@ export default class DeactivateAccountDialog extends React.Component {
             user: MatrixClientPeg.get().credentials.userId,
             password: this._passwordField.value,
         }).done(() => {
+            Analytics.trackEvent('Account', 'Deactivate Account');
             Lifecycle.onLoggedOut();
             this.props.onFinished(false);
         }, (err) => {
-            let errStr = 'Unknown error';
+            let errStr = _t('Unknown error');
             // https://matrix.org/jira/browse/SYN-744
             if (err.httpStatus == 401 || err.httpStatus == 403) {
-                errStr = 'Incorrect password';
+                errStr = _t('Incorrect password');
                 Velocity(this._passwordField, "callout.shake", 300);
             }
             this.setState({
@@ -74,47 +78,49 @@ 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.err_str}
-            </div>
+                { this.state.errStr }
+            </div>;
             passwordBoxClass = 'error';
         }
 
-        const okLabel = this.state.busy ? <Loader /> : 'Deactivate Account';
+        const okLabel = this.state.busy ? <Loader /> : _t('Deactivate Account');
         const okEnabled = this.state.confirmButtonEnabled && !this.state.busy;
 
         let cancelButton = null;
         if (!this.state.busy) {
             cancelButton = <button onClick={this._onCancel} autoFocus={true}>
-                Cancel
-            </button>
+                { _t("Cancel") }
+            </button>;
         }
 
         return (
-            <div className="mx_DeactivateAccountDialog">
-                <div className="mx_Dialog_title danger">
-                    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>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 re-register the same user ID.") }</p>
 
-                    <p>This action is irreversible.</p>
+                    <p>{ _t("This action is irreversible.") }</p>
 
-                    <p>To continue, please enter your password.</p>
+                    <p>{ _t("To continue, please enter your password.") }</p>
 
-                    <p>Password:</p>
+                    <p>{ _t("Password") }:</p>
                     <input
                         type="password"
                         onChange={this._onPasswordFieldChange}
                         ref={(e) => {this._passwordField = e;}}
                         className={passwordBoxClass}
                     />
-                    {error}
+                    { error }
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button
@@ -122,16 +128,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

@@ -0,0 +1,78 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import sdk from '../../../index';
+import * as FormattingUtils from '../../../utils/FormattingUtils';
+import { _t } from '../../../languageHandler';
+
+export default function DeviceVerifyDialog(props) {
+    const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+    const key = FormattingUtils.formatCryptoKey(props.device.getFingerprint());
+    const body = (
+        <div>
+            <p>
+                { _t("To verify that this device can be trusted, please contact its " +
+                    "owner using some other means (e.g. in person or a phone call) " +
+                    "and ask them whether the key they see in their User Settings " +
+                    "for this device matches the key below:") }
+            </p>
+            <div className="mx_UserSettings_cryptoSection">
+                <ul>
+                    <li><label>{ _t("Device name") }:</label> <span>{ props.device.getDisplayName() }</span></li>
+                    <li><label>{ _t("Device ID") }:</label> <span><code>{ props.device.deviceId }</code></span></li>
+                    <li><label>{ _t("Device key") }:</label> <span><code><b>{ key }</b></code></span></li>
+                </ul>
+            </div>
+            <p>
+                { _t("If it matches, press the verify button below. " +
+                    "If it doesn't, then someone else is intercepting this device " +
+                    "and you probably want to press the blacklist button instead.") }
+            </p>
+            <p>
+                { _t("In future this verification process will be more sophisticated.") }
+            </p>
+        </div>
+    );
+
+    function onFinished(confirm) {
+        if (confirm) {
+            MatrixClientPeg.get().setDeviceVerified(
+                props.userId, props.device.deviceId, true,
+            );
+        }
+        props.onFinished(confirm);
+    }
+
+    return (
+        <QuestionDialog
+            title={_t("Verify device")}
+            description={body}
+            button={_t("I verify that the keys match")}
+            onFinished={onFinished}
+        />
+    );
+}
+
+DeviceVerifyDialog.propTypes = {
+    userId: PropTypes.string.isRequired,
+    device: PropTypes.object.isRequired,
+    onFinished: PropTypes.func.isRequired,
+};

src/components/views/dialogs/EncryptedEventDialog.js

@@ -1,187 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-var React = require("react");
-var sdk = require('../../../index');
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-
-module.exports = React.createClass({
-    displayName: 'EncryptedEventDialog',
-
-    propTypes: {
-        event: React.PropTypes.object.isRequired,
-        onFinished: React.PropTypes.func.isRequired,
-    },
-
-    getInitialState: function() {
-        return { device: this.refreshDevice() };
-    },
-
-    componentWillMount: function() {
-        this._unmounted = false;
-        var client = MatrixClientPeg.get();
-        client.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
-
-        // no need to redownload keys if we already have the device
-        if (this.state.device) {
-            return;
-        }
-        client.downloadKeys([this.props.event.getSender()], true).done(()=>{
-            if (this._unmounted) {
-                return;
-            }
-            this.setState({ device: this.refreshDevice() });
-        }, (err)=>{
-            console.log("Error downloading devices", err);
-        });
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-        var client = MatrixClientPeg.get();
-        if (client) {
-            client.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
-        }
-    },
-
-    refreshDevice: function() {
-        return MatrixClientPeg.get().getEventSenderDeviceInfo(this.props.event);
-    },
-
-    onDeviceVerificationChanged: function(userId, device) {
-        if (userId == this.props.event.getSender()) {
-            this.setState({ device: this.refreshDevice() });
-        }
-    },
-
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-    },
-
-    _renderDeviceInfo: function() {
-        var device = this.state.device;
-        if (!device) {
-            return (<i>unknown device</i>);
-        }
-
-        var verificationStatus = (<b>NOT verified</b>);
-        if (device.isBlocked()) {
-            verificationStatus = (<b>Blacklisted</b>);
-        } else if (device.isVerified()) {
-            verificationStatus = "verified";
-        }
-
-        return (
-            <table>
-                <tbody>
-                    <tr>
-                        <td>Name</td>
-                        <td>{ device.getDisplayName() }</td>
-                    </tr>
-                    <tr>
-                        <td>Device ID</td>
-                        <td><code>{ device.deviceId }</code></td>
-                    </tr>
-                    <tr>
-                        <td>Verification</td>
-                        <td>{ verificationStatus }</td>
-                    </tr>
-                    <tr>
-                        <td>Ed25519 fingerprint</td>
-                        <td><code>{device.getFingerprint()}</code></td>
-                    </tr>
-                </tbody>
-            </table>
-        );
-    },
-
-    _renderEventInfo: function() {
-        var event = this.props.event;
-
-        return (
-            <table>
-                <tbody>
-                    <tr>
-                        <td>User ID</td>
-                        <td>{ event.getSender() }</td>
-                    </tr>
-                    <tr>
-                        <td>Curve25519 identity key</td>
-                        <td><code>{ event.getSenderKey() || <i>none</i> }</code></td>
-                    </tr>
-                    <tr>
-                        <td>Claimed Ed25519 fingerprint key</td>
-                        <td><code>{ event.getKeysClaimed().ed25519 || <i>none</i> }</code></td>
-                    </tr>
-                    <tr>
-                        <td>Algorithm</td>
-                        <td>{ event.getWireContent().algorithm || <i>unencrypted</i> }</td>
-                    </tr>
-                {
-                    event.getContent().msgtype === 'm.bad.encrypted' ? (
-                    <tr>
-                        <td>Decryption error</td>
-                        <td>{ event.getContent().body }</td>
-                    </tr>
-                    ) : null
-                }
-                    <tr>
-                        <td>Session ID</td>
-                        <td><code>{ event.getWireContent().session_id || <i>none</i> }</code></td>
-                    </tr>
-                </tbody>
-            </table>
-        );
-    },
-
-    render: function() {
-        var DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
-
-        var buttons = null;
-        if (this.state.device) {
-            buttons = (
-                <DeviceVerifyButtons device={ this.state.device }
-                    userId={ this.props.event.getSender() }
-                />
-            );
-        }
-
-        return (
-            <div className="mx_EncryptedEventDialog" onKeyDown={ this.onKeyDown }>
-                <div className="mx_Dialog_title">
-                    End-to-end encryption information
-                </div>
-                <div className="mx_Dialog_content">
-                    <h4>Event information</h4>
-                    {this._renderEventInfo()}
-
-                    <h4>Sender device information</h4>
-                    {this._renderDeviceInfo()}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={ this.props.onFinished } autoFocus={ true }>
-                        OK
-                    </button>
-                    {buttons}
-                </div>
-            </div>
-        );
-    }
-});

src/components/views/dialogs/ErrorDialog.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 /*
  * Usage:
- * Modal.createDialog(ErrorDialog, {
+ * Modal.createTrackedDialog('An Identifier', 'some detail', ErrorDialog, {
  *   title: "some text", (default: "Error")
  *   description: "some more text",
  *   button: "Button Text",
@@ -25,53 +25,53 @@ limitations under the License.
  * });
  */
 
-var React = require("react");
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+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() {
         return {
-            title: "Error",
-            description: "An error has occurred.",
-            button: "OK",
             focus: true,
+            title: null,
+            description: null,
+            button: null,
         };
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
+    componentDidMount: function() {
+        if (this.props.focus) {
+            this.refs.button.focus();
         }
     },
 
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
-            <div className="mx_ErrorDialog" onKeyDown={ this.onKeyDown }>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
+                    title={this.props.title || _t('Error')}>
                 <div className="mx_Dialog_content">
-                    {this.props.description}
+                    { this.props.description || _t('An error has occurred.') }
                 </div>
                 <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={this.props.focus}>
-                        {this.props.button}
+                    <button ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
+                        { this.props.button || _t('OK') }
                     </button>
                 </div>
-            </div>
+            </BaseDialog>
         );
-    }
+    },
 });

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,206 +15,94 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
-const InteractiveAuth = Matrix.InteractiveAuth;
-
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
-import {getEntryComponentForLoginType} from '../login/InteractiveAuthEntryComponents';
+import AccessibleButton from '../elements/AccessibleButton';
 
 export default React.createClass({
     displayName: 'InteractiveAuthDialog',
 
     propTypes: {
+        // matrix client to use for UI auth requests
+        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,
-        submitButtonLabel: React.PropTypes.string,
-    },
-
-    getDefaultProps: function() {
-        return {
-            title: "Authentication",
-            submitButtonLabel: "Submit",
-        };
+        title: PropTypes.string,
     },
 
     getInitialState: function() {
         return {
-            authStage: null,
-            busy: false,
-            errorText: null,
-            stageErrorText: null,
-            submitButtonEnabled: false,
+            authError: null,
         };
     },
 
-    componentWillMount: function() {
-        this._unmounted = false;
-        this._authLogic = new InteractiveAuth({
-            authData: this.props.authData,
-            doRequest: this._requestCallback,
-            startAuthStage: this._startAuthStage,
-        });
-
-        this._authLogic.attemptAuth().then((result) => {
+    _onAuthFinished: function(success, result) {
+        if (success) {
             this.props.onFinished(true, result);
-        }).catch((error) => {
-            console.error("Error during user-interactive auth:", error);
-            if (this._unmounted) {
-                return;
-            }
-
-            const msg = error.message || error.toString();
+        } else {
             this.setState({
-                errorText: msg
+                authError: result,
             });
-        }).done();
-    },
-
-    componentWillUnmount: function() {
-        this._unmounted = true;
-    },
-
-    _startAuthStage: function(stageType, error) {
-        this.setState({
-            authStage: stageType,
-            errorText: error ? error.error : null,
-        }, this._setFocus);
-    },
-
-    _requestCallback: function(auth) {
-        this.setState({
-            busy: true,
-            errorText: null,
-            stageErrorText: null,
-        });
-        return this.props.makeRequest(auth).finally(() => {
-            if (this._unmounted) {
-                return;
-            }
-            this.setState({
-                busy: false,
-            });
-        });
-    },
-
-    _onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            if (!this.state.busy) {
-                this._onCancel();
-            }
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            if (this.state.submitButtonEnabled && !this.state.busy) {
-                this._onSubmit();
-            }
         }
     },
 
-    _onSubmit: function() {
-        if (this.refs.stageComponent && this.refs.stageComponent.onSubmitClick) {
-            this.refs.stageComponent.onSubmitClick();
-        }
-    },
-
-    _setFocus: function() {
-        if (this.refs.stageComponent && this.refs.stageComponent.focus) {
-            this.refs.stageComponent.focus();
-        }
-    },
-
-    _onCancel: function() {
+    _onDismissClick: function() {
         this.props.onFinished(false);
     },
 
-    _setSubmitButtonEnabled: function(enabled) {
-        this.setState({
-            submitButtonEnabled: enabled,
-        });
-    },
-
-    _submitAuthDict: function(authData) {
-        this._authLogic.submitAuthDict(authData);
-    },
-
-    _renderCurrentStage: function() {
-        const stage = this.state.authStage;
-        var StageComponent = getEntryComponentForLoginType(stage);
-        return (
-            <StageComponent ref="stageComponent"
-                loginType={stage}
-                authSessionId={this._authLogic.getSessionId()}
-                stageParams={this._authLogic.getStageParams(stage)}
-                submitAuthDict={this._submitAuthDict}
-                setSubmitButtonEnabled={this._setSubmitButtonEnabled}
-                errorText={this.state.stageErrorText}
-            />
-        );
-    },
-
     render: function() {
-        const Loader = sdk.getComponent("elements.Spinner");
+        const InteractiveAuth = sdk.getComponent("structures.InteractiveAuth");
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
-        let error = null;
-        if (this.state.errorText) {
-            error = (
-                <div className="error">
-                    {this.state.errorText}
+        let content;
+        if (this.state.authError) {
+            content = (
+                <div>
+                    <div>{ this.state.authError.message || this.state.authError.toString() }</div>
+                    <br />
+                    <AccessibleButton onClick={this._onDismissClick}
+                        className="mx_UserSettings_button"
+                    >
+                        { _t("Dismiss") }
+                    </AccessibleButton>
+                </div>
+            );
+        } else {
+            content = (
+                <div>
+                    <InteractiveAuth ref={this._collectInteractiveAuth}
+                        matrixClient={this.props.matrixClient}
+                        authData={this.props.authData}
+                        makeRequest={this.props.makeRequest}
+                        onAuthFinished={this._onAuthFinished}
+                    />
                 </div>
             );
         }
 
-        const submitLabel = this.state.busy ? <Loader /> : this.props.submitButtonLabel;
-        const submitEnabled = this.state.submitButtonEnabled && !this.state.busy;
-
-        const submitButton = (
-            <button className="mx_Dialog_primary"
-                onClick={this._onSubmit}
-                disabled={!submitEnabled}
-            >
-                {submitLabel}
-            </button>
-        );
-
-        const cancelButton = (
-            <button onClick={this._onCancel}>
-                Cancel
-            </button>
-        );
-
         return (
-            <div className="mx_InteractiveAuthDialog" onKeyDown={this._onKeyDown}>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
-                <div className="mx_Dialog_content">
-                    <p>This operation requires additional authentication.</p>
-                    {this._renderCurrentStage()}
-                    {error}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    {submitButton}
-                    {cancelButton}
-                </div>
-            </div>
+            <BaseDialog className="mx_InteractiveAuthDialog"
+                onFinished={this.props.onFinished}
+                title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
+            >
+                { content }
+            </BaseDialog>
         );
     },
 });

src/components/views/dialogs/KeyShareDialog.js

@@ -0,0 +1,173 @@
+/*
+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 Modal from '../../../Modal';
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+
+import { _t, _td } from '../../../languageHandler';
+
+/**
+ * Dialog which asks the user whether they want to share their keys with
+ * an unverified device.
+ *
+ * onFinished is called with `true` if the key should be shared, `false` if it
+ * should not, and `undefined` if the dialog is cancelled. (In other words:
+ * truthy: do the key share. falsy: don't share the keys).
+ */
+export default React.createClass({
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        userId: PropTypes.string.isRequired,
+        deviceId: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            deviceInfo: null,
+            wasNewDevice: false,
+        };
+    },
+
+    componentDidMount: function() {
+        this._unmounted = false;
+        const userId = this.props.userId;
+        const deviceId = this.props.deviceId;
+
+        // give the client a chance to refresh the device list
+        this.props.matrixClient.downloadKeys([userId], false).then((r) => {
+            if (this._unmounted) { return; }
+
+            const deviceInfo = r[userId][deviceId];
+
+            if (!deviceInfo) {
+                console.warn(`No details found for device ${userId}:${deviceId}`);
+
+                this.props.onFinished(false);
+                return;
+            }
+
+            const wasNewDevice = !deviceInfo.isKnown();
+
+            this.setState({
+                deviceInfo: deviceInfo,
+                wasNewDevice: wasNewDevice,
+            });
+
+            // if the device was new before, it's not any more.
+            if (wasNewDevice) {
+                this.props.matrixClient.setDeviceKnown(
+                    userId,
+                    deviceId,
+                    true,
+                );
+            }
+        }).done();
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
+
+    _onVerifyClicked: function() {
+        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+
+        console.log("KeyShareDialog: Starting verify dialog");
+        Modal.createTrackedDialog('Key Share', 'Starting dialog', DeviceVerifyDialog, {
+            userId: this.props.userId,
+            device: this.state.deviceInfo,
+            onFinished: (verified) => {
+                if (verified) {
+                    // can automatically share the keys now.
+                    this.props.onFinished(true);
+                }
+            },
+        });
+    },
+
+    _onShareClicked: function() {
+        console.log("KeyShareDialog: User clicked 'share'");
+        this.props.onFinished(true);
+    },
+
+    _onIgnoreClicked: function() {
+        console.log("KeyShareDialog: User clicked 'ignore'");
+        this.props.onFinished(false);
+    },
+
+    _renderContent: function() {
+        const displayName = this.state.deviceInfo.getDisplayName() ||
+            this.state.deviceInfo.deviceId;
+
+        let text;
+        if (this.state.wasNewDevice) {
+            text = _td("You added a new device '%(displayName)s', which is"
+                + " requesting encryption keys.");
+        } else {
+            text = _td("Your unverified device '%(displayName)s' is requesting"
+                + " encryption keys.");
+        }
+        text = _t(text, {displayName: displayName});
+
+        return (
+            <div>
+                <p>{ text }</p>
+
+                <div className="mx_Dialog_buttons">
+                    <button onClick={this._onVerifyClicked}>
+                        { _t('Start verification') }
+                    </button>
+                    <button onClick={this._onShareClicked}>
+                        { _t('Share without verifying') }
+                    </button>
+                    <button onClick={this._onIgnoreClicked}>
+                        { _t('Ignore request') }
+                    </button>
+                </div>
+            </div>
+        );
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('views.elements.Spinner');
+
+        let content;
+
+        if (this.state.deviceInfo) {
+            content = this._renderContent();
+        } else {
+            content = (
+                <div>
+                    <p>{ _t('Loading device info...') }</p>
+                    <Spinner />
+                </div>
+            );
+        }
+
+        return (
+            <BaseDialog className='mx_KeyShareRequestDialog'
+                onFinished={this.props.onFinished}
+                title={_t('Encryption key request')}
+            >
+                { content }
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/LogoutPrompt.js

@@ -1,61 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-var React = require('react');
-var dis = require("../../../dispatcher");
-
-module.exports = React.createClass({
-    displayName: 'LogoutPrompt',
-
-    propTypes: {
-        onFinished: React.PropTypes.func,
-    },
-
-    logOut: function() {
-        dis.dispatch({action: 'logout'});
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    cancelPrompt: function() {
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.cancelPrompt();
-        }
-    },
-
-    render: function() {
-        return (
-            <div>
-                <div className="mx_Dialog_content">
-                    Sign out?
-                </div>
-                <div className="mx_Dialog_buttons" onKeyDown={ this.onKeyDown }>
-                    <button className="mx_Dialog_primary" autoFocus onClick={this.logOut}>Sign Out</button>
-                    <button onClick={this.cancelPrompt}>Cancel</button>
-                </div>
-            </div>
-        );
-    }
-});
-

src/components/views/dialogs/NeedToRegisterDialog.js

@@ -1,76 +0,0 @@
-/*
-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.
-*/
-
-/*
- * Usage:
- * Modal.createDialog(NeedToRegisterDialog, {
- *   title: "some text", (default: "Registration required")
- *   description: "some more text",
- *   onFinished: someFunction,
- * });
- */
-
-var React = require("react");
-var dis = require("../../../dispatcher");
-
-module.exports = React.createClass({
-    displayName: 'NeedToRegisterDialog',
-    propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
-        ]),
-        onFinished: React.PropTypes.func.isRequired,
-    },
-
-    getDefaultProps: function() {
-        return {
-            title: "Registration required",
-            description: "A registered account is required for this action",
-        };
-    },
-
-    onRegisterClicked: function() {
-        dis.dispatch({
-            action: "start_upgrade_registration",
-        });
-        if (this.props.onFinished) {
-            this.props.onFinished();
-        }
-    },
-
-    render: function() {
-        return (
-            <div className="mx_NeedToRegisterDialog">
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
-                <div className="mx_Dialog_content">
-                    {this.props.description}
-                </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.props.onFinished} autoFocus={true}>
-                        Cancel
-                    </button>
-                    <button onClick={this.onRegisterClicked}>
-                        Register
-                    </button>
-                </div>
-            </div>
-        );
-    }
-});

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.
@@ -14,27 +15,31 @@ 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 sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'QuestionDialog',
     propTypes: {
-        title: React.PropTypes.string,
-        description: React.PropTypes.oneOfType([
-            React.PropTypes.element,
-            React.PropTypes.string,
-        ]),
-        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() {
         return {
             title: "",
             description: "",
-            button: "OK",
+            extraButtons: null,
             focus: true,
+            hasCancelButton: true,
+            danger: false,
         };
     },
 
@@ -46,38 +51,30 @@ module.exports = React.createClass({
         this.props.onFinished(false);
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(true);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        let primaryButtonClass = "";
+        if (this.props.danger) {
+            primaryButtonClass = "danger";
+        }
         return (
-            <div className="mx_QuestionDialog" onKeyDown={ this.onKeyDown }>
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <BaseDialog className="mx_QuestionDialog" onFinished={this.props.onFinished}
+                onEnterPressed={this.onOk}
+                title={this.props.title}
+            >
                 <div className="mx_Dialog_content">
-                    {this.props.description}
+                    { this.props.description }
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
-                        {this.props.button}
-                    </button>
-
-                    <button onClick={this.onCancel}>
-                        Cancel
-                    </button>
-                </div>
-            </div>
+                <DialogButtons primaryButton={this.props.button || _t('OK')}
+                    onPrimaryButtonClick={this.onOk}
+                    primaryButtonClass={primaryButtonClass}
+                    focus={this.props.focus}
+                    onCancel={this.onCancel}
+                >
+                    { this.props.extraButtons }
+                </DialogButtons>
+            </BaseDialog>
         );
-    }
+    },
 });

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -0,0 +1,79 @@
+/*
+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 sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+
+
+export default React.createClass({
+    displayName: 'SessionRestoreErrorDialog',
+
+    propTypes: {
+        error: PropTypes.string.isRequired,
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    _sendBugReport: function() {
+        const BugReportDialog = sdk.getComponent("dialogs.BugReportDialog");
+        Modal.createTrackedDialog('Session Restore Error', 'Send Bug Report Dialog', BugReportDialog, {});
+    },
+
+    _continueClicked: function() {
+        this.props.onFinished(true);
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
+        let bugreport;
+
+        if (SdkConfig.get().bug_report_endpoint_url) {
+            bugreport = (
+                <p>
+                { _t(
+                    "Otherwise, <a>click here</a> to send a bug report.",
+                    {},
+                    { 'a': (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{ sub }</a> },
+                ) }
+                </p>
+            );
+        }
+
+        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>
+
+                    <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>
+                <DialogButtons primaryButton={_t("Continue anyway")}
+                    onPrimaryButtonClick={this._continueClicked}
+                    onCancel={this.props.onFinished} />
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -1,85 +0,0 @@
-/*
-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.
-*/
-
-var React = require("react");
-var sdk = require("../../../index.js");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-
-module.exports = React.createClass({
-    displayName: 'SetDisplayNameDialog',
-    propTypes: {
-        onFinished: React.PropTypes.func.isRequired,
-        currentDisplayName: React.PropTypes.string,
-    },
-
-    getInitialState: function() {
-        if (this.props.currentDisplayName) {
-            return { value: this.props.currentDisplayName };
-        }
-
-        if (MatrixClientPeg.get().isGuest()) {
-            return { value : "Guest " + MatrixClientPeg.get().getUserIdLocalpart() };
-        }
-        else {
-            return { value : MatrixClientPeg.get().getUserIdLocalpart() };
-        }
-    },
-
-    componentDidMount: function() {
-        this.refs.input_value.select();
-    },
-
-    getValue: function() {
-        return this.state.value;
-    },
-
-    onValueChange: function(ev) {
-        this.setState({
-            value: ev.target.value
-        });
-    },
-
-    onFormSubmit: function(ev) {
-        ev.preventDefault();
-        this.props.onFinished(true);
-        return false;
-    },
-
-    render: function() {
-        return (
-            <div className="mx_SetDisplayNameDialog">
-                <div className="mx_Dialog_title">
-                    Set a Display Name
-                </div>
-                <div className="mx_Dialog_content">
-                    Your display name is how you'll appear to others when you speak in rooms.<br/>
-                    What would you like it to be?
-                </div>
-                <form onSubmit={this.onFormSubmit}>
-                    <div className="mx_Dialog_content">
-                        <input type="text" ref="input_value" value={this.state.value}
-                            autoFocus={true} onChange={this.onValueChange} size="30"
-                            className="mx_SetDisplayNameDialog_input"
-                        />
-                    </div>
-                    <div className="mx_Dialog_buttons">
-                        <input className="mx_Dialog_primary" type="submit" value="Set" />
-                    </div>
-                </form>
-            </div>
-        );
-    }
-});

src/components/views/dialogs/SetEmailDialog.js

@@ -0,0 +1,165 @@
+/*
+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 sdk from '../../../index';
+import Email from '../../../email';
+import AddThreepid from '../../../AddThreepid';
+import { _t } from '../../../languageHandler';
+import Modal from '../../../Modal';
+
+
+/**
+ * Prompt the user to set an email address.
+ *
+ * On success, `onFinished(true)` is called.
+ */
+export default React.createClass({
+    displayName: 'SetEmailDialog',
+    propTypes: {
+        onFinished: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            emailAddress: null,
+            emailBusy: false,
+        };
+    },
+
+    componentDidMount: function() {
+    },
+
+    onEmailAddressChanged: function(value) {
+        this.setState({
+            emailAddress: value,
+        });
+    },
+
+    onSubmit: function() {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+        const emailAddress = this.state.emailAddress;
+        if (!Email.looksValid(emailAddress)) {
+            Modal.createTrackedDialog('Invalid Email Address', '', ErrorDialog, {
+                title: _t("Invalid Email Address"),
+                description: _t("This doesn't appear to be a valid email address"),
+            });
+            return;
+        }
+        this._addThreepid = new AddThreepid();
+        // we always bind emails when registering, so let's do the
+        // same here.
+        this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
+            Modal.createTrackedDialog('Verification Pending', '', QuestionDialog, {
+                title: _t("Verification Pending"),
+                description: _t(
+                    "Please check your email and click on the link it contains. Once this " +
+                    "is done, click continue.",
+                ),
+                button: _t('Continue'),
+                onFinished: this.onEmailDialogFinished,
+            });
+        }, (err) => {
+            this.setState({emailBusy: false});
+            console.error("Unable to add email address " + emailAddress + " " + err);
+            Modal.createTrackedDialog('Unable to add email address', '', ErrorDialog, {
+                title: _t("Unable to add email address"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        });
+        this.setState({emailBusy: true});
+    },
+
+    onCancelled: function() {
+        this.props.onFinished(false);
+    },
+
+    onEmailDialogFinished: function(ok) {
+        if (ok) {
+            this.verifyEmailAddress();
+        } else {
+            this.setState({emailBusy: false});
+        }
+    },
+
+    verifyEmailAddress: function() {
+        this._addThreepid.checkEmailLinkClicked().done(() => {
+            this.props.onFinished(true);
+        }, (err) => {
+            this.setState({emailBusy: false});
+            if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                const message = _t("Unable to verify email address.") + " " +
+                    _t("Please check your email and click on the link it contains. Once this is done, click continue.");
+                Modal.createTrackedDialog('Verification Pending', '3pid Auth Failed', QuestionDialog, {
+                    title: _t("Verification Pending"),
+                    description: message,
+                    button: _t('Continue'),
+                    onFinished: this.onEmailDialogFinished,
+                });
+            } else {
+                const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+                console.error("Unable to verify email address: " + err);
+                Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
+                    title: _t("Unable to verify email address."),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
+                });
+            }
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('elements.Spinner');
+        const EditableText = sdk.getComponent('elements.EditableText');
+
+        const emailInput = this.state.emailBusy ? <Spinner /> : <EditableText
+            className="mx_SetEmailDialog_email_input"
+            placeholder={_t("Email address")}
+            placeholderClassName="mx_SetEmailDialog_email_input_placeholder"
+            blurToCancel={false}
+            onValueChanged={this.onEmailAddressChanged} />;
+
+        return (
+            <BaseDialog className="mx_SetEmailDialog"
+                onFinished={this.onCancelled}
+                title={this.props.title}
+            >
+                <div className="mx_Dialog_content">
+                    <p>
+                        { _t('This will allow you to reset your password and receive notifications.') }
+                    </p>
+                    { emailInput }
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <input className="mx_Dialog_primary"
+                        type="submit"
+                        value={_t("Continue")}
+                        onClick={this.onSubmit}
+                    />
+                    <input
+                        type="submit"
+                        value={_t("Skip")}
+                        onClick={this.onCancelled}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/SetMxIdDialog.js

@@ -0,0 +1,302 @@
+/*
+Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+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 '../../../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
+const USERNAME_CHECK_DEBOUNCE_MS = 250;
+
+/**
+ * Prompt the user to set a display name.
+ *
+ * On success, `onFinished(true, newDisplayName)` is called.
+ */
+export default React.createClass({
+    displayName: 'SetMxIdDialog',
+    propTypes: {
+        onFinished: PropTypes.func.isRequired,
+        // Called when the user requests to register with a different homeserver
+        onDifferentServerClicked: PropTypes.func.isRequired,
+        // Called if the user wants to switch to login instead
+        onLoginClick: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            // The entered username
+            username: '',
+            // Indicate ongoing work on the username
+            usernameBusy: false,
+            // Indicate error with username
+            usernameError: '',
+            // Assume the homeserver supports username checking until "M_UNRECOGNIZED"
+            usernameCheckSupport: true,
+
+            // Whether the auth UI is currently being used
+            doingUIAuth: false,
+            // Indicate error with auth
+            authError: '',
+        };
+    },
+
+    componentDidMount: function() {
+        this.refs.input_value.select();
+
+        this._matrixClient = MatrixClientPeg.get();
+    },
+
+    onValueChange: function(ev) {
+        this.setState({
+            username: ev.target.value,
+            usernameBusy: true,
+            usernameError: '',
+        }, () => {
+            if (!this.state.username || !this.state.usernameCheckSupport) {
+                this.setState({
+                    usernameBusy: false,
+                });
+                return;
+            }
+
+            // Debounce the username check to limit number of requests sent
+            if (this._usernameCheckTimeout) {
+                clearTimeout(this._usernameCheckTimeout);
+            }
+            this._usernameCheckTimeout = setTimeout(() => {
+                this._doUsernameCheck().finally(() => {
+                    this.setState({
+                        usernameBusy: false,
+                    });
+                });
+            }, USERNAME_CHECK_DEBOUNCE_MS);
+        });
+    },
+
+    onKeyUp: function(ev) {
+        if (ev.keyCode === KeyCode.ENTER) {
+            this.onSubmit();
+        }
+    },
+
+    onSubmit: function(ev) {
+        this.setState({
+            doingUIAuth: true,
+        });
+    },
+
+    _doUsernameCheck: function() {
+        // XXX: SPEC-1
+        // Check if username is valid
+        // Naive impl copied from https://github.com/matrix-org/matrix-react-sdk/blob/66c3a6d9ca695780eb6b662e242e88323053ff33/src/components/views/login/RegistrationForm.js#L190
+        if (encodeURIComponent(this.state.username) !== this.state.username) {
+            this.setState({
+                usernameError: _t('User names may only contain letters, numbers, dots, hyphens and underscores.'),
+            });
+            return Promise.reject();
+        }
+
+        // Check if username is available
+        return this._matrixClient.isUsernameAvailable(this.state.username).then(
+            (isAvailable) => {
+                if (isAvailable) {
+                    this.setState({usernameError: ''});
+                }
+            },
+            (err) => {
+                // Indicate whether the homeserver supports username checking
+                const newState = {
+                    usernameCheckSupport: err.errcode !== "M_UNRECOGNIZED",
+                };
+                console.error('Error whilst checking username availability: ', err);
+                switch (err.errcode) {
+                    case "M_USER_IN_USE":
+                        newState.usernameError = _t('Username not available');
+                        break;
+                    case "M_INVALID_USERNAME":
+                        newState.usernameError = _t(
+                            'Username invalid: %(errMessage)s',
+                            { errMessage: err.message},
+                        );
+                        break;
+                    case "M_UNRECOGNIZED":
+                        // This homeserver doesn't support username checking, assume it's
+                        // fine and rely on the error appearing in registration step.
+                        newState.usernameError = '';
+                        break;
+                    case undefined:
+                        newState.usernameError = _t('Something went wrong!');
+                        break;
+                    default:
+                        newState.usernameError = _t(
+                            'An error occurred: %(error_string)s',
+                            { error_string: err.message },
+                        );
+                        break;
+                }
+                this.setState(newState);
+            },
+        );
+    },
+
+    _generatePassword: function() {
+        return Math.random().toString(36).slice(2);
+    },
+
+    _makeRegisterRequest: function(auth) {
+        // Not upgrading - changing mxids
+        const guestAccessToken = null;
+        if (!this._generatedPassword) {
+            this._generatedPassword = this._generatePassword();
+        }
+        return this._matrixClient.register(
+            this.state.username,
+            this._generatedPassword,
+            undefined, // session id: included in the auth dict already
+            auth,
+            {},
+            guestAccessToken,
+        );
+    },
+
+    _onUIAuthFinished: function(success, response) {
+        this.setState({
+            doingUIAuth: false,
+        });
+
+        if (!success) {
+            this.setState({ authError: response.message });
+            return;
+        }
+
+        // XXX Implement RTS /register here
+        const teamToken = null;
+
+        this.props.onFinished(true, {
+            userId: response.user_id,
+            deviceId: response.device_id,
+            homeserverUrl: this._matrixClient.getHomeserverUrl(),
+            identityServerUrl: this._matrixClient.getIdentityServerUrl(),
+            accessToken: response.access_token,
+            password: this._generatedPassword,
+            teamToken: teamToken,
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
+        const Spinner = sdk.getComponent('elements.Spinner');
+
+        let auth;
+        if (this.state.doingUIAuth) {
+            auth = <InteractiveAuth
+                matrixClient={this._matrixClient}
+                makeRequest={this._makeRegisterRequest}
+                onAuthFinished={this._onUIAuthFinished}
+                inputs={{}}
+                poll={true}
+            />;
+        }
+        const inputClasses = classnames({
+            "mx_SetMxIdDialog_input": true,
+            "error": Boolean(this.state.usernameError),
+        });
+
+        let usernameIndicator = null;
+        let usernameBusyIndicator = null;
+        if (this.state.usernameBusy) {
+            usernameBusyIndicator = <Spinner w="24" h="24" />;
+        } else {
+            const usernameAvailable = this.state.username &&
+                this.state.usernameCheckSupport && !this.state.usernameError;
+            const usernameIndicatorClasses = classnames({
+                "error": Boolean(this.state.usernameError),
+                "success": usernameAvailable,
+            });
+            usernameIndicator = <div className={usernameIndicatorClasses}>
+                { usernameAvailable ? _t('Username available') : this.state.usernameError }
+            </div>;
+        }
+
+        let authErrorIndicator = null;
+        if (this.state.authError) {
+            authErrorIndicator = <div className="error">
+                { this.state.authError }
+            </div>;
+        }
+        const canContinue = this.state.username &&
+            !this.state.usernameError &&
+            !this.state.usernameBusy;
+
+        return (
+            <BaseDialog className="mx_SetMxIdDialog"
+                onFinished={this.props.onFinished}
+                title={_t('To get started, please pick a username!')}
+            >
+                <div className="mx_Dialog_content">
+                    <div className="mx_SetMxIdDialog_input_group">
+                        <input type="text" ref="input_value" value={this.state.username}
+                            autoFocus={true}
+                            onChange={this.onValueChange}
+                            onKeyUp={this.onKeyUp}
+                            size="30"
+                            className={inputClasses}
+                        />
+                        { usernameBusyIndicator }
+                    </div>
+                    { usernameIndicator }
+                    <p>
+                        { _t(
+                            'This will be your account name on the <span></span> ' +
+                            'homeserver, or you can pick a <a>different server</a>.',
+                            {},
+                            {
+                                'span': <span>{ this.props.homeserverUrl }</span>,
+                                'a': (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{ sub }</a>,
+                            },
+                        ) }
+                    </p>
+                    <p>
+                        { _t(
+                            'If you already have a Matrix account you can <a>log in</a> instead.',
+                            {},
+                            { 'a': (sub) => <a href="#" onClick={this.props.onLoginClick}>{ sub }</a> },
+                        ) }
+                    </p>
+                    { auth }
+                    { authErrorIndicator }
+                </div>
+                <div className="mx_Dialog_buttons">
+                    <input className="mx_Dialog_primary"
+                        type="submit"
+                        value={_t("Continue")}
+                        onClick={this.onSubmit}
+                        disabled={!canContinue}
+                    />
+                </div>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/TextInputDialog.js

@@ -14,20 +14,22 @@ 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 sdk from '../../../index';
 
-module.exports = React.createClass({
+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() {
@@ -35,8 +37,7 @@ module.exports = React.createClass({
             title: "",
             value: "",
             description: "",
-            button: "OK",
-            focus: true
+            focus: true,
         };
     },
 
@@ -55,42 +56,26 @@ module.exports = React.createClass({
         this.props.onFinished(false);
     },
 
-    onKeyDown: function(e) {
-        if (e.keyCode === 27) { // escape
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(false);
-        }
-        else if (e.keyCode === 13) { // enter
-            e.stopPropagation();
-            e.preventDefault();
-            this.props.onFinished(true, this.refs.textinput.value);
-        }
-    },
-
     render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         return (
-            <div className="mx_TextInputDialog">
-                <div className="mx_Dialog_title">
-                    {this.props.title}
-                </div>
+            <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>
+                        <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" onKeyDown={this.onKeyDown}/>
+                        <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" />
                     </div>
                 </div>
-                <div className="mx_Dialog_buttons">
-                    <button onClick={this.onCancel}>
-                        Cancel
-                    </button>
-                    <button className="mx_Dialog_primary" onClick={this.onOk}>
-                        {this.props.button}
-                    </button>
-                </div>
-            </div>
+                <DialogButtons primaryButton={this.props.button}
+                    onPrimaryButtonClick={this.onOk}
+                    onCancel={this.onCancel} />
+            </BaseDialog>
         );
-    }
+    },
 });

src/components/views/dialogs/UnknownDeviceDialog.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 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;
+
+    const DeviceVerifyButtons = sdk.getComponent('elements.DeviceVerifyButtons');
+
+    return (
+        <li>
+            <DeviceVerifyButtons device={device} userId={userId} />
+            { device.deviceId }
+            <br />
+            { device.getDisplayName() }
+        </li>
+    );
+}
+
+DeviceListEntry.propTypes = {
+    userId: PropTypes.string.isRequired,
+
+    // deviceinfo
+    device: PropTypes.object.isRequired,
+};
+
+
+function UserUnknownDeviceList(props) {
+    const {userId, userDevices} = props;
+
+    const deviceListEntries = Object.keys(userDevices).map((deviceId) =>
+       <DeviceListEntry key={deviceId} userId={userId}
+           device={userDevices[deviceId]} />,
+    );
+
+    return (
+        <ul className="mx_UnknownDeviceDialog_deviceList">
+            { deviceListEntries }
+        </ul>
+    );
+}
+
+UserUnknownDeviceList.propTypes = {
+    userId: PropTypes.string.isRequired,
+
+    // map from deviceid -> deviceinfo
+    userDevices: PropTypes.object.isRequired,
+};
+
+
+function UnknownDeviceList(props) {
+    const {devices} = props;
+
+    const userListEntries = Object.keys(devices).map((userId) =>
+        <li key={userId}>
+            <p>{ userId }:</p>
+            <UserUnknownDeviceList userId={userId} userDevices={devices[userId]} />
+        </li>,
+    );
+
+    return <ul>{ userListEntries }</ul>;
+}
+
+UnknownDeviceList.propTypes = {
+    // map from userid -> deviceid -> deviceinfo
+    devices: PropTypes.object.isRequired,
+};
+
+
+export default React.createClass({
+    displayName: 'UnknownDeviceDialog',
+
+    propTypes: {
+        room: PropTypes.object.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,
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on("deviceVerificationChanged", this._onDeviceVerificationChanged);
+    },
+
+    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() {
+        if (this.props.devices === null) {
+            const Spinner = sdk.getComponent("elements.Spinner");
+            return <Spinner />;
+        }
+
+        let warning;
+        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.") }
+                </h4>
+            );
+        } else {
+            warning = (
+                <div>
+                    <p>
+                        { _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.") }
+                    </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={this.props.onFinished}
+                title={_t('Room contains unknown devices')}
+            >
+                <GeminiScrollbar autoshow={false} className="mx_Dialog_content">
+                    <h4>
+                        { _t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name}) }
+                    </h4>
+                    { warning }
+                    { _t("Unknown devices") }:
+
+                    <UnknownDeviceList devices={this.props.devices} />
+                </GeminiScrollbar>
+                <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?
+        // It feels like confused users will likely turn it on and then disappear in a cloud of UISIs...
+    },
+});

src/components/views/elements/AccessibleButton.js

@@ -0,0 +1,57 @@
+/*
+ Copyright 2016 Jani Mustonen
+
+ 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';
+
+/**
+ * AccessibleButton is a generic wrapper for any element that should be treated
+ * as a button.  Identifies the element as a button, setting proper tab
+ * indexing and keyboard activation behavior.
+ *
+ * @param {Object} props  react element properties
+ * @returns {Object} rendered react
+ */
+export default function AccessibleButton(props) {
+    const {element, onClick, children, ...restProps} = props;
+    restProps.onClick = onClick;
+    restProps.onKeyUp = function(e) {
+        if (e.keyCode == 13 || e.keyCode == 32) return onClick(e);
+    };
+    restProps.tabIndex = restProps.tabIndex || "0";
+    restProps.role = "button";
+    restProps.className = (restProps.className ? restProps.className + " " : "") +
+                          "mx_AccessibleButton";
+    return React.createElement(element, restProps, children);
+}
+
+/**
+ * children: React's magic prop. Represents all children given to the element.
+ * element:  (optional) The base element type. "div" by default.
+ * onClick:  (required) Event handler for button activation. Should be
+ *           implemented exactly like a normal onClick handler.
+ */
+AccessibleButton.propTypes = {
+    children: PropTypes.node,
+    element: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+};
+
+AccessibleButton.defaultProps = {
+    element: 'div',
+};
+
+AccessibleButton.displayName = "AccessibleButton";

src/components/views/elements/ActionButton.js

@@ -0,0 +1,87 @@
+/*
+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 AccessibleButton from './AccessibleButton';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+import Analytics from '../../../Analytics';
+
+export default React.createClass({
+    displayName: 'RoleButton',
+
+    propTypes: {
+        size: PropTypes.string,
+        tooltip: PropTypes.bool,
+        action: PropTypes.string.isRequired,
+        mouseOverAction: PropTypes.string,
+        label: PropTypes.string.isRequired,
+        iconPath: PropTypes.string.isRequired,
+    },
+
+    getDefaultProps: function() {
+        return {
+            size: "25",
+            tooltip: false,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            showTooltip: false,
+        };
+    },
+
+    _onClick: function(ev) {
+        ev.stopPropagation();
+        Analytics.trackEvent('Action Button', 'click', this.props.action);
+        dis.dispatch({action: this.props.action});
+    },
+
+    _onMouseEnter: function() {
+        if (this.props.tooltip) this.setState({showTooltip: true});
+        if (this.props.mouseOverAction) {
+            dis.dispatch({action: this.props.mouseOverAction});
+        }
+    },
+
+    _onMouseLeave: function() {
+        this.setState({showTooltip: false});
+    },
+
+    render: function() {
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let tooltip;
+        if (this.state.showTooltip) {
+            const RoomTooltip = sdk.getComponent("rooms.RoomTooltip");
+            tooltip = <RoomTooltip className="mx_RoleButton_tooltip" label={this.props.label} />;
+        }
+
+        return (
+            <AccessibleButton className="mx_RoleButton"
+                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 }
+            </AccessibleButton>
+        );
+    },
+});

src/components/views/elements/AddressSelector.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -16,18 +17,27 @@ limitations under the License.
 
 'use strict';
 
-var React = require("react");
-var sdk = require("../../../index");
-var classNames = require('classnames');
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import classNames from 'classnames';
+import { UserAddressType } from '../../../UserAddress';
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'AddressSelector',
 
     propTypes: {
-        onSelected: React.PropTypes.func.isRequired,
-        addressList: React.PropTypes.array.isRequired,
-        truncateAt: React.PropTypes.number.isRequired,
-        selected: React.PropTypes.number,
+        onSelected: PropTypes.func.isRequired,
+
+        // List of the addresses to display
+        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: PropTypes.node,
     },
 
     getInitialState: function() {
@@ -39,8 +49,8 @@ module.exports = 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 });
         }
@@ -50,52 +60,55 @@ module.exports = 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;
         }
     },
 
-    onKeyUp: function() {
+    moveSelectionTop: function() {
+        if (this.state.selected > 0) {
+            this.setState({
+                selected: 0,
+                hover: false,
+            });
+        }
+    },
+
+    moveSelectionUp: function() {
         if (this.state.selected > 0) {
             this.setState({
                 selected: this.state.selected - 1,
-                hover : false,
+                hover: false,
             });
         }
     },
 
-    onKeyDown: function() {
+    moveSelectionDown: function() {
         if (this.state.selected < this._maxSelected(this.props.addressList)) {
             this.setState({
                 selected: this.state.selected + 1,
-                hover : false,
+                hover: false,
             });
         }
     },
 
-    onKeySelect: function() {
+    chooseSelection: function() {
         this.selectAddress(this.state.selected);
     },
 
     onClick: function(index) {
-        var self = this;
-        return function() {
-            self.selectAddress(index);
-        };
+        this.selectAddress(index);
     },
 
     onMouseEnter: function(index) {
-        var self = this;
-        return function() {
-            self.setState({
-                selected: index,
-                hover: true,
-            });
-        };
+        this.setState({
+            selected: index,
+            hover: true,
+        });
     },
 
     onMouseLeave: function() {
-        this.setState({ hover : false });
+        this.setState({ hover: false });
     },
 
     selectAddress: function(index) {
@@ -107,15 +120,15 @@ module.exports = 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,
                 });
@@ -124,9 +137,22 @@ module.exports = React.createClass({
                 // Saving the addressListElement so we can use it to work out, in the componentDidUpdate
                 // method, how far to scroll when using the arrow keys
                 addressList.push(
-                    <div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
-                        <AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
-                    </div>
+                    <div
+                        className={classes}
+                        onClick={this.onClick.bind(this, i)}
+                        onMouseEnter={this.onMouseEnter.bind(this, i)}
+                        onMouseLeave={this.onMouseLeave}
+                        key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
+                        ref={(ref) => { this.addressListElement = ref; }}
+                    >
+                        <AddressTile
+                            address={this.props.addressList[i]}
+                            showAddress={this.props.showAddress}
+                            justified={true}
+                            networkName="vector"
+                            networkUrl="img/search-icon-vector.svg"
+                        />
+                    </div>,
                 );
             }
         }
@@ -134,21 +160,22 @@ module.exports = 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,
         });
 
         return (
-            <div className={classes} ref={(ref) => {this.scrollElement = ref}}>
+            <div className={classes} ref={(ref) => {this.scrollElement = ref;}}>
+                { this.props.header }
                 { this.createAddressListTiles() }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/AddressTile.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.
@@ -14,25 +15,23 @@ 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 classNames from 'classnames';
+import sdk from "../../../index";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import { _t } from '../../../languageHandler';
+import { UserAddressType } from '../../../UserAddress.js';
 
-var React = require('react');
-var classNames = require('classnames');
-var sdk = require("../../../index");
-var Invite = require("../../../Invite");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var Avatar = require('../../../Avatar');
 
-module.exports = React.createClass({
+export default React.createClass({
     displayName: 'AddressTile',
 
     propTypes: {
-        address: React.PropTypes.string.isRequired,
-        canDismiss: React.PropTypes.bool,
-        onDismissed: React.PropTypes.func,
-        justified: React.PropTypes.bool,
-        networkName: React.PropTypes.string,
-        networkUrl: React.PropTypes.string,
+        address: UserAddressType.isRequired,
+        canDismiss: PropTypes.bool,
+        onDismissed: PropTypes.func,
+        justified: PropTypes.bool,
     },
 
     getDefaultProps: function() {
@@ -40,37 +39,26 @@ module.exports = React.createClass({
             canDismiss: false,
             onDismissed: function() {}, // NOP
             justified: false,
-            networkName: "",
-            networkUrl: "",
         };
     },
 
     render: function() {
-        var userId, name, imgUrl, email;
-        var BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const address = this.props.address;
+        const name = address.displayName || address.address;
 
-        // Check if the addr is a valid type
-        var addrType = Invite.getAddressType(this.props.address);
-        if (addrType === "mx") {
-            let user = MatrixClientPeg.get().getUser(this.props.address);
-            if (user) {
-                userId = user.userId;
-                name = user.rawDisplayName || userId;
-                imgUrl = Avatar.avatarUrlForUser(user, 25, 25, "crop");
-            } else {
-                name=this.props.address;
-                imgUrl = "img/icon-mx-user.svg";
-            }
-        } else if (addrType === "email") {
-            email = this.props.address;
-            name="email";
-            imgUrl = "img/icon-email-user.svg";
-        } else {
-            name="Unknown";
-            imgUrl = "img/avatar-error.svg";
+        const imgUrls = [];
+        const isMatrixAddress = ['mx-user-id', 'mx-room-id'].includes(address.addressType);
+
+        if (isMatrixAddress && address.avatarMxc) {
+            imgUrls.push(MatrixClientPeg.get().mxcUrlToHttp(
+                address.avatarMxc, 25, 25, 'crop',
+            ));
+        } else if (address.addressType === 'email') {
+            imgUrls.push('img/icon-email-user.svg');
         }
 
+        // Removing networks for now as they're not really supported
+        /*
         var network;
         if (this.props.networkUrl !== "") {
             network = (
@@ -79,16 +67,20 @@ module.exports = React.createClass({
                 </div>
             );
         }
+        */
 
-        var info;
-        var error = false;
-        if (addrType === "mx" && userId) {
-            var nameClasses = classNames({
-                "mx_AddressTile_name": true,
-                "mx_AddressTile_justified": this.props.justified,
-            });
+        const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-            var idClasses = classNames({
+        const nameClasses = classNames({
+            "mx_AddressTile_name": true,
+            "mx_AddressTile_justified": this.props.justified,
+        });
+
+        let info;
+        let error = false;
+        if (isMatrixAddress && address.isKnown) {
+            const idClasses = classNames({
                 "mx_AddressTile_id": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
@@ -96,45 +88,56 @@ module.exports = React.createClass({
             info = (
                 <div className="mx_AddressTile_mx">
                     <div className={nameClasses}>{ name }</div>
-                    <div className={idClasses}>{ userId }</div>
+                    { this.props.showAddress ?
+                        <div className={idClasses}>{ address.address }</div> :
+                        <div />
+                    }
                 </div>
             );
-        } else if (addrType === "mx") {
-            var unknownMxClasses = classNames({
+        } else if (isMatrixAddress) {
+            const unknownMxClasses = classNames({
                 "mx_AddressTile_unknownMx": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
             info = (
-                <div className={unknownMxClasses}>{ this.props.address }</div>
+                <div className={unknownMxClasses}>{ this.props.address.address }</div>
             );
-        } else if (email)  {
-            var emailClasses = classNames({
+        } else if (address.addressType === "email") {
+            const emailClasses = classNames({
                 "mx_AddressTile_email": true,
                 "mx_AddressTile_justified": this.props.justified,
             });
 
+            let nameNode = null;
+            if (address.displayName) {
+                nameNode = <div className={nameClasses}>{ address.displayName }</div>;
+            }
+
             info = (
-                <div className={emailClasses}>{ email }</div>
+                <div className="mx_AddressTile_mx">
+                    <div className={emailClasses}>{ address.address }</div>
+                    { 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}>Unknown Address</div>
+                <div className={unknownClasses}>{ _t("Unknown Address") }</div>
             );
         }
 
-        var classes = classNames({
+        const classes = classNames({
             "mx_AddressTile": true,
             "mx_AddressTile_error": error,
         });
 
-        var dismiss;
+        let dismiss;
         if (this.props.canDismiss) {
             dismiss = (
                 <div className="mx_AddressTile_dismiss" onClick={this.props.onDismissed} >
@@ -145,13 +148,12 @@ module.exports = React.createClass({
 
         return (
             <div className={classes}>
-                { network }
                 <div className="mx_AddressTile_avatar">
-                    <BaseAvatar width={25} height={25} name={name} title={name} url={imgUrl} />
+                    <BaseAvatar defaultToInitialLetter={true} width={25} height={25} name={name} title={name} urls={imgUrls} />
                 </div>
                 { info }
                 { dismiss }
             </div>
         );
-    }
+    },
 });

src/components/views/elements/AppPermission.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import url from 'url';
+import { _t } from '../../../languageHandler';
+
+export default class AppPermission extends React.Component {
+    constructor(props) {
+        super(props);
+
+        const curlBase = this.getCurlBase();
+        this.state = { curlBase: curlBase};
+    }
+
+    // Return string representation of content URL without query parameters
+    getCurlBase() {
+        const wurl = url.parse(this.props.url);
+        let curl;
+        let curlString;
+
+        const searchParams = new URLSearchParams(wurl.search);
+
+        if (this.isScalarWurl(wurl) && searchParams && searchParams.get('url')) {
+            curl = url.parse(searchParams.get('url'));
+            if (curl) {
+                curl.search = curl.query = "";
+                curlString = curl.format();
+            }
+        }
+        if (!curl && wurl) {
+            wurl.search = wurl.query = "";
+            curlString = wurl.format();
+        }
+        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>;
+        }
+        return (
+            <div className='mx_AppPermissionWarning'>
+                <div className='mx_AppPermissionWarningImage'>
+                    <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 }
+                </div>
+                <input
+                    className='mx_AppPermissionButton'
+                    type='button'
+                    value={_t('Allow')}
+                    onClick={this.props.onPermissionGranted}
+                />
+            </div>
+        );
+    }
+}
+
+AppPermission.propTypes = {
+    isRoomEncrypted: PropTypes.bool,
+    url: PropTypes.string.isRequired,
+    onPermissionGranted: PropTypes.func.isRequired,
+};
+AppPermission.defaultProps = {
+    isRoomEncrypted: false,
+    onPermissionGranted: function() {},
+};

src/components/views/elements/AppTile.js

@@ -0,0 +1,493 @@
+/*
+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 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 WidgetMessaging from '../../../WidgetMessaging';
+import TintableSvgButton from './TintableSvgButton';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+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 dis from '../../../dispatcher';
+
+const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
+
+export default React.createClass({
+    displayName: '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,
+        // UserId of the current user
+        userId: PropTypes.string.isRequired,
+        // UserId of the entity that added / modified the widget
+        creatorUserId: PropTypes.string,
+        waitForIframeLoad: PropTypes.bool,
+    },
+
+    getDefaultProps() {
+        return {
+            url: "",
+            waitForIframeLoad: true,
+        };
+    },
+
+    /**
+     * 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);
+        return {
+            initialising: true,   // True while we are mangling the widget URL
+            loading: this.props.waitForIframeLoad,        // True while the iframe content is loading
+            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' || newProps.userId === newProps.creatorUserId,
+            error: null,
+            deleting: false,
+            widgetPageTitle: newProps.widgetPageTitle,
+        };
+    },
+
+    /**
+     * 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;
+        }
+
+        const params = qs.parse(u.query);
+        // Append widget ID to query parameters
+        params.widgetId = this.props.id;
+        // Append current / parent URL
+        params.parentUrl = window.location.href;
+        u.search = undefined;
+        u.query = params;
+
+        return u.format();
+    },
+
+    getInitialState() {
+        return this._getNewState(this.props);
+    },
+
+    /**
+     * Returns true if specified url is a scalar URL, typically https://scalar.vector.im/api
+     * @param  {[type]}  url URL to check
+     * @return {Boolean} True if specified URL is a scalar URL
+     */
+    isScalarUrl(url) {
+        if (!url) {
+            console.error('Scalar URL check failed. No URL specified');
+            return false;
+        }
+
+        let scalarUrls = SdkConfig.get().integrations_widgets_urls;
+        if (!scalarUrls || scalarUrls.length == 0) {
+            scalarUrls = [SdkConfig.get().integrations_rest_url];
+        }
+
+        for (let i = 0; i < scalarUrls.length; i++) {
+            if (url.startsWith(scalarUrls[i])) {
+                return true;
+            }
+        }
+        return false;
+    },
+
+    isMixedContent() {
+        const parentContentProtocol = window.location.protocol;
+        const u = url.parse(this.props.url);
+        const childContentProtocol = u.protocol;
+        if (parentContentProtocol === 'https:' && childContentProtocol !== 'https:') {
+            console.warn("Refusing to load mixed-content app:",
+            parentContentProtocol, childContentProtocol, window.location, this.props.url);
+            return true;
+        }
+        return false;
+    },
+
+    componentWillMount() {
+        WidgetMessaging.startListening();
+        WidgetMessaging.addEndpoint(this.props.id, this.props.url);
+        window.addEventListener('message', this._onMessage, false);
+        this.setScalarToken();
+    },
+
+    /**
+     * 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 (!this.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 it to mangle the URL
+        if (!this._scalarClient) {
+            this._scalarClient = new ScalarAuthClient();
+        }
+        this._scalarClient.getScalarToken().done((token) => {
+            // Append scalar_token as a query param if not already present
+            this._scalarClient.scalarToken = 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(),
+                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,
+                initialising: false,
+            });
+        });
+    },
+
+    componentWillUnmount() {
+        WidgetMessaging.stopListening();
+        WidgetMessaging.removeEndpoint(this.props.id, this.props.url);
+        window.removeEventListener('message', this._onMessage);
+    },
+
+    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,
+            });
+        }
+    },
+
+    _onMessage(event) {
+        if (this.props.type !== 'jitsi') {
+            return;
+        }
+        if (!event.origin) {
+            event.origin = event.originalEvent.origin;
+        }
+
+        if (!this.state.widgetUrl.startsWith(event.origin)) {
+            return;
+        }
+
+        if (event.data.widgetAction === 'jitsi_iframe_loaded') {
+            const iframe = this.refs.appFrame.contentWindow
+                .document.querySelector('iframe[id^="jitsiConferenceFrame"]');
+            PlatformPeg.get().setupScreenSharingForIframe(iframe);
+        }
+    },
+
+    _canUserModify() {
+        return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
+    },
+
+    _onEditClick(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() {
+        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});
+                    MatrixClientPeg.get().sendStateEvent(
+                        this.props.room.roomId,
+                        'im.vector.modular.widgets',
+                        {}, // empty content
+                        this.props.id,
+                    ).catch((e) => {
+                        console.error('Failed to delete widget', e);
+                        this.setState({deleting: false});
+                    });
+                },
+            });
+        } else {
+            console.log("Revoke widget permissions - %s", this.props.id);
+            this._revokeWidgetPermission();
+        }
+    },
+
+    /**
+     * Called when widget iframe has finished loading
+     */
+    _onLoaded() {
+        this.setState({loading: false});
+    },
+
+    /**
+     * 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 _td('Delete widget');
+        }
+        return _td('Revoke widget access');
+    },
+
+    /* TODO -- Store permission in account data so that it is persisted across multiple devices */
+    _grantWidgetPermission() {
+        console.warn('Granting permission to load widget - ', this.state.widgetUrl);
+        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() {
+        let appTileName = "No name";
+        if (this.props.name && this.props.name.trim()) {
+            appTileName = this.props.name.trim();
+        }
+        return appTileName;
+    },
+
+    onClickMenuBar(ev) {
+        ev.preventDefault();
+
+        // Ignore clicks on menu bar children
+        if (ev.target !== this.refs.menu_bar) {
+            return;
+        }
+
+        // Toggle the view state of the apps drawer
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: !this.props.show,
+        });
+    },
+
+    _getSafeUrl() {
+        const parsedWidgetUrl = url.parse(this.state.widgetUrl);
+        let safeWidgetUrl = '';
+        if (ALLOWED_APP_URL_SCHEMES.indexOf(parsedWidgetUrl.protocol) !== -1) {
+            safeWidgetUrl = url.format(parsedWidgetUrl);
+        }
+        return safeWidgetUrl;
+    },
+
+    render() {
+        let appTileBody;
+
+        // Don't render widget if it is in the process of being deleted
+        if (this.state.deleting) {
+            return <div></div>;
+        }
+
+        // Note that there is advice saying allow-scripts shouldn't be used with allow-same-origin
+        // because that would allow the iframe to prgramatically remove the sandbox attribute, but
+        // this would only be for content hosted on the same origin as the riot client: anything
+        // hosted on the same origin as the client will get the same access as if you clicked
+        // a link to it.
+        const sandboxFlags = "allow-forms allow-popups allow-popups-to-escape-sandbox "+
+            "allow-same-origin allow-scripts allow-presentation";
+
+        if (this.props.show) {
+            const loadingElement = (
+                <div className='mx_AppTileBody mx_AppLoading'>
+                    <MessageSpinner msg='Loading...' />
+                </div>
+            );
+            if (this.state.initialising) {
+                appTileBody = loadingElement;
+            } else if (this.state.hasPermissionToLoad == true) {
+                if (this.isMixedContent()) {
+                    appTileBody = (
+                        <div className="mx_AppTileBody">
+                            <AppWarning errorMsg="Error - Mixed content" />
+                        </div>
+                    );
+                } else {
+                    appTileBody = (
+                        <div className={this.state.loading ? 'mx_AppTileBody mx_AppLoading' : 'mx_AppTileBody'}>
+                            { this.state.loading && loadingElement }
+                            <iframe
+                                ref="appFrame"
+                                src={this._getSafeUrl()}
+                                allowFullScreen="true"
+                                sandbox={sandboxFlags}
+                                onLoad={this._onLoaded}
+                            ></iframe>
+                        </div>
+                    );
+                }
+            } else {
+                const isRoomEncrypted = MatrixClientPeg.get().isRoomEncrypted(this.props.room.roomId);
+                appTileBody = (
+                    <div className="mx_AppTileBody">
+                        <AppPermission
+                            isRoomEncrypted={isRoomEncrypted}
+                            url={this.state.widgetUrl}
+                            onPermissionGranted={this._grantWidgetPermission}
+                        />
+                    </div>
+                );
+            }
+        }
+
+        // editing is done in scalar
+        const showEditButton = Boolean(this._scalarClient && this._canUserModify());
+        const deleteWidgetLabel = this._deleteWidgetLabel();
+        let deleteIcon = 'img/cancel_green.svg';
+        let deleteClasses = 'mx_AppTileMenuBarWidget';
+        if (this._canUserModify()) {
+            deleteIcon = 'img/icon-delete-pink.svg';
+            deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
+        }
+
+        const windowStateIcon = (this.props.show ? 'img/minimize.svg' : 'img/maximize.svg');
+
+        return (
+            <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
+                <div ref="menu_bar" className="mx_AppTileMenuBar" onClick={this.onClickMenuBar}>
+                    <span className="mx_AppTileMenuBarTitle">
+                        <TintableSvgButton
+                            src={windowStateIcon}
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Minimize apps')}
+                            width="10"
+                            height="10"
+                        />
+                        <b>{ this.formatAppTileName() }</b>
+                        { this.state.widgetPageTitle && this.state.widgetPageTitle != this.formatAppTileName() && (
+                            <span>&nbsp;-&nbsp;{ this.state.widgetPageTitle }</span>
+                        ) }
+                    </span>
+                    <span className="mx_AppTileMenuBarWidgets">
+                        { /* Edit widget */ }
+                        { showEditButton && <TintableSvgButton
+                            src="img/edit_green.svg"
+                            className="mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            title={_t('Edit')}
+                            onClick={this._onEditClick}
+                            width="10"
+                            height="10"
+                        /> }
+
+                        { /* Delete widget */ }
+                        <TintableSvgButton
+                            src={deleteIcon}
+                            className={deleteClasses}
+                            title={_t(deleteWidgetLabel)}
+                            onClick={this._onDeleteClick}
+                            width="10"
+                            height="10"
+                        />
+                    </span>
+                </div>
+                { appTileBody }
+            </div>
+        );
+    },
+});

src/components/views/elements/AppWarning.js

@@ -0,0 +1,25 @@
+import React from 'react'; // eslint-disable-line no-unused-vars
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const AppWarning = (props) => {
+    return (
+        <div className='mx_AppPermissionWarning'>
+            <div className='mx_AppPermissionWarningImage'>
+                <img src='img/warning.svg' alt={_t('Warning!')} />
+            </div>
+            <div className='mx_AppPermissionWarningText'>
+                <span className='mx_AppPermissionWarningTextLabel'>{ props.errorMsg }</span>
+            </div>
+        </div>
+    );
+};
+
+AppWarning.propTypes = {
+    errorMsg: PropTypes.string,
+};
+AppWarning.defaultProps = {
+    errorMsg: 'Error',
+};
+
+export default AppWarning;

src/components/views/elements/CreateRoomButton.js

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

src/components/views/elements/DNDTagTile.js

@@ -0,0 +1,43 @@
+/* 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 { Draggable } from 'react-beautiful-dnd';
+
+export default function DNDTagTile(props) {
+    return <div>
+        <Draggable
+            key={props.tag}
+            draggableId={props.tag}
+            index={props.index}
+        >
+            { (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,107 +15,99 @@ 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';
+import { _t } from '../../../languageHandler';
 
 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,
+        };
+    },
+
+    componentWillMount: function() {
+        const cli = MatrixClientPeg.get();
+        cli.on("deviceVerificationChanged", this.onDeviceVerificationChanged);
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        cli.removeListener("deviceVerificationChanged", this.onDeviceVerificationChanged);
+    },
+
+    onDeviceVerificationChanged: function(userId, deviceId, deviceInfo) {
+        if (userId === this.props.userId && deviceId === this.props.device.deviceId) {
+            this.setState({ device: deviceInfo });
+        }
     },
 
     onVerifyClick: function() {
-        var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createDialog(QuestionDialog, {
-            title: "Verify device",
-            description: (
-                <div>
-                    <p>
-                        To verify that this device can be trusted, please contact its
-                        owner using some other means (e.g. in person or a phone call)
-                        and ask them whether the key they see in their User Settings
-                        for this device matches the key below:
-                    </p>
-                    <div className="mx_UserSettings_cryptoSection">
-                        <ul>
-                            <li><label>Device name:</label> <span>{ this.props.device.getDisplayName() }</span></li>
-                            <li><label>Device ID:</label>   <span><code>{ this.props.device.deviceId}</code></span></li>
-                            <li><label>Device key:</label>  <span><code><b>{ this.props.device.getFingerprint() }</b></code></span></li>
-                        </ul>
-                    </div>
-                    <p>
-                        If it matches, press the verify button below.
-                        If it doesnt, then someone else is intercepting this device
-                        and you probably want to press the blacklist button instead.
-                    </p>
-                    <p>
-                        In future this verification process will be more sophisticated.
-                    </p>
-                </div>
-            ),
-            button: "I verify that the keys match",
-            onFinished: confirm=>{
-                if (confirm) {
-                    MatrixClientPeg.get().setDeviceVerified(
-                        this.props.userId, this.props.device.deviceId, true
-                    );
-                }
-            },
+        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+        Modal.createTrackedDialog('Device Verify Dialog', '', DeviceVerifyDialog, {
+            userId: this.props.userId,
+            device: this.state.device,
         });
     },
 
     onUnverifyClick: function() {
         MatrixClientPeg.get().setDeviceVerified(
-            this.props.userId, this.props.device.deviceId, false
+            this.props.userId, this.state.device.deviceId, false,
         );
     },
 
     onBlacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.props.device.deviceId, true
+            this.props.userId, this.state.device.deviceId, true,
         );
     },
 
     onUnblacklistClick: function() {
         MatrixClientPeg.get().setDeviceBlocked(
-            this.props.userId, this.props.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.props.device.isBlocked()) {
+        if (this.state.device.isBlocked()) {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unblacklist"
                   onClick={this.onUnblacklistClick}>
-                    Unblacklist
+                    { _t("Unblacklist") }
                 </button>
             );
         } else {
             blacklistButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_blacklist"
                   onClick={this.onBlacklistClick}>
-                    Blacklist
+                    { _t("Blacklist") }
                 </button>
             );
         }
 
-        if (this.props.device.isVerified()) {
+        if (this.state.device.isVerified()) {
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_unverify"
                   onClick={this.onUnverifyClick}>
-                    Unverify
+                    { _t("Unverify") }
                 </button>
             );
         } else {
             verifyButton = (
                 <button className="mx_MemberDeviceInfo_textButton mx_MemberDeviceInfo_verify"
                   onClick={this.onVerifyClick}>
-                    Verify...
+                    { _t("Verify...") }
                 </button>
             );
         }

src/components/views/elements/DialogButtons.js

@@ -0,0 +1,62 @@
+/*
+Copyright 2017 Aidan Gauland
+
+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 { _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,
+
+        // onClick handler for the primary button.
+        onPrimaryButtonClick: PropTypes.func.isRequired,
+
+        // onClick handler for the cancel button.
+        onCancel: PropTypes.func.isRequired,
+
+        focus: PropTypes.bool,
+    },
+
+    render: function() {
+        let primaryButtonClassName = "mx_Dialog_primary";
+        if (this.props.primaryButtonClass) {
+            primaryButtonClassName += " " + this.props.primaryButtonClass;
+        }
+        return (
+            <div className="mx_Dialog_buttons">
+                <button className={primaryButtonClassName}
+                    onClick={this.props.onPrimaryButtonClick}
+                    autoFocus={this.props.focus}
+                >
+                    { this.props.primaryButton }
+                </button>
+                { this.props.children }
+                <button onClick={this.props.onCancel}>
+                    { _t("Cancel") }
+                </button>
+            </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 {
@@ -59,7 +60,7 @@ export default class DirectorySearchBox extends React.Component {
     }
 
     _onKeyUp(ev) {
-        if (ev.key == 'Enter') {
+        if (ev.key == 'Enter' && this.props.showJoinButton) {
             if (this.props.onJoinClick) {
                 this.props.onJoinClick(this.state.value);
             }
@@ -93,9 +94,9 @@ export default class DirectorySearchBox extends React.Component {
                     className="mx_DirectorySearchBox_input"
                     ref={this._collectInput}
                     onChange={this._onChange} onKeyUp={this._onKeyUp}
-                    placeholder={this.props.placeholder}
+                    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

@@ -0,0 +1,342 @@
+/*
+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 classnames from 'classnames';
+import AccessibleButton from './AccessibleButton';
+import { _t } from '../../../languageHandler';
+
+class MenuOption extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onMouseEnter = this._onMouseEnter.bind(this);
+        this._onClick = this._onClick.bind(this);
+    }
+
+    static defaultProps = {
+        disabled: false,
+    };
+
+    _onMouseEnter() {
+        this.props.onMouseEnter(this.props.dropdownKey);
+    }
+
+    _onClick(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        this.props.onClick(this.props.dropdownKey);
+    }
+
+    render() {
+        const optClasses = classnames({
+            mx_Dropdown_option: true,
+            mx_Dropdown_option_highlight: this.props.highlighted,
+        });
+
+        return <div className={optClasses}
+            onClick={this._onClick} onKeyPress={this._onKeyPress}
+            onMouseEnter={this._onMouseEnter}
+        >
+            { this.props.children }
+        </div>;
+    }
+}
+
+MenuOption.propTypes = {
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(React.PropTypes.node),
+      PropTypes.node,
+    ]),
+    highlighted: PropTypes.bool,
+    dropdownKey: PropTypes.string,
+    onClick: PropTypes.func.isRequired,
+    onMouseEnter: PropTypes.func.isRequired,
+};
+
+/*
+ * Reusable dropdown select control, akin to react-select,
+ * but somewhat simpler as react-select is 79KB of minified
+ * javascript.
+ *
+ * TODO: Port NetworkDropdown to use this.
+ */
+export default class Dropdown 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._onInputKeyPress = this._onInputKeyPress.bind(this);
+        this._onInputKeyUp = this._onInputKeyUp.bind(this);
+        this._onInputChange = this._onInputChange.bind(this);
+        this._collectRoot = this._collectRoot.bind(this);
+        this._collectInputTextBox = this._collectInputTextBox.bind(this);
+        this._setHighlightedOption = this._setHighlightedOption.bind(this);
+
+        this.inputTextBox = null;
+
+        this._reindexChildren(this.props.children);
+
+        const firstChild = React.Children.toArray(props.children)[0];
+
+        this.state = {
+            // True if the menu is dropped-down
+            expanded: false,
+            // The key of the highlighted option
+            // (the option that would become selected if you pressed enter)
+            highlightedOption: firstChild ? firstChild.key : null,
+            // the current search query
+            searchQuery: '',
+        };
+    }
+
+    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);
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('click', this._onDocumentClick, false);
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (!nextProps.children || nextProps.children.length === 0) {
+            return;
+        }
+        this._reindexChildren(nextProps.children);
+        const firstChild = nextProps.children[0];
+        this.setState({
+            highlightedOption: firstChild ? firstChild.key : null,
+        });
+    }
+
+    _reindexChildren(children) {
+        this.childrenByKey = {};
+        React.Children.forEach(children, (child) => {
+            this.childrenByKey[child.key] = child;
+        });
+    }
+
+    _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) {
+        if (this.props.disabled) return;
+
+        if (!this.state.expanded) {
+            this.setState({
+                expanded: true,
+            });
+            ev.preventDefault();
+        }
+    }
+
+    _onMenuOptionClick(dropdownKey) {
+        this.setState({
+            expanded: false,
+        });
+        this.props.onOptionChange(dropdownKey);
+    }
+
+    _onInputKeyPress(e) {
+        // This needs to be on the keypress event because otherwise
+        // it can't cancel the form submission
+        if (e.key == 'Enter') {
+            this.setState({
+                expanded: false,
+            });
+            this.props.onOptionChange(this.state.highlightedOption);
+            e.preventDefault();
+        }
+    }
+
+    _onInputKeyUp(e) {
+        // These keys don't generate keypress events and so needs to
+        // be on keyup
+        if (e.key == 'Escape') {
+            this.setState({
+                expanded: false,
+            });
+        } else if (e.key == 'ArrowDown') {
+            this.setState({
+                highlightedOption: this._nextOption(this.state.highlightedOption),
+            });
+        } else if (e.key == 'ArrowUp') {
+            this.setState({
+                highlightedOption: this._prevOption(this.state.highlightedOption),
+            });
+        }
+    }
+
+    _onInputChange(e) {
+        this.setState({
+            searchQuery: e.target.value,
+        });
+        if (this.props.onSearchChange) {
+            this.props.onSearchChange(e.target.value);
+        }
+    }
+
+    _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;
+        if (e) e.focus();
+    }
+
+    _setHighlightedOption(optionKey) {
+        this.setState({
+            highlightedOption: optionKey,
+        });
+    }
+
+    _nextOption(optionKey) {
+        const keys = Object.keys(this.childrenByKey);
+        const index = keys.indexOf(optionKey);
+        return keys[(index + 1) % keys.length];
+    }
+
+    _prevOption(optionKey) {
+        const keys = Object.keys(this.childrenByKey);
+        const index = keys.indexOf(optionKey);
+        return keys[(index - 1) % keys.length];
+    }
+
+    _getMenuOptions() {
+        const options = React.Children.map(this.props.children, (child) => {
+            return (
+                <MenuOption key={child.key} dropdownKey={child.key}
+                    highlighted={this.state.highlightedOption == child.key}
+                    onMouseEnter={this._setHighlightedOption}
+                    onClick={this._onMenuOptionClick}
+                >
+                    { child }
+                </MenuOption>
+            );
+        });
+        if (options.length === 0) {
+            return [<div key="0" className="mx_Dropdown_option">
+                { _t("No results") }
+            </div>];
+        }
+        return options;
+    }
+
+    render() {
+        let currentValue;
+
+        const menuStyle = {};
+        if (this.props.menuWidth) menuStyle.width = this.props.menuWidth;
+
+        let menu;
+        if (this.state.expanded) {
+            if (this.props.searchEnabled) {
+                currentValue = <input type="text" className="mx_Dropdown_option"
+                    ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
+                    onKeyUp={this._onInputKeyUp}
+                    onChange={this._onInputChange}
+                    value={this.state.searchQuery}
+                />;
+            }
+            menu = <div className="mx_Dropdown_menu" style={menuStyle}>
+                { this._getMenuOptions() }
+            </div>;
+        }
+
+        if (!currentValue) {
+            const selectedChild = this.props.getShortOption ?
+                this.props.getShortOption(this.props.value) :
+                this.childrenByKey[this.props.value];
+            currentValue = <div className="mx_Dropdown_option">
+                { selectedChild }
+            </div>;
+        }
+
+        const dropdownClasses = {
+            mx_Dropdown: true,
+            mx_Dropdown_disabled: this.props.disabled,
+        };
+        if (this.props.className) {
+            dropdownClasses[this.props.className] = true;
+        }
+
+        // Note the menu sits inside the AccessibleButton div so it's anchored
+        // to the input, but overflows below it. The root contains both.
+        return <div className={classnames(dropdownClasses)} ref={this._collectRoot}>
+            <AccessibleButton className="mx_Dropdown_input" onClick={this._onInputClick}>
+                { currentValue }
+                <span className="mx_Dropdown_arrow"></span>
+                { menu }
+            </AccessibleButton>
+        </div>;
+    }
+}
+
+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: PropTypes.number,
+    // Called when the selected option changes
+    onOptionChange: PropTypes.func.isRequired,
+    // Called when the value of the search field changes
+    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: PropTypes.func,
+    value: PropTypes.string,
+    // negative for consistency with HTML
+    disabled: PropTypes.bool,
+};

src/components/views/elements/EditableItemList.js

@@ -0,0 +1,153 @@
+/*
+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 ?
+                <EditableItem
+                    key={-1}
+                    initialValue={this.props.newItem}
+                    onAdd={this.onItemAdded}
+                    onChange={this.onNewItemChanged}
+                    addOnChange={true}
+                    placeholder={this.props.placeholder}
+                /> : <div />
+            }
+        </div>);
+    },
+});

src/components/views/elements/EditableText.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
+import PropTypes from 'prop-types';
 
 const KEY_TAB = 9;
 const KEY_SHIFT = 16;
@@ -26,15 +27,18 @@ 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,
-        blurToCancel: React.PropTypes.bool,
-        editable: React.PropTypes.bool,
+        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: PropTypes.bool,
+        // Will cause onValueChanged(value, true) to fire on blur
+        blurToSubmit: PropTypes.bool,
+        editable: PropTypes.bool,
     },
 
     Phases: {
@@ -51,17 +55,20 @@ module.exports = React.createClass({
             editable: true,
             className: "mx_EditableText",
             placeholderClassName: "mx_EditableText_placeholder",
+            blurToSubmit: false,
         };
     },
 
     getInitialState: function() {
         return {
             phase: this.Phases.Display,
-        }
+        };
     },
 
     componentWillReceiveProps: function(nextProps) {
-        if (nextProps.initialValue !== this.props.initialValue) {
+        if (nextProps.initialValue !== this.props.initialValue ||
+            nextProps.initialValue !== this.value
+        ) {
             this.value = nextProps.initialValue;
             if (this.refs.editable_div) {
                 this.showPlaceholder(!this.value);
@@ -89,8 +96,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;
@@ -119,6 +125,7 @@ module.exports = React.createClass({
         this.value = this.props.initialValue;
         this.showPlaceholder(!this.value);
         this.onValueChanged(false);
+        this.refs.editable_div.blur();
     },
 
     onValueChanged: function(shouldSubmit) {
@@ -145,8 +152,7 @@ module.exports = React.createClass({
 
         if (!ev.target.textContent) {
             this.showPlaceholder(true);
-        }
-        else if (!this.placeholder) {
+        } else if (!this.placeholder) {
             this.value = ev.target.textContent;
         }
 
@@ -164,48 +170,47 @@ module.exports = React.createClass({
 
         this.setState({
             phase: this.Phases.Edit,
-        })
+        });
     },
 
     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) {
-        var self = this;
-        var submit = (ev.key === "Enter");
+    onFinish: function(ev, shouldSubmit) {
+        const self = this;
+        const submit = (ev.key === "Enter") || shouldSubmit;
         this.setState({
             phase: this.Phases.Display,
         }, function() {
-            self.onValueChanged(submit);
+            if (this.value !== this.props.initialValue) {
+                self.onValueChanged(submit);
+            }
         });
     },
 
     onBlur: function(ev) {
-        var sel = window.getSelection();
+        const sel = window.getSelection();
         sel.removeAllRanges();
 
-        if (this.props.blurToCancel)
-            this.cancelEdit();
-        else
-            this.onFinish(ev);
+        if (this.props.blurToCancel) {this.cancelEdit();} else {this.onFinish(ev, this.props.blurToSubmit);}
 
         this.showPlaceholder(!this.value);
     },
 
     render: function() {
-        var editable_el;
+        let editable_el;
 
         if (!this.props.editable || (this.state.phase == this.Phases.Display && (this.props.label || this.props.labelClassName) && !this.value)) {
             // show the label
@@ -217,5 +222,5 @@ module.exports = React.createClass({
         }
 
         return editable_el;
-    }
+    },
 });

src/components/views/elements/EditableTextContainer.js

@@ -15,8 +15,9 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import sdk from '../../../index';
-import q from 'q';
+import Promise from 'bluebird';
 
 /**
  * A component which wraps an EditableText, with a spinner while updates take
@@ -64,7 +65,7 @@ export default class EditableTextContainer extends React.Component {
                     errorString: error.toString(),
                     busy: false,
                 });
-            }
+            },
         );
     }
 
@@ -96,26 +97,27 @@ 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}
                     onValueChanged={this._onValueChanged}
+                    blurToSubmit={this.props.blurToSubmit}
                 />
             );
         }
@@ -125,23 +127,27 @@ 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: PropTypes.bool,
 };
 
 
 EditableTextContainer.defaultProps = {
     initialValue: "",
     placeholder: "",
-    onSubmit: function(v) {return q(); },
+    blurToSubmit: false,
+    onSubmit: function(v) {return Promise.resolve(); },
 };

src/components/views/elements/EmojiText.js

@@ -1,5 +1,6 @@
 /*
  Copyright 2016 Aviral Dasgupta
+ Copyright 2017 New Vector Ltd
 
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
@@ -15,17 +16,25 @@
  */
 
 import React from 'react';
-import {emojifyText} from '../../../HtmlUtils';
+import PropTypes from 'prop-types';
+import {emojifyText, containsEmoji} from '../../../HtmlUtils';
 
 export default function EmojiText(props) {
     const {element, children, ...restProps} = props;
-    restProps.dangerouslySetInnerHTML = emojifyText(children);
-    return React.createElement(element, restProps);
+
+    // fast path: simple regex to detect strings that don't contain
+    // emoji and just return them
+    if (containsEmoji(children)) {
+        restProps.dangerouslySetInnerHTML = emojifyText(children);
+        return React.createElement(element, restProps);
+    } else {
+        return React.createElement(element, restProps, children);
+    }
 }
 
 EmojiText.propTypes = {
-    element: 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/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

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

src/components/views/elements/LanguageDropdown.js

@@ -0,0 +1,121 @@
+/*
+Copyright 2017 Marcel Radzio (MTRNord)
+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 sdk from '../../../index';
+import * as languageHandler from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
+
+function languageMatchesSearchQuery(query, language) {
+    if (language.label.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
+    if (language.value.toUpperCase() == query.toUpperCase()) return true;
+    return false;
+}
+
+export default class LanguageDropdown extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onSearchChange = this._onSearchChange.bind(this);
+
+        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;
+                return 0;
+            });
+            this.setState({langs});
+        }).catch(() => {
+            this.setState({langs: ['en']});
+        }).done();
+
+        if (!this.props.value) {
+            // 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 language = SettingsStore.getValue("language", null, /*excludeDefault:*/true);
+            if (language) {
+              this.props.onOptionChange(language);
+            } else {
+              const language = languageHandler.normalizeLanguageKey(languageHandler.getLanguageFromBrowser());
+              this.props.onOptionChange(language);
+            }
+        }
+    }
+
+    _onSearchChange(search) {
+        this.setState({
+            searchQuery: search,
+        });
+    }
+
+    render() {
+        if (this.state.langs === null) {
+            const Spinner = sdk.getComponent('elements.Spinner');
+            return <Spinner />;
+        }
+
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        let displayedLanguages;
+        if (this.state.searchQuery) {
+            displayedLanguages = this.state.langs.filter((lang) => {
+                return languageMatchesSearchQuery(this.state.searchQuery, lang);
+            });
+        } else {
+            displayedLanguages = this.state.langs;
+        }
+
+        const options = displayedLanguages.map((language) => {
+            return <div key={language.value}>
+                { 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;
+        if (language) {
+          value = this.props.value || language;
+        } else {
+          language = navigator.language || navigator.userLanguage;
+          value = this.props.value || language;
+        }
+
+        return <Dropdown className={this.props.className}
+            onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
+            searchEnabled={true} value={value}
+        >
+            { options }
+        </Dropdown>;
+    }
+}
+
+LanguageDropdown.propTypes = {
+    className: PropTypes.string,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
+};

src/components/views/elements/ManageIntegsButton.js

@@ -0,0 +1,107 @@
+/*
+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 classNames from 'classnames';
+import SdkConfig from '../../../SdkConfig';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import ScalarMessaging from '../../../ScalarMessaging';
+import Modal from "../../../Modal";
+import { _t } from '../../../languageHandler';
+import AccessibleButton from './AccessibleButton';
+import TintableSvg from './TintableSvg';
+
+export default class ManageIntegsButton extends React.Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            scalarError: null,
+        };
+
+        this.onManageIntegrations = this.onManageIntegrations.bind(this);
+    }
+
+    componentWillMount() {
+        ScalarMessaging.startListening();
+        this.scalarClient = null;
+
+        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+            this.scalarClient = new ScalarAuthClient();
+            this.scalarClient.connect().done(() => {
+                this.forceUpdate();
+            }, (err) => {
+                this.setState({ scalarError: err});
+                console.error('Error whilst initialising scalarClient for ManageIntegsButton', err);
+            });
+        }
+    }
+
+    componentWillUnmount() {
+        ScalarMessaging.stopListening();
+    }
+
+    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) :
+                null,
+        }, "mx_IntegrationsManager");
+    }
+
+    render() {
+        let integrationsButton = <div />;
+        let integrationsWarningTriangle = <div />;
+        let integrationsErrorPopup = <div />;
+        if (this.scalarClient !== null) {
+            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>
+                );
+            }
+
+            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;
+    }
+}
+
+ManageIntegsButton.propTypes = {
+    roomId: PropTypes.string.isRequired,
+};

src/components/views/elements/MemberEventListSummary.js

@@ -14,136 +14,45 @@ 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';
 
 module.exports = React.createClass({
     displayName: 'MemberEventListSummary',
 
     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,
-        // The maximum number of names to show in either the join or leave summaries
-        summaryLength: React.PropTypes.number,
+        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: 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: PropTypes.func,
+        // Whether or not to begin with state.expanded=true
+        startExpanded: PropTypes.bool,
     },
 
     getInitialState: function() {
         return {
-            expanded: false,
+            expanded: Boolean(this.props.startExpanded),
         };
     },
 
     getDefaultProps: function() {
         return {
-            summaryLength: 3,
+            summaryLength: 1,
             threshold: 3,
             avatarsMaxLength: 5,
         };
     },
 
-    _toggleSummary: function() {
-        this.setState({
-            expanded: !this.state.expanded,
-        });
-    },
-
-    _getEventSenderName: function(ev) {
-        if (!ev) {
-            return 'undefined';
-        }
-        return ev.sender.name || ev.event.content.displayname || ev.getSender();
-    },
-
-    _renderNameList: function(events) {
-        if (events.length === 0) {
-            return null;
-        }
-        let originalNumber = events.length;
-        events = events.slice(0, this.props.summaryLength);
-        let lastEvent = events.pop();
-
-        let names = events.map((ev) => {
-            return this._getEventSenderName(ev);
-        }).join(', ');
-
-        let lastName = this._getEventSenderName(lastEvent);
-        if (names.length === 0) {
-            // special-case for a single event
-            return lastName;
-        }
-
-        let remaining = originalNumber - this.props.summaryLength;
-        if (remaining > 0) {
-            //  name1, name2, name3, and 100 others
-            return names + ', ' + lastName + ', and ' + remaining + ' others';
-        } else {
-            //  name1, name2 and name3
-            return names + ' and ' + lastName;
-        }
-    },
-
-    _renderSummary: function(joinEvents, leaveEvents) {
-        let joiners = this._renderNameList(joinEvents);
-        let leavers = this._renderNameList(leaveEvents);
-
-        let joinSummary = null;
-        if (joiners) {
-            joinSummary = (
-                <span>
-                    {joiners} joined the room
-                </span>
-            );
-        }
-        let leaveSummary = null;
-        if (leavers) {
-            leaveSummary = (
-                <span>
-                    {leavers} left the room
-                </span>
-            );
-        }
-
-        // The joinEvents and leaveEvents are representative of the net movement
-        // per-user, and so it is possible that the total net movement is nil,
-        // whilst there are some events in the expanded list. If the total net
-        // movement is nil, then neither joinSummary nor leaveSummary will be
-        // truthy, so return null.
-        if (!joinSummary && !leaveSummary) {
-            return null;
-        }
-
-        return (
-            <span>
-                {joinSummary}{joinSummary && leaveSummary?'; ':''}
-                {leaveSummary}.&nbsp;
-            </span>
-        );
-    },
-
-    _renderAvatars: function(events) {
-        let avatars = events.slice(0, this.props.avatarsMaxLength).map((e) => {
-            return (
-                <MemberAvatar
-                    key={e.getId()}
-                    member={e.sender}
-                    width={14}
-                    height={14}
-                />
-            );
-        });
-
-        return (
-            <span>
-                {avatars}
-            </span>
-        );
-    },
-
     shouldComponentUpdate: function(nextProps, nextState) {
         // Update if
         //  - The number of summarised events has changed
@@ -157,10 +66,358 @@ module.exports = React.createClass({
         );
     },
 
+    _toggleSummary: function() {
+        this.setState({
+            expanded: !this.state.expanded,
+        });
+        this.props.onToggle();
+    },
+
+    /**
+     * Render the JSX for users aggregated by their transition sequences (`eventAggregates`) where
+     * the sequences are ordered by `orderedTransitionSequences`.
+     * @param {object[]} eventAggregates a map of transition sequence to array of user display names
+     * or user IDs.
+     * @param {string[]} orderedTransitionSequences an array which is some ordering of
+     * `Object.keys(eventAggregates)`.
+     * @returns {ReactElement} a single <span> containing the textual summary of the aggregated
+     * events that occurred.
+     */
+    _renderSummary: function(eventAggregates, orderedTransitionSequences) {
+        const summaries = orderedTransitionSequences.map((transitions) => {
+            const userNames = eventAggregates[transitions];
+            const nameList = this._renderNameList(userNames);
+
+            const splitTransitions = transitions.split(',');
+
+            // Some neighbouring transitions are common, so canonicalise some into "pair"
+            // transitions
+            const canonicalTransitions = this._getCanonicalTransitions(splitTransitions);
+            // Transform into consecutive repetitions of the same transition (like 5
+            // consecutive 'joined_and_left's)
+            const coalescedTransitions = this._coalesceRepeatedTransitions(
+                canonicalTransitions,
+            );
+
+            const descs = coalescedTransitions.map((t) => {
+                return this._getDescriptionForTransition(
+                    t.transitionType, userNames.length, t.repeats,
+                );
+            });
+
+            const desc = this._renderCommaSeparatedList(descs);
+
+            return _t('%(nameList)s %(transitionList)s', { nameList: nameList, transitionList: desc });
+        });
+
+        if (!summaries) {
+            return null;
+        }
+
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
+        return (
+            <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
+                <EmojiText>
+                    { summaries.join(", ") }
+                </EmojiText>
+            </span>
+        );
+    },
+
+    /**
+     * @param {string[]} users an array of user display names or user IDs.
+     * @returns {string} a comma-separated list that ends with "and [n] others" if there are
+     * more items in `users` than `this.props.summaryLength`, which is the number of names
+     * included before "and [n] others".
+     */
+    _renderNameList: function(users) {
+        return this._renderCommaSeparatedList(users, this.props.summaryLength);
+    },
+
+    /**
+     * Canonicalise an array of transitions such that some pairs of transitions become
+     * single transitions. For example an input ['joined','left'] would result in an output
+     * ['joined_and_left'].
+     * @param {string[]} transitions an array of transitions.
+     * @returns {string[]} an array of transitions.
+     */
+    _getCanonicalTransitions: function(transitions) {
+        const modMap = {
+            'joined': {
+                'after': 'left',
+                'newTransition': 'joined_and_left',
+            },
+            'left': {
+                'after': 'joined',
+                'newTransition': 'left_and_joined',
+            },
+            // $currentTransition : {
+            //     'after' : $nextTransition,
+            //     'newTransition' : 'new_transition_type',
+            // },
+        };
+        const res = [];
+
+        for (let i = 0; i < transitions.length; i++) {
+            const t = transitions[i];
+            const t2 = transitions[i + 1];
+
+            let transition = t;
+
+            if (i < transitions.length - 1 && modMap[t] && modMap[t].after === t2) {
+                transition = modMap[t].newTransition;
+                i++;
+            }
+
+            res.push(transition);
+        }
+        return res;
+    },
+
+    /**
+     * Transform an array of transitions into an array of transitions and how many times
+     * they are repeated consecutively.
+     *
+     * An array of 123 "joined_and_left" transitions, would result in:
+     * ```
+     * [{
+     *   transitionType: "joined_and_left"
+     *   repeats: 123
+     * }]
+     * ```
+     * @param {string[]} transitions the array of transitions to transform.
+     * @returns {object[]} an array of coalesced transitions.
+     */
+    _coalesceRepeatedTransitions: function(transitions) {
+        const res = [];
+        for (let i = 0; i < transitions.length; i++) {
+            if (res.length > 0 && res[res.length - 1].transitionType === transitions[i]) {
+                res[res.length - 1].repeats += 1;
+            } else {
+                res.push({
+                    transitionType: transitions[i],
+                    repeats: 1,
+                });
+            }
+        }
+        return res;
+    },
+
+    /**
+     * For a certain transition, t, describe what happened to the users that
+     * underwent the transition.
+     * @param {string} t the transition type.
+     * @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, 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) {
+            case "joined":
+                res = (userCount > 1)
+                    ? _t("%(severalUsers)sjoined %(count)s times", { severalUsers: "", count: repeats })
+                    : _t("%(oneUser)sjoined %(count)s times", { oneUser: "", count: repeats });
+                break;
+            case "left":
+                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":
+                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":
+                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":
+                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":
+                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":
+                res = (userCount > 1)
+                    ? _t("were invited %(count)s times", { count: repeats })
+                    : _t("was invited %(count)s times", { count: repeats });
+                break;
+            case "banned":
+                res = (userCount > 1)
+                    ? _t("were banned %(count)s times", { count: repeats })
+                    : _t("was banned %(count)s times", { count: repeats });
+                break;
+            case "unbanned":
+                res = (userCount > 1)
+                    ? _t("were unbanned %(count)s times", { count: repeats })
+                    : _t("was unbanned %(count)s times", { count: repeats });
+                break;
+            case "kicked":
+                res = (userCount > 1)
+                    ? _t("were kicked %(count)s times", { count: repeats })
+                    : _t("was kicked %(count)s times", { count: repeats });
+                break;
+            case "changed_name":
+                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":
+                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;
+        }
+
+        return res;
+    },
+
+    /**
+     * Constructs a written English string representing `items`, with an optional limit on
+     * the number of items included in the result. If specified and if the length of
+     *`items` is greater than the limit, the string "and n others" will be appended onto
+     * the result.
+     * If `items` is empty, returns the empty string. If there is only one item, return
+     * it.
+     * @param {string[]} items the items to construct a string from.
+     * @param {number?} itemLimit the number by which to limit the list.
+     * @returns {string} a string constructed by joining `items` with a comma between each
+     * item, but with the last item appended as " and [lastItem]".
+     */
+    _renderCommaSeparatedList(items, itemLimit) {
+        const remaining = itemLimit === undefined ? 0 : Math.max(
+            items.length - itemLimit, 0,
+        );
+        if (items.length === 0) {
+            return "";
+        } else if (items.length === 1) {
+            return items[0];
+        } else if (remaining > 0) {
+            items = items.slice(0, itemLimit);
+            return _t("%(items)s and %(count)s others", { items: items.join(', '), count: remaining } );
+        } else {
+            const lastItem = items.pop();
+            return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
+        }
+    },
+
+    _renderAvatars: function(roomMembers) {
+        const avatars = roomMembers.slice(0, this.props.avatarsMaxLength).map((m) => {
+            return (
+                <MemberAvatar key={m.userId} member={m} width={14} height={14} />
+            );
+        });
+        return (
+            <span className="mx_MemberEventListSummary_avatars" onClick={this._toggleSummary}>
+                { avatars }
+            </span>
+        );
+    },
+
+    _getTransitionSequence: function(events) {
+        return events.map(this._getTransition);
+    },
+
+    /**
+     * Label a given membership event, `e`, where `getContent().membership` has
+     * changed for each transition allowed by the Matrix protocol. This attempts to
+     * label the membership changes that occur in `../../../TextForEvent.js`.
+     * @param {MatrixEvent} e the membership change event to label.
+     * @returns {string?} the transition type given to this event. This defaults to `null`
+     * if a transition is not recognised.
+     */
+    _getTransition: function(e) {
+        switch (e.mxEvent.getContent().membership) {
+            case 'invite': return 'invited';
+            case 'ban': return 'banned';
+            case 'join':
+                if (e.mxEvent.getPrevContent().membership === 'join') {
+                    if (e.mxEvent.getContent().displayname !==
+                        e.mxEvent.getPrevContent().displayname) {
+                        return 'changed_name';
+                    } 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 {
+                    return 'joined';
+                }
+            case 'leave':
+                if (e.mxEvent.getSender() === e.mxEvent.getStateKey()) {
+                    switch (e.mxEvent.getPrevContent().membership) {
+                        case 'invite': return 'invite_reject';
+                        default: return 'left';
+                    }
+                }
+                switch (e.mxEvent.getPrevContent().membership) {
+                    case 'invite': return 'invite_withdrawal';
+                    case 'ban': return 'unbanned';
+                    case 'join': return 'kicked';
+                    default: return 'left';
+                }
+            default: return null;
+        }
+    },
+
+    _getAggregate: function(userEvents) {
+        // A map of aggregate type to arrays of display names. Each aggregate type
+        // is a comma-delimited string of transitions, e.g. "joined,left,kicked".
+        // The array of display names is the array of users who went through that
+        // sequence during eventsToRender.
+        const aggregate = {
+            // $aggregateType : []:string
+        };
+        // A map of aggregate types to the indices that order them (the index of
+        // the first event for a given transition sequence)
+        const aggregateIndices = {
+            // $aggregateType : int
+        };
+
+        const users = Object.keys(userEvents);
+        users.forEach(
+            (userId) => {
+                const firstEvent = userEvents[userId][0];
+                const displayName = firstEvent.displayName;
+
+                const seq = this._getTransitionSequence(userEvents[userId]);
+                if (!aggregate[seq]) {
+                    aggregate[seq] = [];
+                    aggregateIndices[seq] = -1;
+                }
+
+                aggregate[seq].push(displayName);
+
+                if (aggregateIndices[seq] === -1 ||
+                    firstEvent.index < aggregateIndices[seq]) {
+                        aggregateIndices[seq] = firstEvent.index;
+                }
+            },
+        );
+
+        return {
+            names: aggregate,
+            indices: aggregateIndices,
+        };
+    },
+
     render: function() {
-        let eventsToRender = this.props.events;
-        let fewEvents = eventsToRender.length < this.props.threshold;
-        let expanded = this.state.expanded || fewEvents;
+        const eventsToRender = this.props.events;
+        const eventIds = eventsToRender.map((e) => e.getId()).join(',');
+        const fewEvents = eventsToRender.length < this.props.threshold;
+        const expanded = this.state.expanded || fewEvents;
 
         let expandedEvents = null;
         if (expanded) {
@@ -169,86 +426,69 @@ module.exports = React.createClass({
 
         if (fewEvents) {
             return (
-                <div className="mx_MemberEventListSummary">
-                    {expandedEvents}
+                <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
+                    { expandedEvents }
                 </div>
             );
         }
 
-        // Map user IDs to the first and last member events in eventsToRender for each user
-        let userEvents = {
-            // $userId : {first : e0, last : e1}
+        // Map user IDs to an array of objects:
+        const userEvents = {
+            // $userId : [{
+            //     // The original event
+            //     mxEvent: e,
+            //     // The display name of the user (if not, then user ID)
+            //     displayName: e.target.name || userId,
+            //     // The original index of the event in this.props.events
+            //     index: index,
+            // }]
         };
 
-        eventsToRender.forEach((e) => {
-            const userId = e.getSender();
+        const avatarMembers = [];
+        eventsToRender.forEach((e, index) => {
+            const userId = e.getStateKey();
             // Initialise a user's events
             if (!userEvents[userId]) {
-                userEvents[userId] = {first: null, last: null};
+                userEvents[userId] = [];
+                if (e.target) avatarMembers.push(e.target);
             }
-            if (!userEvents[userId].first) {
-                userEvents[userId].first = e;
-            }
-            userEvents[userId].last = e;
+            userEvents[userId].push({
+                mxEvent: e,
+                displayName: (e.target ? e.target.name : null) || userId,
+                index: index,
+            });
         });
 
-        // Populate the join/leave event arrays with events that represent what happened
-        // overall to a user's membership. If no events are added to either array for a
-        // particular user, they will be considered a user that "joined and left".
-        let joinEvents = [];
-        let leaveEvents = [];
-        let joinedAndLeft = 0;
-        let senders = Object.keys(userEvents);
-        senders.forEach(
-            (userId) => {
-                let firstEvent = userEvents[userId].first;
-                let lastEvent = userEvents[userId].last;
+        const aggregate = this._getAggregate(userEvents);
 
-                // Membership BEFORE eventsToRender
-                let previousMembership = firstEvent.getPrevContent().membership || "leave";
-
-                // If the last membership event differs from previousMembership, use that.
-                if (previousMembership !== lastEvent.getContent().membership) {
-                    if (lastEvent.event.content.membership === 'join') {
-                        joinEvents.push(lastEvent);
-                    } else if (lastEvent.event.content.membership === 'leave') {
-                        leaveEvents.push(lastEvent);
-                    }
-                } else {
-                    // Increment the number of users whose membership change was nil overall
-                    joinedAndLeft++;
-                }
-            }
+        // 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],
         );
 
-        let avatars = this._renderAvatars(joinEvents.concat(leaveEvents));
-        let summary = this._renderSummary(joinEvents, leaveEvents);
-        let toggleButton = (
-            <a className="mx_MemberEventListSummary_toggle" onClick={this._toggleSummary}>
-                {expanded ? 'collapse' : 'expand'}
-            </a>
-        );
-        let plural = (joinEvents.length + leaveEvents.length > 0) ? 'others' : 'users';
-        let noun = (joinedAndLeft === 1 ? 'user' : plural);
-
-        let summaryContainer = (
-            <div className="mx_EventTile_line">
-                <div className="mx_EventTile_info">
-                    <span className="mx_MemberEventListSummary_avatars">
-                        {avatars}
-                    </span>
-                    <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                        {summary}{joinedAndLeft ? joinedAndLeft + ' ' + noun + ' joined and left' : ''}
-                    </span>&nbsp;
-                    {toggleButton}
+        let summaryContainer = null;
+        if (!expanded) {
+            summaryContainer = (
+                <div className="mx_EventTile_line">
+                    <div className="mx_EventTile_info">
+                        { this._renderAvatars(avatarMembers) }
+                        { this._renderSummary(aggregate.names, orderedTransitionSequences) }
+                    </div>
                 </div>
+            );
+        }
+        const toggleButton = (
+            <div className={"mx_MemberEventListSummary_toggle"} onClick={this._toggleSummary}>
+                { expanded ? _t('collapse') : _t('expand') }
             </div>
         );
 
         return (
-            <div className="mx_MemberEventListSummary">
-                {summaryContainer}
-                {expandedEvents}
+            <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
+                { toggleButton }
+                { summaryContainer }
+                { expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null }
+                { expandedEvents }
             </div>
         );
     },

src/components/views/elements/MessageSpinner.js

@@ -0,0 +1,34 @@
+/*
+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';
+
+module.exports = React.createClass({
+    displayName: 'MessageSpinner',
+
+    render: function() {
+        const w = this.props.w || 32;
+        const h = this.props.h || 32;
+        const imgClass = this.props.imgClassName || "";
+        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>
+        );
+    },
+});

src/components/views/elements/Pill.js

@@ -0,0 +1,242 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import React from 'react';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import classNames from 'classnames';
+import { Room, RoomMember } from 'matrix-js-sdk';
+import PropTypes from 'prop-types';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import { MATRIXTO_URL_PATTERN } from '../../../linkify-matrix';
+import { getDisplayAliasForRoom } from '../../../Rooms';
+
+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 Pill = React.createClass({
+    statics: {
+        isPillUrl: (url) => {
+            return !!REGEX_MATRIXTO.exec(url);
+        },
+        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_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
+        inMessage: PropTypes.bool,
+        // The room in which this pill is being rendered
+        room: PropTypes.instanceOf(Room),
+        // Whether to include an avatar in the pill
+        shouldShowPillAvatar: PropTypes.bool,
+    },
+
+    getInitialState() {
+        return {
+            // ID/alias of the room/user
+            resourceId: null,
+            // Type of pill
+            pillType: null,
+
+            // The member related to the user pill
+            member: null,
+            // The room related to the room pill
+            room: null,
+        };
+    },
+
+    componentWillReceiveProps(nextProps) {
+        let regex = REGEX_MATRIXTO;
+        if (nextProps.inMessage) {
+            regex = REGEX_LOCAL_MATRIXTO;
+        }
+
+        let matrixToMatch;
+        let resourceId;
+        let 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) || [];
+
+            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,
+        }[prefix];
+
+        let member;
+        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;
+                if (!localMember) {
+                    member = new RoomMember(null, resourceId);
+                    this.doProfileLookup(resourceId, member);
+                }
+            }
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const localRoom = resourceId[0] === '#' ?
+                    MatrixClientPeg.get().getRooms().find((r) => {
+                        return r.getAliases().includes(resourceId);
+                    }) : MatrixClientPeg.get().getRoom(resourceId);
+                room = localRoom;
+                if (!localRoom) {
+                    // TODO: This would require a new API to resolve a room alias to
+                    // a room avatar and name.
+                    // this.doRoomProfileLookup(resourceId, member);
+                }
+            }
+                break;
+        }
+        this.setState({resourceId, pillType, member, room});
+    },
+
+    componentWillMount() {
+        this._unmounted = false;
+        this.componentWillReceiveProps(this.props);
+    },
+
+    componentWillUnmount() {
+        this._unmounted = true;
+    },
+
+    doProfileLookup: function(userId, member) {
+        MatrixClientPeg.get().getProfileInfo(userId).then((resp) => {
+            if (this._unmounted) {
+                return;
+            }
+            member.name = resp.displayname;
+            member.rawDisplayName = resp.displayname;
+            member.events.member = {
+                getContent: () => {
+                    return {avatar_url: resp.avatar_url};
+                },
+            };
+            this.setState({member});
+        }).catch((err) => {
+            console.error('Could not retrieve profile data for ' + userId + ':', err);
+        });
+    },
+
+    onUserPillClicked: function() {
+        dis.dispatch({
+            action: 'view_user',
+            member: this.state.member,
+        });
+    },
+    render: function() {
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const RoomAvatar = sdk.getComponent('avatars.RoomAvatar');
+
+        const resource = this.state.resourceId;
+
+        let avatar = null;
+        let linkText = resource;
+        let pillClass;
+        let userId;
+        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;
+                        linkText = member.rawDisplayName.replace(' (IRC)', ''); // FIXME when groups are done
+                        if (this.props.shouldShowPillAvatar) {
+                            avatar = <MemberAvatar member={member} width={16} height={16} />;
+                        }
+                        pillClass = 'mx_UserPill';
+                        href = null;
+                        onClick = this.onUserPillClicked;
+                    }
+            }
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const room = this.state.room;
+                if (room) {
+                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    if (this.props.shouldShowPillAvatar) {
+                        avatar = <RoomAvatar room={room} width={16} height={16} />;
+                    }
+                    pillClass = 'mx_RoomPill';
+                }
+            }
+                break;
+        }
+
+        const classes = classNames(pillClass, {
+            "mx_UserPill_me": userId === MatrixClientPeg.get().credentials.userId,
+        });
+
+        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 }
+                </a> :
+                <span className={classes} title={resource} data-offset-key={this.props.offsetKey}>
+                    { avatar }
+                    { linkText }
+                </span>;
+        } else {
+            // Deliberately render nothing if the URL isn't recognised
+            return null;
+        }
+    },
+});
+
+export default Pill;

src/components/views/elements/PowerSelector.js

@@ -16,106 +16,139 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-
-var roles = {
-    0: 'User',
-    50: 'Moderator',
-    100: 'Admin',
-};
-
-var reverseRoles = {};
-Object.keys(roles).forEach(function(key) {
-    reverseRoles[roles[key]] = key;
-});
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as Roles from '../../../Roles';
+import { _t } from '../../../languageHandler';
 
 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,
     },
 
     getInitialState: function() {
         return {
-            custom: (roles[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() {
+        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);
         }
     },
 
     onCustomBlur: function(event) {
-        this.props.onChange(this.getValue());
+        this.props.onChange(parseInt(this.refs.custom.value));
     },
 
     onCustomKeyDown: function(event) {
         if (event.key == "Enter") {
-            this.props.onChange(this.getValue());
+            this.props.onChange(parseInt(this.refs.custom.value));
         }
     },
 
-    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 = roles[this.props.value] || "Custom";
-        }
-        var select;
+        let select;
         if (this.props.disabled) {
-            select = <span>{ selectValue }</span>;
-        }
-        else {
+            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,
+                    text: Roles.textualPowerLevel(level, this.props.usersDefault),
+                };
+            });
+            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>;
+            });
+
             select =
                 <select ref="select"
-                        value={ this.props.controlled ? selectValue : undefined }
-                        defaultValue={ !this.props.controlled ? selectValue : undefined }
-                        onChange={ this.onSelectChange }>
-                    <option value="User">User (0)</option>
-                    <option value="Moderator">Moderator (50)</option>
-                    <option value="Admin">Admin (100)</option>
-                    <option value="Custom">Custom level</option>
-                </select>
+                        value={this.props.controlled ? selectValue : undefined}
+                        defaultValue={!this.props.controlled ? selectValue : undefined}
+                        onChange={this.onSelectChange}>
+                    { options }
+                </select>;
         }
 
         return (
@@ -124,5 +157,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/Quote.js

@@ -0,0 +1,188 @@
+/*
+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 MatrixClientPeg from '../../../MatrixClientPeg';
+import {wantsDateSeparator} from '../../../DateUtils';
+import {MatrixEvent} from 'matrix-js-sdk';
+import {makeUserPermalink} from "../../../matrix-to";
+
+// 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 = /^#\/room\/([\#\!][^\/]*)\/(\$[^\/]*)$/;
+
+export default class Quote extends React.Component {
+    static isMessageUrl(url) {
+        return !!REGEX_LOCAL_MATRIXTO.exec(url);
+    }
+
+    static childContextTypes = {
+        matrixClient: PropTypes.object,
+        addRichQuote: PropTypes.func,
+    };
+
+    static propTypes = {
+        // The matrix.to url of the event
+        url: PropTypes.string,
+        // The original node that was rendered
+        node: PropTypes.instanceOf(Element),
+        // The parent event
+        parentEv: PropTypes.instanceOf(MatrixEvent),
+    };
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            // The event related to this quote and their nested rich quotes
+            events: [],
+            // Whether the top (oldest) event should be shown or spoilered
+            show: true,
+            // Whether an error was encountered fetching nested older event, show node if it does
+            err: false,
+        };
+
+        this.onQuoteClick = this.onQuoteClick.bind(this);
+        this.addRichQuote = this.addRichQuote.bind(this);
+    }
+
+    getChildContext() {
+        return {
+            matrixClient: MatrixClientPeg.get(),
+            addRichQuote: this.addRichQuote,
+        };
+    }
+
+    parseUrl(url) {
+        if (!url) return;
+
+        // Default to the empty array if no match for simplicity
+        // resource and prefix will be undefined instead of throwing
+        const matrixToMatch = REGEX_LOCAL_MATRIXTO.exec(url) || [];
+
+        const [, roomIdentifier, eventId] = matrixToMatch;
+        return {roomIdentifier, eventId};
+    }
+
+    componentWillReceiveProps(nextProps) {
+        const {roomIdentifier, eventId} = this.parseUrl(nextProps.url);
+        if (!roomIdentifier || !eventId) return;
+
+        const room = this.getRoom(roomIdentifier);
+        if (!room) return;
+
+        // Only try and load the event if we know about the room
+        // otherwise we just leave a `Quote` anchor which can be used to navigate/join the room manually.
+        this.setState({ events: [] });
+        if (room) this.getEvent(room, eventId, true);
+    }
+
+    componentWillMount() {
+        this.componentWillReceiveProps(this.props);
+    }
+
+    getRoom(id) {
+        const cli = MatrixClientPeg.get();
+        if (id[0] === '!') return cli.getRoom(id);
+
+        return cli.getRooms().find((r) => {
+            return r.getAliases().includes(id);
+        });
+    }
+
+    async getEvent(room, eventId, show) {
+        const event = room.findEventById(eventId);
+        if (event) {
+            this.addEvent(event, show);
+            return;
+        }
+
+        await MatrixClientPeg.get().getEventTimeline(room.getUnfilteredTimelineSet(), eventId);
+        this.addEvent(room.findEventById(eventId), show);
+    }
+
+    addEvent(event, show) {
+        const events = [event].concat(this.state.events);
+        this.setState({events, show});
+    }
+
+    // addRichQuote(roomId, eventId) {
+    addRichQuote(href) {
+        const {roomIdentifier, eventId} = this.parseUrl(href);
+        if (!roomIdentifier || !eventId) {
+            this.setState({ err: true });
+            return;
+        }
+
+        const room = this.getRoom(roomIdentifier);
+        if (!room) {
+            this.setState({ err: true });
+            return;
+        }
+
+        this.getEvent(room, eventId, false);
+    }
+
+    onQuoteClick() {
+        this.setState({ show: true });
+    }
+
+    render() {
+        const events = this.state.events.slice();
+        if (events.length) {
+            const evTiles = [];
+
+            if (!this.state.show) {
+                const oldestEv = events.shift();
+                const Pill = sdk.getComponent('elements.Pill');
+                const room = MatrixClientPeg.get().getRoom(oldestEv.getRoomId());
+
+                evTiles.push(<blockquote className="mx_Quote" key="load">
+                    {
+                        _t('<a>In reply to</a> <pill>', {}, {
+                            'a': (sub) => <a onClick={this.onQuoteClick} className="mx_Quote_show">{ sub }</a>,
+                            'pill': <Pill type={Pill.TYPE_USER_MENTION} room={room}
+                                          url={makeUserPermalink(oldestEv.getSender())} shouldShowPillAvatar={true} />,
+                        })
+                    }
+                </blockquote>);
+            }
+
+            const EventTile = sdk.getComponent('views.rooms.EventTile');
+            const DateSeparator = sdk.getComponent('messages.DateSeparator');
+            events.forEach((ev) => {
+                let dateSep = null;
+
+                if (wantsDateSeparator(this.props.parentEv.getDate(), ev.getDate())) {
+                    dateSep = <a href={this.props.url}><DateSeparator ts={ev.getTs()} /></a>;
+                }
+
+                evTiles.push(<blockquote className="mx_Quote" key={ev.getId()}>
+                    { dateSep }
+                    <EventTile mxEvent={ev} tileShape="quote" />
+                </blockquote>);
+            });
+
+            return <div>{ evTiles }</div>;
+        }
+
+        // Deliberately render nothing if the URL isn't recognised
+        // in case we get an undefined/falsey node, replace it with null to make React happy
+        return this.props.node || null;
+    }
+}

src/components/views/elements/RoomDirectoryButton.js

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

src/components/views/elements/SettingsButton.js

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

src/components/views/elements/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/StartChatButton.js

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

src/components/views/elements/TagTile.js

@@ -0,0 +1,119 @@
+/*
+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 classNames from 'classnames';
+import { MatrixClient } from 'matrix-js-sdk';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import { isOnlyCtrlOrCmdIgnoreShiftKeyEvent } from '../../../Keyboard';
+
+import FlairStore from '../../../stores/FlairStore';
+
+// 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.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);
+            });
+        }
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        dis.dispatch({
+            action: 'select_tag',
+            tag: this.props.tag,
+            ctrlOrCmdKey: isOnlyCtrlOrCmdIgnoreShiftKeyEvent(e),
+            shiftKey: e.shiftKey,
+        });
+    },
+
+    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 />;
+        return <AccessibleButton className={className} onClick={this.onClick}>
+            <div className="mx_TagTile_avatar" onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
+                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+                { tip }
+            </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,15 +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,61 @@
+/*
+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';
+
+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>
+                <span
+                    title={this.props.title}
+                    onClick={this.props.onClick} />
+            </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,19 +14,31 @@ 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({
     displayName: 'TruncatedList',
 
     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() {
@@ -33,40 +46,56 @@ module.exports = React.createClass({
             truncateAt: 2,
             createOverflowElement: function(overflowCount, totalCount) {
                 return (
-                    <div>And {overflowCount} more...</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

@@ -16,14 +16,16 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+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() {
@@ -51,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="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">
-                    Add User
+                    { _t("Add User") }
                 </button>
             </div>
         );
-    }
+    },
 });

src/components/views/groups/GroupInviteTile.js

@@ -0,0 +1,75 @@
+/*
+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 { MatrixClient } from 'matrix-js-sdk';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
+
+export default React.createClass({
+    displayName: 'GroupInviteTile',
+
+    propTypes: {
+        group: PropTypes.object.isRequired,
+    },
+
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
+
+    onClick: function(e) {
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.group.groupId,
+        });
+    },
+
+    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 label = <EmojiText
+            element="div"
+            title={this.props.group.groupId}
+            className="mx_RoomTile_name mx_RoomTile_badgeShown"
+            dir="auto"
+        >
+            { groupName }
+        </EmojiText>;
+
+        const badge = <div className="mx_RoomSubList_badge mx_RoomSubList_badgeHighlight">!</div>;
+
+        return (
+            <AccessibleButton className="mx_RoomTile mx_RoomTile_highlight" onClick={this.onClick}>
+                <div className="mx_RoomTile_avatar">
+                    { av }
+                </div>
+                <div className="mx_RoomTile_nameContainer">
+                    { label }
+                    { badge }
+                </div>
+            </AccessibleButton>
+        );
+    },
+});

src/components/views/groups/GroupMemberInfo.js

@@ -0,0 +1,204 @@
+/*
+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 GroupStoreCache from '../../../stores/GroupStoreCache';
+import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+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._initGroupStore(this.props.groupId);
+    },
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.groupId !== this.props.groupId) {
+            this._unregisterGroupStore();
+            this._initGroupStore(newProps.groupId);
+        }
+    },
+
+    _initGroupStore(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(this.props.groupId);
+        this._groupStore.registerListener(this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        if (this._groupStore) {
+            this._groupStore.unregisterListener(this.onGroupStoreUpdated);
+        }
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserInvited: this._groupStore.getGroupInvitedMembers().some(
+                (m) => m.userId === this.props.groupMember.userId,
+            ),
+            isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
+        });
+    },
+
+    _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 <Spinner />;
+        }
+
+        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');
+        return (
+            <div className="mx_MemberInfo">
+                <GeminiScrollbar 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 }
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupMemberList.js

@@ -0,0 +1,172 @@
+/*
+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 GroupStoreCache from '../../../stores/GroupStoreCache';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+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);
+    },
+
+    _initGroupStore: function(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(groupId);
+        this._groupStore.registerListener(() => {
+            this._fetchMembers();
+        });
+    },
+
+    _fetchMembers: function() {
+        if (this._unmounted) return;
+        this.setState({
+            members: this._groupStore.getGroupMembers(),
+            invitedMembers: this._groupStore.getGroupInvitedMembers(),
+        });
+    },
+
+    _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() {
+        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 }
+                <GeminiScrollbar autoshow={true} className="mx_MemberList_outerWrapper">
+                    { joined }
+                    { invited }
+                </GeminiScrollbar>
+            </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,86 @@
+/*
+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 GroupStoreCache from '../../../stores/GroupStoreCache';
+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._groupStore = GroupStoreCache.getGroupStore(groupId);
+        this._groupStore.registerListener(() => {
+            this.setState({
+                isGroupPublicised: this._groupStore.getGroupPublicity(),
+                ready: this._groupStore.isStateReady(GroupStore.STATE_KEY.Summary),
+            });
+        });
+    },
+
+    _onPublicityToggle: function(e) {
+        e.stopPropagation();
+        this.setState({
+            busy: true,
+            // Optimistic early update
+            isGroupPublicised: !this.state.isGroupPublicised,
+        });
+        this._groupStore.setGroupPublicity(!this.state.isGroupPublicised).then(() => {
+            this.setState({
+                busy: false,
+            });
+        });
+    },
+
+    render() {
+        const GroupTile = sdk.getComponent('groups.GroupTile');
+        const input = <input type="checkbox"
+            onClick={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,240 @@
+/*
+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 GroupStoreCache from '../../../stores/GroupStoreCache';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+
+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._initGroupStore(newProps.groupId);
+        }
+    },
+
+    componentWillUnmount() {
+        this._unregisterGroupStore();
+    },
+
+    _initGroupStore(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(this.props.groupId);
+        this._groupStore.registerListener(this.onGroupStoreUpdated);
+    },
+
+    _unregisterGroupStore() {
+        if (this._groupStore) {
+            this._groupStore.unregisterListener(this.onGroupStoreUpdated);
+        }
+    },
+
+    _updateGroupRoom() {
+        this.setState({
+            groupRoom: this._groupStore.getGroupRooms().find(
+                (r) => r.roomId === this.props.groupRoomId,
+            ),
+        });
+    },
+
+    onGroupStoreUpdated: function() {
+        this.setState({
+            isUserPrivilegedInGroup: this._groupStore.isUserPrivileged(),
+        });
+        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;
+                this._groupStore.removeRoomFromGroup(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;
+        this._groupStore.updateGroupRoomVisibility(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');
+        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">
+                <GeminiScrollbar 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 }
+                </GeminiScrollbar>
+            </div>
+        );
+    },
+});

src/components/views/groups/GroupRoomList.js

@@ -0,0 +1,136 @@
+/*
+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 GroupStoreCache from '../../../stores/GroupStoreCache';
+import GeminiScrollbar from 'react-gemini-scrollbar';
+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);
+    },
+
+    _initGroupStore: function(groupId) {
+        this._groupStore = GroupStoreCache.getGroupStore(groupId);
+        this._groupStore.registerListener(() => {
+            this._fetchRooms();
+        });
+        this._groupStore.on('error', (err) => {
+            this.setState({
+                rooms: null,
+            });
+        });
+    },
+
+    _fetchRooms: function() {
+        if (this._unmounted) return;
+        this.setState({
+            rooms: this._groupStore.getGroupRooms(),
+        });
+    },
+
+    _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 TruncatedList = sdk.getComponent("elements.TruncatedList");
+        return (
+            <div className="mx_GroupRoomList">
+                { inputBox }
+                <GeminiScrollbar 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>
+                </GeminiScrollbar>
+            </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,93 @@
+/*
+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 sdk from '../../../index';
+import dis from '../../../dispatcher';
+import FlairStore from '../../../stores/FlairStore';
+
+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);
+        });
+    },
+
+    onClick: 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;
+        return <AccessibleButton className="mx_GroupTile" onClick={this.onClick}>
+            <div className="mx_GroupTile_avatar">
+                <BaseAvatar name={name} url={httpUrl} width={avatarHeight} height={avatarHeight} />
+            </div>
+            <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 GeminiScrollbar from 'react-gemini-scrollbar';
+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 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">
+                <GeminiScrollbar>
+                    { groupPublicityToggles }
+                </GeminiScrollbar>
+            </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

@@ -16,8 +16,12 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var DIV_ID = 'mx_recaptcha';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+
+const DIV_ID = 'mx_recaptcha';
 
 /**
  * A pure UI component which displays a captcha form.
@@ -26,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() {
@@ -44,6 +48,10 @@ module.exports = React.createClass({
         };
     },
 
+    componentWillMount: function() {
+        this._captchaWidgetId = null;
+    },
+
     componentDidMount: function() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
@@ -52,22 +60,40 @@ module.exports = React.createClass({
             this._onCaptchaLoaded();
         } else {
             console.log("Loading recaptcha script...");
-            var scriptTag = document.createElement('script');
-            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
-            scriptTag.setAttribute(
-                'src', global.location.protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
-            );
-            this.refs.recaptchaContainer.appendChild(scriptTag);
+            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded();};
+            const protocol = global.location.protocol;
+            if (protocol === "file:") {
+                const warning = document.createElement('div');
+                // XXX: fix hardcoded app URL.  Better solutions include:
+                // * jumping straight to a hosted captcha page (but we don't support that yet)
+                // * embedding the captcha in an iframe (if that works)
+                // * using a better captcha lib
+                ReactDOM.render(_t(
+                    "Robot check is currently unavailable on desktop - please use a <a>web browser</a>",
+                    {},
+                    { 'a': (sub) => { return <a href='https://riot.im/app'>{ sub }</a>; }}), warning);
+                this.refs.recaptchaContainer.appendChild(warning);
+            } else {
+                const scriptTag = document.createElement('script');
+                scriptTag.setAttribute(
+                    'src', protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit",
+                );
+                this.refs.recaptchaContainer.appendChild(scriptTag);
+            }
         }
     },
 
+    componentWillUnmount: function() {
+        this._resetRecaptcha();
+    },
+
     _renderRecaptcha: function(divId) {
         if (!global.grecaptcha) {
             console.error("grecaptcha not loaded!");
             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(
@@ -76,12 +102,18 @@ module.exports = React.createClass({
         }
 
         console.log("Rendering to %s", divId);
-        global.grecaptcha.render(divId, {
+        this._captchaWidgetId = global.grecaptcha.render(divId, {
             sitekey: publicKey,
             callback: this.props.onCaptchaResponse,
         });
     },
 
+    _resetRecaptcha: function() {
+        if (this._captchaWidgetId !== null) {
+            global.grecaptcha.reset(this._captchaWidgetId);
+        }
+    },
+
     _onCaptchaLoaded: function() {
         console.log("Loaded recaptcha script.");
         try {
@@ -89,7 +121,7 @@ module.exports = React.createClass({
         } catch (e) {
             this.setState({
                 errorText: e.toString(),
-            })
+            });
         }
     },
 
@@ -98,17 +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">
-                This Home Server would like to make sure you are not a robot
+                { _t("This Home Server would like to make sure you are not a robot") }
+                <br />
                 <div id={DIV_ID}></div>
-                {error}
+                { error }
             </div>
         );
-    }
+    },
 });

src/components/views/login/CasLogin.js

@@ -16,21 +16,23 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CasLogin',
 
     propTypes: {
-      onSubmit: React.PropTypes.func, // fn()
+      onSubmit: PropTypes.func, // fn()
     },
 
     render: function() {
         return (
             <div>
-                <button onClick={this.props.onSubmit}>Sign in with CAS</button>
+                <button onClick={this.props.onSubmit}>{ _t("Sign in with CAS") }</button>
             </div>
         );
-    }
+    },
 
 });

src/components/views/login/CountryDropdown.js

@@ -0,0 +1,142 @@
+/*
+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 sdk from '../../../index';
+
+import { COUNTRIES } from '../../../phonenumber';
+
+const COUNTRIES_BY_ISO2 = new Object(null);
+for (const c of COUNTRIES) {
+    COUNTRIES_BY_ISO2[c.iso2] = c;
+}
+
+function countryMatchesSearchQuery(query, country) {
+    // Remove '+' if present (when searching for a prefix)
+    if (query[0] === '+') {
+        query = query.slice(1);
+    }
+
+    if (country.name.toUpperCase().indexOf(query.toUpperCase()) == 0) return true;
+    if (country.iso2 == query.toUpperCase()) return true;
+    if (country.prefix.indexOf(query) !== -1) return true;
+    return false;
+}
+
+export default class CountryDropdown extends React.Component {
+    constructor(props) {
+        super(props);
+        this._onSearchChange = this._onSearchChange.bind(this);
+        this._onOptionChange = this._onOptionChange.bind(this);
+        this._getShortOption = this._getShortOption.bind(this);
+
+        this.state = {
+            searchQuery: '',
+        };
+    }
+
+    componentWillMount() {
+        if (!this.props.value) {
+            // If no value is given, we start with the first
+            // country selected, but our parent component
+            // doesn't know this, therefore we do this.
+            this.props.onOptionChange(COUNTRIES[0]);
+        }
+    }
+
+    _onSearchChange(search) {
+        this.setState({
+            searchQuery: search,
+        });
+    }
+
+    _onOptionChange(iso2) {
+        this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
+    }
+
+    _flagImgForIso2(iso2) {
+        return <img src={`flags/${iso2}.png`} />;
+    }
+
+    _getShortOption(iso2) {
+        if (!this.props.isSmall) {
+            return undefined;
+        }
+        let countryPrefix;
+        if (this.props.showPrefix) {
+            countryPrefix = '+' + COUNTRIES_BY_ISO2[iso2].prefix;
+        }
+        return <span>
+            { this._flagImgForIso2(iso2) }
+            { countryPrefix }
+        </span>;
+    }
+
+    render() {
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        let displayedCountries;
+        if (this.state.searchQuery) {
+            displayedCountries = COUNTRIES.filter(
+                countryMatchesSearchQuery.bind(this, this.state.searchQuery),
+            );
+            if (
+                this.state.searchQuery.length == 2 &&
+                COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()]
+            ) {
+                // exact ISO2 country name match: make the first result the matches ISO2
+                const matched = COUNTRIES_BY_ISO2[this.state.searchQuery.toUpperCase()];
+                displayedCountries = displayedCountries.filter((c) => {
+                    return c.iso2 != matched.iso2;
+                });
+                displayedCountries.unshift(matched);
+            }
+        } else {
+            displayedCountries = COUNTRIES;
+        }
+
+        const options = displayedCountries.map((country) => {
+            return <div key={country.iso2}>
+                { this._flagImgForIso2(country.iso2) }
+                { country.name } <span>(+{ country.prefix })</span>
+            </div>;
+        });
+
+        // default value here too, otherwise we need to handle null / undefined
+        // values between mounting and the initial value propgating
+        const value = this.props.value || COUNTRIES[0].iso2;
+
+        return <Dropdown className={this.props.className + " left_aligned"}
+            onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
+            menuWidth={298} getShortOption={this._getShortOption}
+            value={value} searchEnabled={true} disabled={this.props.disabled}
+        >
+            { options }
+        </Dropdown>;
+    }
+}
+
+CountryDropdown.propTypes = {
+    className: PropTypes.string,
+    isSmall: PropTypes.bool,
+    // if isSmall, show +44 in the selected value
+    showPrefix: PropTypes.bool,
+    onOptionChange: PropTypes.func.isRequired,
+    value: PropTypes.string,
+    disabled: PropTypes.bool,
+};

src/components/views/login/CustomServerDialog.js

@@ -14,7 +14,8 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require("react");
+import React from 'react';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CustomServerDialog',
@@ -23,27 +24,27 @@ module.exports = React.createClass({
         return (
             <div className="mx_ErrorDialog">
                 <div className="mx_Dialog_title">
-                    Custom Server Options
+                    { _t("Custom Server Options") }
                 </div>
                 <div className="mx_Dialog_content">
                     <span>
-                        You can use the custom server options to sign into other Matrix
-                        servers by specifying a different Home server URL.
-                        <br/>
-                        This allows you to use this app with an existing Matrix account on
-                        a different home server.
-                        <br/>
-                        <br/>
-                        You can also set a custom identity server but this will typically prevent
-                        interaction with users based on email address.
+                        { _t("You can use the custom server options to sign into other Matrix " +
+                        "servers by specifying a different Home server URL.") }
+                        <br />
+                        { _t("This allows you to use this app with an existing Matrix account on " +
+                            "a different home server.") }
+                        <br />
+                        <br />
+                        { _t("You can also set a custom identity server but this will typically prevent " +
+                            "interaction with users based on email address.") }
                     </span>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.props.onFinished} autoFocus={true}>
-                        Dismiss
+                        { _t("Dismiss") }
                     </button>
                 </div>
             </div>
         );
-    }
+    },
 });

src/components/views/login/InteractiveAuthEntryComponents.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,27 +16,49 @@ limitations under the License.
 */
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import url from 'url';
+import classnames from 'classnames';
 
 import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
+import { _t } from '../../../languageHandler';
 
 /* This file contains a collection of components which are used by the
- * InteractiveAuthDialog to prompt the user to enter the information needed
+ * InteractiveAuth to prompt the user to enter the information needed
  * for an auth stage. (The intention is that they could also be used for other
  * components, such as the registration flow).
  *
  * Call getEntryComponentForLoginType() to get a component suitable for a
  * particular login type. Each component requires the same properties:
  *
+ * matrixClient:           A matrix client. May be a different one to the one
+ *                         currently being used generally (eg. to register with
+ *                         one HS whilst beign a guest on another).
  * loginType:              the login type of the auth stage being attempted
  * authSessionId:          session id from the server
+ * clientSecret:           The client secret in use for ID server auth sessions
  * stageParams:            params from the server for the stage being attempted
  * errorText:              error message from a previous attempt to authenticate
  * submitAuthDict:         a function which will be called with the new auth dict
- * setSubmitButtonEnabled: a function which will enable/disable the 'submit' button
+ * busy:                   a boolean indicating whether the auth logic is doing something
+ *                         the user needs to wait for.
+ * inputs:                 Object of inputs provided by the user, as in js-sdk
+ *                         interactive-auth
+ * stageState:             Stage-specific object used for communicating state information
+ *                         to the UI from the state-specific auth logic.
+ *                         Defined keys for stages are:
+ *                             m.login.email.identity:
+ *                              * emailSid: string representing the sid of the active
+ *                                          verification session from the ID server, or
+ *                                          null if no session is active.
+ * fail:                   a function which should be called with an error object if an
+ *                         error occurred during the auth stage. This will cause the auth
+ *                         session to be failed and the process to go back to the start.
+ * setEmailSid:            m.login.email.identity only: a function to be called with the
+ *                         email sid after a token is requested.
+ * makeRegistrationUrl     A function that makes a registration URL
  *
  * Each component may also provide the following functions (beyond the standard React ones):
- *    onSubmitClick: handle a 'submit' button click
  *    focus: set the input focus appropriately in the form.
  */
 
@@ -47,13 +70,18 @@ export const PasswordAuthEntry = React.createClass({
     },
 
     propTypes: {
-        submitAuthDict: React.PropTypes.func.isRequired,
-        setSubmitButtonEnabled: React.PropTypes.func.isRequired,
-        errorText: React.PropTypes.string,
+        matrixClient: PropTypes.object.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        errorText: PropTypes.string,
+        // is the auth logic currently waiting for something to
+        // happen?
+        busy: PropTypes.bool,
     },
 
-    componentWillMount: function() {
-        this.props.setSubmitButtonEnabled(false);
+    getInitialState: function() {
+        return {
+            passwordValid: false,
+        };
     },
 
     focus: function() {
@@ -62,17 +90,22 @@ export const PasswordAuthEntry = React.createClass({
         }
     },
 
-    onSubmitClick: function() {
+    _onSubmit: function(e) {
+        e.preventDefault();
+        if (this.props.busy) return;
+
         this.props.submitAuthDict({
             type: PasswordAuthEntry.LOGIN_TYPE,
-            user: MatrixClientPeg.get().credentials.userId,
+            user: this.props.matrixClient.credentials.userId,
             password: this.refs.passwordField.value,
         });
     },
 
-    _onPasswordFieldChange: function (ev) {
+    _onPasswordFieldChange: function(ev) {
         // enable the submit button iff the password is non-empty
-        this.props.setSubmitButtonEnabled(Boolean(ev.target.value));
+        this.setState({
+            passwordValid: Boolean(this.refs.passwordField.value),
+        });
     },
 
     render: function() {
@@ -82,18 +115,36 @@ export const PasswordAuthEntry = React.createClass({
             passwordBoxClass = 'error';
         }
 
+        let submitButtonOrSpinner;
+        if (this.props.busy) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            submitButtonOrSpinner = <Loader />;
+        } else {
+            submitButtonOrSpinner = (
+                <input type="submit"
+                    className="mx_Dialog_primary"
+                    disabled={!this.state.passwordValid}
+                />
+            );
+        }
+
         return (
             <div>
-                <p>To continue, please enter your password.</p>
-                <p>Password:</p>
-                <input
-                    ref="passwordField"
-                    className={passwordBoxClass}
-                    onChange={this._onPasswordFieldChange}
-                    type="password"
-                />
+                <p>{ _t("To continue, please enter your password.") }</p>
+                <p>{ _t("Password:") }</p>
+                <form onSubmit={this._onSubmit}>
+                    <input
+                        ref="passwordField"
+                        className={passwordBoxClass}
+                        onChange={this._onPasswordFieldChange}
+                        type="password"
+                    />
+                    <div className="mx_button_row">
+                        { submitButtonOrSpinner }
+                    </div>
+                </form>
                 <div className="error">
-                    {this.props.errorText}
+                    { this.props.errorText }
                 </div>
             </div>
         );
@@ -108,14 +159,10 @@ export const RecaptchaAuthEntry = React.createClass({
     },
 
     propTypes: {
-        submitAuthDict: React.PropTypes.func.isRequired,
-        stageParams: React.PropTypes.object.isRequired,
-        setSubmitButtonEnabled: React.PropTypes.func.isRequired,
-        errorText: React.PropTypes.string,
-    },
-
-    componentWillMount: function() {
-        this.props.setSubmitButtonEnabled(false);
+        submitAuthDict: PropTypes.func.isRequired,
+        stageParams: PropTypes.object.isRequired,
+        errorText: PropTypes.string,
+        busy: PropTypes.bool,
     },
 
     _onCaptchaResponse: function(response) {
@@ -126,37 +173,250 @@ export const RecaptchaAuthEntry = React.createClass({
     },
 
     render: function() {
+        if (this.props.busy) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            return <Loader />;
+        }
+
         const CaptchaForm = sdk.getComponent("views.login.CaptchaForm");
-        var sitePublicKey = this.props.stageParams.public_key;
+        const sitePublicKey = this.props.stageParams.public_key;
         return (
             <div>
                 <CaptchaForm sitePublicKey={sitePublicKey}
                     onCaptchaResponse={this._onCaptchaResponse}
                 />
                 <div className="error">
-                    {this.props.errorText}
+                    { this.props.errorText }
                 </div>
             </div>
         );
     },
 });
 
+export const EmailIdentityAuthEntry = React.createClass({
+    displayName: 'EmailIdentityAuthEntry',
+
+    statics: {
+        LOGIN_TYPE: "m.login.email.identity",
+    },
+
+    propTypes: {
+        matrixClient: PropTypes.object.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        authSessionId: PropTypes.string.isRequired,
+        clientSecret: PropTypes.string.isRequired,
+        inputs: PropTypes.object.isRequired,
+        stageState: PropTypes.object.isRequired,
+        fail: PropTypes.func.isRequired,
+        setEmailSid: PropTypes.func.isRequired,
+        makeRegistrationUrl: PropTypes.func.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            requestingToken: false,
+        };
+    },
+
+    componentWillMount: function() {
+        if (this.props.stageState.emailSid === null) {
+            this.setState({requestingToken: true});
+            this._requestEmailToken().catch((e) => {
+                this.props.fail(e);
+            }).finally(() => {
+                this.setState({requestingToken: false});
+            }).done();
+        }
+    },
+
+    /*
+     * Requests a verification token by email.
+     */
+    _requestEmailToken: function() {
+        const nextLink = this.props.makeRegistrationUrl({
+            client_secret: this.props.clientSecret,
+            hs_url: this.props.matrixClient.getHomeserverUrl(),
+            is_url: this.props.matrixClient.getIdentityServerUrl(),
+            session_id: this.props.authSessionId,
+        });
+
+        return this.props.matrixClient.requestRegisterEmailToken(
+            this.props.inputs.emailAddress,
+            this.props.clientSecret,
+            1, // TODO: Multiple send attempts?
+            nextLink,
+        ).then((result) => {
+            this.props.setEmailSid(result.sid);
+        });
+    },
+
+    render: function() {
+        if (this.state.requestingToken) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            return <Loader />;
+        } else {
+            return (
+                <div>
+                    <p>{ _t("An email has been sent to %(emailAddress)s",
+                        { emailAddress: (sub) => <i>{ this.props.inputs.emailAddress }</i> },
+                    ) }
+                    </p>
+                    <p>{ _t("Please check your email to continue registration.") }</p>
+                </div>
+            );
+        }
+    },
+});
+
+export const MsisdnAuthEntry = React.createClass({
+    displayName: 'MsisdnAuthEntry',
+
+    statics: {
+        LOGIN_TYPE: "m.login.msisdn",
+    },
+
+    propTypes: {
+        inputs: PropTypes.shape({
+            phoneCountry: PropTypes.string,
+            phoneNumber: PropTypes.string,
+        }),
+        fail: PropTypes.func,
+        clientSecret: PropTypes.func,
+        submitAuthDict: PropTypes.func.isRequired,
+        matrixClient: PropTypes.object,
+        submitAuthDict: PropTypes.func,
+    },
+
+    getInitialState: function() {
+        return {
+            token: '',
+            requestingToken: false,
+        };
+    },
+
+    componentWillMount: function() {
+        this._sid = null;
+        this._msisdn = null;
+        this._tokenBox = null;
+
+        this.setState({requestingToken: true});
+        this._requestMsisdnToken().catch((e) => {
+            this.props.fail(e);
+        }).finally(() => {
+            this.setState({requestingToken: false});
+        }).done();
+    },
+
+    /*
+     * Requests a verification token by SMS.
+     */
+    _requestMsisdnToken: function() {
+        return this.props.matrixClient.requestRegisterMsisdnToken(
+            this.props.inputs.phoneCountry,
+            this.props.inputs.phoneNumber,
+            this.props.clientSecret,
+            1, // TODO: Multiple send attempts?
+        ).then((result) => {
+            this._sid = result.sid;
+            this._msisdn = result.msisdn;
+        });
+    },
+
+    _onTokenChange: function(e) {
+        this.setState({
+            token: e.target.value,
+        });
+    },
+
+    _onFormSubmit: function(e) {
+        e.preventDefault();
+        if (this.state.token == '') return;
+
+            this.setState({
+                errorText: null,
+            });
+
+        this.props.matrixClient.submitMsisdnToken(
+            this._sid, this.props.clientSecret, this.state.token,
+        ).then((result) => {
+            if (result.success) {
+                const idServerParsedUrl = url.parse(
+                    this.props.matrixClient.getIdentityServerUrl(),
+                );
+                this.props.submitAuthDict({
+                    type: MsisdnAuthEntry.LOGIN_TYPE,
+                    threepid_creds: {
+                        sid: this._sid,
+                        client_secret: this.props.clientSecret,
+                        id_server: idServerParsedUrl.host,
+                    },
+                });
+            } else {
+                this.setState({
+                    errorText: _t("Token incorrect"),
+                });
+            }
+        }).catch((e) => {
+            this.props.fail(e);
+            console.log("Failed to submit msisdn token");
+        }).done();
+    },
+
+    render: function() {
+        if (this.state.requestingToken) {
+            const Loader = sdk.getComponent("elements.Spinner");
+            return <Loader />;
+        } else {
+            const enableSubmit = Boolean(this.state.token);
+            const submitClasses = classnames({
+                mx_InteractiveAuthEntryComponents_msisdnSubmit: true,
+                mx_UserSettings_button: true, // XXX button classes
+            });
+            return (
+                <div>
+                    <p>{ _t("A text message has been sent to %(msisdn)s",
+                        { msisdn: <i>{ this._msisdn }</i> },
+                    ) }
+                    </p>
+                    <p>{ _t("Please enter the code it contains:") }</p>
+                    <div className="mx_InteractiveAuthEntryComponents_msisdnWrapper">
+                        <form onSubmit={this._onFormSubmit}>
+                            <input type="text"
+                                className="mx_InteractiveAuthEntryComponents_msisdnEntry"
+                                value={this.state.token}
+                                onChange={this._onTokenChange}
+                            />
+                            <br />
+                            <input type="submit" value={_t("Submit")}
+                                className={submitClasses}
+                                disabled={!enableSubmit}
+                            />
+                        </form>
+                        <div className="error">
+                            { this.state.errorText }
+                        </div>
+                    </div>
+                </div>
+            );
+        }
+    },
+});
+
 export const FallbackAuthEntry = React.createClass({
     displayName: 'FallbackAuthEntry',
 
     propTypes: {
-        authSessionId: React.PropTypes.string.isRequired,
-        loginType: React.PropTypes.string.isRequired,
-        submitAuthDict: React.PropTypes.func.isRequired,
-        setSubmitButtonEnabled: React.PropTypes.func.isRequired,
-        errorText: React.PropTypes.string,
+        matrixClient: PropTypes.object.isRequired,
+        authSessionId: PropTypes.string.isRequired,
+        loginType: PropTypes.string.isRequired,
+        submitAuthDict: PropTypes.func.isRequired,
+        errorText: PropTypes.string,
     },
 
     componentWillMount: function() {
         // we have to make the user click a button, as browsers will block
         // the popup if we open it immediately.
         this._popupWindow = null;
-        this.props.setSubmitButtonEnabled(true);
         window.addEventListener("message", this._onReceiveMessage);
     },
 
@@ -167,19 +427,18 @@ export const FallbackAuthEntry = React.createClass({
         }
     },
 
-    onSubmitClick: function() {
-        var url = MatrixClientPeg.get().getFallbackAuthUrl(
+    _onShowFallbackClick: function() {
+        const url = this.props.matrixClient.getFallbackAuthUrl(
             this.props.loginType,
-            this.props.authSessionId
+            this.props.authSessionId,
         );
         this._popupWindow = window.open(url);
-        this.props.setSubmitButtonEnabled(false);
     },
 
     _onReceiveMessage: function(event) {
         if (
             event.data === "authDone" &&
-            event.origin === MatrixClientPeg.get().getHomeserverUrl()
+            event.origin === this.props.matrixClient.getHomeserverUrl()
         ) {
             this.props.submitAuthDict({});
         }
@@ -188,9 +447,9 @@ export const FallbackAuthEntry = React.createClass({
     render: function() {
         return (
             <div>
-                Click "Submit" to authenticate
+                <a onClick={this._onShowFallbackClick}>{ _t("Start authentication") }</a>
                 <div className="error">
-                    {this.props.errorText}
+                    { this.props.errorText }
                 </div>
             </div>
         );
@@ -200,13 +459,15 @@ export const FallbackAuthEntry = React.createClass({
 const AuthEntryComponents = [
     PasswordAuthEntry,
     RecaptchaAuthEntry,
+    EmailIdentityAuthEntry,
+    MsisdnAuthEntry,
 ];
 
 export function getEntryComponentForLoginType(loginType) {
-    for (var c of AuthEntryComponents) {
+    for (const c of AuthEntryComponents) {
         if (c.LOGIN_TYPE == loginType) {
             return c;
         }
     }
     return FallbackAuthEntry;
-};
+}

src/components/views/login/LoginFooter.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import { _t } from '../../../languageHandler';
+import React from 'react';
 
 module.exports = React.createClass({
     displayName: 'LoginFooter',
@@ -24,8 +25,8 @@ module.exports = React.createClass({
     render: function() {
         return (
             <div className="mx_Login_links">
-                <a href="https://matrix.org">powered by Matrix</a>
+                <a href="https://matrix.org">{ _t("powered by Matrix") }</a>
             </div>
         );
-    }
+    },
 });

src/components/views/login/LoginHeader.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
 
 module.exports = React.createClass({
     displayName: 'LoginHeader',
@@ -27,5 +27,5 @@ module.exports = React.createClass({
                 Matrix
             </div>
         );
-    }
+    },
 });

src/components/views/login/LoginPage.js

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

src/components/views/login/PasswordLogin.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -15,100 +16,258 @@ limitations under the License.
 */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import {field_input_incorrect} from '../../../UiEffects';
-
+import SdkConfig from '../../../SdkConfig';
 
 /**
  * A pure UI component which displays a username/password form.
  */
-module.exports = React.createClass({displayName: 'PasswordLogin',
-    propTypes: {
-        onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
-        onForgotPasswordClick: React.PropTypes.func, // fn()
-        initialUsername: React.PropTypes.string,
-        initialPassword: React.PropTypes.string,
-        onUsernameChanged: React.PropTypes.func,
-        onPasswordChanged: React.PropTypes.func,
-        loginIncorrect: React.PropTypes.bool,
-    },
+class PasswordLogin extends React.Component {
+    static defaultProps = {
+        onUsernameChanged: function() {},
+        onPasswordChanged: function() {},
+        onPhoneCountryChanged: function() {},
+        onPhoneNumberChanged: function() {},
+        initialUsername: "",
+        initialPhoneCountry: "",
+        initialPhoneNumber: "",
+        initialPassword: "",
+        loginIncorrect: false,
+        hsDomain: "",
+    }
 
-    getDefaultProps: function() {
-        return {
-            onUsernameChanged: function() {},
-            onPasswordChanged: function() {},
-            initialUsername: "",
-            initialPassword: "",
-            loginIncorrect: false,
-        };
-    },
-
-    getInitialState: function() {
-        return {
+    constructor(props) {
+        super(props);
+        this.state = {
             username: this.props.initialUsername,
             password: this.props.initialPassword,
+            phoneCountry: this.props.initialPhoneCountry,
+            phoneNumber: this.props.initialPhoneNumber,
+            loginType: PasswordLogin.LOGIN_FIELD_MXID,
         };
-    },
 
-    componentWillMount: function() {
+        this.onSubmitForm = this.onSubmitForm.bind(this);
+        this.onUsernameChanged = this.onUsernameChanged.bind(this);
+        this.onLoginTypeChange = this.onLoginTypeChange.bind(this);
+        this.onPhoneCountryChanged = this.onPhoneCountryChanged.bind(this);
+        this.onPhoneNumberChanged = this.onPhoneNumberChanged.bind(this);
+        this.onPasswordChanged = this.onPasswordChanged.bind(this);
+    }
+
+    componentWillMount() {
         this._passwordField = null;
-    },
+    }
 
-    componentWillReceiveProps: function(nextProps) {
+    componentWillReceiveProps(nextProps) {
         if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
             field_input_incorrect(this._passwordField);
         }
-    },
+    }
 
-    onSubmitForm: function(ev) {
+    onSubmitForm(ev) {
         ev.preventDefault();
-        this.props.onSubmit(this.state.username, this.state.password);
-    },
+        if (this.state.loginType === PasswordLogin.LOGIN_FIELD_PHONE) {
+            this.props.onSubmit(
+                '', // XXX: Synapse breaks if you send null here:
+                this.state.phoneCountry,
+                this.state.phoneNumber,
+                this.state.password,
+            );
+            return;
+        }
+        this.props.onSubmit(
+            this.state.username,
+            null,
+            null,
+            this.state.password,
+        );
+    }
 
-    onUsernameChanged: function(ev) {
+    onUsernameChanged(ev) {
         this.setState({username: ev.target.value});
         this.props.onUsernameChanged(ev.target.value);
-    },
+    }
 
-    onPasswordChanged: function(ev) {
+    onLoginTypeChange(loginType) {
+        this.setState({
+            loginType: loginType,
+            username: "", // Reset because email and username use the same state
+        });
+    }
+
+    onPhoneCountryChanged(country) {
+        this.setState({
+            phoneCountry: country.iso2,
+            phonePrefix: country.prefix,
+        });
+        this.props.onPhoneCountryChanged(country.iso2);
+    }
+
+    onPhoneNumberChanged(ev) {
+        this.setState({phoneNumber: ev.target.value});
+        this.props.onPhoneNumberChanged(ev.target.value);
+    }
+
+    onPasswordChanged(ev) {
         this.setState({password: ev.target.value});
         this.props.onPasswordChanged(ev.target.value);
-    },
+    }
 
-    render: function() {
-        var forgotPasswordJsx;
+    renderLoginField(loginType, disabled) {
+        const classes = {
+            mx_Login_field: true,
+            mx_Login_field_disabled: disabled,
+        };
+
+        switch (loginType) {
+            case PasswordLogin.LOGIN_FIELD_EMAIL:
+                classes.mx_Login_email = true;
+                return <input
+                    className={classNames(classes)}
+                    key="email_input"
+                    type="text"
+                    name="username" // make it a little easier for browser's remember-password
+                    onChange={this.onUsernameChanged}
+                    placeholder="joe@example.com"
+                    value={this.state.username}
+                    autoFocus
+                    disabled={disabled}
+                />;
+            case PasswordLogin.LOGIN_FIELD_MXID:
+                classes.mx_Login_username = true;
+                return <input
+                    className={classNames(classes)}
+                    key="username_input"
+                    type="text"
+                    name="username" // make it a little easier for browser's remember-password
+                    onChange={this.onUsernameChanged}
+                    placeholder={SdkConfig.get().disable_custom_urls ?
+                                      _t("Username on %(hs)s", {
+                                        hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
+                                      }) : _t("User name")}
+                    value={this.state.username}
+                    autoFocus
+                    disabled={disabled}
+                />;
+            case PasswordLogin.LOGIN_FIELD_PHONE:
+                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+                classes.mx_Login_phoneNumberField = true;
+                classes.mx_Login_field_has_prefix = true;
+                return <div className="mx_Login_phoneSection">
+                    <CountryDropdown
+                        className="mx_Login_phoneCountry mx_Login_field_prefix"
+                        ref="phone_country"
+                        onOptionChange={this.onPhoneCountryChanged}
+                        value={this.state.phoneCountry}
+                        isSmall={true}
+                        showPrefix={true}
+                        disabled={disabled}
+                    />
+                    <input
+                        className={classNames(classes)}
+                        ref="phoneNumber"
+                        key="phone_input"
+                        type="text"
+                        name="phoneNumber"
+                        onChange={this.onPhoneNumberChanged}
+                        placeholder={_t("Mobile phone number")}
+                        value={this.state.phoneNumber}
+                        autoFocus
+                        disabled={disabled}
+                    />
+                </div>;
+        }
+    }
+
+    render() {
+        let forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = (
                 <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    Forgot your password?
+                    { _t('Forgot your password?') }
                 </a>
             );
         }
 
+        let matrixIdText = '';
+        if (this.props.hsUrl) {
+            try {
+                const parsedHsUrl = new URL(this.props.hsUrl);
+                matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
+            } catch (e) {
+                // pass
+            }
+        }
+
         const pwFieldClass = classNames({
             mx_Login_field: true,
+            mx_Login_field_disabled: matrixIdText === '',
             error: this.props.loginIncorrect,
         });
 
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        const loginField = this.renderLoginField(this.state.loginType, matrixIdText === '');
+
+        let loginType;
+        if (!SdkConfig.get().disable_3pid_login) {
+            loginType = (
+                <div className="mx_Login_type_container">
+                    <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
+                    <Dropdown
+                        className="mx_Login_type_dropdown"
+                        value={this.state.loginType}
+                        disabled={matrixIdText === ''}
+                        onOptionChange={this.onLoginTypeChange}>
+                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ matrixIdText }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
+                    </Dropdown>
+                </div>
+            );
+        }
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                <input className="mx_Login_field" type="text"
-                    name="username" // make it a little easier for browser's remember-password
-                    value={this.state.username} onChange={this.onUsernameChanged}
-                    placeholder="Email or user name" autoFocus />
-                <br />
+                { loginType }
+                { loginField }
                 <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     name="password"
                     value={this.state.password} onChange={this.onPasswordChanged}
-                    placeholder="Password" />
+                    placeholder={_t('Password')}
+                    disabled={matrixIdText === ''}
+                />
                 <br />
-                {forgotPasswordJsx}
-                <input className="mx_Login_submit" type="submit" value="Sign in" />
+                { forgotPasswordJsx }
+                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={matrixIdText === ''} />
                 </form>
             </div>
         );
     }
-});
+}
+
+PasswordLogin.LOGIN_FIELD_EMAIL = "login_field_email";
+PasswordLogin.LOGIN_FIELD_MXID = "login_field_mxid";
+PasswordLogin.LOGIN_FIELD_PHONE = "login_field_phone";
+
+PasswordLogin.propTypes = {
+    onSubmit: PropTypes.func.isRequired, // fn(username, password)
+    onForgotPasswordClick: PropTypes.func, // fn()
+    initialUsername: PropTypes.string,
+    initialPhoneCountry: PropTypes.string,
+    initialPhoneNumber: PropTypes.string,
+    initialPassword: PropTypes.string,
+    onUsernameChanged: PropTypes.func,
+    onPhoneCountryChanged: PropTypes.func,
+    onPhoneNumberChanged: PropTypes.func,
+    onPasswordChanged: PropTypes.func,
+    loginIncorrect: PropTypes.bool,
+};
+
+module.exports = PasswordLogin;

src/components/views/login/RegistrationForm.js

@@ -1,5 +1,6 @@
 /*
 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.
@@ -14,18 +15,23 @@ 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 { field_input_incorrect } from '../../../UiEffects';
+import sdk from '../../../index';
+import Email from '../../../email';
+import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+import SdkConfig from '../../../SdkConfig';
+import SettingsStore from "../../../settings/SettingsStore";
 
-var React = require('react');
-var UiEffects = require('../../../UiEffects');
-var sdk = require('../../../index');
-var Email = require('../../../email');
-var Modal = require("../../../Modal");
-
-var FIELD_EMAIL = 'field_email';
-var FIELD_USERNAME = 'field_username';
-var FIELD_PASSWORD = 'field_password';
-var FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
+const FIELD_EMAIL = 'field_email';
+const FIELD_PHONE_COUNTRY = 'field_phone_country';
+const FIELD_PHONE_NUMBER = 'field_phone_number';
+const FIELD_USERNAME = 'field_username';
+const FIELD_PASSWORD = 'field_password';
+const FIELD_PASSWORD_CONFIRM = 'field_password_confirm';
 
 /**
  * A pure UI component which displays a registration form.
@@ -35,34 +41,42 @@ module.exports = React.createClass({
 
     propTypes: {
         // Values pre-filled in the input boxes when the component loads
-        defaultEmail: React.PropTypes.string,
-        defaultUsername: React.PropTypes.string,
-        defaultPassword: React.PropTypes.string,
+        defaultEmail: PropTypes.string,
+        defaultPhoneCountry: PropTypes.string,
+        defaultPhoneNumber: PropTypes.string,
+        defaultUsername: PropTypes.string,
+        defaultPassword: PropTypes.string,
+        teamsConfig: PropTypes.shape({
+            // Email address to request new teams
+            supportEmail: PropTypes.string,
+            teams: PropTypes.arrayOf(React.PropTypes.shape({
+                // The displayed name of the team
+                "name": PropTypes.string,
+                // The domain of team email addresses
+                "domain": PropTypes.string,
+            })).required,
+        }),
 
-        // A username that will be used if no username is entered.
-        // Specifying this param will also warn the user that entering
-        // a different username will cause a fresh account to be generated.
-        guestUsername: React.PropTypes.string,
-
-        showEmail: React.PropTypes.bool,
-        minPasswordLength: React.PropTypes.number,
-        onError: React.PropTypes.func,
-        onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+        minPasswordLength: PropTypes.number,
+        onError: PropTypes.func,
+        onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
     },
 
     getDefaultProps: function() {
         return {
-            showEmail: false,
             minPasswordLength: 6,
             onError: function(e) {
                 console.error(e);
-            }
+            },
         };
     },
 
     getInitialState: function() {
         return {
-            fieldValid: {}
+            fieldValid: {},
+            selectedTeam: null,
+            // The ISO2 country code selected in the phone number entry
+            phoneCountry: this.props.defaultPhoneCountry,
         };
     },
 
@@ -77,38 +91,41 @@ module.exports = React.createClass({
         this.validateField(FIELD_PASSWORD_CONFIRM);
         this.validateField(FIELD_PASSWORD);
         this.validateField(FIELD_USERNAME);
+        this.validateField(FIELD_PHONE_NUMBER);
         this.validateField(FIELD_EMAIL);
 
-        var self = this;
+        const self = this;
         if (this.allFieldsValid()) {
             if (this.refs.email.value == '') {
-                var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                Modal.createDialog(QuestionDialog, {
-                    title: "Warning",
+                const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+                Modal.createTrackedDialog('If you don\'t specify an email address...', '', QuestionDialog, {
+                    title: _t("Warning!"),
                     description:
                         <div>
-                            If you don't specify an email address, you won't be able to reset your password.<br/>
-                            Are you sure?
+                            { _t("If you don't specify an email address, you won't be able to reset your password. " +
+                                "Are you sure?") }
                         </div>,
-                    button: "Continue",
+                    button: _t("Continue"),
                     onFinished: function(confirmed) {
                         if (confirmed) {
-                            self._doSubmit();
+                            self._doSubmit(ev);
                         }
                     },
                 });
-            }
-            else {
-                self._doSubmit();
+            } else {
+                self._doSubmit(ev);
             }
         }
     },
 
-    _doSubmit: function() {
-        var promise = this.props.onRegisterClick({
-            username: this.refs.username.value.trim() || this.props.guestUsername,
+    _doSubmit: function(ev) {
+        const email = this.refs.email.value.trim();
+        const promise = this.props.onRegisterClick({
+            username: this.refs.username.value.trim(),
             password: this.refs.password.value.trim(),
-            email: this.refs.email.value.trim()
+            email: email,
+            phoneCountry: this.state.phoneCountry,
+            phoneNumber: this.refs.phoneNumber ? this.refs.phoneNumber.value.trim() : '',
         });
 
         if (promise) {
@@ -124,8 +141,8 @@ module.exports = React.createClass({
      * they were validated.
      */
     allFieldsValid: function() {
-        var keys = Object.keys(this.state.fieldValid);
-        for (var i = 0; i < keys.length; ++i) {
+        const keys = Object.keys(this.state.fieldValid);
+        for (let i = 0; i < keys.length; ++i) {
             if (this.state.fieldValid[keys[i]] == false) {
                 return false;
             }
@@ -133,32 +150,57 @@ module.exports = React.createClass({
         return true;
     },
 
+    _isUniEmail: function(email) {
+        return email.endsWith('.ac.uk') || email.endsWith('.edu') || email.endsWith('matrix.org');
+    },
+
     validateField: function(field_id) {
-        var pwd1 = this.refs.password.value.trim();
-        var pwd2 = this.refs.passwordConfirm.value.trim()
+        const pwd1 = this.refs.password.value.trim();
+        const pwd2 = this.refs.passwordConfirm.value.trim();
 
         switch (field_id) {
             case FIELD_EMAIL:
-                this.markFieldValid(
-                    field_id,
-                    this.refs.email.value == '' || Email.looksValid(this.refs.email.value),
-                    "RegistrationForm.ERR_EMAIL_INVALID"
-                );
+                const email = this.refs.email.value;
+                if (this.props.teamsConfig && this._isUniEmail(email)) {
+                    const matchingTeam = this.props.teamsConfig.teams.find(
+                        (team) => {
+                            return email.split('@').pop() === team.domain;
+                        },
+                    ) || null;
+                    this.setState({
+                        selectedTeam: matchingTeam,
+                        showSupportEmail: !matchingTeam,
+                    });
+                    this.props.onTeamSelected(matchingTeam);
+                } else {
+                    this.props.onTeamSelected(null);
+                    this.setState({
+                        selectedTeam: null,
+                        showSupportEmail: false,
+                    });
+                }
+                const emailValid = email === '' || Email.looksValid(email);
+                this.markFieldValid(field_id, emailValid, "RegistrationForm.ERR_EMAIL_INVALID");
+                break;
+            case FIELD_PHONE_NUMBER:
+                const phoneNumber = this.refs.phoneNumber ? this.refs.phoneNumber.value : '';
+                const phoneNumberValid = phoneNumber === '' || phoneNumberLooksValid(phoneNumber);
+                this.markFieldValid(field_id, phoneNumberValid, "RegistrationForm.ERR_PHONE_NUMBER_INVALID");
                 break;
             case FIELD_USERNAME:
                 // XXX: SPEC-1
-                var username = this.refs.username.value.trim() || this.props.guestUsername;
+                var username = this.refs.username.value.trim();
                 if (encodeURIComponent(username) != username) {
                     this.markFieldValid(
                         field_id,
                         false,
-                        "RegistrationForm.ERR_USERNAME_INVALID"
+                        "RegistrationForm.ERR_USERNAME_INVALID",
                     );
                 } else if (username == '') {
                     this.markFieldValid(
                         field_id,
                         false,
-                        "RegistrationForm.ERR_USERNAME_BLANK"
+                        "RegistrationForm.ERR_USERNAME_BLANK",
                     );
                 } else {
                     this.markFieldValid(field_id, true);
@@ -169,13 +211,13 @@ module.exports = React.createClass({
                     this.markFieldValid(
                         field_id,
                         false,
-                        "RegistrationForm.ERR_PASSWORD_MISSING"
+                        "RegistrationForm.ERR_PASSWORD_MISSING",
                     );
                 } else if (pwd1.length < this.props.minPasswordLength) {
                     this.markFieldValid(
                         field_id,
                         false,
-                        "RegistrationForm.ERR_PASSWORD_LENGTH"
+                        "RegistrationForm.ERR_PASSWORD_LENGTH",
                     );
                 } else {
                     this.markFieldValid(field_id, true);
@@ -184,18 +226,18 @@ module.exports = React.createClass({
             case FIELD_PASSWORD_CONFIRM:
                 this.markFieldValid(
                     field_id, pwd1 == pwd2,
-                    "RegistrationForm.ERR_PASSWORD_MISMATCH"
+                    "RegistrationForm.ERR_PASSWORD_MISMATCH",
                 );
                 break;
         }
     },
 
     markFieldValid: function(field_id, val, error_code) {
-        var fieldValid = this.state.fieldValid;
+        const fieldValid = this.state.fieldValid;
         fieldValid[field_id] = val;
         this.setState({fieldValid: fieldValid});
         if (!val) {
-            UiEffects.field_input_incorrect(this.fieldElementById(field_id));
+            field_input_incorrect(this.fieldElementById(field_id));
             this.props.onError(error_code);
         }
     },
@@ -204,6 +246,8 @@ module.exports = React.createClass({
         switch (field_id) {
             case FIELD_EMAIL:
                 return this.refs.email;
+            case FIELD_PHONE_NUMBER:
+                return this.refs.phoneNumber;
             case FIELD_USERNAME:
                 return this.refs.username;
             case FIELD_PASSWORD:
@@ -213,8 +257,8 @@ module.exports = React.createClass({
         }
     },
 
-    _classForField: function(field_id, baseClass) {
-        let cls = baseClass || '';
+    _classForField: function(field_id, ...baseClasses) {
+        let cls = baseClasses.join(' ');
         if (this.state.fieldValid[field_id] === false) {
             if (cls) cls += ' ';
             cls += 'error';
@@ -222,56 +266,110 @@ module.exports = React.createClass({
         return cls;
     },
 
+    _onPhoneCountryChange(newVal) {
+        this.setState({
+            phoneCountry: newVal.iso2,
+            phonePrefix: newVal.prefix,
+        });
+    },
+
     render: function() {
-        var self = this;
-        var emailSection, registerButton;
-        if (this.props.showEmail) {
-            emailSection = (
+        const self = this;
+
+        const theme = SettingsStore.getValue("theme");
+        // FIXME: remove hardcoded Status team tweaks at some point
+        const emailPlaceholder = theme === 'status' ? _t("Email address") : _t("Email address (optional)");
+
+        const emailSection = (
+            <div>
                 <input type="text" ref="email"
-                    autoFocus={true} placeholder="Email address (optional)"
+                    autoFocus={true} placeholder={emailPlaceholder}
                     defaultValue={this.props.defaultEmail}
                     className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
-                    onBlur={function() {self.validateField(FIELD_EMAIL)}} />
-            );
+                    onBlur={function() {self.validateField(FIELD_EMAIL);}}
+                    value={self.state.email} />
+            </div>
+        );
+        let belowEmailSection;
+        if (this.props.teamsConfig) {
+            if (this.props.teamsConfig.supportEmail && this.state.showSupportEmail) {
+                belowEmailSection = (
+                    <p className="mx_Login_support">
+                        Sorry, but your university is not registered with us just yet.&nbsp;
+                        Email us on&nbsp;
+                        <a href={"mailto:" + this.props.teamsConfig.supportEmail}>
+                            { this.props.teamsConfig.supportEmail }
+                        </a>&nbsp;
+                        to get your university signed up. Or continue to register with Riot to enjoy our open source platform.
+                    </p>
+                );
+            } else if (this.state.selectedTeam) {
+                belowEmailSection = (
+                    <p className="mx_Login_support">
+                        { _t("You are registering with %(SelectedTeamName)s", {SelectedTeamName: this.state.selectedTeam.name}) }
+                    </p>
+                );
+            }
         }
-        if (this.props.onRegisterClick) {
-            registerButton = (
-                <input className="mx_Login_submit" type="submit" value="Register" />
+
+        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        let phoneSection;
+        if (!SdkConfig.get().disable_3pid_login) {
+            phoneSection = (
+                <div className="mx_Login_phoneSection">
+                    <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
+                        className="mx_Login_phoneCountry mx_Login_field_prefix"
+                        value={this.state.phoneCountry}
+                        isSmall={true}
+                        showPrefix={true}
+                    />
+                    <input type="text" ref="phoneNumber"
+                        placeholder={_t("Mobile phone number (optional)")}
+                        defaultValue={this.props.defaultPhoneNumber}
+                        className={this._classForField(
+                            FIELD_PHONE_NUMBER,
+                            'mx_Login_phoneNumberField',
+                            'mx_Login_field',
+                            'mx_Login_field_has_prefix',
+                        )}
+                        onBlur={function() {self.validateField(FIELD_PHONE_NUMBER);}}
+                        value={self.state.phoneNumber}
+                    />
+                </div>
             );
         }
 
-        var placeholderUserName = "User name";
-        if (this.props.guestUsername) {
-            placeholderUserName += " (default: " + this.props.guestUsername + ")"
-        }
+        const registerButton = (
+            <input className="mx_Login_submit" type="submit" value={_t("Register")} />
+        );
+
+        const placeholderUserName = _t("User name");
 
         return (
             <div>
                 <form onSubmit={this.onSubmit}>
-                    {emailSection}
-                    <br />
+                    { emailSection }
+                    { belowEmailSection }
+                    { phoneSection }
                     <input type="text" ref="username"
-                        placeholder={ placeholderUserName } defaultValue={this.props.defaultUsername}
+                        placeholder={placeholderUserName} defaultValue={this.props.defaultUsername}
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_USERNAME)}} />
+                        onBlur={function() {self.validateField(FIELD_USERNAME);}} />
                     <br />
-                    { this.props.guestUsername ?
-                        <div className="mx_Login_fieldLabel">Setting a user name will create a fresh account</div> : null
-                    }
                     <input type="password" ref="password"
                         className={this._classForField(FIELD_PASSWORD, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD)}}
-                        placeholder="Password" defaultValue={this.props.defaultPassword} />
+                        onBlur={function() {self.validateField(FIELD_PASSWORD);}}
+                        placeholder={_t("Password")} defaultValue={this.props.defaultPassword} />
                     <br />
                     <input type="password" ref="passwordConfirm"
-                        placeholder="Confirm password"
+                        placeholder={_t("Confirm password")}
                         className={this._classForField(FIELD_PASSWORD_CONFIRM, 'mx_Login_field')}
-                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM)}}
+                        onBlur={function() {self.validateField(FIELD_PASSWORD_CONFIRM);}}
                         defaultValue={this.props.defaultPassword} />
                     <br />
-                    {registerButton}
+                    { registerButton }
                 </form>
             </div>
         );
-    }
+    },
 });

src/components/views/login/ServerConfig.js

@@ -16,9 +16,11 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var Modal = require('../../../Modal');
-var sdk = require('../../../index');
+const React = require('react');
+import PropTypes from 'prop-types';
+const Modal = require('../../../Modal');
+const sdk = require('../../../index');
+import { _t } from '../../../languageHandler';
 
 /**
  * A pure UI component which displays the HS and IS to use.
@@ -27,35 +29,33 @@ module.exports = React.createClass({
     displayName: 'ServerConfig',
 
     propTypes: {
-        onHsUrlChanged: React.PropTypes.func,
-        onIsUrlChanged: React.PropTypes.func,
+        onServerConfigChange: PropTypes.func,
 
         // default URLs are defined in config.json (or the hardcoded defaults)
         // they are used if the user has not overridden them with a custom URL.
         // In other words, if the custom URL is blank, the default is used.
-        defaultHsUrl: React.PropTypes.string, // e.g. https://matrix.org
-        defaultIsUrl: React.PropTypes.string, // e.g. https://vector.im
+        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
+        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
 
         // custom URLs are explicitly provided by the user and override the
         // default URLs.  The user enters them via the component's input fields,
         // which is reflected on these properties whenever on..UrlChanged fires.
         // They are persisted in localStorage by MatrixClientPeg, and so can
         // override the default URLs when the component initially loads.
-        customHsUrl: React.PropTypes.string,
-        customIsUrl: React.PropTypes.string,
+        customHsUrl: PropTypes.string,
+        customIsUrl: PropTypes.string,
 
-        withToggleButton: React.PropTypes.bool,
-        delayTimeMs: React.PropTypes.number // time to wait before invoking onChanged
+        withToggleButton: PropTypes.bool,
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
     },
 
     getDefaultProps: function() {
         return {
-            onHsUrlChanged: function() {},
-            onIsUrlChanged: function() {},
+            onServerConfigChange: function() {},
             customHsUrl: "",
             customIsUrl: "",
             withToggleButton: false,
-            delayTimeMs: 0
+            delayTimeMs: 0,
         };
     },
 
@@ -64,18 +64,21 @@ module.exports = React.createClass({
             hs_url: this.props.customHsUrl,
             is_url: this.props.customIsUrl,
             // if withToggleButton is false, then show the config all the time given we have no way otherwise of making it visible
-            configVisible: !this.props.withToggleButton || 
+            configVisible: !this.props.withToggleButton ||
                            (this.props.customHsUrl !== this.props.defaultHsUrl) ||
-                           (this.props.customIsUrl !== this.props.defaultIsUrl)
-        }
+                           (this.props.customIsUrl !== this.props.defaultIsUrl),
+        };
     },
 
     onHomeserverChanged: function(ev) {
         this.setState({hs_url: ev.target.value}, function() {
             this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
-                var hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
+                let hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
                 if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
-                this.props.onHsUrlChanged(hsUrl);
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hs_url,
+                    isUrl: this.state.is_url,
+                });
             });
         });
     },
@@ -83,9 +86,12 @@ module.exports = React.createClass({
     onIdentityServerChanged: function(ev) {
         this.setState({is_url: ev.target.value}, function() {
             this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
-                var isUrl = this.state.is_url.trim().replace(/\/$/, "");
+                let isUrl = this.state.is_url.trim().replace(/\/$/, "");
                 if (isUrl === "") isUrl = this.props.defaultIsUrl;
-                this.props.onIsUrlChanged(isUrl);
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hs_url,
+                    isUrl: this.state.is_url,
+                });
             });
         });
     },
@@ -99,43 +105,46 @@ module.exports = React.createClass({
 
     onServerConfigVisibleChange: function(visible, ev) {
         this.setState({
-            configVisible: visible
+            configVisible: visible,
         });
         if (!visible) {
-            this.props.onHsUrlChanged(this.props.defaultHsUrl);
-            this.props.onIsUrlChanged(this.props.defaultIsUrl);
-        }
-        else {
-            this.props.onHsUrlChanged(this.state.hs_url);
-            this.props.onIsUrlChanged(this.state.is_url);
+            this.props.onServerConfigChange({
+                hsUrl: this.props.defaultHsUrl,
+                isUrl: this.props.defaultIsUrl,
+            });
+        } else {
+            this.props.onServerConfigChange({
+                hsUrl: this.state.hs_url,
+                isUrl: this.state.is_url,
+            });
         }
     },
 
     showHelpPopup: function() {
-        var CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
-        Modal.createDialog(CustomServerDialog);
+        const CustomServerDialog = sdk.getComponent('login.CustomServerDialog');
+        Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
     },
 
     render: function() {
-        var serverConfigStyle = {};
+        const serverConfigStyle = {};
         serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
 
-        var toggleButton;
+        let toggleButton;
         if (this.props.withToggleButton) {
             toggleButton = (
-                <div style={{ textAlign: 'center' }}>
+                <div className="mx_ServerConfig_selector">
                     <input className="mx_Login_radio" id="basic" name="configVisible" type="radio"
                         checked={!this.state.configVisible}
                         onChange={this.onServerConfigVisibleChange.bind(this, false)} />
                     <label className="mx_Login_label" htmlFor="basic">
-                        Default server
+                        { _t("Default server") }
                     </label>
                     &nbsp;&nbsp;
                     <input className="mx_Login_radio" id="advanced" name="configVisible" type="radio"
                         checked={this.state.configVisible}
                         onChange={this.onServerConfigVisibleChange.bind(this, true)} />
                     <label className="mx_Login_label" htmlFor="advanced">
-                        Custom server
+                        { _t("Custom server") }
                     </label>
                 </div>
             );
@@ -143,11 +152,11 @@ module.exports = React.createClass({
 
         return (
         <div>
-            {toggleButton}
+            { toggleButton }
             <div style={serverConfigStyle}>
                 <div className="mx_ServerConfig">
                     <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
-                        Home server URL
+                        { _t("Home server URL") }
                     </label>
                     <input className="mx_Login_field" id="hsurl" type="text"
                         placeholder={this.props.defaultHsUrl}
@@ -155,7 +164,7 @@ module.exports = React.createClass({
                         value={this.state.hs_url}
                         onChange={this.onHomeserverChanged} />
                     <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
-                        Identity server URL
+                        { _t("Identity server URL") }
                     </label>
                     <input className="mx_Login_field" id="isurl" type="text"
                         placeholder={this.props.defaultIsUrl}
@@ -163,11 +172,11 @@ module.exports = React.createClass({
                         value={this.state.is_url}
                         onChange={this.onIdentityServerChanged} />
                     <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
-                        What does this mean?
+                        { _t("What does this mean?") }
                     </a>
                 </div>
             </div>
         </div>
         );
-    }
+    },
 });

src/components/views/messages/MAudioBody.js

@@ -20,8 +20,8 @@ import React from 'react';
 import MFileBody from './MFileBody';
 
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import sdk from '../../../index';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
+import { _t } from '../../../languageHandler';
 
 export default class MAudioBody extends React.Component {
     constructor(props) {
@@ -31,11 +31,11 @@ export default class MAudioBody extends React.Component {
             decryptedUrl: null,
             decryptedBlob: null,
             error: null,
-        }
+        };
     }
     onPlayToggle() {
         this.setState({
-            playing: !this.state.playing
+            playing: !this.state.playing,
         });
     }
 
@@ -49,9 +49,9 @@ export default class MAudioBody extends React.Component {
     }
 
     componentDidMount() {
-        var content = this.props.mxEvent.getContent();
+        const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            var decryptedBlob;
+            let decryptedBlob;
             decryptFile(content.file).then(function(blob) {
                 decryptedBlob = blob;
                 return readBlobAsDataUri(decryptedBlob);
@@ -70,14 +70,13 @@ export default class MAudioBody extends React.Component {
     }
 
     render() {
-
         const content = this.props.mxEvent.getContent();
 
         if (this.state.error !== null) {
             return (
                 <span className="mx_MAudioBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting audio
+                    <img src="img/warning.svg" width="16" height="16" />
+                    { _t("Error decrypting audio") }
                 </span>
             );
         }
@@ -89,7 +88,7 @@ export default class MAudioBody extends React.Component {
             // Not sure how tall the audio player is so not sure how tall it should actually be.
             return (
                 <span className="mx_MAudioBody">
-                    <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                    <img src="img/spinner.gif" alt={content.body} width="16" height="16" />
                 </span>
             );
         }

src/components/views/messages/MFileBody.js

@@ -17,21 +17,22 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import filesize from 'filesize';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import {decryptFile} from '../../../utils/DecryptFile';
 import Tinter from '../../../Tinter';
 import request from 'browser-request';
-import q from 'q';
 import Modal from '../../../Modal';
 
 
 // A cached tinted copy of "img/download.svg"
-var tintedDownloadImageURL;
+let tintedDownloadImageURL;
 // Track a list of mounted MFileBody instances so that we can update
 // the "img/download.svg" when the tint changes.
-var nextMountId = 0;
+let nextMountId = 0;
 const mounts = {};
 
 /**
@@ -169,11 +170,11 @@ function computedStyle(element) {
         return "";
     }
     const style = window.getComputedStyle(element, null);
-    var cssText = style.cssText;
+    let cssText = style.cssText;
     if (cssText == "") {
         // Firefox doesn't implement ".cssText" for computed styles.
         // https://bugzilla.mozilla.org/show_bug.cgi?id=137687
-        for (var i = 0; i < style.length; i++) {
+        for (let i = 0; i < style.length; i++) {
             cssText += style[i] + ":";
             cssText += style.getPropertyValue(style[i]) + ";";
         }
@@ -191,7 +192,7 @@ module.exports = React.createClass({
     },
 
     contextTypes: {
-        appConfig: React.PropTypes.object,
+        appConfig: PropTypes.object,
     },
 
     /**
@@ -202,7 +203,7 @@ module.exports = React.createClass({
      * @return {string} the human readable link text for the attachment.
      */
     presentableTextForFile: function(content) {
-        var linkText = 'Attachment';
+        let linkText = _t("Attachment");
         if (content.body && content.body.length > 0) {
             // The content body should be the name of the file including a
             // file extension.
@@ -261,7 +262,7 @@ module.exports = React.createClass({
         const content = this.props.mxEvent.getContent();
         const text = this.presentableTextForFile(content);
         const isEncrypted = content.file !== undefined;
-        const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
+        const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
         const contentUrl = this._getContentUrl();
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
@@ -270,7 +271,7 @@ module.exports = React.createClass({
                 // Need to decrypt the attachment
                 // Wait for the user to click on the link before downloading
                 // and decrypting the attachment.
-                var decrypting = false;
+                let decrypting = false;
                 const decrypt = () => {
                     if (decrypting) {
                         return false;
@@ -281,9 +282,10 @@ module.exports = React.createClass({
                             decryptedBlob: blob,
                         });
                     }).catch((err) => {
-                        console.warn("Unable to decrypt attachment: ", err)
-                        Modal.createDialog(ErrorDialog, {
-                            description: "Error decrypting attachment"
+                        console.warn("Unable to decrypt attachment: ", err);
+                        Modal.createTrackedDialog('Error decrypting attachment', '', ErrorDialog, {
+                            title: _t("Error"),
+                            description: _t("Error decrypting attachment"),
                         });
                     }).finally(() => {
                         decrypting = false;
@@ -293,9 +295,9 @@ module.exports = React.createClass({
 
                 return (
                     <span className="mx_MFileBody" ref="body">
-                        <div className="mx_MImageBody_download">
+                        <div className="mx_MFileBody_download">
                             <a href="javascript:void(0)" onClick={decrypt}>
-                                Decrypt {text}
+                                { _t("Decrypt %(text)s", { text: text }) }
                             </a>
                         </div>
                     </span>
@@ -314,7 +316,7 @@ module.exports = React.createClass({
                     // We can't provide a Content-Disposition header like we would for HTTP.
                     download: fileName,
                     target: "_blank",
-                    textContent: "Download " + text,
+                    textContent: _t("Download %(text)s", { text: text }),
                 }, "*");
             };
 
@@ -325,16 +327,16 @@ module.exports = React.createClass({
             }
             return (
                 <span className="mx_MFileBody">
-                    <div className="mx_MImageBody_download">
+                    <div className="mx_MFileBody_download">
                         <div style={{display: "none"}}>
-                            {/*
+                            { /*
                               * Add dummy copy of the "a" tag
                               * We'll use it to learn how the download link
                               * would have been styled if it was rendered inline.
-                              */}
-                            <a ref="dummyLink"/>
+                              */ }
+                            <a ref="dummyLink" />
                         </div>
-                        <iframe src={renderer_url} onLoad={onIframeLoad} ref="iframe"/>
+                        <iframe src={renderer_url} onLoad={onIframeLoad} ref="iframe" />
                     </div>
                 </span>
             );
@@ -345,8 +347,8 @@ module.exports = React.createClass({
             if (this.props.tileShape === "file_grid") {
                 return (
                     <span className="mx_MFileBody">
-                        <div className="mx_MImageBody_download">
-                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank">
+                        <div className="mx_MFileBody_download">
+                            <a className="mx_ImageBody_downloadLink" href={contentUrl} download={fileName} target="_blank">
                                 { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
@@ -355,24 +357,23 @@ module.exports = React.createClass({
                         </div>
                     </span>
                 );
-            }
-            else {
+            } else {
                 return (
                     <span className="mx_MFileBody">
-                        <div className="mx_MImageBody_download">
-                            <a href={contentUrl} target="_blank" rel="noopener">
-                                <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
-                                Download {text}
+                        <div className="mx_MFileBody_download">
+                            <a href={contentUrl} download={fileName} target="_blank" rel="noopener">
+                                <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage" />
+                                { _t("Download %(text)s", { text: text }) }
                             </a>
                         </div>
                     </span>
                 );
             }
         } else {
-            var extra = text ? (': ' + text) : '';
+            const extra = text ? (': ' + text) : '';
             return <span className="mx_MFileBody">
-                Invalid file{extra}
-            </span>
+                { _t("Invalid file%(extra)s", { extra: extra }) }
+            </span>;
         }
     },
 });

src/components/views/messages/MImageBody.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import ImageUtils from '../../../ImageUtils';
@@ -24,17 +25,19 @@ import Modal from '../../../Modal';
 import sdk from '../../../index';
 import dis from '../../../dispatcher';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
-import q from 'q';
+import Promise from 'bluebird';
+import { _t } from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = React.createClass({
     displayName: 'MImageBody',
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* called when the image has loaded */
-        onWidgetLoad: React.PropTypes.func.isRequired,
+        onWidgetLoad: PropTypes.func.isRequired,
     },
 
     getInitialState: function() {
@@ -42,7 +45,7 @@ module.exports = React.createClass({
             decryptedUrl: null,
             decryptedThumbnailUrl: null,
             decryptedBlob: null,
-            error: null
+            error: null,
         };
     },
 
@@ -55,7 +58,8 @@ module.exports = React.createClass({
             const ImageView = sdk.getComponent("elements.ImageView");
             const params = {
                 src: httpUrl,
-                mxEvent: this.props.mxEvent
+                name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
+                mxEvent: this.props.mxEvent,
             };
 
             if (content.info) {
@@ -70,22 +74,26 @@ module.exports = React.createClass({
 
     _isGif: function() {
         const content = this.props.mxEvent.getContent();
-        return (content && content.info && content.info.mimetype === "image/gif");
+        return (
+          content &&
+          content.info &&
+          content.info.mimetype === "image/gif"
+        );
     },
 
     onImageEnter: function(e) {
-        if (!this._isGif()) {
+        if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
-        var imgElement = e.target;
+        const imgElement = e.target;
         imgElement.src = this._getContentUrl();
     },
 
     onImageLeave: function(e) {
-        if (!this._isGif()) {
+        if (!this._isGif() || SettingsStore.getValue("autoplayGifsAndVideos")) {
             return;
         }
-        var imgElement = e.target;
+        const imgElement = e.target;
         imgElement.src = this._getThumbUrl();
     },
 
@@ -101,6 +109,7 @@ module.exports = React.createClass({
     _getThumbUrl: function() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
+            // Don't use the thumbnail for clients wishing to autoplay gifs.
             if (this.state.decryptedThumbnailUrl) {
                 return this.state.decryptedThumbnailUrl;
             }
@@ -115,15 +124,15 @@ module.exports = React.createClass({
         this.fixupHeight();
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            var thumbnailPromise = q(null);
+            let thumbnailPromise = Promise.resolve(null);
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
-                    content.info.thumbnail_file
-                ).then(function (blob) {
+                    content.info.thumbnail_file,
+                ).then(function(blob) {
                     return readBlobAsDataUri(blob);
                 });
             }
-            var decryptedBlob;
+            let decryptedBlob;
             thumbnailPromise.then((thumbnailUrl) => {
                 return decryptFile(content.file).then(function(blob) {
                     decryptedBlob = blob;
@@ -168,7 +177,7 @@ module.exports = React.createClass({
         // the alternative here would be 600*timelineWidth/800; to scale them down to fit inside a 4:3 bounding box
 
         //console.log("trying to fit image into timelineWidth of " + this.refs.body.offsetWidth + " or " + this.refs.body.clientWidth);
-        var thumbHeight = null;
+        let thumbHeight = null;
         if (content.info) {
             thumbHeight = ImageUtils.thumbHeight(content.info.w, content.info.h, timelineWidth, maxHeight);
         }
@@ -183,14 +192,13 @@ module.exports = React.createClass({
         if (this.state.error !== null) {
             return (
                 <span className="mx_MImageBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting image
+                    <img src="img/warning.svg" width="16" height="16" />
+                    { _t("Error decrypting image") }
                 </span>
             );
         }
 
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-
             // Need to decrypt the attachment
             // The attachment is decrypted in componentDidMount.
             // For now add an img tag with a spinner.
@@ -203,21 +211,27 @@ module.exports = React.createClass({
                     }}>
                         <img src="img/spinner.gif" alt={content.body} width="32" height="32" style={{
                             "margin": "auto",
-                        }}/>
+                        }} />
                     </div>
                 </span>
             );
         }
 
         const contentUrl = this._getContentUrl();
-        const thumbUrl = this._getThumbUrl();
+        let thumbUrl;
+        if (this._isGif() && SettingsStore.getValue("autoplayGifsAndVideos")) {
+          thumbUrl = contentUrl;
+        } else {
+          thumbUrl = this._getThumbUrl();
+        }
 
         if (thumbUrl) {
             return (
                 <span className="mx_MImageBody" ref="body">
-                    <a href={contentUrl} onClick={ this.onClick }>
+                    <a href={contentUrl} onClick={this.onClick}>
                         <img className="mx_MImageBody_thumbnail" src={thumbUrl} ref="image"
                             alt={content.body}
+                            onLoad={this.props.onWidgetLoad}
                             onMouseEnter={this.onImageEnter}
                             onMouseLeave={this.onImageLeave} />
                     </a>
@@ -227,13 +241,13 @@ module.exports = React.createClass({
         } else if (content.body) {
             return (
                 <span className="mx_MImageBody">
-                    Image '{content.body}' cannot be displayed.
+                    { _t("Image '%(Body)s' cannot be displayed.", {Body: content.body}) }
                 </span>
             );
         } else {
             return (
                 <span className="mx_MImageBody">
-                    This image cannot be displayed.
+                    { _t("This image cannot be displayed.") }
                 </span>
             );
         }

src/components/views/messages/MVideoBody.js

@@ -17,16 +17,25 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
 import MFileBody from './MFileBody';
 import MatrixClientPeg from '../../../MatrixClientPeg';
-import Model from '../../../Modal';
-import sdk from '../../../index';
 import { decryptFile, readBlobAsDataUri } from '../../../utils/DecryptFile';
-import q from 'q';
+import Promise from 'bluebird';
+import { _t } from '../../../languageHandler';
+import SettingsStore from "../../../settings/SettingsStore";
 
 module.exports = React.createClass({
     displayName: 'MVideoBody',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+
+        /* called when the video has loaded */
+        onWidgetLoad: PropTypes.func.isRequired,
+    },
+
     getInitialState: function() {
         return {
             decryptedUrl: null,
@@ -46,13 +55,12 @@ module.exports = React.createClass({
             // no scaling needs to be applied
             return 1;
         }
-        var widthMulti = thumbWidth / fullWidth;
-        var heightMulti = thumbHeight / fullHeight;
+        const widthMulti = thumbWidth / fullWidth;
+        const heightMulti = thumbHeight / fullHeight;
         if (widthMulti < heightMulti) {
             // width is the dominant dimension so scaling will be fixed on that
             return widthMulti;
-        }
-        else {
+        } else {
             // height is the dominant dimension so scaling will be fixed on that
             return heightMulti;
         }
@@ -71,7 +79,7 @@ module.exports = React.createClass({
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined) {
             return this.state.decryptedThumbnailUrl;
-        } else if (content.info.thumbnail_url) {
+        } else if (content.info && content.info.thumbnail_url) {
             return MatrixClientPeg.get().mxcUrlToHttp(content.info.thumbnail_url);
         } else {
             return null;
@@ -81,15 +89,15 @@ module.exports = React.createClass({
     componentDidMount: function() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            var thumbnailPromise = q(null);
+            let thumbnailPromise = Promise.resolve(null);
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
-                    content.info.thumbnail_file
+                    content.info.thumbnail_file,
                 ).then(function(blob) {
                     return readBlobAsDataUri(blob);
                 });
             }
-            var decryptedBlob;
+            let decryptedBlob;
             thumbnailPromise.then((thumbnailUrl) => {
                 return decryptFile(content.file).then(function(blob) {
                     decryptedBlob = blob;
@@ -100,9 +108,10 @@ module.exports = React.createClass({
                         decryptedThumbnailUrl: thumbnailUrl,
                         decryptedBlob: decryptedBlob,
                     });
+                    this.props.onWidgetLoad();
                 });
             }).catch((err) => {
-                console.warn("Unable to decrypt attachment: ", err)
+                console.warn("Unable to decrypt attachment: ", err);
                 // Set a placeholder image when we can't decrypt the image.
                 this.setState({
                     error: err,
@@ -117,8 +126,8 @@ module.exports = React.createClass({
         if (this.state.error !== null) {
             return (
                 <span className="mx_MVideoBody" ref="body">
-                    <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting video
+                    <img src="img/warning.svg" width="16" height="16" />
+                    { _t("Error decrypting video") }
                 </span>
             );
         }
@@ -135,7 +144,7 @@ module.exports = React.createClass({
                         "justify-items": "center",
                         "width": "100%",
                     }}>
-                        <img src="img/spinner.gif" alt={content.body} width="16" height="16"/>
+                        <img src="img/spinner.gif" alt={content.body} width="16" height="16" />
                     </div>
                 </span>
             );
@@ -143,11 +152,11 @@ module.exports = React.createClass({
 
         const contentUrl = this._getContentUrl();
         const thumbUrl = this._getThumbUrl();
-
-        var height = null;
-        var width = null;
-        var poster = null;
-        var preload = "metadata";
+        const autoplay = SettingsStore.getValue("autoplayGifsAndVideos");
+        let height = null;
+        let width = null;
+        let poster = null;
+        let preload = "metadata";
         if (content.info) {
             const scale = this.thumbScale(content.info.w, content.info.h, 480, 360);
             if (scale) {
@@ -160,11 +169,10 @@ module.exports = React.createClass({
                 preload = "none";
             }
         }
-
         return (
             <span className="mx_MVideoBody">
                 <video className="mx_MVideoBody" src={contentUrl} alt={content.body}
-                    controls preload={preload} autoPlay={false}
+                    controls preload={preload} muted={autoplay} autoPlay={autoplay}
                     height={height} width={width} poster={poster}>
                 </video>
                 <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />

src/components/views/messages/MessageEvent.js

@@ -16,30 +16,31 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var sdk = require('../../../index');
+const React = require('react');
+import PropTypes from 'prop-types';
+const sdk = require('../../../index');
 
 module.exports = React.createClass({
     displayName: 'MessageEvent',
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* a list of words to highlight */
-        highlights: React.PropTypes.array,
+        highlights: PropTypes.array,
 
         /* link URL for the highlights */
-        highlightLink: React.PropTypes.string,
+        highlightLink: PropTypes.string,
 
         /* should show URL previews for this event */
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         /* callback called when dynamic content in events are loaded */
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
 
         /* the shsape of the tile, used */
-        tileShape: React.PropTypes.string,
+        tileShape: PropTypes.string,
     },
 
     getEventTileOps: function() {
@@ -47,21 +48,21 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var UnknownBody = sdk.getComponent('messages.UnknownBody');
+        const UnknownBody = sdk.getComponent('messages.UnknownBody');
 
-        var bodyTypes = {
+        const bodyTypes = {
             'm.text': sdk.getComponent('messages.TextualBody'),
             'm.notice': sdk.getComponent('messages.TextualBody'),
             'm.emote': sdk.getComponent('messages.TextualBody'),
             'm.image': sdk.getComponent('messages.MImageBody'),
             'm.file': sdk.getComponent('messages.MFileBody'),
             'm.audio': sdk.getComponent('messages.MAudioBody'),
-            'm.video': sdk.getComponent('messages.MVideoBody')
+            'm.video': sdk.getComponent('messages.MVideoBody'),
         };
 
-        var content = this.props.mxEvent.getContent();
-        var msgtype = content.msgtype;
-        var BodyType = UnknownBody;
+        const content = this.props.mxEvent.getContent();
+        const msgtype = content.msgtype;
+        let BodyType = UnknownBody;
         if (msgtype && bodyTypes[msgtype]) {
             BodyType = bodyTypes[msgtype];
         } else if (content.url) {

src/components/views/messages/RoomAvatarEvent.js

@@ -0,0 +1,86 @@
+/*
+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 MatrixClientPeg from '../../../MatrixClientPeg';
+import { ContentRepo } from 'matrix-js-sdk';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import Modal from '../../../Modal';
+import AccessibleButton from '../elements/AccessibleButton';
+
+module.exports = React.createClass({
+    displayName: 'RoomAvatarEvent',
+
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+    },
+
+    onAvatarClick: function(name) {
+        const httpUrl = MatrixClientPeg.get().mxcUrlToHttp(this.props.mxEvent.getContent().url);
+        const ImageView = sdk.getComponent("elements.ImageView");
+        const params = {
+            src: httpUrl,
+            name: name,
+        };
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    },
+
+    render: function() {
+        const ev = this.props.mxEvent;
+        const senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+        const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+
+        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        const name = _t('%(senderDisplayName)s changed the avatar for %(roomName)s', {
+                senderDisplayName: senderDisplayName,
+                roomName: room ? room.name : '',
+        });
+
+        if (!ev.getContent().url || ev.getContent().url.trim().length === 0) {
+            return (
+                <div className="mx_TextualEvent">
+                    { _t('%(senderDisplayName)s removed the room avatar.', {senderDisplayName: senderDisplayName}) }
+                </div>
+            );
+        }
+
+        const url = ContentRepo.getHttpUriForMxc(
+                    MatrixClientPeg.get().getHomeserverUrl(),
+                    ev.getContent().url,
+                    Math.ceil(14 * window.devicePixelRatio),
+                    Math.ceil(14 * window.devicePixelRatio),
+                    'crop',
+                );
+
+        return (
+            <div className="mx_RoomAvatarEvent">
+                { _t('%(senderDisplayName)s changed the room avatar to <img/>',
+                    { senderDisplayName: senderDisplayName },
+                    {
+                        'img': () =>
+                            <AccessibleButton key="avatar" className="mx_RoomAvatarEvent_avatar"
+                                onClick={this.onAvatarClick.bind(this, name)}>
+                                <BaseAvatar width={14} height={14} url={url} name={name} />
+                            </AccessibleButton>,
+                    })
+                }
+            </div>
+        );
+    },
+});

src/components/views/messages/SenderProfile.js

@@ -17,26 +17,128 @@
 'use strict';
 
 import React from 'react';
+import PropTypes from 'prop-types';
+import {MatrixClient} from 'matrix-js-sdk';
 import sdk from '../../../index';
+import Flair from '../elements/Flair.js';
+import FlairStore from '../../../stores/FlairStore';
+import { _t } from '../../../languageHandler';
 
-export default function SenderProfile(props) {
-    const EmojiText = sdk.getComponent('elements.EmojiText');
-    const {mxEvent} = props;
-    const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
-    const {msgtype} = mxEvent.getContent();
+export default React.createClass({
+    displayName: 'SenderProfile',
+    propTypes: {
+        mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
+        text: PropTypes.string, // Text to show. Defaults to sender name
+        onClick: PropTypes.func,
+    },
 
-    if (msgtype === 'm.emote') {
-        return <span />; // emote message must include the name so don't duplicate it
-    }
+    contextTypes: {
+        matrixClient: PropTypes.instanceOf(MatrixClient),
+    },
 
-    return (
-        <EmojiText className="mx_SenderProfile"
-              onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
-    );
-}
+    getInitialState() {
+        return {
+            userGroups: null,
+            relatedGroups: [],
+        };
+    },
 
-SenderProfile.propTypes = {
-    mxEvent: React.PropTypes.object.isRequired, // event whose sender we're showing
-    aux: React.PropTypes.string, // stuff to go after the sender name, if anything
-    onClick: React.PropTypes.func,
-};
+    componentWillMount() {
+        this.unmounted = false;
+        this._updateRelatedGroups();
+
+        FlairStore.getPublicisedGroupsCached(
+            this.context.matrixClient, this.props.mxEvent.getSender(),
+        ).then((userGroups) => {
+            if (this.unmounted) return;
+            this.setState({userGroups});
+        });
+
+        this.context.matrixClient.on('RoomState.events', this.onRoomStateEvents);
+    },
+
+    componentWillUnmount() {
+        this.unmounted = true;
+        this.context.matrixClient.removeListener('RoomState.events', this.onRoomStateEvents);
+    },
+
+    onRoomStateEvents(event) {
+        if (event.getType() === 'm.room.related_groups' &&
+            event.getRoomId() === this.props.mxEvent.getRoomId()
+        ) {
+            this._updateRelatedGroups();
+        }
+    },
+
+    _updateRelatedGroups() {
+        if (this.unmounted) return;
+        const relatedGroupsEvent = this.context.matrixClient
+            .getRoom(this.props.mxEvent.getRoomId())
+            .currentState
+            .getStateEvents('m.room.related_groups', '');
+        this.setState({
+            relatedGroups: relatedGroupsEvent ?
+                relatedGroupsEvent.getContent().groups || []
+                : [],
+        });
+    },
+
+    _getDisplayedGroups(userGroups, relatedGroups) {
+        let displayedGroups = userGroups || [];
+        if (relatedGroups && relatedGroups.length > 0) {
+            displayedGroups = displayedGroups.filter((groupId) => {
+                return relatedGroups.includes(groupId);
+            });
+        } else {
+            displayedGroups = [];
+        }
+        return displayedGroups;
+    },
+
+    render() {
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+        const {mxEvent} = this.props;
+        let name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
+        const {msgtype} = mxEvent.getContent();
+
+        if (msgtype === 'm.emote') {
+            return <span />; // emote message must include the name so don't duplicate it
+        }
+
+        let flair = <div />;
+        if (this.props.enableFlair) {
+            const displayedGroups = this._getDisplayedGroups(
+                this.state.userGroups, this.state.relatedGroups,
+            );
+
+            // Backwards-compatible replacing of "(IRC)" with AS user flair
+            name = displayedGroups.length > 0 ? name.replace(' (IRC)', '') : name;
+
+            flair = <Flair key='flair'
+                userId={mxEvent.getSender()}
+                groups={displayedGroups}
+            />;
+        }
+
+        const nameElem = <EmojiText key='name'>{ name || '' }</EmojiText>;
+
+        // Name + flair
+        const nameFlair = <span>
+            <span className="mx_SenderProfile_name">
+                { nameElem }
+            </span>
+            { flair }
+        </span>;
+
+        const content = this.props.text ?
+            <span className="mx_SenderProfile_aux">
+                { _t(this.props.text, { senderName: () => nameElem }) }
+            </span> : nameFlair;
+
+        return (
+            <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
+                { content }
+            </div>
+        );
+    },
+});

src/components/views/messages/TextualBody.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.
@@ -16,17 +17,24 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var highlight = require('highlight.js');
-var HtmlUtils = require('../../../HtmlUtils');
-var linkify = require('linkifyjs');
-var linkifyElement = require('linkifyjs/element');
-var linkifyMatrix = require('../../../linkify-matrix');
-var sdk = require('../../../index');
-var ScalarAuthClient = require("../../../ScalarAuthClient");
-var Modal = require("../../../Modal");
-var SdkConfig = require('../../../SdkConfig');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import highlight from 'highlight.js';
+import * as HtmlUtils from '../../../HtmlUtils';
+import * as linkify from 'linkifyjs';
+import linkifyElement from 'linkifyjs/element';
+import linkifyMatrix from '../../../linkify-matrix';
+import sdk from '../../../index';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import Modal from '../../../Modal';
+import SdkConfig from '../../../SdkConfig';
+import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import ContextualMenu from '../../structures/ContextualMenu';
+import SettingsStore from "../../../settings/SettingsStore";
+import PushProcessor from 'matrix-js-sdk/lib/pushprocessor';
 
 linkifyMatrix(linkify);
 
@@ -35,19 +43,26 @@ module.exports = React.createClass({
 
     propTypes: {
         /* the MatrixEvent to show */
-        mxEvent: React.PropTypes.object.isRequired,
+        mxEvent: PropTypes.object.isRequired,
 
         /* a list of words to highlight */
-        highlights: React.PropTypes.array,
+        highlights: PropTypes.array,
 
         /* link URL for the highlights */
-        highlightLink: React.PropTypes.string,
+        highlightLink: PropTypes.string,
 
         /* should show URL previews for this event */
-        showUrlPreview: React.PropTypes.bool,
+        showUrlPreview: PropTypes.bool,
 
         /* callback for when our widget has loaded */
-        onWidgetLoad: React.PropTypes.func,
+        onWidgetLoad: PropTypes.func,
+
+        /* the shape of the tile, used */
+        tileShape: PropTypes.string,
+    },
+
+    contextTypes: {
+        addRichQuote: PropTypes.func,
     },
 
     getInitialState: function() {
@@ -61,9 +76,30 @@ module.exports = React.createClass({
         };
     },
 
+    copyToClipboard: function(text) {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+
+        let successful = false;
+        try {
+            successful = document.execCommand('copy');
+        } catch (err) {
+            console.log('Unable to copy');
+        }
+
+        document.body.removeChild(textArea);
+        return successful;
+    },
+
     componentDidMount: function() {
         this._unmounted = false;
 
+        // pillifyLinks BEFORE linkifyElement because plain room/user URLs in the composer
+        // are still sent as plaintext URLs. If these are ever pillified in the composer,
+        // we should be pillify them here by doing the linkifying BEFORE the pillifying.
+        this.pillifyLinks(this.refs.content.children);
         linkifyElement(this.refs.content, linkifyMatrix.options);
         this.calculateUrlPreview();
 
@@ -75,10 +111,22 @@ module.exports = React.createClass({
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < blocks.length; i++) {
-                        highlight.highlightBlock(blocks[i]);
+                        if (SettingsStore.getValue("enableSyntaxHighlightLanguageDetection")) {
+                            highlight.highlightBlock(blocks[i]);
+                        } else {
+                            // Only syntax highlight if there's a class starting with language-
+                            const classes = blocks[i].className.split(/\s+/).filter(function(cl) {
+                                return cl.startsWith('language-');
+                            });
+
+                            if (classes.length != 0) {
+                                highlight.highlightBlock(blocks[i]);
+                            }
+                        }
                     }
                 }, 10);
             }
+            this._addCodeCopyButton();
         }
     },
 
@@ -106,35 +154,148 @@ module.exports = React.createClass({
         //console.log("calculateUrlPreview: ShowUrlPreview for %s is %s", this.props.mxEvent.getId(), this.props.showUrlPreview);
 
         if (this.props.showUrlPreview && !this.state.links.length) {
-            var links = this.findLinks(this.refs.content.children);
+            let links = this.findLinks(this.refs.content.children);
             if (links.length) {
-                this.setState({ links: links.map((link)=>{
-                    return link.getAttribute("href");
-                })});
+                // de-dup the links (but preserve ordering)
+                const seen = new Set();
+                links = links.filter((link) => {
+                    if (seen.has(link)) return false;
+                    seen.add(link);
+                    return true;
+                });
+
+                this.setState({ links: links });
 
                 // lazy-load the hidden state of the preview widget from localstorage
                 if (global.localStorage) {
-                    var hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
+                    const hidden = global.localStorage.getItem("hide_preview_" + this.props.mxEvent.getId());
                     this.setState({ widgetHidden: hidden });
                 }
             }
         }
     },
 
-    findLinks: function(nodes) {
-        var links = [];
-        for (var i = 0; i < nodes.length; i++) {
-            var node = nodes[i];
-            if (node.tagName === "A" && node.getAttribute("href"))
-            {
-                if (this.isLinkPreviewable(node)) {
-                    links.push(node);
+    pillifyLinks: function(nodes) {
+        const shouldShowPillAvatar = !SettingsStore.getValue("Pill.shouldHidePillAvatar");
+        let node = nodes[0];
+        while (node) {
+            let pillified = false;
+
+            if (node.tagName === "A" && node.getAttribute("href")) {
+                const href = node.getAttribute("href");
+
+                // If the link is a (localised) matrix.to link, replace it with a pill
+                const Pill = sdk.getComponent('elements.Pill');
+                const Quote = sdk.getComponent('elements.Quote');
+                if (Pill.isMessagePillUrl(href)) {
+                    const pillContainer = document.createElement('span');
+
+                    const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                    const pill = <Pill
+                        url={href}
+                        inMessage={true}
+                        room={room}
+                        shouldShowPillAvatar={shouldShowPillAvatar}
+                    />;
+
+                    ReactDOM.render(pill, pillContainer);
+                    node.parentNode.replaceChild(pillContainer, node);
+                    // Pills within pills aren't going to go well, so move on
+                    pillified = true;
+
+                    // update the current node with one that's now taken its place
+                    node = pillContainer;
+                } else if (SettingsStore.isFeatureEnabled("feature_rich_quoting") && Quote.isMessageUrl(href)) {
+                    if (this.context.addRichQuote) { // We're already a Rich Quote so just append the next one above
+                        this.context.addRichQuote(href);
+                        node.remove();
+                    } else { // We're the first in the chain
+                        const quoteContainer = document.createElement('span');
+
+                        const quote =
+                            <Quote url={href} parentEv={this.props.mxEvent} node={node} />;
+
+                        ReactDOM.render(quote, quoteContainer);
+                        node.parentNode.replaceChild(quoteContainer, node);
+                        node = quoteContainer;
+                    }
+                    pillified = true;
+                }
+            } else if (node.nodeType == Node.TEXT_NODE) {
+                const Pill = sdk.getComponent('elements.Pill');
+
+                let currentTextNode = node;
+                const roomNotifTextNodes = [];
+
+                // Take a textNode and break it up to make all the instances of @room their
+                // own textNode, adding those nodes to roomNotifTextNodes
+                while (currentTextNode !== null) {
+                    const roomNotifPos = Pill.roomNotifPos(currentTextNode.textContent);
+                    let nextTextNode = null;
+                    if (roomNotifPos > -1) {
+                        let roomTextNode = currentTextNode;
+
+                        if (roomNotifPos > 0) roomTextNode = roomTextNode.splitText(roomNotifPos);
+                        if (roomTextNode.textContent.length > Pill.roomNotifLen()) {
+                            nextTextNode = roomTextNode.splitText(Pill.roomNotifLen());
+                        }
+                        roomNotifTextNodes.push(roomTextNode);
+                    }
+                    currentTextNode = nextTextNode;
+                }
+
+                if (roomNotifTextNodes.length > 0) {
+                    const pushProcessor = new PushProcessor(MatrixClientPeg.get());
+                    const atRoomRule = pushProcessor.getPushRuleById(".m.rule.roomnotif");
+                    if (atRoomRule && pushProcessor.ruleMatchesEvent(atRoomRule, this.props.mxEvent)) {
+                        // Now replace all those nodes with Pills
+                        for (const roomNotifTextNode of roomNotifTextNodes) {
+                            const pillContainer = document.createElement('span');
+                            const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+                            const pill = <Pill
+                                type={Pill.TYPE_AT_ROOM_MENTION}
+                                inMessage={true}
+                                room={room}
+                                shouldShowPillAvatar={true}
+                            />;
+
+                            ReactDOM.render(pill, pillContainer);
+                            roomNotifTextNode.parentNode.replaceChild(pillContainer, roomNotifTextNode);
+
+                            // Set the next node to be processed to the one after the node
+                            // we're adding now, since we've just inserted nodes into the structure
+                            // we're iterating over.
+                            // Note we've checked roomNotifTextNodes.length > 0 so we'll do this at least once
+                            node = roomNotifTextNode.nextSibling;
+                        }
+                        // Nothing else to do for a text node (and we don't need to advance
+                        // the loop pointer because we did it above)
+                        continue;
+                    }
                 }
             }
-            else if (node.tagName === "PRE" || node.tagName === "CODE") {
-                continue;
+
+            if (node.childNodes && node.childNodes.length && !pillified) {
+                this.pillifyLinks(node.childNodes);
             }
-            else if (node.children && node.children.length) {
+
+            node = node.nextSibling;
+        }
+    },
+
+    findLinks: function(nodes) {
+        let links = [];
+
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            if (node.tagName === "A" && node.getAttribute("href")) {
+                if (this.isLinkPreviewable(node)) {
+                    links.push(node.getAttribute("href"));
+                }
+            } else if (node.tagName === "PRE" || node.tagName === "CODE" ||
+                    node.tagName === "BLOCKQUOTE") {
+                continue;
+            } else if (node.children && node.children.length) {
                 links = links.concat(this.findLinks(node.children));
             }
         }
@@ -144,8 +305,7 @@ module.exports = React.createClass({
     isLinkPreviewable: function(node) {
         // don't try to preview relative links
         if (!node.getAttribute("href").startsWith("http://") &&
-            !node.getAttribute("href").startsWith("https://"))
-        {
+            !node.getAttribute("href").startsWith("https://")) {
             return false;
         }
 
@@ -154,13 +314,11 @@ module.exports = React.createClass({
         // or from a full foo.bar/baz style schemeless URL) - or be a markdown-style
         // link, in which case we check the target text differs from the link value.
         // TODO: make this configurable?
-        if (node.textContent.indexOf("/") > -1)
-        {
+        if (node.textContent.indexOf("/") > -1) {
             return true;
-        }
-        else {
-            var url = node.getAttribute("href");
-            var host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
+        } else {
+            const url = node.getAttribute("href");
+            const host = url.match(/^https?:\/\/(.*?)(\/|$)/)[1];
 
             // never preview matrix.to links (if anything we should give a smart
             // preview of the room/user they point to: nobody needs to be reminded
@@ -170,14 +328,40 @@ module.exports = React.createClass({
             if (node.textContent.toLowerCase().trim().startsWith(host.toLowerCase())) {
                 // it's a "foo.pl" style link
                 return false;
-            }
-            else {
+            } else {
                 // it's a [foo bar](http://foo.com) style link
                 return true;
             }
         }
     },
 
+    _addCodeCopyButton() {
+        // Add 'copy' buttons to pre blocks
+        ReactDOM.findDOMNode(this).querySelectorAll('.mx_EventTile_body pre').forEach((p) => {
+            const button = document.createElement("span");
+            button.className = "mx_EventTile_copyButton";
+            button.onclick = (e) => {
+                const copyCode = button.parentNode.getElementsByTagName("code")[0];
+                const successful = this.copyToClipboard(copyCode.textContent);
+
+                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'),
+                });
+                e.target.onmouseout = close;
+            };
+            p.appendChild(button);
+        });
+    },
+
     onCancelClick: function(event) {
         this.setState({ widgetHidden: true });
         // FIXME: persist this somewhere smarter than local storage
@@ -187,20 +371,31 @@ module.exports = React.createClass({
         this.forceUpdate();
     },
 
+    onEmoteSenderClick: function(event) {
+        const mxEvent = this.props.mxEvent;
+        dis.dispatch({
+            action: 'insert_mention',
+            user_id: mxEvent.getSender(),
+        });
+    },
+
     getEventTileOps: function() {
-        var self = this;
         return {
-            isWidgetHidden: function() {
-                return self.state.widgetHidden;
+            isWidgetHidden: () => {
+                return this.state.widgetHidden;
             },
 
-            unhideWidget: function() {
-                self.setState({ widgetHidden: false });
+            unhideWidget: () => {
+                this.setState({ widgetHidden: false });
                 if (global.localStorage) {
-                    global.localStorage.removeItem("hide_preview_" + self.props.mxEvent.getId());
+                    global.localStorage.removeItem("hide_preview_" + this.props.mxEvent.getId());
                 }
             },
-        }
+
+            getInnerText: () => {
+                return this.refs.content.innerText;
+            },
+        };
     },
 
     onStarterLinkClick: function(starterLink, ev) {
@@ -213,27 +408,28 @@ module.exports = React.createClass({
         // the window.open command occurs in the same stack frame as the onClick callback.
 
         // Go fetch a scalar token
-        let scalarClient = new ScalarAuthClient();
+        const scalarClient = new ScalarAuthClient();
         scalarClient.connect().then(() => {
-            let completeUrl = scalarClient.getStarterLink(starterLink);
-            let QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-            let integrationsUrl = SdkConfig.get().integrations_ui_url;
-            Modal.createDialog(QuestionDialog, {
-                title: "Add an Integration",
+            const completeUrl = scalarClient.getStarterLink(starterLink);
+            const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+            const integrationsUrl = SdkConfig.get().integrations_ui_url;
+            Modal.createTrackedDialog('Add an integration', '', QuestionDialog, {
+                title: _t("Add an Integration"),
                 description:
                     <div>
-                        You are about to taken to a third-party site so you can authenticate your account for use with {integrationsUrl}.<br/>
-                        Do you wish to continue?
+                        { _t("You are about to be taken to a third-party site so you can " +
+                            "authenticate your account for use with %(integrationsUrl)s. " +
+                            "Do you wish to continue?", { integrationsUrl: integrationsUrl }) }
                     </div>,
-                button: "Continue",
+                button: _t("Continue"),
                 onFinished: function(confirmed) {
                     if (!confirmed) {
                         return;
                     }
-                    let width  = window.screen.width  > 1024 ? 1024 : window.screen.width;
-                    let height = window.screen.height > 800  ? 800 : window.screen.height;
-                    let left = (window.screen.width - width) / 2;
-                    let top = (window.screen.height - height) / 2;
+                    const width = window.screen.width > 1024 ? 1024 : window.screen.width;
+                    const height = window.screen.height > 800 ? 800 : window.screen.height;
+                    const left = (window.screen.width - width) / 2;
+                    const top = (window.screen.height - height) / 2;
                     window.open(completeUrl, '_blank', `height=${height}, width=${width}, top=${top}, left=${left},`);
                 },
             });
@@ -242,28 +438,29 @@ module.exports = React.createClass({
 
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
-        var mxEvent = this.props.mxEvent;
-        var content = mxEvent.getContent();
+        const mxEvent = this.props.mxEvent;
+        const content = mxEvent.getContent();
 
-        var body = HtmlUtils.bodyToHtml(content, this.props.highlights, {});
+        let body = HtmlUtils.bodyToHtml(content, this.props.highlights, {
+            disableBigEmoji: SettingsStore.getValue('TextualBody.disableBigEmoji'),
+        });
 
         if (this.props.highlightLink) {
-            body = <a href={ this.props.highlightLink }>{ body }</a>;
-        }
-        else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
-            body = <a href="#" onClick={ this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"]) }>{ body }</a>;
+            body = <a href={this.props.highlightLink}>{ body }</a>;
+        } else if (content.data && typeof content.data["org.matrix.neb.starter_link"] === "string") {
+            body = <a href="#" onClick={this.onStarterLinkClick.bind(this, content.data["org.matrix.neb.starter_link"])}>{ body }</a>;
         }
 
-        var widgets;
+        let widgets;
         if (this.state.links.length && !this.state.widgetHidden && this.props.showUrlPreview) {
-            var LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
+            const LinkPreviewWidget = sdk.getComponent('rooms.LinkPreviewWidget');
             widgets = this.state.links.map((link)=>{
                 return <LinkPreviewWidget
-                            key={ link }
-                            link={ link }
-                            mxEvent={ this.props.mxEvent }
-                            onCancelClick={ this.onCancelClick }
-                            onWidgetLoad={ this.props.onWidgetLoad }/>;
+                            key={link}
+                            link={link}
+                            mxEvent={this.props.mxEvent}
+                            onCancelClick={this.onCancelClick}
+                            onWidgetLoad={this.props.onWidgetLoad} />;
             });
         }
 
@@ -272,7 +469,15 @@ module.exports = React.createClass({
                 const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
                 return (
                     <span ref="content" className="mx_MEmoteBody mx_EventTile_content">
-                        * <EmojiText>{name}</EmojiText> { body }
+                        *&nbsp;
+                        <EmojiText
+                            className="mx_MEmoteBody_sender"
+                            onClick={this.onEmoteSenderClick}
+                        >
+                            { name }
+                        </EmojiText>
+                        &nbsp;
+                        { body }
                         { widgets }
                     </span>
                 );

src/components/views/messages/TextualEvent.js

@@ -16,20 +16,26 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+const React = require('react');
+import PropTypes from 'prop-types';
 
-var TextForEvent = require('../../../TextForEvent');
+const TextForEvent = require('../../../TextForEvent');
 import sdk from '../../../index';
 
 module.exports = React.createClass({
     displayName: 'TextualEvent',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: PropTypes.object.isRequired,
+    },
+
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
-        var text = TextForEvent.textForEvent(this.props.mxEvent);
+        const text = TextForEvent.textForEvent(this.props.mxEvent);
         if (text == null || text.length === 0) return null;
         return (
-            <EmojiText element="div" className="mx_TextualEvent">{text}</EmojiText>
+            <EmojiText element="div" className="mx_TextualEvent">{ text }</EmojiText>
         );
     },
 });

src/components/views/messages/UnknownBody.js

@@ -16,16 +16,25 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UnknownBody',
 
     render: function() {
-        var content = this.props.mxEvent.getContent();
+        let tooltip = _t("Removed or unknown message type");
+        if (this.props.mxEvent.isRedacted()) {
+            const redactedBecauseUserId = this.props.mxEvent.getUnsigned().redacted_because.sender;
+            tooltip = redactedBecauseUserId ?
+                _t("Message removed by %(userId)s", { userId: redactedBecauseUserId }) :
+                _t("Message removed");
+        }
+
+        const text = this.props.mxEvent.getContent().body;
         return (
-            <span className="mx_UnknownBody">
-                {content.body}
+            <span className="mx_UnknownBody" title={tooltip}>
+                { text }
             </span>
         );
     },