From 3547bd8d00cef7a202b38cf8158d7dcc9005c0f1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jun 2016 13:02:34 +0100 Subject: [PATCH 01/14] Update for react-sdk dbkr/fix_peeking branch With the react-sdk update, this does nothing functionally since the room ID would just have been ignored, but update this to correctly supply only one of ID/alias. --- src/components/structures/RoomDirectory.js | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/components/structures/RoomDirectory.js b/src/components/structures/RoomDirectory.js index 2a37616b6..cc16e3c6e 100644 --- a/src/components/structures/RoomDirectory.js +++ b/src/components/structures/RoomDirectory.js @@ -116,16 +116,20 @@ module.exports = React.createClass({ }; } - // It's not really possible to join Matrix rooms by ID because the HS has no way to know - // which servers to start querying. However, there's no other way to join rooms in - // this list without aliases at present, so if roomAlias isn't set here we'll rely - // on view_room falling back to using the ID - dis.dispatch({ + var payload = { oob_data: oob_data, action: 'view_room', - room_id: roomId, - room_alias: roomAlias, - }); + }; + // It's not really possible to join Matrix rooms by ID because the HS has no way to know + // which servers to start querying. However, there's no other way to join rooms in + // this list without aliases at present, so if roomAlias isn't set here we have no + // choice but to supply the ID. + if (roomAlias) { + payload.room_alias = roomAlias; + } else { + payload.room_id = roomId; + } + dis.dispatch(payload); }, getRows: function(filter) { From b643d8ff6af990815fc6d731477da3ccab6cc9f9 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jun 2016 15:12:35 +0100 Subject: [PATCH 02/14] Update README.md To reflect the fact that you can now sensibly deploy from a package (ie. be able to configure the app). Make the first thing be downloading a prebuilt package so people who only read the first part don't end up running npm start in production and complain about needing npm. --- README.md | 66 +++++++++++++++++++++++++++---------------------------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/README.md b/README.md index 7a45339f6..332b38529 100644 --- a/README.md +++ b/README.md @@ -3,8 +3,23 @@ Vector/Web Vector is a Matrix web client built using the Matrix React SDK (https://github.com/matrix-org/matrix-react-sdk). -Getting started +Getting Started =============== +Vector is a modular webapp built with modern ES6 and requires and npm build system to build. +Instructions for building are below, but building from source shouldn't be necessary +for simple deployments. + +1. Download the latest version from https://vector.im/packages/ +1. Untar the tarball on your web server +1. Move (or symlink) the vector-x.x.x directory to an appropriate name +1. If desired, copy `config.sample.json` to `config.json` and edit it + as desired. See below for details. +1. Enter the URL into your browser and log into vector! + +Building From Source +==================== + +If you do wish to build vector from source: 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/vector-web.git` @@ -13,19 +28,21 @@ Getting started 1. If you are using the `develop` branch of vector, you will probably need to rebuild one of the dependencies, due to https://github.com/npm/npm/issues/3055: `(cd node_modules/matrix-react-sdk && npm install)` -1. Start the development builder and a testing server: `npm start` -1. Wait a few seconds for the initial build to finish (the command won't - terminate: it's running a web server for you). -1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector. +1. Configure the app by modifying the `config.json` file (see below for details) +1. `npm run package` 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. -With `npm start`, any changes you make to the source files will cause a rebuild so -your changes will show up when you refresh. This development server also disables -caching, so do NOT use it in production. +Note that `npm run package` is not supported on Windows, so Windows users can run `npm +run build`, which will build all the necessary files into the `vector` +directory. The version of Vector will not appear in Settings without +using the package script. You can then mount the vector directory on your +webserver to actually serve up the app, which is entirely static content. -Configuring +config.json =========== -Configure the app by modifying the `config.json` file: +You can configure the app by modifying the `config.json` file: 1. `default_hs_url` is the default home server url. 1. `default_is_url` is the default identity server url (this is the server used @@ -33,31 +50,13 @@ Configure the app by modifying the `config.json` file: registering with an email address or adding an email address to your account will not work. -You will need to re-run `npm run build` after editing `config.json`. - -Deployment -========== - -On a Unix-based OS, run `npm run package` to build a tarball package. Untaring -this file will give a version-specific directory containing all the files that -need to go on your web server. - -The package script is not supported on Windows, so Windows users can run `npm -run build`, which will build all the necessary files into the `vector` -directory. Note that the version of Vector will not appear in Settings without -using the package script. You can then mount the vector directory on your -webserver to actually serve up the app, which is entirely static content. - Development =========== -For simple tweaks, you can work on any of the source files within Vector with -the setup above, and your changes will cause an instant rebuild. - -However, much of the functionality in Vector is actually in the -`matrix-react-sdk` and `matrix-js-sdk` modules. It is possible to set these up -in a way that makes it easy to track the `develop` branches in git and to make -local changes without having to manually rebuild each time. +Much of the functionality in Vector is actually in the `matrix-react-sdk` and +`matrix-js-sdk` modules. It is possible to set these up in a way that makes it +easy to track the `develop` branches in git and to make local changes without +having to manually rebuild each time. [Be aware that there may be problems with this process under npm version 3.] @@ -102,7 +101,8 @@ Finally, build and start vector itself: + 1013 hidden modules ``` Remember, the command will not terminate since it runs the web server - and rebuilds source files when they change. + and rebuilds source files when they change. This development server also + disables caching, so do NOT use it in production. 1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector. When you make changes to `matrix-js-sdk` or `matrix-react-sdk`, you will need From 22cef7a6a06e826ba155611e82b964afeaf798f6 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jun 2016 15:41:55 +0100 Subject: [PATCH 03/14] Copy config.json first --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 332b38529..6728d184b 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,8 @@ If you do wish to build vector from source: 1. If you are using the `develop` branch of vector, you will probably need to rebuild one of the dependencies, due to https://github.com/npm/npm/issues/3055: `(cd node_modules/matrix-react-sdk && npm install)` -1. Configure the app by modifying the `config.json` file (see below for details) +1. Configure the app by copying `config.sample.json` to `config.json` and modifying + it (see below for details) 1. `npm run package` 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. From a7598ea81507d77958a414c96a18be0ca1773968 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jun 2016 15:52:03 +0100 Subject: [PATCH 04/14] Mention copying sample file here too --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 6728d184b..6bbda7bf9 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,7 @@ webserver to actually serve up the app, which is entirely static content. config.json =========== -You can configure the app by modifying the `config.json` file: +You can configure the app by copying the sample and modifying the `config.json` file: 1. `default_hs_url` is the default home server url. 1. `default_is_url` is the default identity server url (this is the server used From a8cee87c086f4a0c2dcdfc2ef203ca269204ba05 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 14 Jun 2016 15:53:13 +0100 Subject: [PATCH 05/14] js-sdk doesn't have a build step --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 6bbda7bf9..ea3501746 100644 --- a/README.md +++ b/README.md @@ -106,10 +106,10 @@ Finally, build and start vector itself: disables caching, so do NOT use it in production. 1. Open http://127.0.0.1:8080/ in your browser to see your newly built Vector. -When you make changes to `matrix-js-sdk` or `matrix-react-sdk`, you will need -to run `npm run build` in the relevant directory. You can do this automatically -by instead running `npm start` in each directory, to start a development -builder which will watch for changes to the files and rebuild automatically. +When you make changes to `matrix-react-sdk`, you will need to run `npm run +build` in the relevant directory. You can do this automatically by instead +running `npm start` in the directory, to start a development builder which +will watch for changes to the files and rebuild automatically. If you add or remove any components from the Vector skin, you will need to rebuild the skin's index by running, `npm run reskindex`. From a373849b5b4515b73a9d16300aca5067965bed33 Mon Sep 17 00:00:00 2001 From: David Baker Date: Wed, 15 Jun 2016 11:03:52 +0100 Subject: [PATCH 06/14] Give better instructions for modifying config. --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ea3501746..ba8ad940a 100644 --- a/README.md +++ b/README.md @@ -43,7 +43,8 @@ webserver to actually serve up the app, which is entirely static content. config.json =========== -You can configure the app by copying the sample and modifying the `config.json` file: +You can configure the app by copying `vector/config.sample.json` to +`vector/config.json` and customising it: 1. `default_hs_url` is the default home server url. 1. `default_is_url` is the default identity server url (this is the server used From 795986f14695965621a8bfed91cca22cf6e4c763 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 16 Jun 2016 07:39:34 +0100 Subject: [PATCH 07/14] Karma: fix warning by ignoring olm If olm is not installed, the webpack build for the karma tests gives an ugly error. None of the tests currently care if olm is installed or not, so fix this for now by just ignoring the olm module. --- karma.conf.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/karma.conf.js b/karma.conf.js index 971e96823..f05186af9 100644 --- a/karma.conf.js +++ b/karma.conf.js @@ -36,7 +36,7 @@ module.exports = function (config) { proxies: { "/img/": "/base/vector/img/", }, - + // preprocess matching files before serving them to the browser // available preprocessors: // https://npmjs.org/browse/keyword/karma-preprocessor @@ -123,7 +123,7 @@ module.exports = function (config) { // same goes for js-sdk "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'), - + sinon: 'sinon/pkg/sinon.js', }, root: [ @@ -131,6 +131,11 @@ module.exports = function (config) { path.resolve('./test'), ], }, + plugins: [ + // olm may not be installed, so avoid webpack warnings by + // ignoring it. + new webpack.IgnorePlugin(/^olm$/), + ], devtool: 'inline-source-map', }, }); From a90492e393adbec50dc44e1da1f3598f812c86b6 Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Thu, 9 Jun 2016 11:49:55 -0700 Subject: [PATCH 08/14] fix CSS --- .../vector/css/matrix-react-sdk/views/rooms/EventTile.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css index cb71d481d..e8f42aac1 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/EventTile.css @@ -17,7 +17,7 @@ limitations under the License. .mx_EventTile { max-width: 100%; clear: both; - margin-top: 24px; + padding-top: 24px; margin-left: 65px; } @@ -33,7 +33,7 @@ limitations under the License. } .mx_EventTile_continuation { - margin-top: 8px ! important; + padding-top: 8px ! important; } .mx_EventTile_verified { From 95a0bc92d6b4fef759bac13b7e60dd3bbee69c0d Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Thu, 9 Jun 2016 19:08:31 +0100 Subject: [PATCH 09/14] CSS for unverify button (supports change in react-sdk) --- .../matrix-react-sdk/views/rooms/MemberDeviceInfo.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css index 86a304f6b..2031f4f18 100644 --- a/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css +++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/MemberDeviceInfo.css @@ -26,7 +26,6 @@ limitations under the License. .mx_MemberDeviceInfo_textButton { color: #fff; - background-color: #76cfa6; height: 20px; border-radius: 20px; text-align: center; @@ -35,3 +34,11 @@ limitations under the License. cursor: pointer; } + +.mx_MemberDeviceInfo_verify { + background-color: #76cfa6; +} + +.mx_MemberDeviceInfo_unverify { + background-color: #e55e5e; +} \ No newline at end of file From 607923b58f3defe58ebe2df1fd01f2a0fdeb354d Mon Sep 17 00:00:00 2001 From: David Baker Date: Fri, 17 Jun 2016 17:49:11 +0100 Subject: [PATCH 10/14] Fix test since we peek by room ID, not alias --- test/app-tests/joining.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/test/app-tests/joining.js b/test/app-tests/joining.js index 1b47889a1..37a3e9e65 100644 --- a/test/app-tests/joining.js +++ b/test/app-tests/joining.js @@ -77,6 +77,7 @@ describe('joining a room', function () { httpBackend.when('POST', '/filter').respond(200, { filter_id: 'fid' }); httpBackend.when('GET', '/sync').respond(200, {}); httpBackend.when('GET', '/publicRooms').respond(200, {chunk: []}); + httpBackend.when('GET', '/directory/room/'+encodeURIComponent(ROOM_ALIAS)).respond(200, { room_id: ROOM_ID }); // start with a logged-in client peg.replaceUsingAccessToken(HS_URL, IS_URL, USER_ID, ACCESS_TOKEN); @@ -102,7 +103,7 @@ describe('joining a room', function () { // that should create a roomview which will start a peek; wait // for the peek. - httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ALIAS)+"/initialSync") + httpBackend.when('GET', '/rooms/'+encodeURIComponent(ROOM_ID)+"/initialSync") .respond(401, {errcode: 'M_GUEST_ACCESS_FORBIDDEN'}); return httpBackend.flush(); }).then(() => { From 654429dbdb016ecb4f7fd8249828a820877564ff Mon Sep 17 00:00:00 2001 From: Matthew Hodgson Date: Sat, 18 Jun 2016 21:12:32 +0100 Subject: [PATCH 11/14] improve wording on 'search room names' --- src/components/structures/SearchBox.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/structures/SearchBox.js b/src/components/structures/SearchBox.js index 9a38089e1..5e5a19e65 100644 --- a/src/components/structures/SearchBox.js +++ b/src/components/structures/SearchBox.js @@ -103,7 +103,7 @@ module.exports = React.createClass({ className="mx_SearchBox_search" value={ this.state.searchTerm } onChange={ this.onChange } - placeholder="Search room names" + placeholder="Filter room names" /> ]; } From 664f809362916cb53c985db5a351d6deb6a6a9e3 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 20 Jun 2016 10:47:16 +0100 Subject: [PATCH 12/14] webpack: Use `require` to look for olm Since https://github.com/matrix-org/matrix-js-sdk/pull/141, the jenkins build does pull in the olm module, but because it's using npm v2, buries it deep in node_modules. Rather than using the `fs` module to hunt for it, just try to `require` it in the webpack config. --- webpack.config.js | 30 ++++++++++-------------------- 1 file changed, 10 insertions(+), 20 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 297881f33..78282d188 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,8 +2,6 @@ var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); -var olm_path = path.resolve('./node_modules/olm'); - module.exports = { module: { preLoaders: [ @@ -45,11 +43,6 @@ module.exports = { // same goes for js-sdk "matrix-js-sdk": path.resolve('./node_modules/matrix-js-sdk'), - - // matrix-js-sdk will use olm if it is available, - // but does not explicitly depend on it. Pull it - // in from node_modules if it's there. - olm: olm_path, }, }, plugins: [ @@ -65,20 +58,17 @@ module.exports = { // olm.js includes "require 'fs'", which is never // executed in the browser. Ignore it. - new webpack.IgnorePlugin(/^fs$/, /node_modules\/olm$/) + new webpack.IgnorePlugin(/^fs$/, /\/olm$/) ], devtool: 'source-map' }; -// ignore olm.js if it's not installed. -(function() { - var fs = require('fs'); - try { - fs.lstatSync(olm_path); - console.log("Olm is installed; including it in webpack bundle"); - } catch (e) { - module.exports.plugins.push( - new webpack.IgnorePlugin(/^olm$/) - ); - } -}) (); +// ignore olm.js if it's not installed, to avoid a scary-looking error. +try { + require('olm'); + console.log("Olm is installed; including it in webpack bundle"); +} catch (e) { + module.exports.plugins.push( + new webpack.IgnorePlugin(/^olm$/) + ); +} From bb820bebd183bbed0735deb71b7b95fd2bbdc061 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 20 Jun 2016 10:52:56 +0100 Subject: [PATCH 13/14] README: fix some lies Take out a few misleading things from the readme. --- README.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index ba8ad940a..cd2ef75df 100644 --- a/README.md +++ b/README.md @@ -22,7 +22,7 @@ Building From Source If you do wish to build vector from source: 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/vector-web.git` +1. Clone the repo: `git clone https://github.com/vector-im/vector-web.git` 1. Switch to the vector directory: `cd vector-web` 1. Install the prerequisites: `npm install` 1. If you are using the `develop` branch of vector, you will probably need to @@ -60,8 +60,6 @@ Much of the functionality in Vector is actually in the `matrix-react-sdk` and easy to track the `develop` branches in git and to make local changes without having to manually rebuild each time. -[Be aware that there may be problems with this process under npm version 3.] - First clone and build `matrix-js-sdk`: 1. `git clone git@github.com:matrix-org/matrix-js-sdk.git` @@ -123,10 +121,7 @@ day-to-day use; it is experimental and should be considered only as a proof-of-concept. See https://matrix.org/jira/browse/SPEC-162 for an overview of the current progress. -To build a version of vector with support for end-to-end encryption, install -the olm module with `npm i https://matrix.org/packages/npm/olm/olm-0.1.0.tgz` -before running `npm start`. The olm library will be detected and used if -available. +Vector is built with support for end-to-end encryption by default. To enable encryption for a room, type @@ -142,4 +137,4 @@ Note that historical encrypted messages cannot currently be decoded - history is therefore lost when the page is reloaded. There is currently no visual indication of whether encryption is enabled for a -room, or whether a particular message was encrypted. +room. From 4c6fa740f33635b0d46c28cc05fe316ba4f92867 Mon Sep 17 00:00:00 2001 From: Richard van der Hoff Date: Mon, 20 Jun 2016 15:10:19 +0100 Subject: [PATCH 14/14] package.json: add olm as optionalDependency Add olm as an optionalDependency to vector, so that the webpack config can find it and include it in the bundle. --- package.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/package.json b/package.json index bd4c1115a..0868b71ff 100644 --- a/package.json +++ b/package.json @@ -79,5 +79,8 @@ "rimraf": "^2.4.3", "source-map-loader": "^0.1.5", "webpack": "^1.12.14" + }, + "optionalDependencies": { + "olm": "https://matrix.org/packages/npm/olm/olm-0.1.0.tgz" } }