Merge branch 'tools/pm-23531/rename-send-created-to-active-send-icon' into tools/pm-21776/update-send-access-copy

libs/angular/src/auth/guards/auth.guard.ts

@@ -39,7 +39,32 @@ export const authGuard: CanActivateFn = async (
     return false;
   }
 
-  if (authStatus === AuthenticationStatus.Locked) {
+  const userId = (await firstValueFrom(accountService.activeAccount$)).id;
+  const forceSetPasswordReason = await firstValueFrom(
+    masterPasswordService.forceSetPasswordReason$(userId),
+  );
+
+  const isSetInitialPasswordFlagOn = await configService.getFeatureFlag(
+    FeatureFlag.PM16117_SetInitialPasswordRefactor,
+  );
+  const isChangePasswordFlagOn = await configService.getFeatureFlag(
+    FeatureFlag.PM16117_ChangeExistingPasswordRefactor,
+  );
+
+  // User JIT provisioned into a master-password-encryption org
+  if (
+    authStatus === AuthenticationStatus.Locked &&
+    forceSetPasswordReason === ForceSetPasswordReason.SsoNewJitProvisionedUser &&
+    !routerState.url.includes("set-initial-password") &&
+    isSetInitialPasswordFlagOn
+  ) {
+    return router.createUrlTree(["/set-initial-password"]);
+  }
+
+  if (
+    authStatus === AuthenticationStatus.Locked &&
+    forceSetPasswordReason !== ForceSetPasswordReason.SsoNewJitProvisionedUser
+  ) {
     if (routerState != null) {
       messagingService.send("lockedUrl", { url: routerState.url });
     }
@@ -55,18 +80,6 @@ export const authGuard: CanActivateFn = async (
     return router.createUrlTree(["/remove-password"]);
   }
 
-  const userId = (await firstValueFrom(accountService.activeAccount$)).id;
-  const forceSetPasswordReason = await firstValueFrom(
-    masterPasswordService.forceSetPasswordReason$(userId),
-  );
-
-  const isSetInitialPasswordFlagOn = await configService.getFeatureFlag(
-    FeatureFlag.PM16117_SetInitialPasswordRefactor,
-  );
-  const isChangePasswordFlagOn = await configService.getFeatureFlag(
-    FeatureFlag.PM16117_ChangeExistingPasswordRefactor,
-  );
-
   // TDE org user has "manage account recovery" permission
   if (
     forceSetPasswordReason ===

libs/angular/src/auth/password-management/set-initial-password/default-set-initial-password.service.implementation.ts

@@ -0,0 +1,290 @@
+import { firstValueFrom } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import {
+  OrganizationUserApiService,
+  OrganizationUserResetPasswordEnrollmentRequest,
+} from "@bitwarden/admin-console/common";
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { InternalUserDecryptionOptionsServiceAbstraction } from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
+import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { SetPasswordRequest } from "@bitwarden/common/auth/models/request/set-password.request";
+import { UpdateTdeOffboardingPasswordRequest } from "@bitwarden/common/auth/models/request/update-tde-offboarding-password.request";
+import { EncryptService } from "@bitwarden/common/key-management/crypto/abstractions/encrypt.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { KeysRequest } from "@bitwarden/common/models/request/keys.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { EncString } from "@bitwarden/common/platform/models/domain/enc-string";
+import { UserId } from "@bitwarden/common/types/guid";
+import { MasterKey, UserKey } from "@bitwarden/common/types/key";
+import { KdfConfigService, KeyService, KdfConfig } from "@bitwarden/key-management";
+
+import {
+  SetInitialPasswordService,
+  SetInitialPasswordCredentials,
+  SetInitialPasswordUserType,
+  SetInitialPasswordTdeOffboardingCredentials,
+} from "./set-initial-password.service.abstraction";
+
+export class DefaultSetInitialPasswordService implements SetInitialPasswordService {
+  constructor(
+    protected apiService: ApiService,
+    protected encryptService: EncryptService,
+    protected i18nService: I18nService,
+    protected kdfConfigService: KdfConfigService,
+    protected keyService: KeyService,
+    protected masterPasswordApiService: MasterPasswordApiService,
+    protected masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    protected organizationApiService: OrganizationApiServiceAbstraction,
+    protected organizationUserApiService: OrganizationUserApiService,
+    protected userDecryptionOptionsService: InternalUserDecryptionOptionsServiceAbstraction,
+  ) {}
+
+  async setInitialPassword(
+    credentials: SetInitialPasswordCredentials,
+    userType: SetInitialPasswordUserType,
+    userId: UserId,
+  ): Promise<void> {
+    const {
+      newMasterKey,
+      newServerMasterKeyHash,
+      newLocalMasterKeyHash,
+      newPasswordHint,
+      kdfConfig,
+      orgSsoIdentifier,
+      orgId,
+      resetPasswordAutoEnroll,
+    } = credentials;
+
+    for (const [key, value] of Object.entries(credentials)) {
+      if (value == null) {
+        throw new Error(`${key} not found. Could not set password.`);
+      }
+    }
+    if (userId == null) {
+      throw new Error("userId not found. Could not set password.");
+    }
+    if (userType == null) {
+      throw new Error("userType not found. Could not set password.");
+    }
+
+    const masterKeyEncryptedUserKey = await this.makeMasterKeyEncryptedUserKey(
+      newMasterKey,
+      userId,
+    );
+    if (masterKeyEncryptedUserKey == null || !masterKeyEncryptedUserKey[1].encryptedString) {
+      throw new Error("masterKeyEncryptedUserKey not found. Could not set password.");
+    }
+
+    let keyPair: [string, EncString] | null = null;
+    let keysRequest: KeysRequest | null = null;
+
+    if (userType === SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER) {
+      /**
+       * A user being JIT provisioned into a MP encryption org does not yet have a user
+       * asymmetric key pair, so we create it for them here.
+       *
+       * Sidenote:
+       *   In the case of a TDE user whose permissions require that they have a MP - that user
+       *   will already have a user asymmetric key pair by this point, so we skip this if-block
+       *   so that we don't create a new key pair for them.
+       */
+
+      // Extra safety check (see description on https://github.com/bitwarden/clients/pull/10180):
+      //   In case we have have a local private key and are not sure whether it has been posted to the server,
+      //   we post the local private key instead of generating a new one
+      const existingUserPrivateKey = (await firstValueFrom(
+        this.keyService.userPrivateKey$(userId),
+      )) as Uint8Array;
+
+      const existingUserPublicKey = await firstValueFrom(this.keyService.userPublicKey$(userId));
+
+      if (existingUserPrivateKey != null && existingUserPublicKey != null) {
+        const existingUserPublicKeyB64 = Utils.fromBufferToB64(existingUserPublicKey);
+
+        // Existing key pair
+        keyPair = [
+          existingUserPublicKeyB64,
+          await this.encryptService.wrapDecapsulationKey(
+            existingUserPrivateKey,
+            masterKeyEncryptedUserKey[0],
+          ),
+        ];
+      } else {
+        // New key pair
+        keyPair = await this.keyService.makeKeyPair(masterKeyEncryptedUserKey[0]);
+      }
+
+      if (keyPair == null) {
+        throw new Error("keyPair not found. Could not set password.");
+      }
+      if (!keyPair[1].encryptedString) {
+        throw new Error("encrypted private key not found. Could not set password.");
+      }
+
+      keysRequest = new KeysRequest(keyPair[0], keyPair[1].encryptedString);
+    }
+
+    const request = new SetPasswordRequest(
+      newServerMasterKeyHash,
+      masterKeyEncryptedUserKey[1].encryptedString,
+      newPasswordHint,
+      orgSsoIdentifier,
+      keysRequest,
+      kdfConfig.kdfType,
+      kdfConfig.iterations,
+    );
+
+    await this.masterPasswordApiService.setPassword(request);
+
+    // Clear force set password reason to allow navigation back to vault.
+    await this.masterPasswordService.setForceSetPasswordReason(ForceSetPasswordReason.None, userId);
+
+    // User now has a password so update account decryption options in state
+    await this.updateAccountDecryptionProperties(
+      newMasterKey,
+      kdfConfig,
+      masterKeyEncryptedUserKey,
+      userId,
+    );
+
+    /**
+     * Set the private key only for new JIT provisioned users in MP encryption orgs.
+     * (Existing TDE users will have their private key set on sync or on login.)
+     */
+    if (keyPair != null && userType === SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER) {
+      if (!keyPair[1].encryptedString) {
+        throw new Error("encrypted private key not found. Could not set private key in state.");
+      }
+      await this.keyService.setPrivateKey(keyPair[1].encryptedString, userId);
+    }
+
+    await this.masterPasswordService.setMasterKeyHash(newLocalMasterKeyHash, userId);
+
+    if (resetPasswordAutoEnroll) {
+      await this.handleResetPasswordAutoEnroll(newServerMasterKeyHash, orgId, userId);
+    }
+  }
+
+  private async makeMasterKeyEncryptedUserKey(
+    masterKey: MasterKey,
+    userId: UserId,
+  ): Promise<[UserKey, EncString]> {
+    let masterKeyEncryptedUserKey: [UserKey, EncString] | null = null;
+
+    const userKey = await firstValueFrom(this.keyService.userKey$(userId));
+
+    if (userKey == null) {
+      masterKeyEncryptedUserKey = await this.keyService.makeUserKey(masterKey);
+    } else {
+      masterKeyEncryptedUserKey = await this.keyService.encryptUserKeyWithMasterKey(masterKey);
+    }
+
+    return masterKeyEncryptedUserKey;
+  }
+
+  private async updateAccountDecryptionProperties(
+    masterKey: MasterKey,
+    kdfConfig: KdfConfig,
+    masterKeyEncryptedUserKey: [UserKey, EncString],
+    userId: UserId,
+  ) {
+    const userDecryptionOpts = await firstValueFrom(
+      this.userDecryptionOptionsService.userDecryptionOptions$,
+    );
+    userDecryptionOpts.hasMasterPassword = true;
+    await this.userDecryptionOptionsService.setUserDecryptionOptions(userDecryptionOpts);
+    await this.kdfConfigService.setKdfConfig(userId, kdfConfig);
+    await this.masterPasswordService.setMasterKey(masterKey, userId);
+    await this.keyService.setUserKey(masterKeyEncryptedUserKey[0], userId);
+  }
+
+  private async handleResetPasswordAutoEnroll(
+    masterKeyHash: string,
+    orgId: string,
+    userId: UserId,
+  ) {
+    const organizationKeys = await this.organizationApiService.getKeys(orgId);
+
+    if (organizationKeys == null) {
+      throw new Error(
+        "Organization keys response is null. Could not handle reset password auto enroll.",
+      );
+    }
+
+    const orgPublicKey = Utils.fromB64ToArray(organizationKeys.publicKey);
+    const userKey = await firstValueFrom(this.keyService.userKey$(userId));
+
+    if (userKey == null) {
+      throw new Error("userKey not found. Could not handle reset password auto enroll.");
+    }
+
+    // RSA encrypt user key with organization public key
+    const orgPublicKeyEncryptedUserKey = await this.encryptService.encapsulateKeyUnsigned(
+      userKey,
+      orgPublicKey,
+    );
+
+    if (orgPublicKeyEncryptedUserKey == null || !orgPublicKeyEncryptedUserKey.encryptedString) {
+      throw new Error(
+        "orgPublicKeyEncryptedUserKey not found. Could not handle reset password auto enroll.",
+      );
+    }
+
+    const enrollmentRequest = new OrganizationUserResetPasswordEnrollmentRequest();
+    enrollmentRequest.masterPasswordHash = masterKeyHash;
+    enrollmentRequest.resetPasswordKey = orgPublicKeyEncryptedUserKey.encryptedString;
+
+    await this.organizationUserApiService.putOrganizationUserResetPasswordEnrollment(
+      orgId,
+      userId,
+      enrollmentRequest,
+    );
+  }
+
+  async setInitialPasswordTdeOffboarding(
+    credentials: SetInitialPasswordTdeOffboardingCredentials,
+    userId: UserId,
+  ) {
+    const { newMasterKey, newServerMasterKeyHash, newPasswordHint } = credentials;
+    for (const [key, value] of Object.entries(credentials)) {
+      if (value == null) {
+        throw new Error(`${key} not found. Could not set password.`);
+      }
+    }
+
+    if (userId == null) {
+      throw new Error("userId not found. Could not set password.");
+    }
+
+    const userKey = await firstValueFrom(this.keyService.userKey$(userId));
+    if (userKey == null) {
+      throw new Error("userKey not found. Could not set password.");
+    }
+
+    const newMasterKeyEncryptedUserKey = await this.keyService.encryptUserKeyWithMasterKey(
+      newMasterKey,
+      userKey,
+    );
+
+    if (!newMasterKeyEncryptedUserKey[1].encryptedString) {
+      throw new Error("newMasterKeyEncryptedUserKey not found. Could not set password.");
+    }
+
+    const request = new UpdateTdeOffboardingPasswordRequest();
+    request.key = newMasterKeyEncryptedUserKey[1].encryptedString;
+    request.newMasterPasswordHash = newServerMasterKeyHash;
+    request.masterPasswordHint = newPasswordHint;
+
+    await this.masterPasswordApiService.putUpdateTdeOffboardingPassword(request);
+
+    // Clear force set password reason to allow navigation back to vault.
+    await this.masterPasswordService.setForceSetPasswordReason(ForceSetPasswordReason.None, userId);
+  }
+}

libs/angular/src/auth/password-management/set-initial-password/default-set-initial-password.service.spec.ts

@@ -0,0 +1,745 @@
+import { MockProxy, mock } from "jest-mock-extended";
+import { BehaviorSubject, of } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import {
+  OrganizationUserApiService,
+  OrganizationUserResetPasswordEnrollmentRequest,
+} from "@bitwarden/admin-console/common";
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import {
+  FakeUserDecryptionOptions as UserDecryptionOptions,
+  InternalUserDecryptionOptionsServiceAbstraction,
+} from "@bitwarden/auth/common";
+import { ApiService } from "@bitwarden/common/abstractions/api.service";
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { OrganizationKeysResponse } from "@bitwarden/common/admin-console/models/response/organization-keys.response";
+import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
+import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { SetPasswordRequest } from "@bitwarden/common/auth/models/request/set-password.request";
+import { UpdateTdeOffboardingPasswordRequest } from "@bitwarden/common/auth/models/request/update-tde-offboarding-password.request";
+import { EncryptService } from "@bitwarden/common/key-management/crypto/abstractions/encrypt.service";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { KeysRequest } from "@bitwarden/common/models/request/keys.request";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { Utils } from "@bitwarden/common/platform/misc/utils";
+import { EncryptedString, EncString } from "@bitwarden/common/platform/models/domain/enc-string";
+import { SymmetricCryptoKey } from "@bitwarden/common/platform/models/domain/symmetric-crypto-key";
+import { CsprngArray } from "@bitwarden/common/types/csprng";
+import { UserId } from "@bitwarden/common/types/guid";
+import { MasterKey, UserKey, UserPrivateKey, UserPublicKey } from "@bitwarden/common/types/key";
+import { DEFAULT_KDF_CONFIG, KdfConfigService, KeyService } from "@bitwarden/key-management";
+
+import { DefaultSetInitialPasswordService } from "./default-set-initial-password.service.implementation";
+import {
+  SetInitialPasswordCredentials,
+  SetInitialPasswordService,
+  SetInitialPasswordTdeOffboardingCredentials,
+  SetInitialPasswordUserType,
+} from "./set-initial-password.service.abstraction";
+
+describe("DefaultSetInitialPasswordService", () => {
+  let sut: SetInitialPasswordService;
+
+  let apiService: MockProxy<ApiService>;
+  let encryptService: MockProxy<EncryptService>;
+  let i18nService: MockProxy<I18nService>;
+  let kdfConfigService: MockProxy<KdfConfigService>;
+  let keyService: MockProxy<KeyService>;
+  let masterPasswordApiService: MockProxy<MasterPasswordApiService>;
+  let masterPasswordService: MockProxy<InternalMasterPasswordServiceAbstraction>;
+  let organizationApiService: MockProxy<OrganizationApiServiceAbstraction>;
+  let organizationUserApiService: MockProxy<OrganizationUserApiService>;
+  let userDecryptionOptionsService: MockProxy<InternalUserDecryptionOptionsServiceAbstraction>;
+
+  let userId: UserId;
+  let userKey: UserKey;
+  let userKeyEncString: EncString;
+  let masterKeyEncryptedUserKey: [UserKey, EncString];
+
+  beforeEach(() => {
+    apiService = mock<ApiService>();
+    encryptService = mock<EncryptService>();
+    i18nService = mock<I18nService>();
+    kdfConfigService = mock<KdfConfigService>();
+    keyService = mock<KeyService>();
+    masterPasswordApiService = mock<MasterPasswordApiService>();
+    masterPasswordService = mock<InternalMasterPasswordServiceAbstraction>();
+    organizationApiService = mock<OrganizationApiServiceAbstraction>();
+    organizationUserApiService = mock<OrganizationUserApiService>();
+    userDecryptionOptionsService = mock<InternalUserDecryptionOptionsServiceAbstraction>();
+
+    userId = "userId" as UserId;
+    userKey = new SymmetricCryptoKey(new Uint8Array(64).buffer as CsprngArray) as UserKey;
+    userKeyEncString = new EncString("masterKeyEncryptedUserKey");
+    masterKeyEncryptedUserKey = [userKey, userKeyEncString];
+
+    sut = new DefaultSetInitialPasswordService(
+      apiService,
+      encryptService,
+      i18nService,
+      kdfConfigService,
+      keyService,
+      masterPasswordApiService,
+      masterPasswordService,
+      organizationApiService,
+      organizationUserApiService,
+      userDecryptionOptionsService,
+    );
+  });
+
+  it("should instantiate", () => {
+    expect(sut).not.toBeFalsy();
+  });
+
+  describe("setInitialPassword(...)", () => {
+    // Mock function parameters
+    let credentials: SetInitialPasswordCredentials;
+    let userType: SetInitialPasswordUserType;
+
+    // Mock other function data
+    let existingUserPublicKey: UserPublicKey;
+    let existingUserPrivateKey: UserPrivateKey;
+    let userKeyEncryptedPrivateKey: EncString;
+
+    let keyPair: [string, EncString];
+    let keysRequest: KeysRequest;
+
+    let organizationKeys: OrganizationKeysResponse;
+    let orgPublicKeyEncryptedUserKey: EncString;
+
+    let userDecryptionOptions: UserDecryptionOptions;
+    let userDecryptionOptionsSubject: BehaviorSubject<UserDecryptionOptions>;
+    let setPasswordRequest: SetPasswordRequest;
+
+    let enrollmentRequest: OrganizationUserResetPasswordEnrollmentRequest;
+
+    beforeEach(() => {
+      // Mock function parameters
+      credentials = {
+        newMasterKey: new SymmetricCryptoKey(new Uint8Array(32).buffer as CsprngArray) as MasterKey,
+        newServerMasterKeyHash: "newServerMasterKeyHash",
+        newLocalMasterKeyHash: "newLocalMasterKeyHash",
+        newPasswordHint: "newPasswordHint",
+        kdfConfig: DEFAULT_KDF_CONFIG,
+        orgSsoIdentifier: "orgSsoIdentifier",
+        orgId: "orgId",
+        resetPasswordAutoEnroll: false,
+      };
+      userType = SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER;
+
+      // Mock other function data
+      existingUserPublicKey = Utils.fromB64ToArray("existingUserPublicKey") as UserPublicKey;
+      existingUserPrivateKey = Utils.fromB64ToArray("existingUserPrivateKey") as UserPrivateKey;
+      userKeyEncryptedPrivateKey = new EncString("userKeyEncryptedPrivateKey");
+
+      keyPair = ["publicKey", new EncString("privateKey")];
+      keysRequest = new KeysRequest(keyPair[0], keyPair[1].encryptedString);
+
+      organizationKeys = {
+        privateKey: "orgPrivateKey",
+        publicKey: "orgPublicKey",
+      } as OrganizationKeysResponse;
+      orgPublicKeyEncryptedUserKey = new EncString("orgPublicKeyEncryptedUserKey");
+
+      userDecryptionOptions = new UserDecryptionOptions({ hasMasterPassword: true });
+      userDecryptionOptionsSubject = new BehaviorSubject(userDecryptionOptions);
+      userDecryptionOptionsService.userDecryptionOptions$ = userDecryptionOptionsSubject;
+
+      setPasswordRequest = new SetPasswordRequest(
+        credentials.newServerMasterKeyHash,
+        masterKeyEncryptedUserKey[1].encryptedString,
+        credentials.newPasswordHint,
+        credentials.orgSsoIdentifier,
+        keysRequest,
+        credentials.kdfConfig.kdfType,
+        credentials.kdfConfig.iterations,
+      );
+
+      enrollmentRequest = new OrganizationUserResetPasswordEnrollmentRequest();
+      enrollmentRequest.masterPasswordHash = credentials.newServerMasterKeyHash;
+      enrollmentRequest.resetPasswordKey = orgPublicKeyEncryptedUserKey.encryptedString;
+    });
+
+    interface MockConfig {
+      userType: SetInitialPasswordUserType;
+      userHasUserKey: boolean;
+      userHasLocalKeyPair: boolean;
+      resetPasswordAutoEnroll: boolean;
+    }
+
+    const defaultMockConfig: MockConfig = {
+      userType: SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER,
+      userHasUserKey: true,
+      userHasLocalKeyPair: false,
+      resetPasswordAutoEnroll: false,
+    };
+
+    function setupMocks(config: MockConfig = defaultMockConfig) {
+      // Mock makeMasterKeyEncryptedUserKey() values
+      if (config.userHasUserKey) {
+        keyService.userKey$.mockReturnValue(of(userKey));
+        keyService.encryptUserKeyWithMasterKey.mockResolvedValue(masterKeyEncryptedUserKey);
+      } else {
+        keyService.userKey$.mockReturnValue(of(null));
+        keyService.makeUserKey.mockResolvedValue(masterKeyEncryptedUserKey);
+      }
+
+      // Mock keyPair values
+      if (config.userType === SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER) {
+        if (config.userHasLocalKeyPair) {
+          keyService.userPrivateKey$.mockReturnValue(of(existingUserPrivateKey));
+          keyService.userPublicKey$.mockReturnValue(of(existingUserPublicKey));
+          encryptService.wrapDecapsulationKey.mockResolvedValue(userKeyEncryptedPrivateKey);
+        } else {
+          keyService.userPrivateKey$.mockReturnValue(of(null));
+          keyService.userPublicKey$.mockReturnValue(of(null));
+          keyService.makeKeyPair.mockResolvedValue(keyPair);
+        }
+      }
+
+      // Mock handleResetPasswordAutoEnroll() values
+      if (config.resetPasswordAutoEnroll) {
+        organizationApiService.getKeys.mockResolvedValue(organizationKeys);
+        encryptService.encapsulateKeyUnsigned.mockResolvedValue(orgPublicKeyEncryptedUserKey);
+        keyService.userKey$.mockReturnValue(of(userKey));
+      }
+    }
+
+    describe("general error handling", () => {
+      [
+        "newMasterKey",
+        "newServerMasterKeyHash",
+        "newLocalMasterKeyHash",
+        "newPasswordHint",
+        "kdfConfig",
+        "orgSsoIdentifier",
+        "orgId",
+        "resetPasswordAutoEnroll",
+      ].forEach((key) => {
+        it(`should throw if ${key} is not provided on the SetInitialPasswordCredentials object`, async () => {
+          // Arrange
+          const invalidCredentials: SetInitialPasswordCredentials = {
+            ...credentials,
+            [key]: null,
+          };
+
+          // Act
+          const promise = sut.setInitialPassword(invalidCredentials, userType, userId);
+
+          // Assert
+          await expect(promise).rejects.toThrow(`${key} not found. Could not set password.`);
+        });
+      });
+
+      ["userId", "userType"].forEach((param) => {
+        it(`should throw if ${param} was not passed in`, async () => {
+          // Arrange & Act
+          const promise = sut.setInitialPassword(
+            credentials,
+            param === "userType" ? null : userType,
+            param === "userId" ? null : userId,
+          );
+
+          // Assert
+          await expect(promise).rejects.toThrow(`${param} not found. Could not set password.`);
+        });
+      });
+    });
+
+    describe("given SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER", () => {
+      beforeEach(() => {
+        userType = SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER;
+      });
+
+      describe("given the user has an existing local key pair", () => {
+        it("should NOT create a brand new key pair for the user", async () => {
+          // Arrange
+          setPasswordRequest.keys = {
+            encryptedPrivateKey: userKeyEncryptedPrivateKey.encryptedString,
+            publicKey: Utils.fromBufferToB64(existingUserPublicKey),
+          };
+
+          setupMocks({ ...defaultMockConfig, userHasLocalKeyPair: true });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(keyService.userPrivateKey$).toHaveBeenCalledWith(userId);
+          expect(keyService.userPublicKey$).toHaveBeenCalledWith(userId);
+          expect(encryptService.wrapDecapsulationKey).toHaveBeenCalledWith(
+            existingUserPrivateKey,
+            masterKeyEncryptedUserKey[0],
+          );
+          expect(keyService.makeKeyPair).not.toHaveBeenCalled();
+        });
+      });
+
+      describe("given the user has a userKey", () => {
+        it("should successfully set an initial password", async () => {
+          // Arrange
+          setupMocks();
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+        });
+      });
+
+      describe("given the user does NOT have a userKey", () => {
+        it("should successfully set an initial password", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userHasUserKey: false });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+        });
+      });
+
+      it("should throw if a key pair is not found", async () => {
+        // Arrange
+        keyPair = null;
+
+        setupMocks();
+
+        // Act
+        const promise = sut.setInitialPassword(credentials, userType, userId);
+
+        // Assert
+        await expect(promise).rejects.toThrow("keyPair not found. Could not set password.");
+        expect(masterPasswordApiService.setPassword).not.toHaveBeenCalled();
+      });
+
+      it("should throw if an encrypted private key is not found", async () => {
+        // Arrange
+        keyPair[1].encryptedString = "" as EncryptedString;
+
+        setupMocks();
+
+        // Act
+        const promise = sut.setInitialPassword(credentials, userType, userId);
+
+        // Assert
+        await expect(promise).rejects.toThrow(
+          "encrypted private key not found. Could not set password.",
+        );
+        expect(masterPasswordApiService.setPassword).not.toHaveBeenCalled();
+      });
+
+      describe("given the initial password has been successfully set", () => {
+        it("should clear the ForceSetPasswordReason by setting it to None", async () => {
+          // Arrange
+          setupMocks();
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(masterPasswordService.setForceSetPasswordReason).toHaveBeenCalledWith(
+            ForceSetPasswordReason.None,
+            userId,
+          );
+        });
+
+        it("should update account decryption properties", async () => {
+          // Arrange
+          setupMocks();
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(userDecryptionOptionsService.setUserDecryptionOptions).toHaveBeenCalledWith(
+            userDecryptionOptions,
+          );
+          expect(kdfConfigService.setKdfConfig).toHaveBeenCalledWith(userId, credentials.kdfConfig);
+          expect(masterPasswordService.setMasterKey).toHaveBeenCalledWith(
+            credentials.newMasterKey,
+            userId,
+          );
+          expect(keyService.setUserKey).toHaveBeenCalledWith(masterKeyEncryptedUserKey[0], userId);
+        });
+
+        it("should set the private key to state", async () => {
+          // Arrange
+          setupMocks();
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(keyService.setPrivateKey).toHaveBeenCalledWith(keyPair[1].encryptedString, userId);
+        });
+
+        it("should set the local master key hash to state", async () => {
+          // Arrange
+          setupMocks();
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(masterPasswordService.setMasterKeyHash).toHaveBeenCalledWith(
+            credentials.newLocalMasterKeyHash,
+            userId,
+          );
+        });
+
+        describe("given resetPasswordAutoEnroll is true", () => {
+          it(`should handle reset password (account recovery) auto enroll`, async () => {
+            // Arrange
+            credentials.resetPasswordAutoEnroll = true;
+
+            setupMocks({ ...defaultMockConfig, resetPasswordAutoEnroll: true });
+
+            // Act
+            await sut.setInitialPassword(credentials, userType, userId);
+
+            // Assert
+            expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+            expect(
+              organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+            ).toHaveBeenCalledWith(credentials.orgId, userId, enrollmentRequest);
+          });
+
+          it("should throw if organization keys are not found", async () => {
+            // Arrange
+            credentials.resetPasswordAutoEnroll = true;
+            organizationKeys = null;
+
+            setupMocks({ ...defaultMockConfig, resetPasswordAutoEnroll: true });
+
+            // Act
+            const promise = sut.setInitialPassword(credentials, userType, userId);
+
+            // Assert
+            await expect(promise).rejects.toThrow(
+              "Organization keys response is null. Could not handle reset password auto enroll.",
+            );
+            expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+            expect(
+              organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+            ).not.toHaveBeenCalled();
+          });
+
+          ["orgPublicKeyEncryptedUserKey", "orgPublicKeyEncryptedUserKey.encryptedString"].forEach(
+            (property) => {
+              it("should throw if orgPublicKeyEncryptedUserKey is not found", async () => {
+                // Arrange
+                credentials.resetPasswordAutoEnroll = true;
+
+                if (property === "orgPublicKeyEncryptedUserKey") {
+                  orgPublicKeyEncryptedUserKey = null;
+                } else {
+                  orgPublicKeyEncryptedUserKey.encryptedString = "" as EncryptedString;
+                }
+
+                setupMocks({ ...defaultMockConfig, resetPasswordAutoEnroll: true });
+
+                // Act
+                const promise = sut.setInitialPassword(credentials, userType, userId);
+
+                // Assert
+                await expect(promise).rejects.toThrow(
+                  "orgPublicKeyEncryptedUserKey not found. Could not handle reset password auto enroll.",
+                );
+                expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(
+                  setPasswordRequest,
+                );
+                expect(
+                  organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+                ).not.toHaveBeenCalled();
+              });
+            },
+          );
+        });
+
+        describe("given resetPasswordAutoEnroll is false", () => {
+          it(`should NOT handle reset password (account recovery) auto enroll`, async () => {
+            // Arrange
+            credentials.resetPasswordAutoEnroll = false;
+
+            setupMocks();
+
+            // Act
+            await sut.setInitialPassword(credentials, userType, userId);
+
+            // Assert
+            expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+            expect(
+              organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+            ).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
+
+    describe("given SetInitialPasswordUserType.TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP", () => {
+      beforeEach(() => {
+        userType = SetInitialPasswordUserType.TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP;
+        setPasswordRequest.keys = null;
+      });
+
+      it("should NOT generate a keyPair", async () => {
+        // Arrange
+        setupMocks({ ...defaultMockConfig, userType });
+
+        // Act
+        await sut.setInitialPassword(credentials, userType, userId);
+
+        // Assert
+        expect(keyService.userPrivateKey$).not.toHaveBeenCalled();
+        expect(keyService.userPublicKey$).not.toHaveBeenCalled();
+        expect(encryptService.wrapDecapsulationKey).not.toHaveBeenCalled();
+        expect(keyService.makeKeyPair).not.toHaveBeenCalled();
+      });
+
+      describe("given the user has a userKey", () => {
+        it("should successfully set an initial password", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+        });
+      });
+
+      describe("given the user does NOT have a userKey", () => {
+        it("should successfully set an initial password", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+        });
+      });
+
+      describe("given the initial password has been successfully set", () => {
+        it("should clear the ForceSetPasswordReason by setting it to None", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(masterPasswordService.setForceSetPasswordReason).toHaveBeenCalledWith(
+            ForceSetPasswordReason.None,
+            userId,
+          );
+        });
+
+        it("should update account decryption properties", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(userDecryptionOptionsService.setUserDecryptionOptions).toHaveBeenCalledWith(
+            userDecryptionOptions,
+          );
+          expect(kdfConfigService.setKdfConfig).toHaveBeenCalledWith(userId, credentials.kdfConfig);
+          expect(masterPasswordService.setMasterKey).toHaveBeenCalledWith(
+            credentials.newMasterKey,
+            userId,
+          );
+          expect(keyService.setUserKey).toHaveBeenCalledWith(masterKeyEncryptedUserKey[0], userId);
+        });
+
+        it("should NOT set the private key to state", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(keyService.setPrivateKey).not.toHaveBeenCalled();
+        });
+
+        it("should set the local master key hash to state", async () => {
+          // Arrange
+          setupMocks({ ...defaultMockConfig, userType });
+
+          // Act
+          await sut.setInitialPassword(credentials, userType, userId);
+
+          // Assert
+          expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+          expect(masterPasswordService.setMasterKeyHash).toHaveBeenCalledWith(
+            credentials.newLocalMasterKeyHash,
+            userId,
+          );
+        });
+
+        describe("given resetPasswordAutoEnroll is true", () => {
+          it(`should handle reset password (account recovery) auto enroll`, async () => {
+            // Arrange
+            credentials.resetPasswordAutoEnroll = true;
+
+            setupMocks({ ...defaultMockConfig, userType, resetPasswordAutoEnroll: true });
+
+            // Act
+            await sut.setInitialPassword(credentials, userType, userId);
+
+            // Assert
+            expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+            expect(
+              organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+            ).toHaveBeenCalledWith(credentials.orgId, userId, enrollmentRequest);
+          });
+        });
+
+        describe("given resetPasswordAutoEnroll is false", () => {
+          it(`should NOT handle reset password (account recovery) auto enroll`, async () => {
+            // Arrange
+            setupMocks({ ...defaultMockConfig, userType });
+
+            // Act
+            await sut.setInitialPassword(credentials, userType, userId);
+
+            // Assert
+            expect(masterPasswordApiService.setPassword).toHaveBeenCalledWith(setPasswordRequest);
+            expect(
+              organizationUserApiService.putOrganizationUserResetPasswordEnrollment,
+            ).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+
+  describe("setInitialPasswordTdeOffboarding(...)", () => {
+    // Mock function parameters
+    let credentials: SetInitialPasswordTdeOffboardingCredentials;
+
+    beforeEach(() => {
+      // Mock function parameters
+      credentials = {
+        newMasterKey: new SymmetricCryptoKey(new Uint8Array(32).buffer as CsprngArray) as MasterKey,
+        newServerMasterKeyHash: "newServerMasterKeyHash",
+        newPasswordHint: "newPasswordHint",
+      };
+    });
+
+    function setupTdeOffboardingMocks() {
+      keyService.userKey$.mockReturnValue(of(userKey));
+      keyService.encryptUserKeyWithMasterKey.mockResolvedValue(masterKeyEncryptedUserKey);
+    }
+
+    it("should successfully set an initial password for the TDE offboarding user", async () => {
+      // Arrange
+      setupTdeOffboardingMocks();
+
+      const request = new UpdateTdeOffboardingPasswordRequest();
+      request.key = masterKeyEncryptedUserKey[1].encryptedString;
+      request.newMasterPasswordHash = credentials.newServerMasterKeyHash;
+      request.masterPasswordHint = credentials.newPasswordHint;
+
+      // Act
+      await sut.setInitialPasswordTdeOffboarding(credentials, userId);
+
+      // Assert
+      expect(masterPasswordApiService.putUpdateTdeOffboardingPassword).toHaveBeenCalledTimes(1);
+      expect(masterPasswordApiService.putUpdateTdeOffboardingPassword).toHaveBeenCalledWith(
+        request,
+      );
+    });
+
+    describe("given the initial password has been successfully set", () => {
+      it("should clear the ForceSetPasswordReason by setting it to None", async () => {
+        // Arrange
+        setupTdeOffboardingMocks();
+
+        // Act
+        await sut.setInitialPasswordTdeOffboarding(credentials, userId);
+
+        // Assert
+        expect(masterPasswordApiService.putUpdateTdeOffboardingPassword).toHaveBeenCalledTimes(1);
+        expect(masterPasswordService.setForceSetPasswordReason).toHaveBeenCalledWith(
+          ForceSetPasswordReason.None,
+          userId,
+        );
+      });
+    });
+
+    describe("general error handling", () => {
+      ["newMasterKey", "newServerMasterKeyHash", "newPasswordHint"].forEach((key) => {
+        it(`should throw if ${key} is not provided on the SetInitialPasswordTdeOffboardingCredentials object`, async () => {
+          // Arrange
+          const invalidCredentials: SetInitialPasswordTdeOffboardingCredentials = {
+            ...credentials,
+            [key]: null,
+          };
+
+          // Act
+          const promise = sut.setInitialPasswordTdeOffboarding(invalidCredentials, userId);
+
+          // Assert
+          await expect(promise).rejects.toThrow(`${key} not found. Could not set password.`);
+        });
+      });
+
+      it(`should throw if the userId was not passed in`, async () => {
+        // Arrange
+        userId = null;
+
+        // Act
+        const promise = sut.setInitialPasswordTdeOffboarding(credentials, userId);
+
+        // Assert
+        await expect(promise).rejects.toThrow("userId not found. Could not set password.");
+      });
+
+      it(`should throw if the userKey was not found`, async () => {
+        // Arrange
+        keyService.userKey$.mockReturnValue(of(null));
+
+        // Act
+        const promise = sut.setInitialPasswordTdeOffboarding(credentials, userId);
+
+        // Assert
+        await expect(promise).rejects.toThrow("userKey not found. Could not set password.");
+      });
+
+      it(`should throw if a newMasterKeyEncryptedUserKey was not returned`, async () => {
+        // Arrange
+        masterKeyEncryptedUserKey[1].encryptedString = "" as EncryptedString;
+
+        setupTdeOffboardingMocks();
+
+        // Act
+        const promise = sut.setInitialPasswordTdeOffboarding(credentials, userId);
+
+        // Assert
+        await expect(promise).rejects.toThrow(
+          "newMasterKeyEncryptedUserKey not found. Could not set password.",
+        );
+      });
+    });
+  });
+});

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.html

@@ -0,0 +1,34 @@
+@if (initializing) {
+  <div class="tw-flex tw-items-center tw-justify-center">
+    <i
+      class="bwi bwi-spinner bwi-spin bwi-3x"
+      title="{{ 'loading' | i18n }}"
+      aria-hidden="true"
+    ></i>
+  </div>
+} @else {
+  <bit-callout
+    *ngIf="resetPasswordAutoEnroll"
+    type="warning"
+    title="{{ 'resetPasswordPolicyAutoEnroll' | i18n }}"
+  >
+    {{ "resetPasswordAutoEnrollInviteWarning" | i18n }}
+  </bit-callout>
+
+  <auth-input-password
+    [flow]="inputPasswordFlow"
+    [email]="email"
+    [userId]="userId"
+    [loading]="submitting"
+    [masterPasswordPolicyOptions]="masterPasswordPolicyOptions"
+    [primaryButtonText]="{
+      key:
+        userType === SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER
+          ? 'setPassword'
+          : 'createAccount',
+    }"
+    [secondaryButtonText]="{ key: 'logOut' }"
+    (onPasswordFormSubmit)="handlePasswordFormSubmit($event)"
+    (onSecondaryButtonClick)="logout()"
+  ></auth-input-password>
+}

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.component.ts

@@ -0,0 +1,307 @@
+import { CommonModule } from "@angular/common";
+import { Component, OnInit } from "@angular/core";
+import { ActivatedRoute, Router } from "@angular/router";
+import { firstValueFrom } from "rxjs";
+
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import {
+  InputPasswordComponent,
+  InputPasswordFlow,
+  PasswordInputResult,
+} from "@bitwarden/auth/angular";
+// This import has been flagged as unallowed for this class. It may be involved in a circular dependency loop.
+// eslint-disable-next-line no-restricted-imports
+import { LogoutService } from "@bitwarden/auth/common";
+import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
+import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/policy/policy-api.service.abstraction";
+import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
+import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
+import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason";
+import { assertTruthy, assertNonNullish } from "@bitwarden/common/auth/utils";
+import { InternalMasterPasswordServiceAbstraction } from "@bitwarden/common/key-management/master-password/abstractions/master-password.service.abstraction";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
+import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service";
+import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
+import { SyncService } from "@bitwarden/common/platform/sync";
+import { UserId } from "@bitwarden/common/types/guid";
+import {
+  AnonLayoutWrapperDataService,
+  CalloutComponent,
+  DialogService,
+  ToastService,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
+
+import {
+  SetInitialPasswordCredentials,
+  SetInitialPasswordService,
+  SetInitialPasswordTdeOffboardingCredentials,
+  SetInitialPasswordUserType,
+} from "./set-initial-password.service.abstraction";
+
+@Component({
+  standalone: true,
+  templateUrl: "set-initial-password.component.html",
+  imports: [CalloutComponent, CommonModule, InputPasswordComponent, I18nPipe],
+})
+export class SetInitialPasswordComponent implements OnInit {
+  protected inputPasswordFlow = InputPasswordFlow.SetInitialPasswordAuthedUser;
+
+  protected email?: string;
+  protected forceSetPasswordReason?: ForceSetPasswordReason;
+  protected initializing = true;
+  protected masterPasswordPolicyOptions: MasterPasswordPolicyOptions | null = null;
+  protected orgId?: string;
+  protected orgSsoIdentifier?: string;
+  protected resetPasswordAutoEnroll?: boolean;
+  protected submitting = false;
+  protected userId?: UserId;
+  protected userType?: SetInitialPasswordUserType;
+  protected SetInitialPasswordUserType = SetInitialPasswordUserType;
+
+  constructor(
+    private accountService: AccountService,
+    private activatedRoute: ActivatedRoute,
+    private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
+    private dialogService: DialogService,
+    private i18nService: I18nService,
+    private logoutService: LogoutService,
+    private logService: LogService,
+    private masterPasswordService: InternalMasterPasswordServiceAbstraction,
+    private messagingService: MessagingService,
+    private organizationApiService: OrganizationApiServiceAbstraction,
+    private policyApiService: PolicyApiServiceAbstraction,
+    private policyService: PolicyService,
+    private router: Router,
+    private setInitialPasswordService: SetInitialPasswordService,
+    private ssoLoginService: SsoLoginServiceAbstraction,
+    private syncService: SyncService,
+    private toastService: ToastService,
+    private validationService: ValidationService,
+  ) {}
+
+  async ngOnInit() {
+    await this.syncService.fullSync(true);
+
+    const activeAccount = await firstValueFrom(this.accountService.activeAccount$);
+    this.userId = activeAccount?.id;
+    this.email = activeAccount?.email;
+
+    await this.establishUserType();
+    await this.getOrgInfo();
+
+    this.initializing = false;
+  }
+
+  private async establishUserType() {
+    if (!this.userId) {
+      throw new Error("userId not found. Could not determine user type.");
+    }
+
+    this.forceSetPasswordReason = await firstValueFrom(
+      this.masterPasswordService.forceSetPasswordReason$(this.userId),
+    );
+
+    if (this.forceSetPasswordReason === ForceSetPasswordReason.SsoNewJitProvisionedUser) {
+      this.userType = SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER;
+      this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
+        pageTitle: { key: "joinOrganization" },
+        pageSubtitle: { key: "finishJoiningThisOrganizationBySettingAMasterPassword" },
+      });
+    }
+
+    if (
+      this.forceSetPasswordReason ===
+      ForceSetPasswordReason.TdeUserWithoutPasswordHasPasswordResetPermission
+    ) {
+      this.userType = SetInitialPasswordUserType.TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP;
+      this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
+        pageTitle: { key: "setMasterPassword" },
+        pageSubtitle: { key: "orgPermissionsUpdatedMustSetPassword" },
+      });
+    }
+
+    if (this.forceSetPasswordReason === ForceSetPasswordReason.TdeOffboarding) {
+      this.userType = SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER;
+      this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
+        pageTitle: { key: "setMasterPassword" },
+        pageSubtitle: { key: "tdeDisabledMasterPasswordRequired" },
+      });
+    }
+
+    // If we somehow end up here without a reason, navigate to root
+    if (this.forceSetPasswordReason === ForceSetPasswordReason.None) {
+      await this.router.navigate(["/"]);
+    }
+  }
+
+  private async getOrgInfo() {
+    if (!this.userId) {
+      throw new Error("userId not found. Could not handle query params.");
+    }
+
+    if (this.userType === SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER) {
+      this.masterPasswordPolicyOptions =
+        (await firstValueFrom(this.policyService.masterPasswordPolicyOptions$(this.userId))) ??
+        null;
+
+      return;
+    }
+
+    const qParams = await firstValueFrom(this.activatedRoute.queryParams);
+
+    this.orgSsoIdentifier =
+      qParams.identifier ??
+      (await this.ssoLoginService.getActiveUserOrganizationSsoIdentifier(this.userId));
+
+    if (this.orgSsoIdentifier != null) {
+      try {
+        const autoEnrollStatus = await this.organizationApiService.getAutoEnrollStatus(
+          this.orgSsoIdentifier,
+        );
+        this.orgId = autoEnrollStatus.id;
+        this.resetPasswordAutoEnroll = autoEnrollStatus.resetPasswordEnabled;
+        this.masterPasswordPolicyOptions =
+          await this.policyApiService.getMasterPasswordPolicyOptsForOrgUser(this.orgId);
+      } catch {
+        this.toastService.showToast({
+          variant: "error",
+          title: "",
+          message: this.i18nService.t("errorOccurred"),
+        });
+      }
+    }
+  }
+
+  protected async handlePasswordFormSubmit(passwordInputResult: PasswordInputResult) {
+    this.submitting = true;
+
+    switch (this.userType) {
+      case SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER:
+      case SetInitialPasswordUserType.TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP:
+        await this.setInitialPassword(passwordInputResult);
+        break;
+      case SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER:
+        await this.setInitialPasswordTdeOffboarding(passwordInputResult);
+        break;
+      default:
+        this.logService.error(
+          `Unexpected user type: ${this.userType}. Could not set initial password.`,
+        );
+        this.validationService.showError("Unexpected user type. Could not set initial password.");
+    }
+  }
+
+  private async setInitialPassword(passwordInputResult: PasswordInputResult) {
+    const ctx = "Could not set initial password.";
+    assertTruthy(passwordInputResult.newMasterKey, "newMasterKey", ctx);
+    assertTruthy(passwordInputResult.newServerMasterKeyHash, "newServerMasterKeyHash", ctx);
+    assertTruthy(passwordInputResult.newLocalMasterKeyHash, "newLocalMasterKeyHash", ctx);
+    assertTruthy(passwordInputResult.kdfConfig, "kdfConfig", ctx);
+    assertTruthy(this.orgSsoIdentifier, "orgSsoIdentifier", ctx);
+    assertTruthy(this.orgId, "orgId", ctx);
+    assertTruthy(this.userType, "userType", ctx);
+    assertTruthy(this.userId, "userId", ctx);
+    assertNonNullish(passwordInputResult.newPasswordHint, "newPasswordHint", ctx); // can have an empty string as a valid value, so check non-nullish
+    assertNonNullish(this.resetPasswordAutoEnroll, "resetPasswordAutoEnroll", ctx); // can have `false` as a valid value, so check non-nullish
+
+    try {
+      const credentials: SetInitialPasswordCredentials = {
+        newMasterKey: passwordInputResult.newMasterKey,
+        newServerMasterKeyHash: passwordInputResult.newServerMasterKeyHash,
+        newLocalMasterKeyHash: passwordInputResult.newLocalMasterKeyHash,
+        newPasswordHint: passwordInputResult.newPasswordHint,
+        kdfConfig: passwordInputResult.kdfConfig,
+        orgSsoIdentifier: this.orgSsoIdentifier,
+        orgId: this.orgId,
+        resetPasswordAutoEnroll: this.resetPasswordAutoEnroll,
+      };
+
+      await this.setInitialPasswordService.setInitialPassword(
+        credentials,
+        this.userType,
+        this.userId,
+      );
+
+      this.showSuccessToastByUserType();
+
+      this.submitting = false;
+      await this.router.navigate(["vault"]);
+    } catch (e) {
+      this.logService.error("Error setting initial password", e);
+      this.validationService.showError(e);
+      this.submitting = false;
+    }
+  }
+
+  private async setInitialPasswordTdeOffboarding(passwordInputResult: PasswordInputResult) {
+    const ctx = "Could not set initial password.";
+    assertTruthy(passwordInputResult.newMasterKey, "newMasterKey", ctx);
+    assertTruthy(passwordInputResult.newServerMasterKeyHash, "newServerMasterKeyHash", ctx);
+    assertTruthy(this.userId, "userId", ctx);
+    assertNonNullish(passwordInputResult.newPasswordHint, "newPasswordHint", ctx); // can have an empty string as a valid value, so check non-nullish
+
+    try {
+      const credentials: SetInitialPasswordTdeOffboardingCredentials = {
+        newMasterKey: passwordInputResult.newMasterKey,
+        newServerMasterKeyHash: passwordInputResult.newServerMasterKeyHash,
+        newPasswordHint: passwordInputResult.newPasswordHint,
+      };
+
+      await this.setInitialPasswordService.setInitialPasswordTdeOffboarding(
+        credentials,
+        this.userId,
+      );
+
+      this.showSuccessToastByUserType();
+
+      await this.logoutService.logout(this.userId);
+      // navigate to root so redirect guard can properly route next active user or null user to correct page
+      await this.router.navigate(["/"]);
+    } catch (e) {
+      this.logService.error("Error setting initial password during TDE offboarding", e);
+      this.validationService.showError(e);
+    } finally {
+      this.submitting = false;
+    }
+  }
+
+  private showSuccessToastByUserType() {
+    if (this.userType === SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER) {
+      this.toastService.showToast({
+        variant: "success",
+        title: "",
+        message: this.i18nService.t("accountSuccessfullyCreated"),
+      });
+
+      this.toastService.showToast({
+        variant: "success",
+        title: "",
+        message: this.i18nService.t("inviteAccepted"),
+      });
+    } else {
+      this.toastService.showToast({
+        variant: "success",
+        title: "",
+        message: this.i18nService.t("masterPasswordSuccessfullySet"),
+      });
+    }
+  }
+
+  protected async logout() {
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "logOut" },
+      content: { key: "logOutConfirmation" },
+      acceptButtonText: { key: "logOut" },
+      type: "warning",
+    });
+
+    if (confirmed) {
+      this.messagingService.send("logout");
+    }
+  }
+}

libs/angular/src/auth/password-management/set-initial-password/set-initial-password.service.abstraction.ts

@@ -0,0 +1,89 @@
+import { UserId } from "@bitwarden/common/types/guid";
+import { MasterKey } from "@bitwarden/common/types/key";
+import { KdfConfig } from "@bitwarden/key-management";
+
+export const _SetInitialPasswordUserType = {
+  /**
+   * A user being "just-in-time" (JIT) provisioned into a master-password-encryption org
+   */
+  JIT_PROVISIONED_MP_ORG_USER: "jit_provisioned_mp_org_user",
+
+  /**
+   * Could be one of two scenarios:
+   *  1. A user being "just-in-time" (JIT) provisioned into a trusted-device-encryption org
+   *     with the reset password permission granted ("manage account recovery"), which requires
+   *     that the user sets a master password
+   *  2. An user in a trusted-device-encryption org whose permissions were upgraded to include
+   *     the reset password permission ("manage account recovery"), which requires that the user
+   *     sets a master password
+   */
+  TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP:
+    "tde_org_user_reset_password_permission_requires_mp",
+
+  /**
+   * A user in an org that offboarded from trusted device encryption and is now a
+   * master-password-encryption org
+   */
+  OFFBOARDED_TDE_ORG_USER: "offboarded_tde_org_user",
+} as const;
+
+type _SetInitialPasswordUserType = typeof _SetInitialPasswordUserType;
+
+export type SetInitialPasswordUserType =
+  _SetInitialPasswordUserType[keyof _SetInitialPasswordUserType];
+export const SetInitialPasswordUserType: Readonly<{
+  [K in keyof typeof _SetInitialPasswordUserType]: SetInitialPasswordUserType;
+}> = Object.freeze(_SetInitialPasswordUserType);
+
+export interface SetInitialPasswordCredentials {
+  newMasterKey: MasterKey;
+  newServerMasterKeyHash: string;
+  newLocalMasterKeyHash: string;
+  newPasswordHint: string;
+  kdfConfig: KdfConfig;
+  orgSsoIdentifier: string;
+  orgId: string;
+  resetPasswordAutoEnroll: boolean;
+}
+
+export interface SetInitialPasswordTdeOffboardingCredentials {
+  newMasterKey: MasterKey;
+  newServerMasterKeyHash: string;
+  newPasswordHint: string;
+}
+
+/**
+ * Handles setting an initial password for an existing authed user.
+ *
+ * To see the different scenarios where an existing authed user needs to set an
+ * initial password, see {@link SetInitialPasswordUserType}
+ */
+export abstract class SetInitialPasswordService {
+  /**
+   * Sets an initial password for an existing authed user who is either:
+   * - {@link SetInitialPasswordUserType.JIT_PROVISIONED_MP_ORG_USER}
+   * - {@link SetInitialPasswordUserType.TDE_ORG_USER_RESET_PASSWORD_PERMISSION_REQUIRES_MP}
+   *
+   * @param credentials An object of the credentials needed to set the initial password
+   * @throws If any property on the `credentials` object is null or undefined, or if a
+   *         masterKeyEncryptedUserKey or newKeyPair could not be created.
+   */
+  abstract setInitialPassword: (
+    credentials: SetInitialPasswordCredentials,
+    userType: SetInitialPasswordUserType,
+    userId: UserId,
+  ) => Promise<void>;
+
+  /**
+   * Sets an initial password for a user who logs in after their org offboarded from
+   * trusted device encryption and is now a master-password-encryption org:
+   * - {@link SetInitialPasswordUserType.OFFBOARDED_TDE_ORG_USER}
+   *
+   * @param passwordInputResult credentials object received from the `InputPasswordComponent`
+   * @param userId the account `userId`
+   */
+  abstract setInitialPasswordTdeOffboarding: (
+    credentials: SetInitialPasswordTdeOffboardingCredentials,
+    userId: UserId,
+  ) => Promise<void>;
+}

libs/angular/src/services/jslib-services.module.ts

@@ -339,6 +339,8 @@ import {
   VaultExportServiceAbstraction,
 } from "@bitwarden/vault-export-core";
 
+import { DefaultSetInitialPasswordService } from "../auth/password-management/set-initial-password/default-set-initial-password.service.implementation";
+import { SetInitialPasswordService } from "../auth/password-management/set-initial-password/set-initial-password.service.abstraction";
 import { DeviceTrustToastService as DeviceTrustToastServiceAbstraction } from "../auth/services/device-trust-toast.service.abstraction";
 import { DeviceTrustToastService } from "../auth/services/device-trust-toast.service.implementation";
 import { FormValidationErrorsService as FormValidationErrorsServiceAbstraction } from "../platform/abstractions/form-validation-errors.service";
@@ -1419,6 +1421,22 @@ const safeProviders: SafeProvider[] = [
       InternalUserDecryptionOptionsServiceAbstraction,
     ],
   }),
+  safeProvider({
+    provide: SetInitialPasswordService,
+    useClass: DefaultSetInitialPasswordService,
+    deps: [
+      ApiServiceAbstraction,
+      EncryptService,
+      I18nServiceAbstraction,
+      KdfConfigService,
+      KeyService,
+      MasterPasswordApiServiceAbstraction,
+      InternalMasterPasswordServiceAbstraction,
+      OrganizationApiServiceAbstraction,
+      OrganizationUserApiService,
+      InternalUserDecryptionOptionsServiceAbstraction,
+    ],
+  }),
   safeProvider({
     provide: DefaultServerSettingsService,
     useClass: DefaultServerSettingsService,

libs/angular/src/tools/send/add-edit.component.ts

@@ -148,14 +148,6 @@ export class AddEditComponent implements OnInit, OnDestroy {
     return null;
   }
 
-  get isSafari() {
-    return this.platformUtilsService.isSafari();
-  }
-
-  get isDateTimeLocalSupported(): boolean {
-    return !(this.platformUtilsService.isFirefox() || this.platformUtilsService.isSafari());
-  }
-
   async ngOnInit() {
     this.accountService.activeAccount$
       .pipe(

libs/angular/src/vault/abstractions/deprecated-vault-filter.service.ts

@@ -6,6 +6,7 @@ import { Observable } from "rxjs";
 // eslint-disable-next-line no-restricted-imports
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { UserId } from "@bitwarden/common/types/guid";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 
 import { DynamicTreeNode } from "../vault-filter/models/dynamic-tree-node.model";
@@ -14,11 +15,14 @@ import { DynamicTreeNode } from "../vault-filter/models/dynamic-tree-node.model"
  * @deprecated August 30 2022: Use new VaultFilterService with observables
  */
 export abstract class DeprecatedVaultFilterService {
-  buildOrganizations: () => Promise<Organization[]>;
-  buildNestedFolders: (organizationId?: string) => Observable<DynamicTreeNode<FolderView>>;
-  buildCollections: (organizationId?: string) => Promise<DynamicTreeNode<CollectionView>>;
-  buildCollapsedFilterNodes: () => Promise<Set<string>>;
-  storeCollapsedFilterNodes: (collapsedFilterNodes: Set<string>) => Promise<void>;
-  checkForSingleOrganizationPolicy: () => Promise<boolean>;
-  checkForOrganizationDataOwnershipPolicy: () => Promise<boolean>;
+  abstract buildOrganizations(): Promise<Organization[]>;
+  abstract buildNestedFolders(organizationId?: string): Observable<DynamicTreeNode<FolderView>>;
+  abstract buildCollections(organizationId?: string): Promise<DynamicTreeNode<CollectionView>>;
+  abstract buildCollapsedFilterNodes(userId: UserId): Promise<Set<string>>;
+  abstract storeCollapsedFilterNodes(
+    collapsedFilterNodes: Set<string>,
+    userId: UserId,
+  ): Promise<void>;
+  abstract checkForSingleOrganizationPolicy(): Promise<boolean>;
+  abstract checkForOrganizationDataOwnershipPolicy(): Promise<boolean>;
 }

libs/angular/src/vault/vault-filter/components/vault-filter.component.ts

@@ -7,6 +7,9 @@ import { firstValueFrom, Observable } from "rxjs";
 // eslint-disable-next-line no-restricted-imports
 import { CollectionView } from "@bitwarden/admin-console/common";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { getUserId } from "@bitwarden/common/auth/services/account.service";
+import { UserId } from "@bitwarden/common/types/guid";
 import { ITreeNodeObject } from "@bitwarden/common/vault/models/domain/tree-node";
 import { FolderView } from "@bitwarden/common/vault/models/view/folder.view";
 
@@ -29,6 +32,8 @@ export class VaultFilterComponent implements OnInit {
   @Output() onAddFolder = new EventEmitter<never>();
   @Output() onEditFolder = new EventEmitter<FolderView>();
 
+  private activeUserId: UserId;
+
   isLoaded = false;
   collapsedFilterNodes: Set<string>;
   organizations: Organization[];
@@ -37,14 +42,20 @@ export class VaultFilterComponent implements OnInit {
   collections: DynamicTreeNode<CollectionView>;
   folders$: Observable<DynamicTreeNode<FolderView>>;
 
-  constructor(protected vaultFilterService: DeprecatedVaultFilterService) {}
+  constructor(
+    protected vaultFilterService: DeprecatedVaultFilterService,
+    protected accountService: AccountService,
+  ) {}
 
   get displayCollections() {
     return this.collections?.fullList != null && this.collections.fullList.length > 0;
   }
 
   async ngOnInit(): Promise<void> {
-    this.collapsedFilterNodes = await this.vaultFilterService.buildCollapsedFilterNodes();
+    this.activeUserId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
+    this.collapsedFilterNodes = await this.vaultFilterService.buildCollapsedFilterNodes(
+      this.activeUserId,
+    );
     this.organizations = await this.vaultFilterService.buildOrganizations();
     if (this.organizations != null && this.organizations.length > 0) {
       this.activeOrganizationDataOwnershipPolicy =
@@ -68,7 +79,10 @@ export class VaultFilterComponent implements OnInit {
     } else {
       this.collapsedFilterNodes.add(node.id);
     }
-    await this.vaultFilterService.storeCollapsedFilterNodes(this.collapsedFilterNodes);
+    await this.vaultFilterService.storeCollapsedFilterNodes(
+      this.collapsedFilterNodes,
+      this.activeUserId,
+    );
   }
 
   async applyFilter(filter: VaultFilter) {

libs/angular/src/vault/vault-filter/services/vault-filter.service.ts

@@ -12,7 +12,7 @@ import { PolicyType } from "@bitwarden/common/admin-console/enums";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
-import { ActiveUserState, StateProvider } from "@bitwarden/common/platform/state";
+import { SingleUserState, StateProvider } from "@bitwarden/common/platform/state";
 import { UserId } from "@bitwarden/common/types/guid";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
 import { FolderService } from "@bitwarden/common/vault/abstractions/folder/folder.service.abstraction";
@@ -28,10 +28,9 @@ const NestingDelimiter = "/";
 
 @Injectable()
 export class VaultFilterService implements DeprecatedVaultFilterServiceAbstraction {
-  private collapsedGroupingsState: ActiveUserState<string[]> =
-    this.stateProvider.getActive(COLLAPSED_GROUPINGS);
-  private readonly collapsedGroupings$: Observable<Set<string>> =
-    this.collapsedGroupingsState.state$.pipe(map((c) => new Set(c)));
+  private collapsedGroupingsState(userId: UserId): SingleUserState<string[]> {
+    return this.stateProvider.getUser(userId, COLLAPSED_GROUPINGS);
+  }
 
   constructor(
     protected organizationService: OrganizationService,
@@ -43,12 +42,17 @@ export class VaultFilterService implements DeprecatedVaultFilterServiceAbstracti
     protected accountService: AccountService,
   ) {}
 
-  async storeCollapsedFilterNodes(collapsedFilterNodes: Set<string>): Promise<void> {
-    await this.collapsedGroupingsState.update(() => Array.from(collapsedFilterNodes));
+  async storeCollapsedFilterNodes(
+    collapsedFilterNodes: Set<string>,
+    userId: UserId,
+  ): Promise<void> {
+    await this.collapsedGroupingsState(userId).update(() => Array.from(collapsedFilterNodes));
   }
 
-  async buildCollapsedFilterNodes(): Promise<Set<string>> {
-    return await firstValueFrom(this.collapsedGroupings$);
+  async buildCollapsedFilterNodes(userId: UserId): Promise<Set<string>> {
+    return await firstValueFrom(
+      this.collapsedGroupingsState(userId).state$.pipe(map((c) => new Set(c))),
+    );
   }
 
   async buildOrganizations(): Promise<Organization[]> {

libs/auth/src/angular/registration/registration-finish/default-registration-finish.service.ts

@@ -25,6 +25,10 @@ export class DefaultRegistrationFinishService implements RegistrationFinishServi
     return null;
   }
 
+  determineLoginSuccessRoute(): Promise<string> {
+    return Promise.resolve("/vault");
+  }
+
   async finishRegistration(
     email: string,
     passwordInputResult: PasswordInputResult,

libs/auth/src/angular/registration/registration-finish/registration-finish.component.ts

@@ -10,7 +10,9 @@ import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/mod
 import { AccountApiService } from "@bitwarden/common/auth/abstractions/account-api.service";
 import { RegisterVerificationEmailClickedRequest } from "@bitwarden/common/auth/models/request/registration/register-verification-email-clicked.request";
 import { HttpStatusCode } from "@bitwarden/common/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ErrorResponse } from "@bitwarden/common/models/response/error.response";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@@ -77,6 +79,7 @@ export class RegistrationFinishComponent implements OnInit, OnDestroy {
     private logService: LogService,
     private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
     private loginSuccessHandlerService: LoginSuccessHandlerService,
+    private configService: ConfigService,
   ) {}
 
   async ngOnInit() {
@@ -186,15 +189,23 @@ export class RegistrationFinishComponent implements OnInit, OnDestroy {
         return;
       }
 
-      this.toastService.showToast({
-        variant: "success",
-        title: null,
-        message: this.i18nService.t("youHaveBeenLoggedIn"),
-      });
+      const endUserActivationFlagEnabled = await this.configService.getFeatureFlag(
+        FeatureFlag.PM19315EndUserActivationMvp,
+      );
+
+      if (!endUserActivationFlagEnabled) {
+        // Only show the toast when the end user activation feature flag is _not_ enabled
+        this.toastService.showToast({
+          variant: "success",
+          title: null,
+          message: this.i18nService.t("youHaveBeenLoggedIn"),
+        });
+      }
 
       await this.loginSuccessHandlerService.run(authenticationResult.userId);
 
-      await this.router.navigate(["/vault"]);
+      const successRoute = await this.registrationFinishService.determineLoginSuccessRoute();
+      await this.router.navigate([successRoute]);
     } catch (e) {
       // If login errors, redirect to login page per product. Don't show error
       this.logService.error("Error logging in after registration: ", e.message);

libs/auth/src/angular/registration/registration-finish/registration-finish.service.ts

@@ -16,6 +16,11 @@ export abstract class RegistrationFinishService {
    */
   abstract getMasterPasswordPolicyOptsFromOrgInvite(): Promise<MasterPasswordPolicyOptions | null>;
 
+  /**
+   * Returns the route the user is redirected to after a successful login.
+   */
+  abstract determineLoginSuccessRoute(): Promise<string>;
+
   /**
    * Finishes the registration process by creating a new user account.
    *

libs/common/spec/fake-storage.service.ts

@@ -1,119 +1 @@
-import { MockProxy, mock } from "jest-mock-extended";
-import { Subject } from "rxjs";
-
-import {
-  AbstractStorageService,
-  ObservableStorageService,
-  StorageUpdate,
-} from "../src/platform/abstractions/storage.service";
-import { StorageOptions } from "../src/platform/models/domain/storage-options";
-
-const INTERNAL_KEY = "__internal__";
-
-export class FakeStorageService implements AbstractStorageService, ObservableStorageService {
-  private store: Record<string, unknown>;
-  private updatesSubject = new Subject<StorageUpdate>();
-  private _valuesRequireDeserialization = false;
-
-  /**
-   * Returns a mock of a {@see AbstractStorageService} for asserting the expected
-   * amount of calls. It is not recommended to use this to mock implementations as
-   * they are not respected.
-   */
-  mock: MockProxy<AbstractStorageService>;
-
-  constructor(initial?: Record<string, unknown>) {
-    this.store = initial ?? {};
-    this.mock = mock<AbstractStorageService>();
-  }
-
-  /**
-   * Updates the internal store for this fake implementation, this bypasses any mock calls
-   * or updates to the {@link updates$} observable.
-   * @param store
-   */
-  internalUpdateStore(store: Record<string, unknown>) {
-    this.store = store;
-  }
-
-  get internalStore() {
-    return this.store;
-  }
-
-  internalUpdateValuesRequireDeserialization(value: boolean) {
-    this._valuesRequireDeserialization = value;
-  }
-
-  get valuesRequireDeserialization(): boolean {
-    return this._valuesRequireDeserialization;
-  }
-
-  get updates$() {
-    return this.updatesSubject.asObservable();
-  }
-
-  get<T>(key: string, options?: StorageOptions): Promise<T> {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.mock.get(key, options);
-    const value = this.store[key] as T;
-    return Promise.resolve(value);
-  }
-  has(key: string, options?: StorageOptions): Promise<boolean> {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.mock.has(key, options);
-    return Promise.resolve(this.store[key] != null);
-  }
-  async save<T>(key: string, obj: T, options?: StorageOptions): Promise<void> {
-    // These exceptions are copied from https://github.com/sindresorhus/conf/blob/608adb0c46fb1680ddbd9833043478367a64c120/source/index.ts#L193-L203
-    // which is a library that is used by `ElectronStorageService`. We add them here to ensure that the behavior in our testing mirrors the real world.
-    if (typeof key !== "string" && typeof key !== "object") {
-      throw new TypeError(
-        `Expected \`key\` to be of type \`string\` or \`object\`, got ${typeof key}`,
-      );
-    }
-
-    // We don't throw this error because ElectronStorageService automatically detects this case
-    // and calls `delete()` instead of `set()`.
-    // if (typeof key !== "object" && obj === undefined) {
-    //   throw new TypeError("Use `delete()` to clear values");
-    // }
-
-    if (this._containsReservedKey(key)) {
-      throw new TypeError(
-        `Please don't use the ${INTERNAL_KEY} key, as it's used to manage this module internal operations.`,
-      );
-    }
-
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.mock.save(key, obj, options);
-    this.store[key] = obj;
-    this.updatesSubject.next({ key: key, updateType: "save" });
-  }
-  remove(key: string, options?: StorageOptions): Promise<void> {
-    // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    this.mock.remove(key, options);
-    delete this.store[key];
-    this.updatesSubject.next({ key: key, updateType: "remove" });
-    return Promise.resolve();
-  }
-
-  private _containsReservedKey(key: string | Partial<unknown>): boolean {
-    if (typeof key === "object") {
-      const firsKey = Object.keys(key)[0];
-
-      if (firsKey === INTERNAL_KEY) {
-        return true;
-      }
-    }
-
-    if (typeof key !== "string") {
-      return false;
-    }
-
-    return false;
-  }
-}
+export { FakeStorageService } from "@bitwarden/storage-test-utils";

libs/common/spec/jest-sdk-client-factory.ts

@@ -1,9 +1,11 @@
-import { ClientSettings, LogLevel, BitwardenClient } from "@bitwarden/sdk-internal";
+import { BitwardenClient } from "@bitwarden/sdk-internal";
 
 import { SdkClientFactory } from "../src/platform/abstractions/sdk/sdk-client-factory";
 
 export class DefaultSdkClientFactory implements SdkClientFactory {
-  createSdkClient(settings?: ClientSettings, log_level?: LogLevel): Promise<BitwardenClient> {
+  createSdkClient(
+    ...args: ConstructorParameters<typeof BitwardenClient>
+  ): Promise<BitwardenClient> {
     throw new Error("Method not implemented.");
   }
 }

libs/common/src/auth/utils/assert-non-nullish.util.ts

@@ -0,0 +1,45 @@
+/**
+ * Asserts that a value is non-nullish (not `null` or `undefined`); throws if value is nullish.
+ *
+ * @param val the value to check
+ * @param name the name of the value to include in the error message
+ * @param ctx context to optionally append to the error message
+ * @throws if the value is null or undefined
+ *
+ * @example
+ *
+ * ```
+ *    // `newPasswordHint` can have an empty string as a valid value, so we check non-nullish
+ *    this.assertNonNullish(
+ *      passwordInputResult.newPasswordHint,
+ *      "newPasswordHint",
+ *      "Could not set initial password."
+ *    );
+ *    // Output error message: "newPasswordHint is null or undefined. Could not set initial password."
+ * ```
+ *
+ * @remarks
+ *
+ * If you use this method repeatedly to check several values, it may help to assign any
+ * additional context (`ctx`) to a variable and pass it in to each call. This prevents the
+ * call from reformatting vertically via prettier in your text editor, taking up multiple lines.
+ *
+ * For example:
+ * ```
+ *    const ctx = "Could not set initial password.";
+ *
+ *    this.assertNonNullish(valueOne, "valueOne", ctx);
+ *    this.assertNonNullish(valueTwo, "valueTwo", ctx);
+ *    this.assertNonNullish(valueThree, "valueThree", ctx);
+ * ```
+ */
+export function assertNonNullish<T>(
+  val: T,
+  name: string,
+  ctx?: string,
+): asserts val is NonNullable<T> {
+  if (val == null) {
+    // If context is provided, append it to the error message with a space before it.
+    throw new Error(`${name} is null or undefined.${ctx ? ` ${ctx}` : ""}`);
+  }
+}

libs/common/src/auth/utils/assert-truthy.util.ts

@@ -0,0 +1,46 @@
+/**
+ * Asserts that a value is truthy; throws if value is falsy.
+ *
+ * @param val the value to check
+ * @param name the name of the value to include in the error message
+ * @param ctx context to optionally append to the error message
+ * @throws if the value is falsy (`false`, `""`, `0`, `null`, `undefined`, `void`, or `NaN`)
+ *
+ * @example
+ *
+ * ```
+ *    this.assertTruthy(
+ *      this.organizationId,
+ *      "organizationId",
+ *      "Could not set initial password."
+ *    );
+ *    // Output error message: "organizationId is falsy. Could not set initial password."
+ * ```
+ *
+ * @remarks
+ *
+ * If you use this method repeatedly to check several values, it may help to assign any
+ * additional context (`ctx`) to a variable and pass it in to each call. This prevents the
+ * call from reformatting vertically via prettier in your text editor, taking up multiple lines.
+ *
+ * For example:
+ * ```
+ *    const ctx = "Could not set initial password.";
+ *
+ *    this.assertTruthy(valueOne, "valueOne", ctx);
+ *    this.assertTruthy(valueTwo, "valueTwo", ctx);
+ *    this.assertTruthy(valueThree, "valueThree", ctx);
+ */
+export function assertTruthy<T>(
+  val: T,
+  name: string,
+  ctx?: string,
+): asserts val is Exclude<T, false | "" | 0 | null | undefined | void | 0n> {
+  // Because `NaN` is a value (not a type) of type 'number', that means we cannot add
+  // it to the list of falsy values in the type assertion. Instead, we check for it
+  // separately at runtime.
+  if (!val || (typeof val === "number" && Number.isNaN(val))) {
+    // If context is provided, append it to the error message with a space before it.
+    throw new Error(`${name} is falsy.${ctx ? ` ${ctx}` : ""}`);
+  }
+}

libs/common/src/auth/utils/index.ts

@@ -0,0 +1,2 @@
+export { assertTruthy } from "./assert-truthy.util";
+export { assertNonNullish } from "./assert-non-nullish.util";

libs/common/src/enums/device-type.enum.ts

@@ -27,6 +27,7 @@ export enum DeviceType {
   WindowsCLI = 23,
   MacOsCLI = 24,
   LinuxCLI = 25,
+  DuckDuckGoBrowser = 26,
 }
 
 /**
@@ -55,6 +56,7 @@ export const DeviceTypeMetadata: Record<DeviceType, DeviceTypeMetadata> = {
   [DeviceType.IEBrowser]: { category: "webVault", platform: "IE" },
   [DeviceType.SafariBrowser]: { category: "webVault", platform: "Safari" },
   [DeviceType.VivaldiBrowser]: { category: "webVault", platform: "Vivaldi" },
+  [DeviceType.DuckDuckGoBrowser]: { category: "webVault", platform: "DuckDuckGo" },
   [DeviceType.UnknownBrowser]: { category: "webVault", platform: "Unknown" },
   [DeviceType.WindowsDesktop]: { category: "desktop", platform: "Windows" },
   [DeviceType.MacOsDesktop]: { category: "desktop", platform: "macOS" },

libs/common/src/enums/event-type.enum.ts

@@ -90,4 +90,7 @@ export enum EventType {
   OrganizationDomain_NotVerified = 2003,
 
   Secret_Retrieved = 2100,
+  Secret_Created = 2101,
+  Secret_Edited = 2102,
+  Secret_Deleted = 2103,
 }

libs/common/src/enums/feature-flag.enum.ts

@@ -33,6 +33,7 @@ export enum FeatureFlag {
   PM17772_AdminInitiatedSponsorships = "pm-17772-admin-initiated-sponsorships",
   PM19956_RequireProviderPaymentMethodDuringSetup = "pm-19956-require-provider-payment-method-during-setup",
   UseOrganizationWarningsService = "use-organization-warnings-service",
+  AllowTrialLengthZero = "pm-20322-allow-trial-length-0",
 
   /* Data Insights and Reporting */
   EnableRiskInsightsNotifications = "enable-risk-insights-notifications",
@@ -55,6 +56,7 @@ export enum FeatureFlag {
   PM18520_UpdateDesktopCipherForm = "pm-18520-desktop-cipher-forms",
   EndUserNotifications = "pm-10609-end-user-notifications",
   RemoveCardItemTypePolicy = "pm-16442-remove-card-item-type-policy",
+  PM19315EndUserActivationMvp = "pm-19315-end-user-activation-mvp",
 
   /* Platform */
   IpcChannelFramework = "ipc-channel-framework",
@@ -99,6 +101,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.EndUserNotifications]: FALSE,
   [FeatureFlag.PM19941MigrateCipherDomainToSdk]: FALSE,
   [FeatureFlag.RemoveCardItemTypePolicy]: FALSE,
+  [FeatureFlag.PM19315EndUserActivationMvp]: FALSE,
 
   /* Auth */
   [FeatureFlag.PM16117_SetInitialPasswordRefactor]: FALSE,
@@ -112,6 +115,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM17772_AdminInitiatedSponsorships]: FALSE,
   [FeatureFlag.PM19956_RequireProviderPaymentMethodDuringSetup]: FALSE,
   [FeatureFlag.UseOrganizationWarningsService]: FALSE,
+  [FeatureFlag.AllowTrialLengthZero]: FALSE,
 
   /* Key Management */
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,

libs/common/src/enums/notification-type.enum.ts

@@ -29,5 +29,5 @@ export enum NotificationType {
   Notification = 20,
   NotificationStatus = 21,
 
-  PendingSecurityTasks = 22,
+  RefreshSecurityTasks = 22,
 }

libs/common/src/models/export/cipher.export.ts

@@ -124,9 +124,9 @@ export class CipherExport {
       domain.passwordHistory = req.passwordHistory.map((ph) => PasswordHistoryExport.toDomain(ph));
     }
 
-    domain.creationDate = req.creationDate;
-    domain.revisionDate = req.revisionDate;
-    domain.deletedDate = req.deletedDate;
+    domain.creationDate = req.creationDate ? new Date(req.creationDate) : null;
+    domain.revisionDate = req.revisionDate ? new Date(req.revisionDate) : null;
+    domain.deletedDate = req.deletedDate ? new Date(req.deletedDate) : null;
     return domain;
   }
 

libs/common/src/models/export/password-history.export.ts

@@ -22,7 +22,7 @@ export class PasswordHistoryExport {
 
   static toDomain(req: PasswordHistoryExport, domain = new Password()) {
     domain.password = req.password != null ? new EncString(req.password) : null;
-    domain.lastUsedDate = req.lastUsedDate;
+    domain.lastUsedDate = req.lastUsedDate ? new Date(req.lastUsedDate) : null;
     return domain;
   }
 

libs/common/src/platform/abstractions/fido2/fido2-authenticator.service.abstraction.ts

@@ -70,7 +70,7 @@ export class Fido2AuthenticatorError extends Error {
 }
 
 export interface PublicKeyCredentialDescriptor {
-  id: Uint8Array;
+  id: ArrayBuffer;
   transports?: ("ble" | "hybrid" | "internal" | "nfc" | "usb")[];
   type: "public-key";
 }
@@ -155,9 +155,9 @@ export interface Fido2AuthenticatorGetAssertionParams {
 
 export interface Fido2AuthenticatorGetAssertionResult {
   selectedCredential: {
-    id: Uint8Array;
-    userHandle?: Uint8Array;
+    id: ArrayBuffer;
+    userHandle?: ArrayBuffer;
   };
-  authenticatorData: Uint8Array;
-  signature: Uint8Array;
+  authenticatorData: ArrayBuffer;
+  signature: ArrayBuffer;
 }

libs/common/src/platform/abstractions/log.service.ts

@@ -1,9 +1 @@
-import { LogLevelType } from "../enums/log-level-type.enum";
-
-export abstract class LogService {
-  abstract debug(message?: any, ...optionalParams: any[]): void;
-  abstract info(message?: any, ...optionalParams: any[]): void;
-  abstract warning(message?: any, ...optionalParams: any[]): void;
-  abstract error(message?: any, ...optionalParams: any[]): void;
-  abstract write(level: LogLevelType, message?: any, ...optionalParams: any[]): void;
-}
+export { LogService } from "@bitwarden/logging";

libs/common/src/platform/abstractions/platform-utils.service.ts

@@ -28,6 +28,15 @@ export abstract class PlatformUtilsService {
   abstract getApplicationVersionNumber(): Promise<string>;
   abstract supportsWebAuthn(win: Window): boolean;
   abstract supportsDuo(): boolean;
+  /**
+   * Returns true if the device supports autofill functionality
+   */
+  abstract supportsAutofill(): boolean;
+  /**
+   * Returns true if the device supports native file downloads without
+   * the need for `target="_blank"`
+   */
+  abstract supportsFileDownloads(): boolean;
   /**
    * @deprecated use `@bitwarden/components/ToastService.showToast` instead
    *

libs/common/src/platform/enums/log-level-type.enum.ts

@@ -1,8 +1 @@
-// FIXME: update to use a const object instead of a typescript enum
-// eslint-disable-next-line @bitwarden/platform/no-enums
-export enum LogLevelType {
-  Debug,
-  Info,
-  Warning,
-  Error,
-}
+export { LogLevel as LogLevelType } from "@bitwarden/logging";

libs/common/src/platform/notifications/internal/signalr-connection.service.ts

@@ -31,22 +31,35 @@ export type TimeoutManager = {
 class SignalRLogger implements ILogger {
   constructor(private readonly logService: LogService) {}
 
+  redactMessage(message: string): string {
+    const ACCESS_TOKEN_TEXT = "access_token=";
+    // Redact the access token from the logs if it exists.
+    const accessTokenIndex = message.indexOf(ACCESS_TOKEN_TEXT);
+    if (accessTokenIndex !== -1) {
+      return message.substring(0, accessTokenIndex + ACCESS_TOKEN_TEXT.length) + "[REDACTED]";
+    }
+
+    return message;
+  }
+
   log(logLevel: LogLevel, message: string): void {
+    const redactedMessage = `[SignalR] ${this.redactMessage(message)}`;
+
     switch (logLevel) {
       case LogLevel.Critical:
-        this.logService.error(message);
+        this.logService.error(redactedMessage);
         break;
       case LogLevel.Error:
-        this.logService.error(message);
+        this.logService.error(redactedMessage);
         break;
       case LogLevel.Warning:
-        this.logService.warning(message);
+        this.logService.warning(redactedMessage);
         break;
       case LogLevel.Information:
-        this.logService.info(message);
+        this.logService.info(redactedMessage);
         break;
       case LogLevel.Debug:
-        this.logService.debug(message);
+        this.logService.debug(redactedMessage);
         break;
     }
   }

libs/common/src/platform/services/console-log.service.spec.ts

@@ -1,6 +1,6 @@
-import { interceptConsole, restoreConsole } from "../../../spec";
+import { ConsoleLogService } from "@bitwarden/logging";
 
-import { ConsoleLogService } from "./console-log.service";
+import { interceptConsole, restoreConsole } from "../../../spec";
 
 describe("ConsoleLogService", () => {
   const error = new Error("this is an error");

libs/common/src/platform/services/console-log.service.ts

@@ -1,59 +1 @@
-// FIXME: Update this file to be type safe and remove this and next line
-// @ts-strict-ignore
-import { LogService as LogServiceAbstraction } from "../abstractions/log.service";
-import { LogLevelType } from "../enums/log-level-type.enum";
-
-export class ConsoleLogService implements LogServiceAbstraction {
-  protected timersMap: Map<string, [number, number]> = new Map();
-
-  constructor(
-    protected isDev: boolean,
-    protected filter: (level: LogLevelType) => boolean = null,
-  ) {}
-
-  debug(message?: any, ...optionalParams: any[]) {
-    if (!this.isDev) {
-      return;
-    }
-    this.write(LogLevelType.Debug, message, ...optionalParams);
-  }
-
-  info(message?: any, ...optionalParams: any[]) {
-    this.write(LogLevelType.Info, message, ...optionalParams);
-  }
-
-  warning(message?: any, ...optionalParams: any[]) {
-    this.write(LogLevelType.Warning, message, ...optionalParams);
-  }
-
-  error(message?: any, ...optionalParams: any[]) {
-    this.write(LogLevelType.Error, message, ...optionalParams);
-  }
-
-  write(level: LogLevelType, message?: any, ...optionalParams: any[]) {
-    if (this.filter != null && this.filter(level)) {
-      return;
-    }
-
-    switch (level) {
-      case LogLevelType.Debug:
-        // eslint-disable-next-line
-        console.log(message, ...optionalParams);
-        break;
-      case LogLevelType.Info:
-        // eslint-disable-next-line
-        console.log(message, ...optionalParams);
-        break;
-      case LogLevelType.Warning:
-        // eslint-disable-next-line
-        console.warn(message, ...optionalParams);
-        break;
-      case LogLevelType.Error:
-        // eslint-disable-next-line
-        console.error(message, ...optionalParams);
-        break;
-      default:
-        break;
-    }
-  }
-}
+export { ConsoleLogService } from "@bitwarden/logging";

libs/common/src/platform/services/fido2/credential-id-utils.spec.ts

@@ -9,7 +9,7 @@ describe("credential-id-utils", () => {
         new Uint8Array([
           0x08, 0xd7, 0x0b, 0x74, 0xe9, 0xf5, 0x45, 0x22, 0xa4, 0x25, 0xe5, 0xdc, 0xd4, 0x01, 0x07,
           0xe7,
-        ]),
+        ]).buffer,
       );
     });
 
@@ -20,7 +20,7 @@ describe("credential-id-utils", () => {
         new Uint8Array([
           0x08, 0xd7, 0x0b, 0x74, 0xe9, 0xf5, 0x45, 0x22, 0xa4, 0x25, 0xe5, 0xdc, 0xd4, 0x01, 0x07,
           0xe7,
-        ]),
+        ]).buffer,
       );
     });
 

libs/common/src/platform/services/fido2/credential-id-utils.ts

@@ -3,13 +3,13 @@
 import { Fido2Utils } from "./fido2-utils";
 import { guidToRawFormat } from "./guid-utils";
 
-export function parseCredentialId(encodedCredentialId: string): Uint8Array {
+export function parseCredentialId(encodedCredentialId: string): ArrayBuffer {
   try {
     if (encodedCredentialId.startsWith("b64.")) {
       return Fido2Utils.stringToBuffer(encodedCredentialId.slice(4));
     }
 
-    return guidToRawFormat(encodedCredentialId);
+    return guidToRawFormat(encodedCredentialId).buffer;
   } catch {
     return undefined;
   }
@@ -18,13 +18,16 @@ export function parseCredentialId(encodedCredentialId: string): Uint8Array {
 /**
  * Compares two credential IDs for equality.
  */
-export function compareCredentialIds(a: Uint8Array, b: Uint8Array): boolean {
-  if (a.length !== b.length) {
+export function compareCredentialIds(a: ArrayBuffer, b: ArrayBuffer): boolean {
+  if (a.byteLength !== b.byteLength) {
     return false;
   }
 
-  for (let i = 0; i < a.length; i++) {
-    if (a[i] !== b[i]) {
+  const viewA = new Uint8Array(a);
+  const viewB = new Uint8Array(b);
+
+  for (let i = 0; i < viewA.length; i++) {
+    if (viewA[i] !== viewB[i]) {
       return false;
     }
   }

libs/common/src/platform/services/fido2/fido2-authenticator.service.ts

@@ -514,7 +514,7 @@ async function getPrivateKeyFromFido2Credential(
   const keyBuffer = Fido2Utils.stringToBuffer(fido2Credential.keyValue);
   return await crypto.subtle.importKey(
     "pkcs8",
-    keyBuffer,
+    new Uint8Array(keyBuffer),
     {
       name: fido2Credential.keyAlgorithm,
       namedCurve: fido2Credential.keyCurve,

libs/common/src/platform/services/fido2/fido2-client.service.ts

@@ -127,9 +127,9 @@ export class Fido2ClientService<ParentWindowReference>
     }
 
     const userId = Fido2Utils.stringToBuffer(params.user.id);
-    if (userId.length < 1 || userId.length > 64) {
+    if (userId.byteLength < 1 || userId.byteLength > 64) {
       this.logService?.warning(
-        `[Fido2Client] Invalid 'user.id' length: ${params.user.id} (${userId.length})`,
+        `[Fido2Client] Invalid 'user.id' length: ${params.user.id} (${userId.byteLength})`,
       );
       throw new TypeError("Invalid 'user.id' length");
     }

libs/common/src/platform/services/fido2/fido2-utils.ts

@@ -47,8 +47,8 @@ export class Fido2Utils {
       .replace(/=/g, "");
   }
 
-  static stringToBuffer(str: string): Uint8Array {
-    return Fido2Utils.fromB64ToArray(Fido2Utils.fromUrlB64ToB64(str));
+  static stringToBuffer(str: string): ArrayBuffer {
+    return Fido2Utils.fromB64ToArray(Fido2Utils.fromUrlB64ToB64(str)).buffer;
   }
 
   static bufferSourceToUint8Array(bufferSource: BufferSource): Uint8Array {

libs/common/src/platform/services/sdk/default-sdk.service.ts

@@ -21,6 +21,7 @@ import {
   BitwardenClient,
   ClientSettings,
   DeviceType as SdkDeviceType,
+  TokenProvider,
 } from "@bitwarden/sdk-internal";
 
 import { EncryptedOrganizationKeyData } from "../../../admin-console/models/data/encrypted-organization-key.data";
@@ -41,6 +42,17 @@ import { EncryptedString } from "../../models/domain/enc-string";
 // blocking the creation of an internal client for that user.
 const UnsetClient = Symbol("UnsetClient");
 
+/**
+ * A token provider that exposes the access token to the SDK.
+ */
+class JsTokenProvider implements TokenProvider {
+  constructor() {}
+
+  async get_access_token(): Promise<string | undefined> {
+    return undefined;
+  }
+}
+
 export class DefaultSdkService implements SdkService {
   private sdkClientOverrides = new BehaviorSubject<{
     [userId: UserId]: Rc<BitwardenClient> | typeof UnsetClient;
@@ -51,7 +63,7 @@ export class DefaultSdkService implements SdkService {
     concatMap(async (env) => {
       await SdkLoadService.Ready;
       const settings = this.toSettings(env);
-      return await this.sdkClientFactory.createSdkClient(settings);
+      return await this.sdkClientFactory.createSdkClient(new JsTokenProvider(), settings);
     }),
     shareReplay({ refCount: true, bufferSize: 1 }),
   );
@@ -151,7 +163,10 @@ export class DefaultSdkService implements SdkService {
             }
 
             const settings = this.toSettings(env);
-            const client = await this.sdkClientFactory.createSdkClient(settings);
+            const client = await this.sdkClientFactory.createSdkClient(
+              new JsTokenProvider(),
+              settings,
+            );
 
             await this.initializeClient(
               userId,

libs/common/src/platform/state/implementations/default-active-user-state.spec.ts

@@ -6,12 +6,13 @@ import { any, mock } from "jest-mock-extended";
 import { BehaviorSubject, firstValueFrom, map, of, timeout } from "rxjs";
 import { Jsonify } from "type-fest";
 
+import { StorageServiceProvider } from "@bitwarden/storage-core";
+
 import { awaitAsync, trackEmissions } from "../../../../spec";
 import { FakeStorageService } from "../../../../spec/fake-storage.service";
 import { Account } from "../../../auth/abstractions/account.service";
 import { UserId } from "../../../types/guid";
 import { LogService } from "../../abstractions/log.service";
-import { StorageServiceProvider } from "../../services/storage-service.provider";
 import { StateDefinition } from "../state-definition";
 import { StateEventRegistrarService } from "../state-event-registrar.service";
 import { UserKeyDefinition } from "../user-key-definition";

libs/common/src/platform/state/implementations/default-global-state.provider.ts

@@ -1,7 +1,8 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { StorageServiceProvider } from "@bitwarden/storage-core";
+
 import { LogService } from "../../abstractions/log.service";
-import { StorageServiceProvider } from "../../services/storage-service.provider";
 import { GlobalState } from "../global-state";
 import { GlobalStateProvider } from "../global-state.provider";
 import { KeyDefinition } from "../key-definition";

libs/common/src/platform/state/implementations/default-global-state.ts

@@ -1,8 +1,6 @@
+import { AbstractStorageService, ObservableStorageService } from "@bitwarden/storage-core";
+
 import { LogService } from "../../abstractions/log.service";
-import {
-  AbstractStorageService,
-  ObservableStorageService,
-} from "../../abstractions/storage.service";
 import { GlobalState } from "../global-state";
 import { KeyDefinition, globalKeyBuilder } from "../key-definition";
 

libs/common/src/platform/state/implementations/default-single-user-state.provider.ts

@@ -1,8 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { StorageServiceProvider } from "@bitwarden/storage-core";
+
 import { UserId } from "../../../types/guid";
 import { LogService } from "../../abstractions/log.service";
-import { StorageServiceProvider } from "../../services/storage-service.provider";
 import { StateEventRegistrarService } from "../state-event-registrar.service";
 import { UserKeyDefinition } from "../user-key-definition";
 import { SingleUserState } from "../user-state";

libs/common/src/platform/state/implementations/default-single-user-state.ts

@@ -1,11 +1,9 @@
 import { Observable, combineLatest, of } from "rxjs";
 
+import { AbstractStorageService, ObservableStorageService } from "@bitwarden/storage-core";
+
 import { UserId } from "../../../types/guid";
 import { LogService } from "../../abstractions/log.service";
-import {
-  AbstractStorageService,
-  ObservableStorageService,
-} from "../../abstractions/storage.service";
 import { StateEventRegistrarService } from "../state-event-registrar.service";
 import { UserKeyDefinition } from "../user-key-definition";
 import { CombinedState, SingleUserState } from "../user-state";

libs/common/src/platform/state/implementations/specific-state.provider.spec.ts

@@ -1,10 +1,11 @@
 import { mock } from "jest-mock-extended";
 
+import { StorageServiceProvider } from "@bitwarden/storage-core";
+
 import { mockAccountServiceWith } from "../../../../spec/fake-account-service";
 import { FakeStorageService } from "../../../../spec/fake-storage.service";
 import { UserId } from "../../../types/guid";
 import { LogService } from "../../abstractions/log.service";
-import { StorageServiceProvider } from "../../services/storage-service.provider";
 import { KeyDefinition } from "../key-definition";
 import { StateDefinition } from "../state-definition";
 import { StateEventRegistrarService } from "../state-event-registrar.service";

libs/common/src/platform/state/implementations/state-base.ts

@@ -15,12 +15,10 @@ import {
 } from "rxjs";
 import { Jsonify } from "type-fest";
 
+import { AbstractStorageService, ObservableStorageService } from "@bitwarden/storage-core";
+
 import { StorageKey } from "../../../types/state";
 import { LogService } from "../../abstractions/log.service";
-import {
-  AbstractStorageService,
-  ObservableStorageService,
-} from "../../abstractions/storage.service";
 import { DebugOptions } from "../key-definition";
 import { populateOptionsWithDefault, StateUpdateOptions } from "../state-update-options";
 

libs/common/src/platform/state/implementations/util.ts

@@ -1,6 +1,6 @@
 import { Jsonify } from "type-fest";
 
-import { AbstractStorageService } from "../../abstractions/storage.service";
+import { AbstractStorageService } from "@bitwarden/storage-core";
 
 export async function getStoredValue<T>(
   key: string,

libs/common/src/platform/state/state-event-registrar.service.spec.ts

@@ -1,8 +1,12 @@
 import { mock } from "jest-mock-extended";
 
+import {
+  AbstractStorageService,
+  ObservableStorageService,
+  StorageServiceProvider,
+} from "@bitwarden/storage-core";
+
 import { FakeGlobalStateProvider } from "../../../spec";
-import { AbstractStorageService, ObservableStorageService } from "../abstractions/storage.service";
-import { StorageServiceProvider } from "../services/storage-service.provider";
 
 import { StateDefinition } from "./state-definition";
 import { STATE_LOCK_EVENT, StateEventRegistrarService } from "./state-event-registrar.service";

libs/common/src/platform/state/state-event-runner.service.spec.ts

@@ -1,9 +1,13 @@
 import { mock } from "jest-mock-extended";
 
+import {
+  AbstractStorageService,
+  ObservableStorageService,
+  StorageServiceProvider,
+} from "@bitwarden/storage-core";
+
 import { FakeGlobalStateProvider } from "../../../spec";
 import { UserId } from "../../types/guid";
-import { AbstractStorageService, ObservableStorageService } from "../abstractions/storage.service";
-import { StorageServiceProvider } from "../services/storage-service.provider";
 
 import { STATE_LOCK_EVENT } from "./state-event-registrar.service";
 import { StateEventRunnerService } from "./state-event-runner.service";

libs/common/src/platform/state/state-event-runner.service.ts

@@ -2,8 +2,9 @@
 // @ts-strict-ignore
 import { firstValueFrom } from "rxjs";
 
+import { StorageServiceProvider } from "@bitwarden/storage-core";
+
 import { UserId } from "../../types/guid";
-import { StorageServiceProvider } from "../services/storage-service.provider";
 
 import { GlobalState } from "./global-state";
 import { GlobalStateProvider } from "./global-state.provider";

libs/common/src/services/api.service.ts

@@ -97,7 +97,7 @@ import { PaymentResponse } from "../billing/models/response/payment.response";
 import { PlanResponse } from "../billing/models/response/plan.response";
 import { SubscriptionResponse } from "../billing/models/response/subscription.response";
 import { TaxInfoResponse } from "../billing/models/response/tax-info.response";
-import { DeviceType } from "../enums";
+import { ClientType, DeviceType } from "../enums";
 import { KeyConnectorUserKeyRequest } from "../key-management/key-connector/models/key-connector-user-key.request";
 import { SetKeyConnectorKeyRequest } from "../key-management/key-connector/models/set-key-connector-key.request";
 import { VaultTimeoutSettingsService } from "../key-management/vault-timeout";
@@ -154,8 +154,6 @@ export type HttpOperations = {
 export class ApiService implements ApiServiceAbstraction {
   private device: DeviceType;
   private deviceType: string;
-  private isWebClient = false;
-  private isDesktopClient = false;
   private refreshTokenPromise: Promise<string> | undefined;
 
   /**
@@ -178,22 +176,6 @@ export class ApiService implements ApiServiceAbstraction {
   ) {
     this.device = platformUtilsService.getDevice();
     this.deviceType = this.device.toString();
-    this.isWebClient =
-      this.device === DeviceType.IEBrowser ||
-      this.device === DeviceType.ChromeBrowser ||
-      this.device === DeviceType.EdgeBrowser ||
-      this.device === DeviceType.FirefoxBrowser ||
-      this.device === DeviceType.OperaBrowser ||
-      this.device === DeviceType.SafariBrowser ||
-      this.device === DeviceType.UnknownBrowser ||
-      this.device === DeviceType.VivaldiBrowser;
-    this.isDesktopClient =
-      this.device === DeviceType.WindowsDesktop ||
-      this.device === DeviceType.MacOsDesktop ||
-      this.device === DeviceType.LinuxDesktop ||
-      this.device === DeviceType.WindowsCLI ||
-      this.device === DeviceType.MacOsCLI ||
-      this.device === DeviceType.LinuxCLI;
   }
 
   // Auth APIs
@@ -838,7 +820,9 @@ export class ApiService implements ApiServiceAbstraction {
   // Sync APIs
 
   async getSync(): Promise<SyncResponse> {
-    const path = this.isDesktopClient || this.isWebClient ? "/sync?excludeDomains=true" : "/sync";
+    const path = !this.platformUtilsService.supportsAutofill()
+      ? "/sync?excludeDomains=true"
+      : "/sync";
     const r = await this.send("GET", path, null, true, true);
     return new SyncResponse(r);
   }
@@ -1875,7 +1859,7 @@ export class ApiService implements ApiServiceAbstraction {
 
   private async getCredentials(): Promise<RequestCredentials> {
     const env = await firstValueFrom(this.environmentService.environment$);
-    if (!this.isWebClient || env.hasBaseUrl()) {
+    if (this.platformUtilsService.getClientType() !== ClientType.Web || env.hasBaseUrl()) {
       return "include";
     }
     return undefined;

libs/common/src/types/guid.ts

@@ -2,7 +2,9 @@ import { Opaque } from "type-fest";
 
 export type Guid = Opaque<string, "Guid">;
 
-export type UserId = Opaque<string, "UserId">;
+// Convenience re-export of UserId from it's original location, any library that
+// wants to be lower level than common should instead import it from user-core.
+export { UserId } from "@bitwarden/user-core";
 export type OrganizationId = Opaque<string, "OrganizationId">;
 export type CollectionId = Opaque<string, "CollectionId">;
 export type ProviderId = Opaque<string, "ProviderId">;

libs/common/src/vault/models/domain/cipher.ts

@@ -353,14 +353,14 @@ export class Cipher extends Domain implements Decryptable<CipherView> {
       type: this.type,
       favorite: this.favorite ?? false,
       organizationUseTotp: this.organizationUseTotp ?? false,
-      edit: this.edit,
+      edit: this.edit ?? true,
       permissions: this.permissions
         ? {
             delete: this.permissions.delete,
             restore: this.permissions.restore,
           }
         : undefined,
-      viewPassword: this.viewPassword,
+      viewPassword: this.viewPassword ?? true,
       localData: this.localData
         ? {
             lastUsedDate: this.localData.lastUsedDate

libs/common/src/vault/models/view/attachment.view.spec.ts

@@ -26,6 +26,8 @@ describe("AttachmentView", () => {
     });
 
     it("should return an AttachmentView from an SdkAttachmentView", () => {
+      jest.spyOn(SymmetricCryptoKey, "fromString").mockReturnValue("mockKey" as any);
+
       const sdkAttachmentView = {
         id: "id",
         url: "url",
@@ -33,6 +35,7 @@ describe("AttachmentView", () => {
         sizeName: "sizeName",
         fileName: "fileName",
         key: "encKeyB64_fromString",
+        decryptedKey: "decryptedKey_B64",
       } as SdkAttachmentView;
 
       const result = AttachmentView.fromSdkAttachmentView(sdkAttachmentView);
@@ -43,14 +46,20 @@ describe("AttachmentView", () => {
         size: "size",
         sizeName: "sizeName",
         fileName: "fileName",
-        key: null,
+        key: "mockKey",
         encryptedKey: new EncString(sdkAttachmentView.key as string),
       });
+
+      expect(SymmetricCryptoKey.fromString).toHaveBeenCalledWith("decryptedKey_B64");
     });
   });
 
   describe("toSdkAttachmentView", () => {
     it("should convert AttachmentView to SdkAttachmentView", () => {
+      const mockKey = {
+        toBase64: jest.fn().mockReturnValue("keyB64"),
+      } as any;
+
       const attachmentView = new AttachmentView();
       attachmentView.id = "id";
       attachmentView.url = "url";
@@ -58,8 +67,10 @@ describe("AttachmentView", () => {
       attachmentView.sizeName = "sizeName";
       attachmentView.fileName = "fileName";
       attachmentView.encryptedKey = new EncString("encKeyB64");
+      attachmentView.key = mockKey;
 
       const result = attachmentView.toSdkAttachmentView();
+
       expect(result).toEqual({
         id: "id",
         url: "url",
@@ -67,6 +78,7 @@ describe("AttachmentView", () => {
         sizeName: "sizeName",
         fileName: "fileName",
         key: "encKeyB64",
+        decryptedKey: "keyB64",
       });
     });
   });

libs/common/src/vault/models/view/attachment.view.ts

@@ -59,6 +59,8 @@ export class AttachmentView implements View {
       sizeName: this.sizeName,
       fileName: this.fileName,
       key: this.encryptedKey?.toJSON(),
+      // TODO: PM-23005 - Temporary field, should be removed when encrypted migration is complete
+      decryptedKey: this.key ? this.key.toBase64() : null,
     };
   }
 
@@ -76,6 +78,8 @@ export class AttachmentView implements View {
     view.size = obj.size ?? null;
     view.sizeName = obj.sizeName ?? null;
     view.fileName = obj.fileName ?? null;
+    // TODO: PM-23005 - Temporary field, should be removed when encrypted migration is complete
+    view.key = obj.key ? SymmetricCryptoKey.fromString(obj.decryptedKey) : null;
     view.encryptedKey = new EncString(obj.key);
 
     return view;

libs/common/src/vault/services/cipher.service.ts

@@ -383,7 +383,7 @@ export class CipherService implements CipherServiceAbstraction {
     const decCiphers = await this.getDecryptedCiphers(userId);
     if (decCiphers != null && decCiphers.length !== 0) {
       await this.reindexCiphers(userId);
-      return await this.getDecryptedCiphers(userId);
+      return decCiphers;
     }
 
     const decrypted = await this.decryptCiphers(await this.getAll(userId), userId);

libs/common/src/vault/services/default-cipher-encryption.service.spec.ts

@@ -7,7 +7,7 @@ import {
   CipherType as SdkCipherType,
   CipherView as SdkCipherView,
   CipherListView,
-  Attachment as SdkAttachment,
+  AttachmentView as SdkAttachmentView,
 } from "@bitwarden/sdk-internal";
 
 import { mockEnc } from "../../../spec";
@@ -311,7 +311,9 @@ describe("DefaultCipherEncryptionService", () => {
       const expectedDecryptedContent = new Uint8Array([5, 6, 7, 8]);
 
       jest.spyOn(cipher, "toSdkCipher").mockReturnValue({ id: "id" } as SdkCipher);
-      jest.spyOn(attachment, "toSdkAttachmentView").mockReturnValue({ id: "a1" } as SdkAttachment);
+      jest
+        .spyOn(attachment, "toSdkAttachmentView")
+        .mockReturnValue({ id: "a1" } as SdkAttachmentView);
       mockSdkClient.vault().attachments().decrypt_buffer.mockReturnValue(expectedDecryptedContent);
 
       const result = await cipherEncryptionService.decryptAttachmentContent(

libs/common/src/vault/services/restricted-item-types.service.ts

@@ -91,7 +91,6 @@ export class RestrictedItemTypesService {
    * Restriction logic:
    * - If cipher type is not restricted by any org → allowed
    * - If cipher belongs to an org that allows this type → allowed
-   * - If cipher is personal vault and any org allows this type → allowed
    * - Otherwise → restricted
    */
   isCipherRestricted(cipher: CipherLike, restrictedTypes: RestrictedCipherType[]): boolean {
@@ -108,8 +107,8 @@ export class RestrictedItemTypesService {
       return !restriction.allowViewOrgIds.includes(cipher.organizationId);
     }
 
-    // For personal vault ciphers: restricted only if NO organizations allow this type
-    return restriction.allowViewOrgIds.length === 0;
+    // Cipher is restricted by at least one organization, restrict it
+    return true;
   }
 
   /**

libs/common/src/vault/tasks/services/default-task.service.spec.ts

@@ -365,7 +365,7 @@ describe("Default task service", () => {
         const subscription = service.listenForTaskNotifications();
 
         const notification = {
-          type: NotificationType.PendingSecurityTasks,
+          type: NotificationType.RefreshSecurityTasks,
         } as NotificationResponse;
         mockNotifications$.next([notification, userId]);
 
@@ -390,7 +390,7 @@ describe("Default task service", () => {
         const subscription = service.listenForTaskNotifications();
 
         const notification = {
-          type: NotificationType.PendingSecurityTasks,
+          type: NotificationType.RefreshSecurityTasks,
         } as NotificationResponse;
         mockNotifications$.next([notification, "other-user-id" as UserId]);
 

libs/common/src/vault/tasks/services/default-task.service.ts

@@ -152,7 +152,7 @@ export class DefaultTaskService implements TaskService {
     return this.notificationService.notifications$.pipe(
       filter(
         ([notification, userId]) =>
-          notification.type === NotificationType.PendingSecurityTasks &&
+          notification.type === NotificationType.RefreshSecurityTasks &&
           filterByUserIds.includes(userId),
       ),
       map(([, userId]) => userId),

libs/common/src/vault/utils/get-web-store-url.ts

@@ -0,0 +1,22 @@
+import { DeviceType } from "@bitwarden/common/enums";
+
+/**
+ *  Returns the web store URL for the Bitwarden browser extension based on the device type.
+ *  @defaults Bitwarden download page
+ */
+export const getWebStoreUrl = (deviceType: DeviceType): string => {
+  switch (deviceType) {
+    case DeviceType.ChromeBrowser:
+      return "https://chromewebstore.google.com/detail/bitwarden-password-manage/nngceckbapebfimnlniiiahkandclblb";
+    case DeviceType.FirefoxBrowser:
+      return "https://addons.mozilla.org/en-US/firefox/addon/bitwarden-password-manager/";
+    case DeviceType.SafariBrowser:
+      return "https://apps.apple.com/us/app/bitwarden/id1352778147?mt=12";
+    case DeviceType.OperaBrowser:
+      return "https://addons.opera.com/extensions/details/bitwarden-free-password-manager/";
+    case DeviceType.EdgeBrowser:
+      return "https://microsoftedge.microsoft.com/addons/detail/jbkfoedolllekgbhcbcoahefnbanhhlh";
+    default:
+      return "https://bitwarden.com/download/#downloads-web-browser";
+  }
+};

libs/components/src/anon-layout/anon-layout-wrapper.component.html

@@ -4,8 +4,8 @@
   [icon]="pageIcon"
   [showReadonlyHostname]="showReadonlyHostname"
   [maxWidth]="maxWidth"
-  [titleAreaMaxWidth]="titleAreaMaxWidth"
   [hideCardWrapper]="hideCardWrapper"
+  [hideIcon]="hideIcon"
 >
   <router-outlet></router-outlet>
   <router-outlet slot="secondary" name="secondary"></router-outlet>

libs/components/src/anon-layout/anon-layout-wrapper.component.ts

@@ -10,7 +10,7 @@ import { Translation } from "../dialog";
 import { Icon } from "../icon";
 
 import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
-import { AnonLayoutComponent } from "./anon-layout.component";
+import { AnonLayoutComponent, AnonLayoutMaxWidth } from "./anon-layout.component";
 
 export interface AnonLayoutWrapperData {
   /**
@@ -29,6 +29,10 @@ export interface AnonLayoutWrapperData {
    * The optional icon to display on the page.
    */
   pageIcon?: Icon | null;
+  /**
+   * Hides the default Bitwarden shield icon.
+   */
+  hideIcon?: boolean;
   /**
    * Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
    */
@@ -36,11 +40,7 @@ export interface AnonLayoutWrapperData {
   /**
    * Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
    */
-  maxWidth?: "md" | "3xl";
-  /**
-   * Optional flag to set the max-width of the title area. Defaults to null if not provided.
-   */
-  titleAreaMaxWidth?: "md";
+  maxWidth?: AnonLayoutMaxWidth;
   /**
    * Hide the card that wraps the default content. Defaults to false.
    */
@@ -58,9 +58,9 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
   protected pageSubtitle: string;
   protected pageIcon: Icon;
   protected showReadonlyHostname: boolean;
-  protected maxWidth: "md" | "3xl";
-  protected titleAreaMaxWidth: "md";
+  protected maxWidth: AnonLayoutMaxWidth;
   protected hideCardWrapper: boolean;
+  protected hideIcon: boolean = false;
 
   constructor(
     private router: Router,
@@ -109,9 +109,12 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
       this.pageIcon = firstChildRouteData["pageIcon"];
     }
 
+    if (firstChildRouteData["hideIcon"] !== undefined) {
+      this.hideIcon = firstChildRouteData["hideIcon"];
+    }
+
     this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
     this.maxWidth = firstChildRouteData["maxWidth"];
-    this.titleAreaMaxWidth = firstChildRouteData["titleAreaMaxWidth"];
     this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
   }
 
@@ -174,7 +177,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
     this.pageIcon = null;
     this.showReadonlyHostname = null;
     this.maxWidth = null;
-    this.titleAreaMaxWidth = null;
     this.hideCardWrapper = null;
   }
 

libs/components/src/anon-layout/anon-layout.component.html

@@ -13,11 +13,8 @@
     <bit-icon [icon]="logo" [ariaLabel]="'appLogoLabel' | i18n"></bit-icon>
   </a>
 
-  <div
-    class="tw-text-center tw-mb-4 sm:tw-mb-6"
-    [ngClass]="{ 'tw-max-w-md tw-mx-auto': titleAreaMaxWidth === 'md' }"
-  >
-    <div *ngIf="!hideIcon" class="tw-mx-auto tw-max-w-24 sm:tw-max-w-28 md:tw-max-w-32">
+  <div class="tw-text-center tw-mb-4 sm:tw-mb-6 tw-mx-auto" [ngClass]="maxWidthClass">
+    <div *ngIf="!hideIcon" class="tw-w-24 sm:tw-w-28 md:tw-w-32 tw-mx-auto">
       <bit-icon [icon]="icon"></bit-icon>
     </div>
 
@@ -36,8 +33,8 @@
   </div>
 
   <div
-    class="tw-grow tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
-    [ngClass]="{ 'tw-max-w-md': maxWidth === 'md', 'tw-max-w-3xl': maxWidth === '3xl' }"
+    class="tw-grow tw-w-full tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    [ngClass]="maxWidthClass"
   >
     @if (hideCardWrapper) {
       <div class="tw-mb-6 sm:tw-mb-10">

libs/components/src/anon-layout/anon-layout.component.ts

@@ -10,10 +10,13 @@ import { EnvironmentService } from "@bitwarden/common/platform/abstractions/envi
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { IconModule, Icon } from "../icon";
-import { BitwardenLogo, BitwardenShield } from "../icon/icons";
+import { BitwardenLogo } from "../icon/icons";
+import { BitwardenShield } from "../icon/logos";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
 
+export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl";
+
 @Component({
   selector: "auth-anon-layout",
   templateUrl: "./anon-layout.component.html",
@@ -36,27 +39,35 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
   @Input() hideCardWrapper: boolean = false;
 
   /**
-   * Max width of the title area content
-   *
-   * @default null
-   */
-  @Input() titleAreaMaxWidth?: "md";
-
-  /**
-   * Max width of the layout content
+   * Max width of the anon layout title, subtitle, and content areas.
    *
    * @default 'md'
    */
-  @Input() maxWidth: "md" | "3xl" = "md";
+  @Input() maxWidth: AnonLayoutMaxWidth = "md";
 
   protected logo = BitwardenLogo;
-  protected year = "2024";
+  protected year: string;
   protected clientType: ClientType;
   protected hostname: string;
   protected version: string;
 
   protected hideYearAndVersion = false;
 
+  get maxWidthClass(): string {
+    switch (this.maxWidth) {
+      case "md":
+        return "tw-max-w-md";
+      case "lg":
+        return "tw-max-w-lg";
+      case "xl":
+        return "tw-max-w-xl";
+      case "2xl":
+        return "tw-max-w-2xl";
+      case "3xl":
+        return "tw-max-w-3xl";
+    }
+  }
+
   constructor(
     private environmentService: EnvironmentService,
     private platformUtilsService: PlatformUtilsService,
@@ -68,7 +79,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
 
   async ngOnInit() {
     this.maxWidth = this.maxWidth ?? "md";
-    this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
     this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
     this.version = await this.platformUtilsService.getApplicationVersion();
 

libs/components/src/anon-layout/anon-layout.mdx

@@ -165,4 +165,4 @@ import { EnvironmentSelectorComponent } from "./components/environment-selector/
 
 ---
 
-<Story of={stories.WithSecondaryContent} />
+<Story of={stories.SecondaryContent} />

libs/components/src/anon-layout/anon-layout.stories.ts

@@ -8,6 +8,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 
 import { ButtonModule } from "../button";
+import { Icon } from "../icon";
 import { LockIcon } from "../icon/icons";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -18,6 +19,23 @@ class MockPlatformUtilsService implements Partial<PlatformUtilsService> {
   getClientType = () => ClientType.Web;
 }
 
+type StoryArgs = Pick<
+  AnonLayoutComponent,
+  | "title"
+  | "subtitle"
+  | "showReadonlyHostname"
+  | "hideCardWrapper"
+  | "hideIcon"
+  | "hideLogo"
+  | "hideFooter"
+  | "maxWidth"
+> & {
+  contentLength: "normal" | "long" | "thin";
+  showSecondary: boolean;
+  useDefaultIcon: boolean;
+  icon: Icon;
+};
+
 export default {
   title: "Component Library/Anon Layout",
   component: AnonLayoutComponent,
@@ -31,12 +49,11 @@ export default {
         },
         {
           provide: I18nService,
-          useFactory: () => {
-            return new I18nMockService({
+          useFactory: () =>
+            new I18nMockService({
               accessing: "Accessing",
               appLogoLabel: "app logo label",
-            });
-          },
+            }),
         },
         {
           provide: EnvironmentService,
@@ -55,196 +72,179 @@ export default {
       ],
     }),
   ],
+
+  render: (args: StoryArgs) => {
+    const { useDefaultIcon, icon, ...rest } = args;
+    return {
+      props: {
+        ...rest,
+        icon: useDefaultIcon ? null : icon,
+      },
+      template: `
+        <auth-anon-layout
+          [title]="title"
+          [subtitle]="subtitle"
+          [icon]="icon"
+          [showReadonlyHostname]="showReadonlyHostname"
+          [maxWidth]="maxWidth"
+          [hideCardWrapper]="hideCardWrapper"
+          [hideIcon]="hideIcon"
+          [hideLogo]="hideLogo"
+          [hideFooter]="hideFooter"
+        >
+          <ng-container [ngSwitch]="contentLength">
+            <div *ngSwitchCase="'thin'" class="tw-text-center">  <div class="tw-font-bold">Thin Content</div></div>
+            <div *ngSwitchCase="'long'">
+              <div class="tw-font-bold">Long Content</div>
+              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
+              <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
+            </div>
+            <div *ngSwitchDefault>
+              <div class="tw-font-bold">Normal Content</div>
+              <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
+            </div>
+          </ng-container>
+
+          <div *ngIf="showSecondary" slot="secondary" class="tw-text-center">
+            <div class="tw-font-bold tw-mb-2">
+              Secondary Projected Content (optional)
+            </div>
+            <button bitButton>Perform Action</button>
+          </div>
+        </auth-anon-layout>
+      `,
+    };
+  },
+
+  argTypes: {
+    title: { control: "text" },
+    subtitle: { control: "text" },
+
+    icon: { control: false, table: { disable: true } },
+    useDefaultIcon: {
+      control: false,
+      table: { disable: true },
+      description: "If true, passes null so component falls back to its built-in icon",
+    },
+
+    showReadonlyHostname: { control: "boolean" },
+    maxWidth: {
+      control: "select",
+      options: ["md", "lg", "xl", "2xl", "3xl"],
+    },
+
+    hideCardWrapper: { control: "boolean" },
+    hideIcon: { control: "boolean" },
+    hideLogo: { control: "boolean" },
+    hideFooter: { control: "boolean" },
+
+    contentLength: {
+      control: "radio",
+      options: ["normal", "long", "thin"],
+    },
+
+    showSecondary: { control: "boolean" },
+  },
+
   args: {
     title: "The Page Title",
     subtitle: "The subtitle (optional)",
-    showReadonlyHostname: true,
     icon: LockIcon,
-    hideLogo: false,
+    useDefaultIcon: false,
+    showReadonlyHostname: false,
+    maxWidth: "md",
     hideCardWrapper: false,
+    hideIcon: false,
+    hideLogo: false,
+    hideFooter: false,
+    contentLength: "normal",
+    showSecondary: false,
   },
-} as Meta;
+} as Meta<StoryArgs>;
 
-type Story = StoryObj<AnonLayoutComponent>;
+type Story = StoryObj<StoryArgs>;
 
-export const WithPrimaryContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const NormalPrimaryContent: Story = {
+  args: {
+    contentLength: "normal",
+  },
 };
 
-export const WithSecondaryContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      // Notice that slot="secondary" is requred to project any secondary content.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const LongPrimaryContent: Story = {
+  args: {
+    contentLength: "long",
+  },
 };
 
-export const WithLongContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout title="Page Title lorem ipsum dolor consectetur sit amet expedita quod est" subtitle="Subtitle here Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.</div>
-        </div>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?          </p>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const ThinPrimaryContent: Story = {
+  args: {
+    contentLength: "thin",
+  },
 };
 
-export const WithThinPrimaryContent: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>'s) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" >
-        <div class="tw-text-center">Lorem ipsum</div>
-
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const LongContentAndTitlesAndDefaultWidth: Story = {
+  args: {
+    title:
+      "This is a very long title that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    subtitle:
+      "This is a very long subtitle that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    contentLength: "long",
+  },
 };
 
-export const WithCustomIcon: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [icon]="icon" [showReadonlyHostname]="showReadonlyHostname">
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const LongContentAndTitlesAndLargestWidth: Story = {
+  args: {
+    title:
+      "This is a very long title that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    subtitle:
+      "This is a very long subtitle that might not fit in the default width. It's really long and descriptive, so it might take up more space than usual.",
+    contentLength: "long",
+    maxWidth: "3xl",
+  },
 };
 
-export const HideCardWrapper: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      hideCardWrapper: true,
-    },
-    template: `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" [hideCardWrapper]="hideCardWrapper">
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-        <div slot="secondary" class="tw-text-center">
-          <div class="tw-font-bold tw-mb-2">Secondary Projected Content (optional)</div>
-          <button bitButton>Perform Action</button>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const SecondaryContent: Story = {
+  args: {
+    showSecondary: true,
+  },
 };
 
-export const HideIcon: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideIcon]="true" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const NoTitle: Story = { args: { title: undefined } };
+
+export const NoSubtitle: Story = { args: { subtitle: undefined } };
+
+export const NoWrapper: Story = {
+  args: { hideCardWrapper: true },
 };
 
-export const HideLogo: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="true" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const DefaultIcon: Story = {
+  args: { useDefaultIcon: true },
 };
 
-export const HideFooter: Story = {
-  render: (args) => ({
-    props: args,
-    template:
-      // Projected content (the <div>) and styling is just a sample and can be replaced with any content/styling.
-      `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideFooter]="true" [hideLogo]="hideLogo" >
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const NoIcon: Story = {
+  args: { hideIcon: true },
 };
 
-export const WithTitleAreaMaxWidth: Story = {
-  render: (args) => ({
-    props: {
-      ...args,
-      title: "This is a very long long title to demonstrate titleAreaMaxWidth set to 'md'",
-      subtitle:
-        "This is a very long subtitle that demonstrates how the max width container handles longer text content with the titleAreaMaxWidth input set to 'md'. Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita, quod est?",
-    },
-    template: `
-      <auth-anon-layout [title]="title" [subtitle]="subtitle" [showReadonlyHostname]="showReadonlyHostname" [hideLogo]="hideLogo" [titleAreaMaxWidth]="'md'">
-        <div>
-          <div class="tw-font-bold">Primary Projected Content Area (customizable)</div>
-          <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?</div>
-        </div>
-      </auth-anon-layout>
-    `,
-  }),
+export const NoLogo: Story = {
+  args: { hideLogo: true },
+};
+
+export const NoFooter: Story = {
+  args: { hideFooter: true },
+};
+
+export const ReadonlyHostname: Story = {
+  args: { showReadonlyHostname: true },
+};
+
+export const MinimalState: Story = {
+  args: {
+    title: undefined,
+    subtitle: undefined,
+    contentLength: "normal",
+    hideCardWrapper: true,
+    hideIcon: true,
+    hideLogo: true,
+    hideFooter: true,
+  },
 };

libs/components/src/button/button.component.ts

@@ -31,9 +31,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
     "tw-bg-transparent",
     "tw-border-primary-600",
     "!tw-text-primary-600",
-    "hover:tw-bg-primary-600",
-    "hover:tw-border-primary-600",
-    "hover:!tw-text-contrast",
+    "hover:tw-bg-hover-default",
     ...focusRing,
   ],
   danger: [

libs/components/src/checkbox/checkbox.component.ts

@@ -20,64 +20,75 @@ export class CheckboxComponent implements BitFormControlAbstraction {
     "tw-cursor-pointer",
     "tw-inline-block",
     "tw-align-sub",
-    "tw-rounded",
-    "tw-border",
-    "tw-border-solid",
-    "tw-border-secondary-500",
-    "tw-h-[1.12rem]",
-    "tw-w-[1.12rem]",
-    "tw-me-1.5",
     "tw-flex-none", // Flexbox fix for bit-form-control
+    "!tw-p-1",
+    "after:tw-inset-1",
+    // negative margin to negate the positioning added by the padding
+    "!-tw-mt-1",
+    "!-tw-mb-1",
+    "!-tw-ms-1",
 
     "before:tw-content-['']",
     "before:tw-block",
-    "before:tw-absolute",
     "before:tw-inset-0",
+    "before:tw-h-[1.12rem]",
+    "before:tw-w-[1.12rem]",
+    "before:tw-rounded",
+    "before:tw-border",
+    "before:tw-border-solid",
+    "before:tw-border-secondary-500",
 
-    "hover:tw-border-2",
-    "[&>label]:tw-border-2",
+    "after:tw-content-['']",
+    "after:tw-block",
+    "after:tw-absolute",
+    "after:tw-inset-0",
+    "after:tw-h-[1.12rem]",
+    "after:tw-w-[1.12rem]",
+
+    "hover:before:tw-border-2",
+    "[&>label]:before:tw-border-2",
 
     // if it exists, the parent form control handles focus
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-offset-2",
-    "[&:not(bit-form-control_*)]:focus-visible:tw-ring-primary-600",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-offset-2",
+    "[&:not(bit-form-control_*)]:focus-visible:before:tw-ring-primary-600",
 
-    "disabled:tw-cursor-auto",
-    "disabled:tw-border",
-    "disabled:hover:tw-border",
-    "disabled:tw-bg-secondary-100",
-    "disabled:hover:tw-bg-secondary-100",
+    "disabled:before:tw-cursor-auto",
+    "disabled:before:tw-border",
+    "disabled:before:hover:tw-border",
+    "disabled:before:tw-bg-secondary-100",
+    "disabled:hover:before:tw-bg-secondary-100",
 
-    "checked:tw-bg-primary-600",
-    "checked:tw-border-primary-600",
-    "checked:hover:tw-bg-primary-700",
-    "checked:hover:tw-border-primary-700",
-    "[&>label:hover]:checked:tw-bg-primary-700",
-    "[&>label:hover]:checked:tw-border-primary-700",
-    "checked:before:tw-bg-text-contrast",
-    "checked:before:tw-mask-position-[center]",
-    "checked:before:tw-mask-repeat-[no-repeat]",
-    "checked:disabled:tw-border-secondary-100",
-    "checked:disabled:hover:tw-border-secondary-100",
-    "checked:disabled:tw-bg-secondary-100",
-    "checked:disabled:before:tw-bg-text-muted",
+    "checked:before:tw-bg-primary-600",
+    "checked:before:tw-border-primary-600",
+    "checked:before:hover:tw-bg-primary-700",
+    "checked:before:hover:tw-border-primary-700",
+    "[&>label:hover]:checked:before:tw-bg-primary-700",
+    "[&>label:hover]:checked:before:tw-border-primary-700",
+    "checked:after:tw-bg-text-contrast",
+    "checked:after:tw-mask-position-[center]",
+    "checked:after:tw-mask-repeat-[no-repeat]",
+    "checked:disabled:before:tw-border-secondary-100",
+    "checked:disabled:hover:before:tw-border-secondary-100",
+    "checked:disabled:before:tw-bg-secondary-100",
+    "checked:disabled:after:tw-bg-text-muted",
 
-    "[&:not(:indeterminate)]:checked:before:tw-mask-image-[var(--mask-image)]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "[&:not(:indeterminate)]:checked:after:tw-mask-image-[var(--mask-image)]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
 
-    "indeterminate:tw-bg-primary-600",
-    "indeterminate:tw-border-primary-600",
-    "indeterminate:hover:tw-bg-primary-700",
-    "indeterminate:hover:tw-border-primary-700",
-    "[&>label:hover]:indeterminate:tw-bg-primary-700",
-    "[&>label:hover]:indeterminate:tw-border-primary-700",
-    "indeterminate:before:tw-bg-text-contrast",
-    "indeterminate:before:tw-mask-position-[center]",
-    "indeterminate:before:tw-mask-repeat-[no-repeat]",
-    "indeterminate:before:tw-mask-image-[var(--indeterminate-mask-image)]",
+    "indeterminate:before:tw-bg-primary-600",
+    "indeterminate:before:tw-border-primary-600",
+    "indeterminate:hover:before:tw-bg-primary-700",
+    "indeterminate:hover:before:tw-border-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-bg-primary-700",
+    "[&>label:hover]:indeterminate:before:tw-border-primary-700",
+    "indeterminate:after:tw-bg-text-contrast",
+    "indeterminate:after:tw-mask-position-[center]",
+    "indeterminate:after:tw-mask-repeat-[no-repeat]",
+    "indeterminate:after:tw-mask-image-[var(--indeterminate-mask-image)]",
     "indeterminate:disabled:tw-border-secondary-100",
     "indeterminate:disabled:tw-bg-secondary-100",
-    "indeterminate:disabled:before:tw-bg-text-muted",
+    "indeterminate:disabled:after:tw-bg-text-muted",
   ];
 
   constructor(@Optional() @Self() private ngControl?: NgControl) {}

libs/components/src/checkbox/checkbox.stories.ts

@@ -13,6 +13,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 
 import { BadgeModule } from "../badge";
 import { FormControlModule } from "../form-control";
+import { FormFieldModule } from "../form-field";
 import { TableModule } from "../table";
 import { I18nMockService } from "../utils/i18n-mock.service";
 
@@ -30,6 +31,7 @@ const template = /*html*/ `
 @Component({
   selector: "app-example",
   template,
+  imports: [CheckboxModule, FormFieldModule, ReactiveFormsModule],
 })
 class ExampleComponent {
   protected formObj = this.formBuilder.group({
@@ -55,8 +57,8 @@ export default {
   title: "Component Library/Form/Checkbox",
   decorators: [
     moduleMetadata({
-      declarations: [ExampleComponent],
       imports: [
+        ExampleComponent,
         FormsModule,
         ReactiveFormsModule,
         FormControlModule,
@@ -195,17 +197,17 @@ export const Custom: Story = {
     props: args,
     template: /*html*/ `
       <div class="tw-flex tw-flex-col tw-w-32">
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-gap-2 tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           A-Z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+        <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           a-z
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
-        <label class="tw-text-main tw-flex tw-bg-secondary-300 tw-p-2">
+       <label class="tw-text-main tw-flex tw-items-center tw-justify-between tw-bg-secondary-300 tw-p-2">
           0-9
-          <input class="tw-ms-auto focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
+          <input class="tw-me-0 focus-visible:tw-ring-offset-secondary-300" type="checkbox" bitCheckbox />
         </label>
       </div>
     `,

libs/components/src/dialog/dialog.service.stories.ts

@@ -25,10 +25,13 @@ interface Animal {
   template: `
     <bit-layout>
       <button class="tw-mr-2" bitButton type="button" (click)="openDialog()">Open Dialog</button>
+      <button class="tw-mr-2" bitButton type="button" (click)="openDialogNonDismissable()">
+        Open Non-Dismissable Dialog
+      </button>
       <button bitButton type="button" (click)="openDrawer()">Open Drawer</button>
     </bit-layout>
   `,
-  imports: [ButtonModule],
+  imports: [ButtonModule, LayoutComponent],
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
@@ -41,6 +44,15 @@ class StoryDialogComponent {
     });
   }
 
+  openDialogNonDismissable() {
+    this.dialogService.open(NonDismissableContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
+
   openDrawer() {
     this.dialogService.openDrawer(StoryDialogContentComponent, {
       data: {
@@ -79,13 +91,40 @@ class StoryDialogContentComponent {
   }
 }
 
+@Component({
+  template: `
+    <bit-dialog title="Dialog Title" dialogSize="large">
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+      <ng-container bitDialogFooter>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+      </ng-container>
+    </bit-dialog>
+  `,
+  imports: [DialogModule, ButtonModule],
+})
+class NonDismissableContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
 export default {
   title: "Component Library/Dialogs/Service",
   component: StoryDialogComponent,
   decorators: [
     positionFixedWrapperDecorator(),
     moduleMetadata({
-      declarations: [StoryDialogContentComponent],
       imports: [
         SharedModule,
         ButtonModule,
@@ -138,8 +177,7 @@ export const Default: Story = {
   },
 };
 
-/** Drawers must be a descendant of `bit-layout`. */
-export const Drawer: Story = {
+export const NonDismissable: Story = {
   play: async (context) => {
     const canvas = context.canvasElement;
 
@@ -147,3 +185,13 @@ export const Drawer: Story = {
     await userEvent.click(button);
   },
 };
+
+/** Drawers must be a descendant of `bit-layout`. */
+export const Drawer: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[2];
+    await userEvent.click(button);
+  },
+};

libs/components/src/dialog/dialog/dialog.component.html

@@ -30,15 +30,17 @@
       }
       <ng-content select="[bitDialogTitle]"></ng-content>
     </h2>
-    <button
-      type="button"
-      bitIconButton="bwi-close"
-      buttonType="main"
-      size="default"
-      bitDialogClose
-      [attr.title]="'close' | i18n"
-      [attr.aria-label]="'close' | i18n"
-    ></button>
+    @if (!this.dialogRef?.disableClose) {
+      <button
+        type="button"
+        bitIconButton="bwi-close"
+        buttonType="main"
+        size="default"
+        bitDialogClose
+        [attr.title]="'close' | i18n"
+        [attr.aria-label]="'close' | i18n"
+      ></button>
+    }
   </header>
 
   <div

libs/components/src/dialog/dialog/dialog.component.ts

@@ -87,8 +87,10 @@ export class DialogComponent {
   }
 
   handleEsc(event: Event) {
-    this.dialogRef?.close();
-    event.stopPropagation();
+    if (!this.dialogRef?.disableClose) {
+      this.dialogRef?.close();
+      event.stopPropagation();
+    }
   }
 
   get width() {

libs/components/src/dialog/simple-dialog/simple-dialog.service.stories.ts

@@ -2,6 +2,7 @@ import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
 import { Component, Inject } from "@angular/core";
 import { provideAnimations } from "@angular/platform-browser/animations";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { getAllByRole, userEvent } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -15,19 +16,45 @@ interface Animal {
 }
 
 @Component({
-  template: `<button type="button" bitButton (click)="openDialog()">Open Simple Dialog</button>`,
+  template: `
+    <button type="button" bitButton (click)="openSimpleDialog()">Open Simple Dialog</button>
+    <button type="button" bitButton (click)="openNonDismissableWithPrimaryButtonDialog()">
+      Open Non-Dismissable Simple Dialog with Primary Button
+    </button>
+    <button type="button" bitButton (click)="openNonDismissableWithNoButtonsDialog()">
+      Open Non-Dismissable Simple Dialog with No Buttons
+    </button>
+  `,
   imports: [ButtonModule],
 })
 class StoryDialogComponent {
   constructor(public dialogService: DialogService) {}
 
-  openDialog() {
-    this.dialogService.open(StoryDialogContentComponent, {
+  openSimpleDialog() {
+    this.dialogService.open(SimpleDialogContent, {
       data: {
         animal: "panda",
       },
     });
   }
+
+  openNonDismissableWithPrimaryButtonDialog() {
+    this.dialogService.open(NonDismissableWithPrimaryButtonContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
+
+  openNonDismissableWithNoButtonsDialog() {
+    this.dialogService.open(NonDismissableWithNoButtonsContent, {
+      data: {
+        animal: "panda",
+      },
+      disableClose: true,
+    });
+  }
 }
 
 @Component({
@@ -49,7 +76,60 @@ class StoryDialogComponent {
   `,
   imports: [ButtonModule, DialogModule],
 })
-class StoryDialogContentComponent {
+class SimpleDialogContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
+@Component({
+  template: `
+    <bit-simple-dialog>
+      <span bitDialogTitle>Dialog Title</span>
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+      <ng-container bitDialogFooter>
+        <button type="button" bitButton buttonType="primary" (click)="dialogRef.close()">
+          Save
+        </button>
+      </ng-container>
+    </bit-simple-dialog>
+  `,
+  imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithPrimaryButtonContent {
+  constructor(
+    public dialogRef: DialogRef,
+    @Inject(DIALOG_DATA) private data: Animal,
+  ) {}
+
+  get animal() {
+    return this.data?.animal;
+  }
+}
+
+@Component({
+  template: `
+    <bit-simple-dialog>
+      <span bitDialogTitle>Dialog Title</span>
+      <span bitDialogContent>
+        Dialog body text goes here.
+        <br />
+        Animal: {{ animal }}
+      </span>
+    </bit-simple-dialog>
+  `,
+  imports: [ButtonModule, DialogModule],
+})
+class NonDismissableWithNoButtonsContent {
   constructor(
     public dialogRef: DialogRef,
     @Inject(DIALOG_DATA) private data: Animal,
@@ -89,4 +169,29 @@ export default {
 
 type Story = StoryObj<StoryDialogComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[0];
+    await userEvent.click(button);
+  },
+};
+
+export const NonDismissableWithPrimaryButton: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[1];
+    await userEvent.click(button);
+  },
+};
+
+export const NonDismissableWithNoButtons: Story = {
+  play: async (context) => {
+    const canvas = context.canvasElement;
+
+    const button = getAllByRole(canvas, "button")[2];
+    await userEvent.click(button);
+  },
+};

libs/components/src/form-control/form-control.component.html

@@ -1,5 +1,5 @@
 <label
-  class="tw-transition tw-select-none tw-mb-0 tw-inline-flex tw-rounded tw-p-0.5 has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
+  class="tw-transition tw-items-start [&:has(input[type='checkbox'])]:tw-gap-[.25rem] [&:has(input[type='radio'])]:tw-gap-1.5 tw-select-none tw-mb-0 tw-inline-flex tw-rounded has-[:focus-visible]:tw-ring has-[:focus-visible]:tw-ring-primary-600"
   [ngClass]="[formControl.disabled ? 'tw-cursor-auto' : 'tw-cursor-pointer']"
 >
   <ng-content></ng-content>

libs/components/src/form-field/form-field.stories.ts

@@ -72,6 +72,7 @@ export default {
   decorators: [
     moduleMetadata({
       imports: [
+        A11yTitleDirective,
         FormsModule,
         ReactiveFormsModule,
         FormFieldModule,
@@ -88,7 +89,6 @@ export default {
         TextFieldModule,
         BadgeModule,
       ],
-      declarations: [A11yTitleDirective],
       providers: [
         {
           provide: I18nService,

libs/components/src/form/form.stories.ts

@@ -1,13 +1,6 @@
-import {
-  AbstractControl,
-  FormBuilder,
-  FormsModule,
-  ReactiveFormsModule,
-  ValidationErrors,
-  ValidatorFn,
-  Validators,
-} from "@angular/forms";
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from "@angular/forms";
 import { Meta, StoryObj, moduleMetadata } from "@storybook/angular";
+import { userEvent, getByText } from "@storybook/test";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
@@ -15,6 +8,7 @@ import { ButtonModule } from "../button";
 import { CheckboxModule } from "../checkbox";
 import { FormControlModule } from "../form-control";
 import { FormFieldModule } from "../form-field";
+import { trimValidator, forbiddenCharacters } from "../form-field/bit-validators";
 import { InputModule } from "../input/input.module";
 import { MultiSelectModule } from "../multi-select";
 import { RadioButtonModule } from "../radio-button";
@@ -48,13 +42,19 @@ export default {
               required: "required",
               checkboxRequired: "Option is required",
               inputRequired: "Input is required.",
-              inputEmail: "Input is not an email-address.",
+              inputEmail: "Input is not an email address.",
+              inputForbiddenCharacters: (char) =>
+                `The following characters are not allowed: "${char}"`,
               inputMinValue: (min) => `Input value must be at least ${min}.`,
               inputMaxValue: (max) => `Input value must not exceed ${max}.`,
+              inputMinLength: (min) => `Input value must be at least ${min} characters long.`,
+              inputMaxLength: (max) => `Input value must not exceed ${max} characters in length.`,
+              inputTrimValidator: `Input must not contain only whitespace.`,
               multiSelectPlaceholder: "-- Type to Filter --",
               multiSelectLoading: "Retrieving options...",
               multiSelectNotFound: "No items found",
               multiSelectClearAll: "Clear all",
+              fieldsNeedAttention: "__$1__ field(s) above need your attention.",
             });
           },
         },
@@ -72,7 +72,7 @@ export default {
 const fb = new FormBuilder();
 const exampleFormObj = fb.group({
   name: ["", [Validators.required]],
-  email: ["", [Validators.required, Validators.email, forbiddenNameValidator(/bit/i)]],
+  email: ["", [Validators.required, Validators.email, forbiddenCharacters(["#"])]],
   country: [undefined as string | undefined, [Validators.required]],
   groups: [],
   terms: [false, [Validators.requiredTrue]],
@@ -80,14 +80,6 @@ const exampleFormObj = fb.group({
   age: [null, [Validators.min(0), Validators.max(150)]],
 });
 
-// Custom error message, `message` is shown as the error message
-function forbiddenNameValidator(nameRe: RegExp): ValidatorFn {
-  return (control: AbstractControl): ValidationErrors | null => {
-    const forbidden = nameRe.test(control.value);
-    return forbidden ? { forbiddenName: { message: "forbiddenName" } } : null;
-  };
-}
-
 type Story = StoryObj;
 
 export const FullExample: Story = {
@@ -177,3 +169,95 @@ export const FullExample: Story = {
     ],
   },
 };
+
+const showValidationsFormObj = fb.group({
+  required: ["", [Validators.required]],
+  whitespace: ["    ", trimValidator],
+  email: ["example?bad-email", [Validators.email]],
+  minLength: ["Hello", [Validators.minLength(8)]],
+  maxLength: ["Hello there", [Validators.maxLength(8)]],
+  minValue: [9, [Validators.min(10)]],
+  maxValue: [15, [Validators.max(10)]],
+  forbiddenChars: ["Th!$ value cont#in$ forbidden char$", forbiddenCharacters(["#", "!", "$"])],
+});
+
+export const Validations: Story = {
+  render: (args) => ({
+    props: {
+      formObj: showValidationsFormObj,
+      submit: () => showValidationsFormObj.markAllAsTouched(),
+      ...args,
+    },
+    template: /*html*/ `
+      <form [formGroup]="formObj" (ngSubmit)="submit()">
+        <bit-form-field>
+          <bit-label>Required validation</bit-label>
+          <input bitInput formControlName="required" />
+          <bit-hint>This field is required. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Email validation</bit-label>
+          <input bitInput type="email" formControlName="email" />
+          <bit-hint>This field contains a malformed email address. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Min length validation</bit-label>
+          <input bitInput formControlName="minLength" />
+          <bit-hint>Value must be at least 8 characters. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Max length validation</bit-label>
+          <input bitInput formControlName="maxLength" />
+          <bit-hint>Value must be less then 8 characters. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Min number value validation</bit-label>
+          <input
+            bitInput
+            type="number"
+            formControlName="minValue"
+          />
+          <bit-hint>Value must be greater than 10. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Max number value validation</bit-label>
+          <input
+            bitInput
+            type="number"
+            formControlName="maxValue"
+          />
+          <bit-hint>Value must be less than than 10. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>Forbidden characters validation</bit-label>
+          <input
+            bitInput
+            formControlName="forbiddenChars"
+          />
+          <bit-hint>Value must not contain '#', '!' or '$'. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <bit-form-field>
+          <bit-label>White space validation</bit-label>
+          <input bitInput formControlName="whitespace" />
+          <bit-hint>This input contains only white space. Submit form or blur input to see error</bit-hint>
+        </bit-form-field>
+
+        <button type="submit" bitButton buttonType="primary">Submit</button>
+        <bit-error-summary [formGroup]="formObj"></bit-error-summary>
+      </form>
+    `,
+  }),
+  play: async (context) => {
+    const canvas = context.canvasElement;
+    const submitButton = getByText(canvas, "Submit");
+
+    await userEvent.click(submitButton);
+  },
+};

libs/components/src/form/forms.mdx

@@ -142,8 +142,20 @@ If a checkbox group has more than 4 options a
 
 <Canvas of={checkboxStories.Default} />
 
+## Validation messages
+
+These are examples of our default validation error messages:
+
+<Canvas of={formStories.Validations} />
+
 ## Accessibility
 
+### Icon Buttons in Form Fields
+
+When adding prefix or suffix icon buttons to a form field, be sure to use the `appA11yTitle`
+directive to provide a label for screenreaders. Typically, the label should follow this pattern:
+`{Action} {field label}`, i.e. "Copy username".
+
 ### Required Fields
 
 - Use "(required)" in the label of each required form field styled the same as the field's helper
@@ -152,12 +164,6 @@ If a checkbox group has more than 4 options a
   helper text.
   - **Example:** "Billing Email is required if owned by a business".
 
-### Icon Buttons in Form Fields
-
-When adding prefix or suffix icon buttons to a form field, be sure to use the `appA11yTitle`
-directive to provide a label for screenreaders. Typically, the label should follow this pattern:
-`{Action} {field label}`, i.e. "Copy username".
-
 ### Form Field Errors
 
 - When a resting field is filled out, validation is triggered when the user de-focuses the field

libs/components/src/icon/icon.mdx

@@ -41,12 +41,14 @@ import { IconModule } from "@bitwarden/components";
 
    - A non-comprehensive list of common colors and their associated classes is below:
 
-     | Hardcoded Value                                                                                                                          | Tailwind Stroke Class     | Tailwind Fill Class     | Tailwind Variable       |
-     | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ----------------------- | ----------------------- |
-     | `#020F66` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#020F66"}}></span> | `tw-stroke-art-primary`   | `tw-fill-art-primary`   | `--color-art-primary`   |
-     | `#10949D` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#10949D"}}></span> | `tw-stroke-art-accent`    | `tw-fill-art-accent`    | `--color-art-accent`    |
-     | `#2CDDE9` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#2CDDE9"}}></span> | `tw-stroke-art-accent`    | `tw-fill-art-accent`    | `--color-art-accent`    |
-     | `#89929F` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#89929F"}}></span> | `tw-stroke-secondary-600` | `tw-fill-secondary-600` | `--color-secondary-600` |
+     | Hardcoded Value                                                                                                                          | Tailwind Stroke Class                 | Tailwind Fill Class                 | Tailwind Variable                   |
+     | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------- | ----------------------------------- | ----------------------------------- |
+     | `#020F66` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#020F66"}}></span> | `tw-stroke-illustration-outline`      | `tw-fill-illustration-outline`      | `--color-illustration-outline`      |
+     | `#DBE5F6` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#DBE5F6"}}></span> | `tw-stroke-illustration-bg-primary`   | `tw-fill-illustration-bg-primary`   | `--color-illustration-bg-primary`   |
+     | `#AAC3EF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#AAC3EF"}}></span> | `tw-stroke-illustration-bg-secondary` | `tw-fill-illustration-bg-secondary` | `--color-illustration-bg-secondary` |
+     | `#FFFFFF` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFFFFF"}}></span> | `tw-stroke-illustration-bg-tertiary`  | `tw-fill-illustration-bg-tertiary`  | `--color-illustration-bg-tertiary`  |
+     | `#FFBF00` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#FFBF00"}}></span> | `tw-stroke-illustration-tertiary`     | `tw-fill-illustration-tertiary`     | `--color-illustration-tertiary`     |
+     | `#175DDC` <span style={{ display: "inline-block", width: "8px", height: "8px", borderRadius: "50%", backgroundColor: "#175DDC"}}></span> | `tw-stroke-illustration-logo`         | `tw-fill-illustration-logo`         | `--color-illustration-logo`         |
 
    - If the hex that you have on an SVG path is not listed above, there are a few ways to figure out
      the appropriate Tailwind class:
@@ -56,20 +58,20 @@ import { IconModule } from "@bitwarden/components";
        - Click on an individual path on the SVG until you see the path's properties in the
          right-hand panel.
        - Scroll down to the Colors section.
-         - Example: `Color/Art/Primary`
+         - Example: `Color/Illustration/Outline`
          - This also includes Hex or RGB values that can be used to find the appropriate Tailwind
            variable as well if you follow the manual search option below.
        - Create the appropriate stroke or fill class from the color used.
-         - Example: `Color/Art/Primary` corresponds to `--color-art-primary` which corresponds to
-           `tw-stroke-art-primary` or `tw-fill-art-primary`.
+         - Example: `Color/Illustration/Outline` corresponds to `--color-illustration-outline` which
+           corresponds to `tw-stroke-illustration-outline` or `tw-fill-illustration-outline`.
      - **Option 2: Manual Search**
        - Take the path's stroke or fill hex value and convert it to RGB using a tool like
          [Hex to RGB](https://www.rgbtohex.net/hex-to-rgb/).
        - Search for the RGB value without commas in our `tw-theme.css` to find the Tailwind variable
          that corresponds to the color.
        - Create the appropriate stroke or fill class using the Tailwind variable.
-         - Example: `--color-art-primary` corresponds to `tw-stroke-art-primary` or
-           `tw-fill-art-primary`.
+         - Example: `--color-illustration-outline` corresponds to `tw-stroke-illustration-outline`
+           or `tw-fill-illustration-outline`.
 
 6. **Remove any hardcoded width or height attributes** if your SVG has a configured
    [viewBox](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox) attribute in order

libs/components/src/icon/icons/bitwarden-shield.icon.ts

@@ -1,7 +0,0 @@
-import { svgIcon } from "../icon";
-
-export const BitwardenShield = svgIcon`
-  <svg viewBox="0 0 120 132" xmlns="http://www.w3.org/2000/svg">
-    <path class="tw-fill-marketing-logo" d="M82.2944 69.1899V37.2898H60V93.9624C63.948 91.869 67.4812 89.5927 70.5998 87.1338C78.3962 81.0196 82.2944 75.0383 82.2944 69.1899ZM91.8491 30.9097V69.1899C91.8491 72.0477 91.2934 74.8805 90.182 77.6883C89.0706 80.4962 87.6938 82.9884 86.0516 85.1649C84.4094 87.3415 82.452 89.4598 80.1794 91.5201C77.9068 93.5803 75.8084 95.2916 73.8842 96.654C71.96 98.0164 69.9528 99.304 67.8627 100.517C65.7726 101.73 64.288 102.552 63.4088 102.984C62.5297 103.416 61.8247 103.748 61.2939 103.981C60.8958 104.18 60.4645 104.28 60 104.28C59.5355 104.28 59.1042 104.18 58.7061 103.981C58.1753 103.748 57.4703 103.416 56.5911 102.984C55.712 102.552 54.2273 101.73 52.1372 100.517C50.0471 99.304 48.04 98.0164 46.1158 96.654C44.1916 95.2916 42.0932 93.5803 39.8206 91.5201C37.548 89.4598 35.5906 87.3415 33.9484 85.1649C32.3062 82.9884 30.9294 80.4962 29.818 77.6883C28.7066 74.8805 28.1509 72.0477 28.1509 69.1899V30.9097C28.1509 30.0458 28.4661 29.2981 29.0964 28.6668C29.7267 28.0354 30.4732 27.7197 31.3358 27.7197H88.6642C89.5268 27.7197 90.2732 28.0354 90.9036 28.6668C91.5339 29.2981 91.8491 30.0458 91.8491 30.9097Z" />
-  </svg>
-`;

libs/components/src/icon/icons/index.ts

@@ -1,5 +1,4 @@
 export * from "./bitwarden-logo.icon";
-export * from "./bitwarden-shield.icon";
 export * from "./extension-bitwarden-logo.icon";
 export * from "./lock.icon";
 export * from "./generator";

libs/components/src/icon/index.ts

@@ -1,3 +1,4 @@
 export * from "./icon.module";
 export * from "./icon";
 export * as Icons from "./icons";
+export { AdminConsoleLogo, PasswordManagerLogo, SecretsManagerLogo } from "./logos";

libs/components/src/icon/logos/bitwarden/index.ts

@@ -0,0 +1,4 @@
+export { default as AdminConsoleLogo } from "./admin-console";
+export { default as BitwardenShield } from "./shield";
+export { default as PasswordManagerLogo } from "./password-manager";
+export { default as SecretsManagerLogo } from "./secrets-manager";

libs/components/src/icon/logos/bitwarden/shield.ts

@@ -0,0 +1,7 @@
+import { svgIcon } from "../../icon";
+
+const BitwardenShield = svgIcon`
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 28 33"><path d="M26.696.403A1.274 1.274 0 0 0 25.764 0H1.83C1.467 0 1.16.137.898.403a1.294 1.294 0 0 0-.398.944v16.164c0 1.203.235 2.405.697 3.587.462 1.188 1.038 2.24 1.728 3.155.682.922 1.5 1.815 2.453 2.68a28.077 28.077 0 0 0 2.63 2.167 32.181 32.181 0 0 0 2.518 1.628c.875.511 1.493.857 1.863 1.045.37.18.661.324.882.417.163.087.348.13.54.13.192 0 .377-.043.54-.13.221-.1.52-.237.882-.417.37-.18.989-.534 1.863-1.045a34.4 34.4 0 0 0 2.517-1.628c.804-.576 1.679-1.296 2.631-2.168a20.206 20.206 0 0 0 2.454-2.68 13.599 13.599 0 0 0 1.72-3.154c.463-1.189.697-2.384.697-3.587V1.347a1.406 1.406 0 0 0-.42-.944ZM23.61 17.662c0 5.849-9.813 10.89-9.813 10.89V3.458h9.813v14.205Z" class="tw-fill-marketing-logo"/></svg>
+`;
+
+export default BitwardenShield;

libs/components/src/icon/logos/index.ts

@@ -0,0 +1 @@
+export * from "./bitwarden";

libs/components/src/item/item.component.ts

@@ -18,7 +18,7 @@ import { ItemActionComponent } from "./item-action.component";
   providers: [{ provide: A11yRowDirective, useExisting: ItemComponent }],
   host: {
     class:
-      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-primary-100 tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
+      "tw-block tw-box-border tw-overflow-hidden tw-flex tw-bg-background [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-cursor-pointer [&:has([data-item-main-content]_button:hover,[data-item-main-content]_a:hover)]:tw-bg-hover-default tw-text-main tw-border-solid tw-border-b tw-border-0 [&:not(bit-layout_*)]:tw-rounded-lg bit-compact:[&:not(bit-layout_*)]:tw-rounded-none bit-compact:[&:not(bit-layout_*)]:last-of-type:tw-rounded-b-lg bit-compact:[&:not(bit-layout_*)]:first-of-type:tw-rounded-t-lg tw-min-h-9 tw-mb-1.5 bit-compact:tw-mb-0",
   },
 })
 export class ItemComponent extends A11yRowDirective {

libs/components/src/layout/layout.stories.ts

@@ -55,207 +55,15 @@ export const WithContent: Story = {
     template: /* HTML */ `
       <bit-layout>
         <bit-side-nav>
-          <bit-nav-item text="Item A" route="#" icon="bwi-lock"></bit-nav-item>
-          <bit-nav-group text="Tree A" icon="bwi-family" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
+            <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B" route="b"></bit-nav-item>
+            <bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
-          <bit-nav-group text="Tree B" icon="bwi-collection-shared" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-          </bit-nav-group>
-          <bit-nav-group text="Tree C" icon="bwi-key" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+            <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B"></bit-nav-item>
+            <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
         </bit-side-nav>
         <bit-callout title="Foobar"> Hello world! </bit-callout>
@@ -277,77 +85,15 @@ export const Secondary: Story = {
     template: /* HTML */ `
       <bit-layout>
         <bit-side-nav variant="secondary">
-          <bit-nav-item text="Item A" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-item text="Item B" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-divider></bit-nav-divider>
-          <bit-nav-item text="Item C" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-item text="Item D" icon="bwi-collection-shared"></bit-nav-item>
-          <bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
-            <bit-nav-group
-              text="Level 1 - with children (empty)"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
-            <bit-nav-group
-              text="Level 1 - with children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-              [open]="true"
-            >
-              <bit-nav-group
-                text="Level 2 - with children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              >
-                <bit-nav-item
-                  text="Level 3 - no children, no icon"
-                  route="#"
-                  variant="tree"
-                ></bit-nav-item>
-                <bit-nav-group
-                  text="Level 3 - with children"
-                  route="#"
-                  icon="bwi-collection-shared"
-                  variant="tree"
-                  [open]="true"
-                >
-                  <bit-nav-item
-                    text="Level 4 - no children, no icon"
-                    route="#"
-                    variant="tree"
-                  ></bit-nav-item>
-                </bit-nav-group>
-              </bit-nav-group>
-              <bit-nav-group
-                text="Level 2 - with children (empty)"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-                [open]="true"
-              ></bit-nav-group>
-              <bit-nav-item
-                text="Level 2 - no children"
-                route="#"
-                icon="bwi-collection-shared"
-                variant="tree"
-              ></bit-nav-item>
-            </bit-nav-group>
-            <bit-nav-item
-              text="Level 1 - no children"
-              route="#"
-              icon="bwi-collection-shared"
-              variant="tree"
-            ></bit-nav-item>
+          <bit-nav-group text="Hello World (Anchor)" [route]="['a']" icon="bwi-filter">
+            <bit-nav-item text="Child A" route="a" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B" route="b"></bit-nav-item>
+            <bit-nav-item text="Child C" route="c" icon="bwi-filter"></bit-nav-item>
+          </bit-nav-group>
+          <bit-nav-group text="Lorem Ipsum (Button)" icon="bwi-filter">
+            <bit-nav-item text="Child A" icon="bwi-filter"></bit-nav-item>
+            <bit-nav-item text="Child B"></bit-nav-item>
+            <bit-nav-item text="Child C" icon="bwi-filter"></bit-nav-item>
           </bit-nav-group>
         </bit-side-nav>
         <bit-callout title="Foobar"> Hello world! </bit-callout>

libs/components/src/menu/menu-item.directive.ts

@@ -20,7 +20,7 @@ export class MenuItemDirective implements FocusableOption {
     "tw-border-none",
     "tw-bg-background",
     "tw-text-left",
-    "hover:tw-bg-primary-100",
+    "hover:tw-bg-hover-default",
     "focus-visible:tw-z-50",
     "focus-visible:tw-outline-none",
     "focus-visible:tw-ring-2",

libs/components/src/menu/menu-trigger-for.directive.ts

@@ -1,5 +1,6 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
+import { hasModifierKey } from "@angular/cdk/keycodes";
 import { Overlay, OverlayConfig, OverlayRef } from "@angular/cdk/overlay";
 import { TemplatePortal } from "@angular/cdk/portal";
 import {
@@ -76,6 +77,13 @@ export class MenuTriggerForDirective implements OnDestroy {
     this.overlayRef.attach(templatePortal);
 
     this.closedEventsSub = this.getClosedEvents().subscribe((event: KeyboardEvent | undefined) => {
+      // Closing the menu is handled in this.destroyMenu, so we want to prevent the escape key
+      // from doing its normal default action, which would otherwise cause a parent component
+      // (like a dialog) or extension window to close
+      if (event?.key === "Escape" && !hasModifierKey(event)) {
+        event.preventDefault();
+      }
+
       if (["Tab", "Escape"].includes(event?.key)) {
         // Required to ensure tab order resumes correctly
         this.elementRef.nativeElement.focus();

libs/components/src/navigation/nav-base.component.ts

@@ -55,16 +55,6 @@ export abstract class NavBaseComponent {
     matrixParams: "ignored",
   };
 
-  /**
-   * If this item is used within a tree, set `variant` to `"tree"`
-   */
-  @Input() variant: "default" | "tree" = "default";
-
-  /**
-   * Depth level when nested inside of a `'tree'` variant
-   */
-  @Input() treeDepth = 0;
-
   /**
    * If `true`, do not change styles when nav item is active.
    */

libs/components/src/navigation/nav-divider.component.html

@@ -1,3 +1,3 @@
 @if (sideNavService.open$ | async) {
-  <div class="tw-h-px tw-w-full tw-bg-secondary-300"></div>
+  <div class="tw-h-px tw-w-full tw-my-2 tw-bg-secondary-300"></div>
 }

libs/components/src/navigation/nav-group.component.html

@@ -6,8 +6,6 @@
     [route]="route"
     [relativeTo]="relativeTo"
     [routerLinkActiveOptions]="routerLinkActiveOptions"
-    [variant]="variant"
-    [treeDepth]="treeDepth"
     (mainContentClicked)="handleMainContentClicked()"
     [ariaLabel]="ariaLabel"
     [hideActiveStyles]="parentHideActiveStyles"
@@ -16,9 +14,7 @@
       <button
         type="button"
         class="tw-ms-auto"
-        [bitIconButton]="
-          open ? 'bwi-angle-up' : variant === 'tree' ? 'bwi-angle-right' : 'bwi-angle-down'
-        "
+        [bitIconButton]="open ? 'bwi-angle-up' : 'bwi-angle-down'"
         [buttonType]="'light'"
         (click)="toggle($event)"
         size="small"
@@ -29,17 +25,9 @@
         [attr.aria-label]="['toggleCollapse' | i18n, text].join(' ')"
       ></button>
     </ng-template>
-    <!-- Show toggle to the left for trees otherwise to the right -->
-    @if (variant === "tree") {
-      <ng-container slot="start">
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      </ng-container>
-    }
     <ng-container slot="end">
       <ng-content select="[slot=end]"></ng-content>
-      @if (variant !== "tree") {
-        <ng-container *ngTemplateOutlet="button"></ng-container>
-      }
+      <ng-container *ngTemplateOutlet="button"></ng-container>
     </ng-container>
   </bit-nav-item>
   <!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->

libs/components/src/navigation/nav-group.component.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from "@angular/common";
 import {
-  AfterContentInit,
   booleanAttribute,
   Component,
   ContentChildren,
@@ -29,7 +28,7 @@ import { SideNavService } from "./side-nav.service";
   ],
   imports: [CommonModule, NavItemComponent, IconButtonModule, I18nPipe],
 })
-export class NavGroupComponent extends NavBaseComponent implements AfterContentInit {
+export class NavGroupComponent extends NavBaseComponent {
   @ContentChildren(NavBaseComponent, {
     descendants: true,
   })
@@ -80,18 +79,6 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
     this.setOpen(!this.open);
   }
 
-  /**
-   * - For any nested NavGroupComponents or NavItemComponents, increment the `treeDepth` by 1.
-   */
-  private initNestedStyles() {
-    if (this.variant !== "tree") {
-      return;
-    }
-    [...this.nestedNavComponents].forEach((navGroupOrItem) => {
-      navGroupOrItem.treeDepth += 1;
-    });
-  }
-
   protected handleMainContentClicked() {
     if (!this.sideNavService.open) {
       if (!this.route) {
@@ -103,8 +90,4 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
     }
     this.mainContentClicked.emit();
   }
-
-  ngAfterContentInit(): void {
-    this.initNestedStyles();
-  }
 }

libs/components/src/navigation/nav-group.stories.ts

@@ -111,31 +111,6 @@ export const HideEmptyGroups: StoryObj<NavGroupComponent & { renderChildren: boo
   }),
 };
 
-export const Tree: StoryObj<NavGroupComponent> = {
-  render: (args) => ({
-    props: args,
-    template: /*html*/ `
-      <bit-side-nav>
-        <bit-nav-group text="Tree example" icon="bwi-collection-shared" [open]="true">
-          <bit-nav-group text="Level 1 - with children (empty)" route="t1" icon="bwi-collection-shared" variant="tree"></bit-nav-group>
-          <bit-nav-item text="Level 1 - no children" route="t2" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-          <bit-nav-group text="Level 1 - with children" route="t3" icon="bwi-collection-shared" variant="tree" [open]="true">
-            <bit-nav-group text="Level 2 - with children" route="t4" icon="bwi-collection-shared" variant="tree" [open]="true">
-              <bit-nav-item text="Level 3 - no children, no icon" route="t5" variant="tree"></bit-nav-item>
-              <bit-nav-group text="Level 3 - with children" route="t6" icon="bwi-collection-shared" variant="tree" [open]="true">
-                <bit-nav-item text="Level 4 - no children, no icon" route="t7" variant="tree"></bit-nav-item>
-              </bit-nav-group>
-            </bit-nav-group>
-            <bit-nav-group text="Level 2 - with children (empty)" route="t8" icon="bwi-collection-shared" variant="tree" [open]="true"></bit-nav-group>
-            <bit-nav-item text="Level 2 - no children" route="t9" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-          </bit-nav-group>
-          <bit-nav-item text="Level 1 - no children" route="t10" icon="bwi-collection-shared" variant="tree"></bit-nav-item>
-        </bit-nav-group>
-      </bit-side-nav>
-    `,
-  }),
-};
-
 export const Secondary: StoryObj<NavGroupComponent> = {
   render: (args) => ({
     props: args,

libs/components/src/navigation/nav-item.component.html

@@ -1,113 +1,77 @@
-<ng-container
-  *ngIf="{
-    open: sideNavService.open$ | async,
-  } as data"
->
-  <div
-    *ngIf="data.open || icon"
-    class="tw-relative"
-    [ngClass]="[
-      showActiveStyles
-        ? 'tw-bg-background-alt4'
-        : 'tw-bg-background-alt3 hover:tw-bg-primary-300/60',
-      fvwStyles$ | async,
-    ]"
-  >
+<div class="tw-ps-2 tw-pe-2">
+  @let open = sideNavService.open$ | async;
+  @if (open || icon) {
     <div
-      [ngStyle]="{
-        'padding-left': data.open ? (variant === 'tree' ? 2.5 : 1) + treeDepth * 1.5 + 'rem' : '0',
-      }"
-      class="tw-relative tw-flex"
+      class="tw-relative tw-rounded-md tw-h-10"
+      [ngClass]="[
+        showActiveStyles
+          ? 'tw-bg-background-alt4'
+          : 'tw-bg-background-alt3 hover:tw-bg-hover-contrast',
+        fvwStyles$ | async,
+      ]"
     >
-      <div [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']">
-        <div
-          #slotStart
-          class="[&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:!tw-text-alt2"
-        >
-          <ng-content select="[slot=start]"></ng-content>
-        </div>
-        <!-- Default content for #slotStart (for consistent sizing) -->
-        <div
-          *ngIf="slotStart.childElementCount === 0"
-          [ngClass]="{
-            'tw-w-0': variant !== 'tree',
-          }"
-        >
+      <div class="tw-relative tw-flex tw-items-center tw-h-full">
+        <ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
+
+        <!-- Main content of `NavItem` -->
+        <ng-template #anchorAndButtonContent>
+          <div
+            [title]="text"
+            class="tw-truncate tw-gap-2 tw-items-center tw-font-bold"
+            [ngClass]="{ 'tw-text-center': !open, 'tw-flex': open }"
+          >
+            <i
+              class="!tw-m-0 tw-w-4 bwi bwi-fw tw-text-alt2 {{ icon }}"
+              [attr.aria-hidden]="open"
+              [attr.aria-label]="text"
+            ></i>
+            @if (open) {
+              <span>{{ text }}</span>
+            }
+          </div>
+        </ng-template>
+
+        <!-- Show if a value was passed to `this.to` -->
+        <ng-template #isAnchor>
+          <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
+          <!-- The following `class` field should match the `#isButton` class field below -->
+          <a
+            class="tw-w-full tw-px-3 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
+            data-fvw
+            [routerLink]="route"
+            [relativeTo]="relativeTo"
+            [attr.aria-label]="ariaLabel || text"
+            routerLinkActive
+            [routerLinkActiveOptions]="routerLinkActiveOptions"
+            [ariaCurrentWhenActive]="'page'"
+            (isActiveChange)="setIsActive($event)"
+            (click)="mainContentClicked.emit()"
+          >
+            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
+          </a>
+        </ng-template>
+
+        <!-- Show if `this.to` is falsy -->
+        <ng-template #isButton>
+          <!-- Class field should match `#isAnchor` class field above -->
           <button
             type="button"
-            class="tw-invisible"
-            [bitIconButton]="'bwi-angle-down'"
-            size="small"
-            aria-hidden="true"
-          ></button>
-        </div>
-      </div>
-
-      <ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
-
-      <!-- Main content of `NavItem` -->
-      <ng-template #anchorAndButtonContent>
-        <div
-          [title]="text"
-          class="tw-truncate"
-          [ngClass]="[
-            variant === 'tree' ? 'tw-py-1' : 'tw-py-2',
-            data.open ? 'tw-pe-4' : 'tw-text-center',
-          ]"
-        >
-          <i
-            class="bwi bwi-fw tw-text-alt2 tw-mx-1 {{ icon }}"
-            [attr.aria-hidden]="data.open"
-            [attr.aria-label]="text"
-          ></i
-          ><span
-            *ngIf="data.open"
-            [ngClass]="showActiveStyles ? 'tw-font-bold' : 'tw-font-semibold'"
-            >{{ text }}</span
+            class="tw-w-full tw-px-3 tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
+            data-fvw
+            (click)="mainContentClicked.emit()"
           >
-        </div>
-      </ng-template>
+            <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
+          </button>
+        </ng-template>
 
-      <!-- Show if a value was passed to `this.to` -->
-      <ng-template #isAnchor>
-        <!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
-        <!-- The following `class` field should match the `#isButton` class field below -->
-        <a
-          class="tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
-          data-fvw
-          [routerLink]="route"
-          [relativeTo]="relativeTo"
-          [attr.aria-label]="ariaLabel || text"
-          routerLinkActive
-          [routerLinkActiveOptions]="routerLinkActiveOptions"
-          [ariaCurrentWhenActive]="'page'"
-          (isActiveChange)="setIsActive($event)"
-          (click)="mainContentClicked.emit()"
-        >
-          <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
-        </a>
-      </ng-template>
-
-      <!-- Show if `this.to` is falsy -->
-      <ng-template #isButton>
-        <!-- Class field should match `#isAnchor` class field above -->
-        <button
-          type="button"
-          class="tw-w-full tw-truncate tw-border-none tw-bg-transparent tw-p-0 tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
-          data-fvw
-          (click)="mainContentClicked.emit()"
-        >
-          <ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
-        </button>
-      </ng-template>
-
-      <div
-        *ngIf="data.open"
-        class="tw-flex -tw-ms-3 tw-pe-4 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
-        [ngClass]="[variant === 'tree' ? 'tw-py-1' : 'tw-py-2']"
-      >
-        <ng-content select="[slot=end]"></ng-content>
+        @if (open) {
+          <div
+            class="tw-flex tw-items-center tw-pe-1.5 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
+          >
+            <ng-content select="[slot=end]"></ng-content>
+          </div>
+        }
       </div>
     </div>
-  </div>
-</ng-container>
+  }
+</div>

libs/components/src/navigation/nav-logo.component.html

@@ -1,23 +1,19 @@
-@if (sideNavService.open) {
-  <div class="tw-sticky tw-top-0 tw-z-50">
-    <a
-      [routerLink]="route"
-      class="tw-px-5 tw-pb-5 tw-pt-7 tw-block tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2"
-      [attr.aria-label]="label"
-      [title]="label"
-      routerLinkActive
-      [ariaCurrentWhenActive]="'page'"
-    >
-      <bit-icon [icon]="openIcon"></bit-icon>
-    </a>
-  </div>
-}
-@if (!sideNavService.open) {
-  <bit-nav-item
-    class="tw-block tw-pt-7"
-    [hideActiveStyles]="true"
-    [route]="route"
-    [icon]="closedIcon"
-    [text]="label"
-  ></bit-nav-item>
-}
+<div
+  [ngClass]="{
+    'tw-sticky tw-top-0 tw-z-50 tw-pb-2': sideNavService.open,
+    'tw-pb-5': !sideNavService.open,
+  }"
+  class="tw-px-2 tw-pt-5"
+>
+  <a
+    [routerLink]="route"
+    class="tw-p-3 tw-block tw-rounded-md tw-bg-background-alt3 tw-outline-none focus-visible:tw-ring focus-visible:tw-ring-inset focus-visible:tw-ring-text-alt2 hover:tw-bg-hover-contrast [&_path]:tw-fill-text-alt2"
+    [ngClass]="{ '[&_svg]:tw-w-[1.687rem]': !sideNavService.open }"
+    [attr.aria-label]="label"
+    [title]="label"
+    routerLinkActive
+    [ariaCurrentWhenActive]="'page'"
+  >
+    <bit-icon [icon]="sideNavService.open ? openIcon : closedIcon"></bit-icon>
+  </a>
+</div>

libs/components/src/navigation/nav-logo.component.ts

@@ -1,23 +1,23 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-
+import { CommonModule } from "@angular/common";
 import { Component, Input } from "@angular/core";
 import { RouterLinkActive, RouterLink } from "@angular/router";
 
 import { Icon } from "../icon";
 import { BitIconComponent } from "../icon/icon.component";
+import { BitwardenShield } from "../icon/logos";
 
-import { NavItemComponent } from "./nav-item.component";
 import { SideNavService } from "./side-nav.service";
 
 @Component({
   selector: "bit-nav-logo",
   templateUrl: "./nav-logo.component.html",
-  imports: [RouterLinkActive, RouterLink, BitIconComponent, NavItemComponent],
+  imports: [CommonModule, RouterLinkActive, RouterLink, BitIconComponent],
 })
 export class NavLogoComponent {
   /** Icon that is displayed when the side nav is closed */
-  @Input() closedIcon = "bwi-shield";
+  @Input() closedIcon = BitwardenShield;
 
   /** Icon that is displayed when the side nav is open */
   @Input({ required: true }) openIcon: Icon;

libs/components/src/navigation/side-nav.component.html

@@ -14,6 +14,7 @@
         '--color-text-alt2': 'var(--color-text-main)',
         '--color-background-alt3': 'var(--color-secondary-100)',
         '--color-background-alt4': 'var(--color-secondary-300)',
+        '--color-hover-contrast': 'var(--color-hover-default)',
       }
     "
     [cdkTrapFocus]="data.isOverlay"