imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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
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 { .mx_Login_type_container {
display: flex; display: flex;
margin-bottom: 14px; align-items: center;
color: $authpage-primary-color; color: $authpage-primary-color;
.mx_Field {
margin: 0;
}
} }
.mx_Login_type_label { .mx_Login_type_label {
flex-grow: 1; flex-grow: 1;
line-height: 35px;
} }
.mx_Login_type_dropdown { .mx_Login_type_dropdown {
display: inline-block; min-width: 200px;
min-width: 170px;
align-self: flex-end;
flex: 1 1 auto;
} }

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

@ -138,7 +138,8 @@ class PasswordLogin extends React.Component {
this.props.onUsernameBlur(ev.target.value); 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.props.onError(null); // send a null error to clear any error messages
this.setState({ this.setState({
loginType: loginType, 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 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); const loginField = this.renderLoginField(this.state.loginType);
let loginType; let loginType;
@ -303,14 +302,32 @@ class PasswordLogin extends React.Component {
loginType = ( loginType = (
<div className="mx_Login_type_container"> <div className="mx_Login_type_container">
<label className="mx_Login_type_label">{ _t('Sign in with') }</label> <label className="mx_Login_type_label">{ _t('Sign in with') }</label>
<Dropdown <Field
className="mx_Login_type_dropdown" className="mx_Login_type_dropdown"
id="mx_PasswordLogin_type"
element="select"
value={this.state.loginType} value={this.state.loginType}
onOptionChange={this.onLoginTypeChange}> onChange={this.onLoginTypeChange}
<span key={PasswordLogin.LOGIN_FIELD_MXID}>{ _t('Username') }</span> >
<span key={PasswordLogin.LOGIN_FIELD_EMAIL}>{ _t('Email address') }</span> <option
<span key={PasswordLogin.LOGIN_FIELD_PHONE}>{ _t('Phone') }</span> key={PasswordLogin.LOGIN_FIELD_MXID}
</Dropdown> 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> </div>
); );
} }