Merge branch 'develop' into matthew/warn-unknown-devices

Author: richvdh

.eslintignore

@@ -0,0 +1 @@
+src/component-index.js

.eslintrc.js

@@ -1,6 +1,15 @@
+const path = require('path');
+
+// get the path of the js-sdk so we can extend the config
+// eslint supports loading extended configs by module,
+// but only if they come from a module that starts with eslint-config-
+// So we load the filename directly (and it could be in node_modules/
+// or or ../node_modules/ etc)
+const matrixJsSdkPath = path.dirname(require.resolve('matrix-js-sdk'));
+
 module.exports = {
     parser: "babel-eslint",
-    extends: ["./node_modules/matrix-js-sdk/.eslintrc.js"],
+    extends: [matrixJsSdkPath + "/.eslintrc.js"],
     plugins: [
       "react",
       "flowtype",

jenkins.sh

@@ -19,7 +19,7 @@ npm install
 npm run test
 
 # run eslint
-npm run lint -- -f checkstyle -o eslint.xml || true
+npm run lintall -- -f checkstyle -o eslint.xml || true
 
 # delete the old tarball, if it exists
 rm -f matrix-react-sdk-*.tgz

package.json

@@ -10,6 +10,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "files": [
+    ".eslintrc.js",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
     "LICENSE",
@@ -46,10 +47,12 @@
     "browser-encrypt-attachment": "^0.3.0",
     "browser-request": "^0.3.3",
     "classnames": "^2.1.2",
+    "commonmark": "^0.27.0",
     "draft-js": "^0.8.1",
     "draft-js-export-html": "^0.5.0",
     "draft-js-export-markdown": "^0.2.0",
     "emojione": "2.2.3",
+    "file-saver": "^1.3.3",
     "filesize": "^3.1.2",
     "flux": "^2.0.3",
     "fuse.js": "^2.2.0",
@@ -58,7 +61,6 @@
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.3",
     "lodash": "^4.13.1",
-    "commonmark": "^0.27.0",
     "matrix-js-sdk": "matrix-org/matrix-js-sdk#develop",
     "optimist": "^0.6.1",
     "q": "^1.4.1",

src/Invite.js

@@ -19,9 +19,12 @@ import MultiInviter from './utils/MultiInviter';
 
 const emailRegex = /^\S+@\S+\.\S+$/;
 
+// We allow localhost for mxids to avoid confusion
+const mxidRegex = /^@\S+:(?:\S+\.\S+|localhost)$/
+
 export function getAddressType(inputText) {
-    const isEmailAddress = /^\S+@\S+\.\S+$/.test(inputText);
-    const isMatrixId = inputText[0] === '@' && inputText.indexOf(":") > 0;
+    const isEmailAddress = emailRegex.test(inputText);
+    const isMatrixId = mxidRegex.test(inputText);
 
     // sanity check the input for user IDs
     if (isEmailAddress) {

src/KeyCode.js

@@ -20,6 +20,7 @@ module.exports = {
     TAB: 9,
     ENTER: 13,
     SHIFT: 16,
+    ESCAPE: 27,
     PAGE_UP: 33,
     PAGE_DOWN: 34,
     END: 35,

src/Modal.js

@@ -67,6 +67,8 @@ const AsyncWrapper = React.createClass({
     },
 });
 
+let _counter = 0;
+
 module.exports = {
     DialogContainerId: "mx_Dialog_Container",
 
@@ -113,12 +115,16 @@ module.exports = {
             ReactDOM.unmountComponentAtNode(self.getOrCreateContainer());
         };
 
+        // don't attempt to reuse the same AsyncWrapper for different dialogs,
+        // otherwise we'll get confused.
+        const modalCount = _counter++;
+
         // FIXME: If a dialog uses getDefaultProps it clobbers the onFinished
         // property set here so you can't close the dialog from a button click!
         var dialog = (
             <div className={"mx_Dialog_wrapper " + className}>
                 <div className="mx_Dialog">
-                     <AsyncWrapper loader={loader} {...props} onFinished={closeDialog}/>
+                    <AsyncWrapper key={modalCount} loader={loader} {...props} onFinished={closeDialog}/>
                 </div>
                 <div className="mx_Dialog_background" onClick={ closeDialog.bind(this, false) }></div>
             </div>

src/WhoIsTyping.js

@@ -32,17 +32,24 @@ module.exports = {
         return whoIsTyping;
     },
 
-    whoIsTypingString: function(room) {
-        var whoIsTyping = this.usersTypingApartFromMe(room);
+    whoIsTypingString: function(room, limit) {
+        const whoIsTyping = this.usersTypingApartFromMe(room);
+        const othersCount = limit === undefined ?
+            0 : Math.max(whoIsTyping.length - limit, 0);
         if (whoIsTyping.length == 0) {
-            return null;
+            return '';
         } else if (whoIsTyping.length == 1) {
             return whoIsTyping[0].name + ' is typing';
+        }
+        const names = whoIsTyping.map(function(m) {
+            return m.name;
+        });
+        if (othersCount) {
+            const other = ' other' + (othersCount > 1 ? 's' : '');
+            return names.slice(0, limit).join(', ') + ' and ' +
+                othersCount + other + ' are typing';
         } else {
-            var names = whoIsTyping.map(function(m) {
-                return m.name;
-            });
-            var lastPerson = names.shift();
+            const lastPerson = names.pop();
             return names.join(', ') + ' and ' + lastPerson + ' are typing';
         }
     }

src/async-components/views/dialogs/ExportE2eKeysDialog.js

@@ -14,71 +14,158 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import FileSaver from 'file-saver';
 import React from 'react';
 
+import * as Matrix from 'matrix-js-sdk';
+import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
 import sdk from '../../../index';
 
-import * as MegolmExportEncryption from '../../../utils/MegolmExportEncryption';
+const PHASE_EDIT = 1;
+const PHASE_EXPORTING = 2;
 
 export default React.createClass({
     displayName: 'ExportE2eKeysDialog',
 
+    propTypes: {
+        matrixClient: React.PropTypes.instanceOf(Matrix.MatrixClient).isRequired,
+        onFinished: React.PropTypes.func.isRequired,
+    },
+
     getInitialState: function() {
         return {
-            collectedPassword: false,
+            phase: PHASE_EDIT,
+            errStr: null,
         };
     },
 
+    componentWillMount: function() {
+        this._unmounted = false;
+    },
+
+    componentWillUnmount: function() {
+        this._unmounted = true;
+    },
+
     _onPassphraseFormSubmit: function(ev) {
         ev.preventDefault();
-        console.log(this.refs.passphrase1.value);
+
+        const passphrase = this.refs.passphrase1.value;
+        if (passphrase !== this.refs.passphrase2.value) {
+            this.setState({errStr: 'Passphrases must match'});
+            return false;
+        }
+        if (!passphrase) {
+            this.setState({errStr: 'Passphrase must not be empty'});
+            return false;
+        }
+
+        this._startExport(passphrase);
         return false;
     },
 
-    render: function() {
-        let content;
-        if (!this.state.collectedPassword) {
-            content = (
-                <div className="mx_Dialog_content">
-                    <p>
-                        This process will allow you to export the keys for messages
-                        you have received in encrypted rooms to a local file. You
-                        will then be able to import the file into another Matrix
-                        client in the future, so that client will also be able to
-                        decrypt these messages.
-                    </p>
-                    <p>
-                        The exported file will allow anyone who can read it to decrypt
-                        any encrypted messages that you can see, so you should be
-                        careful to keep it secure. To help with this, you should enter
-                        a passphrase below, which will be used to encrypt the exported
-                        data. It will only be possible to import the data by using the
-                        same passphrase.
-                    </p>
-                    <form onSubmit={this._onPassphraseFormSubmit}>
-                        <div className="mx_TextInputDialog_label">
-                            <label htmlFor="passphrase1">Enter passphrase</label>
-                        </div>
-                        <div>
-                            <input ref="passphrase1" id="passphrase1"
-                                className="mx_TextInputDialog_input"
-                                autoFocus={true} size="64" type="password"/>
-                        </div>
-                        <div className="mx_Dialog_buttons">
-                            <input className="mx_Dialog_primary" type="submit" value="Export" />
-                        </div>
-                    </form>
-                </div>
+    _startExport: function(passphrase) {
+        // extra Promise.resolve() to turn synchronous exceptions into
+        // asynchronous ones.
+        Promise.resolve().then(() => {
+            return this.props.matrixClient.exportRoomKeys();
+        }).then((k) => {
+            return MegolmExportEncryption.encryptMegolmKeyFile(
+                JSON.stringify(k), passphrase
             );
-        }
+        }).then((f) => {
+            const blob = new Blob([f], {
+                type: 'text/plain;charset=us-ascii',
+            });
+            FileSaver.saveAs(blob, 'riot-keys.txt');
+            this.props.onFinished(true);
+        }).catch((e) => {
+            if (this._unmounted) {
+                return;
+            }
+            this.setState({
+                errStr: e.message,
+                phase: PHASE_EDIT,
+            });
+        });
+
+        this.setState({
+            errStr: null,
+            phase: PHASE_EXPORTING,
+        });
+    },
+
+    render: function() {
+        const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton');
+
+        const disableForm = (this.state.phase === PHASE_EXPORTING);
 
         return (
-            <div className="mx_exportE2eKeysDialog">
-                <div className="mx_Dialog_title">
-                    Export room keys
-                </div>
-                {content}
-            </div>
+            <BaseDialog className='mx_exportE2eKeysDialog'
+                onFinished={this.props.onFinished}
+                title="Export room keys"
+            >
+                <form onSubmit={this._onPassphraseFormSubmit}>
+                    <div className="mx_Dialog_content">
+                        <p>
+                            This process allows you to export the keys for messages
+                            you have received in encrypted rooms to a local file. You
+                            will then be able to import the file into another Matrix
+                            client in the future, so that client will also be able to
+                            decrypt these messages.
+                        </p>
+                        <p>
+                            The exported file will allow anyone who can read it to decrypt
+                            any encrypted messages that you can see, so you should be
+                            careful to keep it secure. To help with this, you should enter
+                            a passphrase below, which will be used to encrypt the exported
+                            data. It will only be possible to import the data by using the
+                            same passphrase.
+                        </p>
+                        <div className='error'>
+                            {this.state.errStr}
+                        </div>
+                        <div className='mx_E2eKeysDialog_inputTable'>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='passphrase1'>
+                                        Enter passphrase
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input ref='passphrase1' id='passphrase1'
+                                        autoFocus={true} size='64' type='password'
+                                        disabled={disableForm}
+                                    />
+                                </div>
+                            </div>
+                            <div className='mx_E2eKeysDialog_inputRow'>
+                                <div className='mx_E2eKeysDialog_inputLabel'>
+                                    <label htmlFor='passphrase2'>
+                                        Confirm passphrase
+                                    </label>
+                                </div>
+                                <div className='mx_E2eKeysDialog_inputCell'>
+                                    <input ref='passphrase2' id='passphrase2'
+                                        size='64' type='password'
+                                        disabled={disableForm}
+                                    />
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <div className='mx_Dialog_buttons'>
+                        <input className='mx_Dialog_primary' type='submit' value='Export'
+                             disabled={disableForm}
+                        />
+                        <AccessibleButton element='button' onClick={this.props.onFinished}
+                                disabled={disableForm}>
+                            Cancel
+                        </AccessibleButton>
+                    </div>
+                </form>
+            </BaseDialog>
         );
     },
 });