VCST-2698: Add member icon to the header (#2891)

Ljutyj · artem-dudarev · web-flow · commit 52723ef02c42 · 2025-03-18T13:47:32.000+02:00
Co-authored-by: Artem Dudarev &lt;artem@virtoworks.com&gt;
diff --git a/src/VirtoCommerce.Platform.Web/Controllers/Api/ProfilesController.cs b/src/VirtoCommerce.Platform.Web/Controllers/Api/ProfilesController.cs
@@ -44,6 +44,7 @@ public async Task<ActionResult> GetCurrentUserProfileAsync()
             {
                 var userProfile = AbstractTypeFactory<UserProfile>.TryCreateInstance();
                 userProfile.Id = currentUser.Id;
+                userProfile.MemberId = currentUser.MemberId;
                 await _settingsManager.DeepLoadSettingsAsync(userProfile);
 
                 // Main menu settings at initial boot
diff --git a/src/VirtoCommerce.Platform.Web/Controllers/Api/SecurityController.cs b/src/VirtoCommerce.Platform.Web/Controllers/Api/SecurityController.cs
@@ -182,6 +182,7 @@ public async Task<ActionResult<UserDetail>> GetCurrentUser()
                 Permissions = user.Roles.SelectMany(x => x.Permissions).Select(x => x.Name).Distinct().ToArray(),
                 AuthenticationMethod = HttpContext.User.GetAuthenticationMethod(),
                 IsSsoAuthenticationMethod = HttpContext.User.IsExternalSignIn(),
+                MemberId = user.MemberId,
             };
 
             // Password never expired with SSO
diff --git a/src/VirtoCommerce.Platform.Web/Model/Profiles/UserProfile.cs b/src/VirtoCommerce.Platform.Web/Model/Profiles/UserProfile.cs
@@ -8,5 +8,6 @@ public class UserProfile : Entity, IHasSettings
     {
         public virtual ICollection<ObjectSettingEntry> Settings { get; set; } = new List<ObjectSettingEntry>();
         public virtual string TypeName => GetType().Name;
+        public virtual string MemberId { get; set; }
     }
 }
diff --git a/src/VirtoCommerce.Platform.Web/Model/Security/UserDetail.cs b/src/VirtoCommerce.Platform.Web/Model/Security/UserDetail.cs
@@ -12,5 +12,6 @@ public class UserDetail : Entity
         public int DaysTillPasswordExpiry { get; set; }
         public string AuthenticationMethod { get; set; }
         public bool IsSsoAuthenticationMethod { get; set; }
+        public string MemberId { get; set; }
     }
 }
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_header.sass b/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_header.sass
@@ -90,11 +90,16 @@
     padding: 0 15px
     width: 325px
     &__img
-      background-color: $whiteColor
       border-radius: 34px
       height: 34px
       margin-right: 15px
       width: 34px
+    img
+      border-radius: 34px
+      object-fit: contain
+      object-position: center
+      width: 34px
+      height: 34px
     &__name,
     &__role
       color: $whiteColor
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/navigation/blade/bladeContainer.tpl.html b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/navigation/blade/bladeContainer.tpl.html
@@ -42,13 +42,13 @@
             </div>
 
             <div class="blade-header">
-                <i ng-if="!blade.currentEntity.iconUrl" ng-class="blade.headIcon ? blade.headIcon : 'fa fa-folder'" class="blade-header__icon"></i>
+                <span ng-if="!blade.iconUrl && !blade.currentEntity.iconUrl" ng-class="blade.headIcon ? blade.headIcon : 'fa fa-folder'" class="blade-header__icon"></span>
 
-                <img ng-if="blade.currentEntity.iconUrl" ng-src="{{ blade.currentEntity.iconUrl }}" fallback-src="{{ blade.fallbackIconUrl }}" class="blade-header__img" />
+                <img ng-if="blade.iconUrl || blade.currentEntity.iconUrl" ng-src="{{ blade.iconUrl || blade.currentEntity.iconUrl }}" fallback-src="{{ blade.fallbackIconUrl }}" class="blade-header__img" />
 
                 <div class="blade-header__title">{{ blade.title | translate: blade.titleValues }}</div>
 
