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

highlight top field if blank otherwise the password field.

Browse source 
remove unused refs

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2018-06-23 17:26:16 +01:00
parent 4a5fbf2c84
commit 61def4a973
No known key found for this signature in database
GPG key ID: 3F879DA5AD802A5E
1 changed files with 22 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/components/views/login/PasswordLogin.js
View file

@ -57,15 +57,17 @@ class PasswordLogin extends React.Component {
this.onPhoneCountryChanged = this.onPhoneCountryChanged.bind(this); this.onPhoneCountryChanged = this.onPhoneCountryChanged.bind(this);
this.onPhoneNumberChanged = this.onPhoneNumberChanged.bind(this); this.onPhoneNumberChanged = this.onPhoneNumberChanged.bind(this);
this.onPasswordChanged = this.onPasswordChanged.bind(this); this.onPasswordChanged = this.onPasswordChanged.bind(this);
this.isLoginEmpty = this.isLoginEmpty.bind(this);
} }
componentWillMount() { componentWillMount() {
this._passwordField = null; this._passwordField = null;
this._loginField = null;
} }
componentWillReceiveProps(nextProps) { componentWillReceiveProps(nextProps) {
if (!this.props.loginIncorrect && nextProps.loginIncorrect) { if (!this.props.loginIncorrect && nextProps.loginIncorrect) {
field_input_incorrect(this._passwordField); field_input_incorrect(this.isLoginEmpty() ? this._loginField : this._passwordField);
} }
} }
@ -157,8 +159,10 @@ class PasswordLogin extends React.Component {
switch (loginType) { switch (loginType) {
case PasswordLogin.LOGIN_FIELD_EMAIL: case PasswordLogin.LOGIN_FIELD_EMAIL:
classes.mx_Login_email = true; classes.mx_Login_email = true;
classes.error = this.props.loginIncorrect && !this.state.username;
return <input return <input
className={classNames(classes)} className={classNames(classes)}
ref={(e) => {this._loginField = e;}}
key="email_input" key="email_input"
type="text" type="text"
name="username" // make it a little easier for browser's remember-password name="username" // make it a little easier for browser's remember-password
@ -170,8 +174,10 @@ class PasswordLogin extends React.Component {
/>; />;
case PasswordLogin.LOGIN_FIELD_MXID: case PasswordLogin.LOGIN_FIELD_MXID:
classes.mx_Login_username = true; classes.mx_Login_username = true;
classes.error = this.props.loginIncorrect && !this.state.username;
return <input return <input
className={classNames(classes)} className={classNames(classes)}
ref={(e) => {this._loginField = e;}}
key="username_input" key="username_input"
type="text" type="text"
name="username" // make it a little easier for browser's remember-password name="username" // make it a little easier for browser's remember-password
@ -184,14 +190,14 @@ class PasswordLogin extends React.Component {
autoFocus autoFocus
disabled={disabled} disabled={disabled}
/>; />;
case PasswordLogin.LOGIN_FIELD_PHONE: case PasswordLogin.LOGIN_FIELD_PHONE: {
const CountryDropdown = sdk.getComponent('views.login.CountryDropdown'); const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
classes.mx_Login_phoneNumberField = true; classes.mx_Login_phoneNumberField = true;
classes.mx_Login_field_has_prefix = true; classes.mx_Login_field_has_prefix = true;
classes.error = this.props.loginIncorrect && !this.state.phoneNumber;
return <div className="mx_Login_phoneSection"> return <div className="mx_Login_phoneSection">
<CountryDropdown <CountryDropdown
className="mx_Login_phoneCountry mx_Login_field_prefix" className="mx_Login_phoneCountry mx_Login_field_prefix"
ref="phone_country"
onOptionChange={this.onPhoneCountryChanged} onOptionChange={this.onPhoneCountryChanged}
value={this.state.phoneCountry} value={this.state.phoneCountry}
isSmall={true} isSmall={true}
@ -200,7 +206,7 @@ class PasswordLogin extends React.Component {
/> />
<input <input
className={classNames(classes)} className={classNames(classes)}
ref="phoneNumber" ref={(e) => {this._loginField = e;}}
key="phone_input" key="phone_input"
type="text" type="text"
name="phoneNumber" name="phoneNumber"
@ -211,6 +217,17 @@ class PasswordLogin extends React.Component {
disabled={disabled} disabled={disabled}
/> />
</div>; </div>;
}
}
}
isLoginEmpty() {
switch (this.state.loginType) {
case PasswordLogin.LOGIN_FIELD_EMAIL:
case PasswordLogin.LOGIN_FIELD_MXID:
return !this.state.username;
case PasswordLogin.LOGIN_FIELD_PHONE:
return !this.state.phoneCountry || !this.state.phoneNumber;
} }
} }
@ -238,7 +255,7 @@ class PasswordLogin extends React.Component {
const pwFieldClass = classNames({ const pwFieldClass = classNames({
mx_Login_field: true, mx_Login_field: true,
mx_Login_field_disabled: matrixIdText === '', mx_Login_field_disabled: matrixIdText === '',
error: this.props.loginIncorrect, error: this.props.loginIncorrect && !this.isLoginEmpty(), // only error password if error isn't top field
}); });
const Dropdown = sdk.getComponent('elements.Dropdown'); const Dropdown = sdk.getComponent('elements.Dropdown');