Add disconnection and minor improvements on login page.

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

@@ -2,8 +2,10 @@
     <button type="button">
         <mat-icon>menu</mat-icon>
     </button>
-    <img src="assets/images/codiki.png" alt="logo"/>
-    <span class="title">Codiki</span>
+    <a [routerLink]="['/home']">
+        <img src="assets/images/codiki.png" alt="logo"/>
+        <span class="title">Codiki</span>
+    </a>
 </div>
 <div>
     <input name="search-query" placeholder="Search something..." />
@@ -12,5 +14,10 @@
     </button>
 </div>
 <div>
-    <a [routerLink]="['/login']">Login</a>
+    <ng-container *ngIf="isAuthenticated; else anonymousRightMenu">
+        <a [routerLink]="['/disconnect']">Disconnect</a>
+    </ng-container>
+    <ng-template #anonymousRightMenu>
+        <a [routerLink]="['/login']">Login</a>
+    </ng-template>
 </div>

frontend/src/app/components/header/header.component.scss

@@ -25,14 +25,24 @@ $headerHeight: 3.5em;
             gap: 1em;
             padding: 0 1em;
 
-            img {
-                $imageSize: 2em;
-                width: $imageSize;
-                height: $imageSize;
-            }
+            a {
+                display: flex;
+                flex-direction: row;
+                justify-content: center;
+                align-items: center;
+                color: white;
+                text-decoration: none;
+                gap: .5em;
 
-            .title {
-                font-size: 1.5em;
+                img {
+                    $imageSize: 2em;
+                    width: $imageSize;
+                    height: $imageSize;
+                }
+    
+                .title {
+                    font-size: 1.5em;
+                }
             }
         }
 
@@ -76,6 +86,7 @@ $headerHeight: 3.5em;
                 align-items: center;
                 min-width: 5em;
                 color: white;
+                margin: 0 .5em;
             }
         }
     }

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

@@ -1,13 +1,21 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { AuthenticationService } from '../../core/service/authentication.service';
+import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, RouterModule],
+  imports: [CommonModule, MatButtonModule, MatIconModule, RouterModule],
   templateUrl: './header.component.html',
   styleUrl: './header.component.scss',
 })
-export class HeaderComponent {}
+export class HeaderComponent {
+  private authenticationService = inject(AuthenticationService);
+
+  get isAuthenticated(): boolean {
+    return this.authenticationService.isAuthenticated();
+  }
+}