feat(auth): restructure oauth2 callback handling and service

frontend/src/app/app.routes.ts

@@ -34,20 +34,25 @@ export const routes: Routes = [
       ),
   },
   {
-    path: 'oauth2/callback/github',
-    loadComponent: () =>
-      import('./feature/auth/oauth2/oauth2-callback.component').then(
-        (m) => m.OAuth2CallbackComponent
-      ),
-    data: { provider: 'github' },
-  },
-  {
-    path: 'oauth2/callback/google',
-    loadComponent: () =>
-      import('./feature/auth/oauth2/oauth2-callback.component').then(
-        (m) => m.OAuth2CallbackComponent
-      ),
-    data: { provider: 'google' },
+    path: 'oauth2/callback',
+    children: [
+      {
+        path: 'github',
+        loadComponent: () =>
+          import('./feature/auth/oauth2/oauth2-callback.component').then(
+            (m) => m.OAuth2CallbackComponent
+          ),
+        data: { provider: 'github' },
+      },
+      {
+        path: 'google',
+        loadComponent: () =>
+          import('./feature/auth/oauth2/oauth2-callback.component').then(
+            (m) => m.OAuth2CallbackComponent
+          ),
+        data: { provider: 'google' },
+      },
+    ]
   },
   {
     path: 'game/blackjack',

frontend/src/app/feature/auth/oauth2/oauth2-callback.component.ts

@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, computed, inject, OnInit, Signal } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AuthService } from '@service/auth.service';
+import { Oauth2Service } from './oauth2.service';
 
 @Component({
   selector: 'app-oauth2-callback',
@@ -10,23 +11,21 @@ import { AuthService } from '@service/auth.service';
   template: `
     <div class="min-h-screen bg-deep-blue flex items-center justify-center">
       <div class="text-center">
-        <h2 class="text-2xl font-bold text-white mb-4">Finishing authentication...</h2>
+        <h2 class="text-2xl font-bold text-white mb-4">Authentifizierung...</h2>
         <div
           class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-emerald mx-auto"
         ></div>
-        <p *ngIf="error" class="mt-4 text-accent-red">{{ error }}</p>
+        <p *ngIf="error()" class="mt-4 text-accent-red">{{ error() }}</p>
       </div>
     </div>
   `,
 })
 export class OAuth2CallbackComponent implements OnInit {
-  error: string | null = null;
+  error: Signal<string> = computed(() => this.oauthService.error());
 
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private authService: AuthService
-  ) {}
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private router: Router = inject(Router);
+  private oauthService: Oauth2Service = inject(Oauth2Service);
 
   ngOnInit(): void {
     this.route.queryParams.subscribe((params) => {
@@ -34,39 +33,9 @@ export class OAuth2CallbackComponent implements OnInit {
       const provider = this.route.snapshot.data['provider'] || 'github';
 
       if (code) {
-        if (provider === 'google') {
-          this.authService.googleAuth(code).subscribe({
-            next: () => {
-              this.router.navigate(['/home']);
-            },
-            error: (err) => {
-              console.error('Google authentication error:', err);
-              this.error = err.error?.message || 'Authentication failed. Please try again.';
-              console.log('Error details:', err);
-
-              setTimeout(() => {
-                this.router.navigate(['/']);
-              }, 3000);
-            },
-          });
-        } else {
-          this.authService.githubAuth(code).subscribe({
-            next: () => {
-              this.router.navigate(['/home']);
-            },
-            error: (err) => {
-              console.error('GitHub authentication error:', err);
-              this.error = err.error?.message || 'Authentication failed. Please try again.';
-              console.log('Error details:', err);
-
-              setTimeout(() => {
-                this.router.navigate(['/']);
-              }, 3000);
-            },
-          });
-        }
+        this.oauthService.oauth(provider, code);
       } else {
-        this.error = 'Authentication failed. No authorization code received.';
+        this.oauthService.error.set('Authentifizierung fehlgeschlagen. Bitte versuchen Sie es erneut.');
 
         setTimeout(() => {
           this.router.navigate(['/']);

frontend/src/app/feature/auth/oauth2/oauth2.service.ts

@@ -0,0 +1,36 @@
+import { inject, Injectable, signal } from '@angular/core';
+import { Router } from '@angular/router';
+import { AuthService } from '@service/auth.service';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class Oauth2Service {
+  private router: Router = inject(Router);
+  private authService: AuthService = inject(AuthService);
+  private _error = signal<string>('');
+
+  oauth(provider: string, code: string) {
+    const oauth$ = provider === 'github'
+      ? this.authService.githubAuth(code)
+      : this.authService.googleAuth(code);
+
+    oauth$.subscribe({
+      next: () => {
+        this.router.navigate(['/home']);
+      },
+      error: (err) => {
+        this._error.set(err.error?.message || 'Authentifizierung fehlgeschlagen. Bitte versuchen Sie es erneut.');
+
+        setTimeout(() => {
+          this.router.navigate(['/']);
+        }, 3000);
+      },
+    });
+  }
+
+  public get error() {
+    return this._error;
+  }
+}