Initial wiring of server type selector

src/components/structures/auth/Login.js

@@ -26,6 +26,7 @@ import Login from '../../../Login';
 import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
 import { AutoDiscovery } from "matrix-js-sdk";
+import * as ServerType from '../../views/auth/ServerTypeSelector';
 
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
@@ -80,6 +81,8 @@ module.exports = React.createClass({
             busy: false,
             errorText: null,
             loginIncorrect: false,
+
+            serverType: null,
             enteredHomeserverUrl: this.props.customHsUrl || this.props.defaultHsUrl,
             enteredIdentityServerUrl: this.props.customIsUrl || this.props.defaultIsUrl,
 
@@ -299,6 +302,12 @@ module.exports = React.createClass({
         });
     },
 
+    onServerTypeChange(type) {
+        this.setState({
+            serverType: type,
+        });
+    },
+
     onRegisterClick: function(ev) {
         ev.preventDefault();
         ev.stopPropagation();
@@ -475,7 +484,45 @@ module.exports = React.createClass({
         return errorText;
     },
 
-    componentForStep: function(step) {
+    serverComponentForStep() {
+        const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
+        const ServerConfig = sdk.getComponent("auth.ServerConfig");
+
+        // TODO: May need to adjust the behavior of this config option
+        if (SdkConfig.get()['disable_custom_urls']) {
+            return null;
+        }
+
+        let serverDetails = null;
+        switch (this.state.serverType) {
+            case ServerType.FREE:
+                break;
+            case ServerType.PREMIUM:
+                break;
+            case ServerType.ADVANCED:
+                serverDetails = <ServerConfig ref="serverConfig"
+                    customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
+                    customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    defaultIsUrl={this.props.defaultIsUrl}
+                    onServerConfigChange={this.onServerConfigChange}
+                    delayTimeMs={1000}
+                />;
+                break;
+        }
+
+        return <div>
+            <ServerTypeSelector
+                defaultHsUrl={this.props.defaultHsUrl}
+                onChange={this.onServerTypeChange}
+            />
+            {serverDetails}
+        </div>;
+    },
+
+    loginComponentForStep() {
+        const step = this.state.currentFlow;
+
         if (!step) {
             return null;
         }
@@ -530,7 +577,6 @@ module.exports = React.createClass({
         const AuthPage = sdk.getComponent("auth.AuthPage");
         const AuthHeader = sdk.getComponent("auth.AuthHeader");
         const AuthBody = sdk.getComponent("auth.AuthBody");
-        const ServerConfig = sdk.getComponent("auth.ServerConfig");
         const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         const errorText = this.props.defaultServerDiscoveryError || this.state.discoveryError || this.state.errorText;
@@ -543,18 +589,6 @@ module.exports = React.createClass({
                 </a>;
         }
 
-        let serverConfig;
-
-        if (!SdkConfig.get()['disable_custom_urls']) {
-            serverConfig = <ServerConfig ref="serverConfig"
-                customHsUrl={this.state.discoveredHsUrl || this.props.customHsUrl}
-                customIsUrl={this.state.discoveredIsUrl || this.props.customIsUrl}
-                defaultHsUrl={this.props.defaultHsUrl}
-                defaultIsUrl={this.props.defaultIsUrl}
-                onServerConfigChange={this.onServerConfigChange}
-                delayTimeMs={1000} />;
-        }
-
         let errorTextSection;
         if (errorText) {
             errorTextSection = (
@@ -573,8 +607,8 @@ module.exports = React.createClass({
                         {loader}
                     </h2>
                     { errorTextSection }
-                    { this.componentForStep(this.state.currentFlow) }
+                    { this.serverComponentForStep() }
-                    { serverConfig }
+                    { this.loginComponentForStep() }
                     <a className="mx_Auth_changeFlow" onClick={this.onRegisterClick} href="#">
                         { _t('Create account') }
                     </a>

src/components/views/auth/ServerTypeSelector.js

@@ -22,15 +22,21 @@ import classnames from 'classnames';
 
 const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
+export const FREE = 'Free';
+export const PREMIUM = 'Premium';
+export const ADVANCED = 'Advanced';
+
+const MATRIX_ORG_HS = 'https://matrix.org';
+
 const TYPES = [
     {
-        id: 'Free',
+        id: FREE,
         label: () => _t('Free'),
         logo: () => <img src={require('../../../../res/img/feather-icons/matrix-org-bw-logo.svg')} />,
         description: () => _t('Join millions for free on the largest public server'),
     },
     {
-        id: 'Premium',
+        id: PREMIUM,
         label: () => _t('Premium'),
         logo: () => <img src={require('../../../../res/img/feather-icons/modular-bw-logo.svg')} />,
         description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
@@ -40,7 +46,7 @@ const TYPES = [
         }),
     },
     {
-        id: 'Advanced',
+        id: ADVANCED,
         label: () => _t('Advanced'),
         logo: () => <div>
             <img src={require('../../../../res/img/feather-icons/globe.svg')} />
@@ -50,10 +56,24 @@ const TYPES = [
     },
 ];
 
+function getDefaultType(defaultHsUrl) {
+    if (!defaultHsUrl) {
+        return null;
+    } else if (defaultHsUrl === MATRIX_ORG_HS) {
+        return FREE;
+    } else if (new URL(defaultHsUrl).hostname.endsWith('.modular.im')) {
+        // TODO: Use a Riot config parameter to detect Modular-ness.
+        // https://github.com/vector-im/riot-web/issues/8253
+        return PREMIUM;
+    } else {
+        return ADVANCED;
+    }
+}
+
 export default class ServerTypeSelector extends React.PureComponent {
     static propTypes = {
-        // ID of the initial type to show as selected or null for none.
+        // The default HS URL as another way to set the initially selected type.
-        selected: PropTypes.string,
+        defaultHsUrl: PropTypes.string,
         // Handler called when the selected type changes.
         onChange: PropTypes.func.isRequired,
     }
@@ -61,30 +81,28 @@ export default class ServerTypeSelector extends React.PureComponent {
     constructor(props) {
         super(props);
 
+        const { defaultHsUrl } = props;
         this.state = {
-            selected: null,
+            selected: getDefaultType(defaultHsUrl),
         };
     }
 
-    componentWillReceiveProps(props) {
+    updateSelectedType(type) {
-        const { selected } = props;
+        if (this.state.selected === type) {
+            return;
+        }
         this.setState({
-            selected,
+            selected: type,
         });
+        if (this.props.onChange) {
+            this.props.onChange(type);
+        }
     }
 
     onClick = (e) => {
         e.stopPropagation();
-        const id = e.currentTarget.dataset.id;
+        const type = e.currentTarget.dataset.id;
-        if (this.state.selected === id) {
+        this.updateSelectedType(type);
-            return;
-        }
-        this.setState({
-            selected: id,
-        });
-        if (this.props.onChange) {
-            this.props.onChange(id);
-        }
     }
 
     render() {