Merge pull request 'refactor: refactor routes.ts' (!212) from refactor/routes into main

Reviewed-on: #212
Reviewed-by: Jan K9f <jan@kjan.email>

frontend/src/app/app.component.ts

@@ -1,12 +1,12 @@
 import { Component, HostListener, inject, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { NavbarComponent } from './shared/components/navbar/navbar.component';
-import { FooterComponent } from './shared/components/footer/footer.component';
+import { NavbarComponent } from '@shared/components/navbar/navbar.component';
+import { FooterComponent } from '@shared/components/footer/footer.component';
 import { LoginComponent } from './feature/auth/login/login.component';
 import { RegisterComponent } from './feature/auth/register/register.component';
-import { RecoverPasswordComponent } from './feature/auth/recover-password/recover-password.component';
-import { PlaySoundDirective } from './shared/directives/play-sound.directive';
-import { SoundInitializerService } from './shared/services/sound-initializer.service';
+import RecoverPasswordComponent from './feature/auth/recover-password/recover-password.component';
+import { PlaySoundDirective } from '@shared/directives/play-sound.directive';
+import { SoundInitializerService } from '@shared/services/sound-initializer.service';
 
 @Component({
   selector: 'app-root',

frontend/src/app/app.routes.ts

@@ -14,75 +14,68 @@ export const routes: Routes = [
   },
   {
     path: 'verify',
-    loadComponent: () =>
-      import('./feature/auth/verify-email/verify-email.component').then(
-        (m) => m.VerifyEmailComponent
-      ),
+    loadComponent: () => import('./feature/auth/verify-email/verify-email.component'),
   },
   {
     path: 'recover-password',
-    loadComponent: () =>
-      import('./feature/auth/recover-password/recover-password.component').then(
-        (m) => m.RecoverPasswordComponent
-      ),
+    loadComponent: () => import('./feature/auth/recover-password/recover-password.component'),
   },
   {
     path: 'reset-password',
-    loadComponent: () =>
-      import('./feature/auth/recover-password/recover-password.component').then(
-        (m) => m.RecoverPasswordComponent
-      ),
+    loadComponent: () => import('./feature/auth/recover-password/recover-password.component'),
   },
   {
     path: 'oauth2/callback',
     children: [
       {
         path: 'github',
-        loadComponent: () =>
-          import('./feature/auth/oauth2/oauth2-callback.component').then(
-            (m) => m.OAuth2CallbackComponent
-          ),
+        loadComponent: () => import('./feature/auth/oauth2/oauth2-callback.component'),
         data: { provider: 'github' },
       },
       {
         path: 'google',
-        loadComponent: () =>
-          import('./feature/auth/oauth2/oauth2-callback.component').then(
-            (m) => m.OAuth2CallbackComponent
-          ),
+        loadComponent: () => import('./feature/auth/oauth2/oauth2-callback.component'),
         data: { provider: 'google' },
       },
     ],
   },
   {
-    path: 'game/blackjack',
-    loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
-    canActivate: [authGuard],
-  },
-  {
-    path: 'game/coinflip',
-    loadComponent: () => import('./feature/game/coinflip/coinflip.component'),
-    canActivate: [authGuard],
-  },
-  {
-    path: 'game/slots',
-    loadComponent: () => import('./feature/game/slots/slots.component'),
-    canActivate: [authGuard],
-  },
-  {
-    path: 'game/lootboxes',
-    loadComponent: () =>
-      import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
-    canActivate: [authGuard],
-  },
-  {
-    path: 'game/lootboxes/open/:id',
-    loadComponent: () => import('./feature/lootboxes/lootbox-opening/lootbox-opening.component'),
-    canActivate: [authGuard],
-  },
-  {
-    path: 'game/dice',
-    loadComponent: () => import('./feature/game/dice/dice.component').then((m) => m.DiceComponent),
-    canActivate: [authGuard],
+    path: 'game',
+    children: [
+      {
+        path: 'blackjack',
+        loadComponent: () => import('./feature/game/blackjack/blackjack.component'),
+        canActivate: [authGuard],
+      },
+      {
+        path: 'coinflip',
+        loadComponent: () => import('./feature/game/coinflip/coinflip.component'),
+        canActivate: [authGuard],
+      },
+      {
+        path: 'slots',
+        loadComponent: () => import('./feature/game/slots/slots.component'),
+        canActivate: [authGuard],
+      },
+      {
+        path: 'lootboxes',
+        loadComponent: () =>
+          import('./feature/lootboxes/lootbox-selection/lootbox-selection.component'),
+        canActivate: [authGuard],
+        children: [
+          {
+            path: 'open/:id',
+            loadComponent: () =>
+              import('./feature/lootboxes/lootbox-opening/lootbox-opening.component'),
+            canActivate: [authGuard],
+          },
+        ],
+      },
+      {
+        path: 'dice',
+        loadComponent: () => import('./feature/game/dice/dice.component'),
+        canActivate: [authGuard],
+      },
+    ],
   },
 ];

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

@@ -19,7 +19,7 @@ import { Oauth2Service } from './oauth2.service';
     </div>
   `,
 })
-export class OAuth2CallbackComponent implements OnInit {
+export default class OAuth2CallbackComponent implements OnInit {
   error: Signal<string> = computed(() => this.oauthService.error());
 
   private route: ActivatedRoute = inject(ActivatedRoute);

frontend/src/app/feature/auth/recover-password/recover-password.component.ts

@@ -10,7 +10,7 @@ import { AuthService } from '@service/auth.service';
   imports: [CommonModule, ReactiveFormsModule, RouterModule],
   templateUrl: './recover-password.component.html',
 })
-export class RecoverPasswordComponent implements OnInit {
+export default class RecoverPasswordComponent implements OnInit {
   emailForm: FormGroup;
   resetPasswordForm: FormGroup;
   errorMessage = signal('');

frontend/src/app/feature/auth/verify-email/verify-email.component.ts

@@ -7,7 +7,7 @@ import { AuthService } from '@service/auth.service';
   imports: [],
   templateUrl: './verify-email.component.html',
 })
-export class VerifyEmailComponent implements OnInit {
+export default class VerifyEmailComponent implements OnInit {
   route: ActivatedRoute = inject(ActivatedRoute);
   router: Router = inject(Router);
   authService: AuthService = inject(AuthService);

frontend/src/app/feature/game/dice/dice.component.ts

@@ -24,7 +24,7 @@ type DiceFormGroup = FormGroup<{
   imports: [CommonModule, ReactiveFormsModule],
   templateUrl: './dice.component.html',
 })
-export class DiceComponent implements OnInit {
+export default class DiceComponent implements OnInit {
   private readonly formBuilder = inject(FormBuilder);
   private readonly diceService = inject(DiceService);
   private readonly userService = inject(UserService);

frontend/src/app/feature/landing/landing.component.ts

@@ -11,7 +11,8 @@ import { ActivatedRoute, RouterLink } from '@angular/router';
 import { AuthService } from '@service/auth.service';
 import { LoginComponent } from '../auth/login/login.component';
 import { RegisterComponent } from '../auth/register/register.component';
-import { RecoverPasswordComponent } from '../auth/recover-password/recover-password.component';
+import '../auth/recover-password/recover-password.component';
+import RecoverPasswordComponent from '../auth/recover-password/recover-password.component';
 
 @Component({
   selector: 'app-landing-page',