feat: Navigationsleiste angepasst, Logout- und Neuen-Umschlag-Button hinzugefügt

- Navigationsleiste überarbeitet und das Layout optimiert.
- Logout-Button hinzugefügt, um den Benutzern das Abmelden zu erleichtern.
- Button für das Erstellen eines neuen Umschlags hinzugefügt, um die Benutzerfreundlichkeit zu verbessern.

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.html

@@ -1,23 +1,25 @@
 <!-- src/app/components/login/login.component.html -->
 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
-    <div class="mb-3">
-      <mat-form-field>
-        <mat-label>Username</mat-label>
-        <input matInput formControlName="username">
-      </mat-form-field>
-    </div>
-    <div class="mb-3">
-      <mat-form-field>
-        <mat-label>Enter your password</mat-label>
-        <input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
-        <button type="button" mat-icon-button matSuffix (click)="togglePWVisibility($event)" [attr.aria-label]="'Hide password'"
-                [attr.aria-pressed]="hide">
-          <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
-        </button>
-      </mat-form-field>
-    </div>
-    <div class="mb-3">
-      <button mat-flat-button color="primary" type="submit">Log In</button>
-    </div>
-  </form>
-  
+  <div class="mb-3">
+    <mat-form-field>
+      <mat-label>Username</mat-label>
+      <input matInput formControlName="username">
+    </mat-form-field>
+  </div>
+  <div class="mb-3">
+    <mat-form-field>
+      <mat-label>Enter your password</mat-label>
+      <input matInput [type]="hide ? 'password' : 'text'" formControlName="password">
+      <button type="button" mat-icon-button matSuffix (click)="togglePWVisibility($event)"
+        [attr.aria-label]="'Hide password'" [attr.aria-pressed]="hide">
+        <mat-icon>{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
+      </button>
+    </mat-form-field>
+  </div>
+  <div class="mb-3">
+    <button type="submit" class="btn" mat-flat-button color="primary">
+      <span class="me-2">Anmeldung</span>
+      <span class="p-0 m-0" [class.spinner-border]="wait4waitRes" [class.spinner-border-sm]="wait4waitRes" aria-hidden="true"></span>      
+      </button>
+  </div>
+</form>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/login/login.component.ts

@@ -18,6 +18,7 @@ import { ReactiveFormsModule } from '@angular/forms';
 export class LoginComponent {
   hide = true;
   loginForm: FormGroup;
+  wait4waitRes: boolean = false;
 
   constructor(private fb: FormBuilder, private authService: AuthService, private router: Router) {
     this.loginForm = this.fb.group({
@@ -33,12 +34,14 @@ export class LoginComponent {
 
   onSubmit() {
     if (this.loginForm.valid) {
+      this.wait4waitRes = true;
       this.authService.login(this.loginForm.value).subscribe({
         next: () => {
-          this.router.navigate(['/envelope']);
+          this.wait4waitRes = false;
+          this.router.navigate(['/envelope']);          
         },
         error: error => {
-          console.error('Login failed', error);
+          this.wait4waitRes = false;
         }
       });
     }

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.html

@@ -1,6 +1,36 @@
-<mat-toolbar color="primary" class="toolbar">
-  <button mat-icon-button>
-    <mat-icon>menu</mat-icon>
-  </button>
-  <span>signFlow</span>
-</mat-toolbar>
+<header>
+  <nav class="navbar navbar-expand-lg bg-body-tertiary fs-5">
+    <div class="container-fluid">
+      <a class="navbar-brand fs-2 fw-bold" [routerLink]="['/']">SignFlow</a>
+      <!-- Navbars -->
+      <div *ngIf="isLogedIn()" class="navbar-collapse collapse d-sm-inline-flex justify-content-center"
+        [ngClass]="{ show: isExpanded }">
+        <ul class=" navbar-nav flex-grow">
+          <li class="nav-item" [routerLinkActive]="['link-active']" [routerLinkActiveOptions]="{exact: true}">
+            <button class="btn nav-link d-flex flex-column align-items-center justify-content-center" (click)="router.navigate(['/'])">
+              <mat-icon>mail</mat-icon>
+              <span class="fs-6">Neuer Umschlag</span>
+            </button>
+          </li>
+        </ul>
+      </div>
+      <!-- Right menu -->
+      <div class="navbar-collapse justify-content-end me-5">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse"
+          aria-label="Toggle navigation" [attr.aria-expanded]="isExpanded" (click)="toggle()">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <button class="fs-5 btn d-flex align-items-center ms-2 me-0 pe-0" type="button" (click)="logInOut()">
+          @if(isLogedIn()){
+            <mat-icon>logout</mat-icon>
+            <span class="fs-6 ms-1">Abmelden</span>
+          }
+          @else {
+            <mat-icon>login</mat-icon>
+            <span class="fs-6 ms-1">Anmelden</span>
+          }
+        </button>
+      </div>
+    </div>
+  </nav>
+</header>

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/components/navbar/navbar.component.ts

@@ -1,23 +1,55 @@
-import { Component } from '@angular/core';
-import { MatToolbarModule } from '@angular/material/toolbar';
+import { Component, QueryList, ViewChildren } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { MatBadgeModule } from '@angular/material/badge';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { FormsModule } from '@angular/forms';
+import { MatTooltip, MatTooltipModule } from '@angular/material/tooltip';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatListModule } from '@angular/material/list';
+import { AuthService } from '../../services/auth.service'
+import { Observable } from 'rxjs';
 
 @Component({
-  selector: 'app-navbar',
   standalone: true,
-  imports: [
-    MatToolbarModule,
-    MatButtonModule,
-    MatIconModule,
-    MatSidenavModule,
-    MatListModule
-  ],
+  imports: [RouterModule, CommonModule, MatIconModule, MatBadgeModule, MatSlideToggleModule, FormsModule, MatButtonModule, MatTooltipModule],
+  selector: 'app-navbar',
   templateUrl: './navbar.component.html',
-  styleUrl: './navbar.component.scss'
+  styleUrls: ['./navbar.component.scss']
 })
 export class NavbarComponent {
+  isLogedIn(): boolean {
+    return this.authService.IsAuthenticated;
+  }
 
-}
+  async logInOut(): Promise<void> {
+    if (this.isLogedIn())
+      return this.authService.logoutAsync().then(() => {
+        this.router.navigate(['/']);
+      })
+    else
+      this.router.navigate(['/login']);
+  }
+
+  isExpanded = false;
+
+  isChecked = true;
+
+  constructor(public router: Router, public authService: AuthService) {
+  }
+
+  get isDarkTheme(): boolean {
+    return false;
+  }
+
+  collapse() {
+    this.isExpanded = false;
+  }
+
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  @ViewChildren(MatTooltip) tooltips: QueryList<MatTooltip> | undefined;
+
+}

EnvelopeGenerator.GeneratorAPI/ClientApp/envelope-generator-ui/src/app/services/auth.service.ts

@@ -1,6 +1,6 @@
 import { Injectable, inject } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { Observable } from 'rxjs';
+import { Observable, firstValueFrom, tap } from 'rxjs';
 import { API_URL } from '../tokens/index';
 
 @Injectable({
@@ -22,7 +22,18 @@ export class AuthService {
     return this.http.post(`${this.url}/logout`, {});
   }
 
+  async logoutAsync(): Promise<void> {
+    return await firstValueFrom(this.logout());
+  }
+
   isAuthenticated(): Observable<boolean> {
-    return this.http.get<boolean>(`${this.url}/check`);
+    return this.http.get<boolean>(`${this.url}/check`).pipe(
+      tap(isAuthenticated => this.#IsAuthenticated = isAuthenticated)
+    );
+  }
+
+  #IsAuthenticated = false;
+  get IsAuthenticated(): boolean {
+    return this.#IsAuthenticated;
   }
 }