Merge branch 'main' into auth/pm-8111/browser-refresh-login-component

libs/auth/src/angular/anon-layout/anon-layout.component.html

@@ -5,8 +5,7 @@
     'tw-pt-0': decreaseTopPadding,
     'tw-pt-8': !decreaseTopPadding,
     'tw-min-h-screen': clientType === 'web',
-    'tw-min-h-[calc(100vh-72px)]': clientType === 'browser',
-    'tw-min-h-[calc(100vh-54px)]': clientType === 'desktop',
+    'tw-min-h-full': clientType === 'browser' || clientType === 'desktop',
   }"
 >
   <a *ngIf="!hideLogo" [routerLink]="['/']" class="tw-w-[128px] [&>*]:tw-align-top">
@@ -33,7 +32,7 @@
   </div>
 
   <div
-    class="tw-mb-auto tw-w-full tw-max-w-md tw-mx-auto tw-flex tw-flex-col tw-items-center sm:tw-min-w-[28rem]"
+    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' }"
   >
     <div
@@ -45,13 +44,15 @@
   </div>
 
   <footer *ngIf="!hideFooter" class="tw-text-center">
-    <div *ngIf="showReadonlyHostname">{{ "accessing" | i18n }} {{ hostname }}</div>
+    <div *ngIf="showReadonlyHostname" bitTypography="body2">
+      {{ "accessing" | i18n }} {{ hostname }}
+    </div>
     <ng-container *ngIf="!showReadonlyHostname">
       <ng-content select="[slot=environment-selector]"></ng-content>
     </ng-container>
     <ng-container *ngIf="!hideYearAndVersion">
-      <div>&copy; {{ year }} Bitwarden Inc.</div>
-      <div>{{ version }}</div>
+      <div bitTypography="body2">&copy; {{ year }} Bitwarden Inc.</div>
+      <div bitTypography="body2">{{ version }}</div>
     </ng-container>
   </footer>
 </main>

libs/auth/src/angular/anon-layout/anon-layout.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from "@angular/common";
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
+import { Component, HostBinding, Input, OnChanges, OnInit, SimpleChanges } from "@angular/core";
 import { RouterModule } from "@angular/router";
 import { firstValueFrom } from "rxjs";
 
@@ -19,6 +19,12 @@ import { BitwardenLogo, VaultIcon } from "../icons";
   imports: [IconModule, CommonModule, TypographyModule, SharedModule, RouterModule],
 })
 export class AnonLayoutComponent implements OnInit, OnChanges {
+  @HostBinding("class")
+  get classList() {
+    // AnonLayout should take up full height of parent container for proper footer placement.
+    return ["tw-h-full"];
+  }
+
   @Input() title: string;
   @Input() subtitle: string;
   @Input() icon: Icon;

libs/common/src/admin-console/abstractions/organization-domain/org-domain-api.service.abstraction.ts

@@ -1,7 +1,10 @@
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+
 import { OrganizationDomainRequest } from "../../services/organization-domain/requests/organization-domain.request";
 
 import { OrganizationDomainSsoDetailsResponse } from "./responses/organization-domain-sso-details.response";
 import { OrganizationDomainResponse } from "./responses/organization-domain.response";
+import { VerifiedOrganizationDomainSsoDetailsResponse } from "./responses/verified-organization-domain-sso-details.response";
 
 export abstract class OrgDomainApiServiceAbstraction {
   getAllByOrgId: (orgId: string) => Promise<Array<OrganizationDomainResponse>>;
@@ -16,4 +19,7 @@ export abstract class OrgDomainApiServiceAbstraction {
   verify: (orgId: string, orgDomainId: string) => Promise<OrganizationDomainResponse>;
   delete: (orgId: string, orgDomainId: string) => Promise<any>;
   getClaimedOrgDomainByEmail: (email: string) => Promise<OrganizationDomainSsoDetailsResponse>;
+  getVerifiedOrgDomainsByEmail: (
+    email: string,
+  ) => Promise<ListResponse<VerifiedOrganizationDomainSsoDetailsResponse>>;
 }

libs/common/src/admin-console/abstractions/organization-domain/responses/verified-organization-domain-sso-details.response.ts

@@ -0,0 +1,15 @@
+import { BaseResponse } from "@bitwarden/common/models/response/base.response";
+
+export class VerifiedOrganizationDomainSsoDetailsResponse extends BaseResponse {
+  organizationName: string;
+  organizationIdentifier: string;
+  domainName: string;
+
+  constructor(response: any) {
+    super(response);
+
+    this.organizationName = this.getResponseProperty("organizationName");
+    this.organizationIdentifier = this.getResponseProperty("organizationIdentifier");
+    this.domainName = this.getResponseProperty("domainName");
+  }
+}

libs/common/src/admin-console/services/organization-domain/org-domain-api.service.spec.ts

@@ -1,6 +1,9 @@
 import { mock } from "jest-mock-extended";
 import { lastValueFrom } from "rxjs";
 
+import { VerifiedOrganizationDomainSsoDetailsResponse } from "@bitwarden/common/admin-console/abstractions/organization-domain/responses/verified-organization-domain-sso-details.response";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
+
 import { ApiService } from "../../../abstractions/api.service";
 import { I18nService } from "../../../platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "../../../platform/abstractions/platform-utils.service";
@@ -81,6 +84,19 @@ const mockedOrganizationDomainSsoDetailsResponse = new OrganizationDomainSsoDeta
   mockedOrganizationDomainSsoDetailsServerResponse,
 );
 
+const mockedVerifiedOrganizationDomain = {
+  organizationIdentifier: "fake-org-identifier",
+  organizationName: "fake-org",
+  domainName: "fake-domain-name",
+};
+
+const mockedVerifiedOrganizationDomainSsoResponse =
+  new VerifiedOrganizationDomainSsoDetailsResponse(mockedVerifiedOrganizationDomain);
+
+const mockedVerifiedOrganizationDomainSsoDetailsListResponse = {
+  data: [mockedVerifiedOrganizationDomain],
+} as ListResponse<VerifiedOrganizationDomainSsoDetailsResponse>;
+
 describe("Org Domain API Service", () => {
   let orgDomainApiService: OrgDomainApiService;
 
@@ -229,4 +245,21 @@ describe("Org Domain API Service", () => {
 
     expect(result).toEqual(mockedOrganizationDomainSsoDetailsResponse);
   });
+
+  it("getVerifiedOrgDomainsByEmail should call ApiService.send with correct parameters and return response", async () => {
+    const email = "test@example.com";
+    apiService.send.mockResolvedValue(mockedVerifiedOrganizationDomainSsoDetailsListResponse);
+
+    const result = await orgDomainApiService.getVerifiedOrgDomainsByEmail(email);
+
+    expect(apiService.send).toHaveBeenCalledWith(
+      "POST",
+      "/organizations/domain/sso/verified",
+      new OrganizationDomainSsoDetailsRequest(email),
+      false, //anonymous
+      true,
+    );
+
+    expect(result.data).toContainEqual(mockedVerifiedOrganizationDomainSsoResponse);
+  });
 });

libs/common/src/admin-console/services/organization-domain/org-domain-api.service.ts

@@ -4,6 +4,7 @@ import { OrgDomainApiServiceAbstraction } from "../../abstractions/organization-
 import { OrgDomainInternalServiceAbstraction } from "../../abstractions/organization-domain/org-domain.service.abstraction";
 import { OrganizationDomainSsoDetailsResponse } from "../../abstractions/organization-domain/responses/organization-domain-sso-details.response";
 import { OrganizationDomainResponse } from "../../abstractions/organization-domain/responses/organization-domain.response";
+import { VerifiedOrganizationDomainSsoDetailsResponse } from "../../abstractions/organization-domain/responses/verified-organization-domain-sso-details.response";
 
 import { OrganizationDomainSsoDetailsRequest } from "./requests/organization-domain-sso-details.request";
 import { OrganizationDomainRequest } from "./requests/organization-domain.request";
@@ -109,4 +110,18 @@ export class OrgDomainApiService implements OrgDomainApiServiceAbstraction {
 
     return response;
   }
+
+  async getVerifiedOrgDomainsByEmail(
+    email: string,
+  ): Promise<ListResponse<VerifiedOrganizationDomainSsoDetailsResponse>> {
+    const result = await this.apiService.send(
+      "POST",
+      `/organizations/domain/sso/verified`,
+      new OrganizationDomainSsoDetailsRequest(email),
+      false, // anonymous
+      true,
+    );
+
+    return new ListResponse(result, VerifiedOrganizationDomainSsoDetailsResponse);
+  }
 }

