Support adding phone numbers in UserSettings

src/AddThreepid.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -51,11 +52,35 @@ class AddThreepid {
         });
     }
 
+    /**
+     * Attempt to add a msisdn threepid. This will trigger a side-effect of
+     * sending a test message to the provided phone number.
+     * @param {string} emailAddress The email address to add
+     * @param {boolean} bind If True, bind this phone number to this mxid on the Identity Server
+     * @return {Promise} Resolves when the text message has been sent. Then call haveMsisdnToken().
+     */
+    addMsisdn(phoneCountry, phoneNumber, bind) {
+        this.bind = bind;
+        return MatrixClientPeg.get().requestAdd3pidMsisdnToken(
+            phoneCountry, phoneNumber, this.clientSecret, 1,
+        ).then((res) => {
+            this.sessionId = res.sid;
+            return res;
+        }, function(err) {
+            if (err.errcode == 'M_THREEPID_IN_USE') {
+                err.message = "This phone number is already in use";
+            } else if (err.httpStatus) {
+                err.message = err.message + ` (Status ${err.httpStatus})`;
+            }
+            throw err;
+        });
+    }
+
     /**
      * Checks if the email link has been clicked by attempting to add the threepid
-     * @return {Promise} Resolves if the password was reset. Rejects with an object
+     * @return {Promise} Resolves if the email address was added. Rejects with an object
      * with a "message" property which contains a human-readable message detailing why
-     * the reset failed, e.g. "There is no mapped matrix user ID for the given email address".
+     * the request failed.
      */
     checkEmailLinkClicked() {
         var identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
@@ -73,6 +98,29 @@ class AddThreepid {
             throw err;
         });
     }
+
+    /**
+     * 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.
+     * @return {Promise} Resolves if the email address was added. Rejects with an object
+     * with a "message" property which contains a human-readable message detailing why
+     * the request failed.
+     */
+    haveMsisdnToken(token) {
+        return MatrixClientPeg.get().submitMsisdnToken(
+            this.sessionId, this.clientSecret, token,
+        ).then((result) => {
+            if (result.errcode) {
+                throw result;
+            }
+            const identityServerDomain = MatrixClientPeg.get().idBaseUrl.split("://")[1];
+            return MatrixClientPeg.get().addThreePid({
+                sid: this.sessionId,
+                client_secret: this.clientSecret,
+                id_server: identityServerDomain
+            }, this.bind);
+        });
+    }
 }
 
 module.exports = AddThreepid;

src/components/structures/UserSettings.js

