#69 Add support to user avatars

TheHive-Project · Jan 2, 2017 · 6e1fed8 · 6e1fed8
1 parent 7fecd54
commit 6e1fed8
Show file tree

Hide file tree

Showing 29 changed files with 199 additions and 55 deletions.
diff --git a/ui/app/images/no-avatar.png b/ui/app/images/no-avatar.png
diff --git a/ui/app/index.html b/ui/app/index.html
@@ -87,6 +87,8 @@
     <script src="bower_components/bootstrap-markdown/js/bootstrap-markdown.js"></script>
     <script src="bower_components/angular-markdown-editor-ghiscoding/src/angular-markdown-editor.js"></script>
     <script src="bower_components/angular-page-loader/dist/angular-page-loader.js"></script>
+    <script src="bower_components/angular-images-resizer/angular-images-resizer.js"></script>
+    <script src="bower_components/angular-base64-upload/src/angular-base64-upload.js"></script>
     <!-- endbower -->
 
     <script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script>    
@@ -166,6 +168,7 @@
     <script src="scripts/directives/updatableTags.js"></script>
     <script src="scripts/directives/updatableText.js"></script>
     <script src="scripts/directives/updatableUser.js"></script>
+    <script src="scripts/directives/user.js"></script>
     <script src="scripts/directives/utils/autofocus.js"></script>
     <script src="scripts/filters/ellipsis.js"></script>
     <script src="scripts/filters/fang.js"></script>

diff --git a/ui/app/scripts/app.js b/ui/app/scripts/app.js
@@ -7,7 +7,7 @@ angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router
         'theHiveControllers', 'theHiveServices', 'theHiveFilters',
         'theHiveDirectives', 'yaru22.jsonHuman', 'timer', 'angularMoment', 'ngCsv', 'ngTagsInput', 'btford.markdown',
         'ngResource', 'ui.codemirror', 'ui-notification', 'angularjs-dropdown-multiselect', 'base64', 'angular-clipboard',
