update generator (#2484)

* update generator

* update jslib

Co-authored-by: Thomas Rittson <trittson@bitwarden.com>

jslib

@@ -1 +1 @@
-Subproject commit e0da3116f1529bf1ddfa6bdf0bf57ee89bdeeb6b
+Subproject commit 4d58200ee90fb4fafa5d4f9f4c957654d4da306d

src/popup/app-routing.module.ts

@@ -17,8 +17,8 @@ import { SsoComponent } from "./accounts/sso.component";
 import { TwoFactorOptionsComponent } from "./accounts/two-factor-options.component";
 import { TwoFactorComponent } from "./accounts/two-factor.component";
 import { UpdateTempPasswordComponent } from "./accounts/update-temp-password.component";
+import { GeneratorComponent } from "./generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "./generator/password-generator-history.component";
-import { PasswordGeneratorComponent } from "./generator/password-generator.component";
 import { SendAddEditComponent } from "./send/send-add-edit.component";
 import { SendGroupingsComponent } from "./send/send-groupings.component";
 import { SendTypeComponent } from "./send/send-type.component";
@@ -170,7 +170,7 @@ const routes: Routes = [
   },
   {
     path: "generator",
-    component: PasswordGeneratorComponent,
+    component: GeneratorComponent,
     canActivate: [AuthGuardService],
     data: { state: "generator" },
   },
@@ -283,7 +283,7 @@ const routes: Routes = [
       },
       {
         path: "generator",
-        component: PasswordGeneratorComponent,
+        component: GeneratorComponent,
         canActivate: [AuthGuardService],
         data: { state: "tabs_generator" },
       },

src/popup/app.module.ts

@@ -83,8 +83,8 @@ import { PrivateModeWarningComponent } from "./components/private-mode-warning.c
 import { SendListComponent } from "./components/send-list.component";
 import { SetPinComponent } from "./components/set-pin.component";
 import { VerifyMasterPasswordComponent } from "./components/verify-master-password.component";
+import { GeneratorComponent } from "./generator/generator.component";
 import { PasswordGeneratorHistoryComponent } from "./generator/password-generator-history.component";
-import { PasswordGeneratorComponent } from "./generator/password-generator.component";
 import { EffluxDatesComponent as SendEffluxDatesComponent } from "./send/efflux-dates.component";
 import { SendAddEditComponent } from "./send/send-add-edit.component";
 import { SendGroupingsComponent } from "./send/send-groupings.component";
@@ -204,7 +204,7 @@ registerLocaleData(localeZhTw, "zh-TW");
     LockComponent,
     LoginComponent,
     OptionsComponent,
-    PasswordGeneratorComponent,
+    GeneratorComponent,
     PasswordGeneratorHistoryComponent,
     PasswordHistoryComponent,
     PasswordRepromptComponent,

src/popup/generator/generator.component.html

@@ -1,7 +1,7 @@
 <header>
   <div class="left">
-    <app-pop-out [show]="!showSelect"></app-pop-out>
+    <app-pop-out [show]="!comingFromAddEdit"></app-pop-out>
-    <button type="button" appBlurClick (click)="close()" *ngIf="showSelect">
+    <button type="button" appBlurClick (click)="close()" *ngIf="comingFromAddEdit">
       {{ "cancel" | i18n }}
     </button>
   </div>
@@ -9,7 +9,7 @@
     <span class="title">{{ "generator" | i18n }}</span>
   </h1>
   <div class="right">
-    <button type="button" appBlurClick (click)="select()" *ngIf="showSelect">
+    <button type="button" appBlurClick (click)="select()" *ngIf="comingFromAddEdit">
       {{ "select" | i18n }}
     </button>
   </div>
@@ -77,7 +77,7 @@
             [value]="o.value"
             (change)="typeChanged()"
             [checked]="type === o.value"
-            [disabled]="showSelect"
+            [disabled]="comingFromAddEdit"
           />
           <label for="type_{{ o.value }}">
             {{ o.name }}
@@ -280,7 +280,17 @@
       </h2>
       <div class="box-content">
         <div class="box-content-row">
-          <label class="radio-header">{{ "usernameType" | i18n }}</label>
+          <label class="radio-header">
+            {{ "usernameType" | i18n }}
+            <a
+              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>
+          </label>
           <div
             class="radio-group align-start text-default"
             appBoxRow
@@ -353,7 +363,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"
@@ -395,7 +405,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"

src/popup/generator/generator.component.ts

@@ -2,7 +2,7 @@ import { Location } from "@angular/common";
 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";
@@ -11,10 +11,10 @@ import { UsernameGenerationService } from "jslib-common/abstractions/usernameGen
 import { CipherView } from "jslib-common/models/view/cipherView";
 
 @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 {
   private addEditCipherInfo: any;
   private cipherState: CipherView;
 
@@ -43,10 +43,8 @@ export class PasswordGeneratorComponent extends BasePasswordGeneratorComponent {
     if (this.addEditCipherInfo != null) {
       this.cipherState = this.addEditCipherInfo.cipher;
     }
-    this.showSelect = this.cipherState != null;
+    this.comingFromAddEdit = this.cipherState != null;
-    this.showWebsiteOption =
+    if (this.cipherState?.login?.hasUris) {
-      this.cipherState?.login?.hasUris && this.cipherState.login.uris[0].hostname != null;
-    if (this.showWebsiteOption) {
       this.usernameWebsite = this.cipherState.login.uris[0].hostname;
     }
     await super.ngOnInit();

src/popup/scss/pages.scss

@@ -8,7 +8,7 @@ app-sync {
   }
 }
 
-app-password-generator .generated-block {
+app-generator .generated-block {
   font-size: $font-size-large;
   font-family: $font-family-monospace;
   margin: 20px;