feat(app): migrate login dialog

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts

@@ -6,6 +6,7 @@ import {
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
+import { FormControl, Validators } from '@angular/forms';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
@@ -20,6 +21,10 @@ import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
   standalone: false
 })
 export class LoginWithAccessTokenDialog {
+  public accessTokenControl = new FormControl(
+    this.data.accessToken,
+    Validators.required
+  );
   public isAccessTokenHidden = true;
 
   public constructor(
@@ -45,8 +50,10 @@ export class LoginWithAccessTokenDialog {
   }
 
   public onLoginWithAccessToken() {
-    if (this.data.accessToken) {
-      this.dialogRef.close(this.data);
+    if (this.accessTokenControl.valid) {
+      this.dialogRef.close({
+        accessToken: this.accessTokenControl.value
+      });
     }
   }
 

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html

@@ -11,9 +11,8 @@
         <mat-label i18n>Security Token</mat-label>
         <input
           matInput
-          name="password"
+          [formControl]="accessTokenControl"
           [type]="isAccessTokenHidden ? 'password' : 'text'"
-          [(ngModel)]="data.accessToken"
         />
         <button
           mat-button
@@ -65,8 +64,8 @@
     <button
       color="primary"
       mat-flat-button
-      [disabled]="!data.accessToken"
-      [mat-dialog-close]="data"
+      [disabled]="accessTokenControl.invalid || accessTokenControl.pristine"
+      (click)="onLoginWithAccessToken()"
     >
       <ng-container i18n>Sign in</ng-container>
     </button>

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -1,7 +1,7 @@
 import { TextFieldModule } from '@angular/cdk/text-field';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -16,7 +16,6 @@ import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.com
   declarations: [LoginWithAccessTokenDialog],
   imports: [
     CommonModule,
-    FormsModule,
     GfDialogHeaderModule,
     IonIcon,
     MatButtonModule,