Support UI Auth on adding email address

src/AddThreepid.js

@@ -17,6 +17,8 @@ limitations under the License.
 */
 
 import MatrixClientPeg from './MatrixClientPeg';
+import sdk from './index';
+import Modal from './Modal';
 import { _t } from './languageHandler';
 import IdentityAuthClient from './IdentityAuthClient';
 
@@ -155,10 +157,10 @@ export default class AddThreepid {
      * the request failed.
      */
     async checkEmailLinkClicked() {
-        const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
         try {
             if (await MatrixClientPeg.get().doesServerSupportSeparateAddAndBind()) {
                 if (this.bind) {
+                    const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
                     const authClient = new IdentityAuthClient();
                     const identityAccessToken = await authClient.getAccessToken();
                     await MatrixClientPeg.get().bindThreePid({
@@ -168,12 +170,31 @@ export default class AddThreepid {
                         id_access_token: identityAccessToken,
                     });
                 } else {
-                    await MatrixClientPeg.get().addThreePidOnly({
-                        sid: this.sessionId,
-                        client_secret: this.clientSecret,
+                    try {
+                        await this._makeAddThreepidOnlyRequest();
+
+                        // The spec has always required this to use UI auth but synapse briefly
+                        // implemented it without, so this may just succeed and that's OK.
+                        return;
+                    } catch (e) {
+                        if (e.httpStatus !== 401 || !e.data || !e.data.flows) {
+                            // doesn't look like an interactive-auth failure
+                            throw e;
+                        }
+
+                        // pop up an interactive auth dialog
+                        const InteractiveAuthDialog = sdk.getComponent("dialogs.InteractiveAuthDialog");
+
+                        Modal.createTrackedDialog('Add Email', '', InteractiveAuthDialog, {
+                            title: _t("Add Email Address"),
+                            matrixClient: MatrixClientPeg.get(),
+                            authData: e.data,
+                            makeRequest: this._makeAddThreepidOnlyRequest,
                         });
                     }
+                }
             } else {
+                const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
                 await MatrixClientPeg.get().addThreePid({
                     sid: this.sessionId,
                     client_secret: this.clientSecret,
@@ -190,6 +211,18 @@ export default class AddThreepid {
         }
     }
 
+    /**
+     * @param {Object} auth UI auth object
+     * @return {Promise<Object>} Response from /3pid/add call (in current spec, an empty object)
+     */
+    _makeAddThreepidOnlyRequest = (auth) => {
+        return MatrixClientPeg.get().addThreePidOnly({
+            sid: this.sessionId,
+            client_secret: this.clientSecret,
+            auth,
+        });
+    }
+
     /**
      * Takes a phone number verification code as entered by the user and validates
      * it with the ID server, then if successful, adds the phone number.

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

@@ -195,7 +195,7 @@ export default class EmailAddresses extends React.Component {
             this.setState({continueDisabled: false});
             if (err.errcode !== 'M_THREEPID_AUTH_FAILED') {
                 const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
-                console.error("Unable to verify email address: " + err);
+                console.error("Unable to verify email address: ", err);
                 Modal.createTrackedDialog('Unable to verify email address', '', ErrorDialog, {
                     title: _t("Unable to verify email address."),
                     description: ((err && err.message) ? err.message : _t("Operation failed")),

src/i18n/strings/en_EN.json

@@ -1,6 +1,7 @@
 {
     "This email address is already in use": "This email address is already in use",
     "This phone number is already in use": "This phone number is already in use",
+    "Add Email Address": "Add Email Address",
     "Failed to verify email address: make sure you clicked the link in the email": "Failed to verify email address: make sure you clicked the link in the email",
     "The platform you're on": "The platform you're on",
     "The version of Riot.im": "The version of Riot.im",