fix(mobile): secure assets not loading

polonel · Nov 9, 2018 · dca823e · dca823e
1 parent e7cd9b5
commit dca823e
Show file tree

Hide file tree

Showing 22 changed files with 288 additions and 36 deletions.
diff --git a/mobile/index.html b/mobile/index.html
@@ -17,6 +17,9 @@
 
     <script src="lib/ngstorage/ngStorage.min.js"></script>
 
+    <!-- cordova script (this will be a 404 during development) -->
+    <!-- <script src="cordova.js"></script> -->
+
     <!--ionic filter plugin-->
     <link rel="stylesheet" href="lib/ionic-filter-bar/dist/ionic.filter.bar.css">
     <script src="lib/ionic-filter-bar/dist/ionic.filter.bar.js" charset="utf-8"></script>
@@ -39,6 +42,7 @@
     <script src="lib/Autolinker.js/dist/Autolinker.min.js" charset="utf-8"></script>
     <script src="lib/moment/min/moment.min.js" charset="utf-8"></script>
     <script src="lib/angular-moment/angular-moment.min.js" charset="utf-8"></script>
+    <script src="lib/angular-img-http-src/index.js" charset="utf-8"></script>
 
     <!-- your app's js -->
     <script src="js/dist/td.app.min.js"></script>

diff --git a/mobile/js/dist/td.app.js b/mobile/js/dist/td.app.js
@@ -28,10 +28,17 @@ angular.module('trudesk', [
   'ngCropper',
   'monospaced.elastic',
   'angularMoment',
-  'jett.ionic.filter.bar'
+  'jett.ionic.filter.bar',
+  'angular.img'
   ])
 
