VCST-1280: display message when user doesn't have permissions (#2830)

Co-authored-by: artem-dudarev <[email protected]>
VirtoCommerce · Sep 9, 2024 · 9b928ab · 9b928ab
1 parent 6842264
commit 9b928ab
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 1 deletion.
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/Localizations/en.VirtoCommerce.Platform.json b/src/VirtoCommerce.Platform.Web/wwwroot/Localizations/en.VirtoCommerce.Platform.json
@@ -566,6 +566,13 @@
           "login-or-email": "Please enter login or email"
         }
       },
+      "access-denied": {
+        "title": "Access denied",
+        "labels": {
+          "message": "You don't have access to this resource. Please contact your administrator.",
+          "button": "Login with another credentials"
+        }
+      },
       "resetpassword": {
         "title": "Password reset",
         "labels": {

diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/main.sass b/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/main.sass
@@ -32,6 +32,7 @@
 
 @import "modules/_login-form.sass"
 @import "modules/_forgot-password.sass"
+@import "modules/_contact-admin.sass"
 @import "modules/_auth.sass"
 @import "modules/_socials.sass"
 @import "modules/_blade-header.sass"
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_contact-admin.sass b/src/VirtoCommerce.Platform.Web/wwwroot/css/themes/main/sass/modules/_contact-admin.sass
@@ -0,0 +1,16 @@
+.contact-admin
+  display: flex
+  flex-direction: column
+  gap: 30px
+  padding-bottom: 26px
+  width: 100%
+  max-width: 375px
+
+  &__buttons
+    display: flex
+    justify-content: space-between
+
+  &__button
+    min-width: 90px
+    @media (min-width: 768px)
+      min-width: 140px
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/app.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/app.js
@@ -50,7 +50,7 @@ angular.module('platformWebApp', AppDependencies).controller('platformWebApp.app
                 modules.query().$promise.then(function (results) {
                     moduleHelper.modules = results;
                     moduleHelper.onLoaded();
-                    
+
                     var modulesWithErrors = _.filter(results, function (x) { return _.any(x.validationErrors) && x.isInstalled; });
                     if (_.any(modulesWithErrors)) {
                         $scope.platformError = {
@@ -437,6 +437,8 @@ angular.module('platformWebApp', AppDependencies).controller('platformWebApp.app
                                 }
                             }
                         });
+                    } else if (!authContext.isAdministrator && !authContext.permissions?.length) {
+                        $state.go('contact-admin');
                     } else if (!currentState.name || currentState.name === 'loginDialog') {
                         $state.go('workspace');
                     }

diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/dialogs/contact-admin.tpl.html b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/dialogs/contact-admin.tpl.html
@@ -0,0 +1,21 @@
+<div class="auth" ng-style="{ 'background-image': 'url('+uiCustomization.pattern.url+'), url('+(uiCustomization.background.url || 'images/login.webp') +')' }">
+  <div class="auth__container">
+    <div class="auth__head">
+      <img class="auth__logo" ng-src="{{ uiCustomization.loginScreenLogo_custom.url || uiCustomization.loginScreenLogo_default.url }}" fallback-src="{{ uiCustomization.loginScreenLogo_default.url }}" alt="Login screen logo image">
+      <h1 class="auth__title">{{ 'platform.blades.access-denied.title' | translate }}</h1>
+    </div>
+    <div class="auth__content">
+      <div class="contact-admin">
+        <div class="vc-input">
+          {{ 'platform.blades.access-denied.labels.message' | translate }}
+        </div>
+        <div class="contact-admin__buttons">
+          <button type="button" ng-click="logout()" class="vc-button contact-admin__button">{{ 'platform.blades.access-denied.labels.button' | translate }}</button>
+        </div>
+      </div>
+      <div class="vc-loader" ng-if="isLoading">
+        <div class="vc-loader__line"></div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/security.js b/src/VirtoCommerce.Platform.Web/wwwroot/js/app/security/security.js
@@ -198,6 +198,14 @@ angular.module('platformWebApp')
                     onClose: null
                 },
                 controller: 'platformWebApp.changePasswordDialog'
+            })
+
+            .state('contact-admin', {
+                url: '/contact-admin',
+                templateUrl: '$(Platform)/Scripts/app/security/dialogs/contact-admin.tpl.html',
+                controller: ['$scope', 'platformWebApp.authService', function ($scope, authService) {
+                    $scope.logout = authService.logout;
+                }]
             });
     }])