From 8e87bc1db71d5c1b1f97cc59c6b4b46e420aabb3 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Mon, 30 Dec 2024 18:32:07 -0800 Subject: [PATCH 1/8] use new generator components in desktop app --- .../credential-generator.component.html | 24 ++++++++++-- .../credential-generator.component.ts | 39 +++++++++++++++++-- .../src/vault/app/vault/vault.component.ts | 28 +++++++++++-- 3 files changed, 81 insertions(+), 10 deletions(-) diff --git a/apps/desktop/src/app/tools/generator/credential-generator.component.html b/apps/desktop/src/app/tools/generator/credential-generator.component.html index 66b0de13dfb..4667b1babae 100644 --- a/apps/desktop/src/app/tools/generator/credential-generator.component.html +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.html @@ -1,7 +1,12 @@ {{ "generator" | i18n }} - + + + + + + +
+ + +
diff --git a/apps/desktop/src/app/tools/generator/credential-generator.component.ts b/apps/desktop/src/app/tools/generator/credential-generator.component.ts index aed8bf18684..77c7d9faae1 100644 --- a/apps/desktop/src/app/tools/generator/credential-generator.component.ts +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.ts @@ -1,4 +1,6 @@ -import { Component } from "@angular/core"; +import { DIALOG_DATA } from "@angular/cdk/dialog"; +import { CommonModule } from "@angular/common"; +import { Component, Inject } from "@angular/core"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { @@ -12,15 +14,46 @@ import { CredentialGeneratorHistoryDialogComponent, GeneratorModule, } from "@bitwarden/generator-components"; +import { GeneratedCredential } from "@bitwarden/generator-core"; + +export type CredentialGeneratorParams = { + onCredentialGenerated: (value?: string) => void; + type: "password" | "username"; +}; @Component({ standalone: true, selector: "credential-generator", templateUrl: "credential-generator.component.html", - imports: [DialogModule, ButtonModule, JslibModule, GeneratorModule, ItemModule, LinkModule], + imports: [ + CommonModule, + DialogModule, + ButtonModule, + JslibModule, + GeneratorModule, + ItemModule, + LinkModule, + ], }) export class CredentialGeneratorComponent { - constructor(private dialogService: DialogService) {} + credentials?: GeneratedCredential; + + constructor( + @Inject(DIALOG_DATA) protected data: CredentialGeneratorParams, + private dialogService: DialogService, + ) {} + + applyCredentials = () => { + this.data.onCredentialGenerated(this.credentials?.credential); + }; + + clearCredentials = () => { + this.data.onCredentialGenerated(); + }; + + onCredentialGenerated = (generatedCred: GeneratedCredential) => { + this.credentials = generatedCred; + }; openHistoryDialog = () => { // open history dialog diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index 67b69be7d1b..9145f5c053b 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -20,7 +20,9 @@ import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { EventCollectionService } from "@bitwarden/common/abstractions/event/event-collection.service"; import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service"; import { EventType } from "@bitwarden/common/enums"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; +import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { MessagingService } from "@bitwarden/common/platform/abstractions/messaging.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; @@ -34,6 +36,7 @@ import { DialogService } from "@bitwarden/components"; import { PasswordRepromptService } from "@bitwarden/vault"; import { SearchBarService } from "../../../app/layout/search/search-bar.service"; +import { CredentialGeneratorComponent } from "../../../app/tools/generator/credential-generator.component"; import { GeneratorComponent } from "../../../app/tools/generator.component"; import { invokeMenu, RendererMenuItem } from "../../../utils"; @@ -107,6 +110,7 @@ export class VaultComponent implements OnInit, OnDestroy { private apiService: ApiService, private dialogService: DialogService, private billingAccountProfileStateService: BillingAccountProfileStateService, + private configService: ConfigService, ) {} async ngOnInit() { @@ -622,9 +626,27 @@ export class VaultComponent implements OnInit, OnDestroy { } async openGenerator(comingFromAddEdit: boolean, passwordType = true) { - // FIXME: Will need to be extended to use the cipher-form-generator component introduced with https://github.com/bitwarden/clients/pull/11350 - if (this.modal != null) { - this.modal.close(); + const isGeneratorSwapEnabled = await this.configService.getFeatureFlag( + FeatureFlag.GeneratorToolsModernization, + ); + + if (isGeneratorSwapEnabled) { + this.dialogService.open(CredentialGeneratorComponent, { + data: { + onCredentialGenerated: (value?: string) => { + if (this.addEditComponent != null) { + this.addEditComponent.markPasswordAsDirty(); + if (passwordType) { + this.addEditComponent.cipher.login.password = value ?? ""; + } else { + this.addEditComponent.cipher.login.username = value ?? ""; + } + } + }, + type: passwordType ? "password" : "username", + }, + }); + return; } const cipher = this.addEditComponent?.cipher; From 8864faa0e58d208dc81a4626a19e4110e5a3e5e8 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Tue, 31 Dec 2024 09:48:44 -0800 Subject: [PATCH 2/8] add generator to export --- apps/desktop/src/vault/app/vault/vault.component.ts | 2 +- libs/tools/generator/components/src/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index 9145f5c053b..4241fbfe373 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -33,10 +33,10 @@ import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-repromp import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { FolderView } from "@bitwarden/common/vault/models/view/folder.view"; import { DialogService } from "@bitwarden/components"; +import { CredentialGeneratorComponent } from "@bitwarden/generator-components"; import { PasswordRepromptService } from "@bitwarden/vault"; import { SearchBarService } from "../../../app/layout/search/search-bar.service"; -import { CredentialGeneratorComponent } from "../../../app/tools/generator/credential-generator.component"; import { GeneratorComponent } from "../../../app/tools/generator.component"; import { invokeMenu, RendererMenuItem } from "../../../utils"; diff --git a/libs/tools/generator/components/src/index.ts b/libs/tools/generator/components/src/index.ts index 56eb912f367..ff6c13b30ac 100644 --- a/libs/tools/generator/components/src/index.ts +++ b/libs/tools/generator/components/src/index.ts @@ -3,3 +3,4 @@ export { CredentialGeneratorHistoryDialogComponent } from "./credential-generato export { EmptyCredentialHistoryComponent } from "./empty-credential-history.component"; export { GeneratorModule } from "./generator.module"; export { GeneratorServicesModule } from "./generator-services.module"; +export { CredentialGeneratorComponent } from "./credential-generator.component"; From e8952e2644072ed0f4c512f79723b14ee4a0a1e2 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Tue, 31 Dec 2024 09:52:10 -0800 Subject: [PATCH 3/8] add TODO comment --- apps/desktop/src/vault/app/vault/vault.component.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index 4241fbfe373..8c29afb6311 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -649,6 +649,7 @@ export class VaultComponent implements OnInit, OnDestroy { return; } + // TODO: Remove this when new generator feature is enabled const cipher = this.addEditComponent?.cipher; const loginType = cipher != null && cipher.type === CipherType.Login && cipher.login != null; From 170c8be76a688db08430372b61f50a3c967921e3 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Thu, 2 Jan 2025 10:10:45 -0800 Subject: [PATCH 4/8] use app-specific component --- apps/desktop/src/vault/app/vault/vault.component.ts | 2 +- libs/tools/generator/components/src/index.ts | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index 8c29afb6311..daa20df9770 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -33,10 +33,10 @@ import { CipherRepromptType } from "@bitwarden/common/vault/enums/cipher-repromp import { CipherView } from "@bitwarden/common/vault/models/view/cipher.view"; import { FolderView } from "@bitwarden/common/vault/models/view/folder.view"; import { DialogService } from "@bitwarden/components"; -import { CredentialGeneratorComponent } from "@bitwarden/generator-components"; import { PasswordRepromptService } from "@bitwarden/vault"; import { SearchBarService } from "../../../app/layout/search/search-bar.service"; +import { CredentialGeneratorComponent } from "../../../app/tools/generator/credential-generator.component"; import { GeneratorComponent } from "../../../app/tools/generator.component"; import { invokeMenu, RendererMenuItem } from "../../../utils"; diff --git a/libs/tools/generator/components/src/index.ts b/libs/tools/generator/components/src/index.ts index ff6c13b30ac..56eb912f367 100644 --- a/libs/tools/generator/components/src/index.ts +++ b/libs/tools/generator/components/src/index.ts @@ -3,4 +3,3 @@ export { CredentialGeneratorHistoryDialogComponent } from "./credential-generato export { EmptyCredentialHistoryComponent } from "./empty-credential-history.component"; export { GeneratorModule } from "./generator.module"; export { GeneratorServicesModule } from "./generator-services.module"; -export { CredentialGeneratorComponent } from "./credential-generator.component"; From 9cf8d2ffc558ac2c17d4288da3856d45d87e7aa3 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Thu, 2 Jan 2025 12:17:51 -0800 Subject: [PATCH 5/8] use vault-owned generator component --- .../credential-generator.component.html | 24 ++----- .../credential-generator.component.ts | 39 +----------- .../vault/credential-generator.component.html | 40 ++++++++++++ .../vault/credential-generator.component.ts | 62 +++++++++++++++++++ .../src/vault/app/vault/vault.component.ts | 2 +- 5 files changed, 110 insertions(+), 57 deletions(-) create mode 100644 apps/desktop/src/vault/app/vault/credential-generator.component.html create mode 100644 apps/desktop/src/vault/app/vault/credential-generator.component.ts diff --git a/apps/desktop/src/app/tools/generator/credential-generator.component.html b/apps/desktop/src/app/tools/generator/credential-generator.component.html index 4667b1babae..66b0de13dfb 100644 --- a/apps/desktop/src/app/tools/generator/credential-generator.component.html +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.html @@ -1,12 +1,7 @@ {{ "generator" | i18n }} - - - - - - + - - + diff --git a/apps/desktop/src/app/tools/generator/credential-generator.component.ts b/apps/desktop/src/app/tools/generator/credential-generator.component.ts index 77c7d9faae1..aed8bf18684 100644 --- a/apps/desktop/src/app/tools/generator/credential-generator.component.ts +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.ts @@ -1,6 +1,4 @@ -import { DIALOG_DATA } from "@angular/cdk/dialog"; -import { CommonModule } from "@angular/common"; -import { Component, Inject } from "@angular/core"; +import { Component } from "@angular/core"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { @@ -14,46 +12,15 @@ import { CredentialGeneratorHistoryDialogComponent, GeneratorModule, } from "@bitwarden/generator-components"; -import { GeneratedCredential } from "@bitwarden/generator-core"; - -export type CredentialGeneratorParams = { - onCredentialGenerated: (value?: string) => void; - type: "password" | "username"; -}; @Component({ standalone: true, selector: "credential-generator", templateUrl: "credential-generator.component.html", - imports: [ - CommonModule, - DialogModule, - ButtonModule, - JslibModule, - GeneratorModule, - ItemModule, - LinkModule, - ], + imports: [DialogModule, ButtonModule, JslibModule, GeneratorModule, ItemModule, LinkModule], }) export class CredentialGeneratorComponent { - credentials?: GeneratedCredential; - - constructor( - @Inject(DIALOG_DATA) protected data: CredentialGeneratorParams, - private dialogService: DialogService, - ) {} - - applyCredentials = () => { - this.data.onCredentialGenerated(this.credentials?.credential); - }; - - clearCredentials = () => { - this.data.onCredentialGenerated(); - }; - - onCredentialGenerated = (generatedCred: GeneratedCredential) => { - this.credentials = generatedCred; - }; + constructor(private dialogService: DialogService) {} openHistoryDialog = () => { // open history dialog diff --git a/apps/desktop/src/vault/app/vault/credential-generator.component.html b/apps/desktop/src/vault/app/vault/credential-generator.component.html new file mode 100644 index 00000000000..4667b1babae --- /dev/null +++ b/apps/desktop/src/vault/app/vault/credential-generator.component.html @@ -0,0 +1,40 @@ + + {{ "generator" | i18n }} + + + + + + + + + + + + +
+ + +
+ + diff --git a/apps/desktop/src/vault/app/vault/credential-generator.component.ts b/apps/desktop/src/vault/app/vault/credential-generator.component.ts new file mode 100644 index 00000000000..77c7d9faae1 --- /dev/null +++ b/apps/desktop/src/vault/app/vault/credential-generator.component.ts @@ -0,0 +1,62 @@ +import { DIALOG_DATA } from "@angular/cdk/dialog"; +import { CommonModule } from "@angular/common"; +import { Component, Inject } from "@angular/core"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { + ButtonModule, + DialogModule, + DialogService, + ItemModule, + LinkModule, +} from "@bitwarden/components"; +import { + CredentialGeneratorHistoryDialogComponent, + GeneratorModule, +} from "@bitwarden/generator-components"; +import { GeneratedCredential } from "@bitwarden/generator-core"; + +export type CredentialGeneratorParams = { + onCredentialGenerated: (value?: string) => void; + type: "password" | "username"; +}; + +@Component({ + standalone: true, + selector: "credential-generator", + templateUrl: "credential-generator.component.html", + imports: [ + CommonModule, + DialogModule, + ButtonModule, + JslibModule, + GeneratorModule, + ItemModule, + LinkModule, + ], +}) +export class CredentialGeneratorComponent { + credentials?: GeneratedCredential; + + constructor( + @Inject(DIALOG_DATA) protected data: CredentialGeneratorParams, + private dialogService: DialogService, + ) {} + + applyCredentials = () => { + this.data.onCredentialGenerated(this.credentials?.credential); + }; + + clearCredentials = () => { + this.data.onCredentialGenerated(); + }; + + onCredentialGenerated = (generatedCred: GeneratedCredential) => { + this.credentials = generatedCred; + }; + + openHistoryDialog = () => { + // open history dialog + this.dialogService.open(CredentialGeneratorHistoryDialogComponent); + }; +} diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index daa20df9770..5dd80bb5662 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -36,13 +36,13 @@ import { DialogService } from "@bitwarden/components"; import { PasswordRepromptService } from "@bitwarden/vault"; import { SearchBarService } from "../../../app/layout/search/search-bar.service"; -import { CredentialGeneratorComponent } from "../../../app/tools/generator/credential-generator.component"; import { GeneratorComponent } from "../../../app/tools/generator.component"; import { invokeMenu, RendererMenuItem } from "../../../utils"; import { AddEditComponent } from "./add-edit.component"; import { AttachmentsComponent } from "./attachments.component"; import { CollectionsComponent } from "./collections.component"; +import { CredentialGeneratorComponent } from "./credential-generator.component"; import { FolderAddEditComponent } from "./folder-add-edit.component"; import { PasswordHistoryComponent } from "./password-history.component"; import { ShareComponent } from "./share.component"; From 9cf10eee2266c30f904b4b40ae91843d3ade9179 Mon Sep 17 00:00:00 2001 From: jaasen-livefront Date: Thu, 2 Jan 2025 12:50:17 -0800 Subject: [PATCH 6/8] use CipherFormGeneratorComponent --- .../app/vault/credential-generator.component.html | 10 ++++------ .../vault/app/vault/credential-generator.component.ts | 11 ++++++----- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/apps/desktop/src/vault/app/vault/credential-generator.component.html b/apps/desktop/src/vault/app/vault/credential-generator.component.html index 4667b1babae..a294ce1f63f 100644 --- a/apps/desktop/src/vault/app/vault/credential-generator.component.html +++ b/apps/desktop/src/vault/app/vault/credential-generator.component.html @@ -1,12 +1,10 @@ {{ "generator" | i18n }} - - - - - - +