From bc54ea5623839fdf5f1a4000a75811d9ae95210a Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 5 Mar 2019 17:53:09 +0000
Subject: [PATCH] Convert login type to Field component

This converts the login type Dropdown on the login flow to also use the Field
component so that every presents a similar visual style.
---
 res/css/structures/auth/_Login.scss        | 12 ++++----
 src/components/views/auth/PasswordLogin.js | 35 ++++++++++++++++------
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/res/css/structures/auth/_Login.scss b/res/css/structures/auth/_Login.scss
index f3cada9d70..2cf6276557 100644
--- a/res/css/structures/auth/_Login.scss
+++ b/res/css/structures/auth/_Login.scss
@@ -64,18 +64,18 @@ limitations under the License.
 
 .mx_Login_type_container {
     display: flex;
-    margin-bottom: 14px;
+    align-items: center;
     color: $authpage-primary-color;
+
+    .mx_Field {
+        margin: 0;
+    }
 }
 
 .mx_Login_type_label {
     flex-grow: 1;
-    line-height: 35px;
 }
 
 .mx_Login_type_dropdown {
-    display: inline-block;
-    min-width: 170px;
-    align-self: flex-end;
-    flex: 1 1 auto;
+    min-width: 200px;
 }
diff --git a/src/components/views/auth/PasswordLogin.js b/src/components/views/auth/PasswordLogin.js
index f08f75a84b..169d36f0c0 100644
--- a/src/components/views/auth/PasswordLogin.js
+++ b/src/components/views/auth/PasswordLogin.js
@@ -138,7 +138,8 @@ class PasswordLogin extends React.Component {
         this.props.onUsernameBlur(ev.target.value);
     }
 
-    onLoginTypeChange(loginType) {
+    onLoginTypeChange(ev) {
+        const loginType = ev.target.value;
         this.props.onError(null); // send a null error to clear any error messages
         this.setState({
             loginType: loginType,
@@ -294,8 +295,6 @@ class PasswordLogin extends React.Component {
             error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
         });
 
-        const Dropdown = sdk.getComponent('elements.Dropdown');
-
         const loginField = this.renderLoginField(this.state.loginType);
 
         let loginType;
@@ -303,14 +302,32 @@ class PasswordLogin extends React.Component {
             loginType = (
                 <div className="mx_Login_type_container">
                     <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
-                    <Dropdown
+                    <Field
                         className="mx_Login_type_dropdown"
+                        id="mx_PasswordLogin_type"
+                        element="select"
                         value={this.state.loginType}
-                        onOptionChange={this.onLoginTypeChange}>
-                            <span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span>
-                            <span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span>
-                    </Dropdown>
+                        onChange={this.onLoginTypeChange}
+                    >
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_MXID}
+                            value={PasswordLogin.LOGIN_FIELD_MXID}
+                        >
+                            {_t('Username')}
+                        </option>
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_EMAIL}
+                            value={PasswordLogin.LOGIN_FIELD_EMAIL}
+                        >
+                            {_t('Email address')}
+                        </option>
+                        <option
+                            key={PasswordLogin.LOGIN_FIELD_PHONE}
+                            value={PasswordLogin.LOGIN_FIELD_PHONE}
+                        >
+                            {_t('Phone')}
+                        </option>
+                    </Field>
                 </div>
             );
         }