Merge develop into experimental

.eslintrc.js

@@ -47,6 +47,9 @@ module.exports = {
         }],
         "react/jsx-key": ["error"],
 
+        // Components in JSX should always be defined.
+        "react/jsx-no-undef": "error",
+
         // Assert no spacing in JSX curly brackets
         // <Element prop={ consideredError} prop={notConsideredError} />
         //

CHANGELOG.md

@@ -1,3 +1,57 @@
+Changes in [0.14.7](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7) (2018-12-10)
+=====================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.2...v0.14.7)
+
+ * No changes since rc.2
+
+Changes in [0.14.7-rc.2](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.2) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.7-rc.1...v0.14.7-rc.2)
+
+ * Ship the babelrc file to npm
+   [\#2332](https://github.com/matrix-org/matrix-react-sdk/pull/2332)
+
+Changes in [0.14.7-rc.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.7-rc.1) (2018-12-06)
+===============================================================================================================
+[Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.6...v0.14.7-rc.1)
+
+ * Suppress CORS errors in the 'failed to join room' dialog
+   [\#2306](https://github.com/matrix-org/matrix-react-sdk/pull/2306)
+ * Check if users exist before inviting them and communicate errors
+   [\#2317](https://github.com/matrix-org/matrix-react-sdk/pull/2317)
+ * Update from Weblate.
+   [\#2328](https://github.com/matrix-org/matrix-react-sdk/pull/2328)
+ * Allow group summary to load when /users fails
+   [\#2326](https://github.com/matrix-org/matrix-react-sdk/pull/2326)
+ * Show correct text if passphrase is skipped
+   [\#2324](https://github.com/matrix-org/matrix-react-sdk/pull/2324)
+ * Add password strength meter to backup creation UI
+   [\#2294](https://github.com/matrix-org/matrix-react-sdk/pull/2294)
+ * Check upload limits before trying to upload large files
+   [\#1876](https://github.com/matrix-org/matrix-react-sdk/pull/1876)
+ * Support .well-known discovery
+   [\#2227](https://github.com/matrix-org/matrix-react-sdk/pull/2227)
+ * Make create key backup dialog async
+   [\#2291](https://github.com/matrix-org/matrix-react-sdk/pull/2291)
+ * Forgot to enable continue button on download
+   [\#2288](https://github.com/matrix-org/matrix-react-sdk/pull/2288)
+ * Online incremental megolm backups (v2)
+   [\#2169](https://github.com/matrix-org/matrix-react-sdk/pull/2169)
+ * Add recovery key download button
+   [\#2284](https://github.com/matrix-org/matrix-react-sdk/pull/2284)
+ * Passphrase Support for e2e backups
+   [\#2283](https://github.com/matrix-org/matrix-react-sdk/pull/2283)
+ * Update async dialog interface to use promises
+   [\#2286](https://github.com/matrix-org/matrix-react-sdk/pull/2286)
+ * Support for m.login.sso
+   [\#2279](https://github.com/matrix-org/matrix-react-sdk/pull/2279)
+ * Added badge to non-autoplay GIFs
+   [\#2235](https://github.com/matrix-org/matrix-react-sdk/pull/2235)
+ * Improve terms auth flow
+   [\#2277](https://github.com/matrix-org/matrix-react-sdk/pull/2277)
+ * Handle crypto db version upgrade
+   [\#2282](https://github.com/matrix-org/matrix-react-sdk/pull/2282)
+
 Changes in [0.14.6](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v0.14.6) (2018-11-22)
 =====================================================================================================
 [Full Changelog](https://github.com/matrix-org/matrix-react-sdk/compare/v0.14.5...v0.14.6)

CONTRIBUTING.rst

@@ -1,4 +1,4 @@
 Contributing code to The React SDK
 ==================================
 
-matrix-react-sdk follows the same pattern as https://github.com/matrix-org/synapse/blob/master/CONTRIBUTING.rst
+matrix-react-sdk follows the same pattern as https://github.com/matrix-org/matrix-js-sdk/blob/master/CONTRIBUTING.rst

README.md

@@ -127,61 +127,3 @@ Github Issues
 
 All issues should be filed under https://github.com/vector-im/riot-web/issues
 for now.
-
-OUTDATED: To Create Your Own Skin
-=================================
-
-**This is ALL LIES currently, and needs to be updated**
-
-Skins are modules are exported from such a package in the `lib` directory.
-`lib/skins` contains one directory per-skin, named after the skin, and the
-`modules` directory contains modules as their javascript files.
-
-A basic skin is provided in the matrix-react-skin package. This also contains
-a minimal application that instantiates the basic skin making a working matrix
-client.
-
-You can use matrix-react-sdk directly, but to do this you would have to provide
-'views' for each UI component. To get started quickly, use matrix-react-skin.
-
-To actually change the look of a skin, you can create a base skin (which
-does not use views from any other skin) or you can make a derived skin.
-Note that derived skins are currently experimental: for example, the CSS
-from the skins it is based on will not be automatically included.
-
-To make a skin, create React classes for any custom components you wish to add
-in a skin within `src/skins/<skin name>`. These can be based off the files in
-`views` in the `matrix-react-skin` package, modifying the require() statement
-appropriately.
-
-If you make a derived skin, you only need copy the files you wish to customise.
-
-Once you've made all your view files, you need to make a `skinfo.json`. This
-contains all the metadata for a skin. This is a JSON file with, currently, a
-single key, 'baseSkin'. Set this to the empty string if your skin is a base skin,
-or for a derived skin, set it to the path of your base skin's skinfo.json file, as
-you would use in a require call.
-
-Now you have the basis of a skin, you need to generate a skindex.json file. The
-`reskindex.js` tool in matrix-react-sdk does this for you. It is suggested that
-you add an npm script to run this, as in matrix-react-skin.
-
-For more specific detail on any of these steps, look at matrix-react-skin.
-
-Alternative instructions:
-
-  * Create a new NPM project. Be sure to directly depend on react, (otherwise
-    you can end up with two copies of react).
-  * Create an index.js file that sets up react. Add require statements for
-    React and matrix-react-sdk. Load a skin using the 'loadSkin' method on the
-    SDK and call Render. This can be a skin provided by a separate package or
-    a skin in the same package.
-  * Add a way to build your project: we suggest copying the scripts block
-    from matrix-react-skin (which uses babel and webpack). You could use
-    different tools but remember that at least the skins and modules of
-    your project should end up in plain (ie. non ES6, non JSX) javascript in
-    the lib directory at the end of the build process, as well as any
-    packaging that you might do.
-  * Create an index.html file pulling in your compiled javascript and the
-    CSS bundle from the skin you use. For now, you'll also need to manually
-    import CSS from any skins that your skin inherts from.

code_style.md

@@ -165,7 +165,6 @@ ECMAScript
 
 React
 -----
-- Use React.createClass rather than ES6 classes for components, as the boilerplate is way too heavy on ES6 currently.  ES7 might improve it.
 - Pull out functions in props to the class, generally as specific event handlers:
 
   ```jsx
@@ -174,11 +173,38 @@ React
   <Foo onClick={this.doStuff}> // Better
   <Foo onClick={this.onFooClick}> // Best, if onFooClick would do anything other than directly calling doStuff
   ```
-  
-  Not doing so is acceptable in a single case; in function-refs:
-  
+
+  Not doing so is acceptable in a single case: in function-refs:
+
   ```jsx
   <Foo ref={(self) => this.component = self}>
   ```
+
+- Prefer classes that extend `React.Component` (or `React.PureComponent`) instead of `React.createClass`
+  - You can avoid the need to bind handler functions by using [property initializers](https://reactjs.org/docs/react-component.html#constructor):
+
+  ```js
+  class Widget extends React.Component
+      onFooClick = () => {
+          ...
+      }
+  }
+  ```
+  - To define `propTypes`, use a static property:
+  ```js
+  class Widget extends React.Component
+      static propTypes = {
+          ...
+      }
+  }
+  ```
+  - If you need to specify initial component state, [assign it](https://reactjs.org/docs/react-component.html#constructor) to `this.state` in the constructor:
+  ```js
+  constructor(props) {
+    super(props);
+    // Don't call this.setState() here!
+    this.state = { counter: 0 };
+  }
+  ```
 - Think about whether your component really needs state: are you duplicating
   information in component state that could be derived from the model?

package.json

@@ -1,6 +1,6 @@
 {
   "name": "matrix-react-sdk",
-  "version": "0.14.6",
+  "version": "0.14.7",
   "description": "SDK for matrix.org using React",
   "author": "matrix.org",
   "repository": {
@@ -10,6 +10,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "files": [
+    ".babelrc",
     ".eslintrc.js",
     "CHANGELOG.md",
     "CONTRIBUTING.rst",
@@ -72,11 +73,12 @@
     "gfm.css": "^1.1.1",
     "glob": "^5.0.14",
     "highlight.js": "^9.13.0",
+    "is-ip": "^2.0.0",
     "isomorphic-fetch": "^2.2.1",
     "linkifyjs": "^2.1.6",
     "lodash": "^4.13.1",
     "lolex": "2.3.2",
-    "matrix-js-sdk": "0.14.1",
+    "matrix-js-sdk": "0.14.2",
     "optimist": "^0.6.1",
     "pako": "^1.0.5",
     "prop-types": "^15.5.8",
@@ -96,7 +98,8 @@
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
     "velocity-vector": "github:vector-im/velocity#059e3b2",
-    "whatwg-fetch": "^1.1.1"
+    "whatwg-fetch": "^1.1.1",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

res/css/_common.scss

@@ -32,7 +32,7 @@ body {
     margin: 0px;
 }
 
-div.error, div.warning {
+.error, .warning {
     color: $warning-color;
 }
 

res/css/_components.scss

@@ -49,6 +49,7 @@
 @import "./views/dialogs/_ShareDialog.scss";
 @import "./views/dialogs/_UnknownDeviceDialog.scss";
 @import "./views/dialogs/keybackup/_CreateKeyBackupDialog.scss";
+@import "./views/dialogs/keybackup/_NewRecoveryMethodDialog.scss";
 @import "./views/dialogs/keybackup/_RestoreKeyBackupDialog.scss";
 @import "./views/directory/_NetworkDropdown.scss";
 @import "./views/elements/_AccessibleButton.scss";
@@ -104,6 +105,7 @@
 @import "./views/rooms/_RoomHeader.scss";
 @import "./views/rooms/_RoomList.scss";
 @import "./views/rooms/_RoomPreviewBar.scss";
+@import "./views/rooms/_RoomRecoveryReminder.scss";
 @import "./views/rooms/_RoomSettings.scss";
 @import "./views/rooms/_RoomTile.scss";
 @import "./views/rooms/_RoomTooltip.scss";

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -19,8 +19,26 @@ limitations under the License.
     padding: 20px
 }
 
+.mx_CreateKeyBackupDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp {
+    float: right;
+    width: 230px;
+    height: 85px;
+    margin-left: 20px;
+    font-size: 80%;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp progress {
+    width: 100%;
+}
+
 .mx_CreateKeyBackupDialog_passPhraseInput {
-    width: 300px;
+    width: 250px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;

res/css/views/dialogs/keybackup/_NewRecoveryMethodDialog.scss

@@ -0,0 +1,41 @@
+/*
+Copyright 2018 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.
+*/
+
+.mx_NewRecoveryMethodDialog .mx_Dialog_title {
+    margin-bottom: 32px;
+}
+
+.mx_NewRecoveryMethodDialog_title {
+    position: relative;
+    padding-left: 45px;
+    padding-bottom: 10px;
+
+    &:before {
+        mask: url("../../../img/e2e/lock-warning.svg");
+        mask-repeat: no-repeat;
+        background-color: $primary-fg-color;
+        content: "";
+        position: absolute;
+        top: -6px;
+        right: 0;
+        bottom: 0;
+        left: 0;
+    }
+}
+
+.mx_NewRecoveryMethodDialog .mx_Dialog_buttons {
+    margin-top: 36px;
+}

res/css/views/rooms/_RoomRecoveryReminder.scss

@@ -0,0 +1,44 @@
+/*
+Copyright 2018 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.
+*/
+
+.mx_RoomRecoveryReminder {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    background-color: $room-warning-bg-color;
+    padding: 20px;
+    border: 1px solid $primary-hairline-color;
+    border-bottom: unset;
+}
+
+.mx_RoomRecoveryReminder_header {
+    font-weight: bold;
+    margin-bottom: 1em;
+}
+
+.mx_RoomRecoveryReminder_body {
+    margin-bottom: 1em;
+}
+
+.mx_RoomRecoveryReminder_button {
+    @mixin mx_DialogButton;
+    margin: 0 10px;
+}
+
+.mx_RoomRecoveryReminder_button.mx_RoomRecoveryReminder_secondary {
+    @mixin mx_DialogButton_secondary;
+    background-color: transparent;
+}

res/themes/dark/css/_dark.scss

@@ -107,6 +107,8 @@ $voip-accept-color: #80f480;
 $rte-bg-color: #353535;
 $rte-code-bg-color: #000;
 
+$room-warning-bg-color: #2d2d2d;
+
 // ********************
 
 $roomtile-name-color: rgba(186, 186, 186, 0.8);
@@ -185,6 +187,14 @@ $progressbar-color: #000;
     outline: none;
 }
 
+@define-mixin mx_DialogButton_secondary {
+    // flip colours for the secondary ones
+    font-weight: 600;
+    border: 1px solid $accent-color ! important;
+    color: $accent-color;
+    background-color: $accent-fg-color;
+}
+
 // Nasty hacks to apply a filter to arbitrary monochrome artwork to make it
 // better match the theme.  Typically applied to dark grey 'off' buttons or
 // light grey 'on' buttons.