PT-946: Redesign Login on behalf UX (VirtoCommerce#2263)

src/VirtoCommerce.Platform.Web/wwwroot/Localizations/en.VirtoCommerce.Common.json

@@ -27,7 +27,7 @@
             "no": "No",
             "new-folder": "New folder",
             "new-license": "Renew license",
-            "ok": "Ok",
+            "ok": "OK",
             "paste": "Paste",
             "pick-selected": "Pick selected",
             "preview": "Preview",

src/VirtoCommerce.Platform.Web/wwwroot/Localizations/en.VirtoCommerce.Platform.json

@@ -644,16 +644,6 @@
                     "Quarters": "Quarters",
                     "Years": "Years"
                 }
-            },
-            "loginOnBehalf-list": {
-                "title": "Login as {{name}}",
-                "labels": {
-                    "pick-url-to-login": "Pick a Login Url to login",
-                    "no-login-urls": "No Login Urls yet"
-                },
-                "validations": {
-                    "secure-url-missing": "Secure URL is missing. Click to enter Login secure URL manually."
-                }
             }
         },
         "templates": {
@@ -810,14 +800,9 @@
             "error-details": {
                 "title": "The error details"
             },
-            "enter-login-url": {
+            "impersonate-no-url": {
                 "title": "Login on behalf",
-                "labels": {
-                    "enter-login-url": "Please enter login secure URL"
-                },
-                "placeholders": {
-                    "secure-url": "https://vcshop.com"
-                }
+                "message": "Store URL was not added in the store setting. Please contact administrator."
             },
             "asset-upload-error": {
                 "title": "Error in upload",

src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_window-modals.sass

@@ -108,6 +108,11 @@
 .modal-content .modal-footer
   font-size: 14px
   padding: 20px
+.modal-content .modal-body .warning
+  background: transparent
+  float: left
+  margin: 5px 10px 0 6px
+  width: 10%
 .modal-content .modal-body .form-input
   margin: 15px 0 0
 .modal-content .modal-footer

src/VirtoCommerce.Platform.Web/wwwroot/js/app/app.js

@@ -1,7 +1,7 @@
-angular.module('platformWebApp', AppDependencies).controller('platformWebApp.appCtrl', ['$rootScope', '$scope', '$window', 'platformWebApp.mainMenuService',
-    'platformWebApp.i18n', '$timeout', 'platformWebApp.modules', '$state', 'platformWebApp.bladeNavigationService', 'platformWebApp.userProfile', 'platformWebApp.settings',
-    function ($rootScope, $scope, $window, mainMenuService,
-        i18n, $timeout, modules, $state, bladeNavigationService, userProfile, settings) {
+angular.module('platformWebApp', AppDependencies).controller('platformWebApp.appCtrl', ['$rootScope', '$scope', 'platformWebApp.mainMenuService',
+    'platformWebApp.i18n', 'platformWebApp.modules', '$state', 'platformWebApp.bladeNavigationService', 'platformWebApp.userProfile', 'platformWebApp.settings',
+    function ($rootScope, $scope, mainMenuService,
+        i18n, modules, $state, bladeNavigationService, userProfile, settings) {
 
         $scope.closeError = function () {
             $scope.platformError = undefined;
@@ -279,8 +279,8 @@ angular.module('platformWebApp', AppDependencies).controller('platformWebApp.app
             // Comment the following line while debugging or execute this in browser console: angular.reloadWithDebugInfo();
             $compileProvider.debugInfoEnabled(false);
         }])
-    .run(['$location', '$rootScope', '$state', '$stateParams', 'platformWebApp.authService', 'platformWebApp.mainMenuService', 'platformWebApp.pushNotificationService', '$animate', '$templateCache', 'gridsterConfig', 'taOptions', '$timeout', '$templateRequest', '$compile', 'platformWebApp.toolbarService', 'platformWebApp.bladeNavigationService',
-        function ($location, $rootScope, $state, $stateParams, authService, mainMenuService, pushNotificationService, $animate, $templateCache, gridsterConfig, taOptions, $timeout, $templateRequest, $compile, toolbarService, bladeNavigationService) {
+    .run(['$location', '$rootScope', '$state', '$stateParams', 'platformWebApp.authService', 'platformWebApp.mainMenuService', 'platformWebApp.dialogService', '$window', '$animate', '$templateCache', 'gridsterConfig', 'taOptions', '$timeout', '$templateRequest', '$compile', 'platformWebApp.toolbarService', 'platformWebApp.loginOfBehalfUrlResolver',
+        function ($location, $rootScope, $state, $stateParams, authService, mainMenuService, dialogService, $window, $animate, $templateCache, gridsterConfig, taOptions, $timeout, $templateRequest, $compile, toolbarService, loginOfBehalfUrlResolver) {
 
             //Disable animation
             $animate.enabled(false);
@@ -465,17 +465,37 @@ angular.module('platformWebApp', AppDependencies).controller('platformWebApp.app
                 name: "platform.commands.login-on-behalf",
                 icon: 'fa fa-key',
                 executeMethod: function (blade) {
-                    var newBlade = {
-                        id: 'memberDetailChild',
-                        currentEntityId: blade.currentEntity.id,
-                        title: 'platform.blades.loginOnBehalf-list.title',
-                        titleValues: { name: blade.currentEntity.userName },
-                        controller: 'platformWebApp.securityLoginOnBehalfListController',
-                        template: '$(Platform)/Scripts/app/security/blades/loginOnBehalf-list.tpl.html'
+                    var showError = () => {
+                        var dialog = {
+                            id: "noUrlDialog",
+                            showWarning: true,
+                            title: 'platform.dialogs.impersonate-no-url.title',
+                            message: 'platform.dialogs.impersonate-no-url.message'
+                        };
+                        dialogService.showNotificationDialog(dialog);
                     };
-                    bladeNavigationService.showBlade(newBlade, blade);
+
+                    var promise = loginOfBehalfUrlResolver.resolve(blade.currentEntity);
+                    if (promise) {
+                        blade.isLoading = true;
+                        promise.then((url) => {
+                            blade.isLoading = false;
+                            if (url) {
+                                if (url.endsWith("/")) {
+                                    url = url.slice(0, -1);
+                                }
+
+                                url = url + '/account/impersonate/' + blade.currentEntity.id;
+                                $window.open(url, '_blank');
+                            } else {
+                                showError();
+                            }
+                        });
+                    } else {
+                        showError();
+                    }
                 },
-                canExecuteMethod: function () { return true; },
+                canExecuteMethod: (blade) => blade.currentEntity,
                 permission: 'platform:security:loginOnBehalf',
                 index: 4
             };

src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/services/loginOfBehalfUrlResolver.js

@@ -0,0 +1,17 @@
+angular.module('platformWebApp')
+    .factory('platformWebApp.loginOfBehalfUrlResolver', [() => {
+        var _resolver;
+
+        var service = {
+            // register the method to resolve the URL
+            register: (resolver) => {
+                _resolver = resolver;
+            },
+            resolve: (user) => {
+                if (angular.isFunction(_resolver)) {
+                    return _resolver(user);
+                }
+            }
+        };
+        return service;
+    }]);

src/VirtoCommerce.Platform.Web/wwwroot/js/common/dialogs/notifyDialog.tpl.html

@@ -1,9 +1,12 @@
-<div class="modal-header">
+<div class="modal-header">
     <h3 class="modal-title">{{title | translate: titleValues}}</h3>
 </div>
 <div class="modal-body">
+    <span ng-if="showWarning" class="warning">
+        <img src="/images/dialogs/exclamation.svg" alt="">
+    </span>
     {{message | translate: messageValues}}
 </div>
 <div class="modal-footer">
     <button class="btn btn-primary" ng-click="yes()">{{ 'platform.commands.ok' | translate }}</button>
-</div>
+</div>