Grey out login form when no valid HS

Author: dbkr

src/components/views/elements/Dropdown.js

@@ -302,6 +302,7 @@ export default class Dropdown extends React.Component {
 
         const dropdownClasses = {
             mx_Dropdown: true,
+            mx_Dropdown_disabled: this.props.disabled,
         };
         if (this.props.className) {
             dropdownClasses[this.props.className] = true;

src/components/views/login/CountryDropdown.js

@@ -123,7 +123,7 @@ export default class CountryDropdown extends React.Component {
         return <Dropdown className={this.props.className + " left_aligned"}
             onOptionChange={this._onOptionChange} onSearchChange={this._onSearchChange}
             menuWidth={298} getShortOption={this._getShortOption}
-            value={value} searchEnabled={true}
+            value={value} searchEnabled={true} disabled={this.props.disabled}
         >
             {options}
         </Dropdown>;
@@ -137,4 +137,5 @@ CountryDropdown.propTypes = {
     showPrefix: React.PropTypes.bool,
     onOptionChange: React.PropTypes.func.isRequired,
     value: React.PropTypes.string,
+    disabled: React.PropTypes.bool,
 };

src/components/views/login/PasswordLogin.js

@@ -116,32 +116,43 @@ class PasswordLogin extends React.Component {
         this.props.onPasswordChanged(ev.target.value);
     }
 
-    renderLoginField(loginType) {
+    renderLoginField(loginType, disabled) {
+        const classes = {
+            mx_Login_field: true,
+            mx_Login_field_disabled: disabled,
+        };
+
         switch(loginType) {
             case PasswordLogin.LOGIN_FIELD_EMAIL:
+                classes.mx_Login_email = true;
                 return <input
-                    className="mx_Login_field mx_Login_email"
+                    className={classNames(classes)}
                     key="email_input"
                     type="text"
                     name="username" // make it a little easier for browser's remember-password
                     onChange={this.onUsernameChanged}
                     placeholder="[email protected]"
                     value={this.state.username}
                     autoFocus
+                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_MXID:
+                classes.mx_Login_username = true;
                 return <input
-                    className="mx_Login_field mx_Login_username"
+                    className={classNames(classes)}
                     key="username_input"
                     type="text"
                     name="username" // make it a little easier for browser's remember-password
                     onChange={this.onUsernameChanged}
                     placeholder={_t('User name')}
                     value={this.state.username}
                     autoFocus
+                    disabled={disabled}
                 />;
             case PasswordLogin.LOGIN_FIELD_PHONE:
                 const CountryDropdown = sdk.getComponent('views.login.CountryDropdown');
+                classes.mx_Login_phoneNumberField = true;
+                classes.mx_Login_field_has_prefix = true;
                 return <div className="mx_Login_phoneSection">
                     <CountryDropdown
                         className="mx_Login_phoneCountry mx_Login_field_prefix"
@@ -150,9 +161,10 @@ class PasswordLogin extends React.Component {
                         value={this.state.phoneCountry}
                         isSmall={true}
                         showPrefix={true}
+                        disabled={disabled}
                     />
                     <input
-                        className="mx_Login_phoneNumberField mx_Login_field mx_Login_field_has_prefix"
+                        className={classNames(classes)}
                         ref="phoneNumber"
                         key="phone_input"
                         type="text"
@@ -161,6 +173,7 @@ class PasswordLogin extends React.Component {
                         placeholder={_t("Mobile phone number")}
                         value={this.state.phoneNumber}
                         autoFocus
+                        disabled={disabled}
                     />
                 </div>;
         }
@@ -177,15 +190,6 @@ class PasswordLogin extends React.Component {
             );
         }
 
-        const pwFieldClass = classNames({
-            mx_Login_field: true,
-            error: this.props.loginIncorrect,
-        });
-
-        const Dropdown = sdk.getComponent('elements.Dropdown');
-
-        const loginField = this.renderLoginField(this.state.loginType);
-
         let matrixIdText = '';
         if (this.props.hsUrl) {
             try {
@@ -196,6 +200,16 @@ class PasswordLogin extends React.Component {
             }
         }
 
+        const pwFieldClass = classNames({
+            mx_Login_field: true,
+            mx_Login_field_disabled: matrixIdText === '',
+            error: this.props.loginIncorrect,
+        });
+
+        const Dropdown = sdk.getComponent('elements.Dropdown');
+
+        const loginField = this.renderLoginField(this.state.loginType, matrixIdText === '');
+
         return (
             <div>
                 <form onSubmit={this.onSubmitForm}>
@@ -215,10 +229,12 @@ class PasswordLogin extends React.Component {
                 <input className={pwFieldClass} ref={(e) => {this._passwordField = e;}} type="password"
                     name="password"
                     value={this.state.password} onChange={this.onPasswordChanged}
-                    placeholder={ _t('Password') } />
+                    placeholder={ _t('Password') }
+                    disabled={matrixIdText === ''}
+                />
                 <br />
                 {forgotPasswordJsx}
-                <input className="mx_Login_submit" type="submit" value={ _t('Sign in') } />
+                <input className="mx_Login_submit" type="submit" value={ _t('Sign in') } disabled={matrixIdText === ''} />
                 </form>
             </div>
         );