generator updates (#1469)

* generator updates

* update jslib

jslib

@@ -1 +1 @@
-Subproject commit 56f5aba11ee7faadd2573df145e0387569641672
+Subproject commit 4d58200ee90fb4fafa5d4f9f4c957654d4da306d

src/app/app.component.ts

@@ -43,8 +43,8 @@ import { PremiumComponent } from "./accounts/premium.component";
 import { SettingsComponent } from "./accounts/settings.component";
 import { ExportComponent } from "./vault/export.component";
 import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
+import { GeneratorComponent } from "./vault/generator.component";
 import { PasswordGeneratorHistoryComponent } from "./vault/password-generator-history.component";
-import { PasswordGeneratorComponent } from "./vault/password-generator.component";
 
 const BroadcasterSubscriptionId = "AppComponent";
 const IdleTimeout = 60000 * 10; // 10 minutes
@@ -65,7 +65,7 @@ const systemTimeoutOptions = {
     <ng-template #passwordHistory></ng-template>
     <ng-template #appFolderAddEdit></ng-template>
     <ng-template #exportVault></ng-template>
-    <ng-template #appPasswordGenerator></ng-template>
+    <ng-template #appGenerator></ng-template>
     <app-header></app-header>
     <div id="container">
       <div class="loading" *ngIf="loading">
@@ -84,8 +84,8 @@ export class AppComponent implements OnInit {
   exportVaultModalRef: ViewContainerRef;
   @ViewChild("appFolderAddEdit", { read: ViewContainerRef, static: true })
   folderAddEditModalRef: ViewContainerRef;
-  @ViewChild("appPasswordGenerator", { read: ViewContainerRef, static: true })
+  @ViewChild("appGenerator", { read: ViewContainerRef, static: true })
-  passwordGeneratorModalRef: ViewContainerRef;
+  generatorModalRef: ViewContainerRef;
 
   loading = false;
 
@@ -408,9 +408,9 @@ export class AppComponent implements OnInit {
     }
 
     [this.modal] = await this.modalService.openViewRef(
-      PasswordGeneratorComponent,
+      GeneratorComponent,
-      this.passwordGeneratorModalRef,
+      this.generatorModalRef,
-      (comp) => (comp.showSelect = false)
+      (comp) => (comp.comingFromAddEdit = false)
     );
 
     this.modal.onClosed.subscribe(() => {

src/app/app.module.ts

@@ -99,9 +99,9 @@ import { CiphersComponent } from "./vault/ciphers.component";
 import { CollectionsComponent } from "./vault/collections.component";
 import { ExportComponent } from "./vault/export.component";
 import { FolderAddEditComponent } from "./vault/folder-add-edit.component";
+import { GeneratorComponent } from "./vault/generator.component";
 import { GroupingsComponent } from "./vault/groupings.component";
 import { PasswordGeneratorHistoryComponent } from "./vault/password-generator-history.component";
-import { PasswordGeneratorComponent } from "./vault/password-generator.component";
 import { PasswordHistoryComponent } from "./vault/password-history.component";
 import { ShareComponent } from "./vault/share.component";
 import { VaultComponent } from "./vault/vault.component";
@@ -193,7 +193,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     LockComponent,
     LoginComponent,
     NavComponent,
-    PasswordGeneratorComponent,
+    GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordHistoryComponent,
     PasswordRepromptComponent,

src/app/vault/generator.component.html

@@ -81,7 +81,7 @@
                   [value]="o.value"
                   (change)="typeChanged()"
                   [checked]="type === o.value"
-                  [disabled]="showSelect"
+                  [disabled]="comingFromAddEdit"
                 />
                 <label class="unstyled" for="type_{{ o.value }}">
                   {{ o.name }}
@@ -296,7 +296,18 @@
             </div>
             <div class="box-content condensed" [hidden]="!showOptions">
               <div class="box-content-row box-content-row-radio">
-                <label class="radio-header">{{ "usernameType" | i18n }}</label>
+                <label class="radio-header">
+                  {{ "usernameType" | i18n }}
+                  <a
+                    href="#"
+                    appStopClick
+                    appBlurClick
+                    (click)="usernameTypesLearnMore()"
+                    appA11yTitle="{{ 'learnMore' | i18n }}"
+                  >
+                    <i class="bwi bwi-question-circle" aria-hidden="true"></i>
+                  </a>
+                </label>
                 <div
                   class="radio-group align-start text-default"
                   appBoxRow
@@ -371,7 +382,7 @@
                   </label>
                 </div>
               </div>
-              <div class="box-content-row" appBoxRow *ngIf="showWebsiteOption">
+              <div class="box-content-row" appBoxRow *ngIf="usernameWebsite">
                 <label for="subaddress-website">{{ "website" | i18n }}</label>
                 <input
                   id="subaddress-website"
@@ -413,7 +424,7 @@
                   </label>
                 </div>
               </div>
-              <div class="box-content-row" appBoxRow *ngIf="showWebsiteOption">
+              <div class="box-content-row" appBoxRow *ngIf="usernameWebsite">
                 <label for="catchall-website">{{ "website" | i18n }}</label>
                 <input
                   id="catchall-website"
@@ -455,14 +466,14 @@
           type="button"
           class="primary"
           appBlurClick
-          *ngIf="showSelect"
+          *ngIf="comingFromAddEdit"
           (click)="select()"
           appA11yTitle="{{ 'select' | i18n }}"
         >
           <i class="bwi bwi-lg bwi-fw bwi-check" aria-hidden="true"></i>
         </button>
         <button type="button" data-dismiss="modal">
-          {{ (showSelect ? "cancel" : "close") | i18n }}
+          {{ (comingFromAddEdit ? "cancel" : "close") | i18n }}
         </button>
       </div>
     </div>

src/app/vault/generator.component.ts

@@ -1,7 +1,7 @@
 import { Component } 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 { I18nService } from "jslib-common/abstractions/i18n.service";
 import { PasswordGenerationService } from "jslib-common/abstractions/passwordGeneration.service";
 import { PlatformUtilsService } from "jslib-common/abstractions/platformUtils.service";
@@ -9,10 +9,10 @@ import { StateService } from "jslib-common/abstractions/state.service";
 import { UsernameGenerationService } from "jslib-common/abstractions/usernameGeneration.service";
 
 @Component({
-  selector: "app-password-generator",
+  selector: "app-generator",
-  templateUrl: "password-generator.component.html",
+  templateUrl: "generator.component.html",
 })
-export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
+export class GeneratorComponent extends BaseGeneratorComponent {
   constructor(
     passwordGenerationService: PasswordGenerationService,
     usernameGenerationService: UsernameGenerationService,
@@ -31,4 +31,8 @@ export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
       window
     );
   }
+
+  usernameTypesLearnMore() {
+    this.platformUtilsService.launchUri("https://bitwarden.com/help/generator/#username-types");
+  }
 }

src/app/vault/vault.component.html

@@ -66,7 +66,7 @@
   >
   </app-vault-groupings>
 </div>
-<ng-template #passwordGenerator></ng-template>
+<ng-template #generator></ng-template>
 <ng-template #attachments></ng-template>
 <ng-template #collections></ng-template>
 <ng-template #share></ng-template>

src/app/vault/vault.component.ts

@@ -35,8 +35,8 @@ import { AttachmentsComponent } from "./attachments.component";
 import { CiphersComponent } from "./ciphers.component";
 import { CollectionsComponent } from "./collections.component";
 import { FolderAddEditComponent } from "./folder-add-edit.component";
+import { GeneratorComponent } from "./generator.component";
 import { GroupingsComponent } from "./groupings.component";
-import { PasswordGeneratorComponent } from "./password-generator.component";
 import { PasswordHistoryComponent } from "./password-history.component";
 import { ShareComponent } from "./share.component";
 import { ViewComponent } from "./view.component";
@@ -52,8 +52,8 @@ export class VaultComponent implements OnInit, OnDestroy {
   @ViewChild(AddEditComponent) addEditComponent: AddEditComponent;
   @ViewChild(CiphersComponent, { static: true }) ciphersComponent: CiphersComponent;
   @ViewChild(GroupingsComponent, { static: true }) groupingsComponent: GroupingsComponent;
-  @ViewChild("passwordGenerator", { read: ViewContainerRef, static: true })
+  @ViewChild("generator", { read: ViewContainerRef, static: true })
-  passwordGeneratorModalRef: ViewContainerRef;
+  generatorModalRef: ViewContainerRef;
   @ViewChild("attachments", { read: ViewContainerRef, static: true })
   attachmentsModalRef: ViewContainerRef;
   @ViewChild("passwordHistory", { read: ViewContainerRef, static: true })
@@ -599,7 +599,7 @@ export class VaultComponent implements OnInit, OnDestroy {
     this.go();
   }
 
-  async openGenerator(showSelect: boolean, passwordType = true) {
+  async openGenerator(comingFromAddEdit: boolean, passwordType = true) {
     if (this.modal != null) {
       this.modal.close();
     }
@@ -608,15 +608,14 @@ export class VaultComponent implements OnInit, OnDestroy {
     const loginType = cipher != null && cipher.type === CipherType.Login && cipher.login != null;
 
     const [modal, childComponent] = await this.modalService.openViewRef(
-      PasswordGeneratorComponent,
+      GeneratorComponent,
-      this.passwordGeneratorModalRef,
+      this.generatorModalRef,
       (comp) => {
-        comp.showSelect = showSelect;
+        comp.comingFromAddEdit = comingFromAddEdit;
-        if (showSelect) {
+        if (comingFromAddEdit) {
           comp.type = passwordType ? "password" : "username";
           if (loginType && cipher.login.hasUris && cipher.login.uris[0].hostname != null) {
             comp.usernameWebsite = cipher.login.uris[0].hostname;
-            comp.showWebsiteOption = true;
           }
         }
       }