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) {
-            currentValue = <input type="text" className="mx_Dropdown_option"
+            if (this.props.searchEnabled) {
-                ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
+                currentValue = <input type="text" className="mx_Dropdown_option"
-                onKeyUp={this._onInputKeyUp}
+                    ref={this._collectInputTextBox} onKeyPress={this._onInputKeyPress}
-                onChange={this._onInputChange}
+                    onKeyUp={this._onInputKeyUp}
-                value={this.state.searchQuery}
+                    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,28 +125,46 @@ module.exports = React.createClass({displayName: 'PasswordLogin',
         });
 
         const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
-        return (
+        const Dropdown = sdk.getComponent('elements.Dropdown');
-            <div>
+
-                <form onSubmit={this.onSubmitForm}>
+        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 />
+                    placeholder="Email or user name" autoFocus />,
-                or
+            'mxid':
-                <div className="mx_Login_phoneSection">
+                <input className="mx_Login_field mx_Login_username" type="text"
-                    <CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
+                    name="username" // make it a little easier for browser's remember-password
-                        className="mx_Login_phoneCountry"
+                    value={this.state.username} onChange={this.onUsernameChanged}
-                        value={this.state.phoneCountry}
+                    placeholder="Email or user name" autoFocus />,
-                    />
+            'phone': <div className="mx_Login_phoneSection">
-                    <input type="text" ref="phoneNumber"
+                <CountryDropdown ref="phone_country" onOptionChange={this.onPhoneCountryChanged}
-                        onChange={this.onPhoneNumberChanged}
+                    className="mx_Login_phoneCountry"
-                        placeholder="Mobile phone number"
+                    value={this.state.phoneCountry}
-                        className="mx_Login_phoneNumberField mx_Login_field"
+                />
-                        value={this.state.phoneNumber}
+                <input type="text" ref="phoneNumber"
-                        name="phoneNumber"
+                    onChange={this.onPhoneNumberChanged}
-                    />
+                    placeholder="Mobile phone number"
+                    className="mx_Login_phoneNumberField mx_Login_field"
+                    value={this.state.phoneNumber}
+                    name="phoneNumber"
+                />
+            </div>
+        }[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>
-                <br />
+                {loginType}
                 <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     name="password"
                     value={this.state.password} onChange={this.onPasswordChanged}