Merge branch 'main' into deployment/backend

Reviewed-on: #12
Reviewed-by: lziemke <lea.z4@schule.bremen.de>
Reviewed-by: Constantin Simonis <constantin@simonis.lol>

.gitea/workflows/release.yml

@@ -0,0 +1,27 @@
+name: Release
+on:
+  push:
+    branches:
+      - "main"
+
+env:
+  GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}
+
+permissions:
+  contents: read
+
+jobs:
+  release:
+    name: Release
+    runs-on: remote
+    permissions:
+      contents: write
+      issues: write 
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Create Release
+        uses: https://git.kjan.de/actions/semantic-release@main
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITEA_TOKEN: ${{ secrets.GITEA_TOKEN }}

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,6 +1,16 @@
 import { Routes } from '@angular/router';
-import {LandingPageComponent} from "./landing-page/landing-page.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: '', 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;
   }
+
+  keycloakService.login();
+  return false;
 };

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

@@ -0,0 +1,29 @@
+<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" (click)="logout()">Ausloggen</button>
+    </div>
+    <div>
+      <button class="btn-primary">Benutzer</button>
+    </div>
+  </div>
+</nav>
+
+<div class="grid grid-cols-3">
+  <div class="w-1/3 h-1/4">
+    <p>Spiel Vorschau</p>
+    <p>Spiel Name</p>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
+  </div>
+  <div class="w-1/3 h-1/4">
+    <p>Spiel Vorschau</p>
+    <p>Spiel Name</p>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
+  </div>
+  <div class="w-1/3 h-1/4">
+    <p>Spiel Vorschau</p>
+    <p>Spiel Name</p>
+    <button type="button" class="btn-primary">Jetzt spielen</button>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+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,
+})
+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 +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;
+}
+.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;
+}

release.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+
+    branches: ['main'],
+    plugins: [
+      '@semantic-release/commit-analyzer',
+      '@semantic-release/release-notes-generator',
+      '@semantic-release/changelog',
+        ["@saithodev/semantic-release-gitea", {
+        "giteaUrl": "https://git.simonis.lol"
+      }],
+    ],
+  };
+  
+  
+