Warn on disconnecting from IS

...if the user has bound threepids

Fixes https://github.com/vector-im/riot-web/issues/10550

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,24 +152,45 @@ export default class SetIdServer extends React.Component {
         });
     };
 
-    _onDisconnectClicked = () => {
-        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
-        Modal.createTrackedDialog('Identity Server Disconnect Warning', '', QuestionDialog, {
-            title: _t("Disconnect Identity Server"),
-            description:
-                <div>
-                    {_t(
-                        "Disconnect from the identity server <idserver />?", {},
-                        {idserver: sub => <b>{abbreviateUrl(this.state.currentClientIdServer)}</b>},
-                    )},
-                </div>,
-            button: _t("Disconnect"),
-            onFinished: (confirmed) => {
-                if (confirmed) {
-                    this._disconnectIdServer();
-                }
-            },
-        });
+    _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/10564
+                        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: message,
+                button: _t("Disconnect"),
+                onFinished: (confirmed) => {
+                    if (confirmed) {
+                        this._disconnectIdServer();
+                    }
+                },
+            });
+        } 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

@@ -24,6 +24,7 @@ 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.
@@ -201,28 +202,7 @@ export default class EmailAddresses extends React.Component {
         const userId = client.getUserId();
 
         const { threepids } = await client.getThreePids();
-        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;
-            }
-        }
+        const emails = await getThreepidBindStatus(client, 'email');
 
         this.setState({ emails });
     }

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

@@ -24,6 +24,7 @@ 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.
@@ -220,28 +221,7 @@ export default class PhoneNumbers extends React.Component {
         const userId = client.getUserId();
 
         const { threepids } = await client.getThreePids();
-        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;
-            }
-        }
+        const msisdns = await getThreepidBindStatus(client, 'msisdn');
 
         this.setState({ msisdns });
     }

src/i18n/strings/en_EN.json

@@ -543,8 +543,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.",