Add login button to header

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

@@ -130,7 +130,19 @@
               <li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
             </ul>
           </li>
+          <li class="nav_li" *ngIf="isAuthenticated">
+            <a [id]="getCurrentPageId(['particles'])"
+               class="nav_link fake_link" [ngClass]="active">Special</a>
+            <ul class="dropdown" *ngIf="hasAccess(['HEAD_MOD'])">
+              <li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
+            </ul>
+          </li>
         </ul>
+        <ng-container *ngIf="!isAuthenticated">
+          <button mat-button (click)="openLoginDialog()" style="color: white">
+            Login
+          </button>
+        </ng-container>
         <app-theme></app-theme>
       </div>
     </nav>

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

@@ -1,7 +1,12 @@
-import {Component, HostListener, Input} from '@angular/core';
+import {Component, HostListener, 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';
+import {AuthService} from '@services/auth.service';
+import {Subscription} from 'rxjs';
+import {LoginDialogComponent} from '@shared-components/login/login.component';
+import {MatButton} from '@angular/material/button';
+import {MatDialog} from '@angular/material/dialog';
 
 @Component({
   standalone: true,
@@ -9,13 +14,14 @@ import {RouterLink} from '@angular/router';
     CommonModule,
     ThemeComponent,
     RouterLink,
-    NgOptimizedImage
+    NgOptimizedImage,
+    MatButton
   ],
   selector: 'app-header',
   templateUrl: './header.component.html',
   styleUrls: ['./header.component.scss']
 })
-export class HeaderComponent {
+export class HeaderComponent implements OnInit, OnDestroy {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
@@ -23,6 +29,24 @@ export class HeaderComponent {
 
   public active: string = '';
   public inverseYPos: number = 0;
+  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;
+      }
+    );
+  }
+
+  ngOnDestroy(): void {
+    this.subscription?.unsubscribe();
+  }
 
   @HostListener('window:scroll', [])
   onWindowScroll(): void {
@@ -59,4 +83,17 @@ export class HeaderComponent {
       return '';
     }
   }
+
+  public openLoginDialog() {
+    const dialogRef = this.dialog.open(LoginDialogComponent, {
+      width: '400px',
+    })
+    dialogRef.afterClosed().subscribe(result => {
+      console.log(result);
+    });
+  }
+
+  public hasAccess(claims: string[]): boolean {
+    return this.authService.hasAccess(claims)
+  }
 }