Merge branch 'develop' into new-guest-access

.travis.yml

@@ -1,6 +1,17 @@
 language: node_js
 node_js:
-    - 6   # node v6, to match jenkins
+    # make sure we work with a range of node versions.
+    # As of the time of writing:
+    #  - 4.x is still in LTS (until April 2018), but some of our deps (notably
+    #    extract-zip) don't work with it
+    #  - 5.x has been EOLed for nearly a year.
+    #  - 6.x is the current 'LTS' version
+    #  - 7.x is the current 'current' version (until October 2017)
+    #
+    # see: https://github.com/nodejs/LTS/
+    - 6.0
+    - 6
+    - 7
 install:
     - scripts/fetch-develop.deps.sh
     - npm install

README.md

@@ -55,17 +55,18 @@ Building From Source
 Riot is a modular webapp built with modern ES6 and requires a npm build system
 to build.
 
-1. Install or update `node.js` so that your `npm` is at least at version `2.0.0`
-1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`
-1. Switch to the riot-web directory: `cd riot-web`
+1. Install or update `node.js` so that your `node` is at least v6.0.0 (and `npm`
+   is at least v3.8.6).
+1. Clone the repo: `git clone https://github.com/vector-im/riot-web.git`.
+1. Switch to the riot-web directory: `cd riot-web`.
 1. If you're using the `develop` branch, install the develop versions of the
    dependencies, as the released ones will be too old:
    ```
    scripts/fetch-develop-deps.sh
    ```
    Whenever you git pull on riot-web you will also probably need to force an update
    to these dependencies - the simplest way is to re-run the script, but you can also
