Auth/PM-8112 - UI refresh - Registration Components (#11353)

* PM-8112 - Update classes of existing registration icons

* PM-8112 - Add new icons

* PM-8112 - Export icons from libs/auth

* PM-8112 - RegistrationStart - Add new user icon as page icon

* PM-8112 - Replace RegistrationCheckEmailIcon with new icon so it displays properly

* PM-8112 - RegistrationFinish - Add new icon across clients

* PM-8112 - Registration start comp - update page icon and page title on state change to match figma

* PM-8112 - RegistrationFinish - adding most of framework for changing page title & subtitle when an org invite is in state.

* PM-8112 - Add joinOrganizationName to all clients translations

* PM-8112 - RegistrationFinish - Remove default page title & subtitle and let onInit logic figure out what to set based on flows.

* PM-8112 - RegistrationStart - Fix setAnonLayoutWrapperData calls

* PM-8112 - RegistrationFinish - simplify qParams init logic to make handling loading and page title and subtitle setting easier.

* PM-8112 - Registration Link expired - move icon to page icon out of main content

* PM-8112 - RegistrationFinish - Refactor init logic further into distinct flows.

* PM-8112 - Fix icons

* PM-8112 - Extension AppRoutingModule - move sign up start & finish routes under extension anon layout

* PM-8112 - Fix storybook

* PM-8112 - Clean up unused prop

* PM-8112 - RegistrationLockAltIcon tweaks

* PM-8112 - Update icons to have proper styling

* PM-8112 - RegistrationUserAddIcon - remove unnecessary svg class

* PM-8112 - Fix icons

apps/web/src/app/auth/core/services/registration/web-registration-finish.service.spec.ts

@@ -52,6 +52,36 @@ describe("DefaultRegistrationFinishService", () => {
     expect(service).not.toBeFalsy();
   });
 
+  describe("getOrgNameFromOrgInvite()", () => {
+    let orgInvite: OrganizationInvite | null;
+
+    beforeEach(() => {
+      orgInvite = new OrganizationInvite();
+      orgInvite.organizationId = "organizationId";
+      orgInvite.organizationUserId = "organizationUserId";
+      orgInvite.token = "orgInviteToken";
+      orgInvite.email = "email";
+    });
+
+    it("returns null when the org invite is null", async () => {
+      acceptOrgInviteService.getOrganizationInvite.mockResolvedValue(null);
+
+      const result = await service.getOrgNameFromOrgInvite();
+
+      expect(result).toBeNull();
+      expect(acceptOrgInviteService.getOrganizationInvite).toHaveBeenCalled();
+    });
+
+    it("returns the organization name from the organization invite when it exists", async () => {
+      acceptOrgInviteService.getOrganizationInvite.mockResolvedValue(orgInvite);
+
+      const result = await service.getOrgNameFromOrgInvite();
+
+      expect(result).toEqual(orgInvite.organizationName);
+      expect(acceptOrgInviteService.getOrganizationInvite).toHaveBeenCalled();
+    });
+  });
+
   describe("getMasterPasswordPolicyOptsFromOrgInvite()", () => {
     let orgInvite: OrganizationInvite | null;
 

apps/web/src/app/auth/core/services/registration/web-registration-finish.service.ts

@@ -32,6 +32,15 @@ export class WebRegistrationFinishService
     super(cryptoService, accountApiService);
   }
 
+  override async getOrgNameFromOrgInvite(): Promise<string | null> {
+    const orgInvite = await this.acceptOrgInviteService.getOrganizationInvite();
+    if (orgInvite == null) {
+      return null;
+    }
+
+    return orgInvite.organizationName;
+  }
+
   override async getMasterPasswordPolicyOptsFromOrgInvite(): Promise<MasterPasswordPolicyOptions | null> {
     // If there's a deep linked org invite, use it to get the password policies
     const orgInvite = await this.acceptOrgInviteService.getOrganizationInvite();

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

@@ -25,6 +25,9 @@ import {
   LockV2Component,
   LockIcon,
   UserLockIcon,
+  RegistrationUserAddIcon,
+  RegistrationLockAltIcon,
+  RegistrationExpiredLinkIcon,
 } from "@bitwarden/auth/angular";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 
@@ -234,6 +237,7 @@ const routes: Routes = [
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
+          pageIcon: RegistrationUserAddIcon,
           pageTitle: {
             key: "createAccount",
           },
@@ -258,12 +262,7 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: {
-            key: "setAStrongPassword",
-          },
-          pageSubtitle: {
-            key: "finishCreatingYourAccountBySettingAPassword",
-          },
+          pageIcon: RegistrationLockAltIcon,
           titleId: "setAStrongPassword",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -310,6 +309,7 @@ const routes: Routes = [
         path: "signup-link-expired",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
+          pageIcon: RegistrationExpiredLinkIcon,
           pageTitle: {
             key: "expiredLink",
           },

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

@@ -3781,6 +3781,15 @@
   "joinOrganization": {
     "message": "Join organization"
   },
+  "joinOrganizationName": {
+    "message": "Join $ORGANIZATIONNAME$",
+    "placeholders": {
+      "organizationName": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
   "joinOrganizationDesc": {
     "message": "You've been invited to join the organization listed above. To accept the invitation, you need to log in or create a new Bitwarden account."
   },