Allow connecting to an IS from address picker

This allows those who previously disconnected from an IS to either choose the
default IS or a custom one from Settings via the address picker dialog.

Part of https://github.com/vector-im/riot-web/issues/10619

src/components/views/dialogs/AddressPickerDialog.js

@@ -24,11 +24,14 @@ import createReactClass from 'create-react-class';
 import { _t, _td } from '../../../languageHandler';
 import sdk from '../../../index';
 import MatrixClientPeg from '../../../MatrixClientPeg';
+import dis from '../../../dispatcher';
 import Promise from 'bluebird';
 import { addressTypes, getAddressType } from '../../../UserAddress.js';
 import GroupStore from '../../../stores/GroupStore';
 import * as Email from '../../../email';
 import IdentityAuthClient from '../../../IdentityAuthClient';
+import { getDefaultIdentityServerUrl, useDefaultIdentityServer } from '../../../utils/IdentityServerUtils';
+import { abbreviateUrl } from '../../../utils/UrlUtils';
 
 const TRUNCATE_QUERY_LIST = 40;
 const QUERY_USER_DIRECTORY_DEBOUNCE_MS = 200;
@@ -49,7 +52,7 @@ module.exports = createReactClass({
         // Extra node inserted after picker input, dropdown and errors
         extraNode: PropTypes.node,
         value: PropTypes.string,
-        placeholder: PropTypes.string,
+        placeholder: PropTypes.oneOfType(PropTypes.string, PropTypes.func),
         roomId: PropTypes.string,
         button: PropTypes.string,
         focus: PropTypes.bool,
@@ -91,6 +94,9 @@ module.exports = createReactClass({
             // List of UserAddressType objects representing the set of
             // auto-completion results for the current search query.
             suggestedList: [],
+            // List of address types initialised from props, but may change while the
+            // dialog is open.
+            validAddressTypes: this.props.validAddressTypes,
         };
     },
 
@@ -101,6 +107,15 @@ module.exports = createReactClass({
         }
     },
 
+    getPlaceholder() {
+        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);
+    },
+
     onButtonClick: function() {
         let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
@@ -434,7 +449,7 @@ module.exports = createReactClass({
         // This is important, otherwise there's no way to invite
         // a perfectly valid address if there are close matches.
         const addrType = getAddressType(query);
-        if (this.props.validAddressTypes.includes(addrType)) {
+        if (this.state.validAddressTypes.includes(addrType)) {
             if (addrType === 'email' && !Email.looksValid(query)) {
                 this.setState({searchError: _t("That doesn't look like a valid email address")});
                 return;
@@ -470,7 +485,7 @@ module.exports = createReactClass({
                 isKnown: false,
             };
 
-            if (!this.props.validAddressTypes.includes(addrType)) {
+            if (!this.state.validAddressTypes.includes(addrType)) {
                 hasError = true;
             } else if (addrType === 'mx-user-id') {
                 const user = MatrixClientPeg.get().getUser(addrObj.address);
@@ -571,6 +586,24 @@ module.exports = createReactClass({
         this._addAddressesToList(text.split(/[\s,]+/));
     },
 
+    onUseDefaultIdentityServerClick(e) {
+        e.preventDefault();
+
+        // Update the IS in account data. Actually using it may trigger terms.
+        useDefaultIdentityServer();
+
+        // Add email as a valid address type.
+        const { validAddressTypes } = this.state;
+        validAddressTypes.push('email');
+        this.setState({ validAddressTypes });
+    },
+
+    onManageSettingsClick(e) {
+        e.preventDefault();
+        dis.dispatch({ action: 'view_user_settings' });
+        this.onCancel();
+    },
+
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
@@ -610,7 +643,7 @@ module.exports = createReactClass({
                 ref="textinput"
                 className="mx_AddressPickerDialog_input"
                 onChange={this.onQueryChanged}
-                placeholder={this.props.placeholder}
+                placeholder={this.getPlaceholder()}
                 defaultValue={this.props.value}
                 autoFocus={this.props.focus}>
             </textarea>,
@@ -621,7 +654,7 @@ module.exports = createReactClass({
         let error;
         let addressSelector;
         if (this.state.invalidAddressError) {
-            const validTypeDescriptions = this.props.validAddressTypes.map((t) => _t(addressTypeName[t]));
+            const validTypeDescriptions = this.state.validAddressTypes.map((t) => _t(addressTypeName[t]));
             error = <div className="mx_AddressPickerDialog_error">
                 { _t("You have entered an invalid address.") }
                 <br />
@@ -644,6 +677,33 @@ module.exports = createReactClass({
             );
         }
 
+        let identityServer;
+        if (this.props.pickerType === 'user' && !this.state.validAddressTypes.includes('email')) {
+            const defaultIdentityServerUrl = getDefaultIdentityServerUrl();
+            if (defaultIdentityServerUrl) {
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                    "Use an identity server to invite by email. " +
+                    "<default>Use the default (%(defaultIdentityServerName)s)</default> " +
+                    "or manage in <settings>Settings</settings>.",
+                    {
+                        defaultIdentityServerName: abbreviateUrl(defaultIdentityServerUrl),
+                    },
+                    {
+                        default: sub => <a href="#" onClick={this.onUseDefaultIdentityServerClick}>{sub}</a>,
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
+                    },
+                )}</div>;
+            } else {
+                identityServer = <div className="mx_AddressPickerDialog_identityServer">{_t(
+                    "Use an identity server to invite by email. " +
+                    "Manage in <settings>Settings</settings>.",
+                    {}, {
+                        settings: sub => <a href="#" onClick={this.onManageSettingsClick}>{sub}</a>,
+                    },
+                )}</div>;
+            }
+        }
+
         return (
             <BaseDialog className="mx_AddressPickerDialog" onKeyDown={this.onKeyDown}
                 onFinished={this.props.onFinished} title={this.props.title}>
@@ -653,6 +713,7 @@ module.exports = createReactClass({
                     { error }
                     { addressSelector }
                     { this.props.extraNode }
+                    { identityServer }
                 </div>
                 <DialogButtons primaryButton={this.props.button}
                     onPrimaryButtonClick={this.onButtonClick}