-                <span ng-if="pageSettings.totalItems" class="vc-badge">{{ pageSettings.totalItems | number: 0 }}</ span>
+                <span ng-if="pageSettings.totalItems" class="vc-badge">{{ pageSettings.totalItems | number: 0 }}</span>
             </div>
 
             <div class="blade-toolbar">
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/login/headerUserProfileWidget.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/login/headerUserProfileWidget.js
@@ -1,6 +1,7 @@
 angular.module('platformWebApp')
-    .directive('vaHeaderUserProfileWidget', ['$document', '$state', 'platformWebApp.authService', 'platformWebApp.dialogService', 'platformWebApp.login',
-        function ($document, $state, authService, dialogService, loginResources) {
+    .directive('vaHeaderUserProfileWidget', [
+        '$document', '$state', 'platformWebApp.authService', 'platformWebApp.dialogService', 'platformWebApp.login', 'platformWebApp.userProfileIconService',
+        function ($document, $state, authService, dialogService, loginResources, userProfileIconService) {
 
             return {
                 restrict: 'E',
@@ -28,6 +29,7 @@ angular.module('platformWebApp')
                     scope.userType = '';
                     scope.isAdministrator = false;
                     scope.isSsoAuthenticationMethod = false;
+                    scope.userIconUrl = userProfileIconService.getUserIconUrl();
 
                     function handleClickEvent(event) {
                         var dropdownElement = $document.find('[userProfileWidget]');
@@ -69,6 +71,12 @@ angular.module('platformWebApp')
                         scope.isSsoAuthenticationMethod = authService.isSsoAuthenticationMethod;
                     });
 
+                    scope.$watch(function () {
+                        return userProfileIconService.iconUrlChanged;
+                    }, function () {
+                        scope.userIconUrl = userProfileIconService.getUserIconUrl();
+                    });
+
                     $document.bind('click', handleClickEvent);
 
                     scope.$on('$destroy', function () {
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/login/headerUserProfileWidget.tpl.html b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/login/headerUserProfileWidget.tpl.html
@@ -3,11 +3,11 @@
     <span class="account-user" va-tooltip tooltip="{{'platform.menu.user-profile' | translate}}"
         tooltip-placement="bottom" tooltip-animation="false" tooltip-popup-delay="{{$parent.tooltipPopupDelay}}">
         <span class="account-user__img">
-            <img src="/images/userpic.svg" alt="" class="account-user__pic">
+            <img src="{{userIconUrl ? userIconUrl : '/images/userpic.svg'}}" alt="" class="account-user__pic">
         </span>
         <span class="account-user__info">
             <span class="account-user__name">{{fullName || userLogin}}</span>
-            <span class="account-user__role">{{isAdministrator ? 'Administrator' : userType }}</span>
+            <span class="account-user__role">{{isAdministrator ? 'Administrator' : userType}}</span>
         </span>
         <span class="account-user__carret"></span>
     </span>
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/services/auth.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/services/auth.js
@@ -1,12 +1,15 @@
 angular.module('platformWebApp')
-    .factory('platformWebApp.authService', ['$http', '$rootScope', '$state', '$interpolate', '$q', '$window', 'platformWebApp.authDataStorage', 'platformWebApp.externalSignInStorage', function ($http, $rootScope, $state, $interpolate, $q, $window, authDataStorage, externalSignInStorage) {
+    .factory('platformWebApp.authService', [
+        '$http', '$rootScope', '$interpolate', '$q', '$window', 'platformWebApp.authDataStorage', 'platformWebApp.externalSignInStorage',
+        function ($http, $rootScope, $interpolate, $q, $window, authDataStorage, externalSignInStorage) {
     var serviceBase = 'api/platform/security/';
     var authContext = {
         userId: null,
         userLogin: null,
         fullName: null,
         permissions: null,
-        isAuthenticated: false
+        isAuthenticated: false,
+        memberId: null
     };
 
     authContext.fillAuthData = function () {
@@ -116,21 +119,21 @@ angular.module('platformWebApp')
     };
 
     authContext.checkPermission = function (permission, securityScopes) {
-        //first check admin permission
+        // First check admin permission
         // var hasPermission = $.inArray('admin', authContext.permissions) > -1;
         var hasPermission = authContext.isAdministrator;
         if (!hasPermission && permission) {
             permission = permission.trim();
-            //first check global permissions
+            // First check global permissions
             hasPermission = $.inArray(permission, authContext.permissions) > -1;
             if (!hasPermission && securityScopes) {
                 if (typeof securityScopes === 'string' || angular.isArray(securityScopes)) {
                     securityScopes = angular.isArray(securityScopes) ? securityScopes : securityScopes.split(',');
-                    //Check permissions in scope
+                    // Check permissions in scope
                     hasPermission = _.some(securityScopes, function (x) {
                         var permissionWithScope = permission + ":" + x;
                         var retVal = $.inArray(permissionWithScope, authContext.permissions) > -1;
-                        //console.log(permissionWithScope + "=" + retVal);
+                        // console.log(permissionWithScope + "=" + retVal);
                         return retVal;
                     });
                 }
@@ -144,14 +147,17 @@ angular.module('platformWebApp')
         authContext.userLogin = user.userName;
         authContext.fullName = user.userLogin;
         authContext.isAuthenticated = user.userName != null;
+        authContext.memberId = user.memberId;
 
-        //Interpolate permissions to replace some template to real value
+        // Interpolate permissions to replace some template to real value
         if (authContext.permissions) {
             authContext.permissions = _.map(authContext.permissions, function (x) {
                 return $interpolate(x)(authContext);
             });
         }
+
         $rootScope.$broadcast('loginStatusChanged', authContext);
     }
+
     return authContext;
 }]);
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.js
@@ -1,10 +1,13 @@
 angular.module('platformWebApp')
-    .controller('platformWebApp.userProfile.userProfileController', ['$rootScope', '$scope', 'platformWebApp.bladeNavigationService', 'platformWebApp.settings', 'platformWebApp.settings.helper',
-        'platformWebApp.i18n', 'platformWebApp.userProfile', 'platformWebApp.common.languages', 'platformWebApp.common.locales', 'platformWebApp.common.timeZones', 'platformWebApp.userProfileApi',
-        function ($rootScope, $scope, bladeNavigationService, settings, settingsHelper, i18n, userProfile, languages, locales, timeZones, userProfileApi) {
+    .controller('platformWebApp.userProfile.userProfileController', [
+        '$rootScope', '$scope',
+        'platformWebApp.i18n', 'platformWebApp.userProfile', 'platformWebApp.common.languages', 'platformWebApp.common.locales', 'platformWebApp.common.timeZones',
+        'platformWebApp.userProfileApi', 'platformWebApp.userProfileIconService',
+        function ($rootScope, $scope, i18n, userProfile, languages, locales, timeZones, userProfileApi, userProfileIconService) {
             var blade = $scope.blade;
             blade.headIcon = 'fa fa-user';
             blade.title = 'platform.blades.user-profile.title';
+            blade.iconUrl = userProfileIconService.getUserIconUrl();
 
             blade.currentLanguage = i18n.getLanguage();
             blade.currentRegionalFormat = i18n.getRegionalFormat();
@@ -53,6 +56,7 @@ angular.module('platformWebApp')
                 blade.currentTimeZone = getNameByCode($scope.timeZones, blade.currentTimeZone);
                 blade.currentTimeAgoSettings = userProfile.timeAgoSettings;
                 blade.currentTimeSettings = userProfile.timeSettings;
+                blade.currentMemberId = userProfile.memberId;
             }
 
             function isLoading() {
@@ -113,4 +117,10 @@ angular.module('platformWebApp')
                     userProfile.save();
                 }
             }
+
+            $scope.$watch(function () {
+                return userProfileIconService.iconUrlChanged;
+            }, function () {
+                blade.iconUrl = userProfileIconService.getUserIconUrl();
+            });
         }]);
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.tpl.html b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/blades/userProfile.tpl.html
@@ -65,7 +65,10 @@
                         </div>
                     </div>
                 </div>
-            </form>
+                <div class="form-group" ng-if="userProfile.memberId">
+                    <va-widget-container group="userProfileDetail" blade="blade" gridster-opts="{columns: 3}"></va-widget-container>
+                </div>
+              </form>
         </div>
     </div>
 </div>
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/resources/userProfileApi.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/resources/userProfileApi.js
@@ -1,7 +1,7 @@
-﻿angular.module('platformWebApp')
+angular.module('platformWebApp')
 .factory('platformWebApp.userProfileApi', ['$resource', function ($resource) {
     return $resource('api/platform/profiles/currentuser', { }, {
         getLocales: { url: 'api/platform/localization/locales', isArray: true },
         getRegionalFormats: { url: 'api/platform/localization/regionalformats', isArray: true }
     }); 
-}]);
+}]);
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/services/userProfileIconService.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/services/userProfileIconService.js
@@ -0,0 +1,30 @@
+angular.module('platformWebApp')
+    .factory('platformWebApp.userProfileIconService', ['$rootScope', function ($rootScope) {
+
+    var currentMemberId = null;
+    var userIconUrl = null;
+
+    $rootScope.$on("loginStatusChanged", function (event, authContext) {
+        if (!authContext.memberId) {
+            setUserIconUrl(currentMemberId, null);
+        }
+        currentMemberId = authContext.memberId;
+    });
+
+    var service = {
+        iconUrlChanged: Date.now(),
+        setUserIconUrl: setUserIconUrl,
+        getUserIconUrl: function () {
+            return userIconUrl;
+        }
+    };
+
+    function setUserIconUrl (memberId, url) {
+        if (currentMemberId === memberId) {
+            userIconUrl = url;
+            service.iconUrlChanged = Date.now();
+        }
+    }
+
+    return service;
+}]);
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/userProfile.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/userProfile/userProfile.js
@@ -4,7 +4,7 @@ angular.module('platformWebApp')
         .state('workspace.userProfile', {
             url: '/userProfile',
             templateUrl: '$(Platform)/Scripts/common/templates/home.tpl.html',
-            controller: ['$scope', 'platformWebApp.bladeNavigationService', function ($scope, bladeNavigationService) {
+            controller: ['platformWebApp.bladeNavigationService', function (bladeNavigationService) {
                 var blade = {
                     id: 'userProfile',
                     controller: 'platformWebApp.userProfile.userProfileController',

Original file line number	Diff line number	Diff line change
`@@ -44,6 +44,7 @@ public async Task<ActionResult> GetCurrentUserProfileAsync()`
`44`	`44`	`{`
`45`	`45`	`var userProfile = AbstractTypeFactory<UserProfile>.TryCreateInstance();`
`46`	`46`	`userProfile.Id = currentUser.Id;`
	`47`	`+ userProfile.MemberId = currentUser.MemberId;`
`47`	`48`	`await _settingsManager.DeepLoadSettingsAsync(userProfile);`
`48`	`49`
`49`	`50`	`// Main menu settings at initial boot`
Original file line number	Diff line number	Diff line change
`@@ -8,5 +8,6 @@ public class UserProfile : Entity, IHasSettings`
`8`	`8`	`{`
`9`	`9`	`public virtual ICollection<ObjectSettingEntry> Settings { get; set; } = new List<ObjectSettingEntry>();`
`10`	`10`	`public virtual string TypeName => GetType().Name;`
	`11`	`+ public virtual string MemberId { get; set; }`
`11`	`12`	`}`
`12`	`13`	`}`
Original file line number	Diff line number	Diff line change
`@@ -12,5 +12,6 @@ public class UserDetail : Entity`
`12`	`12`	`public int DaysTillPasswordExpiry { get; set; }`
`13`	`13`	`public string AuthenticationMethod { get; set; }`
`14`	`14`	`public bool IsSsoAuthenticationMethod { get; set; }`
	`15`	`+ public string MemberId { get; set; }`
`15`	`16`	`}`
`16`	`17`	`}`