Migrate create and edit access dialogs to dedicated routes

apps/client/src/app/components/access-table/access-table.component.html

@@ -77,12 +77,15 @@
           @if (
             !isReceivedAccess() && user()?.settings?.isExperimentalFeatures
           ) {
-            <button mat-menu-item (click)="onUpdateAccess(element.id)">
+            <a
+              mat-menu-item
+              [routerLink]="accessDialogRouterLinks().get(element.id)"
+            >
               <span class="align-items-center d-flex">
                 <ion-icon class="mr-2" name="create-outline" />
                 <span><ng-container i18n>Edit</ng-container>...</span>
               </span>
-            </button>
+            </a>
           }
           @if (element.type === 'PUBLIC') {
             <button mat-menu-item (click)="onCopyUrlToClipboard(element.id)">

apps/client/src/app/components/access-table/access-table.component.ts

@@ -2,7 +2,7 @@ import { MCP_ENDPOINT } from '@ghostfolio/common/config';
 import { ConfirmationDialogType } from '@ghostfolio/common/enums';
 import { Access, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
-import { publicRoutes } from '@ghostfolio/common/routes/routes';
+import { internalRoutes, publicRoutes } from '@ghostfolio/common/routes/routes';
 import { getAccessLevel } from '@ghostfolio/common/scopes';
 import { GfAccessLevelIconComponent } from '@ghostfolio/ui/access-level-icon';
 import { NotificationService } from '@ghostfolio/ui/notifications';
@@ -60,7 +60,18 @@ export class GfAccessTableComponent {
   public readonly user = input.required<User>();
 
   public readonly accessDeleted = output<string>();
-  public readonly accessToUpdate = output<string>();
+
+  protected readonly accessDialogRouterLinks = computed(() => {
+    const { update } = internalRoutes.account.subRoutes.access.subRoutes;
+
+    const routerLinks = new Map<string, string[]>();
+
+    for (const { id } of this.accesses() ?? []) {
+      routerLinks.set(id, update.routerLink(id));
+    }
+
+    return routerLinks;
+  });
 
   protected readonly baseUrl = window.location.origin;
   protected readonly dataSource = new MatTableDataSource<Access>();
@@ -150,8 +161,4 @@ export class GfAccessTableComponent {
         : $localize`Do you really want to revoke this granted access?`
     });
   }
-
-  protected onUpdateAccess(aId: string) {
-    this.accessToUpdate.emit(aId);
-  }
 }

apps/client/src/app/components/user-account-access/access-dialog-host/access-dialog-host.component.ts

@@ -17,8 +17,9 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { DeviceDetectorService } from 'ngx-device-detector';
-import { Observable, Subject, of } from 'rxjs';
+import { EMPTY, Observable, Subject, of } from 'rxjs';
 import {
+  catchError,
   distinctUntilChanged,
   map,
   switchMap,
@@ -79,39 +80,39 @@ export class GfAccessDialogHostComponent implements OnDestroy, OnInit {
                   return { access, user };
                 })
               );
+            }),
+            catchError(() => {
+              this.navigateBack();
+
+              return EMPTY;
             })
           );
         }),
         takeUntilDestroyed(this.destroyRef)
       )
-      .subscribe({
-        error: () => {
-          this.navigateBack();
-        },
-        next: ({ access, user }) => {
-          if (mode === 'update') {
-            if (
-              !access ||
-              !hasPermission(user?.permissions, permissions.updateAccess)
-            ) {
-              this.navigateBack();
-
-              return;
-            }
-
-            this.openCreateOrUpdateAccessDialog({ access });
+      .subscribe(({ access, user }) => {
+        if (mode === 'update') {
+          if (
+            !access ||
+            !hasPermission(user?.permissions, permissions.updateAccess)
+          ) {
+            this.navigateBack();
 
             return;
           }
 
-          if (!hasPermission(user?.permissions, permissions.createAccess)) {
-            this.navigateBack();
+          this.openCreateOrUpdateAccessDialog({ access });
 
-            return;
-          }
+          return;
+        }
 
-          this.openCreateOrUpdateAccessDialog({});
+        if (!hasPermission(user?.permissions, permissions.createAccess)) {
+          this.navigateBack();
+
+          return;
         }
+
+        this.openCreateOrUpdateAccessDialog({});
       });
   }
 

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -28,7 +28,7 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
-import { Router, RouterModule } from '@angular/router';
+import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { addOutline, eyeOffOutline, eyeOutline } from 'ionicons/icons';
@@ -60,8 +60,8 @@ export class GfUserAccountAccessComponent {
   protected hasPermissionToCreateAccess: boolean;
   protected hasPermissionToDeleteAccess: boolean;
   protected hasPermissionToUpdateOwnAccessToken: boolean;
-  protected isAccessTokenHidden = true;
   protected readonly internalRoutes = internalRoutes;
+  protected isAccessTokenHidden = true;
   protected readonly updateOwnAccessTokenForm = new FormGroup({
     accessToken: new FormControl<string>('', {
       nonNullable: true,
@@ -77,7 +77,6 @@ export class GfUserAccountAccessComponent {
     ImpersonationStorageService
   );
   private readonly notificationService = inject(NotificationService);
-  private readonly router = inject(Router);
   private readonly userService = inject(UserService);
 
   public constructor() {
@@ -161,9 +160,7 @@ export class GfUserAccountAccessComponent {
         }),
         takeUntilDestroyed(this.destroyRef)
       )
-      .subscribe(() => {
-        this.update();
-      });
+      .subscribe();
   }
 
   protected onGenerateAccessToken() {
@@ -201,12 +198,6 @@ export class GfUserAccountAccessComponent {
     });
   }
 
-  protected onUpdateAccess(aId: string) {
-    void this.router.navigate(
-      internalRoutes.account.subRoutes.access.subRoutes.update.routerLink(aId)
-    );
-  }
-
   private update() {
     this.accessesGet = this.user.access.map(({ alias, id, scopes }) => {
       return {

apps/client/src/app/components/user-account-access/user-account-access.html

@@ -73,7 +73,6 @@
     [showActions]="hasPermissionToDeleteAccess"
     [user]="user"
     (accessDeleted)="onDeleteAccess($event)"
-    (accessToUpdate)="onUpdateAccess($event)"
   />
   @if (hasPermissionToCreateAccess) {
     <gf-fab