From 523e5f4eee597529849fe7b2e3af74bfa2cd51db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20S=C3=A4ume?= Date: Wed, 22 Jan 2025 10:04:14 +0100 Subject: [PATCH] Fix: Auth Bcakground reload after auth --- src/app/app.config.ts | 16 +-- src/app/core/auth/auth.service.ts | 24 +++-- .../views/dashboard/dashboard.component.ts | 98 ++++++++++--------- 3 files changed, 71 insertions(+), 67 deletions(-) diff --git a/src/app/app.config.ts b/src/app/app.config.ts index a03b899..942db50 100644 --- a/src/app/app.config.ts +++ b/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(), diff --git a/src/app/core/auth/auth.service.ts b/src/app/core/auth/auth.service.ts index bedfcf1..e4eece3 100644 --- a/src/app/core/auth/auth.service.ts +++ b/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; + public $user: BehaviorSubject; 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(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 { diff --git a/src/app/views/dashboard/dashboard.component.ts b/src/app/views/dashboard/dashboard.component.ts index 098f8d9..b8c7f9e 100644 --- a/src/app/views/dashboard/dashboard.component.ts +++ b/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 = new MatTableDataSource([]); employeesDisplayedColumns = ['id', 'first-name', 'last-name', 'skills', 'actions']; - $qualifications: Observable | undefined>; + $qualifications: Observable | 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) {