Merge pull request #3327 from matrix-org/travis/discover-terms

Handle terms agreement in Discovery section of user settings

src/components/views/settings/SetIdServer.js

@@ -25,38 +25,7 @@ import dis from "../../../dispatcher";
 import { getThreepidBindStatus } from '../../../boundThreepids';
 import IdentityAuthClient from "../../../IdentityAuthClient";
 import {SERVICE_TYPES} from "matrix-js-sdk";
-
-/**
- * If a url has no path component, etc. abbreviate it to just the hostname
- *
- * @param {string} u The url to be abbreviated
- * @returns {string} The abbreviated url
- */
-function abbreviateUrl(u) {
-    if (!u) return '';
-
-    const parsedUrl = url.parse(u);
-    // if it's something we can't parse as a url then just return it
-    if (!parsedUrl) return u;
-
-    if (parsedUrl.path == '/') {
-        // we ignore query / hash parts: these aren't relevant for IS server URLs
-        return parsedUrl.host;
-    }
-
-    return u;
-}
-
-function unabbreviateUrl(u) {
-    if (!u) return '';
-
-    let longUrl = u;
-    if (!u.startsWith('https://')) longUrl = 'https://' + u;
-    const parsed = url.parse(longUrl);
-    if (parsed.hostname === null) return u;
-
-    return longUrl;
-}
+import {abbreviateUrl, unabbreviateUrl} from "../../../utils/UrlUtils";
 
 /**
  * Check an IS URL is valid, including liveness check

src/components/views/settings/tabs/user/GeneralUserSettingsTab.js

@@ -33,6 +33,10 @@ import MatrixClientPeg from "../../../../../MatrixClientPeg";
 import sdk from "../../../../..";
 import Modal from "../../../../../Modal";
 import dis from "../../../../../dispatcher";
+import {Service, startTermsFlow} from "../../../../../Terms";
+import {SERVICE_TYPES} from "matrix-js-sdk";
+import IdentityAuthClient from "../../../../../IdentityAuthClient";
+import {abbreviateUrl} from "../../../../../utils/UrlUtils";
 
 export default class GeneralUserSettingsTab extends React.Component {
     static propTypes = {
@@ -47,6 +51,13 @@ export default class GeneralUserSettingsTab extends React.Component {
             theme: SettingsStore.getValueAt(SettingLevel.ACCOUNT, "theme"),
             haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl()),
             serverRequiresIdServer: null,
+            idServerHasUnsignedTerms: false,
+            requiredPolicyInfo: {       // This object is passed along to a component for handling
+                hasTerms: false,
+                // policiesAndServices, // From the startTermsFlow callback
+                // agreedUrls,          // From the startTermsFlow callback
+                // resolve,             // Promise resolve function for startTermsFlow callback
+            },
         };
 
         this.dispatcherRef = dis.register(this._onAction);
@@ -55,6 +66,9 @@ export default class GeneralUserSettingsTab extends React.Component {
     async componentWillMount() {
         const serverRequiresIdServer = await MatrixClientPeg.get().doesServerRequireIdServerParam();
         this.setState({serverRequiresIdServer});
+
+        // Check to see if terms need accepting
+        this._checkTerms();
     }
 
     componentWillUnmount() {
@@ -64,9 +78,48 @@ export default class GeneralUserSettingsTab extends React.Component {
     _onAction = (payload) => {
         if (payload.action === 'id_server_changed') {
             this.setState({haveIdServer: Boolean(MatrixClientPeg.get().getIdentityServerUrl())});
+            this._checkTerms();
         }
     };
 
+    async _checkTerms() {
+        if (!this.state.haveIdServer) {
+            this.setState({idServerHasUnsignedTerms: false});
+            return;
+        }
+
+        // By starting the terms flow we get the logic for checking which terms the user has signed
+        // for free. So we might as well use that for our own purposes.
+        const authClient = new IdentityAuthClient();
+        console.log("Getting access token...");
+        const idAccessToken = await authClient.getAccessToken(/*check=*/false);
+        console.log("Got access token: " + idAccessToken);
+        startTermsFlow([new Service(
+            SERVICE_TYPES.IS,
+            MatrixClientPeg.get().getIdentityServerUrl(),
+            idAccessToken,
+        )], (policiesAndServices, agreedUrls, extraClassNames) => {
+            return new Promise((resolve, reject) => {
+               this.setState({
+                   idServerName: abbreviateUrl(MatrixClientPeg.get().getIdentityServerUrl()),
+                   requiredPolicyInfo: {
+                       hasTerms: true,
+                       policiesAndServices,
+                       agreedUrls,
+                       resolve,
+                   },
+               });
+            });
+        }).then(() => {
+            // User accepted all terms
+            this.setState({
+                requiredPolicyInfo: {
+                    hasTerms: false,
+                },
+            });
+        });
+    }
+
     _onLanguageChange = (newLanguage) => {
         if (this.state.language === newLanguage) return;
 
@@ -198,6 +251,23 @@ export default class GeneralUserSettingsTab extends React.Component {
     }
 
     _renderDiscoverySection() {
+        if (this.state.requiredPolicyInfo.hasTerms) {
+            const InlineTermsAgreement = sdk.getComponent("views.terms.InlineTermsAgreement");
+            const intro = <span className="mx_SettingsTab_subsectionText">
+                {_t(
+                    "Agree to the identity server (%(serverName)s) Terms of Service to " +
+                    "allow yourself to be discoverable by email address or phone number.",
+                    {serverName: this.state.idServerName},
+                )}
+            </span>;
+            return <InlineTermsAgreement
+                policiesAndServicePairs={this.state.requiredPolicyInfo.policiesAndServices}
+                agreedUrls={this.state.requiredPolicyInfo.agreedUrls}
+                onFinished={this.state.requiredPolicyInfo.resolve}
+                introElement={intro}
+            />;
+        }
+
         const EmailAddresses = sdk.getComponent("views.settings.discovery.EmailAddresses");
         const PhoneNumbers = sdk.getComponent("views.settings.discovery.PhoneNumbers");
         const SetIdServer = sdk.getComponent("views.settings.SetIdServer");
@@ -246,6 +316,12 @@ export default class GeneralUserSettingsTab extends React.Component {
     }
 
     render() {
+        const discoWarning = this.state.requiredPolicyInfo.hasTerms
+            ? <img className='mx_GeneralUserSettingsTab_warningIcon'
+                src={require("../../../../../../res/img/feather-customised/warning-triangle.svg")}
+                width="18" height="18" alt={_t("Warning")} />
+            : null;
+
         return (
             <div className="mx_SettingsTab">
                 <div className="mx_SettingsTab_heading">{_t("General")}</div>
@@ -253,7 +329,7 @@ export default class GeneralUserSettingsTab extends React.Component {
                 {this._renderAccountSection()}
                 {this._renderLanguageSection()}
                 {this._renderThemeSection()}
-                <div className="mx_SettingsTab_heading">{_t("Discovery")}</div>
+                <div className="mx_SettingsTab_heading">{discoWarning} {_t("Discovery")}</div>
                 {this._renderDiscoverySection()}
                 {this._renderIntegrationManagerSection() /* Has its own title */}
                 <div className="mx_SettingsTab_heading">{_t("Deactivate account")}</div>

src/components/views/terms/InlineTermsAgreement.js

@@ -0,0 +1,119 @@
+/*
+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 React from "react";
+import PropTypes from "prop-types";
+import {_t, pickBestLanguage} from "../../../languageHandler";
+import sdk from "../../../..";
+
+export default class InlineTermsAgreement extends React.Component {
+    static propTypes = {
+        policiesAndServicePairs: PropTypes.array.isRequired, // array of service/policy pairs
+        agreedUrls: PropTypes.array.isRequired, // array of URLs the user has accepted
+        onFinished: PropTypes.func.isRequired, // takes an argument of accepted URLs
+        introElement: PropTypes.node,
+    };
+
+    constructor() {
+        super();
+
+        this.state = {
+            policies: [],
+            busy: false,
+        };
+    }
+
+    componentDidMount() {
+        // Build all the terms the user needs to accept
+        const policies = []; // { checked, url, name }
+        for (const servicePolicies of this.props.policiesAndServicePairs) {
+            const availablePolicies = Object.values(servicePolicies.policies);
+            for (const policy of availablePolicies) {
+                const language = pickBestLanguage(Object.keys(policy).filter(p => p !== 'version'));
+                const renderablePolicy = {
+                    checked: false,
+                    url: policy[language].url,
+                    name: policy[language].name,
+                };
+                policies.push(renderablePolicy);
+            }
+        }
+
+        this.setState({policies});
+    }
+
+    _togglePolicy = (index) => {
+        const policies = JSON.parse(JSON.stringify(this.state.policies)); // deep & cheap clone
+        policies[index].checked = !policies[index].checked;
+        this.setState({policies});
+    };
+
+    _onContinue = () => {
+        const hasUnchecked = !!this.state.policies.some(p => !p.checked);
+        if (hasUnchecked) return;
+
+        this.setState({busy: true});
+        this.props.onFinished(this.state.policies.map(p => p.url));
+    };
+
+    _renderCheckboxes() {
+        const rendered = [];
+        for (let i = 0; i < this.state.policies.length; i++) {
+            const policy = this.state.policies[i];
+            const introText = _t(
+                "Accept <policyLink /> to continue:", {}, {
+                    policyLink: () => {
+                        return (
+                            <a href={policy.url} rel='noopener' target='_blank'>
+                                {policy.name}
+                                <span className='mx_InlineTermsAgreement_link' />
+                            </a>
+                        );
+                    },
+                },
+            );
+            rendered.push(
+                <div key={i} className='mx_InlineTermsAgreement_cbContainer'>
+                    <div>{introText}</div>
+                    <div className='mx_InlineTermsAgreement_checkbox'>
+                        <input type='checkbox' onChange={() => this._togglePolicy(i)} checked={policy.checked} />
+                        {_t("Accept")}
+                    </div>
+                </div>,
+            );
+        }
+        return rendered;
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent("views.elements.AccessibleButton");
+        const hasUnchecked = !!this.state.policies.some(p => !p.checked);
+
+        return (
+            <div>
+                {this.props.introElement}
+                {this._renderCheckboxes()}
+                <AccessibleButton
+                    onClick={this._onContinue}
+                    disabled={hasUnchecked || this.state.busy}
+                    kind="primary_sm"
+                >
+                    {_t("Continue")}
+                </AccessibleButton>
+            </div>
+        );
+    }
+}