Fix: Auth Bcakground reload after auth

src/app/app.config.ts

@@ -1,17 +1,17 @@
-import {provideHttpClient} from '@angular/common/http';
-import {ApplicationConfig, provideZoneChangeDetection} from '@angular/core';
+import { provideHttpClient } from '@angular/common/http';
+import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
 import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
-import {provideAnimationsAsync} from '@angular/platform-browser/animations/async';
-import {provideRouter} from '@angular/router';
-import {routes} from '@app/app.routes';
-import {OpenAPI} from '@core/ems/core/OpenAPI';
-import {LogLevel, provideAuth} from 'angular-auth-oidc-client';
+import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
+import { provideRouter } from '@angular/router';
+import { routes } from '@app/app.routes';
+import { OpenAPI } from '@core/ems/core/OpenAPI';
+import { LogLevel, provideAuth } from 'angular-auth-oidc-client';
 
 OpenAPI.BASE = 'http://localhost:8080';
 
 export const appConfig: ApplicationConfig = {
     providers: [
-        provideZoneChangeDetection({eventCoalescing: true}),
+        provideZoneChangeDetection({ eventCoalescing: true }),
         provideAnimationsAsync(),
         provideRouter(routes),
         provideHttpClient(),

src/app/core/auth/auth.service.ts

@@ -1,28 +1,26 @@
 import { Injectable } from '@angular/core';
 import { CanActivate, GuardResult, MaybeAsync, RedirectCommand, Router } from '@angular/router';
 import UserData from '@core/auth/UserData';
+import { OpenAPI } from '@core/ems';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { Observable } from 'rxjs';
-
-import { OpenAPI } from '../ems';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 @Injectable({
     providedIn: 'root'
 })
 export class AuthService implements CanActivate {
-    public $user: Observable<UserData | undefined>;
+    public $user: BehaviorSubject<UserData | undefined>;
 
     constructor(private readonly oidcSecurityService: OidcSecurityService, private router: Router) {
-        this.$user = new Observable((publish) => {
-            this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData }) => {
-                publish.next(isAuthenticated ? {
-                    username: userData.preferred_username,
-                    verified: userData.email_verified
-                } : undefined);
-            });
+        this.$user = new BehaviorSubject<UserData | undefined>(undefined);
+        this.oidcSecurityService.checkAuth().subscribe(({ isAuthenticated, userData, accessToken }) => {
+            OpenAPI.TOKEN = accessToken;
+            const isLoggedIn = isAuthenticated && userData != null && accessToken != '';
+            this.$user.next(isLoggedIn ? {
+                username: userData.preferred_username,
+                verified: userData.email_verified
+            } : undefined);
         });
-        this.oidcSecurityService.getAccessToken().subscribe(token => OpenAPI.TOKEN = token);
-
     }
 
     canActivate(): MaybeAsync<GuardResult> {

src/app/views/dashboard/dashboard.component.ts

@@ -1,20 +1,20 @@
-import {AsyncPipe} from '@angular/common';
-import {Component} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatDialog} from '@angular/material/dialog';
-import {MatFormFieldModule} from '@angular/material/form-field';
-import {MatIcon} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
-import {MatSelectModule} from '@angular/material/select';
-import {MatTableDataSource, MatTableModule} from '@angular/material/table';
-import {RouterLink} from '@angular/router';
-import {DeleteModelComponent} from '@app/delete-model/delete-model.component';
+import { AsyncPipe } from '@angular/common';
+import { Component, OnInit } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIcon } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { RouterLink } from '@angular/router';
+import { DeleteModelComponent } from '@app/delete-model/delete-model.component';
 import Filter from '@app/views/dashboard/Filter';
-import {AuthService} from '@core/auth/auth.service';
-import {Employee, EmployeeService, Qualification, QualificationService} from '@core/ems';
-import {NotificationService, NotificationType} from '@core/notification/notification.service';
-import {Observable} from 'rxjs';
+import { AuthService } from '@core/auth/auth.service';
+import { Employee, EmployeeService, Qualification, QualificationService } from '@core/ems';
+import { NotificationService, NotificationType } from '@core/notification/notification.service';
+import { Observable, of } from 'rxjs';
 
 @Component({
     selector: 'app-dashboard',
@@ -22,13 +22,13 @@ import {Observable} from 'rxjs';
     templateUrl: './dashboard.component.html',
     styleUrl: './dashboard.component.scss'
 })
-export class DashboardComponent {
+export class DashboardComponent implements OnInit {
     selectedQualificationFilter: Qualification | undefined;
     fuzzyFilter: string = '';
 
     employeeDataSource: MatTableDataSource<Employee> = new MatTableDataSource<Employee>([]);
     employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions'];
-    $qualifications: Observable<Array<Qualification> | undefined>;
+    $qualifications: Observable<Array<Qualification> | undefined> = of();
 
     constructor(
         protected auth: AuthService,
@@ -36,35 +36,41 @@ export class DashboardComponent {
         private qualificationService: QualificationService,
         private dialog: MatDialog,
         private notifications: NotificationService
-    ) {
-        this.$qualifications = this.qualificationService.getAllQualifications();
-        this.employeeService.getAllEmployees().subscribe((employees) => {
-            this.employeeDataSource = new MatTableDataSource(employees);
-            this.employeeDataSource.filterPredicate = (employee: Employee, rawFilter: string): boolean => {
-                const filter = JSON.parse(rawFilter) as Filter;
-                if (filter.fuzzy == '' && filter.qualification == undefined) {
+    ) { }
+    ngOnInit(): void {
+        this.auth.$user.subscribe((user) => {
+            if (user === undefined) {
+                return;
+            }
+            this.$qualifications = this.qualificationService.getAllQualifications();
+            this.employeeService.getAllEmployees().subscribe((employees) => {
+                this.employeeDataSource = new MatTableDataSource(employees);
+                this.employeeDataSource.filterPredicate = (employee: Employee, rawFilter: string): boolean => {
+                    const filter = JSON.parse(rawFilter) as Filter;
+                    if (filter.fuzzy == '' && filter.qualification == undefined) {
+                        return true;
+                    }
+
+                    if (
+                        filter.qualification != undefined
+                        && !employee.skillSet.map((skill) => skill.id).includes(filter.qualification.id)
+                    ) {
+                        return false;
+                    }
+
+                    if (
+                        filter.fuzzy != ''
+                        && !employee.id.toString().includes(filter.fuzzy)
+                        && !employee.firstName.toLowerCase().includes(filter.fuzzy)
+                        && !employee.lastName.toLowerCase().includes(filter.fuzzy)
+                    ) {
+                        return false;
+                    }
+
                     return true;
-                }
-
-                if (
-                    filter.qualification != undefined
-                    && !employee.skillSet.map((skill) => skill.id).includes(filter.qualification.id)
-                ) {
-                    return false;
-                }
-
-                if (
-                    filter.fuzzy != ''
-                    && !employee.id.toString().includes(filter.fuzzy)
-                    && !employee.firstName.toLowerCase().includes(filter.fuzzy)
-                    && !employee.lastName.toLowerCase().includes(filter.fuzzy)
-                ) {
-                    return false;
-                }
-
-                return true;
-            };
+                };
 
+            });
         });
     }
 
@@ -82,7 +88,7 @@ export class DashboardComponent {
             if (!accepted) {
                 return;
             }
-            this.employeeService.deleteEmployee({id: employee.id}).subscribe(() => {
+            this.employeeService.deleteEmployee({ id: employee.id }).subscribe(() => {
                 const data = this.employeeDataSource.data;
                 const i = data.indexOf(employee);
                 if (i != -1) {