Add styled message if login info is incorrect

Fix login page reload after incorrect login info

src/components/ApiCaller/ApiCaller.js

@@ -70,6 +70,12 @@ class ApiCaller {
         reject(err)
       }
 
+      let reportError = (data) => {
+        if (data && data.error && data.error.message) {
+          NotificationActions.notify(data.error.message, "error")
+        }
+      }
+
       request.onload = () => {
         let result = {
           status: request.status,
@@ -82,13 +88,18 @@ class ApiCaller {
           resolve(result);
         } else {
           console.log(`Error Response: ${options.url}`, result.data);
-          if (result.data && result.data.error && result.data.error.message) {
-            NotificationActions.notify(result.data.error.message, "error")
-          }
-          if (result.status == 401) {
+
+          if (result.status === 401) {
             this.resetHeaders()
-            window.location.href = "/"
+            
+            if (window.location.pathname !== '/login') {
+              window.location.href = '/login'
+              reportError(result.data)
+            }
+          } else {
+            reportError(result.data)
           }
+
           reject({ status: request.status });
         }
       };

src/components/LoginPage/LoginPage.js

@@ -149,6 +149,15 @@ export class LoginPage extends Reflux.Component {
     let buttonContent = this.state.disableLogin ?
       <span>Please wait ... <div className="spinner"></div></span> : 'Login'
 
+    let loginFailedInfo = this.state.loginFailed ? (
+      <div className={s.loginFailedInfo}>
+        <div className={s.loginFailedIcon} />
+        <div className={s.loginFailedText}>
+          The username or password did not match. Please try again.  
+        </div>  
+      </div>  
+    ) : null
+    
     return (
       <div className={s.root}>
         <div className={s.container + " " + (loginButtons.length <= 2 ? s.oneColumn : "")}>
@@ -162,6 +171,7 @@ export class LoginPage extends Reflux.Component {
             </div>
           </div>
           <div className={s.loginContainer + ' ' + (!loginSeparator ? s.noSeparator : '')}>
+            {loginFailedInfo}  
             <div className={s.loginSocialButtons}>
               {loginButtonsTemplate}
             </div>

src/components/LoginPage/LoginPage.scss

@@ -54,6 +54,25 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   background-color: rgba(221, 224, 229, 0.5);
   box-sizing: border-box;
   border-radius: 8px;
+  .loginFailedInfo {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 4px;
+    margin-bottom: 16px;
+
+    .loginFailedIcon {
+      width: 26px;
+      height: 26px;
+      background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNnB4IiBoZWlnaHQ9IjI2cHgiIHZpZXdCb3g9IjAgMCAyNiAyNiIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5JY29uL0Vycm9yL1JlZDwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZGVmcz48L2RlZnM+ICAgIDxnIGlkPSJDb3Jpb2xpcyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iMDEtTG9naW4tQi1Db3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MDcuMDAwMDAwLCAtNDgzLjAwMDAwMCkiIHN0cm9rZT0iI0Y5MTY2MSI+ICAgICAgICAgICAgPGcgaWQ9Ikljb24vRXJyb3IvUmVkLTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3MDQuMDAwMDAwLCA0ODAuMDAwMDAwKSI+ICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNC4wMDAwMDAsIDQuMDAwMDAwKSI+ICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTIiIGN4PSIxMiIgY3k9IjEyIiByPSIxMiI+PC9jaXJjbGU+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMTQyODU3MSw2Ljg1NzE0Mjg2IEw2Ljg1NzE0Mjg2LDE3LjE0Mjg1NzEiIGlkPSJMaW5lIj48L3BhdGg+ICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMTQyODU3MSwxNy4xNDI4NTcxIEw2Ljg1NzE0Mjg2LDYuODU3MTQyODYiIGlkPSJMaW5lLUNvcHkiPjwvcGF0aD4gICAgICAgICAgICAgICAgPC9nPiAgICAgICAgICAgIDwvZz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
+    }
+
+    .loginFailedText {
+      color: white;
+      font-size: 12px;
+      margin-top: 4px;
+    }
+  }
   &.noSeparator {
     padding-top: 16px;
   }

src/stores/NotificationsStore/NotificationsStore.js

@@ -148,14 +148,6 @@ class NotificationsStore extends Reflux.Store
     this.setState({ notifications: notifications })
   }
 
-  onLoginFailed() {
-    let notifications = [{
-      message: "Login failed",
-      type: 'error'
-    }]
-    this.setState({ notifications: notifications })
-  }
-
   onExecuteReplicaCompleted() {
     let notifications = [{
       message: "Executing replica",

src/stores/UserStore/UserStore.js

@@ -49,7 +49,8 @@ class UserStore extends Reflux.Store
 
     this.state = {
       currentUser: this.user,
-      loadingState: false
+      loadingState: false,
+      loginFailed: false,
     }
 
     let token = cookie.load('token')
@@ -61,7 +62,7 @@ class UserStore extends Reflux.Store
 
   onLogin() {
     Api.setDefaultHeader('X-Auth-Token', null)
-    this.setState({ loadingState: true })
+    this.setState({ loadingState: true, loginFailed: false })
   }
 
   onLoginSuccess(response) {
@@ -88,7 +89,7 @@ class UserStore extends Reflux.Store
   }
 
   onLoginScopeSuccess(response) {
-    this.setState({ loadingState: false })
+    this.setState({ loadingState: false, loginFailed: false })
 
     let currentUser = this.state.currentUser
     currentUser.id = response.data.token.user.id
@@ -115,7 +116,7 @@ class UserStore extends Reflux.Store
   }
 
   onLoginFailed() {
-    this.setState({ loadingState: false })
+    this.setState({ loadingState: false, loginFailed: true })
   }
 
   onLogout() {