dev env setup

packages/frontend/src/app/app.config.ts

@@ -1,5 +1,6 @@
 import {
   ApplicationConfig,
+  isDevMode,
   provideBrowserGlobalErrorListeners,
   provideZoneChangeDetection,
 } from '@angular/core';
@@ -29,7 +30,7 @@ export const appConfig: ApplicationConfig = {
     provideZoneChangeDetection({ eventCoalescing: true }),
     provideKeycloak({
       config: {
-        url: 'https://keycloak.toni714.de:8443/',
+        url: isDevMode() ? 'http://localhost:8080/' : 'https://keycloak.toni714.de:8443/',
         realm: 'taekwondo',
         clientId: 'angular-frontend',
       },
@@ -44,7 +45,7 @@ export const appConfig: ApplicationConfig = {
       provide: INCLUDE_BEARER_TOKEN_INTERCEPTOR_CONFIG,
       useValue: [
         createInterceptorCondition<IncludeBearerTokenCondition>({
-          urlPattern: /^https:\/\/tkd-api\.toni714\.de.*$/,
+          urlPattern: isDevMode()? /^http:\/\/localhost:3000.*$/ : /^https:\/\/tkd-api\.toni714\.de.*$/,
         }),
       ],
     },

packages/frontend/src/app/app.html

@@ -1,7 +1,7 @@
-@if(this.loggedIn()){
+@if(this.auth.loggedIn()){
 <div class="no-print">
-  <button mat-flat-button color="accent" (click)="onLogOut()">LogOut</button>
-  <a mat-stroked-button color="primary" [routerLink]="['/home']">Home</a>
+  <button mat-flat-button color="accent" (click)="this.auth.logout()">LogOut</button>
+  <button mat-stroked-button color="primary" [routerLink]="['/home']">Home</button>
 </div>
 }
 <router-outlet></router-outlet>

packages/frontend/src/app/app.routes.ts

@@ -16,7 +16,7 @@ export const roles = {
   MemberAdmin: 'memberadmin',
 };
 
-function requireRoles(roles: string[], any: boolean = false): CanActivateFn {
+function requireRoles(roles: string[]=[], any: boolean = false): CanActivateFn {
   const isAllowed = async (
     _: ActivatedRouteSnapshot,
     __: RouterStateSnapshot,
@@ -44,7 +44,12 @@ export const routes: Routes = [
   {
     path: '',
     loadComponent: () => import('./components/home/home').then((mod) => mod.Home),
-    canActivate: [requireRoles([roles.MemberAdmin, roles.UserAdmin], true)],
+    canActivate: [requireRoles()],
+  },
+  {
+    path: 'home',
+    loadComponent: () => import('./components/home/home').then((mod) => mod.Home),
+    canActivate: [requireRoles()],
   },
   { path: '**', component: MissingPage },
 ];

packages/frontend/src/app/app.ts

@@ -1,6 +1,7 @@
-import { Component, signal } from '@angular/core';
+import { Component, inject, signal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule, RouterOutlet } from '@angular/router';
+import { Authentication } from './services/authentication';
 
 @Component({
   selector: 'app-root',
@@ -9,10 +10,6 @@ import { RouterModule, RouterOutlet } from '@angular/router';
   styleUrl: './app.scss',
 })
 export class App {
-  protected loggedIn = signal(false);
   protected readonly title = signal('frontend');
-
-  protected onLogOut() {
-    this.loggedIn.set(false);
-  }
+  protected readonly auth = inject(Authentication);
 }

packages/frontend/src/app/components/home/home.html

@@ -1 +1,14 @@
-<p>home works!</p>
+<h1>Startseite</h1>
+<ul>
+    <!--TODO fix theming/colors-->
+  <button matButton="outlined" class="warn-button" [routerLink]="['/test']">
+    Entwichlungsinformationen
+  </button>
+  <button matButton="filled" color="primary" [routerLink]="['/list']">Mitglieder</button>
+  <button matButton="filled" color="warn" [routerLink]="['/manageUsers']">
+    Benutzer Verwalten
+  </button>
+  <button matButton="filled" color="primary" [routerLink]="['/exam']">
+    Prüfungsanmeldung
+  </button>
+</ul>

packages/frontend/src/app/components/home/home.ts

@@ -1,8 +1,10 @@
 import { Component } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { RouterModule } from '@angular/router';
 
 @Component({
   selector: 'app-home',
-  imports: [],
+  imports: [RouterModule, MatButtonModule],
   templateUrl: './home.html',
   styleUrl: './home.scss',
 })

packages/frontend/src/app/components/login/login.ts

@@ -1,4 +1,5 @@
 import { Component, inject } from '@angular/core';
+import { Router } from '@angular/router';
 import { Authentication } from '../../services/authentication';
 
 @Component({
@@ -9,7 +10,13 @@ import { Authentication } from '../../services/authentication';
 })
 export class Login {
   private readonly authentication = inject(Authentication);
+  private readonly router = inject(Router);
+
   public constructor() {
-    this.authentication.login();
+    if(this.authentication.loggedIn()){
+      this.router.navigate(['/home']);
+    }else{
+      this.authentication.login();
+    }
   }
 }

packages/frontend/src/app/services/authentication.ts

@@ -1,4 +1,4 @@
-import { effect, inject, Injectable, signal } from '@angular/core';
+import { computed, effect, inject, Injectable, signal } from '@angular/core';
 import {
   KEYCLOAK_EVENT_SIGNAL,
   KeycloakEventType,
@@ -22,6 +22,9 @@ export class Authentication {
   private readonly _authenticationState = signal<AuthenticationState>(AuthenticationState.Unknown);
   private readonly _userInfo = signal<KeycloakProfile | null>(null);
   public readonly authenticationState = this._authenticationState.asReadonly();
+  public readonly loggedIn = computed(()=>{
+    return this.authenticationState() === AuthenticationState.Authenticated;
+  });
   public readonly userInfo = this._userInfo.asReadonly();
 
   public constructor() {
@@ -69,6 +72,10 @@ export class Authentication {
   }
 
   public async login(location?: string): Promise<void> {
+    if(this._authenticationState() === AuthenticationState.Authenticated){
+      return;
+    }
+
     var redirectUri = location
       ? `${window.location.origin}/${location}`
       : `${window.location.origin}/login`;