Merge branch 'develop' of github.com:matrix-org/matrix-react-sdk into set_default_federate_by_settings

src/components/structures/CreateRoom.js

@@ -16,15 +16,15 @@ limitations under the License.
 
 'use strict';
 
-var React = require("react");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var PresetValues = {
+import React from 'react';
+import { _t } from '../../languageHandler';
+import sdk from '../../index';
+import MatrixClientPeg from '../../MatrixClientPeg';
+const PresetValues = {
     PrivateChat: "private_chat",
     PublicChat: "public_chat",
     Custom: "custom",
 };
-var q = require('q');
-var sdk = require('../../index');
 
 module.exports = React.createClass({
     displayName: 'CreateRoom',
@@ -231,7 +231,7 @@ module.exports = React.createClass({
             if (curr_phase == this.phases.ERROR) {
                 error_box = (
                     <div className="mx_Error">
-                        An error occured: {this.state.error_string}
+                        {_t('An error occurred: %(error_string)s', {error_string: this.state.error_string})}
                     </div>
                 );
             }
@@ -246,29 +246,29 @@ module.exports = React.createClass({
 
             return (
             <div className="mx_CreateRoom">
-                <SimpleRoomHeader title="CreateRoom" collapsedRhs={ this.props.collapsedRhs }/>
+                <SimpleRoomHeader title={_t("Create Room")} collapsedRhs={ this.props.collapsedRhs }/>
                 <div className="mx_CreateRoom_body">
-                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder="Name"/> <br />
-                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder="Topic"/> <br />
+                    <input type="text" ref="room_name" value={this.state.room_name} onChange={this.onNameChange} placeholder={_t('Name')}/> <br />
+                    <textarea className="mx_CreateRoom_description" ref="topic" value={this.state.topic} onChange={this.onTopicChange} placeholder={_t('Topic')}/> <br />
                     <RoomAlias ref="alias" alias={this.state.alias} homeserver={ domain } onChange={this.onAliasChanged}/> <br />
                     <UserSelector ref="user_selector" selected_users={this.state.invited_users} onChange={this.onInviteChanged}/> <br />
                     <Presets ref="presets" onChange={this.onPresetChanged} preset={this.state.preset}/> <br />
                     <div>
                         <label>
                             <input type="checkbox" ref="is_private" checked={this.state.is_private} onChange={this.onPrivateChanged}/>
-                            Make this room private
+                            {_t('Make this room private')}
                         </label>
                     </div>
                     <div>
                         <label>
                             <input type="checkbox" ref="share_history" checked={this.state.share_history} onChange={this.onShareHistoryChanged}/>
-                            Share message history with new users
+                            {_t('Share message history with new users')}
                         </label>
                     </div>
                     <div className="mx_CreateRoom_encrypt">
                         <label>
                             <input type="checkbox" ref="encrypt" checked={this.state.encrypt} onChange={this.onEncryptChanged}/>
-                            Encrypt room
+                            {_t('Encrypt room')}
                         </label>
                     </div>
                     <div>

src/components/structures/FilePanel.js

@@ -14,13 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ReactDOM = require("react-dom");
+import React from 'react';
 
-var Matrix = require("matrix-js-sdk");
-var sdk = require('../../index');
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var dis = require("../../dispatcher");
+import Matrix from 'matrix-js-sdk';
+import sdk from '../../index';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import { _t, _tJsx } from '../../languageHandler';
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -59,6 +58,8 @@ var FilePanel = React.createClass({
         var client = MatrixClientPeg.get();
         var room = client.getRoom(roomId);
 
+        this.noRoom = !room;
+
         if (room) {
             var filter = new Matrix.Filter(client.credentials.userId);
             filter.setDefinition(
@@ -82,13 +83,24 @@ var FilePanel = React.createClass({
                     console.error("Failed to get or create file panel filter", error);
                 }
             );
-        }
-        else {
+        } else {
             console.error("Failed to add filtered timelineSet for FilePanel as no room!");
         }
     },
 
     render: function() {
+        if (MatrixClientPeg.get().isGuest()) {
+            return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
+                <div className="mx_RoomView_empty">
+                {_tJsx("You must <a>register</a> to use this functionality", /<a>(.*?)<\/a>/, (sub) => <a href="#/register" key="sub">{sub}</a>)}
+                </div>
+            </div>;
+        } else if (this.noRoom) {
+            return <div className="mx_FilePanel mx_RoomView_messageListWrapper">
+                <div className="mx_RoomView_empty">{_t("You must join the room to see its files")}</div>
+            </div>;
+        }
+
         // wrap a TimelinePanel with the jump-to-event bits turned off.
         var TimelinePanel = sdk.getComponent("structures.TimelinePanel");
         var Loader = sdk.getComponent("elements.Spinner");
@@ -105,7 +117,7 @@ var FilePanel = React.createClass({
                     showUrlPreview = { false }
                     tileShape="file_grid"
                     opacity={ this.props.opacity }
-                    empty="There are no visible files in this room"
+                    empty={_t('There are no visible files in this room')}
                 />
             );
         }

src/components/structures/GroupView.js

@@ -0,0 +1,531 @@
+/*
+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 dis from '../../dispatcher';
+import { sanitizedHtmlNode } from '../../HtmlUtils';
+import { _t } from '../../languageHandler';
+import AccessibleButton from '../views/elements/AccessibleButton';
+import Modal from '../../Modal';
+import classnames from 'classnames';
+
+const RoomSummaryType = PropTypes.shape({
+    room_id: PropTypes.string.isRequired,
+    profile: PropTypes.shape({
+        name: PropTypes.string,
+        avatar_url: PropTypes.string,
+        canonical_alias: PropTypes.string,
+    }).isRequired,
+});
+
+const UserSummaryType = PropTypes.shape({
+    summaryInfo: PropTypes.shape({
+        user_id: PropTypes.string.isRequired,
+    }).isRequired,
+});
+
+const CategoryRoomList = React.createClass({
+    displayName: 'CategoryRoomList',
+
+    props: {
+        rooms: PropTypes.arrayOf(RoomSummaryType).isRequired,
+        category: PropTypes.shape({
+            profile: PropTypes.shape({
+                name: PropTypes.string,
+            }).isRequired,
+        }),
+    },
+
+    render: function() {
+        const roomNodes = this.props.rooms.map((r) => {
+            return <FeaturedRoom key={r.room_id} summaryInfo={r} />;
+        });
+        let catHeader = null;
+        if (this.props.category && this.props.category.profile) {
+            catHeader = <div className="mx_GroupView_featuredThings_category">{this.props.category.profile.name}</div>;
+        }
+        return <div>
+            {catHeader}
+            {roomNodes}
+        </div>;
+    },
+});
+
+const FeaturedRoom = React.createClass({
+    displayName: 'FeaturedRoom',
+
+    props: {
+        summaryInfo: RoomSummaryType.isRequired,
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        dis.dispatch({
+            action: 'view_room',
+            room_alias: this.props.summaryInfo.profile.canonical_alias,
+            room_id: this.props.summaryInfo.room_id,
+        });
+    },
+
+    render: function() {
+        const RoomAvatar = sdk.getComponent("avatars.RoomAvatar");
+
+        const oobData = {
+            roomId: this.props.summaryInfo.room_id,
+            avatarUrl: this.props.summaryInfo.profile.avatar_url,
+            name: this.props.summaryInfo.profile.name,
+        };
+        let permalink = null;
+        if (this.props.summaryInfo.profile && this.props.summaryInfo.profile.canonical_alias) {
+            permalink = 'https://matrix.to/#/' + this.props.summaryInfo.profile.canonical_alias;
+        }
+        let roomNameNode = null;
+        if (permalink) {
+            roomNameNode = <a href={permalink} onClick={this.onClick} >{this.props.summaryInfo.profile.name}</a>;
+        } else {
+            roomNameNode = <span>{this.props.summaryInfo.profile.name}</span>;
+        }
+
+        return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
+            <RoomAvatar oobData={oobData} width={64} height={64} />
+            <div className="mx_GroupView_featuredThing_name">{roomNameNode}</div>
+        </AccessibleButton>;
+    },
+});
+
+const RoleUserList = React.createClass({
+    displayName: 'RoleUserList',
+
+    props: {
+        users: PropTypes.arrayOf(UserSummaryType).isRequired,
+        role: PropTypes.shape({
+            profile: PropTypes.shape({
+                name: PropTypes.string,
+            }).isRequired,
+        }),
+    },
+
+    render: function() {
+        const userNodes = this.props.users.map((u) => {
+            return <FeaturedUser key={u.user_id} summaryInfo={u} />;
+        });
+        let roleHeader = null;
+        if (this.props.role && this.props.role.profile) {
+            roleHeader = <div className="mx_GroupView_featuredThings_category">{this.props.role.profile.name}</div>;
+        }
+        return <div>
+            {roleHeader}
+            {userNodes}
+        </div>;
+    },
+});
+
+const FeaturedUser = React.createClass({
+    displayName: 'FeaturedUser',
+
+    props: {
+        summaryInfo: UserSummaryType.isRequired,
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        e.stopPropagation();
+
+        dis.dispatch({
+            action: 'view_start_chat_or_reuse',
+            user_id: this.props.summaryInfo.user_id,
+            go_home_on_cancel: false,
+        });
+    },
+
+    render: function() {
+        // Add avatar once we get profile info inline in the summary response
+        //const BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+
+        const permalink = 'https://matrix.to/#/' + this.props.summaryInfo.user_id;
+        const userNameNode = <a href={permalink} onClick={this.onClick} >{this.props.summaryInfo.user_id}</a>;
+
+        return <AccessibleButton className="mx_GroupView_featuredThing" onClick={this.onClick}>
+            <div className="mx_GroupView_featuredThing_name">{userNameNode}</div>
+        </AccessibleButton>;
+    },
+});
+
+export default React.createClass({
+    displayName: 'GroupView',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            summary: null,
+            error: null,
+            editing: false,
+            saving: false,
+            uploadingAvatar: false,
+        };
+    },
+
+    componentWillMount: function() {
+        this._changeAvatarComponent = null;
+        this._loadGroupFromServer(this.props.groupId);
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        if (this.props.groupId != newProps.groupId) {
+            this.setState({
+                summary: null,
+                error: null,
+            }, () => {
+                this._loadGroupFromServer(newProps.groupId);
+            });
+        }
+    },
+
+    _loadGroupFromServer: function(groupId) {
+        MatrixClientPeg.get().getGroupSummary(groupId).done((res) => {
+            this.setState({
+                summary: res,
+                error: null,
+            });
+        }, (err) => {
+            this.setState({
+                summary: null,
+                error: err,
+            });
+        });
+    },
+
+    _onEditClick: function() {
+        this.setState({
+            editing: true,
+            profileForm: Object.assign({}, this.state.summary.profile),
+        });
+    },
+
+    _onCancelClick: function() {
+        this.setState({
+            editing: false,
+            profileForm: null,
+        });
+    },
+
+    _onNameChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { name: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
+    _onShortDescChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { short_description: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
+    _onLongDescChange: function(e) {
+        const newProfileForm = Object.assign(this.state.profileForm, { long_description: e.target.value });
+        this.setState({
+            profileForm: newProfileForm,
+        });
+    },
+
+    _onAvatarSelected: function(ev) {
+        const file = ev.target.files[0];
+        if (!file) return;
+
+        this.setState({uploadingAvatar: true});
+        MatrixClientPeg.get().uploadContent(file).then((url) => {
+            const newProfileForm = Object.assign(this.state.profileForm, { avatar_url: url });
+            this.setState({
+                uploadingAvatar: false,
+                profileForm: newProfileForm,
+            });
+        }).catch((e) => {
+            this.setState({uploadingAvatar: false});
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to upload avatar image", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to upload image'),
+            });
+        }).done();
+    },
+
+    _onSaveClick: function() {
+        this.setState({saving: true});
+        MatrixClientPeg.get().setGroupProfile(this.props.groupId, this.state.profileForm).then((result) => {
+            this.setState({
+                saving: false,
+                editing: false,
+                summary: null,
+            });
+            this._loadGroupFromServer(this.props.groupId);
+        }).catch((e) => {
+            this.setState({
+                saving: false,
+            });
+            const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+            console.error("Failed to save group profile", e);
+            Modal.createDialog(ErrorDialog, {
+                title: _t('Error'),
+                description: _t('Failed to update group'),
+            });
+        }).done();
+    },
+
+    _getFeaturedRoomsNode() {
+        const summary = this.state.summary;
+
+        if (summary.rooms_section.rooms.length == 0) return null;
+
+        const defaultCategoryRooms = [];
+        const categoryRooms = {};
+        summary.rooms_section.rooms.forEach((r) => {
+            if (r.category_id === null) {
+                defaultCategoryRooms.push(r);
+            } else {
+                let list = categoryRooms[r.category_id];
+                if (list === undefined) {
+                    list = [];
+                    categoryRooms[r.category_id] = list;
+                }
+                list.push(r);
+            }
+        });
+
+        let defaultCategoryNode = null;
+        if (defaultCategoryRooms.length > 0) {
+            defaultCategoryNode = <CategoryRoomList rooms={defaultCategoryRooms} />;
+        }
+        const categoryRoomNodes = Object.keys(categoryRooms).map((catId) => {
+            const cat = summary.rooms_section.categories[catId];
+            return <CategoryRoomList key={catId} rooms={categoryRooms[catId]} category={cat} />;
+        });
+
+        return <div className="mx_GroupView_featuredThings">
+            <div className="mx_GroupView_featuredThings_header">
+                {_t('Featured Rooms:')}
+            </div>
+            {defaultCategoryNode}
+            {categoryRoomNodes}
+        </div>;
+    },
+
+    _getFeaturedUsersNode() {
+        const summary = this.state.summary;
+
+        if (summary.users_section.users.length == 0) return null;
+
+        const noRoleUsers = [];
+        const roleUsers = {};
+        summary.users_section.users.forEach((u) => {
+            if (u.role_id === null) {
+                noRoleUsers.push(u);
+            } else {
+                let list = roleUsers[u.role_id];
+                if (list === undefined) {
+                    list = [];
+                    roleUsers[u.role_id] = list;
+                }
+                list.push(u);
+            }
+        });
+
+        let noRoleNode = null;
+        if (noRoleUsers.length > 0) {
+            noRoleNode = <RoleUserList users={noRoleUsers} />;
+        }
+        const roleUserNodes = Object.keys(roleUsers).map((roleId) => {
+            const role = summary.users_section.roles[roleId];
+            return <RoleUserList key={roleId} users={roleUsers[roleId]} role={role} />;
+        });
+
+        return <div className="mx_GroupView_featuredThings">
+            <div className="mx_GroupView_featuredThings_header">
+                {_t('Featured Users:')}
+            </div>
+            {noRoleNode}
+            {roleUserNodes}
+        </div>;
+    },
+
+    render: function() {
+        const GroupAvatar = sdk.getComponent("avatars.GroupAvatar");
+        const Loader = sdk.getComponent("elements.Spinner");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        if (this.state.summary === null && this.state.error === null || this.state.saving) {
+            return <Loader />;
+        } else if (this.state.summary) {
+            const summary = this.state.summary;
+
+            let avatarNode;
+            let nameNode;
+            let shortDescNode;
+            let rightButtons;
+            let roomBody;
+            const headerClasses = {
+                mx_GroupView_header: true,
+            };
+            if (this.state.editing) {
+                let avatarImage;
+                if (this.state.uploadingAvatar) {
+                    avatarImage = <Loader />;
+                } else {
+                    const GroupAvatar = sdk.getComponent('avatars.GroupAvatar');
+                    avatarImage = <GroupAvatar groupId={this.props.groupId}
+                        groupAvatarUrl={this.state.profileForm.avatar_url}
+                        width={48} height={48} resizeMethod='crop'
+                    />;
+                }
+
+                avatarNode = (
+                    <div className="mx_GroupView_avatarPicker">
+                        <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
+                            {avatarImage}
+                        </label>
+                        <div className="mx_GroupView_avatarPicker_edit">
+                            <label htmlFor="avatarInput" className="mx_GroupView_avatarPicker_label">
+                                <img src="img/camera.svg"
+                                    alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
+                                    width="17" height="15" />
+                            </label>
+                            <input id="avatarInput" className="mx_GroupView_uploadInput" type="file" onChange={this._onAvatarSelected}/>
+                        </div>
+                    </div>
+                );
+                nameNode = <input type="text"
+                    value={this.state.profileForm.name}
+                    onChange={this._onNameChange}
+                    placeholder={_t('Group Name')}
+                    tabIndex="1"
+                />;
+                shortDescNode = <input type="text"
+                    value={this.state.profileForm.short_description}
+                    onChange={this._onShortDescChange}
+                    placeholder={_t('Description')}
+                    tabIndex="2"
+                />;
+                rightButtons = <span>
+                    <AccessibleButton className="mx_GroupView_saveButton mx_RoomHeader_textButton" onClick={this._onSaveClick}>
+                        {_t('Save')}
+                    </AccessibleButton>
+                    <AccessibleButton className='mx_GroupView_cancelButton' onClick={this._onCancelClick}>
+                        <img src="img/cancel.svg" className='mx_filterFlipColor'
+                            width="18" height="18" alt={_t("Cancel")}/>
+                    </AccessibleButton>
+                </span>;
+                roomBody = <div>
+                    <textarea className="mx_GroupView_editLongDesc" value={this.state.profileForm.long_description}
+                        onChange={this._onLongDescChange}
+                        tabIndex="3"
+                    />
+                </div>;
+            } else {
+                const groupAvatarUrl = summary.profile ? summary.profile.avatar_url : null;
+                avatarNode = <GroupAvatar
+                    groupId={this.props.groupId}
+                    groupAvatarUrl={groupAvatarUrl}
+                    width={48} height={48}
+                />;
+                if (summary.profile && summary.profile.name) {
+                    nameNode = <div>
+                        <span>{summary.profile.name}</span>
+                        <span className="mx_GroupView_header_groupid">
+                            ({this.props.groupId})
+                        </span>
+                    </div>;
+                } else {
+                    nameNode = <span>{this.props.groupId}</span>;
+                }
+                shortDescNode = <span>{summary.profile.short_description}</span>;
+
+                let description = null;
+                if (summary.profile && summary.profile.long_description) {
+                    description = sanitizedHtmlNode(summary.profile.long_description);
+                }
+                roomBody = <div>
+                    <div className="mx_GroupView_groupDesc">{description}</div>
+                    {this._getFeaturedRoomsNode()}
+                    {this._getFeaturedUsersNode()}
+                </div>;
+                // disabled until editing works
+                rightButtons = <AccessibleButton className="mx_GroupHeader_button"
+                    onClick={this._onEditClick} title={_t("Edit Group")}
+                >
+                    <TintableSvg src="img/icons-settings-room.svg" width="16" height="16"/>
+                </AccessibleButton>;
+
+                headerClasses.mx_GroupView_header_view = true;
+            }
+
+            return (
+                <div className="mx_GroupView">
+                    <div className={classnames(headerClasses)}>
+                        <div className="mx_GroupView_header_leftCol">
+                            <div className="mx_GroupView_header_avatar">
+                                {avatarNode}
+                            </div>
+                            <div className="mx_GroupView_header_info">
+                                <div className="mx_GroupView_header_name">
+                                    {nameNode}
+                                </div>
+                                <div className="mx_GroupView_header_shortDesc">
+                                    {shortDescNode}
+                                </div>
+                            </div>
+                        </div>
+                        <div className="mx_GroupView_header_rightCol">
+                            {rightButtons}
+                        </div>
+                    </div>
+                    {roomBody}
+                </div>
+            );
+        } else if (this.state.error) {
+            if (this.state.error.httpStatus === 404) {
+                return (
+                    <div className="mx_GroupView_error">
+                        Group {this.props.groupId} not found
+                    </div>
+                );
+            } else {
+                let extraText;
+                if (this.state.error.errcode === 'M_UNRECOGNIZED') {
+                    extraText = <div>{_t('This Home server does not support groups')}</div>;
+                }
+                return (
+                    <div className="mx_GroupView_error">
+                        Failed to load {this.props.groupId}
+                        {extraText}
+                    </div>
+                );
+            }
+        } else {
+            console.error("Invalid state for GroupView");
+            return <div />;
+        }
+    },
+});

src/components/structures/InteractiveAuth.js

@@ -19,8 +19,6 @@ const InteractiveAuth = Matrix.InteractiveAuth;
 
 import React from 'react';
 
-import sdk from '../../index';
-
 import {getEntryComponentForLoginType} from '../views/login/InteractiveAuthEntryComponents';
 
 export default React.createClass({

src/components/structures/LoggedInView.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.
@@ -17,11 +18,15 @@ limitations under the License.
 import * as Matrix from 'matrix-js-sdk';
 import React from 'react';
 
+import UserSettingsStore from '../../UserSettingsStore';
 import KeyCode from '../../KeyCode';
 import Notifier from '../../Notifier';
 import PageTypes from '../../PageTypes';
+import CallMediaHandler from '../../CallMediaHandler';
 import sdk from '../../index';
 import dis from '../../dispatcher';
+import sessionStore from '../../stores/SessionStore';
+import MatrixClientPeg from '../../MatrixClientPeg';
 
 /**
  * This is what our MatrixChat shows when we are logged in. The precise view is
@@ -38,10 +43,13 @@ export default React.createClass({
     propTypes: {
         matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
         page_type: React.PropTypes.string.isRequired,
-        onRoomIdResolved: React.PropTypes.func,
         onRoomCreated: React.PropTypes.func,
         onUserSettingsClose: React.PropTypes.func,
 
+        // Called with the credentials of a registered user (if they were a ROU that
+        // transitioned to PWLU)
+        onRegistered: React.PropTypes.func,
+
         teamToken: React.PropTypes.string,
 
         // and lots and lots of other stuff.
@@ -62,6 +70,13 @@ export default React.createClass({
         };
     },
 
+    getInitialState: function() {
+        return {
+            // use compact timeline view
+            useCompactLayout: UserSettingsStore.getSyncedSetting('useCompactLayout'),
+        };
+    },
+
     componentWillMount: function() {
         // stash the MatrixClient in case we log out before we are unmounted
         this._matrixClient = this.props.matrixClient;
@@ -70,11 +85,35 @@ export default React.createClass({
         // RoomView.getScrollState()
         this._scrollStateMap = {};
 
+        CallMediaHandler.loadDevices();
+
         document.addEventListener('keydown', this._onKeyDown);
+
+        this._sessionStore = sessionStore;
+        this._sessionStoreToken = this._sessionStore.addListener(
+            this._setStateFromSessionStore,
+        );
+        this._setStateFromSessionStore();
+
+        this._matrixClient.on("accountData", this.onAccountData);
     },
 
     componentWillUnmount: function() {
         document.removeEventListener('keydown', this._onKeyDown);
+        this._matrixClient.removeListener("accountData", this.onAccountData);
+        if (this._sessionStoreToken) {
+            this._sessionStoreToken.remove();
+        }
+    },
+
+    // Child components assume that the client peg will not be null, so give them some
+    // sort of assurance here by only allowing a re-render if the client is truthy.
+    //
+    // This is required because `LoggedInView` maintains its own state and if this state
+    // updates after the client peg has been made null (during logout), then it will
+    // attempt to re-render and the children will throw errors.
+    shouldComponentUpdate: function() {
+        return Boolean(MatrixClientPeg.get());
     },
 
     getScrollStateForRoom: function(roomId) {
@@ -88,6 +127,20 @@ export default React.createClass({
         return this.refs.roomView.canResetTimeline();
     },
 
+    _setStateFromSessionStore() {
+        this.setState({
+            userHasGeneratedPassword: Boolean(this._sessionStore.getCachedPassword()),
+        });
+    },
+
+    onAccountData: function(event) {
+        if (event.getType() === "im.vector.web.settings") {
+            this.setState({
+                useCompactLayout: event.getContent().useCompactLayout,
+            });
+        }
+    },
+
     _onKeyDown: function(ev) {
             /*
             // Remove this for now as ctrl+alt = alt-gr so this breaks keyboards which rely on alt-gr for numbers
@@ -103,13 +156,20 @@ export default React.createClass({
             }
             */
 
-        var handled = false;
+        let handled = false;
+        const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
+        let ctrlCmdOnly;
+        if (isMac) {
+            ctrlCmdOnly = ev.metaKey && !ev.altKey && !ev.ctrlKey && !ev.shiftKey;
+        } else {
+            ctrlCmdOnly = ev.ctrlKey && !ev.altKey && !ev.metaKey && !ev.shiftKey;
+        }
 
         switch (ev.keyCode) {
             case KeyCode.UP:
             case KeyCode.DOWN:
-                if (ev.altKey) {
-                    var action = ev.keyCode == KeyCode.UP ?
+                if (ev.altKey && !ev.shiftKey && !ev.ctrlKey && !ev.metaKey) {
+                    let action = ev.keyCode == KeyCode.UP ?
                         'view_prev_room' : 'view_next_room';
                     dis.dispatch({action: action});
                     handled = true;
@@ -118,17 +178,27 @@ export default React.createClass({
 
             case KeyCode.PAGE_UP:
             case KeyCode.PAGE_DOWN:
-                this._onScrollKeyPressed(ev);
-                handled = true;
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    this._onScrollKeyPressed(ev);
+                    handled = true;
+                }
                 break;
 
             case KeyCode.HOME:
             case KeyCode.END:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this._onScrollKeyPressed(ev);
                     handled = true;
                 }
                 break;
+            case KeyCode.KEY_K:
+                if (ctrlCmdOnly) {
+                    dis.dispatch({
+                        action: 'focus_room_filter',
+                    });
+                    handled = true;
+                }
+                break;
         }
 
         if (handled) {
@@ -142,54 +212,60 @@ export default React.createClass({
         if (this.refs.roomView) {
             this.refs.roomView.handleScrollKey(ev);
         }
+        else if (this.refs.roomDirectory) {
+            this.refs.roomDirectory.handleScrollKey(ev);
+        }
     },
 
     render: function() {
-        var LeftPanel = sdk.getComponent('structures.LeftPanel');
-        var RightPanel = sdk.getComponent('structures.RightPanel');
-        var RoomView = sdk.getComponent('structures.RoomView');
-        var UserSettings = sdk.getComponent('structures.UserSettings');
-        var CreateRoom = sdk.getComponent('structures.CreateRoom');
-        var RoomDirectory = sdk.getComponent('structures.RoomDirectory');
-        var HomePage = sdk.getComponent('structures.HomePage');
-        var MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
-        var GuestWarningBar = sdk.getComponent('globals.GuestWarningBar');
-        var NewVersionBar = sdk.getComponent('globals.NewVersionBar');
+        const LeftPanel = sdk.getComponent('structures.LeftPanel');
+        const RightPanel = sdk.getComponent('structures.RightPanel');
+        const RoomView = sdk.getComponent('structures.RoomView');
+        const UserSettings = sdk.getComponent('structures.UserSettings');
+        const CreateRoom = sdk.getComponent('structures.CreateRoom');
+        const RoomDirectory = sdk.getComponent('structures.RoomDirectory');
+        const HomePage = sdk.getComponent('structures.HomePage');
+        const GroupView = sdk.getComponent('structures.GroupView');
+        const MyGroups = sdk.getComponent('structures.MyGroups');
+        const MatrixToolbar = sdk.getComponent('globals.MatrixToolbar');
+        const NewVersionBar = sdk.getComponent('globals.NewVersionBar');
+        const UpdateCheckBar = sdk.getComponent('globals.UpdateCheckBar');
+        const PasswordNagBar = sdk.getComponent('globals.PasswordNagBar');
 
-        var page_element;
-        var right_panel = '';
+        let page_element;
+        let right_panel = '';
 
         switch (this.props.page_type) {
             case PageTypes.RoomView:
                 page_element = <RoomView
                         ref='roomView'
-                        roomAddress={this.props.currentRoomAlias || this.props.currentRoomId}
                         autoJoin={this.props.autoJoin}
-                        onRoomIdResolved={this.props.onRoomIdResolved}
-                        eventId={this.props.initialEventId}
+                        onRegistered={this.props.onRegistered}
                         thirdPartyInvite={this.props.thirdPartyInvite}
                         oobData={this.props.roomOobData}
-                        highlightedEventId={this.props.highlightedEventId}
                         eventPixelOffset={this.props.initialEventPixelOffset}
-                        key={this.props.currentRoomAlias || this.props.currentRoomId}
+                        key={this.props.currentRoomId || 'roomview'}
                         opacity={this.props.middleOpacity}
                         collapsedRhs={this.props.collapse_rhs}
                         ConferenceHandler={this.props.ConferenceHandler}
                         scrollStateMap={this._scrollStateMap}
                     />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.sideOpacity} />;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel roomId={this.props.currentRoomId} opacity={this.props.rightOpacity} />;
                 break;
 
             case PageTypes.UserSettings:
                 page_element = <UserSettings
                     onClose={this.props.onUserSettingsClose}
                     brand={this.props.config.brand}
-                    collapsedRhs={this.props.collapse_rhs}
                     enableLabs={this.props.config.enableLabs}
                     referralBaseUrl={this.props.config.referralBaseUrl}
                     teamToken={this.props.teamToken}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
+                break;
+
+            case PageTypes.MyGroups:
+                page_element = <MyGroups />;
                 break;
 
             case PageTypes.CreateRoom:
@@ -197,42 +273,55 @@ export default React.createClass({
                     onRoomCreated={this.props.onRoomCreated}
                     collapsedRhs={this.props.collapse_rhs}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
+                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.rightOpacity}/>;
                 break;
 
             case PageTypes.RoomDirectory:
                 page_element = <RoomDirectory
-                    collapsedRhs={this.props.collapse_rhs}
+                    ref="roomDirectory"
                     config={this.props.config.roomDirectory}
                 />;
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>;
                 break;
 
             case PageTypes.HomePage:
-                page_element = <HomePage
-                    collapsedRhs={this.props.collapse_rhs}
-                    teamServerUrl={this.props.config.teamServerConfig.teamServerURL}
-                    teamToken={this.props.teamToken}
-                />
-                if (!this.props.collapse_rhs) right_panel = <RightPanel opacity={this.props.sideOpacity}/>
+                {
+                    // If team server config is present, pass the teamServerURL. props.teamToken
+                    // must also be set for the team page to be displayed, otherwise the
+                    // welcomePageUrl is used (which might be undefined).
+                    const teamServerUrl = this.props.config.teamServerConfig ?
+                        this.props.config.teamServerConfig.teamServerURL : null;
+
+                    page_element = <HomePage
+                        teamServerUrl={teamServerUrl}
+                        teamToken={this.props.teamToken}
+                        homePageUrl={this.props.config.welcomePageUrl}
+                    />;
+                }
                 break;
 
             case PageTypes.UserView:
                 page_element = null; // deliberately null for now
-                right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.sideOpacity} />;
+                right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.rightOpacity} />;
+                break;
+            case PageTypes.GroupView:
+                page_element = <GroupView
+                    groupId={this.props.currentGroupId}
+                />;
+                //right_panel = <RightPanel userId={this.props.viewUserId} opacity={this.props.rightOpacity} />;
                 break;
         }
 
-        var topBar;
+        let topBar;
+        const isGuest = this.props.matrixClient.isGuest();
         if (this.props.hasNewVersion) {
             topBar = <NewVersionBar version={this.props.version} newVersion={this.props.newVersion}
-                releaseNotes={this.props.newVersionReleaseNotes}
+                                    releaseNotes={this.props.newVersionReleaseNotes}
             />;
-        }
-        else if (this.props.matrixClient.isGuest()) {
-            topBar = <GuestWarningBar />;
-        }
-        else if (Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
+        } else if (this.props.checkingForUpdate) {
+            topBar = <UpdateCheckBar {...this.props.checkingForUpdate} />;
+        } else if (this.state.userHasGeneratedPassword) {
+            topBar = <PasswordNagBar />;
+        } else if (!isGuest && Notifier.supportsDesktopNotifications() && !Notifier.isEnabled() && !Notifier.isToolbarHidden()) {
             topBar = <MatrixToolbar />;
         }
 
@@ -240,6 +329,9 @@ export default React.createClass({
         if (topBar) {
             bodyClasses += ' mx_MatrixChat_toolbarShowing';
         }
+        if (this.state.useCompactLayout) {
+            bodyClasses += ' mx_MatrixChat_useCompactLayout';
+        }
 
         return (
             <div className='mx_MatrixChat_wrapper'>
@@ -248,8 +340,7 @@ export default React.createClass({
                     <LeftPanel
                         selectedRoom={this.props.currentRoomId}
                         collapsed={this.props.collapse_lhs || false}
-                        opacity={this.props.sideOpacity}
-                        teamToken={this.props.teamToken}
+                        opacity={this.props.leftOpacity}
                     />
                     <main className='mx_MatrixChat_middlePanel'>
                         {page_element}

src/components/structures/MessagePanel.js

@@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var ReactDOM = require("react-dom");
-var dis = require("../../dispatcher");
-var sdk = require('../../index');
+import React from 'react';
+import ReactDOM from 'react-dom';
+import UserSettingsStore from '../../UserSettingsStore';
+import shouldHideEvent from '../../shouldHideEvent';
+import dis from "../../dispatcher";
+import sdk from '../../index';
 
-var MatrixClientPeg = require('../../MatrixClientPeg');
+import MatrixClientPeg from '../../MatrixClientPeg';
 
 const MILLIS_IN_DAY = 86400000;
 
@@ -84,6 +86,12 @@ module.exports = React.createClass({
 
         // shape parameter to be passed to EventTiles
         tileShape: React.PropTypes.string,
+
+        // show twelve hour timestamps
+        isTwelveHour: React.PropTypes.bool,
+
+        // show timestamps always
+        alwaysShowTimestamps: React.PropTypes.bool,
     },
 
     componentWillMount: function() {
@@ -104,6 +112,8 @@ module.exports = React.createClass({
         // Velocity requires
         this._readMarkerGhostNode = null;
 
+        this._syncedSettings = UserSettingsStore.getSyncedSettings();
+
         this._isMounted = true;
     },
 
@@ -229,9 +239,21 @@ module.exports = React.createClass({
         return !this._isMounted;
     },
 
+    // TODO: Implement granular (per-room) hide options
+    _shouldShowEvent: function(mxEv) {
+        const EventTile = sdk.getComponent('rooms.EventTile');
+        if (!EventTile.haveTileForEvent(mxEv)) {
+            return false; // no tile = no show
+        }
+
+        // Always show highlighted event
+        if (this.props.highlightedEventId === mxEv.getId()) return true;
+
+        return !shouldHideEvent(mxEv, this._syncedSettings);
+    },
+
     _getEventTiles: function() {
-        var EventTile = sdk.getComponent('rooms.EventTile');
-        var DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
 
         this.eventNodes = {};
@@ -240,20 +262,21 @@ module.exports = React.createClass({
 
         // first figure out which is the last event in the list which we're
         // actually going to show; this allows us to behave slightly
-        // differently for the last event in the list.
+        // differently for the last event in the list. (eg show timestamp)
         //
         // we also need to figure out which is the last event we show which isn't
         // a local echo, to manage the read-marker.
-        var lastShownEventIndex = -1;
+        let lastShownEvent;
+
         var lastShownNonLocalEchoIndex = -1;
         for (i = this.props.events.length-1; i >= 0; i--) {
             var mxEv = this.props.events[i];
-            if (!EventTile.haveTileForEvent(mxEv)) {
+            if (!this._shouldShowEvent(mxEv)) {
                 continue;
             }
 
-            if (lastShownEventIndex < 0) {
-                lastShownEventIndex = i;
+            if (lastShownEvent === undefined) {
+                lastShownEvent = mxEv;
             }
 
             if (mxEv.status) {
@@ -279,26 +302,18 @@ module.exports = React.createClass({
             this.currentGhostEventId = null;
         }
 
-        var isMembershipChange = (e) =>
-            e.getType() === 'm.room.member'
-            && (!e.getPrevContent() || e.getContent().membership !== e.getPrevContent().membership);
+        const isMembershipChange = (e) => e.getType() === 'm.room.member';
 
         for (i = 0; i < this.props.events.length; i++) {
-            var mxEv = this.props.events[i];
-            var wantTile = true;
-            var eventId = mxEv.getId();
+            let mxEv = this.props.events[i];
+            let eventId = mxEv.getId();
+            let readMarkerInMels = false;
+            let last = (mxEv === lastShownEvent);
 
-            if (!EventTile.haveTileForEvent(mxEv)) {
-                wantTile = false;
-            }
-
-            var last = (i == lastShownEventIndex);
+            const wantTile = this._shouldShowEvent(mxEv);
 
             // Wrap consecutive member events in a ListSummary, ignore if redacted
-            if (isMembershipChange(mxEv) &&
-                EventTile.haveTileForEvent(mxEv) &&
-                !mxEv.isRedacted()
-            ) {
+            if (isMembershipChange(mxEv) && wantTile) {
                 let ts1 = mxEv.getTs();
                 // Ensure that the key of the MemberEventListSummary does not change with new
                 // member events. This will prevent it from being re-created unnecessarily, and
@@ -311,38 +326,42 @@ module.exports = React.createClass({
                 const key = "membereventlistsummary-" + (prevEvent ? mxEv.getId() : "initial");
 
                 if (this._wantsDateSeparator(prevEvent, mxEv.getDate())) {
-                    let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1}/></li>;
+                    let dateSeparator = <li key={ts1+'~'}><DateSeparator key={ts1+'~'} ts={ts1} showTwelveHour={this.props.isTwelveHour}/></li>;
                     ret.push(dateSeparator);
                 }
 
                 let summarisedEvents = [mxEv];
                 for (;i + 1 < this.props.events.length; i++) {
-                    let collapsedMxEv = this.props.events[i + 1];
-
-                    // Ignore redacted member events
-                    if (!EventTile.haveTileForEvent(collapsedMxEv)) {
-                        continue;
-                    }
+                    const collapsedMxEv = this.props.events[i + 1];
 
                     if (!isMembershipChange(collapsedMxEv) ||
                         this._wantsDateSeparator(this.props.events[i], collapsedMxEv.getDate())) {
                         break;
                     }
+
+                    // If RM event is in MELS mark it as such and the RM will be appended after MELS.
+                    if (collapsedMxEv.getId() === this.props.readMarkerEventId) {
+                        readMarkerInMels = true;
+                    }
+
+                    // Ignore redacted/hidden member events
+                    if (!this._shouldShowEvent(collapsedMxEv)) {
+                        continue;
+                    }
+
                     summarisedEvents.push(collapsedMxEv);
                 }
-                // At this point, i = the index of the last event in the summary sequence
 
-                let eventTiles = summarisedEvents.map(
-                    (e) => {
-                        // In order to prevent DateSeparators from appearing in the expanded form
-                        // of MemberEventListSummary, render each member event as if the previous
-                        // one was itself. This way, the timestamp of the previous event === the
-                        // timestamp of the current event, and no DateSeperator is inserted.
-                        let ret = this._getTilesForEvent(e, e);
-                        prevEvent = e;
-                        return ret;
-                    }
-                ).reduce((a, b) => a.concat(b));
+                // At this point, i = the index of the last event in the summary sequence
+                let eventTiles = summarisedEvents.map((e) => {
+                    // In order to prevent DateSeparators from appearing in the expanded form
+                    // of MemberEventListSummary, render each member event as if the previous
+                    // one was itself. This way, the timestamp of the previous event === the
+                    // timestamp of the current event, and no DateSeperator is inserted.
+                    const ret = this._getTilesForEvent(e, e, e === lastShownEvent);
+                    prevEvent = e;
+                    return ret;
+                }).reduce((a, b) => a.concat(b));
 
                 if (eventTiles.length === 0) {
                     eventTiles = null;
@@ -352,12 +371,16 @@ module.exports = React.createClass({
                     <MemberEventListSummary
                         key={key}
                         events={summarisedEvents}
-                        data-scroll-token={eventId}
                         onToggle={this._onWidgetLoad} // Update scroll state
                     >
                             {eventTiles}
                     </MemberEventListSummary>
                 );
+
+                if (readMarkerInMels) {
+                    ret.push(this._getReadMarkerTile(visible));
+                }
+
                 continue;
             }
 
@@ -388,6 +411,8 @@ module.exports = React.createClass({
                 isVisibleReadMarker = visible;
             }
 
+            // XXX: there should be no need for a ghost tile - we should just use a
+            // a dispatch (user_activity_end) to start the RM animation.
             if (eventId == this.currentGhostEventId) {
                 // if we're showing an animation, continue to show it.
                 ret.push(this._getReadMarkerGhostTile());
@@ -405,8 +430,8 @@ module.exports = React.createClass({
     },
 
     _getTilesForEvent: function(prevEvent, mxEv, last) {
-        var EventTile = sdk.getComponent('rooms.EventTile');
-        var DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventTile = sdk.getComponent('rooms.EventTile');
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
         var ret = [];
 
         // is this a continuation of the previous message?
@@ -444,7 +469,7 @@ module.exports = React.createClass({
 
         // do we need a date separator since the last event?
         if (this._wantsDateSeparator(prevEvent, eventDate)) {
-            var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1}/></li>;
+            var dateSeparator = <li key={ts1}><DateSeparator key={ts1} ts={ts1} showTwelveHour={this.props.isTwelveHour}/></li>;
             ret.push(dateSeparator);
             continuation = false;
         }
@@ -460,11 +485,10 @@ module.exports = React.createClass({
         if (this.props.manageReadReceipts) {
             readReceipts = this._getReadReceiptsForEvent(mxEv);
         }
-
         ret.push(
                 <li key={eventId}
                         ref={this._collectEventNode.bind(this, eventId)}
-                        data-scroll-token={scrollToken}>
+                        data-scroll-tokens={scrollToken}>
                     <EventTile mxEvent={mxEv} continuation={continuation}
                         isRedacted={mxEv.isRedacted()}
                         onWidgetLoad={this._onWidgetLoad}
@@ -474,6 +498,7 @@ module.exports = React.createClass({
                         checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.status}
                         tileShape={this.props.tileShape}
+                        isTwelveHour={this.props.isTwelveHour}
                         last={last} isSelectedEvent={highlight}/>
                 </li>
         );
@@ -607,8 +632,13 @@ module.exports = React.createClass({
         var style = this.props.hidden ? { display: 'none' } : {};
         style.opacity = this.props.opacity;
 
+        var className = this.props.className + " mx_fadable";
+        if (this.props.alwaysShowTimestamps) {
+            className += " mx_MessagePanel_alwaysShowTimestamps";
+        }
+
         return (
-            <ScrollPanel ref="scrollPanel" className={ this.props.className + " mx_fadable" }
+            <ScrollPanel ref="scrollPanel" className={ className }
                     onScroll={ this.props.onScroll }
                     onResize={ this.onResize }
                     onFillRequest={ this.props.onFillRequest }

src/components/structures/MyGroups.js

@@ -0,0 +1,141 @@
+/*
+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, _tJsx } from '../../languageHandler';
+import withMatrixClient from '../../wrappers/withMatrixClient';
+import AccessibleButton from '../views/elements/AccessibleButton';
+import dis from '../../dispatcher';
+import PropTypes from 'prop-types';
+import Modal from '../../Modal';
+
+const GroupTile = React.createClass({
+    displayName: 'GroupTile',
+
+    propTypes: {
+        groupId: PropTypes.string.isRequired,
+    },
+
+    onClick: function(e) {
+        e.preventDefault();
+        dis.dispatch({
+            action: 'view_group',
+            group_id: this.props.groupId,
+        });
+    },
+
+    render: function() {
+        return <a onClick={this.onClick} href="#">{this.props.groupId}</a>;
+    },
+});
+
+export default withMatrixClient(React.createClass({
+    displayName: 'MyGroups',
+
+    propTypes: {
+        matrixClient: React.PropTypes.object.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            groups: null,
+            error: null,
+        };
+    },
+
+    componentWillMount: function() {
+        this._fetch();
+    },
+
+    _onCreateGroupClick: function() {
+        const CreateGroupDialog = sdk.getComponent("dialogs.CreateGroupDialog");
+        Modal.createDialog(CreateGroupDialog);
+    },
+
+    _fetch: function() {
+        this.props.matrixClient.getJoinedGroups().done((result) => {
+            this.setState({groups: result.groups, error: null});
+        }, (err) => {
+            this.setState({groups: null, error: err});
+        });
+    },
+
+    render: function() {
+        const Loader = sdk.getComponent("elements.Spinner");
+        const SimpleRoomHeader = sdk.getComponent('rooms.SimpleRoomHeader');
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+
+        let content;
+        if (this.state.groups) {
+            const groupNodes = [];
+            this.state.groups.forEach((g) => {
+                groupNodes.push(
+                    <div key={g}>
+                        <GroupTile groupId={g} />
+                    </div>,
+                );
+            });
+            content = <div>
+                <div>{_t('You are a member of these groups:')}</div>
+                {groupNodes}
+            </div>;
+        } else if (this.state.error) {
+            content = <div className="mx_MyGroups_error">
+                {_t('Error whilst fetching joined groups')}
+            </div>;
+        } else {
+            content = <Loader />;
+        }
+
+        return <div className="mx_MyGroups">
+            <SimpleRoomHeader title={ _t("Groups") } />
+            <div className='mx_MyGroups_joinCreateBox'>
+                <div className="mx_MyGroups_createBox">
+                    <div className="mx_MyGroups_joinCreateHeader">
+                        {_t('Create a new group')}
+                    </div>
+                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onCreateGroupClick}>
+                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                    </AccessibleButton>
+                    {_t(
+                        'Create a group to represent your community! '+
+                        'Define a set of rooms and your own custom homepage '+
+                        'to mark out your space in the Matrix universe.',
+                    )}
+                </div>
+                <div className="mx_MyGroups_joinBox">
+                    <div className="mx_MyGroups_joinCreateHeader">
+                        {_t('Join an existing group')}
+                    </div>
+                    <AccessibleButton className='mx_MyGroups_joinCreateButton' onClick={this._onJoinGroupClick}>
+                        <TintableSvg src="img/icons-create-room.svg" width="50" height="50" />
+                    </AccessibleButton>
+                    {_tJsx(
+                        'To join an exisitng group you\'ll have to '+
+                        'know its group identifier; this will look '+
+                        'something like <i>+example:matrix.org</i>.',
+                        /<i>(.*)<\/i>/,
+                        (sub) => <i>{sub}</i>,
+                    )}
+                </div>
+            </div>
+            <div className="mx_MyGroups_content">
+                {content}
+            </div>
+        </div>;
+    },
+}));

src/components/structures/NotificationPanel.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 var React = require('react');
 var ReactDOM = require("react-dom");
-
+import { _t } from '../../languageHandler';
 var Matrix = require("matrix-js-sdk");
 var sdk = require('../../index');
 var MatrixClientPeg = require("../../MatrixClientPeg");
@@ -37,7 +37,6 @@ var NotificationPanel = React.createClass({
         var Loader = sdk.getComponent("elements.Spinner");
 
         var timelineSet = MatrixClientPeg.get().getNotifTimelineSet();
-
         if (timelineSet) {
             return (
                 <TimelinePanel key={"NotificationPanel_" + this.props.roomId}
@@ -48,7 +47,7 @@ var NotificationPanel = React.createClass({
                     showUrlPreview = { false }
                     opacity={ this.props.opacity }
                     tileShape="notif"
-                    empty="You have no visible notifications"
+                    empty={ _t('You have no visible notifications') }
                 />
             );
         }

src/components/structures/RoomStatusBar.js

@@ -14,12 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var sdk = require('../../index');
-var dis = require("../../dispatcher");
-var WhoIsTyping = require("../../WhoIsTyping");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-const MemberAvatar = require("../views/avatars/MemberAvatar");
+import React from 'react';
+import { _t, _tJsx } from '../../languageHandler';
+import sdk from '../../index';
+import WhoIsTyping from '../../WhoIsTyping';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import MemberAvatar from '../views/avatars/MemberAvatar';
 
 const HIDE_DEBOUNCE_MS = 10000;
 const STATUS_BAR_HIDDEN = 0;
@@ -33,9 +33,6 @@ module.exports = React.createClass({
         // the room this statusbar is representing.
         room: React.PropTypes.object.isRequired,
 
-        // a TabComplete object
-        tabComplete: React.PropTypes.object.isRequired,
-
         // the number of messages which have arrived since we've been scrolled up
         numUnreadMessages: React.PropTypes.number,
 
@@ -143,12 +140,9 @@ module.exports = React.createClass({
             (this.state.usersTyping.length > 0) ||
             this.props.numUnreadMessages ||
             !this.props.atEndOfLiveTimeline ||
-            this.props.hasActiveCall ||
-            this.props.tabComplete.isTabCompleting()
+            this.props.hasActiveCall
         ) {
             return STATUS_BAR_EXPANDED;
-        } else if (this.props.tabCompleteEntries) {
-            return STATUS_BAR_HIDDEN;
         } else if (this.props.unsentMessageError) {
             return STATUS_BAR_EXPANDED_LARGE;
         }
@@ -175,8 +169,8 @@ module.exports = React.createClass({
                 <div className="mx_RoomStatusBar_scrollDownIndicator"
                         onClick={ this.props.onScrollToBottomClick }>
                     <img src="img/scrolldown.svg" width="24" height="24"
-                        alt="Scroll to bottom of page"
-                        title="Scroll to bottom of page"/>
+                        alt={ _t("Scroll to bottom of page") }
+                        title={ _t("Scroll to bottom of page") }/>
                 </div>
             );
         }
@@ -237,8 +231,6 @@ module.exports = React.createClass({
 
     // return suitable content for the main (text) part of the status bar.
     _getContent: function() {
-        var TabCompleteBar = sdk.getComponent('rooms.TabCompleteBar');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
         const EmojiText = sdk.getComponent('elements.EmojiText');
 
         // no conn bar trumps unread count since you can't get unread messages
@@ -250,24 +242,10 @@ module.exports = React.createClass({
                 <div className="mx_RoomStatusBar_connectionLostBar">
                     <img src="img/warning.svg" width="24" height="23" title="/!\ " alt="/!\ "/>
                     <div className="mx_RoomStatusBar_connectionLostBar_title">
-                        Connectivity to the server has been lost.
+                        {_t('Connectivity to the server has been lost.')}
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                        Sent messages will be stored until your connection has returned.
-                    </div>
-                </div>
-            );
-        }
-
-        if (this.props.tabComplete.isTabCompleting()) {
-            return (
-                <div className="mx_RoomStatusBar_tabCompleteBar">
-                    <div className="mx_RoomStatusBar_tabCompleteWrapper">
-                        <TabCompleteBar tabComplete={this.props.tabComplete} />
-                        <div className="mx_RoomStatusBar_tabCompleteEol" title="->|">
-                            <TintableSvg src="img/eol.svg" width="22" height="16"/>
-                            Auto-complete
-                        </div>
+                        {_t('Sent messages will be stored until your connection has returned.')}
                     </div>
                 </div>
             );
@@ -281,15 +259,13 @@ module.exports = React.createClass({
                         { this.props.unsentMessageError }
                     </div>
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
-                        <a className="mx_RoomStatusBar_resend_link"
-                          onClick={ this.props.onResendAllClick }>
-                            Resend all
-                        </a> or <a
-                          className="mx_RoomStatusBar_resend_link"
-                          onClick={ this.props.onCancelAllClick }>
-                            cancel all
-                        </a> now. You can also select individual messages to
-                        resend or cancel.
+                    {_tJsx("<a>Resend all</a> or <a>cancel all</a> now. You can also select individual messages to resend or cancel.",
+                        [/<a>(.*?)<\/a>/, /<a>(.*?)<\/a>/],
+                        [
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="resend" onClick={ this.props.onResendAllClick }>{sub}</a>,
+                            (sub) => <a className="mx_RoomStatusBar_resend_link" key="cancel" onClick={ this.props.onCancelAllClick }>{sub}</a>,
+                        ]
+                    )}
                     </div>
                 </div>
             );
@@ -298,8 +274,8 @@ module.exports = React.createClass({
         // unread count trumps who is typing since the unread count is only
         // set when you've scrolled up
         if (this.props.numUnreadMessages) {
-            var unreadMsgs = this.props.numUnreadMessages + " new message" +
-                (this.props.numUnreadMessages > 1 ? "s" : "");
+            // MUST use var name "count" for pluralization to kick in
+            var unreadMsgs = _t("%(count)s new messages", {count: this.props.numUnreadMessages});
 
             return (
                 <div className="mx_RoomStatusBar_unreadMessagesBar"
@@ -324,7 +300,7 @@ module.exports = React.createClass({
         if (this.props.hasActiveCall) {
             return (
                 <div className="mx_RoomStatusBar_callBar">
-                    <b>Active call</b>
+                    <b>{_t('Active call')}</b>
                 </div>
             );
         }

src/components/structures/ScrollPanel.js

@@ -17,7 +17,7 @@ limitations under the License.
 var React = require("react");
 var ReactDOM = require("react-dom");
 var GeminiScrollbar = require('react-gemini-scrollbar');
-var q = require("q");
+import Promise from 'bluebird';
 var KeyCode = require('../../KeyCode');
 
 var DEBUG_SCROLL = false;
@@ -46,9 +46,13 @@ if (DEBUG_SCROLL) {
  * It also provides a hook which allows parents to provide more list elements
  * when we get close to the start or end of the list.
  *
- * Each child element should have a 'data-scroll-token'. This token is used to
- * serialise the scroll state, and returned as the 'trackedScrollToken'
- * attribute by getScrollState().
+ * Each child element should have a 'data-scroll-tokens'. This string of
+ * comma-separated tokens may contain a single token or many, where many indicates
+ * that the element contains elements that have scroll tokens themselves. The first
+ * token in 'data-scroll-tokens' is used to serialise the scroll state, and returned
+ * as the 'trackedScrollToken' attribute by getScrollState().
+ *
+ * IMPORTANT: INDIVIDUAL TOKENS WITHIN 'data-scroll-tokens' MUST NOT CONTAIN COMMAS.
  *
  * Some notes about the implementation:
  *
@@ -141,7 +145,7 @@ module.exports = React.createClass({
         return {
             stickyBottom: true,
             startAtBottom: true,
-            onFillRequest: function(backwards) { return q(false); },
+            onFillRequest: function(backwards) { return Promise.resolve(false); },
             onUnfillRequest: function(backwards, scrollToken) {},
             onScroll: function() {},
         };
@@ -348,13 +352,14 @@ module.exports = React.createClass({
             const tile = tiles[backwards ? i : tiles.length - 1 - i];
             // Subtract height of tile as if it were unpaginated
             excessHeight -= tile.clientHeight;
-            // The tile may not have a scroll token, so guard it
-            if (tile.dataset.scrollToken) {
-                markerScrollToken = tile.dataset.scrollToken;
-            }
+            //If removing the tile would lead to future pagination, break before setting scroll token
             if (tile.clientHeight > excessHeight) {
                 break;
             }
+            // The tile may not have a scroll token, so guard it
+            if (tile.dataset.scrollTokens) {
+                markerScrollToken = tile.dataset.scrollTokens.split(',')[0];
+            }
         }
 
         if (markerScrollToken) {
@@ -381,19 +386,12 @@ module.exports = React.createClass({
         debuglog("ScrollPanel: starting "+dir+" fill");
 
         // onFillRequest can end up calling us recursively (via onScroll
-        // events) so make sure we set this before firing off the call. That
-        // does present the risk that we might not ever actually fire off the
-        // fill request, so wrap it in a try/catch.
+        // events) so make sure we set this before firing off the call.
         this._pendingFillRequests[dir] = true;
-        var fillPromise;
-        try {
-            fillPromise = this.props.onFillRequest(backwards);
-        } catch (e) {
-            this._pendingFillRequests[dir] = false;
-            throw e;
-        }
 
-        q.finally(fillPromise, () => {
+        Promise.try(() => {
+            return this.props.onFillRequest(backwards);
+        }).finally(() => {
             this._pendingFillRequests[dir] = false;
         }).then((hasMoreResults) => {
             if (this.unmounted) {
@@ -419,7 +417,8 @@ module.exports = React.createClass({
      *   scroll. false if we are tracking a particular child.
      *
      * string trackedScrollToken: undefined if stuckAtBottom is true; if it is
-     *   false, the data-scroll-token of the child which we are tracking.
+     *   false, the first token in data-scroll-tokens of the child which we are
+     *   tracking.
      *
      * number pixelOffset: undefined if stuckAtBottom is true; if it is false,
      *   the number of pixels the bottom of the tracked child is above the
@@ -483,21 +482,25 @@ module.exports = React.createClass({
     handleScrollKey: function(ev) {
         switch (ev.keyCode) {
             case KeyCode.PAGE_UP:
-                this.scrollRelative(-1);
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    this.scrollRelative(-1);
+                }
                 break;
 
             case KeyCode.PAGE_DOWN:
-                this.scrollRelative(1);
+                if (!ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
+                    this.scrollRelative(1);
+                }
                 break;
 
             case KeyCode.HOME:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollToTop();
                 }
                 break;
 
             case KeyCode.END:
-                if (ev.ctrlKey) {
+                if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey) {
                     this.scrollToBottom();
                 }
                 break;
@@ -547,8 +550,10 @@ module.exports = React.createClass({
         var messages = this.refs.itemlist.children;
         for (var i = messages.length-1; i >= 0; --i) {
             var m = messages[i];
-            if (!m.dataset.scrollToken) continue;
-            if (m.dataset.scrollToken == scrollToken) {
+            // 'data-scroll-tokens' is a DOMString of comma-separated scroll tokens
+            // There might only be one scroll token
+            if (m.dataset.scrollTokens &&
+                m.dataset.scrollTokens.split(',').indexOf(scrollToken) !== -1) {
                 node = m;
                 break;
             }
@@ -564,7 +569,7 @@ module.exports = React.createClass({
         var boundingRect = node.getBoundingClientRect();
         var scrollDelta = boundingRect.bottom + pixelOffset - wrapperRect.bottom;
 
-        debuglog("ScrollPanel: scrolling to token '" + node.dataset.scrollToken + "'+" +
+        debuglog("ScrollPanel: scrolling to token '" + scrollToken + "'+" +
                  pixelOffset + " (delta: "+scrollDelta+")");
 
         if(scrollDelta != 0) {
@@ -587,12 +592,12 @@ module.exports = React.createClass({
 
         for (var i = messages.length-1; i >= 0; --i) {
             var node = messages[i];
-            if (!node.dataset.scrollToken) continue;
+            if (!node.dataset.scrollTokens) continue;
 
             var boundingRect = node.getBoundingClientRect();
             newScrollState = {
                 stuckAtBottom: false,
-                trackedScrollToken: node.dataset.scrollToken,
+                trackedScrollToken: node.dataset.scrollTokens.split(',')[0],
                 pixelOffset: wrapperRect.bottom - boundingRect.bottom,
             };
             // If the bottom of the panel intersects the ClientRect of node, use this node
@@ -604,7 +609,7 @@ module.exports = React.createClass({
                 break;
             }
         }
-        // This is only false if there were no nodes with `node.dataset.scrollToken` set.
+        // This is only false if there were no nodes with `node.dataset.scrollTokens` set.
         if (newScrollState) {
             this.scrollState = newScrollState;
             debuglog("ScrollPanel: saved scroll state", this.scrollState);

src/components/structures/TimelinePanel.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.
@@ -16,18 +17,20 @@ limitations under the License.
 
 var React = require('react');
 var ReactDOM = require("react-dom");
-var q = require("q");
+import Promise from 'bluebird';
 
 var Matrix = require("matrix-js-sdk");
 var EventTimeline = Matrix.EventTimeline;
 
 var sdk = require('../../index');
+import { _t } from '../../languageHandler';
 var MatrixClientPeg = require("../../MatrixClientPeg");
 var dis = require("../../dispatcher");
 var ObjectUtils = require('../../ObjectUtils');
 var Modal = require("../../Modal");
 var UserActivity = require("../../UserActivity");
 var KeyCode = require('../../KeyCode');
+import UserSettingsStore from '../../UserSettingsStore';
 
 var PAGINATE_SIZE = 20;
 var INITIAL_SIZE = 20;
@@ -102,9 +105,6 @@ var TimelinePanel = React.createClass({
     },
 
     statics: {
-        // a map from room id to read marker event ID
-        roomReadMarkerMap: {},
-
         // a map from room id to read marker event timestamp
         roomReadMarkerTsMap: {},
     },
@@ -121,12 +121,18 @@ var TimelinePanel = React.createClass({
     getInitialState: function() {
         // XXX: we could track RM per TimelineSet rather than per Room.
         // but for now we just do it per room for simplicity.
+        let initialReadMarker = null;
         if (this.props.manageReadMarkers) {
-            var initialReadMarker =
-                TimelinePanel.roomReadMarkerMap[this.props.timelineSet.room.roomId]
-                           || this._getCurrentReadReceipt();
+            const readmarker = this.props.timelineSet.room.getAccountData('m.fully_read');
+            if (readmarker) {
+                initialReadMarker = readmarker.getContent().event_id;
+            } else {
+                initialReadMarker = this._getCurrentReadReceipt();
+            }
         }
 
+        const syncedSettings = UserSettingsStore.getSyncedSettings();
+
         return {
             events: [],
             timelineLoading: true, // track whether our room timeline is loading
@@ -166,13 +172,23 @@ var TimelinePanel = React.createClass({
 
             backPaginating: false,
             forwardPaginating: false,
+
+            // cache of matrixClient.getSyncState() (but from the 'sync' event)
+            clientSyncState: MatrixClientPeg.get().getSyncState(),
+
+            // should the event tiles have twelve hour times
+            isTwelveHour: syncedSettings.showTwelveHourTimestamps,
+
+            // always show timestamps on event tiles?
+            alwaysShowTimestamps: syncedSettings.alwaysShowTimestamps,
         };
     },
 
     componentWillMount: function() {
         debuglog("TimelinePanel: mounting");
 
-        this.last_rr_sent_event_id = undefined;
+        this.lastRRSentEventId = undefined;
+        this.lastRMSentEventId = undefined;
 
         this.dispatcherRef = dis.register(this.onAction);
         MatrixClientPeg.get().on("Room.timeline", this.onRoomTimeline);
@@ -180,6 +196,8 @@ var TimelinePanel = React.createClass({
         MatrixClientPeg.get().on("Room.redaction", this.onRoomRedaction);
         MatrixClientPeg.get().on("Room.receipt", this.onRoomReceipt);
         MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated);
+        MatrixClientPeg.get().on("Room.accountData", this.onAccountData);
+        MatrixClientPeg.get().on("sync", this.onSync);
 
         this._initTimeline(this.props);
     },
@@ -247,6 +265,8 @@ var TimelinePanel = React.createClass({
             client.removeListener("Room.redaction", this.onRoomRedaction);
             client.removeListener("Room.receipt", this.onRoomReceipt);
             client.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated);
+            client.removeListener("Room.accountData", this.onAccountData);
+            client.removeListener("sync", this.onSync);
         }
     },
 
@@ -288,13 +308,13 @@ var TimelinePanel = React.createClass({
 
         if (!this.state[canPaginateKey]) {
             debuglog("TimelinePanel: have given up", dir, "paginating this timeline");
-            return q(false);
+            return Promise.resolve(false);
         }
 
         if(!this._timelineWindow.canPaginate(dir)) {
             debuglog("TimelinePanel: can't", dir, "paginate any further");
             this.setState({[canPaginateKey]: false});
-            return q(false);
+            return Promise.resolve(false);
         }
 
         debuglog("TimelinePanel: Initiating paginate; backwards:"+backwards);
@@ -327,9 +347,9 @@ var TimelinePanel = React.createClass({
         });
     },
 
-    onMessageListScroll: function() {
+    onMessageListScroll: function(e) {
         if (this.props.onScroll) {
-            this.props.onScroll();
+            this.props.onScroll(e);
         }
 
         if (this.props.manageReadMarkers) {
@@ -414,6 +434,7 @@ var TimelinePanel = React.createClass({
                 } else if(lastEv && this.getReadMarkerPosition() === 0) {
                     // we know we're stuckAtBottom, so we can advance the RM
                     // immediately, to save a later render cycle
+
                     this._setReadMarker(lastEv.getId(), lastEv.getTs(), true);
                     updatedState.readMarkerVisible = false;
                     updatedState.readMarkerEventId = lastEv.getId();
@@ -466,6 +487,25 @@ var TimelinePanel = React.createClass({
         this._reloadEvents();
     },
 
+    onAccountData: function(ev, room) {
+        if (this.unmounted) return;
+
+        // ignore events for other rooms
+        if (room !== this.props.timelineSet.room) return;
+
+        if (ev.getType() !== "m.fully_read") return;
+
+        // XXX: roomReadMarkerTsMap not updated here so it is now inconsistent. Replace
+        // this mechanism of determining where the RM is relative to the view-port with
+        // one supported by the server (the client needs more than an event ID).
+        this.setState({
+            readMarkerEventId: ev.getContent().event_id,
+        }, this.props.onReadMarkerUpdated);
+    },
+
+    onSync: function(state, prevState, data) {
+        this.setState({clientSyncState: state});
+    },
 
     sendReadReceipt: function() {
         if (!this.refs.messagePanel) return;
@@ -473,11 +513,14 @@ var TimelinePanel = React.createClass({
         // This happens on user_activity_end which is delayed, and it's
         // very possible have logged out within that timeframe, so check
         // we still have a client.
-        if (!MatrixClientPeg.get()) return;
+        const cli = MatrixClientPeg.get();
+        // if no client or client is guest don't send RR or RM
+        if (!cli || cli.isGuest()) return;
 
-        var currentReadUpToEventId = this._getCurrentReadReceipt(true);
-        var currentReadUpToEventIndex = this._indexForEventId(currentReadUpToEventId);
+        let shouldSendRR = true;
 
+        const currentRREventId = this._getCurrentReadReceipt(true);
+        const currentRREventIndex = this._indexForEventId(currentRREventId);
         // We want to avoid sending out read receipts when we are looking at
         // events in the past which are before the latest RR.
         //
@@ -491,26 +534,60 @@ var TimelinePanel = React.createClass({
         // RRs) - but that is a bit of a niche case. It will sort itself out when
         // the user eventually hits the live timeline.
         //
-        if (currentReadUpToEventId && currentReadUpToEventIndex === null &&
+        if (currentRREventId && currentRREventIndex === null &&
                 this._timelineWindow.canPaginate(EventTimeline.FORWARDS)) {
-            return;
+            shouldSendRR = false;
         }
 
-        var lastReadEventIndex = this._getLastDisplayedEventIndex({
-            ignoreOwn: true
+        const lastReadEventIndex = this._getLastDisplayedEventIndex({
+            ignoreOwn: true,
         });
-        if (lastReadEventIndex === null) return;
+        if (lastReadEventIndex === null) {
+            shouldSendRR = false;
+        }
+        let lastReadEvent = this.state.events[lastReadEventIndex];
+        shouldSendRR = shouldSendRR &&
+            // Only send a RR if the last read event is ahead in the timeline relative to
+            // the current RR event.
+            lastReadEventIndex > currentRREventIndex &&
+            // Only send a RR if the last RR set != the one we would send
+            this.lastRRSentEventId != lastReadEvent.getId();
 
-        var lastReadEvent = this.state.events[lastReadEventIndex];
+        // Only send a RM if the last RM sent != the one we would send
+        const shouldSendRM =
+            this.lastRMSentEventId != this.state.readMarkerEventId;
 
         // we also remember the last read receipt we sent to avoid spamming the
         // same one at the server repeatedly
-        if (lastReadEventIndex > currentReadUpToEventIndex
-                && this.last_rr_sent_event_id != lastReadEvent.getId()) {
-            this.last_rr_sent_event_id = lastReadEvent.getId();
-            MatrixClientPeg.get().sendReadReceipt(lastReadEvent).catch(() => {
+        if (shouldSendRR || shouldSendRM) {
+            if (shouldSendRR) {
+                this.lastRRSentEventId = lastReadEvent.getId();
+            } else {
+                lastReadEvent = null;
+            }
+            this.lastRMSentEventId = this.state.readMarkerEventId;
+
+            debuglog('TimelinePanel: Sending Read Markers for ',
+                this.props.timelineSet.room.roomId,
+                'rm', this.state.readMarkerEventId,
+                lastReadEvent ? 'rr ' + lastReadEvent.getId() : '',
+            );
+            MatrixClientPeg.get().setRoomReadMarkers(
+                this.props.timelineSet.room.roomId,
+                this.state.readMarkerEventId,
+                lastReadEvent, // Could be null, in which case no RR is sent
+            ).catch((e) => {
+                // /read_markers API is not implemented on this HS, fallback to just RR
+                if (e.errcode === 'M_UNRECOGNIZED' && lastReadEvent) {
+                    return MatrixClientPeg.get().sendReadReceipt(
+                        lastReadEvent,
+                    ).catch(() => {
+                        this.lastRRSentEventId = undefined;
+                    });
+                }
                 // it failed, so allow retries next time the user is active
-                this.last_rr_sent_event_id = undefined;
+                this.lastRRSentEventId = undefined;
+                this.lastRMSentEventId = undefined;
             });
 
             // do a quick-reset of our unreadNotificationCount to avoid having
@@ -706,7 +783,7 @@ var TimelinePanel = React.createClass({
 
         // the messagePanel doesn't know where the read marker is.
         // if we know the timestamp of the read marker, make a guess based on that.
-        var rmTs = TimelinePanel.roomReadMarkerTsMap[this.props.timelineSet.roomId];
+        const rmTs = TimelinePanel.roomReadMarkerTsMap[this.props.timelineSet.room.roomId];
         if (rmTs && this.state.events.length > 0) {
             if (rmTs < this.state.events[0].getTs()) {
                 return -1;
@@ -718,6 +795,19 @@ var TimelinePanel = React.createClass({
         return null;
     },
 
+    canJumpToReadMarker: function() {
+        // 1. Do not show jump bar if neither the RM nor the RR are set.
+        // 2. Only show jump bar if RR !== RM. If they are the same, there are only fully
+        // read messages and unread messages. We already have a badge count and the bottom
+        // bar to jump to "live" when we have unread messages.
+        // 3. We want to show the bar if the read-marker is off the top of the screen.
+        // 4. Also, if pos === null, the event might not be paginated - show the unread bar
+        const pos = this.getReadMarkerPosition();
+        return this.state.readMarkerEventId !== null && // 1.
+            this.state.readMarkerEventId !== this._getCurrentReadReceipt() &&  // 2.
+            (pos < 0 || pos === null); // 3., 4.
+    },
+
     /**
      * called by the parent component when PageUp/Down/etc is pressed.
      *
@@ -728,7 +818,9 @@ var TimelinePanel = React.createClass({
 
         // jump to the live timeline on ctrl-end, rather than the end of the
         // timeline window.
-        if (ev.ctrlKey && ev.keyCode == KeyCode.END) {
+        if (ev.ctrlKey && !ev.shiftKey && !ev.altKey && !ev.metaKey &&
+            ev.keyCode == KeyCode.END)
+        {
             this.jumpToLiveTimeline();
         } else {
             this.refs.messagePanel.handleScrollKey(ev);
@@ -807,6 +899,9 @@ var TimelinePanel = React.createClass({
 
         var onError = (error) => {
             this.setState({timelineLoading: false});
+            console.error(
+                `Error loading timeline panel at ${eventId}: ${error}`,
+            );
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
@@ -825,14 +920,11 @@ var TimelinePanel = React.createClass({
                     });
                 };
             }
-            var message = "Tried to load a specific point in this room's timeline, but ";
-            if (error.errcode == 'M_FORBIDDEN') {
-                message += "you do not have permission to view the message in question.";
-            } else {
-                message += "was unable to find it.";
-            }
+            var message = (error.errcode == 'M_FORBIDDEN')
+            	? _t("Tried to load a specific point in this room's timeline, but you do not have permission to view the message in question.")
+                : _t("Tried to load a specific point in this room's timeline, but was unable to find it.");
             Modal.createDialog(ErrorDialog, {
-                title: "Failed to load timeline position",
+                title: _t("Failed to load timeline position"),
                 description: message,
                 onFinished: onFinished,
             });
@@ -956,16 +1048,12 @@ var TimelinePanel = React.createClass({
     _setReadMarker: function(eventId, eventTs, inhibitSetState) {
         var roomId = this.props.timelineSet.room.roomId;
 
-        if (TimelinePanel.roomReadMarkerMap[roomId] == eventId) {
-            // don't update the state (and cause a re-render) if there is
-            // no change to the RM.
+        // don't update the state (and cause a re-render) if there is
+        // no change to the RM.
+        if (eventId === this.state.readMarkerEventId) {
             return;
         }
 
-        // ideally we'd sync these via the server, but for now just stash them
-        // in a map.
-        TimelinePanel.roomReadMarkerMap[roomId] = eventId;
-
         // in order to later figure out if the read marker is
         // above or below the visible timeline, we stash the timestamp.
         TimelinePanel.roomReadMarkerTsMap[roomId] = eventTs;
@@ -974,6 +1062,7 @@ var TimelinePanel = React.createClass({
             return;
         }
 
+        // Do the local echo of the RM
         // run the render cycle before calling the callback, so that
         // getReadMarkerPosition() returns the right thing.
         this.setState({
@@ -1022,26 +1111,33 @@ var TimelinePanel = React.createClass({
         // of paginating our way through the entire history of the room.
         var stickyBottom = !this._timelineWindow.canPaginate(EventTimeline.FORWARDS);
 
+        // If the state is PREPARED, we're still waiting for the js-sdk to sync with
+        // the HS and fetch the latest events, so we are effectively forward paginating.
+        const forwardPaginating = (
+            this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED'
+        );
         return (
             <MessagePanel ref="messagePanel"
-                    hidden={ this.props.hidden }
-                    backPaginating={ this.state.backPaginating }
-                    forwardPaginating={ this.state.forwardPaginating }
-                    events={ this.state.events }
-                    highlightedEventId={ this.props.highlightedEventId }
-                    readMarkerEventId={ this.state.readMarkerEventId }
-                    readMarkerVisible={ this.state.readMarkerVisible }
-                    suppressFirstDateSeparator={ this.state.canBackPaginate }
-                    showUrlPreview = { this.props.showUrlPreview }
-                    manageReadReceipts = { this.props.manageReadReceipts }
-                    ourUserId={ MatrixClientPeg.get().credentials.userId }
-                    stickyBottom={ stickyBottom }
-                    onScroll={ this.onMessageListScroll }
-                    onFillRequest={ this.onMessageListFillRequest }
-                    onUnfillRequest={ this.onMessageListUnfillRequest }
-                    opacity={ this.props.opacity }
-                    className={ this.props.className }
-                    tileShape={ this.props.tileShape }
+                          hidden={ this.props.hidden }
+                          backPaginating={ this.state.backPaginating }
+                          forwardPaginating={ forwardPaginating }
+                          events={ this.state.events }
+                          highlightedEventId={ this.props.highlightedEventId }
+                          readMarkerEventId={ this.state.readMarkerEventId }
+                          readMarkerVisible={ this.state.readMarkerVisible }
+                          suppressFirstDateSeparator={ this.state.canBackPaginate }
+                          showUrlPreview = { this.props.showUrlPreview }
+                          manageReadReceipts = { this.props.manageReadReceipts }
+                          ourUserId={ MatrixClientPeg.get().credentials.userId }
+                          stickyBottom={ stickyBottom }
+                          onScroll={ this.onMessageListScroll }
+                          onFillRequest={ this.onMessageListFillRequest }
+                          onUnfillRequest={ this.onMessageListUnfillRequest }
+                          opacity={ this.props.opacity }
+                          isTwelveHour={ this.state.isTwelveHour }
+                          alwaysShowTimestamps={ this.state.alwaysShowTimestamps }
+                          className={ this.props.className }
+                          tileShape={ this.props.tileShape }
             />
         );
     },

src/components/structures/UploadBar.js

@@ -18,6 +18,7 @@ var React = require('react');
 var ContentMessages = require('../../ContentMessages');
 var dis = require('../../dispatcher');
 var filesize = require('filesize');
+import { _t } from '../../languageHandler';
 
 module.exports = React.createClass({displayName: 'UploadBar',
     propTypes: {
@@ -81,10 +82,8 @@ module.exports = React.createClass({displayName: 'UploadBar',
             uploadedSize = uploadedSize.replace(/ .*/, '');
         }
 
-        var others;
-        if (uploads.length > 1) {
-            others = ' and ' + (uploads.length - 1) + ' other' + (uploads.length > 2 ? 's' : '');
-        }
+        // MUST use var name 'count' for pluralization to kick in
+        var uploadText = _t("Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)});
 
         return (
             <div className="mx_UploadBar">
@@ -98,7 +97,7 @@ module.exports = React.createClass({displayName: 'UploadBar',
                 <div className="mx_UploadBar_uploadBytes">
                     { uploadedSize } / { totalSize }
                 </div>
-                <div className="mx_UploadBar_uploadFilename">Uploading {upload.fileName}{others}</div>
+                <div className="mx_UploadBar_uploadFilename">{uploadText}</div>
             </div>
         );
     }

src/components/structures/login/ForgotPassword.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 var sdk = require('../../../index');
 var Modal = require("../../../Modal");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
@@ -54,7 +55,7 @@ module.exports = React.createClass({
                 progress: "sent_email"
             });
         }, (err) => {
-            this.showErrorDialog("Failed to send email: " + err.message);
+            this.showErrorDialog(_t('Failed to send email') + ": " + err.message);
             this.setState({
                 progress: null
             });
@@ -78,30 +79,33 @@ module.exports = React.createClass({
         ev.preventDefault();
 
         if (!this.state.email) {
-            this.showErrorDialog("The email address linked to your account must be entered.");
+            this.showErrorDialog(_t('The email address linked to your account must be entered.'));
         }
         else if (!this.state.password || !this.state.password2) {
-            this.showErrorDialog("A new password must be entered.");
+            this.showErrorDialog(_t('A new password must be entered.'));
         }
         else if (this.state.password !== this.state.password2) {
-            this.showErrorDialog("New passwords must match each other.");
+            this.showErrorDialog(_t('New passwords must match each other.'));
         }
         else {
             var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createDialog(QuestionDialog, {
-                title: "Warning",
+                title: _t('Warning!'),
                 description:
                     <div>
-                        Resetting password will currently reset any end-to-end encryption keys on all devices,
-                        making encrypted chat history unreadable, unless you first export your room keys
-                        and re-import them afterwards.
-                        In future this <a href="https://github.com/vector-im/riot-web/issues/2671">will be improved</a>.
+                        { _t(
+                            'Resetting password will currently reset any ' +
+                            'end-to-end encryption keys on all devices, ' +
+                            'making encrypted chat history unreadable, ' + 
+                            'unless you first export your room keys and re-import ' +
+                            'them afterwards. In future this will be improved.'
+                        ) }
                     </div>,
-                button: "Continue",
+                button: _t('Continue'),
                 extraButtons: [
                     <button className="mx_Dialog_primary"
                             onClick={this._onExportE2eKeysClicked}>
-                        Export E2E room keys
+                        { _t('Export E2E room keys') }
                     </button>
                 ],
                 onFinished: (confirmed) => {
@@ -150,7 +154,7 @@ module.exports = React.createClass({
         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createDialog(ErrorDialog, {
             title: title,
-            description: body
+            description: body,
         });
     },
 
@@ -168,22 +172,20 @@ module.exports = React.createClass({
         else if (this.state.progress === "sent_email") {
             resetPasswordJsx = (
                 <div>
-                    An email has been sent to {this.state.email}. Once you&#39;ve followed
-                    the link it contains, click below.
+                    { _t('An email has been sent to') } {this.state.email}. { _t('Once you&#39;ve followed the link it contains, click below') }.
                     <br />
                     <input className="mx_Login_submit" type="button" onClick={this.onVerify}
-                        value="I have verified my email address" />
+                        value={ _t('I have verified my email address') } />
                 </div>
             );
         }
         else if (this.state.progress === "complete") {
             resetPasswordJsx = (
                 <div>
-                    <p>Your password has been reset.</p>
-                    <p>You have been logged out of all devices and will no longer receive push notifications.
-                    To re-enable notifications, sign in again on each device.</p>
+                    <p>{ _t('Your password has been reset') }.</p>
+                    <p>{ _t('You have been logged out of all devices and will no longer receive push notifications. To re-enable notifications, sign in again on each device') }.</p>
                     <input className="mx_Login_submit" type="button" onClick={this.props.onComplete}
-                        value="Return to login screen" />
+                        value={ _t('Return to login screen') } />
                 </div>
             );
         }
@@ -191,7 +193,7 @@ module.exports = React.createClass({
             resetPasswordJsx = (
             <div>
                 <div className="mx_Login_prompt">
-                    To reset your password, enter the email address linked to your account:
+                    { _t('To reset your password, enter the email address linked to your account') }:
                 </div>
                 <div>
                     <form onSubmit={this.onSubmitForm}>
@@ -199,21 +201,21 @@ module.exports = React.createClass({
                             name="reset_email" // define a name so browser's password autofill gets less confused
                             value={this.state.email}
                             onChange={this.onInputChanged.bind(this, "email")}
-                            placeholder="Email address" autoFocus />
+                            placeholder={ _t('Email address') } autoFocus />
                         <br />
                         <input className="mx_Login_field" ref="pass" type="password"
                             name="reset_password"
                             value={this.state.password}
                             onChange={this.onInputChanged.bind(this, "password")}
-                            placeholder="New password" />
+                            placeholder={ _t('New password') } />
                         <br />
                         <input className="mx_Login_field" ref="pass" type="password"
                             name="reset_password_confirm"
                             value={this.state.password2}
                             onChange={this.onInputChanged.bind(this, "password2")}
-                            placeholder="Confirm your new password" />
+                            placeholder={ _t('Confirm your new password') } />
                         <br />
-                        <input className="mx_Login_submit" type="submit" value="Send Reset Email" />
+                        <input className="mx_Login_submit" type="submit" value={ _t('Send Reset Email') } />
                     </form>
                     <ServerConfig ref="serverConfig"
                         withToggleButton={true}
@@ -227,10 +229,10 @@ module.exports = React.createClass({
                     <div className="mx_Login_error">
                     </div>
                     <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        Return to login
+                        {_t('Return to login screen')}
                     </a>
                     <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
-                        Create a new account
+                        { _t('Create an account') }
                     </a>
                     <LoginFooter />
                 </div>

src/components/structures/login/Login.js

@@ -17,13 +17,13 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var sdk = require('../../../index');
-var Login = require("../../../Login");
-var PasswordLogin = require("../../views/login/PasswordLogin");
-var CasLogin = require("../../views/login/CasLogin");
-var ServerConfig = require("../../views/login/ServerConfig");
+import React from 'react';
+import { _t, _tJsx } from '../../../languageHandler';
+import sdk from '../../../index';
+import Login from '../../../Login';
+
+// For validating phone numbers without country codes
+const PHONE_NUMBER_REGEX = /^[0-9\(\)\-\s]*$/;
 
 /**
  * A wire component which glues together login UI components and Login logic
@@ -67,13 +67,19 @@ module.exports = React.createClass({
             username: "",
             phoneCountry: null,
             phoneNumber: "",
+            currentFlow: "m.login.password",
         };
     },
 
     componentWillMount: function() {
+        this._unmounted = false;
         this._initLoginLogic();
     },
 
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
     onPasswordLogin: function(username, phoneCountry, phoneNumber, password) {
         this.setState({
             busy: true,
@@ -86,10 +92,36 @@ module.exports = React.createClass({
         ).then((data) => {
             this.props.onLoggedIn(data);
         }, (error) => {
-            this._setStateFromError(error, true);
-        }).finally(() => {
+            if(this._unmounted) {
+                return;
+            }
+            let errorText;
+
+            // Some error strings only apply for logging in
+            const usingEmail = username.indexOf("@") > 0;
+            if (error.httpStatus == 400 && usingEmail) {
+                errorText = _t('This Home Server does not support login using email address.');
+            } else if (error.httpStatus === 401 || error.httpStatus === 403) {
+                errorText = _t('Incorrect username and/or password.');
+            } else {
+                // other errors, not specific to doing a password login
+                errorText = this._errorTextFromError(error);
+            }
+
             this.setState({
-                busy: false
+                errorText: errorText,
+                // 401 would be the sensible status code for 'incorrect password'
+                // but the login API gives a 403 https://matrix.org/jira/browse/SYN-744
+                // mentions this (although the bug is for UI auth which is not this)
+                // We treat both as an incorrect password
+                loginIncorrect: error.httpStatus === 401 || error.httpStatus == 403,
+            });
+        }).finally(() => {
+            if(this._unmounted) {
+                return;
+            }
+            this.setState({
+                busy: false,
             });
         }).done();
     },
@@ -109,7 +141,16 @@ module.exports = React.createClass({
         this._loginLogic.loginAsGuest().then(function(data) {
             self.props.onLoggedIn(data);
         }, function(error) {
-            self._setStateFromError(error, true);
+            let errorText;
+            if (error.httpStatus === 403) {
+                errorText = _t("Guest access is disabled on this Home Server.");
+            } else {
+                errorText = self._errorTextFromError(error);
+            }
+            self.setState({
+                errorText: errorText,
+                loginIncorrect: false,
+            });
         }).finally(function() {
             self.setState({
                 busy: false
@@ -126,26 +167,31 @@ module.exports = React.createClass({
     },
 
     onPhoneNumberChanged: function(phoneNumber) {
-        this.setState({ phoneNumber: phoneNumber });
-    },
+        // Validate the phone number entered
+        if (!PHONE_NUMBER_REGEX.test(phoneNumber)) {
+            this.setState({ errorText: _t('The phone number entered looks invalid') });
+            return;
+        }
 
-    onHsUrlChanged: function(newHsUrl) {
-        var self = this;
         this.setState({
-            enteredHomeserverUrl: newHsUrl,
-            errorText: null, // reset err messages
-        }, function() {
-            self._initLoginLogic(newHsUrl);
+            phoneNumber: phoneNumber,
+            errorText: null,
         });
     },
 
-    onIsUrlChanged: function(newIsUrl) {
+    onServerConfigChange: function(config) {
         var self = this;
-        this.setState({
-            enteredIdentityServerUrl: newIsUrl,
+        let newState = {
             errorText: null, // reset err messages
-        }, function() {
-            self._initLoginLogic(null, newIsUrl);
+        };
+        if (config.hsUrl !== undefined) {
+            newState.enteredHomeserverUrl = config.hsUrl;
+        }
+        if (config.isUrl !== undefined) {
+            newState.enteredIdentityServerUrl = config.isUrl;
+        }
+        this.setState(newState, function() {
+            self._initLoginLogic(config.hsUrl || null, config.isUrl);
         });
     },
 
@@ -161,66 +207,64 @@ module.exports = React.createClass({
         });
         this._loginLogic = loginLogic;
 
-        loginLogic.getFlows().then(function(flows) {
-            // old behaviour was to always use the first flow without presenting
-            // options. This works in most cases (we don't have a UI for multiple
-            // logins so let's skip that for now).
-            loginLogic.chooseFlow(0);
-        }, function(err) {
-            self._setStateFromError(err, false);
-        }).finally(function() {
-            self.setState({
-                busy: false
-            });
-        });
-
         this.setState({
             enteredHomeserverUrl: hsUrl,
             enteredIdentityServerUrl: isUrl,
             busy: true,
             loginIncorrect: false,
         });
+
+        loginLogic.getFlows().then(function(flows) {
+            // old behaviour was to always use the first flow without presenting
+            // options. This works in most cases (we don't have a UI for multiple
+            // logins so let's skip that for now).
+            loginLogic.chooseFlow(0);
+            self.setState({
+                currentFlow: self._getCurrentFlowStep(),
+            });
+        }, function(err) {
+            self.setState({
+                errorText: self._errorTextFromError(err),
+                loginIncorrect: false,
+            });
+        }).finally(function() {
+            self.setState({
+                busy: false,
+            });
+        }).done();
     },
 
     _getCurrentFlowStep: function() {
         return this._loginLogic ? this._loginLogic.getCurrentFlowStep() : null;
     },
 
-    _setStateFromError: function(err, isLoginAttempt) {
-        this.setState({
-            errorText: this._errorTextFromError(err),
-            // https://matrix.org/jira/browse/SYN-744
-            loginIncorrect: isLoginAttempt && (err.httpStatus == 401 || err.httpStatus == 403)
-        });
-    },
-
     _errorTextFromError(err) {
-        if (err.friendlyText) {
-            return err.friendlyText;
-        }
-
         let errCode = err.errcode;
         if (!errCode && err.httpStatus) {
             errCode = "HTTP " + err.httpStatus;
         }
 
-        let errorText = "Error: Problem communicating with the given homeserver " +
-                (errCode ? "(" + errCode + ")" : "");
+        let errorText = _t("Error: Problem communicating with the given homeserver.") +
+                (errCode ? " (" + errCode + ")" : "");
 
         if (err.cors === 'rejected') {
             if (window.location.protocol === 'https:' &&
                 (this.state.enteredHomeserverUrl.startsWith("http:") ||
-                 !this.state.enteredHomeserverUrl.startsWith("http")))
-            {
+                 !this.state.enteredHomeserverUrl.startsWith("http"))
+            ) {
                 errorText = <span>
-                    Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar.
-                    Either use HTTPS or <a href='https://www.google.com/search?&q=enable%20unsafe%20scripts'>enable unsafe scripts</a>
+                    { _tJsx("Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. " +
+                            "Either use HTTPS or <a>enable unsafe scripts</a>.",
+                      /<a>(.*?)<\/a>/,
+                      (sub) => { return <a href="https://www.google.com/search?&q=enable%20unsafe%20scripts">{ sub }</a>; }
+                    )}
                 </span>;
-            }
-            else {
+            } else {
                 errorText = <span>
-                    Can't connect to homeserver - please check your connectivity and ensure
-                    your <a href={ this.state.enteredHomeserverUrl }>homeserver's SSL certificate</a> is trusted.
+                    { _tJsx("Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
+                      /<a>(.*?)<\/a>/,
+                      (sub) => { return <a href={this.state.enteredHomeserverUrl}>{ sub }</a>; }
+                    )}
                 </span>;
             }
         }
@@ -231,6 +275,7 @@ module.exports = React.createClass({
     componentForStep: function(step) {
         switch (step) {
             case 'm.login.password':
+                const PasswordLogin = sdk.getComponent('login.PasswordLogin');
                 return (
                     <PasswordLogin
                         onSubmit={this.onPasswordLogin}
@@ -245,6 +290,7 @@ module.exports = React.createClass({
                     />
                 );
             case 'm.login.cas':
+                const CasLogin = sdk.getComponent('login.CasLogin');
                 return (
                     <CasLogin onSubmit={this.onCasLogin} />
                 );
@@ -254,24 +300,24 @@ module.exports = React.createClass({
                 }
                 return (
                     <div>
-                    Sorry, this homeserver is using a login which is not
-                    recognised ({step})
+                    { _t('Sorry, this homeserver is using a login which is not recognised ')}({step})
                     </div>
                 );
         }
     },
 
     render: function() {
-        var Loader = sdk.getComponent("elements.Spinner");
-        var LoginHeader = sdk.getComponent("login.LoginHeader");
-        var LoginFooter = sdk.getComponent("login.LoginFooter");
-        var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
+        const Loader = sdk.getComponent("elements.Spinner");
+        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         var loginAsGuestJsx;
         if (this.props.enableGuest) {
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
-                    Login as guest
+                    { _t('Login as guest')}
                 </a>;
         }
 
@@ -279,7 +325,7 @@ module.exports = React.createClass({
         if (this.props.onCancelClick) {
             returnToAppJsx =
                 <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    Return to app
+                    { _t('Return to app')}
                 </a>;
         }
 
@@ -288,24 +334,23 @@ module.exports = React.createClass({
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div>
-                        <h2>Sign in
+                        <h2>{ _t('Sign in')}
                             { loader }
                         </h2>
-                        { this.componentForStep(this._getCurrentFlowStep()) }
+                        { this.componentForStep(this.state.currentFlow) }
                         <ServerConfig ref="serverConfig"
                             withToggleButton={true}
                             customHsUrl={this.props.customHsUrl}
                             customIsUrl={this.props.customIsUrl}
                             defaultHsUrl={this.props.defaultHsUrl}
                             defaultIsUrl={this.props.defaultIsUrl}
-                            onHsUrlChanged={this.onHsUrlChanged}
-                            onIsUrlChanged={this.onIsUrlChanged}
+                            onServerConfigChange={this.onServerConfigChange}
                             delayTimeMs={1000}/>
                         <div className="mx_Login_error">
                                 { this.state.errorText }
                         </div>
                         <a className="mx_Login_create" onClick={this.props.onRegisterClick} href="#">
-                            Create a new account
+                            { _t('Create an account')}
                         </a>
                         { loginAsGuestJsx }
                         { returnToAppJsx }

src/components/structures/login/PostRegistration.js

@@ -16,9 +16,10 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var sdk = require('../../../index');
-var MatrixClientPeg = require('../../../MatrixClientPeg');
+import React from 'react';
+import sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'PostRegistration',
@@ -49,7 +50,7 @@ module.exports = React.createClass({
             });
         }, function(error) {
             self.setState({
-                errorString: "Failed to fetch avatar URL",
+                errorString: _t("Failed to fetch avatar URL"),
                 busy: false
             });
         });
@@ -64,12 +65,12 @@ module.exports = React.createClass({
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div className="mx_Login_profile">
-                        Set a display name:
+                        { _t('Set a display name:') }
                         <ChangeDisplayName />
-                        Upload an avatar:
+                        { _t('Upload an avatar:') }
                         <ChangeAvatar
                             initialAvatarUrl={this.state.avatarUrl} />
-                        <button onClick={this.props.onComplete}>Continue</button>
+                        <button onClick={this.props.onComplete}>{ _t('Continue') }</button>
                         {this.state.errorString}
                     </div>
                 </div>

src/components/structures/login/Registration.js

@@ -17,16 +17,15 @@ limitations under the License.
 
 import Matrix from 'matrix-js-sdk';
 
-import q from 'q';
+import Promise from 'bluebird';
 import React from 'react';
 
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import ServerConfig from '../../views/login/ServerConfig';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import RegistrationForm from '../../views/login/RegistrationForm';
-import CaptchaForm from '../../views/login/CaptchaForm';
 import RtsClient from '../../../RtsClient';
+import { _t } from '../../../languageHandler';
 
 const MIN_PASSWORD_LENGTH = 6;
 
@@ -46,8 +45,6 @@ module.exports = React.createClass({
         brand: React.PropTypes.string,
         email: React.PropTypes.string,
         referrer: React.PropTypes.string,
-        username: React.PropTypes.string,
-        guestAccessToken: React.PropTypes.string,
         teamServerConfig: React.PropTypes.shape({
             // Email address to request new teams
             supportEmail: React.PropTypes.string.isRequired,
@@ -98,7 +95,7 @@ module.exports = React.createClass({
             this.props.teamServerConfig.teamServerURL &&
             !this._rtsClient
         ) {
-            this._rtsClient = new RtsClient(this.props.teamServerConfig.teamServerURL);
+            this._rtsClient = this.props.rtsClient || new RtsClient(this.props.teamServerConfig.teamServerURL);
 
             this.setState({
                 teamServerBusy: true,
@@ -123,18 +120,17 @@ module.exports = React.createClass({
         }
     },
 
-    onHsUrlChanged: function(newHsUrl) {
-        this.setState({
-            hsUrl: newHsUrl,
+    onServerConfigChange: function(config) {
+        let newState = {};
+        if (config.hsUrl !== undefined) {
+            newState.hsUrl = config.hsUrl;
+        }
+        if (config.isUrl !== undefined) {
+            newState.isUrl = config.isUrl;
+        }
+        this.setState(newState, function() {
+            this._replaceClient();
         });
-        this._replaceClient();
-    },
-
-    onIsUrlChanged: function(newIsUrl) {
-        this.setState({
-            isUrl: newIsUrl,
-        });
-        this._replaceClient();
     },
 
     _replaceClient: function() {
@@ -163,7 +159,7 @@ module.exports = React.createClass({
                     msisdn_available |= flow.stages.indexOf('m.login.msisdn') > -1;
                 }
                 if (!msisdn_available) {
-                    msg = "This server does not support authentication with a phone number";
+                    msg = _t('This server does not support authentication with a phone number.');
                 }
             }
             this.setState({
@@ -184,7 +180,7 @@ module.exports = React.createClass({
         // will just nop. The point of this being we might not have the email address
         // that the user registered with at this stage (depending on whether this
         // is the client they initiated registration).
-        let trackPromise = q(null);
+        let trackPromise = Promise.resolve(null);
         if (this._rtsClient && extra.emailSid) {
             // Track referral if this.props.referrer set, get team_token in order to
             // retrieve team config and see welcome page etc.
@@ -222,30 +218,29 @@ module.exports = React.createClass({
         }
 
         trackPromise.then((teamToken) => {
-            console.info('Team token promise',teamToken);
-            this.props.onLoggedIn({
+            return this.props.onLoggedIn({
                 userId: response.user_id,
                 deviceId: response.device_id,
                 homeserverUrl: this._matrixClient.getHomeserverUrl(),
                 identityServerUrl: this._matrixClient.getIdentityServerUrl(),
                 accessToken: response.access_token
             }, teamToken);
-        }).then(() => {
-            return this._setupPushers();
+        }).then((cli) => {
+            return this._setupPushers(cli);
         });
     },
 
-    _setupPushers: function() {
+    _setupPushers: function(matrixClient) {
         if (!this.props.brand) {
-            return q();
+            return Promise.resolve();
         }
-        return MatrixClientPeg.get().getPushers().then((resp)=>{
+        return matrixClient.getPushers().then((resp)=>{
             const pushers = resp.pushers;
             for (let i = 0; i < pushers.length; ++i) {
                 if (pushers[i].kind == 'email') {
                     const emailPusher = pushers[i];
                     emailPusher.data = { brand: this.props.brand };
-                    MatrixClientPeg.get().setPusher(emailPusher).done(() => {
+                    matrixClient.setPusher(emailPusher).done(() => {
                         console.log("Set email branding to " + this.props.brand);
                     }, (error) => {
                         console.error("Couldn't set email branding: " + error);
@@ -261,29 +256,29 @@ module.exports = React.createClass({
         var errMsg;
         switch (errCode) {
             case "RegistrationForm.ERR_PASSWORD_MISSING":
-                errMsg = "Missing password.";
+                errMsg = _t('Missing password.');
                 break;
             case "RegistrationForm.ERR_PASSWORD_MISMATCH":
-                errMsg = "Passwords don't match.";
+                errMsg = _t('Passwords don\'t match.');
                 break;
             case "RegistrationForm.ERR_PASSWORD_LENGTH":
-                errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+                errMsg = _t('Password too short (min %(MIN_PASSWORD_LENGTH)s).', {MIN_PASSWORD_LENGTH: MIN_PASSWORD_LENGTH});
                 break;
             case "RegistrationForm.ERR_EMAIL_INVALID":
-                errMsg = "This doesn't look like a valid email address";
+                errMsg = _t('This doesn\'t look like a valid email address.');
                 break;
             case "RegistrationForm.ERR_PHONE_NUMBER_INVALID":
-                errMsg = "This doesn't look like a valid phone number";
+                errMsg = _t('This doesn\'t look like a valid phone number.');
                 break;
             case "RegistrationForm.ERR_USERNAME_INVALID":
-                errMsg = "User names may only contain letters, numbers, dots, hyphens and underscores.";
+                errMsg = _t('User names may only contain letters, numbers, dots, hyphens and underscores.');
                 break;
             case "RegistrationForm.ERR_USERNAME_BLANK":
-                errMsg = "You need to enter a user name";
+                errMsg = _t('You need to enter a user name.');
                 break;
             default:
                 console.error("Unknown error code: %s", errCode);
-                errMsg = "An unknown error occurred.";
+                errMsg = _t('An unknown error occurred.');
                 break;
         }
         this.setState({
@@ -298,17 +293,6 @@ module.exports = React.createClass({
     },
 
     _makeRegisterRequest: function(auth) {
-        let guestAccessToken = this.props.guestAccessToken;
-
-        if (
-            this.state.formVals.username !== this.props.username ||
-            this.state.hsUrl != this.props.defaultHsUrl
-        ) {
-            // don't try to upgrade if we changed our username
-            // or are registering on a different HS
-            guestAccessToken = null;
-        }
-
         // Only send the bind params if we're sending username / pw params
         // (Since we need to send no params at all to use the ones saved in the
         // session).
@@ -323,7 +307,7 @@ module.exports = React.createClass({
             undefined, // session id: included in the auth dict already
             auth,
             bindThreepids,
-            guestAccessToken,
+            null,
         );
     },
 
@@ -360,10 +344,6 @@ module.exports = React.createClass({
         } else if (this.state.busy || this.state.teamServerBusy) {
             registerBody = <Spinner />;
         } else {
-            let guestUsername = this.props.username;
-            if (this.state.hsUrl != this.props.defaultHsUrl) {
-                guestUsername = null;
-            }
             let errorSection;
             if (this.state.errorText) {
                 errorSection = <div className="mx_Login_error">{this.state.errorText}</div>;
@@ -377,7 +357,6 @@ module.exports = React.createClass({
                         defaultPhoneNumber={this.state.formVals.phoneNumber}
                         defaultPassword={this.state.formVals.password}
                         teamsConfig={this.state.teamsConfig}
-                        guestUsername={guestUsername}
                         minPasswordLength={MIN_PASSWORD_LENGTH}
                         onError={this.onFormValidationFailed}
                         onRegisterClick={this.onFormSubmit}
@@ -390,8 +369,7 @@ module.exports = React.createClass({
                         customIsUrl={this.props.customIsUrl}
                         defaultHsUrl={this.props.defaultHsUrl}
                         defaultIsUrl={this.props.defaultIsUrl}
-                        onHsUrlChanged={this.onHsUrlChanged}
-                        onIsUrlChanged={this.onIsUrlChanged}
+                        onServerConfigChange={this.onServerConfigChange}
                         delayTimeMs={1000}
                     />
                 </div>
@@ -402,7 +380,7 @@ module.exports = React.createClass({
         if (this.props.onCancelClick) {
             returnToAppJsx = (
                 <a className="mx_Login_create" onClick={this.props.onCancelClick} href="#">
-                    Return to app
+                    {_t('Return to app')}
                 </a>
             );
         }
@@ -415,10 +393,10 @@ module.exports = React.createClass({
                             this.state.teamSelected.domain + "/icon.png" :
                             null}
                     />
-                    <h2>Create an account</h2>
+                    <h2>{_t('Create an account')}</h2>
                     {registerBody}
                     <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
-                        I already have an account
+                        {_t('I already have an account')}
                     </a>
                     {returnToAppJsx}
                     <LoginFooter />

src/components/views/avatars/BaseAvatar.js

@@ -32,6 +32,7 @@ module.exports = React.createClass({
         urls: React.PropTypes.array, // [highest_priority, ... , lowest_priority]
         width: React.PropTypes.number,
         height: React.PropTypes.number,
+        // XXX resizeMethod not actually used.
         resizeMethod: React.PropTypes.string,
         defaultToInitialLetter: React.PropTypes.bool // true to add default url
     },

src/components/views/avatars/GroupAvatar.js

@@ -0,0 +1,66 @@
+/*
+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,
+        groupAvatarUrl: PropTypes.string,
+        width: PropTypes.number,
+        height: PropTypes.number,
+        resizeMethod: PropTypes.string,
+    },
+
+    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, ...otherProps} = this.props;
+
+        return (
+            <BaseAvatar
+                name={this.props.groupId[1]}
+                idName={this.props.groupId}
+                url={this.getGroupAvatarUrl()}
+                {...otherProps}
+            />
+        );
+    },
+});

src/components/views/avatars/RoomAvatar.js

@@ -59,7 +59,9 @@ 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),
@@ -70,17 +72,19 @@ module.exports = React.createClass({
     },
 
     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,
+            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 = [];
@@ -103,14 +107,18 @@ module.exports = React.createClass({
             }
             return theOtherGuy.getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                props.width, props.height, props.resizeMethod,
+                Math.floor(props.width * window.devicePixelRatio),
+                Math.floor(props.height * window.devicePixelRatio),
+                props.resizeMethod,
                 false
             );
         } else if (userIds.length == 1) {
             return mlist[userIds[0]].getAvatarUrl(
                 MatrixClientPeg.get().getHomeserverUrl(),
-                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;
@@ -118,9 +126,16 @@ module.exports = React.createClass({
     },
 
     getFallbackAvatar: function(props) {
-        if (!this.props.room) return null;
+        let roomId = null;
+        if (props.oobData && props.oobData.roomId) {
+            roomId = this.props.oobData.roomId;
+        } else if (props.room) {
+            roomId = props.room.roomId;
+        } else {
+            return null;
+        }
 
-        return Avatar.defaultAvatarUrlForString(props.room.roomId);
+        return Avatar.defaultAvatarUrlForString(roomId);
     },
 
     render: function() {

src/components/views/create_room/CreateRoomButton.js

@@ -16,8 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-
+import React from 'react';
+import { _t } from '../../../languageHandler';
 module.exports = React.createClass({
     displayName: 'CreateRoomButton',
     propTypes: {
@@ -36,7 +36,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

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 var Presets = {
     PrivateChat: "private_chat",
@@ -46,9 +47,9 @@ module.exports = React.createClass({
     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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'RoomAlias',
@@ -94,7 +95,7 @@ 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}/>
         );

src/components/views/dialogs/BaseDialog.js

@@ -67,7 +67,7 @@ export default React.createClass({
 
     render: function() {
         const TintableSvg = sdk.getComponent("elements.TintableSvg");
-                
+
         return (
             <div onKeyDown={this._onKeyDown} className={this.props.className}>
                 <AccessibleButton onClick={this._onCancelClick}

src/components/views/dialogs/ChatCreateOrReuseDialog.js

@@ -16,36 +16,30 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
+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';
-import createRoom from '../../../createRoom';
 
 export default class ChatCreateOrReuseDialog extends React.Component {
 
     constructor(props) {
         super(props);
-        this.onNewDMClick = this.onNewDMClick.bind(this);
         this.onRoomTileClick = this.onRoomTileClick.bind(this);
+
+        this.state = {
+            tiles: [],
+            profile: {
+                displayName: null,
+                avatarUrl: null,
+            },
+            profileError: null,
+        };
     }
 
-    onNewDMClick() {
-        createRoom({dmUserId: this.props.userId});
-        this.props.onFinished(true);
-    }
-
-    onRoomTileClick(roomId) {
-        dis.dispatch({
-            action: 'view_room',
-            room_id: roomId,
-        });
-        this.props.onFinished(true);
-    }
-
-    render() {
+    componentWillMount() {
         const client = MatrixClientPeg.get();
 
         const dmRoomMap = new DMRoomMap(client);
@@ -70,40 +64,123 @@ export default class ChatCreateOrReuseDialog extends React.Component {
                         highlight={highlight}
                         isInvite={me.membership == "invite"}
                         onClick={this.onRoomTileClick}
-                    />
+                    />,
                 );
             }
         }
 
-        const labelClasses = classNames({
-            mx_MemberInfo_createRoom_label: true,
-            mx_RoomTile_name: true,
+        this.setState({
+            tiles: tiles,
         });
-        const startNewChat = <AccessibleButton
-            className="mx_MemberInfo_createRoom"
-            onClick={this.onNewDMClick}
-        >
-            <div className="mx_RoomTile_avatar">
-                <img src="img/create-big.svg" width="26" height="26" />
-            </div>
-            <div className={labelClasses}><i>Start new chat</i></div>
-        </AccessibleButton>;
+
+        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 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>
+                <div className="mx_Dialog_buttons">
+                    <button className="mx_Dialog_primary" onClick={this.props.onNewDMClick}>
+                        { _t('Start Chatting') }
+                    </button>
+                </div>
+            </div>;
+        }
 
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className='mx_ChatCreateOrReuseDialog'
-                onFinished={() => {
-                    this.props.onFinished(false)
-                }}
-                title='Create a new chat or reuse an existing one'
+                onFinished={ this.props.onFinished.bind(false) }
+                title={title}
             >
-                <div className="mx_Dialog_content">
-                    You already have existing direct chats with this user:
-                    <div className="mx_ChatCreateOrReuseDialog_tiles">
-                        {tiles}
-                        {startNewChat}
-                    </div>
-                </div>
+                { content }
             </BaseDialog>
         );
     }
@@ -111,5 +188,8 @@ export default class ChatCreateOrReuseDialog extends React.Component {
 
 ChatCreateOrReuseDialog.propTyps = {
     userId: React.PropTypes.string.isRequired,
+    // Called when clicking outside of the dialog
     onFinished: React.PropTypes.func.isRequired,
+    onNewDMClick: React.PropTypes.func.isRequired,
+    onExistingRoomSelected: React.PropTypes.func.isRequired,
 };

src/components/views/dialogs/ChatInviteDialog.js

@@ -15,25 +15,24 @@ limitations under the License.
 */
 
 import React from 'react';
-import classNames from 'classnames';
+import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import { getAddressType, inviteMultipleToRoom } from '../../../Invite';
 import createRoom from '../../../createRoom';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import DMRoomMap from '../../../utils/DMRoomMap';
-import rate_limited_func from '../../../ratelimitedfunc';
-import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import AccessibleButton from '../elements/AccessibleButton';
-import q from 'q';
-import Fuse from 'fuse.js';
+import Promise from 'bluebird';
+import dis from '../../../dispatcher';
 
 const TRUNCATE_QUERY_LIST = 40;
+const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
 
 module.exports = React.createClass({
     displayName: "ChatInviteDialog",
     propTypes: {
-        title: React.PropTypes.string,
+        title: React.PropTypes.string.isRequired,
         description: React.PropTypes.oneOfType([
             React.PropTypes.element,
             React.PropTypes.string,
@@ -43,17 +42,13 @@ module.exports = React.createClass({
         roomId: React.PropTypes.string,
         button: React.PropTypes.string,
         focus: React.PropTypes.bool,
-        onFinished: React.PropTypes.func.isRequired
+        onFinished: React.PropTypes.func.isRequired,
     },
 
     getDefaultProps: function() {
         return {
-            title: "Start a chat",
-            description: "Who would you like to communicate with?",
             value: "",
-            placeholder: "Email, name or matrix ID",
-            button: "Start Chat",
-            focus: true
+            focus: true,
         };
     },
 
@@ -61,12 +56,20 @@ module.exports = React.createClass({
         return {
             error: false,
 
-            // List of AddressTile.InviteAddressType objects represeting
+            // List of AddressTile.InviteAddressType objects representing
             // the list of addresses we're going to invite
             inviteList: [],
 
-            // List of AddressTile.InviteAddressType objects represeting
-            // the set of autocompletion results for the current search
+            // 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 AddressTile.InviteAddressType objects representing
+            // the set of auto-completion results for the current search
             // query.
             queryList: [],
         };
@@ -77,20 +80,6 @@ module.exports = React.createClass({
             // Set the cursor at the end of the text input
             this.refs.textinput.value = this.props.value;
         }
-        // Create a Fuse instance for fuzzy searching this._userList
-        this._fuse = new Fuse(
-            // Use an empty list at first that will later be populated
-            // (see this._updateUserList)
-            [],
-            {
-                shouldSort: true,
-                location: 0, // The index of the query in the test string
-                distance: 5, // The distance away from location the query can be
-                // 0.0 = exact match, 1.0 = match anything
-                threshold: 0.3,
-            }
-        );
-        this._updateUserList();
     },
 
     onButtonClick: function() {
@@ -112,17 +101,28 @@ module.exports = React.createClass({
                     // A Direct Message room already exists for this user, so select a
                     // room from a list that is similar to the one in MemberInfo panel
                     const ChatCreateOrReuseDialog = sdk.getComponent(
-                        "views.dialogs.ChatCreateOrReuseDialog"
+                        "views.dialogs.ChatCreateOrReuseDialog",
                     );
-                    Modal.createDialog(ChatCreateOrReuseDialog, {
+                    const close = Modal.createDialog(ChatCreateOrReuseDialog, {
                         userId: userId,
                         onFinished: (success) => {
-                            if (success) {
-                                this.props.onFinished(true, inviteList[0]);
-                            }
-                            // else show this ChatInviteDialog again
-                        }
-                    });
+                            this.props.onFinished(success);
+                        },
+                        onNewDMClick: () => {
+                            dis.dispatch({
+                                action: 'start_chat',
+                                user_id: userId,
+                            });
+                            close(true);
+                        },
+                        onExistingRoomSelected: (roomId) => {
+                            dis.dispatch({
+                                action: 'view_room',
+                                room_id: roomId,
+                            });
+                            close(true);
+                        },
+                    }).close;
                 } else {
                     this._startChat(inviteList);
                 }
@@ -148,15 +148,15 @@ module.exports = React.createClass({
         } else if (e.keyCode === 38) { // up arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.moveSelectionUp();
+            if (this.addressSelector) this.addressSelector.moveSelectionUp();
         } else if (e.keyCode === 40) { // down arrow
             e.stopPropagation();
             e.preventDefault();
-            this.addressSelector.moveSelectionDown();
+            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();
-            this.addressSelector.chooseSelection();
+            if (this.addressSelector) this.addressSelector.chooseSelection();
         } else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
@@ -179,71 +179,36 @@ module.exports = React.createClass({
 
     onQueryChanged: function(ev) {
         const query = ev.target.value;
-        let queryList = [];
-
-        if (query.length < 2) {
-            return;
-        }
-
         if (this.queryChangedDebouncer) {
             clearTimeout(this.queryChangedDebouncer);
         }
-        this.queryChangedDebouncer = setTimeout(() => {
-            // Only do search if there is something to search
-            if (query.length > 0 && query != '@') {
-                // Weighted keys prefer to match userIds when first char is @
-                this._fuse.options.keys = [{
-                    name: 'displayName',
-                    weight: query[0] === '@' ? 0.1 : 0.9,
-                },{
-                    name: 'userId',
-                    weight: query[0] === '@' ? 0.9 : 0.1,
-                }];
-                queryList = this._fuse.search(query).map((user) => {
-                    // Return objects, structure of which is defined
-                    // by InviteAddressType
-                    return {
-                        addressType: 'mx',
-                        address: user.userId,
-                        displayName: user.displayName,
-                        avatarMxc: user.avatarUrl,
-                        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 (addrType !== null) {
-                    queryList.unshift({
-                        addressType: addrType,
-                        address: query,
-                        isKnown: false,
-                    });
-                    if (this._cancelThreepidLookup) this._cancelThreepidLookup();
-                    if (addrType == 'email') {
-                        this._lookupThreepid(addrType, query).done();
-                    }
+        // Only do search if there is something to search
+        if (query.length > 0 && query != '@' && query.length >= 2) {
+            this.queryChangedDebouncer = setTimeout(() => {
+                if (this.state.serverSupportsUserDirectory) {
+                    this._doUserDirectorySearch(query);
+                } else {
+                    this._doLocalSearch(query);
                 }
-            }
+            }, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
+        } else {
             this.setState({
-                queryList: queryList,
-                error: false,
-            }, () => {
-                this.addressSelector.moveSelectionTop();
+                queryList: [],
+                query: "",
+                searchError: null,
             });
-        }, 200);
+        }
     },
 
     onDismissed: function(index) {
         var self = this;
-        return function() {
+        return () => {
             var inviteList = self.state.inviteList.slice();
             inviteList.splice(index, 1);
             self.setState({
                 inviteList: inviteList,
                 queryList: [],
+                query: "",
             });
             if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         };
@@ -262,10 +227,109 @@ module.exports = React.createClass({
         this.setState({
             inviteList: inviteList,
             queryList: [],
+            query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
     },
 
+    _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((user) => {
+            if (user.user_id === MatrixClientPeg.get().credentials.userId) {
+                return;
+            }
+            // Return objects, structure of which is defined
+            // by InviteAddressType
+            queryList.push({
+                addressType: 'mx',
+                address: user.user_id,
+                displayName: user.display_name,
+                avatarMxc: user.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 (addrType !== null) {
+            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();
+        });
+    },
+
     _getDirectMessageRooms: function(addr) {
         const dmRoomMap = new DMRoomMap(MatrixClientPeg.get());
         const dmRooms = dmRoomMap.getDMRoomsForUserId(addr);
@@ -284,11 +348,7 @@ module.exports = React.createClass({
 
     _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."
-            });
+            dis.dispatch({action: 'view_set_mxid'});
             return;
         }
 
@@ -308,8 +368,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
-                    description: "Failed to invite",
+                    title: _t("Failed to invite"),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
                 return null;
             })
@@ -321,8 +381,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
-                    description: "Failed to invite user",
+                    title: _t("Failed to invite user"),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
                 return null;
             })
@@ -342,8 +402,8 @@ module.exports = React.createClass({
                 console.error(err.stack);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
-                    description: "Failed to invite",
+                    title: _t("Failed to invite"),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
                 return null;
             })
@@ -354,18 +414,6 @@ module.exports = React.createClass({
         this.props.onFinished(true, addrTexts);
     },
 
-    _updateUserList: new rate_limited_func(function() {
-        // Get all the users
-        this._userList = MatrixClientPeg.get().getUsers();
-        // Remove current user
-        const meIx = this._userList.findIndex((u) => {
-            return u.userId === MatrixClientPeg.get().credentials.userId;
-        });
-        this._userList.splice(meIx, 1);
-
-        this._fuse.set(this._userList);
-    }, 500),
-
     _isOnInviteList: function(uid) {
         for (let i = 0; i < this.state.inviteList.length; i++) {
             if (
@@ -401,7 +449,7 @@ module.exports = React.createClass({
         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:",
+                title: _t("Failed to invite the following users to the %(roomName)s room:", {roomName: room.name}),
                 description: errorList.join(", "),
             });
         }
@@ -433,6 +481,7 @@ module.exports = React.createClass({
         this.setState({
             inviteList: inviteList,
             queryList: [],
+            query: "",
         });
         if (this._cancelThreepidLookup) this._cancelThreepidLookup();
         return inviteList;
@@ -449,7 +498,7 @@ module.exports = React.createClass({
         }
 
         // wait a bit to let the user finish typing
-        return q.delay(500).then(() => {
+        return Promise.delay(500).then(() => {
             if (cancelled) return null;
             return MatrixClientPeg.get().lookupThreePid(medium, address);
         }).then((res) => {
@@ -468,7 +517,7 @@ module.exports = React.createClass({
                     displayName: res.displayname,
                     avatarMxc: res.avatar_url,
                     isKnown: true,
-                }]
+                }],
             });
         });
     },
@@ -500,23 +549,27 @@ module.exports = React.createClass({
                 placeholder={this.props.placeholder}
                 defaultValue={this.props.value}
                 autoFocus={this.props.focus}>
-            </textarea>
+            </textarea>,
         );
 
-        var error;
-        var addressSelector;
+        let error;
+        let 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>;
+            error = <div className="mx_ChatInviteDialog_error">{_t("You have entered an invalid contact. Try using their Matrix ID or email address.")}</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 {
-            const addressSelectorHeader = <div className="mx_ChatInviteDialog_addressSelectHeader">
-                Searching known users
-            </div>;
             addressSelector = (
                 <AddressSelector ref={(ref) => {this.addressSelector = ref;}}
                     addressList={ this.state.queryList }
                     onSelected={ this.onSelected }
                     truncateAt={ TRUNCATE_QUERY_LIST }
-                    header={ addressSelectorHeader }
                 />
             );
         }

src/components/views/dialogs/ConfirmRedactDialog.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../index';
 import classnames from 'classnames';
+import { _t } from '../../../languageHandler';
 
 /*
  * A dialog for confirming a redaction.
@@ -42,7 +43,7 @@ export default React.createClass({
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
 
-        const title = "Confirm Redaction";
+        const title = _t("Confirm Removal");
 
         const confirmButtonClass = classnames({
             'mx_Dialog_primary': true,
@@ -55,16 +56,16 @@ export default React.createClass({
                 title={title}
             >
                 <div className="mx_Dialog_content">
-                    Are you sure you wish to redact (delete) this event?
-                    Note that if you redact a room name or topic change, it could undo the change.
+                    {_t("Are you sure you wish to remove (delete) this event? " +
+                        "Note that if you delete a room name or topic change, it could undo the change.")}
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className={confirmButtonClass} onClick={this.onOk}>
-                        Redact
+                        {_t("Remove")}
                     </button>
 
                     <button onClick={this.onCancel}>
-                        Cancel
+                        {_t("Cancel")}
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/ConfirmUserActionDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import classnames from 'classnames';
 
 /*
@@ -69,7 +70,7 @@ export default React.createClass({
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const MemberAvatar = sdk.getComponent("views.avatars.MemberAvatar");
 
-        const title = this.props.action + " this person?";
+        const title = _t("%(actionVerb)s this person?", { actionVerb: this.props.action});
         const confirmButtonClass = classnames({
             'mx_Dialog_primary': true,
             'danger': this.props.danger,
@@ -82,7 +83,7 @@ export default React.createClass({
                     <form onSubmit={this.onOk}>
                         <input className="mx_ConfirmUserActionDialog_reasonField"
                             ref={this._collectReasonField}
-                            placeholder="Reason"
+                            placeholder={ _t("Reason") }
                             autoFocus={true}
                         />
                     </form>
@@ -111,7 +112,7 @@ export default React.createClass({
                     </button>
 
                     <button onClick={this.onCancel}>
-                        Cancel
+                        { _t("Cancel") }
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/CreateGroupDialog.js

@@ -0,0 +1,199 @@
+/*
+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';
+
+// We match fairly liberally and leave it up to the server to reject if
+// there are invalid characters etc.
+const GROUP_REGEX = /^\+(.*?):(.*)$/;
+
+export default React.createClass({
+    displayName: 'CreateGroupDialog',
+    propTypes: {
+        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) {
+        const parsedGroupId = this._parseGroupId(this.state.groupId);
+        let error = null;
+        if (parsedGroupId === null) {
+            error = _t(
+                "Group IDs must be of the form +localpart:%(domain)s",
+                {domain: MatrixClientPeg.get().getDomain()},
+            );
+        } else {
+            const domain = parsedGroupId[1];
+            if (domain !== MatrixClientPeg.get().getDomain()) {
+                error = _t(
+                    "It is currently only possible to create groups on your own home server: "+
+                    "use a group ID ending with %(domain)s",
+                    {domain: MatrixClientPeg.get().getDomain()},
+                );
+            }
+        }
+        this.setState({
+            groupIdError: error,
+        });
+        return error;
+    },
+
+    _onFormSubmit: function(e) {
+        e.preventDefault();
+
+        if (this._checkGroupId()) return;
+
+        const parsedGroupId = this._parseGroupId(this.state.groupId);
+        const profile = {};
+        if (this.state.groupName !== '') {
+            profile.name = this.state.groupName;
+        }
+        this.setState({creating: true});
+        MatrixClientPeg.get().createGroup({
+            localpart: parsedGroupId[0],
+            profile: profile,
+        }).then((result) => {
+            dis.dispatch({
+                action: 'view_group',
+                group_id: result.group_id,
+            });
+            this.props.onFinished(true);
+        }).catch((e) => {
+            this.setState({createError: e});
+        }).finally(() => {
+            this.setState({creating: false});
+        }).done();
+    },
+
+    _onCancel: function() {
+        this.props.onFinished(false);
+    },
+
+    /**
+     * Parse a string that may be a group ID
+     * If the string is a valid group ID, return a list of [localpart, domain],
+     * otherwise return null.
+     *
+     * @param {string} groupId The ID of the group
+     * @return {string[]} array of localpart, domain
+     */
+    _parseGroupId: function(groupId) {
+        const matches = GROUP_REGEX.exec(this.state.groupId);
+        if (!matches || matches.length < 3) {
+            return null;
+        }
+        return [matches[1], matches[2]];
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const Spinner = sdk.getComponent('elements.Spinner');
+
+        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('Room creation failed')}</div>
+                <div>{this.state.createError.message}</div>
+            </div>;
+        }
+
+        return (
+            <BaseDialog className="mx_CreateGroupDialog" onFinished={this.props.onFinished}
+                onEnterPressed={this._onFormSubmit}
+                title={_t('Create Group')}
+            >
+                <form onSubmit={this._onFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <div className="mx_CreateGroupDialog_inputRow">
+                            <div className="mx_CreateGroupDialog_label">
+                                <label htmlFor="groupname">{_t('Group Name')}</label>
+                            </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('Group ID')}</label>
+                            </div>
+                            <div>
+                                <input id="groupid" className="mx_CreateGroupDialog_input"
+                                    size="64"
+                                    placeholder={_t('+example:%(domain)s', {domain: MatrixClientPeg.get().getDomain()})}
+                                    onChange={this._onGroupIdChange}
+                                    onBlur={this._onGroupIdBlur}
+                                    value={this.state.groupId}
+                                />
+                            </div>
+                        </div>
+                        <div className="error">
+                            {this.state.groupIdError}
+                        </div>
+                        {createErrorNode}
+                    </div>
+                    <div className="mx_Dialog_buttons">
+                        <button onClick={this._onCancel}>
+                            { _t("Cancel") }
+                        </button>
+                        <input type="submit" value={_t('Create')} className="mx_Dialog_primary" />
+                    </div>
+                </form>
+            </BaseDialog>
+        );
+    },
+});

src/components/views/dialogs/DeactivateAccountDialog.js

@@ -20,6 +20,7 @@ import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import * as Lifecycle from '../../../Lifecycle';
 import Velocity from 'velocity-vector';
+import { _t } from '../../../languageHandler';
 
 export default class DeactivateAccountDialog extends React.Component {
     constructor(props, context) {
@@ -56,10 +57,10 @@ export default class DeactivateAccountDialog extends React.Component {
             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({
@@ -85,29 +86,29 @@ export default class DeactivateAccountDialog extends React.Component {
             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
+                {_t("Cancel")}
             </button>;
         }
 
         return (
             <div className="mx_DeactivateAccountDialog">
                 <div className="mx_Dialog_title danger">
-                    Deactivate Account
+                    {_t("Deactivate Account")}
                 </div>
                 <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}

src/components/views/dialogs/DeviceVerifyDialog.js

@@ -0,0 +1,77 @@
+/*
+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 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: React.PropTypes.string.isRequired,
+    device: React.PropTypes.object.isRequired,
+    onFinished: React.PropTypes.func.isRequired,
+};

src/components/views/dialogs/ErrorDialog.js

@@ -27,6 +27,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'ErrorDialog',
@@ -43,24 +44,30 @@ export default React.createClass({
 
     getDefaultProps: function() {
         return {
-            title: "Error",
-            description: "An error has occurred.",
-            button: "OK",
             focus: true,
+            title: null,
+            description: null,
+            button: null,
         };
     },
 
+    componentDidMount: function() {
+        if (this.props.focus) {
+            this.refs.button.focus();
+        }
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title={this.props.title}>
+                    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>
             </BaseDialog>

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -15,11 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import Matrix from 'matrix-js-sdk';
-
 import React from 'react';
 
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 import AccessibleButton from '../elements/AccessibleButton';
 
@@ -46,12 +45,6 @@ export default React.createClass({
         title: React.PropTypes.string,
     },
 
-    getDefaultProps: function() {
-        return {
-            title: "Authentication",
-        };
-    },
-
     getInitialState: function() {
         return {
             authError: null,
@@ -85,7 +78,7 @@ export default React.createClass({
                     <AccessibleButton onClick={this._onDismissClick}
                         className="mx_UserSettings_button"
                     >
-                        Dismiss
+                        {_t("Dismiss")}
                     </AccessibleButton>
                 </div>
             );
@@ -105,7 +98,7 @@ export default React.createClass({
         return (
             <BaseDialog className="mx_InteractiveAuthDialog"
                 onFinished={this.props.onFinished}
-                title={this.state.authError ? 'Error' : this.props.title}
+                title={this.state.authError ? 'Error' : (this.props.title || _t('Authentication'))}
             >
                 {content}
             </BaseDialog>

src/components/views/dialogs/KeyShareDialog.js

@@ -0,0 +1,172 @@
+/*
+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 sdk from '../../../index';
+
+import { _t } 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: React.PropTypes.object.isRequired,
+        userId: React.PropTypes.string.isRequired,
+        deviceId: React.PropTypes.string.isRequired,
+        onFinished: React.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.createDialog(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 = "You added a new device '%(displayName)s', which is"
+                + " requesting encryption keys.";
+        } else {
+            text = "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/NeedToRegisterDialog.js

@@ -1,78 +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,
- * });
- */
-
-import React from 'react';
-import dis from '../../../dispatcher';
-import sdk from '../../../index';
-
-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() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return (
-            <BaseDialog className="mx_NeedToRegisterDialog"
-                onFinished={this.props.onFinished}
-                title={this.props.title}
-            >
-                <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>
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/QuestionDialog.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'QuestionDialog',
@@ -33,7 +34,6 @@ export default React.createClass({
             title: "",
             description: "",
             extraButtons: null,
-            button: "OK",
             focus: true,
             hasCancelButton: true,
         };
@@ -51,7 +51,7 @@ export default React.createClass({
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const cancelButton = this.props.hasCancelButton ? (
             <button onClick={this.onCancel}>
-                Cancel
+                {_t("Cancel")}
             </button>
         ) : null;
         return (
@@ -64,7 +64,7 @@ export default React.createClass({
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this.onOk} autoFocus={this.props.focus}>
-                        {this.props.button}
+                        {this.props.button || _t('OK')}
                     </button>
                     {this.props.extraButtons}
                     {cancelButton}

src/components/views/dialogs/SessionRestoreErrorDialog.js

@@ -18,6 +18,7 @@ import React from 'react';
 import sdk from '../../../index';
 import SdkConfig from '../../../SdkConfig';
 import Modal from '../../../Modal';
+import { _t, _tJsx } from '../../../languageHandler';
 
 
 export default React.createClass({
@@ -43,29 +44,32 @@ export default React.createClass({
 
         if (SdkConfig.get().bug_report_endpoint_url) {
             bugreport = (
-                <p>Otherwise, <a onClick={this._sendBugReport} href='#'>
-                   click here</a> to send a bug report.
+                <p>
+                {_tJsx(
+                    "Otherwise, <a>click here</a> to send a bug report.",
+                    /<a>(.*?)<\/a>/, (sub) => <a onClick={this._sendBugReport} key="bugreport" href='#'>{sub}</a>,
+                )}
                 </p>
             );
         }
 
         return (
             <BaseDialog className="mx_ErrorDialog" onFinished={this.props.onFinished}
-                    title='Unable to restore session'>
+                    title={_t('Unable to restore session')}>
                 <div className="mx_Dialog_content">
-                    <p>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("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>If you have previously used a more recent version of Riot, your session
-                    may be incompatible with this version. Close this window and return
-                    to the more recent version.</p>
+                    <p>{_t("If you have previously used a more recent version of Riot, your session " +
+                    "may be incompatible with this version. Close this window and return " +
+                    "to the more recent version.")}</p>
 
                     {bugreport}
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button className="mx_Dialog_primary" onClick={this._continueClicked}>
-                        Continue anyway
+                        {_t("Continue anyway")}
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/SetDisplayNameDialog.js

@@ -1,87 +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.
-*/
-
-import React from 'react';
-import sdk from '../../../index';
-import MatrixClientPeg from '../../../MatrixClientPeg';
-
-/**
- * Prompt the user to set a display name.
- *
- * On success, `onFinished(true, newDisplayName)` is called.
- */
-export default 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();
-    },
-
-    onValueChange: function(ev) {
-        this.setState({
-            value: ev.target.value
-        });
-    },
-
-    onFormSubmit: function(ev) {
-        ev.preventDefault();
-        this.props.onFinished(true, this.state.value);
-        return false;
-    },
-
-    render: function() {
-        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
-        return (
-            <BaseDialog className="mx_SetDisplayNameDialog"
-                onFinished={this.props.onFinished}
-                title="Set a Display Name"
-            >
-                <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>
-            </BaseDialog>
-        );
-    },
-});

src/components/views/dialogs/SetEmailDialog.js

@@ -0,0 +1,164 @@
+/*
+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 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: React.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.createDialog(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.createDialog(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.createDialog(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.createDialog(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.createDialog(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,294 @@
+/*
+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 sdk from '../../../index';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import classnames from 'classnames';
+import KeyCode from '../../../KeyCode';
+import { _t, _tJsx } 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: React.PropTypes.func.isRequired,
+        // Called when the user requests to register with a different homeserver
+        onDifferentServerClicked: React.PropTypes.func.isRequired,
+        // Called if the user wants to switch to login instead
+        onLoginClick: React.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() {
+        // 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="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>
+                        { _tJsx(
+                            'This will be your account name on the <span></span> ' +
+                            'homeserver, or you can pick a <a>different server</a>.',
+                            [
+                                /<span><\/span>/,
+                                /<a>(.*?)<\/a>/,
+                            ],
+                            [
+                                (sub) => <span>{this.props.homeserverUrl}</span>,
+                                (sub) => <a href="#" onClick={this.props.onDifferentServerClicked}>{sub}</a>,
+                            ],
+                        )}
+                    </p>
+                    <p>
+                        { _tJsx(
+                            'If you already have a Matrix account you can <a>log in</a> instead.',
+                            /<a>(.*?)<\/a>/,
+                            [(sub) => <a href="#" onClick={this.props.onLoginClick}>{sub}</a>],
+                        )}
+                    </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

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'TextInputDialog',
@@ -36,7 +37,6 @@ export default React.createClass({
             title: "",
             value: "",
             description: "",
-            button: "OK",
             focus: true,
         };
     },
@@ -73,7 +73,7 @@ export default React.createClass({
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.onCancel}>
-                        Cancel
+                        { _t("Cancel") }
                     </button>
                     <button className="mx_Dialog_primary" onClick={this.onOk}>
                         {this.props.button}

src/components/views/dialogs/UnknownDeviceDialog.js

@@ -16,10 +16,10 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import dis from '../../../dispatcher';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import GeminiScrollbar from 'react-gemini-scrollbar';
 import Resend from '../../../Resend';
+import { _t } from '../../../languageHandler';
 
 function DeviceListEntry(props) {
     const {userId, device} = props;
@@ -120,17 +120,17 @@ export default React.createClass({
         if (blacklistUnverified) {
             warning = (
                 <h4>
-                    You are currently blacklisting unverified devices; to send
-                    messages to these devices you must verify them.
+                    {_t("You are currently blacklisting unverified devices; to send " +
+                    "messages to these devices you must verify them.")}
                 </h4>
             );
         } else {
             warning = (
                 <div>
                     <p>
-                        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.
+                        {_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>
             );
@@ -145,14 +145,14 @@ export default React.createClass({
                             console.log("UnknownDeviceDialog closed by escape");
                             this.props.onFinished();
                 }}
-                title='Room contains unknown devices'
+                title={_t('Room contains unknown devices')}
             >
                 <GeminiScrollbar autoshow={false} className="mx_Dialog_content">
                     <h4>
-                        This room contains devices that you haven't seen before.
+                        {_t('"%(RoomName)s" contains devices that you haven\'t seen before.', {RoomName: this.props.room.name})}
                     </h4>
                     { warning }
-                    Unknown devices:
+                    {_t("Unknown devices")}:
 
                     <UnknownDeviceList devices={this.props.devices} />
                 </GeminiScrollbar>
@@ -162,7 +162,7 @@ export default React.createClass({
                                 this.props.onFinished();
                                 Resend.resendUnsentEvents(this.props.room);
                             }}>
-                        Send anyway
+                        {_t("Send anyway")}
                     </button>
                     <button className="mx_Dialog_primary" autoFocus={ true }
                             onClick={() => {

src/components/views/elements/AccessibleButton.js

@@ -32,6 +32,8 @@ export default function AccessibleButton(props) {
     };
     restProps.tabIndex = restProps.tabIndex || "0";
     restProps.role = "button";
+    restProps.className = (restProps.className ? restProps.className + " " : "") + 
+                          "mx_AccessibleButton";
     return React.createElement(element, restProps, children);
 }
 

src/components/views/elements/ActionButton.js

@@ -0,0 +1,84 @@
+/*
+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';
+
+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();
+        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}
+            >
+                <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.
@@ -138,7 +139,7 @@ export default React.createClass({
                         onClick={this.onClick.bind(this, i)}
                         onMouseEnter={this.onMouseEnter.bind(this, i)}
                         onMouseLeave={this.onMouseLeave}
-                        key={this.props.addressList[i].userId}
+                        key={this.props.addressList[i].addressType + "/" + this.props.addressList[i].address}
                         ref={(ref) => { this.addressListElement = ref; }}
                     >
                         <AddressTile address={this.props.addressList[i]} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />

src/components/views/elements/AddressTile.js

@@ -16,12 +16,11 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var classNames = require('classnames');
-var sdk = require("../../../index");
-var Invite = require("../../../Invite");
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var Avatar = require('../../../Avatar');
+import React from 'react';
+import classNames from 'classnames';
+import sdk from "../../../index";
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import { _t } from '../../../languageHandler';
 
 // React PropType definition for an object describing
 // an address that can be invited to a room (which
@@ -142,7 +141,7 @@ export default React.createClass({
             });
 
             info = (
-                <div className={unknownClasses}>Unknown Address</div>
+                <div className={unknownClasses}>{_t("Unknown Address")}</div>
             );
         }
 

src/components/views/elements/AppPermission.js

@@ -0,0 +1,74 @@
+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 === 'demo.riot.im' ||
+            wurl.hostname === 'localhost'
+        )) {
+            return true;
+        }
+        return false;
+    }
+
+    render() {
+        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'>Do you want to load widget from URL:</span> <span className='mx_AppPermissionWarningTextURL'>{this.state.curlBase}</span>
+                </div>
+                <input
+                    className='mx_AppPermissionButton'
+                    type='button'
+                    value={_t('Allow')}
+                    onClick={this.props.onPermissionGranted}
+                />
+            </div>
+        );
+    }
+}
+
+AppPermission.propTypes = {
+    url: PropTypes.string.isRequired,
+    onPermissionGranted: PropTypes.func.isRequired,
+};
+AppPermission.defaultProps = {
+    onPermissionGranted: function() {},
+};

src/components/views/elements/AppTile.js

@@ -0,0 +1,261 @@
+/*
+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 React from 'react';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import SdkConfig from '../../../SdkConfig';
+import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+import AppPermission from './AppPermission';
+import MessageSpinner from './MessageSpinner';
+import WidgetUtils from '../../../WidgetUtils';
+
+const ALLOWED_APP_URL_SCHEMES = ['https:', 'http:'];
+const betaHelpMsg = 'This feature is currently experimental and is intended for beta testing only';
+
+export default React.createClass({
+    displayName: 'AppTile',
+
+    propTypes: {
+        id: React.PropTypes.string.isRequired,
+        url: React.PropTypes.string.isRequired,
+        name: React.PropTypes.string.isRequired,
+        room: React.PropTypes.object.isRequired,
+        type: React.PropTypes.string.isRequired,
+        // Specifying 'fullWidth' as true will render the app tile to fill the width of the app drawer continer.
+        // This should be set to true when there is only one widget in the app drawer, otherwise it should be false.
+        fullWidth: React.PropTypes.bool,
+    },
+
+    getDefaultProps: function() {
+        return {
+            url: "",
+        };
+    },
+
+    getInitialState: function() {
+        const widgetPermissionId = [this.props.room.roomId, encodeURIComponent(this.props.url)].join('_');
+        const hasPermissionToLoad = localStorage.getItem(widgetPermissionId);
+        return {
+            loading: false,
+            widgetUrl: this.props.url,
+            widgetPermissionId: widgetPermissionId,
+            hasPermissionToLoad: Boolean(hasPermissionToLoad === 'true'),
+            error: null,
+            deleting: false,
+        };
+    },
+
+    // Returns true if props.url is a scalar URL, typically https://scalar.vector.im/api
+    isScalarUrl: function() {
+        const scalarUrl = SdkConfig.get().integrations_rest_url;
+        return scalarUrl && this.props.url.startsWith(scalarUrl);
+    },
+
+    componentWillMount: function() {
+        if (!this.isScalarUrl()) {
+            return;
+        }
+        // Fetch the token before loading the iframe as we need to mangle the URL
+        this.setState({
+            loading: true,
+        });
+        this._scalarClient = new ScalarAuthClient();
+        this._scalarClient.getScalarToken().done((token) => {
+            // Append scalar_token as a query param
+            this._scalarClient.scalarToken = token;
+            const u = url.parse(this.props.url);
+            if (!u.search) {
+                u.search = "?scalar_token=" + encodeURIComponent(token);
+            } else {
+                u.search += "&scalar_token=" + encodeURIComponent(token);
+            }
+
+            this.setState({
+                error: null,
+                widgetUrl: u.format(),
+                loading: false,
+            });
+        }, (err) => {
+            this.setState({
+                error: err.message,
+                loading: false,
+            });
+        });
+    },
+
+    _canUserModify: function() {
+        return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
+    },
+
+    _onEditClick: function(e) {
+        console.log("Edit widget ID ", this.props.id);
+        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        const src = this._scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'type_' + this.props.type);
+        Modal.createDialog(IntegrationsManager, {
+            src: src,
+        }, "mx_IntegrationsManager");
+    },
+
+    /* If user has permission to modify widgets, delete the widget, otherwise revoke access for the widget to load in the user's browser
+    */
+    _onDeleteClick: function() {
+        if (this._canUserModify()) {
+            console.log("Delete widget %s", this.props.id);
+            this.setState({deleting: true});
+            MatrixClientPeg.get().sendStateEvent(
+                this.props.room.roomId,
+                'im.vector.modular.widgets',
+                {}, // empty content
+                this.props.id,
+            ).then(() => {
+                console.log('Deleted widget');
+            }, (e) => {
+                console.error('Failed to delete widget', e);
+                this.setState({deleting: false});
+            });
+        } else {
+            console.log("Revoke widget permissions - %s", this.props.id);
+            this._revokeWidgetPermission();
+        }
+    },
+
+    // Widget labels to render, depending upon user permissions
+    // These strings are translated at the point that they are inserted in to the DOM, in the render method
+    _deleteWidgetLabel() {
+        if (this._canUserModify()) {
+            return 'Delete widget';
+        }
+        return 'Revoke widget access';
+    },
+
+    /* TODO -- Store permission in account data so that it is persisted across multiple devices */
+    _grantWidgetPermission() {
+        console.warn('Granting permission to load widget - ', this.state.widgetUrl);
+        localStorage.setItem(this.state.widgetPermissionId, true);
+        this.setState({hasPermissionToLoad: true});
+    },
+
+    _revokeWidgetPermission() {
+        console.warn('Revoking permission to load widget - ', this.state.widgetUrl);
+        localStorage.removeItem(this.state.widgetPermissionId);
+        this.setState({hasPermissionToLoad: false});
+    },
+
+    formatAppTileName: function() {
+        let appTileName = "No name";
+        if(this.props.name && this.props.name.trim()) {
+            appTileName = this.props.name.trim();
+            appTileName = appTileName[0].toUpperCase() + appTileName.slice(1).toLowerCase();
+        }
+        return appTileName;
+    },
+
+    render: function() {
+        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";
+        const parsedWidgetUrl = url.parse(this.state.widgetUrl);
+        let safeWidgetUrl = '';
+        if (ALLOWED_APP_URL_SCHEMES.indexOf(parsedWidgetUrl.protocol) !== -1) {
+            safeWidgetUrl = url.format(parsedWidgetUrl);
+        }
+
+        if (this.state.loading) {
+            appTileBody = (
+                <div className='mx_AppTileBody mx_AppLoading'>
+                    <MessageSpinner msg='Loading...'/>
+                </div>
+            );
+        } else if (this.state.hasPermissionToLoad == true) {
+            appTileBody = (
+                <div className="mx_AppTileBody">
+                    <iframe
+                        ref="appFrame"
+                        src={safeWidgetUrl}
+                        allowFullScreen="true"
+                        sandbox={sandboxFlags}
+                    ></iframe>
+                </div>
+            );
+        } else {
+            appTileBody = (
+                <div className="mx_AppTileBody">
+                    <AppPermission
+                        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.svg';
+        let deleteClasses = 'mx_filterFlipColor mx_AppTileMenuBarWidget';
+        if(this._canUserModify()) {
+            deleteIcon = 'img/cancel-red.svg';
+            deleteClasses += ' mx_AppTileMenuBarWidgetDelete';
+        }
+
+        return (
+            <div className={this.props.fullWidth ? "mx_AppTileFullWidth" : "mx_AppTile"} id={this.props.id}>
+                <div className="mx_AppTileMenuBar">
+                    {this.formatAppTileName()}
+                    <span className="mx_AppTileMenuBarWidgets">
+                        <span className="mx_Beta" alt={betaHelpMsg} title={betaHelpMsg}>&#946;</span>
+                        {/* Edit widget */}
+                        {showEditButton && <img
+                            src="img/edit.svg"
+                            className="mx_filterFlipColor mx_AppTileMenuBarWidget mx_AppTileMenuBarWidgetPadding"
+                            width="8" height="8"
+                            alt={_t('Edit')}
+                            title={_t('Edit')}
+                            onClick={this._onEditClick}
+                        />}
+
+                        {/* Delete widget */}
+                        <img src={deleteIcon}
+                        className={deleteClasses}
+                        width="8" height="8"
+                        alt={_t(deleteWidgetLabel)}
+                        title={_t(deleteWidgetLabel)}
+                        onClick={this._onDeleteClick}
+                        />
+                    </span>
+                </div>
+                {appTileBody}
+            </div>
+        );
+    },
+});

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

@@ -18,6 +18,7 @@ import React from 'react';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import sdk from '../../../index';
 import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
 
 export default React.createClass({
     displayName: 'DeviceVerifyButtons',
@@ -50,42 +51,10 @@ export default React.createClass({
     },
 
     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.state.device.getDisplayName() }</span></li>
-                            <li><label>Device ID:</label>   <span><code>{ this.state.device.deviceId}</code></span></li>
-                            <li><label>Device key:</label>  <span><code><b>{ this.state.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.state.device.deviceId, true
-                    );
-                }
-            },
+        const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog');
+        Modal.createDialog(DeviceVerifyDialog, {
+            userId: this.props.userId,
+            device: this.state.device,
         });
     },
 
@@ -114,14 +83,14 @@ export default React.createClass({
             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>
             );
         }
@@ -130,14 +99,14 @@ export default React.createClass({
             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/DirectorySearchBox.js

@@ -93,7 +93,7 @@ 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}
                 <span className="mx_DirectorySearchBox_clear_wrapper">

src/components/views/elements/Dropdown.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import classnames from 'classnames';
 import AccessibleButton from './AccessibleButton';
+import { _t } from '../../../languageHandler';
 
 class MenuOption extends React.Component {
     constructor(props) {
@@ -114,8 +115,11 @@ export default class Dropdown extends React.Component {
     }
 
     componentWillReceiveProps(nextProps) {
+        if (!nextProps.children || nextProps.children.length === 0) {
+            return;
+        }
         this._reindexChildren(nextProps.children);
-        const firstChild = React.Children.toArray(nextProps.children)[0];
+        const firstChild = nextProps.children[0];
         this.setState({
             highlightedOption: firstChild ? firstChild.key : null,
         });
@@ -149,10 +153,12 @@ export default class Dropdown extends React.Component {
     }
 
     _onInputClick(ev) {
-        this.setState({
-            expanded: !this.state.expanded,
-        });
-        ev.preventDefault();
+        if (!this.state.expanded) {
+            this.setState({
+                expanded: true,
+            });
+            ev.preventDefault();
+        }
     }
 
     _onMenuOptionClick(dropdownKey) {
@@ -248,13 +254,10 @@ export default class Dropdown extends React.Component {
                 </MenuOption>
             );
         });
-
-        if (!this.state.searchQuery) {
-            options.push(
-                <div key="_searchprompt" className="mx_Dropdown_searchPrompt">
-                    Type to search...
-                </div>
-            );
+        if (options.length === 0) {
+            return [<div key="0" className="mx_Dropdown_option">
+                {_t("No results")}
+            </div>];
         }
         return options;
     }
@@ -267,16 +270,20 @@ export default class Dropdown extends React.Component {
 
         let menu;
         if (this.state.expanded) {
-            currentValue = <input type="text" className="mx_Dropdown_option"
-                ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
-                onKeyUp={this._onInputKeyUp}
-                onChange={this._onInputChange}
-                value={this.state.searchQuery}
-            />;
+            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>;
-        } else {
+        }
+
+        if (!currentValue) {
             const selectedChild = this.props.getShortOption ?
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
@@ -313,6 +320,7 @@ Dropdown.propTypes = {
     onOptionChange: React.PropTypes.func.isRequired,
     // Called when the value of the search field changes
     onSearchChange: React.PropTypes.func,
+    searchEnabled: React.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

src/components/views/elements/EditableTextContainer.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
-import q from 'q';
+import Promise from 'bluebird';
 
 /**
  * A component which wraps an EditableText, with a spinner while updates take
@@ -148,5 +148,5 @@ EditableTextContainer.defaultProps = {
     initialValue: "",
     placeholder: "",
     blurToSubmit: false,
-    onSubmit: function(v) {return q(); },
+    onSubmit: function(v) {return Promise.resolve(); },
 };

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,120 @@
+/*
+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 sdk from '../../../index';
+import UserSettingsStore from '../../../UserSettingsStore';
+import * as languageHandler from '../../../languageHandler';
+
+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 _localSettings = UserSettingsStore.getLocalSettings();
+            if (_localSettings.hasOwnProperty('language')) {
+              this.props.onOptionChange(_localSettings.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 value = null;
+        const _localSettings = UserSettingsStore.getLocalSettings();
+        if (_localSettings.hasOwnProperty('language')) {
+          value = this.props.value || _localSettings.language;
+        } else {
+          const 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: React.PropTypes.string,
+    onOptionChange: React.PropTypes.func.isRequired,
+    value: React.PropTypes.string,
+};

src/components/views/elements/MemberEventListSummary.js

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import React from 'react';
+import sdk from '../../../index';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MemberEventListSummary',
@@ -110,9 +112,13 @@ module.exports = React.createClass({
             return null;
         }
 
+        const EmojiText = sdk.getComponent('elements.EmojiText');
+
         return (
             <span className="mx_TextualEvent mx_MemberEventListSummary_summary">
-                {summaries.join(", ")}
+                <EmojiText>
+                    {summaries.join(", ")}
+                </EmojiText>
             </span>
         );
     },
@@ -203,28 +209,146 @@ module.exports = React.createClass({
      * @param {boolean} plural whether there were multiple users undergoing the same
      * transition.
      * @param {number} repeats the number of times the transition was repeated in a row.
-     * @returns {string} the written English equivalent of the transition.
+     * @returns {string} the written Human Readable equivalent of the transition.
      */
     _getDescriptionForTransition(t, plural, repeats) {
-        const beConjugated = plural ? "were" : "was";
-        const invitation = "their invitation" + (plural || (repeats > 1) ? "s" : "");
-
+        // 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;
-        const map = {
-            "joined": "joined",
-            "left": "left",
-            "joined_and_left": "joined and left",
-            "left_and_joined": "left and rejoined",
-            "invite_reject": "rejected " + invitation,
-            "invite_withdrawal": "had " + invitation + " withdrawn",
-            "invited": beConjugated + " invited",
-            "banned": beConjugated + " banned",
-            "unbanned": beConjugated + " unbanned",
-            "kicked": beConjugated + " kicked",
-        };
-
-        if (Object.keys(map).includes(t)) {
-            res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" );
+        switch(t) {
+            case "joined":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)sjoined %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)sjoined %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)sjoined", { severalUsers: "" })
+                        : _t("%(oneUser)sjoined", { oneUser: "" });
+                }
+                break;
+            case "left":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)sleft %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)sleft %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)sleft", { severalUsers: "" })
+                        : _t("%(oneUser)sleft", { oneUser: "" });
+                }
+               break;
+            case "joined_and_left":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)sjoined and left %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)sjoined and left %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)sjoined and left", { severalUsers: "" })
+                        : _t("%(oneUser)sjoined and left", { oneUser: "" });
+                }
+                break;
+            case "left_and_joined":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)sleft and rejoined %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)sleft and rejoined %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)sleft and rejoined", { severalUsers: "" })
+                        : _t("%(oneUser)sleft and rejoined", { oneUser: "" });
+                }
+                break;
+            case "invite_reject":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)srejected their invitations %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)srejected their invitation %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)srejected their invitations", { severalUsers: "" })
+                        : _t("%(oneUser)srejected their invitation", { oneUser: "" });
+                }
+                break;
+            case "invite_withdrawal":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)shad their invitations withdrawn %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)shad their invitation withdrawn %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)shad their invitations withdrawn", { severalUsers: "" })
+                        : _t("%(oneUser)shad their invitation withdrawn", { oneUser: "" });
+                }
+                break;
+            case "invited":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("were invited %(repeats)s times", { repeats: repeats })
+                        : _t("was invited %(repeats)s times", { repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("were invited")
+                        : _t("was invited");
+                }
+                break;
+            case "banned":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("were banned %(repeats)s times", { repeats: repeats })
+                        : _t("was banned %(repeats)s times", { repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("were banned")
+                        : _t("was banned");
+                }
+                break;
+            case "unbanned":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("were unbanned %(repeats)s times", { repeats: repeats })
+                        : _t("was unbanned %(repeats)s times", { repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("were unbanned")
+                        : _t("was unbanned");
+                }
+                break;
+            case "kicked":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("were kicked %(repeats)s times", { repeats: repeats })
+                        : _t("was kicked %(repeats)s times", { repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("were kicked")
+                        : _t("was kicked");
+                }
+                break;
+            case "changed_name":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)schanged their name %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)schanged their name %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)schanged their name", { severalUsers: "" })
+                        : _t("%(oneUser)schanged their name", { oneUser: "" });
+                }
+                break;
+            case "changed_avatar":
+                if (repeats > 1) {
+                    res = (plural)
+                        ? _t("%(severalUsers)schanged their avatar %(repeats)s times", { severalUsers: "", repeats: repeats })
+                        : _t("%(oneUser)schanged their avatar %(repeats)s times", { oneUser: "", repeats: repeats });
+                } else {
+                    res = (plural)
+                        ? _t("%(severalUsers)schanged their avatar", { severalUsers: "" })
+                        : _t("%(oneUser)schanged their avatar", { oneUser: "" });
+                }
+                break;
         }
 
         return res;
@@ -252,11 +376,12 @@ module.exports = React.createClass({
             return items[0];
         } else if (remaining) {
             items = items.slice(0, itemLimit);
-            const other = " other" + (remaining > 1 ? "s" : "");
-            return items.join(', ') + ' and ' + remaining + other;
+            return (remaining > 1) 
+                ? _t("%(items)s and %(remaining)s others", { items: items.join(', '), remaining: remaining } )
+                : _t("%(items)s and one other", { items: items.join(', ') });
         } else {
             const lastItem = items.pop();
-            return items.join(', ') + ' and ' + lastItem;
+            return _t("%(items)s and %(lastItem)s", { items: items.join(', '), lastItem: lastItem });
         }
     },
 
@@ -267,7 +392,7 @@ module.exports = React.createClass({
             );
         });
         return (
-            <span className="mx_MemberEventListSummary_avatars">
+            <span className="mx_MemberEventListSummary_avatars" onClick={ this._toggleSummary }>
                 {avatars}
             </span>
         );
@@ -289,7 +414,24 @@ module.exports = React.createClass({
         switch (e.mxEvent.getContent().membership) {
             case 'invite': return 'invited';
             case 'ban': return 'banned';
-            case 'join': return 'joined';
+            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) {
@@ -350,6 +492,7 @@ module.exports = React.createClass({
 
     render: function() {
         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;
 
@@ -360,7 +503,7 @@ module.exports = React.createClass({
 
         if (fewEvents) {
             return (
-                <div className="mx_MemberEventListSummary">
+                <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                     {expandedEvents}
                 </div>
             );
@@ -418,7 +561,7 @@ module.exports = React.createClass({
         );
 
         return (
-            <div className="mx_MemberEventListSummary">
+            <div className="mx_MemberEventListSummary" data-scroll-tokens={eventIds}>
                 {toggleButton}
                 {summaryContainer}
                 {expanded ? <div className="mx_MemberEventListSummary_line">&nbsp;</div> : null}

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,195 @@
+/*
+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 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);
+        },
+        TYPE_USER_MENTION: 'TYPE_USER_MENTION',
+        TYPE_ROOM_MENTION: 'TYPE_ROOM_MENTION',
+    },
+
+    props: {
+        // 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),
+    },
+
+    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;
+        }
+
+        // Default to the empty array if no match for simplicity
+        // resource and prefix will be undefined instead of throwing
+        const matrixToMatch = regex.exec(nextProps.url) || [];
+
+        const resourceId = matrixToMatch[1]; // The room/user ID
+        const prefix = matrixToMatch[2]; // The first character of prefix
+
+        const pillType = {
+            '@': Pill.TYPE_USER_MENTION,
+            '#': Pill.TYPE_ROOM_MENTION,
+            '!': Pill.TYPE_ROOM_MENTION,
+        }[prefix];
+
+        let member;
+        let room;
+        switch (pillType) {
+            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);
+        });
+    },
+
+    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;
+        switch (this.state.pillType) {
+            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
+                        avatar = <MemberAvatar member={member} width={16} height={16}/>;
+                        pillClass = 'mx_UserPill';
+                    }
+            }
+                break;
+            case Pill.TYPE_ROOM_MENTION: {
+                const room = this.state.room;
+                if (room) {
+                    linkText = (room ? getDisplayAliasForRoom(room) : null) || resource;
+                    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={this.props.url} 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,18 +16,12 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-
-var roles = {
-    0: 'User',
-    50: 'Moderator',
-    100: 'Admin',
-};
+import React from 'react';
+import * as Roles from '../../../Roles';
+import { _t } from '../../../languageHandler';
 
+var LEVEL_ROLE_MAP = {};
 var reverseRoles = {};
-Object.keys(roles).forEach(function(key) {
-    reverseRoles[roles[key]] = key;
-});
 
 module.exports = React.createClass({
     displayName: 'PowerSelector',
@@ -49,9 +43,16 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            custom: (roles[this.props.value] === undefined),
+            custom: (LEVEL_ROLE_MAP[this.props.value] === undefined),
         };
     },
+    
+    componentWillMount: function() {
+    	LEVEL_ROLE_MAP = Roles.levelRoleMap();
+    	Object.keys(LEVEL_ROLE_MAP).forEach(function(key) {
+			reverseRoles[LEVEL_ROLE_MAP[key]] = key;
+		});
+    },
 
     onSelectChange: function(event) {
         this.setState({ custom: event.target.value === "Custom" });
@@ -99,22 +100,34 @@ module.exports = React.createClass({
             selectValue = "Custom";
         }
         else {
-            selectValue = roles[this.props.value] || "Custom";
+            selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
         }
         var select;
         if (this.props.disabled) {
             select = <span>{ selectValue }</span>;
         }
         else {
+            // Each level must have a definition in LEVEL_ROLE_MAP
+            const levels = [0, 50, 100];
+            let options = levels.map((level) => {
+                return {
+                    value: LEVEL_ROLE_MAP[level],
+                    // Give a userDefault (users_default in the power event) of 0 but
+                    // because level !== undefined, this should never be used.
+                    text: Roles.textualPowerLevel(level, 0),
+                }
+            });
+            options.push({ 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>
+                    { options }
                 </select>;
         }
 

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

@@ -14,6 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 var React = require('react');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'TruncatedList',
@@ -33,7 +34,7 @@ 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>
                 );
             }
         };

src/components/views/elements/UserSelector.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UserSelector',
@@ -59,9 +60,9 @@ module.exports = React.createClass({
                         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/login/CaptchaForm.js

@@ -16,7 +16,9 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import { _t } from '../../../languageHandler';
+
 var DIV_ID = 'mx_recaptcha';
 
 /**
@@ -44,6 +46,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.
@@ -73,6 +79,10 @@ module.exports = React.createClass({
         }
     },
 
+    componentWillUnmount: function() {
+        this._resetRecaptcha();
+    },
+
     _renderRecaptcha: function(divId) {
         if (!global.grecaptcha) {
             console.error("grecaptcha not loaded!");
@@ -88,12 +98,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 {
@@ -117,7 +133,7 @@ module.exports = React.createClass({
 
         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}

src/components/views/login/CasLogin.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CasLogin',
@@ -28,7 +29,7 @@ module.exports = React.createClass({
     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

@@ -19,7 +19,6 @@ import React from 'react';
 import sdk from '../../../index';
 
 import { COUNTRIES } from '../../../phonenumber';
-import { charactersToImageNode } from '../../../HtmlUtils';
 
 const COUNTRIES_BY_ISO2 = new Object(null);
 for (const c of COUNTRIES) {
@@ -27,22 +26,27 @@ for (const c of COUNTRIES) {
 }
 
 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 == query) return true;
+    if (country.prefix.indexOf(query) !== -1) return true;
     return false;
 }
 
-const MAX_DISPLAYED_ROWS = 2;
-
 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() {
@@ -50,7 +54,7 @@ export default class CountryDropdown extends React.Component {
             // If no value is given, we start with the first
             // country selected, but our parent component
             // doesn't know this, therefore we do this.
-            this.props.onOptionChange(COUNTRIES[0].iso2);
+            this.props.onOptionChange(COUNTRIES[0]);
         }
     }
 
@@ -60,14 +64,26 @@ export default class CountryDropdown extends React.Component {
         });
     }
 
+    _onOptionChange(iso2) {
+        this.props.onOptionChange(COUNTRIES_BY_ISO2[iso2]);
+    }
+
     _flagImgForIso2(iso2) {
-        // Unicode Regional Indicator Symbol letter 'A'
-        const RIS_A = 0x1F1E6;
-        const ASCII_A = 65;
-        return charactersToImageNode(iso2,
-            RIS_A + (iso2.charCodeAt(0) - ASCII_A),
-            RIS_A + (iso2.charCodeAt(1) - ASCII_A),
-        );
+        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() {
@@ -93,14 +109,10 @@ export default class CountryDropdown extends React.Component {
             displayedCountries = COUNTRIES;
         }
 
-        if (displayedCountries.length > MAX_DISPLAYED_ROWS) {
-            displayedCountries = displayedCountries.slice(0, MAX_DISPLAYED_ROWS);
-        }
-
         const options = displayedCountries.map((country) => {
             return <div key={country.iso2}>
                 {this._flagImgForIso2(country.iso2)}
-                {country.name}
+                {country.name} <span>(+{country.prefix})</span>
             </div>;
         });
 
@@ -108,18 +120,21 @@ export default class CountryDropdown extends React.Component {
         // values between mounting and the initial value propgating
         const value = this.props.value || COUNTRIES[0].iso2;
 
-        return <Dropdown className={this.props.className}
-            onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
-            menuWidth={298} getShortOption={this._flagImgForIso2}
-            value={value}
+        return <Dropdown className={this.props.className + " left_aligned"}
+            onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
+            menuWidth={298} getShortOption={this._getShortOption}
+            value={value} searchEnabled={true}
         >
             {options}
-        </Dropdown>
+        </Dropdown>;
     }
 }
 
 CountryDropdown.propTypes = {
     className: React.PropTypes.string,
+    isSmall: React.PropTypes.bool,
+    // if isSmall, show +44 in the selected value
+    showPrefix: React.PropTypes.bool,
     onOptionChange: React.PropTypes.func.isRequired,
     value: React.PropTypes.string,
 };

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,24 +24,24 @@ 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.
+                        {_t("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.
+                        {_t("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 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

@@ -20,6 +20,7 @@ import url from 'url';
 import classnames from 'classnames';
 
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 /* This file contains a collection of components which are used by the
  * InteractiveAuth to prompt the user to enter the information needed
@@ -128,8 +129,8 @@ export const PasswordAuthEntry = React.createClass({
 
         return (
             <div>
-                <p>To continue, please enter your password.</p>
-                <p>Password:</p>
+                <p>{_t("To continue, please enter your password.")}</p>
+                <p>{_t("Password:")}</p>
                 <form onSubmit={this._onSubmit}>
                     <input
                         ref="passwordField"
@@ -255,8 +256,8 @@ export const EmailIdentityAuthEntry = React.createClass({
         } else {
             return (
                 <div>
-                    <p>An email has been sent to <i>{this.props.inputs.emailAddress}</i></p>
-                    <p>Please check your email to continue registration.</p>
+                    <p>{_t("An email has been sent to")} <i>{this.props.inputs.emailAddress}</i></p>
+                    <p>{_t("Please check your email to continue registration.")}</p>
                 </div>
             );
         }
@@ -348,7 +349,7 @@ export const MsisdnAuthEntry = React.createClass({
                 });
             } else {
                 this.setState({
-                    errorText: "Token incorrect",
+                    errorText: _t("Token incorrect"),
                 });
             }
         }).catch((e) => {
@@ -369,8 +370,8 @@ export const MsisdnAuthEntry = React.createClass({
             });
             return (
                 <div>
-                    <p>A text message has been sent to +<i>{this._msisdn}</i></p>
-                    <p>Please enter the code it contains:</p>
+                    <p>{_t("A text message has been sent to")} +<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"
@@ -379,7 +380,7 @@ export const MsisdnAuthEntry = React.createClass({
                                 onChange={this._onTokenChange}
                             />
                             <br />
-                            <input type="submit" value="Submit"
+                            <input type="submit" value={_t("Submit")}
                                 className={submitClasses}
                                 disabled={!enableSubmit}
                             />
@@ -439,7 +440,7 @@ export const FallbackAuthEntry = React.createClass({
     render: function() {
         return (
             <div>
-                <a onClick={this._onShowFallbackClick}>Start authentication</a>
+                <a onClick={this._onShowFallbackClick}>{_t("Start authentication")}</a>
                 <div className="error">
                     {this.props.errorText}
                 </div>

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

@@ -16,100 +16,163 @@ limitations under the License.
 */
 
 import React from 'react';
-import ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import {field_input_incorrect} from '../../../UiEffects';
 
 
 /**
  * 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,
-        initialPhoneCountry: React.PropTypes.string,
-        initialPhoneNumber: React.PropTypes.string,
-        initialPassword: React.PropTypes.string,
-        onUsernameChanged: React.PropTypes.func,
-        onPhoneCountryChanged: React.PropTypes.func,
-        onPhoneNumberChanged: 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() {},
-            onPhoneCountryChanged: function() {},
-            onPhoneNumberChanged: function() {},
-            initialUsername: "",
-            initialPhoneCountry: "",
-            initialPhoneNumber: "",
-            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();
+        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,
-            this.state.phoneCountry,
-            this.state.phoneNumber,
+            null,
+            null,
             this.state.password,
         );
-    },
+    }
 
-    onUsernameChanged: function(ev) {
+    onUsernameChanged(ev) {
         this.setState({username: ev.target.value});
         this.props.onUsernameChanged(ev.target.value);
-    },
+    }
 
-    onPhoneCountryChanged: function(country) {
-        this.setState({phoneCountry: country});
-        this.props.onPhoneCountryChanged(country);
-    },
+    onLoginTypeChange(loginType) {
+        this.setState({
+            loginType: loginType,
+            username: "" // Reset because email and username use the same state
+        });
+    }
 
-    onPhoneNumberChanged: function(ev) {
+    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: function(ev) {
+    onPasswordChanged(ev) {
         this.setState({password: ev.target.value});
         this.props.onPasswordChanged(ev.target.value);
-    },
+    }
 
-    render: function() {
+    renderLoginField(loginType) {
+        switch(loginType) {
+            case PasswordLogin.LOGIN_FIELD_EMAIL:
+                return <input
+                    className="mx_Login_field mx_Login_email"
+                    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
+                />;
+            case PasswordLogin.LOGIN_FIELD_MXID:
+                return <input
+                    className="mx_Login_field mx_Login_username"
+                    key="username_input"
+                    type="text"
+                    name="username" // make it a little easier for browser's remember-password
+                    onChange={this.onUsernameChanged}
+                    placeholder={_t('User name')}
+                    value={this.state.username}
+                    autoFocus
+                />;
+            case PasswordLogin.LOGIN_FIELD_PHONE:
+                const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+                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}
+                    />
+                    <input
+                        className="mx_Login_phoneNumberField mx_Login_field mx_Login_field_has_prefix"
+                        ref="phoneNumber"
+                        key="phone_input"
+                        type="text"
+                        name="phoneNumber"
+                        onChange={this.onPhoneNumberChanged}
+                        placeholder={_t("Mobile phone number")}
+                        value={this.state.phoneNumber}
+                        autoFocus
+                    />
+                </div>;
+        }
+    }
+
+    render() {
         var forgotPasswordJsx;
 
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = (
                 <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    Forgot your password?
+                    { _t('Forgot your password?') }
                 </a>
             );
         }
@@ -119,38 +182,54 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             error: this.props.loginIncorrect,
         });
 
-        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        const loginField = this.renderLoginField(this.state.loginType);
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                <input className="mx_Login_field mx_Login_username" 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 />
-                or
-                <div className="mx_Login_phoneSection">
-                    <CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
-                        className="mx_Login_phoneCountry"
-                        value={this.state.phoneCountry}
-                    />
-                    <input type="text" ref="phoneNumber"
-                        onChange={this.onPhoneNumberChanged}
-                        placeholder="Mobile phone number"
-                        className="mx_Login_phoneNumberField mx_Login_field"
-                        value={this.state.phoneNumber}
-                        name="phoneNumber"
-                    />
+                <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}
+                        onOptionChange={this.onLoginTypeChange}>
+                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('my Matrix ID') }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
+                    </Dropdown>
                 </div>
-                <br />
+                {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') } />
                 <br />
                 {forgotPasswordJsx}
-                <input className="mx_Login_submit" type="submit" value="Sign in" />
+                <input className="mx_Login_submit" type="submit" value={ _t('Sign in') } />
                 </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: React.PropTypes.func.isRequired, // fn(username, password)
+    onForgotPasswordClick: React.PropTypes.func, // fn()
+    initialUsername: React.PropTypes.string,
+    initialPhoneCountry: React.PropTypes.string,
+    initialPhoneNumber: React.PropTypes.string,
+    initialPassword: React.PropTypes.string,
+    onUsernameChanged: React.PropTypes.func,
+    onPhoneCountryChanged: React.PropTypes.func,
+    onPhoneNumberChanged: React.PropTypes.func,
+    onPasswordChanged: React.PropTypes.func,
+    loginIncorrect: React.PropTypes.bool,
+};
+
+module.exports = PasswordLogin;

src/components/views/login/RegistrationForm.js

@@ -21,6 +21,7 @@ import sdk from '../../../index';
 import Email from '../../../email';
 import { looksValid as phoneNumberLooksValid } from '../../../phonenumber';
 import Modal from '../../../Modal';
+import { _t } from '../../../languageHandler';
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_COUNTRY = 'field_phone_country';
@@ -53,11 +54,6 @@ module.exports = React.createClass({
             })).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,
-
         minPasswordLength: React.PropTypes.number,
         onError: React.PropTypes.func,
         onRegisterClick: React.PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
@@ -100,30 +96,29 @@ module.exports = React.createClass({
             if (this.refs.email.value == '') {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 Modal.createDialog(QuestionDialog, {
-                    title: "Warning",
+                    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() {
+    _doSubmit: function(ev) {
         let email = this.refs.email.value.trim();
         var promise = this.props.onRegisterClick({
-            username: this.refs.username.value.trim() || this.props.guestUsername,
+            username: this.refs.username.value.trim(),
             password: this.refs.password.value.trim(),
             email: email,
             phoneCountry: this.state.phoneCountry,
@@ -191,7 +186,7 @@ module.exports = React.createClass({
                 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,
@@ -270,7 +265,8 @@ module.exports = React.createClass({
 
     _onPhoneCountryChange(newVal) {
         this.setState({
-            phoneCountry: newVal,
+            phoneCountry: newVal.iso2,
+            phonePrefix: newVal.prefix,
         });
     },
 
@@ -280,7 +276,7 @@ module.exports = React.createClass({
         const emailSection = (
             <div>
                 <input type="text" ref="email"
-                    autoFocus={true} placeholder="Email address (optional)"
+                    autoFocus={true} placeholder={_t("Email address (optional)")}
                     defaultValue={this.props.defaultEmail}
                     className={this._classForField(FIELD_EMAIL, 'mx_Login_field')}
                     onBlur={function() {self.validateField(FIELD_EMAIL);}}
@@ -303,7 +299,7 @@ module.exports = React.createClass({
             } else if (this.state.selectedTeam) {
                 belowEmailSection = (
                     <p className="mx_Login_support">
-                        You are registering with {this.state.selectedTeam.name}
+                        {_t("You are registering with %(SelectedTeamName)s", {SelectedTeamName: this.state.selectedTeam.name})}
                     </p>
                 );
             }
@@ -313,14 +309,19 @@ module.exports = React.createClass({
         const phoneSection = (
             <div className="mx_Login_phoneSection">
                 <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
-                    className="mx_Login_phoneCountry"
+                    className="mx_Login_phoneCountry mx_Login_field_prefix"
                     value={this.state.phoneCountry}
+                    isSmall={true}
+                    showPrefix={true}
                 />
                 <input type="text" ref="phoneNumber"
-                    placeholder="Mobile phone number (optional)"
+                    placeholder={_t("Mobile phone number (optional)")}
                     defaultValue={this.props.defaultPhoneNumber}
                     className={this._classForField(
-                        FIELD_PHONE_NUMBER, 'mx_Login_phoneNumberField', 'mx_Login_field'
+                        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}
@@ -329,13 +330,10 @@ module.exports = React.createClass({
         );
 
         const registerButton = (
-            <input className="mx_Login_submit" type="submit" value="Register" />
+            <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
 
-        let placeholderUserName = "User name";
-        if (this.props.guestUsername) {
-            placeholderUserName += " (default: " + this.props.guestUsername + ")";
-        }
+        let placeholderUserName = _t("User name");
 
         return (
             <div>
@@ -348,16 +346,13 @@ module.exports = React.createClass({
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
                         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} />
+                        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);}}
                         defaultValue={this.props.defaultPassword} />

src/components/views/login/ServerConfig.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var Modal = require('../../../Modal');
 var sdk = require('../../../index');
+import { _t } from '../../../languageHandler';
 
 /**
  * A pure UI component which displays the HS and IS to use.
@@ -27,8 +28,7 @@ module.exports = React.createClass({
     displayName: 'ServerConfig',
 
     propTypes: {
-        onHsUrlChanged: React.PropTypes.func,
-        onIsUrlChanged: React.PropTypes.func,
+        onServerConfigChange: React.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.
@@ -50,8 +50,7 @@ module.exports = React.createClass({
 
     getDefaultProps: function() {
         return {
-            onHsUrlChanged: function() {},
-            onIsUrlChanged: function() {},
+            onServerConfigChange: function() {},
             customHsUrl: "",
             customIsUrl: "",
             withToggleButton: false,
@@ -75,7 +74,10 @@ module.exports = React.createClass({
             this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, function() {
                 var 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,
+                });
             });
         });
     },
@@ -85,7 +87,10 @@ module.exports = React.createClass({
             this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, function() {
                 var 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,
+                });
             });
         });
     },
@@ -102,12 +107,16 @@ module.exports = React.createClass({
             configVisible: visible
         });
         if (!visible) {
-            this.props.onHsUrlChanged(this.props.defaultHsUrl);
-            this.props.onIsUrlChanged(this.props.defaultIsUrl);
+            this.props.onServerConfigChange({
+                hsUrl : this.props.defaultHsUrl,
+                isUrl : this.props.defaultIsUrl,
+            });
         }
         else {
-            this.props.onHsUrlChanged(this.state.hs_url);
-            this.props.onIsUrlChanged(this.state.is_url);
+            this.props.onServerConfigChange({
+                hsUrl : this.state.hs_url,
+                isUrl : this.state.is_url,
+            });
         }
     },
 
@@ -123,19 +132,19 @@ module.exports = React.createClass({
         var 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>
             );
@@ -147,7 +156,7 @@ module.exports = React.createClass({
             <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,7 +172,7 @@ 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>

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) {
@@ -77,7 +77,7 @@ export default class MAudioBody extends React.Component {
             return (
                 <span className="mx_MAudioBody" ref="body">
                     <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting audio
+                    {_t("Error decrypting audio")}
                 </span>
             );
         }

src/components/views/messages/MFileBody.js

@@ -20,10 +20,10 @@ import React from 'react';
 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';
 
 
@@ -202,7 +202,7 @@ module.exports = React.createClass({
      * @return {string} the human readable link text for the attachment.
      */
     presentableTextForFile: function(content) {
-        var linkText = 'Attachment';
+        var 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 +261,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");
 
@@ -283,7 +283,8 @@ module.exports = React.createClass({
                     }).catch((err) => {
                         console.warn("Unable to decrypt attachment: ", err);
                         Modal.createDialog(ErrorDialog, {
-                            description: "Error decrypting attachment"
+                        	title: _t("Error"),
+                            description: _t("Error decrypting attachment"),
                         });
                     }).finally(() => {
                         decrypting = false;
@@ -295,7 +296,7 @@ module.exports = React.createClass({
                     <span className="mx_MFileBody" ref="body">
                         <div className="mx_MImageBody_download">
                             <a href="javascript:void(0)" onClick={decrypt}>
-                                Decrypt {text}
+                                { _t("Decrypt %(text)s", { text: text }) }
                             </a>
                         </div>
                     </span>
@@ -314,7 +315,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 }),
                 }, "*");
             };
 
@@ -346,7 +347,7 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a className="mx_ImageBody_downloadLink" href={contentUrl} target="_blank">
+                            <a className="mx_ImageBody_downloadLink" href={contentUrl} download={fileName} target="_blank">
                                 { fileName }
                             </a>
                             <div className="mx_MImageBody_size">
@@ -360,9 +361,9 @@ module.exports = React.createClass({
                 return (
                     <span className="mx_MFileBody">
                         <div className="mx_MImageBody_download">
-                            <a href={contentUrl} target="_blank" rel="noopener">
+                            <a href={contentUrl} download={fileName} target="_blank" rel="noopener">
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref="downloadImage"/>
-                                Download {text}
+                                { _t("Download %(text)s", { text: text }) }
                             </a>
                         </div>
                     </span>
@@ -371,7 +372,7 @@ module.exports = React.createClass({
         } else {
             var extra = text ? (': ' + text) : '';
             return <span className="mx_MFileBody">
-                Invalid file{extra}
+                { _t("Invalid file%(extra)s", { extra: extra }) }
             </span>;
         }
     },

src/components/views/messages/MImageBody.js

@@ -24,8 +24,9 @@ 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 UserSettingsStore from '../../../UserSettingsStore';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MImageBody',
@@ -56,6 +57,7 @@ module.exports = React.createClass({
             const ImageView = sdk.getComponent("elements.ImageView");
             const params = {
                 src: httpUrl,
+                name: content.body && content.body.length > 0 ? content.body : _t('Attachment'),
                 mxEvent: this.props.mxEvent,
             };
 
@@ -121,7 +123,7 @@ module.exports = React.createClass({
         this.fixupHeight();
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            let thumbnailPromise = q(null);
+            let thumbnailPromise = Promise.resolve(null);
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file,
@@ -190,7 +192,7 @@ module.exports = React.createClass({
             return (
                 <span className="mx_MImageBody" ref="body">
                     <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting image
+                    {_t("Error decrypting image")}
                 </span>
             );
         }
@@ -237,13 +239,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

@@ -19,11 +19,10 @@ limitations under the License.
 import React from 'react';
 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 UserSettingsStore from '../../../UserSettingsStore';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MVideoBody',
@@ -80,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;
@@ -90,7 +89,7 @@ module.exports = React.createClass({
     componentDidMount: function() {
         const content = this.props.mxEvent.getContent();
         if (content.file !== undefined && this.state.decryptedUrl === null) {
-            var thumbnailPromise = q(null);
+            var thumbnailPromise = Promise.resolve(null);
             if (content.info.thumbnail_file) {
                 thumbnailPromise = decryptFile(
                     content.info.thumbnail_file
@@ -128,7 +127,7 @@ module.exports = React.createClass({
             return (
                 <span className="mx_MVideoBody" ref="body">
                     <img src="img/warning.svg" width="16" height="16"/>
-                    Error decrypting video
+                    {_t("Error decrypting video")}
                 </span>
             );
         }

src/components/views/messages/RoomAvatarEvent.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 MatrixClientPeg from '../../../MatrixClientPeg';
+import { ContentRepo } from 'matrix-js-sdk';
+import { _t, _tJsx } 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: React.PropTypes.object.isRequired,
+    },
+
+    onAvatarClick: function(name) {
+        var httpUrl = MatrixClientPeg.get().mxcUrlToHttp(this.props.mxEvent.getContent().url);
+        var ImageView = sdk.getComponent("elements.ImageView");
+        var params = {
+            src: httpUrl,
+            name: name,
+        };
+        Modal.createDialog(ImageView, params, "mx_Dialog_lightbox");
+    },
+
+    render: function() {
+        var ev = this.props.mxEvent;
+        var senderDisplayName = ev.sender && ev.sender.name ? ev.sender.name : ev.getSender();
+        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
+
+        var room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        var 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>
+            );
+        }
+
+        var url = ContentRepo.getHttpUriForMxc(
+                    MatrixClientPeg.get().getHomeserverUrl(),
+                    ev.getContent().url,
+                    Math.ceil(14 * window.devicePixelRatio),
+                    Math.ceil(14 * window.devicePixelRatio),
+                    'crop'
+                );
+
+        // it sucks that _tJsx doesn't support normal _t substitutions :((
+        return (
+            <div className="mx_RoomAvatarEvent">
+                { _tJsx('$senderDisplayName changed the room avatar to <img/>',
+                         [
+                            /\$senderDisplayName/,
+                            /<img\/>/,
+                         ],
+                         [
+                            (sub) => senderDisplayName,
+                            (sub) =>
+                                <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

@@ -30,7 +30,7 @@ export default function SenderProfile(props) {
     }
 
     return (
-        <EmojiText className="mx_SenderProfile"
+        <EmojiText className="mx_SenderProfile" dir="auto"
               onClick={props.onClick}>{`${name || ''} ${props.aux || ''}`}</EmojiText>
     );
 }

src/components/views/messages/TextualBody.js

@@ -28,6 +28,11 @@ import ScalarAuthClient from '../../../ScalarAuthClient';
 import Modal from '../../../Modal';
 import SdkConfig from '../../../SdkConfig';
 import dis from '../../../dispatcher';
+import { _t } from '../../../languageHandler';
+import UserSettingsStore from "../../../UserSettingsStore";
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import {RoomMember} from 'matrix-js-sdk';
+import classNames from 'classnames';
 
 linkifyMatrix(linkify);
 
@@ -62,9 +67,26 @@ module.exports = React.createClass({
         };
     },
 
+    copyToClipboard: function(text) {
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        document.body.appendChild(textArea);
+        textArea.select();
+        try {
+            const successful = document.execCommand('copy');
+        } catch (err) {
+            console.log('Unable to copy');
+        }
+        document.body.removeChild(textArea);
+    },
+
     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();
 
@@ -76,10 +98,29 @@ module.exports = React.createClass({
                 setTimeout(() => {
                     if (this._unmounted) return;
                     for (let i = 0; i < blocks.length; i++) {
-                        highlight.highlightBlock(blocks[i]);
+                        if (UserSettingsStore.getSyncedSetting("enableSyntaxHighlightLanguageDetection", false)) {
+                            highlight.highlightBlock(blocks[i])
+                        } else {
+                            // Only syntax highlight if there's a class starting with language-
+                            let classes = blocks[i].className.split(/\s+/).filter(function (cl) {
+                                return cl.startsWith('language-');
+                            });
+
+                            if (classes.length != 0) {
+                                highlight.highlightBlock(blocks[i]);
+                            }
+                        }
                     }
                 }, 10);
             }
+            // add event handlers to the 'copy code' buttons
+            const buttons = ReactDOM.findDOMNode(this).getElementsByClassName("mx_EventTile_copyButton");
+            for (let i = 0; i < buttons.length; i++) {
+                buttons[i].onclick = (e) => {
+                    const copyCode = buttons[i].parentNode.getElementsByTagName("code")[0];
+                    this.copyToClipboard(copyCode.textContent);
+                };
+            }
         }
     },
 
@@ -109,9 +150,15 @@ module.exports = React.createClass({
         if (this.props.showUrlPreview && !this.state.links.length) {
             var 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) {
@@ -122,17 +169,42 @@ module.exports = React.createClass({
         }
     },
 
+    pillifyLinks: function(nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+            const node = nodes[i];
+            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');
+                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}/>;
+
+                    ReactDOM.render(pill, pillContainer);
+                    node.parentNode.replaceChild(pillContainer, node);
+                }
+            } else if (node.children && node.children.length) {
+                this.pillifyLinks(node.children);
+            }
+        }
+    },
+
     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);
+                    links.push(node.getAttribute("href"));
                 }
             }
-            else if (node.tagName === "PRE" || node.tagName === "CODE") {
+            else if (node.tagName === "PRE" || node.tagName === "CODE" ||
+                    node.tagName === "BLOCKQUOTE") {
                 continue;
             }
             else if (node.children && node.children.length) {
@@ -190,10 +262,9 @@ module.exports = React.createClass({
 
     onEmoteSenderClick: function(event) {
         const mxEvent = this.props.mxEvent;
-        const name = mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender();
         dis.dispatch({
-            action: 'insert_displayname',
-            displayname: name.replace(' (IRC)', ''),
+            action: 'insert_mention',
+            user_id: mxEvent.getSender(),
         });
     },
 
@@ -229,14 +300,14 @@ module.exports = React.createClass({
             let QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             let integrationsUrl = SdkConfig.get().integrations_ui_url;
             Modal.createDialog(QuestionDialog, {
-                title: "Add an Integration",
+                title: _t("Add an Integration"),
                 description:
                     <div>
-                        You are about to be 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;

src/components/views/messages/TextualEvent.js

@@ -24,6 +24,11 @@ import sdk from '../../../index';
 module.exports = React.createClass({
     displayName: 'TextualEvent',
 
+    propTypes: {
+        /* the MatrixEvent to show */
+        mxEvent: React.PropTypes.object.isRequired,
+    },
+    
     render: function() {
         const EmojiText = sdk.getComponent('elements.EmojiText');
         var text = TextForEvent.textForEvent(this.props.mxEvent);

src/components/views/messages/UnknownBody.js

@@ -16,7 +16,8 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'UnknownBody',
@@ -24,7 +25,7 @@ module.exports = React.createClass({
     render: function() {
         const text = this.props.mxEvent.getContent().body;
         return (
-            <span className="mx_UnknownBody" title="Redacted or unknown message type">
+            <span className="mx_UnknownBody" title={_t("Removed or unknown message type")}>
                 {text}
             </span>
         );

src/components/views/room_settings/AliasSettings.js

@@ -14,11 +14,12 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var q = require("q");
+import Promise from 'bluebird';
 var React = require('react');
 var ObjectUtils = require("../../../ObjectUtils");
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require("../../../index");
+import { _t } from '../../../languageHandler';
 var Modal = require("../../../Modal");
 
 module.exports = React.createClass({
@@ -103,7 +104,7 @@ module.exports = React.createClass({
         }
         if (oldCanonicalAlias !== this.state.canonicalAlias) {
             console.log("AliasSettings: Updating canonical alias");
-            promises = [q.all(promises).then(
+            promises = [Promise.all(promises).then(
                 MatrixClientPeg.get().sendStateEvent(
                     this.props.roomId, "m.room.canonical_alias", {
                         alias: this.state.canonicalAlias
@@ -154,8 +155,8 @@ module.exports = React.createClass({
         else {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Invalid alias format",
-                description: "'" + alias + "' is not a valid format for an alias",
+                title: _t('Invalid alias format'),
+                description: _t('\'%(alias)s\' is not a valid format for an alias', { alias: alias }),
             });
         }
     },
@@ -170,8 +171,8 @@ module.exports = React.createClass({
         else {
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Invalid address format",
-                description: "'" + alias + "' is not a valid format for an address",
+                title: _t('Invalid address format'),
+                description: _t('\'%(alias)s\' is not a valid format for an address', { alias: alias }),
             });
         }
     },
@@ -203,7 +204,7 @@ module.exports = React.createClass({
         if (this.props.canSetCanonicalAlias) {
             canonical_alias_section = (
                 <select onChange={this.onCanonicalAliasChange} defaultValue={ this.state.canonicalAlias }>
-                    <option value="" key="unset">not specified</option>
+                    <option value="" key="unset">{ _t('not specified') }</option>
                     {
                         Object.keys(self.state.domainToAliases).map(function(domain, i) {
                             return self.state.domainToAliases[domain].map(function(alias, j) {
@@ -220,7 +221,7 @@ module.exports = React.createClass({
         }
         else {
             canonical_alias_section = (
-                <b>{ this.state.canonicalAlias || "not set" }</b>
+                <b>{ this.state.canonicalAlias || _t('not set') }</b>
             );
         }
 
@@ -229,7 +230,7 @@ module.exports = React.createClass({
             remote_aliases_section = (
                 <div>
                     <div className="mx_RoomSettings_aliasLabel">
-                        Remote addresses for this room:
+                        {_t("Remote addresses for this room:")}
                     </div>
                     <div className="mx_RoomSettings_aliasesTable">
                         { this.state.remoteDomains.map((domain, i) => {
@@ -254,13 +255,13 @@ module.exports = React.createClass({
             <div>
                 <h3>Addresses</h3>
                 <div className="mx_RoomSettings_aliasLabel">
-                    The main address for this room is: { canonical_alias_section }
+                    { _t('The main address for this room is') }: { canonical_alias_section }
                 </div>
                 <div className="mx_RoomSettings_aliasLabel">
                     { (this.state.domainToAliases[localDomain] &&
                         this.state.domainToAliases[localDomain].length > 0)
-                      ? "Local addresses for this room:"
-                      : "This room has no local addresses" }
+                      ? _t('Local addresses for this room:')
+                      : _t('This room has no local addresses') }
                 </div>
                 <div className="mx_RoomSettings_aliasesTable">
                     { (this.state.domainToAliases[localDomain] || []).map((alias, i) => {
@@ -268,7 +269,7 @@ module.exports = React.createClass({
                         if (this.props.canSetAliases) {
                             deleteButton = (
                                 <img src="img/cancel-small.svg" width="14" height="14"
-                                    alt="Delete" onClick={ self.onAliasDeleted.bind(self, localDomain, i) } />
+                                    alt={ _t('Delete') } onClick={ self.onAliasDeleted.bind(self, localDomain, i) } />
                             );
                         }
                         return (
@@ -276,7 +277,7 @@ module.exports = React.createClass({
                                 <EditableText
                                     className="mx_RoomSettings_alias mx_RoomSettings_editable"
                                     placeholderClassName="mx_RoomSettings_aliasPlaceholder"
-                                    placeholder={ "New address (e.g. #foo:" + localDomain + ")" }
+                                    placeholder={ _t('New address (e.g. #foo:%(localDomain)s)', { localDomain: localDomain}) }
                                     blurToCancel={ false }
                                     onValueChanged={ self.onAliasChanged.bind(self, localDomain, i) }
                                     editable={ self.props.canSetAliases }
@@ -294,7 +295,7 @@ module.exports = React.createClass({
                                 ref="add_alias"
                                 className="mx_RoomSettings_alias mx_RoomSettings_editable"
                                 placeholderClassName="mx_RoomSettings_aliasPlaceholder"
-                                placeholder={ "New address (e.g. #foo:" + localDomain + ")" }
+                                placeholder={ _t('New address (e.g. #foo:%(localDomain)s)', { localDomain: localDomain}) }
                                 blurToCancel={ false }
                                 onValueChanged={ self.onAliasAdded } />
                             <div className="mx_RoomSettings_addAlias mx_filterFlipColor">

src/components/views/room_settings/ColorSettings.js

@@ -13,7 +13,7 @@ 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 q = require("q");
+import Promise from 'bluebird';
 var React = require('react');
 
 var sdk = require('../../../index');
@@ -21,6 +21,8 @@ var Tinter = require('../../../Tinter');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 
+import dis from '../../../dispatcher';
+
 var ROOM_COLORS = [
     // magic room default values courtesy of Ribot
     ["#76cfa6", "#eaf5f0"],
@@ -70,7 +72,7 @@ module.exports = React.createClass({
 
     saveSettings: function() { // : Promise
         if (!this.state.hasChanged) {
-            return q(); // They didn't explicitly give a color to save.
+            return Promise.resolve(); // They didn't explicitly give a color to save.
         }
         var originalState = this.getInitialState();
         if (originalState.primary_color !== this.state.primary_color ||
@@ -86,15 +88,11 @@ module.exports = React.createClass({
                 }
             ).catch(function(err) {
                 if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
-                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-                    Modal.createDialog(NeedToRegisterDialog, {
-                        title: "Please Register",
-                        description: "Saving room color settings is only available to registered users"
-                    });
+                    dis.dispatch({action: 'view_set_mxid'});
                 }
             });
         }
-        return q(); // no color diff
+        return Promise.resolve(); // no color diff
     },
 
     _getColorIndex: function(scheme) {

src/components/views/room_settings/UrlPreviewSettings.js

@@ -14,12 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var q = require("q");
+import Promise from 'bluebird';
 var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require("../../../index");
 var Modal = require("../../../Modal");
 var UserSettingsStore = require('../../../UserSettingsStore');
+import { _t, _tJsx } from '../../../languageHandler';
 
 
 module.exports = React.createClass({
@@ -120,35 +121,47 @@ module.exports = React.createClass({
                     <input type="checkbox" ref="globalDisableUrlPreview"
                            onChange={ this.onGlobalDisableUrlPreviewChange }
                            checked={ this.state.globalDisableUrlPreview } />
-                    Disable URL previews by default for participants in this room
+                    {_t("Disable URL previews by default for participants in this room")}
                 </label>;
         }
         else {
             disableRoomPreviewUrls =
                 <label>
-                    URL previews are { this.state.globalDisableUrlPreview ? "disabled" : "enabled" } by default for participants in this room.
+                    {_t("URL previews are %(globalDisableUrlPreview)s by default for participants in this room.", {globalDisableUrlPreview: this.state.globalDisableUrlPreview ? _t("disabled") : _t("enabled")})}
                 </label>;
         }
 
+        let urlPreviewText = null;
+        if (UserSettingsStore.getUrlPreviewsDisabled()) {
+            urlPreviewText = (
+                _tJsx("You have <a>disabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{sub}</a>)
+            );
+        }
+        else {
+            urlPreviewText = (
+                _tJsx("You have <a>enabled</a> URL previews by default.", /<a>(.*?)<\/a>/, (sub)=><a href="#/settings">{sub}</a>)
+            );
+        }
+
         return (
             <div className="mx_RoomSettings_toggles">
-                <h3>URL Previews</h3>
+                <h3>{_t("URL Previews")}</h3>
 
                 <label>
-                    You have <a href="#/settings">{ UserSettingsStore.getUrlPreviewsDisabled() ? 'disabled' : 'enabled' }</a> URL previews by default.
+                {urlPreviewText}
                 </label>
                 { disableRoomPreviewUrls }
                 <label>
                     <input type="checkbox" ref="userEnableUrlPreview"
                            onChange={ this.onUserEnableUrlPreviewChange }
                            checked={ this.state.userEnableUrlPreview } />
-                    Enable URL previews for this room (affects only you)
+                    {_t("Enable URL previews for this room (affects only you)")}
                 </label>
                 <label>
                     <input type="checkbox" ref="userDisableUrlPreview"
                            onChange={ this.onUserDisableUrlPreviewChange }
                            checked={ this.state.userDisableUrlPreview } />
-                    Disable URL previews for this room (affects only you)
+                    {_t("Disable URL previews for this room (affects only you)")}
                 </label>
             </div>
         );

src/components/views/rooms/AppsDrawer.js

@@ -0,0 +1,207 @@
+/*
+Copyright 2017 Vector Creations Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+import React from 'react';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import AppTile from '../elements/AppTile';
+import Modal from '../../../Modal';
+import dis from '../../../dispatcher';
+import sdk from '../../../index';
+import SdkConfig from '../../../SdkConfig';
+import ScalarAuthClient from '../../../ScalarAuthClient';
+import ScalarMessaging from '../../../ScalarMessaging';
+import { _t } from '../../../languageHandler';
+import WidgetUtils from '../../../WidgetUtils';
+
+
+module.exports = React.createClass({
+    displayName: 'AppsDrawer',
+
+    propTypes: {
+        room: React.PropTypes.object.isRequired,
+    },
+
+    getInitialState: function() {
+        return {
+            apps: this._getApps(),
+        };
+    },
+
+    componentWillMount: function() {
+        ScalarMessaging.startListening();
+        MatrixClientPeg.get().on("RoomState.events", this.onRoomStateEvents);
+    },
+
+    componentDidMount: function() {
+        this.scalarClient = null;
+        if (SdkConfig.get().integrations_ui_url && SdkConfig.get().integrations_rest_url) {
+            this.scalarClient = new ScalarAuthClient();
+            this.scalarClient.connect().done(() => {
+                this.forceUpdate();
+                if (this.state.apps && this.state.apps.length < 1) {
+                    this.onClickAddWidget();
+                }
+            // TODO -- Handle Scalar errors
+            // },
+            // (err) => {
+            //     this.setState({
+            //         scalar_error: err,
+            //     });
+            });
+        }
+    },
+
+    componentWillUnmount: function() {
+        ScalarMessaging.stopListening();
+        if (MatrixClientPeg.get()) {
+            MatrixClientPeg.get().removeListener("RoomState.events", this.onRoomStateEvents);
+        }
+    },
+
+    /**
+     * Encodes a URI according to a set of template variables. Variables will be
+     * passed through encodeURIComponent.
+     * @param {string} pathTemplate The path with template variables e.g. '/foo/$bar'.
+     * @param {Object} variables The key/value pairs to replace the template
+     * variables with. E.g. { "$bar": "baz" }.
+     * @return {string} The result of replacing all template variables e.g. '/foo/baz'.
+     */
+    encodeUri: function(pathTemplate, variables) {
+        for (const key in variables) {
+            if (!variables.hasOwnProperty(key)) {
+                continue;
+            }
+            pathTemplate = pathTemplate.replace(
+                key, encodeURIComponent(variables[key]),
+            );
+        }
+        return pathTemplate;
+    },
+
+    _initAppConfig: function(appId, app) {
+        const user = MatrixClientPeg.get().getUser(this.props.userId);
+        const params = {
+            '$matrix_user_id': this.props.userId,
+            '$matrix_room_id': this.props.room.roomId,
+            '$matrix_display_name': user ? user.displayName : this.props.userId,
+            '$matrix_avatar_url': user ? MatrixClientPeg.get().mxcUrlToHttp(user.avatarUrl) : '',
+        };
+
+        if(app.data) {
+            Object.keys(app.data).forEach((key) => {
+                params['$' + key] = app.data[key];
+            });
+        }
+
+        app.id = appId;
+        app.name = app.name || app.type;
+        app.url = this.encodeUri(app.url, params);
+
+        return app;
+    },
+
+    onRoomStateEvents: function(ev, state) {
+        if (ev.getRoomId() !== this.props.room.roomId || ev.getType() !== 'im.vector.modular.widgets') {
+            return;
+        }
+        this._updateApps();
+    },
+
+    _getApps: function() {
+        const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets');
+        if (!appsStateEvents) {
+            return [];
+        }
+
+        return appsStateEvents.filter((ev) => {
+            return ev.getContent().type && ev.getContent().url;
+        }).map((ev) => {
+            return this._initAppConfig(ev.getStateKey(), ev.getContent());
+        });
+    },
+
+    _updateApps: function() {
+        const apps = this._getApps();
+        if (apps.length < 1) {
+            dis.dispatch({
+                action: 'appsDrawer',
+                show: false,
+            });
+        }
+        this.setState({
+            apps: apps,
+        });
+    },
+
+    _canUserModify: function() {
+        try {
+            return WidgetUtils.canUserModifyWidgets(this.props.room.roomId);
+        } catch(err) {
+            console.error(err);
+            return false;
+        }
+    },
+
+    onClickAddWidget: function(e) {
+        if (e) {
+            e.preventDefault();
+        }
+
+        const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager");
+        const src = (this.scalarClient !== null && this.scalarClient.hasCredentials()) ?
+                this.scalarClient.getScalarInterfaceUrlForRoom(this.props.room.roomId, 'add_integ') :
+                null;
+        Modal.createDialog(IntegrationsManager, {
+            src: src,
+        }, "mx_IntegrationsManager");
+    },
+
+    render: function() {
+        const apps = this.state.apps.map(
+            (app, index, arr) => {
+                return (<AppTile
+                    key={app.id}
+                    id={app.id}
+                    url={app.url}
+                    name={app.name}
+                    type={app.type}
+                    fullWidth={arr.length<2 ? true : false}
+                    room={this.props.room}
+                    userId={this.props.userId}
+                />);
+            });
+
+        const addWidget = this.state.apps && this.state.apps.length < 2 && this._canUserModify() &&
+            (<div onClick={this.onClickAddWidget}
+                            role="button"
+                            tabIndex="0"
+                            className="mx_AddWidget_button"
+                            title={_t('Add a widget')}>
+                            [+] {_t('Add a widget')}
+                        </div>);
+
+        return (
+            <div className="mx_AppsDrawer">
+                <div id="apps" className="mx_AppsContainer">
+                    {apps}
+                </div>
+                {addWidget}
+            </div>
+        );
+    },
+});

src/components/views/rooms/Autocomplete.js

@@ -4,8 +4,9 @@ import classNames from 'classnames';
 import flatMap from 'lodash/flatMap';
 import isEqual from 'lodash/isEqual';
 import sdk from '../../../index';
-import type {Completion, SelectionRange} from '../../../autocomplete/Autocompleter';
-import Q from 'q';
+import type {Completion} from '../../../autocomplete/Autocompleter';
+import Promise from 'bluebird';
+import UserSettingsStore from '../../../UserSettingsStore';
 
 import {getCompletions} from '../../../autocomplete/Autocompleter';
 
@@ -39,26 +40,62 @@ export default class Autocomplete extends React.Component {
         };
     }
 
-    async componentWillReceiveProps(props, state) {
-        if (props.query === this.props.query) {
-            return null;
-        }
-
-        return await this.complete(props.query, props.selection);
-    }
-
-    async complete(query, selection) {
-        let forceComplete = this.state.forceComplete;
-        const completionPromise = getCompletions(query, selection, forceComplete);
-        this.completionPromise = completionPromise;
-        const completions = await this.completionPromise;
-
-        // There's a newer completion request, so ignore results.
-        if (completionPromise !== this.completionPromise) {
+    componentWillReceiveProps(newProps, state) {
+        // Query hasn't changed so don't try to complete it
+        if (newProps.query === this.props.query) {
             return;
         }
 
-        const completionList = flatMap(completions, provider => provider.completions);
+        this.complete(newProps.query, newProps.selection);
+    }
+
+    complete(query, selection) {
+        this.queryRequested = query;
+        if (this.debounceCompletionsRequest) {
+            clearTimeout(this.debounceCompletionsRequest);
+        }
+        if (query === "") {
+            this.setState({
+                // Clear displayed completions
+                completions: [],
+                completionList: [],
+                // Reset selected completion
+                selectionOffset: COMPOSER_SELECTED,
+                // Hide the autocomplete box
+                hide: true,
+            });
+            return Promise.resolve(null);
+        }
+        let autocompleteDelay = UserSettingsStore.getLocalSetting('autocompleteDelay', 200);
+
+        // Don't debounce if we are already showing completions
+        if (this.state.completions.length > 0 || this.state.forceComplete) {
+            autocompleteDelay = 0;
+        }
+
+        const deferred = Promise.defer();
+        this.debounceCompletionsRequest = setTimeout(() => {
+            this.processQuery(query, selection).then(() => {
+                deferred.resolve();
+            });
+        }, autocompleteDelay);
+        return deferred.promise;
+    }
+
+    processQuery(query, selection) {
+        return getCompletions(
+            query, selection, this.state.forceComplete,
+        ).then((completions) => {
+            // Only ever process the completions for the most recent query being processed
+            if (query !== this.queryRequested) {
+                return;
+            }
+            this.processCompletions(completions);
+        });
+    }
+
+    processCompletions(completions) {
+        const completionList = flatMap(completions, (provider) => provider.completions);
 
         // Reset selection when completion list becomes empty.
         let selectionOffset = COMPOSER_SELECTED;
@@ -69,33 +106,26 @@ export default class Autocomplete extends React.Component {
             const currentSelection = this.state.selectionOffset === 0 ? null :
                 this.state.completionList[this.state.selectionOffset - 1].completion;
             selectionOffset = completionList.findIndex(
-                completion => completion.completion === currentSelection);
+                (completion) => completion.completion === currentSelection);
             if (selectionOffset === -1) {
                 selectionOffset = COMPOSER_SELECTED;
             } else {
                 selectionOffset++; // selectionOffset is 1-indexed!
             }
-        } else {
-            // If no completions were returned, we should turn off force completion.
-            forceComplete = false;
         }
 
         let hide = this.state.hide;
-        // These are lists of booleans that indicate whether whether the corresponding provider had a matching pattern
-        const oldMatches = this.state.completions.map(completion => !!completion.command.command),
-            newMatches = completions.map(completion => !!completion.command.command);
-
-        // So, essentially, we re-show autocomplete if any provider finds a new pattern or stops finding an old one
-        if (!isEqual(oldMatches, newMatches)) {
-            hide = false;
-        }
+        // If `completion.command.command` is truthy, then a provider has matched with the query
+        const anyMatches = completions.some((completion) => !!completion.command.command);
+        hide = !anyMatches;
 
         this.setState({
             completions,
             completionList,
             selectionOffset,
             hide,
-            forceComplete,
+            // Force complete is turned off each time since we can't edit the query in that case
+            forceComplete: false,
         });
     }
 
@@ -146,12 +176,13 @@ export default class Autocomplete extends React.Component {
     }
 
     forceComplete() {
-        const done = Q.defer();
+        const done = Promise.defer();
         this.setState({
             forceComplete: true,
+            hide: false,
         }, () => {
             this.complete(this.props.query, this.props.selection).then(() => {
-                done.resolve();
+                done.resolve(this.countCompletions());
             });
         });
         return done.promise;
@@ -169,7 +200,7 @@ export default class Autocomplete extends React.Component {
     }
 
     setSelection(selectionOffset: number) {
-        this.setState({selectionOffset});
+        this.setState({selectionOffset, hide: false});
     }
 
     componentDidUpdate() {
@@ -185,21 +216,24 @@ export default class Autocomplete extends React.Component {
         }
     }
 
+    setState(state, func) {
+        super.setState(state, func);
+    }
+
     render() {
         const EmojiText = sdk.getComponent('views.elements.EmojiText');
 
         let position = 1;
-        let renderedCompletions = this.state.completions.map((completionResult, i) => {
-            let completions = completionResult.completions.map((completion, i) => {
-
+        const renderedCompletions = this.state.completions.map((completionResult, i) => {
+            const completions = completionResult.completions.map((completion, i) => {
                 const className = classNames('mx_Autocomplete_Completion', {
                     'selected': position === this.state.selectionOffset,
                 });
-                let componentPosition = position;
+                const componentPosition = position;
                 position++;
 
-                let onMouseOver = () => this.setSelection(componentPosition);
-                let onClick = () => {
+                const onMouseOver = () => this.setSelection(componentPosition);
+                const onClick = () => {
                     this.setSelection(componentPosition);
                     this.onCompletionClicked();
                 };
@@ -220,7 +254,7 @@ export default class Autocomplete extends React.Component {
                     {completionResult.provider.renderCompletions(completions)}
                 </div>
             ) : null;
-        }).filter(completion => !!completion);
+        }).filter((completion) => !!completion);
 
         return !this.state.hide && renderedCompletions.length > 0 ? (
             <div className="mx_Autocomplete" ref={(e) => this.container = e}>

src/components/views/rooms/AuxPanel.js

@@ -14,11 +14,15 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-var React = require('react');
-var MatrixClientPeg = require("../../../MatrixClientPeg");
-var sdk = require('../../../index');
-var dis = require("../../../dispatcher");
-var ObjectUtils = require('../../../ObjectUtils');
+import React from 'react';
+import MatrixClientPeg from "../../../MatrixClientPeg";
+import sdk from '../../../index';
+import dis from "../../../dispatcher";
+import ObjectUtils from '../../../ObjectUtils';
+import AppsDrawer from './AppsDrawer';
+import { _t, _tJsx} from '../../../languageHandler';
+import UserSettingsStore from '../../../UserSettingsStore';
+
 
 module.exports = React.createClass({
     displayName: 'AuxPanel',
@@ -26,6 +30,8 @@ module.exports = React.createClass({
     propTypes: {
         // js-sdk room object
         room: React.PropTypes.object.isRequired,
+        userId: React.PropTypes.string.isRequired,
+        showApps: React.PropTypes.bool,
 
         // Conference Handler implementation
         conferenceHandler: React.PropTypes.object,
@@ -68,45 +74,53 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var CallView = sdk.getComponent("voip.CallView");
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const CallView = sdk.getComponent("voip.CallView");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
 
-        var fileDropTarget = null;
+        let fileDropTarget = null;
         if (this.props.draggingFile) {
             fileDropTarget = (
                 <div className="mx_RoomView_fileDropTarget">
                     <div className="mx_RoomView_fileDropTargetLabel"
-                      title="Drop File Here">
+                      title={_t("Drop File Here")}>
                         <TintableSvg src="img/upload-big.svg" width="45" height="59"/>
                         <br/>
-                        Drop file here to upload
+                        {_t("Drop file here to upload")}
                     </div>
                 </div>
             );
         }
 
-        var conferenceCallNotification = null;
+        let conferenceCallNotification = null;
         if (this.props.displayConfCallNotification) {
-            var supportedText, joinText;
+            let supportedText = '';
+            let joinNode;
             if (!MatrixClientPeg.get().supportsVoip()) {
-                supportedText = " (unsupported)";
-            }
-            else {
-                joinText = (<span>
-                    Join as <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}}
-                               href="#">voice</a> or <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video'); }}
-                               href="#">video</a>.
+                supportedText = _t(" (unsupported)");
+            } else {
+                joinNode = (<span>
+                    {_tJsx(
+                        "Join as <voiceText>voice</voiceText> or <videoText>video</videoText>.",
+                        [/<voiceText>(.*?)<\/voiceText>/, /<videoText>(.*?)<\/videoText>/],
+                        [
+                            (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'voice');}} href="#">{sub}</a>,
+                            (sub) => <a onClick={(event)=>{ this.onConferenceNotificationClick(event, 'video');}} href="#">{sub}</a>,
+                        ]
+                    )}
                 </span>);
-
             }
+            // XXX: the translation here isn't great: appending ' (unsupported)' is likely to not make sense in many languages,
+            // but there are translations for this in the languages we do have so I'm leaving it for now.
             conferenceCallNotification = (
                 <div className="mx_RoomView_ongoingConfCallNotification">
-                    Ongoing conference call{ supportedText }. { joinText }
+                    {_t("Ongoing conference call%(supportedText)s.", {supportedText: supportedText})}
+                    &nbsp;
+                    {joinNode}
                 </div>
             );
         }
 
-        var callView = (
+        const callView = (
             <CallView ref="callView" room={this.props.room}
                 ConferenceHandler={this.props.conferenceHandler}
                 onResize={this.props.onResize}
@@ -114,8 +128,17 @@ module.exports = React.createClass({
             />
         );
 
+        let appsDrawer = null;
+        if(UserSettingsStore.isFeatureEnabled('matrix_apps') && this.props.showApps) {
+            appsDrawer = <AppsDrawer ref="appsDrawer"
+                room={this.props.room}
+                userId={this.props.userId}
+                maxHeight={this.props.maxHeight}/>;
+        }
+
         return (
             <div className="mx_RoomView_auxPanel" style={{maxHeight: this.props.maxHeight}} >
+                { appsDrawer }
                 { fileDropTarget }
                 { callView }
                 { conferenceCallNotification }

src/components/views/rooms/EntityTile.js

@@ -21,6 +21,7 @@ var React = require('react');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 import AccessibleButton from '../elements/AccessibleButton';
+import { _t } from '../../../languageHandler';
 
 
 var PRESENCE_CLASS = {
@@ -115,7 +116,7 @@ module.exports = React.createClass({
             nameEl = (
                 <div className="mx_EntityTile_details">
                     <img className="mx_EntityTile_chevron" src="img/member_chevron.png" width="8" height="12"/>
-                    <EmojiText element="div" className="mx_EntityTile_name_hover">{name}</EmojiText>
+                    <EmojiText element="div" className="mx_EntityTile_name_hover" dir="auto">{name}</EmojiText>
                     <PresenceLabel activeAgo={ activeAgo }
                         currentlyActive={this.props.presenceCurrentlyActive}
                         presenceState={this.props.presenceState} />
@@ -124,7 +125,7 @@ module.exports = React.createClass({
         }
         else {
             nameEl = (
-                <EmojiText element="div" className="mx_EntityTile_name">{name}</EmojiText>
+                <EmojiText element="div" className="mx_EntityTile_name" dir="auto">{name}</EmojiText>
             );
         }
 
@@ -140,10 +141,10 @@ module.exports = React.createClass({
         var power;
         var powerLevel = this.props.powerLevel;
         if (powerLevel >= 50 && powerLevel < 99) {
-            power = <img src="img/mod.svg" className="mx_EntityTile_power" width="16" height="17" alt="Mod"/>;
+            power = <img src="img/mod.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Moderator")}/>;
         }
         if (powerLevel >= 99) {
-            power = <img src="img/admin.svg" className="mx_EntityTile_power" width="16" height="17" alt="Admin"/>;
+            power = <img src="img/admin.svg" className="mx_EntityTile_power" width="16" height="17" alt={_t("Admin")}/>;
         }
 
 

src/components/views/rooms/EventTile.js

@@ -16,13 +16,15 @@ limitations under the License.
 
 'use strict';
 
+
 var React = require('react');
 var classNames = require("classnames");
+import { _t } from '../../../languageHandler';
 var Modal = require('../../../Modal');
 
 var sdk = require('../../../index');
 var TextForEvent = require('../../../TextForEvent');
-import WithMatrixClient from '../../../wrappers/WithMatrixClient';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
 
 var ContextualMenu = require('../../structures/ContextualMenu');
 import dis from '../../../dispatcher';
@@ -36,10 +38,12 @@ var eventTileTypes = {
     'm.call.answer' : 'messages.TextualEvent',
     'm.call.hangup' : 'messages.TextualEvent',
     'm.room.name'   : 'messages.TextualEvent',
+    'm.room.avatar' : 'messages.RoomAvatarEvent',
     'm.room.topic'  : 'messages.TextualEvent',
     'm.room.third_party_invite' : 'messages.TextualEvent',
     'm.room.history_visibility' : 'messages.TextualEvent',
     'm.room.encryption' : 'messages.TextualEvent',
+    'm.room.power_levels' : 'messages.TextualEvent',
 };
 
 var MAX_READ_AVATARS = 5;
@@ -55,7 +59,7 @@ var MAX_READ_AVATARS = 5;
 // |    '--------------------------------------'              |
 // '----------------------------------------------------------'
 
-module.exports = WithMatrixClient(React.createClass({
+module.exports = withMatrixClient(React.createClass({
     displayName: 'EventTile',
 
     propTypes: {
@@ -128,6 +132,9 @@ module.exports = WithMatrixClient(React.createClass({
          * for now.
          */
         tileShape: React.PropTypes.string,
+
+        // show twelve hour timestamps
+        isTwelveHour: React.PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -186,13 +193,12 @@ module.exports = WithMatrixClient(React.createClass({
         }
     },
 
-    _verifyEvent: function(mxEvent) {
-        var verified = null;
-
-        if (mxEvent.isEncrypted()) {
-            verified = this.props.matrixClient.isEventSenderVerified(mxEvent);
+    _verifyEvent: async function(mxEvent) {
+        if (!mxEvent.isEncrypted()) {
+            return;
         }
 
+        const verified = await this.props.matrixClient.isEventSenderVerified(mxEvent);
         this.setState({
             verified: verified
         });
@@ -283,21 +289,17 @@ module.exports = WithMatrixClient(React.createClass({
     },
 
     getReadAvatars: function() {
+
+        // return early if there are no read receipts
+        if (!this.props.readReceipts || this.props.readReceipts.length === 0) {
+            return (<span className="mx_EventTile_readAvatars"></span>);
+        }
+
         const ReadReceiptMarker = sdk.getComponent('rooms.ReadReceiptMarker');
         const avatars = [];
         const receiptOffset = 15;
         let left = 0;
 
-        // It's possible that the receipt was sent several days AFTER the event.
-        // If it is, we want to display the complete date along with the HH:MM:SS,
-        // rather than just HH:MM:SS.
-        let dayAfterEvent = new Date(this.props.mxEvent.getTs());
-        dayAfterEvent.setDate(dayAfterEvent.getDate() + 1);
-        dayAfterEvent.setHours(0);
-        dayAfterEvent.setMinutes(0);
-        dayAfterEvent.setSeconds(0);
-        let dayAfterEventTime = dayAfterEvent.getTime();
-
         var receipts = this.props.readReceipts || [];
         for (var i = 0; i < receipts.length; ++i) {
             var receipt = receipts[i];
@@ -333,7 +335,7 @@ module.exports = WithMatrixClient(React.createClass({
                     suppressAnimation={this._suppressReadReceiptAnimation}
                     onClick={this.toggleAllReadAvatars}
                     timestamp={receipt.ts}
-                    showFullTimestamp={receipt.ts >= dayAfterEventTime}
+                    showTwelveHour={this.props.isTwelveHour}
                 />
             );
         }
@@ -355,10 +357,10 @@ module.exports = WithMatrixClient(React.createClass({
     },
 
     onSenderProfileClick: function(event) {
-        var mxEvent = this.props.mxEvent;
+        const mxEvent = this.props.mxEvent;
         dis.dispatch({
-            action: 'insert_displayname',
-            displayname: (mxEvent.sender ? mxEvent.sender.name : mxEvent.getSender()).replace(' (IRC)', ''),
+            action: 'insert_mention',
+            user_id: mxEvent.getSender(),
         });
     },
 
@@ -379,6 +381,7 @@ module.exports = WithMatrixClient(React.createClass({
         dis.dispatch({
             action: 'view_room',
             event_id: this.props.mxEvent.getId(),
+            highlighted: true,
             room_id: this.props.mxEvent.getRoomId(),
         });
     },
@@ -394,8 +397,7 @@ module.exports = WithMatrixClient(React.createClass({
         var msgtype = content.msgtype;
         var eventType = this.props.mxEvent.getType();
 
-        // Info messages are basically information about commands processed on a
-        // room, or emote messages
+        // Info messages are basically information about commands processed on a room
         var isInfoMessage = (eventType !== 'm.room.message');
 
         var EventTileType = sdk.getComponent(eventTileTypes[eventType]);
@@ -409,9 +411,10 @@ module.exports = WithMatrixClient(React.createClass({
         var isSending = (['sending', 'queued', 'encrypting'].indexOf(this.props.eventSendStatus) !== -1);
         const isRedacted = (eventType === 'm.room.message') && this.props.isRedacted;
 
-        var classes = classNames({
+        const classes = classNames({
             mx_EventTile: true,
             mx_EventTile_info: isInfoMessage,
+            mx_EventTile_12hr: this.props.isTwelveHour,
             mx_EventTile_encrypting: this.props.eventSendStatus == 'encrypting',
             mx_EventTile_sending: isSending,
             mx_EventTile_notSent: this.props.eventSendStatus == 'not_sent',
@@ -423,7 +426,8 @@ module.exports = WithMatrixClient(React.createClass({
             menu: this.state.menu,
             mx_EventTile_verified: this.state.verified == true,
             mx_EventTile_unverified: this.state.verified == false,
-            mx_EventTile_bad: this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted',
+            mx_EventTile_bad: msgtype === 'm.bad.encrypted',
+            mx_EventTile_emote: msgtype === 'm.emote',
             mx_EventTile_redacted: isRedacted,
         });
 
@@ -468,9 +472,9 @@ module.exports = WithMatrixClient(React.createClass({
         if (needsSenderProfile) {
             let aux = null;
             if (!this.props.tileShape) {
-                if (msgtype === 'm.image') aux = "sent an image";
-                else if (msgtype === 'm.video') aux = "sent a video";
-                else if (msgtype === 'm.file') aux = "uploaded a file";
+                if (msgtype === 'm.image') aux = _t('sent an image');
+                else if (msgtype === 'm.video') aux = _t('sent a video');
+                else if (msgtype === 'm.file') aux = _t('uploaded a file');
                 sender = <SenderProfile onClick={ this.onSenderProfileClick } mxEvent={this.props.mxEvent} aux={aux} />;
             }
             else {
@@ -478,36 +482,34 @@ module.exports = WithMatrixClient(React.createClass({
             }
         }
 
-        var editButton = (
-            <span className="mx_EventTile_editButton" title="Options" onClick={this.onEditClicked} />
+        const editButton = (
+            <span className="mx_EventTile_editButton" title={ _t("Options") } onClick={this.onEditClicked} />
         );
-
-        var e2e;
+        let e2e;
         // cosmetic padlocks:
         if ((e2eEnabled && this.props.eventSendStatus) || this.props.mxEvent.getType() === 'm.room.encryption') {
-            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />;
+            e2e = <img style={{ cursor: 'initial', marginLeft: '-1px' }} className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12" />;
         }
         // real padlocks
         else if (this.props.mxEvent.isEncrypted() || (e2eEnabled && this.props.eventSendStatus)) {
             if (this.props.mxEvent.getContent().msgtype === 'm.bad.encrypted') {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Undecryptable")} src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} />;
             }
             else if (this.state.verified == true || (e2eEnabled && this.props.eventSendStatus)) {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-verified.svg" width="10" height="12"/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by a verified device")} src="img/e2e-verified.svg" width="10" height="12"/>;
             }
             else {
-                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Encrypted by an unverified device")} src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
             }
         }
         else if (e2eEnabled) {
-            e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12"/>;
+            e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt={_t("Unencrypted message")} src="img/e2e-unencrypted.svg" width="12" height="12"/>;
         }
         const timestamp = this.props.mxEvent.getTs() ?
-            <MessageTimestamp ts={this.props.mxEvent.getTs()} /> : null;
+            <MessageTimestamp showTwelveHour={this.props.isTwelveHour} ts={this.props.mxEvent.getTs()} /> : null;
 
         if (this.props.tileShape === "notif") {
-            var room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
-
+            const room = this.props.matrixClient.getRoom(this.props.mxEvent.getRoomId());
             return (
                 <div className={classes}>
                     <div className="mx_EventTile_roomName">

src/components/views/rooms/ForwardMessage.js

@@ -0,0 +1,68 @@
+/*
+ Copyright 2017 Vector Creations Ltd
+ Copyright 2017 Michael Telatynski
+
+ 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 dis from '../../../dispatcher';
+import KeyCode from '../../../KeyCode';
+
+
+module.exports = React.createClass({
+    displayName: 'ForwardMessage',
+
+    propTypes: {
+        onCancelClick: React.PropTypes.func.isRequired,
+    },
+
+    componentWillMount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            leftOpacity: 1.0,
+            rightOpacity: 0.3,
+            middleOpacity: 0.5,
+        });
+    },
+
+    componentDidMount: function() {
+        document.addEventListener('keydown', this._onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
+        });
+        document.removeEventListener('keydown', this._onKeyDown);
+    },
+
+    _onKeyDown: function(ev) {
+        switch (ev.keyCode) {
+            case KeyCode.ESCAPE:
+                this.props.onCancelClick();
+                break;
+        }
+    },
+
+    render: function() {
+        return (
+            <div className="mx_ForwardMessage">
+                <h1>{_t('Please select the destination room for this message')}</h1>
+            </div>
+        );
+    },
+});

src/components/views/rooms/LinkPreviewWidget.js

@@ -100,7 +100,9 @@ module.exports = React.createClass({
 
     render: function() {
         var p = this.state.preview;
-        if (!p) return <div/>;
+        if (!p || Object.keys(p).length === 0) {
+            return <div/>;
+        }
 
         // FIXME: do we want to factor out all image displaying between this and MImageBody - especially for lightboxing?
         var image = p["og:image"];

src/components/views/rooms/MemberDeviceInfo.js

@@ -16,6 +16,7 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 export default class MemberDeviceInfo extends React.Component {
     render() {
@@ -25,19 +26,19 @@ export default class MemberDeviceInfo extends React.Component {
         if (this.props.device.isBlocked()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_blacklisted">
-                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt="Blacklisted"/>
+                    <img src="img/e2e-blocked.svg" width="12" height="12" style={{ marginLeft: "-1px" }} alt={_t("Blacklisted")}/>
                     </div>
             );
         } else if (this.props.device.isVerified()) {
             indicator = (
                     <div className="mx_MemberDeviceInfo_verified">
-                    <img src="img/e2e-verified.svg" width="10" height="12" alt="Verified"/>
+                    <img src="img/e2e-verified.svg" width="10" height="12" alt={_t("Verified")}/>
                     </div>
             );
         } else {
             indicator = (
                     <div className="mx_MemberDeviceInfo_unverified">
-                    <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt="Unverified"/>
+                    <img src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }} alt={_t("Unverified")}/>
                     </div>
             );
         }
@@ -49,7 +50,7 @@ export default class MemberDeviceInfo extends React.Component {
         // add the deviceId as a titletext to help with debugging
         return (
             <div className="mx_MemberDeviceInfo"
-                    title={"device id: " + this.props.device.deviceId} >
+                    title={_t("device id: ") + this.props.device.deviceId} >
                 <div className="mx_MemberDeviceInfo_deviceInfo">
                     <div className="mx_MemberDeviceInfo_deviceId">
                         {deviceName}

src/components/views/rooms/MemberInfo.js

@@ -31,14 +31,17 @@ import classNames from 'classnames';
 import dis from '../../../dispatcher';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import createRoom from '../../../createRoom';
 import DMRoomMap from '../../../utils/DMRoomMap';
 import Unread from '../../../Unread';
 import { findReadReceiptFromUserId } from '../../../utils/Receipt';
-import WithMatrixClient from '../../../wrappers/WithMatrixClient';
+import withMatrixClient from '../../../wrappers/withMatrixClient';
 import AccessibleButton from '../elements/AccessibleButton';
+import GeminiScrollbar from 'react-gemini-scrollbar';
 
-module.exports = WithMatrixClient(React.createClass({
+
+module.exports = withMatrixClient(React.createClass({
     displayName: 'MemberInfo',
 
     propTypes: {
@@ -133,8 +136,12 @@ module.exports = WithMatrixClient(React.createClass({
         if (userId == this.props.member.userId) {
             // no need to re-download the whole thing; just update our copy of
             // the list.
-            var devices = this.props.matrixClient.getStoredDevicesForUser(userId);
-            this.setState({devices: devices});
+
+            // Promise.resolve to handle transition from static result to promise; can be removed
+            // in future
+            Promise.resolve(this.props.matrixClient.getStoredDevicesForUser(userId)).then((devices) => {
+                this.setState({devices: devices});
+            });
         }
     },
 
@@ -201,14 +208,15 @@ module.exports = WithMatrixClient(React.createClass({
 
         var client = this.props.matrixClient;
         var self = this;
-        client.downloadKeys([member.userId], true).finally(function() {
+        client.downloadKeys([member.userId], true).then(() => {
+            return client.getStoredDevicesForUser(member.userId);
+        }).finally(function() {
             self._cancelDeviceList = null;
-        }).done(function() {
+        }).done(function(devices) {
             if (cancelled) {
                 // we got cancelled - presumably a different user now
                 return;
             }
-            var devices = client.getStoredDevicesForUser(member.userId);
             self._disambiguateDevices(devices);
             self.setState({devicesLoading: false, devices: devices});
         }, function(err) {
@@ -219,7 +227,7 @@ module.exports = WithMatrixClient(React.createClass({
 
     onKick: function() {
         const membership = this.props.member.membership;
-        const kickLabel = membership === "invite" ? "Disinvite" : "Kick";
+        const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         Modal.createDialog(ConfirmUserActionDialog, {
             member: this.props.member,
@@ -241,8 +249,8 @@ module.exports = WithMatrixClient(React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Kick error: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Error", 
-                            description: "Failed to kick user",
+                            title: _t("Failed to kick"),
+                            description: ((err && err.message) ? err.message : "Operation failed"),
                         });
                     }
                 ).finally(()=>{
@@ -256,7 +264,7 @@ module.exports = WithMatrixClient(React.createClass({
         const ConfirmUserActionDialog = sdk.getComponent("dialogs.ConfirmUserActionDialog");
         Modal.createDialog(ConfirmUserActionDialog, {
             member: this.props.member,
-            action: this.props.member.membership == 'ban' ? 'Unban' : 'Ban',
+            action: this.props.member.membership == 'ban' ? _t("Unban") : _t("Ban"),
             askReason: this.props.member.membership != 'ban',
             danger: this.props.member.membership != 'ban',
             onFinished: (proceed, reason) => {
@@ -283,8 +291,8 @@ module.exports = WithMatrixClient(React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Ban error: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Error",
-                            description: "Failed to ban user",
+                            title: _t("Error"),
+                            description: _t("Failed to ban user"),
                         });
                     }
                 ).finally(()=>{
@@ -333,8 +341,8 @@ module.exports = WithMatrixClient(React.createClass({
                 }, function(err) {
                     console.error("Mute error: " + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Error",
-                        description: "Failed to mute user",
+                        title: _t("Error"),
+                        description: _t("Failed to mute user"),
                     });
                 }
             ).finally(()=>{
@@ -374,16 +382,12 @@ module.exports = WithMatrixClient(React.createClass({
                 console.log("Mod toggle success");
             }, function(err) {
                 if (err.errcode == 'M_GUEST_ACCESS_FORBIDDEN') {
-                    var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-                    Modal.createDialog(NeedToRegisterDialog, {
-                        title: "Please Register",
-                        description: "This action cannot be performed by a guest user. Please register to be able to do this."
-                    });
+                    dis.dispatch({action: 'view_set_mxid'});
                 } else {
                     console.error("Toggle moderator error:" + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Error",
-                        description: "Failed to toggle moderator status",
+                        title: _t("Error"),
+                        description: _t("Failed to toggle moderator status"),
                     });
                 }
             }
@@ -403,8 +407,8 @@ module.exports = WithMatrixClient(React.createClass({
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 console.error("Failed to change power level " + err);
                 Modal.createDialog(ErrorDialog, {
-                    title: "Error",
-                    description: "Failed to change power level",
+                    title: _t("Error"),
+                    description: _t("Failed to change power level"),
                 });
             }
         ).finally(()=>{
@@ -432,13 +436,13 @@ module.exports = WithMatrixClient(React.createClass({
             if (parseInt(myPower) === parseInt(powerLevel)) {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 Modal.createDialog(QuestionDialog, {
-                    title: "Warning",
+                    title: _t("Warning!"),
                     description:
                         <div>
-                            You will not be able to undo this change as you are promoting the user to have the same power level as yourself.<br/>
-                            Are you sure?
+                            { _t("You will not be able to undo this change as you are promoting the user to have the same power level as yourself.") }<br/>
+                            { _t("Are you sure?") }
                         </div>,
-                    button: "Continue",
+                    button: _t("Continue"),
                     onFinished: function(confirmed) {
                         if (confirmed) {
                             self._applyPowerChange(roomId, target, powerLevel, powerLevelEvent);
@@ -581,9 +585,9 @@ module.exports = WithMatrixClient(React.createClass({
             // still loading
             devComponents = <Spinner />;
         } else if (devices === null) {
-            devComponents = "Unable to load device list";
+            devComponents = _t("Unable to load device list");
         } else if (devices.length === 0) {
-            devComponents = "No devices with registered encryption keys";
+            devComponents = _t("No devices with registered encryption keys");
         } else {
             devComponents = [];
             for (var i = 0; i < devices.length; i++) {
@@ -595,7 +599,7 @@ module.exports = WithMatrixClient(React.createClass({
 
         return (
             <div>
-                <h3>Devices</h3>
+                <h3>{ _t("Devices") }</h3>
                 <div className="mx_MemberInfo_devices">
                     {devComponents}
                 </div>
@@ -644,11 +648,11 @@ module.exports = WithMatrixClient(React.createClass({
                 <div className="mx_RoomTile_avatar">
                     <img src="img/create-big.svg" width="26" height="26" />
                 </div>
-                <div className={labelClasses}><i>Start new chat</i></div>
+                <div className={labelClasses}><i>{ _t("Start a chat") }</i></div>
             </AccessibleButton>;
 
             startChat = <div>
-                <h3>Direct chats</h3>
+                <h3>{ _t("Direct chats") }</h3>
                 {tiles}
                 {startNewChat}
             </div>;
@@ -661,7 +665,7 @@ module.exports = WithMatrixClient(React.createClass({
 
         if (this.state.can.kick) {
             const membership = this.props.member.membership;
-            const kickLabel = membership === "invite" ? "Disinvite" : "Kick";
+            const kickLabel = membership === "invite" ? _t("Disinvite") : _t("Kick");
             kickButton = (
                 <AccessibleButton className="mx_MemberInfo_field"
                         onClick={this.onKick}>
@@ -670,9 +674,9 @@ module.exports = WithMatrixClient(React.createClass({
             );
         }
         if (this.state.can.ban) {
-            let label = 'Ban';
+            let label = _t("Ban");
             if (this.props.member.membership == 'ban') {
-                label = 'Unban';
+                label = _t("Unban");
             }
             banButton = (
                 <AccessibleButton className="mx_MemberInfo_field"
@@ -682,7 +686,7 @@ module.exports = WithMatrixClient(React.createClass({
             );
         }
         if (this.state.can.mute) {
-            const muteLabel = this.state.muted ? "Unmute" : "Mute";
+            const muteLabel = this.state.muted ? _t("Unmute") : _t("Mute");
             muteButton = (
                 <AccessibleButton className="mx_MemberInfo_field"
                         onClick={this.onMuteToggle}>
@@ -691,7 +695,7 @@ module.exports = WithMatrixClient(React.createClass({
             );
         }
         if (this.state.can.toggleMod) {
-            var giveOpLabel = this.state.isTargetMod ? "Revoke Moderator" : "Make Moderator";
+            var giveOpLabel = this.state.isTargetMod ? _t("Revoke Moderator") : _t("Make Moderator");
             giveModButton = <AccessibleButton className="mx_MemberInfo_field" onClick={this.onModToggle}>
                 {giveOpLabel}
             </AccessibleButton>;
@@ -704,7 +708,7 @@ module.exports = WithMatrixClient(React.createClass({
         if (kickButton || banButton || muteButton || giveModButton) {
             adminTools =
                 <div>
-                    <h3>Admin tools</h3>
+                    <h3>{_t("Admin tools")}</h3>
 
                     <div className="mx_MemberInfo_buttons">
                         {muteButton}
@@ -717,34 +721,49 @@ module.exports = WithMatrixClient(React.createClass({
 
         const memberName = this.props.member.name;
 
+        if (this.props.member.user) {
+            var presenceState = this.props.member.user.presence;
+            var presenceLastActiveAgo = this.props.member.user.lastActiveAgo;
+            var presenceLastTs = this.props.member.user.lastPresenceTs;
+            var presenceCurrentlyActive = this.props.member.user.currentlyActive;
+        }
+
         var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         var PowerSelector = sdk.getComponent('elements.PowerSelector');
+        var PresenceLabel = sdk.getComponent('rooms.PresenceLabel');
         const EmojiText = sdk.getComponent('elements.EmojiText');
         return (
             <div className="mx_MemberInfo">
-                <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
-                <div className="mx_MemberInfo_avatar">
-                    <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
-                </div>
-
-                <EmojiText element="h2">{memberName}</EmojiText>
-
-                <div className="mx_MemberInfo_profile">
-                    <div className="mx_MemberInfo_profileField">
-                        { this.props.member.userId }
+                <GeminiScrollbar autoshow={true}>
+                    <AccessibleButton className="mx_MemberInfo_cancel" onClick={this.onCancel}> <img src="img/cancel.svg" width="18" height="18"/></AccessibleButton>
+                    <div className="mx_MemberInfo_avatar">
+                        <MemberAvatar onClick={this.onMemberAvatarClick} member={this.props.member} width={48} height={48} />
                     </div>
-                    <div className="mx_MemberInfo_profileField">
-                        Level: <b><PowerSelector controlled={true} value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
+
+                    <EmojiText element="h2">{memberName}</EmojiText>
+
+                    <div className="mx_MemberInfo_profile">
+                        <div className="mx_MemberInfo_profileField">
+                            { this.props.member.userId }
+                        </div>
+                        <div className="mx_MemberInfo_profileField">
+                            { _t("Level:") } <b><PowerSelector controlled={true} value={ parseInt(this.props.member.powerLevel) } disabled={ !this.state.can.modifyLevel } onChange={ this.onPowerChange }/></b>
+                        </div>
+                        <div className="mx_MemberInfo_profileField">
+                            <PresenceLabel activeAgo={ presenceLastActiveAgo }
+                                currentlyActive={ presenceCurrentlyActive }
+                                presenceState={ presenceState } />
+                        </div>
                     </div>
-                </div>
 
-                { adminTools }
+                    { adminTools }
 
-                { startChat }
+                    { startChat }
 
-                { this._renderDevices() }
+                    { this._renderDevices() }
 
-                { spinner }
+                    { spinner }
+                </GeminiScrollbar>
             </div>
         );
     }

src/components/views/rooms/MemberList.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,9 +15,10 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 var React = require('react');
+import { _t } from '../../../languageHandler';
 var classNames = require('classnames');
 var Matrix = require("matrix-js-sdk");
-var q = require('q');
+import Promise from 'bluebird';
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 var Entities = require("../../../Entities");
@@ -27,12 +29,6 @@ var CallHandler = require("../../../CallHandler");
 var Invite = require("../../../Invite");
 
 var INITIAL_LOAD_NUM_MEMBERS = 30;
-var SHARE_HISTORY_WARNING =
-    <span>
-        Newly invited users will see the history of this room. <br/>
-        If you'd prefer invited users not to see messages that were sent before they joined, <br/>
-        turn off, 'Share message history with new users' in the settings for this room.
-    </span>;
 
 module.exports = React.createClass({
     displayName: 'MemberList',
@@ -205,9 +201,9 @@ module.exports = React.createClass({
 
     _createOverflowTile: function(overflowCount, totalCount) {
         // For now we'll pretend this is any entity. It should probably be a separate tile.
-        var EntityTile = sdk.getComponent("rooms.EntityTile");
-        var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") + "...";
+        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} />
@@ -352,7 +348,7 @@ module.exports = React.createClass({
         if (invitedMemberTiles.length > 0) {
             invitedSection = (
                 <div className="mx_MemberList_invited">
-                    <h2>Invited</h2>
+                    <h2>{ _t("Invited") }</h2>
                     <div className="mx_MemberList_wrapper">
                         {invitedMemberTiles}
                     </div>
@@ -363,8 +359,8 @@ module.exports = React.createClass({
         var inputBox = (
             <form autoComplete="off">
                 <input className="mx_MemberList_query" id="mx_MemberList_query" type="text"
-                    onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
-                    placeholder="Filter room members" />
+                        onChange={this.onSearchQueryChanged} value={this.state.searchQuery}
+                        placeholder={ _t('Filter room members') } />
             </form>
         );
 

src/components/views/rooms/MemberTile.js

@@ -22,6 +22,7 @@ var MatrixClientPeg = require('../../../MatrixClientPeg');
 var sdk = require('../../../index');
 var dis = require('../../../dispatcher');
 var Modal = require("../../../Modal");
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MemberTile',
@@ -63,7 +64,7 @@ module.exports = React.createClass({
     },
 
     getPowerLabel: function() {
-        return this.props.member.userId + " (power " + this.props.member.powerLevel + ")";
+        return _t("%(userName)s (power %(powerLevelNumber)s)", {userName: this.props.member.userId, powerLevelNumber: this.props.member.powerLevel});
     },
 
     render: function() {

src/components/views/rooms/MessageComposer.js

@@ -13,16 +13,14 @@ 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 CallHandler = require('../../../CallHandler');
-var MatrixClientPeg = require('../../../MatrixClientPeg');
-var Modal = require('../../../Modal');
-var sdk = require('../../../index');
-var dis = require('../../../dispatcher');
+import React from 'react';
+import { _t } from '../../../languageHandler';
+import CallHandler from '../../../CallHandler';
+import MatrixClientPeg from '../../../MatrixClientPeg';
+import Modal from '../../../Modal';
+import sdk from '../../../index';
+import dis from '../../../dispatcher';
 import Autocomplete from './Autocomplete';
-import classNames from 'classnames';
-
 import UserSettingsStore from '../../../UserSettingsStore';
 
 
@@ -32,12 +30,12 @@ export default class MessageComposer extends React.Component {
         this.onCallClick = this.onCallClick.bind(this);
         this.onHangupClick = this.onHangupClick.bind(this);
         this.onUploadClick = this.onUploadClick.bind(this);
+        this.onShowAppsClick = this.onShowAppsClick.bind(this);
+        this.onHideAppsClick = this.onHideAppsClick.bind(this);
         this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
+        this.uploadFiles = this.uploadFiles.bind(this);
         this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
         this.onInputContentChanged = this.onInputContentChanged.bind(this);
-        this.onUpArrow = this.onUpArrow.bind(this);
-        this.onDownArrow = this.onDownArrow.bind(this);
-        this._tryComplete = this._tryComplete.bind(this);
         this._onAutocompleteConfirm = this._onAutocompleteConfirm.bind(this);
         this.onToggleFormattingClicked = this.onToggleFormattingClicked.bind(this);
         this.onToggleMarkdownClicked = this.onToggleMarkdownClicked.bind(this);
@@ -50,12 +48,11 @@ export default class MessageComposer extends React.Component {
             inputState: {
                 style: [],
                 blockType: null,
-                isRichtextEnabled: UserSettingsStore.getSyncedSetting('MessageComposerInput.isRichTextEnabled', true),
+                isRichtextEnabled: UserSettingsStore.getSyncedSetting('MessageComposerInput.isRichTextEnabled', false),
                 wordCount: 0,
             },
             showFormatting: UserSettingsStore.getSyncedSetting('MessageComposer.showFormatting', false),
         };
-
     }
 
     componentDidMount() {
@@ -80,36 +77,33 @@ export default class MessageComposer extends React.Component {
 
     onUploadClick(ev) {
         if (MatrixClientPeg.get().isGuest()) {
-            let NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
-            Modal.createDialog(NeedToRegisterDialog, {
-                title: "Please Register",
-                description: "Guest users can't upload files. Please register to upload.",
-            });
+            dis.dispatch({action: 'view_set_mxid'});
             return;
         }
 
         this.refs.uploadInput.click();
     }
 
-    onUploadFileSelected(files, isPasted) {
-        if (!isPasted)
-            files = files.target.files;
+    onUploadFileSelected(files) {
+        this.uploadFiles(files.target.files);
+    }
 
+    uploadFiles(files) {
         let QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         let TintableSvg = sdk.getComponent("elements.TintableSvg");
 
         let fileList = [];
         for (let i=0; i<files.length; i++) {
             fileList.push(<li key={i}>
-                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name || 'Attachment'}
+                <TintableSvg key={i} src="img/files.svg" width="16" height="16" /> {files[i].name || _t('Attachment')}
             </li>);
         }
 
         Modal.createDialog(QuestionDialog, {
-            title: "Upload Files",
+            title: _t('Upload Files'),
             description: (
                 <div>
-                    <p>Are you sure you want upload the following files?</p>
+                    <p>{ _t('Are you sure you want to upload the following files?') }</p>
                     <ul style={{listStyle: 'none', textAlign: 'left'}}>
                         {fileList}
                     </ul>
@@ -119,7 +113,7 @@ export default class MessageComposer extends React.Component {
                 if(shouldUpload) {
                     // MessageComposer shouldn't have to rely on its parent passing in a callback to upload a file
                     if (files) {
-                        for(var i=0; i<files.length; i++) {
+                        for(let i=0; i<files.length; i++) {
                             this.props.uploadFile(files[i]);
                         }
                     }
@@ -131,7 +125,7 @@ export default class MessageComposer extends React.Component {
     }
 
     onHangupClick() {
-        var call = CallHandler.getCallForRoom(this.props.room.roomId);
+        const call = CallHandler.getCallForRoom(this.props.room.roomId);
         //var call = CallHandler.getAnyActiveCall();
         if (!call) {
             return;
@@ -144,20 +138,68 @@ export default class MessageComposer extends React.Component {
         });
     }
 
+    // _startCallApp(isAudioConf) {
+        // dis.dispatch({
+        //     action: 'appsDrawer',
+        //     show: true,
+        // });
+
+        // const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', '');
+        // let appsStateEvent = {};
+        // if (appsStateEvents) {
+        //     appsStateEvent = appsStateEvents.getContent();
+        // }
+        // if (!appsStateEvent.videoConf) {
+        //     appsStateEvent.videoConf = {
+        //         type: 'jitsi',
+        //         // FIXME -- This should not be localhost
+        //         url: 'http://localhost:8000/jitsi.html',
+        //         data: {
+        //             confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(),
+        //             isAudioConf: isAudioConf,
+        //         },
+        //     };
+        //     MatrixClientPeg.get().sendStateEvent(
+        //         this.props.room.roomId,
+        //         'im.vector.modular.widgets',
+        //         appsStateEvent,
+        //         '',
+        //     ).then(() => console.log('Sent state'), (e) => console.error(e));
+        // }
+    // }
+
     onCallClick(ev) {
+        // NOTE -- Will be replaced by Jitsi code (currently commented)
         dis.dispatch({
             action: 'place_call',
             type: ev.shiftKey ? "screensharing" : "video",
             room_id: this.props.room.roomId,
         });
+        // this._startCallApp(false);
     }
 
     onVoiceCallClick(ev) {
+        // NOTE -- Will be replaced by Jitsi code (currently commented)
         dis.dispatch({
             action: 'place_call',
-            type: 'voice',
+            type: "voice",
             room_id: this.props.room.roomId,
         });
+        // this._startCallApp(true);
+    }
+
+    onShowAppsClick(ev) {
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: true,
+        });
+    }
+
+    onHideAppsClick(ev) {
+        dis.dispatch({
+            action: 'appsDrawer',
+            show: false,
+        });
     }
 
     onInputContentChanged(content: string, selection: {start: number, end: number}) {
@@ -171,21 +213,6 @@ export default class MessageComposer extends React.Component {
         this.setState({inputState});
     }
 
-    onUpArrow() {
-        return this.refs.autocomplete.onUpArrow();
-    }
-
-    onDownArrow() {
-        return this.refs.autocomplete.onDownArrow();
-    }
-
-    _tryComplete(): boolean {
-        if (this.refs.autocomplete) {
-            return this.refs.autocomplete.onCompletionClicked();
-        }
-        return false;
-    }
-
     _onAutocompleteConfirm(range, completion) {
         if (this.messageComposerInput) {
             this.messageComposerInput.setDisplayedCompletion(range, completion);
@@ -208,19 +235,18 @@ export default class MessageComposer extends React.Component {
     }
 
     render() {
-        var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
-        var uploadInputStyle = {display: 'none'};
-        var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput" +
-            (UserSettingsStore.isFeatureEnabled('rich_text_editor') ? "" : "Old"));
+        const me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
+        const uploadInputStyle = {display: 'none'};
+        const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const MessageComposerInput = sdk.getComponent("rooms.MessageComposerInput");
 
-        var controls = [];
+        const controls = [];
 
         controls.push(
             <div key="controls_avatar" className="mx_MessageComposer_avatar">
                 <MemberAvatar member={me} width={24} height={24} />
-            </div>
+            </div>,
         );
 
         let e2eImg, e2eTitle, e2eClass;
@@ -228,47 +254,61 @@ export default class MessageComposer extends React.Component {
         if (roomIsEncrypted) {
             // FIXME: show a /!\ if there are untrusted devices in the room...
             e2eImg = 'img/e2e-verified.svg';
-            e2eTitle = 'Encrypted room';
+            e2eTitle = _t('Encrypted room');
             e2eClass = 'mx_MessageComposer_e2eIcon';
         } else {
             e2eImg = 'img/e2e-unencrypted.svg';
-            e2eTitle = 'Unencrypted room';
+            e2eTitle = _t('Unencrypted room');
             e2eClass = 'mx_MessageComposer_e2eIcon mx_filterFlipColor';
         }
 
         controls.push(
             <img key="e2eIcon" className={e2eClass} src={e2eImg} width="12" height="12"
                 alt={e2eTitle} title={e2eTitle}
-            />
+            />,
         );
-        var callButton, videoCallButton, hangupButton;
+        let callButton, videoCallButton, hangupButton, showAppsButton, hideAppsButton;
         if (this.props.callState && this.props.callState !== 'ended') {
             hangupButton =
                 <div key="controls_hangup" className="mx_MessageComposer_hangup" onClick={this.onHangupClick}>
-                    <img src="img/hangup.svg" alt="Hangup" title="Hangup" width="25" height="26"/>
+                    <img src="img/hangup.svg" alt={ _t('Hangup') } title={ _t('Hangup') } width="25" height="26"/>
                 </div>;
-        }
-        else {
+        } else {
             callButton =
-                <div key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title="Voice call">
+                <div key="controls_call" className="mx_MessageComposer_voicecall" onClick={this.onVoiceCallClick} title={ _t('Voice call') }>
                     <TintableSvg src="img/icon-call.svg" width="35" height="35"/>
                 </div>;
             videoCallButton =
-                <div key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title="Video call">
+                <div key="controls_videocall" className="mx_MessageComposer_videocall" onClick={this.onCallClick} title={ _t('Video call') }>
                     <TintableSvg src="img/icons-video.svg" width="35" height="35"/>
                 </div>;
         }
 
-        var canSendMessages = this.props.room.currentState.maySendMessage(
+        // Apps
+        if (UserSettingsStore.isFeatureEnabled('matrix_apps')) {
+            if (this.props.showApps) {
+                hideAppsButton =
+                    <div key="controls_hide_apps" className="mx_MessageComposer_apps" onClick={this.onHideAppsClick} title={_t("Hide Apps")}>
+                        <TintableSvg src="img/icons-apps-active.svg" width="35" height="35"/>
+                    </div>;
+            } else {
+                showAppsButton =
+                    <div key="show_apps" className="mx_MessageComposer_apps" onClick={this.onShowAppsClick} title={_t("Show Apps")}>
+                        <TintableSvg src="img/icons-apps.svg" width="35" height="35"/>
+                    </div>;
+            }
+        }
+
+        const canSendMessages = this.props.room.currentState.maySendMessage(
             MatrixClientPeg.get().credentials.userId);
 
         if (canSendMessages) {
             // This also currently includes the call buttons. Really we should
             // check separately for whether we can call, but this is slightly
             // complex because of conference calls.
-            var uploadButton = (
+            const uploadButton = (
                 <div key="controls_upload" className="mx_MessageComposer_upload"
-                        onClick={this.onUploadClick} title="Upload file">
+                        onClick={this.onUploadClick} title={ _t('Upload file') }>
                     <TintableSvg src="img/icons-upload.svg" width="35" height="35"/>
                     <input ref="uploadInput" type="file"
                         style={uploadInputStyle}
@@ -279,71 +319,52 @@ export default class MessageComposer extends React.Component {
 
             const formattingButton = (
                 <img className="mx_MessageComposer_formatting"
-                     title="Show Text Formatting Toolbar"
+                     title={_t("Show Text Formatting Toolbar")}
                      src="img/button-text-formatting.svg"
                      onClick={this.onToggleFormattingClicked}
-                     style={{visibility: this.state.showFormatting ||
-                       !UserSettingsStore.isFeatureEnabled('rich_text_editor') ? 'hidden' : 'visible'}}
+                     style={{visibility: this.state.showFormatting ? 'hidden' : 'visible'}}
                      key="controls_formatting" />
             );
 
             const placeholderText = roomIsEncrypted ?
-                "Send an encrypted message…" : "Send a message (unencrypted)…";
+                _t('Send an encrypted message') + '…' : _t('Send a message (unencrypted)') + '…';
 
             controls.push(
                 <MessageComposerInput
-                    ref={c => this.messageComposerInput = c}
+                    ref={(c) => this.messageComposerInput = c}
                     key="controls_input"
                     onResize={this.props.onResize}
                     room={this.props.room}
                     placeholder={placeholderText}
-                    tryComplete={this._tryComplete}
-                    onUpArrow={this.onUpArrow}
-                    onDownArrow={this.onDownArrow}
-                    onUploadFileSelected={this.onUploadFileSelected}
-                    tabComplete={this.props.tabComplete} // used for old messagecomposerinput/tabcomplete
+                    onFilesPasted={this.uploadFiles}
                     onContentChanged={this.onInputContentChanged}
                     onInputStateChanged={this.onInputStateChanged} />,
                 formattingButton,
                 uploadButton,
                 hangupButton,
                 callButton,
-                videoCallButton
+                videoCallButton,
+                showAppsButton,
+                hideAppsButton,
             );
         } else {
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
-                    You do not have permission to post to this room
-                </div>
+                    { _t('You do not have permission to post to this room') }
+                </div>,
             );
         }
 
-        let autoComplete;
-        if (UserSettingsStore.isFeatureEnabled('rich_text_editor')) {
-            autoComplete = <div className="mx_MessageComposer_autocomplete_wrapper">
-                <Autocomplete
-                    ref="autocomplete"
-                    onConfirm={this._onAutocompleteConfirm}
-                    query={this.state.autocompleteQuery}
-                    selection={this.state.selection} />
-            </div>;
-        }
-
-
         const {style, blockType} = this.state.inputState;
         const formatButtons = ["bold", "italic", "strike", "underline", "code", "quote", "bullet", "numbullet"].map(
-            name => {
+            (name) => {
                 const active = style.includes(name) || blockType === name;
                 const suffix = active ? '-o-n' : '';
                 const onFormatButtonClicked = this.onFormatButtonClicked.bind(this, name);
-                const disabled = !this.state.inputState.isRichtextEnabled && 'underline' === name;
-                const className = classNames("mx_MessageComposer_format_button", {
-                    mx_MessageComposer_format_button_disabled: disabled,
-                    mx_filterFlipColor: true,
-                });
+                const className = 'mx_MessageComposer_format_button mx_filterFlipColor';
                 return <img className={className}
-                            title={name}
-                            onMouseDown={disabled ? null : onFormatButtonClicked}
+                            title={ _t(name) }
+                            onMouseDown={onFormatButtonClicked}
                             key={name}
                             src={`img/button-text-${name}${suffix}.svg`}
                             height="17" />;
@@ -357,30 +378,26 @@ export default class MessageComposer extends React.Component {
                         {controls}
                     </div>
                 </div>
-                {UserSettingsStore.isFeatureEnabled('rich_text_editor') ?
-                    <div className="mx_MessageComposer_formatbar_wrapper">
-                        <div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
-                            {formatButtons}
-                            <div style={{flex: 1}}></div>
-                            <img title={`Turn Markdown ${this.state.inputState.isRichtextEnabled ? 'on' : 'off'}`}
-                                 onMouseDown={this.onToggleMarkdownClicked}
-                                className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
-                                src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
-                            <img title="Hide Text Formatting Toolbar"
-                                 onClick={this.onToggleFormattingClicked}
-                                 className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
-                                 src="img/icon-text-cancel.svg" />
-                        </div>
-                    </div>: null
-                }
+                <div className="mx_MessageComposer_formatbar_wrapper">
+                    <div className="mx_MessageComposer_formatbar" style={this.state.showFormatting ? {} : {display: 'none'}}>
+                        {formatButtons}
+                        <div style={{flex: 1}}></div>
+                        <img title={ this.state.inputState.isRichtextEnabled ? _t("Turn Markdown on") : _t("Turn Markdown off") }
+                             onMouseDown={this.onToggleMarkdownClicked}
+                            className="mx_MessageComposer_formatbar_markdown mx_filterFlipColor"
+                            src={`img/button-md-${!this.state.inputState.isRichtextEnabled}.png`} />
+                        <img title={ _t("Hide Text Formatting Toolbar") }
+                             onClick={this.onToggleFormattingClicked}
+                             className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
+                             src="img/icon-text-cancel.svg" />
+                    </div>
+                </div>
             </div>
         );
     }
 }
 
 MessageComposer.propTypes = {
-    tabComplete: React.PropTypes.any,
-
     // a callback which is called when the height of the composer is
     // changed due to a change in content.
     onResize: React.PropTypes.func,
@@ -395,5 +412,8 @@ MessageComposer.propTypes = {
     uploadFile: React.PropTypes.func.isRequired,
 
     // opacity for dynamic UI fading effects
-    opacity: React.PropTypes.number
+    opacity: React.PropTypes.number,
+
+    // string representing the current room app drawer state
+    showApps: React.PropTypes.bool,
 };