Reveal custom IS field only when required

This hides the identity server at first from the custom server auth flows. For
the flows that may need an IS if the HS requires it (registration, password
reset), we then check with the HS before proceeding further and reveal the IS
field if it is in fact needed.

Fixes https://github.com/vector-im/riot-web/issues/10553

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.
+        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

@@ -1461,8 +1461,9 @@
     "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",
     "Free": "Free",
     "Join millions for free on the largest public server": "Join millions for free on the largest public server",