Task/improve type safety in client services (#7175)

Improve type safety

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

@@ -101,7 +101,7 @@ export class GfHeaderComponent implements OnChanges {
   protected hasPermissionToAccessAssistant: boolean;
   protected hasPermissionToAccessFearAndGreedIndex: boolean;
   protected hasPermissionToCreateUser: boolean;
-  protected impersonationId: string;
+  protected impersonationId: string | null;
   protected readonly internalRoutes = internalRoutes;
   protected isMenuOpen: boolean;
   protected readonly routeAbout = publicRoutes.about.path;

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

@@ -103,7 +103,7 @@ export class AdminPageComponent {
     const token = this.tokenStorageService.getToken();
 
     document.cookie = [
-      `${BULL_BOARD_COOKIE_NAME}=${encodeURIComponent(token)}`,
+      `${BULL_BOARD_COOKIE_NAME}=${encodeURIComponent(token ?? '')}`,
       'path=/',
       'SameSite=Strict'
     ].join('; ');

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

@@ -25,7 +25,7 @@ export class GfDemoPageComponent {
   }
 
   public ngOnInit() {
-    const hasToken = this.tokenStorageService.getToken()?.length > 0;
+    const hasToken = !!this.tokenStorageService.getToken();
 
     if (hasToken) {
       this.notificationService.alert({

apps/client/src/app/services/impersonation-storage.service.ts

@@ -7,11 +7,11 @@ export const IMPERSONATION_KEY = 'impersonationId';
   providedIn: 'root'
 })
 export class ImpersonationStorageService {
-  private hasImpersonationChangeSubject = new BehaviorSubject<string>(
+  private hasImpersonationChangeSubject = new BehaviorSubject<string | null>(
     this.getId()
   );
 
-  public getId(): string {
+  public getId(): string | null {
     return window.localStorage.getItem(IMPERSONATION_KEY);
   }
 

apps/client/src/app/services/settings-storage.service.ts

@@ -8,7 +8,7 @@ export const KEY_TOKEN = 'auth-token';
   providedIn: 'root'
 })
 export class SettingsStorageService {
-  public getSetting(aKey: string): string {
+  public getSetting(aKey: string): string | null {
     return window.localStorage.getItem(aKey);
   }
 

apps/client/src/app/services/token-storage.service.ts

@@ -6,9 +6,9 @@ import { KEY_TOKEN } from './settings-storage.service';
   providedIn: 'root'
 })
 export class TokenStorageService {
-  public getToken(): string {
+  public getToken(): string | null {
     return (
-      window.sessionStorage.getItem(KEY_TOKEN) ||
+      window.sessionStorage.getItem(KEY_TOKEN) ??
       window.localStorage.getItem(KEY_TOKEN)
     );
   }

apps/client/src/app/services/user/user.service.ts

@@ -3,7 +3,7 @@ import { Filter, User } from '@ghostfolio/common/interfaces';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { HttpClient } from '@angular/common/http';
-import { DestroyRef, Injectable } from '@angular/core';
+import { computed, DestroyRef, inject, Injectable } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { MatDialog } from '@angular/material/dialog';
 import { ObservableStore } from '@codewithdan/observable-store';
@@ -22,20 +22,20 @@ import { UserStoreState } from './user-store.state';
   providedIn: 'root'
 })
 export class UserService extends ObservableStore<UserStoreState> {
-  private deviceType: string;
+  private readonly deviceType = computed(
-
+    () => this.deviceDetectorService.deviceInfo().deviceType
-  public constructor(
+  );
-    private destroyRef: DestroyRef,
+
-    private deviceDetectorService: DeviceDetectorService,
+  private readonly destroyRef = inject(DestroyRef);
-    private dialog: MatDialog,
+  private readonly deviceDetectorService = inject(DeviceDetectorService);
-    private http: HttpClient,
+  private readonly dialog = inject(MatDialog);
-    private webAuthnService: WebAuthnService
+  private readonly http = inject(HttpClient);
-  ) {
+  private readonly webAuthnService = inject(WebAuthnService);
+
+  public constructor() {
     super({ trackStateHistory: true });
 
     this.setState({ user: undefined }, UserStoreActions.Initialize);
-
-    this.deviceType = this.deviceDetectorService.getDeviceInfo().deviceType;
   }
 
   public get(force = false) {
@@ -97,7 +97,7 @@ export class UserService extends ObservableStore<UserStoreState> {
   }
 
   public reset() {
-    this.setState({ user: null }, UserStoreActions.RemoveUser);
+    this.setState({ user: undefined }, UserStoreActions.RemoveUser);
   }
 
   public signOut() {
@@ -127,7 +127,19 @@ export class UserService extends ObservableStore<UserStoreState> {
 
     const cookies = await cookieStore.getAll();
 
-    await Promise.all(cookies.map(({ name }) => cookieStore.delete(name)));
+    const cookieNames = cookies
+      .map(({ name }) => {
+        return name;
+      })
+      .filter((name): name is string => {
+        return !!name;
+      });
+
+    await Promise.all(
+      cookieNames.map((name) => {
+        return cookieStore.delete(name);
+      })
+    );
   }
 
   private fetchUser(): Observable<User> {
@@ -158,8 +170,8 @@ export class UserService extends ObservableStore<UserStoreState> {
               user
             },
             disableClose: true,
-            height: this.deviceType === 'mobile' ? '98vh' : '80vh',
+            height: this.deviceType() === 'mobile' ? '98vh' : '80vh',
-            width: this.deviceType === 'mobile' ? '100vw' : '50rem'
+            width: this.deviceType() === 'mobile' ? '100vw' : '50rem'
           });
 
           dialogRef

apps/client/src/app/services/web-authn.service.ts

@@ -6,7 +6,7 @@ import {
 } from '@ghostfolio/common/interfaces';
 
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import {
   startAuthentication,
   startRegistration
@@ -20,10 +20,8 @@ import { catchError, switchMap, tap } from 'rxjs/operators';
 export class WebAuthnService {
   private static readonly WEB_AUTH_N_DEVICE_ID = 'WEB_AUTH_N_DEVICE_ID';
 
-  public constructor(
+  private readonly http = inject(HttpClient);
-    private http: HttpClient,
+  private readonly settingsStorageService = inject(SettingsStorageService);
-    private settingsStorageService: SettingsStorageService
-  ) {}
 
   public isSupported() {
     return typeof PublicKeyCredential !== 'undefined';
@@ -44,8 +42,12 @@ export class WebAuthnService {
           console.warn('Could not register device', error);
           return of(null);
         }),
-        switchMap((attOps) => {
+        switchMap((registrationOptions) => {
-          return startRegistration({ optionsJSON: attOps });
+          if (!registrationOptions) {
+            throw new Error('Could not generate registration options');
+          }
+
+          return startRegistration({ optionsJSON: registrationOptions });
         }),
         switchMap((credential) => {
           return this.http.post<AuthDeviceDto>(
@@ -53,10 +55,10 @@ export class WebAuthnService {
             { credential }
           );
         }),
-        tap((authDevice) =>
+        tap(({ id }) =>
           this.settingsStorageService.setSetting(
             WebAuthnService.WEB_AUTH_N_DEVICE_ID,
-            authDevice.id
+            id
           )
         )
       );