libs/common/src/billing/abstractions/account/account-billing-api.service.abstraction.ts

@@ -4,9 +4,6 @@ import {
 } from "@bitwarden/common/billing/models/response/billing.response";
 
 export class AccountBillingApiServiceAbstraction {
-  getBillingInvoices: (id: string, startAfter?: string) => Promise<BillingInvoiceResponse[]>;
-  getBillingTransactions: (
-    id: string,
-    startAfter?: string,
-  ) => Promise<BillingTransactionResponse[]>;
+  getBillingInvoices: (status?: string, startAfter?: string) => Promise<BillingInvoiceResponse[]>;
+  getBillingTransactions: (startAfter?: string) => Promise<BillingTransactionResponse[]>;
 }

libs/common/src/billing/abstractions/organizations/organization-billing-api.service.abstraction.ts

@@ -4,7 +4,12 @@ import {
 } from "@bitwarden/common/billing/models/response/billing.response";
 
 export class OrganizationBillingApiServiceAbstraction {
-  getBillingInvoices: (id: string, startAfter?: string) => Promise<BillingInvoiceResponse[]>;
+  getBillingInvoices: (
+    id: string,
+    status?: string,
+    startAfter?: string,
+  ) => Promise<BillingInvoiceResponse[]>;
+
   getBillingTransactions: (
     id: string,
     startAfter?: string,

libs/common/src/billing/services/account/account-billing-api.service.ts

@@ -8,11 +8,25 @@ import {
 export class AccountBillingApiService implements AccountBillingApiServiceAbstraction {
   constructor(private apiService: ApiService) {}
 
-  async getBillingInvoices(startAfter?: string): Promise<BillingInvoiceResponse[]> {
-    const queryParams = startAfter ? `?startAfter=${startAfter}` : "";
+  async getBillingInvoices(
+    status?: string,
+    startAfter?: string,
+  ): Promise<BillingInvoiceResponse[]> {
+    const params = new URLSearchParams();
+
+    if (status) {
+      params.append("status", status);
+    }
+
+    if (startAfter) {
+      params.append("startAfter", startAfter);
+    }
+
+    const queryString = `?${params.toString()}`;
+
     const r = await this.apiService.send(
       "GET",
-      `/accounts/billing/invoices${queryParams}`,
+      `/accounts/billing/invoices${queryString}`,
       null,
       true,
       true,

libs/common/src/billing/services/organization/organization-billing-api.service.ts

@@ -8,11 +8,26 @@ import {
 export class OrganizationBillingApiService implements OrganizationBillingApiServiceAbstraction {
   constructor(private apiService: ApiService) {}
 
-  async getBillingInvoices(id: string, startAfter?: string): Promise<BillingInvoiceResponse[]> {
-    const queryParams = startAfter ? `?startAfter=${startAfter}` : "";
+  async getBillingInvoices(
+    id: string,
+    status?: string,
+    startAfter?: string,
+  ): Promise<BillingInvoiceResponse[]> {
+    const params = new URLSearchParams();
+
+    if (status) {
+      params.append("status", status);
+    }
+
+    if (startAfter) {
+      params.append("startAfter", startAfter);
+    }
+
+    const queryString = `?${params.toString()}`;
+
     const r = await this.apiService.send(
       "GET",
-      `/organizations/${id}/billing/invoices${queryParams}`,
+      `/organizations/${id}/billing/invoices${queryString}`,
       null,
       true,
       true,

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

@@ -31,8 +31,10 @@ export enum FeatureFlag {
   NotificationBarAddLoginImprovements = "notification-bar-add-login-improvements",
   AC2476_DeprecateStripeSourcesAPI = "AC-2476-deprecate-stripe-sources-api",
   CipherKeyEncryption = "cipher-key-encryption",
+  VerifiedSsoDomainEndpoint = "pm-12337-refactor-sso-details-endpoint",
   PM11901_RefactorSelfHostingLicenseUploader = "PM-11901-refactor-self-hosting-license-uploader",
   Pm3478RefactorOrganizationUserApi = "pm-3478-refactor-organizationuser-api",
+  AccessIntelligence = "pm-13227-access-intelligence",
 }
 
 export type AllowedFeatureFlagTypes = boolean | number | string;
@@ -74,8 +76,10 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.NotificationBarAddLoginImprovements]: FALSE,
   [FeatureFlag.AC2476_DeprecateStripeSourcesAPI]: FALSE,
   [FeatureFlag.CipherKeyEncryption]: FALSE,
+  [FeatureFlag.VerifiedSsoDomainEndpoint]: FALSE,
   [FeatureFlag.PM11901_RefactorSelfHostingLicenseUploader]: FALSE,
   [FeatureFlag.Pm3478RefactorOrganizationUserApi]: FALSE,
+  [FeatureFlag.AccessIntelligence]: FALSE,
 } satisfies Record<FeatureFlag, AllowedFeatureFlagTypes>;
 
 export type DefaultFeatureFlagValueType = typeof DefaultFeatureFlagValue;

libs/components/src/tw-theme.css

@@ -1,9 +1,9 @@
 @import "./reset.css";
 
-/** 
-  Note that the value of the *-600 colors is currently equivalent to the value 
+/**
+  Note that the value of the *-600 colors is currently equivalent to the value
   of the *-500 variant of that color. This is a temporary change to make BW-42
-  updates easier. 
+  updates easier.
 
   TODO remove comment when the color palette portion of BW-42 is completed.
 */
@@ -196,7 +196,7 @@
 @import "./toast/toast.tokens.css";
 @import "./toast/toastr.css";
 
-/** 
+/**
  * tw-break-words does not work with table cells:
  * https://github.com/tailwindlabs/tailwindcss/issues/835
  */
@@ -204,7 +204,7 @@ td.tw-break-words {
   overflow-wrap: anywhere;
 }
 
-/** 
+/**
  * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
  * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
  */
@@ -213,7 +213,7 @@ summary.tw-list-none::-webkit-details-marker {
   display: none;
 }
 
-/** 
+/**
  * Arbitrary values can't be used with `text-align`:
  * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
  */
@@ -222,10 +222,11 @@ summary.tw-list-none::-webkit-details-marker {
 }
 
 /**
- * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
- * Remove once bootstrap is removed from our codebase.
- * CL-XYZ
+ * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
+ * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
+ * CL-483
  */
+.cdk-drag-preview,
 .cdk-overlay-container,
 .cdk-global-overlay-wrapper,
 .cdk-overlay-connected-position-bounding-box,

libs/tools/generator/components/readme.md

@@ -0,0 +1,40 @@
+<!-- FIXME: make this one or more storybooks -->
+
+## Using generator components
+
+The components within this module require the following import.
+
+```ts
+import { GeneratorModule } from "@bitwarden/generator-components";
+```
+
+The credential generator provides access to all generator features.
+
+```html
+<!-- Bound to active user -->
+<tools-credential-generator />
+
+<!-- Bound to a specific user -->
+<tools-credential-generator [user-id]="userId" />
+
+<!-- receive updates when a credential is generated.
+     `$event` is a `GeneratedCredential`.
+-->
+<tools-credential-generator (onGenerated)="eventHandler($event)" />
+```
+
+Specialized components are provided for username and password generation. These
+components support the same properties as the credential generator.
+
+```html
+<tools-password-generator [user-id]="userId" (onGenerated)="eventHandler($event)" />
+<tools-username-generator [user-id]="userId" (onGenerated)="eventHandler($event)" />
+```
+
+The emission behavior of `onGenerated` varies according to credential type. When
+a credential supports immediate execution, the component automatically generates
+a value and emits from `onGenerated`. An additional emission occurs each time the
+user changes a setting. Users may also request a regeneration.
+
+When a credential does not support immediate execution, then `onGenerated` fires
+only when the user clicks the "generate" button.

libs/tools/generator/components/src/catchall-settings.component.ts

@@ -10,15 +10,12 @@ import {
   Generators,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
 import { completeOnAccountSwitch } from "./util";
 
 /** Options group for catchall emails */
 @Component({
-  standalone: true,
   selector: "tools-catchall-settings",
   templateUrl: "catchall-settings.component.html",
-  imports: [DependenciesModule],
 })
 export class CatchallSettingsComponent implements OnInit, OnDestroy {
   /** Instantiates the component

libs/tools/generator/components/src/credential-generator.component.html

@@ -0,0 +1,77 @@
+<!-- FIXME: root$ should be powered using a reactive form -->
+<bit-toggle-group
+  fullWidth
+  class="tw-mb-4"
+  [selected]="(root$ | async).nav"
+  (selectedChange)="onRootChanged($event)"
+  attr.aria-label="{{ 'type' | i18n }}"
+>
+  <bit-toggle *ngFor="let option of rootOptions$ | async" [value]="option.value">
+    {{ option.label }}
+  </bit-toggle>
+</bit-toggle-group>
+
+<bit-card class="tw-flex tw-justify-between tw-mb-4">
+  <div class="tw-grow tw-flex tw-items-center">
+    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
+  </div>
+  <div class="tw-space-x-1">
+    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+      {{ "generatePassword" | i18n }}
+    </button>
+    <button
+      type="button"
+      bitIconButton="bwi-clone"
+      buttonType="main"
+      showToast
+      [appCopyClick]="value$ | async"
+    >
+      {{ "copyPassword" | i18n }}
+    </button>
+  </div>
+</bit-card>
+<tools-password-settings
+  class="tw-mt-6"
+  *ngIf="(algorithm$ | async)?.id === 'password'"
+  [userId]="userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<tools-passphrase-settings
+  class="tw-mt-6"
+  *ngIf="(algorithm$ | async)?.id === 'passphrase'"
+  [userId]="userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<bit-section *ngIf="(category$ | async) !== 'password'">
+  <bit-section-header>
+    <h6 bitTypography="h6">{{ "options" | i18n }}</h6>
+  </bit-section-header>
+  <div class="tw-mb-4">
+    <bit-card>
+      <form class="box" [formGroup]="username" class="tw-container">
+        <bit-form-field>
+          <bit-label>{{ "type" | i18n }}</bit-label>
+          <bit-select [items]="usernameOptions$ | async" formControlName="nav"> </bit-select>
+          <bit-hint *ngIf="!!(credentialTypeHint$ | async)">{{
+            credentialTypeHint$ | async
+          }}</bit-hint>
+        </bit-form-field>
+      </form>
+      <tools-catchall-settings
+        *ngIf="(algorithm$ | async)?.id === 'catchall'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+      <tools-subaddress-settings
+        *ngIf="(algorithm$ | async)?.id === 'subaddress'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+      <tools-username-settings
+        *ngIf="(algorithm$ | async)?.id === 'username'"
+        [userId]="userId$ | async"
+        (onUpdated)="generate$.next()"
+      />
+    </bit-card>
+  </div>
+</bit-section>

libs/tools/generator/components/src/credential-generator.component.ts

@@ -0,0 +1,293 @@
+import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
+import { FormBuilder } from "@angular/forms";
+import {
+  BehaviorSubject,
+  concat,
+  distinctUntilChanged,
+  filter,
+  map,
+  of,
+  ReplaySubject,
+  Subject,
+  switchMap,
+  takeUntil,
+  withLatestFrom,
+} from "rxjs";
+
+import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { UserId } from "@bitwarden/common/types/guid";
+import { Option } from "@bitwarden/components/src/select/option";
+import {
+  CredentialAlgorithm,
+  CredentialCategory,
+  CredentialGeneratorInfo,
+  CredentialGeneratorService,
+  GeneratedCredential,
+  Generators,
+  isEmailAlgorithm,
+  isPasswordAlgorithm,
+  isUsernameAlgorithm,
+  PasswordAlgorithm,
+} from "@bitwarden/generator-core";
+
+/** root category that drills into username and email categories */
+const IDENTIFIER = "identifier";
+/** options available for the top-level navigation */
+type RootNavValue = PasswordAlgorithm | typeof IDENTIFIER;
+
+@Component({
+  selector: "tools-credential-generator",
+  templateUrl: "credential-generator.component.html",
+})
+export class CredentialGeneratorComponent implements OnInit, OnDestroy {
+  constructor(
+    private generatorService: CredentialGeneratorService,
+    private i18nService: I18nService,
+    private accountService: AccountService,
+    private zone: NgZone,
+    private formBuilder: FormBuilder,
+  ) {}
+
+  /** Binds the component to a specific user's settings. When this input is not provided,
+   * the form binds to the active user
+   */
+  @Input()
+  userId: UserId | null;
+
+  /** Emits credentials created from a generation request. */
+  @Output()
+  readonly onGenerated = new EventEmitter<GeneratedCredential>();
+
+  protected root$ = new BehaviorSubject<{ nav: RootNavValue }>({
+    nav: null,
+  });
+
+  protected onRootChanged(nav: RootNavValue) {
+    // prevent subscription cycle
+    if (this.root$.value.nav !== nav) {
+      this.zone.run(() => {
+        this.root$.next({ nav });
+      });
+    }
+  }
+
+  protected username = this.formBuilder.group({
+    nav: [null as CredentialAlgorithm],
+  });
+
+  async ngOnInit() {
+    if (this.userId) {
+      this.userId$.next(this.userId);
+    } else {
+      this.accountService.activeAccount$
+        .pipe(
+          map((acct) => acct.id),
+          distinctUntilChanged(),
+          takeUntil(this.destroyed),
+        )
+        .subscribe(this.userId$);
+    }
+
+    this.generatorService
+      .algorithms$(["email", "username"], { userId$: this.userId$ })
+      .pipe(
+        map((algorithms) => this.toOptions(algorithms)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(this.usernameOptions$);
+
+    this.generatorService
+      .algorithms$("password", { userId$: this.userId$ })
+      .pipe(
+        map((algorithms) => {
+          const options = this.toOptions(algorithms) as Option<RootNavValue>[];
+          options.push({ value: IDENTIFIER, label: this.i18nService.t("username") });
+          return options;
+        }),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(this.rootOptions$);
+
+    this.algorithm$
+      .pipe(
+        map((a) => a?.descriptionKey && this.i18nService.t(a?.descriptionKey)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe((hint) => {
+        // update subjects within the angular zone so that the
+        // template bindings refresh immediately
+        this.zone.run(() => {
+          this.credentialTypeHint$.next(hint);
+        });
+      });
+
+    this.algorithm$
+      .pipe(
+        map((a) => a.category),
+        distinctUntilChanged(),
+        takeUntil(this.destroyed),
+      )
+      .subscribe((category) => {
+        // update subjects within the angular zone so that the
+        // template bindings refresh immediately
+        this.zone.run(() => {
+          this.category$.next(category);
+        });
+      });
+
+    // wire up the generator
+    this.algorithm$
+      .pipe(
+        switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe((generated) => {
+        // update subjects within the angular zone so that the
+        // template bindings refresh immediately
+        this.zone.run(() => {
+          this.onGenerated.next(generated);
+          this.value$.next(generated.credential);
+        });
+      });
+
+    // assume the last-visible generator algorithm is the user's preferred one
+    const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
+    this.root$
+      .pipe(
+        filter(({ nav }) => !!nav),
+        switchMap((root) => {
+          if (root.nav === IDENTIFIER) {
+            return concat(of(this.username.value), this.username.valueChanges);
+          } else {
+            return of(root as { nav: PasswordAlgorithm });
+          }
+        }),
+        filter(({ nav }) => !!nav),
+        withLatestFrom(preferences),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(([{ nav: algorithm }, preference]) => {
+        function setPreference(category: CredentialCategory) {
+          const p = preference[category];
+          p.algorithm = algorithm;
+          p.updated = new Date();
+        }
+
+        // `is*Algorithm` decides `algorithm`'s type, which flows into `setPreference`
+        if (isEmailAlgorithm(algorithm)) {
+          setPreference("email");
+        } else if (isUsernameAlgorithm(algorithm)) {
+          setPreference("username");
+        } else if (isPasswordAlgorithm(algorithm)) {
+          setPreference("password");
+        } else {
+          return;
+        }
+
+        preferences.next(preference);
+      });
+
+    // populate the form with the user's preferences to kick off interactivity
+    preferences.pipe(takeUntil(this.destroyed)).subscribe(({ email, username, password }) => {
+      // the last preference set by the user "wins"
+      const userNav = email.updated > username.updated ? email : username;
+      const rootNav: any = userNav.updated > password.updated ? IDENTIFIER : password.algorithm;
+      const credentialType = rootNav === IDENTIFIER ? userNav.algorithm : password.algorithm;
+
+      // update navigation; break subscription loop
+      this.onRootChanged(rootNav);
+      this.username.setValue({ nav: userNav.algorithm }, { emitEvent: false });
+
+      // load algorithm metadata
+      const algorithm = this.generatorService.algorithm(credentialType);
+
+      // update subjects within the angular zone so that the
+      // template bindings refresh immediately
+      this.zone.run(() => {
+        this.algorithm$.next(algorithm);
+      });
+    });
+
+    // generate on load unless the generator prohibits it
+    this.algorithm$
+      .pipe(
+        distinctUntilChanged((prev, next) => prev.id === next.id),
+        filter((a) => !a.onlyOnRequest),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(() => this.generate$.next());
+  }
+
+  private typeToGenerator$(type: CredentialAlgorithm) {
+    const dependencies = {
+      on$: this.generate$,
+      userId$: this.userId$,
+    };
+
+    switch (type) {
+      case "catchall":
+        return this.generatorService.generate$(Generators.catchall, dependencies);
+
+      case "subaddress":
+        return this.generatorService.generate$(Generators.subaddress, dependencies);
+
+      case "username":
+        return this.generatorService.generate$(Generators.username, dependencies);
+
+      case "password":
+        return this.generatorService.generate$(Generators.password, dependencies);
+
+      case "passphrase":
+        return this.generatorService.generate$(Generators.passphrase, dependencies);
+
+      default:
+        throw new Error(`Invalid generator type: "${type}"`);
+    }
+  }
+
+  /** Lists the credential types of the username algorithm box. */
+  protected usernameOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
+
+  /** Lists the top-level credential types supported by the component. */
+  protected rootOptions$ = new BehaviorSubject<Option<RootNavValue>[]>([]);
+
+  /** tracks the currently selected credential type */
+  protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
+
+  /** Emits hint key for the currently selected credential type */
+  protected credentialTypeHint$ = new ReplaySubject<string>(1);
+
+  /** tracks the currently selected credential category */
+  protected category$ = new ReplaySubject<string>(1);
+
+  /** Emits the last generated value. */
+  protected readonly value$ = new BehaviorSubject<string>("");
+
+  /** Emits when the userId changes */
+  protected readonly userId$ = new BehaviorSubject<UserId>(null);
+
+  /** Emits when a new credential is requested */
+  protected readonly generate$ = new Subject<void>();
+
+  private toOptions(algorithms: CredentialGeneratorInfo[]) {
+    const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
+      value: algorithm.id,
+      label: this.i18nService.t(algorithm.nameKey),
+    }));
+
+    return options;
+  }
+
+  private readonly destroyed = new Subject<void>();
+  ngOnDestroy() {
+    this.destroyed.complete();
+
+    // finalize subjects
+    this.generate$.complete();
+    this.value$.complete();
+
+    // finalize component bindings
+    this.onGenerated.complete();
+  }
+}

libs/tools/generator/components/src/generator.module.ts

@@ -10,8 +10,8 @@ import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.se
 import { StateProvider } from "@bitwarden/common/platform/state";
 import {
   CardComponent,
-  CheckboxModule,
   ColorPasswordModule,
+  CheckboxModule,
   FormFieldModule,
   IconButtonModule,
   InputModule,
@@ -27,16 +27,24 @@ import {
   Randomizer,
 } from "@bitwarden/generator-core";
 
+import { CatchallSettingsComponent } from "./catchall-settings.component";
+import { CredentialGeneratorComponent } from "./credential-generator.component";
+import { PassphraseSettingsComponent } from "./passphrase-settings.component";
+import { PasswordGeneratorComponent } from "./password-generator.component";
+import { PasswordSettingsComponent } from "./password-settings.component";
+import { SubaddressSettingsComponent } from "./subaddress-settings.component";
+import { UsernameGeneratorComponent } from "./username-generator.component";
+import { UsernameSettingsComponent } from "./username-settings.component";
+
 const RANDOMIZER = new SafeInjectionToken<Randomizer>("Randomizer");
 
 /** Shared module containing generator component dependencies */
 @NgModule({
-  imports: [CardComponent, SectionComponent, SectionHeaderComponent],
-  exports: [
+  imports: [
     CardComponent,
+    ColorPasswordModule,
     CheckboxModule,
     CommonModule,
-    ColorPasswordModule,
     FormFieldModule,
     IconButtonModule,
     InputModule,
@@ -60,8 +68,18 @@ const RANDOMIZER = new SafeInjectionToken<Randomizer>("Randomizer");
       deps: [RANDOMIZER, StateProvider, PolicyService],
     }),
   ],
-  declarations: [],
+  declarations: [
+    CatchallSettingsComponent,
+    CredentialGeneratorComponent,
+    SubaddressSettingsComponent,
+    UsernameSettingsComponent,
+    PasswordGeneratorComponent,
+    PasswordSettingsComponent,
+    PassphraseSettingsComponent,
+    UsernameGeneratorComponent,
+  ],
+  exports: [CredentialGeneratorComponent, PasswordGeneratorComponent, UsernameGeneratorComponent],
 })
-export class DependenciesModule {
+export class GeneratorModule {
   constructor() {}
 }

libs/tools/generator/components/src/index.ts

@@ -1,9 +1,3 @@
-export { CatchallSettingsComponent } from "./catchall-settings.component";
 export { CredentialGeneratorHistoryComponent } from "./credential-generator-history.component";
 export { EmptyCredentialHistoryComponent } from "./empty-credential-history.component";
-export { PassphraseSettingsComponent } from "./passphrase-settings.component";
-export { PasswordSettingsComponent } from "./password-settings.component";
-export { PasswordGeneratorComponent } from "./password-generator.component";
-export { SubaddressSettingsComponent } from "./subaddress-settings.component";
-export { UsernameGeneratorComponent } from "./username-generator.component";
-export { UsernameSettingsComponent } from "./username-settings.component";
+export { GeneratorModule } from "./generator.module";

libs/tools/generator/components/src/passphrase-settings.component.ts

@@ -10,7 +10,6 @@ import {
   PassphraseGenerationOptions,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
 import { completeOnAccountSwitch, toValidators } from "./util";
 
 const Controls = Object.freeze({
@@ -22,10 +21,8 @@ const Controls = Object.freeze({
 
 /** Options group for passphrases */
 @Component({
-  standalone: true,
   selector: "tools-passphrase-settings",
   templateUrl: "passphrase-settings.component.html",
-  imports: [DependenciesModule],
 })
 export class PassphraseSettingsComponent implements OnInit, OnDestroy {
   /** Instantiates the component

libs/tools/generator/components/src/password-generator.component.html

@@ -5,11 +5,8 @@
   (selectedChange)="onCredentialTypeChanged($event)"
   attr.aria-label="{{ 'type' | i18n }}"
 >
-  <bit-toggle value="password">
-    {{ "password" | i18n }}
-  </bit-toggle>
-  <bit-toggle value="passphrase">
-    {{ "passphrase" | i18n }}
+  <bit-toggle *ngFor="let option of passwordOptions$ | async" [value]="option.value">
+    {{ option.label }}
   </bit-toggle>
 </bit-toggle-group>
 <bit-card class="tw-flex tw-justify-between tw-mb-4">
@@ -24,6 +21,7 @@
       type="button"
       bitIconButton="bwi-clone"
       buttonType="main"
+      showToast
       [appCopyClick]="value$ | async"
     >
       {{ "copyPassword" | i18n }}
@@ -32,13 +30,13 @@
 </bit-card>
 <tools-password-settings
   class="tw-mt-6"
-  *ngIf="(credentialType$ | async) === 'password'"
+  *ngIf="(algorithm$ | async)?.id === 'password'"
   [userId]="this.userId$ | async"
   (onUpdated)="generate$.next()"
 />
 <tools-passphrase-settings
   class="tw-mt-6"
-  *ngIf="(credentialType$ | async) === 'passphrase'"
+  *ngIf="(algorithm$ | async)?.id === 'passphrase'"
   [userId]="this.userId$ | async"
   (onUpdated)="generate$.next()"
 />

libs/tools/generator/components/src/password-generator.component.ts

@@ -1,29 +1,39 @@
 import { Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output } from "@angular/core";
-import { BehaviorSubject, distinctUntilChanged, map, Subject, switchMap, takeUntil } from "rxjs";
+import {
+  BehaviorSubject,
+  distinctUntilChanged,
+  filter,
+  map,
+  ReplaySubject,
+  Subject,
+  switchMap,
+  takeUntil,
+  withLatestFrom,
+} from "rxjs";
 
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { UserId } from "@bitwarden/common/types/guid";
+import { Option } from "@bitwarden/components/src/select/option";
 import {
   CredentialGeneratorService,
   Generators,
   PasswordAlgorithm,
   GeneratedCredential,
+  CredentialGeneratorInfo,
+  CredentialAlgorithm,
+  isPasswordAlgorithm,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
-import { PassphraseSettingsComponent } from "./passphrase-settings.component";
-import { PasswordSettingsComponent } from "./password-settings.component";
-
 /** Options group for passwords */
 @Component({
-  standalone: true,
   selector: "tools-password-generator",
   templateUrl: "password-generator.component.html",
-  imports: [DependenciesModule, PasswordSettingsComponent, PassphraseSettingsComponent],
 })
 export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   constructor(
     private generatorService: CredentialGeneratorService,
+    private i18nService: I18nService,
     private accountService: AccountService,
     private zone: NgZone,
   ) {}
@@ -36,7 +46,7 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
   userId: UserId | null;
 
   /** tracks the currently selected credential type */
-  protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>("password");
+  protected credentialType$ = new BehaviorSubject<PasswordAlgorithm>(null);
 
   /** Emits the last generated value. */
   protected readonly value$ = new BehaviorSubject<string>("");
@@ -51,9 +61,11 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
    * @param type the new credential type
    */
   protected onCredentialTypeChanged(type: PasswordAlgorithm) {
+    // break subscription cycle
     if (this.credentialType$.value !== type) {
-      this.credentialType$.next(type);
-      this.generate$.next();
+      this.zone.run(() => {
+        this.credentialType$.next(type);
+      });
     }
   }
 
@@ -74,9 +86,18 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
         .subscribe(this.userId$);
     }
 
-    this.credentialType$
+    this.generatorService
+      .algorithms$("password", { userId$: this.userId$ })
       .pipe(
-        switchMap((type) => this.typeToGenerator$(type)),
+        map((algorithms) => this.toOptions(algorithms)),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(this.passwordOptions$);
+
+    // wire up the generator
+    this.algorithm$
+      .pipe(
+        switchMap((algorithm) => this.typeToGenerator$(algorithm.id)),
         takeUntil(this.destroyed),
       )
       .subscribe((generated) => {
@@ -87,9 +108,52 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
           this.value$.next(generated.credential);
         });
       });
+
+    // assume the last-visible generator algorithm is the user's preferred one
+    const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
+    this.credentialType$
+      .pipe(
+        filter((type) => !!type),
+        withLatestFrom(preferences),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(([algorithm, preference]) => {
+        if (isPasswordAlgorithm(algorithm)) {
+          preference.password.algorithm = algorithm;
+          preference.password.updated = new Date();
+        } else {
+          return;
+        }
+
+        preferences.next(preference);
+      });
+
+    // populate the form with the user's preferences to kick off interactivity
+    preferences.pipe(takeUntil(this.destroyed)).subscribe(({ password }) => {
+      // update navigation
+      this.onCredentialTypeChanged(password.algorithm);
+
+      // load algorithm metadata
+      const algorithm = this.generatorService.algorithm(password.algorithm);
+
+      // update subjects within the angular zone so that the
+      // template bindings refresh immediately
+      this.zone.run(() => {
+        this.algorithm$.next(algorithm);
+      });
+    });
+
+    // generate on load unless the generator prohibits it
+    this.algorithm$
+      .pipe(
+        distinctUntilChanged((prev, next) => prev.id === next.id),
+        filter((a) => !a.onlyOnRequest),
+        takeUntil(this.destroyed),
+      )
+      .subscribe(() => this.generate$.next());
   }
 
-  private typeToGenerator$(type: PasswordAlgorithm) {
+  private typeToGenerator$(type: CredentialAlgorithm) {
     const dependencies = {
       on$: this.generate$,
       userId$: this.userId$,
@@ -106,6 +170,21 @@ export class PasswordGeneratorComponent implements OnInit, OnDestroy {
     }
   }
 
+  /** Lists the credential types supported by the component. */
+  protected passwordOptions$ = new BehaviorSubject<Option<CredentialAlgorithm>[]>([]);
+
+  /** tracks the currently selected credential type */
+  protected algorithm$ = new ReplaySubject<CredentialGeneratorInfo>(1);
+
+  private toOptions(algorithms: CredentialGeneratorInfo[]) {
+    const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
+      value: algorithm.id,
+      label: this.i18nService.t(algorithm.nameKey),
+    }));
+
+    return options;
+  }
+
   private readonly destroyed = new Subject<void>();
   ngOnDestroy(): void {
     // tear down subscriptions

libs/tools/generator/components/src/password-settings.component.ts

@@ -10,7 +10,6 @@ import {
   PasswordGenerationOptions,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
 import { completeOnAccountSwitch, toValidators } from "./util";
 
 const Controls = Object.freeze({
@@ -26,10 +25,8 @@ const Controls = Object.freeze({
 
 /** Options group for passwords */
 @Component({
-  standalone: true,
   selector: "tools-password-settings",
   templateUrl: "password-settings.component.html",
-  imports: [DependenciesModule],
 })
 export class PasswordSettingsComponent implements OnInit, OnDestroy {
   /** Instantiates the component

libs/tools/generator/components/src/subaddress-settings.component.ts

@@ -10,15 +10,12 @@ import {
   SubaddressGenerationOptions,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
 import { completeOnAccountSwitch } from "./util";
 
 /** Options group for plus-addressed emails */
 @Component({
-  standalone: true,
   selector: "tools-subaddress-settings",
   templateUrl: "subaddress-settings.component.html",
-  imports: [DependenciesModule],
 })
 export class SubaddressSettingsComponent implements OnInit, OnDestroy {
   /** Instantiates the component

libs/tools/generator/components/src/username-generator.component.html

@@ -10,6 +10,7 @@
       type="button"
       bitIconButton="bwi-clone"
       buttonType="main"
+      showToast
       [appCopyClick]="value$ | async"
     >
       {{ "copyPassword" | i18n }}

libs/tools/generator/components/src/username-generator.component.ts

@@ -26,23 +26,10 @@ import {
   isUsernameAlgorithm,
 } from "@bitwarden/generator-core";
 
-import { CatchallSettingsComponent } from "./catchall-settings.component";
-import { DependenciesModule } from "./dependencies";
-import { SubaddressSettingsComponent } from "./subaddress-settings.component";
-import { UsernameSettingsComponent } from "./username-settings.component";
-import { completeOnAccountSwitch } from "./util";
-
 /** Component that generates usernames and emails */
 @Component({
-  standalone: true,
   selector: "tools-username-generator",
   templateUrl: "username-generator.component.html",
-  imports: [
-    DependenciesModule,
-    CatchallSettingsComponent,
-    SubaddressSettingsComponent,
-    UsernameSettingsComponent,
-  ],
 })
 export class UsernameGeneratorComponent implements OnInit, OnDestroy {
   /** Instantiates the username generator
@@ -72,14 +59,20 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
 
   /** Tracks the selected generation algorithm */
   protected credential = this.formBuilder.group({
-    type: ["username" as CredentialAlgorithm],
+    type: [null as CredentialAlgorithm],
   });
 
   async ngOnInit() {
     if (this.userId) {
       this.userId$.next(this.userId);
     } else {
-      this.singleUserId$().pipe(takeUntil(this.destroyed)).subscribe(this.userId$);
+      this.accountService.activeAccount$
+        .pipe(
+          map((acct) => acct.id),
+          distinctUntilChanged(),
+          takeUntil(this.destroyed),
+        )
+        .subscribe(this.userId$);
     }
 
     this.generatorService
@@ -121,7 +114,11 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
     // assume the last-visible generator algorithm is the user's preferred one
     const preferences = await this.generatorService.preferences({ singleUserId$: this.userId$ });
     this.credential.valueChanges
-      .pipe(withLatestFrom(preferences), takeUntil(this.destroyed))
+      .pipe(
+        filter(({ type }) => !!type),
+        withLatestFrom(preferences),
+        takeUntil(this.destroyed),
+      )
       .subscribe(([{ type }, preference]) => {
         if (isEmailAlgorithm(type)) {
           preference.email.algorithm = type;
@@ -202,19 +199,6 @@ export class UsernameGeneratorComponent implements OnInit, OnDestroy {
   /** Emits when a new credential is requested */
   protected readonly generate$ = new Subject<void>();
 
-  private singleUserId$() {
-    // FIXME: this branch should probably scan for the user and make sure
-    // the account is unlocked
-    if (this.userId) {
-      return new BehaviorSubject(this.userId as UserId).asObservable();
-    }
-
-    return this.accountService.activeAccount$.pipe(
-      completeOnAccountSwitch(),
-      takeUntil(this.destroyed),
-    );
-  }
-
   private toOptions(algorithms: CredentialGeneratorInfo[]) {
     const options: Option<CredentialAlgorithm>[] = algorithms.map((algorithm) => ({
       value: algorithm.id,

libs/tools/generator/components/src/username-settings.component.ts

@@ -10,15 +10,12 @@ import {
   Generators,
 } from "@bitwarden/generator-core";
 
-import { DependenciesModule } from "./dependencies";
 import { completeOnAccountSwitch } from "./util";
 
 /** Options group for usernames */
 @Component({
-  standalone: true,
   selector: "tools-username-settings",
   templateUrl: "username-settings.component.html",
-  imports: [DependenciesModule],
 })
 export class UsernameSettingsComponent implements OnInit, OnDestroy {
   /** Instantiates the component

libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html

@@ -12,8 +12,8 @@
       >
     </bit-form-field>
     <bit-form-field>
-      <bit-label *ngIf="!hasPassword">{{ "password" | i18n }}</bit-label>
-      <bit-label *ngIf="hasPassword">{{ "newPassword" | i18n }}</bit-label>
+      <bit-label *ngIf="!originalSendView || !hasPassword">{{ "password" | i18n }}</bit-label>
+      <bit-label *ngIf="originalSendView && hasPassword">{{ "newPassword" | i18n }}</bit-label>
       <input bitInput type="password" formControlName="password" />
       <button
         data-testid="toggle-visibility-for-password"

libs/vault/src/cipher-form/cipher-form.stories.ts

@@ -15,7 +15,9 @@ import { EventCollectionService } from "@bitwarden/common/abstractions/event/eve
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { ClientType } from "@bitwarden/common/enums";
 import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { Cipher } from "@bitwarden/common/vault/models/domain/cipher";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
@@ -175,6 +177,12 @@ export default {
             collect: () => Promise.resolve(),
           },
         },
+        {
+          provide: PlatformUtilsService,
+          useValue: {
+            getClientType: () => ClientType.Browser,
+          },
+        },
       ],
     }),
     componentWrapperDecorator(

libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.spec.ts

@@ -7,6 +7,7 @@ import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/s
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
 import { UriMatchStrategy } from "@bitwarden/common/models/domain/domain-service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
@@ -23,10 +24,12 @@ describe("AutofillOptionsComponent", () => {
   let liveAnnouncer: MockProxy<LiveAnnouncer>;
   let domainSettingsService: MockProxy<DomainSettingsService>;
   let autofillSettingsService: MockProxy<AutofillSettingsServiceAbstraction>;
+  let platformUtilsService: MockProxy<PlatformUtilsService>;
 
   beforeEach(async () => {
     cipherFormContainer = mock<CipherFormContainer>();
     liveAnnouncer = mock<LiveAnnouncer>();
+    platformUtilsService = mock<PlatformUtilsService>();
     domainSettingsService = mock<DomainSettingsService>();
     domainSettingsService.defaultUriMatchStrategy$ = new BehaviorSubject(null);
 
@@ -45,6 +48,7 @@ describe("AutofillOptionsComponent", () => {
         { provide: LiveAnnouncer, useValue: liveAnnouncer },
         { provide: DomainSettingsService, useValue: domainSettingsService },
         { provide: AutofillSettingsServiceAbstraction, useValue: autofillSettingsService },
+        { provide: PlatformUtilsService, useValue: platformUtilsService },
       ],
     }).compileComponents();
 

libs/vault/src/cipher-form/components/autofill-options/autofill-options.component.ts

@@ -3,13 +3,15 @@ import { AsyncPipe, NgForOf, NgIf } from "@angular/common";
 import { Component, OnInit, QueryList, ViewChildren } from "@angular/core";
 import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { FormBuilder, ReactiveFormsModule } from "@angular/forms";
-import { Subject, switchMap, take } from "rxjs";
+import { filter, Subject, switchMap, take } from "rxjs";
 
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { ClientType } from "@bitwarden/common/enums";
 import { UriMatchStrategySetting } from "@bitwarden/common/models/domain/domain-service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { LoginUriView } from "@bitwarden/common/vault/models/view/login-uri.view";
 import { LoginView } from "@bitwarden/common/vault/models/view/login.view";
 import {
@@ -69,7 +71,10 @@ export class AutofillOptionsComponent implements OnInit {
     return this.autofillOptionsForm.controls.uris.controls;
   }
 
-  protected defaultMatchDetection$ = this.domainSettingsService.defaultUriMatchStrategy$;
+  protected defaultMatchDetection$ = this.domainSettingsService.defaultUriMatchStrategy$.pipe(
+    // The default match detection should only be shown when used on the browser
+    filter(() => this.platformUtilsService.getClientType() == ClientType.Browser),
+  );
   protected autofillOnPageLoadEnabled$ = this.autofillSettingsService.autofillOnPageLoad$;
 
   protected autofillOptions: { label: string; value: boolean | null }[] = [
@@ -90,6 +95,7 @@ export class AutofillOptionsComponent implements OnInit {
     private liveAnnouncer: LiveAnnouncer,
     private domainSettingsService: DomainSettingsService,
     private autofillSettingsService: AutofillSettingsServiceAbstraction,
+    private platformUtilsService: PlatformUtilsService,
   ) {
     this.cipherFormContainer.registerChildForm("autoFillOptions", this.autofillOptionsForm);
 

libs/vault/src/cipher-form/components/autofill-options/uri-option.component.spec.ts

@@ -51,6 +51,13 @@ describe("UriOptionComponent", () => {
     expect(component).toBeTruthy();
   });
 
+  it("should not update the default uri match strategy label when it is null", () => {
+    component.defaultMatchDetection = null;
+    fixture.detectChanges();
+
+    expect(component["uriMatchOptions"][0].label).toBe("default");
+  });
+
   it("should update the default uri match strategy label", () => {
     component.defaultMatchDetection = UriMatchStrategy.Exact;
     fixture.detectChanges();

libs/vault/src/cipher-form/components/autofill-options/uri-option.component.ts

@@ -83,6 +83,11 @@ export class UriOptionComponent implements ControlValueAccessor {
    */
   @Input({ required: true })
   set defaultMatchDetection(value: UriMatchStrategySetting) {
+    // The default selection has a value of `null` avoid showing "Default (Default)"
+    if (!value) {
+      return;
+    }
+
     this.uriMatchOptions[0].label = this.i18nService.t(
       "defaultLabel",
       this.uriMatchOptions.find((o) => o.value === value)?.label,

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.spec.ts

@@ -3,10 +3,7 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { By } from "@angular/platform-browser";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
-import {
-  PasswordGeneratorComponent,
-  UsernameGeneratorComponent,
-} from "@bitwarden/generator-components";
+import { GeneratorModule } from "@bitwarden/generator-components";
 import { CipherFormGeneratorComponent } from "@bitwarden/vault";
 
 @Component({
@@ -37,7 +34,7 @@ describe("CipherFormGeneratorComponent", () => {
       providers: [{ provide: I18nService, useValue: { t: (key: string) => key } }],
     })
       .overrideComponent(CipherFormGeneratorComponent, {
-        remove: { imports: [PasswordGeneratorComponent, UsernameGeneratorComponent] },
+        remove: { imports: [GeneratorModule] },
         add: { imports: [MockPasswordGeneratorComponent, MockUsernameGeneratorComponent] },
       })
       .compileComponents();

libs/vault/src/cipher-form/components/cipher-generator/cipher-form-generator.component.ts

@@ -1,11 +1,7 @@
 import { CommonModule } from "@angular/common";
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
-import { SectionComponent } from "@bitwarden/components";
-import {
-  PasswordGeneratorComponent,
-  UsernameGeneratorComponent,
-} from "@bitwarden/generator-components";
+import { GeneratorModule } from "@bitwarden/generator-components";
 import { GeneratedCredential } from "@bitwarden/generator-core";
 
 /**
@@ -16,7 +12,7 @@ import { GeneratedCredential } from "@bitwarden/generator-core";
   selector: "vault-cipher-form-generator",
   templateUrl: "./cipher-form-generator.component.html",
   standalone: true,
-  imports: [CommonModule, SectionComponent, PasswordGeneratorComponent, UsernameGeneratorComponent],
+  imports: [CommonModule, GeneratorModule],
 })
 export class CipherFormGeneratorComponent {
   /**

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -36,15 +36,6 @@
         aria-readonly="true"
         data-testid="login-password"
       />
-      <button
-        *ngIf="cipher.viewPassword"
-        bitSuffix
-        type="button"
-        bitIconButton
-        bitPasswordInputToggle
-        data-testid="toggle-password"
-        (toggledChange)="pwToggleValue($event)"
-      ></button>
       <button
         *ngIf="cipher.viewPassword && passwordRevealed"
         bitIconButton="bwi-numbered-list"
@@ -56,6 +47,15 @@
         appStopClick
         (click)="togglePasswordCount()"
       ></button>
+      <button
+        *ngIf="cipher.viewPassword"
+        bitSuffix
+        type="button"
+        bitIconButton
+        bitPasswordInputToggle
+        data-testid="toggle-password"
+        (toggledChange)="pwToggleValue($event)"
+      ></button>
       <button
         *ngIf="cipher.viewPassword"
         bitIconButton="bwi-clone"