hermes-web-angular/src/app/app.component.ts

import { isPlatformBrowser } from '@angular/common';
import { Component, OnInit, Inject, PLATFORM_ID, NgZone, OnDestroy, inject, HostBinding } from '@angular/core';
import { Router, RouterOutlet } from '@angular/router';
import { HermesClientService } from './hermes-client.service';
import { AuthUserGuard } from './shared/auth/auth.user.guard'
import { first, Subscription, timeout } from 'rxjs';
import EventService from './shared/services/EventService';
import { ApiAuthenticationService } from './shared/services/api/api-authentication.service';
import { AuthModule } from './auth/auth.module';
import { ApiKeyService } from './shared/services/api/api-key.service';
import ApiKey from './shared/models/api-key';
import { ThemeService } from './shared/services/theme.service';
import { OverlayContainer } from '@angular/cdk/overlay';
import { MatIconModule } from '@angular/material/icon';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { SidebarComponent } from "./navigation/sidebar/sidebar.component";
import { Topbar as TopbarComponent } from "./navigation/topbar/topbar.component";

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    AuthModule,
    RouterOutlet,
    MatButtonModule,
    MatIconModule,
    MatToolbarModule,
    SidebarComponent,
    TopbarComponent,
  ],
  providers: [AuthUserGuard],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent implements OnInit, OnDestroy {
  private readonly keyService = inject(ApiKeyService);
  private readonly overlayContainer = inject(OverlayContainer);
  private readonly themeService = inject(ThemeService);

  private isBrowser: boolean;
  private ngZone: NgZone;
  private subscriptions: Subscription[];

  authentication = inject(ApiAuthenticationService);
  isSidebarOpen: boolean = true

  @HostBinding('class.dark-theme')
  get isDarkTheme() {
    return this.themeService.isDarkTheme();
  }

  @HostBinding('class.light-theme')
  get isLightTheme() {
    return this.themeService.isLightTheme();
  }

  constructor(private auth: ApiAuthenticationService, private client: HermesClientService, private events: EventService, private router: Router, ngZone: NgZone, @Inject(PLATFORM_ID) private platformId: Object) {
    this.ngZone = ngZone;
    this.isBrowser = isPlatformBrowser(this.platformId);
    this.subscriptions = [];

    this.subscriptions.push(this.events.listen('tts_login_ack', async _ => {
      const url = router.url;
      const params = router.parseUrl(url).queryParams;
      const redirect = params['rd'];

      if (redirect && !(url.startsWith(redirect) || redirect.startsWith(url))) {
        await this.router.navigate([redirect]);
      } else if (url == '/' || url.startsWith('/login') || url.startsWith('/tts-login')) {
        await this.router.navigate(['policies']);
      }
    }));

    this.subscriptions.push(this.events.listen('tts_logoff', async _ => await this.router.navigate(['tts-login'])));
    this.subscriptions.push(this.events.listen('toggle_sidebar', () => this.isSidebarOpen = !this.isSidebarOpen))
  }

  ngOnInit(): void {
    if (!this.isBrowser)
      return;

    this.auth.update();

    this.addSubscription(this.events.listen('logoff', async (message) => {
      localStorage.removeItem('jwt');
      if (!document.location.href.includes('/login')) {
        if (message)
          await this.router.navigate(['login'], {
            queryParams: { message: message }
          });
        else
          await this.router.navigate(['login']);
      }
    }));

    this.addSubscription(this.events.listen('login', () => {
      this.keyService.fetch()
        .pipe(timeout(3000), first())
        .subscribe(async (d: ApiKey[]) => {
          if (d.length > 0)
            this.client.login(d[0].id);
          else if (['/login', '/auth'].some(partial => document.location.href.includes(partial)))
            await this.router.navigate(['tts-login']);
        });
    }));

    let currentTheme = localStorage.getItem('ui-theme') ?? this.themeService.theme;
    if (currentTheme == 'light' || currentTheme == 'dark') {
      this.themeService.theme = currentTheme;
    } else {
      this.themeService.theme = 'dark';
    }
    this.overlayContainer.getContainerElement().classList.add(this.themeService.theme + '-theme');

    this.addSubscription(this.events.listen('theme_change', data => {
      const classList = this.overlayContainer.getContainerElement().classList;
      classList.remove(data.previous_theme + '-theme');
      classList.add(data.current_theme + '-theme');
    }));

    this.ngZone.runOutsideAngular(() => setInterval(() => this.client.heartbeat(), 15000));
  }

  ngOnDestroy() {
    for (let s of this.subscriptions) {
      if (s) {
        s.unsubscribe();
      }
    }
  }

  private addSubscription(s: Subscription) {
    this.subscriptions.push(s);
  }
}