80113: Create Group Page guard

src/app/access-control/access-control-routing.module.ts

@@ -5,6 +5,7 @@ import { GroupFormComponent } from './group-registry/group-form/group-form.compo
 import { GroupsRegistryComponent } from './group-registry/groups-registry.component';
 import { GROUP_EDIT_PATH } from './access-control-routing-paths';
 import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { GroupPageGuard } from './group-registry/group-page.guard';
 
 @NgModule({
   imports: [
@@ -39,7 +40,8 @@ import { I18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.reso
         resolve: {
           breadcrumb: I18nBreadcrumbResolver
         },
-        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' }
+        data: { title: 'admin.access-control.groups.title.singleGroup', breadcrumbKey: 'admin.access-control.groups.singleGroup' },
+        canActivate: [GroupPageGuard]
       }
     ])
   ]

src/app/access-control/group-registry/group-page.guard.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GroupPageGuard } from './group-page.guard';
+
+describe('GroupPageGuard', () => {
+  let guard: GroupPageGuard;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    guard = TestBed.inject(GroupPageGuard);
+  });
+
+  it('should be created', () => {
+    expect(guard).toBeTruthy();
+  });
+});

src/app/access-control/group-registry/group-page.guard.ts

@@ -0,0 +1,35 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
+import { Observable, of as observableOf } from 'rxjs';
+import { FeatureID } from '../../core/data/feature-authorization/feature-id';
+import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
+import { AuthService } from '../../core/auth/auth.service';
+import { SomeFeatureAuthorizationGuard } from '../../core/data/feature-authorization/feature-authorization-guard/some-feature-authorization.guard';
+import { HALEndpointService } from '../../core/shared/hal-endpoint.service';
+import { map } from 'rxjs/operators';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GroupPageGuard extends SomeFeatureAuthorizationGuard {
+
+  protected groupsEndpoint = 'groups';
+
+  constructor(protected halEndpointService: HALEndpointService,
+              protected authorizationService: AuthorizationDataService,
+              protected router: Router,
+              protected authService: AuthService) {
+    super(authorizationService, router, authService);
+  }
+
+  getFeatureIDs(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<FeatureID[]> {
+    return observableOf([FeatureID.CanManageGroup]);
+  }
+
+  getObjectUrl(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<string> {
+    return this.halEndpointService.getEndpoint(this.groupsEndpoint).pipe(
+      map(groupsUrl => `${groupsUrl}/${route?.params?.groupId}`)
+    );
+  }
+
+}

src/app/access-control/group-registry/groups-registry.component.html

@@ -59,11 +59,23 @@
               <td>{{groupDto.epersons?.totalElements + groupDto.subgroups?.totalElements}}</td>
               <td>
                 <div class="btn-group edit-field">
-                  <button [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
+                  <ng-container [ngSwitch]="groupDto.ableToEdit">
-                          class="btn btn-outline-primary btn-sm"
+                    <button *ngSwitchCase="true"
-                          title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}">
+                      [routerLink]="groupService.getGroupEditPageRouterLink(groupDto.group)"
-                    <i class="fas fa-edit fa-fw"></i>
+                      class="btn btn-outline-primary btn-sm"
-                  </button>
+                      title="{{messagePrefix + 'table.edit.buttons.edit' | translate: {name: groupDto.group.name} }}"
+                    >
+                      <i class="fas fa-edit fa-fw"></i>
+                    </button>
+                    <button *ngSwitchCase="false"
+                      [disabled]="true"
+                      class="btn btn-outline-primary btn-sm"
+                      placement="left"
+                      [ngbTooltip]="'admin.access-control.epeople.table.edit.buttons.edit-disabled' | translate"
+                    >
+                      <i class="fas fa-edit fa-fw"></i>
+                    </button>
+                  </ng-container>
                   <button *ngIf="!groupDto.group?.permanent && groupDto.ableToDelete"
                           (click)="deleteGroup(groupDto)" class="btn btn-outline-danger btn-sm"
                           title="{{messagePrefix + 'table.edit.buttons.remove' | translate: {name: groupDto.group.name} }}">

src/assets/i18n/en.json5

@@ -238,6 +238,8 @@
 
   "admin.access-control.epeople.table.edit.buttons.edit": "Edit \"{{name}}\"",
 
+  "admin.access-control.epeople.table.edit.buttons.edit-disabled": "You are not authorized to edit this group",
+
   "admin.access-control.epeople.table.edit.buttons.remove": "Delete \"{{name}}\"",
 
   "admin.access-control.epeople.no-items": "No EPeople to show.",