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
bitwarden · Oct 16, 2024 · 4b67cd2 · 4b67cd2
1 parent e256bde
commit 4b67cd2
Show file tree

Hide file tree

Showing 21 changed files with 325 additions and 130 deletions.
diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json
@@ -71,6 +71,15 @@
   "joinOrganization": {
     "message": "Join organization"
   },
+  "joinOrganizationName": {
+    "message": "Join $ORGANIZATIONNAME$",
+    "placeholders": {
+      "organizationName": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
   "finishJoiningThisOrganizationBySettingAMasterPassword": {
     "message": "Finish joining this organization by setting a master password."
   },

diff --git a/apps/browser/src/popup/app-routing.module.ts b/apps/browser/src/popup/app-routing.module.ts
@@ -20,9 +20,11 @@ import {
   LockV2Component,
   PasswordHintComponent,
   RegistrationFinishComponent,
+  RegistrationLockAltIcon,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
   RegistrationStartSecondaryComponentData,
+  RegistrationUserAddIcon,
   SetPasswordJitComponent,
   UserLockIcon,
 } from "@bitwarden/auth/angular";
@@ -447,40 +449,18 @@ const routes: Routes = [
   {
     path: "",
     component: ExtensionAnonLayoutWrapperComponent,
-    children: [
-      {
-        path: "lockV2",
-        canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
-        data: {
-          pageIcon: LockIcon,
-          pageTitle: {
-            key: "yourVaultIsLockedV2",
-          },
-          showReadonlyHostname: true,
-          showAcctSwitcher: true,
-        } satisfies ExtensionAnonLayoutWrapperData,
-        children: [
-          {
-            path: "",
-            component: LockV2Component,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    path: "",
-    component: AnonLayoutWrapperComponent,
     children: [
       {
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
           state: "signup",
+          pageIcon: RegistrationUserAddIcon,
           pageTitle: {
             key: "createAccount",
           },
-        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+          showBackButton: true,
+        } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
         children: [
           {
             path: "",
@@ -500,21 +480,41 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: {
-            key: "setAStrongPassword",
-          },
-          pageSubtitle: {
-            key: "finishCreatingYourAccountBySettingAPassword",
-          },
+          pageIcon: RegistrationLockAltIcon,
           state: "finish-signup",
-        } satisfies RouteDataProperties & AnonLayoutWrapperData,
+          showBackButton: true,
+        } satisfies RouteDataProperties & ExtensionAnonLayoutWrapperData,
         children: [
           {
             path: "",
             component: RegistrationFinishComponent,
           },
         ],
       },
+      {
+        path: "lockV2",
+        canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
+        data: {
+          pageIcon: LockIcon,
+          pageTitle: {
+            key: "yourVaultIsLockedV2",
+          },
+          showReadonlyHostname: true,
+          showAcctSwitcher: true,
+        } satisfies ExtensionAnonLayoutWrapperData,
+        children: [
+          {
+            path: "",
+            component: LockV2Component,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    path: "",
+    component: AnonLayoutWrapperComponent,
+    children: [
       {
         path: "set-password-jit",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],

diff --git a/apps/desktop/src/app/app-routing.module.ts b/apps/desktop/src/app/app-routing.module.ts
@@ -19,9 +19,11 @@ import {
   LockV2Component,
   PasswordHintComponent,
   RegistrationFinishComponent,
+  RegistrationLockAltIcon,
   RegistrationStartComponent,
   RegistrationStartSecondaryComponent,
   RegistrationStartSecondaryComponentData,
+  RegistrationUserAddIcon,
   SetPasswordJitComponent,
   UserLockIcon,
 } from "@bitwarden/auth/angular";
@@ -169,6 +171,7 @@ const routes: Routes = [
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
+          pageIcon: RegistrationUserAddIcon,
           pageTitle: {
             key: "createAccount",
           },
@@ -192,12 +195,7 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: {
-            key: "setAStrongPassword",
-          },
-          pageSubtitle: {
-            key: "finishCreatingYourAccountBySettingAPassword",
-          },
+          pageIcon: RegistrationLockAltIcon,
         } satisfies AnonLayoutWrapperData,
         children: [
           {

diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
@@ -602,6 +602,15 @@
   "joinOrganization": {
     "message": "Join organization"
   },
+  "joinOrganizationName": {
+    "message": "Join $ORGANIZATIONNAME$",
+    "placeholders": {
+      "organizationName": {
+        "content": "$1",
+        "example": "My Org Name"
+      }
+    }
+  },
   "finishJoiningThisOrganizationBySettingAMasterPassword": {
     "message": "Finish joining this organization by setting a master password."
   },

diff --git a/apps/web/src/app/auth/core/services/registration/web-registration-finish.service.spec.ts b/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;
 

diff --git a/apps/web/src/app/auth/core/services/registration/web-registration-finish.service.ts b/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();

diff --git a/apps/web/src/app/oss-routing.module.ts b/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",
           },

diff --git a/apps/web/src/locales/en/messages.json b/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."
   },

diff --git a/libs/auth/src/angular/icons/index.ts b/libs/auth/src/angular/icons/index.ts
@@ -3,3 +3,6 @@ export * from "./bitwarden-shield.icon";
 export * from "./lock.icon";
 export * from "./user-lock.icon";
 export * from "./user-verification-biometrics-fingerprint.icon";
+export * from "./registration-user-add.icon";
+export * from "./registration-lock-alt.icon";
+export * from "./registration-expired-link.icon";
diff --git a/libs/auth/src/angular/icons/registration-check-email.icon.ts b/libs/auth/src/angular/icons/registration-check-email.icon.ts
@@ -1,12 +1,23 @@
 import { svgIcon } from "@bitwarden/components";
 
 export const RegistrationCheckEmailIcon = svgIcon`
-<svg xmlns="http://www.w3.org/2000/svg" width="144" height="113" fill="none">
-<g fill="#175DDC" clip-path="url(#a)">
-    <path class="tw-fill-primary-600" fill-rule="evenodd" d="M39.19 26.64c0-.765.62-1.384 1.383-1.384h18.785a1.383 1.383 0 0 1 0 2.766H40.573c-.764 0-1.383-.619-1.383-1.383ZM39.19 37.819c0-.764.62-1.383 1.383-1.383H58.81a1.383 1.383 0 0 1 0 2.766H40.573c-.764 0-1.383-.62-1.383-1.383ZM39.19 48.998c0-.764.62-1.383 1.383-1.383H61.82a1.383 1.383 0 0 1 0 2.766H40.573c-.764 0-1.383-.62-1.383-1.383Z" clip-rule="evenodd"/>
-    <path class="tw-fill-primary-600" d="M94.576 60.504c0 .382.31.692.691.692 14.892 0 26.977-11.935 26.977-26.675a.692.692 0 0 0-1.383 0c0 13.96-11.451 25.292-25.594 25.292a.691.691 0 0 0-.691.691ZM68.982 35.213c.382 0 .692-.31.692-.692 0-13.96 11.45-25.291 25.593-25.291a.691.691 0 1 0 0-1.383c-14.89 0-26.976 11.935-26.976 26.674 0 .382.31.692.691.692Z"/>
-    <path class="tw-fill-primary-600" fill-rule="evenodd" d="M95.387 2.926c-6.295 0-12.16 1.84-17.086 5.013l-1.136-.877a9.68 9.68 0 0 0-11.705-.096l-8.172 6.098a1.33 1.33 0 0 0-.064.05H33.393a4.149 4.149 0 0 0-4.149 4.15v16.753c-.07.035-.14.078-.205.127l-8.464 6.315a9.68 9.68 0 0 0-3.89 7.759v51.696c0 5.346 4.333 9.68 9.68 9.68h90.733c5.346 0 9.68-4.334 9.68-9.68v-26.48l8.099 8.098a4.84 4.84 0 0 0 6.845 0l.721-.721a4.84 4.84 0 0 0 0-6.845l-15.665-15.665V44.056c0-.587-.366-1.089-.882-1.29a31.666 31.666 0 0 0 1.086-8.245c0-17.45-14.146-31.595-31.595-31.595Zm28.625 52.61v-7.624a31.463 31.463 0 0 1-2.803 4.82l2.803 2.803Zm-4.51-.6a31.84 31.84 0 0 1-3.651 3.659l20.981 20.982c.81.81 2.124.81 2.934 0l.721-.722a2.073 2.073 0 0 0 0-2.933l-20.985-20.986Zm-5.851 5.37a31.434 31.434 0 0 1-16.653 5.77l-.023.014-9.463 5.427a15.205 15.205 0 0 1 2.167 1.666l33.149 30.601a6.876 6.876 0 0 0 1.184-3.87V70.668l-10.361-10.362ZM29.244 37.442l-7.014 5.234a6.914 6.914 0 0 0-2.588 3.925c.062.025.123.056.183.091l9.42 5.626V37.442Zm2.766 16.527 8.172 4.881c.124-.036.255-.056.39-.056h27.813a1.383 1.383 0 0 1 0 2.766H44.72l13.656 8.156a15.208 15.208 0 0 1 4.116-.567H79.36c1.801 0 3.571.32 5.233.928.095-.103.206-.193.334-.267l6.805-3.902C76.004 64.097 63.791 50.735 63.791 34.52a31.454 31.454 0 0 1 6.082-18.64h-36.48c-.764 0-1.383.619-1.383 1.383v36.705Zm40.135-40.851a31.78 31.78 0 0 1 3.8-3.504l-.47-.363a6.914 6.914 0 0 0-8.36-.068l-5.27 3.932h10.212c.03 0 .059 0 .088.003ZM66.557 34.52c0-15.922 12.907-28.83 28.83-28.83 15.922 0 28.829 12.908 28.829 28.83 0 15.922-12.907 28.83-28.83 28.83-15.922 0-28.83-12.908-28.83-28.83ZM19.45 49.691v50.223c0 1.418.428 2.738 1.16 3.835l31.298-30.315a15.21 15.21 0 0 1 3.266-2.41L19.45 49.69Zm3.124 56.007a6.888 6.888 0 0 0 3.79 1.13h90.734a6.879 6.879 0 0 0 3.752-1.106L87.803 75.216a12.446 12.446 0 0 0-8.442-3.301H62.49a12.446 12.446 0 0 0-8.658 3.506l-31.259 30.277Z" clip-rule="evenodd"/></g><defs><clipPath id="a">
-    <path class="tw-fill-primary-600" fill="#fff" d="M.09 0h143.82v112.705H.09z"/>
-    </clipPath>
-    </defs>
-</svg>`;
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100" fill="none">
+    <path class="tw-stroke-art-primary"  stroke-linecap="round" stroke-width="2.477"
+        d="M104.552 42.242v12.023M48.415 17.31l6.51-4.858a7.43 7.43 0 0 1 8.984.074l1.172.904M24.844 34.897l-6.857 5.116A7.43 7.43 0 0 0 15 45.97v42.366a7.43 7.43 0 0 0 7.43 7.43h74.691a7.43 7.43 0 0 0 7.431-7.43V64.291" />
+    <path class="tw-stroke-art-primary"  stroke-linecap="round" stroke-width="2.477"
+        d="M25.48 50.5V20.058a2.477 2.477 0 0 1 2.476-2.477h32.091" />
+    <path class="tw-stroke-art-accent" stroke-linecap="round" stroke-width="2.477"
+        d="M33.778 27.71h15.674M33.778 37.037h15.217M33.778 46.364h17.728M33.778 55.691h23.206" />
+    <path class="tw-stroke-art-primary" stroke-width="2.477"
+        d="M102.645 93.86 74.211 67.614a12.384 12.384 0 0 0-8.4-3.284H52.41c-3.216 0-6.306 1.251-8.616 3.488L16.904 93.86" />
+    <path class="tw-stroke-art-primary" stroke-linecap="round" stroke-width="2.477" d="m71.36 64.73 8.904-5.106" />
+    <path class="tw-stroke-art-primary" stroke-linecap="round" stroke-width="2.477" d="M1.238-1.238h37.47"
+        transform="matrix(.85856 .5127 .51278 -.85852 15.476 43.85)" />
+    <path class="tw-stroke-art-primary" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.477"
+        d="M104.722 34.286c0 13.922-11.286 25.207-25.209 25.207-13.922 0-25.208-11.285-25.208-25.207 0-13.92 11.286-25.206 25.208-25.206 13.923 0 25.209 11.285 25.209 25.206Z" />
+    <path class="tw-stroke-art-accent" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.238"
+        d="M101.346 34.287c0 11.972-9.82 21.678-21.932 21.678m0-43.355c-12.113 0-21.932 9.705-21.932 21.677" />
+    <path class="tw-stroke-art-primary" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.477"
+        d="m99.636 49.689 3.853 3.852 14.322 14.32a3.096 3.096 0 0 1 0 4.379l-.303.303a3.097 3.097 0 0 1-4.379 0l-14.322-14.32-3.852-3.853" />
+</svg>
+`;
diff --git a/libs/auth/src/angular/icons/registration-expired-link.icon.ts b/libs/auth/src/angular/icons/registration-expired-link.icon.ts
@@ -1,20 +1,9 @@
 import { svgIcon } from "@bitwarden/components";
 
 export const RegistrationExpiredLinkIcon = svgIcon`
-<svg width="64" height="64" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_8198_6255)">
-        <path 
-            class="tw-fill-primary-600"
-            d="M2.70609 5.38455C3.71495 3.18341 5.95991 1.65214 8.56633 1.65214C12.1167 1.65214 14.9948 4.4927 14.9948 7.99672C14.9948 11.5007 12.1167 14.3413 8.56633 14.3413C5.90396 14.3413 3.61848 12.7438 2.64241 10.4652C2.53502 10.2144 2.24202 10.0971 1.98799 10.2031C1.73396 10.3091 1.61509 10.5983 1.72248 10.849C2.8493 13.4796 5.48864 15.327 8.56633 15.327C12.6683 15.327 15.9936 12.0451 15.9936 7.99672C15.9936 3.9483 12.6683 0.666412 8.56633 0.666412C5.41721 0.666412 2.72675 2.60033 1.64603 5.33002L0.858226 3.92917C0.734524 3.70921 0.455929 3.63117 0.235967 3.75487C0.0160044 3.87858 -0.0620299 4.15717 0.0616722 4.37713L1.35147 6.6706C1.47517 6.89056 1.75377 6.9686 1.97373 6.8449L4.2672 5.5551C4.48716 5.4314 4.5652 5.1528 4.44149 4.93284C4.31779 4.71288 4.0392 4.63484 3.81923 4.75854L2.70609 5.38455Z"
-            fill="#175DDC" />
-        <path
-            class="tw-fill-primary-600"
-            d="M10.7225 10.2926C10.6408 10.3474 10.5437 10.3767 10.4447 10.3767C10.318 10.3767 10.1962 10.3283 10.1041 10.2418L8.14837 8.41125C8.09985 8.36578 8.06123 8.31053 8.03449 8.24991C8.00775 8.18928 7.99389 8.12376 7.99389 8.05727V3.49271C7.99389 3.36314 8.04588 3.23896 8.13896 3.14704C8.23204 3.05512 8.3578 3.00378 8.48901 3.00378C8.62021 3.00378 8.74597 3.05561 8.83905 3.14704C8.93213 3.23847 8.98412 3.36314 8.98412 3.49271V7.84605L10.7853 9.53284C10.8571 9.60031 10.9071 9.68734 10.9284 9.78268C10.9497 9.87802 10.9413 9.97776 10.9047 10.0687C10.868 10.1596 10.8042 10.2379 10.7225 10.2926Z"
-            fill="#175DDC" />
-    </g>
-    <defs>
-        <clipPath id="clip0_8198_6255">
-            <rect width="15.9952" height="15.9952" fill="white" />
-        </clipPath>
-    </defs>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 100" fill="none">
+    <path class="tw-art-primary" fill="#175DDC"
+        d="M36.167 38.348c4.543-9.911 14.651-16.806 26.387-16.806 15.986 0 28.945 12.79 28.945 28.567 0 15.777-12.96 28.568-28.945 28.568-11.988 0-22.278-7.193-26.673-17.453-.484-1.13-1.803-1.657-2.947-1.18a2.209 2.209 0 0 0-1.195 2.908c5.073 11.845 16.957 20.163 30.815 20.163 18.47 0 33.442-14.777 33.442-33.006 0-18.228-14.972-33.006-33.442-33.006-14.18 0-26.294 8.708-31.16 20.999l-3.547-6.307a2.057 2.057 0 0 0-3.586 2.017l5.807 10.326a2.057 2.057 0 0 0 2.802.785l10.327-5.808a2.057 2.057 0 1 0-2.018-3.586l-5.012 2.819Z" />
+    <path class="tw-art-primary" fill="#175DDC"
+        d="M72.263 60.447a2.25 2.25 0 0 1-2.785-.229l-8.806-8.242a2.229 2.229 0 0 1-.512-.727 2.148 2.148 0 0 1-.183-.867V29.829c0-.583.234-1.142.653-1.556a2.251 2.251 0 0 1 3.152 0c.42.412.653.973.653 1.556v19.602l8.11 7.595a2.178 2.178 0 0 1 .537 2.413c-.164.41-.452.761-.82 1.008Z" />
 </svg>`;