- Disables login button when login request is sent

- Changs delete buttons color

src/actions/UserActions/UserActions.js

@@ -35,7 +35,7 @@ let UserAction = Reflux.createActions({
   setUserInfo: { children: ["success", "failed"] }
 })
 
-UserAction.login.listen(userData => {
+UserAction.login.listen((userData, callback = null) => {
   let auth = {
     auth: {
       identity: {
@@ -66,7 +66,12 @@ UserAction.login.listen(userData => {
     .then((response) => {
       UserAction.login.success(response)
       Location.push('/replicas')
-    }, UserAction.login.failed)
+    }, () => {
+      UserAction.login.failed()
+      if (typeof callback == "function") {
+        callback()
+      }
+    })
 })
 
 UserAction.loginScope.listen((token, projectId, fallback = true) => {

src/components/LoginPage/LoginPage.js

@@ -94,17 +94,14 @@ export class LoginPage extends Reflux.Component {
     this.state = {
       username: "",
       password: "",
-      loaded: false
+      disableLogin: true
     }
   }
 
   componentWillMount() {
     super.componentWillMount.call(this)
     this.context.onSetTitle(title);
-  }
-
-  componentDidMount() {
-    this.setState({ loaded: true })
+    this.setState({ disableLogin: false })
   }
 
   login(e) {
@@ -113,9 +110,12 @@ export class LoginPage extends Reflux.Component {
     if (this.state.username.length == 0 || this.state.password.length == 0) {
       NotificationActions.notify("Please fill in all fields")
     } else {
+      this.setState({ disableLogin: true })
       UserActions.login({
         name: this.state.username,
         password: this.state.password
+      }, () => {
+        this.setState({ disableLogin: false })
       })
     }
   }
@@ -179,7 +179,7 @@ export class LoginPage extends Reflux.Component {
                   />
                 </div>
                 <div className="form-group">
-                  <button onClick={(e) => this.login(e)} disabled={!this.state.loaded}>Login</button>
+                  <button onClick={(e) => this.login(e)} disabled={this.state.disableLogin}>Login</button>
                 </div>
                 {/* <div className="form-group">
                   <a href="/forgot-password" className={s.forgotPassText}>Forgot your Password?</a>

src/components/MigrationDetail/MigrationDetail.js

@@ -153,7 +153,7 @@ class MigrationDetail extends Component {
             >
               Migrate Replica
             </button>}
-            <button className="wire" onClick={(e) => this.deleteMigration(e)}>Delete</button>
+            <button className="wire red" onClick={(e) => this.deleteMigration(e)}>Delete</button>
           </div>
           <ConfirmationDialog
             visible={this.state.confirmationDialog.visible}

src/components/MigrationView/MigrationView.js

@@ -107,7 +107,7 @@ class MigrationView extends Reflux.Component {
       if (item.status == "RUNNING") {
         buttons = <button className="gray" onClick={(e) => (this.cancelMigration(e))}>Cancel</button>
       } else {
-        buttons = <button className="gray" onClick={(e) => this.deleteMigration(e)}>Delete</button>
+        buttons = <button className="wire red" onClick={(e) => this.deleteMigration(e)}>Delete</button>
       }
 
       let itemStatus = item.status

src/components/ProjectDetail/ProjectDetail.js

@@ -101,7 +101,7 @@ class CloudConnectionDetail extends Component {
               <button onClick={(e) => this.showEditConnectionModal(e)} className="gray" disabled>Edit Project</button>
             </div>
             <div className={s.rightSide}>
-              <button onClick={(e) => this.deleteProject(e)} className="wire">Delete</button>
+              <button onClick={(e) => this.deleteProject(e)} className="wire red">Delete</button>
             </div>
           </div>
         </div>

src/components/ReplicaDetail/ReplicaDetail.js

@@ -156,7 +156,7 @@ class MigrationDetail extends Component {
             >
               Migrate Replica
             </button>}
-            <button className="wire" onClick={(e) => this.deleteMigration(e)}>Delete</button>
+            <button className="wire red" onClick={(e) => this.deleteMigration(e)}>Delete</button>
           </div>
           <ConfirmationDialog
             visible={this.state.confirmationDialog.visible}

src/components/ReplicaExecutions/ReplicaExecutions.js

@@ -163,7 +163,7 @@ class ReplicaExecutions extends Component {
   render() {
     if (this.props.replica) {
       if (this.props.replica.executions.length && this.state.executionRef) {
-        let executionBtn = <button className="wire" onClick={(e) => this.deleteExecution(e)}>Delete</button>
+        let executionBtn = <button className="wire red" onClick={(e) => this.deleteExecution(e)}>Delete</button>
         if (this.props.replica.executions && this.props.replica.executions[this.props.replica.executions.length - 1] &&
           this.props.replica.executions[this.props.replica.executions.length - 1].status == "RUNNING") {
           executionBtn =

src/components/variables.scss

@@ -12,7 +12,7 @@ $gray-lighter:          #D8DBE2;
 $blue:                  #0044CB;
 $blue-light:            #000EA9;
 $black:                 #202134;
-$red:                   #F70062;
+$red:                   #F91661;
 $green:                 #34C555;
 
 $color-replica:         #E62565;