-        'LocalStorageModule', 'angular-markdown-editor', 'hc.marked', 'hljs', 'ui.ace', 'angular-page-loader'
+        'LocalStorageModule', 'angular-markdown-editor', 'hc.marked', 'hljs', 'ui.ace', 'angular-page-loader', 'naif.base64', 'images-resizer'
     ])
     .config(function($resourceProvider) {
         'use strict';
@@ -125,7 +125,7 @@ angular.module('thehive', ['ngAnimate', 'ngMessages', 'ui.bootstrap', 'ui.router
                 controller: 'AdminObservablesCtrl',
                 title: 'Observable administration'
             })
-            
+
 
         .state('app.case', {
                 abstract: true,

diff --git a/ui/app/scripts/controllers/SettingsCtrl.js b/ui/app/scripts/controllers/SettingsCtrl.js
@@ -1,12 +1,13 @@
 (function() {
     'use strict';
     angular.module('theHiveControllers').controller('SettingsCtrl',
-        function($scope, $state, UserSrv, AlertSrv, appConfig) {
+        function($scope, $state, UserSrv, AlertSrv, resizeService, readLocalPicService, UserInfoSrv, appConfig) {
             $scope.appConfig = appConfig;
 
             $scope.basicData = {
                 username: $scope.currentUser.id,
-                name: $scope.currentUser.name
+                name: $scope.currentUser.name,
+                avatar: $scope.currentUser.avatar
             };
 
             $scope.passData = {
@@ -15,18 +16,24 @@
                 password: '',
                 passwordConfirm: ''
             };
-            $scope.canChangePass = appConfig.config.capabilities.indexOf('changePassword') !== -1;            
+            $scope.canChangePass = appConfig.config.capabilities.indexOf('changePassword') !== -1;
+
 
             $scope.updateBasicInfo = function(form) {
-                if(!form.$valid) {
+                if (!form.$valid) {
                     return;
                 }
 
                 UserSrv.update({
                     userId: $scope.currentUser.id
-                }, {name: $scope.basicData.name}, function(data) {
+                }, {
+                    name: $scope.basicData.name,
+                    avatar: $scope.basicData.avatar
+                }, function(data) {
                     $scope.currentUser.name = data.name;
 
+                    UserInfoSrv.update(data._id, data);
+
                     AlertSrv.log('Your basic information have been successfully updated', 'success');
 
                     $state.reload();
@@ -36,7 +43,7 @@
             };
 
             $scope.updatePassword = function(form) {
-                if(!form.$valid) {
+                if (!form.$valid) {
                     return;
                 }
 
@@ -49,7 +56,7 @@
                 if (updatedFields !== {}) {
                     UserSrv.changePass({
                         userId: $scope.currentUser.id
-                    }, updatedFields, function(/*data*/) {
+                    }, updatedFields, function( /*data*/ ) {
                         AlertSrv.log('Your password has been successfully updated', 'success');
                         $state.reload();
                     }, function(response) {
@@ -62,7 +69,7 @@
 
             $scope.clearPassword = function(form, changePassword) {
 
-                if(!changePassword) {
+                if (!changePassword) {
                     $scope.passData.currentPassword = '';
                     $scope.passData.password = '';
                     $scope.passData.passwordConfirm = '';
@@ -77,6 +84,21 @@
             $scope.cancel = function() {
                 $state.go('app.main');
             };
+
+            $scope.$watch('avatar', function(value) {
+               if(!value){
+                   return;
+               }
+
+               resizeService.resizeImage('data:' + value.filetype + ';base64,' + value.base64, {
+                   height: 100,
+                   width: 100,
+                   outputFormat: 'image/jpeg'
+               })
+               .then(function(image) {
+                   $scope.basicData.avatar = image.replace('data:image/jpeg;base64,', '');
+               });
+           });
         }
     );
 })();
diff --git a/ui/app/scripts/controllers/case/CaseTasksItemCtrl.js b/ui/app/scripts/controllers/case/CaseTasksItemCtrl.js
@@ -72,19 +72,19 @@
                 $scope.task.status = 'Completed';
                 $scope.updateField('status', 'Completed');
 
-                CaseTabsSrv.removeTab($scope.tabName)
+                CaseTabsSrv.removeTab($scope.tabName);
                 $state.go('app.case.tasks', {
                     caseId: $scope.caseId
                 });
             };
 
             $scope.showLogEditor = function () {
-                $scope.adding = true;                
+                $scope.adding = true;
                 $rootScope.$broadcast('beforeNewLogShow');
             };
 
             $scope.cancelAddLog = function() {
-                // Switch to editor mode instead of preview mode 
+                // Switch to editor mode instead of preview mode
                 $rootScope.markdownEditorObjects.newLog.hidePreview();
                 $scope.adding = false;
             };
@@ -102,7 +102,7 @@
                     delete $scope.newLog.attachment;
                     $scope.state.attachmentCollapsed = true;
                     $scope.newLog.message = '';
-                    
+
                     $rootScope.markdownEditorObjects.newLog.hidePreview();
                     $scope.adding = false;
                     // removeAllFiles is added by dropzone directive as control
@@ -116,7 +116,7 @@
 
                 return true;
             };
-            
+
             // Add tabs
             CaseTabsSrv.addTab($scope.tabName, {
                 name: $scope.tabName,

diff --git a/ui/app/scripts/directives/user.js b/ui/app/scripts/directives/user.js
@@ -0,0 +1,22 @@
+(function() {
+    'use strict';
+    angular.module('theHiveDirectives')
+        .directive('user', function(UserInfoSrv) {
+            return {
+                scope: {
+                    user: '=userId',
+                    iconOnly: '@',
+                    iconSize: '@'
+                },
+                templateUrl: 'views/directives/user.html',
+                link: function(scope) {                    
+                    scope.userInfo = UserInfoSrv;
+                    scope.userData = {};
+
+                    scope.$watch('user', function(value) {
+                        scope.userData = scope.userInfo.get(value);
+                    });
+                }
+            };
+        });
+})();
diff --git a/ui/app/scripts/services/StreamSrv.js b/ui/app/scripts/services/StreamSrv.js
@@ -86,7 +86,7 @@
                     // Check if the session will expire soon
                     if (status === 220) {
                         AfkSrv.prompt().then(function() {
-                            UserSrv.getUserInfo(AuthenticationSrv.currentUser.id)
+                            UserSrv.getUserInfo.get(AuthenticationSrv.currentUser.id)
                                 .then(function() {
 
                                 }, function(response) {

diff --git a/ui/app/scripts/services/UserInfoSrv.js b/ui/app/scripts/services/UserInfoSrv.js
@@ -1,14 +1,30 @@
 (function() {
     'use strict';
-    angular.module('theHiveServices').factory('UserInfoSrv', function(UserSrv) {
-        var userCache = {};
-        return function(login) {
-            if (angular.isDefined(userCache[login])) {
-                return userCache[login];
-            } else {
-                userCache[login] = UserSrv.getInfo(login);                
-                return userCache[login];
-            }
-        };
-    });
+    angular.module('theHiveServices')
+        .service('UserInfoSrv', function(UserSrv) {
+
+            this.userCache = {};
+
+            this.get = function(userId) {
+                if (angular.isDefined(this.userCache[userId])) {
+                    return this.userCache[userId];
+                } else {
+                    this.userCache[userId] = UserSrv.getInfo(userId);
+                    return this.userCache[userId];
+                }
+            };
+
+            this.clear = function() {
+                this.userCache = {};
+            };
+
+            this.remove = function(userId) {
+                delete this.userCache[userId];
+            };
+
+            this.update = function(userId, userData) {
+                this.userCache[userId] = userData;
+            };
+
+        });
 })();
diff --git a/ui/app/styles/main.css b/ui/app/styles/main.css
@@ -27,6 +27,10 @@ body {
 .main-navbar .nav>li>a {
     padding: 15px 8px;
 }
+.main-navbar .nav>li>a.profile {
+    padding: 10px 8px;
+}
+
 .main-navbar .input-group-addon {
     padding-left: 6px;
     padding-right: 6px;
@@ -397,3 +401,25 @@ td.vmiddle {
         transform: rotate(360deg);
     }
 }
+
+.avatar .avatar-icon {
+    border-radius: 50px;
+}
+
+.avatar .avatar-name {
+    margin-left: 5px;
+}
+
+.avatar.avatar-xs .avatar-icon {
+    width: 30px;
+    height: 30px;
+}
+
+.avatar.avatar-m .avatar-icon {
+    width: 40px;
+    height: 40px;
+}
+
+table.valigned td {
+    vertical-align: middle !important;
+}
diff --git a/ui/app/views/app.html b/ui/app/views/app.html
@@ -143,8 +143,9 @@
                         </ul>
                     </li>
                     <li class="dropdown" dropdown>
-                        <a class="dropdown-toggle" dropdown-toggle href>
-                            <i class="glyphicon glyphicon-user"></i>&nbsp;{{currentUser.name}}
+                        <a class="profile dropdown-toggle" dropdown-toggle href>
+                            <!-- <i class="glyphicon glyphicon-user"></i>&nbsp;{{currentUser.name}} -->
+                            <user user-id="currentUser.id"></user>
                             <b class="caret"></b>
                         </a>
                         <ul class="dropdown-menu">
@@ -172,7 +173,7 @@
             </div>
         </div>
     </nav>
-    <div class="container-fluid container-main">        
+    <div class="container-fluid container-main">
         <div ng-if="currentUser.id" ui-view></div>
     </div>
 </div>
diff --git a/ui/app/views/directives/flow/operation.html b/ui/app/views/directives/flow/operation.html
@@ -11,7 +11,7 @@
             </span>
         </span>
     </span>
-    <span class="operation-user">{{getUserInfo(base.user) | getField: 'name'}}</span>
+    <span class="operation-user">{{getUserInfo.get(base.user) | getField: 'name'}}</span>
 
     <span class="operation-timer pull-right">
         <i class="text-default glyphicon glyphicon-time"></i>

diff --git a/ui/app/views/directives/flow/task-log.html b/ui/app/views/directives/flow/task-log.html
@@ -1,7 +1,7 @@
 <div class="flow-task-log log-entry">
     <div class="flow-item-title wrap">
         <i class="glyphicon glyphicon-comment"></i>
-        <span ng-bind="getUserInfo(base.user) | getField: 'name'"></span>
+        <span ng-bind="getUserInfo.get(base.user) | getField: 'name'"></span>
     </div>
     <div class="flow-item-updates wrap">
         <span ng-bind="base.details.message| limitTo: 250"></span>

diff --git a/ui/app/views/directives/flow/task.html b/ui/app/views/directives/flow/task.html
@@ -12,7 +12,7 @@
         <span ng-repeat="(k, v) in base.details" ng-switch="k">
             <div ng-switch-when="owner">
                 {{k}}:
-                <em>{{getUserInfo(v) | getField: 'name'}}</em>
+                <em>{{getUserInfo.get(v) | getField: 'name'}}</em>
             </div>
             <div ng-switch-when="startDate">
                 {{k}}:

diff --git a/ui/app/views/directives/log-entry.html b/ui/app/views/directives/log-entry.html
@@ -5,7 +5,7 @@
         <div class="col-md-12">
             <h5>
                 <i class="text-primary glyphicon glyphicon-comment" style="font-size: 16px;"></i>
-                <span ng-bind="getUserInfo(log.user) | getField: 'name'"></span>
+                <span ng-bind="getUserInfo.get(log.user) | getField: 'name'"></span>
                 &nbsp;
                 <small ng-bind="log.startDate | showDate"></small>
                 <span class="pull-right">

diff --git a/ui/app/views/directives/search/case.html b/ui/app/views/directives/search/case.html
@@ -5,7 +5,7 @@
 </div>
 <div>
     <i class="glyphicon glyphicon-user"></i>
-    <span>{{getUserInfo(value.user) | getField: 'name'}}</span>
+    <span>{{getUserInfo.get(value.user) | getField: 'name'}}</span>
 
     <i class="glyphicon glyphicon-calendar ml-xxs"></i>
     <span ng-bind="value.startDate | showDate"></span>

diff --git a/ui/app/views/directives/search/observable-job.html b/ui/app/views/directives/search/observable-job.html
@@ -5,7 +5,7 @@
 </div>
 <div>
     <i class="glyphicon glyphicon-user"></i>
-    <span>{{getUserInfo(value.user) | getField: 'name'}}</span>
+    <span>{{getUserInfo.get(value.user) | getField: 'name'}}</span>
 
     <i class="glyphicon glyphicon-calendar ml-xxs"></i>
     Started on <span ng-bind="value.startDate | showDate"> </span>

diff --git a/ui/app/views/directives/search/observable.html b/ui/app/views/directives/search/observable.html
@@ -9,7 +9,7 @@
 </div>
 <div>
     <i class="glyphicon glyphicon-user"></i>
-    <span>{{getUserInfo(value.user) | getField: 'name'}}</span>
+    <span>{{getUserInfo.get(value.user) | getField: 'name'}}</span>
 
     <i class="glyphicon glyphicon-calendar ml-xxs"></i>
     <span ng-bind="value.startDate | showDate"></span>

diff --git a/ui/app/views/directives/search/task.html b/ui/app/views/directives/search/task.html
@@ -5,7 +5,7 @@
 </div>
 <div>
     <i class="glyphicon glyphicon-user"></i>
-    <span>{{getUserInfo(value.user) | getField: 'name'}}</span>
+    <span>{{getUserInfo.get(value.user) | getField: 'name'}}</span>
 
     <i class="glyphicon glyphicon-calendar ml-xxs"></i>
     <span ng-bind="value.startDate | showDate"></span>

diff --git a/ui/app/views/directives/updatable-user.html b/ui/app/views/directives/updatable-user.html
@@ -1,5 +1,5 @@
 <span ng-hide="updatable.updating" ng-init="active = false" ng-mouseenter="active = true" ng-mouseleave="active = false">
-    <span class="updatable-value" ng-bind="getUserInfo(value) | getField:'name'" style="vertical-align:top"></span>
+    <span class="updatable-value" ng-bind="getUserInfo.get(value) | getField:'name'" style="vertical-align:top"></span>
     <small ng-show="active">
         <a style="cursor: pointer;" target="_self" tooltip-popup-delay='500' tooltip="edit">
             <i class="glyphicon glyphicon-pencil" ng-click="edit()"></i>
@@ -11,7 +11,7 @@
 <span ng-init="updatable.dropdownOpen=false" ng-show="updatable.updating">
     <span class="btn-group" dropdown is-open="updatable.dropdownOpen">
         <button class="btn btn-default btn-sm dropdown-toggle" dropdown-toggle type="button">
-            {{getUserInfo(value) | getField:'name'}}
+            {{getUserInfo.get(value) | getField:'name'}}
             <span class="caret"></span>
         </button>
         <ul class="dropdown-menu" role="menu">

diff --git a/ui/app/views/directives/user.html b/ui/app/views/directives/user.html
@@ -0,0 +1,5 @@
+<span class="avatar avatar-{{iconSize || 'xs'}}">
+    <img ng-if="userData.avatar" class="avatar-icon" alt="{{userData.name}}" tooltip="{{userData.name}}" data-ng-src="{{'data:image/jpeg;base64,' + userData.avatar}}"/>
+    <img ng-if="!userData.avatar" class="avatar-icon" alt="{{userData.name}}" tooltip="{{userData.name}}" src="images/no-avatar.png"/>
+    <span ng-if="!iconOnly" class="avatar-name">{{userData.name}}</span>
+</span>