2016-09-05 14:03:16 +03:00
|
|
|
/*
|
|
|
|
Copyright 2015, 2016 OpenMarket Ltd
|
2019-04-03 18:27:45 +03:00
|
|
|
Copyright 2017, 2018, 2019 New Vector Ltd
|
2019-07-25 23:45:32 +03:00
|
|
|
Copyright 2019 Michael Telatynski <7t3chguy@gmail.com>
|
2019-07-29 13:58:47 +03:00
|
|
|
Copyright 2019 The Matrix.org Foundation C.I.C.
|
2016-09-05 14:03:16 +03:00
|
|
|
|
|
|
|
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.
|
|
|
|
*/
|
|
|
|
|
2021-06-29 15:11:58 +03:00
|
|
|
import React, { createRef } from 'react';
|
2021-07-02 00:55:27 +03:00
|
|
|
import { sleep } from "matrix-js-sdk/src/utils";
|
2019-07-29 13:58:47 +03:00
|
|
|
|
2018-06-21 02:37:37 +03:00
|
|
|
import { _t, _td } from '../../../languageHandler';
|
2019-12-20 04:19:56 +03:00
|
|
|
import * as sdk from '../../../index';
|
2021-06-29 15:11:58 +03:00
|
|
|
import { MatrixClientPeg } from '../../../MatrixClientPeg';
|
2020-05-14 05:41:41 +03:00
|
|
|
import dis from '../../../dispatcher/dispatcher';
|
2021-07-20 13:16:17 +03:00
|
|
|
import { AddressType, addressTypes, getAddressType, IUserAddress } from '../../../UserAddress';
|
2018-05-01 13:18:45 +03:00
|
|
|
import GroupStore from '../../../stores/GroupStore';
|
2019-07-29 13:58:47 +03:00
|
|
|
import * as Email from '../../../email';
|
|
|
|
import IdentityAuthClient from '../../../IdentityAuthClient';
|
2019-08-29 17:20:14 +03:00
|
|
|
import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../utils/IdentityServerUtils';
|
|
|
|
import { abbreviateUrl } from '../../../utils/UrlUtils';
|
2021-06-29 15:11:58 +03:00
|
|
|
import { Key } from "../../../Keyboard";
|
|
|
|
import { Action } from "../../../dispatcher/actions";
|
|
|
|
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
2021-07-20 12:26:33 +03:00
|
|
|
import AddressSelector from '../elements/AddressSelector';
|
2016-09-05 14:03:16 +03:00
|
|
|
|
2016-09-06 17:46:58 +03:00
|
|
|
const TRUNCATE_QUERY_LIST = 40;
|
2017-06-07 17:58:21 +03:00
|
|
|
const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2018-06-21 02:37:37 +03:00
|
|
|
const addressTypeName = {
|
|
|
|
'mx-user-id': _td("Matrix ID"),
|
|
|
|
'mx-room-id': _td("Matrix Room ID"),
|
|
|
|
'email': _td("email address"),
|
|
|
|
};
|
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
interface IProps {
|
|
|
|
title: string;
|
|
|
|
description?: JSX.Element;
|
|
|
|
// Extra node inserted after picker input, dropdown and errors
|
|
|
|
extraNode?: JSX.Element;
|
|
|
|
value?: string;
|
|
|
|
placeholder?: ((validAddressTypes: any) => string) | string;
|
|
|
|
roomId?: string;
|
|
|
|
button?: string;
|
|
|
|
focus?: boolean;
|
2021-07-20 13:16:17 +03:00
|
|
|
validAddressTypes?: AddressType[];
|
|
|
|
onFinished: (success: boolean, list?: IUserAddress[]) => void;
|
2021-07-20 12:26:33 +03:00
|
|
|
groupId?: string;
|
|
|
|
// The type of entity to search for. Default: 'user'.
|
|
|
|
pickerType?: 'user' | 'room';
|
|
|
|
// Whether the current user should be included in the addresses returned. Only
|
|
|
|
// applicable when pickerType is `user`. Default: false.
|
|
|
|
includeSelf?: boolean;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface IState {
|
|
|
|
// Whether to show an error message because of an invalid address
|
|
|
|
invalidAddressError: boolean;
|
|
|
|
// List of UserAddressType objects representing
|
|
|
|
// the list of addresses we're going to invite
|
2021-07-20 13:16:17 +03:00
|
|
|
selectedList: IUserAddress[];
|
2021-07-20 12:26:33 +03:00
|
|
|
// Whether a search is ongoing
|
|
|
|
busy: boolean;
|
|
|
|
// An error message generated during the user directory search
|
|
|
|
searchError: string;
|
|
|
|
// Whether the server supports the user_directory API
|
|
|
|
serverSupportsUserDirectory: boolean;
|
|
|
|
// The query being searched for
|
|
|
|
query: string;
|
|
|
|
// List of UserAddressType objects representing the set of
|
|
|
|
// auto-completion results for the current search query.
|
2021-07-20 13:16:17 +03:00
|
|
|
suggestedList: IUserAddress[];
|
2021-07-20 12:26:33 +03:00
|
|
|
// List of address types initialised from props, but may change while the
|
|
|
|
// dialog is open and represents the supported list of address types at this time.
|
2021-07-20 13:16:17 +03:00
|
|
|
validAddressTypes: AddressType[];
|
2021-07-20 12:26:33 +03:00
|
|
|
}
|
|
|
|
|
2021-03-09 05:45:39 +03:00
|
|
|
@replaceableComponent("views.dialogs.AddressPickerDialog")
|
2021-07-20 12:26:33 +03:00
|
|
|
export default class AddressPickerDialog extends React.Component<IProps, IState> {
|
|
|
|
private textinput = createRef<HTMLTextAreaElement>();
|
|
|
|
private addressSelector = createRef<AddressSelector>();
|
|
|
|
private queryChangedDebouncer: NodeJS.Timeout;
|
|
|
|
private cancelThreepidLookup: () => void;
|
2020-08-29 14:14:16 +03:00
|
|
|
|
2021-07-20 13:30:41 +03:00
|
|
|
static defaultProps: Partial<IProps> = {
|
2020-08-29 14:14:16 +03:00
|
|
|
value: "",
|
|
|
|
focus: true,
|
|
|
|
validAddressTypes: addressTypes,
|
|
|
|
pickerType: 'user',
|
|
|
|
includeSelf: false,
|
|
|
|
};
|
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
constructor(props: IProps) {
|
2020-08-29 14:14:16 +03:00
|
|
|
super(props);
|
|
|
|
|
2019-09-09 17:03:00 +03:00
|
|
|
let validAddressTypes = this.props.validAddressTypes;
|
|
|
|
// Remove email from validAddressTypes if no IS is configured. It may be added at a later stage by the user
|
2021-07-20 13:16:17 +03:00
|
|
|
if (!MatrixClientPeg.get().getIdentityServerUrl() && validAddressTypes.includes(AddressType.Email)) {
|
|
|
|
validAddressTypes = validAddressTypes.filter(type => type !== AddressType.Email);
|
2019-09-09 17:03:00 +03:00
|
|
|
}
|
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
this.state = {
|
2019-07-30 12:29:41 +03:00
|
|
|
invalidAddressError: false,
|
2018-06-21 14:13:27 +03:00
|
|
|
selectedList: [],
|
2017-06-07 17:58:21 +03:00
|
|
|
busy: false,
|
2017-06-07 19:33:15 +03:00
|
|
|
searchError: null,
|
2017-06-07 19:40:09 +03:00
|
|
|
serverSupportsUserDirectory: true,
|
2017-06-07 17:58:21 +03:00
|
|
|
query: "",
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList: [],
|
2019-09-09 17:03:00 +03:00
|
|
|
validAddressTypes,
|
2016-09-05 19:28:08 +03:00
|
|
|
};
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
componentDidMount() {
|
2016-09-05 14:03:16 +03:00
|
|
|
if (this.props.focus) {
|
|
|
|
// Set the cursor at the end of the text input
|
2021-07-20 12:26:33 +03:00
|
|
|
this.textinput.current.value = this.props.value;
|
2016-09-05 14:03:16 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2016-09-05 14:03:16 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private getPlaceholder(): string {
|
2019-08-29 17:20:14 +03:00
|
|
|
const { placeholder } = this.props;
|
|
|
|
if (typeof placeholder === "string") {
|
|
|
|
return placeholder;
|
|
|
|
}
|
|
|
|
// Otherwise it's a function, as checked by prop types.
|
|
|
|
return placeholder(this.state.validAddressTypes);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-08-29 17:20:14 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onButtonClick = (): void => {
|
2018-06-21 14:13:27 +03:00
|
|
|
let selectedList = this.state.selectedList.slice();
|
2016-09-14 17:09:23 +03:00
|
|
|
// Check the text input field to see if user has an unconverted address
|
2018-06-21 14:13:27 +03:00
|
|
|
// If there is and it's valid add it to the local selectedList
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.textinput.current.value !== '') {
|
|
|
|
selectedList = this.addAddressesToList([this.textinput.current.value]);
|
2018-06-21 14:13:27 +03:00
|
|
|
if (selectedList === null) return;
|
2016-09-14 17:09:23 +03:00
|
|
|
}
|
2018-06-21 14:13:27 +03:00
|
|
|
this.props.onFinished(true, selectedList);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-05 16:16:21 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onCancel = (): void => {
|
2016-09-05 19:28:08 +03:00
|
|
|
this.props.onFinished(false);
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onKeyDown = (e: React.KeyboardEvent): void => {
|
|
|
|
const textInput = this.textinput.current ? this.textinput.current.value : undefined;
|
2019-12-16 20:22:00 +03:00
|
|
|
|
2019-12-16 20:14:03 +03:00
|
|
|
if (e.key === Key.ESCAPE) {
|
2016-09-05 19:28:08 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
|
|
|
this.props.onFinished(false);
|
2019-12-16 20:14:03 +03:00
|
|
|
} else if (e.key === Key.ARROW_UP) {
|
2016-09-05 19:28:08 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.addressSelector.current) this.addressSelector.current.moveSelectionUp();
|
2019-12-16 20:14:03 +03:00
|
|
|
} else if (e.key === Key.ARROW_DOWN) {
|
2016-09-06 15:07:06 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.addressSelector.current) this.addressSelector.current.moveSelectionDown();
|
2019-12-16 20:14:03 +03:00
|
|
|
} else if (this.state.suggestedList.length > 0 && [Key.COMMA, Key.ENTER, Key.TAB].includes(e.key)) {
|
2016-09-06 15:07:06 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.addressSelector.current) this.addressSelector.current.chooseSelection();
|
2019-12-16 20:22:00 +03:00
|
|
|
} else if (textInput.length === 0 && this.state.selectedList.length && e.key === Key.BACKSPACE) {
|
2016-09-17 17:21:08 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2018-06-21 14:13:27 +03:00
|
|
|
this.onDismissed(this.state.selectedList.length - 1)();
|
2019-12-16 20:14:03 +03:00
|
|
|
} else if (e.key === Key.ENTER) {
|
2016-09-15 14:17:32 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2019-12-16 20:22:00 +03:00
|
|
|
if (textInput === '') {
|
2017-01-19 19:35:40 +03:00
|
|
|
// if there's nothing in the input box, submit the form
|
|
|
|
this.onButtonClick();
|
2017-01-18 21:32:38 +03:00
|
|
|
} else {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.addAddressesToList([textInput]);
|
2017-01-18 21:32:38 +03:00
|
|
|
}
|
2019-12-17 12:58:04 +03:00
|
|
|
} else if (textInput && (e.key === Key.COMMA || e.key === Key.TAB)) {
|
2016-09-12 19:06:43 +03:00
|
|
|
e.stopPropagation();
|
|
|
|
e.preventDefault();
|
2021-07-20 12:26:33 +03:00
|
|
|
this.addAddressesToList([textInput]);
|
2016-09-05 19:28:08 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onQueryChanged = (ev: React.ChangeEvent): void => {
|
|
|
|
const query = (ev.target as HTMLTextAreaElement).value;
|
2017-02-23 12:03:20 +03:00
|
|
|
if (this.queryChangedDebouncer) {
|
|
|
|
clearTimeout(this.queryChangedDebouncer);
|
|
|
|
}
|
2017-06-07 17:58:21 +03:00
|
|
|
// Only do search if there is something to search
|
2018-06-21 02:37:37 +03:00
|
|
|
if (query.length > 0 && query !== '@' && query.length >= 2) {
|
2017-06-07 17:58:21 +03:00
|
|
|
this.queryChangedDebouncer = setTimeout(() => {
|
2017-09-21 18:53:10 +03:00
|
|
|
if (this.props.pickerType === 'user') {
|
|
|
|
if (this.props.groupId) {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doNaiveGroupSearch(query);
|
2017-09-21 18:53:10 +03:00
|
|
|
} else if (this.state.serverSupportsUserDirectory) {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doUserDirectorySearch(query);
|
2017-09-21 18:53:10 +03:00
|
|
|
} else {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doLocalSearch(query);
|
2017-09-21 18:53:10 +03:00
|
|
|
}
|
|
|
|
} else if (this.props.pickerType === 'room') {
|
|
|
|
if (this.props.groupId) {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doNaiveGroupRoomSearch(query);
|
2017-09-21 18:53:10 +03:00
|
|
|
} else {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doRoomSearch(query);
|
2017-09-21 18:53:10 +03:00
|
|
|
}
|
2017-06-07 19:40:09 +03:00
|
|
|
} else {
|
2017-09-21 18:53:10 +03:00
|
|
|
console.error('Unknown pickerType', this.props.pickerType);
|
2017-06-07 19:40:09 +03:00
|
|
|
}
|
2017-06-07 17:58:21 +03:00
|
|
|
}, QUERY_USER_DIRECTORY_DEBOUNCE_MS);
|
|
|
|
} else {
|
2017-02-23 12:03:20 +03:00
|
|
|
this.setState({
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList: [],
|
2017-06-07 17:58:21 +03:00
|
|
|
query: "",
|
2017-06-07 19:33:15 +03:00
|
|
|
searchError: null,
|
2017-02-23 12:03:20 +03:00
|
|
|
});
|
2017-06-07 17:58:21 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onDismissed = (index: number) => () => {
|
2020-08-29 14:14:16 +03:00
|
|
|
const selectedList = this.state.selectedList.slice();
|
|
|
|
selectedList.splice(index, 1);
|
|
|
|
this.setState({
|
|
|
|
selectedList,
|
|
|
|
suggestedList: [],
|
|
|
|
query: "",
|
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.cancelThreepidLookup) this.cancelThreepidLookup();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-07 18:18:50 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onSelected = (index: number): void => {
|
2018-06-21 14:13:27 +03:00
|
|
|
const selectedList = this.state.selectedList.slice();
|
2021-07-20 12:26:33 +03:00
|
|
|
selectedList.push(this.getFilteredSuggestions()[index]);
|
2016-09-12 15:00:44 +03:00
|
|
|
this.setState({
|
2018-06-21 14:13:27 +03:00
|
|
|
selectedList,
|
|
|
|
suggestedList: [],
|
2017-06-07 17:58:21 +03:00
|
|
|
query: "",
|
2016-09-12 15:00:44 +03:00
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.cancelThreepidLookup) this.cancelThreepidLookup();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2016-09-08 15:09:54 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private doNaiveGroupSearch(query: string): void {
|
2017-09-21 12:52:28 +03:00
|
|
|
const lowerCaseQuery = query.toLowerCase();
|
2017-09-20 17:29:31 +03:00
|
|
|
this.setState({
|
|
|
|
busy: true,
|
|
|
|
query,
|
|
|
|
searchError: null,
|
|
|
|
});
|
|
|
|
MatrixClientPeg.get().getGroupUsers(this.props.groupId).then((resp) => {
|
2017-09-21 12:52:28 +03:00
|
|
|
const results = [];
|
|
|
|
resp.chunk.forEach((u) => {
|
|
|
|
const userIdMatch = u.user_id.toLowerCase().includes(lowerCaseQuery);
|
|
|
|
const displayNameMatch = (u.displayname || '').toLowerCase().includes(lowerCaseQuery);
|
|
|
|
if (!(userIdMatch || displayNameMatch)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
results.push({
|
2017-09-20 18:32:02 +03:00
|
|
|
user_id: u.user_id,
|
|
|
|
avatar_url: u.avatar_url,
|
|
|
|
display_name: u.displayname,
|
2017-09-21 12:52:28 +03:00
|
|
|
});
|
2017-09-20 18:32:02 +03:00
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
this.processResults(results, query);
|
2017-09-21 18:53:10 +03:00
|
|
|
}).catch((err) => {
|
|
|
|
console.error('Error whilst searching group rooms: ', err);
|
|
|
|
this.setState({
|
|
|
|
searchError: err.errcode ? err.message : _t('Something went wrong!'),
|
|
|
|
});
|
2019-11-18 13:03:05 +03:00
|
|
|
}).then(() => {
|
2017-09-21 18:53:10 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
});
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-09-21 18:53:10 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private doNaiveGroupRoomSearch(query: string): void {
|
2017-09-21 18:53:10 +03:00
|
|
|
const lowerCaseQuery = query.toLowerCase();
|
2017-10-05 16:30:04 +03:00
|
|
|
const results = [];
|
2018-05-01 13:18:45 +03:00
|
|
|
GroupStore.getGroupRooms(this.props.groupId).forEach((r) => {
|
2017-10-05 16:30:04 +03:00
|
|
|
const nameMatch = (r.name || '').toLowerCase().includes(lowerCaseQuery);
|
|
|
|
const topicMatch = (r.topic || '').toLowerCase().includes(lowerCaseQuery);
|
|
|
|
const aliasMatch = (r.canonical_alias || '').toLowerCase().includes(lowerCaseQuery);
|
|
|
|
if (!(nameMatch || topicMatch || aliasMatch)) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
results.push({
|
|
|
|
room_id: r.room_id,
|
|
|
|
avatar_url: r.avatar_url,
|
|
|
|
name: r.name || r.canonical_alias,
|
2017-09-20 17:29:31 +03:00
|
|
|
});
|
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
this.processResults(results, query);
|
2017-10-05 16:30:04 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-09-20 17:29:31 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private doRoomSearch(query: string): void {
|
2017-09-26 19:11:54 +03:00
|
|
|
const lowerCaseQuery = query.toLowerCase();
|
|
|
|
const rooms = MatrixClientPeg.get().getRooms();
|
|
|
|
const results = [];
|
|
|
|
rooms.forEach((room) => {
|
2017-11-08 13:47:45 +03:00
|
|
|
let rank = Infinity;
|
2017-09-26 19:11:54 +03:00
|
|
|
const nameEvent = room.currentState.getStateEvents('m.room.name', '');
|
|
|
|
const name = nameEvent ? nameEvent.getContent().name : '';
|
|
|
|
const canonicalAlias = room.getCanonicalAlias();
|
2017-10-25 14:42:58 +03:00
|
|
|
const aliasEvents = room.currentState.getStateEvents('m.room.aliases');
|
|
|
|
const aliases = aliasEvents.map((ev) => ev.getContent().aliases).reduce((a, b) => {
|
|
|
|
return a.concat(b);
|
|
|
|
}, []);
|
2017-09-26 19:11:54 +03:00
|
|
|
|
|
|
|
const nameMatch = (name || '').toLowerCase().includes(lowerCaseQuery);
|
2017-11-08 13:47:45 +03:00
|
|
|
let aliasMatch = false;
|
|
|
|
let shortestMatchingAliasLength = Infinity;
|
|
|
|
aliases.forEach((alias) => {
|
|
|
|
if ((alias || '').toLowerCase().includes(lowerCaseQuery)) {
|
|
|
|
aliasMatch = true;
|
|
|
|
if (shortestMatchingAliasLength > alias.length) {
|
|
|
|
shortestMatchingAliasLength = alias.length;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
2017-11-08 13:32:48 +03:00
|
|
|
if (!(nameMatch || aliasMatch)) {
|
2017-09-26 19:11:54 +03:00
|
|
|
return;
|
|
|
|
}
|
2017-11-08 13:47:45 +03:00
|
|
|
|
|
|
|
if (aliasMatch) {
|
|
|
|
// A shorter matching alias will give a better rank
|
|
|
|
rank = shortestMatchingAliasLength;
|
|
|
|
}
|
|
|
|
|
2017-09-26 19:11:54 +03:00
|
|
|
const avatarEvent = room.currentState.getStateEvents('m.room.avatar', '');
|
|
|
|
const avatarUrl = avatarEvent ? avatarEvent.getContent().url : undefined;
|
2017-10-25 14:37:27 +03:00
|
|
|
|
2017-09-26 19:11:54 +03:00
|
|
|
results.push({
|
2017-11-08 13:47:45 +03:00
|
|
|
rank,
|
2017-09-26 19:11:54 +03:00
|
|
|
room_id: room.roomId,
|
|
|
|
avatar_url: avatarUrl,
|
2017-10-25 14:37:27 +03:00
|
|
|
name: name || canonicalAlias || aliases[0] || _t('Unnamed Room'),
|
2017-09-26 16:49:13 +03:00
|
|
|
});
|
|
|
|
});
|
2017-11-08 13:47:45 +03:00
|
|
|
|
|
|
|
// Sort by rank ascending (a high rank being less relevant)
|
|
|
|
const sortedResults = results.sort((a, b) => {
|
|
|
|
return a.rank - b.rank;
|
|
|
|
});
|
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
this.processResults(sortedResults, query);
|
2017-09-26 19:11:54 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-09-26 16:49:13 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private doUserDirectorySearch(query: string): void {
|
2017-06-07 19:40:09 +03:00
|
|
|
this.setState({
|
|
|
|
busy: true,
|
|
|
|
query,
|
|
|
|
searchError: null,
|
|
|
|
});
|
|
|
|
MatrixClientPeg.get().searchUserDirectory({
|
|
|
|
term: query,
|
|
|
|
}).then((resp) => {
|
2017-06-13 13:03:22 +03:00
|
|
|
// The query might have changed since we sent the request, so ignore
|
|
|
|
// responses for anything other than the latest query.
|
|
|
|
if (this.state.query !== query) {
|
|
|
|
return;
|
|
|
|
}
|
2021-07-20 12:26:33 +03:00
|
|
|
this.processResults(resp.results, query);
|
2017-06-07 19:40:09 +03:00
|
|
|
}).catch((err) => {
|
|
|
|
console.error('Error whilst searching user directory: ', err);
|
|
|
|
this.setState({
|
|
|
|
searchError: err.errcode ? err.message : _t('Something went wrong!'),
|
|
|
|
});
|
|
|
|
if (err.errcode === 'M_UNRECOGNIZED') {
|
|
|
|
this.setState({
|
|
|
|
serverSupportsUserDirectory: false,
|
|
|
|
});
|
|
|
|
// Do a local search immediately
|
2021-07-20 12:26:33 +03:00
|
|
|
this.doLocalSearch(query);
|
2017-06-07 19:40:09 +03:00
|
|
|
}
|
2019-11-18 13:03:05 +03:00
|
|
|
}).then(() => {
|
2017-06-07 19:40:09 +03:00
|
|
|
this.setState({
|
|
|
|
busy: false,
|
|
|
|
});
|
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-06-07 19:40:09 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private doLocalSearch(query: string): void {
|
2017-06-07 19:40:09 +03:00
|
|
|
this.setState({
|
|
|
|
query,
|
|
|
|
searchError: null,
|
|
|
|
});
|
2017-06-20 17:46:54 +03:00
|
|
|
const queryLowercase = query.toLowerCase();
|
2017-06-07 19:40:09 +03:00
|
|
|
const results = [];
|
|
|
|
MatrixClientPeg.get().getUsers().forEach((user) => {
|
2017-06-20 17:46:54 +03:00
|
|
|
if (user.userId.toLowerCase().indexOf(queryLowercase) === -1 &&
|
|
|
|
user.displayName.toLowerCase().indexOf(queryLowercase) === -1
|
2017-06-07 19:40:09 +03:00
|
|
|
) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Put results in the format of the new API
|
|
|
|
results.push({
|
|
|
|
user_id: user.userId,
|
|
|
|
display_name: user.displayName,
|
|
|
|
avatar_url: user.avatarUrl,
|
|
|
|
});
|
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
this.processResults(results, query);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-06-07 19:40:09 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private processResults(results, query: string): void {
|
2018-06-21 14:13:27 +03:00
|
|
|
const suggestedList = [];
|
2017-09-21 18:53:10 +03:00
|
|
|
results.forEach((result) => {
|
|
|
|
if (result.room_id) {
|
2019-01-11 00:44:19 +03:00
|
|
|
const client = MatrixClientPeg.get();
|
|
|
|
const room = client.getRoom(result.room_id);
|
|
|
|
if (room) {
|
|
|
|
const tombstone = room.currentState.getStateEvents('m.room.tombstone', '');
|
|
|
|
if (tombstone && tombstone.getContent() && tombstone.getContent()["replacement_room"]) {
|
|
|
|
const replacementRoom = client.getRoom(tombstone.getContent()["replacement_room"]);
|
|
|
|
|
|
|
|
// Skip rooms with tombstones where we are also aware of the replacement room.
|
|
|
|
if (replacementRoom) return;
|
|
|
|
}
|
|
|
|
}
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList.push({
|
2017-09-27 17:30:58 +03:00
|
|
|
addressType: 'mx-room-id',
|
2017-09-21 18:53:10 +03:00
|
|
|
address: result.room_id,
|
|
|
|
displayName: result.name,
|
|
|
|
avatarMxc: result.avatar_url,
|
|
|
|
isKnown: true,
|
|
|
|
});
|
2017-06-07 19:40:09 +03:00
|
|
|
return;
|
|
|
|
}
|
2017-09-27 13:52:05 +03:00
|
|
|
if (!this.props.includeSelf &&
|
2017-09-27 13:04:41 +03:00
|
|
|
result.user_id === MatrixClientPeg.get().credentials.userId
|
|
|
|
) {
|
2017-09-21 18:53:10 +03:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2017-06-07 19:40:09 +03:00
|
|
|
// Return objects, structure of which is defined
|
2017-08-15 12:57:24 +03:00
|
|
|
// by UserAddressType
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList.push({
|
2017-09-27 17:30:58 +03:00
|
|
|
addressType: 'mx-user-id',
|
2017-09-21 18:53:10 +03:00
|
|
|
address: result.user_id,
|
|
|
|
displayName: result.display_name,
|
|
|
|
avatarMxc: result.avatar_url,
|
2017-06-07 19:40:09 +03:00
|
|
|
isKnown: true,
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
// If the query is a valid address, add an entry for that
|
|
|
|
// This is important, otherwise there's no way to invite
|
|
|
|
// a perfectly valid address if there are close matches.
|
|
|
|
const addrType = getAddressType(query);
|
2019-08-29 17:20:14 +03:00
|
|
|
if (this.state.validAddressTypes.includes(addrType)) {
|
2018-12-08 01:03:58 +03:00
|
|
|
if (addrType === 'email' && !Email.looksValid(query)) {
|
2021-06-29 15:11:58 +03:00
|
|
|
this.setState({ searchError: _t("That doesn't look like a valid email address") });
|
2018-12-08 01:03:58 +03:00
|
|
|
return;
|
|
|
|
}
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList.unshift({
|
2017-06-07 19:40:09 +03:00
|
|
|
addressType: addrType,
|
|
|
|
address: query,
|
|
|
|
isKnown: false,
|
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.cancelThreepidLookup) this.cancelThreepidLookup();
|
2018-06-21 02:37:37 +03:00
|
|
|
if (addrType === 'email') {
|
2021-07-20 12:26:33 +03:00
|
|
|
this.lookupThreepid(addrType, query);
|
2017-06-07 19:40:09 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
this.setState({
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList,
|
2019-07-30 12:29:41 +03:00
|
|
|
invalidAddressError: false,
|
2017-06-07 19:40:09 +03:00
|
|
|
}, () => {
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.addressSelector.current) this.addressSelector.current.moveSelectionTop();
|
2017-06-07 19:40:09 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-06-07 19:40:09 +03:00
|
|
|
|
2021-07-20 13:16:17 +03:00
|
|
|
private addAddressesToList(addressTexts): IUserAddress[] {
|
2019-07-25 23:45:32 +03:00
|
|
|
const selectedList = this.state.selectedList.slice();
|
|
|
|
|
2019-07-25 23:49:22 +03:00
|
|
|
let hasError = false;
|
2019-07-25 23:45:32 +03:00
|
|
|
addressTexts.forEach((addressText) => {
|
|
|
|
addressText = addressText.trim();
|
|
|
|
const addrType = getAddressType(addressText);
|
2021-07-20 13:16:17 +03:00
|
|
|
const addrObj: IUserAddress = {
|
2019-07-25 23:45:32 +03:00
|
|
|
addressType: addrType,
|
|
|
|
address: addressText,
|
|
|
|
isKnown: false,
|
|
|
|
};
|
|
|
|
|
2019-08-29 17:20:14 +03:00
|
|
|
if (!this.state.validAddressTypes.includes(addrType)) {
|
2019-07-25 23:49:22 +03:00
|
|
|
hasError = true;
|
2019-07-25 23:45:32 +03:00
|
|
|
} else if (addrType === 'mx-user-id') {
|
|
|
|
const user = MatrixClientPeg.get().getUser(addrObj.address);
|
|
|
|
if (user) {
|
|
|
|
addrObj.displayName = user.displayName;
|
|
|
|
addrObj.avatarMxc = user.avatarUrl;
|
|
|
|
addrObj.isKnown = true;
|
|
|
|
}
|
|
|
|
} else if (addrType === 'mx-room-id') {
|
|
|
|
const room = MatrixClientPeg.get().getRoom(addrObj.address);
|
|
|
|
if (room) {
|
|
|
|
addrObj.displayName = room.name;
|
|
|
|
addrObj.isKnown = true;
|
|
|
|
}
|
2017-09-27 17:30:58 +03:00
|
|
|
}
|
2017-01-24 21:23:34 +03:00
|
|
|
|
2019-07-25 23:45:32 +03:00
|
|
|
selectedList.push(addrObj);
|
|
|
|
});
|
|
|
|
|
2017-01-24 21:23:34 +03:00
|
|
|
this.setState({
|
2018-06-21 14:13:27 +03:00
|
|
|
selectedList,
|
|
|
|
suggestedList: [],
|
2017-06-07 17:58:21 +03:00
|
|
|
query: "",
|
2019-07-30 12:29:41 +03:00
|
|
|
invalidAddressError: hasError ? true : this.state.invalidAddressError,
|
2017-01-24 21:23:34 +03:00
|
|
|
});
|
2021-07-20 12:26:33 +03:00
|
|
|
if (this.cancelThreepidLookup) this.cancelThreepidLookup();
|
2019-07-25 23:49:22 +03:00
|
|
|
return hasError ? null : selectedList;
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-01-19 20:03:16 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private async lookupThreepid(medium, address): Promise<string> {
|
2017-01-26 13:54:07 +03:00
|
|
|
let cancelled = false;
|
|
|
|
// Note that we can't safely remove this after we're done
|
|
|
|
// because we don't know that it's the same one, so we just
|
|
|
|
// leave it: it's replacing the old one each time so it's
|
|
|
|
// not like they leak.
|
2021-07-20 12:26:33 +03:00
|
|
|
this.cancelThreepidLookup = function() {
|
2017-01-26 13:54:07 +03:00
|
|
|
cancelled = true;
|
2017-08-15 11:10:13 +03:00
|
|
|
};
|
2017-01-26 13:54:07 +03:00
|
|
|
|
2017-01-25 21:51:28 +03:00
|
|
|
// wait a bit to let the user finish typing
|
2019-11-12 14:46:58 +03:00
|
|
|
await sleep(500);
|
2019-07-24 20:38:09 +03:00
|
|
|
if (cancelled) return null;
|
|
|
|
|
|
|
|
try {
|
2019-07-29 13:58:47 +03:00
|
|
|
const authClient = new IdentityAuthClient();
|
2019-07-30 12:05:57 +03:00
|
|
|
const identityAccessToken = await authClient.getAccessToken();
|
2019-07-25 13:06:46 +03:00
|
|
|
if (cancelled) return null;
|
|
|
|
|
2019-07-29 17:08:54 +03:00
|
|
|
const lookup = await MatrixClientPeg.get().lookupThreePid(
|
|
|
|
medium,
|
|
|
|
address,
|
|
|
|
undefined /* callback */,
|
2019-07-30 12:05:57 +03:00
|
|
|
identityAccessToken,
|
2019-07-29 17:08:54 +03:00
|
|
|
);
|
2019-07-24 20:38:09 +03:00
|
|
|
if (cancelled || lookup === null || !lookup.mxid) return null;
|
|
|
|
|
|
|
|
const profile = await MatrixClientPeg.get().getProfileInfo(lookup.mxid);
|
|
|
|
if (cancelled || profile === null) return null;
|
|
|
|
|
2017-01-26 13:08:44 +03:00
|
|
|
this.setState({
|
2018-06-21 14:13:27 +03:00
|
|
|
suggestedList: [{
|
2017-08-15 12:57:24 +03:00
|
|
|
// a UserAddressType
|
2017-01-26 13:08:44 +03:00
|
|
|
addressType: medium,
|
|
|
|
address: address,
|
2019-07-24 20:38:09 +03:00
|
|
|
displayName: profile.displayname,
|
|
|
|
avatarMxc: profile.avatar_url,
|
2017-01-26 13:08:44 +03:00
|
|
|
isKnown: true,
|
2017-06-07 17:58:21 +03:00
|
|
|
}],
|
2017-01-26 13:08:44 +03:00
|
|
|
});
|
2019-07-24 20:38:09 +03:00
|
|
|
} catch (e) {
|
|
|
|
console.error(e);
|
2019-07-30 12:29:41 +03:00
|
|
|
this.setState({
|
|
|
|
searchError: _t('Something went wrong!'),
|
|
|
|
});
|
2019-07-24 20:38:09 +03:00
|
|
|
}
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2017-01-25 21:51:28 +03:00
|
|
|
|
2021-07-20 13:16:17 +03:00
|
|
|
private getFilteredSuggestions(): IUserAddress[] {
|
2018-06-21 02:47:21 +03:00
|
|
|
// map addressType => set of addresses to avoid O(n*m) operation
|
|
|
|
const selectedAddresses = {};
|
2021-06-29 15:11:58 +03:00
|
|
|
this.state.selectedList.forEach(({ address, addressType }) => {
|
2018-06-21 02:47:21 +03:00
|
|
|
if (!selectedAddresses[addressType]) selectedAddresses[addressType] = new Set();
|
|
|
|
selectedAddresses[addressType].add(address);
|
|
|
|
});
|
|
|
|
|
2018-06-21 14:14:16 +03:00
|
|
|
// Filter out any addresses in the above already selected addresses (matching both type and address)
|
2021-06-29 15:11:58 +03:00
|
|
|
return this.state.suggestedList.filter(({ address, addressType }) => {
|
2018-06-21 14:14:16 +03:00
|
|
|
return !(selectedAddresses[addressType] && selectedAddresses[addressType].has(address));
|
2018-06-21 02:47:21 +03:00
|
|
|
});
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
2019-06-07 02:00:38 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onPaste = (e: React.ClipboardEvent): void => {
|
2019-07-30 00:27:31 +03:00
|
|
|
// Prevent the text being pasted into the textarea
|
|
|
|
e.preventDefault();
|
2019-07-25 23:45:32 +03:00
|
|
|
const text = e.clipboardData.getData("text");
|
2019-07-30 00:27:31 +03:00
|
|
|
// Process it as a list of addresses to add instead
|
2021-07-20 12:26:33 +03:00
|
|
|
this.addAddressesToList(text.split(/[\s,]+/));
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-07-25 23:45:32 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onUseDefaultIdentityServerClick = (e: React.MouseEvent): void => {
|
2019-08-29 17:20:14 +03:00
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
// Update the IS in account data. Actually using it may trigger terms.
|
2019-10-07 18:52:50 +03:00
|
|
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
2019-08-29 17:20:14 +03:00
|
|
|
useDefaultIdentityServer();
|
|
|
|
|
|
|
|
// Add email as a valid address type.
|
|
|
|
const { validAddressTypes } = this.state;
|
2021-07-20 13:16:17 +03:00
|
|
|
validAddressTypes.push(AddressType.Email);
|
2019-08-29 17:20:14 +03:00
|
|
|
this.setState({ validAddressTypes });
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-08-29 17:20:14 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
private onManageSettingsClick = (e: React.MouseEvent): void => {
|
2019-08-29 17:20:14 +03:00
|
|
|
e.preventDefault();
|
2020-05-14 06:07:19 +03:00
|
|
|
dis.fire(Action.ViewUserSettings);
|
2019-08-29 17:20:14 +03:00
|
|
|
this.onCancel();
|
2020-08-29 14:14:16 +03:00
|
|
|
};
|
2019-08-29 17:20:14 +03:00
|
|
|
|
2020-08-29 14:14:16 +03:00
|
|
|
render() {
|
2019-06-07 02:00:38 +03:00
|
|
|
const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
|
|
|
|
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
|
|
|
|
const AddressSelector = sdk.getComponent("elements.AddressSelector");
|
2018-06-21 02:33:24 +03:00
|
|
|
|
2019-08-28 17:12:00 +03:00
|
|
|
let inputLabel;
|
|
|
|
if (this.props.description) {
|
|
|
|
inputLabel = <div className="mx_AddressPickerDialog_label">
|
2021-07-20 12:26:33 +03:00
|
|
|
<label htmlFor="textinput">{ this.props.description }</label>
|
2019-08-28 17:12:00 +03:00
|
|
|
</div>;
|
|
|
|
}
|
|
|
|
|
2017-08-15 11:10:13 +03:00
|
|
|
const query = [];
|
2016-09-12 17:21:17 +03:00
|
|
|
// create the invite list
|
2018-06-21 14:13:27 +03:00
|
|
|
if (this.state.selectedList.length > 0) {
|
2017-08-14 19:43:00 +03:00
|
|
|
const AddressTile = sdk.getComponent("elements.AddressTile");
|
2018-06-21 14:13:27 +03:00
|
|
|
for (let i = 0; i < this.state.selectedList.length; i++) {
|
2016-09-12 17:04:32 +03:00
|
|
|
query.push(
|
2017-10-17 20:02:35 +03:00
|
|
|
<AddressTile
|
|
|
|
key={i}
|
2018-06-21 14:13:27 +03:00
|
|
|
address={this.state.selectedList[i]}
|
2017-10-17 20:02:35 +03:00
|
|
|
canDismiss={true}
|
|
|
|
onDismissed={this.onDismissed(i)}
|
|
|
|
showAddress={this.props.pickerType === 'user'} />,
|
2016-09-12 17:04:32 +03:00
|
|
|
);
|
|
|
|
}
|
2016-09-05 19:28:08 +03:00
|
|
|
}
|
2016-09-13 13:02:59 +03:00
|
|
|
|
2016-09-12 17:21:17 +03:00
|
|
|
// Add the query at the end
|
|
|
|
query.push(
|
2019-07-25 23:45:32 +03:00
|
|
|
<textarea
|
|
|
|
key={this.state.selectedList.length}
|
2021-07-20 12:26:33 +03:00
|
|
|
onPaste={this.onPaste}
|
|
|
|
rows={1}
|
2016-09-12 17:21:17 +03:00
|
|
|
id="textinput"
|
2021-07-20 12:26:33 +03:00
|
|
|
ref={this.textinput}
|
2019-04-03 18:27:45 +03:00
|
|
|
className="mx_AddressPickerDialog_input"
|
2016-09-12 17:21:17 +03:00
|
|
|
onChange={this.onQueryChanged}
|
2019-08-29 17:20:14 +03:00
|
|
|
placeholder={this.getPlaceholder()}
|
2016-09-12 17:21:17 +03:00
|
|
|
defaultValue={this.props.value}
|
|
|
|
autoFocus={this.props.focus}>
|
2017-06-07 17:58:21 +03:00
|
|
|
</textarea>,
|
2016-09-12 17:21:17 +03:00
|
|
|
);
|
2016-09-05 19:28:08 +03:00
|
|
|
|
2021-07-20 12:26:33 +03:00
|
|
|
const filteredSuggestedList = this.getFilteredSuggestions();
|
2019-06-07 02:00:38 +03:00
|
|
|
|
2017-06-07 17:58:21 +03:00
|
|
|
let error;
|
|
|
|
let addressSelector;
|
2019-07-30 12:29:41 +03:00
|
|
|
if (this.state.invalidAddressError) {
|
2019-08-29 17:20:14 +03:00
|
|
|
const validTypeDescriptions = this.state.validAddressTypes.map((t) => _t(addressTypeName[t]));
|
2019-04-03 18:27:45 +03:00
|
|
|
error = <div className="mx_AddressPickerDialog_error">
|
2017-09-28 13:21:06 +03:00
|
|
|
{ _t("You have entered an invalid address.") }
|
2017-09-27 19:11:30 +03:00
|
|
|
<br />
|
2018-06-21 02:37:37 +03:00
|
|
|
{ _t("Try using one of the following valid address types: %(validTypesList)s.", {
|
|
|
|
validTypesList: validTypeDescriptions.join(", "),
|
|
|
|
}) }
|
2017-08-15 11:10:13 +03:00
|
|
|
</div>;
|
2017-06-07 19:33:15 +03:00
|
|
|
} else if (this.state.searchError) {
|
2019-04-03 18:27:45 +03:00
|
|
|
error = <div className="mx_AddressPickerDialog_error">{ this.state.searchError }</div>;
|
2018-06-21 14:13:27 +03:00
|
|
|
} else if (this.state.query.length > 0 && filteredSuggestedList.length === 0 && !this.state.busy) {
|
2019-04-03 18:27:45 +03:00
|
|
|
error = <div className="mx_AddressPickerDialog_error">{ _t("No results") }</div>;
|
2016-09-13 13:02:59 +03:00
|
|
|
} else {
|
|
|
|
addressSelector = (
|
2021-07-20 12:26:33 +03:00
|
|
|
<AddressSelector ref={this.addressSelector}
|
2018-06-21 14:13:27 +03:00
|
|
|
addressList={filteredSuggestedList}
|
2017-10-17 20:02:35 +03:00
|
|
|
showAddress={this.props.pickerType === 'user'}
|
2017-09-28 13:21:06 +03:00
|
|
|
onSelected={this.onSelected}
|
|
|
|
truncateAt={TRUNCATE_QUERY_LIST}
|
2017-01-17 17:48:50 +03:00
|
|
|
/>
|
2016-09-13 13:02:59 +03:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2019-08-29 17:20:14 +03:00
|
|
|
let identityServer;
|
2019-09-09 17:03:00 +03:00
|
|
|
// If picker cannot currently accept e-mail but should be able to
|
2021-07-20 13:16:17 +03:00
|
|
|
if (this.props.pickerType === 'user' && !this.state.validAddressTypes.includes(AddressType.Email)
|
|
|
|
&& this.props.validAddressTypes.includes(AddressType.Email)) {
|
2019-08-29 17:20:14 +03:00
|
|
|
const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
|
|
|
|
if (defaultIdentityServerUrl) {
|
2021-07-20 12:26:33 +03:00
|
|
|
identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
|
2019-08-29 17:20:14 +03:00
|
|
|
"Use an identity server to invite by email. " +
|
|
|
|
"<default>Use the default (%(defaultIdentityServerName)s)</default> " +
|
|
|
|
"or manage in <settings>Settings</settings>.",
|
|
|
|
{
|
|
|
|
defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
|
|
|
|
},
|
|
|
|
{
|
2021-07-20 12:26:33 +03:00
|
|
|
default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{ sub }</a>,
|
|
|
|
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
2019-08-29 17:20:14 +03:00
|
|
|
},
|
2021-07-20 12:26:33 +03:00
|
|
|
) }</div>;
|
2019-08-29 17:20:14 +03:00
|
|
|
} else {
|
2021-07-20 12:26:33 +03:00
|
|
|
identityServer = <div className="mx_AddressPickerDialog_identityServer">{ _t(
|
2019-08-29 17:20:14 +03:00
|
|
|
"Use an identity server to invite by email. " +
|
|
|
|
"Manage in <settings>Settings</settings>.",
|
|
|
|
{}, {
|
2021-07-20 12:26:33 +03:00
|
|
|
settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{ sub }</a>,
|
2019-08-29 17:20:14 +03:00
|
|
|
},
|
2021-07-20 12:26:33 +03:00
|
|
|
) }</div>;
|
2019-08-29 17:20:14 +03:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2016-09-05 14:03:16 +03:00
|
|
|
return (
|
2019-04-03 18:27:45 +03:00
|
|
|
<BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
|
2017-12-18 12:36:12 +03:00
|
|
|
onFinished={this.props.onFinished} title={this.props.title}>
|
2021-07-20 12:26:33 +03:00
|
|
|
{ inputLabel }
|
2016-09-05 14:03:16 +03:00
|
|
|
<div className="mx_Dialog_content">
|
2019-04-03 18:27:45 +03:00
|
|
|
<div className="mx_AddressPickerDialog_inputContainer">{ query }</div>
|
2016-09-13 13:02:59 +03:00
|
|
|
{ error }
|
|
|
|
{ addressSelector }
|
2017-11-07 21:51:41 +03:00
|
|
|
{ this.props.extraNode }
|
2019-08-29 17:20:14 +03:00
|
|
|
{ identityServer }
|
2016-09-05 14:03:16 +03:00
|
|
|
</div>
|
2017-12-23 00:12:47 +03:00
|
|
|
<DialogButtons primaryButton={this.props.button}
|
|
|
|
onPrimaryButtonClick={this.onButtonClick}
|
|
|
|
onCancel={this.onCancel} />
|
2017-12-18 12:36:12 +03:00
|
|
|
</BaseDialog>
|
2016-09-05 14:03:16 +03:00
|
|
|
);
|
2020-08-29 14:14:16 +03:00
|
|
|
}
|
|
|
|
}
|