-.run(function($ionicPlatform, $rootScope, $location, $localStorage, $state) {
+.run(function($ionicPlatform, $rootScope, $location, $localStorage, $state, $http) {
+  if ($localStorage.accessToken) {
+    $http.defaults.headers.common.accesstoken = $localStorage.accessToken;
+  } else {
+    $http.defaults.headers.common.accesstoken = '';
+  }
+
   $ionicPlatform.ready(function() {
     // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
     // for form inputs)
@@ -71,7 +78,7 @@ angular.module('trudesk', [
         }
     });
 
-                       setTimeout(function() {
+    setTimeout(function() {
       angular.element(document.querySelector('#loader')).addClass('hide');
     }, 900);
   });
@@ -291,7 +298,6 @@ angularPeity.directive('lineChart', function() {
     return peityDirective('line');
 });
 
-
 var fileOnChange = angular.module('fileOnChange', []);
 
 fileOnChange.directive('fileOnChange', function() {
@@ -353,7 +359,7 @@ hideTabBar.directive('hideTabBar', function($timeout) {
     restrict: 'A',
     compile: function(element, attr) {
       var tabBar = document.querySelector('.tab-nav');
-      console.log(tabBar);      
+
       return function($scope, $element, $attr) {
         var scroll = $element[0].querySelector('.scroll-content');
         $scope.$on('$ionicView.beforeEnter', function() {
@@ -725,6 +731,19 @@ angular.module('trudesk.services', [])
 })
 .factory('Users', function($q, $http, $localStorage) {
     return {
+      getImage: function(url) {
+        return new Promise(function(resolve, reject) {
+          $http.get(url, {
+            method: 'GET',
+            headers: {
+              'accesstoken': $localStorage.accessToken
+            }
+          }).then(function(response) {
+            var objectUrl = URL.createObjectURL(response.blob());
+            return resolve(objectUrl);
+          }).catch(function(err) { return reject(err); });
+        });
+      },
       get: function(username) {
         return $http.get('/api/v1/users/' + username, {
           headers: {
@@ -1132,6 +1151,8 @@ angular.module('trudesk.controllers.login', []).controller('LoginCtrl', function
             $localStorage.accessToken = response.data.accessToken;
             $localStorage.loggedInUser = response.data.user;
 
+            $http.defaults.headers.common.accesstoken = $localStorage.accessToken;
+
             //OneSignal
             if (window.plugins && window.plugins.OneSignal) {
               window.plugins.OneSignal.setSubscription(true);
@@ -1276,6 +1297,7 @@ angular.module('trudesk.controllers.accounts', [])
         ionic.trigger('$trudesk.clearLoginForm', {});    
         $localStorage.server = undefined;
         $localStorage.accessToken = undefined;
+        $http.defaults.headers.common.accesstoken = $localStorage.accessToken;        
         if (window.plugins && window.plugins.OneSignal)
           window.plugins.OneSignal.setSubscription(false);
         $ionicHistory.clearCache();
@@ -2450,6 +2472,14 @@ angular.module('trudesk.controllers.tickets', []).controller('TicketsCtrl', func
     });
   };
 
+  $scope.getUserImage = function(imageFile) {
+    var url = 'http://' + $localStorage.server + '/uploads/users/' + imageFile;
+
+    return Users.getImage(url).then(function(image) {
+      console.log(image);
+    });
+  }
+
   $scope.fetchTickets = function() {
       angular.element(document).find('ion-item').removeClass('item-remove-animate');
       if ($scope.page == undefined)

diff --git a/mobile/js/dist/td.app.min.js b/mobile/js/dist/td.app.min.js
diff --git a/mobile/lib/angular-img-http-src/.bower.json b/mobile/lib/angular-img-http-src/.bower.json
@@ -0,0 +1,40 @@
+{
+  "name": "angular-img-http-src",
+  "version": "1.0.1",
+  "authors": [
+    "Doug Moscrop <[email protected]>"
+  ],
+  "description": "Fetch images via $http and set src to a Blob URL",
+  "main": "index.js",
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "angular",
+    "img",
+    "http",
+    "token-based-auth"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "1.x"
+  },
+  "homepage": "https://github.com/dmoscrop/angular-img-http-src",
+  "_release": "1.0.1",
+  "_resolution": {
+    "type": "version",
+    "tag": "v1.0.1",
+    "commit": "3835b5b271134daeeab0d323f792d0a1560eab87"
+  },
+  "_source": "https://github.com/dmoscrop/angular-img-http-src.git",
+  "_target": "^1.0.1",
+  "_originalSource": "angular-img-http-src",
+  "_direct": true
+}
diff --git a/mobile/lib/angular-img-http-src/LICENSE b/mobile/lib/angular-img-http-src/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Doug Moscrop
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/mobile/lib/angular-img-http-src/README.md b/mobile/lib/angular-img-http-src/README.md
@@ -0,0 +1,8 @@
+# angular-img-http-src
+Status: Go horse.
+
+## Problem
+You used token based auth and you need to serve images from secured routes.
+
+## Solution
+Use `http-src` instead of `ng-src` and it will fetch images using the `$http` service - meaning Authorization headers added via interceptors will be present - then build a `Blob` and set the `src` to an [objectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL.createObjectURL).
diff --git a/mobile/lib/angular-img-http-src/bower.json b/mobile/lib/angular-img-http-src/bower.json
@@ -0,0 +1,29 @@
+{
+  "name": "angular-img-http-src",
+  "version": "1.0.1",
+  "authors": [
+    "Doug Moscrop <[email protected]>"
+  ],
+  "description": "Fetch images via $http and set src to a Blob URL",
+  "main": "index.js",
+  "moduleType": [
+    "globals"
+  ],
+  "keywords": [
+    "angular",
+    "img",
+    "http",
+    "token-based-auth"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "angular": "1.x"
+  }
+}
diff --git a/mobile/lib/angular-img-http-src/index.js b/mobile/lib/angular-img-http-src/index.js
@@ -0,0 +1,42 @@
+(function () {
+	'use strict';
+	/*global angular, Blob, URL */
+
+	angular.module('angular.img', [
+	]).directive('httpSrc', ['$http', function ($http) {
+		return {
+			link: function ($scope, elem, attrs) {
+				function revokeObjectURL() {
+					if ($scope.objectURL) {
+						URL.revokeObjectURL($scope.objectURL);
+					}
+				}
+
+				$scope.$watch('objectURL', function (objectURL) {
+					elem.attr('src', objectURL);
+				});
+
+				$scope.$on('$destroy', function () {
+					revokeObjectURL();
+				});
+
+				attrs.$observe('httpSrc', function (url) {
+					revokeObjectURL();
+
+					if(url && url.indexOf('data:') === 0) {
+						$scope.objectURL = url;
+					} else if(url) {
+						$http.get(url, { responseType: 'arraybuffer' })
+							.then(function (response) {
+								var blob = new Blob(
+									[ response.data ], 
+									{ type: response.headers('Content-Type') }
+								);
+								$scope.objectURL = URL.createObjectURL(blob);
+							});
+					}
+				});
+			}
+		};
+	}]);
+}());
diff --git a/mobile/lib/angular-img-http-src/package.json b/mobile/lib/angular-img-http-src/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "angular-img-http-src",
+  "version": "1.0.1",
+  "description": "Use $http service to fetch img src as objectURL",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dougmoscrop/angular-img-http-src.git"
+  },
+  "keywords": [
+    "Angular"
+  ],
+  "author": "Doug Moscrop <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/dougmoscrop/angular-img-http-src/issues"
+  },
+  "homepage": "https://github.com/dougmoscrop/angular-img-http-src#readme",
+  "peerDependencies": {
+    "angular": "1.x"
+  }
+}
diff --git a/mobile/lib/ionic/js/ionic-angular.js b/mobile/lib/ionic/js/ionic-angular.js
@@ -2660,9 +2660,18 @@ function($rootScope, $ionicBody, $compile, $timeout, $ionicPlatform, $ionicTempl
       }
 
       return $timeout(function() {
-        if (!modalStack.length) {
+        var otherSibling = false;
+          for (var i = 0; i < modalStack.length; ++i) {
+            if (modalStack[i].viewType === self.viewType) {
+              // there are other modal (or popover, depending on viewType)
+              otherSibling = true;
+              break;
+            }
+        }
+        if (!otherSibling) {
           $ionicBody.removeClass(self.viewType + '-open');
         }
+
         self.el.classList.add('hide');
       }, self.hideDelay || 320);
     },

diff --git a/mobile/lib/ionic/js/ionic.bundle.js b/mobile/lib/ionic/js/ionic.bundle.js
@@ -55843,7 +55843,15 @@ function($rootScope, $ionicBody, $compile, $timeout, $ionicPlatform, $ionicTempl
       }
 
       return $timeout(function() {
-        if (!modalStack.length) {
+        var otherSibling = false;
+         for (var i = 0; i < modalStack.length; ++i) {
+          if (modalStack[i].viewType === self.viewType) {
+            // there are other modal (or popover, depending on viewType)
+            otherSibling = true;
+            break;
+          }
+        }
+         if (!otherSibling) {
           $ionicBody.removeClass(self.viewType + '-open');
         }
         self.el.classList.add('hide');

diff --git a/mobile/templates/conversation.html b/mobile/templates/conversation.html
@@ -11,8 +11,8 @@
 
   <ion-content style="bottom: 90px !important;" delegate-handle="userMessageScroll">
     <div class="message-profile">
-        <img ng-src="/uploads/users/{{conversation.partner.image}}" ng-if="conversation.partner.image != undefined">
-        <img ng-src="/uploads/users/defaultProfile.jpg" ng-if="conversation.partner.image == undefined" />
+        <img http-src="/uploads/users/{{conversation.partner.image}}" ng-if="conversation.partner.image != undefined">
+        <img http-src="/uploads/users/defaultProfile.jpg" ng-if="conversation.partner.image == undefined" />
         <div class="info" style="min-height: 65px;">
             <h4>{{conversation.partner.fullname}}</h4>
             <span ng-if="conversation.partner.title != undefined">
@@ -37,8 +37,8 @@ <h4>{{conversation.partner.fullname}}</h4>
                 <div class="message-date">{{message.createdAt | amCalendar}}</div>
                 <div class="message-body" ng-bind-html="message.body | nl2br" autolinker></div>
                 <div class="message-sender">
-                    <img ng-src="/uploads/users/{{message.owner.image}}" ng-if="message.owner.image != undefined">
-                    <img ng-src="/uploads/users/defaultProfile.jpg" ng-if="message.owner.image == undefined" />
+                    <img http-src="/uploads/users/{{message.owner.image}}" ng-if="message.owner.image != undefined">
+                    <img http-src="/uploads/users/defaultProfile.jpg" ng-if="message.owner.image == undefined" />
                 </div>
             </div>
             <div class="message message-right" ng-if="message.owner._id == loggedInUser._id">
@@ -50,8 +50,8 @@ <h4>{{conversation.partner.fullname}}</h4>
 
     <div class="user-is-typing-wrapper" ng-show="partnerTyping">
         <div class="chat-user-profile">
-            <img ng-src="/uploads/users/{{conversation.partner.image}}" alt="{{conversation.partner.fullname}}" ng-if="conversation.partner.image != undefined" />
-            <img ng-src="/uploads/users/defaultProfile.jpg" alt="{{conversation.partner.fullname}}" ng-if="conversation.partner.image == undefined" />
+            <img http-src="/uploads/users/{{conversation.partner.image}}" alt="{{conversation.partner.fullname}}" ng-if="conversation.partner.image != undefined" />
+            <img http-src="/uploads/users/defaultProfile.jpg" alt="{{conversation.partner.fullname}}" ng-if="conversation.partner.image == undefined" />
         </div>
         <div class="user-is-typing">
             <div class="dot"></div>

diff --git a/mobile/templates/modals/modal-addComment.html b/mobile/templates/modals/modal-addComment.html
@@ -7,7 +7,8 @@ <h1 class="title">Add Comment</h1>
   </ion-header-bar>
   <ion-content>
     <div class="ticket-details" style="padding: 0 15px;">
-      <img ng-src="/uploads/users/{{loggedInUser.image}}" class="profile-pic">
+      <img http-src="/uploads/users/defaultProfile.jpg" class="profile-pic" ng-if="!loggedInUser.image">
+      <img http-src="/uploads/users/{{loggedInUser.image}}" class="profile-pic" ng-if="loggedInUser.image">
       <div class="margin-left-65">
         <span class="date" style="right: 15px;">{{'' | currentdate}}</span>
         <h4>Ticket #{{ticket.uid}}</h4>

diff --git a/mobile/templates/modals/modal-addNote.html b/mobile/templates/modals/modal-addNote.html
@@ -7,7 +7,8 @@ <h1 class="title">Add Note</h1>
   </ion-header-bar>
   <ion-content>
     <div class="ticket-details" style="padding: 0 15px;">
-      <img ng-src="/uploads/users/{{loggedInUser.image}}" class="profile-pic">
+      <img http-src="/uploads/users/defaultProfile.jpg" class="profile-pic" ng-if="!loggedInUser.image">
+      <img http-src="/uploads/users/{{loggedInUser.image}}" class="profile-pic" ng-if="loggedInUser.image">
       <div class="margin-left-65">
         <span class="date" style="right: 15px;">{{'' | currentdate}}</span>
         <h4>Ticket #{{ticket.uid}}</h4>

diff --git a/mobile/templates/modals/modal-messages-newconversation.html b/mobile/templates/modals/modal-messages-newconversation.html
@@ -16,12 +16,12 @@ <h1 class="title" style="font-weight: 300; margin-top: 3px;">Start Conversation<
         style="min-height:50px;"
         ng-click="startConversation(user._id);">
         <div ng-if="user.image !== undefined" class="avatar avatar-small avatar-with-status">
-          <img ng-src="/uploads/users/{{user.image}}">
+          <img http-src="/uploads/users/{{user.image}}">
           <span class="online-status online-status-online" ng-if="isUserOnline(onlineUsers, user)"></span>
           <span class="online-status online-status-offline" ng-if="!isUserOnline(onlineUsers, user)"></span>
         </div>
         <div ng-if="user.image == undefined" class="avatar avatar-small avatar-with-status">
-          <img ng-src="/uploads/users/defaultProfile.jpg">
+          <img http-src="/uploads/users/defaultProfile.jpg">
           <span class="online-status online-status-online" ng-if="isUserOnline(onlineUsers, user)"></span>
           <span class="online-status online-status-offline" ng-if="!isUserOnline(onlineUsers, user)"></span>
         </div>