Update ServerTypeSelector for registration to use a server config

src/components/structures/auth/Registration.js

@@ -446,13 +446,6 @@ module.exports = React.createClass({
                 onEditServerDetailsClick = this.onEditServerDetailsClick;
             }
 
-            // If the current HS URL is the default HS URL, then we can label it
-            // with the default HS name (if it exists).
-            let hsName;
-            if (this.state.hsUrl === this.props.defaultHsUrl) {
-                hsName = this.props.defaultServerName;
-            }
-
             return <RegistrationForm
                 defaultUsername={this.state.formVals.username}
                 defaultEmail={this.state.formVals.email}
@@ -462,8 +455,7 @@ module.exports = React.createClass({
                 onRegisterClick={this.onFormSubmit}
                 onEditServerDetailsClick={onEditServerDetailsClick}
                 flows={this.state.flows}
-                hsName={hsName}
-                hsUrl={this.state.hsUrl}
+                serverConfig={this.props.serverConfig}
             />;
         }
     },

src/components/views/auth/RegistrationForm.js

@@ -26,6 +26,7 @@ import { _t } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import { SAFE_LOCALPART_REGEX } from '../../../Registration';
 import withValidation from '../elements/Validation';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 
 const FIELD_EMAIL = 'field_email';
 const FIELD_PHONE_NUMBER = 'field_phone_number';
@@ -51,11 +52,7 @@ module.exports = React.createClass({
         onRegisterClick: PropTypes.func.isRequired, // onRegisterClick(Object) => ?Promise
         onEditServerDetailsClick: PropTypes.func,
         flows: PropTypes.arrayOf(PropTypes.object).isRequired,
-        // This is optional and only set if we used a server name to determine
-        // the HS URL via `.well-known` discovery. The server name is used
-        // instead of the HS URL when talking about "your account".
-        hsName: PropTypes.string,
-        hsUrl: PropTypes.string,
+        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
     },
 
     getDefaultProps: function() {
@@ -499,20 +496,14 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        let yourMatrixAccountText = _t('Create your Matrix account');
-        if (this.props.hsName) {
-            yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
-                serverName: this.props.hsName,
+        let yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
+            serverName: this.props.serverConfig.hsName,
+        });
+        if (this.props.serverConfig.hsNameIsDifferent) {
+            // TODO: TravisR - Use tooltip to underline
+            yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
+                'underlinedServerName': () => <u>{this.props.serverConfig.hsName}</u>,
             });
-        } else {
-            try {
-                const parsedHsUrl = new URL(this.props.hsUrl);
-                yourMatrixAccountText = _t('Create your Matrix account on %(serverName)s', {
-                    serverName: parsedHsUrl.hostname,
-                });
-            } catch (e) {
-                // ignore
-            }
         }
 
         let editLink = null;

src/components/views/auth/ServerTypeSelector.js

@@ -19,6 +19,8 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import sdk from '../../../index';
 import classnames from 'classnames';
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import {makeType} from "../../../utils/TypeUtils";
 
 const MODULAR_URL = 'https://modular.im/?utm_source=riot-web&utm_medium=web&utm_campaign=riot-web-authentication';
 
@@ -32,8 +34,13 @@ export const TYPES = {
         label: () => _t('Free'),
         logo: () => <img src={require('../../../../res/img/matrix-org-bw-logo.svg')} />,
         description: () => _t('Join millions for free on the largest public server'),
-        hsUrl: 'https://matrix.org',
-        isUrl: 'https://vector.im',
+        serverConfig: makeType(ValidatedServerConfig, {
+            hsUrl: "https://matrix.org",
+            hsName: "matrix.org",
+            hsNameIsDifferent: false,
+            isUrl: "https://vector.im",
+            identityEnabled: true,
+        }),
     },
     PREMIUM: {
         id: PREMIUM,
@@ -44,6 +51,7 @@ export const TYPES = {
                 {sub}
             </a>,
         }),
+        identityServerUrl: "https://vector.im",
     },
     ADVANCED: {
         id: ADVANCED,
@@ -56,10 +64,11 @@ export const TYPES = {
     },
 };
 
-export function getTypeFromHsUrl(hsUrl) {
+export function getTypeFromServerConfig(config) {
+    const {hsUrl} = config;
     if (!hsUrl) {
         return null;
-    } else if (hsUrl === TYPES.FREE.hsUrl) {
+    } else if (hsUrl === TYPES.FREE.serverConfig.hsUrl) {
         return FREE;
     } else if (new URL(hsUrl).hostname.endsWith('.modular.im')) {
         // This is an unlikely case to reach, as Modular defaults to hiding the
@@ -76,7 +85,7 @@ export default class ServerTypeSelector extends React.PureComponent {
         selected: PropTypes.string,
         // Handler called when the selected type changes.
         onChange: PropTypes.func.isRequired,
-    }
+    };
 
     constructor(props) {
         super(props);
@@ -106,7 +115,7 @@ export default class ServerTypeSelector extends React.PureComponent {
         e.stopPropagation();
         const type = e.currentTarget.dataset.id;
         this.updateSelectedType(type);
-    }
+    };
 
     render() {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');