[PM-10439] Vault generator components (#11350)

* add password/username generator strings to web app

* remove JSLibServicesModule from generator dependencies

* integrate username and password generators into browser extension

* integrate username and password generators into web app

* move Jslib order back

* remove margin from within the generator components

* add alternative background to web generator dialog

* remove unneeded margin from username generator

* remove disable margin from div

* Revert "remove unneeded margin from username generator"

This reverts commit ae3067e3f2.

* remove CSS to alter internal margins of the generator components

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.html

@@ -1,4 +1,4 @@
-<bit-dialog dialogSize="default">
+<bit-dialog dialogSize="default" background="alt">
   <span bitDialogTitle>
     {{ title }}
   </span>

apps/web/src/app/vault/components/web-generator-dialog/web-generator-dialog.component.spec.ts

@@ -1,15 +1,11 @@
-import { DIALOG_DATA, DialogRef } from "@angular/cdk/dialog";
+import { DialogRef, DIALOG_DATA } from "@angular/cdk/dialog";
+import { Component, EventEmitter, Input, Output } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { NoopAnimationsModule } from "@angular/platform-browser/animations";
 import { mock, MockProxy } from "jest-mock-extended";
-import { BehaviorSubject } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import {
-  PasswordGenerationServiceAbstraction,
-  UsernameGenerationServiceAbstraction,
-} from "@bitwarden/generator-legacy";
 import { CipherFormGeneratorComponent } from "@bitwarden/vault";
 
 import {
@@ -18,32 +14,26 @@ import {
   WebVaultGeneratorDialogParams,
 } from "./web-generator-dialog.component";
 
+@Component({
+  selector: "vault-cipher-form-generator",
+  template: "",
+  standalone: true,
+})
+class MockCipherFormGenerator {
+  @Input() type: "password" | "username";
+  @Output() valueGenerated = new EventEmitter<string>();
+}
+
 describe("WebVaultGeneratorDialogComponent", () => {
   let component: WebVaultGeneratorDialogComponent;
   let fixture: ComponentFixture<WebVaultGeneratorDialogComponent>;
 
   let dialogRef: MockProxy<DialogRef<any>>;
   let mockI18nService: MockProxy<I18nService>;
-  let passwordOptionsSubject: BehaviorSubject<any>;
-  let usernameOptionsSubject: BehaviorSubject<any>;
-  let mockPasswordGenerationService: MockProxy<PasswordGenerationServiceAbstraction>;
-  let mockUsernameGenerationService: MockProxy<UsernameGenerationServiceAbstraction>;
 
   beforeEach(async () => {
     dialogRef = mock<DialogRef<any>>();
     mockI18nService = mock<I18nService>();
-    passwordOptionsSubject = new BehaviorSubject([{ type: "password" }]);
-    usernameOptionsSubject = new BehaviorSubject([{ type: "username" }]);
-
-    mockPasswordGenerationService = mock<PasswordGenerationServiceAbstraction>();
-    mockPasswordGenerationService.getOptions$.mockReturnValue(
-      passwordOptionsSubject.asObservable(),
-    );
-
-    mockUsernameGenerationService = mock<UsernameGenerationServiceAbstraction>();
-    mockUsernameGenerationService.getOptions$.mockReturnValue(
-      usernameOptionsSubject.asObservable(),
-    );
 
     const mockDialogData: WebVaultGeneratorDialogParams = { type: "password" };
 
@@ -66,23 +56,13 @@ describe("WebVaultGeneratorDialogComponent", () => {
           provide: PlatformUtilsService,
           useValue: mock<PlatformUtilsService>(),
         },
-        {
-          provide: PasswordGenerationServiceAbstraction,
-          useValue: mockPasswordGenerationService,
-        },
-        {
-          provide: UsernameGenerationServiceAbstraction,
-          useValue: mockUsernameGenerationService,
-        },
-        {
-          provide: CipherFormGeneratorComponent,
-          useValue: {
-            passwordOptions$: passwordOptionsSubject.asObservable(),
-            usernameOptions$: usernameOptionsSubject.asObservable(),
-          },
-        },
       ],
-    }).compileComponents();
+    })
+      .overrideComponent(WebVaultGeneratorDialogComponent, {
+        remove: { imports: [CipherFormGeneratorComponent] },
+        add: { imports: [MockCipherFormGenerator] },
+      })
+      .compileComponents();
 
     fixture = TestBed.createComponent(WebVaultGeneratorDialogComponent);
     component = fixture.componentInstance;

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

@@ -9266,6 +9266,42 @@
   "editAccess": {
     "message": "Edit access"
   },
+  "uppercaseDescription": {
+    "message": "Include uppercase characters",
+    "description": "Tooltip for the password generator uppercase character checkbox"
+  },
+  "uppercaseLabel": {
+    "message": "A-Z",
+    "description": "Label for the password generator uppercase character checkbox"
+  },
+  "lowercaseDescription": {
+    "message": "Include lowercase characters",
+    "description": "Full description for the password generator lowercase character checkbox"
+  },
+  "lowercaseLabel": {
+    "message": "a-z",
+    "description": "Label for the password generator lowercase character checkbox"
+  },
+  "numbersDescription": {
+    "message": "Include numbers",
+    "description": "Full description for the password generator numbers checkbox"
+  },
+  "numbersLabel": {
+    "message": "0-9",
+    "description": "Label for the password generator numbers checkbox"
+  },
+  "specialCharactersDescription": {
+    "message": "Include special characters",
+    "description": "Full description for the password generator special characters checkbox"
+  },
+  "specialCharactersLabel": {
+    "message": "!@#$%^&*",
+    "description": "Label for the password generator special characters checkbox"
+  },
+  "avoidAmbiguous": {
+    "message": "Avoid ambiguous characters",
+    "description": "Label for the avoid ambiguous characters checkbox."
+  },
   "addAttachment": {
     "message": "Add attachment"
   },