-   manually update and reuild them:
+   manually update and rebuild them:
    ```
    cd matrix-js-sdk
    git pull
@@ -85,10 +86,10 @@ to build.
    up-to-date.  Or just use https://riot.im/develop - the continuous integration
    release of the develop branch.
    (Note that we don't reference the develop versions in git directly due to
-   https://github.com/npm/npm/issues/3055)
-1. Install the prerequisites: `npm install`
+   https://github.com/npm/npm/issues/3055.)
+1. Install the prerequisites: `npm install`.
 1. Configure the app by copying `config.sample.json` to `config.json` and
-   modifying it (see below for details)
+   modifying it (see below for details).
 1. `npm run dist` to build a tarball to deploy. Untaring this file will give
    a version-specific directory containing all the files that need to go on your
    web server.

config.sample.json

@@ -11,5 +11,9 @@
             "matrix.org"
         ]
     },
-    "welcomeUserId": "@riot-bot:matrix.org"
+    "welcomeUserId": "@riot-bot:matrix.org",
+    "piwik": {
+        "url": "https://piwik.riot.im/",
+        "siteId": 1
+    }
 }

electron_app/riot.im/config.json

@@ -12,5 +12,9 @@
         "servers": [
             "matrix.org"
         ]
+    },
+    "piwik": {
+        "url": "https://piwik.riot.im/",
+        "siteId": 1
     }
 }

src/components/structures/CompatibilityPage.js

@@ -17,6 +17,7 @@ limitations under the License.
 'use strict';
 
 var React = require('react');
+import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
 
 module.exports = React.createClass({
     displayName: 'CompatibilityPage',
@@ -39,23 +40,37 @@ module.exports = React.createClass({
         return (
         <div className="mx_CompatibilityPage">
             <div className="mx_CompatibilityPage_box">
-                <p>Sorry, your browser is <b>not</b> able to run Riot.</p>
+                <p>{ _tJsx("Sorry, your browser is <b>not</b> able to run Riot.", /<b>(.*?)<\/b>/, (sub) => <b>{sub}</b>) } </p>
                 <p>
-                Riot uses many advanced browser features, some of which are not
-                available or experimental in your current browser.
+                { _t("Riot uses many advanced browser features, some of which are not available or experimental in your current browser.") }
                 </p>
                 <p>
-                Please install <a href="https://www.google.com/chrome">Chrome</a> or <a href="https://getfirefox.com">Firefox</a> for
-                the best experience. <a href="http://apple.com/safari">Safari</a> and <a href="http://opera.com">Opera</a> work too.
+                { _tJsx('Please install <a href="https://www.google.com/chrome">Chrome</a> or <a href="https://getfirefox.com">Firefox</a> for the best experience.',
+                    [
+                        /<a href="https:\/\/www.google.com\/chrome">(.*?)<\/a>/,
+                        /<a href="https:\/\/getfirefox.com">(.*?)<\/a>/,
+                    ],
+                    [
+                        (sub) => <a href="https://www.google.com/chrome">{sub}</a>,
+                        (sub) => <a href="https://getfirefox.com">{sub}</a>,
+                    ]
+                )}
+                { _tJsx('<a href="http://apple.com/safari">Safari</a> and <a href="http://opera.com">Opera</a> work too.',
+                    [
+                        /<a href="http:\/\/apple\.com\/safari">(.*?)<\/a>/,
+                        /<a href="http:\/\/opera\.com">(.*?)<\/a>/,
+                    ],
+                    [
+                        (sub) => <a href="http://apple.com/safari">{sub}</a>,
+                        (sub) => <a href="http://opera.com">{sub}</a>,
+                    ]
+                )}
                 </p>
                 <p>
-                With your current browser, the look and feel of the application may
-                be completely incorrect, and some or all features may not function.
-                If you want to try it anyway you can continue, but you are on your own
-                in terms of any issues you may encounter!
+                { _t("With your current browser, the look and feel of the application may be completely incorrect, and some or all features may not function. If you want to try it anyway you can continue, but you are on your own in terms of any issues you may encounter!") }
                 </p>
                 <button onClick={this.onAccept}>
-                    I understand the risks and wish to continue
+                    { _t("I understand the risks and wish to continue") }
                 </button>
             </div>
         </div>

src/components/structures/RightPanel.js

@@ -22,6 +22,7 @@ import sdk from 'matrix-react-sdk';
 import Matrix from "matrix-js-sdk";
 import dis from 'matrix-react-sdk/lib/dispatcher';
 import MatrixClientPeg from 'matrix-react-sdk/lib/MatrixClientPeg';
+import Analytics from 'matrix-react-sdk/lib/Analytics';
 import rate_limited_func from 'matrix-react-sdk/lib/ratelimitedfunc';
 import Modal from 'matrix-react-sdk/lib/Modal';
 import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
@@ -61,24 +62,26 @@ module.exports = React.createClass({
             return {
                 phase: this.Phase.MemberInfo,
                 member: member,
-            }
-        }
-        else {
+            };
+        } else {
             return {
                 phase: this.Phase.MemberList
-            }
+            };
         }
     },
 
     onMemberListButtonClick: function() {
+        Analytics.trackEvent('Right Panel', 'Member List Button', 'click');
         this.setState({ phase: this.Phase.MemberList });
     },
 
     onFileListButtonClick: function() {
+        Analytics.trackEvent('Right Panel', 'File List Button', 'click');
         this.setState({ phase: this.Phase.FilePanel });
     },
 
     onNotificationListButtonClick: function() {
+        Analytics.trackEvent('Right Panel', 'Notification List Button', 'click');
         this.setState({ phase: this.Phase.NotificationPanel });
     },
 
@@ -218,7 +221,7 @@ module.exports = React.createClass({
                             <TintableSvg src="img/icons-notifications.svg" width="25" height="25"/>
                             { notificationsHighlight }
                         </AccessibleButton>
-                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title="Hide panel" onClick={ this.onCollapseClick }>
+                        <div className="mx_RightPanel_headerButton mx_RightPanel_collapsebutton" title={ _t("Hide panel") } onClick={ this.onCollapseClick }>
                             <TintableSvg src="img/minimise.svg" width="10" height="16"/>
                         </div>
                     </div>;

src/components/structures/RoomDirectory.js

@@ -213,11 +213,11 @@ module.exports = React.createClass({
 
                 var Loader = sdk.getComponent("elements.Spinner");
                 var modal = Modal.createDialog(Loader);
-                var step = _t('remove %(name)s from the directory', {name: name}) + '.';
+                var step = _t('remove %(name)s from the directory.', {name: name});
 
                 MatrixClientPeg.get().setRoomDirectoryVisibility(room.room_id, 'private').then(() => {
                     if (!alias) return;
-                    step = _t('delete the alias') + '.';
+                    step = _t('delete the alias.');
                     return MatrixClientPeg.get().deleteAlias(alias);
                 }).done(() => {
                     modal.close();

src/components/structures/SearchBox.js

@@ -100,13 +100,13 @@ module.exports = React.createClass({
         if (this.props.collapsed) {
             toggleCollapse =
                 <AccessibleButton className="mx_SearchBox_maximise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, true) }>
-                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt="Expand panel"/>
+                    <TintableSvg src="img/maximise.svg" width="10" height="16" alt={ _t("Expand panel") }/>
                 </AccessibleButton>
         }
         else {
             toggleCollapse =
                 <AccessibleButton className="mx_SearchBox_minimise" tabIndex={collapseTabIndex} onClick={ this.onToggleCollapse.bind(this, false) }>
-                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt="Collapse panel"/>
+                    <TintableSvg src="img/minimise.svg" width="10" height="16" alt={ _t("Collapse panel") }/>
                 </AccessibleButton>
         }
 

src/components/views/context_menus/MessageContextMenu.js

@@ -40,6 +40,31 @@ module.exports = React.createClass({
         onFinished: React.PropTypes.func,
     },
 
+    getInitialState: function() {
+        return {
+            canRedact: false,
+        };
+    },
+
+    componentWillMount: function() {
+        MatrixClientPeg.get().on('RoomMember.powerLevel', this._checkCanRedact);
+        this._checkCanRedact();
+    },
+
+    componentWillUnmount: function() {
+        const cli = MatrixClientPeg.get();
+        if (cli) {
+            cli.removeListener('RoomMember.powerLevel', this._checkCanRedact);
+        }
+    },
+
+    _checkCanRedact: function() {
+        const cli = MatrixClientPeg.get();
+        const room = cli.getRoom(this.props.mxEvent.getRoomId());
+        const canRedact = room.currentState.maySendRedactionForEvent(this.props.mxEvent, cli.credentials.userId);
+        this.setState({canRedact});
+    },
+
     onResendClick: function() {
         Resend.resend(this.props.mxEvent);
         if (this.props.onFinished) this.props.onFinished();
@@ -136,10 +161,10 @@ module.exports = React.createClass({
             );
         }
 
-        if (!eventStatus && !this.props.mxEvent.isRedacted()) { // sent and not redacted
+        if (!eventStatus && this.state.canRedact) {
             redactButton = (
                 <div className="mx_MessageContextMenu_field" onClick={this.onRedactClick}>
-                    { _t('Redact') }
+                    { _t('Remove') }
                 </div>
             );
         }
@@ -206,7 +231,7 @@ module.exports = React.createClass({
           externalURLButton = (
               <div className="mx_MessageContextMenu_field">
                   <a href={ this.props.mxEvent.event.content.external_url }
-                    rel="noopener" target="_blank"  onClick={ this.closeMenu }>{ _t('Source URL') }</a>
+                    rel="noopener" target="_blank" onClick={ this.closeMenu }>{ _t('Source URL') }</a>
               </div>
           );
         }

src/components/views/globals/MatrixToolbar.js

@@ -16,11 +16,10 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
+import React from 'react';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-var Notifier = require("matrix-react-sdk/lib/Notifier");
-var sdk = require('matrix-react-sdk')
-var AccessibleButton = require('matrix-react-sdk/lib/components/views/elements/AccessibleButton');
+import Notifier from 'matrix-react-sdk/lib/Notifier';
+import AccessibleButton from 'matrix-react-sdk/lib/components/views/elements/AccessibleButton';
 
 module.exports = React.createClass({
     displayName: 'MatrixToolbar',
@@ -43,5 +42,5 @@ module.exports = React.createClass({
                 <AccessibleButton className="mx_MatrixToolbar_close" onClick={ this.hideToolbar } ><img src="img/cancel.svg" width="18" height="18" /></AccessibleButton>
             </div>
         );
-    }
+    },
 });

src/components/views/messages/MessageTimestamp.js

@@ -16,7 +16,6 @@ limitations under the License.
 
 'use strict';
 
-import * as UserSettingsStore from 'matrix-react-sdk/lib/UserSettingsStore';
 const React = require('react');
 const DateUtils = require('matrix-react-sdk/lib/DateUtils');
 
@@ -30,7 +29,7 @@ module.exports = React.createClass({
     render: function() {
         const date = new Date(this.props.ts);
         return (
-            <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date) }>
+            <span className="mx_MessageTimestamp" title={ DateUtils.formatFullDate(date, this.props.showTwelveHour) }>
                 { DateUtils.formatTime(date, this.props.showTwelveHour) }
             </span>
         );

src/components/views/settings/Notifications.js

@@ -16,7 +16,7 @@ limitations under the License.
 
 'use strict';
 var React = require('react');
-import { _t } from 'matrix-react-sdk/lib/languageHandler';
+import { _t, _tJsx } from 'matrix-react-sdk/lib/languageHandler';
 var q = require("q");
 var sdk = require('matrix-react-sdk');
 var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
@@ -178,6 +178,7 @@ module.exports = React.createClass({
         Modal.createDialog(TextInputDialog, {
             title: _t('Keywords'),
             description: _t('Enter keywords separated by a comma:'),
+            button: _t('OK'),
             value: keywords,
             onFinished: function onFinished(should_leave, newValue) {
 
@@ -534,7 +535,16 @@ module.exports = React.createClass({
                     // it corresponds to all content push rules (stored in self.state.vectorContentRule)
                     self.state.vectorPushRules.push({
                         "vectorRuleId": "_keywords",
-                        "description" : (<span>Messages containing <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>keywords</span></span>),
+                        "description" : (
+                            <span>
+                            { _tJsx('Messages containing <span>keywords</span>',
+                                /<span>(.*?)<\/span>/,
+                                (sub) => {
+                                    return <span className="mx_UserNotifSettings_keywords" onClick={ self.onKeywordsClicked }>{sub}</span>;
+                                }
+                            )}
+                            </span>
+                        ),
                         "vectorState": self.state.vectorContentRules.vectorState
                     });
                 }
@@ -548,7 +558,7 @@ module.exports = React.createClass({
 
                     self.state.vectorPushRules.push({
                         "vectorRuleId": vectorRuleId,
-                        "description" : ruleDefinition.description,
+                        "description" : _t(ruleDefinition.description), // Text from VectorPushRulesDefinitions.js
                         "rule": rule,
                         "vectorState": vectorState,
                     });
@@ -589,6 +599,7 @@ module.exports = React.createClass({
                 phase: self.phases.DISPLAY
             });
         }, function(error) {
+            console.error(error);
             self.setState({
                 phase: self.phases.ERROR
             });
@@ -623,7 +634,7 @@ module.exports = React.createClass({
         return (
             <tr key={ className }>
                 <th>
-                    {title}
+                    { title }
                 </th>
 
                 <th>