From 16f36a10088a90d41023a5125d2274867d118c00 Mon Sep 17 00:00:00 2001 From: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Date: Thu, 10 Oct 2024 15:42:46 +0200 Subject: [PATCH] [PM-13170] Enable use of new generators on web (#11405) * Create web-specifc credential-generator component * Add missing entries in en/messages.json * Import and use conditional routing for new credential generator component * Add comment about temporary using password-generator component * Update comment to include FIXME which is more easily searchable --------- Co-authored-by: Daniel James Smith --- apps/web/src/app/oss-routing.module.ts | 7 +-- .../credential-generator.component.html | 5 ++ .../credential-generator.component.ts | 14 ++++++ apps/web/src/locales/en/messages.json | 46 +++++++++++++++++-- 4 files changed, 65 insertions(+), 7 deletions(-) create mode 100644 apps/web/src/app/tools/credential-generator/credential-generator.component.html create mode 100644 apps/web/src/app/tools/credential-generator/credential-generator.component.ts diff --git a/apps/web/src/app/oss-routing.module.ts b/apps/web/src/app/oss-routing.module.ts index 983067823c..18b9a30151 100644 --- a/apps/web/src/app/oss-routing.module.ts +++ b/apps/web/src/app/oss-routing.module.ts @@ -10,6 +10,7 @@ import { unauthGuardFn, } from "@bitwarden/angular/auth/guards"; import { canAccessFeature } from "@bitwarden/angular/platform/guard/feature-flag.guard"; +import { generatorSwap } from "@bitwarden/angular/tools/generator/generator-swap"; import { extensionRefreshSwap } from "@bitwarden/angular/utils/extension-refresh-swap"; import { AnonLayoutWrapperComponent, @@ -70,6 +71,7 @@ import { RequestSMAccessComponent } from "./secrets-manager/secrets-manager-land import { SMLandingComponent } from "./secrets-manager/secrets-manager-landing/sm-landing.component"; import { DomainRulesComponent } from "./settings/domain-rules.component"; import { PreferencesComponent } from "./settings/preferences.component"; +import { CredentialGeneratorComponent } from "./tools/credential-generator/credential-generator.component"; import { GeneratorComponent } from "./tools/generator.component"; import { ReportsModule } from "./tools/reports"; import { AccessComponent } from "./tools/send/access.component"; @@ -598,11 +600,10 @@ const routes: Routes = [ titleId: "exportVault", } satisfies RouteDataProperties, }, - { + ...generatorSwap(GeneratorComponent, CredentialGeneratorComponent, { path: "generator", - component: GeneratorComponent, data: { titleId: "generator" } satisfies RouteDataProperties, - }, + }), ], }, { diff --git a/apps/web/src/app/tools/credential-generator/credential-generator.component.html b/apps/web/src/app/tools/credential-generator/credential-generator.component.html new file mode 100644 index 0000000000..901cfa65b4 --- /dev/null +++ b/apps/web/src/app/tools/credential-generator/credential-generator.component.html @@ -0,0 +1,5 @@ + + + + + diff --git a/apps/web/src/app/tools/credential-generator/credential-generator.component.ts b/apps/web/src/app/tools/credential-generator/credential-generator.component.ts new file mode 100644 index 0000000000..9eb4b0a081 --- /dev/null +++ b/apps/web/src/app/tools/credential-generator/credential-generator.component.ts @@ -0,0 +1,14 @@ +import { Component } from "@angular/core"; + +import { GeneratorModule } from "@bitwarden/generator-components"; + +import { HeaderModule } from "../../layouts/header/header.module"; +import { SharedModule } from "../../shared"; + +@Component({ + standalone: true, + selector: "credential-generator", + templateUrl: "credential-generator.component.html", + imports: [SharedModule, HeaderModule, GeneratorModule], +}) +export class CredentialGeneratorComponent {} diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json index 6d2196466f..61894f2988 100644 --- a/apps/web/src/locales/en/messages.json +++ b/apps/web/src/locales/en/messages.json @@ -1500,7 +1500,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." }, "regeneratePassword": { "message": "Regenerate password" @@ -1513,18 +1518,51 @@ }, "uppercase": { "message": "Uppercase (A-Z)", - "description": "Include uppercase letters in the password generator." + "description": "deprecated. Use uppercaseLabel instead." }, "lowercase": { "message": "Lowercase (a-z)", - "description": "Include lowercase letters in the password generator." + "description": "deprecated. Use lowercaseLabel instead." }, "numbers": { - "message": "Numbers (0-9)" + "message": "Numbers (0-9)", + "description": "deprecated. Use numbersLabel instead." }, "specialCharacters": { "message": "Special characters (!@#$%^&*)" }, + "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" },