Reveal custom IS field only when required

res/css/views/auth/_ServerConfig.scss

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -14,23 +15,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ServerConfig_fields {
-    display: flex;
-    margin: 1em 0;
-}
-
-.mx_ServerConfig_fields .mx_Field {
-    margin: 0 5px;
-}
-
-.mx_ServerConfig_fields .mx_Field:first-child {
-    margin-left: 0;
-}
-
-.mx_ServerConfig_fields .mx_Field:last-child {
-    margin-right: 0;
-}
-
 .mx_ServerConfig_help:link {
     opacity: 0.8;
 }
@@ -39,3 +23,13 @@ limitations under the License.
     display: block;
     color: $warning-color;
 }
+
+.mx_ServerConfig_identityServer {
+    transform: scaleY(0);
+    transform-origin: top;
+    transition: transform 0.25s;
+
+    &.mx_ServerConfig_identityServer_shown {
+        transform: scaleY(1);
+    }
+}

src/components/structures/auth/ForgotPassword.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2017, 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -208,6 +209,7 @@ module.exports = React.createClass({
             serverConfig={this.props.serverConfig}
             onServerConfigChange={this.props.onServerConfigChange}
             delayTimeMs={0}
+            showIdentityServerIfRequiredByHomeserver={true}
             onAfterSubmit={this.onServerDetailsNextPhaseClick}
             submitText={_t("Next")}
             submitClass="mx_Login_submit"

src/components/structures/auth/Registration.js

@@ -499,6 +499,7 @@ module.exports = React.createClass({
                     serverConfig={this.props.serverConfig}
                     onServerConfigChange={this.props.onServerConfigChange}
                     delayTimeMs={250}
+                    showIdentityServerIfRequiredByHomeserver={true}
                     {...serverDetailsProps}
                 />;
                 break;

src/components/views/auth/ServerConfig.js

@@ -1,6 +1,7 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
 Copyright 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -23,6 +24,8 @@ import { _t } from '../../../languageHandler';
 import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
 import SdkConfig from "../../../SdkConfig";
+import { createClient } from 'matrix-js-sdk/lib/matrix';
+import classNames from 'classnames';
 
 /*
  * A pure UI component which displays the HS and IS to use.
@@ -46,6 +49,10 @@ export default class ServerConfig extends React.PureComponent {
         // Optional class for the submit button. Only applies if the submit button
         // is to be rendered.
         submitClass: PropTypes.string,
+
+        // Whether the flow this component is embedded in requires an identity
+        // server when the homeserver says it will need one. Default false.
+        showIdentityServerIfRequiredByHomeserver: PropTypes.bool,
     };
 
     static defaultProps = {
@@ -61,6 +68,7 @@ export default class ServerConfig extends React.PureComponent {
             errorText: "",
             hsUrl: props.serverConfig.hsUrl,
             isUrl: props.serverConfig.isUrl,
+            showIdentityServer: false,
         };
     }
 
@@ -75,7 +83,29 @@ export default class ServerConfig extends React.PureComponent {
         // TODO: Do we want to support .well-known lookups here?
         // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
         // find their homeserver without demanding they use "https://matrix.org"
-        return this.validateAndApplyServer(this.state.hsUrl, this.state.isUrl);
+        const result = this.validateAndApplyServer(this.state.hsUrl, this.state.isUrl);
+        if (!result) {
+            return result;
+        }
+
+        // If the UI flow this component is embedded in requires an identity
+        // server when the homeserver says it will need one, check first and
+        // reveal this field if not already shown.
+        // XXX: This a backward compatibility path for homeservers that require
+        // an identity server to be passed during certain flows.
+        // See also https://github.com/matrix-org/synapse/pull/5868.
+        if (
+            this.props.showIdentityServerIfRequiredByHomeserver &&
+            !this.state.showIdentityServer &&
+            await this.isIdentityServerRequiredByHomeserver()
+        ) {
+            this.setState({
+                showIdentityServer: true,
+            });
+            return null;
+        }
+
+        return result;
     }
 
     async validateAndApplyServer(hsUrl, isUrl) {
@@ -126,6 +156,15 @@ export default class ServerConfig extends React.PureComponent {
         }
     }
 
+    async isIdentityServerRequiredByHomeserver() {
+        // XXX: We shouldn't have to create a whole new MatrixClient just to
+        // check if the homeserver requires an identity server... Should it be
+        // extracted to a static utils function...?
+        return createClient({
+            baseUrl: this.state.hsUrl,
+        }).doesServerRequireIdServerParam();
+    }
+
     onHomeserverBlur = (ev) => {
         this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
             this.validateServer();
@@ -171,8 +210,49 @@ export default class ServerConfig extends React.PureComponent {
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
     };
 
-    render() {
+    _renderHomeserverSection() {
+        const Field = sdk.getComponent('elements.Field');
+        return <div>
+            {_t("Enter your custom homeserver URL <a>What does this mean?</a>", {}, {
+                a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                    {sub}
+                </a>,
+            })}
+            <Field id="mx_ServerConfig_hsUrl"
+                label={_t("Homeserver URL")}
+                placeholder={this.props.serverConfig.hsUrl}
+                value={this.state.hsUrl}
+                onBlur={this.onHomeserverBlur}
+                onChange={this.onHomeserverChange}
+                disabled={this.state.busy}
+            />
+        </div>;
+    }
+
+    _renderIdentityServerSection() {
         const Field = sdk.getComponent('elements.Field');
+        const classes = classNames({
+            "mx_ServerConfig_identityServer": true,
+            "mx_ServerConfig_identityServer_shown": this.state.showIdentityServer,
+        });
+        return <div className={classes}>
+            {_t("Enter your custom identity server URL <a>What does this mean?</a>", {}, {
+                a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
+                    {sub}
+            </a>,
+            })}
+            <Field id="mx_ServerConfig_isUrl"
+                label={_t("Identity Server URL")}
+                placeholder={this.props.serverConfig.isUrl}
+                value={this.state.isUrl || ''}
+                onBlur={this.onIdentityServerBlur}
+                onChange={this.onIdentityServerChange}
+                disabled={this.state.busy}
+            />
+        </div>;
+    }
+
+    render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
 
         const errorText = this.state.errorText
@@ -191,31 +271,10 @@ export default class ServerConfig extends React.PureComponent {
         return (
             <div className="mx_ServerConfig">
                 <h3>{_t("Other servers")}</h3>
-                {_t("Enter custom server URLs <a>What does this mean?</a>", {}, {
-                    a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
-                        { sub }
-                    </a>,
-                })}
                 {errorText}
+                {this._renderHomeserverSection()}
+                {this._renderIdentityServerSection()}
                 <form onSubmit={this.onSubmit} autoComplete={false} action={null}>
-                    <div className="mx_ServerConfig_fields">
-                        <Field id="mx_ServerConfig_hsUrl"
-                            label={_t("Homeserver URL")}
-                            placeholder={this.props.serverConfig.hsUrl}
-                            value={this.state.hsUrl}
-                            onBlur={this.onHomeserverBlur}
-                            onChange={this.onHomeserverChange}
-                            disabled={this.state.busy}
-                        />
-                        <Field id="mx_ServerConfig_isUrl"
-                            label={_t("Identity Server URL")}
-                            placeholder={this.props.serverConfig.isUrl}
-                            value={this.state.isUrl || ''}
-                            onBlur={this.onIdentityServerBlur}
-                            onChange={this.onIdentityServerChange}
-                            disabled={this.state.busy}
-                        />
-                    </div>
                     {submitButton}
                 </form>
             </div>

src/i18n/strings/en_EN.json

@@ -1460,10 +1460,11 @@
     "Use an email address to recover your account.": "Use an email address to recover your account.",
     "Other users can invite you to rooms using your contact details.": "Other users can invite you to rooms using your contact details.",
     "No Identity Server is configured: no email addreses can be added. You will be unable to reset your password.": "No Identity Server is configured: no email addreses can be added. You will be unable to reset your password.",
-    "Other servers": "Other servers",
-    "Enter custom server URLs <a>What does this mean?</a>": "Enter custom server URLs <a>What does this mean?</a>",
+    "Enter your custom homeserver URL <a>What does this mean?</a>": "Enter your custom homeserver URL <a>What does this mean?</a>",
     "Homeserver URL": "Homeserver URL",
+    "Enter your custom identity server URL <a>What does this mean?</a>": "Enter your custom identity server URL <a>What does this mean?</a>",
     "Identity Server URL": "Identity Server URL",
+    "Other servers": "Other servers",
     "Free": "Free",
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",
     "Premium": "Premium",