From d014c5239be443911d3a3ad0b4650756c9e04a1a Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Mon, 27 Jan 2020 23:14:02 +0000 Subject: [PATCH 1/7] Add new session verification details dialog This gives more info on the session you're about to verify, including device name and ID. Fixes https://github.com/vector-im/riot-web/issues/11977 --- res/css/_components.scss | 1 + .../dialogs/_NewSessionReviewDialog.scss | 37 ++++++++ .../views/dialogs/NewSessionReviewDialog.js | 92 +++++++++++++++++++ .../views/elements/DialogButtons.js | 2 +- .../views/toasts/NewSessionToast.js | 5 +- src/i18n/strings/en_EN.json | 4 + 6 files changed, 138 insertions(+), 3 deletions(-) create mode 100644 res/css/views/dialogs/_NewSessionReviewDialog.scss create mode 100644 src/components/views/dialogs/NewSessionReviewDialog.js diff --git a/res/css/_components.scss b/res/css/_components.scss index 07e92bdc7b..de56ad77bb 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -65,6 +65,7 @@ @import "./views/dialogs/_IncomingSasDialog.scss"; @import "./views/dialogs/_InviteDialog.scss"; @import "./views/dialogs/_MessageEditHistoryDialog.scss"; +@import "./views/dialogs/_NewSessionReviewDialog.scss"; @import "./views/dialogs/_RoomSettingsDialog.scss"; @import "./views/dialogs/_RoomUpgradeDialog.scss"; @import "./views/dialogs/_RoomUpgradeWarningDialog.scss"; diff --git a/res/css/views/dialogs/_NewSessionReviewDialog.scss b/res/css/views/dialogs/_NewSessionReviewDialog.scss new file mode 100644 index 0000000000..7e35fe941e --- /dev/null +++ b/res/css/views/dialogs/_NewSessionReviewDialog.scss @@ -0,0 +1,37 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +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_NewSessionReviewDialog_header { + display: flex; + align-items: center; + margin-top: 0; +} + +.mx_NewSessionReviewDialog_headerIcon { + width: 24px; + height: 24px; + margin-right: 4px; + position: relative; +} + +.mx_NewSessionReviewDialog_deviceName { + font-weight: 600; +} + +.mx_NewSessionReviewDialog_deviceID { + font-size: 12px; + color: $notice-secondary-color; +} diff --git a/src/components/views/dialogs/NewSessionReviewDialog.js b/src/components/views/dialogs/NewSessionReviewDialog.js new file mode 100644 index 0000000000..c14f0f5614 --- /dev/null +++ b/src/components/views/dialogs/NewSessionReviewDialog.js @@ -0,0 +1,92 @@ +/* +Copyright 2020 The Matrix.org Foundation C.I.C. + +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. +*/ + +import React from 'react'; +import PropTypes from 'prop-types'; +import * as sdk from "../../../index"; +import { _t } from '../../../languageHandler'; +import Modal from "../../../Modal"; + +export default class NewSessionReviewDialog extends React.PureComponent { + static propTypes = { + userId: PropTypes.string.isRequired, + device: PropTypes.object.isRequired, + onFinished: PropTypes.func.isRequired, + } + + onCancelClick = () => { + this.props.onFinished(false); + } + + onContinueClick = () => { + const DeviceVerifyDialog = + sdk.getComponent('views.dialogs.DeviceVerifyDialog'); + const { userId, device } = this.props; + Modal.createTrackedDialog('New Session Verification', 'Starting dialog', DeviceVerifyDialog, { + userId, + device, + }, null, /* priority = */ false, /* static = */ true); + } + + render() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const DialogButtons = sdk.getComponent("views.elements.DialogButtons"); + + const { device } = this.props; + + const icon = ; + const titleText = _t("New session"); + + const title =

+ {icon} + {titleText} +

