From 54aaabac747afffb0c7b18772f5211b1bd976927 Mon Sep 17 00:00:00 2001 From: David Baker Date: Tue, 9 Jul 2019 18:51:56 +0100 Subject: [PATCH] Initial support for ToS dialogs for IS/IM as per MSC2140 --- res/css/_components.scss | 1 + res/css/views/dialogs/_TermsDialog.scss | 35 +++ src/ScalarAuthClient.js | 48 +++-- src/components/views/dialogs/TermsDialog.js | 201 ++++++++++++++++++ .../views/elements/ManageIntegsButton.js | 6 +- src/components/views/rooms/AppsDrawer.js | 6 +- .../views/settings/IntegrationsManager.js | 68 ++---- src/i18n/strings/en_EN.json | 16 +- src/integrations/integrations.js | 55 +++++ src/languageHandler.js | 35 +++ 10 files changed, 395 insertions(+), 76 deletions(-) create mode 100644 res/css/views/dialogs/_TermsDialog.scss create mode 100644 src/components/views/dialogs/TermsDialog.js create mode 100644 src/integrations/integrations.js diff --git a/res/css/_components.scss b/res/css/_components.scss index d30684993d..4c2829b68c 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -70,6 +70,7 @@ @import "./views/dialogs/_SetPasswordDialog.scss"; @import "./views/dialogs/_SettingsDialog.scss"; @import "./views/dialogs/_ShareDialog.scss"; +@import "./views/dialogs/_TermsDialog.scss"; @import "./views/dialogs/_UnknownDeviceDialog.scss"; @import "./views/dialogs/_UploadConfirmDialog.scss"; @import "./views/dialogs/_UserSettingsDialog.scss"; diff --git a/res/css/views/dialogs/_TermsDialog.scss b/res/css/views/dialogs/_TermsDialog.scss new file mode 100644 index 0000000000..60dec57b66 --- /dev/null +++ b/res/css/views/dialogs/_TermsDialog.scss @@ -0,0 +1,35 @@ +/* +Copyright 2019 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_TermsDialog_termsTableHeader { + font-weight: bold; + text-align: left; +} + +.mx_TermsDialog_termsTable { + font-size: 12px; +} + +.mx_TermsDialog_service, .mx_TermsDialog_summary { + padding-right: 10px; +} + +.mx_TermsDialog_link { + mask-image: url('$(res)/img/external-link.svg'); + background-color: $accent-color; + width: 10px; + height: 10px; +} diff --git a/src/ScalarAuthClient.js b/src/ScalarAuthClient.js index e2b2bf0eb2..bab6ce3f67 100644 --- a/src/ScalarAuthClient.js +++ b/src/ScalarAuthClient.js @@ -1,5 +1,6 @@ /* Copyright 2016 OpenMarket Ltd +Copyright 2019 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. @@ -16,11 +17,14 @@ limitations under the License. import Promise from 'bluebird'; import SettingsStore from "./settings/SettingsStore"; +import { Service, presentTermsForServices, TermsNotSignedError } from './Terms'; const request = require('browser-request'); const SdkConfig = require('./SdkConfig'); const MatrixClientPeg = require('./MatrixClientPeg'); +import * as Matrix from 'matrix-js-sdk'; + // The version of the integration manager API we're intending to work with const imApiVersion = "1.1"; @@ -55,23 +59,11 @@ class ScalarAuthClient { if (!token) { return this.registerForToken(); } else { - return this.validateToken(token).then(userId => { - const me = MatrixClientPeg.get().getUserId(); - if (userId !== me) { - throw new Error("Scalar token is owned by someone else: " + me); - } - return token; - }).catch(err => { - console.error(err); - - // Something went wrong - try to get a new token. - console.warn("Registering for new scalar token"); - return this.registerForToken(); - }); + return this._checkToken(token); } } - validateToken(token) { + _getAccountName(token) { const url = SdkConfig.get().integrations_rest_url + "/account"; return new Promise(function(resolve, reject) { @@ -83,8 +75,10 @@ class ScalarAuthClient { }, (err, response, body) => { if (err) { reject(err); + } else if (body && body.errcode === 'M_TERMS_NOT_SIGNED') { + reject(new TermsNotSignedError()); } else if (response.statusCode / 100 !== 2) { - reject({statusCode: response.statusCode}); + reject(body); } else if (!body || !body.user_id) { reject(new Error("Missing user_id in response")); } else { @@ -94,11 +88,35 @@ class ScalarAuthClient { }); } + _checkToken(token) { + return this._getAccountName(token).then(userId => { + const me = MatrixClientPeg.get().getUserId(); + if (userId !== me) { + throw new Error("Scalar token is owned by someone else: " + me); + } + return token; + }).catch((e) => { + if (e instanceof TermsNotSignedError) { + console.log("Integrations manager requires new terms to be agreed to"); + return presentTermsForServices([new Service( + Matrix.SERVICETYPES.IM, + SdkConfig.get().integrations_rest_url, + token, + )]).then(() => { + return token; + }); + } + }); + } + registerForToken() { // Get openid bearer token from the HS as the first part of our dance return MatrixClientPeg.get().getOpenIdToken().then((tokenObject) => { // Now we can send that to scalar and exchange it for a scalar token return this.exchangeForScalarToken(tokenObject); + }).then((tokenObject) => { + // Validate it (this mostly checks to see if the IM needs us to agree to some terms) + return this._checkToken(tokenObject); }).then((tokenObject) => { window.localStorage.setItem("mx_scalar_token", tokenObject); return tokenObject; diff --git a/src/components/views/dialogs/TermsDialog.js b/src/components/views/dialogs/TermsDialog.js new file mode 100644 index 0000000000..de93957603 --- /dev/null +++ b/src/components/views/dialogs/TermsDialog.js @@ -0,0 +1,201 @@ +/* +Copyright 2019 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 url from 'url'; +import React from 'react'; +import PropTypes from 'prop-types'; +import sdk from '../../../index'; +import { _t, pickBestLanguage } from '../../../languageHandler'; + +import Matrix from 'matrix-js-sdk'; + +class TermsCheckbox extends React.Component { + static propTypes = { + onChange: PropTypes.func.isRequired, + url: PropTypes.string.isRequired, + checked: PropTypes.bool.isRequired, + } + + onChange = (ev) => { + this.props.onChange(this.props.url, ev.target.checked); + } + + render() { + return ; + } +} + +export default class TermsDialog extends React.Component { + static propTypes = { + /** + * Array of TermsWithService + */ + termsWithServices: PropTypes.arrayOf(PropTypes.object).isRequired, + + /** + * Called with: + * * success {bool} True if the user accepted any douments, false if cancelled + * * agreedUrls {string[]} List of agreed URLs + */ + onFinished: PropTypes.func.isRequired, + } + + constructor() { + super(); + this.state = { + // url -> boolean + agreedUrls: {}, + }; + } + + _onCancelClick = () => { + this.props.onFinished(false); + } + + _onNextClick = () => { + this.props.onFinished(true, Object.keys(this.state.agreedUrls).filter((url) => this.state.agreedUrls[url])); + } + + _nameForServiceType(serviceType, host) { + switch (serviceType) { + case Matrix.SERVICETYPES.IS: + return
{_t("Identity Server")}
({host})
; + case Matrix.SERVICETYPES.IM: + return
{_t("Integrations Manager")}
({host})
; + } + } + + _summaryForServiceType(serviceType, docName) { + switch (serviceType) { + case Matrix.SERVICETYPES.IS: + return
+ {_t("Find others by phone or email")} +
+ {_t("Be found by phone or email")} + {docName !== null ?
: ''} + {docName !== null ? '('+docName+')' : ''} +
; + case Matrix.SERVICETYPES.IM: + return
+ {_t("Use Bots, bridges, widgets and sticker packs")} + {docName !== null ?
: ''} + {docName !== null ? '('+docName+')' : ''} +
; + } + } + + _onTermsCheckboxChange = (url, checked) => { + this.state.agreedUrls[url] = checked; + this.setState({agreedUrls: this.state.agreedUrls}); + } + + render() { + const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog'); + const DialogButtons = sdk.getComponent('views.elements.DialogButtons'); + const AccessibleButton = sdk.getComponent('views.elements.AccessibleButton'); + + const rows = []; + for (const termsWithService of this.props.termsWithServices) { + const parsedBaseUrl = url.parse(termsWithService.service.baseUrl); + + const termsValues = Object.values(termsWithService.terms); + for (let i = 0; i < termsValues.length; ++i) { + const termDoc = termsValues[i]; + const termsLang = pickBestLanguage(Object.keys(termDoc).filter((k) => k !== 'version')); + let serviceName; + if (i === 0) { + serviceName = this._nameForServiceType(termsWithService.service.serviceType, parsedBaseUrl.host); + } + const summary = this._summaryForServiceType( + termsWithService.service.serviceType, + termsValues.length > 1 ? termDoc[termsLang].name : null, + ); + + rows.push( + {serviceName} + {summary} + +
+ + + ); + } + } + + // if all the documents for at least one service have been checked, we can enable + // the submit button + let enableSubmit = false; + for (const termsWithService of this.props.termsWithServices) { + let docsAgreedForService = 0; + for (const terms of Object.values(termsWithService.terms)) { + let docAgreed = false; + for (const lang of Object.keys(terms)) { + if (lang === 'version') continue; + if (this.state.agreedUrls[terms[lang].url]) { + docAgreed = true; + break; + } + } + if (docAgreed) { + ++docsAgreedForService; + } + } + if (docsAgreedForService === Object.keys(termsWithService.terms).length) { + enableSubmit = true; + break; + } + } + + return ( + +
+

