Added login/logout button to topbar.

src/app/auth/login-button/login-button.component.html

@@ -0,0 +1,6 @@
+<button mat-icon-button
+        class="neutral"
+        matTooltip="Navigate to the log in page"
+        (click)="login()">
+  <mat-icon>login</mat-icon>
+</button>

src/app/auth/login-button/login-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginButtonComponent } from './login-button.component';
+
+describe('LoginButtonComponent', () => {
+  let component: LoginButtonComponent;
+  let fixture: ComponentFixture<LoginButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LoginButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LoginButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/login-button/login-button.component.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'login-button',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './login-button.component.html',
+  styleUrl: './login-button.component.scss'
+})
+export class LoginButtonComponent {
+  private readonly router = inject(Router);
+
+  login() {
+    this.router.navigate(['login']);
+  }
+}

src/app/auth/logoff-button/logoff-button.component.html

@@ -0,0 +1,6 @@
+<button mat-icon-button
+        class="danger"
+        matTooltip="Log off"
+        (click)="logoff()">
+  <mat-icon>logout</mat-icon>
+</button>

src/app/auth/logoff-button/logoff-button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogoffButtonComponent } from './logoff-button.component';
+
+describe('LogoffButtonComponent', () => {
+  let component: LogoffButtonComponent;
+  let fixture: ComponentFixture<LogoffButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LogoffButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LogoffButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/auth/logoff-button/logoff-button.component.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { ReactiveFormsModule } from '@angular/forms';
+import { ApiAuthenticationService } from '../../shared/services/api/api-authentication.service';
+
+@Component({
+  selector: 'logoff-button',
+  standalone: true,
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+    MatFormFieldModule,
+    MatTooltipModule,
+    ReactiveFormsModule,
+  ],
+  templateUrl: './logoff-button.component.html',
+  styleUrl: './logoff-button.component.scss'
+})
+export class LogoffButtonComponent {
+  private readonly auth = inject(ApiAuthenticationService);
+
+  logoff() {
+    this.auth.logout();
+  }
+}