Merge pull request #3314 from matrix-org/dbkr/warn_if_bound_threepids

Warn on disconnecting from IS

src/boundThreepids.js

@@ -0,0 +1,52 @@
+/*
+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 IdentityAuthClient from './IdentityAuthClient';
+
+export async function getThreepidBindStatus(client, filterMedium) {
+    const userId = client.getUserId();
+
+    let { threepids } = await client.getThreePids();
+    if (filterMedium) {
+        threepids = threepids.filter((a) => a.medium === filterMedium);
+    }
+
+    if (threepids.length > 0) {
+        // TODO: Handle terms agreement
+        // See https://github.com/vector-im/riot-web/issues/10522
+        const authClient = new IdentityAuthClient();
+        const identityAccessToken = await authClient.getAccessToken();
+
+        // Restructure for lookup query
+        const query = threepids.map(({ medium, address }) => [medium, address]);
+        const lookupResults = await client.bulkLookupThreePids(query, identityAccessToken);
+
+        // Record which are already bound
+        for (const [medium, address, mxid] of lookupResults.threepids) {
+            if (mxid !== userId) {
+                continue;
+            }
+            if (filterMedium && medium !== filterMedium) {
+                continue;
+            }
+            const threepid = threepids.find(e => e.medium === medium && e.address === address);
+            if (!threepid) continue;
+            threepid.bound = true;
+        }
+    }
+
+    return threepids;
+}

src/components/views/settings/SetIdServer.js

@@ -22,6 +22,7 @@ import MatrixClientPeg from "../../../MatrixClientPeg";
 import SdkConfig from "../../../SdkConfig";
 import Modal from '../../../Modal';
 import dis from "../../../dispatcher";
+import { getThreepidBindStatus } from '../../../boundThreepids';
 
 /**
  * If a url has no path component, etc. abbreviate it to just the hostname
@@ -98,6 +99,7 @@ export default class SetIdServer extends React.Component {
             idServer: defaultIdServer,
             error: null,
             busy: false,
+            disconnectBusy: false,
         };
     }
 
@@ -150,17 +152,35 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _onDisconnectClicked = () => {
+    _onDisconnectClicked = async () => {
+        this.setState({disconnectBusy: true});
+        try {
+            const threepids = await getThreepidBindStatus(MatrixClientPeg.get());
+
+            const boundThreepids = threepids.filter(tp => tp.bound);
+            let message;
+            if (boundThreepids.length) {
+                message = _t(
+                    "You are currently sharing email addresses or phone numbers on the identity " +
+                    "server <idserver />. You will need to reconnect to <idserver2 /> to stop " +
+                    "sharing them.", {},
+                    {
+                        idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>,
+                        // XXX: https://github.com/vector-im/riot-web/issues/9086
+                        idserver2: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>,
+                    },
+                );
+            } else {
+                message = _t(
+                    "Disconnect from the identity server <idserver />?", {},
+                    {idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>},
+                );
+            }
+
             const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
             Modal.createTrackedDialog('Identity Server Disconnect Warning', '', QuestionDialog, {
                 title: _t("Disconnect Identity Server"),
-            description:
+                description: message,
-                <div>
-                    {_t(
-                        "Disconnect from the identity server <idserver />?", {},
-                        {idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>},
-                    )},
-                </div>,
                 button: _t("Disconnect"),
                 onFinished: (confirmed) => {
                     if (confirmed) {
@@ -168,6 +188,9 @@ export default class SetIdServer extends React.Component {
                     }
                 },
             });
+        } finally {
+            this.setState({disconnectBusy: false});
+        }
     };
 
     _disconnectIdServer = () => {
@@ -215,6 +238,11 @@ export default class SetIdServer extends React.Component {
 
         let discoSection;
         if (idServerUrl) {
+            let discoButtonContent = _t("Disconnect");
+            if (this.state.disconnectBusy) {
+                const InlineSpinner = sdk.getComponent('views.elements.InlineSpinner');
+                discoButtonContent = <InlineSpinner />;
+            }
             discoSection = <div>
                 <span className="mx_SettingsTab_subsectionText">{_t(
                     "Disconnecting from your identity server will mean you " +
@@ -222,7 +250,7 @@ export default class SetIdServer extends React.Component {
                     "able to invite others by email or phone.",
                 )}</span>
                 <AccessibleButton onClick={this._onDisconnectClicked} kind="danger">
-                    {_t("Disconnect")}
+                    {discoButtonContent}
                 </AccessibleButton>
             </div>;
         }

src/components/views/settings/discovery/EmailAddresses.js

@@ -22,8 +22,8 @@ import { _t } from "../../../../languageHandler";
 import MatrixClientPeg from "../../../../MatrixClientPeg";
 import sdk from '../../../../index';
 import Modal from '../../../../Modal';
-import IdentityAuthClient from '../../../../IdentityAuthClient';
 import AddThreepid from '../../../../AddThreepid';
+import { getThreepidBindStatus } from '../../../../boundThreepids';
 
 /*
 TODO: Improve the UX for everything in here.
@@ -198,31 +198,8 @@ export default class EmailAddresses extends React.Component {
 
     async componentWillMount() {
         const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
 
-        const { threepids } = await client.getThreePids();
+        const emails = await getThreepidBindStatus(client, 'email');
-        const emails = threepids.filter((a) => a.medium === 'email');
-
-        if (emails.length > 0) {
-            // TODO: Handle terms agreement
-            // See https://github.com/vector-im/riot-web/issues/10522
-            const authClient = new IdentityAuthClient();
-            const identityAccessToken = await authClient.getAccessToken();
-
-            // Restructure for lookup query
-            const query = emails.map(({ medium, address }) => [medium, address]);
-            const lookupResults = await client.bulkLookupThreePids(query, identityAccessToken);
-
-            // Record which are already bound
-            for (const [medium, address, mxid] of lookupResults.threepids) {
-                if (medium !== "email" || mxid !== userId) {
-                    continue;
-                }
-                const email = emails.find(e => e.address === address);
-                if (!email) continue;
-                email.bound = true;
-            }
-        }
 
         this.setState({ emails });
     }

src/components/views/settings/discovery/PhoneNumbers.js

@@ -22,8 +22,8 @@ import { _t } from "../../../../languageHandler";
 import MatrixClientPeg from "../../../../MatrixClientPeg";
 import sdk from '../../../../index';
 import Modal from '../../../../Modal';
-import IdentityAuthClient from '../../../../IdentityAuthClient';
 import AddThreepid from '../../../../AddThreepid';
+import { getThreepidBindStatus } from '../../../../boundThreepids';
 
 /*
 TODO: Improve the UX for everything in here.
@@ -217,31 +217,8 @@ export default class PhoneNumbers extends React.Component {
 
     async componentWillMount() {
         const client = MatrixClientPeg.get();
-        const userId = client.getUserId();
 
-        const { threepids } = await client.getThreePids();
+        const msisdns = await getThreepidBindStatus(client, 'msisdn');
-        const msisdns = threepids.filter((a) => a.medium === 'msisdn');
-
-        if (msisdns.length > 0) {
-            // TODO: Handle terms agreement
-            // See https://github.com/vector-im/riot-web/issues/10522
-            const authClient = new IdentityAuthClient();
-            const identityAccessToken = await authClient.getAccessToken();
-
-            // Restructure for lookup query
-            const query = msisdns.map(({ medium, address }) => [medium, address]);
-            const lookupResults = await client.bulkLookupThreePids(query, identityAccessToken);
-
-            // Record which are already bound
-            for (const [medium, address, mxid] of lookupResults.threepids) {
-                if (medium !== "msisdn" || mxid !== userId) {
-                    continue;
-                }
-                const msisdn = msisdns.find(e => e.address === address);
-                if (!msisdn) continue;
-                msisdn.bound = true;
-            }
-        }
 
         this.setState({ msisdns });
     }

src/i18n/strings/en_EN.json

@@ -548,8 +548,9 @@
     "Not a valid Identity Server (status code %(code)s)": "Not a valid Identity Server (status code %(code)s)",
     "Could not connect to Identity Server": "Could not connect to Identity Server",
     "Checking server": "Checking server",
-    "Disconnect Identity Server": "Disconnect Identity Server",
+    "You are currently sharing email addresses or phone numbers on the identity server <idserver />. You will need to reconnect to <idserver2 /> to stop sharing them.": "You are currently sharing email addresses or phone numbers on the identity server <idserver />. You will need to reconnect to <idserver2 /> to stop sharing them.",
     "Disconnect from the identity server <idserver />?": "Disconnect from the identity server <idserver />?",
+    "Disconnect Identity Server": "Disconnect Identity Server",
     "Disconnect": "Disconnect",
     "Identity Server (%(server)s)": "Identity Server (%(server)s)",
     "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.": "You are currently using <server></server> to discover and be discoverable by existing contacts you know. You can change your identity server below.",