{_t("To continue you need to accept the Terms of this service.")}

+ + + + + + + + + {rows} +
{_t("Service")}{_t("Summary")}{_t("Terms")}{_t("Accept")}
+
+ + + + ); + } +} diff --git a/src/components/views/elements/ManageIntegsButton.js b/src/components/views/elements/ManageIntegsButton.js index ef5604dba6..e470d42f25 100644 --- a/src/components/views/elements/ManageIntegsButton.js +++ b/src/components/views/elements/ManageIntegsButton.js @@ -21,6 +21,7 @@ import sdk from '../../../index'; import ScalarAuthClient from '../../../ScalarAuthClient'; import Modal from "../../../Modal"; import { _t } from '../../../languageHandler'; +import { showIntegrationsManager } from '../../../integrations/integrations'; export default class ManageIntegsButton extends React.Component { constructor(props) { @@ -30,10 +31,7 @@ export default class ManageIntegsButton extends React.Component { onManageIntegrations = (ev) => { ev.preventDefault(); - const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); - Modal.createDialog(IntegrationsManager, { - room: this.props.room, - }, "mx_IntegrationsManager"); + showIntegrationsManager({ room: this.props.room }); }; render() { diff --git a/src/components/views/rooms/AppsDrawer.js b/src/components/views/rooms/AppsDrawer.js index 3e5528996f..2976925594 100644 --- a/src/components/views/rooms/AppsDrawer.js +++ b/src/components/views/rooms/AppsDrawer.js @@ -29,6 +29,7 @@ import { _t } from '../../../languageHandler'; import WidgetUtils from '../../../utils/WidgetUtils'; import WidgetEchoStore from "../../../stores/WidgetEchoStore"; import AccessibleButton from '../elements/AccessibleButton'; +import { showIntegrationsManager } from '../../../integrations/integrations'; // The maximum number of widgets that can be added in a room const MAX_WIDGETS = 2; @@ -127,11 +128,10 @@ module.exports = React.createClass({ }, _launchManageIntegrations: function() { - const IntegrationsManager = sdk.getComponent('views.settings.IntegrationsManager'); - Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, { + showIntegrationsManager({ room: this.props.room, screen: 'add_integ', - }, 'mx_IntegrationsManager'); + }); }, onClickAddWidget: function(e) { diff --git a/src/components/views/settings/IntegrationsManager.js b/src/components/views/settings/IntegrationsManager.js index 754693b73e..0f42940a7d 100644 --- a/src/components/views/settings/IntegrationsManager.js +++ b/src/components/views/settings/IntegrationsManager.js @@ -24,60 +24,26 @@ import ScalarAuthClient from '../../../ScalarAuthClient'; export default class IntegrationsManager extends React.Component { static propTypes = { - // the room object where the integrations manager should be opened in - room: PropTypes.object.isRequired, + // false to display an error saying that there is no integrations manager configured + configured: PropTypes.bool.isRequired, - // the screen name to open - screen: PropTypes.string, + // false to display an error saying that we couldn't connect to the integrations manager + connected: PropTypes.bool.isRequired, - // the integration ID to open - integrationId: PropTypes.string, + // true to display a loading spinner + loading: PropTypes.bool.isRequired, + + // The source URL to load + url: PropTypes.string, // callback when the manager is dismissed onFinished: PropTypes.func.isRequired, }; - constructor(props) { - super(props); - - this.state = { - loading: true, - configured: ScalarAuthClient.isPossible(), - connected: false, // true if a `src` is set and able to be connected to - src: null, // string for where to connect to - }; - } - - componentWillMount() { - if (!this.state.configured) return; - - const scalarClient = new ScalarAuthClient(); - scalarClient.connect().then(() => { - const hasCredentials = scalarClient.hasCredentials(); - if (!hasCredentials) { - this.setState({ - connected: false, - loading: false, - }); - } else { - const src = scalarClient.getScalarInterfaceUrlForRoom( - this.props.room, - this.props.screen, - this.props.integrationId, - ); - this.setState({ - loading: false, - connected: true, - src: src, - }); - } - }).catch(err => { - console.error(err); - this.setState({ - loading: false, - connected: false, - }); - }); + static defaultProps = { + configured: true, + connected: true, + loading: false, } componentDidMount() { @@ -105,7 +71,7 @@ export default class IntegrationsManager extends React.Component { }; render() { - if (!this.state.configured) { + if (!this.props.configured) { return (

{_t("No integrations server configured")}

@@ -114,7 +80,7 @@ export default class IntegrationsManager extends React.Component { ); } - if (this.state.loading) { + if (this.props.loading) { const Spinner = sdk.getComponent("elements.Spinner"); return (
@@ -124,7 +90,7 @@ export default class IntegrationsManager extends React.Component { ); } - if (!this.state.connected) { + if (!this.props.connected) { return (

{_t("Cannot connect to integrations server")}

@@ -133,6 +99,6 @@ export default class IntegrationsManager extends React.Component { ); } - return ; + return ; } } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5d100bcfb0..059ce56e85 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -93,7 +93,6 @@ "Failed to add the following rooms to %(groupId)s:": "Failed to add the following rooms to %(groupId)s:", "Unnamed Room": "Unnamed Room", "Error": "Error", - "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)", "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.", "Dismiss": "Dismiss", "Riot does not have permission to send you notifications - please check your browser settings": "Riot does not have permission to send you notifications - please check your browser settings", @@ -928,6 +927,7 @@ "Saturday": "Saturday", "Today": "Today", "Yesterday": "Yesterday", + "View Source": "View Source", "Error decrypting audio": "Error decrypting audio", "Reply": "Reply", "Edit": "Edit", @@ -1127,6 +1127,7 @@ "Start chatting": "Start chatting", "Click on the button below to start chatting!": "Click on the button below to start chatting!", "Start Chatting": "Start Chatting", + "You cannot delete this message. (%(code)s)": "You cannot delete this message. (%(code)s)", "Removing…": "Removing…", "Confirm Removal": "Confirm Removal", "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.": "Are you sure you wish to remove (delete) this event? Note that if you delete a room name or topic change, it could undo the change.", @@ -1265,6 +1266,17 @@ "Missing session data": "Missing session data", "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.": "Some session data, including encrypted message keys, is missing. Sign out and sign in to fix this, restoring keys from backup.", "Your browser likely removed this data when running low on disk space.": "Your browser likely removed this data when running low on disk space.", + "Identity Server": "Identity Server", + "Integrations Manager": "Integrations Manager", + "Find others by phone or email": "Find others by phone or email", + "Be found by phone or email": "Be found by phone or email", + "Use Bots, bridges, widgets and sticker packs": "Use Bots, bridges, widgets and sticker packs", + "Terms of Service": "Terms of Service", + "To continue you need to accept the Terms of this service.": "To continue you need to accept the Terms of this service.", + "Service": "Service", + "Summary": "Summary", + "Terms": "Terms", + "Next": "Next", "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.": "You are currently blacklisting unverified devices; to send messages to these devices you must verify them.", "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.": "We recommend you go through the verification process for each device to confirm they belong to their legitimate owner, but you can resend the message without verifying if you prefer.", "Room contains unknown devices": "Room contains unknown devices", @@ -1298,7 +1310,6 @@ "Enter Recovery Passphrase": "Enter Recovery Passphrase", "Warning: you should only set up key backup from a trusted computer.": "Warning: you should only set up key backup from a trusted computer.", "Access your secure message history and set up secure messaging by entering your recovery passphrase.": "Access your secure message history and set up secure messaging by entering your recovery passphrase.", - "Next": "Next", "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options": "If you've forgotten your recovery passphrase you can use your recovery key or set up new recovery options", "Enter Recovery Key": "Enter Recovery Key", "This looks like a valid recovery key!": "This looks like a valid recovery key!", @@ -1319,7 +1330,6 @@ "Cancel Sending": "Cancel Sending", "Forward Message": "Forward Message", "Pin Message": "Pin Message", - "View Source": "View Source", "View Decrypted Source": "View Decrypted Source", "Unhide Preview": "Unhide Preview", "Share Permalink": "Share Permalink", diff --git a/src/integrations/integrations.js b/src/integrations/integrations.js new file mode 100644 index 0000000000..670274a90b --- /dev/null +++ b/src/integrations/integrations.js @@ -0,0 +1,55 @@ +/* +Copyright 2019 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 sdk from "../index"; +import ScalarAuthClient from '../ScalarAuthClient'; +import Modal from '../Modal'; +import { TermsNotSignedError } from '../Terms'; + +export async function showIntegrationsManager(opts) { + const IntegrationsManager = sdk.getComponent("views.settings.IntegrationsManager"); + + const close = Modal.createTrackedDialog( + 'Integrations Manager', '', IntegrationsManager, { loading: true }, "mx_IntegrationsManager", + ).close; + + const scalarClient = new ScalarAuthClient(); + let props; + try { + await scalarClient.connect(); + if (!scalarClient.hasCredentials()) { + props = { connected: false }; + } else { + props = { + url: scalarClient.getScalarInterfaceUrlForRoom( + opts.room, + opts.screen, + opts.integrationId, + ), + }; + } + } catch (err) { + if (err instanceof TermsNotSignedError) { + // user canceled terms dialog, so just cancel the action + close(); + return; + } + console.error(err); + props = { connected: false }; + } + close(); + Modal.createTrackedDialog('Integrations Manager', '', IntegrationsManager, props, "mx_IntegrationsManager"); +} diff --git a/src/languageHandler.js b/src/languageHandler.js index 267d62a7bb..c1a426383b 100644 --- a/src/languageHandler.js +++ b/src/languageHandler.js @@ -1,6 +1,7 @@ /* Copyright 2017 MTRNord and Cooperative EITA Copyright 2017 Vector Creations Ltd. +Copyright 2019 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. @@ -353,6 +354,40 @@ export function getCurrentLanguage() { return counterpart.getLocale(); } +/** + * Given a list of language codes, pick the most appropriate one + * given the current language (ie. getCurrentLanguage()) + * English is assumed to be a reasonable default. + * + * @param {string[]} langs List of language codes to pick from + * @returns {string} The most appropriate language code from langs + */ +export function pickBestLanguage(langs) { + const currentLang = getCurrentLanguage(); + const normalisedLangs = langs.map(normalizeLanguageKey); + + { + // Best is an exact match + const currentLangIndex = normalisedLangs.indexOf(currentLang); + if (currentLangIndex > -1) return langs[currentLangIndex]; + } + + { + // Failing that, a different dialect of the same lnguage + const closeLangIndex = normalisedLangs.find((l) => l.substr(0,2) === currentLang.substr(0,2)); + if (closeLangIndex > -1) return langs[closeLangIndex]; + } + + { + // Neither of those? Try an english variant. + const enIndex = normalisedLangs.find((l) => l.startsWith('en')); + if (enIndex > -1) return langs[enIndex]; + } + + // if nothing else, use the first + return langs[0]; +} + function getLangsJson() { return new Promise((resolve, reject) => { let url;