generator updates (#1469)

* generator updates * update jslib
2022-03-31 18:49:53 -04:00 · 2022-03-31 18:49:53 -04:00 · b4cec5b46f
parent 72405ebe87
commit b4cec5b46f
7 changed files with 44 additions and 30 deletions
--- a/2
+++ b/2
@ -1 +1 @@
-Subproject commit 56f5aba11ee7faadd2573df145e0387569641672
+Subproject commit 4d58200ee90fb4fafa5d4f9f4c957654d4da306d
--- a/src/app/app.component.ts
+++ b/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 })
-  passwordGeneratorModalRef: ViewContainerRef;
+  @ViewChild("appGenerator", { read: ViewContainerRef, static: true })
+  generatorModalRef: ViewContainerRef;

  loading = false;

@ -408,9 +408,9 @@ export class AppComponent implements OnInit {
    }

    [this.modal] = await this.modalService.openViewRef(
-      PasswordGeneratorComponent,
-      this.passwordGeneratorModalRef,
-      (comp) => (comp.showSelect = false)
+      GeneratorComponent,
+      this.generatorModalRef,
+      (comp) => (comp.comingFromAddEdit = false)
    );

    this.modal.onClosed.subscribe(() => {
--- a/src/app/app.module.ts
+++ b/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,
--- a/src/app/vault/password-generator.component.html
+++ b/src/app/vault/password-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>
--- a/src/app/vault/password-generator.component.ts
+++ b/src/app/vault/password-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",
-  templateUrl: "password-generator.component.html",
+  selector: "app-generator",
+  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");
+  }
 }
--- a/src/app/vault/vault.component.html
+++ b/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>
--- a/src/app/vault/vault.component.ts
+++ b/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 })
-  passwordGeneratorModalRef: ViewContainerRef;
+  @ViewChild("generator", { read: ViewContainerRef, static: true })
+  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,
-      this.passwordGeneratorModalRef,
+      GeneratorComponent,
+      this.generatorModalRef,
      (comp) => {
-        comp.showSelect = showSelect;
-        if (showSelect) {
+        comp.comingFromAddEdit = comingFromAddEdit;
+        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;
          }
        }
      }