Merge pull request #626 from matrix-org/dbkr/sanitize_chatinvitedialog
Sanitize ChatInviteDialog
This commit is contained in:
commit
bd0706f103
3 changed files with 40 additions and 60 deletions
|
@ -59,25 +59,3 @@ export function inviteMultipleToRoom(roomId, addrs) {
|
||||||
return this.inviter.invite(addrs);
|
return this.inviter.invite(addrs);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Checks is the supplied address is valid
|
|
||||||
*
|
|
||||||
* @param {addr} The mx userId or email address to check
|
|
||||||
* @returns true, false, or null for unsure
|
|
||||||
*/
|
|
||||||
export function isValidAddress(addr) {
|
|
||||||
// Check if the addr is a valid type
|
|
||||||
var addrType = this.getAddressType(addr);
|
|
||||||
if (addrType === "mx") {
|
|
||||||
let user = MatrixClientPeg.get().getUser(addr);
|
|
||||||
if (user) {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
} else if (addrType === "email") {
|
|
||||||
return true;
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -71,15 +71,12 @@ module.exports = React.createClass({
|
||||||
},
|
},
|
||||||
|
|
||||||
onButtonClick: function() {
|
onButtonClick: function() {
|
||||||
var inviteList = this.state.inviteList.slice();
|
let inviteList = this.state.inviteList.slice();
|
||||||
// Check the text input field to see if user has an unconverted address
|
// Check the text input field to see if user has an unconverted address
|
||||||
// If there is and it's valid add it to the local inviteList
|
// If there is and it's valid add it to the local inviteList
|
||||||
var check = Invite.isValidAddress(this.refs.textinput.value);
|
if (this.refs.textinput.value !== '') {
|
||||||
if (check === true || check === null) {
|
inviteList = this._addInputToList();
|
||||||
inviteList.push(this.refs.textinput.value);
|
if (inviteList === null) return;
|
||||||
} else if (this.refs.textinput.value.length > 0) {
|
|
||||||
this.setState({ error: true });
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (inviteList.length > 0) {
|
if (inviteList.length > 0) {
|
||||||
|
@ -119,15 +116,15 @@ module.exports = React.createClass({
|
||||||
} else if (e.keyCode === 38) { // up arrow
|
} else if (e.keyCode === 38) { // up arrow
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.addressSelector.onKeyUp();
|
this.addressSelector.moveSelectionUp();
|
||||||
} else if (e.keyCode === 40) { // down arrow
|
} else if (e.keyCode === 40) { // down arrow
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.addressSelector.onKeyDown();
|
this.addressSelector.moveSelectionDown();
|
||||||
} else if (this.state.queryList.length > 0 && (e.keyCode === 188, e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
|
} else if (this.state.queryList.length > 0 && (e.keyCode === 188 || e.keyCode === 13 || e.keyCode === 9)) { // comma or enter or tab
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.addressSelector.onKeySelect();
|
this.addressSelector.chooseSelection();
|
||||||
} else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
|
} else if (this.refs.textinput.value.length === 0 && this.state.inviteList.length && e.keyCode === 8) { // backspace
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -135,21 +132,16 @@ module.exports = React.createClass({
|
||||||
} else if (e.keyCode === 13) { // enter
|
} else if (e.keyCode === 13) { // enter
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
if (this.refs.textinput.value == '') {
|
||||||
|
// if there's nothing in the input box, submit the form
|
||||||
this.onButtonClick();
|
this.onButtonClick();
|
||||||
|
} else {
|
||||||
|
this._addInputToList();
|
||||||
|
}
|
||||||
} else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
|
} else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var check = Invite.isValidAddress(this.refs.textinput.value);
|
this._addInputToList();
|
||||||
if (check === true || check === null) {
|
|
||||||
var inviteList = this.state.inviteList.slice();
|
|
||||||
inviteList.push(this.refs.textinput.value.trim());
|
|
||||||
this.setState({
|
|
||||||
inviteList: inviteList,
|
|
||||||
queryList: [],
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.setState({ error: true });
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -361,6 +353,22 @@ module.exports = React.createClass({
|
||||||
return addrs;
|
return addrs;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
_addInputToList: function() {
|
||||||
|
const addrType = Invite.getAddressType(this.refs.textinput.value);
|
||||||
|
if (addrType !== null) {
|
||||||
|
const inviteList = this.state.inviteList.slice();
|
||||||
|
inviteList.push(this.refs.textinput.value.trim());
|
||||||
|
this.setState({
|
||||||
|
inviteList: inviteList,
|
||||||
|
queryList: [],
|
||||||
|
});
|
||||||
|
return inviteList;
|
||||||
|
} else {
|
||||||
|
this.setState({ error: true });
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
render: function() {
|
render: function() {
|
||||||
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
var TintableSvg = sdk.getComponent("elements.TintableSvg");
|
||||||
var AddressSelector = sdk.getComponent("elements.AddressSelector");
|
var AddressSelector = sdk.getComponent("elements.AddressSelector");
|
||||||
|
|
|
@ -55,7 +55,7 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onKeyUp: function() {
|
moveSelectionUp: function() {
|
||||||
if (this.state.selected > 0) {
|
if (this.state.selected > 0) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selected: this.state.selected - 1,
|
selected: this.state.selected - 1,
|
||||||
|
@ -64,7 +64,7 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onKeyDown: function() {
|
moveSelectionDown: function() {
|
||||||
if (this.state.selected < this._maxSelected(this.props.addressList)) {
|
if (this.state.selected < this._maxSelected(this.props.addressList)) {
|
||||||
this.setState({
|
this.setState({
|
||||||
selected: this.state.selected + 1,
|
selected: this.state.selected + 1,
|
||||||
|
@ -73,25 +73,19 @@ module.exports = React.createClass({
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onKeySelect: function() {
|
chooseSelection: function() {
|
||||||
this.selectAddress(this.state.selected);
|
this.selectAddress(this.state.selected);
|
||||||
},
|
},
|
||||||
|
|
||||||
onClick: function(index) {
|
onClick: function(index) {
|
||||||
var self = this;
|
this.selectAddress(index);
|
||||||
return function() {
|
|
||||||
self.selectAddress(index);
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseEnter: function(index) {
|
onMouseEnter: function(index) {
|
||||||
var self = this;
|
this.setState({
|
||||||
return function() {
|
|
||||||
self.setState({
|
|
||||||
selected: index,
|
selected: index,
|
||||||
hover: true,
|
hover: true,
|
||||||
});
|
});
|
||||||
};
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onMouseLeave: function() {
|
onMouseLeave: function() {
|
||||||
|
@ -124,7 +118,7 @@ module.exports = React.createClass({
|
||||||
// Saving the addressListElement so we can use it to work out, in the componentDidUpdate
|
// Saving the addressListElement so we can use it to work out, in the componentDidUpdate
|
||||||
// method, how far to scroll when using the arrow keys
|
// method, how far to scroll when using the arrow keys
|
||||||
addressList.push(
|
addressList.push(
|
||||||
<div className={classes} onClick={this.onClick(i)} onMouseEnter={this.onMouseEnter(i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
|
<div className={classes} onClick={this.onClick.bind(this, i)} onMouseEnter={this.onMouseEnter.bind(this, i)} onMouseLeave={this.onMouseLeave} key={i} ref={(ref) => { this.addressListElement = ref; }} >
|
||||||
<AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
|
<AddressTile address={this.props.addressList[i].userId} justified={true} networkName="vector" networkUrl="img/search-icon-vector.svg" />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue