Merge pull request #71 from smiclea/CORWEB-92

Disable login inputs until the page is completely loaded CORWEB-92

src/components/App/App.scss

@@ -845,7 +845,8 @@ input[type="text"], input[type="password"] {
     outline: none;
   }
   &:disabled {
-    border-color: $gray-dark;
+    color: $gray;
+    border-color: $gray-lighter;
     background-color: $gray-lighter;
   }
 }

src/components/LoginPage/LoginPage.js

@@ -92,9 +92,17 @@ export class LoginPage extends Reflux.Component {
   }
 
   componentWillMount() {
+    if (process.env.BROWSER) {
+      window.addEventListener('load', this.handleWindowLoad.bind(this));
+    }
+
     super.componentWillMount.call(this)
     this.context.onSetTitle(title);
+  }
+
+  handleWindowLoad() {
     this.setState({ disableLogin: false })
+    this.userNameInput.focus()
   }
 
   login(e) {
@@ -138,12 +146,15 @@ export class LoginPage extends Reflux.Component {
       </div>
     ) : null
 
+    let buttonContent = this.state.disableLogin ?
+      <span>Please wait ... <div className="spinner"></div></span> : 'Login'
+
     return (
       <div className={s.root}>
         <div className={s.container + " " + (loginButtons.length <= 2 ? s.oneColumn : "")}>
           <div className={s.logo}>
             <div className={s.large}>
-              <LoadingIcon width={224} height={200} animate={this.state.loadingState} padding={16} text="" />
+              <LoadingIcon width={224} height={200} animate={false} padding={16} text="" />
               <div className={s.coriolisText} dangerouslySetInnerHTML={{ __html: coriolisTextSvg }}></div>
             </div>
             <div className={s.small}>
@@ -160,8 +171,9 @@ export class LoginPage extends Reflux.Component {
                 <div className="form-group">
                   <label>Username</label>
                   <input
+                    ref={input => { this.userNameInput = input }}
+                    disabled={this.state.disableLogin}
                     type="text"
-                    autoFocus="true"
                     placeholder="Username"
                     onChange={(e) => this.handleChangeUsername(e)}
                     value={this.state.username}
@@ -170,6 +182,7 @@ export class LoginPage extends Reflux.Component {
                 <div className="form-group">
                   <label>Password</label>
                   <input
+                    disabled={this.state.disableLogin}
                     type="password"
                     placeholder="Password"
                     onChange={(e) => this.handleChangePassword(e)}
@@ -177,7 +190,9 @@ export class LoginPage extends Reflux.Component {
                   />
                 </div>
                 <div className="form-group">
-                  <button onClick={(e) => this.login(e)} disabled={this.state.disableLogin}>Login</button>
+                  <button onClick={(e) => this.login(e)} disabled={this.state.disableLogin}>
+                    {buttonContent}
+                  </button>
                 </div>
                 {/* <div className="form-group">
                   <a href="/forgot-password" className={s.forgotPassText}>Forgot your Password?</a>

src/components/LoginPage/LoginPage.scss

@@ -64,6 +64,10 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   }
   button {
     margin-top: 16px;
+    position: relative;
+    &:disabled {
+      opacity: 1;
+    }
   }
   input, button {
     width: 100%;
@@ -175,6 +179,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       &:nth-child(2n+1) {
         padding-right: 8px;
       }
+
+      .spinner {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        border-top-color: white;
+        border-right-color: white;
+        border-bottom-color: white;
+        border-left-color: #7190CD;
+      }
+
       label {
         text-align: left;
         text-transform: uppercase;