feat(client): resolve errors

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/create-or-update-access-dialog.component.ts

@@ -69,21 +69,25 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
   private readonly notificationService = inject(NotificationService);
 
   public constructor() {
-    this.mode = this.data.access?.id ? 'update' : 'create';
+    this.mode = this.data.access ? 'update' : 'create';
   }
 
   public ngOnInit() {
-    const isPublic = this.data.access.type === 'PUBLIC';
+    const access = this.data?.access;
+    const isPublic = access?.type === 'PUBLIC';
 
     this.accessForm = this.formBuilder.group({
-      alias: [this.data.access.alias],
+      alias: [access?.alias ?? ''],
       granteeUserId: [
-        this.data.access.grantee,
+        access?.grantee ?? null,
         isPublic ? null : Validators.required
       ],
-      permissions: [this.data.access.permissions[0], Validators.required],
+      permissions: [
+        access?.permissions[0] ?? 'READ_RESTRICTED',
+        Validators.required
+      ],
       type: [
-        { disabled: this.mode === 'update', value: this.data.access.type },
+        { disabled: this.mode === 'update', value: access?.type ?? 'PRIVATE' },
         Validators.required
       ]
     });
@@ -100,7 +104,9 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
         } else {
           granteeUserIdControl?.clearValidators();
           granteeUserIdControl?.setValue(null);
-          permissionsControl?.setValue(this.data.access.permissions[0]);
+          permissionsControl?.setValue(
+            access?.permissions[0] ?? 'READ_RESTRICTED'
+          );
         }
 
         granteeUserIdControl?.updateValueAndValidity();
@@ -158,10 +164,16 @@ export class GfCreateOrUpdateAccessDialogComponent implements OnInit {
   }
 
   private async updateAccess() {
+    const accessId = this.data.access?.id;
+
+    if (!accessId) {
+      return;
+    }
+
     const access: UpdateAccessDto = {
       alias: this.accessForm.get('alias')?.value,
       granteeUserId: this.accessForm.get('granteeUserId')?.value,
-      id: this.data.access.id,
+      id: accessId,
       permissions: [this.accessForm.get('permissions')?.value]
     };
 

apps/client/src/app/components/user-account-access/create-or-update-access-dialog/interfaces/interfaces.ts

@@ -1,5 +1,5 @@
 import { Access } from '@ghostfolio/common/interfaces';
 
 export interface CreateOrUpdateAccessDialogParams {
-  access: Access;
+  access?: Access;
 }

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

@@ -17,7 +17,12 @@ import {
   OnInit
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators
+} from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -60,8 +65,11 @@ export class GfUserAccountAccessComponent implements OnInit {
   public hasPermissionToDeleteAccess: boolean;
   public hasPermissionToUpdateOwnAccessToken: boolean;
   public isAccessTokenHidden = true;
-  public updateOwnAccessTokenForm = this.formBuilder.group({
-    accessToken: ['', Validators.required]
+  public updateOwnAccessTokenForm = new FormGroup({
+    accessToken: new FormControl<string>('', {
+      nonNullable: true,
+      validators: [Validators.required]
+    })
   });
   public user: User;
 
@@ -71,7 +79,6 @@ export class GfUserAccountAccessComponent implements OnInit {
     private destroyRef: DestroyRef,
     private deviceDetectorService: DeviceDetectorService,
     private dialog: MatDialog,
-    private formBuilder: FormBuilder,
     private notificationService: NotificationService,
     private route: ActivatedRoute,
     private router: Router,
@@ -144,7 +151,8 @@ export class GfUserAccountAccessComponent implements OnInit {
       confirmFn: () => {
         this.dataService
           .updateOwnAccessToken({
-            accessToken: this.updateOwnAccessTokenForm.get('accessToken').value
+            accessToken:
+              this.updateOwnAccessTokenForm.controls.accessToken.value
           })
           .pipe(
             catchError(() => {
@@ -184,15 +192,7 @@ export class GfUserAccountAccessComponent implements OnInit {
       GfCreateOrUpdateAccessDialogComponent,
       CreateOrUpdateAccessDialogParams
     >(GfCreateOrUpdateAccessDialogComponent, {
-      data: {
-        access: {
-          alias: '',
-          grantee: null,
-          id: null,
-          permissions: ['READ_RESTRICTED'],
-          type: 'PRIVATE'
-        }
-      },
+      data: {} satisfies CreateOrUpdateAccessDialogParams,
       height: this.deviceType === 'mobile' ? '98vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
@@ -222,12 +222,12 @@ export class GfUserAccountAccessComponent implements OnInit {
       data: {
         access: {
           alias: access.alias,
-          grantee: access.grantee === 'Public' ? null : access.grantee,
+          grantee: access.grantee === 'Public' ? undefined : access.grantee,
           id: access.id,
           permissions: access.permissions,
           type: access.type
         }
-      },
+      } satisfies CreateOrUpdateAccessDialogParams,
       height: this.deviceType === 'mobile' ? '98vh' : undefined,
       width: this.deviceType === 'mobile' ? '100vw' : '50rem'
     });
@@ -244,9 +244,9 @@ export class GfUserAccountAccessComponent implements OnInit {
   private update() {
     this.accessesGet = this.user.access.map(({ alias, id, permissions }) => {
       return {
-        alias,
         id,
         permissions,
+        alias: alias ?? '',
         grantee: $localize`Me`,
         type: 'PRIVATE'
       };