Replace *ServerConfig and SignInToText with ServerPicker

res/css/_components.scss

@@ -45,8 +45,6 @@
 @import "./views/auth/_InteractiveAuthEntryComponents.scss";
 @import "./views/auth/_LanguageSelector.scss";
 @import "./views/auth/_PassphraseField.scss";
-@import "./views/auth/_ServerConfig.scss";
-@import "./views/auth/_ServerTypeSelector.scss";
 @import "./views/auth/_Welcome.scss";
 @import "./views/avatars/_BaseAvatar.scss";
 @import "./views/avatars/_DecoratedRoomAvatar.scss";
@@ -84,6 +82,7 @@
 @import "./views/dialogs/_RoomUpgradeDialog.scss";
 @import "./views/dialogs/_RoomUpgradeWarningDialog.scss";
 @import "./views/dialogs/_ServerOfflineDialog.scss";
+@import "./views/dialogs/_ServerPickerDialog.scss";
 @import "./views/dialogs/_SetEmailDialog.scss";
 @import "./views/dialogs/_SettingsDialog.scss";
 @import "./views/dialogs/_ShareDialog.scss";
@@ -126,6 +125,7 @@
 @import "./views/elements/_RoleButton.scss";
 @import "./views/elements/_RoomAliasField.scss";
 @import "./views/elements/_SSOButtons.scss";
+@import "./views/elements/_ServerPicker.scss";
 @import "./views/elements/_Slider.scss";
 @import "./views/elements/_Spinner.scss";
 @import "./views/elements/_StyledCheckbox.scss";

res/css/views/auth/_AuthBody.scss

@@ -37,7 +37,7 @@ limitations under the License.
         color: $authpage-primary-color;
     }
 
-    h4 {
+    h3.mx_AuthBody_centered {
         text-align: center;
     }
 
@@ -100,12 +100,6 @@ limitations under the License.
     }
 }
 
-.mx_AuthBody_editServerDetails {
-    padding-left: 1em;
-    font-size: $font-12px;
-    font-weight: normal;
-}
-
 .mx_AuthBody_fieldRow {
     display: flex;
     margin-bottom: 10px;

res/css/views/auth/_ServerConfig.scss

@@ -1,25 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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.
-*/
-
-.mx_ServerConfig_help:link {
-    opacity: 0.8;
-}
-
-.mx_ServerConfig_error {
-    display: block;
-    color: $warning-color;
-}

res/css/views/auth/_ServerTypeSelector.scss

@@ -1,69 +0,0 @@
-/*
-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.
-*/
-
-.mx_ServerTypeSelector {
-    display: flex;
-    margin-bottom: 28px;
-}
-
-.mx_ServerTypeSelector_type {
-    margin: 0 5px;
-}
-
-.mx_ServerTypeSelector_type:first-child {
-    margin-left: 0;
-}
-
-.mx_ServerTypeSelector_type:last-child {
-    margin-right: 0;
-}
-
-.mx_ServerTypeSelector_label {
-    text-align: center;
-    font-weight: 600;
-    color: $authpage-primary-color;
-    margin: 8px 0;
-}
-
-.mx_ServerTypeSelector_type .mx_AccessibleButton {
-    padding: 10px;
-    border: 1px solid $input-border-color;
-    border-radius: 4px;
-}
-
-.mx_ServerTypeSelector_type.mx_ServerTypeSelector_type_selected .mx_AccessibleButton {
-    border-color: $input-valid-border-color;
-}
-
-.mx_ServerTypeSelector_logo {
-    display: flex;
-    justify-content: center;
-    height: 18px;
-    margin-bottom: 12px;
-    font-weight: 600;
-    color: $authpage-primary-color;
-}
-
-.mx_ServerTypeSelector_logo > div {
-    display: flex;
-    width: 70%;
-    align-items: center;
-    justify-content: space-evenly;
-}
-
-.mx_ServerTypeSelector_description {
-    font-size: $font-10px;
-}

res/css/views/dialogs/_ServerPickerDialog.scss

@@ -0,0 +1,78 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_ServerPickerDialog {
+    width: 468px;
+    box-sizing: border-box;
+
+    .mx_Dialog_content {
+        margin-bottom: 0;
+
+        > p {
+            color: $secondary-fg-color;
+            font-size: $font-14px;
+            margin: 16px 0;
+
+            &:first-of-type {
+                margin-bottom: 40px;
+            }
+
+            &:last-of-type {
+                margin: 0 24px 24px;
+            }
+        }
+
+        > h4 {
+            font-size: $font-15px;
+            font-weight: $font-semi-bold;
+            color: $secondary-fg-color;
+            margin-left: 8px;
+        }
+
+        > a {
+            color: $accent-color;
+            margin-left: 8px;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserverRadio {
+        input[type="radio"] + div {
+            margin-top: auto;
+            margin-bottom: auto;
+        }
+    }
+
+    .mx_ServerPickerDialog_otherHomeserver {
+        border-top: none;
+        border-left: none;
+        border-right: none;
+        border-radius: unset;
+
+        > input {
+            padding-left: 0;
+        }
+
+        > label {
+            margin-left: 0;
+        }
+    }
+
+    .mx_AccessibleButton_kind_primary {
+        width: calc(100% - 64px);
+        margin: 0 8px;
+        padding: 15px 18px;
+    }
+}

res/css/views/elements/_SSOButtons.scss

@@ -20,12 +20,15 @@ limitations under the License.
 
     .mx_SSOButton {
         position: relative;
+        width: 100%;
+        padding-left: 32px;
+        padding-right: 32px;
 
         > img {
             object-fit: contain;
             position: absolute;
-            left: 12px;
+            left: 8px;
-            top: 12px;
+            top: 4px;
         }
     }
 
@@ -34,6 +37,11 @@ limitations under the License.
         width: 50px; // 48px + 1px border on all sides
         height: 50px; // 48px + 1px border on all sides
 
+        > img {
+            left: 12px;
+            top: 12px;
+        }
+
         & + .mx_SSOButton_mini {
             margin-left: 24px;
         }

res/css/views/elements/_ServerPicker.scss

@@ -0,0 +1,88 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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.
+*/
+
+.mx_ServerPicker {
+    margin-bottom: 14px;
+    border-bottom: 1px solid rgba(141, 151, 165, 0.2);
+    display: grid;
+    grid-template-columns: auto min-content;
+    grid-template-rows: auto auto auto;
+    font-size: $font-14px;
+    line-height: $font-20px;
+
+    > h3 {
+        font-weight: $font-semi-bold;
+        margin: 0 0 20px;
+        grid-column: 1;
+        grid-row: 1;
+    }
+
+    .mx_ServerPicker_help {
+        width: 20px;
+        height: 20px;
+        background-color: $icon-button-color;
+        border-radius: 10px;
+        grid-column: 2;
+        grid-row: 1;
+        margin-left: auto;
+        text-align: center;
+        color: #ffffff;
+        font-size: 16px;
+        position: relative;
+
+        &::before {
+            content: '';
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: -2px;
+            left: -2px;
+            mask-position: center;
+            mask-size: contain;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/i.svg');
+            background: #ffffff;
+        }
+    }
+
+    .mx_ServerPicker_server {
+        color: $primary-fg-color;
+        grid-column: 1;
+        grid-row: 2;
+        margin-bottom: 16px;
+    }
+
+    .mx_AccessibleButton_kind_link {
+        padding: 0;
+        font-size: inherit;
+        grid-column: 2;
+        grid-row: 2;
+    }
+
+    .mx_ServerPicker_desc {
+        margin-top: -12px;
+        color: $tertiary-fg-color;
+        grid-column: 1 / 2;
+        grid-row: 3;
+        margin-bottom: 16px;
+    }
+}
+
+.mx_ServerPicker_helpDialog {
+    .mx_Dialog_content {
+        width: 456px;
+    }
+}

res/img/element-icons/i.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10C12.8284 10 13.5 9.32843 13.5 8.5C13.5 7.67157 12.8284 7 12 7C11.1716 7 10.5 7.67157 10.5 8.5C10.5 9.32843 11.1716 10 12 10ZM11 13C10.4477 13 10 12.5523 10 12C10 11.4477 10.4477 11 11 11H12C12.5523 11 13 11.4477 13 12V15.5H13.5C14.0523 15.5 14.5 15.9477 14.5 16.5C14.5 17.0523 14.0523 17.5 13.5 17.5H12C11.4477 17.5 11 17.0523 11 16.5L11 13Z" fill="black"/>
+</svg>

src/components/structures/auth/ForgotPassword.js

@@ -21,16 +21,14 @@ import PropTypes from 'prop-types';
 import { _t } from '../../../languageHandler';
 import * as sdk from '../../../index';
 import Modal from "../../../Modal";
-import SdkConfig from "../../../SdkConfig";
 import PasswordReset from "../../../PasswordReset";
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import classNames from 'classnames';
 import AuthPage from "../../views/auth/AuthPage";
 import CountlyAnalytics from "../../../CountlyAnalytics";
+import ServerPicker from "../../views/elements/ServerPicker";
 
 // Phases
-// Show controls to configure server details
-const PHASE_SERVER_DETAILS = 0;
 // Show the forgot password inputs
 const PHASE_FORGOT = 1;
 // Email is in the process of being sent
@@ -172,20 +170,6 @@ export default class ForgotPassword extends React.Component {
         });
     };
 
-    onServerDetailsNextPhaseClick = async () => {
-        this.setState({
-            phase: PHASE_FORGOT,
-        });
-    };
-
-    onEditServerDetailsClick = ev => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({
-            phase: PHASE_SERVER_DETAILS,
-        });
-    };
-
     onLoginClick = ev => {
         ev.preventDefault();
         ev.stopPropagation();
@@ -200,23 +184,6 @@ export default class ForgotPassword extends React.Component {
         });
     }
 
