Use separate MSISDN add and bind flow for supporting HSes

This changes the paths used for binding MSISDNs for discovery to use the new
separate bind / unbind APIs on supporting servers.

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

src/AddThreepid.js

@@ -119,10 +119,30 @@ export default class AddThreepid {
      * @param {string} phoneNumber The national or international formatted phone number to add
      * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
      */
-    bindMsisdn(phoneCountry, phoneNumber) {
+    async bindMsisdn(phoneCountry, phoneNumber) {
         this.bind = true;
-        // TODO: Actually use a different API here
+        if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
-        return this.addMsisdn(phoneCountry, phoneNumber);
+            // For separate bind, request a token directly from the IS.
+            const authClient = new IdentityAuthClient();
+            const identityAccessToken = await authClient.getAccessToken();
+            return MatrixClientPeg.get().requestMsisdnToken(
+                phoneCountry, phoneNumber, this.clientSecret, 1,
+                undefined, undefined, identityAccessToken,
+            ).then((res) => {
+                this.sessionId = res.sid;
+                return res;
+            }, function(err) {
+                if (err.errcode === 'M_THREEPID_IN_USE') {
+                    err.message = _t('This phone number is already in use');
+                } else if (err.httpStatus) {
+                    err.message = err.message + ` (Status ${err.httpStatus})`;
+                }
+                throw err;
+            });
+        } else {
+            // For tangled bind, request a token via the HS.
+            return this.addMsisdn(phoneCountry, phoneNumber);
+        }
     }
 
     /**
@@ -189,10 +209,28 @@ export default class AddThreepid {
         }
 
         const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
-        return MatrixClientPeg.get().addThreePid({
+        if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
-            sid: this.sessionId,
+            if (this.bind) {
-            client_secret: this.clientSecret,
+                const authClient = new IdentityAuthClient();
-            id_server: identityServerDomain,
+                const identityAccessToken = await authClient.getAccessToken();
-        }, this.bind);
+                await MatrixClientPeg.get().bindThreePid({
+                    sid: this.sessionId,
+                    client_secret: this.clientSecret,
+                    id_server: identityServerDomain,
+                    id_access_token: identityAccessToken,
+                });
+            } else {
+                await MatrixClientPeg.get().addThreePidOnly({
+                    sid: this.sessionId,
+                    client_secret: this.clientSecret,
+                });
+            }
+        } else {
+            await MatrixClientPeg.get().addThreePid({
+                sid: this.sessionId,
+                client_secret: this.clientSecret,
+                id_server: identityServerDomain,
+            }, this.bind);
+        }
     }
 }

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

@@ -56,6 +56,48 @@ export class PhoneNumber extends React.Component {
     }
 
     async changeBinding({ bind, label, errorTitle }) {
+        if (!await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
+            return this.changeBindingTangledAddBind({ bind, label, errorTitle });
+        }
+
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const { medium, address } = this.props.msisdn;
+
+        try {
+            if (bind) {
+                const task = new AddThreepid();
+                this.setState({
+                    verifying: true,
+                    continueDisabled: true,
+                    addTask: task,
+                });
+                // XXX: Sydent will accept a number without country code if you add
+                // a leading plus sign to a number in E.164 format (which the 3PID
+                // address is), but this goes against the spec.
+                // See https://github.com/matrix-org/matrix-doc/issues/2222
+                await task.bindMsisdn(null, `+${address}`);
+                this.setState({
+                    continueDisabled: false,
+                });
+            } else {
+                await MatrixClientPeg.get().unbindThreePid(medium, address);
+            }
+            this.setState({ bound: bind });
+        } catch (err) {
+            console.error(`Unable to ${label} phone number ${address} ${err}`);
+            this.setState({
+                verifying: false,
+                continueDisabled: false,
+                addTask: null,
+            });
+            Modal.createTrackedDialog(`Unable to ${label} phone number`, '', ErrorDialog, {
+                title: errorTitle,
+                description: ((err && err.message) ? err.message : _t("Operation failed")),
+            });
+        }
+    }
+
+    async changeBindingTangledAddBind({ bind, label, errorTitle }) {
         const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         const { medium, address } = this.props.msisdn;
 
@@ -67,12 +109,6 @@ export class PhoneNumber extends React.Component {
         });
 
         try {
-            // XXX: Unfortunately, at the moment we can't just bind via the HS
-            // in a single operation, at it will error saying the 3PID is in use
-            // even though it's in use by the current user. For the moment, we
-            // work around this by removing the 3PID from the HS and re-adding
-            // it with IS binding enabled.
-            // See https://github.com/matrix-org/matrix-doc/pull/2140/files#r311462052
             await MatrixClientPeg.get().deleteThreePid(medium, address);
             // XXX: Sydent will accept a number without country code if you add
             // a leading plus sign to a number in E.164 format (which the 3PID