From 5660cf37d0a058aa820494bce55bcafc272ea99e Mon Sep 17 00:00:00 2001
From: KenTandrian <kenricktan11@gmail.com>
Date: Sat, 23 Aug 2025 01:01:23 +0700
Subject: [PATCH] feat(app): migrate login dialog

---
 .../login-with-access-token-dialog.component.ts       | 11 +++++++++--
 .../login-with-access-token-dialog.html               |  7 +++----
 .../login-with-access-token-dialog.module.ts          |  3 +--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts
index 9ee0adcdc..e143194e1 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts
+++ b/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
+      });
     }
   }
 
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
index 77191db8e..bcce4bfa8 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.html
+++ b/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>
diff --git a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts b/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
index d6035ae52..fcced81aa 100644
--- a/apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts
+++ b/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,