[PM-4349] Migrate hasPremium and debounceNavigation to be functional (#6591)

Class based router guards are deprecated as of Angular 15.2, per angular.io/guide/deprecations#router-class-and-injection-token-guards. To simplify future angular upgrades we need to resolve these deprecations.

This PR migrates the HasPremium and DebounceNavigationService guards to use the new functional pattern.

apps/web/src/app/core/guards/has-premium.guard.ts

@@ -1,31 +1,35 @@
-import { Injectable } from "@angular/core";
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from "@angular/router";
+import { inject } from "@angular/core";
+import {
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  Router,
+  CanActivateFn,
+} from "@angular/router";
 
 import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
 
-@Injectable({
-  providedIn: "root",
-})
-export class HasPremiumGuard implements CanActivate {
-  constructor(
-    private router: Router,
-    private stateService: StateService,
-    private messagingService: MessagingService,
-  ) {}
+/**
+ * CanActivate guard that checks if the user has premium and otherwise triggers the "premiumRequired"
+ * message and blocks navigation.
+ */
+export function hasPremiumGuard(): CanActivateFn {
+  return async (_route: ActivatedRouteSnapshot, _state: RouterStateSnapshot) => {
+    const router = inject(Router);
+    const stateService = inject(StateService);
+    const messagingService = inject(MessagingService);
 
-  async canActivate(route: ActivatedRouteSnapshot, routerState: RouterStateSnapshot) {
-    const userHasPremium = await this.stateService.getCanAccessPremium();
+    const userHasPremium = await stateService.getCanAccessPremium();
 
     if (!userHasPremium) {
-      this.messagingService.send("premiumRequired");
+      messagingService.send("premiumRequired");
     }
 
     // Prevent trapping the user on the login page, since that's an awful UX flow
-    if (!userHasPremium && this.router.url === "/login") {
-      return this.router.createUrlTree(["/"]);
+    if (!userHasPremium && router.url === "/login") {
+      return router.createUrlTree(["/"]);
     }
 
     return userHasPremium;
-  }
+  };
 }

apps/web/src/app/reports/reports-routing.module.ts

@@ -3,7 +3,7 @@ import { RouterModule, Routes } from "@angular/router";
 
 import { AuthGuard } from "@bitwarden/angular/auth/guards";
 
-import { HasPremiumGuard } from "../core/guards/has-premium.guard";
+import { hasPremiumGuard } from "../core/guards/has-premium.guard";
 
 import { BreachReportComponent } from "./pages/breach-report.component";
 import { ExposedPasswordsReportComponent } from "./pages/exposed-passwords-report.component";
@@ -30,31 +30,31 @@ const routes: Routes = [
         path: "reused-passwords-report",
         component: ReusedPasswordsReportComponent,
         data: { titleId: "reusedPasswordsReport" },
-        canActivate: [HasPremiumGuard],
+        canActivate: [hasPremiumGuard()],
       },
       {
         path: "unsecured-websites-report",
         component: UnsecuredWebsitesReportComponent,
         data: { titleId: "unsecuredWebsitesReport" },
-        canActivate: [HasPremiumGuard],
+        canActivate: [hasPremiumGuard()],
       },
       {
         path: "weak-passwords-report",
         component: WeakPasswordsReportComponent,
         data: { titleId: "weakPasswordsReport" },
-        canActivate: [HasPremiumGuard],
+        canActivate: [hasPremiumGuard()],
       },
       {
         path: "exposed-passwords-report",
         component: ExposedPasswordsReportComponent,
         data: { titleId: "exposedPasswordsReport" },
-        canActivate: [HasPremiumGuard],
+        canActivate: [hasPremiumGuard()],
       },
       {
         path: "inactive-two-factor-report",
         component: InactiveTwoFactorReportComponent,
         data: { titleId: "inactive2faReport" },
-        canActivate: [HasPremiumGuard],
+        canActivate: [hasPremiumGuard()],
       },
     ],
   },