Add 403 $location redirect to http interceptor service

This is a temporary solution to redirect any 403 responses to
a dedicated 403 'Unauthorized' page. This could occur on inital
navigation to a page or while attempting an operation.

Once permission role mapping is defined, the code should be updated
to handle 403 responses in context of user attempted actions.

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: Ia207f2bcdd87fb20888fe6a1588d0ccd310e484c

2 files changed, 18 insertions, 2 deletions

diff --git a/app/common/services/apiInterceptor.js b/app/common/services/apiInterceptor.js
index ce47b67..8033f74 100644
--- a/app/common/services/apiInterceptor.js
+++ b/app/common/services/apiInterceptor.js
@@ -11,8 +11,8 @@ window.angular && (function(angular) {
   'use strict';
 
   angular.module('app.common.services').service('apiInterceptor', [
-    '$q', '$rootScope', 'dataService',
-    function($q, $rootScope, dataService) {
+    '$q', '$rootScope', 'dataService', '$location',
+    function($q, $rootScope, dataService, $location) {
       return {
         'request': function(config) {
           dataService.loading = true;
@@ -51,6 +51,13 @@ window.angular && (function(angular) {
               if (dataService.path != '/login') {
                 $rootScope.$emit('timedout-user', {});
               }
+            } else if (rejection.status == 403) {
+              // TODO: when permission role mapping ready, remove
+              // this global redirect and handle forbidden
+              // requests in context of user action
+              if (dataService.path != '/login') {
+                $location.url('/unauthorized');
+              }
             } else if (rejection.status == -1) {
               dataService.server_unreachable = true;
             }
diff --git a/app/common/styles/elements/alerts.scss b/app/common/styles/elements/alerts.scss
index 70fc247..947320c 100644
--- a/app/common/styles/elements/alerts.scss
+++ b/app/common/styles/elements/alerts.scss
@@ -13,3 +13,12 @@
   color: $primary-dark;
   text-align: left;
 }
+
+.message-container {
+  background-color: $background-02;
+  padding: 1em 1.5em;
+  display: inline-block;
+  >*:last-child {
+    margin-bottom: 0;
+  }
+}