refactor: update data handling, implements feedback

apps/client/src/app/pages/register/register-page.component.ts

@@ -68,11 +68,6 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
 
   public openShowAccessTokenDialog() {
     const dialogRef = this.dialog.open(ShowAccessTokenDialog, {
-      data: {
-        accessToken: undefined,
-        authToken: undefined,
-        role: undefined
-      },
       disableClose: true,
       width: '30rem'
     });
@@ -80,9 +75,9 @@ export class RegisterPageComponent implements OnDestroy, OnInit {
     dialogRef
       .afterClosed()
       .pipe(takeUntil(this.unsubscribeSubject))
-      .subscribe((data) => {
-        if (data?.authToken) {
-          this.tokenStorageService.saveToken(data.authToken, true);
+      .subscribe((authToken) => {
+        if (authToken) {
+          this.tokenStorageService.saveToken(authToken, true);
 
           this.router.navigate(['/']);
         }

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts

@@ -2,11 +2,10 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
-  Inject,
   ViewChild
 } from '@angular/core';
-import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -20,13 +19,16 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class ShowAccessTokenDialog {
   @ViewChild(MatStepper) stepper!: MatStepper;
-  public isCreateAccountButtonDisabled = true;
+  public accessToken: string;
+  public authToken: string;
   public disclaimerChecked = false;
+  public isCreateAccountButtonDisabled = true;
+  public role: string;
 
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
-    @Inject(MAT_DIALOG_DATA) public data: any,
+    private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService
   ) {}
 
@@ -43,12 +45,13 @@ export class ShowAccessTokenDialog {
       .postUser()
       .pipe(takeUntil(this.unsubscribeSubject))
       .subscribe(({ accessToken, authToken, role }) => {
-        this.data = {
-          accessToken,
-          authToken,
-          role
-        };
+        this.accessToken = accessToken;
+        this.authToken = authToken;
+        this.role = role;
+
         this.stepper.next();
+
+        this.changeDetectorRef.markForCheck();
       });
   }
 }

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.html

@@ -1,7 +1,7 @@
 <h1 mat-dialog-title>
   <span i18n>Create Account</span>
-  @if (data.role === 'ADMIN') {
-    <span class="badge badge-light ml-2">{{ data.role }}</span>
+  @if (role === 'ADMIN') {
+    <span class="badge badge-light ml-2">{{ role }}</span>
   }
 </h1>
 <div class="py-3" mat-dialog-content>
@@ -62,13 +62,13 @@
           matInput
           readonly
           type="text"
-          [(value)]="data.accessToken"
+          [(value)]="accessToken"
         ></textarea>
         <div class="float-right mt-1">
           <button
             color="secondary"
             mat-flat-button
-            [cdkCopyToClipboard]="data.accessToken"
+            [cdkCopyToClipboard]="accessToken"
             (click)="enableCreateAccountButton()"
           >
             <ion-icon class="mr-1" name="copy-outline" />
@@ -83,7 +83,7 @@
             mat-flat-button
             matStepperNext
             [disabled]="isCreateAccountButtonDisabled"
-            [mat-dialog-close]="data"
+            [mat-dialog-close]="authToken"
           >
             <span i18n>Create Account</span>
             <ion-icon class="ml-1" name="arrow-forward-outline" />

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.module.ts

@@ -23,13 +23,13 @@ import { ShowAccessTokenDialog } from './show-access-token-dialog.component';
     CommonModule,
     FormsModule,
     MatButtonModule,
+    MatCheckboxModule,
     MatDialogModule,
     MatFormFieldModule,
     MatInputModule,
-    ReactiveFormsModule,
-    TextFieldModule,
     MatStepperModule,
-    MatCheckboxModule
+    ReactiveFormsModule,
+    TextFieldModule
   ],
   providers: [
     {