From 9690e01fa542ba9c325d8e9a804f8f86c55b887a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Sat, 21 Jun 2025 11:15:43 +0200
Subject: [PATCH 01/14] Improve UX with offcanvas

---
 .../rbac-widget/rbac-widget.component.ts      | 35 ++++++++++++++++---
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
index ba95cf8c..becf850d 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
@@ -1,6 +1,9 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { NgbOffcanvas } from '@ng-bootstrap/ng-bootstrap';
+import { NgbOffcanvas, NgbOffcanvasRef } from '@ng-bootstrap/ng-bootstrap';
 import { RbacOffcanvasComponent } from '../rbac-offcanvas/rbac-offcanvas.component';
+import { NavigationStart, Router } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { filter } from 'rxjs/operators';
 
 interface IRbacWidgetTarget {
   name: string;
@@ -25,19 +28,41 @@ export class RbacWidgetComponent {
   @Output()
   public errorOccured = new EventEmitter<unknown>();
 
-  constructor(private readonly offcanvasService: NgbOffcanvas) {}
+  private offcanvas?: NgbOffcanvasRef;
+
+  constructor(
+    private readonly offcanvasService: NgbOffcanvas,
+    private readonly router: Router
+  ) {
+    this.router.events
+      .pipe(
+        takeUntilDestroyed(),
+        filter((event) => event instanceof NavigationStart)
+      )
+      .subscribe({
+        next: () => {
+          this.offcanvas?.close();
+        }
+      });
+  }
 
   protected buttonClicked(): void {
-    const ref = this.offcanvasService.open(RbacOffcanvasComponent, { position: 'end' });
-    const component = ref.componentInstance as RbacOffcanvasComponent;
+    if (this.offcanvas) {
+      return;
+    }
+
+    this.offcanvas = this.offcanvasService.open(RbacOffcanvasComponent, { position: 'end' });
+    const component = this.offcanvas.componentInstance as RbacOffcanvasComponent;
 
     component.error$.subscribe({
       next: (value) => {
-        ref.close();
+        this.offcanvas?.close();
         this.errorOccured.emit(value);
       }
     });
 
     component.setTarget(this.target);
+
+    this.offcanvas.hidden.subscribe({ next: () => (this.offcanvas = undefined) });
   }
 }

From 1105948d4dd7b57155ac694f295f33d01f29b3f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Sat, 21 Jun 2025 11:18:33 +0200
Subject: [PATCH 02/14] Add TODO + fix UX in admin page, too

---
 .../rbac-widget/rbac-widget.component.ts         |  6 ------
 .../administration-page.component.ts             | 16 +++++++++++++++-
 src/Turnierplan.App/Helpers/DeletionHelper.cs    |  1 +
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
index becf850d..e86989b2 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-widget/rbac-widget.component.ts
@@ -47,10 +47,6 @@ export class RbacWidgetComponent {
   }
 
   protected buttonClicked(): void {
-    if (this.offcanvas) {
-      return;
-    }
-
     this.offcanvas = this.offcanvasService.open(RbacOffcanvasComponent, { position: 'end' });
     const component = this.offcanvas.componentInstance as RbacOffcanvasComponent;
 
@@ -62,7 +58,5 @@ export class RbacWidgetComponent {
     });
 
     component.setTarget(this.target);
-
-    this.offcanvas.hidden.subscribe({ next: () => (this.offcanvas = undefined) });
   }
 }
diff --git a/src/Turnierplan.App/Client/src/app/portal/pages/administration-page/administration-page.component.ts b/src/Turnierplan.App/Client/src/app/portal/pages/administration-page/administration-page.component.ts
index ecbda077..de138961 100644
--- a/src/Turnierplan.App/Client/src/app/portal/pages/administration-page/administration-page.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/pages/administration-page/administration-page.component.ts
@@ -9,6 +9,8 @@ import { NotificationService } from '../../../core/services/notification.service
 import { PageFrameNavigationTab } from '../../components/page-frame/page-frame.component';
 import { LoadingState } from '../../directives/loading-state/loading-state.directive';
 import { TitleService } from '../../services/title.service';
