From 935ae9d2389b428cc097288f18044d94ba66a8ef Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Fri, 4 Oct 2024 18:53:14 +0200 Subject: [PATCH] [PM-13172] Create desktop-specifc full credential-generator component (#11407) * Create desktop-specifc full credential-generator component * Add missing entries in en/messages.json * Import and use conditional routing for new credential generator component app.component: The original if, didn't make any sense as it meant that it would behave differently on the Send page vs Vault, which it doesn't, in addition to a duplicate message receiver was added in vault.component which I also removed. Old generator for cipher add/edit is still in place and will be replaced by the vault team * Update comment to include FIXME which is more easily searchable * Add fixme comment for future extension --------- Co-authored-by: Daniel James Smith --- apps/desktop/src/app/app.component.ts | 15 ++++-- .../credential-generator.component.html | 12 +++++ .../credential-generator.component.ts | 13 +++++ apps/desktop/src/locales/en/messages.json | 52 +++++++++++++++++-- .../src/vault/app/vault/vault.component.ts | 4 +- 5 files changed, 85 insertions(+), 11 deletions(-) create mode 100644 apps/desktop/src/app/tools/generator/credential-generator.component.html create mode 100644 apps/desktop/src/app/tools/generator/credential-generator.component.ts diff --git a/apps/desktop/src/app/app.component.ts b/apps/desktop/src/app/app.component.ts index 4fd5091272..9678f65723 100644 --- a/apps/desktop/src/app/app.component.ts +++ b/apps/desktop/src/app/app.component.ts @@ -29,6 +29,7 @@ import { MasterPasswordServiceAbstraction } from "@bitwarden/common/auth/abstrac import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction"; import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status"; import { ForceSetPasswordReason } from "@bitwarden/common/auth/models/domain/force-set-password-reason"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { VaultTimeoutAction } from "@bitwarden/common/enums/vault-timeout-action.enum"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service"; @@ -60,6 +61,7 @@ import { FolderAddEditComponent } from "../vault/app/vault/folder-add-edit.compo import { SettingsComponent } from "./accounts/settings.component"; import { ExportDesktopComponent } from "./tools/export/export-desktop.component"; +import { CredentialGeneratorComponent } from "./tools/generator/credential-generator.component"; import { GeneratorComponent } from "./tools/generator.component"; import { ImportDesktopComponent } from "./tools/import/import-desktop.component"; import { PasswordGeneratorHistoryComponent } from "./tools/password-generator-history.component"; @@ -398,10 +400,7 @@ export class AppComponent implements OnInit, OnDestroy { await this.addFolder(); break; case "openGenerator": - // openGenerator has extended functionality if called in the vault - if (!this.router.url.includes("vault")) { - await this.openGenerator(); - } + await this.openGenerator(); break; case "convertAccountToKeyConnector": // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling. @@ -503,6 +502,14 @@ export class AppComponent implements OnInit, OnDestroy { } async openGenerator() { + const isGeneratorSwapEnabled = await this.configService.getFeatureFlag( + FeatureFlag.GeneratorToolsModernization, + ); + if (isGeneratorSwapEnabled) { + await this.dialogService.open(CredentialGeneratorComponent); + return; + } + this.modalService.closeAll(); [this.modal] = await this.modalService.openViewRef( diff --git a/apps/desktop/src/app/tools/generator/credential-generator.component.html b/apps/desktop/src/app/tools/generator/credential-generator.component.html new file mode 100644 index 0000000000..4ae308e53f --- /dev/null +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.html @@ -0,0 +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 new file mode 100644 index 0000000000..47b46c6493 --- /dev/null +++ b/apps/desktop/src/app/tools/generator/credential-generator.component.ts @@ -0,0 +1,13 @@ +import { Component } from "@angular/core"; + +import { JslibModule } from "@bitwarden/angular/jslib.module"; +import { ButtonModule, DialogModule } from "@bitwarden/components"; +import { PasswordGeneratorComponent } from "@bitwarden/generator-components"; + +@Component({ + standalone: true, + selector: "credential-generator", + templateUrl: "credential-generator.component.html", + imports: [DialogModule, ButtonModule, JslibModule, PasswordGeneratorComponent], +}) +export class CredentialGeneratorComponent {} diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json index 0b7a9c678c..9d59ffe949 100644 --- a/apps/desktop/src/locales/en/messages.json +++ b/apps/desktop/src/locales/en/messages.json @@ -407,17 +407,56 @@ "message": "Minimum password length" }, "uppercase": { - "message": "Uppercase (A-Z)" + "message": "Uppercase (A-Z)", + "description": "deprecated. Use uppercaseLabel instead." }, "lowercase": { - "message": "Lowercase (a-z)" + "message": "Lowercase (a-z)", + "description": "deprecated. Use lowercaseLabel instead." }, "numbers": { - "message": "Numbers (0-9)" + "message": "Numbers (0-9)", + "description": "deprecated. Use numbersLabel instead." }, "specialCharacters": { "message": "Special characters (!@#$%^&*)" }, + "include": { + "message": "Include", + "description": "Card header for password generator include block" + }, + "uppercaseDescription": { + "message": "Include uppercase characters", + "description": "Tooltip for the password generator uppercase character checkbox" + }, + "uppercaseLabel": { + "message": "A-Z", + "description": "Label for the password generator uppercase character checkbox" + }, + "lowercaseDescription": { + "message": "Include lowercase characters", + "description": "Full description for the password generator lowercase character checkbox" + }, + "lowercaseLabel": { + "message": "a-z", + "description": "Label for the password generator lowercase character checkbox" + }, + "numbersDescription": { + "message": "Include numbers", + "description": "Full description for the password generator numbers checkbox" + }, + "numbersLabel": { + "message": "0-9", + "description": "Label for the password generator numbers checkbox" + }, + "specialCharactersDescription": { + "message": "Include special characters", + "description": "Full description for the password generator special characters checkbox" + }, + "specialCharactersLabel": { + "message": "!@#$%^&*", + "description": "Label for the password generator special characters checkbox" + }, "numWords": { "message": "Number of words" }, @@ -442,7 +481,12 @@ "description": "Minimum Special Characters" }, "ambiguous": { - "message": "Avoid ambiguous characters" + "message": "Avoid ambiguous characters", + "description": "deprecated. Use avoidAmbiguous instead." + }, + "avoidAmbiguous": { + "message": "Avoid ambiguous characters", + "description": "Label for the avoid ambiguous characters checkbox." }, "generatorPolicyInEffect": { "message": "Enterprise policy requirements have been applied to your generator options.", diff --git a/apps/desktop/src/vault/app/vault/vault.component.ts b/apps/desktop/src/vault/app/vault/vault.component.ts index f8a2bb773e..b6357b35d7 100644 --- a/apps/desktop/src/vault/app/vault/vault.component.ts +++ b/apps/desktop/src/vault/app/vault/vault.component.ts @@ -137,9 +137,6 @@ export class VaultComponent implements OnInit, OnDestroy { (document.querySelector("#search") as HTMLInputElement).select(); detectChanges = false; break; - case "openGenerator": - await this.openGenerator(false); - break; case "syncCompleted": await this.vaultItemsComponent.reload(this.activeFilter.buildFilter()); await this.vaultFilterComponent.reloadCollectionsAndFolders(this.activeFilter); @@ -623,6 +620,7 @@ 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(); }