Merge branch 'develop' into new-guest-access

src/components/structures/CreateRoom.js

@@ -16,15 +16,16 @@ limitations under the License.
 
 'use strict';
 
-var React = require("react");
-var MatrixClientPeg = require("../../MatrixClientPeg");
-var PresetValues = {
+import React from 'react';
+import q from 'q';
+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 +232,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 occured: %(error_string)s', {error_string: this.state.error_string})}
                     </div>
                 );
             }
@@ -248,27 +249,27 @@ module.exports = React.createClass({
             <div className="mx_CreateRoom">
                 <SimpleRoomHeader title="CreateRoom" 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 } from '../../languageHandler';
 
 /*
  * Component which shows the filtered file using a TimelinePanel
@@ -116,7 +115,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/LoggedInView.js

@@ -201,7 +201,7 @@ export default React.createClass({
                         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:
@@ -213,7 +213,7 @@ export default React.createClass({
                     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.CreateRoom:
@@ -221,7 +221,7 @@ 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:
@@ -244,12 +244,12 @@ export default React.createClass({
                     teamToken={this.props.teamToken}
                     homePageUrl={this.props.config.welcomePageUrl}
                 />;
-                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.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;
         }
 
@@ -277,7 +277,7 @@ export default React.createClass({
                     <LeftPanel
                         selectedRoom={this.props.currentRoomId}
                         collapsed={this.props.collapse_lhs || false}
-                        opacity={this.props.sideOpacity}
+                        opacity={this.props.leftOpacity}
                     />
                     <main className='mx_MatrixChat_middlePanel'>
                         {page_element}

src/components/structures/MatrixChat.js

@@ -39,6 +39,7 @@ import PageTypes from '../../PageTypes';
 
 import createRoom from "../../createRoom";
 import * as UDEHandler from '../../UnknownDeviceErrorHandler';
+import { _t } from '../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MatrixChat',
@@ -116,8 +117,9 @@ module.exports = React.createClass({
             collapse_rhs: false,
             ready: false,
             width: 10000,
-            sideOpacity: 1.0,
+            leftOpacity: 1.0,
             middleOpacity: 1.0,
+            rightOpacity: 1.0,
 
             version: null,
             newVersion: null,
@@ -249,7 +251,6 @@ module.exports = React.createClass({
         UDEHandler.startListening();
 
         this.focusComposer = false;
-        window.addEventListener("focus", this.onFocus);
 
         // this can technically be done anywhere but doing this here keeps all
         // the routing url path logic together.
@@ -378,8 +379,8 @@ module.exports = React.createClass({
                 break;
             case 'reject_invite':
                 Modal.createDialog(QuestionDialog, {
-                    title: "Reject invitation",
-                    description: "Are you sure you want to reject the invitation?",
+                    title: _t('Reject invitation'),
+                    description: _t('Are you sure you want to reject the invitation?'),
                     onFinished: (confirm) => {
                         if (confirm) {
                             // FIXME: controller shouldn't be loading a view :(
@@ -394,7 +395,7 @@ module.exports = React.createClass({
                             }, (err) => {
                                 modal.close();
                                 Modal.createDialog(ErrorDialog, {
-                                    title: "Failed to reject invitation",
+                                    title:  _t('Failed to reject invitation'),
                                     description: err.toString(),
                                 });
                             });
@@ -446,11 +447,11 @@ module.exports = React.createClass({
                     break;
                 }
                 Modal.createDialog(TextInputDialog, {
-                    title: "Create Room",
-                    description: "Room name (optional)",
-                    button: "Create Room",
-                    onFinished: (shouldCreate, name) => {
-                        if (shouldCreate) {
+                    title: _t('Create Room'),
+                    description: _t('Room name (optional)'),
+                    button: _t('Create Room'),
+                    onFinished: (should_create, name) => {
+                        if (should_create) {
                             const createOpts = {};
                             if (name) createOpts.name = name;
                             createRoom({createOpts}).done();
@@ -498,12 +499,14 @@ module.exports = React.createClass({
                     collapse_rhs: false,
                 });
                 break;
-            case 'ui_opacity':
+            case 'ui_opacity': {
+                const sideDefault = payload.sideOpacity >= 0.0 ? payload.sideOpacity : 1.0;
                 this.setState({
-                    sideOpacity: payload.sideOpacity,
-                    middleOpacity: payload.middleOpacity,
+                    leftOpacity: payload.leftOpacity >= 0.0 ? payload.leftOpacity : sideDefault,
+                    middleOpacity: payload.middleOpacity || 1.0,
+                    rightOpacity: payload.rightOpacity >= 0.0 ? payload.rightOpacity : sideDefault,
                 });
-                break;
+                break; }
             case 'set_theme':
                 this._onSetTheme(payload.value);
                 break;
@@ -689,16 +692,20 @@ module.exports = React.createClass({
         }
         const ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
-            title: "Start a new chat",
+            title: _t('Start a chat'),
+            description: _t("Who would you like to communicate with?"),
+            placeholder: _t("Email, name or matrix ID"),
+            button: _t("Start Chat")
         });
     },
 
     _invite: function(roomId) {
         const ChatInviteDialog = sdk.getComponent("dialogs.ChatInviteDialog");
         Modal.createDialog(ChatInviteDialog, {
-            title: "Invite new room members",
-            button: "Send Invites",
-            description: "Who would you like to add to this room?",
+            title: _t('Invite new room members'),
+            description: _t('Who would you like to add to this room?'),
+            button: _t('Send Invites'),
+            placeholder: _t("Email, name or matrix ID"),
             roomId: roomId,
         });
     },
@@ -933,8 +940,8 @@ module.exports = React.createClass({
         cli.on('Session.logged_out', function(call) {
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Signed Out",
-                description: "For security, this session has been signed out. Please sign in again.",
+                title: _t('Signed Out'),
+                description: _t('For security, this session has been signed out. Please sign in again.'),
             });
             dis.dispatch({
                 action: 'logout',
@@ -952,10 +959,6 @@ module.exports = React.createClass({
         });
     },
 
-    onFocus: function(ev) {
-        dis.dispatch({action: 'focus_composer'});
-    },
-
     showScreen: function(screen, params) {
         if (screen == 'register') {
             dis.dispatch({
@@ -1242,7 +1245,7 @@ module.exports = React.createClass({
                 <div className="mx_MatrixChat_splash">
                     <Spinner />
                     <a href="#" className="mx_MatrixChat_splashButtons" onClick={ this.onLogoutClick }>
-                    Logout
+                    { _t('Logout') }
                     </a>
                 </div>
             );

src/components/structures/MessagePanel.js

@@ -84,6 +84,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() {
@@ -230,8 +236,8 @@ module.exports = React.createClass({
     },
 
     _getEventTiles: function() {
-        var EventTile = sdk.getComponent('rooms.EventTile');
-        var DateSeparator = sdk.getComponent('messages.DateSeparator');
+        const EventTile = sdk.getComponent('rooms.EventTile');
+        const DateSeparator = sdk.getComponent('messages.DateSeparator');
         const MemberEventListSummary = sdk.getComponent('views.elements.MemberEventListSummary');
 
         this.eventNodes = {};
@@ -413,8 +419,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?
@@ -468,7 +474,6 @@ module.exports = React.createClass({
         if (this.props.manageReadReceipts) {
             readReceipts = this._getReadReceiptsForEvent(mxEv);
         }
-
         ret.push(
                 <li key={eventId}
                         ref={this._collectEventNode.bind(this, eventId)}
@@ -482,6 +487,7 @@ module.exports = React.createClass({
                         checkUnmounting={this._isUnmounting}
                         eventSendStatus={mxEv.status}
                         tileShape={this.props.tileShape}
+                        isTwelveHour={this.props.isTwelveHour}
                         last={last} isSelectedEvent={highlight}/>
                 </li>
         );
@@ -615,8 +621,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/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,13 @@ 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 } from '../../languageHandler';
+import sdk from '../../index';
+import dis from '../../dispatcher';
+import WhoIsTyping from '../../WhoIsTyping';
+import MatrixClientPeg from '../../MatrixClientPeg';
+import MemberAvatar from '../views/avatars/MemberAvatar';
 
 const HIDE_DEBOUNCE_MS = 10000;
 const STATUS_BAR_HIDDEN = 0;
@@ -175,8 +176,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>
             );
         }
@@ -250,10 +251,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.
+                        {_t('Sent messages will be stored until your connection has returned.')}
                     </div>
                 </div>
             );
@@ -266,7 +267,7 @@ module.exports = React.createClass({
                         <TabCompleteBar tabComplete={this.props.tabComplete} />
                         <div className="mx_RoomStatusBar_tabCompleteEol" title="->|">
                             <TintableSvg src="img/eol.svg" width="22" height="16"/>
-                            Auto-complete
+                            {_t('Auto-complete')}
                         </div>
                     </div>
                 </div>
@@ -283,13 +284,12 @@ module.exports = React.createClass({
                     <div className="mx_RoomStatusBar_connectionLostBar_desc">
                         <a className="mx_RoomStatusBar_resend_link"
                           onClick={ this.props.onResendAllClick }>
-                            Resend all
-                        </a> or <a
+                            {_t('Resend all')}
+                        </a> {_t('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.
+                            {_t('cancel all')}
+                        </a> {_t('now. You can also select individual messages to resend or cancel.')}
                     </div>
                 </div>
             );
@@ -324,7 +324,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/RoomView.js

@@ -25,6 +25,7 @@ var ReactDOM = require("react-dom");
 var q = require("q");
 var classNames = require("classnames");
 var Matrix = require("matrix-js-sdk");
+import { _t } from '../../languageHandler';
 
 var UserSettingsStore = require('../../UserSettingsStore');
 var MatrixClientPeg = require("../../MatrixClientPeg");
@@ -119,6 +120,8 @@ module.exports = React.createClass({
             room: null,
             roomId: null,
             roomLoading: true,
+
+            forwardingEvent: null,
             editingRoomSettings: false,
             uploadingRoomSettings: false,
             numUnreadMessages: 0,
@@ -351,10 +354,10 @@ module.exports = React.createClass({
     onPageUnload(event) {
         if (ContentMessages.getCurrentUploads().length > 0) {
             return event.returnValue =
-                'You seem to be uploading files, are you sure you want to quit?';
+                _t("You seem to be uploading files, are you sure you want to quit?");
         } else if (this._getCallForRoom() && this.state.callState !== 'ended') {
             return event.returnValue =
-                'You seem to be in a call, are you sure you want to quit?';
+                _t("You seem to be in a call, are you sure you want to quit?");
         }
     },
 
@@ -432,6 +435,11 @@ module.exports = React.createClass({
                     callState: callState
                 });
 
+                break;
+            case 'forward_event':
+                this.setState({
+                    forwardingEvent: payload.content,
+                });
                 break;
         }
     },
@@ -511,14 +519,14 @@ module.exports = React.createClass({
         if (!userHasUsedEncryption) {
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createDialog(QuestionDialog, {
-                title: "Warning!",
+                title: _t("Warning!"),
                 hasCancelButton: false,
                 description: (
                     <div>
-                        <p>End-to-end encryption is in beta and may not be reliable.</p>
-                        <p>You should <b>not</b> yet trust it to secure data.</p>
-                        <p>Devices will <b>not</b> yet be able to decrypt history from before they joined the room.</p>
-                        <p>Encrypted messages will not be visible on clients that do not yet implement encryption.</p>
+                        <p>{ _t("End-to-end encryption is in beta and may not be reliable") }.</p>
+                        <p>{ _t("You should not yet trust it to secure data") }.</p>
+                        <p>{ _t("Devices will not yet be able to decrypt history from before they joined the room") }.</p>
+                        <p>{ _t("Encrypted messages will not be visible on clients that do not yet implement encryption") }.</p>
                     </div>
                 ),
             });
@@ -679,10 +687,10 @@ module.exports = React.createClass({
         if (!unsentMessages.length) return "";
         for (const event of unsentMessages) {
             if (!event.error || event.error.name !== "UnknownDeviceError") {
-                return "Some of your messages have not been sent.";
+                return _t("Some of your messages have not been sent") + ".";
             }
         }
-        return "Message not sent due to unknown devices being present";
+        return _t("Message not sent due to unknown devices being present");
     },
 
     _getUnsentMessages: function(room) {
@@ -873,8 +881,8 @@ module.exports = React.createClass({
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to upload file " + file + " " + error);
             Modal.createDialog(ErrorDialog, {
-                title: "Failed to upload file",
-                description: ((error && error.message) ? error.message : "Server may be unavailable, overloaded, or the file too big"),
+                title: _t('Failed to upload file'),
+                description: ((error && error.message) ? error.message : _t("Server may be unavailable, overloaded, or the file too big")),
             });
         });
     },
@@ -960,8 +968,8 @@ module.exports = React.createClass({
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Search failed: " + error);
             Modal.createDialog(ErrorDialog, {
-                title: "Search failed",
-                description: ((error && error.message) ? error.message : "Server may be unavailable, overloaded, or search timed out :("),
+                title: _t("Search failed"),
+                description: ((error && error.message) ? error.message : _t("Server may be unavailable, overloaded, or search timed out :(")),
             });
         }).finally(function() {
             self.setState({
@@ -996,12 +1004,12 @@ module.exports = React.createClass({
         if (!this.state.searchResults.next_batch) {
             if (this.state.searchResults.results.length == 0) {
                 ret.push(<li key="search-top-marker">
-                         <h2 className="mx_RoomView_topMarker">No results</h2>
+                         <h2 className="mx_RoomView_topMarker">{ _t("No results") }</h2>
                          </li>
                         );
             } else {
                 ret.push(<li key="search-top-marker">
-                         <h2 className="mx_RoomView_topMarker">No more results</h2>
+                         <h2 className="mx_RoomView_topMarker">{ _t("No more results") }</h2>
                          </li>
                         );
             }
@@ -1038,10 +1046,10 @@ module.exports = React.createClass({
                     // it. We should tell the js sdk to go and find out about
                     // it. But that's not an issue currently, as synapse only
                     // returns results for rooms we're joined to.
-                    var roomName = room ? room.name : "Unknown room "+roomId;
+                    var roomName = room ? room.name : _t("Unknown room %(roomId)s", { roomId: roomId });
 
                     ret.push(<li key={mxEv.getId() + "-room"}>
-                                 <h1>Room: { roomName }</h1>
+                                 <h1>{ _t("Room") }: { roomName }</h1>
                              </li>);
                     lastRoomId = roomId;
                 }
@@ -1087,7 +1095,7 @@ module.exports = React.createClass({
                 });
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Failed to save settings",
+                    title: _t("Failed to save settings"),
                     description: fails.map(function(result) { return result.reason; }).join("\n"),
                 });
                 // still editing room settings
@@ -1108,7 +1116,10 @@ module.exports = React.createClass({
     onCancelClick: function() {
         console.log("updateTint from onCancelClick");
         this.updateTint();
-        this.setState({editingRoomSettings: false});
+        this.setState({
+            editingRoomSettings: false,
+            forwardingEvent: null,
+        });
         dis.dispatch({action: 'focus_composer'});
     },
 
@@ -1123,11 +1134,11 @@ module.exports = React.createClass({
         MatrixClientPeg.get().forget(this.state.room.roomId).done(function() {
             dis.dispatch({ action: 'view_next_room' });
         }, function(err) {
-            var errCode = err.errcode || "unknown error code";
+            var errCode = err.errcode || _t("unknown error code");
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: `Failed to forget room (${errCode})`
+                title: _t("Error"),
+                description: _t("Failed to forget room %(errCode)s", { errCode: errCode }),
             });
         });
     },
@@ -1148,8 +1159,8 @@ module.exports = React.createClass({
             var msg = error.message ? error.message : JSON.stringify(error);
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Failed to reject invite",
-                description: msg
+                title: _t("Failed to reject invite"),
+                description: msg,
             });
 
             self.setState({
@@ -1386,16 +1397,17 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var RoomHeader = sdk.getComponent('rooms.RoomHeader');
-        var MessageComposer = sdk.getComponent('rooms.MessageComposer');
-        var RoomSettings = sdk.getComponent("rooms.RoomSettings");
-        var AuxPanel = sdk.getComponent("rooms.AuxPanel");
-        var SearchBar = sdk.getComponent("rooms.SearchBar");
-        var ScrollPanel = sdk.getComponent("structures.ScrollPanel");
-        var TintableSvg = sdk.getComponent("elements.TintableSvg");
-        var RoomPreviewBar = sdk.getComponent("rooms.RoomPreviewBar");
-        var Loader = sdk.getComponent("elements.Spinner");
-        var TimelinePanel = sdk.getComponent("structures.TimelinePanel");
+        const RoomHeader = sdk.getComponent('rooms.RoomHeader');
+        const MessageComposer = sdk.getComponent('rooms.MessageComposer');
+        const ForwardMessage = sdk.getComponent("rooms.ForwardMessage");
+        const RoomSettings = sdk.getComponent("rooms.RoomSettings");
+        const AuxPanel = sdk.getComponent("rooms.AuxPanel");
+        const SearchBar = sdk.getComponent("rooms.SearchBar");
+        const ScrollPanel = sdk.getComponent("structures.ScrollPanel");
+        const TintableSvg = sdk.getComponent("elements.TintableSvg");
+        const RoomPreviewBar = sdk.getComponent("rooms.RoomPreviewBar");
+        const Loader = sdk.getComponent("elements.Spinner");
+        const TimelinePanel = sdk.getComponent("structures.TimelinePanel");
 
         if (!this.state.room) {
                 if (this.state.roomLoading) {
@@ -1523,17 +1535,16 @@ module.exports = React.createClass({
             />;
         }
 
-        var aux = null;
-        if (this.state.editingRoomSettings) {
+        let aux = null;
+        if (this.state.forwardingEvent !== null) {
+            aux = <ForwardMessage onCancelClick={this.onCancelClick} currentRoomId={this.state.room.roomId} mxEvent={this.state.forwardingEvent} />;
+        } else if (this.state.editingRoomSettings) {
             aux = <RoomSettings ref="room_settings" onSaveClick={this.onSettingsSaveClick} onCancelClick={this.onCancelClick} room={this.state.room} />;
-        }
-        else if (this.state.uploadingRoomSettings) {
+        } else if (this.state.uploadingRoomSettings) {
             aux = <Loader/>;
-        }
-        else if (this.state.searching) {
+        } else if (this.state.searching) {
             aux = <SearchBar ref="search_bar" searchInProgress={this.state.searchInProgress } onCancelClick={this.onCancelSearchClick} onSearch={this.onSearch}/>;
-        }
-        else if (!myMember || myMember.membership !== "join") {
+        } else if (!myMember || myMember.membership !== "join") {
             // We do have a room object for this room, but we're not currently in it.
             // We may have a 3rd party invite to it.
             var inviterName = undefined;
@@ -1595,7 +1606,7 @@ module.exports = React.createClass({
 
             if (call.type === "video") {
                 zoomButton = (
-                    <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title="Fill screen">
+                    <div className="mx_RoomView_voipButton" onClick={this.onFullscreenClick} title={ _t("Fill screen") }>
                         <TintableSvg src="img/fullscreen.svg" width="29" height="22" style={{ marginTop: 1, marginRight: 4 }}/>
                     </div>
                 );
@@ -1603,14 +1614,14 @@ module.exports = React.createClass({
                 videoMuteButton =
                     <div className="mx_RoomView_voipButton" onClick={this.onMuteVideoClick}>
                         <TintableSvg src={call.isLocalVideoMuted() ? "img/video-unmute.svg" : "img/video-mute.svg"}
-                             alt={call.isLocalVideoMuted() ? "Click to unmute video" : "Click to mute video"}
+                             alt={call.isLocalVideoMuted() ? _t("Click to unmute video") : _t("Click to mute video")}
                              width="31" height="27"/>
                     </div>;
             }
             voiceMuteButton =
                 <div className="mx_RoomView_voipButton" onClick={this.onMuteAudioClick}>
                     <TintableSvg src={call.isMicrophoneMuted() ? "img/voice-unmute.svg" : "img/voice-mute.svg"}
-                         alt={call.isMicrophoneMuted() ? "Click to unmute audio" : "Click to mute audio"}
+                         alt={call.isMicrophoneMuted() ? _t("Click to unmute audio") : _t("Click to mute audio")}
                          width="21" height="26"/>
                 </div>;
 
@@ -1646,14 +1657,13 @@ module.exports = React.createClass({
         }
 
         // console.log("ShowUrlPreview for %s is %s", this.state.room.roomId, this.state.showUrlPreview);
-
         var messagePanel = (
             <TimelinePanel ref={this._gatherTimelinePanelRef}
                 timelineSet={this.state.room.getUnfilteredTimelineSet()}
                 manageReadReceipts={!UserSettingsStore.getSyncedSetting('hideReadReceipts', false)}
                 manageReadMarkers={true}
                 hidden={hideMessagePanel}
-                highlightedEventId={this.props.highlightedEventId}
+                highlightedEventId={this.state.forwardingEvent ? this.state.forwardingEvent.getId() : this.props.highlightedEventId}
                 eventId={this.props.eventId}
                 eventPixelOffset={this.props.eventPixelOffset}
                 onScroll={ this.onMessageListScroll }
@@ -1691,7 +1701,7 @@ module.exports = React.createClass({
                     onSearchClick={this.onSearchClick}
                     onSettingsClick={this.onSettingsClick}
                     onSaveClick={this.onSettingsSaveClick}
-                    onCancelClick={this.onCancelClick}
+                    onCancelClick={aux ? this.onCancelClick : null}
                     onForgetClick={
                         (myMember && myMember.membership === "leave") ? this.onForgetClick : null
                     }

src/components/structures/TimelinePanel.js

@@ -23,12 +23,14 @@ 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;
@@ -122,7 +124,7 @@ var TimelinePanel = React.createClass({
         let initialReadMarker = null;
         if (this.props.manageReadMarkers) {
             const readmarker = this.props.timelineSet.room.getAccountData('m.fully_read');
-            if (readmarker){
+            if (readmarker) {
                 initialReadMarker = readmarker.getContent().event_id;
             } else {
                 initialReadMarker = this._getCurrentReadReceipt();
@@ -171,6 +173,12 @@ var TimelinePanel = React.createClass({
 
             // cache of matrixClient.getSyncState() (but from the 'sync' event)
             clientSyncState: MatrixClientPeg.get().getSyncState(),
+
+            // should the event tiles have twelve hour times
+            isTwelveHour: UserSettingsStore.getSyncedSetting('showTwelveHourTimestamps'),
+
+            // always show timestamps on event tiles?
+            alwaysShowTimestamps: UserSettingsStore.getSyncedSetting('alwaysShowTimestamps'),
         };
     },
 
@@ -907,14 +915,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,
             });
@@ -1106,7 +1111,6 @@ var TimelinePanel = React.createClass({
         const forwardPaginating = (
             this.state.forwardPaginating || this.state.clientSyncState == 'PREPARED'
         );
-
         return (
             <MessagePanel ref="messagePanel"
                     hidden={ this.props.hidden }
@@ -1125,6 +1129,8 @@ var TimelinePanel = React.createClass({
                     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/UserSettings.js

@@ -29,6 +29,8 @@ const Email = require('../../email');
 const AddThreepid = require('../../AddThreepid');
 const SdkConfig = require('../../SdkConfig');
 import AccessibleButton from '../views/elements/AccessibleButton';
+import { _t } from '../../languageHandler';
+import * as languageHandler from '../../languageHandler';
 import * as FormattingUtils from '../../utils/FormattingUtils';
 
 // if this looks like a release, use the 'version' from package.json; else use
@@ -47,12 +49,14 @@ const gHVersionLabel = function(repo, token='') {
     } else {
         url = `https://github.com/${repo}/commit/${token.split('-')[0]}`;
     }
-    return <a href={url}>{token}</a>;
+    return <a target="_blank" rel="noopener" href={url}>{token}</a>;
 };
 
 // Enumerate some simple 'flip a bit' UI settings (if any).
 // 'id' gives the key name in the im.vector.web.settings account data event
 // 'label' is how we describe it in the UI.
+// Warning: Each "label" string below must be added to i18n/strings/en_EN.json, 
+// since they will be translated when rendered.
 const SETTINGS_LABELS = [
     {
         id: 'autoplayGifsAndVideos',
@@ -66,7 +70,6 @@ const SETTINGS_LABELS = [
         id: 'dontSendTypingNotifications',
         label: "Don't send typing notifications",
     },
-/*
     {
         id: 'alwaysShowTimestamps',
         label: 'Always show message timestamps',
@@ -75,6 +78,7 @@ const SETTINGS_LABELS = [
         id: 'showTwelveHourTimestamps',
         label: 'Show timestamps in 12 hour format (e.g. 2:30pm)',
     },
+/*
     {
         id: 'useCompactLayout',
         label: 'Use compact timeline layout',
@@ -86,6 +90,8 @@ const SETTINGS_LABELS = [
 */
 ];
 
