generator updates (#1575)

* update generator

* update css

* add link to help article

* update jslib

* fix oss module and user type tip icon

* update jslib

* Revert "update jslib"

This reverts commit b2b13ace5e55401294ea83aaac656cba62fe3614.

* revert jslib update

jslib

@@ -1 +1 @@
-Subproject commit 47473b7edebaf1cc48d459a8fcfc8edfddf359f1
+Subproject commit e595c0548ed1a481dbd024ec66975e3a453bd471

src/app/oss-routing.module.ts

@@ -64,8 +64,8 @@ import { TwoFactorSetupComponent } from "./settings/two-factor-setup.component";
 import { UserBillingComponent } from "./settings/user-billing.component";
 import { UserSubscriptionComponent } from "./settings/user-subscription.component";
 import { ExportComponent } from "./tools/export.component";
+import { GeneratorComponent } from "./tools/generator.component";
 import { ImportComponent } from "./tools/import.component";
-import { PasswordGeneratorComponent } from "./tools/password-generator.component";
 import { ToolsComponent } from "./tools/tools.component";
 import { VaultComponent } from "./vault/vault.component";
 
@@ -232,7 +232,7 @@ const routes: Routes = [
           { path: "export", component: ExportComponent, data: { titleId: "exportVault" } },
           {
             path: "generator",
-            component: PasswordGeneratorComponent,
+            component: GeneratorComponent,
             data: { titleId: "generator" },
           },
         ],

src/app/oss.module.ts

@@ -197,9 +197,9 @@ import { UserSubscriptionComponent } from "./settings/user-subscription.componen
 import { VaultTimeoutInputComponent } from "./settings/vault-timeout-input.component";
 import { VerifyEmailComponent } from "./settings/verify-email.component";
 import { ExportComponent } from "./tools/export.component";
+import { GeneratorComponent } from "./tools/generator.component";
 import { ImportComponent } from "./tools/import.component";
 import { PasswordGeneratorHistoryComponent } from "./tools/password-generator-history.component";
-import { PasswordGeneratorComponent } from "./tools/password-generator.component";
 import { ToolsComponent } from "./tools/tools.component";
 import { AddEditCustomFieldsComponent } from "./vault/add-edit-custom-fields.component";
 import { AddEditComponent } from "./vault/add-edit.component";
@@ -378,7 +378,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     OrgUserGroupsComponent,
     OrgVaultComponent,
     OrgWeakPasswordsReportComponent,
-    PasswordGeneratorComponent,
+    GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordGeneratorPolicyComponent,
     PasswordRepromptComponent,

src/app/tools/generator.component.html

@@ -232,7 +232,18 @@
 </ng-container>
 <ng-container *ngIf="type === 'username'">
   <div class="form-group">
-    <label class="d-block">{{ "usernameType" | i18n }}</label>
+    <div class="d-block">
+      <label>{{ "usernameType" | i18n }}</label>
+      <a
+        class="ml-auto"
+        href="https://bitwarden.com/help/generator/#username-types"
+        target="_blank"
+        rel="noopener"
+        appA11yTitle="{{ 'learnMore' | i18n }}"
+      >
+        <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+      </a>
+    </div>
     <div class="form-check" *ngFor="let o of usernameTypeOptions">
       <input
         class="form-check-input"

src/app/tools/generator.component.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, ViewContainerRef } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
-import { PasswordGeneratorComponent as BasePasswordGeneratorComponent } from "jslib-angular/components/password-generator.component";
+import { GeneratorComponent as BaseGeneratorComponent } from "jslib-angular/components/generator.component";
 import { ModalService } from "jslib-angular/services/modal.service";
 import { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
@@ -12,10 +12,10 @@ import { UsernameGenerationService } from "jslib-common/abstractions/usernameGen
 import { PasswordGeneratorHistoryComponent } from "./password-generator-history.component";
 
 @Component({
-  selector: "app-password-generator",
-  templateUrl: "password-generator.component.html",
+  selector: "app-generator",
+  templateUrl: "generator.component.html",
 })
-export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
+export class GeneratorComponent extends BaseGeneratorComponent {
   @ViewChild("historyTemplate", { read: ViewContainerRef, static: true })
   historyModalRef: ViewContainerRef;
 

src/scss/pages.scss

@@ -109,7 +109,7 @@ app-org-vault-groupings,
   }
 }
 
-app-password-generator {
+app-generator {
   #lengthRange {
     width: 100%;
   }