Switch to two phase login

res/css/structures/auth/_Login.scss

@@ -46,6 +46,7 @@ limitations under the License.
     margin-top: 35px;
     margin-bottom: 24px;
     box-sizing: border-box;
+    text-align: center;
 }
 
 .mx_Login_submit:hover {
@@ -70,7 +71,6 @@ limitations under the License.
 .mx_AuthBody a.mx_Login_sso_link:hover,
 .mx_AuthBody a.mx_Login_sso_link:visited {
     color: $button-primary-fg-color;
-    text-align: center;
 }
 
 .mx_Login_loader {

src/components/structures/auth/Login.js

@@ -31,6 +31,12 @@ import * as ServerType from '../../views/auth/ServerTypeSelector';
 // For validating phone numbers without country codes
 const PHONE_NUMBER_REGEX = /^[0-9()\-\s]*$/;
 
+// Phases
+// Show controls to configure server details
+const PHASE_SERVER_DETAILS = 0;
+// Show the appropriate login flow(s) for the server
+const PHASE_LOGIN = 1;
+
 // 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.
 _td("Invalid homeserver discovery response");
@@ -90,6 +96,10 @@ module.exports = React.createClass({
             username: "",
             phoneCountry: null,
             phoneNumber: "",
+
+            // Phase of the overall login dialog.
+            phase: PHASE_SERVER_DETAILS,
+            // The current login flow, such as password, SSO, etc.
             currentFlow: "m.login.password",
 
             // .well-known discovery
@@ -316,6 +326,10 @@ module.exports = React.createClass({
                     hsUrl,
                     isUrl,
                 });
+                // Move directly to the login phase since the server details are fixed.
+                this.setState({
+                    phase: PHASE_LOGIN,
+                });
                 break;
             }
             case ServerType.PREMIUM:
@@ -326,6 +340,9 @@ module.exports = React.createClass({
                     hsUrl: this.props.defaultHsUrl,
                     isUrl: this.props.defaultIsUrl,
                 });
+                this.setState({
+                    phase: PHASE_SERVER_DETAILS,
+                });
                 break;
         }
     },
@@ -336,6 +353,13 @@ module.exports = React.createClass({
         this.props.onRegisterClick();
     },
 
+    onServerDetailsNextPhaseClick(ev) {
+        ev.stopPropagation();
+        this.setState({
+            phase: PHASE_LOGIN,
+        });
+    },
+
     _tryWellKnownDiscovery: async function(serverName) {
         if (!serverName.trim()) {
             // Nothing to discover
@@ -509,12 +533,24 @@ module.exports = React.createClass({
     serverComponentForStep() {
         const ServerTypeSelector = sdk.getComponent("auth.ServerTypeSelector");
         const ServerConfig = sdk.getComponent("auth.ServerConfig");
+        const AccessibleButton = sdk.getComponent("elements.AccessibleButton");
 
         // TODO: May need to adjust the behavior of this config option
         if (SdkConfig.get()['disable_custom_urls']) {
             return null;
         }
 
+        // 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 (this.state.phase !== PHASE_SERVER_DETAILS) {
+            return <div>
+                <ServerTypeSelector
+                    defaultHsUrl={this.props.defaultHsUrl}
+                    onChange={this.onServerTypeChange}
+                />
+            </div>;
+        }
+
         let serverDetails = null;
         switch (this.state.serverType) {
             case ServerType.FREE:
@@ -539,10 +575,19 @@ module.exports = React.createClass({
                 onChange={this.onServerTypeChange}
             />
             {serverDetails}
+            <AccessibleButton className="mx_Login_submit"
+                onClick={this.onServerDetailsNextPhaseClick}
+            >
+                {_t("Next")}
+            </AccessibleButton>
         </div>;
     },
 
     loginComponentForStep() {
+        if (this.state.phase !== PHASE_LOGIN) {
+            return null;
+        }
+
         const step = this.state.currentFlow;
 
         if (!step) {