Merge pull request #2517 from jryans/auth-server-type-selector

Add server type selector and style login flow

src/components/views/auth/CustomServerDialog.js

@@ -27,17 +27,17 @@ module.exports = React.createClass({
                     { _t("Custom Server Options") }
                 </div>
                 <div className="mx_Dialog_content">
-                    <span>
-                        { _t("You can use the custom server options to sign into other Matrix " +
-                        "servers by specifying a different Home server URL.") }
-                        <br />
-                        { _t("This allows you to use this app with an existing Matrix account on " +
-                            "a different home server.") }
-                        <br />
-                        <br />
-                        { _t("You can also set a custom identity server but this will typically prevent " +
-                            "interaction with users based on email address.") }
-                    </span>
+                    <p>{_t(
+                        "You can use the custom server options to sign into other " +
+                        "Matrix servers by specifying a different homeserver URL. This " +
+                        "allows you to use this app with an existing Matrix account on a " +
+                        "different homeserver.",
+                    )}</p>
+                    <p>{_t(
+                        "You can also set a custom identity server, but you won't be " +
+                        "able to invite users by email address, or be invited by email " +
+                        "address yourself.",
+                    )}</p>
                 </div>
                 <div className="mx_Dialog_buttons">
                     <button onClick={this.props.onFinished} autoFocus={true}>

src/components/views/auth/ModularServerConfig.js

@@ -0,0 +1,126 @@
+/*
+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.
+*/
+
+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.
+ */
+export default class ModularServerConfig extends React.PureComponent {
+    static 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
+    }
+
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+        };
+    }
+
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl) return;
+
+        this.setState({
+            hsUrl: newProps.customHsUrl,
+        });
+        this.props.onServerConfigChange({
+            hsUrl: newProps.customHsUrl,
+            isUrl: this.props.defaultIsUrl,
+        });
+    }
+
+    onHomeserverChanged = (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(existingTimeoutId, fn) {
+        if (existingTimeoutId) {
+            clearTimeout(existingTimeoutId);
+        }
+        return setTimeout(fn.bind(this), this.props.delayTimeMs);
+    }
+
+    render() {
+        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/components/views/auth/PasswordLogin.js

@@ -29,6 +29,7 @@ import SdkConfig from '../../../SdkConfig';
 class PasswordLogin extends React.Component {
     static defaultProps = {
         onError: function() {},
+        onEditServerDetailsClick: null,
         onUsernameChanged: function() {},
         onUsernameBlur: function() {},
         onPasswordChanged: function() {},
@@ -93,7 +94,7 @@ class PasswordLogin extends React.Component {
             case PasswordLogin.LOGIN_FIELD_MXID:
                 username = this.state.username;
                 if (!username) {
-                    error = _t('The user name field must not be blank.');
+                    error = _t('The username field must not be blank.');
                 }
                 break;
             case PasswordLogin.LOGIN_FIELD_PHONE:
@@ -158,18 +159,16 @@ class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType, disabled) {
+    renderLoginField(loginType) {
         const classes = {
             mx_Login_field: true,
-            mx_Login_field_disabled: disabled,
         };
 
         switch (loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
-                classes.mx_Login_email = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
-                    className={classNames(classes)}
+                    className="mx_Login_field"
                     ref={(e) => {this._loginField = e;}}
                     key="email_input"
                     type="text"
@@ -179,10 +178,8 @@ class PasswordLogin extends React.Component {
                     placeholder="joe@example.com"
                     value={this.state.username}
                     autoFocus
-                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
-                classes.mx_Login_username = true;
                 classes.error = this.props.loginIncorrect && !this.state.username;
                 return <input
                     className={classNames(classes)}
@@ -195,14 +192,12 @@ class PasswordLogin extends React.Component {
                     placeholder={SdkConfig.get().disable_custom_urls ?
                                       _t("Username on %(hs)s", {
                                         hs: this.props.hsUrl.replace(/^https?:\/\//, ''),
-                                      }) : _t("User name")}
+                                      }) : _t("Username")}
                     value={this.state.username}
                     autoFocus
-                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE: {
                 const CountryDropdown = sdk.getComponent('views.auth.CountryDropdown');
-                classes.mx_Login_phoneNumberField = true;
                 classes.mx_Login_field_has_prefix = true;
                 classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
                 return <div className="mx_Login_phoneSection">
@@ -212,7 +207,6 @@ class PasswordLogin extends React.Component {
                         value={this.state.phoneCountry}
                         isSmall={true}
                         showPrefix={true}
-                        disabled={disabled}
                     />
                     <input
                         className={classNames(classes)}
@@ -224,7 +218,6 @@ class PasswordLogin extends React.Component {
                         placeholder={_t("Mobile phone number")}
                         value={this.state.phoneNumber}
                         autoFocus
-                        disabled={disabled}
                     />
                 </div>;
             }
@@ -257,27 +250,35 @@ class PasswordLogin extends React.Component {
             </span>;
         }
 
-        let matrixIdText = _t('Matrix ID');
+        let yourMatrixAccountText = _t('Your account');
         if (this.props.hsName) {
-            matrixIdText = _t('%(serverName)s Matrix ID', {serverName: this.props.hsName});
+            yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: this.props.hsName});
         } else {
             try {
                 const parsedHsUrl = new URL(this.props.hsUrl);
-                matrixIdText = _t('%(serverName)s Matrix ID', {serverName: parsedHsUrl.hostname});
+                yourMatrixAccountText = _t('Your %(serverName)s account', {serverName: parsedHsUrl.hostname});
             } catch (e) {
                 // ignore
             }
         }
 
+        let editLink = null;
+        if (this.props.onEditServerDetailsClick) {
+            editLink = <a className="mx_Auth_editServerDetails"
+                href="#" onClick={this.props.onEditServerDetailsClick}
+            >
+                {_t('Edit')}
+            </a>;
+        }
+
         const pwFieldClass = classNames({
             mx_Login_field: true,
-            mx_Login_field_disabled: matrixIdText === '',
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
         const Dropdown = sdk.getComponent('elements.Dropdown');
 
-        const loginField = this.renderLoginField(this.state.loginType, matrixIdText === '');
+        const loginField = this.renderLoginField(this.state.loginType);
 
         let loginType;
         if (!SdkConfig.get().disable_3pid_login) {
@@ -287,9 +288,8 @@ class PasswordLogin extends React.Component {
                     <Dropdown
                         className="mx_Login_type_dropdown"
                         value={this.state.loginType}
-                        disabled={matrixIdText === ''}
                         onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ matrixIdText }</span>
+                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span>
                             <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
                             <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
                     </Dropdown>
@@ -297,22 +297,27 @@ class PasswordLogin extends React.Component {
             );
         }
 
-        const disableSubmit = this.props.disableSubmit || matrixIdText === '';
-
         return (
             <div>
+                <h3>
+                    {yourMatrixAccountText}
+                    {editLink}
+                </h3>
                 <form onSubmit={this.onSubmitForm}>
-                { loginType }
-                { loginField }
-                <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
-                    name="password"
-                    value={this.state.password} onChange={this.onPasswordChanged}
-                    placeholder={_t('Password')}
-                    disabled={matrixIdText === ''}
-                />
-                <br />
-                { forgotPasswordJsx }
-                <input className="mx_Login_submit" type="submit" value={_t('Sign in')} disabled={disableSubmit} />
+                    { loginType }
+                    { loginField }
+                    <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
+                        name="password"
+                        value={this.state.password} onChange={this.onPasswordChanged}
+                        placeholder={_t('Password')}
+                    />
+                    <br />
+                    { forgotPasswordJsx }
+                    <input className="mx_Login_submit"
+                        type="submit"
+                        value={_t('Sign in')}
+                        disabled={this.props.disableSubmit}
+                    />
                 </form>
             </div>
         );

src/components/views/auth/RegistrationForm.js

@@ -305,7 +305,7 @@ module.exports = React.createClass({
             <input className="mx_Login_submit" type="submit" value={_t("Register")} />
         );
 
-        const placeholderUserName = _t("User name");
+        const placeholderUsername = _t("Username");
 
         return (
             <div>
@@ -313,7 +313,7 @@ module.exports = React.createClass({
                     { emailSection }
                     { phoneSection }
                     <input type="text" ref="username"
-                        placeholder={placeholderUserName} defaultValue={this.props.defaultUsername}
+                        placeholder={placeholderUsername} defaultValue={this.props.defaultUsername}
                         className={this._classForField(FIELD_USERNAME, 'mx_Login_field')}
                         onBlur={function() {self.validateField(FIELD_USERNAME);}} />
                     <br />

src/components/views/auth/ServerConfig.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+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.
@@ -14,21 +15,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-'use strict';
-
-const React = require('react');
+import React from 'react';
 import PropTypes from 'prop-types';
-const Modal = require('../../../Modal');
-const sdk = require('../../../index');
+import Modal from '../../../Modal';
+import sdk from '../../../index';
 import { _t } from '../../../languageHandler';
 
-/**
+/*
  * A pure UI component which displays the HS and IS to use.
  */
-module.exports = React.createClass({
-    displayName: 'ServerConfig',
 
-    propTypes: {
+export default class ServerConfig extends React.PureComponent {
+    static propTypes = {
         onServerConfigChange: PropTypes.func,
 
         // default URLs are defined in config.json (or the hardcoded defaults)
@@ -45,155 +43,103 @@ module.exports = React.createClass({
         customHsUrl: PropTypes.string,
         customIsUrl: PropTypes.string,
 
-        withToggleButton: PropTypes.bool,
         delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
-    },
+    }
 
-    getDefaultProps: function() {
-        return {
-            onServerConfigChange: function() {},
-            customHsUrl: "",
-            customIsUrl: "",
-            withToggleButton: false,
-            delayTimeMs: 0,
+    static defaultProps = {
+        onServerConfigChange: function() {},
+        customHsUrl: "",
+        customIsUrl: "",
+        delayTimeMs: 0,
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            hsUrl: props.customHsUrl,
+            isUrl: props.customIsUrl,
         };
-    },
+    }
 
-    getInitialState: function() {
-        return {
-            hs_url: this.props.customHsUrl,
-            is_url: this.props.customIsUrl,
-            // if withToggleButton is false, then show the config all the time given we have no way otherwise of making it visible
-            configVisible: !this.props.withToggleButton ||
-                           (this.props.customHsUrl !== this.props.defaultHsUrl) ||
-                           (this.props.customIsUrl !== this.props.defaultIsUrl),
-        };
-    },
-
-    componentWillReceiveProps: function(newProps) {
-        if (newProps.customHsUrl === this.state.hs_url &&
-            newProps.customIsUrl === this.state.is_url) return;
+    componentWillReceiveProps(newProps) {
+        if (newProps.customHsUrl === this.state.hsUrl &&
+            newProps.customIsUrl === this.state.isUrl) return;
 
         this.setState({
-            hs_url: newProps.customHsUrl,
-            is_url: newProps.customIsUrl,
-            configVisible: !newProps.withToggleButton ||
-                (newProps.customHsUrl !== newProps.defaultHsUrl) ||
-                (newProps.customIsUrl !== newProps.defaultIsUrl),
+            hsUrl: newProps.customHsUrl,
+            isUrl: newProps.customIsUrl,
         });
         this.props.onServerConfigChange({
             hsUrl: newProps.customHsUrl,
             isUrl: newProps.customIsUrl,
         });
-    },
+    }
 
-    onHomeserverChanged: function(ev) {
-        this.setState({hs_url: ev.target.value}, () => {
+    onHomeserverChanged = (ev) => {
+        this.setState({hsUrl: ev.target.value}, () => {
             this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
-                let hsUrl = this.state.hs_url.trim().replace(/\/$/, "");
+                let hsUrl = this.state.hsUrl.trim().replace(/\/$/, "");
                 if (hsUrl === "") hsUrl = this.props.defaultHsUrl;
                 this.props.onServerConfigChange({
-                    hsUrl: this.state.hs_url,
-                    isUrl: this.state.is_url,
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.state.isUrl,
                 });
             });
         });
-    },
+    }
 
-    onIdentityServerChanged: function(ev) {
-        this.setState({is_url: ev.target.value}, () => {
+    onIdentityServerChanged = (ev) => {
+        this.setState({isUrl: ev.target.value}, () => {
             this._isTimeoutId = this._waitThenInvoke(this._isTimeoutId, () => {
-                let isUrl = this.state.is_url.trim().replace(/\/$/, "");
+                let isUrl = this.state.isUrl.trim().replace(/\/$/, "");
                 if (isUrl === "") isUrl = this.props.defaultIsUrl;
                 this.props.onServerConfigChange({
-                    hsUrl: this.state.hs_url,
-                    isUrl: this.state.is_url,
+                    hsUrl: this.state.hsUrl,
+                    isUrl: this.state.isUrl,
                 });
             });
         });
-    },
+    }
 
-    _waitThenInvoke: function(existingTimeoutId, fn) {
+    _waitThenInvoke(existingTimeoutId, fn) {
         if (existingTimeoutId) {
             clearTimeout(existingTimeoutId);
         }
         return setTimeout(fn.bind(this), this.props.delayTimeMs);
-    },
+    }
 
-    onServerConfigVisibleChange: function(visible, ev) {
-        this.setState({
-            configVisible: visible,
-        });
-        if (!visible) {
-            this.props.onServerConfigChange({
-                hsUrl: this.props.defaultHsUrl,
-                isUrl: this.props.defaultIsUrl,
-            });
-        } else {
-            this.props.onServerConfigChange({
-                hsUrl: this.state.hs_url,
-                isUrl: this.state.is_url,
-            });
-        }
-    },
-
-    showHelpPopup: function() {
+    showHelpPopup = () => {
         const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
         Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
-    },
+    }
 
-    render: function() {
-        const serverConfigStyle = {};
-        serverConfigStyle.display = this.state.configVisible ? 'block' : 'none';
-
-        let toggleButton;
-        if (this.props.withToggleButton) {
-            toggleButton = (
-                <div className="mx_ServerConfig_selector">
-                    <input className="mx_Login_radio" id="basic" name="configVisible" type="radio"
-                        checked={!this.state.configVisible}
-                        onChange={this.onServerConfigVisibleChange.bind(this, false)} />
-                    <label className="mx_Login_label" htmlFor="basic">
-                        { _t("Default server") }
-                    </label>
-                    &nbsp;&nbsp;
-                    <input className="mx_Login_radio" id="advanced" name="configVisible" type="radio"
-                        checked={this.state.configVisible}
-                        onChange={this.onServerConfigVisibleChange.bind(this, true)} />
-                    <label className="mx_Login_label" htmlFor="advanced">
-                        { _t("Custom server") }
-                    </label>
-                </div>
-            );
-        }
+    render() {
+        const Field = sdk.getComponent('elements.Field');
 
         return (
-        <div>
-            { toggleButton }
-            <div style={serverConfigStyle}>
-                <div className="mx_ServerConfig">
-                    <label className="mx_Login_label mx_ServerConfig_hslabel" htmlFor="hsurl">
-                        { _t("Home server URL") }
-                    </label>
-                    <input className="mx_Login_field" id="hsurl" type="text"
+            <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>,
+                })}
+                <div className="mx_ServerConfig_fields">
+                    <Field id="mx_ServerConfig_hsUrl"
+                        label={_t("Homeserver URL")}
                         placeholder={this.props.defaultHsUrl}
-                        disabled={!this.props.withToggleButton}
-                        value={this.state.hs_url}
-                        onChange={this.onHomeserverChanged} />
-                    <label className="mx_Login_label mx_ServerConfig_islabel" htmlFor="isurl">
-                        { _t("Identity server URL") }
-                    </label>
-                    <input className="mx_Login_field" id="isurl" type="text"
+                        value={this.state.hsUrl}
+                        onChange={this.onHomeserverChanged}
+                    />
+                    <Field id="mx_ServerConfig_isUrl"
+                        label={_t("Identity Server URL")}
                         placeholder={this.props.defaultIsUrl}
-                        disabled={!this.props.withToggleButton}
-                        value={this.state.is_url}
-                        onChange={this.onIdentityServerChanged} />
-                    <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
-                        { _t("What does this mean?") }
-                    </a>
+                        value={this.state.isUrl}
+                        onChange={this.onIdentityServerChanged}
+                    />
                 </div>
             </div>
-        </div>
         );
-    },
-});
+    }
+}

src/components/views/auth/ServerTypeSelector.js

@@ -0,0 +1,148 @@
+/*
+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.
+*/
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import { _t } from '../../../languageHandler';
+import sdk from '../../../index';
+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';
+
+export const TYPES = {
+    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'),
+        hsUrl: 'https://matrix.org',
+        isUrl: 'https://vector.im',
+    },
+    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>', {}, {
+            a: sub => <a href={MODULAR_URL} target="_blank" rel="noopener">
+                {sub}
+            </a>,
+        }),
+    },
+    ADVANCED: {
+        id: ADVANCED,
+        label: () => _t('Advanced'),
+        logo: () => <div>
+            <img src={require('../../../../res/img/feather-icons/globe.svg')} />
+            {_t('Other')}
+        </div>,
+        description: () => _t('Find other public servers or use a custom server'),
+    },
+};
+
+function getDefaultType(defaultHsUrl) {
+    if (!defaultHsUrl) {
+        return null;
+    } else if (defaultHsUrl === TYPES.FREE.hsUrl) {
+        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 = {
+        // The default HS URL as another way to set the initially selected type.
+        defaultHsUrl: PropTypes.string,
+        // Handler called when the selected type changes.
+        onChange: PropTypes.func.isRequired,
+    }
+
+    constructor(props) {
+        super(props);
+
+        const {
+            defaultHsUrl,
+            onChange,
+        } = props;
+        const type = getDefaultType(defaultHsUrl);
+        this.state = {
+            selected: type,
+        };
+        if (onChange) {
+            onChange(type);
+        }
+    }
+
+    updateSelectedType(type) {
+        if (this.state.selected === type) {
+            return;
+        }
+        this.setState({
+            selected: type,
+        });
+        if (this.props.onChange) {
+            this.props.onChange(type);
+        }
+    }
+
+    onClick = (e) => {
+        e.stopPropagation();
+        const type = e.currentTarget.dataset.id;
+        this.updateSelectedType(type);
+    }
+
+    render() {
+        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        const serverTypes = [];
+        for (const type of Object.values(TYPES)) {
+            const { id, label, logo, description } = type;
+            const classes = classnames(
+                "mx_ServerTypeSelector_type",
+                `mx_ServerTypeSelector_type_${id}`,
+                {
+                    "mx_ServerTypeSelector_type_selected": id === this.state.selected,
+                },
+            );
+
+            serverTypes.push(<div className={classes} key={id} >
+                <div className="mx_ServerTypeSelector_label">
+                    {label()}
+                </div>
+                <AccessibleButton onClick={this.onClick} data-id={id}>
+                    <div className="mx_ServerTypeSelector_logo">
+                        {logo()}
+                    </div>
+                    <div className="mx_ServerTypeSelector_description">
+                        {description()}
+                    </div>
+                </AccessibleButton>
+            </div>);
+        }
+
+        return <div className="mx_ServerTypeSelector">
+            {serverTypes}
+        </div>;
+    }
+}