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>