@@ -132,13 +132,17 @@ module.exports = React.createClass({
             threePids: [],
             phase: "UserSettings.LOADING", // LOADING, DISPLAY
             email_add_pending: false,
+            msisdn_add_pending: false,
             vectorVersion: null,
             rejectingInvites: false,
+            phoneCountry: null,
+            phoneNumber: "",
         };
     },
 
     componentWillMount: function() {
         this._unmounted = false;
+        this._addThreepid = null;
 
         if (PlatformPeg.get()) {
             q().then(() => {
@@ -214,6 +218,14 @@ module.exports = React.createClass({
         });
     },
 
+    _onPhoneCountryChange: function(phoneCountry) {
+        this.setState({ phoneCountry: phoneCountry });
+    },
+
+    _onPhoneNumberChange: function(ev) {
+        this.setState({ phoneNumber: ev.target.value });
+    },
+
     onAction: function(payload) {
         if (payload.action === "notifier_enabled") {
             this.forceUpdate();
@@ -315,12 +327,26 @@ module.exports = React.createClass({
         UserSettingsStore.setEnableNotifications(event.target.checked);
     },
 
-    onAddThreepidClicked: function(value, shouldSubmit) {
+    _onAddEmailEditFinished: function(value, shouldSubmit) {
         if (!shouldSubmit) return;
+        this._addEmail();
+    },
+
+    _onAddMsisdnEditFinished: function(value, shouldSubmit) {
+        if (!shouldSubmit) return;
+        this._addMsisdn();
+    },
+
+    _onAddMsisdnSubmit: function(ev) {
+        ev.preventDefault();
+        this._addMsisdn();
+    },
+
+    _addEmail: function() {
         var ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
         var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
 
-        var email_address = this.refs.add_threepid_input.value;
+        var email_address = this.refs.add_email_input.value;
         if (!Email.looksValid(email_address)) {
             Modal.createDialog(ErrorDialog, {
                 title: "Invalid Email Address",
@@ -328,10 +354,10 @@ module.exports = React.createClass({
             });
             return;
         }
-        this.add_threepid = new AddThreepid();
+        this._addThreepid = new AddThreepid();
         // we always bind emails when registering, so let's do the
         // same here.
-        this.add_threepid.addEmailAddress(email_address, true).done(() => {
+        this._addThreepid.addEmailAddress(email_address, true).done(() => {
             Modal.createDialog(QuestionDialog, {
                 title: "Verification Pending",
                 description: "Please check your email and click on the link it contains. Once this is done, click continue.",
@@ -346,10 +372,69 @@ module.exports = React.createClass({
                 description: "Unable to add email address"
             });
         });
-        ReactDOM.findDOMNode(this.refs.add_threepid_input).blur();
+        ReactDOM.findDOMNode(this.refs.add_email_input).blur();
         this.setState({email_add_pending: true});
     },
 
+    _addMsisdn: function() {
+        const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
+        const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
+
+        this._addThreepid = new AddThreepid();
+        // we always phone numbers when registering, so let's do the
+        // same here.
+        this._addThreepid.addMsisdn(this.state.phoneCountry, this.state.phoneNumber, true).then((resp) => {
+            this._promptForMsisdnVerificationCode(resp.msisdn);
+        }).catch((err) => {
+            console.error("Unable to add phone number: " + err);
+            let msg = err.message;
+            Modal.createDialog(ErrorDialog, {
+                title: "Error",
+                description: msg,
+            });
+        }).finally(() => {
+            this.setState({msisdn_add_pending: false});
+        }).done();;
+        ReactDOM.findDOMNode(this.refs.add_msisdn_input).blur();
+        this.setState({msisdn_add_pending: true});
+    },
+
+    _promptForMsisdnVerificationCode(msisdn, err) {
+        const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
+        let msgElements = [
+            <div>A text message has been sent to +{msisdn}.
+            Please enter the verification code it contains</div>
+        ];
+        if (err) {
+            let msg = err.error;
+            if (err.errcode == 'M_THREEPID_AUTH_FAILED') {
+                msg = "Incorrect verification code";
+            }
+            msgElements.push(<div className="error">{msg}</div>);
+        }
+        Modal.createDialog(TextInputDialog, {
+            title: "Enter Code",
+            description: <div>{msgElements}</div>,
+            button: "Submit",
+            onFinished: (should_verify, token) => {
+                if (!should_verify) {
+                    this._addThreepid = null;
+                    return;
+                }
+                this.setState({msisdn_add_pending: true});
+                this._addThreepid.haveMsisdnToken(token).then(() => {
+                    this._addThreepid = null;
+                    this.setState({phoneNumber: ''});
+                    return this._refreshFromServer();
+                }).catch((err) => {
+                    this._promptForMsisdnVerificationCode(msisdn, err);
+                }).finally(() => {
+                    this.setState({msisdn_add_pending: false});
+                }).done();
+            }
+        });
+    },
+
     onRemoveThreepidClicked: function(threepid) {
         const QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
         Modal.createDialog(QuestionDialog, {
@@ -385,8 +470,8 @@ module.exports = React.createClass({
     },
 
     verifyEmailAddress: function() {
-        this.add_threepid.checkEmailLinkClicked().done(() => {
+        this._addThreepid.checkEmailLinkClicked().done(() => {
-            this.add_threepid = undefined;
+            this._addThreepid = null;
             this.setState({
                 phase: "UserSettings.LOADING",
             });
@@ -795,30 +880,61 @@ module.exports = React.createClass({
                 </div>
             );
         });
-        var addThreepidSection;
+        let addEmailSection;
+        let addMsisdnSection;
         if (this.state.email_add_pending) {
-            addThreepidSection = <Loader />;
+            addEmailSection = <Loader key="_email_add_spinner" />;
         } else if (!MatrixClientPeg.get().isGuest()) {
-            addThreepidSection = (
+            addEmailSection = (
-                <div className="mx_UserSettings_profileTableRow" key="new">
+                <div className="mx_UserSettings_profileTableRow" key="_newEmail">
                     <div className="mx_UserSettings_profileLabelCell">
                     </div>
                     <div className="mx_UserSettings_profileInputCell">
                         <EditableText
-                            ref="add_threepid_input"
+                            ref="add_email_input"
                             className="mx_UserSettings_editable"
                             placeholderClassName="mx_UserSettings_threepidPlaceholder"
                             placeholder={ "Add email address" }
                             blurToCancel={ false }
-                            onValueChanged={ this.onAddThreepidClicked } />
+                            onValueChanged={ this._onAddEmailEditFinished } />
                     </div>
                     <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
-                         <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={ this.onAddThreepidClicked.bind(this, undefined, true) }/>
+                         <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={this._addEmail} />
                     </div>
                 </div>
             );
         }
-        threepidsSection.push(addThreepidSection);
+        if (this.state.msisdn_add_pending) {
+            addMsisdnSection = <Loader key="_msisdn_add_spinner" />;
+        } else if (!MatrixClientPeg.get().isGuest()) {
+            const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+            addMsisdnSection = (
+                <div className="mx_UserSettings_profileTableRow" key="_newMsisdn">
+                    <div className="mx_UserSettings_profileLabelCell">
+                    </div>
+                    <div className="mx_UserSettings_profileInputCell">
+                        <form className="mx_Login_phoneSection" onSubmit={this._onAddMsisdnSubmit}>
+                            <CountryDropdown ref="phone_country" onOptionChange={this._onPhoneCountryChange}
+                                className="mx_Login_phoneCountry"
+                                value={this.state.phoneCountry}
+                            />
+                            <input type="text" ref="phoneNumber"
+                                ref="add_msisdn_input"
+                                className="mx_UserSettings_phoneNumberField"
+                                placeholder="Add phone number"
+                                value={this.state.phoneNumber}
+                                onChange={this._onPhoneNumberChange}
+                            />
+                        </form>
+                    </div>
+                    <div className="mx_UserSettings_threepidButton mx_filterFlipColor">
+                         <img src="img/plus.svg" width="14" height="14" alt="Add" onClick={this._addMsisdn} />
+                    </div>
+                </div>
+            );
+        }
+        threepidsSection.push(addEmailSection);
+        threepidsSection.push(addMsisdnSection);
 
         var accountJsx;