diff --git a/src/components/structures/login/Login.js b/src/components/structures/login/Login.js index bc04434bb2..43264e7003 100644 --- a/src/components/structures/login/Login.js +++ b/src/components/structures/login/Login.js @@ -93,6 +93,13 @@ module.exports = React.createClass({ this._unmounted = true; }, + onPasswordLoginError: function(errorText) { + this.setState({ + errorText, + loginIncorrect: Boolean(errorText), + }); + }, + onPasswordLogin: function(username, phoneCountry, phoneNumber, password) { this.setState({ busy: true, @@ -357,6 +364,7 @@ module.exports = React.createClass({ return ( {this._loginField = e;}} key="email_input" type="text" name="username" // make it a little easier for browser's remember-password @@ -139,8 +174,10 @@ class PasswordLogin extends React.Component { />; case PasswordLogin.LOGIN_FIELD_MXID: classes.mx_Login_username = true; + classes.error = this.props.loginIncorrect && !this.state.username; return {this._loginField = e;}} key="username_input" type="text" name="username" // make it a little easier for browser's remember-password @@ -153,14 +190,14 @@ class PasswordLogin extends React.Component { autoFocus disabled={disabled} />; - case PasswordLogin.LOGIN_FIELD_PHONE: + case PasswordLogin.LOGIN_FIELD_PHONE: { const CountryDropdown = sdk.getComponent('views.login.CountryDropdown'); classes.mx_Login_phoneNumberField = true; classes.mx_Login_field_has_prefix = true; + classes.error = this.props.loginIncorrect && !this.state.phoneNumber; return
{this._loginField = e;}} key="phone_input" type="text" name="phoneNumber" @@ -180,6 +217,17 @@ class PasswordLogin extends React.Component { disabled={disabled} />
; + } + } + } + + 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; } } @@ -207,7 +255,7 @@ class PasswordLogin extends React.Component { const pwFieldClass = classNames({ mx_Login_field: true, 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'); @@ -258,6 +306,7 @@ PasswordLogin.LOGIN_FIELD_PHONE = "login_field_phone"; PasswordLogin.propTypes = { onSubmit: PropTypes.func.isRequired, // fn(username, password) + onError: PropTypes.func, onForgotPasswordClick: PropTypes.func, // fn() initialUsername: PropTypes.string, initialPhoneCountry: PropTypes.string, diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index e4a66b9c12..d35555af6f 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -616,6 +616,10 @@ "Code": "Code", "Start authentication": "Start authentication", "powered by Matrix": "powered by Matrix", + "The email field must not be blank.": "The email field must not be blank.", + "The user name field must not be blank.": "The user name field must not be blank.", + "The phone number field must not be blank.": "The phone number field must not be blank.", + "The password field must not be blank.": "The password field must not be blank.", "Username on %(hs)s": "Username on %(hs)s", "User name": "User name", "Mobile phone number": "Mobile phone number",