Refactor HeaderComponent to organize inputs, inject dependencies, and improve HTML formatting. Add logout method for authentication management.

frontend/src/app/pages/header/header/header.component.html

@@ -154,6 +154,12 @@
                 Login
               </a>
             </li>
+          } @else {
+            <li class="nav_li login-button">
+              <a class="nav_link fake_link" (click)="logout()">
+                Login
+              </a>
+            </li>
           }
         </ul>
 

frontend/src/app/pages/header/header/header.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, OnDestroy, OnInit} from '@angular/core';
+import {Component, HostListener, inject, Input, OnDestroy, OnInit} from '@angular/core';
 import {CommonModule, NgOptimizedImage} from '@angular/common';
 import {ThemeComponent} from '@shared-components/theme/theme.component';
 import {RouterLink} from '@angular/router';
@@ -20,6 +20,10 @@ import {MatDialog} from '@angular/material/dialog';
   styleUrls: ['./header.component.scss']
 })
 export class HeaderComponent implements OnInit, OnDestroy {
+
+  private authService: AuthService = inject(AuthService)
+  private dialog: MatDialog = inject(MatDialog)
+
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
@@ -30,11 +34,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
   private subscription: Subscription | undefined;
   public isAuthenticated: boolean = false;
 
-  constructor(protected authService: AuthService,
-              private dialog: MatDialog) {
-
-  }
-
   ngOnInit(): void {
     this.subscription = this.authService.isAuthenticated$.subscribe(isAuthenticated => {
         this.isAuthenticated = isAuthenticated;
@@ -94,4 +93,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
   public hasAccess(claims: string[]): boolean {
     return this.authService.hasAccess(claims)
   }
+
+  protected logout() {
+    this.authService.logout()
+  }
 }