Initial commit on riot-web#3524 (login UI update)

src/components/views/elements/Dropdown.js

@@ -249,7 +249,7 @@ export default class Dropdown extends React.Component {
             );
         });
 
-        if (!this.state.searchQuery) {
+        if (!this.state.searchQuery && this.props.searchEnabled) {
             options.push(
                 <div key="_searchprompt" className="mx_Dropdown_searchPrompt">
                     Type to search...
@@ -267,16 +267,20 @@ export default class Dropdown extends React.Component {
 
         let menu;
         if (this.state.expanded) {
+            if (this.props.searchEnabled) {
                 currentValue = <input type="text" className="mx_Dropdown_option"
                     ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
                     onKeyUp={this._onInputKeyUp}
                     onChange={this._onInputChange}
                     value={this.state.searchQuery}
                 />;
+            }
             menu = <div className="mx_Dropdown_menu" style={menuStyle}>
                 {this._getMenuOptions()}
             </div>;
-        } else {
+        }
+
+        if (!currentValue) {
             const selectedChild = this.props.getShortOption ?
                 this.props.getShortOption(this.props.value) :
                 this.childrenByKey[this.props.value];
@@ -313,6 +317,7 @@ Dropdown.propTypes = {
     onOptionChange: React.PropTypes.func.isRequired,
     // Called when the value of the search field changes
     onSearchChange: React.PropTypes.func,
+    searchEnabled: React.PropTypes.boolean,
     // Function that, given the key of an option, returns
     // a node representing that option to be displayed in the
     // box itself as the currently-selected option (ie. as

src/components/views/login/CountryDropdown.js

@@ -111,7 +111,7 @@ export default class CountryDropdown extends React.Component {
         return <Dropdown className={this.props.className}
             onOptionChange={this.props.onOptionChange} onSearchChange={this._onSearchChange}
             menuWidth={298} getShortOption={this._flagImgForIso2}
-            value={value}
+            value={value} searchEnabled={true}
         >
             {options}
         </Dropdown>

src/components/views/login/PasswordLogin.js

@@ -60,6 +60,7 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
             password: this.props.initialPassword,
             phoneCountry: this.props.initialPhoneCountry,
             phoneNumber: this.props.initialPhoneNumber,
+            loginType: "mxid",
         };
     },
 
@@ -88,6 +89,10 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         this.props.onUsernameChanged(ev.target.value);
     },
 
+    onLoginTypeChange: function(loginType) {
+        this.setState({loginType: loginType});
+    },
+
     onPhoneCountryChanged: function(country) {
         this.setState({phoneCountry: country});
         this.props.onPhoneCountryChanged(country);
@@ -120,15 +125,20 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         });
 
         const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-        return (
-            <div>
-                <form onSubmit={this.onSubmitForm}>
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        const loginType = {
+            'email':
                 <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">
+                    placeholder="Email or user name" autoFocus />,
+            'mxid':
+                <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 />,
+            'phone': <div className="mx_Login_phoneSection">
                 <CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
                     className="mx_Login_phoneCountry"
                     value={this.state.phoneCountry}
@@ -141,7 +151,20 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
                     name="phoneNumber"
                 />
             </div>
-                <br />
+        }[this.state.loginType];
+
+        return (
+            <div>
+                <form onSubmit={this.onSubmitForm}>
+                <div className="mx_Login_type_container">
+                    <label className="mx_Login_type_label">I want to sign in with my</label>
+                    <Dropdown className="mx_Login_type_dropdown" value={this.state.loginType} onOptionChange={this.onLoginTypeChange}>
+                        <span key="mxid">Matrix ID</span>
+                        <span key="email">Email</span>
+                        <span key="phone">Phone</span>
+                    </Dropdown>
+                </div>
+                {loginType}
                 <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     name="password"
                     value={this.state.password} onChange={this.onPasswordChanged}