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 = (
- - { _t('Username') } - { _t('Email address') } - { _t('Phone') } - + onChange={this.onLoginTypeChange} + > + + + +
); }