2017-03-22 18:18:27 +03:00
|
|
|
/*
|
|
|
|
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.
|
|
|
|
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 React from 'react';
|
|
|
|
|
|
|
|
import sdk from '../../../index';
|
|
|
|
import AddThreepid from '../../../AddThreepid';
|
|
|
|
import WithMatrixClient from '../../../wrappers/WithMatrixClient';
|
|
|
|
import Modal from '../../../Modal';
|
|
|
|
|
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
export default WithMatrixClient(React.createClass({
|
|
|
|
displayName: 'AddPhoneNumber',
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
propTypes: {
|
|
|
|
matrixClient: React.PropTypes.object.isRequired,
|
|
|
|
onThreepidAdded: React.PropTypes.func,
|
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
getInitialState: function() {
|
|
|
|
return {
|
2017-03-22 18:18:27 +03:00
|
|
|
busy: false,
|
|
|
|
phoneCountry: null,
|
|
|
|
phoneNumber: "",
|
2017-03-24 13:45:38 +03:00
|
|
|
msisdn_add_pending: false,
|
2017-03-22 18:18:27 +03:00
|
|
|
};
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
componentWillMount: function() {
|
|
|
|
this._addThreepid = null;
|
|
|
|
this._addMsisdnInput = null;
|
2017-03-22 19:36:42 +03:00
|
|
|
this._unmounted = false;
|
|
|
|
},
|
|
|
|
|
|
|
|
componentWillUnmount: function() {
|
|
|
|
this._unmounted = true;
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_onPhoneCountryChange: function(phoneCountry) {
|
2017-04-25 13:21:47 +03:00
|
|
|
this.setState({ phoneCountry: phoneCountry.iso2 });
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_onPhoneNumberChange: function(ev) {
|
2017-03-22 18:18:27 +03:00
|
|
|
this.setState({ phoneNumber: ev.target.value });
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_onAddMsisdnEditFinished: function(value, shouldSubmit) {
|
2017-03-22 18:18:27 +03:00
|
|
|
if (!shouldSubmit) return;
|
|
|
|
this._addMsisdn();
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_onAddMsisdnSubmit: function(ev) {
|
2017-03-22 18:18:27 +03:00
|
|
|
ev.preventDefault();
|
|
|
|
this._addMsisdn();
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_collectAddMsisdnInput: function(e) {
|
2017-03-22 18:18:27 +03:00
|
|
|
this._addMsisdnInput = e;
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_addMsisdn: function() {
|
2017-03-22 18:18:27 +03:00
|
|
|
const ErrorDialog = sdk.getComponent("dialogs.ErrorDialog");
|
|
|
|
|
|
|
|
this._addThreepid = new AddThreepid();
|
|
|
|
// we always bind 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(() => {
|
2017-03-22 19:41:08 +03:00
|
|
|
if (this._unmounted) return;
|
2017-03-22 18:18:27 +03:00
|
|
|
this.setState({msisdn_add_pending: false});
|
2017-03-22 19:41:08 +03:00
|
|
|
}).done();
|
2017-03-22 18:18:27 +03:00
|
|
|
this._addMsisdnInput.blur();
|
|
|
|
this.setState({msisdn_add_pending: true});
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
_promptForMsisdnVerificationCode:function (msisdn, err) {
|
2017-03-22 19:36:42 +03:00
|
|
|
if (this._unmounted) return;
|
2017-03-22 18:18:27 +03:00
|
|
|
const TextInputDialog = sdk.getComponent("dialogs.TextInputDialog");
|
|
|
|
let msgElements = [
|
2017-03-22 19:41:08 +03:00
|
|
|
<div key="_static" >A text message has been sent to +{msisdn}.
|
2017-03-22 18:18:27 +03:00
|
|
|
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";
|
|
|
|
}
|
2017-03-22 19:41:08 +03:00
|
|
|
msgElements.push(<div key="_error" className="error">{msg}</div>);
|
2017-03-22 18:18:27 +03:00
|
|
|
}
|
|
|
|
Modal.createDialog(TextInputDialog, {
|
|
|
|
title: "Enter Code",
|
|
|
|
description: <div>{msgElements}</div>,
|
|
|
|
button: "Submit",
|
|
|
|
onFinished: (should_verify, token) => {
|
|
|
|
if (!should_verify) {
|
|
|
|
this._addThreepid = null;
|
|
|
|
return;
|
|
|
|
}
|
2017-03-22 19:42:44 +03:00
|
|
|
if (this._unmounted) return;
|
2017-03-22 18:18:27 +03:00
|
|
|
this.setState({msisdn_add_pending: true});
|
|
|
|
this._addThreepid.haveMsisdnToken(token).then(() => {
|
|
|
|
this._addThreepid = null;
|
|
|
|
this.setState({phoneNumber: ''});
|
|
|
|
if (this.props.onThreepidAdded) this.props.onThreepidAdded();
|
|
|
|
}).catch((err) => {
|
|
|
|
this._promptForMsisdnVerificationCode(msisdn, err);
|
|
|
|
}).finally(() => {
|
2017-03-22 19:41:08 +03:00
|
|
|
if (this._unmounted) return;
|
2017-03-22 18:18:27 +03:00
|
|
|
this.setState({msisdn_add_pending: false});
|
|
|
|
}).done();
|
|
|
|
}
|
|
|
|
});
|
2017-03-22 19:15:45 +03:00
|
|
|
},
|
2017-03-22 18:18:27 +03:00
|
|
|
|
2017-03-22 19:15:45 +03:00
|
|
|
render: function() {
|
2017-03-22 18:18:27 +03:00
|
|
|
const Loader = sdk.getComponent("elements.Spinner");
|
|
|
|
if (this.state.msisdn_add_pending) {
|
|
|
|
return <Loader />;
|
2017-03-22 19:41:08 +03:00
|
|
|
} else if (this.props.matrixClient.isGuest()) {
|
2017-03-24 13:45:38 +03:00
|
|
|
return <div />;
|
2017-03-22 18:18:27 +03:00
|
|
|
}
|
2017-03-22 19:41:08 +03:00
|
|
|
|
|
|
|
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
|
|
|
|
// XXX: This CSS relies on the CSS surrounding it in UserSettings as its in
|
|
|
|
// a tabular format to align the submit buttons
|
|
|
|
return (
|
|
|
|
<form className="mx_UserSettings_profileTableRow" onSubmit={this._onAddMsisdnSubmit}>
|
|
|
|
<div className="mx_UserSettings_profileLabelCell">
|
2017-05-15 05:03:17 +03:00
|
|
|
<label>Phone</label>
|
2017-03-22 19:41:08 +03:00
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_profileInputCell">
|
2017-04-25 13:21:47 +03:00
|
|
|
<div className="mx_UserSettings_phoneSection">
|
2017-03-22 19:41:08 +03:00
|
|
|
<CountryDropdown onOptionChange={this._onPhoneCountryChange}
|
2017-04-25 13:21:47 +03:00
|
|
|
className="mx_UserSettings_phoneCountry"
|
2017-03-22 19:41:08 +03:00
|
|
|
value={this.state.phoneCountry}
|
2017-04-25 13:21:47 +03:00
|
|
|
isSmall={true}
|
2017-03-22 19:41:08 +03:00
|
|
|
/>
|
|
|
|
<input type="text"
|
|
|
|
ref={this._collectAddMsisdnInput}
|
|
|
|
className="mx_UserSettings_phoneNumberField"
|
|
|
|
placeholder="Add phone number"
|
|
|
|
value={this.state.phoneNumber}
|
|
|
|
onChange={this._onPhoneNumberChange}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="mx_UserSettings_threepidButton mx_filterFlipColor">
|
|
|
|
<input type="image" value="Add" src="img/plus.svg" width="14" height="14" />
|
|
|
|
</div>
|
|
|
|
</form>
|
|
|
|
);
|
2017-03-22 18:18:27 +03:00
|
|
|
}
|
2017-03-22 19:15:45 +03:00
|
|
|
}))
|