-    renderServerDetails() {
-        const ServerConfig = sdk.getComponent("auth.ServerConfig");
-
-        if (SdkConfig.get()['disable_custom_urls']) {
-            return null;
-        }
-
-        return <ServerConfig
-            serverConfig={this.props.serverConfig}
-            onServerConfigChange={this.props.onServerConfigChange}
-            delayTimeMs={0}
-            onAfterSubmit={this.onServerDetailsNextPhaseClick}
-            submitText={_t("Next")}
-            submitClass="mx_Login_submit"
-        />;
-    }
-
     renderForgot() {
         const Field = sdk.getComponent('elements.Field');
 
@@ -240,41 +207,13 @@ export default class ForgotPassword extends React.Component {
             );
         }
 
-        let yourMatrixAccountText = _t('Your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            yourMatrixAccountText = _t('Your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        // If custom URLs are allowed, wire up the server details edit link.
-        let editLink = null;
-        if (!SdkConfig.get()['disable_custom_urls']) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                href="#" onClick={this.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
         return <div>
             {errorText}
             {serverDeadSection}
-            <h3>
+            <ServerPicker
-                {yourMatrixAccountText}
+                serverConfig={this.props.serverConfig}
-                {editLink}
+                onServerConfigChange={this.props.onServerConfigChange}
-            </h3>
+            />
             <form onSubmit={this.onSubmitForm}>
                 <div className="mx_AuthBody_fieldRow">
                     <Field
@@ -360,9 +299,6 @@ export default class ForgotPassword extends React.Component {
 
         let resetPasswordJsx;
         switch (this.state.phase) {
-            case PHASE_SERVER_DETAILS:
-                resetPasswordJsx = this.renderServerDetails();
-                break;
             case PHASE_FORGOT:
                 resetPasswordJsx = this.renderForgot();
                 break;

src/components/structures/auth/Login.tsx

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016, 2017, 2018, 2019 New Vector Ltd
+Copyright 2015, 2016, 2017, 2018, 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -30,15 +30,11 @@ import SettingsStore from "../../../settings/SettingsStore";
 import {UIFeature} from "../../../settings/UIFeature";
 import CountlyAnalytics from "../../../CountlyAnalytics";
 import {IMatrixClientCreds} from "../../../MatrixClientPeg";
-import ServerConfig from "../../views/auth/ServerConfig";
 import PasswordLogin from "../../views/auth/PasswordLogin";
-import SignInToText from "../../views/auth/SignInToText";
 import InlineSpinner from "../../views/elements/InlineSpinner";
 import Spinner from "../../views/elements/Spinner";
 import SSOButtons from "../../views/elements/SSOButtons";
-
+import ServerPicker from "../../views/elements/ServerPicker";
-// Enable phases for login
-const PHASES_ENABLED = true;
 
 // These are used in several places, and come from the js-sdk's autodiscovery
 // stuff. We define them here so that they'll be picked up by i18n.
@@ -76,13 +72,6 @@ interface IProps {
     onServerConfigChange(config: ValidatedServerConfig): void;
 }
 
-enum Phase {
-    // Show controls to configure server details
-    ServerDetails,
-    // Show the appropriate login flow(s) for the server
-    Login,
-}
-
 interface IState {
     busy: boolean;
     busyLoggingIn?: boolean;
@@ -91,7 +80,6 @@ interface IState {
     // can we attempt to log in or are there validation errors?
     canTryLogin: boolean;
 
-    phase: Phase;
     flows?: LoginFlow[];
 
     // used for preserving form values when changing homeserver
@@ -127,7 +115,6 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             loginIncorrect: false,
             canTryLogin: true,
 
-            phase: Phase.Login,
             flows: null,
 
             username: "",
@@ -369,20 +356,6 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         }
     };
 
-    private onServerDetailsNextPhaseClick = () => {
-        this.setState({
-            phase: Phase.Login,
-        });
-    };
-
-    private onEditServerDetailsClick = ev => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({
-            phase: Phase.ServerDetails,
-        });
-    };
-
     private async initLoginLogic({hsUrl, isUrl}: ValidatedServerConfig) {
         let isDefaultServer = false;
         if (this.props.serverConfig.isDefault
@@ -423,13 +396,6 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 busy: false,
                 ...AutoDiscoveryUtils.authComponentStateForError(e),
             });
-            if (this.state.serverErrorIsFatal) {
-                // Server is dead: show server details prompt instead
-                this.setState({
-                    phase: Phase.ServerDetails,
-                });
-                return;
-            }
         }
 
         loginLogic.getFlows().then((flows) => {
@@ -515,21 +481,6 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
         return errorText;
     }
 
-    private renderServerComponent() {
-        if (SdkConfig.get()['disable_custom_urls']) {
-            return null;
-        }
-
-        return <ServerConfig
-            serverConfig={this.props.serverConfig}
-            onServerConfigChange={this.props.onServerConfigChange}
-            delayTimeMs={250}
-            onAfterSubmit={this.onServerDetailsNextPhaseClick}
-            submitText={_t("Next")}
-            submitClass="mx_Login_submit"
-        />;
-    }
-
     renderLoginComponentForFlows() {
         if (!this.state.flows) return null;
 
@@ -539,18 +490,8 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
             "m.login.sso",
         ];
 
-        let onEditServerDetailsClick = null;
-        // If custom URLs are allowed, wire up the server details edit link.
-        if (!SdkConfig.get()['disable_custom_urls']) {
-            onEditServerDetailsClick = this.onEditServerDetailsClick;
-        }
-
         const flows = order.map(type => this.state.flows.find(flow => flow.type === type)).filter(Boolean);
         return <React.Fragment>
-            <SignInToText
-                serverConfig={this.props.serverConfig}
-                onEditServerDetailsClick={onEditServerDetailsClick}
-            />
             { flows.map(flow => {
                 const stepRenderer = this.stepRendererMap[flow.type];
                 return <React.Fragment key={flow.type}>{ stepRenderer() }</React.Fragment>
@@ -654,7 +595,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                     </h2>
                     { errorTextSection }
                     { serverDeadSection }
-                    { this.renderServerComponent() }
+                    <ServerPicker
+                        serverConfig={this.props.serverConfig}
+                        onServerConfigChange={this.props.onServerConfigChange}
+                    />
                     { this.renderLoginComponentForFlows() }
                     { footer }
                 </AuthBody>

src/components/structures/auth/Registration.tsx

@@ -22,7 +22,6 @@ import * as sdk from '../../../index';
 import { _t, _td } from '../../../languageHandler';
 import SdkConfig from '../../../SdkConfig';
 import { messageForResourceLimitError } from '../../../utils/ErrorUtils';
-import * as ServerType from '../../views/auth/ServerTypeSelector';
 import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
 import classNames from "classnames";
 import * as Lifecycle from '../../../Lifecycle';
@@ -31,14 +30,7 @@ import AuthPage from "../../views/auth/AuthPage";
 import Login, {ISSOFlow} from "../../../Login";
 import dis from "../../../dispatcher/dispatcher";
 import SSOButtons from "../../views/elements/SSOButtons";
-
+import ServerPicker from '../../views/elements/ServerPicker';
-// Phases
-enum Phase {
-    // Show controls to configure server details
-    ServerDetails = 0,
-    // Show the appropriate registration flow(s) for the server
-    Registration = 1,
-}
 
 interface IProps {
     serverConfig: ValidatedServerConfig;
@@ -94,9 +86,6 @@ interface IState {
     // If set, we've registered but are not going to log
     // the user in to their new account automatically.
     completedNoSignin: boolean;
-    serverType: ServerType.FREE | ServerType.PREMIUM | ServerType.ADVANCED;
-    // Phase of the overall registration dialog.
-    phase: Phase;
     flows: {
         stages: string[];
     }[];
@@ -127,7 +116,6 @@ export default class Registration extends React.Component<IProps, IState> {
     constructor(props) {
         super(props);
 
-        const serverType = ServerType.getTypeFromServerConfig(this.props.serverConfig);
         this.state = {
             busy: false,
             errorText: null,
@@ -135,8 +123,6 @@ export default class Registration extends React.Component<IProps, IState> {
                 email: this.props.email,
             },
             doingUIAuth: Boolean(this.props.sessionId),
-            serverType,
-            phase: Phase.Registration,
             flows: null,
             completedNoSignin: false,
             serverIsAlive: true,
@@ -161,60 +147,7 @@ export default class Registration extends React.Component<IProps, IState> {
             newProps.serverConfig.isUrl === this.props.serverConfig.isUrl) return;
 
         this.replaceClient(newProps.serverConfig);
-
-        // Handle cases where the user enters "https://matrix.org" for their server
-        // from the advanced option - we should default to FREE at that point.
-        const serverType = ServerType.getTypeFromServerConfig(newProps.serverConfig);
-        if (serverType !== this.state.serverType) {
-            // Reset the phase to default phase for the server type.
-            this.setState({
-                serverType,
-                phase: Registration.getDefaultPhaseForServerType(serverType),
-            });
     }
-    }
-
-    private static getDefaultPhaseForServerType(type: IState["serverType"]) {
-        switch (type) {
-            case ServerType.FREE: {
-                // Move directly to the registration phase since the server
-                // details are fixed.
-                return Phase.Registration;
-            }
-            case ServerType.PREMIUM:
-            case ServerType.ADVANCED:
-                return Phase.ServerDetails;
-        }
-    }
-
-    private onServerTypeChange = (type: IState["serverType"]) => {
-        this.setState({
-            serverType: type,
-        });
-
-        // When changing server types, set the HS / IS URLs to reasonable defaults for the
-        // the new type.
-        switch (type) {
-            case ServerType.FREE: {
-                const { serverConfig } = ServerType.TYPES.FREE;
-                this.props.onServerConfigChange(serverConfig);
-                break;
-            }
-            case ServerType.PREMIUM:
-                // We can accept whatever server config was the default here as this essentially
-                // acts as a slightly different "custom server"/ADVANCED option.
-                break;
-            case ServerType.ADVANCED:
-                // Use the default config from the config
-                this.props.onServerConfigChange(SdkConfig.get()["validated_server_config"]);
-                break;
-        }
-
-        // Reset the phase to default phase for the server type.
-        this.setState({
-            phase: Registration.getDefaultPhaseForServerType(type),
-        });
-    };
 
     private async replaceClient(serverConfig: ValidatedServerConfig) {
         this.setState({
@@ -456,21 +389,6 @@ export default class Registration extends React.Component<IProps, IState> {
         this.setState({
             busy: false,
             doingUIAuth: false,
-            phase: Phase.Registration,
-        });
-    };
-
-    private onServerDetailsNextPhaseClick = async () => {
-        this.setState({
-            phase: Phase.Registration,
-        });
-    };
-
-    private onEditServerDetailsClick = ev => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this.setState({
-            phase: Phase.ServerDetails,
         });
     };
 
@@ -520,72 +438,19 @@ export default class Registration extends React.Component<IProps, IState> {
     };
 
     private renderServerComponent() {
-        const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
-        const ServerConfig = sdk.getComponent("auth.ServerConfig");
-        const ModularServerConfig = sdk.getComponent("auth.ModularServerConfig");
-
         if (SdkConfig.get()['disable_custom_urls']) {
             return null;
         }
 
-        // Hide the server picker once the user is doing UI Auth unless encountered a fatal server error
+        return <ServerPicker
-        if (this.state.phase !== Phase.ServerDetails && this.state.doingUIAuth && !this.state.serverErrorIsFatal) {
+            title={_t("Host account on")}
-            return null;
+            dialogTitle={_t("Decide where your account is hosted")}
-        }
-
-        // If we're on a different phase, we only show the server type selector,
-        // which is always shown if we allow custom URLs at all.
-        // (if there's a fatal server error, we need to show the full server
-        // config as the user may need to change servers to resolve the error).
-        if (this.state.phase !== Phase.ServerDetails && !this.state.serverErrorIsFatal) {
-            return <div>
-                <ServerTypeSelector
-                    selected={this.state.serverType}
-                    onChange={this.onServerTypeChange}
-                />
-            </div>;
-        }
-
-        let serverDetails = null;
-        switch (this.state.serverType) {
-            case ServerType.FREE:
-                break;
-            case ServerType.PREMIUM:
-                serverDetails = <ModularServerConfig
             serverConfig={this.props.serverConfig}
-                    onServerConfigChange={this.props.onServerConfigChange}
+            onServerConfigChange={this.state.doingUIAuth ? undefined : this.props.onServerConfigChange}
-                    delayTimeMs={250}
-                    onAfterSubmit={this.onServerDetailsNextPhaseClick}
-                    submitText={_t("Next")}
-                    submitClass="mx_Login_submit"
         />;
-                break;
-            case ServerType.ADVANCED:
-                serverDetails = <ServerConfig
-                    serverConfig={this.props.serverConfig}
-                    onServerConfigChange={this.props.onServerConfigChange}
-                    delayTimeMs={250}
-                    onAfterSubmit={this.onServerDetailsNextPhaseClick}
-                    submitText={_t("Next")}
-                    submitClass="mx_Login_submit"
-                />;
-                break;
-        }
-
-        return <div>
-            <ServerTypeSelector
-                selected={this.state.serverType}
-                onChange={this.onServerTypeChange}
-            />
-            {serverDetails}
-        </div>;
     }
 
     private renderRegisterComponent() {
-        if (this.state.phase !== Phase.Registration) {
-            return null;
-        }
-
         const InteractiveAuth = sdk.getComponent('structures.InteractiveAuth');
         const Spinner = sdk.getComponent('elements.Spinner');
         const RegistrationForm = sdk.getComponent('auth.RegistrationForm');
@@ -609,17 +474,25 @@ export default class Registration extends React.Component<IProps, IState> {
                 <Spinner />
             </div>;
         } else if (this.state.flows.length) {
+            let continueWithSection;
+            const providers = this.state.ssoFlow["org.matrix.msc2858.identity_providers"]
+                || this.state.ssoFlow.identity_providers || [];
+            // when there is only a single (or 0) providers we show a wide button with `Continue with X` text
+            if (providers.length > 1) {
+                continueWithSection = <h3 className="mx_AuthBody_centered">{_t("Continue with")}</h3>;
+            }
+
             let ssoSection;
             if (this.state.ssoFlow) {
                 ssoSection = <React.Fragment>
-                    <h4>{_t("Continue with")}</h4>
+                    { continueWithSection }
                     <SSOButtons
                         matrixClient={this.loginLogic.createTemporaryClient()}
                         flow={this.state.ssoFlow}
                         loginType={this.state.ssoFlow.type === "m.login.sso" ? "sso" : "cas"}
                         fragmentAfterLogin={this.props.fragmentAfterLogin}
                     />
-                    <h4>{_t("Or")}</h4>
+                    <h3 className="mx_AuthBody_centered">{_t("Or")}</h3>
                 </React.Fragment>;
             }
 
@@ -673,7 +546,7 @@ export default class Registration extends React.Component<IProps, IState> {
 
         // Only show the 'go back' button if you're not looking at the form
         let goBack;
-        if (this.state.phase !== Phase.Registration || this.state.doingUIAuth) {
+        if (this.state.doingUIAuth) {
             goBack = <a className="mx_AuthBody_changeFlow" onClick={this.onGoToFormClicked} href="#">
                 { _t('Go back') }
             </a>;
@@ -719,47 +592,11 @@ export default class Registration extends React.Component<IProps, IState> {
                 { regDoneText }
             </div>;
         } else {
-            let yourMatrixAccountText: ReactNode = _t('Create your Matrix account on %(serverName)s', {
-                serverName: this.props.serverConfig.hsName,
-            });
-            if (this.props.serverConfig.hsNameIsDifferent) {
-                const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-                yourMatrixAccountText = _t('Create your Matrix account on <underlinedServerName />', {}, {
-                    'underlinedServerName': () => {
-                        return <TextWithTooltip
-                            class="mx_Login_underlinedServerName"
-                            tooltip={this.props.serverConfig.hsUrl}
-                        >
-                            {this.props.serverConfig.hsName}
-                        </TextWithTooltip>;
-                    },
-                });
-            }
-
-            // If custom URLs are allowed, user is not doing UIA flows and they haven't selected the Free server type,
-            // wire up the server details edit link.
-            let editLink = null;
-            if (!SdkConfig.get()['disable_custom_urls'] &&
-                this.state.serverType !== ServerType.FREE &&
-                !this.state.doingUIAuth
-            ) {
-                editLink = (
-                    <a className="mx_AuthBody_editServerDetails" href="#" onClick={this.onEditServerDetailsClick}>
-                        {_t('Change')}
-                    </a>
-                );
-            }
-
             body = <div>
                 <h2>{ _t('Create account') }</h2>
                 { errorText }
                 { serverDeadSection }
                 { this.renderServerComponent() }
-                { this.state.phase !== Phase.ServerDetails && <h3>
-                    {yourMatrixAccountText}
-                    {editLink}
-                </h3> }
                 { this.renderRegisterComponent() }
                 { goBack }
                 { signIn }

src/components/views/auth/ModularServerConfig.js

@@ -1,124 +0,0 @@
-/*
-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 * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
-import SdkConfig from "../../../SdkConfig";
-import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
-import * as ServerType from '../../views/auth/ServerTypeSelector';
-import ServerConfig from "./ServerConfig";
-
-const MODULAR_URL = 'https://element.io/matrix-services' +
-    '?utm_source=element-web&utm_medium=web&utm_campaign=element-web-authentication';
-
-// TODO: TravisR - Can this extend ServerConfig for most things?
-
-/*
- * 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 ServerConfig {
-    static propTypes = ServerConfig.propTypes;
-
-    async validateAndApplyServer(hsUrl, isUrl) {
-        // Always try and use the defaults first
-        const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
-        if (defaultConfig.hsUrl === hsUrl && defaultConfig.isUrl === isUrl) {
-            this.setState({busy: false, errorText: ""});
-            this.props.onServerConfigChange(defaultConfig);
-            return defaultConfig;
-        }
-
-        this.setState({
-            hsUrl,
-            isUrl,
-            busy: true,
-            errorText: "",
-        });
-
-        try {
-            const result = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
-            this.setState({busy: false, errorText: ""});
-            this.props.onServerConfigChange(result);
-            return result;
-        } catch (e) {
-            console.error(e);
-            let message = _t("Unable to validate homeserver/identity server");
-            if (e.translatedMessage) {
-                message = e.translatedMessage;
-            }
-            this.setState({
-                busy: false,
-                errorText: message,
-            });
-
-            return null;
-        }
-    }
-
-    async validateServer() {
-        // TODO: Do we want to support .well-known lookups here?
-        // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
-        // find their homeserver without demanding they use "https://matrix.org"
-        return this.validateAndApplyServer(this.state.hsUrl, ServerType.TYPES.PREMIUM.identityServerUrl);
-    }
-
-    render() {
-        const Field = sdk.getComponent('elements.Field');
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        const submitButton = this.props.submitText
-            ? <AccessibleButton
-                element="button"
-                type="submit"
-                className={this.props.submitClass}
-                onClick={this.onSubmit}
-                disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
-            : null;
-
-        return (
-            <div className="mx_ServerConfig">
-                <h3>{_t("Your server")}</h3>
-                {_t(
-                    "Enter the location of your Element Matrix Services homeserver. It may use your own " +
-                    "domain name or be a subdomain of <a>element.io</a>.",
-                    {}, {
-                        a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
-                            {sub}
-                        </a>,
-                    },
-                )}
-                <form onSubmit={this.onSubmit} autoComplete="off" action={null}>
-                    <div className="mx_ServerConfig_fields">
-                        <Field
-                            id="mx_ServerConfig_hsUrl"
-                            label={_t("Server Name")}
-                            placeholder={this.props.serverConfig.hsUrl}
-                            value={this.state.hsUrl}
-                            onBlur={this.onHomeserverBlur}
-                            onChange={this.onHomeserverChange}
-                        />
-                    </div>
-                    {submitButton}
-                </form>
-            </div>
-        );
-    }
-}

src/components/views/auth/ServerConfig.js

@@ -1,223 +0,0 @@
-/*
-Copyright 2015, 2016 OpenMarket Ltd
-Copyright 2019 New Vector Ltd
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 Modal from '../../../Modal';
-import * as sdk from '../../../index';
-import { _t } from '../../../languageHandler';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
-import AutoDiscoveryUtils from "../../../utils/AutoDiscoveryUtils";
-import SdkConfig from "../../../SdkConfig";
-import CountlyAnalytics from "../../../CountlyAnalytics";
-
-/*
- * A pure UI component which displays the HS and IS to use.
- */
-
-export default class ServerConfig extends React.PureComponent {
-    static propTypes = {
-        onServerConfigChange: PropTypes.func.isRequired,
-
-        // The current configuration that the user is expecting to change.
-        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
-
-        delayTimeMs: PropTypes.number, // time to wait before invoking onChanged
-
-        // Called after the component calls onServerConfigChange
-        onAfterSubmit: PropTypes.func,
-
-        // Optional text for the submit button. If falsey, no button will be shown.
-        submitText: PropTypes.string,
-
-        // Optional class for the submit button. Only applies if the submit button
-        // is to be rendered.
-        submitClass: PropTypes.string,
-    };
-
-    static defaultProps = {
-        onServerConfigChange: function() {},
-        delayTimeMs: 0,
-    };
-
-    constructor(props) {
-        super(props);
-
-        this.state = {
-            busy: false,
-            errorText: "",
-            hsUrl: props.serverConfig.hsUrl,
-            isUrl: props.serverConfig.isUrl,
-        };
-
-        CountlyAnalytics.instance.track("onboarding_custom_server");
-    }
-
-    // TODO: [REACT-WARNING] Replace with appropriate lifecycle event
-    UNSAFE_componentWillReceiveProps(newProps) { // eslint-disable-line camelcase
-        if (newProps.serverConfig.hsUrl === this.state.hsUrl &&
-            newProps.serverConfig.isUrl === this.state.isUrl) return;
-
-        this.validateAndApplyServer(newProps.serverConfig.hsUrl, newProps.serverConfig.isUrl);
-    }
-
-    async validateServer() {
-        // TODO: Do we want to support .well-known lookups here?
-        // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
-        // find their homeserver without demanding they use "https://matrix.org"
-        const result = this.validateAndApplyServer(this.state.hsUrl, this.state.isUrl);
-        if (!result) {
-            return result;
-        }
-
-        return result;
-    }
-
-    async validateAndApplyServer(hsUrl, isUrl) {
-        // Always try and use the defaults first
-        const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
-        if (defaultConfig.hsUrl === hsUrl && defaultConfig.isUrl === isUrl) {
-            this.setState({
-                hsUrl: defaultConfig.hsUrl,
-                isUrl: defaultConfig.isUrl,
-                busy: false,
-                errorText: "",
-            });
-            this.props.onServerConfigChange(defaultConfig);
-            return defaultConfig;
-        }
-
-        this.setState({
-            hsUrl,
-            isUrl,
-            busy: true,
-            errorText: "",
-        });
-
-        try {
-            const result = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl);
-            this.setState({busy: false, errorText: ""});
-            this.props.onServerConfigChange(result);
-            return result;
-        } catch (e) {
-            console.error(e);
-
-            const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
-            if (!stateForError.isFatalError) {
-                this.setState({
-                    busy: false,
-                });
-                // carry on anyway
-                const result = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, isUrl, true);
-                this.props.onServerConfigChange(result);
-                return result;
-            } else {
-                let message = _t("Unable to validate homeserver/identity server");
-                if (e.translatedMessage) {
-                    message = e.translatedMessage;
-                }
-                this.setState({
-                    busy: false,
-                    errorText: message,
-                });
-
-                return null;
-            }
-        }
-    }
-
-    onHomeserverBlur = (ev) => {
-        this._hsTimeoutId = this._waitThenInvoke(this._hsTimeoutId, () => {
-            this.validateServer();
-        });
-    };
-
-    onHomeserverChange = (ev) => {
-        const hsUrl = ev.target.value;
-        this.setState({ hsUrl });
-    };
-
-    onSubmit = async (ev) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-        const result = await this.validateServer();
-        if (!result) return; // Do not continue.
-
-        if (this.props.onAfterSubmit) {
-            this.props.onAfterSubmit();
-        }
-    };
-
-    _waitThenInvoke(existingTimeoutId, fn) {
-        if (existingTimeoutId) {
-            clearTimeout(existingTimeoutId);
-        }
-        return setTimeout(fn.bind(this), this.props.delayTimeMs);
-    }
-
-    showHelpPopup = () => {
-        const CustomServerDialog = sdk.getComponent('auth.CustomServerDialog');
-        Modal.createTrackedDialog('Custom Server Dialog', '', CustomServerDialog);
-    };
-
-    _renderHomeserverSection() {
-        const Field = sdk.getComponent('elements.Field');
-        return <div>
-            {_t("Enter your custom homeserver URL <a>What does this mean?</a>", {}, {
-                a: sub => <a className="mx_ServerConfig_help" href="#" onClick={this.showHelpPopup}>
-                    {sub}
-                </a>,
-            })}
-            <Field
-                id="mx_ServerConfig_hsUrl"
-                label={_t("Homeserver URL")}
-                placeholder={this.props.serverConfig.hsUrl}
-                value={this.state.hsUrl}
-                onBlur={this.onHomeserverBlur}
-                onChange={this.onHomeserverChange}
-                disabled={this.state.busy}
-            />
-        </div>;
-    }
-
-    render() {
-        const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
-
-        const errorText = this.state.errorText
-            ? <span className='mx_ServerConfig_error'>{this.state.errorText}</span>
-            : null;
-
-        const submitButton = this.props.submitText
-            ? <AccessibleButton
-                  element="button"
-                  type="submit"
-                  className={this.props.submitClass}
-                  onClick={this.onSubmit}
-                  disabled={this.state.busy}>{this.props.submitText}</AccessibleButton>
-            : null;
-
-        return (
-            <form className="mx_ServerConfig" onSubmit={this.onSubmit} autoComplete="off">
-                <h3>{_t("Other servers")}</h3>
-                {errorText}
-                {this._renderHomeserverSection()}
-                {submitButton}
-            </form>
-        );
-    }
-}

src/components/views/auth/ServerTypeSelector.js

@@ -1,153 +0,0 @@
-/*
-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 * as sdk from '../../../index';
-import classnames from 'classnames';
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
-import {makeType} from "../../../utils/TypeUtils";
-
-const MODULAR_URL = 'https://element.io/matrix-services' +
-    '?utm_source=element-web&utm_medium=web&utm_campaign=element-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/matrix-org-bw-logo.svg')} />,
-        description: () => _t('Join millions for free on the largest public server'),
-        serverConfig: makeType(ValidatedServerConfig, {
-            hsUrl: "https://matrix-client.matrix.org",
-            hsName: "matrix.org",
-            hsNameIsDifferent: false,
-            isUrl: "https://vector.im",
-        }),
-    },
-    PREMIUM: {
-        id: PREMIUM,
-        label: () => _t('Premium'),
-        logo: () => <img src={require('../../../../res/img/ems-logo.svg')} height={16} />,
-        description: () => _t('Premium hosting for organisations <a>Learn more</a>', {}, {
-            a: sub => <a href={MODULAR_URL} target="_blank" rel="noreferrer noopener">
-                {sub}
-            </a>,
-        }),
-        identityServerUrl: "https://vector.im",
-    },
-    ADVANCED: {
-        id: ADVANCED,
-        label: () => _t('Advanced'),
-        logo: () => <div>
-            <img src={require('../../../../res/img/feather-customised/globe.svg')} />
-            {_t('Other')}
-        </div>,
-        description: () => _t('Find other public servers or use a custom server'),
-    },
-};
-
-export function getTypeFromServerConfig(config) {
-    const {hsUrl} = config;
-    if (!hsUrl) {
-        return null;
-    } 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
-        // server type selector.
-        return PREMIUM;
-    } else {
-        return ADVANCED;
-    }
-}
-
-export default class ServerTypeSelector extends React.PureComponent {
-    static propTypes = {
-        // The default selected type.
-        selected: PropTypes.string,
-        // Handler called when the selected type changes.
-        onChange: PropTypes.func.isRequired,
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {
-            selected,
-        } = props;
-
-        this.state = {
-            selected,
-        };
-    }
-
-    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>;
-    }
-}

src/components/views/auth/SignInToText.js

@@ -1,62 +0,0 @@
-/*
-Copyright 2019 The Matrix.org Foundation C.I.C.
-
-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 {_t} from "../../../languageHandler";
-import * as sdk from "../../../index";
-import PropTypes from "prop-types";
-import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
-
-export default class SignInToText extends React.PureComponent {
-    static propTypes = {
-        serverConfig: PropTypes.instanceOf(ValidatedServerConfig).isRequired,
-        onEditServerDetailsClick: PropTypes.func,
-    };
-
-    render() {
-        let signInToText = _t('Sign in to your Matrix account on %(serverName)s', {
-            serverName: this.props.serverConfig.hsName,
-        });
-        if (this.props.serverConfig.hsNameIsDifferent) {
-            const TextWithTooltip = sdk.getComponent("elements.TextWithTooltip");
-
-            signInToText = _t('Sign in to your Matrix account on <underlinedServerName />', {}, {
-                'underlinedServerName': () => {
-                    return <TextWithTooltip
-                        class="mx_Login_underlinedServerName"
-                        tooltip={this.props.serverConfig.hsUrl}
-                    >
-                        {this.props.serverConfig.hsName}
-                    </TextWithTooltip>;
-                },
-            });
-        }
-
-        let editLink = null;
-        if (this.props.onEditServerDetailsClick) {
-            editLink = <a className="mx_AuthBody_editServerDetails"
-                          href="#" onClick={this.props.onEditServerDetailsClick}
-            >
-                {_t('Change')}
-            </a>;
-        }
-
-        return <h3>
-            {signInToText}
-            {editLink}
-        </h3>;
-    }
-}

src/components/views/dialogs/ServerPickerDialog.tsx

@@ -0,0 +1,203 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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, {createRef} from 'react';
+
+import AutoDiscoveryUtils, {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import BaseDialog from './BaseDialog';
+import { _t } from '../../../languageHandler';
+import AccessibleButton from "../elements/AccessibleButton";
+import SdkConfig from "../../../SdkConfig";
+import Field from "../elements/Field";
+import StyledRadioButton from "../elements/StyledRadioButton";
+import TextWithTooltip from "../elements/TextWithTooltip";
+import withValidation, {IFieldState} from "../elements/Validation";
+
+interface IProps {
+    title?: string;
+    serverConfig: ValidatedServerConfig;
+    onFinished(config?: ValidatedServerConfig): void;
+}
+
+interface IState {
+    defaultChosen: boolean;
+    otherHomeserver: string;
+}
+
+export default class ServerPickerDialog extends React.PureComponent<IProps, IState> {
+    private readonly defaultServer: ValidatedServerConfig;
+    private readonly fieldRef = createRef<Field>();
+    private validatedConf: ValidatedServerConfig;
+
+    constructor(props) {
+        super(props);
+
+        const config = SdkConfig.get();
+        this.defaultServer = config["validated_server_config"] as ValidatedServerConfig;
+        this.state = {
+            defaultChosen: this.props.serverConfig.isDefault,
+            otherHomeserver: this.props.serverConfig.isDefault ? "" : this.props.serverConfig.hsUrl,
+        };
+    }
+
+    private onDefaultChosen = () => {
+        this.setState({ defaultChosen: true });
+    };
+
+    private onOtherChosen = () => {
+        this.setState({ defaultChosen: false });
+    };
+
+    private onHomeserverChange = (ev) => {
+        this.setState({ otherHomeserver: ev.target.value });
+    };
+
+    // TODO: Do we want to support .well-known lookups here?
+    // If for some reason someone enters "matrix.org" for a URL, we could do a lookup to
+    // find their homeserver without demanding they use "https://matrix.org"
+    private validate = withValidation<this, { error?: string }>({
+        deriveData: async ({ value: hsUrl }) => {
+            // Always try and use the defaults first
+            const defaultConfig: ValidatedServerConfig = SdkConfig.get()["validated_server_config"];
+            if (defaultConfig.hsUrl === hsUrl) return {};
+
+            try {
+                this.validatedConf = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl);
+                return {};
+            } catch (e) {
+                console.error(e);
+
+                const stateForError = AutoDiscoveryUtils.authComponentStateForError(e);
+                if (!stateForError.isFatalError) {
+                    // carry on anyway
+                    this.validatedConf = await AutoDiscoveryUtils.validateServerConfigWithStaticUrls(hsUrl, null, true);
+                    return {};
+                } else {
+                    let error = _t("Unable to validate homeserver/identity server");
+                    if (e.translatedMessage) {
+                        error = e.translatedMessage;
+                    }
+                    return { error };
+                }
+            }
+        },
+        rules: [
+            {
+                key: "required",
+                test: ({ value, allowEmpty }) => allowEmpty || !!value,
+                invalid: () => _t("Specify a homeserver"),
+            }, {
+                key: "valid",
+                test: async function({ value }, { error }) {
+                    if (!value) return true;
+                    return !error;
+                },
+                invalid: function({ error }) {
+                    return error;
+                },
+            },
+        ],
+    });
+
+    private onHomeserverValidate = (fieldState: IFieldState) => this.validate(fieldState);
+
+    private onSubmit = async (ev) => {
+        ev.preventDefault();
+
+        const valid = await this.fieldRef.current.validate({ allowEmpty: false });
+
+        if (!valid) {
+            this.fieldRef.current.focus();
+            this.fieldRef.current.validate({ allowEmpty: false, focused: true });
+            return;
+        }
+
+        this.props.onFinished(this.validatedConf); // TODO verify this even works
+    };
+
+    public render() {
+        let text;
+        if (this.defaultServer.hsName === "matrix.org") {
+            text = _t("Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.");
+        }
+
+        let defaultServerName = this.defaultServer.hsName;
+        if (this.defaultServer.hsNameIsDifferent) {
+            defaultServerName = (
+                <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={this.defaultServer.hsUrl}>
+                    {this.defaultServer.hsName}
+                </TextWithTooltip>
+            );
+        }
+
+        return <BaseDialog
+            title={this.props.title || _t("Sign into your homeserver")}
+            className="mx_ServerPickerDialog"
+            contentId="mx_ServerPickerDialog"
+            onFinished={this.props.onFinished}
+            fixedWidth={false}
+            hasCancel={true}
+        >
+            <form className="mx_Dialog_content" id="mx_ServerPickerDialog" onSubmit={this.onSubmit}>
+                <p>
+                    {_t("We call the places you where you can host your account ‘homeservers’.")} {text}
+                </p>
+
+                <StyledRadioButton
+                    name="defaultChosen"
+                    value="true"
+                    checked={this.state.defaultChosen}
+                    onChange={this.onDefaultChosen}
+                >
+                    {defaultServerName}
+                </StyledRadioButton>
+
+                <StyledRadioButton
+                    name="defaultChosen"
+                    value="false"
+                    className="mx_ServerPickerDialog_otherHomeserverRadio"
+                    checked={!this.state.defaultChosen}
+                    onChange={this.onOtherChosen}
+                >
+                    <Field
+                        type="text"
+                        className="mx_ServerPickerDialog_otherHomeserver"
+                        label={_t("Other homeserver")}
+                        onChange={this.onHomeserverChange}
+                        onClick={this.onOtherChosen}
+                        ref={this.fieldRef}
+                        onValidate={this.onHomeserverValidate}
+                        value={this.state.otherHomeserver}
+                        validateOnChange={false}
+                        validateOnFocus={false}
+                    />
+                </StyledRadioButton>
+                <p>
+                    {_t("Use your preferred Matrix homeserver if you have one, or host your own.")}
+                </p>
+
+                <AccessibleButton kind="primary" onClick={this.onSubmit}>
+                    {_t("Continue")}
+                </AccessibleButton>
+
+                <h4>{_t("Learn more")}</h4>
+                <a href="https://matrix.org/faq/#what-is-a-homeserver%3F" target="_blank" rel="noreferrer noopener">
+                    {_t("About homeservers")}
+                </a>
+            </form>
+        </BaseDialog>;
+    }
+}

src/components/views/elements/ServerPicker.tsx

@@ -0,0 +1,94 @@
+/*
+Copyright 2020 The Matrix.org Foundation C.I.C.
+
+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 AccessibleButton from "./AccessibleButton";
+import {ValidatedServerConfig} from "../../../utils/AutoDiscoveryUtils";
+import {_t} from "../../../languageHandler";
+import TextWithTooltip from "./TextWithTooltip";
+import SdkConfig from "../../../SdkConfig";
+import Modal from "../../../Modal";
+import ServerPickerDialog from "../dialogs/ServerPickerDialog";
+import InfoDialog from "../dialogs/InfoDialog";
+
+interface IProps {
+    title?: string;
+    dialogTitle?: string;
+    serverConfig: ValidatedServerConfig;
+    onServerConfigChange?(config: ValidatedServerConfig): void;
+}
+
+const showPickerDialog = (
+    title: string,
+    serverConfig: ValidatedServerConfig,
+    onFinished: (config: ValidatedServerConfig) => void,
+) => {
+    Modal.createTrackedDialog("Server Picker", "", ServerPickerDialog, { title, serverConfig, onFinished });
+};
+
+const onHelpClick = () => {
+    Modal.createTrackedDialog('Custom Server Dialog', '', InfoDialog, {
+        // TODO
+        title: _t("Server Options"),
+        description: _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 Element with an existing Matrix account on " +
+            "a different homeserver."),
+        button: _t("Dismiss"),
+        hasCloseButton: false,
+        fixedWidth: false,
+    }, "mx_ServerPicker_helpDialog");
+};
+
+const ServerPicker = ({ title, dialogTitle, serverConfig, onServerConfigChange }: IProps) => {
+    let editBtn;
+    if (!SdkConfig.get()["disable_custom_urls"] && onServerConfigChange) {
+        const onClick = () => {
+            showPickerDialog(dialogTitle, serverConfig, (config?: ValidatedServerConfig) => {
+                if (config) {
+                    onServerConfigChange(config);
+                }
+            });
+        };
+        editBtn = <AccessibleButton kind="link" onClick={onClick}>
+            {_t("Edit")}
+        </AccessibleButton>;
+    }
+
+    let serverName = serverConfig.hsName;
+    if (serverConfig.hsNameIsDifferent) {
+        serverName = <TextWithTooltip class="mx_Login_underlinedServerName" tooltip={serverConfig.hsUrl}>
+            {serverConfig.hsName}
+        </TextWithTooltip>;
+    }
+
+    let desc;
+    if (serverConfig.hsName === "matrix.org") {
+        desc = <span className="mx_ServerPicker_desc">
+            {_t("Join millions for free on the largest public server")}
+        </span>;
+    }
+
+    return <div className="mx_ServerPicker">
+        <h3>{title || _t("Homeserver")}</h3>
+        <AccessibleButton className="mx_ServerPicker_help" onClick={onHelpClick} />
+        <span className="mx_ServerPicker_server">{serverName}</span>
+        { editBtn }
+        { desc }
+    </div>
+}
+
+export default ServerPicker;

src/i18n/strings/en_EN.json

@@ -1887,6 +1887,10 @@
     "This address is available to use": "This address is available to use",
     "This address is already in use": "This address is already in use",
     "Room directory": "Room directory",
+    "Server Options": "Server Options",
+    "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Element with an existing Matrix account on a different homeserver.": "You can use the custom server options to sign into other Matrix servers by specifying a different homeserver URL. This allows you to use Element with an existing Matrix account on a different homeserver.",
+    "Join millions for free on the largest public server": "Join millions for free on the largest public server",
+    "Homeserver": "Homeserver",
     "Continue with %(provider)s": "Continue with %(provider)s",
     "Sign in with single sign-on": "Sign in with single sign-on",
     "And %(count)s more...|other": "And %(count)s more...",
@@ -2143,6 +2147,15 @@
     "A connection error occurred while trying to contact the server.": "A connection error occurred while trying to contact the server.",
     "The server is not configured to indicate what the problem is (CORS).": "The server is not configured to indicate what the problem is (CORS).",
     "Recent changes that have not yet been received": "Recent changes that have not yet been received",
+    "Unable to validate homeserver/identity server": "Unable to validate homeserver/identity server",
+    "Specify a homeserver": "Specify a homeserver",
+    "Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.": "Matrix.org is the biggest public homeserver in the world, so it’s a good place for many.",
+    "Sign into your homeserver": "Sign into your homeserver",
+    "We call the places you where you can host your account ‘homeservers’.": "We call the places you where you can host your account ‘homeservers’.",
+    "Other homeserver": "Other homeserver",
+    "Use your preferred Matrix homeserver if you have one, or host your own.": "Use your preferred Matrix homeserver if you have one, or host your own.",
+    "Learn more": "Learn more",
+    "About homeservers": "About homeservers",
     "Sign out and remove encryption keys?": "Sign out and remove encryption keys?",
     "Clear Storage and Sign Out": "Clear Storage and Sign Out",
     "Send Logs": "Send Logs",
@@ -2286,9 +2299,6 @@
     "Code": "Code",
     "Submit": "Submit",
     "Start authentication": "Start authentication",
-    "Unable to validate homeserver/identity server": "Unable to validate homeserver/identity server",
-    "Enter the location of your Element Matrix Services homeserver. It may use your own domain name or be a subdomain of <a>element.io</a>.": "Enter the location of your Element Matrix Services homeserver. It may use your own domain name or be a subdomain of <a>element.io</a>.",
-    "Server Name": "Server Name",
     "Enter password": "Enter password",
     "Nice, strong password!": "Nice, strong password!",
     "Password is allowed, but unsafe": "Password is allowed, but unsafe",
@@ -2296,14 +2306,13 @@
     "Enter username": "Enter username",
     "Enter email address": "Enter email address",
     "Enter phone number": "Enter phone number",
-    "Doesn't look like a valid phone number": "Doesn't look like a valid phone number",
+    "That phone number doesn't look quite right, please check and try again": "That phone number doesn't look quite right, please check and try again",
     "Email": "Email",
     "Username": "Username",
     "Phone": "Phone",
     "Forgot password?": "Forgot password?",
     "Sign in with": "Sign in with",
     "Sign in": "Sign in",
-    "No identity server is configured so you cannot add an email address in order to reset your password in the future.": "No identity server is configured so you cannot add an email address in order to reset your password in the future.",
     "Use an email address to recover your account": "Use an email address to recover your account",
     "Enter email address (required on this homeserver)": "Enter email address (required on this homeserver)",
     "Passwords don't match": "Passwords don't match",
@@ -2317,16 +2326,7 @@
     "Use email to optionally be discoverable by existing contacts.": "Use email to optionally be discoverable by existing contacts.",
     "Enter your custom homeserver URL <a>What does this mean?</a>": "Enter your custom homeserver URL <a>What does this mean?</a>",
     "Homeserver URL": "Homeserver URL",
-    "Enter your custom identity server URL <a>What does this mean?</a>": "Enter your custom identity server URL <a>What does this mean?</a>",
-    "Identity Server URL": "Identity Server URL",
     "Other servers": "Other servers",
-    "Free": "Free",
-    "Join millions for free on the largest public server": "Join millions for free on the largest public server",
-    "Premium": "Premium",
-    "Premium hosting for organisations <a>Learn more</a>": "Premium hosting for organisations <a>Learn more</a>",
-    "Find other public servers or use a custom server": "Find other public servers or use a custom server",
-    "Sign in to your Matrix account on %(serverName)s": "Sign in to your Matrix account on %(serverName)s",
-    "Sign in to your Matrix account on <underlinedServerName />": "Sign in to your Matrix account on <underlinedServerName />",
     "Sign in with SSO": "Sign in with SSO",
     "Couldn't load page": "Couldn't load page",
     "You must <a>register</a> to use this functionality": "You must <a>register</a> to use this functionality",
@@ -2480,12 +2480,9 @@
     "A new password must be entered.": "A new password must be entered.",
     "New passwords must match each other.": "New passwords must match each other.",
     "Changing your password will reset any end-to-end encryption keys on all of your sessions, making encrypted chat history unreadable. Set up Key Backup or export your room keys from another session before resetting your password.": "Changing your password will reset any end-to-end encryption keys on all of your sessions, making encrypted chat history unreadable. Set up Key Backup or export your room keys from another session before resetting your password.",
-    "Your Matrix account on %(serverName)s": "Your Matrix account on %(serverName)s",
-    "Your Matrix account on <underlinedServerName />": "Your Matrix account on <underlinedServerName />",
-    "No identity server is configured: add one in server settings to reset your password.": "No identity server is configured: add one in server settings to reset your password.",
-    "Sign in instead": "Sign in instead",
     "A verification email will be sent to your inbox to confirm setting your new password.": "A verification email will be sent to your inbox to confirm setting your new password.",
     "Send Reset Email": "Send Reset Email",
+    "Sign in instead": "Sign in instead",
     "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.": "An email has been sent to %(emailAddress)s. Once you've followed the link it contains, click below.",
     "I have verified my email address": "I have verified my email address",
     "Your password has been reset.": "Your password has been reset.",
@@ -2507,7 +2504,7 @@
     "Please note you are logging into the %(hs)s server, not matrix.org.": "Please note you are logging into the %(hs)s server, not matrix.org.",
     "Failed to perform homeserver discovery": "Failed to perform homeserver discovery",
     "This homeserver doesn't offer any login flows which are supported by this client.": "This homeserver doesn't offer any login flows which are supported by this client.",
-    "Error: Problem communicating with the given homeserver.": "Error: Problem communicating with the given homeserver.",
+    "There was a problem communicating with the homeserver, please try again later.": "There was a problem communicating with the homeserver, please try again later.",
     "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.": "Can't connect to homeserver via HTTP when an HTTPS URL is in your browser bar. Either use HTTPS or <a>enable unsafe scripts</a>.",
     "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.": "Can't connect to homeserver - please check your connectivity, ensure your <a>homeserver's SSL certificate</a> is trusted, and that a browser extension is not blocking requests.",
     "Syncing...": "Syncing...",
@@ -2517,6 +2514,9 @@
     "Unable to query for supported registration methods.": "Unable to query for supported registration methods.",
     "Registration has been disabled on this homeserver.": "Registration has been disabled on this homeserver.",
     "This server does not support authentication with a phone number.": "This server does not support authentication with a phone number.",
+    "That username already exists, please try another.": "That username already exists, please try another.",
+    "Host account on": "Host account on",
+    "Decide where your account is hosted": "Decide where your account is hosted",
     "Continue with": "Continue with",
     "Or": "Or",
     "Already have an account? <a>Sign in here</a>": "Already have an account? <a>Sign in here</a>",
@@ -2525,8 +2525,6 @@
     "<a>Log in</a> to your new account.": "<a>Log in</a> to your new account.",
     "You can now close this window or <a>log in</a> to your new account.": "You can now close this window or <a>log in</a> to your new account.",
     "Registration Successful": "Registration Successful",
-    "Create your Matrix account on %(serverName)s": "Create your Matrix account on %(serverName)s",
-    "Create your Matrix account on <underlinedServerName />": "Create your Matrix account on <underlinedServerName />",
     "Create account": "Create account",
     "Use Recovery Key or Passphrase": "Use Recovery Key or Passphrase",
     "Use Recovery Key": "Use Recovery Key",