Finishing off the first iteration on login UI

This makes the following changes:
 - Improve CountryDropdown by allowing all countries to be displayed at once and using PNGs for performance (trading of quality - the pngs are scaled down from 32px to 25px)
 - "I want to sign in with" dropdown to select login method
 - MXID login field that suffixes HS domain (whether custom or matrix.org) and prefixes "@"
 - Email field which is secretly the same as the username field but with a different placeholder
 - No more login flickering when changing ServerConfig (!) fixes https://github.com/vector-im/riot-web/issues/1517

This implements most of the design in https://github.com/vector-im/riot-web/issues/3524 but neglects the phone number login:
![login_with_msisdn](30a921fc-1dfc-11e7-95d1-76f619da1402.png)

This will be updated in another PR to implement desired things:
 - Country code visible once a country has been selected (propbably but as a prefix to the phone number input box.
 - Use square flags
 - Move CountryDropdown above phone input and make it show the full country name when not expanded
 - Auto-select country based on IP

src/components/structures/login/Login.js

@@ -17,13 +17,11 @@ limitations under the License.
 
 'use strict';
 
-var React = require('react');
-var ReactDOM = require('react-dom');
-var sdk = require('../../../index');
-var Login = require("../../../Login");
-var PasswordLogin = require("../../views/login/PasswordLogin");
-var CasLogin = require("../../views/login/CasLogin");
-var ServerConfig = require("../../views/login/ServerConfig");
+import React from 'react';
+import ReactDOM from 'react-dom';
+import url from 'url';
+import sdk from '../../../index';
+import Login from '../../../Login';
 
 /**
  * A wire component which glues together login UI components and Login logic
@@ -67,6 +65,7 @@ module.exports = React.createClass({
             username: "",
             phoneCountry: null,
             phoneNumber: "",
+            currentFlow: "m.login.password",
         };
     },
 
@@ -129,23 +128,19 @@ module.exports = React.createClass({
         this.setState({ phoneNumber: phoneNumber });
     },
 
-    onHsUrlChanged: function(newHsUrl) {
+    onServerConfigChange: function(config) {
         var self = this;
-        this.setState({
-            enteredHomeserverUrl: newHsUrl,
+        let newState = {
             errorText: null, // reset err messages
-        }, function() {
-            self._initLoginLogic(newHsUrl);
-        });
-    },
-
-    onIsUrlChanged: function(newIsUrl) {
-        var self = this;
-        this.setState({
-            enteredIdentityServerUrl: newIsUrl,
-            errorText: null, // reset err messages
-        }, function() {
-            self._initLoginLogic(null, newIsUrl);
+        };
+        if (config.hsUrl !== undefined) {
+            newState.enteredHomeserverUrl = config.hsUrl;
+        }
+        if (config.isUrl !== undefined) {
+            newState.enteredIdentityServerUrl = config.isUrl;
+        }
+        this.setState(newState, function() {
+            self._initLoginLogic(config.hsUrl || null, config.isUrl);
         });
     },
 
@@ -161,25 +156,28 @@ module.exports = React.createClass({
         });
         this._loginLogic = loginLogic;
 
-        loginLogic.getFlows().then(function(flows) {
-            // old behaviour was to always use the first flow without presenting
-            // options. This works in most cases (we don't have a UI for multiple
-            // logins so let's skip that for now).
-            loginLogic.chooseFlow(0);
-        }, function(err) {
-            self._setStateFromError(err, false);
-        }).finally(function() {
-            self.setState({
-                busy: false
-            });
-        });
-
         this.setState({
             enteredHomeserverUrl: hsUrl,
             enteredIdentityServerUrl: isUrl,
             busy: true,
             loginIncorrect: false,
         });
+
+        loginLogic.getFlows().then(function(flows) {
+            // old behaviour was to always use the first flow without presenting
+            // options. This works in most cases (we don't have a UI for multiple
+            // logins so let's skip that for now).
+            loginLogic.chooseFlow(0);
+            self.setState({
+                currentFlow: self._getCurrentFlowStep(),
+            });
+        }, function(err) {
+            self._setStateFromError(err, false);
+        }).finally(function() {
+            self.setState({
+                busy: false,
+            });
+        });
     },
 
     _getCurrentFlowStep: function() {
@@ -231,6 +229,7 @@ module.exports = React.createClass({
     componentForStep: function(step) {
         switch (step) {
             case 'm.login.password':
+                const PasswordLogin = sdk.getComponent('login.PasswordLogin');
                 return (
                     <PasswordLogin
                         onSubmit={this.onPasswordLogin}
@@ -242,9 +241,11 @@ module.exports = React.createClass({
                         onPhoneNumberChanged={this.onPhoneNumberChanged}
                         onForgotPasswordClick={this.props.onForgotPasswordClick}
                         loginIncorrect={this.state.loginIncorrect}
+                        hsDomain={url.parse(this.state.enteredHomeserverUrl).hostname}
                     />
                 );
             case 'm.login.cas':
+                const CasLogin = sdk.getComponent('login.CasLogin');
                 return (
                     <CasLogin onSubmit={this.onCasLogin} />
                 );
@@ -262,10 +263,11 @@ module.exports = React.createClass({
     },
 
     render: function() {
-        var Loader = sdk.getComponent("elements.Spinner");
-        var LoginHeader = sdk.getComponent("login.LoginHeader");
-        var LoginFooter = sdk.getComponent("login.LoginFooter");
-        var loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
+        const Loader = sdk.getComponent("elements.Spinner");
+        const LoginHeader = sdk.getComponent("login.LoginHeader");
+        const LoginFooter = sdk.getComponent("login.LoginFooter");
+        const ServerConfig = sdk.getComponent("login.ServerConfig");
+        const loader = this.state.busy ? <div className="mx_Login_loader"><Loader /></div> : null;
 
         var loginAsGuestJsx;
         if (this.props.enableGuest) {
@@ -291,15 +293,14 @@ module.exports = React.createClass({
                         <h2>Sign in
                             { loader }
                         </h2>
-                        { this.componentForStep(this._getCurrentFlowStep()) }
+                        { this.componentForStep(this.state.currentFlow) }
                         <ServerConfig ref="serverConfig"
                             withToggleButton={true}
                             customHsUrl={this.props.customHsUrl}
                             customIsUrl={this.props.customIsUrl}
                             defaultHsUrl={this.props.defaultHsUrl}
                             defaultIsUrl={this.props.defaultIsUrl}
-                            onHsUrlChanged={this.onHsUrlChanged}
-                            onIsUrlChanged={this.onIsUrlChanged}
+                            onServerConfigChange={this.onServerConfigChange}
                             delayTimeMs={1000}/>
                         <div className="mx_Login_error">
                                 { this.state.errorText }