; + + return ( + +
+

{_t( + "Use this session to verify your new one, " + + "granting it access to encrypted messages:", + )}

+
+
+ + {device.getDisplayName()} + + ({device.deviceId}) + +
+
+

{_t( + "If you didn’t sign in to this session, " + + "your account may be compromised.", + )}

+ +
+ + ); + } +} diff --git a/src/components/views/elements/DialogButtons.js b/src/components/views/elements/DialogButtons.js index ee15bfc3f2..9223b5ade8 100644 --- a/src/components/views/elements/DialogButtons.js +++ b/src/components/views/elements/DialogButtons.js @@ -83,7 +83,7 @@ export default createReactClass({ // primary in the DOM so will get form submissions unless we make it not a submit. type="button" onClick={this._onCancelClick} - className={this.props.cancelButtonClass} + className={this.props.cancelButtonClass} disabled={this.props.disabled} > { this.props.cancelButton || _t("Cancel") } diff --git a/src/components/views/toasts/NewSessionToast.js b/src/components/views/toasts/NewSessionToast.js index 3b60f59131..ed8b15e25f 100644 --- a/src/components/views/toasts/NewSessionToast.js +++ b/src/components/views/toasts/NewSessionToast.js @@ -34,11 +34,12 @@ export default class VerifySessionToast extends React.PureComponent { _onReviewClick = async () => { const cli = MatrixClientPeg.get(); - const DeviceVerifyDialog = sdk.getComponent('views.dialogs.DeviceVerifyDialog'); + const NewSessionReviewDialog = + sdk.getComponent('views.dialogs.NewSessionReviewDialog'); const device = await cli.getStoredDevice(cli.getUserId(), this.props.deviceId); - Modal.createTrackedDialog('New Session Verify', 'Starting dialog', DeviceVerifyDialog, { + Modal.createTrackedDialog('New Session Review', 'Starting dialog', NewSessionReviewDialog, { userId: MatrixClientPeg.get().getUserId(), device, }, null, /* priority = */ false, /* static = */ true); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 23ca730d97..7ccce9e7f6 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1508,6 +1508,10 @@ "Are you sure you want to sign out?": "Are you sure you want to sign out?", "Your homeserver doesn't seem to support this feature.": "Your homeserver doesn't seem to support this feature.", "Message edits": "Message edits", + "New session": "New session", + "Use this session to verify your new one, granting it access to encrypted messages:": "Use this session to verify your new one, granting it access to encrypted messages:", + "If you didn’t sign in to this session, your account may be compromised.": "If you didn’t sign in to this session, your account may be compromised.", + "This wasn't me": "This wasn't me", "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.": "If you run into any bugs or have feedback you'd like to share, please let us know on GitHub.", "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.": "To help avoid duplicate issues, please view existing issues first (and add a +1) or create a new issue if you can't find it.", "Report bugs & give feedback": "Report bugs & give feedback", From 67358e06bf5da0d40f58d00c75b589e70624bc79 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 28 Jan 2020 10:10:37 +0000 Subject: [PATCH 2/7] Use annotations and imports --- .../views/dialogs/NewSessionReviewDialog.js | 13 ++++++------- src/components/views/toasts/NewSessionToast.js | 8 ++++---- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/views/dialogs/NewSessionReviewDialog.js b/src/components/views/dialogs/NewSessionReviewDialog.js index c14f0f5614..2d2bcc8f35 100644 --- a/src/components/views/dialogs/NewSessionReviewDialog.js +++ b/src/components/views/dialogs/NewSessionReviewDialog.js @@ -16,10 +16,14 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import * as sdk from "../../../index"; import { _t } from '../../../languageHandler'; -import Modal from "../../../Modal"; +import Modal from '../../../Modal'; +import { replaceableComponent } from '../../../utils/replaceableComponent'; +import DeviceVerifyDialog from './DeviceVerifyDialog'; +import BaseDialog from './BaseDialog'; +import DialogButtons from '../elements/DialogButtons'; +@replaceableComponent("views.dialogs.NewSessionReviewDialog") export default class NewSessionReviewDialog extends React.PureComponent { static propTypes = { userId: PropTypes.string.isRequired, @@ -32,8 +36,6 @@ export default class NewSessionReviewDialog extends React.PureComponent { } onContinueClick = () => { - const DeviceVerifyDialog = - sdk.getComponent('views.dialogs.DeviceVerifyDialog'); const { userId, device } = this.props; Modal.createTrackedDialog('New Session Verification', 'Starting dialog', DeviceVerifyDialog, { userId, @@ -42,9 +44,6 @@ export default class NewSessionReviewDialog extends React.PureComponent { } render() { - const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); - const DialogButtons = sdk.getComponent("views.elements.DialogButtons"); - const { device } = this.props; const icon = ; diff --git a/src/components/views/toasts/NewSessionToast.js b/src/components/views/toasts/NewSessionToast.js index ed8b15e25f..80564f3494 100644 --- a/src/components/views/toasts/NewSessionToast.js +++ b/src/components/views/toasts/NewSessionToast.js @@ -16,12 +16,15 @@ limitations under the License. import React from 'react'; import PropTypes from 'prop-types'; -import * as sdk from "../../../index"; import { _t } from '../../../languageHandler'; import Modal from "../../../Modal"; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import DeviceListener from '../../../DeviceListener'; +import NewSessionReviewDialog from '../dialogs/NewSessionReviewDialog'; +import FormButton from '../elements/FormButton'; +import { replaceableComponent } from '../../../utils/replaceableComponent'; +@replaceableComponent("views.toasts.VerifySessionToast") export default class VerifySessionToast extends React.PureComponent { static propTypes = { toastKey: PropTypes.string.isRequired, @@ -34,8 +37,6 @@ export default class VerifySessionToast extends React.PureComponent { _onReviewClick = async () => { const cli = MatrixClientPeg.get(); - const NewSessionReviewDialog = - sdk.getComponent('views.dialogs.NewSessionReviewDialog'); const device = await cli.getStoredDevice(cli.getUserId(), this.props.deviceId); @@ -46,7 +47,6 @@ export default class VerifySessionToast extends React.PureComponent { }; render() { - const FormButton = sdk.getComponent("elements.FormButton"); return (
{_t("Review & verify your new session")}
From 9cf59ab16d6b08b0ae40a76e300e0b5d0e4612f7 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 28 Jan 2020 12:30:39 +0000 Subject: [PATCH 3/7] Enable cross-signing lab when key in storage When we're starting a new session and find the cross-signing keys in secret storage, auto-enable the lab for the new session. Fixes https://github.com/vector-im/riot-web/issues/12100 --- src/components/structures/MatrixChat.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/structures/MatrixChat.js b/src/components/structures/MatrixChat.js index 133d74db45..1b4d0e9609 100644 --- a/src/components/structures/MatrixChat.js +++ b/src/components/structures/MatrixChat.js @@ -1834,6 +1834,7 @@ export default createReactClass({ this._accountPassword = null; this._accountPasswordTimer = null; }, 60 * 5 * 1000); + // Wait for the client to be logged in (but not started) // which is enough to ask the server about account data. const loggedIn = new Promise(resolve => { @@ -1867,6 +1868,9 @@ export default createReactClass({ } if (masterKeyInStorage) { + // Auto-enable cross-signing for the new session when key found in + // secret storage. + SettingsStore.setFeatureEnabled("feature_cross_signing", true); this.setStateForNewView({ view: VIEWS.COMPLETE_SECURITY }); } else if (SettingsStore.isFeatureEnabled("feature_cross_signing")) { // This will only work if the feature is set to 'enable' in the config, From 21405b8f25ab36dc1967b53bdd349e872165dd18 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 12:44:14 +0000 Subject: [PATCH 4/7] Fix skinning and babel tagets --- babel.config.js | 4 ++-- src/Skinner.js | 14 ++++++++------ src/utils/replaceableComponent.ts | 8 ++++++-- 3 files changed, 16 insertions(+), 10 deletions(-) diff --git a/babel.config.js b/babel.config.js index c83be72518..944d9051bb 100644 --- a/babel.config.js +++ b/babel.config.js @@ -4,7 +4,7 @@ module.exports = { ["@babel/preset-env", { "targets": { "browsers": [ - "last 2 versions" + "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" ] }, "modules": "commonjs" @@ -14,7 +14,7 @@ module.exports = { "@babel/preset-react" ], "plugins": [ - ["@babel/plugin-proposal-decorators", { "legacy": true }], + ["@babel/plugin-proposal-decorators", {"legacy": false, decoratorsBeforeExport: true}], "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-class-properties", diff --git a/src/Skinner.js b/src/Skinner.js index 3baecc9fb3..1e121b8808 100644 --- a/src/Skinner.js +++ b/src/Skinner.js @@ -20,6 +20,7 @@ class Skinner { } getComponent(name) { + if (!name) throw new Error(`Invalid component name: ${name}`); if (this.components === null) { throw new Error( "Attempted to get a component before a skin has been loaded."+ @@ -43,12 +44,6 @@ class Skinner { // Check the skin first let comp = doLookup(this.components); - // If that failed, check against our own components - if (!comp) { - // Lazily load our own components because they might end up calling .getComponent() - comp = doLookup(require("./component-index").components); - } - // Just return nothing instead of erroring - the consumer should be smart enough to // handle this at this point. if (!comp) { @@ -75,6 +70,13 @@ class Skinner { const comp = skinObject.components[compKeys[i]]; this.addComponent(compKeys[i], comp); } + + // Now that we have a skin, load our components too + const idx = require("./component-index"); + if (!idx || !idx.components) throw new Error("Invalid react-sdk component index"); + for (const c in idx.components) { + if (!this.components[c]) this.components[c] = idx.components[c]; + } } addComponent(name, comp) { diff --git a/src/utils/replaceableComponent.ts b/src/utils/replaceableComponent.ts index 9f617b27f3..92272e533c 100644 --- a/src/utils/replaceableComponent.ts +++ b/src/utils/replaceableComponent.ts @@ -32,9 +32,13 @@ import * as sdk from '../index'; * with a skinned version. If no skinned version is available, this component * will be used. */ -export function replaceableComponent(name: string, origComponent: React.Component) { +export function replaceableComponent(name: string) { // Decorators return a function to override the class (origComponent). This // ultimately assumes that `getComponent()` won't throw an error and instead // return a falsey value like `null` when the skin doesn't have a component. - return () => sdk.getComponent(name) || origComponent; + return (origComponent) => { + const c = sdk.getComponent(name) || origComponent; + c.kind = "class"; // appeases babel + return c; + }; } From d0c28adfb1a13a54e78a7b9c825f824a784db28c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 12:53:37 +0000 Subject: [PATCH 5/7] Appease the linter --- src/Skinner.js | 2 +- src/utils/replaceableComponent.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Skinner.js b/src/Skinner.js index 1e121b8808..87c5a7be7f 100644 --- a/src/Skinner.js +++ b/src/Skinner.js @@ -42,7 +42,7 @@ class Skinner { }; // Check the skin first - let comp = doLookup(this.components); + const comp = doLookup(this.components); // Just return nothing instead of erroring - the consumer should be smart enough to // handle this at this point. diff --git a/src/utils/replaceableComponent.ts b/src/utils/replaceableComponent.ts index 92272e533c..281ff4c1ac 100644 --- a/src/utils/replaceableComponent.ts +++ b/src/utils/replaceableComponent.ts @@ -32,7 +32,7 @@ import * as sdk from '../index'; * with a skinned version. If no skinned version is available, this component * will be used. */ -export function replaceableComponent(name: string) { +export function replaceableComponent(name: string) { // Decorators return a function to override the class (origComponent). This // ultimately assumes that `getComponent()` won't throw an error and instead // return a falsey value like `null` when the skin doesn't have a component. From a4778cc7e3371f12c32ec991a684c681911e0d1e Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 14:18:12 +0000 Subject: [PATCH 6/7] Remove legacy --- babel.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/babel.config.js b/babel.config.js index 944d9051bb..333e5301af 100644 --- a/babel.config.js +++ b/babel.config.js @@ -14,7 +14,7 @@ module.exports = { "@babel/preset-react" ], "plugins": [ - ["@babel/plugin-proposal-decorators", {"legacy": false, decoratorsBeforeExport: true}], + ["@babel/plugin-proposal-decorators", {decoratorsBeforeExport: true}], "@babel/plugin-proposal-export-default-from", "@babel/plugin-proposal-numeric-separator", "@babel/plugin-proposal-class-properties", From 894568bf7aff3578970e6d577d28a14c19d2bce2 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Tue, 28 Jan 2020 14:19:06 +0000 Subject: [PATCH 7/7] Stop using deprecated stuff --- babel.config.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/babel.config.js b/babel.config.js index 333e5301af..3c0c3fcb85 100644 --- a/babel.config.js +++ b/babel.config.js @@ -2,12 +2,9 @@ module.exports = { "sourceMaps": "inline", "presets": [ ["@babel/preset-env", { - "targets": { - "browsers": [ - "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" - ] - }, - "modules": "commonjs" + "targets": [ + "last 2 Chrome versions", "last 2 Firefox versions", "last 2 Safari versions" + ], }], "@babel/preset-typescript", "@babel/preset-flow",