Minor improvements

apps/api/src/app/access/create-access.dto.ts

@@ -1,4 +1,4 @@
-import { IsOptional, IsString } from 'class-validator';
+import { IsOptional, IsString, IsUUID } from 'class-validator';
 
 export class CreateAccessDto {
   @IsOptional()
@@ -6,7 +6,7 @@ export class CreateAccessDto {
   alias?: string;
 
   @IsOptional()
-  @IsString()
+  @IsUUID()
   granteeUserId?: string;
 
   @IsOptional()

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

@@ -14,7 +14,7 @@
   </ng-container>
 
   <ng-container matColumnDef="type">
-    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Type</th>
+    <th *matHeaderCellDef class="px-1" i18n mat-header-cell>Permission</th>
     <td *matCellDef="let element" class="px-1 text-nowrap" mat-cell>
       <div class="align-items-center d-flex">
         <ion-icon class="mr-1" name="lock-closed-outline" />

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

@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Inject,
   OnDestroy
@@ -8,10 +9,10 @@ import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { CreateAccessDto } from '@ghostfolio/api/app/access/create-access.dto';
 import { DataService } from '@ghostfolio/client/services/data.service';
+import { StatusCodes } from 'http-status-codes';
 import { EMPTY, Subject, catchError, takeUntil } from 'rxjs';
 
 import { CreateOrUpdateAccessDialogParams } from './interfaces/interfaces';
-import { StatusCodes } from 'http-status-codes';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,6 +27,7 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
+    private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: CreateOrUpdateAccessDialogParams,
     public dialogRef: MatDialogRef<CreateOrUpdateAccessDialog>,
     private dataService: DataService,
@@ -36,17 +38,21 @@ export class CreateOrUpdateAccessDialog implements OnDestroy {
     this.accessForm = this.formBuilder.group({
       alias: [this.data.access.alias],
       type: [this.data.access.type, Validators.required],
-      userId: [this.data.access.grantee]
+      userId: [this.data.access.grantee, Validators.required]
     });
 
     this.accessForm.get('type').valueChanges.subscribe((value) => {
       const userIdControl = this.accessForm.get('userId');
+
       if (value === 'PRIVATE') {
         userIdControl.setValidators(Validators.required);
       } else {
         userIdControl.clearValidators();
       }
+
       userIdControl.updateValueAndValidity();
+
+      this.changeDetectorRef.markForCheck();
     });
   }
 

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

@@ -21,8 +21,8 @@
       <mat-form-field appearance="outline" class="w-100">
         <mat-label i18n>Type</mat-label>
         <mat-select formControlName="type">
-          <mat-option i18n value="PUBLIC">Public</mat-option>
           <mat-option i18n value="PRIVATE">Private</mat-option>
+          <mat-option i18n value="PUBLIC">Public</mat-option>
         </mat-select>
       </mat-form-field>
     </div>
@@ -30,7 +30,9 @@
     @if (accessForm.controls['type'].value === 'PRIVATE') {
     <div>
       <mat-form-field appearance="outline" class="w-100">
-        <mat-label i18n>User ID</mat-label>
+        <mat-label
+          >Ghostfolio <ng-container i18n>User ID</ng-container></mat-label
+        >
         <input
           formControlName="userId"
           matInput

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

@@ -105,7 +105,7 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
       data: {
         access: {
           alias: '',
-          type: 'PUBLIC'
+          type: 'PRIVATE'
         }
       },
       height: this.deviceType === 'mobile' ? '97.5vh' : '80vh',

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

@@ -201,7 +201,9 @@
         </div>
       </div>
       <div class="align-items-center d-flex mt-4 py-1">
-        <div class="pr-1 w-50" i18n>User ID</div>
+        <div class="pr-1 w-50">
+          Ghostfolio <ng-container i18n>User ID</ng-container>
+        </div>
         <div class="pl-1 text-monospace w-50">{{ user?.id }}</div>
       </div>
       <div class="align-items-center d-flex py-1">