+import { NavigationStart, Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 @Component({
   standalone: false,
@@ -35,9 +37,21 @@ export class AdministrationPageComponent implements OnInit {
     private readonly titleService: TitleService,
     private readonly authenticationService: AuthenticationService,
     private readonly offcanvasService: NgbOffcanvas,
-    private readonly notificationService: NotificationService
+    private readonly notificationService: NotificationService,
+    private readonly router: Router
   ) {
     this.authenticationService.authentication$.pipe(takeUntilDestroyed()).subscribe((userInfo) => (this.currentUserId = userInfo.id));
+
+    this.router.events
+      .pipe(
+        takeUntilDestroyed(),
+        filter((event) => event instanceof NavigationStart)
+      )
+      .subscribe({
+        next: () => {
+          this.currentOffcanvas?.close();
+        }
+      });
   }
 
   public ngOnInit(): void {
diff --git a/src/Turnierplan.App/Helpers/DeletionHelper.cs b/src/Turnierplan.App/Helpers/DeletionHelper.cs
index 66bef579..d1c1b1b4 100644
--- a/src/Turnierplan.App/Helpers/DeletionHelper.cs
+++ b/src/Turnierplan.App/Helpers/DeletionHelper.cs
@@ -45,6 +45,7 @@ public DeletionHelper(
     public async Task<bool> DeleteUserAsync(User user, CancellationToken cancellationToken)
     {
         // TODO: Decide how to handle this (there is no longer a 1-n relation between user and organisation)
+        // When this is decided: Update the information text on the "delete user" screen in the frontend
 
         // foreach (var organization in user.Organizations.ToList()) // ToList() to avoid invalid operation exception
         // {

From 3849f68aceacc5a9216711a30a71ab8167fd4be6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Wed, 25 Jun 2025 17:07:49 +0200
Subject: [PATCH 03/14] Add tooltip for scope type icon

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts                 | 4 ++++
 .../components/rbac-offcanvas/rbac-offcanvas.component.html   | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index 57ef4e1a..def69f79 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -945,15 +945,19 @@ export const de = {
       InheritedTooltip: 'Diese Rollenzuweisung existiert implizit aufgrund der Zugehörigkeit zu einer anderen Resource',
       ScopeType: {
         Folder: {
+          Tooltip: 'Ordner',
           NotInherited: 'Zuweisung liegt auf diesem Ordner'
         },
         Organization: {
+          Tooltip: 'Organisation',
           NotInherited: 'Zuweisung liegt auf dieser Organisation'
         },
         Tournament: {
+          Tooltip: 'Turnier',
           NotInherited: 'Zuweisung liegt auf diesem Turnier'
         },
         Venue: {
+          Tooltip: 'Spielstätte',
           NotInherited: 'Zuweisung liegt auf dieser Spielstätte'
         }
       },
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
index d28ed5a3..fad52fec 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
@@ -7,7 +7,7 @@
     </div>
   } @else {
     <div class="mb-4 d-flex flex-row align-items-center">
-      <i class="bi bi-{{ targetIcon }} me-2"></i>
+      <i class="bi bi-{{ targetIcon }} me-2" [ngbTooltip]="scopeTranslationKey + '.Tooltip' | translate"></i>
       <span class="fw-bold">
         {{ target.name }}
       </span>

From 03cb5c9dfde33d324c99013270ad027dcf25e04a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Wed, 25 Jun 2025 17:14:29 +0200
Subject: [PATCH 04/14] Hide table when creating new role assignment

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts |   5 +-
 .../rbac-offcanvas.component.html             | 140 ++++++++++--------
 .../rbac-offcanvas.component.ts               |  10 +-
 3 files changed, 93 insertions(+), 62 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index def69f79..e1f9eae4 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -921,7 +921,10 @@ export const de = {
     RbacManagement: {
       Title: 'Zugriff verwalten',
       ButtonLabel: 'Verwalten',
-      OffcanvasTitle: 'Rollenzuweisungen bearbeiten',
+      OffcanvasTitle: {
+        Default: 'Rollenzuweisungen bearbeiten',
+        Creating: 'Rollenzuweisungen hinzufügen'
+      },
       Loading: 'Rollenzuweisungen werden geladen',
       NewRoleAssignment: 'Neue Rollenzuweisung',
       RoleName: {
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
index fad52fec..5dfc7c4c 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
@@ -1,5 +1,9 @@
 <div class="p-3">
-  <div class="fs-4 fw-bold mb-3" translate="Portal.RbacManagement.OffcanvasTitle"></div>
+  <div
+    class="fs-4 fw-bold mb-3"
+    [translate]="
+      isCreatingRoleAssignment ? 'Portal.RbacManagement.OffcanvasTitle.Creating' : 'Portal.RbacManagement.OffcanvasTitle.Default'
+    "></div>
   @if (isLoadingRoleAssignments) {
     <div class="d-flex flex-row gap-2">
       <tp-small-spinner />
@@ -12,75 +16,91 @@
         {{ target.name }}
       </span>
       <span class="flex-grow-1"></span>
-      <tp-action-button [title]="'Portal.RbacManagement.NewRoleAssignment'" [type]="'outline-success'" [icon]="'plus-circle'" />
+      @if (isCreatingRoleAssignment) {
+        <tp-action-button
+          [title]="'Portal.General.Cancel'"
+          [type]="'outline-dark'"
+          [icon]="'x-circle'"
+          (click)="switchCreatingRoleAssignment(false)" />
+      } @else {
+        <tp-action-button
+          [title]="'Portal.RbacManagement.NewRoleAssignment'"
+          [type]="'outline-success'"
+          [icon]="'plus-circle'"
+          (click)="switchCreatingRoleAssignment(true)" />
+      }
     </div>
 
-    <table class="mb-2 table table-bordered">
-      <tbody>
-        @for (group of roleAssignments | keyvalue; track group.key) {
-          <tr class="table-active">
-            <th>
-              <span [translate]="'Portal.RbacManagement.RoleName.' + group.key"></span>
-              <i class="ms-2 bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.RoleDescription.' + group.key | translate"></i>
-            </th>
-          </tr>
+    @if (isCreatingRoleAssignment) {
+      <!-- TODO: Implement -->
+    } @else {
+      <table class="mb-2 table table-bordered">
+        <tbody>
+          @for (group of roleAssignments | keyvalue; track group.key) {
+            <tr class="table-active">
+              <th>
+                <span [translate]="'Portal.RbacManagement.RoleName.' + group.key"></span>
+                <i class="ms-2 bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.RoleDescription.' + group.key | translate"></i>
+              </th>
+            </tr>
 
-          @for (assignment of group.value; track assignment.id) {
-            <tr>
-              <td>
-                <div class="d-flex flex-column gap-2">
-                  <div class="d-flex gap-2">
-                    @switch (assignment.principal.kind) {
-                      @case (PrincipalKind.ApiKey) {
-                        <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
+            @for (assignment of group.value; track assignment.id) {
+              <tr>
+                <td>
+                  <div class="d-flex flex-column gap-2">
+                    <div class="d-flex gap-2">
+                      @switch (assignment.principal.kind) {
+                        @case (PrincipalKind.ApiKey) {
+                          <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
+                        }
+                        @case (PrincipalKind.User) {
+                          <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
+                        }
                       }
-                      @case (PrincipalKind.User) {
-                        <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
+                      <!-- TODO: Resolve ApiKey/User name -->
+                      <span>{{ assignment.principal.principalId }}</span>
+                      @if (canDeleteAssignment(assignment)) {
+                        <span class="flex-grow-1"></span>
+                        <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRoleAssignment(assignment.id)" />
                       }
-                    }
-                    <!-- TODO: Resolve ApiKey/User name -->
-                    <span>{{ assignment.principal.principalId }}</span>
-                    @if (canDeleteAssignment(assignment)) {
-                      <span class="flex-grow-1"></span>
-                      <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRoleAssignment(assignment.id)" />
-                    }
-                  </div>
-                  @if (assignment.isInherited) {
-                    <div class="text-primary d-flex gap-2">
-                      <i class="bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.InheritedTooltip' | translate"></i>
-                      <span translate="Portal.RbacManagement.Inherited"></span>
-                      <a
-                        class="text-decoration-underline tp-cursor-pointer"
-                        (click)="navigateToScope(assignment.scopeId, assignment.scopeName)"
-                        >{{ assignment.scopeName }}</a
-                      >
                     </div>
-                  } @else {
-                    <div class="text-secondary d-flex gap-2">
-                      <i class="bi bi-info-circle"></i>
-                      <span [translate]="scopeTranslationKey + '.NotInherited'"></span>
+                    @if (assignment.isInherited) {
+                      <div class="text-primary d-flex gap-2">
+                        <i class="bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.InheritedTooltip' | translate"></i>
+                        <span translate="Portal.RbacManagement.Inherited"></span>
+                        <a
+                          class="text-decoration-underline tp-cursor-pointer"
+                          (click)="navigateToScope(assignment.scopeId, assignment.scopeName)"
+                          >{{ assignment.scopeName }}</a
+                        >
+                      </div>
+                    } @else {
+                      <div class="text-secondary d-flex gap-2">
+                        <i class="bi bi-info-circle"></i>
+                        <span [translate]="scopeTranslationKey + '.NotInherited'"></span>
+                      </div>
+                    }
+                    <div style="font-size: 0.7em" class="text-secondary d-flex gap-1">
+                      <span translate="Portal.RbacManagement.Id"></span>
+                      <span>{{ assignment.id }}</span>
+                      <span>&middot;</span>
+                      <span translate="Portal.RbacManagement.CreatedAt"></span>
+                      <span>{{ assignment.createdAt | translateDate }}</span>
                     </div>
-                  }
-                  <div style="font-size: 0.7em" class="text-secondary d-flex gap-1">
-                    <span translate="Portal.RbacManagement.Id"></span>
-                    <span>{{ assignment.id }}</span>
-                    <span>&middot;</span>
-                    <span translate="Portal.RbacManagement.CreatedAt"></span>
-                    <span>{{ assignment.createdAt | translateDate }}</span>
                   </div>
-                </div>
-              </td>
-            </tr>
+                </td>
+              </tr>
+            }
           }
-        }
-      </tbody>
-    </table>
+        </tbody>
+      </table>
 
-    @if (roleAssignmentCount > 1) {
-      <div class="small">
-        <span class="ms-1 me-1" translate="Portal.RbacManagement.TotalCount"></span>
-        <span>{{ roleAssignmentCount }}</span>
-      </div>
+      @if (roleAssignmentCount > 1) {
+        <div class="small">
+          <span class="ms-1 me-1" translate="Portal.RbacManagement.TotalCount"></span>
+          <span>{{ roleAssignmentCount }}</span>
+        </div>
+      }
     }
   }
 </div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index 52f12d92..5deb8e35 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -20,8 +20,8 @@ export class RbacOffcanvasComponent implements OnDestroy {
   protected isLoadingRoleAssignments = false;
   protected roleAssignments: { [key: string]: RoleAssignmentDto[] } = {};
   protected roleAssignmentCount: number = 0;
-
   protected scopeTranslationKey: string = '';
+  protected isCreatingRoleAssignment = false;
 
   private readonly errorSubject$ = new Subject<unknown>();
   private targetIsOrganization: boolean = false;
@@ -137,4 +137,12 @@ export class RbacOffcanvasComponent implements OnDestroy {
       name: scopeName
     });
   }
+
+  protected switchCreatingRoleAssignment(target: boolean): void {
+    this.isCreatingRoleAssignment = target;
+
+    if (target) {
+      // FIXME: Reset form
+    }
+  }
 }

From c2f55978bb70d38c67faa818c2734be735ab09c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Wed, 25 Jun 2025 17:23:16 +0200
Subject: [PATCH 05/14] Revert "Hide table when creating new role assignment"

This reverts commit 03cb5c9dfde33d324c99013270ad027dcf25e04a.
---
 src/Turnierplan.App/Client/src/app/i18n/de.ts |   5 +-
 .../rbac-offcanvas.component.html             | 140 ++++++++----------
 .../rbac-offcanvas.component.ts               |  10 +-
 3 files changed, 62 insertions(+), 93 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index e1f9eae4..def69f79 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -921,10 +921,7 @@ export const de = {
     RbacManagement: {
       Title: 'Zugriff verwalten',
       ButtonLabel: 'Verwalten',
-      OffcanvasTitle: {
-        Default: 'Rollenzuweisungen bearbeiten',
-        Creating: 'Rollenzuweisungen hinzufügen'
-      },
+      OffcanvasTitle: 'Rollenzuweisungen bearbeiten',
       Loading: 'Rollenzuweisungen werden geladen',
       NewRoleAssignment: 'Neue Rollenzuweisung',
       RoleName: {
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
index 5dfc7c4c..fad52fec 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
@@ -1,9 +1,5 @@
 <div class="p-3">
-  <div
-    class="fs-4 fw-bold mb-3"
-    [translate]="
-      isCreatingRoleAssignment ? 'Portal.RbacManagement.OffcanvasTitle.Creating' : 'Portal.RbacManagement.OffcanvasTitle.Default'
-    "></div>
+  <div class="fs-4 fw-bold mb-3" translate="Portal.RbacManagement.OffcanvasTitle"></div>
   @if (isLoadingRoleAssignments) {
     <div class="d-flex flex-row gap-2">
       <tp-small-spinner />
@@ -16,91 +12,75 @@
         {{ target.name }}
       </span>
       <span class="flex-grow-1"></span>
-      @if (isCreatingRoleAssignment) {
-        <tp-action-button
-          [title]="'Portal.General.Cancel'"
-          [type]="'outline-dark'"
-          [icon]="'x-circle'"
-          (click)="switchCreatingRoleAssignment(false)" />
-      } @else {
-        <tp-action-button
-          [title]="'Portal.RbacManagement.NewRoleAssignment'"
-          [type]="'outline-success'"
-          [icon]="'plus-circle'"
-          (click)="switchCreatingRoleAssignment(true)" />
-      }
+      <tp-action-button [title]="'Portal.RbacManagement.NewRoleAssignment'" [type]="'outline-success'" [icon]="'plus-circle'" />
     </div>
 
-    @if (isCreatingRoleAssignment) {
-      <!-- TODO: Implement -->
-    } @else {
-      <table class="mb-2 table table-bordered">
-        <tbody>
-          @for (group of roleAssignments | keyvalue; track group.key) {
-            <tr class="table-active">
-              <th>
-                <span [translate]="'Portal.RbacManagement.RoleName.' + group.key"></span>
-                <i class="ms-2 bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.RoleDescription.' + group.key | translate"></i>
-              </th>
-            </tr>
+    <table class="mb-2 table table-bordered">
+      <tbody>
+        @for (group of roleAssignments | keyvalue; track group.key) {
+          <tr class="table-active">
+            <th>
+              <span [translate]="'Portal.RbacManagement.RoleName.' + group.key"></span>
+              <i class="ms-2 bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.RoleDescription.' + group.key | translate"></i>
+            </th>
+          </tr>
 
-            @for (assignment of group.value; track assignment.id) {
-              <tr>
-                <td>
-                  <div class="d-flex flex-column gap-2">
-                    <div class="d-flex gap-2">
-                      @switch (assignment.principal.kind) {
-                        @case (PrincipalKind.ApiKey) {
-                          <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
-                        }
-                        @case (PrincipalKind.User) {
-                          <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
-                        }
+          @for (assignment of group.value; track assignment.id) {
+            <tr>
+              <td>
+                <div class="d-flex flex-column gap-2">
+                  <div class="d-flex gap-2">
+                    @switch (assignment.principal.kind) {
+                      @case (PrincipalKind.ApiKey) {
+                        <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
                       }
-                      <!-- TODO: Resolve ApiKey/User name -->
-                      <span>{{ assignment.principal.principalId }}</span>
-                      @if (canDeleteAssignment(assignment)) {
-                        <span class="flex-grow-1"></span>
-                        <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRoleAssignment(assignment.id)" />
+                      @case (PrincipalKind.User) {
+                        <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
                       }
-                    </div>
-                    @if (assignment.isInherited) {
-                      <div class="text-primary d-flex gap-2">
-                        <i class="bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.InheritedTooltip' | translate"></i>
-                        <span translate="Portal.RbacManagement.Inherited"></span>
-                        <a
-                          class="text-decoration-underline tp-cursor-pointer"
-                          (click)="navigateToScope(assignment.scopeId, assignment.scopeName)"
-                          >{{ assignment.scopeName }}</a
-                        >
-                      </div>
-                    } @else {
-                      <div class="text-secondary d-flex gap-2">
-                        <i class="bi bi-info-circle"></i>
-                        <span [translate]="scopeTranslationKey + '.NotInherited'"></span>
-                      </div>
                     }
-                    <div style="font-size: 0.7em" class="text-secondary d-flex gap-1">
-                      <span translate="Portal.RbacManagement.Id"></span>
-                      <span>{{ assignment.id }}</span>
-                      <span>&middot;</span>
-                      <span translate="Portal.RbacManagement.CreatedAt"></span>
-                      <span>{{ assignment.createdAt | translateDate }}</span>
+                    <!-- TODO: Resolve ApiKey/User name -->
+                    <span>{{ assignment.principal.principalId }}</span>
+                    @if (canDeleteAssignment(assignment)) {
+                      <span class="flex-grow-1"></span>
+                      <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRoleAssignment(assignment.id)" />
+                    }
+                  </div>
+                  @if (assignment.isInherited) {
+                    <div class="text-primary d-flex gap-2">
+                      <i class="bi bi-info-circle" [ngbTooltip]="'Portal.RbacManagement.InheritedTooltip' | translate"></i>
+                      <span translate="Portal.RbacManagement.Inherited"></span>
+                      <a
+                        class="text-decoration-underline tp-cursor-pointer"
+                        (click)="navigateToScope(assignment.scopeId, assignment.scopeName)"
+                        >{{ assignment.scopeName }}</a
+                      >
+                    </div>
+                  } @else {
+                    <div class="text-secondary d-flex gap-2">
+                      <i class="bi bi-info-circle"></i>
+                      <span [translate]="scopeTranslationKey + '.NotInherited'"></span>
                     </div>
+                  }
+                  <div style="font-size: 0.7em" class="text-secondary d-flex gap-1">
+                    <span translate="Portal.RbacManagement.Id"></span>
+                    <span>{{ assignment.id }}</span>
+                    <span>&middot;</span>
+                    <span translate="Portal.RbacManagement.CreatedAt"></span>
+                    <span>{{ assignment.createdAt | translateDate }}</span>
                   </div>
-                </td>
-              </tr>
-            }
+                </div>
+              </td>
+            </tr>
           }
-        </tbody>
-      </table>
+        }
+      </tbody>
+    </table>
 
-      @if (roleAssignmentCount > 1) {
-        <div class="small">
-          <span class="ms-1 me-1" translate="Portal.RbacManagement.TotalCount"></span>
-          <span>{{ roleAssignmentCount }}</span>
-        </div>
-      }
+    @if (roleAssignmentCount > 1) {
+      <div class="small">
+        <span class="ms-1 me-1" translate="Portal.RbacManagement.TotalCount"></span>
+        <span>{{ roleAssignmentCount }}</span>
+      </div>
     }
   }
 </div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index 5deb8e35..52f12d92 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -20,8 +20,8 @@ export class RbacOffcanvasComponent implements OnDestroy {
   protected isLoadingRoleAssignments = false;
   protected roleAssignments: { [key: string]: RoleAssignmentDto[] } = {};
   protected roleAssignmentCount: number = 0;
+
   protected scopeTranslationKey: string = '';
-  protected isCreatingRoleAssignment = false;
 
   private readonly errorSubject$ = new Subject<unknown>();
   private targetIsOrganization: boolean = false;
@@ -137,12 +137,4 @@ export class RbacOffcanvasComponent implements OnDestroy {
       name: scopeName
     });
   }
-
-  protected switchCreatingRoleAssignment(target: boolean): void {
-    this.isCreatingRoleAssignment = target;
-
-    if (target) {
-      // FIXME: Reset form
-    }
-  }
 }

From 90d06bdd0b31b23481c2990d3bd49985c4983425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 12:55:51 +0200
Subject: [PATCH 06/14] Add new (empty) modal for adding role assignment

---
 .../add-role-assignment.component.html             |  1 +
 .../add-role-assignment.component.ts               |  7 +++++++
 .../rbac-offcanvas/rbac-offcanvas.component.html   |  6 +++++-
 .../rbac-offcanvas/rbac-offcanvas.component.ts     | 14 +++++++++++++-
 .../Client/src/app/portal/portal.module.ts         |  4 +++-
 5 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
new file mode 100644
index 00000000..837880b2
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
@@ -0,0 +1 @@
+<p>add-role-assignment works!</p>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
new file mode 100644
index 00000000..86988f1a
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  standalone: false,
+  templateUrl: './add-role-assignment.component.html'
+})
+export class AddRoleAssignmentComponent {}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
index fad52fec..1d7a64c1 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
@@ -12,7 +12,11 @@
         {{ target.name }}
       </span>
       <span class="flex-grow-1"></span>
-      <tp-action-button [title]="'Portal.RbacManagement.NewRoleAssignment'" [type]="'outline-success'" [icon]="'plus-circle'" />
+      <tp-action-button
+        [title]="'Portal.RbacManagement.NewRoleAssignment'"
+        [type]="'outline-success'"
+        [icon]="'plus-circle'"
+        (click)="showAddRoleAssignmentDialog()" />
     </div>
 
     <table class="mb-2 table table-bordered">
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index 52f12d92..43fa476a 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -2,6 +2,9 @@ import { Component, OnDestroy } from '@angular/core';
 import { finalize, Observable, Subject } from 'rxjs';
 import { PrincipalKind, Role, RoleAssignmentDto, RoleAssignmentsService } from '../../../api';
 import { NotificationService } from '../../../core/services/notification.service';
+import { DocumentCopyComponent } from '../document-copy/document-copy.component';
+import { AddRoleAssignmentComponent } from '../add-role-assignment/add-role-assignment.component';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
 interface IRbacOffcanvasTarget {
   name: string;
@@ -28,7 +31,8 @@ export class RbacOffcanvasComponent implements OnDestroy {
 
   constructor(
     private readonly roleAssignmentsService: RoleAssignmentsService,
-    private readonly notificationService: NotificationService
+    private readonly notificationService: NotificationService,
+    private readonly modalService: NgbModal
   ) {}
 
   public get error$(): Observable<unknown> {
@@ -137,4 +141,12 @@ export class RbacOffcanvasComponent implements OnDestroy {
       name: scopeName
     });
   }
+
+  protected showAddRoleAssignmentDialog(): void {
+    const ref = this.modalService.open(AddRoleAssignmentComponent, {
+      size: 'lg',
+      fullscreen: 'lg',
+      centered: true
+    });
+  }
 }
diff --git a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
index 302df2e2..13fb9836 100644
--- a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
@@ -81,6 +81,7 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
 import { QRCodeComponent } from 'angularx-qrcode';
 import { RbacWidgetComponent } from './components/rbac-widget/rbac-widget.component';
 import { RbacOffcanvasComponent } from './components/rbac-offcanvas/rbac-offcanvas.component';
+import { AddRoleAssignmentComponent } from './components/add-role-assignment/add-role-assignment.component';
 
 const routes: Routes = [
   {
@@ -223,7 +224,8 @@ const routes: Routes = [
     CreateUserComponent,
     BadgeComponent,
     RbacWidgetComponent,
-    RbacOffcanvasComponent
+    RbacOffcanvasComponent,
+    AddRoleAssignmentComponent
   ],
   imports: [
     CommonModule,

From 77b4a21f0dc452fcd12783fb2f9c3c823e262172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 13:16:21 +0200
Subject: [PATCH 07/14] Add steps inside the new dialog

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts | 13 +++++-
 .../add-role-assignment.component.html        | 41 ++++++++++++++++++-
 .../add-role-assignment.component.scss        |  3 ++
 .../add-role-assignment.component.ts          | 38 ++++++++++++++++-
 .../rbac-offcanvas.component.ts               |  4 +-
 5 files changed, 93 insertions(+), 6 deletions(-)
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index def69f79..63e2edce 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -961,9 +961,20 @@ export const de = {
           NotInherited: 'Zuweisung liegt auf dieser Spielstätte'
         }
       },
-      SuccessToast: {
+      DeletedSuccessToast: {
         Title: 'Rollenzuweisung gelöscht',
         Message: 'Die Rollenzuweisung wurde erfolgreich gelöscht.'
+      },
+      AddRoleAssignment: {
+        Title: 'Rollenzuweisung hinzufügen',
+        PreviousStep: 'Zurück',
+        NextStep: 'Weiter',
+        Confirm: 'Erstellen',
+        StepTitle: {
+          SelectRole: 'Rolle selektieren',
+          SelectPrincipal: 'Prinzipal selektieren',
+          Confirm: 'Prüfen und bestätigen'
+        }
       }
     }
   }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
index 837880b2..0b089a48 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
@@ -1 +1,40 @@
-<p>add-role-assignment works!</p>
+<div class="modal-header">
+  <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title"></h4>
+  <button type="button" class="btn-close" (click)="modal.dismiss()"></button>
+</div>
+<div class="modal-body">
+  <div class="text-secondary small">
+    <span
+      [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.SelectRole'"
+      [ngClass]="{ 'text-decoration-underline': step === 'SelectRole' }"></span>
+    <span> &middot; </span>
+    <span
+      [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.SelectPrincipal'"
+      [ngClass]="{ 'text-decoration-underline': step === 'SelectPrincipal' }"></span>
+    <span> &middot; </span>
+    <span
+      [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.Confirm'"
+      [ngClass]="{ 'text-decoration-underline': step === 'Confirm' }"></span>
+  </div>
+</div>
+<div class="modal-footer">
+  @if (step === 'SelectRole') {
+    <tp-action-button [type]="'outline-secondary'" [title]="'Portal.General.Cancel'" (click)="modal.dismiss()" />
+  } @else {
+    <tp-action-button
+      [type]="'outline-dark'"
+      [title]="'Portal.RbacManagement.AddRoleAssignment.PreviousStep'"
+      [icon]="'arrow-left-circle'"
+      (click)="previousStep()" />
+  }
+  <span class="flex-grow-1"></span>
+  @if (step === 'Confirm') {
+    <tp-action-button [type]="'success'" [title]="'Portal.RbacManagement.AddRoleAssignment.Confirm'" (click)="confirm()" />
+  } @else {
+    <tp-action-button
+      [type]="'outline-dark'"
+      [title]="'Portal.RbacManagement.AddRoleAssignment.NextStep'"
+      [icon]="'arrow-right-circle'"
+      (click)="nextStep()" />
+  }
+</div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
new file mode 100644
index 00000000..c0aa26cc
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
@@ -0,0 +1,3 @@
+.modal-body {
+  height: 20em;
+}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
index 86988f1a..3c09cc6b 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
@@ -1,7 +1,41 @@
 import { Component } from '@angular/core';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+
+type Step = 'SelectRole' | 'SelectPrincipal' | 'Confirm';
 
 @Component({
   standalone: false,
-  templateUrl: './add-role-assignment.component.html'
+  templateUrl: './add-role-assignment.component.html',
+  styleUrl: './add-role-assignment.component.scss'
 })
-export class AddRoleAssignmentComponent {}
+export class AddRoleAssignmentComponent {
+  protected step: Step = 'SelectRole';
+
+  constructor(protected readonly modal: NgbActiveModal) {}
+
+  protected previousStep(): void {
+    switch (this.step) {
+      case 'SelectRole':
+      case 'SelectPrincipal':
+        this.step = 'SelectRole';
+        break;
+      case 'Confirm':
+        this.step = 'SelectPrincipal';
+        break;
+    }
+  }
+
+  protected nextStep(): void {
+    switch (this.step) {
+      case 'SelectRole':
+        this.step = 'SelectPrincipal';
+        break;
+      case 'SelectPrincipal':
+      case 'Confirm':
+        this.step = 'Confirm';
+        break;
+    }
+  }
+
+  protected confirm(): void {}
+}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index 43fa476a..c3f6523c 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -112,8 +112,8 @@ export class RbacOffcanvasComponent implements OnDestroy {
 
         this.notificationService.showNotification(
           'success',
-          'Portal.RbacManagement.SuccessToast.Title',
-          'Portal.RbacManagement.SuccessToast.Message'
+          'Portal.RbacManagement.DeletedSuccessToast.Title',
+          'Portal.RbacManagement.DeletedSuccessToast.Message'
         );
       },
       error: (error) => {

From 3e9918d028a5b66c1fef95a3a7d44f75b5462b37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 13:27:09 +0200
Subject: [PATCH 08/14] Implement role selection

---
 .../add-role-assignment.component.html        | 26 ++++++++++++++++++-
 .../add-role-assignment.component.ts          |  9 +++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
index 0b089a48..5861d087 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
@@ -3,7 +3,7 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
   <button type="button" class="btn-close" (click)="modal.dismiss()"></button>
 </div>
 <div class="modal-body">
-  <div class="text-secondary small">
+  <div class="text-secondary small mb-4">
     <span
       [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.SelectRole'"
       [ngClass]="{ 'text-decoration-underline': step === 'SelectRole' }"></span>
@@ -16,6 +16,30 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
       [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.Confirm'"
       [ngClass]="{ 'text-decoration-underline': step === 'Confirm' }"></span>
   </div>
+
+  @switch (step) {
+    @case ('SelectRole') {
+      <table class="table table-bordered">
+        <tbody>
+          @for (role of availableRoles; track role) {
+            <tr>
+              <td>
+                <div
+                  [ngClass]="{ 'fw-bold text-decoration-underline': role === selectedRole }"
+                  [translate]="'Portal.RbacManagement.RoleName.' + role"></div>
+                <div class="small text-secondary" [translate]="'Portal.RbacManagement.RoleDescription.' + role"></div>
+              </td>
+              <td style="width: 1px" class="align-middle">
+                <tp-action-button [mode]="'IconOnly'" [icon]="'arrow-right-circle'" (click)="selectRole(role)" />
+              </td>
+            </tr>
+          }
+        </tbody>
+      </table>
+    }
+    @case ('SelectPrincipal') {}
+    @case ('Confirm') {}
+  }
 </div>
 <div class="modal-footer">
   @if (step === 'SelectRole') {
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
index 3c09cc6b..4cf435ce 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
@@ -1,5 +1,6 @@
 import { Component } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Role } from '../../../api';
 
 type Step = 'SelectRole' | 'SelectPrincipal' | 'Confirm';
 
@@ -9,7 +10,10 @@ type Step = 'SelectRole' | 'SelectPrincipal' | 'Confirm';
   styleUrl: './add-role-assignment.component.scss'
 })
 export class AddRoleAssignmentComponent {
+  protected readonly availableRoles = Object.keys(Role) as Role[];
+
   protected step: Step = 'SelectRole';
+  protected selectedRole: Role = Role.Reader;
 
   constructor(protected readonly modal: NgbActiveModal) {}
 
@@ -37,5 +41,10 @@ export class AddRoleAssignmentComponent {
     }
   }
 
+  protected selectRole(role: Role): void {
+    this.selectedRole = role;
+    this.nextStep();
+  }
+
   protected confirm(): void {}
 }

From 84d3e62ead1c0a8406b41bfb5963568bdfe07a73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 14:46:33 +0200
Subject: [PATCH 09/14] Add component for principal

---
 .../rbac-offcanvas/rbac-offcanvas.component.html   | 11 +----------
 .../rbac-offcanvas/rbac-offcanvas.component.ts     |  5 +----
 .../rbac-principal/rbac-principal.component.html   | 10 ++++++++++
 .../rbac-principal/rbac-principal.component.ts     | 14 ++++++++++++++
 .../Client/src/app/portal/portal.module.ts         |  4 +++-
 5 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.html
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.ts

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
index 1d7a64c1..f817d42b 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.html
@@ -34,16 +34,7 @@
               <td>
                 <div class="d-flex flex-column gap-2">
                   <div class="d-flex gap-2">
-                    @switch (assignment.principal.kind) {
-                      @case (PrincipalKind.ApiKey) {
-                        <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
-                      }
-                      @case (PrincipalKind.User) {
-                        <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
-                      }
-                    }
-                    <!-- TODO: Resolve ApiKey/User name -->
-                    <span>{{ assignment.principal.principalId }}</span>
+                    <tp-rbac-principal [principal]="assignment.principal" />
                     @if (canDeleteAssignment(assignment)) {
                       <span class="flex-grow-1"></span>
                       <tp-delete-button [reducedFootprint]="true" (confirmed)="removeRoleAssignment(assignment.id)" />
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index c3f6523c..f223716f 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -1,8 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { finalize, Observable, Subject } from 'rxjs';
-import { PrincipalKind, Role, RoleAssignmentDto, RoleAssignmentsService } from '../../../api';
+import { Role, RoleAssignmentDto, RoleAssignmentsService } from '../../../api';
 import { NotificationService } from '../../../core/services/notification.service';
-import { DocumentCopyComponent } from '../document-copy/document-copy.component';
 import { AddRoleAssignmentComponent } from '../add-role-assignment/add-role-assignment.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 
@@ -16,8 +15,6 @@ interface IRbacOffcanvasTarget {
   templateUrl: './rbac-offcanvas.component.html'
 })
 export class RbacOffcanvasComponent implements OnDestroy {
-  protected readonly PrincipalKind = PrincipalKind;
-
   protected target!: IRbacOffcanvasTarget;
   protected targetIcon: string = '';
   protected isLoadingRoleAssignments = false;
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.html
new file mode 100644
index 00000000..d3d7f345
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.html
@@ -0,0 +1,10 @@
+@switch (principal.kind) {
+  @case (PrincipalKind.ApiKey) {
+    <i class="bi bi-key" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate"></i>
+  }
+  @case (PrincipalKind.User) {
+    <i class="bi bi-person" [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate"></i>
+  }
+}
+<!-- TODO: Resolve ApiKey/User name -->
+<span class="ms-1">{{ principal.principalId }}</span>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.ts
new file mode 100644
index 00000000..63a450ba
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-principal/rbac-principal.component.ts
@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+import { PrincipalDto, PrincipalKind } from '../../../api';
+
+@Component({
+  selector: 'tp-rbac-principal',
+  standalone: false,
+  templateUrl: './rbac-principal.component.html'
+})
+export class RbacPrincipalComponent {
+  protected readonly PrincipalKind = PrincipalKind;
+
+  @Input()
+  public principal!: PrincipalDto;
+}
diff --git a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
index 13fb9836..93441d24 100644
--- a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
@@ -82,6 +82,7 @@ import { QRCodeComponent } from 'angularx-qrcode';
 import { RbacWidgetComponent } from './components/rbac-widget/rbac-widget.component';
 import { RbacOffcanvasComponent } from './components/rbac-offcanvas/rbac-offcanvas.component';
 import { AddRoleAssignmentComponent } from './components/add-role-assignment/add-role-assignment.component';
+import { RbacPrincipalComponent } from './components/rbac-principal/rbac-principal.component';
 
 const routes: Routes = [
   {
@@ -225,7 +226,8 @@ const routes: Routes = [
     BadgeComponent,
     RbacWidgetComponent,
     RbacOffcanvasComponent,
-    AddRoleAssignmentComponent
+    AddRoleAssignmentComponent,
+    RbacPrincipalComponent
   ],
   imports: [
     CommonModule,

From c2cecd2172e8cc2b73fc7b013337fe8a9596fd4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 15:11:52 +0200
Subject: [PATCH 10/14] Implement basic flow of new dialog

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts |  8 ++
 .../add-role-assignment.component.html        | 73 +++++++++++++++++--
 .../add-role-assignment.component.scss        |  2 +-
 .../add-role-assignment.component.ts          | 44 +++++++++--
 .../rbac-offcanvas.component.ts               | 56 ++++++++------
 5 files changed, 145 insertions(+), 38 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index 63e2edce..14f56594 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -974,6 +974,14 @@ export const de = {
           SelectRole: 'Rolle selektieren',
           SelectPrincipal: 'Prinzipal selektieren',
           Confirm: 'Prüfen und bestätigen'
+        },
+        SearchPrincipalPlaceholder: 'E-Mailadresse oder API-Key ID eingeben',
+        SearchPrincipalButton: 'Suchen & hinzufügen',
+        NoPrincipalsSelected: 'Kein Prinzipal selektiert',
+        ConfirmMessage: 'Prüfen Sie Ihre Selektion auf Richtigkeit:',
+        ConfirmTable: {
+          Role: 'Rolle:',
+          Principals: 'Prinzipal:'
         }
       }
     }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
index 5861d087..6b2a045e 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
@@ -37,8 +37,62 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
         </tbody>
       </table>
     }
-    @case ('SelectPrincipal') {}
-    @case ('Confirm') {}
+    @case ('SelectPrincipal') {
+      <div class="mb-3 d-flex flex-row align-items-center gap-2">
+        <input
+          type="text"
+          [placeholder]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalPlaceholder' | translate"
+          [(ngModel)]="searchPrincipalInput"
+          class="flex-grow-1 form-control form-control-sm" />
+        <tp-action-button
+          [icon]="'search'"
+          [title]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalButton'"
+          (click)="searchPrincipal()" />
+      </div>
+
+      @if (selectedPrincipals.length === 0) {
+        <div class="small text-secondary fst-italic" translate="Portal.RbacManagement.AddRoleAssignment.NoPrincipalsSelected"></div>
+      } @else {
+        <table class="table table-bordered">
+          <tbody>
+            @for (principal of selectedPrincipals; track principal; let index = $index) {
+              <tr>
+                <td class="align-middle">
+                  <tp-rbac-principal [principal]="principal" />
+                </td>
+                <td style="width: 1px" class="align-middle">
+                  <tp-action-button [type]="'outline-danger'" [mode]="'IconOnly'" [icon]="'trash'" (click)="removePrincipal(index)" />
+                </td>
+              </tr>
+            }
+          </tbody>
+        </table>
+      }
+    }
+    @case ('Confirm') {
+      <div class="mb-3" translate="Portal.RbacManagement.AddRoleAssignment.ConfirmMessage"></div>
+      <table class="table table-bordered">
+        <tbody>
+          <tr>
+            <td translate="Portal.RbacManagement.AddRoleAssignment.ConfirmTable.Role"></td>
+            <td>
+              <div [translate]="'Portal.RbacManagement.RoleName.' + selectedRole"></div>
+              <div class="small text-secondary" [translate]="'Portal.RbacManagement.RoleDescription.' + selectedRole"></div>
+            </td>
+          </tr>
+          <tr>
+            <td translate="Portal.RbacManagement.AddRoleAssignment.ConfirmTable.Principals"></td>
+            <td>
+              @for (principal of selectedPrincipals; track principal) {
+                <div>
+                  <tp-rbac-principal [principal]="principal" />
+                </div>
+              }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    }
   }
 </div>
 <div class="modal-footer">
@@ -55,10 +109,15 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
   @if (step === 'Confirm') {
     <tp-action-button [type]="'success'" [title]="'Portal.RbacManagement.AddRoleAssignment.Confirm'" (click)="confirm()" />
   } @else {
-    <tp-action-button
-      [type]="'outline-dark'"
-      [title]="'Portal.RbacManagement.AddRoleAssignment.NextStep'"
-      [icon]="'arrow-right-circle'"
-      (click)="nextStep()" />
+    @let nextDisabled =
+      (step === 'SelectRole' && selectedRole === undefined) || (step === 'SelectPrincipal' && selectedPrincipals.length === 0);
+    <div [ngClass]="{ 'tp-cursor-not-allowed': nextDisabled }">
+      <tp-action-button
+        [type]="'outline-dark'"
+        [title]="'Portal.RbacManagement.AddRoleAssignment.NextStep'"
+        [icon]="'arrow-right-circle'"
+        [disabled]="nextDisabled"
+        (click)="nextStep()" />
+    </div>
   }
 </div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
index c0aa26cc..69cfdd44 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
@@ -1,3 +1,3 @@
 .modal-body {
-  height: 20em;
+  min-height: 20em;
 }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
index 4cf435ce..b1581196 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { Role } from '../../../api';
+import { PrincipalDto, PrincipalKind, Role } from '../../../api';
 
 type Step = 'SelectRole' | 'SelectPrincipal' | 'Confirm';
 
@@ -13,13 +13,20 @@ export class AddRoleAssignmentComponent {
   protected readonly availableRoles = Object.keys(Role) as Role[];
 
   protected step: Step = 'SelectRole';
-  protected selectedRole: Role = Role.Reader;
+  protected selectedRole?: Role = undefined;
+  protected selectedPrincipals: PrincipalDto[] = [];
+  protected searchPrincipalInput: string = '';
+
+  private targetScopeId: string = '';
 
   constructor(protected readonly modal: NgbActiveModal) {}
 
+  public set scopeId(value: string) {
+    this.targetScopeId = value;
+  }
+
   protected previousStep(): void {
     switch (this.step) {
-      case 'SelectRole':
       case 'SelectPrincipal':
         this.step = 'SelectRole';
         break;
@@ -35,8 +42,9 @@ export class AddRoleAssignmentComponent {
         this.step = 'SelectPrincipal';
         break;
       case 'SelectPrincipal':
-      case 'Confirm':
-        this.step = 'Confirm';
+        if (this.selectedPrincipals.length > 0) {
+          this.step = 'Confirm';
+        }
         break;
     }
   }
@@ -46,5 +54,29 @@ export class AddRoleAssignmentComponent {
     this.nextStep();
   }
 
-  protected confirm(): void {}
+  protected searchPrincipal(): void {
+    // TODO: Send request and, if not already present, add to list
+    //       Add notifications for various outcomes
+
+    this.selectedPrincipals.push({
+      principalId: 'blubb',
+      kind: PrincipalKind.User
+    });
+
+    // TODO Only reset if successful
+    this.searchPrincipalInput = '';
+  }
+
+  protected removePrincipal(index: number): void {
+    // Can't use .slice(index, 1) because that wouldn't trigger Angular change detection
+    this.selectedPrincipals = this.selectedPrincipals.filter((_, i) => i !== index);
+  }
+
+  protected confirm(): void {
+    if (!this.selectedRole || this.selectedPrincipals.length === 0) {
+      return;
+    }
+
+    this.modal.close();
+  }
 }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index f223716f..ab88622d 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -65,30 +65,7 @@ export class RbacOffcanvasComponent implements OnDestroy {
         break;
     }
 
-    this.isLoadingRoleAssignments = true;
-
-    this.roleAssignmentsService
-      .getRoleAssignments({ scopeId: this.target.rbacScopeId })
-      .pipe(finalize(() => (this.isLoadingRoleAssignments = false)))
-      .subscribe({
-        next: (roleAssignments) => {
-          this.roleAssignments = {};
-          this.roleAssignmentCount = 0;
-
-          for (const roleAssignment of roleAssignments) {
-            this.roleAssignmentCount++;
-
-            if (roleAssignment.role in this.roleAssignments) {
-              this.roleAssignments[roleAssignment.role].push(roleAssignment);
-            } else {
-              this.roleAssignments[roleAssignment.role] = [roleAssignment];
-            }
-          }
-        },
-        error: (error) => {
-          this.errorSubject$.next(error);
-        }
-      });
+    this.loadRoleAssignments();
   }
 
   protected removeRoleAssignment(id: string): void {
@@ -145,5 +122,36 @@ export class RbacOffcanvasComponent implements OnDestroy {
       fullscreen: 'lg',
       centered: true
     });
+
+    (ref.componentInstance as AddRoleAssignmentComponent).scopeId = this.target.rbacScopeId;
+
+    ref.closed.subscribe(() => this.loadRoleAssignments());
+  }
+
+  private loadRoleAssignments(): void {
+    this.isLoadingRoleAssignments = true;
+
+    this.roleAssignmentsService
+      .getRoleAssignments({ scopeId: this.target.rbacScopeId })
+      .pipe(finalize(() => (this.isLoadingRoleAssignments = false)))
+      .subscribe({
+        next: (roleAssignments) => {
+          this.roleAssignments = {};
+          this.roleAssignmentCount = 0;
+
+          for (const roleAssignment of roleAssignments) {
+            this.roleAssignmentCount++;
+
+            if (roleAssignment.role in this.roleAssignments) {
+              this.roleAssignments[roleAssignment.role].push(roleAssignment);
+            } else {
+              this.roleAssignments[roleAssignment.role] = [roleAssignment];
+            }
+          }
+        },
+        error: (error) => {
+          this.errorSubject$.next(error);
+        }
+      });
   }
 }

From 0e195e3e1861f6f376410e24d9f5e6353e41b16f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 15:47:13 +0200
Subject: [PATCH 11/14] Refactor dialog to match the actual endpoint

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts | 18 ++--
 .../add-role-assignment.component.ts          | 82 ----------------
 .../rbac-add-assignment.component.html}       | 93 ++++++++-----------
 .../rbac-add-assignment.component.scss}       |  0
 .../rbac-add-assignment.component.ts          | 69 ++++++++++++++
 .../rbac-offcanvas.component.ts               |  9 +-
 .../Client/src/app/portal/portal.module.ts    |  4 +-
 7 files changed, 122 insertions(+), 153 deletions(-)
 delete mode 100644 src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
 rename src/Turnierplan.App/Client/src/app/portal/components/{add-role-assignment/add-role-assignment.component.html => rbac-add-assignment/rbac-add-assignment.component.html} (53%)
 rename src/Turnierplan.App/Client/src/app/portal/components/{add-role-assignment/add-role-assignment.component.scss => rbac-add-assignment/rbac-add-assignment.component.scss} (100%)
 create mode 100644 src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index 14f56594..31cf7ca7 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -972,17 +972,15 @@ export const de = {
         Confirm: 'Erstellen',
         StepTitle: {
           SelectRole: 'Rolle selektieren',
-          SelectPrincipal: 'Prinzipal selektieren',
-          Confirm: 'Prüfen und bestätigen'
+          SelectPrincipal: 'Prinzipal selektieren'
         },
-        SearchPrincipalPlaceholder: 'E-Mailadresse oder API-Key ID eingeben',
-        SearchPrincipalButton: 'Suchen & hinzufügen',
-        NoPrincipalsSelected: 'Kein Prinzipal selektiert',
-        ConfirmMessage: 'Prüfen Sie Ihre Selektion auf Richtigkeit:',
-        ConfirmTable: {
-          Role: 'Rolle:',
-          Principals: 'Prinzipal:'
-        }
+        AddAssignmentInfo:
+          'Suchen Sie den gewünschten Nutzer oder API-Schlüssel anhand von E-Mailadresse bzw. API-Schlüssel-ID. Durch Klick auf "Suchen & hinzufügen" wird der spezifizierte Prinzipal gesucht und - sofern gefunden - eine entsprechende Rollenzuweisung erstellt.',
+        SearchPrincipalPlaceholder: {
+          ApiKey: 'ID des API-Schlüssels eingeben',
+          User: 'E-Mailadresse des Nutzers eingeben'
+        },
+        SearchPrincipalButton: 'Suchen & hinzufügen'
       }
     }
   }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
deleted file mode 100644
index b1581196..00000000
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { Component } from '@angular/core';
-import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { PrincipalDto, PrincipalKind, Role } from '../../../api';
-
-type Step = 'SelectRole' | 'SelectPrincipal' | 'Confirm';
-
-@Component({
-  standalone: false,
-  templateUrl: './add-role-assignment.component.html',
-  styleUrl: './add-role-assignment.component.scss'
-})
-export class AddRoleAssignmentComponent {
-  protected readonly availableRoles = Object.keys(Role) as Role[];
-
-  protected step: Step = 'SelectRole';
-  protected selectedRole?: Role = undefined;
-  protected selectedPrincipals: PrincipalDto[] = [];
-  protected searchPrincipalInput: string = '';
-
-  private targetScopeId: string = '';
-
-  constructor(protected readonly modal: NgbActiveModal) {}
-
-  public set scopeId(value: string) {
-    this.targetScopeId = value;
-  }
-
-  protected previousStep(): void {
-    switch (this.step) {
-      case 'SelectPrincipal':
-        this.step = 'SelectRole';
-        break;
-      case 'Confirm':
-        this.step = 'SelectPrincipal';
-        break;
-    }
-  }
-
-  protected nextStep(): void {
-    switch (this.step) {
-      case 'SelectRole':
-        this.step = 'SelectPrincipal';
-        break;
-      case 'SelectPrincipal':
-        if (this.selectedPrincipals.length > 0) {
-          this.step = 'Confirm';
-        }
-        break;
-    }
-  }
-
-  protected selectRole(role: Role): void {
-    this.selectedRole = role;
-    this.nextStep();
-  }
-
-  protected searchPrincipal(): void {
-    // TODO: Send request and, if not already present, add to list
-    //       Add notifications for various outcomes
-
-    this.selectedPrincipals.push({
-      principalId: 'blubb',
-      kind: PrincipalKind.User
-    });
-
-    // TODO Only reset if successful
-    this.searchPrincipalInput = '';
-  }
-
-  protected removePrincipal(index: number): void {
-    // Can't use .slice(index, 1) because that wouldn't trigger Angular change detection
-    this.selectedPrincipals = this.selectedPrincipals.filter((_, i) => i !== index);
-  }
-
-  protected confirm(): void {
-    if (!this.selectedRole || this.selectedPrincipals.length === 0) {
-      return;
-    }
-
-    this.modal.close();
-  }
-}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
similarity index 53%
rename from src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
rename to src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
index 6b2a045e..de8d3044 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
@@ -11,10 +11,6 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
     <span
       [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.SelectPrincipal'"
       [ngClass]="{ 'text-decoration-underline': step === 'SelectPrincipal' }"></span>
-    <span> &middot; </span>
-    <span
-      [translate]="'Portal.RbacManagement.AddRoleAssignment.StepTitle.Confirm'"
-      [ngClass]="{ 'text-decoration-underline': step === 'Confirm' }"></span>
   </div>
 
   @switch (step) {
@@ -38,60 +34,48 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
       </table>
     }
     @case ('SelectPrincipal') {
-      <div class="mb-3 d-flex flex-row align-items-center gap-2">
+      <div class="mb-3" translate="Portal.RbacManagement.AddRoleAssignment.AddAssignmentInfo"></div>
+      <div class="d-flex flex-row align-items-center gap-2">
+        <div class="btn-group" role="group">
+          <input
+            type="radio"
+            class="btn-check"
+            name="addAssignment_principalKind"
+            id="addAssignment_principalKind_user"
+            [value]="PrincipalKind.User"
+            [(ngModel)]="selectedPrincipalKind" />
+          <label
+            class="btn btn-sm btn-outline-secondary"
+            for="addAssignment_principalKind_user"
+            [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.User' | translate">
+            <i class="bi bi-person"></i>
+          </label>
+          <input
+            type="radio"
+            class="btn-check"
+            name="addAssignment_principalKind"
+            id="addAssignment_principalKind_apiKey"
+            [value]="PrincipalKind.ApiKey"
+            [(ngModel)]="selectedPrincipalKind" />
+          <label
+            class="btn btn-sm btn-outline-secondary"
+            for="addAssignment_principalKind_apiKey"
+            [ngbTooltip]="'Portal.RbacManagement.PrincipalKind.ApiKey' | translate">
+            <i class="bi bi-key"></i>
+          </label>
+        </div>
+
         <input
           type="text"
-          [placeholder]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalPlaceholder' | translate"
+          [placeholder]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalPlaceholder.' + selectedPrincipalKind | translate"
           [(ngModel)]="searchPrincipalInput"
           class="flex-grow-1 form-control form-control-sm" />
+
         <tp-action-button
           [icon]="'search'"
           [title]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalButton'"
-          (click)="searchPrincipal()" />
+          (click)="addRoleAssignment()" />
       </div>
-
-      @if (selectedPrincipals.length === 0) {
-        <div class="small text-secondary fst-italic" translate="Portal.RbacManagement.AddRoleAssignment.NoPrincipalsSelected"></div>
-      } @else {
-        <table class="table table-bordered">
-          <tbody>
-            @for (principal of selectedPrincipals; track principal; let index = $index) {
-              <tr>
-                <td class="align-middle">
-                  <tp-rbac-principal [principal]="principal" />
-                </td>
-                <td style="width: 1px" class="align-middle">
-                  <tp-action-button [type]="'outline-danger'" [mode]="'IconOnly'" [icon]="'trash'" (click)="removePrincipal(index)" />
-                </td>
-              </tr>
-            }
-          </tbody>
-        </table>
-      }
-    }
-    @case ('Confirm') {
-      <div class="mb-3" translate="Portal.RbacManagement.AddRoleAssignment.ConfirmMessage"></div>
-      <table class="table table-bordered">
-        <tbody>
-          <tr>
-            <td translate="Portal.RbacManagement.AddRoleAssignment.ConfirmTable.Role"></td>
-            <td>
-              <div [translate]="'Portal.RbacManagement.RoleName.' + selectedRole"></div>
-              <div class="small text-secondary" [translate]="'Portal.RbacManagement.RoleDescription.' + selectedRole"></div>
-            </td>
-          </tr>
-          <tr>
-            <td translate="Portal.RbacManagement.AddRoleAssignment.ConfirmTable.Principals"></td>
-            <td>
-              @for (principal of selectedPrincipals; track principal) {
-                <div>
-                  <tp-rbac-principal [principal]="principal" />
-                </div>
-              }
-            </td>
-          </tr>
-        </tbody>
-      </table>
     }
   }
 </div>
@@ -106,11 +90,8 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
       (click)="previousStep()" />
   }
   <span class="flex-grow-1"></span>
-  @if (step === 'Confirm') {
-    <tp-action-button [type]="'success'" [title]="'Portal.RbacManagement.AddRoleAssignment.Confirm'" (click)="confirm()" />
-  } @else {
-    @let nextDisabled =
-      (step === 'SelectRole' && selectedRole === undefined) || (step === 'SelectPrincipal' && selectedPrincipals.length === 0);
+  @if (step === 'SelectRole') {
+    @let nextDisabled = selectedRole === undefined;
     <div [ngClass]="{ 'tp-cursor-not-allowed': nextDisabled }">
       <tp-action-button
         [type]="'outline-dark'"
@@ -119,5 +100,7 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
         [disabled]="nextDisabled"
         (click)="nextStep()" />
     </div>
+  } @else {
+    <tp-action-button [type]="'outline-success'" [title]="'Portal.General.Done'" (click)="modal.close()" />
   }
 </div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.scss
similarity index 100%
rename from src/Turnierplan.App/Client/src/app/portal/components/add-role-assignment/add-role-assignment.component.scss
rename to src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.scss
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
new file mode 100644
index 00000000..675cfab8
--- /dev/null
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
@@ -0,0 +1,69 @@
+import { Component, OnDestroy } from '@angular/core';
+import { PrincipalKind, Role } from '../../../api';
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, Subject } from 'rxjs';
+
+type Step = 'SelectRole' | 'SelectPrincipal';
+
+@Component({
+  standalone: false,
+  templateUrl: './rbac-add-assignment.component.html',
+  styleUrl: './rbac-add-assignment.component.scss'
+})
+export class RbacAddAssignmentComponent implements OnDestroy {
+  protected readonly availableRoles = Object.keys(Role) as Role[];
+
+  protected step: Step = 'SelectRole';
+  protected selectedRole?: Role = undefined;
+  protected selectedPrincipalKind: PrincipalKind = PrincipalKind.User;
+  protected searchPrincipalInput: string = '';
+
+  private readonly assignmentAddedSubject$ = new Subject<void>();
+
+  private targetScopeId: string = '';
+
+  constructor(protected readonly modal: NgbActiveModal) {}
+
+  public set scopeId(value: string) {
+    this.targetScopeId = value;
+  }
+
+  public get assignmentAdded$(): Observable<void> {
+    return this.assignmentAddedSubject$.asObservable();
+  }
+
+  public ngOnDestroy(): void {
+    this.assignmentAddedSubject$.complete();
+  }
+
+  protected previousStep(): void {
+    if (this.step === 'SelectPrincipal') {
+      this.step = 'SelectRole';
+    }
+  }
+
+  protected nextStep(): void {
+    if (this.step === 'SelectRole' && this.selectedRole !== undefined) {
+      this.step = 'SelectPrincipal';
+    }
+  }
+  protected selectRole(role: Role): void {
+    this.selectedRole = role;
+    this.step = 'SelectPrincipal';
+  }
+
+  protected addRoleAssignment(): void {
+    if (this.selectedRole === undefined || this.searchPrincipalInput.trim().length === 0) {
+      return;
+    }
+
+    // TODO: Add switch button to determine whether ApiKey/User
+    //       Add notifications for various outcomes
+
+    // TODO: Only if successful
+    this.searchPrincipalInput = '';
+    this.assignmentAddedSubject$.next();
+  }
+
+  protected readonly PrincipalKind = PrincipalKind;
+}
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index ab88622d..9250460f 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -2,8 +2,8 @@ import { Component, OnDestroy } from '@angular/core';
 import { finalize, Observable, Subject } from 'rxjs';
 import { Role, RoleAssignmentDto, RoleAssignmentsService } from '../../../api';
 import { NotificationService } from '../../../core/services/notification.service';
-import { AddRoleAssignmentComponent } from '../add-role-assignment/add-role-assignment.component';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { RbacAddAssignmentComponent } from '../rbac-add-assignment/rbac-add-assignment.component';
 
 interface IRbacOffcanvasTarget {
   name: string;
@@ -117,15 +117,16 @@ export class RbacOffcanvasComponent implements OnDestroy {
   }
 
   protected showAddRoleAssignmentDialog(): void {
-    const ref = this.modalService.open(AddRoleAssignmentComponent, {
+    const ref = this.modalService.open(RbacAddAssignmentComponent, {
       size: 'lg',
       fullscreen: 'lg',
       centered: true
     });
 
-    (ref.componentInstance as AddRoleAssignmentComponent).scopeId = this.target.rbacScopeId;
+    const component = ref.componentInstance as RbacAddAssignmentComponent;
 
-    ref.closed.subscribe(() => this.loadRoleAssignments());
+    component.scopeId = this.target.rbacScopeId;
+    component.assignmentAdded$.subscribe(() => this.loadRoleAssignments());
   }
 
   private loadRoleAssignments(): void {
diff --git a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
index 93441d24..183ef7b4 100644
--- a/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/portal.module.ts
@@ -81,8 +81,8 @@ import { BaseChartDirective, provideCharts, withDefaultRegisterables } from 'ng2
 import { QRCodeComponent } from 'angularx-qrcode';
 import { RbacWidgetComponent } from './components/rbac-widget/rbac-widget.component';
 import { RbacOffcanvasComponent } from './components/rbac-offcanvas/rbac-offcanvas.component';
-import { AddRoleAssignmentComponent } from './components/add-role-assignment/add-role-assignment.component';
 import { RbacPrincipalComponent } from './components/rbac-principal/rbac-principal.component';
+import { RbacAddAssignmentComponent } from './components/rbac-add-assignment/rbac-add-assignment.component';
 
 const routes: Routes = [
   {
@@ -226,7 +226,7 @@ const routes: Routes = [
     BadgeComponent,
     RbacWidgetComponent,
     RbacOffcanvasComponent,
-    AddRoleAssignmentComponent,
+    RbacAddAssignmentComponent,
     RbacPrincipalComponent
   ],
   imports: [

From 45d9b8935799fb27d4d461a2d7cdc89eae531a64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 16:10:35 +0200
Subject: [PATCH 12/14] Adding role assignments is now working

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts | 16 ++++-
 .../rbac-add-assignment.component.html        | 25 +++++--
 .../rbac-add-assignment.component.ts          | 70 ++++++++++++++-----
 .../rbac-offcanvas.component.ts               |  4 +-
 .../CreateRoleAssignmentEndpoint.cs           |  6 +-
 5 files changed, 95 insertions(+), 26 deletions(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index 31cf7ca7..5612a5a4 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -976,11 +976,25 @@ export const de = {
         },
         AddAssignmentInfo:
           'Suchen Sie den gewünschten Nutzer oder API-Schlüssel anhand von E-Mailadresse bzw. API-Schlüssel-ID. Durch Klick auf "Suchen & hinzufügen" wird der spezifizierte Prinzipal gesucht und - sofern gefunden - eine entsprechende Rollenzuweisung erstellt.',
+        SelectedRole: 'Gewählte Rolle:',
         SearchPrincipalPlaceholder: {
           ApiKey: 'ID des API-Schlüssels eingeben',
           User: 'E-Mailadresse des Nutzers eingeben'
         },
-        SearchPrincipalButton: 'Suchen & hinzufügen'
+        SearchPrincipalButton: 'Suchen & hinzufügen',
+        CreatingRoleAssignment: 'Die Rollenzuweisung wird erstellt',
+        CreateSuccessToast: {
+          Title: 'Rollenzuweisung erstellt',
+          Message: 'Die Rollenzuweisung wurde erfolgreich erstellt.'
+        },
+        PrincipalNotFoundToast: {
+          Title: 'Rollenzuweisung konnte nicht erstellt werden',
+          Message: 'Es existiert kein Prinzipal mit der angegebenen Api-Key-ID bzw. E-Mailadresse.'
+        },
+        AssignmentAlreadyExists: {
+          Title: 'Rollenzuweisung konnte nicht erstellt werden',
+          Message: 'Die angegebene Rolle ist bereits für den spezifizierten Prinzipal zugewiesen.'
+        }
       }
     }
   }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
index de8d3044..70413b39 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.html
@@ -35,6 +35,10 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
     }
     @case ('SelectPrincipal') {
       <div class="mb-3" translate="Portal.RbacManagement.AddRoleAssignment.AddAssignmentInfo"></div>
+      <div class="mb-3">
+        <span translate="Portal.RbacManagement.AddRoleAssignment.SelectedRole"></span>
+        <span class="ms-2 fw-bold" [translate]="'Portal.RbacManagement.RoleName.' + selectedRole"></span>
+      </div>
       <div class="d-flex flex-row align-items-center gap-2">
         <div class="btn-group" role="group">
           <input
@@ -71,11 +75,22 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
           [(ngModel)]="searchPrincipalInput"
           class="flex-grow-1 form-control form-control-sm" />
 
-        <tp-action-button
-          [icon]="'search'"
-          [title]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalButton'"
-          (click)="addRoleAssignment()" />
+        @let createDisabled = isCreatingRoleAssignment || searchPrincipalInput.length === 0;
+        <div [ngClass]="{ 'tp-cursor-not-allowed': createDisabled }">
+          <tp-action-button
+            [icon]="'search'"
+            [title]="'Portal.RbacManagement.AddRoleAssignment.SearchPrincipalButton'"
+            [disabled]="createDisabled"
+            (click)="addRoleAssignment()" />
+        </div>
       </div>
+
+      @if (isCreatingRoleAssignment) {
+        <div class="mt-3 d-flex flex-row gap-2">
+          <tp-small-spinner />
+          <span translate="Portal.RbacManagement.AddRoleAssignment.CreatingRoleAssignment"></span>
+        </div>
+      }
     }
   }
 </div>
@@ -100,7 +115,5 @@ <h4 class="modal-title" translate="Portal.RbacManagement.AddRoleAssignment.Title
         [disabled]="nextDisabled"
         (click)="nextStep()" />
     </div>
-  } @else {
-    <tp-action-button [type]="'outline-success'" [title]="'Portal.General.Done'" (click)="modal.close()" />
   }
 </div>
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
index 675cfab8..57ac9223 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
@@ -1,7 +1,8 @@
 import { Component, OnDestroy } from '@angular/core';
-import { PrincipalKind, Role } from '../../../api';
+import { CreateRoleAssignmentEndpointRequest, PrincipalKind, Role, RoleAssignmentsService } from '../../../api';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
-import { Observable, Subject } from 'rxjs';
+import { finalize, Observable, Subject } from 'rxjs';
+import { NotificationService } from '../../../core/services/notification.service';
 
 type Step = 'SelectRole' | 'SelectPrincipal';
 
@@ -11,29 +12,34 @@ type Step = 'SelectRole' | 'SelectPrincipal';
   styleUrl: './rbac-add-assignment.component.scss'
 })
 export class RbacAddAssignmentComponent implements OnDestroy {
+  protected readonly PrincipalKind = PrincipalKind;
   protected readonly availableRoles = Object.keys(Role) as Role[];
 
   protected step: Step = 'SelectRole';
   protected selectedRole?: Role = undefined;
   protected selectedPrincipalKind: PrincipalKind = PrincipalKind.User;
   protected searchPrincipalInput: string = '';
+  protected isCreatingRoleAssignment = false;
 
-  private readonly assignmentAddedSubject$ = new Subject<void>();
-
+  private readonly errorSubject$ = new Subject<unknown>();
   private targetScopeId: string = '';
 
-  constructor(protected readonly modal: NgbActiveModal) {}
+  constructor(
+    protected readonly modal: NgbActiveModal,
+    private readonly roleAssignmentsService: RoleAssignmentsService,
+    private readonly notificationService: NotificationService
+  ) {}
 
   public set scopeId(value: string) {
     this.targetScopeId = value;
   }
 
-  public get assignmentAdded$(): Observable<void> {
-    return this.assignmentAddedSubject$.asObservable();
+  public get error$(): Observable<unknown> {
+    return this.errorSubject$.asObservable();
   }
 
   public ngOnDestroy(): void {
-    this.assignmentAddedSubject$.complete();
+    this.errorSubject$.complete();
   }
 
   protected previousStep(): void {
@@ -53,17 +59,49 @@ export class RbacAddAssignmentComponent implements OnDestroy {
   }
 
   protected addRoleAssignment(): void {
-    if (this.selectedRole === undefined || this.searchPrincipalInput.trim().length === 0) {
+    if (this.isCreatingRoleAssignment || this.selectedRole === undefined || this.searchPrincipalInput.trim().length === 0) {
       return;
     }
 
-    // TODO: Add switch button to determine whether ApiKey/User
-    //       Add notifications for various outcomes
+    this.isCreatingRoleAssignment = true;
 
-    // TODO: Only if successful
-    this.searchPrincipalInput = '';
-    this.assignmentAddedSubject$.next();
-  }
+    const request: CreateRoleAssignmentEndpointRequest = {
+      scopeId: this.targetScopeId,
+      role: this.selectedRole,
+      description: null, // TODO
+      apiKeyId: this.selectedPrincipalKind === PrincipalKind.ApiKey ? this.searchPrincipalInput.trim() : null,
+      userEmail: this.selectedPrincipalKind === PrincipalKind.User ? this.searchPrincipalInput.trim() : null
+    };
 
-  protected readonly PrincipalKind = PrincipalKind;
+    this.roleAssignmentsService
+      .createRoleAssignment({ body: request })
+      .pipe(finalize(() => (this.isCreatingRoleAssignment = false)))
+      .subscribe({
+        next: () => {
+          this.notificationService.showNotification(
+            'success',
+            'Portal.RbacManagement.AddRoleAssignment.CreateSuccessToast.Title',
+            'Portal.RbacManagement.AddRoleAssignment.CreateSuccessToast.Message'
+          );
+          this.modal.close();
+        },
+        error: (error: { status?: number }) => {
+          if (error.status === 400) {
+            this.notificationService.showNotification(
+              'error',
+              'Portal.RbacManagement.AddRoleAssignment.PrincipalNotFoundToast.Title',
+              'Portal.RbacManagement.AddRoleAssignment.PrincipalNotFoundToast.Message'
+            );
+          } else if (error.status === 409) {
+            this.notificationService.showNotification(
+              'error',
+              'Portal.RbacManagement.AddRoleAssignment.AssignmentAlreadyExists.Title',
+              'Portal.RbacManagement.AddRoleAssignment.AssignmentAlreadyExists.Message'
+            );
+          } else {
+            this.errorSubject$.next(error);
+          }
+        }
+      });
+  }
 }
diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
index 9250460f..2fcf28a4 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-offcanvas/rbac-offcanvas.component.ts
@@ -126,7 +126,9 @@ export class RbacOffcanvasComponent implements OnDestroy {
     const component = ref.componentInstance as RbacAddAssignmentComponent;
 
     component.scopeId = this.target.rbacScopeId;
-    component.assignmentAdded$.subscribe(() => this.loadRoleAssignments());
+    component.error$.subscribe((error) => this.errorSubject$.next(error));
+
+    ref.closed.subscribe(() => this.loadRoleAssignments());
   }
 
   private loadRoleAssignments(): void {
diff --git a/src/Turnierplan.App/Endpoints/RoleAssignments/CreateRoleAssignmentEndpoint.cs b/src/Turnierplan.App/Endpoints/RoleAssignments/CreateRoleAssignmentEndpoint.cs
index ddd14de3..82acdbcf 100644
--- a/src/Turnierplan.App/Endpoints/RoleAssignments/CreateRoleAssignmentEndpoint.cs
+++ b/src/Turnierplan.App/Endpoints/RoleAssignments/CreateRoleAssignmentEndpoint.cs
@@ -144,7 +144,7 @@ public sealed record CreateRoleAssignmentEndpointRequest
 
         public required string? UserEmail { get; init; }
 
-        public required string Description { get; init; }
+        public required string? Description { get; init; }
     }
 
     private sealed class Validator : AbstractValidator<CreateRoleAssignmentEndpointRequest>
@@ -164,7 +164,9 @@ private Validator()
                 .WithMessage($"Exactly only one of {nameof(CreateRoleAssignmentEndpointRequest.ApiKeyId)} and {nameof(CreateRoleAssignmentEndpointRequest.UserEmail)} must be specified.");
 
             RuleFor(x => x.Description)
-                .MaximumLength(ValidationConstants.RoleAssignment.MaxDescriptionLength);
+                .NotEmpty()
+                .MaximumLength(ValidationConstants.RoleAssignment.MaxDescriptionLength)
+                .When(x => x.Description is not null);
         }
     }
 }

From 41c27ed11edeeedc1feac9e05a1ec45718e6bfea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 16:15:00 +0200
Subject: [PATCH 13/14] rm

---
 src/Turnierplan.App/Client/src/app/i18n/de.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Turnierplan.App/Client/src/app/i18n/de.ts b/src/Turnierplan.App/Client/src/app/i18n/de.ts
index 5612a5a4..5cc6cb67 100644
--- a/src/Turnierplan.App/Client/src/app/i18n/de.ts
+++ b/src/Turnierplan.App/Client/src/app/i18n/de.ts
@@ -969,7 +969,6 @@ export const de = {
         Title: 'Rollenzuweisung hinzufügen',
         PreviousStep: 'Zurück',
         NextStep: 'Weiter',
-        Confirm: 'Erstellen',
         StepTitle: {
           SelectRole: 'Rolle selektieren',
           SelectPrincipal: 'Prinzipal selektieren'

From da969b6c143c3e5b4237bb2c5cc32d95c34d152e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Elias=20H=C3=B6rner?= <elias.hoerner@hoerner-it.net>
Date: Fri, 27 Jun 2025 16:17:37 +0200
Subject: [PATCH 14/14] space

---
 .../rbac-add-assignment/rbac-add-assignment.component.ts         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
index 57ac9223..56b1ab09 100644
--- a/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
+++ b/src/Turnierplan.App/Client/src/app/portal/components/rbac-add-assignment/rbac-add-assignment.component.ts
@@ -53,6 +53,7 @@ export class RbacAddAssignmentComponent implements OnDestroy {
       this.step = 'SelectPrincipal';
     }
   }
+
   protected selectRole(role: Role): void {
     this.selectedRole = role;
     this.step = 'SelectPrincipal';