Task/migrate login with access token dialog component to standalone (#5500)

* Migrate login with access token dialog component to standalone

* Update changelog

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- Refactored the login with access token dialog component to standalone
+
 ## 2.198.0 - 2025-09-11
 
 ### Changed

apps/client/src/app/components/header/header.component.ts

@@ -1,6 +1,5 @@
 import { UpdateUserSettingDto } from '@ghostfolio/api/app/user/update-user-setting.dto';
-import { LoginWithAccessTokenDialog } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
+import { GfLoginWithAccessTokenDialogComponent } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.component';
-import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module';
 import { LayoutService } from '@ghostfolio/client/core/layout.service';
 import { NotificationService } from '@ghostfolio/client/core/notification/notification.service';
 import { DataService } from '@ghostfolio/client/services/data.service';
@@ -59,7 +58,6 @@ import { catchError, takeUntil } from 'rxjs/operators';
     GfLogoComponent,
     GfPremiumIndicatorComponent,
     IonIcon,
-    LoginWithAccessTokenDialogModule,
     MatBadgeModule,
     MatButtonModule,
     MatMenuModule,
@@ -273,7 +271,7 @@ export class GfHeaderComponent implements OnChanges {
   }
 
   public openLoginDialog() {
-    const dialogRef = this.dialog.open(LoginWithAccessTokenDialog, {
+    const dialogRef = this.dialog.open(GfLoginWithAccessTokenDialogComponent, {
       autoFocus: false,
       data: {
         accessToken: '',

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

@@ -1,3 +1,4 @@
+import { GfDialogHeaderComponent } from '@ghostfolio/client/components/dialog-header/dialog-header.component';
 import { InternetIdentityService } from '@ghostfolio/client/services/internet-identity.service';
 import {
   KEY_STAY_SIGNED_IN,
@@ -5,22 +6,44 @@ import {
 } from '@ghostfolio/client/services/settings-storage.service';
 import { TokenStorageService } from '@ghostfolio/client/services/token-storage.service';
 
+import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
-import { FormControl, Validators } from '@angular/forms';
+import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import {
+  MatCheckboxChange,
+  MatCheckboxModule
+} from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 import { Router } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
 
 @Component({
-  selector: 'gf-login-with-access-token-dialog',
   changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    CommonModule,
+    GfDialogHeaderComponent,
+    IonIcon,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule
+  ],
+  selector: 'gf-login-with-access-token-dialog',
   styleUrls: ['./login-with-access-token-dialog.scss'],
-  templateUrl: 'login-with-access-token-dialog.html',
+  templateUrl: './login-with-access-token-dialog.html'
-  standalone: false
 })
-export class LoginWithAccessTokenDialog {
+export class GfLoginWithAccessTokenDialogComponent {
   public accessTokenFormControl = new FormControl(
     this.data.accessToken,
     Validators.required
@@ -29,7 +52,7 @@ export class LoginWithAccessTokenDialog {
 
   public constructor(
     @Inject(MAT_DIALOG_DATA) public data: any,
-    public dialogRef: MatDialogRef<LoginWithAccessTokenDialog>,
+    public dialogRef: MatDialogRef<GfLoginWithAccessTokenDialogComponent>,
     private internetIdentityService: InternetIdentityService,
     private router: Router,
     private settingsStorageService: SettingsStorageService,

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

@@ -1,31 +0,0 @@
-import { TextFieldModule } from '@angular/cdk/text-field';
-import { CommonModule } from '@angular/common';
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDialogModule } from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
-import { IonIcon } from '@ionic/angular/standalone';
-
-import { GfDialogHeaderComponent } from '../dialog-header/dialog-header.component';
-import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';
-
-@NgModule({
-  declarations: [LoginWithAccessTokenDialog],
-  imports: [
-    CommonModule,
-    GfDialogHeaderComponent,
-    IonIcon,
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatFormFieldModule,
-    MatInputModule,
-    ReactiveFormsModule,
-    TextFieldModule
-  ],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
-})
-export class LoginWithAccessTokenDialogModule {}