bundle size

client/src/app/core/auth/auth.service.ts

@@ -1,9 +1,10 @@
 import { HttpClient } from '@angular/common/http';
 import { inject, Injectable } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { BehaviorSubject, Observable, tap, of, catchError } from 'rxjs';
 import { IUser } from '../../model/interface/user.interface';
 import { environment } from '../../../environments/environment.development';
+import { HotToastService } from '@ngxpert/hot-toast';
 
 @Injectable({
   providedIn: 'root'
@@ -13,7 +14,8 @@ export class AuthService {
   private accessTokenSubject = new BehaviorSubject<string | null>(null);
   private refreshToken: string | null = null;
   private http: HttpClient = inject(HttpClient);
-  private route: ActivatedRoute = inject(ActivatedRoute);
+  private router: Router = inject(Router);
+  private toast: HotToastService = inject(HotToastService);
 
   private user: IUser | null = null;
 
@@ -99,6 +101,8 @@ export class AuthService {
     this.refreshToken = null;
     localStorage.removeItem('accessToken_vault');
     localStorage.removeItem('refreshToken_vault');
+    this.router.navigateByUrl('/login');
+    this.toast.show('Du wurdest ausgeloggt.')
   }
 
   public routeToLogin() {

client/src/app/core/layout/layout.component.html

@@ -7,8 +7,8 @@
   <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
     <mat-icon>favorite</mat-icon>
   </button>
-  <button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
-    <mat-icon>share</mat-icon>
+  <button mat-icon-button (click)="logout()">
+    <mat-icon>logout</mat-icon>
   </button>
 </mat-toolbar>
 

client/src/app/core/layout/layout.component.ts

@@ -1,9 +1,10 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
+import { AuthService } from '../auth/auth.service';
 
 @Component({
   selector: 'app-layout',
@@ -13,5 +14,9 @@ import { RouterModule } from '@angular/router';
   styleUrl: './layout.component.scss'
 })
 export class LayoutComponent {
+  private authService: AuthService = inject(AuthService);
 
+  logout(){
+    this.authService.logout();
+  }
 }

client/src/app/modules/auth/login/login.component.html

@@ -1 +1,8 @@
-<button mat-flat-button color="primary" (click)="authService.routeToLogin()">Login</button>
+<div class="container">
+  <p>
+    Du bist nicht eingeloggt. Logge dich ein um zu Beginnen.
+  </p>
+  <div>
+    <button mat-raised-button color="primary" (click)="authService.routeToLogin()">Einloggen!</button>
+  </div>
+</div>

client/src/app/modules/auth/login/login.component.scss

@@ -0,0 +1,23 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+  background-image: url("../../../../assets/img/key_2.webp");
+  background-size: cover;
+}
+
+.container {
+  padding: 36px;
+  // border: 1px solid #ccc;
+  border-radius: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: white;
+  gap: 24px;
+  background: rgba(50, 50, 50, 0.4); /* halbtransparentes Weiß */
+  backdrop-filter: blur(5px); /* Unschärfe */
+}