Merge pull request 'feat: Implement Login and Logout functionality, protect authenticated routes' (!12) from feature/oauth into main

Reviewed-on: https://git.simonis.lol/projects/casino/pulls/12
Reviewed-by: lziemke <lea.z4@schule.bremen.de>
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

frontend/src/app/app.config.ts

@@ -1,4 +1,8 @@
-import { APP_INITIALIZER, ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
+import {
+  APP_INITIALIZER,
+  ApplicationConfig,
+  provideExperimentalZonelessChangeDetection,
+} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';

frontend/src/app/app.routes.ts

@@ -1,13 +1,16 @@
 import { Routes } from '@angular/router';
-import {LandingPageComponent} from "./landing-page/landing-page.component";
-import {HomepageComponent} from "./homepage/homepage/homepage.component";
+import { LandingPageComponent } from './landing-page/landing-page.component';
+import { HomepageComponent } from './homepage/homepage/homepage.component';
+import { authGuard } from './auth.guard';
 
 export const routes: Routes = [
   {
-    path: 'home',
-    component: HomepageComponent
+    path: '',
+    component: LandingPageComponent,
   },
-
-  { path: '', component: LandingPageComponent }
+  {
+    path: 'home',
+    component: HomepageComponent,
+    canActivate: [authGuard],
+  }
 ];
-

frontend/src/app/auth.guard.ts

@@ -2,15 +2,14 @@ import { CanActivateFn } from '@angular/router';
 import { inject } from '@angular/core';
 import { KeycloakService } from 'keycloak-angular';
 
-export const authGuard: CanActivateFn = async (route, state) => {
+export const authGuard: CanActivateFn = async () => {
   const keycloakService = inject(KeycloakService);
-
   const isLoggedIn = keycloakService.isLoggedIn();
 
   if (isLoggedIn) {
     return true;
-  } else {
+  }
+
   keycloakService.login();
   return false;
-  }
 };

frontend/src/app/homepage/homepage/homepage.component.html

@@ -1,16 +1,11 @@
-
 <nav class="bg-black border-b border-amber-600/30 sticky top-0 z-50">
   <div class="container mx-auto px-4 py-3 flex justify-between items-center">
     <!-- logo goes here -->
     <div class="flex gap-4">
-      <button class="btn-primary">
-        Ausloggen
-      </button>
+      <button class="btn-primary" (click)="logout()">Ausloggen</button>
     </div>
     <div>
-      <button class="btn-primary">
-        Benutzer
-      </button>
+      <button class="btn-primary">Benutzer</button>
     </div>
   </div>
 </nav>

frontend/src/app/homepage/homepage/homepage.component.ts

@@ -1,12 +1,17 @@
-import {ChangeDetectionStrategy, Component} from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
 
 @Component({
   selector: 'app-homepage',
   standalone: true,
   imports: [],
   templateUrl: './homepage.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HomepageComponent {
+  private keycloakService: KeycloakService = inject(KeycloakService);
 
+  logout() {
+    this.keycloakService.logout();
+  }
 }

frontend/src/app/landing-page/landing-page.component.html

@@ -0,0 +1 @@
+<button (click)="login()">Einloggen</button>

frontend/src/app/landing-page/landing-page.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
+import { KeycloakService } from 'keycloak-angular';
 
 @Component({
   selector: 'app-landing-page',
@@ -7,5 +8,9 @@ import { Component } from '@angular/core';
   templateUrl: './landing-page.component.html',
 })
 export class LandingPageComponent {
+  private keycloakService: KeycloakService = inject(KeycloakService);
 
+  login() {
+    this.keycloakService.login();
+  }
 }

frontend/src/styles.css

@@ -1,10 +1,8 @@
-@import "tailwindcss";
-
+@import 'tailwindcss';
 
 .btn-primary {
-  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20
+  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-gradient-to-r from-emerald-500 to-emerald-400 text-black hover:shadow-xl hover:shadow-emerald-500/20;
 }
 .btn-secondary {
-  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-white/10 text-white hover:bg-white/20
+  @apply px-4 py-2 cursor-pointer relative font-bold rounded-lg transition-all duration-300 ease-out transform-gpu hover:scale-105 will-change-transform bg-white/10 text-white hover:bg-white/20;
 }
-