Web-specific UI testbed

apps/web/src/app/layouts/user-layout.component.html

@@ -8,6 +8,7 @@
       <bit-nav-item [text]="'generator' | i18n" route="tools/generator"></bit-nav-item>
       <bit-nav-item [text]="'importData' | i18n" route="tools/import"></bit-nav-item>
       <bit-nav-item [text]="'exportVault' | i18n" route="tools/export"></bit-nav-item>
+      <bit-nav-item [text]="'achievements' | i18n" route="tools/achievements"></bit-nav-item>
     </bit-nav-group>
     <bit-nav-item icon="bwi-sliders" [text]="'reports' | i18n" route="reports"></bit-nav-item>
     <bit-nav-group icon="bwi-cog" [text]="'settings' | i18n" route="settings">

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

@@ -81,6 +81,7 @@ import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-land
 import { SMLandingComponent } from "./secrets-manager/secrets-manager-landing/sm-landing.component";
 import { DomainRulesComponent } from "./settings/domain-rules.component";
 import { PreferencesComponent } from "./settings/preferences.component";
+import { AchievementsComponent } from "./tools/achievements/achievements.component";
 import { CredentialGeneratorComponent } from "./tools/credential-generator/credential-generator.component";
 import { ReportsModule } from "./tools/reports";
 import { AccessComponent, SendAccessExplainerComponent } from "./tools/send/send-access";
@@ -747,6 +748,11 @@ const routes: Routes = [
             component: CredentialGeneratorComponent,
             data: { titleId: "generator" } satisfies RouteDataProperties,
           },
+          {
+            path: "achievements",
+            component: AchievementsComponent,
+            data: { titleId: "achievements" } satisfies RouteDataProperties,
+          },
         ],
       },
       {

apps/web/src/app/tools/achievements/achievements.component.html

@@ -0,0 +1,7 @@
+<app-header></app-header>
+
+<bit-container>
+  <button bitButton type="button" bitFormButton buttonType="primary" (click)="testAchievement()">
+    Test achievements
+  </button>
+</bit-container>

apps/web/src/app/tools/achievements/achievements.component.ts

@@ -0,0 +1,55 @@
+import { Component, OnInit } from "@angular/core";
+import { firstValueFrom } from "rxjs";
+
+import { AchievementNotifierService } from "@bitwarden/angular/tools/achievements/achievement-notifier.abstraction";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { EventStoreAbstraction } from "@bitwarden/common/tools/achievements/event-store.abstraction.service";
+import { VaultItems_10_Added_Achievement } from "@bitwarden/common/tools/achievements/examples/achievements";
+import { AchievementEarnedEvent, AchievementId } from "@bitwarden/common/tools/achievements/types";
+import { UserId } from "@bitwarden/common/types/guid";
+
+import { HeaderModule } from "../../layouts/header/header.module";
+import { SharedModule } from "../../shared";
+
+@Component({
+  templateUrl: "achievements.component.html",
+  standalone: true,
+  imports: [SharedModule, HeaderModule],
+})
+export class AchievementsComponent implements OnInit {
+  private currentUserId: UserId;
+
+  constructor(
+    private eventStore: EventStoreAbstraction,
+    private achievementNotifierService: AchievementNotifierService,
+    private accountService: AccountService,
+  ) {}
+
+  async ngOnInit() {
+    await this.achievementNotifierService.init();
+    this.currentUserId = (await firstValueFrom(this.accountService.activeAccount$)).id;
+  }
+
+  testAchievement() {
+    const earnedAchievement: AchievementEarnedEvent = {
+      "@timestamp": Date.now(),
+      event: {
+        kind: "alert",
+        category: "session",
+      },
+      service: {
+        name: "web",
+        type: "client",
+        node: {
+          name: "an-installation-identifier-for-this-client-instance",
+        },
+        environment: "local",
+        version: "2025.3.1-innovation-sprint",
+      },
+      user: { id: this.currentUserId },
+      achievement: { type: "earned", name: VaultItems_10_Added_Achievement.name as AchievementId },
+    };
+
+    this.eventStore.addEvent(earnedAchievement);
+  }
+}

apps/web/src/locales/en/messages.json

@@ -10620,5 +10620,8 @@
   },
   "cannotCreateCollection": {
     "message": "Free organizations may have up to 2 collections. Upgrade to a paid plan to add more collections."
+  },
+  "achievements": {
+    "message": "Achievements"
   }
 }