PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Convert login type to Field component

Browse source 
This converts the login type Dropdown on the login flow to also use the Field
component so that every presents a similar visual style.
This commit is contained in:
J. Ryan Stinnett 2019-03-05 17:53:09 +00:00
parent 5a491ac053
commit bc54ea5623
2 changed files with 32 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
res/css/structures/auth/_Login.scss
View file

@ -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;
}

35
src/components/views/auth/PasswordLogin.js
View file

@ -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>
);
}