Look up email addresses in ChatInviteDialog

So email addresses known to the IS get a display name & avatar
This commit is contained in:
David Baker 2017-01-25 18:51:28 +00:00
parent a3b938427d
commit e1e87807b5
2 changed files with 73 additions and 22 deletions

View file

@ -14,17 +14,18 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
var React = require("react"); import React from 'react';
var classNames = require('classnames'); import classNames from 'classnames';
var sdk = require("../../../index"); import sdk from '../../../index';
var Invite = require("../../../Invite"); import { getAddressType } from '../../../Invite';
var createRoom = require("../../../createRoom"); import createRoom from '../../../createRoom';
var MatrixClientPeg = require("../../../MatrixClientPeg"); import MatrixClientPeg from '../../../MatrixClientPeg';
var DMRoomMap = require('../../../utils/DMRoomMap'); import DMRoomMap from '../../../utils/DMRoomMap';
var rate_limited_func = require("../../../ratelimitedfunc"); import rate_limited_func from '../../../ratelimitedfunc';
var dis = require("../../../dispatcher"); import dis from '../../../dispatcher';
var Modal = require('../../../Modal'); import Modal from '../../../Modal';
import AccessibleButton from '../elements/AccessibleButton'; import AccessibleButton from '../elements/AccessibleButton';
import q from 'q';
const TRUNCATE_QUERY_LIST = 40; const TRUNCATE_QUERY_LIST = 40;
@ -186,14 +187,23 @@ module.exports = React.createClass({
// If the query isn't a user we know about, but is a // If the query isn't a user we know about, but is a
// valid address, add an entry for that // valid address, add an entry for that
if (queryList.length == 0) { if (queryList.length == 0) {
const addrType = Invite.getAddressType(query); const addrType = getAddressType(query);
if (addrType !== null) { if (addrType !== null) {
queryList.push({ queryList[0] = {
addressType: addrType, addressType: addrType,
address: query, address: query,
isKnown: false, isKnown: false,
};
if (addrType == 'email') {
this._lookupThreepid(addrType, query).then((res) => {
if (res !== null) {
this.setState({
queryList: [res]
}); });
} }
}).done();
}
}
} }
} }
@ -380,7 +390,7 @@ module.exports = React.createClass({
}, },
_isDmChat: function(addrs) { _isDmChat: function(addrs) {
if (addrs.length === 1 && Invite.getAddressType(addrs[0]) === "mx" && !this.props.roomId) { if (addrs.length === 1 && getAddressType(addrs[0]) === "mx" && !this.props.roomId) {
return true; return true;
} else { } else {
return false; return false;
@ -408,7 +418,7 @@ module.exports = React.createClass({
_addInputToList: function() { _addInputToList: function() {
const addressText = this.refs.textinput.value.trim(); const addressText = this.refs.textinput.value.trim();
const addrType = Invite.getAddressType(addressText); const addrType = getAddressType(addressText);
const addrObj = { const addrObj = {
addressType: addrType, addressType: addrType,
address: addressText, address: addressText,
@ -435,6 +445,39 @@ module.exports = React.createClass({
return inviteList; return inviteList;
}, },
_lookupThreepid(medium, address) {
// wait a bit to let the user finish typing
return q.delay(500).then(() => {
// If the query has changed, forget it
if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
return null;
}
return MatrixClientPeg.get().lookupThreePid(medium, address);
}).then((res) => {
if (res === null || !res.mxid) return null;
// If the query has changed now, drop the response
if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
return null;
}
return MatrixClientPeg.get().getProfileInfo(res.mxid);
}).then((res) => {
if (res === null) return null;
// If the query has changed now, drop the response
if (this.state.queryList[0] && this.state.queryList[0].address !== address) {
return null;
}
// return an InviteAddressType
return {
addressType: medium,
address: address,
displayName: res.displayname,
avatarMxc: res.avatar_url,
isKnown: true,
}
});
},
render: function() { render: function() {
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
const AddressSelector = sdk.getComponent("elements.AddressSelector"); const AddressSelector = sdk.getComponent("elements.AddressSelector");

View file

@ -94,14 +94,14 @@ export default React.createClass({
const BaseAvatar = sdk.getComponent('avatars.BaseAvatar'); const BaseAvatar = sdk.getComponent('avatars.BaseAvatar');
const TintableSvg = sdk.getComponent("elements.TintableSvg"); const TintableSvg = sdk.getComponent("elements.TintableSvg");
let info;
let error = false;
if (address.addressType === "mx" && address.isKnown) {
const nameClasses = classNames({ const nameClasses = classNames({
"mx_AddressTile_name": true, "mx_AddressTile_name": true,
"mx_AddressTile_justified": this.props.justified, "mx_AddressTile_justified": this.props.justified,
}); });
let info;
let error = false;
if (address.addressType === "mx" && address.isKnown) {
const idClasses = classNames({ const idClasses = classNames({
"mx_AddressTile_id": true, "mx_AddressTile_id": true,
"mx_AddressTile_justified": this.props.justified, "mx_AddressTile_justified": this.props.justified,
@ -123,13 +123,21 @@ export default React.createClass({
<div className={unknownMxClasses}>{ this.props.address.address }</div> <div className={unknownMxClasses}>{ this.props.address.address }</div>
); );
} else if (address.addressType === "email") { } else if (address.addressType === "email") {
var emailClasses = classNames({ const emailClasses = classNames({
"mx_AddressTile_email": true, "mx_AddressTile_email": true,
"mx_AddressTile_justified": this.props.justified, "mx_AddressTile_justified": this.props.justified,
}); });
let nameNode = null;
if (address.displayName) {
nameNode = <div className={nameClasses}>{ address.displayName }</div>
}
info = ( info = (
<div className="mx_AddressTile_mx">
<div className={emailClasses}>{ address.address }</div> <div className={emailClasses}>{ address.address }</div>
{nameNode}
</div>
); );
} else { } else {
error = true; error = true;