Add Modular server config screen

res/css/views/auth/_AuthBody.scss

@@ -42,6 +42,11 @@ limitations under the License.
     font-weight: normal;
 }
 
+.mx_AuthBody .mx_Field input {
+    width: 100%;
+    box-sizing: border-box;
+}
+
 .mx_AuthBody a:link,
 .mx_AuthBody a:hover,
 .mx_AuthBody a:visited {

res/css/views/auth/_ServerConfig.scss

@@ -20,6 +20,7 @@ limitations under the License.
 }
 
 .mx_ServerConfig_fields .mx_Field {
+    flex: 1;
     margin: 0 5px;
 }
 

src/components/structures/auth/Login.js

@@ -333,8 +333,6 @@ module.exports = React.createClass({
                 break;
             }
             case ServerType.PREMIUM:
-                // TODO: Handle the Modular case.
-                break;
             case ServerType.ADVANCED:
                 this.onServerConfigChange({
                     hsUrl: this.props.defaultHsUrl,
@@ -541,6 +539,7 @@ module.exports = React.createClass({
     serverComponentForStep() {
         const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
         const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         // TODO: May need to adjust the behavior of this config option
@@ -564,6 +563,13 @@ module.exports = React.createClass({
             case ServerType.FREE:
                 break;
             case ServerType.PREMIUM:
+                serverDetails = <ModularServerConfig
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
                 break;
             case ServerType.ADVANCED:
                 serverDetails = <ServerConfig

src/components/views/auth/ModularServerConfig.js

@@ -0,0 +1,130 @@
+/*
+Copyright 2019 New Vector Ltd
+
+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.
+*/
+
+'use strict';
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import sdk from '../../../index';
+import { _t } from '../../../languageHandler';
+
+const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
+
+/**
+ * Configure the Modular server name.
+ *
+ * This is a variant of ServerConfig with only the HS field and different body
+ * text that is specific to the Modular case.
+ */
+module.exports = React.createClass({
+    displayName: 'ModularServerConfig',
+
+    propTypes: {
+        onServerConfigChange: PropTypes.func,
+
+        // default URLs are defined in config.json (or the hardcoded defaults)
+        // they are used if the user has not overridden them with a custom URL.
+        // In other words, if the custom URL is blank, the default is used.
+        defaultHsUrl: PropTypes.string, // e.g. https://matrix.org
+
+        // This component always uses the default IS URL and doesn't allow it
+        // to be changed.  We still receive it as a prop here to simplify
+        // consumers by still passing the IS URL via onServerConfigChange.
+        defaultIsUrl: PropTypes.string, // e.g. https://vector.im
+
+        // custom URLs are explicitly provided by the user and override the
+        // default URLs.  The user enters them via the component's input fields,
+        // which is reflected on these properties whenever on..UrlChanged fires.
+        // They are persisted in localStorage by MatrixClientPeg, and so can
+        // override the default URLs when the component initially loads.
+        customHsUrl: PropTypes.string,
+
+        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
+    },
+
+    getDefaultProps: function() {
+        return {
+            onServerConfigChange: function() {},
+            customHsUrl: "",
+            delayTimeMs: 0,
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            hsUrl: this.props.customHsUrl,
+        };
+    },
+
+    componentWillReceiveProps: function(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: this.props.defaultIsUrl,
+        });
+    },
+
+    onHomeserverChanged: function(ev) {
+        this.setState({hsUrl: ev.target.value}, () => {
+            this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
+                let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
+                if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
+                this.props.onServerConfigChange({
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.props.defaultIsUrl,
+                });
+            });
+        });
+    },
+
+    _waitThenInvoke: function(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    },
+
+    render: function() {
+        const Field = sdk.getComponent('elements.Field');
+
+        return (
+            <div className="mx_ServerConfig">
+                <h3>{_t("Your Modular server")}</h3>
+                {_t(
+                    "Enter the location of your Modular homeserver. It may use your own " +
+                    "domain name or be a subdomain of <a>modular.im</a>.",
+                    {}, {
+                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                            {sub}
+                        </a>,
+                    },
+                )}
+                <div className="mx_ServerConfig_fields">
+                    <Field id="mx_ServerConfig_hsUrl"
+                        label={_t("Server Name")}
+                        placeholder={this.props.defaultHsUrl}
+                        value={this.state.hsUrl}
+                        onChange={this.onHomeserverChanged}
+                    />
+                </div>
+            </div>
+        );
+    },
+});

src/i18n/strings/en_EN.json

@@ -1179,6 +1179,9 @@
     "Please enter the code it contains:": "Please enter the code it contains:",
     "Code": "Code",
     "Start authentication": "Start authentication",
+    "Your Modular server": "Your Modular server",
+    "Enter the location of your Modular homeserver. It may use your own domain name or be a subdomain of <a>modular.im</a>.": "Enter the location of your Modular homeserver. It may use your own domain name or be a subdomain of <a>modular.im</a>.",
+    "Server Name": "Server Name",
     "The email field must not be blank.": "The email field must not be blank.",
     "The username field must not be blank.": "The username field must not be blank.",
     "The phone number field must not be blank.": "The phone number field must not be blank.",