Support registration & login with phone number (#742)

* WIP msisdn sign in

* A mostly working country picker

* Fix bug where you'dbe logged out after registering

Stop the guest sync, otherwise it gets 401ed for using a guest
access token for a non-guest, causing us to beliebe we've been
logged out.

* Use InteractiveAuth component for registration

* Fix tests

* Remove old signup code

* Signup -> Login

Now that Signup contains no code whatsoever related to signing up,
rename it to Login. Get rid of the Signup class.

* Stray newline

* Fix more merge failing

* Get phone country & number to the right place

* More-or-less working msisdn auth component

* Send the bind_msisdn param on registration

* Refinements to country dropdown

Rendering the whole lot when the component was rendered just makes
the page load really slow, so just show 2 at a time and rely on
type-to-search.

Make type-to-search always display an exact iso2 match first

* Propagate initial inputs to the phone input

* Support msisdn login

* semicolon

* Fix PropTypes

* Oops, use the 1qst element of the array

Not the array of object keys which has no particular order

* Make dropdown/countrydropdown controlled

* Unused line

* Add note on DOM layout

* onOptionChange is required

* More docs

* Add missing propTypes

* Don't resume promise on error

* Use React.Children to manipulate children

* Make catch less weird

* Fix null dereference

Assuming [0] of an empty list == undefined doesn't work if you're
then taking a property of it.

src/components/views/login/PasswordLogin.js

@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2017 Vector Creations Ltd
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -17,6 +18,7 @@ limitations under the License.
 import React from 'react';
 import ReactDOM from 'react-dom';
 import classNames from 'classnames';
+import sdk from '../../../index';
 import {field_input_incorrect} from '../../../UiEffects';
 
 
@@ -28,8 +30,12 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         onSubmit: React.PropTypes.func.isRequired, // fn(username, password)
         onForgotPasswordClick: React.PropTypes.func, // fn()
         initialUsername: React.PropTypes.string,
+        initialPhoneCountry: React.PropTypes.string,
+        initialPhoneNumber: React.PropTypes.string,
         initialPassword: React.PropTypes.string,
         onUsernameChanged: React.PropTypes.func,
+        onPhoneCountryChanged: React.PropTypes.func,
+        onPhoneNumberChanged: React.PropTypes.func,
         onPasswordChanged: React.PropTypes.func,
         loginIncorrect: React.PropTypes.bool,
     },
@@ -38,7 +44,11 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         return {
             onUsernameChanged: function() {},
             onPasswordChanged: function() {},
+            onPhoneCountryChanged: function() {},
+            onPhoneNumberChanged: function() {},
             initialUsername: "",
+            initialPhoneCountry: "",
+            initialPhoneNumber: "",
             initialPassword: "",
             loginIncorrect: false,
         };
@@ -48,6 +58,8 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         return {
             username: this.props.initialUsername,
             password: this.props.initialPassword,
+            phoneCountry: this.props.initialPhoneCountry,
+            phoneNumber: this.props.initialPhoneNumber,
         };
     },
 
@@ -63,7 +75,12 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
 
     onSubmitForm: function(ev) {
         ev.preventDefault();
-        this.props.onSubmit(this.state.username, this.state.password);
+        this.props.onSubmit(
+            this.state.username,
+            this.state.phoneCountry,
+            this.state.phoneNumber,
+            this.state.password,
+        );
     },
 
     onUsernameChanged: function(ev) {
@@ -71,6 +88,16 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         this.props.onUsernameChanged(ev.target.value);
     },
 
+    onPhoneCountryChanged: function(country) {
+        this.setState({phoneCountry: country});
+        this.props.onPhoneCountryChanged(country);
+    },
+
+    onPhoneNumberChanged: function(ev) {
+        this.setState({phoneNumber: ev.target.value});
+        this.props.onPhoneNumberChanged(ev.target.value);
+    },
+
     onPasswordChanged: function(ev) {
         this.setState({password: ev.target.value});
         this.props.onPasswordChanged(ev.target.value);
@@ -92,13 +119,28 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             error: this.props.loginIncorrect,
         });
 
+        const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
-                <input className="mx_Login_field" type="text"
+                <input className="mx_Login_field mx_Login_username" type="text"
                     name="username" // make it a little easier for browser's remember-password
                     value={this.state.username} onChange={this.onUsernameChanged}
                     placeholder="Email or user name" autoFocus />
+                or
+                <div className="mx_Login_phoneSection">
+                    <CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
+                        className="mx_Login_phoneCountry"
+                        value={this.state.phoneCountry}
+                    />
+                    <input type="text" ref="phoneNumber"
+                        onChange={this.onPhoneNumberChanged}
+                        placeholder="Mobile phone number"
+                        className="mx_Login_phoneNumberField mx_Login_field"
+                        value={this.state.phoneNumber}
+                        name="phoneNumber"
+                    />
+                </div>
                 <br />
                 <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     name="password"