diff --git a/res/css/views/auth/_AuthBody.scss b/res/css/views/auth/_AuthBody.scss index d0df97a8e1..845aea3fd9 100644 --- a/res/css/views/auth/_AuthBody.scss +++ b/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 { diff --git a/res/css/views/auth/_ServerConfig.scss b/res/css/views/auth/_ServerConfig.scss index 686f4b442c..79ad9e8238 100644 --- a/res/css/views/auth/_ServerConfig.scss +++ b/res/css/views/auth/_ServerConfig.scss @@ -20,6 +20,7 @@ limitations under the License. } .mx_ServerConfig_fields .mx_Field { + flex: 1; margin: 0 5px; } diff --git a/src/components/structures/auth/Login.js b/src/components/structures/auth/Login.js index fb50063806..e0fe5bfc16 100644 --- a/src/components/structures/auth/Login.js +++ b/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 = ; break; case ServerType.ADVANCED: serverDetails = { + 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 ( +
+

{_t("Your Modular server")}

+ {_t( + "Enter the location of your Modular homeserver. It may use your own " + + "domain name or be a subdomain of modular.im.", + {}, { + a: sub => + {sub} + , + }, + )} +
+ +
+
+ ); + }, +}); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index f4d3429835..17e70c9fd5 100644 --- a/src/i18n/strings/en_EN.json +++ b/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 modular.im.": "Enter the location of your Modular homeserver. It may use your own domain name or be a subdomain of modular.im.", + "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.",