+// Warning: Each "label" string below must be added to i18n/strings/en_EN.json, 
+// since they will be translated when rendered.
 const CRYPTO_SETTINGS_LABELS = [
     {
         id: 'blacklistUnverifiedDevices',
@@ -119,7 +125,6 @@ const THEMES = [
     },
 ];
 
-
 module.exports = React.createClass({
     displayName: 'UserSettings',
 
@@ -197,6 +202,10 @@ module.exports = React.createClass({
         this._syncedSettings = syncedSettings;
 
         this._localSettings = UserSettingsStore.getLocalSettings();
+
+        this.setState({
+            language: languageHandler.getCurrentLanguage(),
+        });
     },
 
     componentDidMount: function() {
@@ -232,8 +241,8 @@ module.exports = React.createClass({
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to load user settings: " + error);
             Modal.createDialog(ErrorDialog, {
-                title: "Can't load user settings",
-                description: ((error && error.message) ? error.message : "Server may be unavailable or overloaded"),
+                title: _t("Can't load user settings"),
+                description: ((error && error.message) ? error.message : _t("Server may be unavailable or overloaded")),
             });
         });
     },
@@ -270,8 +279,8 @@ module.exports = React.createClass({
             console.error("Failed to set avatar: " + err);
             const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Failed to set avatar",
-                description: ((err && err.message) ? err.message : "Operation failed"),
+                title: _t("Failed to set avatar."),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         });
     },
@@ -279,19 +288,19 @@ module.exports = React.createClass({
     onLogoutClicked: function(ev) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
-            title: "Sign out?",
+            title: _t("Sign out"),
             description:
                 <div>
-                    For security, logging out will delete any end-to-end encryption keys from this browser.
-
-                    If you want to be able to decrypt your conversation history from future Riot sessions,
-                    please export your room keys for safe-keeping.
+             { _t("For security, logging out will delete any end-to-end " +
+                  "encryption keys from this browser. If you want to be able " +
+                  "to decrypt your conversation history from future Riot sessions, " +
+                  "please export your room keys for safe-keeping.") }.
                 </div>,
-            button: "Sign out",
+            button: _t("Sign out"),
             extraButtons: [
                 <button key="export" className="mx_Dialog_primary"
                         onClick={this._onExportE2eKeysClicked}>
-                    Export E2E room keys
+                   { _t("Export E2E room keys") }
                 </button>,
             ],
             onFinished: (confirmed) => {
@@ -308,14 +317,14 @@ module.exports = React.createClass({
     onPasswordChangeError: function(err) {
         let errMsg = err.error || "";
         if (err.httpStatus === 403) {
-            errMsg = "Failed to change password. Is your password correct?";
+            errMsg = _t("Failed to change password. Is your password correct?");
         } else if (err.httpStatus) {
             errMsg += ` (HTTP status ${err.httpStatus})`;
         }
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         console.error("Failed to change password: " + errMsg);
         Modal.createDialog(ErrorDialog, {
-            title: "Error",
+            title: _t("Error"),
             description: errMsg,
         });
     },
@@ -323,10 +332,8 @@ module.exports = React.createClass({
     onPasswordChanged: function() {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         Modal.createDialog(ErrorDialog, {
-            title: "Success",
-            description: `Your password was successfully changed. You will not
-                          receive push notifications on other devices until you
-                          log back in to them.`,
+            title: _t("Success"),
+            description: _t("Your password was successfully changed. You will not receive push notifications on other devices until you log back in to them") + ".",
         });
         dis.dispatch({action: 'password_changed'});
     },
@@ -353,8 +360,8 @@ module.exports = React.createClass({
         const emailAddress = this.refs.add_email_input.value;
         if (!Email.looksValid(emailAddress)) {
             Modal.createDialog(ErrorDialog, {
-                title: "Invalid Email Address",
-                description: "This doesn't appear to be a valid email address",
+                title: _t("Invalid Email Address"),
+                description: _t("This doesn't appear to be a valid email address"),
             });
             return;
         }
@@ -363,17 +370,17 @@ module.exports = React.createClass({
         // same here.
         this._addThreepid.addEmailAddress(emailAddress, true).done(() => {
             Modal.createDialog(QuestionDialog, {
-                title: "Verification Pending",
-                description: "Please check your email and click on the link it contains. Once this is done, click continue.",
-                button: 'Continue',
+                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({email_add_pending: false});
             console.error("Unable to add email address " + emailAddress + " " + err);
             Modal.createDialog(ErrorDialog, {
-                title: "Unable to add email address",
-                description: ((err && err.message) ? err.message : "Operation failed"),
+                title: _t("Unable to add email address"),
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
             });
         });
         ReactDOM.findDOMNode(this.refs.add_email_input).blur();
@@ -383,9 +390,9 @@ module.exports = React.createClass({
     onRemoveThreepidClicked: function(threepid) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
-            title: "Remove Contact Information?",
-            description: "Remove " + threepid.address + "?",
-            button: 'Remove',
+            title: _t("Remove Contact Information?"),
+            description: _t("Remove %(threePid)s?", { threePid : threepid.address }),
+            button: _t('Remove'),
             onFinished: (submit) => {
                 if (submit) {
                     this.setState({
@@ -397,8 +404,8 @@ module.exports = React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Unable to remove contact information: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Unable to remove contact information",
-                            description: ((err && err.message) ? err.message : "Operation failed"),
+                            title: _t("Unable to remove contact information"),
+                            description: ((err && err.message) ? err.message : _t("Operation failed")),
                         });
                     }).done();
                 }
@@ -424,22 +431,22 @@ module.exports = React.createClass({
             this.setState({email_add_pending: false});
         }, (err) => {
             this.setState({email_add_pending: false});
-            if (err.errcode === 'M_THREEPID_AUTH_FAILED') {
+            if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
                 const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-                let message = "Unable to verify email address. ";
-                message += "Please check your email and click on the link it contains. Once this is done, click continue.";
+                let 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: "Verification Pending",
+                    title: _t("Verification Pending"),
                     description: message,
-                    button: 'Continue',
+                    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: "Unable to verify email address",
-                    description: ((err && err.message) ? err.message : "Operation failed"),
+                    title: _t("Unable to verify email address."),
+                    description: ((err && err.message) ? err.message : _t("Operation failed")),
                 });
             }
         });
@@ -529,20 +536,43 @@ module.exports = React.createClass({
             <div>
                 <h3>Referral</h3>
                 <div className="mx_UserSettings_section">
-                    Refer a friend to Riot: <a href={href}>{href}</a>
+                    {_t("Refer a friend to Riot:")} <a href={href}>{href}</a>
                 </div>
             </div>
         );
     },
 
+    onLanguageChange: function(newLang) {
+        if(this.state.language !== newLang) {
+            UserSettingsStore.setLocalSetting('language', newLang);
+            this.setState({
+                language: newLang,
+            });
+            PlatformPeg.get().reload();
+        }
+    },
+
+    _renderLanguageSetting: function () {
+        const LanguageDropdown = sdk.getComponent('views.elements.LanguageDropdown');
+        return <div>
+            <label htmlFor="languageSelector">{_t('Interface Language')}</label>
+            <LanguageDropdown ref="language" onOptionChange={this.onLanguageChange}
+                          className="mx_UserSettings_language"
+                          value={this.state.language}
+            />
+        </div>;
+    },
+
     _renderUserInterfaceSettings: function() {
         return (
             <div>
-                <h3>User Interface</h3>
+                <h3>{ _t("User Interface") }</h3>
                 <div className="mx_UserSettings_section">
                     { this._renderUrlPreviewSelector() }
                     { SETTINGS_LABELS.map( this._renderSyncedSetting ) }
                     { THEMES.map( this._renderThemeSelector ) }
+                    { this._renderLanguageSetting() }
+
                 </div>
             </div>
         );
@@ -556,7 +586,7 @@ module.exports = React.createClass({
                    onChange={ (e) => UserSettingsStore.setUrlPreviewsDisabled(e.target.checked) }
             />
             <label htmlFor="urlPreviewsDisabled">
-                Disable inline URL previews by default
+                { _t("Disable inline URL previews by default") }
             </label>
         </div>;
     },
@@ -569,7 +599,7 @@ module.exports = React.createClass({
                    onChange={ (e) => UserSettingsStore.setSyncedSetting(setting.id, e.target.checked) }
             />
             <label htmlFor={ setting.id }>
-                { setting.label }
+                { _t(setting.label) }
             </label>
         </div>;
     },
@@ -603,7 +633,7 @@ module.exports = React.createClass({
         const deviceId = client.deviceId;
         let identityKey = client.getDeviceEd25519Key();
         if (!identityKey) {
-             identityKey = "<not supported>";
+             identityKey = _t("<not supported>");
         } else {
             identityKey = FormattingUtils.formatCryptoKey(identityKey);
         }
@@ -615,18 +645,18 @@ module.exports = React.createClass({
                 <div className="mx_UserSettings_importExportButtons">
                     <AccessibleButton className="mx_UserSettings_button"
                             onClick={this._onExportE2eKeysClicked}>
-                        Export E2E room keys
+                        { _t("Export E2E room keys") }
                     </AccessibleButton>
                     <AccessibleButton className="mx_UserSettings_button"
                             onClick={this._onImportE2eKeysClicked}>
-                        Import E2E room keys
+                        { _t("Import E2E room keys") }
                     </AccessibleButton>
                 </div>
             );
         }
         return (
             <div>
-                <h3>Cryptography</h3>
+                <h3>{ _t("Cryptography") }</h3>
                 <div className="mx_UserSettings_section mx_UserSettings_cryptoSection">
                     <ul>
                         <li><label>Device ID:</label>             <span><code>{deviceId}</code></span></li>
@@ -657,7 +687,7 @@ module.exports = React.createClass({
                     }
             />
             <label htmlFor={ setting.id }>
-                { setting.label }
+                { _t(setting.label) }
             </label>
         </div>;
     },
@@ -678,11 +708,11 @@ module.exports = React.createClass({
         }
         return (
             <div>
-                <h3>Bug Report</h3>
+                <h3>{ _t("Bug Report") }</h3>
                 <div className="mx_UserSettings_section">
-                    <p>Found a bug?</p>
+                    <p>{ _t("Found a bug?") }</p>
                     <button className="mx_UserSettings_button danger"
-                        onClick={this._onBugReportClicked}>Report it
+                        onClick={this._onBugReportClicked}>{_t('Report it')}
                     </button>
                 </div>
             </div>
@@ -715,9 +745,9 @@ module.exports = React.createClass({
         ));
         return (
             <div>
-                <h3>Labs</h3>
+                <h3>{ _t("Labs") }</h3>
                 <div className="mx_UserSettings_section">
-                    <p>These are experimental features that may break in unexpected ways. Use with caution.</p>
+                    <p>{ _t("These are experimental features that may break in unexpected ways") }. { _t("Use with caution") }.</p>
                     {features}
                 </div>
             </div>
@@ -729,10 +759,10 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get().isGuest()) return null;
 
         return <div>
-            <h3>Deactivate Account</h3>
+            <h3>{ _t("Deactivate Account") }</h3>
                 <div className="mx_UserSettings_section">
                     <AccessibleButton className="mx_UserSettings_button danger"
-                        onClick={this._onDeactivateAccountClicked}>Deactivate my account
+                        onClick={this._onDeactivateAccountClicked}> { _t("Deactivate my account") }
                     </AccessibleButton>
                 </div>
         </div>;
@@ -740,11 +770,11 @@ module.exports = React.createClass({
 
     _renderClearCache: function() {
         return <div>
-            <h3>Clear Cache</h3>
+            <h3>{ _t("Clear Cache") }</h3>
                 <div className="mx_UserSettings_section">
                     <AccessibleButton className="mx_UserSettings_button danger"
                         onClick={this._onClearCacheClicked}>
-                        Clear Cache and Reload
+                        { _t("Clear Cache and Reload") }
                     </AccessibleButton>
                 </div>
         </div>;
@@ -773,7 +803,7 @@ module.exports = React.createClass({
         }
 
         return <div>
-            <h3>Bulk Options</h3>
+            <h3>{ _t("Bulk Options") }</h3>
                 <div className="mx_UserSettings_section">
                     {reject}
                 </div>
@@ -793,7 +823,8 @@ module.exports = React.createClass({
     },
 
     nameForMedium: function(medium) {
-        if (medium === 'msisdn') return 'Phone';
+        if (medium === 'msisdn') return _t('Phone');
+        if (medium === 'email') return _t('Email');
         return medium[0].toUpperCase() + medium.slice(1);
     },
 
@@ -842,7 +873,7 @@ module.exports = React.createClass({
                         />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                        <img src="img/cancel-small.svg" width="14" height="14" alt="Remove" onClick={this.onRemoveThreepidClicked.bind(this, val)} />
+                        <img src="img/cancel-small.svg" width="14" height="14" alt={ _t("Remove") } onClick={this.onRemoveThreepidClicked.bind(this, val)} />
                     </div>
                 </div>
             );
@@ -854,14 +885,14 @@ module.exports = React.createClass({
             addEmailSection = (
                 <div className="mx_UserSettings_profileTableRow" key="_newEmail">
                     <div className="mx_UserSettings_profileLabelCell">
-                        <label>Email</label>
+                        <label>{_t('Email')}</label>
                     </div>
                     <div className="mx_UserSettings_profileInputCell">
                         <EditableText
                             ref="add_email_input"
                             className="mx_UserSettings_editable"
                             placeholderClassName="mx_UserSettings_threepidPlaceholder"
-                            placeholder={ "Add email address" }
+                            placeholder={ _t("Add email address") }
                             blurToCancel={ false }
                             onValueChanged={ this._onAddEmailEditFinished } />
                     </div>
@@ -883,7 +914,7 @@ module.exports = React.createClass({
         if (MatrixClientPeg.get().isGuest()) {
             accountJsx = (
                 <div className="mx_UserSettings_button" onClick={this.onUpgradeClicked}>
-                    Create an account
+                    { _t("Create an account") }
                 </div>
             );
         } else {
@@ -901,7 +932,7 @@ module.exports = React.createClass({
         let notificationArea;
         if (!MatrixClientPeg.get().isGuest() && this.state.threepids !== undefined) {
             notificationArea = (<div>
-                <h3>Notifications</h3>
+                <h3>{ _t("Notifications") }</h3>
 
                 <div className="mx_UserSettings_section">
                     <Notifications threepids={this.state.threepids} brand={this.props.brand} />
@@ -920,7 +951,7 @@ module.exports = React.createClass({
         return (
             <div className="mx_UserSettings">
                 <SimpleRoomHeader
-                    title="Settings"
+                    title={ _t("Settings") }
                     collapsedRhs={ this.props.collapsedRhs }
                     onCancelClick={ this.props.onClose }
                 />
@@ -928,13 +959,13 @@ module.exports = React.createClass({
                 <GeminiScrollbar className="mx_UserSettings_body"
                                  autoshow={true}>
 
-                <h3>Profile</h3>
+                <h3>{ _t("Profile") }</h3>
 
                 <div className="mx_UserSettings_section">
                     <div className="mx_UserSettings_profileTable">
                         <div className="mx_UserSettings_profileTableRow">
                             <div className="mx_UserSettings_profileLabelCell">
-                                <label htmlFor="displayName">Display name</label>
+                                <label htmlFor="displayName">{ _t('Display name') }</label>
                             </div>
                             <div className="mx_UserSettings_profileInputCell">
                                 <ChangeDisplayName />
@@ -951,7 +982,7 @@ module.exports = React.createClass({
                         <div className="mx_UserSettings_avatarPicker_edit">
                             <label htmlFor="avatarInput" ref="file_label">
                                 <img src="img/camera.svg" className="mx_filterFlipColor"
-                                    alt="Upload avatar" title="Upload avatar"
+                                    alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
                                     width="17" height="15" />
                             </label>
                             <input id="avatarInput" type="file" onChange={this.onAvatarSelected}/>
@@ -959,12 +990,12 @@ module.exports = React.createClass({
                     </div>
                 </div>
 
-                <h3>Account</h3>
+                <h3>{ _t("Account") }</h3>
 
-                <div className="mx_UserSettings_section">
+                <div className="mx_UserSettings_section cadcampoHide">
 
                     <AccessibleButton className="mx_UserSettings_logout mx_UserSettings_button" onClick={this.onLogoutClicked}>
-                        Sign out
+                        { _t("Sign out") }
                     </AccessibleButton>
 
                     {accountJsx}
@@ -981,34 +1012,31 @@ module.exports = React.createClass({
                 {this._renderBulkOptions()}
                 {this._renderBugReport()}
 
-                <h3>Advanced</h3>
+                <h3>{ _t("Advanced") }</h3>
 
                 <div className="mx_UserSettings_section">
                     <div className="mx_UserSettings_advanced">
-                        Logged in as {this._me}
+                        { _t("Logged in as:") } {this._me}
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        Access Token: <span className="mx_UserSettings_advanced_spoiler"
-                                            onClick={this._showSpoiler}
-                                            data-spoiler={ MatrixClientPeg.get().getAccessToken() }
-                        >&lt;click to reveal&gt;</span>
+                        {_t('Access Token:')} <span className="mx_UserSettings_advanced_spoiler" onClick={this._showSpoiler} data-spoiler={ MatrixClientPeg.get().getAccessToken() }>&lt;{ _t("click to reveal") }&gt;</span>
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        Homeserver is { MatrixClientPeg.get().getHomeserverUrl() }
+                        { _t("Homeserver is") } { MatrixClientPeg.get().getHomeserverUrl() }
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        Identity Server is { MatrixClientPeg.get().getIdentityServerUrl() }
+                        { _t("Identity Server is") } { MatrixClientPeg.get().getIdentityServerUrl() }
                     </div>
                     <div className="mx_UserSettings_advanced">
-                        matrix-react-sdk version: {(REACT_SDK_VERSION !== '<local>')
+                        {_t('matrix-react-sdk version:')} {(REACT_SDK_VERSION !== '<local>')
                             ? gHVersionLabel('matrix-org/matrix-react-sdk', REACT_SDK_VERSION)
                             : REACT_SDK_VERSION
                         }<br/>
-                        riot-web version: {(this.state.vectorVersion !== undefined)
+                        {_t('riot-web version:')} {(this.state.vectorVersion !== undefined)
                             ? gHVersionLabel('vector-im/riot-web', this.state.vectorVersion)
                             : 'unknown'
                         }<br/>
-                        olm version: {olmVersionString}<br/>
+                        { _t("olm version:") } {olmVersionString}<br/>
                     </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}
@@ -230,7 +232,7 @@ module.exports = React.createClass({
                         Return to login
                     </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

@@ -18,8 +18,8 @@ limitations under the License.
 'use strict';
 
 import React from 'react';
+import { _t } from '../../../languageHandler';
 import ReactDOM from 'react-dom';
-import url from 'url';
 import sdk from '../../../index';
 import Login from '../../../Login';
 
@@ -222,15 +222,17 @@ module.exports = React.createClass({
                 (this.state.enteredHomeserverUrl.startsWith("http:") ||
                  !this.state.enteredHomeserverUrl.startsWith("http")))
             {
+                const urlStart = <a href='https://www.google.com/search?&q=enable%20unsafe%20scripts'>;
+                const urlEnd = </a>;
                 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>
+                    { _t('Can\'t connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or %(urlStart)s enable unsafe scripts %(urlEnd)s', {urlStart: urlStart, urlEnd: urlEnd})}
                 </span>;
             }
             else {
+                const urlStart = <a href={this.state.enteredHomeserverUrl}>;
+                const urlEnd = </a>;
                 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.
+                    { _t('Can\'t connect to homeserver - please check your connectivity and ensure your %(urlStart)s homeserver\'s SSL certificate %(urlEnd)s is trusted', {urlStart: urlStart, urlEnd: urlEnd})}
                 </span>;
             }
         }
@@ -242,12 +244,6 @@ module.exports = React.createClass({
         switch (step) {
             case 'm.login.password':
                 const PasswordLogin = sdk.getComponent('login.PasswordLogin');
-                // HSs that are not matrix.org may not be configured to have their
-                // domain name === domain part.
-                let hsDomain = url.parse(this.state.enteredHomeserverUrl).hostname;
-                if (hsDomain !== 'matrix.org') {
-                    hsDomain = null;
-                }
                 return (
                     <PasswordLogin
                         onSubmit={this.onPasswordLogin}
@@ -259,7 +255,6 @@ module.exports = React.createClass({
                         onPhoneNumberChanged={this.onPhoneNumberChanged}
                         onForgotPasswordClick={this.props.onForgotPasswordClick}
                         loginIncorrect={this.state.loginIncorrect}
-                        hsDomain={hsDomain}
                     />
                 );
             case 'm.login.cas':
@@ -273,8 +268,7 @@ 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>
                 );
         }
@@ -291,7 +285,7 @@ module.exports = React.createClass({
         if (this.props.enableGuest) {
             loginAsGuestJsx =
                 <a className="mx_Login_create" onClick={this._onLoginAsGuestClick} href="#">
-                    Login as guest
+                    { _t('Login as guest')}
                 </a>;
         }
 
@@ -299,7 +293,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>;
         }
 
@@ -308,7 +302,7 @@ module.exports = React.createClass({
                 <div className="mx_Login_box">
                     <LoginHeader />
                     <div>
-                        <h2>Sign in
+                        <h2>{ _t('Sign in')}
                             { loader }
                         </h2>
                         { this.componentForStep(this.state.currentFlow) }
@@ -324,7 +318,7 @@ module.exports = React.createClass({
                                 { 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',
@@ -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

@@ -27,6 +27,7 @@ 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;
 
@@ -162,7 +163,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({
@@ -259,29 +260,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({
@@ -399,7 +400,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>
             );
         }
@@ -412,10 +413,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/dialogs/ChatInviteDialog.js

@@ -16,6 +16,7 @@ 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';
@@ -48,11 +49,7 @@ module.exports = React.createClass({
 
     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
         };
     },

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/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,10 +44,10 @@ export default React.createClass({
 
     getDefaultProps: function() {
         return {
-            title: "Error",
-            description: "An error has occurred.",
-            button: "OK",
             focus: true,
+            title: null,
+            description: null,
+            button: null,
         };
     },
 
@@ -60,13 +61,13 @@ export default React.createClass({
         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 ref="button" className="mx_Dialog_primary" onClick={this.props.onFinished}>
-                        {this.props.button}
+                        {this.props.button || _t('OK')}
                     </button>
                 </div>
             </BaseDialog>

src/components/views/dialogs/InteractiveAuthDialog.js

@@ -20,6 +20,7 @@ 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 +47,6 @@ export default React.createClass({
         title: React.PropTypes.string,
     },
 
-    getDefaultProps: function() {
-        return {
-            title: "Authentication",
-        };
-    },
-
     getInitialState: function() {
         return {
             authError: null,
@@ -105,7 +100,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/NeedToRegisterDialog.js

@@ -0,0 +1,72 @@
+/*
+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';
+import { _t } from '../../../languageHandler';
+
+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,
+    },
+
+    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 || _t('Registration required')}
+            >
+                <div className="mx_Dialog_content">
+                    {this.props.description || _t('A registered account is required for this action')}
+                </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,
         };
@@ -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/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/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/LanguageDropdown.js

@@ -0,0 +1,128 @@
+/*
+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 { _t } from '../../../languageHandler';
+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.getAllLanguageKeysFromJson().then((langKeys) => {
+            const langs = [];
+            langKeys.forEach((languageKey) => {
+                langs.push({
+                    value: languageKey,
+                    label: _t(languageKey)
+                });
+            });
+            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

@@ -15,6 +15,7 @@ limitations under the License.
 */
 import React from 'react';
 const MemberAvatar = require('../avatars/MemberAvatar.js');
+import { _t } from '../../../languageHandler';
 
 module.exports = React.createClass({
     displayName: 'MemberEventListSummary',
@@ -203,30 +204,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",
-            "changed_name": "changed name",
-            "changed_avatar": "changed avatar",
-        };
+        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: "" });
+                }
 
-        if (Object.keys(map).includes(t)) {
-            res = map[t] + (repeats > 1 ? " " + repeats + " times" : "" );
+            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;
+            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;
@@ -254,11 +371,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 });
         }
     },
 

src/components/views/elements/PowerSelector.js

@@ -19,10 +19,8 @@ limitations under the License.
 import React from 'react';
 import * as Roles from '../../../Roles';
 
+var LEVEL_ROLE_MAP = {};
 var reverseRoles = {};
-Object.keys(Roles.LEVEL_ROLE_MAP).forEach(function(key) {
-    reverseRoles[Roles.LEVEL_ROLE_MAP[key]] = key;
-});
 
 module.exports = React.createClass({
     displayName: 'PowerSelector',
@@ -44,9 +42,16 @@ module.exports = React.createClass({
 
     getInitialState: function() {
         return {
-            custom: (Roles.LEVEL_ROLE_MAP[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" });
@@ -94,7 +99,7 @@ module.exports = React.createClass({
             selectValue = "Custom";
         }
         else {
-            selectValue = Roles.LEVEL_ROLE_MAP[this.props.value] || "Custom";
+            selectValue = LEVEL_ROLE_MAP[this.props.value] || "Custom";
         }
         var select;
         if (this.props.disabled) {
@@ -105,7 +110,7 @@ module.exports = React.createClass({
             const levels = [0, 50, 100];
             let options = levels.map((level) => {
                 return {
-                    value: Roles.LEVEL_ROLE_MAP[level],
+                    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),

src/components/views/login/PasswordLogin.js

@@ -19,6 +19,7 @@ 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';
 
 
@@ -121,32 +122,16 @@ class PasswordLogin extends React.Component {
                     autoFocus
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
-                const mxidInputClasses = classNames({
-                    "mx_Login_field": true,
-                    "mx_Login_username": true,
-                    "mx_Login_field_has_prefix": true,
-                    "mx_Login_field_has_suffix": Boolean(this.props.hsDomain),
-                });
-                let suffix = null;
-                if (this.props.hsDomain) {
-                    suffix = <div className="mx_Login_field_suffix">
-                        :{this.props.hsDomain}
-                    </div>;
-                }
-                return <div className="mx_Login_field_group">
-                    <div className="mx_Login_field_prefix">@</div>
-                    <input
-                        className={mxidInputClasses}
-                        key="username_input"
-                        type="text"
-                        name="username" // make it a little easier for browser's remember-password
-                        onChange={this.onUsernameChanged}
-                        placeholder="username"
-                        value={this.state.username}
-                        autoFocus
-                    />
-                    {suffix}
-                </div>;
+                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">
@@ -179,7 +164,7 @@ class PasswordLogin extends React.Component {
         if (this.props.onForgotPasswordClick) {
             forgotPasswordJsx = (
                 <a className="mx_Login_forgot" onClick={this.props.onForgotPasswordClick} href="#">
-                    Forgot your password?
+                    { _t('Forgot your password?') }
                 </a>
             );
         }
@@ -197,24 +182,24 @@ class PasswordLogin extends React.Component {
             <div>
                 <form onSubmit={this.onSubmitForm}>
                 <div className="mx_Login_type_container">
-                    <label className="mx_Login_type_label">I want to sign in with my</label>
+                    <label className="mx_Login_type_label">{ _t('I want to sign in with') }</label>
                     <Dropdown
                         className="mx_Login_type_dropdown"
                         value={this.state.loginType}
                         onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>Matrix ID</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>Email Address</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_PHONE}>Phone</span>
+                            <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>
                 {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>
         );
@@ -237,7 +222,6 @@ PasswordLogin.propTypes = {
     onPhoneNumberChanged: React.PropTypes.func,
     onPasswordChanged: React.PropTypes.func,
     loginIncorrect: React.PropTypes.bool,
-    hsDomain: React.PropTypes.string,
 };
 
 module.exports = PasswordLogin;

src/components/views/login/RegistrationForm.js

@@ -100,7 +100,7 @@ module.exports = React.createClass({
             if (this.refs.email.value == '') {
                 var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
                 Modal.createDialog(QuestionDialog, {
-                    title: "Warning",
+                    title: "Warning!",
                     description:
                         <div>
                             If you don't specify an email address, you won't be able to reset your password.<br/>

src/components/views/messages/MFileBody.js

@@ -20,6 +20,7 @@ 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';
@@ -202,7 +203,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 +262,7 @@ module.exports = React.createClass({
         const content = this.props.mxEvent.getContent();
         const text = this.presentableTextForFile(content);
         const isEncrypted = content.file !== undefined;
-        const fileName = content.body && content.body.length > 0 ? content.body : "Attachment";
+        const fileName = content.body && content.body.length > 0 ? content.body : _t("Attachment");
         const contentUrl = this._getContentUrl();
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
 
@@ -283,7 +284,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 +297,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 +316,7 @@ module.exports = React.createClass({
                     // We can't provide a Content-Disposition header like we would for HTTP.
                     download: fileName,
                     target: "_blank",
-                    textContent: "Download " + text,
+                    textContent: _t("Download %(text)s", { text: text }),
                 }, "*");
             };
 
@@ -362,7 +364,7 @@ module.exports = React.createClass({
                         <div className="mx_MImageBody_download">
                             <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 +373,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/room_settings/AliasSettings.js

@@ -19,6 +19,7 @@ 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({
@@ -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>
             );
         }
 
@@ -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/rooms/EventTile.js

@@ -16,8 +16,10 @@ 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');
@@ -129,6 +131,9 @@ module.exports = WithMatrixClient(React.createClass({
          * for now.
          */
         tileShape: React.PropTypes.string,
+
+        // show twelve hour timestamps
+        isTwelveHour: React.PropTypes.bool,
     },
 
     getInitialState: function() {
@@ -404,9 +409,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',
@@ -464,9 +470,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 {
@@ -474,11 +480,10 @@ module.exports = WithMatrixClient(React.createClass({
             }
         }
 
-        var editButton = (
+        const editButton = (
             <span className="mx_EventTile_editButton" title="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" alt="Encrypted by verified device" src="img/e2e-verified.svg" width="10" height="12" />;
@@ -489,7 +494,7 @@ module.exports = WithMatrixClient(React.createClass({
                 e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="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"  alt="Encrypted by verified device" src="img/e2e-verified.svg" width="10" height="12"/>;
+                e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Encrypted by verified device" src="img/e2e-verified.svg" width="10" height="12"/>;
             }
             else {
                 e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="Encrypted by unverified device" src="img/e2e-warning.svg" width="15" height="12" style={{ marginLeft: "-2px" }}/>;
@@ -499,11 +504,10 @@ module.exports = WithMatrixClient(React.createClass({
             e2e = <img onClick={ this.onCryptoClicked } className="mx_EventTile_e2eIcon" alt="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,96 @@
+/*
+ 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 MatrixClientPeg from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher';
+import KeyCode from '../../../KeyCode';
+
+
+module.exports = React.createClass({
+    displayName: 'ForwardMessage',
+
+    propTypes: {
+        currentRoomId: React.PropTypes.string.isRequired,
+
+        /* the MatrixEvent to be forwarded */
+        mxEvent: React.PropTypes.object.isRequired,
+
+        onCancelClick: React.PropTypes.func.isRequired,
+    },
+
+    componentWillMount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            leftOpacity: 1.0,
+            rightOpacity: 0.3,
+            middleOpacity: 0.5,
+        });
+    },
+
+    componentDidMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        document.addEventListener('keydown', this._onKeyDown);
+    },
+
+    componentWillUnmount: function() {
+        dis.dispatch({
+            action: 'ui_opacity',
+            sideOpacity: 1.0,
+            middleOpacity: 1.0,
+        });
+        dis.unregister(this.dispatcherRef);
+        document.removeEventListener('keydown', this._onKeyDown);
+    },
+
+    onAction: function(payload) {
+        if (payload.action === 'view_room') {
+            const event = this.props.mxEvent;
+            const Client = MatrixClientPeg.get();
+            Client.sendEvent(payload.room_id, event.getType(), event.getContent()).done(() => {
+                dis.dispatch({action: 'message_sent'});
+            }, (err) => {
+                if (err.name === "UnknownDeviceError") {
+                    dis.dispatch({
+                        action: 'unknown_device_error',
+                        err: err,
+                        room: Client.getRoom(payload.room_id),
+                    });
+                }
+                dis.dispatch({action: 'message_send_failed'});
+            });
+            if (this.props.currentRoomId === payload.room_id) this.props.onCancelClick();
+        }
+    },
+
+    _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/MemberInfo.js

@@ -31,6 +31,7 @@ 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';
@@ -219,7 +220,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,7 +242,7 @@ module.exports = WithMatrixClient(React.createClass({
                         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                         console.error("Kick error: " + err);
                         Modal.createDialog(ErrorDialog, {
-                            title: "Failed to kick",
+                            title: _t("Failed to kick"),
                             description: ((err && err.message) ? err.message : "Operation failed"),
                         });
                     }
@@ -256,7 +257,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 +284,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 +334,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(()=>{
@@ -378,8 +379,8 @@ module.exports = WithMatrixClient(React.createClass({
                 } 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"),
                     });
                 }
             }
@@ -399,8 +400,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(()=>{
@@ -428,13 +429,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);
@@ -577,9 +578,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++) {
@@ -591,7 +592,7 @@ module.exports = WithMatrixClient(React.createClass({
 
         return (
             <div>
-                <h3>Devices</h3>
+                <h3>{ _t("Devices") }</h3>
                 <div className="mx_MemberInfo_devices">
                     {devComponents}
                 </div>
@@ -640,11 +641,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>;
@@ -657,7 +658,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}>
@@ -666,9 +667,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"
@@ -678,7 +679,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}>
@@ -687,7 +688,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>;
@@ -738,7 +739,7 @@ module.exports = WithMatrixClient(React.createClass({
                         { this.props.member.userId }
                     </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>
+                        { _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 }

src/components/views/rooms/MemberList.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';
 var classNames = require('classnames');
 var Matrix = require("matrix-js-sdk");
 var q = require('q');
@@ -207,7 +208,9 @@ module.exports = React.createClass({
         // 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" : "") + "...";
+        var text = (overflowCount > 1)
+        	? _t("and %(overflowCount)s others...", { overflowCount: overflowCount })
+        	: _t("and one other...");
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
                 <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
@@ -363,8 +366,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/MessageComposer.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 var React = require('react');
-
+import { _t } from '../../../languageHandler';
 var CallHandler = require('../../../CallHandler');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Modal = require('../../../Modal');
@@ -114,10 +114,10 @@ export default class MessageComposer extends React.Component {
         }
 
         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 upload the following files?') }</p>
                     <ul style={{listStyle: 'none', textAlign: 'left'}}>
                         {fileList}
                     </ul>
@@ -236,11 +236,11 @@ 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';
         }
 
@@ -253,16 +253,16 @@ export default class MessageComposer extends React.Component {
         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 {
             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>;
         }
@@ -276,7 +276,7 @@ export default class MessageComposer extends React.Component {
             // complex because of conference calls.
             var 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}
@@ -296,7 +296,7 @@ export default class MessageComposer extends React.Component {
             );
 
             const placeholderText = roomIsEncrypted ?
-                "Send an encrypted message…" : "Send a message (unencrypted)…";
+                _t('Send an encrypted message') + '…' : _t('Send a message (unencrypted)') + '…';
 
             controls.push(
                 <MessageComposerInput
@@ -321,7 +321,7 @@ export default class MessageComposer extends React.Component {
         } else {
             controls.push(
                 <div key="controls_error" className="mx_MessageComposer_noperm_error">
-                    You do not have permission to post to this room
+                    { _t('You do not have permission to post to this room') }
                 </div>
             );
         }
@@ -350,7 +350,7 @@ export default class MessageComposer extends React.Component {
                     mx_filterFlipColor: true,
                 });
                 return <img className={className}
-                            title={name}
+                            title={ _t(name) }
                             onMouseDown={disabled ? null : onFormatButtonClicked}
                             key={name}
                             src={`img/button-text-${name}${suffix}.svg`}
@@ -370,11 +370,11 @@ export default class MessageComposer extends React.Component {
                         <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'}`}
+                            <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="Hide Text Formatting Toolbar"
+                            <img title={ _t("Hide Text Formatting Toolbar") }
                                  onClick={this.onToggleFormattingClicked}
                                  className="mx_MessageComposer_formatbar_cancel mx_filterFlipColor"
                                  src="img/icon-text-cancel.svg" />

src/components/views/rooms/MessageComposerInput.js

@@ -30,6 +30,7 @@ import type {MatrixClient} from 'matrix-js-sdk/lib/matrix';
 import SlashCommands from '../../../SlashCommands';
 import Modal from '../../../Modal';
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 
 import dis from '../../../dispatcher';
 import KeyCode from '../../../KeyCode';
@@ -504,8 +505,8 @@ export default class MessageComposerInput extends React.Component {
                     console.error("Command failure: %s", err);
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
-                        title: "Server error",
-                        description: ((err && err.message) ? err.message : "Server unavailable, overloaded, or something else went wrong."),
+                        title: _t("Server error"),
+                        description: ((err && err.message) ? err.message : _t("Server unavailable, overloaded, or something else went wrong") + "."),
                     });
                 });
             }
@@ -513,8 +514,8 @@ export default class MessageComposerInput extends React.Component {
                 console.error(cmd.error);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Command error",
-                    description: cmd.error
+                    title: _t("Command error"),
+                    description: cmd.error,
                 });
             }
             return true;
@@ -719,7 +720,7 @@ export default class MessageComposerInput extends React.Component {
                 <div className={className}>
                     <img className="mx_MessageComposer_input_markdownIndicator mx_filterFlipColor"
                          onMouseDown={this.onMarkdownToggleClicked}
-                         title={`Markdown is ${this.state.isRichtextEnabled ? 'disabled' : 'enabled'}`}
+                         title={ this.state.isRichtextEnabled ? _t("Markdown is disabled") : _t("Markdown is enabled")}
                          src={`img/button-md-${!this.state.isRichtextEnabled}.png`} />
                     <Editor ref="editor"
                             placeholder={this.props.placeholder}

src/components/views/rooms/MessageComposerInputOld.js

@@ -20,6 +20,7 @@ var SlashCommands = require("../../../SlashCommands");
 var Modal = require("../../../Modal");
 var MemberEntry = require("../../../TabCompleteEntries").MemberEntry;
 var sdk = require('../../../index');
+import { _t } from '../../../languageHandler';
 import UserSettingsStore from "../../../UserSettingsStore";
 
 var dis = require("../../../dispatcher");
@@ -294,8 +295,8 @@ export default React.createClass({
             else {
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Unknown command",
-                    description: "Usage: /markdown on|off"
+                    title: _t("Unknown command"),
+                    description: _t("Usage") + ": /markdown on|off",
                 });
             }
             return;
@@ -314,8 +315,8 @@ export default React.createClass({
                     console.error("Command failure: %s", err);
                     var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     Modal.createDialog(ErrorDialog, {
-                        title: "Server error",
-                        description: ((err && err.message) ? err.message : "Server unavailable, overloaded, or something else went wrong."),
+                        title: _t("Server error"),
+                        description: ((err && err.message) ? err.message : _t("Server unavailable, overloaded, or something else went wrong") + "."),
                     });
                 });
             }
@@ -323,8 +324,8 @@ export default React.createClass({
                 console.error(cmd.error);
                 var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                 Modal.createDialog(ErrorDialog, {
-                    title: "Command error",
-                    description: cmd.error
+                    title: _t("Command error"),
+                    description: cmd.error,
                 });
             }
             return;

src/components/views/rooms/RoomHeader.js

@@ -19,6 +19,7 @@ limitations under the License.
 var React = require('react');
 var classNames = require('classnames');
 var sdk = require('../../../index');
+import { _t } from '../../../languageHandler';
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 var Modal = require("../../../Modal");
 var dis = require("../../../dispatcher");
@@ -119,8 +120,8 @@ module.exports = React.createClass({
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             console.error("Failed to set avatar: " + errMsg);
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: "Failed to set avatar.",
+                title: _t("Error"),
+                description: _t("Failed to set avatar."),
             });
         }).done();
     },
@@ -188,6 +189,9 @@ module.exports = React.createClass({
             );
 
             save_button = <AccessibleButton className="mx_RoomHeader_textButton" onClick={this.props.onSaveClick}>Save</AccessibleButton>;
+        }
+
+        if (this.props.onCancelClick) {
             cancel_button = <CancelButton onClick={this.props.onCancelClick}/>;
         }
 
@@ -205,7 +209,7 @@ module.exports = React.createClass({
             // don't display the search count until the search completes and
             // gives us a valid (possibly zero) searchCount.
             if (this.props.searchInfo && this.props.searchInfo.searchCount !== undefined && this.props.searchInfo.searchCount !== null) {
-                searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;(~{ this.props.searchInfo.searchCount } results)</div>;
+                searchStatus = <div className="mx_RoomHeader_searchStatus">&nbsp;{ _t("(~%(searchCount)s results)", { searchCount: this.props.searchInfo.searchCount }) }</div>;
             }
 
             // XXX: this is a bit inefficient - we could just compare room.name for 'Empty room'...
@@ -220,7 +224,7 @@ module.exports = React.createClass({
                 }
             }
 
-            var roomName = 'Join Room';
+            var roomName = _t("Join Room");
             if (this.props.oobData && this.props.oobData.name) {
                 roomName = this.props.oobData.name;
             } else if (this.props.room) {
@@ -261,7 +265,7 @@ module.exports = React.createClass({
                     <div className="mx_RoomHeader_avatarPicker_edit">
                         <label htmlFor="avatarInput" ref="file_label">
                             <img src="img/camera.svg"
-                                alt="Upload avatar" title="Upload avatar"
+                                alt={ _t("Upload avatar") } title={ _t("Upload avatar") }
                                 width="17" height="15" />
                         </label>
                         <input id="avatarInput" type="file" onChange={ this.onAvatarSelected }/>
@@ -296,7 +300,7 @@ module.exports = React.createClass({
         var forget_button;
         if (this.props.onForgetClick) {
             forget_button =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title="Forget room">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onForgetClick} title={ _t("Forget room") }>
                     <TintableSvg src="img/leave.svg" width="26" height="20"/>
                 </AccessibleButton>;
         }
@@ -304,7 +308,7 @@ module.exports = React.createClass({
         let search_button;
         if (this.props.onSearchClick && this.props.inRoom) {
             search_button =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title="Search">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.props.onSearchClick} title={ _t("Search") }>
                     <TintableSvg src="img/icons-search.svg" width="35" height="35"/>
                 </AccessibleButton>;
         }
@@ -312,7 +316,7 @@ module.exports = React.createClass({
         var rightPanel_buttons;
         if (this.props.collapsedRhs) {
             rightPanel_buttons =
-                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title="Show panel">
+                <AccessibleButton className="mx_RoomHeader_button" onClick={this.onShowRhsClick} title={ _t('Show panel') }>
                     <TintableSvg src="img/maximise.svg" width="10" height="16"/>
                 </AccessibleButton>;
         }

src/components/views/rooms/RoomList.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 var React = require("react");
 var ReactDOM = require("react-dom");
+import { _t } from '../../../languageHandler';
 var GeminiScrollbar = require('react-gemini-scrollbar');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var CallHandler = require('../../../CallHandler');
@@ -559,13 +560,12 @@ module.exports = React.createClass({
     render: function() {
         var RoomSubList = sdk.getComponent('structures.RoomSubList');
         var self = this;
-
         return (
             <GeminiScrollbar className="mx_RoomList_scrollbar"
                  autoshow={true} onScroll={ self._whenScrolling } ref="gemscroll">
             <div className="mx_RoomList">
                 <RoomSubList list={ self.state.lists['im.vector.fake.invite'] }
-                             label="Invites"
+                             label={ _t('Invites') }
                              editable={ false }
                              order="recent"
                              selectedRoom={ self.props.selectedRoom }
@@ -576,7 +576,7 @@ module.exports = React.createClass({
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['m.favourite'] }
-                             label="Favourites"
+                             label={ _t('Favourites') }
                              tagName="m.favourite"
                              emptyContent={this._getEmptyContent('m.favourite')}
                              editable={ true }
@@ -589,7 +589,7 @@ module.exports = React.createClass({
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['im.vector.fake.direct'] }
-                             label="People"
+                             label={ _t('People') }
                              tagName="im.vector.fake.direct"
                              emptyContent={this._getEmptyContent('im.vector.fake.direct')}
                              headerItems={this._getHeaderItems('im.vector.fake.direct')}
@@ -604,7 +604,7 @@ module.exports = React.createClass({
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['im.vector.fake.recent'] }
-                             label="Rooms"
+                             label={ _t('Rooms') }
                              editable={ true }
                              emptyContent={this._getEmptyContent('im.vector.fake.recent')}
                              headerItems={this._getHeaderItems('im.vector.fake.recent')}
@@ -636,7 +636,7 @@ module.exports = React.createClass({
                 }) }
 
                 <RoomSubList list={ self.state.lists['m.lowpriority'] }
-                             label="Low priority"
+                             label={ _t('Low priority') }
                              tagName="m.lowpriority"
                              emptyContent={this._getEmptyContent('m.lowpriority')}
                              editable={ true }
@@ -649,7 +649,7 @@ module.exports = React.createClass({
                              onShowMoreRooms={ self.onShowMoreRooms } />
 
                 <RoomSubList list={ self.state.lists['im.vector.fake.archived'] }
-                             label="Historical"
+                             label={ _t('Historical') }
                              editable={ false }
                              order="recent"
                              selectedRoom={ self.props.selectedRoom }

src/components/views/rooms/RoomPreviewBar.js

@@ -21,6 +21,8 @@ var React = require('react');
 var sdk = require('../../../index');
 var MatrixClientPeg = require('../../../MatrixClientPeg');
 
+import { _t } from '../../../languageHandler';
+
 module.exports = React.createClass({
     displayName: 'RoomPreviewBar',
 
@@ -84,7 +86,7 @@ module.exports = React.createClass({
     _roomNameElement: function(fallback) {
         fallback = fallback || 'a room';
         const name = this.props.room ? this.props.room.name : (this.props.room_alias || "");
-        return name ? <b>{ name }</b> : fallback;
+        return name ? name : fallback;
     },
 
     render: function() {
@@ -128,13 +130,14 @@ module.exports = React.createClass({
                         </div>;
                 }
             }
+            // TODO: find a way to respect HTML in counterpart!
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_invite_text">
-                        You have been invited to join this room by <b>{ this.props.inviterName }</b>
+                        { _t('You have been invited to join this room by %(inviterName)s', {inviterName: this.props.inviterName}) }
                     </div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        Would you like to <a onClick={ this.props.onJoinClick }>accept</a> or <a onClick={ this.props.onRejectClick }>decline</a> this invitation?
+                        { _t('Would you like to') } <a onClick={ this.props.onJoinClick }>{ _t('accept') }</a> { _t('or') } <a onClick={ this.props.onRejectClick }>{ _t('decline') }</a> { _t('this invitation?') }
                     </div>
                     {emailMatchBlock}
                 </div>
@@ -186,8 +189,8 @@ module.exports = React.createClass({
             joinBlock = (
                 <div>
                     <div className="mx_RoomPreviewBar_join_text">
-                        You are trying to access { name }.<br/>
-                        <a onClick={ this.props.onJoinClick }><b>Click here</b></a> to join the discussion!
+                        { _t('You are trying to access %(roomName)s', {roomName: name}) }.<br/>
+                        <a onClick={ this.props.onJoinClick }><b>{ _t('Click here') }</b></a> { _t('to join the discussion') }!
                     </div>
                 </div>
             );
@@ -196,7 +199,7 @@ module.exports = React.createClass({
         if (this.props.canPreview) {
             previewBlock = (
                 <div className="mx_RoomPreviewBar_preview_text">
-                    This is a preview of this room. Room interactions have been disabled.
+                    { _t('This is a preview of this room. Room interactions have been disabled') }.
                 </div>
             );
         }

src/components/views/rooms/RoomSettings.js

@@ -17,6 +17,7 @@ limitations under the License.
 
 import q from 'q';
 import React from 'react';
+import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import SdkConfig from '../../../SdkConfig';
 import sdk from '../../../index';
@@ -56,8 +57,8 @@ const BannedUser = React.createClass({
                     const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
                     console.error("Failed to unban: " + err);
                     Modal.createDialog(ErrorDialog, {
-                        title: "Error",
-                        description: "Failed to unban",
+                        title: _t('Error'),
+                        description: _t('Failed to unban'),
                     });
                 }).done();
             },
@@ -70,7 +71,7 @@ const BannedUser = React.createClass({
                 <AccessibleButton className="mx_RoomSettings_unbanButton"
                     onClick={this._onUnbanClick}
                 >
-                    Unban
+                    { _t('Unban') }
                 </AccessibleButton>
                 {this.props.member.userId}
             </li>
@@ -400,13 +401,13 @@ module.exports = React.createClass({
         var value = ev.target.value;
 
         Modal.createDialog(QuestionDialog, {
-            title: "Privacy warning",
+            title: _t('Privacy warning'),
             description:
                 <div>
-                    Changes to who can read history will only apply to future messages in this room.<br/>
-                    The visibility of existing history will be unchanged.
+                    { _t('Changes to who can read history will only apply to future messages in this room') }.<br/>
+                    { _t('The visibility of existing history will be unchanged') }.
                 </div>,
-            button: "Continue",
+            button: _t('Continue'),
             onFinished: function(confirmed) {
                 if (confirmed) {
                     self.setState({
@@ -523,11 +524,11 @@ module.exports = React.createClass({
         MatrixClientPeg.get().forget(this.props.room.roomId).done(function() {
             dis.dispatch({ action: 'view_next_room' });
         }, function(err) {
-            var errCode = err.errcode || "unknown error code";
+            var errCode = err.errcode || _t('unknown error code');
             var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
-                description: `Failed to forget room (${errCode})`
+                title: _t('Error'),
+                description: _t("Failed to forget room %(errCode)s", { errCode: errCode }),
             });
         });
     },
@@ -537,14 +538,14 @@ module.exports = React.createClass({
 
         var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
-            title: "Warning!",
+            title: _t('Warning!'),
             description: (
                 <div>
-                    <p>End-to-end encryption is in beta and may not be reliable.</p>
-                    <p>You should <b>not</b> yet trust it to secure data.</p>
-                    <p>Devices will <b>not</b> yet be able to decrypt history from before they joined the room.</p>
-                    <p>Once encryption is enabled for a room it <b>cannot</b> be turned off again (for now).</p>
-                    <p>Encrypted messages will not be visible on clients that do not yet implement encryption.</p>
+                    <p>{ _t('End-to-end encryption is in beta and may not be reliable') }.</p>
+                    <p>{ _t('You should not yet trust it to secure data') }.</p>
+                    <p>{ _t('Devices will not yet be able to decrypt history from before they joined the room') }.</p>
+                    <p>{ _t('Once encryption is enabled for a room it cannot be turned off again (for now)') }.</p>
+                    <p>{ _t('Encrypted messages will not be visible on clients that do not yet implement encryption') }.</p>
                 </div>
             ),
             onFinished: confirm=>{
@@ -572,7 +573,7 @@ module.exports = React.createClass({
                 <input type="checkbox" ref="blacklistUnverified"
                        defaultChecked={ isGlobalBlacklistUnverified || isRoomBlacklistUnverified }
                        disabled={ isGlobalBlacklistUnverified || (this.refs.encrypt && !this.refs.encrypt.checked) }/>
-                Never send encrypted messages to unverified devices in this room from this device.
+                { _t('Never send encrypted messages to unverified devices in this room from this device') }.
             </label>;
 
         if (!isEncrypted &&
@@ -582,7 +583,7 @@ module.exports = React.createClass({
                     <label>
                         <input type="checkbox" ref="encrypt" onClick={ this.onEnableEncryptionClick }/>
                         <img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
-                        Enable encryption (warning: cannot be disabled again!)
+                        { _t('Enable encryption') } { _t('(warning: cannot be disabled again!)') }
                     </label>
                     { settings }
                 </div>
@@ -596,7 +597,7 @@ module.exports = React.createClass({
                       ? <img className="mx_RoomSettings_e2eIcon" src="img/e2e-verified.svg" width="10" height="12" />
                       : <img className="mx_RoomSettings_e2eIcon" src="img/e2e-unencrypted.svg" width="12" height="12" />
                     }
-                    Encryption is { isEncrypted ? "" : "not " } enabled in this room.
+                    { isEncrypted ? "Encryption is enabled in this room" : "Encryption is not enabled in this room" }.
                     </label>
                     { settings }
                 </div>
@@ -647,12 +648,12 @@ module.exports = React.createClass({
         if (Object.keys(user_levels).length) {
             userLevelsSection =
                 <div>
-                    <h3>Privileged Users</h3>
+                    <h3>{ _t('Privileged Users') }</h3>
                     <ul className="mx_RoomSettings_userLevels">
                         {Object.keys(user_levels).map(function(user, i) {
                             return (
                                 <li className="mx_RoomSettings_userLevel" key={user}>
-                                    { user } is a <PowerSelector value={ user_levels[user] } disabled={true}/>
+                                    { user } { _t('is a') } <PowerSelector value={ user_levels[user] } disabled={true}/>
                                 </li>
                             );
                         })}
@@ -660,7 +661,7 @@ module.exports = React.createClass({
                 </div>;
         }
         else {
-            userLevelsSection = <div>No users have specific privileges in this room.</div>;
+            userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
         }
 
         var banned = this.props.room.getMembersWithMembership("ban");
@@ -668,7 +669,7 @@ module.exports = React.createClass({
         if (banned.length) {
             bannedUsersSection =
                 <div>
-                    <h3>Banned users</h3>
+                    <h3>{ _t('Banned users') }</h3>
                     <ul className="mx_RoomSettings_banned">
                         {banned.map(function(member) {
                             return (
@@ -683,7 +684,7 @@ module.exports = React.createClass({
         if (this._yankValueFromEvent("m.room.create", "m.federate") === false) {
              unfederatableSection = (
                 <div className="mx_RoomSettings_powerLevel">
-                Ths room is not accessible by remote Matrix servers.
+                { _t('This room is not accessible by remote Matrix servers') }.
                 </div>
             );
         }
@@ -694,14 +695,14 @@ module.exports = React.createClass({
             if (myMember.membership === "join") {
                 leaveButton = (
                     <AccessibleButton className="mx_RoomSettings_leaveButton" onClick={ this.onLeaveClick }>
-                        Leave room
+                        { _t('Leave room') }
                     </AccessibleButton>
                 );
             }
             else if (myMember.membership === "leave") {
                 leaveButton = (
                     <AccessibleButton className="mx_RoomSettings_leaveButton" onClick={ this.onForgetClick }>
-                        Forget room
+                        { _t('Forget room') }
                     </AccessibleButton>
                 );
             }
@@ -711,8 +712,8 @@ module.exports = React.createClass({
         // TODO: support editing custom user_levels
 
         var tags = [
-            { name: "m.favourite", label: "Favourite", ref: "tag_favourite" },
-            { name: "m.lowpriority", label: "Low priority", ref: "tag_lowpriority" },
+            { name: "m.favourite", label: _t('Favourite'), ref: "tag_favourite" },
+            { name: "m.lowpriority", label: _t('Low priority'), ref: "tag_lowpriority" },
         ];
 
         Object.keys(this.state.tags).sort().forEach(function(tagName) {
@@ -753,7 +754,7 @@ module.exports = React.createClass({
         if (this.state.join_rule === "public" && aliasCount == 0) {
             addressWarning =
                 <div className="mx_RoomSettings_warning">
-                    To link to a room it must have <a href="#addresses">an address</a>.
+                		{ _t('To link to a room it must have') } <a href="#addresses"> { _t('an address') }</a>.
                 </div>;
         }
 
@@ -761,10 +762,10 @@ module.exports = React.createClass({
         if (this.state.join_rule !== "public" && this.state.guest_access === "forbidden") {
             inviteGuestWarning =
                 <div className="mx_RoomSettings_warning">
-                    Guests cannot join this room even if explicitly invited. <a href="#" onClick={ (e) => {
+                    { _t('Guests cannot join this room even if explicitly invited.') } <a href="#" onClick={ (e) => {
                         this.setState({ join_rule: "invite", guest_access: "can_join" });
                         e.preventDefault();
-                    }}>Click here to fix</a>.
+                    }}>{ _t('Click here to fix') }</a>.
                 </div>;
         }
 
@@ -776,7 +777,7 @@ module.exports = React.createClass({
                 console.error(this.state.scalar_error);
                 integrationsError = (
                     <span className="mx_RoomSettings_integrationsButton_errorPopup">
-                        Could not connect to the integration server
+                        { _t('Could not connect to the integration server') }
                     </span>
                 );
             }
@@ -784,7 +785,7 @@ module.exports = React.createClass({
             if (this.scalarClient.hasCredentials()) {
                 integrationsButton = (
                     <div className="mx_RoomSettings_integrationsButton" onClick={ this.onManageIntegrations }>
-                        Manage Integrations
+                        { _t('Manage Integrations') }
                     </div>
                 );
             } else if (this.state.scalar_error) {
@@ -797,7 +798,7 @@ module.exports = React.createClass({
             } else {
                 integrationsButton = (
                     <div className="mx_RoomSettings_integrationsButton" style={{opacity: 0.5}}>
-                        Manage Integrations
+                        { _t('Manage Integrations') }
                     </div>
                 );
             }
@@ -813,28 +814,28 @@ module.exports = React.createClass({
 
                 <div className="mx_RoomSettings_toggles">
                     <div className="mx_RoomSettings_settings">
-                        <h3>Who can access this room?</h3>
+                        <h3>{ _t('Who can access this room?') }</h3>
                         { inviteGuestWarning }
                         <label>
                             <input type="radio" name="roomVis" value="invite_only"
                                 disabled={ !this.mayChangeRoomAccess() }
                                 onChange={this._onRoomAccessRadioToggle}
                                 checked={this.state.join_rule !== "public"}/>
-                            Only people who have been invited
+                            { _t('Only people who have been invited') }
                         </label>
                         <label>
                             <input type="radio" name="roomVis" value="public_no_guests"
                                 disabled={ !this.mayChangeRoomAccess() }
                                 onChange={this._onRoomAccessRadioToggle}
                                 checked={this.state.join_rule === "public" && this.state.guest_access !== "can_join"}/>
-                            Anyone who knows the room's link, apart from guests
+                            { _t('Anyone who knows the room\'s link, apart from guests') }
                         </label>
                         <label>
                             <input type="radio" name="roomVis" value="public_with_guests"
                                 disabled={ !this.mayChangeRoomAccess() }
                                 onChange={this._onRoomAccessRadioToggle}
                                 checked={this.state.join_rule === "public" && this.state.guest_access === "can_join"}/>
-                            Anyone who knows the room's link, including guests
+                            { _t('Anyone who knows the room\'s link, including guests') }
                         </label>
                         { addressWarning }
                         <br/>
@@ -847,7 +848,7 @@ module.exports = React.createClass({
                         </label>
                     </div>
                     <div className="mx_RoomSettings_settings">
-                        <h3>Who can read history?</h3>
+                        <h3>{ _t('Who can read history?') }</h3>
                         <label>
                             <input type="radio" name="historyVis" value="world_readable"
                                     disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
@@ -860,28 +861,28 @@ module.exports = React.createClass({
                                     disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
                                     checked={historyVisibility === "shared"}
                                     onChange={this._onHistoryRadioToggle} />
-                            Members only (since the point in time of selecting this option)
+                            { _t('Members only') } ({ _t('since the point in time of selecting this option') })
                         </label>
                         <label>
                             <input type="radio" name="historyVis" value="invited"
                                     disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
                                     checked={historyVisibility === "invited"}
                                     onChange={this._onHistoryRadioToggle} />
-                            Members only (since they were invited)
+                            { _t('Members only') } ({ _t('since they were invited') })
                         </label>
                         <label >
                             <input type="radio" name="historyVis" value="joined"
                                     disabled={ !roomState.mayClientSendStateEvent("m.room.history_visibility", cli) }
                                     checked={historyVisibility === "joined"}
                                     onChange={this._onHistoryRadioToggle} />
-                            Members only (since they joined)
+                            { _t('Members only') } ({ _t('since they joined') })
                         </label>
                     </div>
                 </div>
 
 
                 <div>
-                    <h3>Room Colour</h3>
+                    <h3>{ _t('Room Colour') }</h3>
                     <ColorSettings ref="color_settings" room={this.props.room} />
                 </div>
 
@@ -899,41 +900,41 @@ module.exports = React.createClass({
 
                 <UrlPreviewSettings ref="url_preview_settings" room={this.props.room} />
 
-                <h3>Permissions</h3>
+                <h3>{ _t('Permissions') }</h3>
                 <div className="mx_RoomSettings_powerLevels mx_RoomSettings_settings">
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">The default role for new room members is </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('The default role for new room members is') } </span>
                         <PowerSelector ref="users_default" value={default_user_level} controlled={false} disabled={!can_change_levels || current_user_level < default_user_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To send messages, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To send messages') }, { _t('you must be a') } </span>
                         <PowerSelector ref="events_default" value={send_level} controlled={false} disabled={!can_change_levels || current_user_level < send_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To invite users into the room, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To invite users into the room') }, { _t('you must be a') } </span>
                         <PowerSelector ref="invite" value={invite_level} controlled={false} disabled={!can_change_levels || current_user_level < invite_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To configure the room, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To configure the room') }, { _t('you must be a') } </span>
                         <PowerSelector ref="state_default" value={state_level} controlled={false} disabled={!can_change_levels || current_user_level < state_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To kick users, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To kick users') }, { _t('you must be a') } </span>
                         <PowerSelector ref="kick" value={kick_level} controlled={false} disabled={!can_change_levels || current_user_level < kick_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To ban users, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To ban users') }, { _t('you must be a') } </span>
                         <PowerSelector ref="ban" value={ban_level} controlled={false} disabled={!can_change_levels || current_user_level < ban_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
                     <div className="mx_RoomSettings_powerLevel">
-                        <span className="mx_RoomSettings_powerLevelKey">To redact other users' messages, you must be a </span>
+                        <span className="mx_RoomSettings_powerLevelKey">{ _t('To redact other users\' messages') }, { _t('you must be a') } </span>
                         <PowerSelector ref="redact" value={redact_level} controlled={false} disabled={!can_change_levels || current_user_level < redact_level} onChange={this.onPowerLevelsChanged}/>
                     </div>
 
                     {Object.keys(events_levels).map(function(event_type, i) {
                         return (
                             <div className="mx_RoomSettings_powerLevel" key={event_type}>
-                                <span className="mx_RoomSettings_powerLevelKey">To send events of type <code>{ event_type }</code>, you must be a </span>
+                                <span className="mx_RoomSettings_powerLevelKey">{ _t('To send events of type') } <code>{ event_type }</code>, { _t('you must be a') } </span>
                                 <PowerSelector value={ events_levels[event_type] } controlled={false} disabled={true} onChange={self.onPowerLevelsChanged}/>
                             </div>
                         );
@@ -946,9 +947,9 @@ module.exports = React.createClass({
 
                 { bannedUsersSection }
 
-                <h3>Advanced</h3>
+                <h3>{ _t('Advanced') }</h3>
                 <div className="mx_RoomSettings_settings">
-                    This room's internal ID is <code>{ this.props.room.roomId }</code>
+                    { _t('This room\'s internal ID is') } <code>{ this.props.room.roomId }</code>
                 </div>
             </div>
         );

src/components/views/rooms/SearchableEntityList.js

@@ -17,6 +17,7 @@ var React = require('react');
 var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 var sdk = require("../../../index");
+import { _t } from '../../../languageHandler';
 var GeminiScrollbar = require('react-gemini-scrollbar');
 
 // A list capable of displaying entities which conform to the SearchableEntity
@@ -25,7 +26,6 @@ var SearchableEntityList = React.createClass({
     displayName: 'SearchableEntityList',
 
     propTypes: {
-        searchPlaceholderText: React.PropTypes.string,
         emptyQueryShowsAll: React.PropTypes.bool,
         showInputBox: React.PropTypes.bool,
         onQueryChanged: React.PropTypes.func, // fn(inputText)
@@ -37,7 +37,6 @@ var SearchableEntityList = React.createClass({
     getDefaultProps: function() {
         return {
             showInputBox: true,
-            searchPlaceholderText: "Search",
             entities: [],
             emptyQueryShowsAll: false,
             onSubmit: function() {},
@@ -118,7 +117,9 @@ var SearchableEntityList = React.createClass({
     _createOverflowEntity: function(overflowCount, totalCount) {
         var EntityTile = sdk.getComponent("rooms.EntityTile");
         var BaseAvatar = sdk.getComponent("avatars.BaseAvatar");
-        var text = "and " + overflowCount + " other" + (overflowCount > 1 ? "s" : "") + "...";
+        var text = (overflowCount > 1)
+        	? _t("and %(overflowCount)s others...", { overflowCount: overflowCount })
+        	: _t("and one other...");
         return (
             <EntityTile className="mx_EntityTile_ellipsis" avatarJsx={
                 <BaseAvatar url="img/ellipsis.svg" name="..." width={36} height={36} />
@@ -137,7 +138,7 @@ var SearchableEntityList = React.createClass({
                         onChange={this.onQueryChanged} value={this.state.query}
                         onFocus= {() => { this.setState({ focused: true }); }}
                         onBlur= {() => { this.setState({ focused: false }); }}
-                        placeholder={this.props.searchPlaceholderText} />
+                        placeholder={ _t("Search") } />
                 </form>
             );
         }

src/components/views/rooms/TopUnreadMessagesBar.js

@@ -18,6 +18,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+import { _t } from '../../../languageHandler';
 var sdk = require('../../../index');
 
 module.exports = React.createClass({
@@ -34,8 +35,8 @@ module.exports = React.createClass({
                 <div className="mx_TopUnreadMessagesBar_scrollUp"
                         onClick={this.props.onScrollUpClick}>
                     <img src="img/scrollto.svg" width="24" height="24"
-                        alt="Scroll to unread messages"
-                        title="Scroll to unread messages"/>
+                        alt={ _t('Scroll to unread messages') }
+                        title={ _t('Scroll to unread messages') }/>
                     Jump to first unread message.
                 </div>
                 <img className="mx_TopUnreadMessagesBar_close mx_filterFlipColor"
@@ -46,4 +47,3 @@ module.exports = React.createClass({
         );
     },
 });
-

src/components/views/settings/AddPhoneNumber.js

@@ -15,13 +15,13 @@ limitations under the License.
 */
 
 import React from 'react';
+import { _t } from '../../../languageHandler';
 
 import sdk from '../../../index';
 import AddThreepid from '../../../AddThreepid';
 import WithMatrixClient from '../../../wrappers/WithMatrixClient';
 import Modal from '../../../Modal';
 
-
 export default WithMatrixClient(React.createClass({
     displayName: 'AddPhoneNumber',
 
@@ -83,7 +83,7 @@ export default WithMatrixClient(React.createClass({
             console.error("Unable to add phone number: " + err);
             let msg = err.message;
             Modal.createDialog(ErrorDialog, {
-                title: "Error",
+                title: _t("Error"),
                 description: msg,
             });
         }).finally(() => {
@@ -98,20 +98,19 @@ export default WithMatrixClient(React.createClass({
         if (this._unmounted) return;
         const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
         let msgElements = [
-            <div key="_static" >A text message has been sent to +{msisdn}.
-            Please enter the verification code it contains</div>
+            <div key="_static" >{ _t("A text message has been sent to +%(msisdn)s. Please enter the verification code it contains", { msisdn: msisdn} ) }</div>
         ];
         if (err) {
             let msg = err.error;
             if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
-                msg = "Incorrect verification code";
+                msg = _t("Incorrect verification code");
             }
             msgElements.push(<div key="_error" className="error">{msg}</div>);
         }
         Modal.createDialog(TextInputDialog, {
-            title: "Enter Code",
+            title: _t("Enter Code"),
             description: <div>{msgElements}</div>,
-            button: "Submit",
+            button: _t("Submit"),
             onFinished: (should_verify, token) => {
                 if (!should_verify) {
                     this._addThreepid = null;
@@ -147,7 +146,7 @@ export default WithMatrixClient(React.createClass({
         return (
             <form className="mx_UserSettings_profileTableRow" onSubmit={this._onAddMsisdnSubmit}>
                 <div className="mx_UserSettings_profileLabelCell">
-                    <label>Phone</label>
+                    <label>{_t('Phone')}</label>
                 </div>
                 <div className="mx_UserSettings_profileInputCell">
                     <div className="mx_UserSettings_phoneSection">
@@ -159,7 +158,7 @@ export default WithMatrixClient(React.createClass({
                         <input type="text"
                             ref={this._collectAddMsisdnInput}
                             className="mx_UserSettings_phoneNumberField"
-                            placeholder="Add phone number"
+                            placeholder={ _t('Add phone number') }
                             value={this.state.phoneNumber}
                             onChange={this._onPhoneNumberChange}
                         />

src/components/views/settings/ChangePassword.js

@@ -21,6 +21,7 @@ var MatrixClientPeg = require("../../../MatrixClientPeg");
 var Modal = require("../../../Modal");
 var sdk = require("../../../index");
 import AccessibleButton from '../elements/AccessibleButton';
+import { _t } from '../../../languageHandler';
 
 import sessionStore from '../../../stores/SessionStore';
 
@@ -52,11 +53,11 @@ module.exports = React.createClass({
             onCheckPassword: function(oldPass, newPass, confirmPass) {
                 if (newPass !== confirmPass) {
                     return {
-                        error: "New passwords don't match."
+                        error: _t("New passwords don't match") + "."
                     };
                 } else if (!newPass || newPass.length === 0) {
                     return {
-                        error: "Passwords can't be empty"
+                        error: _t("Passwords can't be empty")
                     };
                 }
             },
@@ -102,19 +103,21 @@ module.exports = React.createClass({
 
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
-            title: "Warning",
+            title: _t("Warning!"),
             description:
                 <div>
-                    Changing 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(
+                        'Changing 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.'
+                    ) } (<a href="https://github.com/vector-im/riot-web/issues/2671">https://github.com/vector-im/riot-web/issues/2671</a>)
                 </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) => {
@@ -194,7 +197,7 @@ module.exports = React.createClass({
         switch (this.state.phase) {
             case this.Phases.Edit:
                 const passwordLabel = this.state.cachedPassword ?
-                    'Password' : 'New Password';
+                    _t('Password') : _t('New Password');
                 return (
                     <div className={this.props.className}>
                         { currentPassword }
@@ -208,7 +211,7 @@ module.exports = React.createClass({
                         </div>
                         <div className={rowClassName}>
                             <div className={rowLabelClassName}>
-                                <label htmlFor="password2">Confirm password</label>
+                                <label htmlFor="password2">{ _t('Confirm password') }</label>
                             </div>
                             <div className={rowInputClassName}>
                                 <input id="password2" type="password" ref="confirm_input" />
@@ -217,7 +220,7 @@ module.exports = React.createClass({
                         <AccessibleButton className={buttonClassName}
                                 onClick={this.onClickChange}
                                 element="button">
-                            Change Password
+                            { _t('Change Password') }
                         </AccessibleButton>
                     </div>
                 );

src/components/views/settings/DevicesPanelEntry.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 
 import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
 import MatrixClientPeg from '../../../MatrixClientPeg';
 import Modal from '../../../Modal';
 import DateUtils from '../../../DateUtils';
@@ -48,7 +49,7 @@ export default class DevicesPanelEntry extends React.Component {
             display_name: value,
         }).catch((e) => {
             console.error("Error setting device display name", e);
-            throw new Error("Failed to set display name");
+            throw new Error(_t("Failed to set display name"));
         });
     }
 
@@ -71,6 +72,7 @@ export default class DevicesPanelEntry extends React.Component {
             var InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
 
             Modal.createDialog(InteractiveAuthDialog, {
+            	title: _t("Authentication"),
                 matrixClient: MatrixClientPeg.get(),
                 authData: error.data,
                 makeRequest: this._makeDeleteRequest,
@@ -84,7 +86,7 @@ export default class DevicesPanelEntry extends React.Component {
             if (this._unmounted) { return; }
             this.setState({
                 deleting: false,
-                deleteError: "Failed to delete device",
+                deleteError: _t("Failed to delete device"),
             });
         }).done();
     }
@@ -132,7 +134,7 @@ export default class DevicesPanelEntry extends React.Component {
             deleteButton = (
                 <div className="mx_textButton"
                   onClick={this._onDeleteClick}>
-                    Delete
+                    { _t("Delete") }
                 </div>
             );
         }