[PM-8279] password generation component (#10805)

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

@@ -0,0 +1,44 @@
+<bit-toggle-group
+  fullWidth
+  class="tw-mb-4"
+  [selected]="credentialType$ | async"
+  (selectedChange)="onCredentialTypeChanged($event)"
+  attr.aria-label="{{ 'type' | i18n }}"
+>
+  <bit-toggle value="password">
+    {{ "password" | i18n }}
+  </bit-toggle>
+  <bit-toggle value="passphrase">
+    {{ "passphrase" | i18n }}
+  </bit-toggle>
+</bit-toggle-group>
+<bit-card class="tw-flex tw-justify-between tw-mb-4">
+  <div class="tw-grow">
+    <bit-color-password class="tw-font-mono" [password]="value$ | async"></bit-color-password>
+  </div>
+  <div class="tw-space-x-1 tw-flex-none tw-w-4">
+    <button type="button" bitIconButton="bwi-generate" buttonType="main" (click)="generate$.next()">
+      {{ "generatePassword" | i18n }}
+    </button>
+    <button
+      type="button"
+      bitIconButton="bwi-clone"
+      buttonType="main"
+      [appCopyClick]="value$ | async"
+    >
+      {{ "copyPassword" | i18n }}
+    </button>
+  </div>
+</bit-card>
+<bit-password-settings
+  class="tw-mt-6"
+  *ngIf="(credentialType$ | async) === 'password'"
+  [userId]="this.userId$ | async"
+  (onUpdated)="generate$.next()"
+/>
+<bit-passphrase-settings
+  class="tw-mt-6"
+  *ngIf="(credentialType$ | async) === 'passphrase'"
+  [userId]="this.userId$ | async"
+  (onUpdated)="generate$.next()"
+/>