Merge branch 'anoa/jitsi_ptt' of github.com:anoadragon453/riot-web into anoa/jitsi_ptt

.github/ISSUE_TEMPLATE/redesign_issue.md

@@ -1,32 +0,0 @@
----
-name: Redesign Issue
-about: Bugs, feedback or feature requests specifically associated with the Redesign
-  project (https://riot.im/experimental)
-title: ''
-labels: redesign
-assignees: ''
-
----
-
-<!-- Thanks for providing feedback on the redesign! By filling out the sections with your information, you will help the us to process your issue.
--->
-
-- **Browser**: Chrome, Safari, Firefox? which version?
-- **OS**: Windows, macOS, Ubuntu, Arch Linux, etc?
-
-### Description
-
-Describe here the problem that you are experiencing, or the feature you are requesting.
-Include screenshots if possible: you can drag and drop images below.
-
-### Steps to reproduce
-
-- For bugs, list the steps
-- that reproduce the bug
-- using hyphens as bullet points
-
-Describe how what happens differs from what you expected.
-
-Log: sent/not sent?    <!-- You can send us the app's logs via the 'Report bug'
-link on the 'Settings' page. Very important for hard-to-reproduce bugs. Please
-file a bug here too! -->

.travis.yml

@@ -24,5 +24,5 @@ install:
     # commit.
     - npm install && scripts/fetch-develop.deps.sh --depth 1
 script:
-    - npm run test
+    - CHROME_BIN='/usr/bin/google-chrome-stable' npm run test
     - npm run lint

CHANGELOG.md

@@ -1,3 +1,113 @@
+Changes in [1.0.1](https://github.com/vector-im/riot-web/releases/tag/v1.0.1) (2019-02-15)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.0.0...v1.0.1)
+
+
+Changes in [1.0.0](https://github.com/vector-im/riot-web/releases/tag/v1.0.0) (2019-02-14)
+==========================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.0.0-rc.2...v1.0.0)
+
+ * Add snipping lines to welcome page without guests
+   [\#8634](https://github.com/vector-im/riot-web/pull/8634)
+ * Add home page to fix loading tests
+   [\#8625](https://github.com/vector-im/riot-web/pull/8625)
+
+Changes in [1.0.0-rc.2](https://github.com/vector-im/riot-web/releases/tag/v1.0.0-rc.2) (2019-02-14)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v1.0.0-rc.1...v1.0.0-rc.2)
+
+ * Update from Weblate.
+   [\#8615](https://github.com/vector-im/riot-web/pull/8615)
+ * Replace favicon assets to ones with transparent backgrounds
+   [\#8600](https://github.com/vector-im/riot-web/pull/8600)
+ * Refreshed icons
+   [\#8594](https://github.com/vector-im/riot-web/pull/8594)
+ * Fix order of fetch-develop-deps / npm install
+   [\#8566](https://github.com/vector-im/riot-web/pull/8566)
+ * Revive building dark theme
+   [\#8540](https://github.com/vector-im/riot-web/pull/8540)
+ * Update from Weblate.
+   [\#8546](https://github.com/vector-im/riot-web/pull/8546)
+ * Repair app loading tests after welcome page
+   [\#8525](https://github.com/vector-im/riot-web/pull/8525)
+ * Support configurable welcome background and logo
+   [\#8528](https://github.com/vector-im/riot-web/pull/8528)
+ * Update from Weblate.
+   [\#8518](https://github.com/vector-im/riot-web/pull/8518)
+ * Document `embeddedPages` configuration
+   [\#8514](https://github.com/vector-im/riot-web/pull/8514)
+ * README.md : Syntax Coloring
+   [\#8502](https://github.com/vector-im/riot-web/pull/8502)
+
+Changes in [1.0.0-rc.1](https://github.com/vector-im/riot-web/releases/tag/v1.0.0-rc.1) (2019-02-08)
+====================================================================================================
+[Full Changelog](https://github.com/vector-im/riot-web/compare/v0.17.9...v1.0.0-rc.1)
+
+ * Update from Weblate.
+   [\#8475](https://github.com/vector-im/riot-web/pull/8475)
+ * Add configurable welcome page
+   [\#8466](https://github.com/vector-im/riot-web/pull/8466)
+ * fix app tests after force enabling lazy loading + removing feature flag
+   [\#8464](https://github.com/vector-im/riot-web/pull/8464)
+ * Allow Electron to zoom with CommandOrControl+=
+   [\#8381](https://github.com/vector-im/riot-web/pull/8381)
+ * Hide sign in / create account for logged in users
+   [\#8368](https://github.com/vector-im/riot-web/pull/8368)
+ * Fix home page link target
+   [\#8365](https://github.com/vector-im/riot-web/pull/8365)
+ * Add auth background image and update Riot logo
+   [\#8364](https://github.com/vector-im/riot-web/pull/8364)
+ * New homepage
+   [\#8363](https://github.com/vector-im/riot-web/pull/8363)
+ * Spell homeserver correctly
+   [\#8358](https://github.com/vector-im/riot-web/pull/8358)
+ * Merge redesign into develop
+   [\#8321](https://github.com/vector-im/riot-web/pull/8321)
+ * Disable room directory test because it doesn't work
+   [\#8318](https://github.com/vector-im/riot-web/pull/8318)
+ * Tweak auth overflow on Windows and Linux
+   [\#8307](https://github.com/vector-im/riot-web/pull/8307)
+ * Clean up Custom Server Help dialog
+   [\#8296](https://github.com/vector-im/riot-web/pull/8296)
+ * Cache-bust olm.wasm
+   [\#8283](https://github.com/vector-im/riot-web/pull/8283)
+ * Completely disable other themes for now (#8277)
+   [\#8280](https://github.com/vector-im/riot-web/pull/8280)
+ * Remove support for team servers
+   [\#8271](https://github.com/vector-im/riot-web/pull/8271)
+ * Add target="_blank" to footer links
+   [\#8248](https://github.com/vector-im/riot-web/pull/8248)
+ * Fix device names on desktop
+   [\#8241](https://github.com/vector-im/riot-web/pull/8241)
+ * Fix literal &lt/&gt in notifications
+   [\#8238](https://github.com/vector-im/riot-web/pull/8238)
+ * Fix registration nextLink on desktop
+   [\#8239](https://github.com/vector-im/riot-web/pull/8239)
+ * Add returns to fetch-develop-deps
+   [\#8233](https://github.com/vector-im/riot-web/pull/8233)
+ * Update electron builder
+   [\#8231](https://github.com/vector-im/riot-web/pull/8231)
+ * Try fetching more branches for PRs
+   [\#8225](https://github.com/vector-im/riot-web/pull/8225)
+ * Use content hashing for font and image URLs
+   [\#8159](https://github.com/vector-im/riot-web/pull/8159)
+ * Develop->Experimental
+   [\#8156](https://github.com/vector-im/riot-web/pull/8156)
+ * Update from Weblate.
+   [\#8150](https://github.com/vector-im/riot-web/pull/8150)
+ * Correct the copying of e-mail addresses in the electron app
+   [\#8124](https://github.com/vector-im/riot-web/pull/8124)
+ * Start documenting keyboard shortcuts
+   [\#7165](https://github.com/vector-im/riot-web/pull/7165)
+ * Update issue templates
+   [\#7948](https://github.com/vector-im/riot-web/pull/7948)
+ * Added new colour var to all themes
+   [\#7927](https://github.com/vector-im/riot-web/pull/7927)
+ * Redesign: apply changes from dharma theme to status theme
+   [\#7541](https://github.com/vector-im/riot-web/pull/7541)
+ * Redesign: ignore setting and always show dharma theme for now
+   [\#7540](https://github.com/vector-im/riot-web/pull/7540)
+
 Changes in [0.17.9](https://github.com/vector-im/riot-web/releases/tag/v0.17.9) (2019-01-22)
 ============================================================================================
 [Full Changelog](https://github.com/vector-im/riot-web/compare/v0.17.9-rc.1...v0.17.9)

README.md

@@ -1,28 +1,27 @@
 Riot
 ====
 
-Riot (formerly known as Vector) is a Matrix web client built using the Matrix
+Riot (formerly known as Vector) is a Matrix web client built using the [Matrix React SDK](https://github.com/matrix-org/matrix-react-sdk).
-React SDK (https://github.com/matrix-org/matrix-react-sdk).
 
 Getting Started
 ===============
 
-The easiest way to test Riot is to just use the hosted copy at
+The easiest way to test Riot is to just use the hosted copy at https://riot.im/app.
-https://riot.im/app.  The develop branch is continuously deployed by Jenkins at
+The `develop` branch is continuously deployed by Jenkins at https://riot.im/develop
-https://riot.im/develop for those who like living dangerously.
+for those who like living dangerously.
 
 To host your own copy of Riot, the quickest bet is to use a pre-built
 released version of Riot:
 
 1. Download the latest version from https://github.com/vector-im/riot-web/releases
 1. Untar the tarball on your web server
-1. Move (or symlink) the riot-x.x.x directory to an appropriate name
+1. Move (or symlink) the `riot-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 Riot!
 
 Releases are signed by PGP, and can be checked against the public key
-at https://riot.im/packages/keys/riot.asc
+at https://riot.im/packages/keys/riot.asc .
 
 Note that Chrome does not allow microphone or webcam access for sites served
 over http (except localhost), so for working VoIP you will need to serve Riot
@@ -69,16 +68,22 @@ to build.
    is at least v5.x).
 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 the prerequisites: `npm install`.
 1. If you're using the `develop` branch then it is recommended to set up a proper
    development environment ("Setting up a dev environment" below) however one can
    install the develop versions of the dependencies instead:
-   ```
+   ```bash
    scripts/fetch-develop.deps.sh
    ```
+   Note that running `npm install` will undo the symlinks put in place by
+   `scripts/fetch-develop.deps.sh` so you should run `npm install` first, or
+   run `npm link matrix-js-sdk` and `npm link matrix-react-sdk` after running
+   `npm install`.
+
    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 rebuild them:
-   ```
+   ```bash
    cd matrix-js-sdk
    git pull
    npm install # re-run to pull in any new dependencies
@@ -94,18 +99,16 @@ to build.
    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`.
 1. Configure the app by copying `config.sample.json` to `config.json` and
    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.
 
-Note that `npm run dist` is not supported on Windows, so Windows users can run `npm
+Note that `npm run dist` is not supported on Windows, so Windows users can run `npm run build`,
-run build`, which will build all the necessary files into the `webapp`
+which will build all the necessary files into the `webapp` directory. The version of Riot
-directory. The version of Riot will not appear in Settings without
+will not appear in Settings without using the dist script. You can then mount the
-using the dist script. You can then mount the `webapp` directory on your
+`webapp` directory on your webserver to actually serve up the app, which is entirely static content.
-webserver to actually serve up the app, which is entirely static content.
 
 config.json
 ===========
@@ -113,22 +116,34 @@ config.json
 You can configure the app by copying `config.sample.json` to
 `config.json` and customising it:
 
-For a good example, see https://riot.im/develop/config.json
+For a good example, see https://riot.im/develop/config.json.
 
-1. `default_hs_url` is the default homeserver url.
+1. `default_server_name` sets the default server name to use for authentication.
-1. `default_is_url` is the default identity server url (this is the server used
+   This will trigger Riot to ask
+   `https://<server_name>/.well-known/matrix/client` for the homeserver and
+   identity server URLs to use. This is the recommended approach for setting a
+   default server. However, it is also possible to use the following to directly
+   configure each of the URLs:
+   * `default_hs_url` sets the default homeserver URL.
+   * `default_is_url` sets the default identity server URL (this is the server used
       for verifying third party identifiers like email addresses). If this is blank,
       registering with an email address, adding an email address to your account,
       or inviting users via email address will not work.  Matrix identity servers are
       very simple web services which map third party identifiers (currently only email
       addresses) to matrix IDs: see http://matrix.org/docs/spec/identity_service/unstable.html
       for more details.  Currently the only public matrix identity servers are https://matrix.org
-   and https://vector.im.  In future identity servers will be decentralised.
+      and https://vector.im.  In the future, identity servers will be decentralised.
+   * Riot will report an error if you accidentally configure both `default_server_name` _and_ `default_hs_url` since it's unclear which should take priority.
 1. `features`: Lookup of optional features that may be `enable`d, `disable`d, or exposed to the user
    in the `labs` section of settings.  The available optional experimental features vary from
    release to release.
 1. `brand`: String to pass to your homeserver when configuring email notifications, to let the
    homeserver know what email template to use when talking to you.
+1. `branding`: Configures various branding and logo details, such as:
+    1. `welcomeBackgroundUrl`: An image to use as a wallpaper outside the app
+       during authentication flows
+    1. `authHeaderLogoUrl`: An logo image that is shown in the header during
+       authentication flows
 1. `integrations_ui_url`: URL to the web interface for the integrations server. The integrations
    server is not Riot and normally not your homeserver either. The integration server settings
    may be left blank to disable integrations.
@@ -158,6 +173,13 @@ For a good example, see https://riot.im/develop/config.json
     1. `whitelistedISUrls`: a list of IS URLs to not redact from the analytics
     1. `siteId`: The Piwik Site ID to use when sending analytics to the Piwik server configured above
 1. `welcomeUserId`: the user ID of a bot to invite whenever users register that can give them a tour
+1. `embeddedPages`: Configures the pages displayed in portions of Riot that
+   embed static files, such as:
+    1. `welcomeUrl`: Initial content shown on the outside of the app when not
+       logged in. Defaults to `welcome.html` supplied with Riot.
+    1. `homeUrl`: Content shown on the inside of the app when a specific room is
+       not selected. By default, no home page is configured. If one is set, a
+       button to access it will be shown in the top left menu.
 
 
 Note that `index.html` also has an og:image meta tag that is set to an image
@@ -183,15 +205,15 @@ To run as a desktop app:
    `npm run build` instead of `npm run dist` (since we don't need the tarball).
 2. Install electron and run it:
 
-   ```
+   ```bash
    npm install electron
    npm run electron
    ```
 
 To build packages, use electron-builder. This is configured to output:
- * dmg + zip for macOS
+ * `dmg` + `zip` for macOS
- * exe + nupkg for Windows
+ * `exe` + `nupkg` for Windows
- * deb for Linux
+ * `deb` for Linux
 But this can be customised by editing the `build` section of package.json
 as per https://github.com/electron-userland/electron-builder/wiki/Options
 
@@ -199,7 +221,7 @@ See https://github.com/electron-userland/electron-builder/wiki/Multi-Platform-Bu
 for dependencies required for building packages for various platforms.
 
 The only platform that can build packages for all three platforms is macOS:
-```
+```bash
 brew install wine --without-x11
 brew install mono
 brew install gnu-tar
@@ -213,7 +235,7 @@ for 64 bit Linux:
  1. Follow the instructions in 'Building From Source' above
  2. `node_modules/.bin/build -l --x64`
 
-All electron packages go into `electron/dist/`
+All electron packages go into `electron_app/dist/`
 
 Many thanks to @aviraldg for the initial work on the electron integration.
 
@@ -221,7 +243,7 @@ Other options for running as a desktop app:
  * https://github.com/krisak/vector-electron-desktop
  * @asdf:matrix.org points out that you can use nativefier and it just works(tm)
 
-```
+```bash
 sudo npm install nativefier -g
 nativefier https://riot.im/app/
 ```
@@ -229,13 +251,13 @@ nativefier https://riot.im/app/
 Development
 ===========
 
-Before attempting to develop on Riot you **must** read the developer guide
+Before attempting to develop on Riot you **must** read the [developer guide
-for `matrix-react-sdk` at https://github.com/matrix-org/matrix-react-sdk, which
+for `matrix-react-sdk`](https://github.com/matrix-org/matrix-react-sdk), which
 also defines the design, architecture and style for Riot too.
 
-You should also familiarise yourself with the "Here be Dragons" guide to the
+You should also familiarise yourself with the ["Here be Dragons" guide
-tame & not-so-tame dragons (gotchas) which exist in the codebase:
+](https://docs.google.com/document/d/12jYzvkidrp1h7liEuLIe6BMdU0NUjndUYI971O06ooM)
-https://docs.google.com/document/d/12jYzvkidrp1h7liEuLIe6BMdU0NUjndUYI971O06ooM
+to the tame & not-so-tame dragons (gotchas) which exist in the codebase.
 
 The idea of Riot is to be a relatively lightweight "skin" of customisations on
 top of the underlying `matrix-react-sdk`. `matrix-react-sdk` provides both the
@@ -260,31 +282,39 @@ having to manually rebuild each time.
 
 First clone and build `matrix-js-sdk`:
 
-1. `git clone https://github.com/matrix-org/matrix-js-sdk.git`
+``` bash
-1. `pushd matrix-js-sdk`
+git clone https://github.com/matrix-org/matrix-js-sdk.git
-1. `git checkout develop`
+pushd matrix-js-sdk
-1. `npm install`
+git checkout develop
-1. `npm install source-map-loader`  # because webpack is made of fail (https://github.com/webpack/webpack/issues/1472)
+npm install
-1. `popd`
+npm install source-map-loader  # because webpack is made of fail
+# see https://github.com/webpack/webpack/issues/1472
+popd
+```
 
 Then similarly with `matrix-react-sdk`:
 
-1. `git clone https://github.com/matrix-org/matrix-react-sdk.git`
+```bash
-1. `pushd matrix-react-sdk`
+git clone https://github.com/matrix-org/matrix-react-sdk.git
-1. `git checkout develop`
+pushd matrix-react-sdk
-1. `npm link ../matrix-js-sdk`
+git checkout develop
-1. `popd`
+npm link ../matrix-js-sdk
+popd
+```
 
 Finally, build and start Riot itself:
 
-1. `git clone https://github.com/vector-im/riot-web.git`
+```bash
-1. `cd riot-web`
+git clone https://github.com/vector-im/riot-web.git
-1. `git checkout develop`
+cd riot-web
-1. `npm install`
+git checkout develop
-1. `npm link ../matrix-js-sdk`
+npm install
-1. `npm link ../matrix-react-sdk`
+npm link ../matrix-js-sdk
-1. `npm start`
+npm link ../matrix-react-sdk
-1. Wait a few seconds for the initial build to finish; you should see something like:
+npm start
+```
+
+Wait a few seconds for the initial build to finish; you should see something like:
 ```
 Hash: b0af76309dd56d7275c8
 Version: webpack 1.12.14
@@ -299,7 +329,10 @@ Finally, build and start Riot itself:
    Remember, the command will not terminate since it runs the web server
    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 Riot.
+
+Open http://127.0.0.1:8080/ in your browser to see your newly built Riot.
+
+___
 
 When you make changes to `matrix-react-sdk` or `matrix-js-sdk` they should be
 automatically picked up by webpack and built.

config.sample.json

@@ -15,7 +15,6 @@
         "feature_pinning": "labs"
     },
     "default_federate": true,
-    "welcomePageUrl": "home.html",
     "default_theme": "light",
     "roomDirectory": {
         "servers": [

electron_app/package.json

@@ -2,33 +2,19 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "src/electron-main.js",
-  "version": "0.17.9",
+  "version": "1.0.1",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "dependencies": {
     "auto-launch": "^5.0.1",
+    "electron-store": "^2.0.0",
     "electron-window-state": "^4.1.0",
-    "iohook": "^0.2.4",
+    "iohook": "^0.3.1",
     "minimist": "^1.2.0",
     "png-to-ico": "^1.0.2"
   },
-  "iohook": {
-    "targets": [
-      "node-64",
-      "electron-64"
-    ],
-    "platforms": [
-      "win32",
-      "darwin",
-      "linux"
-    ],
-    "arches": [
-      "x64",
-      "ia32"
-    ]
-  },
   "cmake-js": {
     "runtime": "electron",
-    "runtimeVersion": "3.0.5"
+    "runtimeVersion": "4.0.6"
   }
 }

electron_app/src/electron-main.js

@@ -28,6 +28,7 @@ const {app, ipcMain, powerSaveBlocker, BrowserWindow, Menu, autoUpdater, protoco
 const AutoLaunch = require('auto-launch');
 const ioHook = require('iohook');
 const path = require('path');
+const ioHook = require('iohook');
 
 const tray = require('./tray');
 const vectorMenu = require('./vectormenu');
@@ -36,6 +37,7 @@ const updater = require('./updater');
 const { migrateFromOldOrigin } = require('./originMigrator');
 
 const windowStateKeeper = require('electron-window-state');
+const Store = require('electron-store');
 
 // boolean flag set whilst we are doing one-time origin migration
 // We only serve the origin migration script while we're actually
@@ -56,8 +58,19 @@ try {
     // Continue with the defaults (ie. an empty config)
 }
 
+try {
+    // Load local config and use it to override values from the one baked with the build
+    const localConfig = require(path.join(app.getPath('userData'), 'config.json'));
+    vectorConfig = Object.assign(vectorConfig, localConfig);
+} catch (e) {
+    // Could not load local config, this is expected in most cases.
+}
+
+const store = new Store({ name: "electron-config" });
+
 let mainWindow = null;
 global.appQuitting = false;
+global.minimizeToTray = store.get('minimizeToTray', true);
 
 
 // handle uncaught errors otherwise it displays
@@ -137,6 +150,12 @@ ipcMain.on('ipcCall', async function(ev, payload) {
                 launcher.disable();
             }
             break;
+        case 'getMinimizeToTrayEnabled':
+            ret = global.minimizeToTray;
+            break;
+        case 'setMinimizeToTrayEnabled':
+            store.set('minimizeToTray', global.minimizeToTray = args[0]);
+            break;
         case 'getAppVersion':
             ret = app.getVersion();
             break;
@@ -148,6 +167,7 @@ ipcMain.on('ipcCall', async function(ev, payload) {
             } else {
                 mainWindow.focus();
             }
+            break;
         case 'origin_migrate':
             migratingOrigin = true;
             await migrateFromOldOrigin();
@@ -263,10 +283,12 @@ app.on('ready', () => {
             path: absTarget,
         });
     }, (error) => {
-        if (error) console.error('Failed to register protocol')
+        if (error) console.error('Failed to register protocol');
     });
 
-    if (vectorConfig['update_base_url']) {
+    if (argv['no-update']) {
+        console.log('Auto update disabled via command line flag "--no-update"');
+    } else if (vectorConfig['update_base_url']) {
         console.log(`Starting auto update with base URL: ${vectorConfig['update_base_url']}`);
         updater.start(vectorConfig['update_base_url']);
     } else {
@@ -332,7 +354,7 @@ app.on('ready', () => {
         mainWindow = global.mainWindow = null;
     });
     mainWindow.on('close', (e) => {
-        if (!global.appQuitting && (tray.hasTray() || process.platform === 'darwin')) {
+        if (global.minimizeToTray && !global.appQuitting && (tray.hasTray() || process.platform === 'darwin')) {
             // On Mac, closing the window just hides it
             // (this is generally how single-window Mac apps
             // behave, eg. Mail.app)
@@ -476,6 +498,92 @@ app.on('second-instance', (ev, commandLine, workingDirectory) => {
     }
 });
 
+// Counter for keybindings we have registered
+let ioHookTasks = 0;
+
+// Limit for amount of keybindings that can be
+// registered at once.
+const keybindingRegistrationLimit = 1;
+
+// Fires when a global keybinding is being registered
+ipcMain.on('register-keybinding', function(ev, keybinding) {
+    // Prevent registering more than the defined limit
+    if (ioHookTasks >= keybindingRegistrationLimit) {
+        ioHookTasks = keybindingRegistrationLimit;
+        return;
+    }
+
+    // Start listening for global keyboard shortcuts
+    if (ioHookTasks <= 0) {
+        ioHookTasks = 0;
+        ioHook.start();
+    }
+    ioHookTasks++;
+
+    ioHook.registerShortcut(keybinding.code, () => {
+        ev.sender.send('keybinding-pressed', keybinding.name);
+    }, () => {
+        ev.sender.send('keybinding-released', keybinding.name);
+    });
+});
+
+// Fires when a global keybinding is being unregistered
+ipcMain.on('unregister-keybinding', function(ev, keybindingCode) {
+    // Stop listening for global keyboard shortcuts if we're
+    // unregistering the last one
+    if (ioHookTasks <= 1) {
+        ioHook.stop();
+    }
+    ioHookTasks--;
+
+    ioHook.unregisterShortcutByKeys(keybindingCode);
+});
+
+// Tell renderer process what key was pressed
+// iohook has its own encoding for keys, so we can't just use a
+// listener in the renderer process to register iohook shortcuts
+let renderProcessID = null;
+const reportKeyEvent = function(keyEvent) {
+    // "this" is the renderer process because we call this method with .bind()
+    renderProcessID.sender.send('keypress', {
+        keydown: keyEvent.type == 'keydown',
+        keycode: keyEvent.keycode,
+    });
+};
+
+// Fires when listening on all keys
+// !!Security note: Ensure iohook is only allowed to listen to keybindings
+// when the browser window is in focus, else an XSS could lead to keylogging
+// Currently, this is achieved by leveraging browserWindow to act on focus loss
+ipcMain.on('start-listening-keys', function(ev, keybindingCode) {
+    // Start recording keypresses
+    if (ioHookTasks <= 0) {
+        ioHookTasks = 0;
+        ioHook.start();
+    }
+    ioHookTasks++;
+
+    renderProcessID = ev;
+    ioHook.on('keydown', reportKeyEvent);
+    ioHook.on('keyup', reportKeyEvent);
+});
+
+const stopListeningKeys = () => {
+    // Stop recording keypresses
+    ioHook.off('keydown', reportKeyEvent);
+    ioHook.off('keyup', reportKeyEvent);
+};
+
+ipcMain.on('stop-listening-keys', () => {
+    if (ioHookTasks <= 1) {
+        ioHookTasks = 1;
+        ioHook.stop();
+    }
+    ioHookTasks--;
+
+    stopListeningKeys();
+});
+
 // Set the App User Model ID to match what the squirrel
 // installer uses for the shortcut icon.
 // This makes notifications work on windows 8.1 (and is

electron_app/src/vectormenu.js

@@ -37,7 +37,7 @@ const template = [
         submenu: [
             { type: 'separator' },
             { role: 'resetzoom' },
-            { role: 'zoomin' },
+            { role: 'zoomin', accelerator: 'CommandOrControl+=' },
             { role: 'zoomout' },
             { type: 'separator' },
             { role: 'togglefullscreen' },

karma.conf.js

@@ -78,7 +78,7 @@ module.exports = function (config) {
                 watched: false, included: false, served: true, nocache: false,
             },
             {
-                pattern: 'res/themes/**',
+                pattern: 'res/**',
                 watched: false, included: false, served: true, nocache: false,
             },
         ],
@@ -87,6 +87,8 @@ module.exports = function (config) {
             // redirect img links to the karma server. See above.
             "/img/": "/base/node_modules/matrix-react-sdk/res/img/",
             "/themes/": "/base/res/themes/",
+            "/welcome.html": "/base/res/welcome.html",
+            "/welcome/": "/base/res/welcome/",
         },
 
         // preprocess matching files before serving them to the browser

package.json

@@ -2,7 +2,7 @@
   "name": "riot-web",
   "productName": "Riot",
   "main": "electron_app/src/electron-main.js",
-  "version": "0.17.9",
+  "version": "1.0.1",
   "description": "A feature-rich client for Matrix.org",
   "author": "New Vector Ltd.",
   "repository": {
@@ -42,7 +42,7 @@
     "build:dev": "npm run build:js-sdk && npm run build:react-sdk && npm run reskindex && npm run build:res && npm run build:bundle:dev",
     "dist": "scripts/package.sh",
     "install:electron": "install-app-deps",
-    "electron": "npm run install:electron && electron .",
+    "electron": "npm run install:electron && npx electron .",
     "start:res": "node scripts/copy-res.js -w",
     "start:js": "webpack-dev-server --host=0.0.0.0 --output-filename=bundles/_dev_/[name].js --output-chunk-filename=bundles/_dev_/[name].js -w --progress --mode development",
     "start:js:prod": "cross-env NODE_ENV=production webpack-dev-server -w --progress",
@@ -70,8 +70,8 @@
     "gemini-scrollbar": "github:matrix-org/gemini-scrollbar#b302279",
     "gfm.css": "^1.1.2",
     "highlight.js": "^9.13.1",
-    "matrix-js-sdk": "0.14.3",
+    "matrix-js-sdk": "1.0.0",
-    "matrix-react-sdk": "0.14.8",
+    "matrix-react-sdk": "1.0.1",
     "modernizr": "^3.6.0",
     "prop-types": "^15.6.2",
     "react": "^15.6.0",
@@ -102,7 +102,7 @@
     "cross-env": "^4.0.0",
     "css-loader": "^2.1.0",
     "electron-builder": "^20.38.5",
-    "electron-builder-squirrel-windows": "^11.6.1",
+    "electron-builder-squirrel-windows": "^20.38.5",
     "electron-devtools-installer": "^2.2.4",
     "emojione": "^2.2.7",
     "eslint": "^5.8.0",
@@ -115,7 +115,7 @@
     "fs-extra": "^0.30.0",
     "html-webpack-plugin": "^3.2.0",
     "json-loader": "^0.5.3",
-    "karma": "^3.1.1",
+    "karma": "^3.1.2",
     "karma-chrome-launcher": "^0.2.3",
     "karma-cli": "^1.0.1",
     "karma-junit-reporter": "^2.0.0",
@@ -125,6 +125,7 @@
     "karma-spec-reporter": "0.0.31",
     "karma-summary-reporter": "^1.5.1",
     "karma-webpack": "4.0.0-beta.0",
+    "loader-utils": "^1.2.3",
     "matrix-mock-request": "^1.2.2",
     "matrix-react-test-utils": "^0.2.0",
     "minimist": "^1.2.0",
@@ -151,7 +152,7 @@
   },
   "build": {
     "appId": "im.riot.app",
-    "electronVersion": "4.0.1",
+    "electronVersion": "4.0.6",
     "files": [
       "node_modules/**",
       "src/**",

res/home-status.html

@@ -1,192 +0,0 @@
-<style type="text/css">
-
-/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
- * voodoo where we have to set display: none by default
- */
-
-.mx_HomePage_container {
-    text-align: center;
-    display: block ! important;
-    width: 690px;
-    margin: 20px;
-}
-
-.mx_HomePage_header {
-    margin-top: 37px;
-    margin-left: 10px;
-    width: 670px;
-    box-sizing: border-box;
-    font-size: 18px;
-    background-color: #fff;
-    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
-    border-radius: 5px;
-    padding: 20px 80px 20px 80px;
-    align-items: center;
-}
-
-.mx_HomePage_header h1 {
-    font-size: 29px;
-    margin-bottom: 10px;
-}
-
-.mx_HomePage_intro h2 {
-    margin-top: 32px;
-    font-size: 25px;
-    color: #49555F;
-}
-
-.mx_HomePage_intro {
-    margin: auto;
-    width: 600px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-    font-size: 18px;
-}
-
-.mx_HomePage_coc {
-    font-size: 16px;
-}
-
-.mx_HomePage_coc a {
-    color: #4360DF;
-}
-
-.mx_HomePage_room, .mx_HomePage_telegram {
-    float: left;
-    background-color: #fff;
-    box-shadow: 0px 2px 10px 0px rgba(48,55,81,0.05);
-    border-radius: 5px;
-    margin: 10px;
-    width: 210px;
-    height: 250px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
-
-.mx_HomePage_telegram {
-    background-color: transparent;
-    border: 1px solid rgba(113, 129, 142, 0.2);
-    box-shadow: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-direction: column;
-    font-size: 16px;
-    line-height: 25px;
-    box-sizing: border-box;
-}
-
-.mx_HomePage_telegram a {
-    text-transform: uppercase;
-    color: #4360DF;
-    font-size: 13px;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    opacity: 1.0;
-    transition: opacity .2s ease;
-}
-
-.mx_HomePage_telegram a:hover {
-    opacity: 0.5;
-}
-
-.mx_HomePage_room .mx_HomePage_icon {
-    margin-top: 24px;
-    margin-bottom: 16px;
-    width: 50px;
-    height: 50px;
-}
-
-.mx_HomePage_room .mx_HomePage_name {
-    display: block;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    font-size: 15px;
-    color: #49555F;
-    line-height: 25px;
-    margin: 0px 12px 0px 12px;
-}
-
-.mx_HomePage_room .mx_HomePage_desc {
-    flex: 1;
-    display: block;
-    margin: 0px 12px 0px 12px;
-    font-size: 14px;
-    line-height: 20px;
-}
-
-.mx_HomePage_button {
-    align-self: normal;
-    margin: 12px;
-    border-radius: 8px;
-    border: 1px solid rgba(199, 206, 209, 0.12);
-    background-color: #6CC1F6;
-    font-size: 13px;
-    font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: #fff ! important;
-    cursor: pointer;
-    outline: none;
-    padding: 14px;
-    box-sizing: border-box;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-}
-
-</style>
-
-<div class="mx_HomePage_container">
-    <div class="mx_HomePage_header">
-        <div>
-            <h1>Welcome to Status Community Chat, powered by Riot.</h1>
-            <p>For contributors, developers and Ethereum-enthusiasts who care about the movement for decentralization.</p>
-        </div>
-    </div>
-
-    <div class="mx_HomePage_intro">
-        <h2>Our rooms</h2>
-        <p>Please abide by the channels discussion categories and remain on topic to the specific category details listed.</p>
-        <p class="mx_HomePage_coc">Before posting please refer to our <a href="https://wiki.status.im/Code_of_conduct">Code of Conduct</a></p>
-    </div>
-
-
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/a.png">
-        <span class="mx_HomePage_name">#announcements</span>
-        <span class="mx_HomePage_desc">Company wide announcements.</span>
-        <a class="mx_HomePage_button" href="#/room/#announcements:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/i.png">
-        <span class="mx_HomePage_name">#introductions</span>
-        <span class="mx_HomePage_desc">Newcomer introductions.</span>
-        <a class="mx_HomePage_button" href="#/room/#introductions:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/g.png">
-        <span class="mx_HomePage_name">#general</span>
-        <span class="mx_HomePage_desc">General discussions of Status.</span>
-        <a class="mx_HomePage_button" href="#/room/#general:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/d.png">
-        <span class="mx_HomePage_name">#dev-status</span>
-        <span class="mx_HomePage_desc">Contributing to our codebase? Building a DApp or a chatbot? We're here to help.</span>
-        <a class="mx_HomePage_button" href="#/room/#dev-status:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_room">
-        <img class="mx_HomePage_icon" src="themes/status/img/n.png">
-        <span class="mx_HomePage_name">#news-articles</span>
-        <span class="mx_HomePage_desc">Share news, articles related to Ethereum or projects you're excited about</span>
-        <a class="mx_HomePage_button" href="#/room/#news-articles:status.im">Join</a>
-    </div>
-    <div class="mx_HomePage_telegram">
-        <p>
-            Interested in market and cryptocurrency type discussions?
-        </p>
-        <a href="https://t.me/StatusNetworkChat">Join Telegram</a>
-    </div>
-</div>

res/home.html

@@ -1,200 +0,0 @@
-<style type="text/css">
-
-/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
- * voodoo where we have to set display: none by default
- */
-
-h1::after {
-    content: "!";
-}
-
-.mx_HomePage_body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-}
-
-.mx_Parent {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-orient: vertical;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  text-align: center;
-  margin-bottom: 50px;
-}
-
-.mx_Well {
-  display: block;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 10px;
-  background-color: #F2F5F8;
-}
-
-.mx_ButtonParent {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  padding: 10px 20px;
-  -webkit-box-orient: horizontal;
-  -webkit-box-direction: normal;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 4px;
-  width: 150px;
-  background-repeat: no-repeat;
-  background-position: 10px center;
-  text-decoration: none;
-  color: #2e2f32 !important;
-}
-
-.mx_ButtonRow {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 480px;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 40px;
-  box-sizing: border-box;
-  margin: 28px 0;
-}
-
-.mx_ButtonRow_guest {
-    display: none;
-}
-
-/* mx_HomePage_guest is set on the `HomePage` component for guest users */
-.mx_HomePage_guest .mx_ButtonRow_guest {
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: -ms-flexbox;
-    display: flex;
-}
-
-.mx_buttonheadline {
-  margin-bottom: 14px;
-}
-
-.mx_buttonlabel {
-  margin-left: 20px;
-}
-
-.mx_buttonwrappertext {
-  font-size: 13px;
-  margin-bottom: 10px;
-}
-
-.mx_Header2 {
-  font-size: 32px;
-  font-weight: 600;
-  margin-top: 40px;
-}
-
-.mx_Header22 {
-  font-size: 14px;
-  font-weight: 200;
-  margin-bottom: 40px;
-}
-
-.mx_ButtonSignIn {
-  background-color: #368BD6;
-  color: white !important;
-}
-
-.mx_ButtonCreateAccount {
-  background-color: #03B381;
-  color: white !important;
-}
-
-.mx_secondarybutton {
-  background-color: #FFFFFF;
-  color: #2E2F32;
-}
-
-.mx_Button_iconSignIn {
-    background-image: url('home/images/icon-sign-in.svg');
-}
-.mx_Button_iconCreateAccount {
-    background-image: url('home/images/icon-create-account.svg');
-}
-.mx_Button_iconHelp {
-    background-image: url('home/images/icon-help.svg');
-}
-.mx_Button_iconRoomDirectory {
-    background-image: url('home/images/icon-room-directory.svg');
-}
-
-</style>
-
-<div class="mx_Parent">
-    <a href="https://riot.im" target="_blank" rel="noopener">
-        <img src="home/images/logo.svg" alt="" class="mx_logo"/>
-    </a>
-    <h1 class="mx_Header2">_t("Welcome to Riot.im")</h1>
-    <h4 class="mx_Header22">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
-    <div class="mx_Well">
-        <div class="mx_ButtonRow mx_ButtonRow_guest">
-            <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
-                <div class="mx_buttonlabel">_t("Sign In")</div>
-            </a>
-            <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
-                <div class="mx_buttonlabel">_t("Create Account")</div>
-            </a>
-        </div>
-        <div class="mx_ButtonRow">
-            <div class="mx_buttonwrapper">
-                <div class="mx_buttonwrappertext">_t("Need help?")</div>
-                <a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_secondarybutton mx_Button_iconHelp">
-                    <div class="mx_buttonlabel">_t("Chat with Riot Bot")</div>
-                </a>
-            </div>
-            <div class="mx_buttonwrapper">
-                <div class="mx_buttonwrappertext">_t("Explore rooms")</div>
-                <a href="#/directory" class="mx_ButtonParent mx_secondarybutton mx_Button_iconRoomDirectory">
-                    <div class="mx_buttonlabel">_t("Room Directory")</div>
-                </a>
-            </div>
-        </div>
-    </div>
-</div>

res/home/images/icons-directory.svg

@@ -1,24 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="25px" height="25px" viewBox="0 0 25 25" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
-    <title>icons_directory</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Left-panel" transform="translate(-83.000000, -726.000000)">
-            <g id="icons_directory">
-                <g transform="translate(83.000000, 726.000000)">
-                    <path d="M12.5,25 C19.4035594,25 25,19.4035594 25,12.5 C25,5.59644063 19.4035594,0 12.5,0 C5.59644063,0 0,5.59644063 0,12.5 C0,19.4035594 5.59644063,25 12.5,25 Z" id="Oval-1-Copy-7" fill="#76CFA6"></path>
-                    <g id="Lines" transform="translate(6.000000, 7.000000)" stroke="#FFFFFF" stroke-linecap="round">
-                        <path d="M4,5.5 L9,5.5" id="Line"></path>
-                        <path d="M4,1.5 L13,1.5" id="Line-Copy-4"></path>
-                        <path d="M0,1.5 L2,1.5" id="Line" opacity="0.6"></path>
-                        <path d="M0,5.5 L2,5.5" id="Line" opacity="0.6"></path>
-                        <path d="M4,9.5 L11,9.5" id="Line-Copy-6"></path>
-                        <path d="M0,9.5 L2,9.5" id="Line-Copy-3" opacity="0.6"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

res/themes/status/css/_StatusLogin.scss

@@ -1,232 +0,0 @@
-/*
-Copyright 2017 New Vector 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.
-*/
-
-// overrides for mx_Login* specific to Status.
-// Ideally this would be all Status prefixes for a Status specific version of the component
-// but given we're not doing Status as a dedicated 'skin' yet...
-
-.mx_StatusLogin {
-
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    overflow: auto;
-
-    .mx_StatusLogin_brand {
-        position: absolute;
-        top: 30px;
-        left: 30px;
-    }
-
-    .mx_StatusLogin_content {
-        margin: auto;
-    }
-
-    .mx_StatusLogin_header {
-        text-align: center;
-        margin-top: 70px;
-        margin-bottom: 50px;
-    }
-
-    .mx_StatusLogin_header h1 {
-        font-size: 29px;
-        margin-bottom: 3px;
-    }
-
-    .mx_StatusLogin_subtitle {
-        font-size: 18px;
-    }
-
-    .mx_StatusLogin_subtitle a {
-        color: $riot-link-color;
-    }
-
-    .mx_StatusLogin_footer {
-        margin-top: 30px;
-        margin-bottom: 30px;
-        text-align: center;
-        font-size: 16px;
-        color: $footer-color;
-    }
-
-    .mx_StatusLogin_footer p {
-        margin-top: 0.5em;
-        margin-bottom: 0.5em;
-    }
-
-    .mx_StatusLogin_footer_cta {
-        color: $callout-color;
-        font-family: $header-font-family;
-        letter-spacing: 1px;
-        font-size: 13px;
-        text-transform: uppercase;
-        opacity: 1.0;
-        transition: opacity .2s ease;        
-    }
-
-    .mx_StatusLogin_footer_cta:hover {
-        opacity: 0.5;
-        text-decoration: none;
-    }
-
-    // overrides of .mx_Login
-
-    .mx_AuthPage_modal {
-        width: 330px;
-        min-height: initial;
-        padding-top: 40px;
-        padding-bottom: 20px;
-        padding-left: 10px;
-        padding-right: 10px;
-        border-radius: 8px;
-        color: $form-fg-color;
-        font-size: 16px;
-        line-height: 25px;
-        background-color: $form-bg-color;
-        background-image: url("$(status)/img/dot.svg");
-        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
-        position: relative;
-        text-align: center;
-    }
-
-    .mx_AuthHeader_logo {
-        background-color: #fff;
-        width: 74px;
-        height: 74px;
-        border-radius: 37px;
-        box-shadow: 0px 5px 16px 0px rgba(0,0,0,0.2);
-        position: absolute;
-        top: -36px;
-        left: 50%;
-        margin-left: -36px;
-    }
-
-    .mx_AuthHeader_logo img {
-        width: 36px;
-        height: 36px;
-        padding: 19px;
-    }
-
-    .mx_AuthPage_modal h2 {
-        text-align: center;
-        color: $form-fg-color;
-        font-size: 25px;
-        margin-bottom: 24px;
-    }
-
-    .mx_Login_field {
-        width: 260px;
-        height: 27px;
-        padding: 8px 20px 10px 20px;
-        border-radius: 10px;
-        text-align: left;
-        border: 1px solid transparent;
-        background-color: $form-field-bg-color;
-        color: $form-field-fg-color;
-        font-weight: 300;
-        font-size: 15px;
-        margin-bottom: 14px;
-        transition: background-color .2s ease;
-    }
-
-    .mx_Login_field:focus {
-        border: 1px solid transparent;
-        background-color: $form-field-bg-hover-color;
-    }
-
-    .mx_Login_field::-webkit-input-placeholder {
-        font-family: $font-family;
-        color: $form-field-fg-color;
-        opacity: 0.6;
-    }
-
-    .mx_Login_field::-moz-placeholder {
-        font-family: $font-family;
-        color: $form-field-fg-color;
-        opacity: 0.6;        
-    }
-
-    .mx_Login_field_disabled {
-        opacity: 0.3;
-    }
-
-    .mx_Login_prompt {
-        font-size: 16px;
-    }
-
-    .mx_Login_submit {
-        min-width: 200px;
-        width: auto;
-        margin-top: 13px;
-        margin-bottom: 10px;
-    }
-
-    .mx_Login_submit:disabled {
-        opacity: 0.3;
-    }
-
-    .mx_Login_create {
-        margin-top: 10px;
-        display: block;
-        text-align: center;
-        width: 100%;
-        font-size: 15px;
-        opacity: 1.0;
-    }
-
-    .mx_Login_create:link,
-    .mx_Login_create:hover,
-    .mx_Login_create:visited
-    {
-        color: $form-fg-color;
-    }
-
-    .mx_Login_forgot {
-        display: block;
-        font-size: 15px;
-    }
-
-    .mx_Login_forgot:link,
-    .mx_Login_forgot:hover,
-    .mx_Login_forgot:visited
-    {
-        color: $form-fg-color;
-    }
-
-    .mx_Login_error {
-        color: $warning-color;
-        font-size: 18px;
-        width: 300px;
-        height: 44px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: auto;
-        text-align: center;
-        margin-top: 12px;
-        margin-bottom: 16px;
-    }
-
-    .mx_Login_smallError {
-        font-size: 13px;
-        line-height: initial;
-    }
-
-}

res/themes/status/css/_fonts.scss

@@ -1,15 +0,0 @@
-@font-face {
-  font-family:PostGrotesk-Medium;
-  src:url('https://status.im/fonts/PostGrotesk-Medium.eot');
-  src:url('https://status.im/fonts/PostGrotesk-Medium.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Medium.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Medium.svg#PostGrotesk-Medium') format("svg");
-  font-weight: 400;
-  font-style: normal;
-}
-
-@font-face {
-  font-family:PostGrotesk-Book;
-  src:url('https://status.im/fonts/PostGrotesk-Book.eot');
-  src:url('https://status.im/fonts/PostGrotesk-Book.eot?#iefix') format("embedded-opentype"),url('https://status.im/fonts/PostGrotesk-Book.woff') format("woff"),url('https://status.im/fonts/PostGrotesk-Book.svg#PostGrotesk-Book') format("svg");
-  font-weight: 400;
-  font-style: normal;
-}

res/themes/status/css/_paths.scss

@@ -1,5 +0,0 @@
-// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
-$res: ../../../../node_modules/matrix-react-sdk/res;
-
-// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
-$status: ..;

res/themes/status/css/_status.scss

@@ -1,292 +0,0 @@
-// We deliberately prioritise Arial over Helvetica here due to diacritic problems (see _base.scss)
-// N.B. that the status.im website uses:
-// font-family:PostGrotesk-Book,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
-// ...but can't be bothered to work out how the apple fonts & segoe interact, so keepingn it simple for now.
-
-$font-family: PostGrotesk-Book, Arial, Helvetica, Sans-Serif;
-
-// typical text (dark-on-white in light skin)
-$primary-fg-color: #70808D;
-$primary-bg-color: #EEF2F5;
-
-// ***** Start of Status theme specifics ******
-$header-color: #49555F;
-$header-font-family: PostGrotesk-Medium, Arial, Helvetica, Sans-Serif;
-
-$footer-color: #8D99A4;
-
-$riot-link-color: #A26988;
-
-a {
-    text-decoration: none;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-h1,h2,h3,h4,h5 {
-    color: $header-color;
-    font-family: $header-font-family;
-    font-weight: 400 ! important;
-}
-
-$callout-color: #4360DF; // or #4957b8 from status.im homepage
-
-$form-bg-color: $callout-color;
-$form-fg-color: #ffffff;
-
-$form-field-bg-color: rgba(244, 242, 247, 0.12);
-$form-field-bg-hover-color: rgba(255, 255, 255, 0.2);
-$form-field-fg-color: #ffffff;
-
-// ***** End of Status theme specifics ******
-
-
-// used for dialog box text
-$light-fg-color: #747474;
-
-// used for focusing form controls
-$focus-bg-color: #dddddd;
-
-// button UI (white-on-green in light skin)
-$accent-fg-color: #ffffff;
-$accent-color: #6CC1F6;
-$accent-color-alt: $accent-color;
-$accent-color-50pct: #6CC1F67F;
-$accent-hover-color: #84cfff;
-
-$selection-fg-color: $primary-bg-color;
-
-$focus-brightness: 125%;
-
-// red warning colour
-$warning-color: #F69E98;
-$warning-bg-color: #DF2A8B;
-$info-bg-color: #2A9EDF;
-$mention-user-pill-bg-color: #ff0064;
-$other-user-pill-bg-color: rgba(0, 0, 0, 0.1);
-
-$group-alert-color: #774f7e;
-
-$preview-bar-bg-color: #f7f7f7;
-
-// left-panel style muted accent color
-$secondary-accent-color: #586C7B;
-$tertiary-accent-color: #DBEBF6;
-
-// stop the tinter trying to change the secondary accent color
-// by overriding the key to something untintable
-// XXX: this is a bit of a hack.
-#mx_theme_secondaryAccentColor {
-    color: #c0ffee ! important;
-}
-
-#mx_theme_tertiaryAccentColor {
-    color: #c0ffee ! important;
-}
-
-// used by RoomDirectory permissions
-$plinth-bg-color: $secondary-accent-color;
-
-// used by RoomDropTarget
-$droptarget-bg-color: rgba(255,255,255,0.5);
-
-// used by AddressSelector
-$selected-color: #eaf5f0;
-
-// selected for hoverover & selected event tiles
-$event-selected-color: #f7f7f7;
-
-// used for the hairline dividers in RoomView
-$primary-hairline-color: #e5e5e5;
-
-// used for the border of input text fields
-$input-border-color: #c9cfd4;
-$input-darker-bg-color: #c1c9d6;
-$input-darker-fg-color: #9fa9ba;
-
-$button-bg-color: #7ac9a1;
-$button-fg-color: white;
-// apart from login forms, which have stronger border
-$strong-input-border-color: #c7c7c7;
-
-// used for UserSettings EditableText
-$input-underline-color: rgba(151, 151, 151, 0.5);
-$input-fg-color: rgba(74, 74, 74, 0.9);
-
-// context menus
-$menu-border-color: rgba(187, 187, 187, 0.5);
-$menu-bg-color: #f6f6f6;
-$menu-selected-color: #f5f8fa;
-
-$avatar-initial-color: #ffffff;
-$avatar-bg-color: transparent;
-
-$h3-color: #3d3b39;
-
-$dialog-background-bg-color: #e9e9e9;
-$lightbox-background-bg-color: #000;
-
-$greyed-fg-color: #888;
-
-$neutral-badge-color: #dbdbdb;
-
-$preview-widget-bar-color: #ddd;
-$preview-widget-fg-color: $greyed-fg-color;
-
-$blockquote-bar-color: #ddd;
-$blockquote-fg-color: #777;
-
-$settings-grey-fg-color: #a2a2a2;
-
-$voip-decline-color: #f48080;
-$voip-accept-color: #80f480;
-
-$rte-bg-color: #e9e9e9;
-$rte-code-bg-color: rgba(0, 0, 0, 0.04);
-$rte-room-pill-color: #aaa;
-
-// ********************
-
-$roomtile-name-color: #ffffff;
-$roomtile-selected-bg-color: #465561;
-$roomtile-focused-bg-color: #6d8597;
-
-$username-variant1-color: #1e7ddc;
-$username-variant2-color: #a756a8;
-$username-variant3-color: #7ac9a1;
-$username-variant4-color: #f2809d;
-$username-variant5-color: #ffc666;
-$username-variant6-color: #76ddd7;
-$username-variant7-color: #45529b;
-$username-variant8-color: #bfd251;
-
-$roomsublist-background: rgba(0, 0, 0, 0.2);
-$roomsublist-label-fg-color: #ffffff;
-$roomsublist-label-bg-color: $secondary-accent-color;
-$roomsublist-chevron-color: #ffffff;
-
-$panel-divider-color: rgba(0, 0, 0, 0.2);
-
-// ********************
-
-$widget-menu-bar-bg-color: #f7f7f7;
-
-// ********************
-
-// event tile lifecycle
-$event-encrypting-color: #abddbc;
-$event-sending-color: #ddd;
-$event-notsent-color: #f44;
-
-// event redaction
-$event-redacted-fg-color: #e2e2e2;
-$event-redacted-border-color: #cccccc;
-
-// event timestamp
-$event-timestamp-color: #acacac;
-
-$edit-button-url: "$(res)/img/icon_context_message.svg";
-$copy-button-url: "$(res)/img/icon_copy_message.svg";
-
-// e2e
-$e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
-$e2e-unverified-color: #e8bf37;
-$e2e-warning-color: #ba6363;
-
-/*** ImageView ***/
-$lightbox-bg-color: #454545;
-$lightbox-fg-color: #ffffff;
-$lightbox-border-color: #ffffff;
-
-// unused?
-$progressbar-color: #000;
-
-@define-mixin mx_DialogButton {
-    /* align images in buttons (eg spinners) */
-    vertical-align: middle;
-    border-radius: 8px;
-    border: 1px solid rgba(199, 206, 209, 0.12);
-    background-color: $accent-color;
-    font-size: 13px;
-    font-family: $header-font-family;
-    text-transform: uppercase;
-    letter-spacing: 1px;
-    color: $accent-fg-color;
-    cursor: pointer;
-    outline: none;
-    padding: 14px;
-    box-sizing: border-box;
-    padding-left: 1.5em;
-    padding-right: 1.5em;
-    display: inline-block;
-    transition: background-color .2s ease;
-}
-
-@define-mixin mx_DialogButton_hover {
-    background-color: $accent-hover-color;
-}
-
-@define-mixin mx_DialogButton_small {
-    @mixin mx_DialogButton;
-    height: auto;
-    padding-top: 7px;
-    padding-bottom: 7px;
-    padding-left: 1em;
-    padding-right: 1em;
-}
-
-.mx_RoomSubList_label {
-    font-size: 13px;
-    font-family: $header-font-family;
-    letter-spacing: 1px;
-}
-
-// FIXME: all these ! importants are horrid - we should instead go and define
-// variables or something.
-.mx_SearchBox_search {
-    color: #fff ! important;
-}
-
-.mx_SearchBox_search::-webkit-input-placeholder  {
-    color: rgba(255, 255, 255, 0.6) ! important;
-}
-
-.mx_SearchBox_search::-moz-placeholder  {
-    color: rgba(255, 255, 255, 0.6) ! important;
-}
-
-.mx_RoomList_emptySubListTip,
-.mx_RoomDropTarget {
-    font-size: 14px ! important;
-    border: 1.5px dashed rgba(0,0,0,0.2) ! important;
-    color: #fff ! important;
-    background-color: transparent ! important;
-    border-radius: 6px ! important;
-    margin-left: 6px ! important;
-    margin-right: 6px ! important;
-    margin-top: 8px ! important;
-    margin-bottom: 7px ! important;
-    padding: 8px ! important;
-}
-
-.mx_RoomDirectory_perm {
-    font-family: $header-font-family ! important;
-    background-color: #fff ! important;
-}
-
-.mx_RoomTile_badge,
-.mx_RoomSubList_badge {
-    height: 12px ! important;
-    padding-top: 1px ! important;
-    padding-bottom: 1px ! important;
-}
-
-.mx_RoomSubList_chevron {
-    top: 8px ! important;
-}
-
-.mx_MemberInfo .mx_RoomTile_name {
-    color: $primary-fg-color ! important;
-}

res/themes/status/css/status.scss

@@ -1,6 +0,0 @@
-@import "_paths.scss";
-@import "_fonts.scss";
-@import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
-@import "_status.scss";
-@import "../../../../node_modules/matrix-react-sdk/res/css/_components.scss";
-@import "_StatusLogin.scss";

res/themes/status/fonts/README

@@ -1 +0,0 @@
-We link out to status.im for fonts, although ideally we'd put them here.

res/themes/status/img/dot.svg

@@ -1 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Artboard</title><circle cx="10" cy="10" r="1" fill="#FFF" fill-rule="evenodd" opacity=".11"/></svg>

res/welcome.html

@@ -0,0 +1,190 @@
+<style type="text/css">
+
+/* we deliberately inline style here to avoid flash-of-CSS problems, and to avoid
+ * voodoo where we have to set display: none by default
+ */
+
+h1::after {
+    content: "!";
+}
+
+.mx_Parent {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
+    -ms-flex-direction: column;
+    flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    text-align: center;
+    padding: 25px 35px;
+    color: #2e2f32;
+}
+
+.mx_Logo {
+    height: 54px;
+    margin-top: 2px;
+}
+
+.mx_ButtonGroup {
+    margin-top: 10px;
+}
+
+.mx_ButtonRow {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-justify-content: space-around;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    margin: 12px 0 0;
+}
+
+.mx_ButtonRow > * {
+    margin: 0 10px;
+}
+
+.mx_ButtonRow > *:first-child {
+    margin-left: 0;
+}
+
+.mx_ButtonRow > *:last-child {
+    margin-right: 0;
+}
+
+.mx_ButtonParent {
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: -ms-flexbox;
+    display: flex;
+    padding: 10px 20px;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
+    -ms-flex-direction: row;
+    flex-direction: row;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border-radius: 4px;
+    width: 150px;
+    background-repeat: no-repeat;
+    background-position: 10px center;
+    text-decoration: none;
+    color: #2e2f32 !important;
+}
+
+.mx_ButtonHeadline {
+    margin-bottom: 14px;
+}
+
+.mx_ButtonLabel {
+    margin-left: 20px;
+}
+
+.mx_ButtonWrapperText {
+    font-size: 13px;
+    margin-bottom: 10px;
+}
+
+.mx_Header_title {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 20px 0 0;
+}
+
+.mx_Header_subtitle {
+    font-size: 12px;
+    font-weight: normal;
+    margin: 8px 0 0;
+}
+
+.mx_ButtonSignIn {
+    background-color: #368BD6;
+    color: white !important;
+}
+
+.mx_ButtonCreateAccount {
+    background-color: #03B381;
+    color: white !important;
+}
+
+.mx_SecondaryButton {
+    background-color: #FFFFFF;
+    color: #2E2F32;
+}
+
+.mx_Button_iconSignIn {
+    background-image: url('welcome/images/icon-sign-in.svg');
+}
+.mx_Button_iconCreateAccount {
+    background-image: url('welcome/images/icon-create-account.svg');
+}
+.mx_Button_iconHelp {
+    background-image: url('welcome/images/icon-help.svg');
+}
+.mx_Button_iconRoomDirectory {
+    background-image: url('welcome/images/icon-room-directory.svg');
+}
+
+</style>
+
+<div class="mx_Parent">
+    <a href="https://riot.im" target="_blank" rel="noopener">
+        <img src="welcome/images/logo.svg" alt="" class="mx_Logo"/>
+    </a>
+    <h1 class="mx_Header_title">_t("Welcome to Riot.im")</h1>
+    <h4 class="mx_Header_subtitle">_t("Decentralised, encrypted chat &amp; collaboration powered by [matrix]")</h4>
+    <div class="mx_ButtonGroup">
+        <div class="mx_ButtonRow">
+            <a href="#/login" class="mx_ButtonParent mx_ButtonSignIn mx_Button_iconSignIn">
+                <div class="mx_ButtonLabel">_t("Sign In")</div>
+            </a>
+            <a href="#/register" class="mx_ButtonParent mx_ButtonCreateAccount mx_Button_iconCreateAccount">
+                <div class="mx_ButtonLabel">_t("Create Account")</div>
+            </a>
+        </div>
+        <!-- The comments below are meant to be used by Ansible as a quick way
+             to strip out the marked content when desired.
+             See https://github.com/vector-im/riot-web/issues/8622.
+             TODO: Convert to config option if possible. -->
+        <!-- BEGIN Ansible: Remove these lines when guest access is disabled -->
+        <div class="mx_ButtonRow">
+            <div>
+                <div class="mx_ButtonWrapperText">_t("Need help?")</div>
+                <a href="#/user/@riot-bot:matrix.org?action=chat" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconHelp">
+                    <div class="mx_ButtonLabel">_t("Chat with Riot Bot")</div>
+                </a>
+            </div>
+            <div>
+                <div class="mx_ButtonWrapperText">_t("Explore rooms")</div>
+                <a href="#/directory" class="mx_ButtonParent mx_SecondaryButton mx_Button_iconRoomDirectory">
+                    <div class="mx_ButtonLabel">_t("Room Directory")</div>
+                </a>
+            </div>
+        </div>
+        <!-- END Ansible: Remove these lines when guest access is disabled -->
+    </div>
+</div>

scripts/cleanup.sh

@@ -0,0 +1,19 @@
+#!/bin/sh
+#
+# script to clean up the deployments made by redeploy.py for vectorwebdev and vectorwebexp
+set -e
+
+# currently live deployment (full path)
+live=`dirname $(readlink -f "$HOME/live")`
+
+# currently live bundle (just the name of the bundle)
+live_bundle=`grep 'script src="bundles' live/index.html | sed -e 's#.*bundles/##' -e 's#/.*##'`
+
+# clean up 'extracted': find things which are older than 7 days, exclude the
+# current live one, and remove
+find $HOME/extracted -mindepth 1 -maxdepth 1 -type d -ctime +7 \
+     \! -path "$live" -exec rm -r {} \;
+
+# clean up 'bundles': ditto
+find $HOME/bundles -mindepth 1 -maxdepth 1 -type d -ctime +7 \
+     \! -name "$live_bundle" -exec rm -r {} \;

scripts/copy-res.js

@@ -1,5 +1,7 @@
 #!/usr/bin/env node
 
+const loaderUtils = require("loader-utils");
+
 // copies the resources into the webapp directory.
 //
 
@@ -50,9 +52,8 @@ const INCLUDE_LANGS = [
 // "dest/b/...".
 const COPY_LIST = [
     ["res/manifest.json", "webapp"],
-    ["res/home.html", "webapp"],
+    ["res/welcome.html", "webapp"],
-    ["res/home-status.html", "webapp"],
+    ["res/welcome/**", "webapp/welcome"],
-    ["res/home/**", "webapp/home"],
     ["res/themes/**", "webapp/themes"],
     ["res/vector-icons/**", "webapp/vector-icons"],
     ["node_modules/matrix-react-sdk/res/media/**", "webapp/media"],
@@ -62,12 +63,6 @@ const COPY_LIST = [
     ["./config.json", "webapp", { directwatch: 1 }],
 ];
 
-INCLUDE_LANGS.forEach(function(l) {
-    COPY_LIST.push([
-        l.value, "webapp/i18n/", { lang: 1 },
-    ]);
-});
-
 const parseArgs = require('minimist');
 const Cpx = require('cpx');
 const chokidar = require('chokidar');
@@ -78,8 +73,8 @@ const argv = parseArgs(
     process.argv.slice(2), {}
 );
 
-var watch = argv.w;
+const watch = argv.w;
-var verbose = argv.v;
+const verbose = argv.v;
 
 function errCheck(err) {
     if (err) {
@@ -137,39 +132,11 @@ function next(i, err) {
                 .on('change', copy)
                 .on('ready', cb)
                 .on('error', errCheck);
-        } else if (opts.lang) {
-            const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + source + '.json';
-            const riotWebFile = 'src/i18n/strings/' + source + '.json';
-
-            // XXX: Use a debounce because for some reason if we read the language
-            // file immediately after the FS event is received, the file contents
-            // appears empty. Possibly https://github.com/nodejs/node/issues/6112
-            let makeLangDebouncer;
-            const makeLang = () => {
-                if (makeLangDebouncer) {
-                    clearTimeout(makeLangDebouncer);
-                }
-                makeLangDebouncer = setTimeout(() => {
-                    genLangFile(source, dest);
-                }, 500);
-            };
-
-            [reactSdkFile, riotWebFile].forEach(function(f) {
-                chokidar.watch(f)
-                    .on('add', makeLang)
-                    .on('change', makeLang)
-                    //.on('ready', cb)  We'd have to do this when both files are ready
-                    .on('error', errCheck);
-            });
-            next(i + 1, err);
         } else {
             cpx.on('watch-ready', cb);
             cpx.on("watch-error", cb);
             cpx.watch();
         }
-    } else if (opts.lang) {
-        genLangFile(source, dest);
-        next(i + 1, err);
     } else {
         cpx.copy(cb);
     }
@@ -196,21 +163,28 @@ function genLangFile(lang, dest) {
 
     translations = weblateToCounterpart(translations);
 
-    fs.writeFileSync(dest + lang + '.json', JSON.stringify(translations, null, 4));
+    const json = JSON.stringify(translations, null, 4);
+    const jsonBuffer = Buffer.from(json);
+    const digest = loaderUtils.getHashDigest(jsonBuffer, null, null, 7);
+    const filename = `${lang}.${digest}.json`;
+
+    fs.writeFileSync(dest + filename, json);
     if (verbose) {
-        console.log("Generated language file: " + lang);
+        console.log("Generated language file: " + filename);
-    }
     }
 
-function genLangList() {
+    return filename;
+}
+
+function genLangList(langFileMap) {
     const languages = {};
     INCLUDE_LANGS.forEach(function(lang) {
         const normalizedLanguage = lang.value.toLowerCase().replace("_", "-");
         const languageParts = normalizedLanguage.split('-');
         if (languageParts.length == 2 && languageParts[0] == languageParts[1]) {
-            languages[languageParts[0]] = {'fileName': lang.value + '.json', 'label': lang.label};
+            languages[languageParts[0]] = {'fileName': langFileMap[lang.value], 'label': lang.label};
         } else {
-            languages[normalizedLanguage] = {'fileName': lang.value + '.json', 'label': lang.label};
+            languages[normalizedLanguage] = {'fileName': langFileMap[lang.value], 'label': lang.label};
         }
     });
     fs.writeFile('webapp/i18n/languages.json', JSON.stringify(languages, null, 4), function(err) {
@@ -258,5 +232,50 @@ function weblateToCounterpart(inTrs) {
     return outTrs;
 }
 
-genLangList();
+/**
+watch the input files for a given language,
+regenerate the file, adding its content-hashed filename to langFileMap
+and regenerating languages.json with the new filename
+*/
+function watchLanguage(lang, dest, langFileMap) {
+    const reactSdkFile = 'node_modules/matrix-react-sdk/src/i18n/strings/' + lang + '.json';
+    const riotWebFile = 'src/i18n/strings/' + lang + '.json';
+
+    // XXX: Use a debounce because for some reason if we read the language
+    // file immediately after the FS event is received, the file contents
+    // appears empty. Possibly https://github.com/nodejs/node/issues/6112
+    let makeLangDebouncer;
+    const makeLang = () => {
+        if (makeLangDebouncer) {
+            clearTimeout(makeLangDebouncer);
+        }
+        makeLangDebouncer = setTimeout(() => {
+            const filename = genLangFile(lang, dest);
+            langFileMap[lang]=filename;
+            genLangList(langFileMap);
+        }, 500);
+    };
+
+    [reactSdkFile, riotWebFile].forEach(function(f) {
+        chokidar.watch(f)
+            .on('add', makeLang)
+            .on('change', makeLang)
+            .on('error', errCheck);
+    });
+}
+
+// language resources
+const I18N_DEST = "webapp/i18n/";
+const I18N_FILENAME_MAP = INCLUDE_LANGS.reduce((m, l) => {
+    const filename = genLangFile(l.value, I18N_DEST);
+    m[l.value] = filename;
+    return m;
+}, {});
+genLangList(I18N_FILENAME_MAP);
+
+if (watch) {
+    INCLUDE_LANGS.forEach(l => watchLanguage(l.value, I18N_DEST, I18N_FILENAME_MAP));
+}
+
+// non-language resources
 next(0);

scripts/electron-package.sh

@@ -104,10 +104,12 @@ cp $distdir/*.dmg "$pubdir/install/macos/"
 
 # Windows installers go to the dist dir because they need signing
 mkdir -p "$pubdir/install/win32/ia32/"
-cp $distdir/win-ia32/*.exe "$projdir/electron_app/dist/unsigned/"
+mkdir -p "$projdir/electron_app/dist/unsigned/ia32/"
+cp $distdir/squirrel-windows-ia32/*.exe "$projdir/electron_app/dist/unsigned/ia32/"
 
 mkdir -p "$pubdir/install/win32/x64/"
-cp $distdir/win/*.exe "$projdir/electron_app/dist/unsigned/"
+mkdir -p "$projdir/electron_app/dist/unsigned/x64/"
+cp $distdir/squirrel-windows/*.exe "$projdir/electron_app/dist/unsigned/x64/"
 
 # Packages for auto-update
 mkdir -p "$pubdir/update/macos"
@@ -115,12 +117,12 @@ cp $distdir/*-mac.zip "$pubdir/update/macos/"
 echo "$vername" > "$pubdir/update/macos/latest"
 
 mkdir -p "$pubdir/update/win32/ia32/"
-cp $distdir/win-ia32/*.nupkg "$pubdir/update/win32/ia32/"
+cp $distdir/squirrel-windows-ia32/*.nupkg "$pubdir/update/win32/ia32/"
-cp $distdir/win-ia32/RELEASES "$pubdir/update/win32/ia32/"
+cp $distdir/squirrel-windows-ia32/RELEASES "$pubdir/update/win32/ia32/"
 
 mkdir -p "$pubdir/update/win32/x64/"
-cp $distdir/win/*.nupkg "$pubdir/update/win32/x64/"
+cp $distdir/squirrel-windows/*.nupkg "$pubdir/update/win32/x64/"
-cp $distdir/win/RELEASES "$pubdir/update/win32/x64/"
+cp $distdir/squirrel-windows/RELEASES "$pubdir/update/win32/x64/"
 
 # Move the debs to the main project dir's dist folder
 cp $distdir/*.deb "$projdir/electron_app/dist/"

scripts/make-icons.sh

@@ -1,4 +1,10 @@
 #!/bin/bash
+#
+# Converts an svg logo into the various image resources required by
+# the various platforms deployments.
+#
+# On debian-based systems you need these deps:
+#   apt-get install xmlstarlet python3-cairosvg icnsutils
 
 if [ $# != 1 ]
 then
@@ -52,7 +58,23 @@ cp "$tmpdir/256.png" "$tmpdir/Riot.iconset/icon_256x256.png"
 cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_256x256@2x.png"
 cp "$tmpdir/512.png" "$tmpdir/Riot.iconset/icon_512x512.png"
 cp "$tmpdir/1024.png" "$tmpdir/Riot.iconset/icon_512x512@2x.png"
+
+if [ -x "$(command -v iconutil)" ]; then
+  # available on macos
   iconutil -c icns -o electron_app/build/icon.icns "$tmpdir/Riot.iconset"
+elif [ -x "$(command -v png2icns)" ]; then
+  # available on linux
+  # png2icns is more finicky about its input than iconutil
+  # 1. it doesn't support a 64x64 (aka 32x32@2x)
+  # 2. it doesn't like duplicates (128x128@2x == 256x256)
+  rm "$tmpdir/Riot.iconset/icon_128x128@2x.png"
+  rm "$tmpdir/Riot.iconset/icon_256x256@2x.png"
+  rm "$tmpdir/Riot.iconset/icon_16x16@2x.png"
+  rm "$tmpdir/Riot.iconset/icon_32x32@2x.png"
+  png2icns electron_app/build/icon.icns "$tmpdir"/Riot.iconset/*png
+else
+  echo "WARNING: Unsupported platform. Skipping icns build"
+fi
 
 cp "$tmpdir/36.png" "res/vector-icons/android-chrome-36x36.png"
 cp "$tmpdir/48.png" "res/vector-icons/android-chrome-48x48.png"

scripts/package.sh

@@ -14,7 +14,11 @@ else
 fi
 
 npm run clean
-npm run build$dev
+# riot-web is at `workspace`.
+# matrix-react-sdk is at `workspace/node_modules/matrix-react-sdk`, but this is
+# symlinked to a repo at `workspace/matrix-react-sdk`.
+# To get from `workspace/matrix-react-sdk/lib` up to the lang file, we use:
+RIOT_LANGUAGES_FILE="../../webapp/i18n/languages.json" npm run build$dev
 
 # include the sample config in the tarball. Arguably this should be done by
 # `npm run build`, but it's just too painful.

src/components/structures/VectorEmbeddedPage.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2016 OpenMarket Ltd
 Copyright 2017 Vector Creations Ltd
+Copyright 2019 New Vector Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,22 +18,18 @@ limitations under the License.
 
 'use strict';
 
-import HomePage from 'matrix-react-sdk/lib/components/structures/HomePage';
+import EmbeddedPage from 'matrix-react-sdk/lib/components/structures/EmbeddedPage';
 import sanitizeHtml from 'sanitize-html';
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
 
-class VectorHomePage extends HomePage {
+export default class VectorEmbeddedPage extends EmbeddedPage {
-    static displayName = 'VectorHomePage';
+    static replaces = 'EmbeddedPage';
-    static replaces = 'HomePage';
 
     // we're overriding the base component here, for Riot-specific tweaks
     translate(s) {
         s = sanitizeHtml(_t(s));
         // ugly fix for https://github.com/vector-im/riot-web/issues/4243
-        s = s.replace(/Riot\.im/, '<a href="https://riot.im" target="_blank" rel="noopener">Riot.im</a>');
+        s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="welcome/images/matrix.svg"/></a>');
-        s = s.replace(/\[matrix\]/, '<a href="https://matrix.org" target="_blank" rel="noopener"><img width="79" height="34" alt="[matrix]" style="padding-left: 1px;vertical-align: middle" src="home/images/matrix.svg"/></a>');
         return s;
     }
 }
-
-module.exports = VectorHomePage;

src/components/views/auth/VectorAuthFooter.js

@@ -19,7 +19,6 @@ limitations under the License.
 
 const React = require('react');
 import { _t } from 'matrix-react-sdk/lib/languageHandler';
-import SettingsStore from 'matrix-react-sdk/lib/settings/SettingsStore';
 
 module.exports = React.createClass({
     displayName: 'VectorAuthFooter',
@@ -28,10 +27,6 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        // FIXME: replace this with a proper Status skin
-        // ...except then we wouldn't be able to switch to the Status theme at runtime.
-        if (SettingsStore.getValue("theme") === 'status') return <div />;
-
         return (
             <div className="mx_AuthFooter">
                 <a href="https://medium.com/@RiotChat" target="_blank" rel="noopener">blog</a>

src/components/views/auth/VectorAuthHeaderLogo.js

@@ -19,23 +19,26 @@ limitations under the License.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import SdkConfig from 'matrix-react-sdk/lib/SdkConfig';
 
-const LOGO_URI = "themes/riot/img/logos/riot-im-logo-black-text.svg";
+export default class VectorAuthHeaderLogo extends React.PureComponent {
+    static replaces = 'AuthHeaderLogo'
 
-module.exports = React.createClass({
+    static propTypes = {
-    displayName: 'VectorAuthHeaderLogo',
-    statics: {
-        replaces: 'AuthHeaderLogo',
-    },
-    propTypes: {
         icon: PropTypes.string,
-    },
+    }
+
+    render() {
+        const brandingConfig = SdkConfig.get().branding;
+        let logoUrl = "themes/riot/img/logos/riot-im-logo-black-text.svg";
+        if (brandingConfig && brandingConfig.authHeaderLogoUrl) {
+            logoUrl = brandingConfig.authHeaderLogoUrl;
+        }
 
-    render: function() {
         return (
             <div className="mx_AuthHeaderLogo">
-                <img src={LOGO_URI} alt="Riot" />
+                <img src={logoUrl} alt="Riot" />
             </div>
         );
-    },
+    }
-});
+}