Upstream/bitwarden-browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser.git synced 2024-12-18 15:47:57 +01:00
Code Issues Projects Releases Wiki Activity

Auth/PM-13318 - AnonLayoutWrapperData Refactor to add full Translation support (#11513)

Browse Source 
* PM-13318 - AnonLayoutWrapperData refactor to support all possible string scenarios (untranslated string, translated string, and translated string with placeholders)

* PM-13318 - Fix accidental check in

* PM-13318 - Revert the correct change.

* PM-13318 - Fix test failures
This commit is contained in:
Jared Snider 2024-10-11 16:02:47 -04:00 committed by GitHub
parent 784dd3c9a0
commit 7297d0fccd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 191 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.component.ts
View File

@ -9,7 +9,7 @@ import {
AnonLayoutWrapperDataService,
} from "@bitwarden/auth/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Icon, IconModule } from "@bitwarden/components";
import { Icon, IconModule, Translation } from "@bitwarden/components";
import { PopOutComponent } from "../../../platform/popup/components/pop-out.component";
import { PopupHeaderComponent } from "../../../platform/popup/layout/popup-header.component";
@ -90,11 +90,11 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
}
if (firstChildRouteData["pageTitle"] !== undefined) {
this.pageTitle = this.i18nService.t(firstChildRouteData["pageTitle"]);
this.pageTitle = this.handleStringOrTranslation(firstChildRouteData["pageTitle"]);
}
if (firstChildRouteData["pageSubtitle"] !== undefined) {
this.pageSubtitle = this.i18nService.t(firstChildRouteData["pageSubtitle"]);
this.pageSubtitle = this.handleStringOrTranslation(firstChildRouteData["pageSubtitle"]);
}
if (firstChildRouteData["pageIcon"] !== undefined) {
@ -132,19 +132,11 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
}
if (data.pageTitle) {
this.pageTitle = this.i18nService.t(data.pageTitle);
this.pageTitle = this.handleStringOrTranslation(data.pageTitle);
}
if (data.pageSubtitle) {
// If you pass just a string, we translate it by default
if (typeof data.pageSubtitle === "string") {
this.pageSubtitle = this.i18nService.t(data.pageSubtitle);
} else {
// if you pass an object, you can specify if you want to translate it or not
this.pageSubtitle = data.pageSubtitle.translate
? this.i18nService.t(data.pageSubtitle.subtitle)
: data.pageSubtitle.subtitle;
}
this.pageSubtitle = this.handleStringOrTranslation(data.pageSubtitle);
}
if (data.pageIcon) {
@ -168,6 +160,16 @@ export class ExtensionAnonLayoutWrapperComponent implements OnInit, OnDestroy {
}
}
private handleStringOrTranslation(value: string | Translation): string {
if (typeof value === "string") {
// If it's a string, return it as is
return value;
}
// If it's a Translation object, translate it
return this.i18nService.t(value.key, ...(value.placeholders ?? []));
}
private resetPageData() {
this.pageTitle = null;
this.pageSubtitle = null;

16
apps/browser/src/auth/popup/extension-anon-layout-wrapper/extension-anon-layout-wrapper.stories.ts
View File

@ -221,8 +221,12 @@ export const DefaultContentExample: Story = {
// Dynamic Content Example
const initialData: ExtensionAnonLayoutWrapperData = {
pageTitle: "setAStrongPassword",
pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
pageTitle: {
key: "setAStrongPassword",
},
pageSubtitle: {
key: "finishCreatingYourAccountBySettingAPassword",
},
pageIcon: LockIcon,
showAcctSwitcher: true,
showBackButton: true,
@ -230,8 +234,12 @@ const initialData: ExtensionAnonLayoutWrapperData = {
};
const changedData: ExtensionAnonLayoutWrapperData = {
pageTitle: "enterpriseSingleSignOn",
pageSubtitle: "checkYourEmail",
pageTitle: {
key: "enterpriseSingleSignOn",
},
pageSubtitle: {
key: "checkYourEmail",
},
pageIcon: RegistrationCheckEmailIcon,
showAcctSwitcher: false,
showBackButton: false,

24
apps/browser/src/popup/app-routing.module.ts
View File

@ -449,7 +449,9 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
data: {
pageIcon: LockIcon,
pageTitle: "yourVaultIsLockedV2",
pageTitle: {
key: "yourVaultIsLockedV2",
},
showReadonlyHostname: true,
showAcctSwitcher: true,
} satisfies ExtensionAnonLayoutWrapperData,
@ -471,7 +473,9 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
state: "signup",
pageTitle: "createAccount",
pageTitle: {
key: "createAccount",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
{
@ -492,8 +496,12 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
pageTitle: "setAStrongPassword",
pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
pageTitle: {
key: "setAStrongPassword",
},
pageSubtitle: {
key: "finishCreatingYourAccountBySettingAPassword",
},
state: "finish-signup",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -508,8 +516,12 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
component: SetPasswordJitComponent,
data: {
pageTitle: "joinOrganization",
pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
pageTitle: {
key: "joinOrganization",
},
pageSubtitle: {
key: "finishJoiningThisOrganizationBySettingAMasterPassword",
},
state: "set-password-jit",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},

34
apps/desktop/src/app/app-routing.module.ts
View File

@ -141,8 +141,12 @@ const routes: Routes = [
path: "hint",
canActivate: [unauthGuardFn()],
data: {
pageTitle: "requestPasswordHint",
pageSubtitle: "enterYourAccountEmailAddressAndYourPasswordHintWillBeSentToYou",
pageTitle: {
key: "requestPasswordHint",
},
pageSubtitle: {
key: "enterYourAccountEmailAddressAndYourPasswordHintWillBeSentToYou",
},
pageIcon: UserLockIcon,
} satisfies AnonLayoutWrapperData,
children: [
@ -164,7 +168,11 @@ const routes: Routes = [
{
path: "signup",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: { pageTitle: "createAccount" } satisfies AnonLayoutWrapperData,
data: {
pageTitle: {
key: "createAccount",
},
} satisfies AnonLayoutWrapperData,
children: [
{
path: "",
@ -184,8 +192,12 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
pageTitle: "setAStrongPassword",
pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
pageTitle: {
key: "setAStrongPassword",
},
pageSubtitle: {
key: "finishCreatingYourAccountBySettingAPassword",
},
} satisfies AnonLayoutWrapperData,
children: [
{
@ -199,7 +211,9 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.ExtensionRefresh), lockGuard()],
data: {
pageIcon: LockIcon,
pageTitle: "yourVaultIsLockedV2",
pageTitle: {
key: "yourVaultIsLockedV2",
},
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
children: [
@ -214,8 +228,12 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
component: SetPasswordJitComponent,
data: {
pageTitle: "joinOrganization",
pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
pageTitle: {
key: "joinOrganization",
},
pageSubtitle: {
key: "finishJoiningThisOrganizationBySettingAMasterPassword",
},
} satisfies AnonLayoutWrapperData,
},
],

16
apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.spec.ts
View File

@ -14,22 +14,24 @@ describe("freeTrialTextResolver", () => {
it("shows password manager text", () => {
route.queryParams.product = `${ProductType.PasswordManager}`;
expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
"continueSettingUpFreeTrialPasswordManager",
);
expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
key: "continueSettingUpFreeTrialPasswordManager",
});
});
it("shows secret manager text", () => {
route.queryParams.product = `${ProductType.SecretsManager}`;
expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
"continueSettingUpFreeTrialSecretsManager",
);
expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
key: "continueSettingUpFreeTrialSecretsManager",
});
});
it("shows default text", () => {
route.queryParams.product = `${ProductType.PasswordManager},${ProductType.SecretsManager}`;
expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe("continueSettingUpFreeTrial");
expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
key: "continueSettingUpFreeTrial",
});
});
});

17
apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.ts
View File

@ -1,10 +1,11 @@
import { ActivatedRouteSnapshot, ResolveFn } from "@angular/router";
import { ProductType } from "@bitwarden/common/billing/enums";
import { Translation } from "@bitwarden/components";
export const freeTrialTextResolver: ResolveFn<string | null> = (
export const freeTrialTextResolver: ResolveFn<Translation | null> = (
route: ActivatedRouteSnapshot,
): string | null => {
): Translation | null => {
const { product } = route.queryParams;
const products: ProductType[] = (product ?? "").split(",").map((p: string) => parseInt(p));
@ -13,10 +14,16 @@ export const freeTrialTextResolver: ResolveFn<string | null> = (
switch (true) {
case onlyPasswordManager:
return "continueSettingUpFreeTrialPasswordManager";
return {
key: "continueSettingUpFreeTrialPasswordManager",
};
case onlySecretsManager:
return "continueSettingUpFreeTrialSecretsManager";
return {
key: "continueSettingUpFreeTrialSecretsManager",
};
default:
return "continueSettingUpFreeTrial";
return {
key: "continueSettingUpFreeTrial",
};
}
};

68
apps/web/src/app/oss-routing.module.ts
View File

@ -228,7 +228,9 @@ const routes: Routes = [
path: "signup",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
pageTitle: "createAccount",
pageTitle: {
key: "createAccount",
},
titleId: "createAccount",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -250,8 +252,12 @@ const routes: Routes = [
path: "finish-signup",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
pageTitle: "setAStrongPassword",
pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
pageTitle: {
key: "setAStrongPassword",
},
pageSubtitle: {
key: "finishCreatingYourAccountBySettingAPassword",
},
titleId: "setAStrongPassword",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -264,7 +270,9 @@ const routes: Routes = [
{
path: "send/:sendId/:key",
data: {
pageTitle: "viewSend",
pageTitle: {
key: "viewSend",
},
showReadonlyHostname: true,
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -284,15 +292,21 @@ const routes: Routes = [
canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
component: SetPasswordJitComponent,
data: {
pageTitle: "joinOrganization",
pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
pageTitle: {
key: "joinOrganization",
},
pageSubtitle: {
key: "finishJoiningThisOrganizationBySettingAMasterPassword",
},
} satisfies AnonLayoutWrapperData,
},
{
path: "signup-link-expired",
canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
data: {
pageTitle: "expiredLink",
pageTitle: {
key: "expiredLink",
},
} satisfies AnonLayoutWrapperData,
children: [
{
@ -308,7 +322,9 @@ const routes: Routes = [
path: "sso",
canActivate: [unauthGuardFn()],
data: {
pageTitle: "enterpriseSingleSignOn",
pageTitle: {
key: "enterpriseSingleSignOn",
},
titleId: "enterpriseSingleSignOn",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -338,7 +354,9 @@ const routes: Routes = [
},
],
data: {
pageTitle: "logIn",
pageTitle: {
key: "logIn",
},
},
},
...extensionRefreshSwap(
@ -354,7 +372,9 @@ const routes: Routes = [
},
],
data: {
pageTitle: "yourVaultIsLockedV2",
pageTitle: {
key: "yourVaultIsLockedV2",
},
pageIcon: LockIcon,
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
@ -369,7 +389,9 @@ const routes: Routes = [
},
],
data: {
pageTitle: "yourAccountIsLocked",
pageTitle: {
key: "yourAccountIsLocked",
},
pageIcon: LockIcon,
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
@ -390,7 +412,9 @@ const routes: Routes = [
},
],
data: {
pageTitle: "verifyIdentity",
pageTitle: {
key: "verifyIdentity",
},
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
{
@ -408,7 +432,9 @@ const routes: Routes = [
},
],
data: {
pageTitle: "recoverAccountTwoStep",
pageTitle: {
key: "recoverAccountTwoStep",
},
titleId: "recoverAccountTwoStep",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},
@ -416,7 +442,9 @@ const routes: Routes = [
path: "accept-emergency",
canActivate: [deepLinkGuard()],
data: {
pageTitle: "emergencyAccess",
pageTitle: {
key: "emergencyAccess",
},
titleId: "acceptEmergency",
doNotSaveUrl: false,
} satisfies RouteDataProperties & AnonLayoutWrapperData,
@ -434,7 +462,9 @@ const routes: Routes = [
path: "recover-delete",
canActivate: [unauthGuardFn()],
data: {
pageTitle: "deleteAccount",
pageTitle: {
key: "deleteAccount",
},
titleId: "deleteAccount",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -453,7 +483,9 @@ const routes: Routes = [
path: "verify-recover-delete",
canActivate: [unauthGuardFn()],
data: {
pageTitle: "deleteAccount",
pageTitle: {
key: "deleteAccount",
},
titleId: "deleteAccount",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
children: [
@ -468,7 +500,9 @@ const routes: Routes = [
component: RemovePasswordComponent,
canActivate: [authGuard],
data: {
pageTitle: "removeMasterPassword",
pageTitle: {
key: "removeMasterPassword",
},
titleId: "removeMasterPassword",
} satisfies RouteDataProperties & AnonLayoutWrapperData,
},

4
apps/web/src/app/tools/send/access.component.ts
View File

@ -157,8 +157,8 @@ export class AccessComponent implements OnInit {
if (this.creatorIdentifier != null) {
this.layoutWrapperDataService.setAnonLayoutWrapperData({
pageSubtitle: {
subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier),
translate: false,
key: "sendAccessCreatorIdentifier",
placeholders: [this.creatorIdentifier],
},
});
}

56
libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts
View File

@ -4,20 +4,34 @@ import { Subject, filter, switchMap, takeUntil, tap } from "rxjs";
import { AnonLayoutComponent } from "@bitwarden/auth/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Icon } from "@bitwarden/components";
import { Icon, Translation } from "@bitwarden/components";
import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
export interface AnonLayoutWrapperData {
pageTitle?: string;
pageSubtitle?:
| string
| {
subtitle: string;
translate: boolean;
};
/**
* The optional title of the page.
* If a string is provided, it will be presented as is (ex: Organization name)
* If a Translation object (supports placeholders) is provided, it will be translated
*/
pageTitle?: string | Translation;
/**
* The optional subtitle of the page.
* If a string is provided, it will be presented as is (ex: user's email)
* If a Translation object (supports placeholders) is provided, it will be translated
*/
pageSubtitle?: string | Translation;
/**
* The optional icon to display on the page.
*/
pageIcon?: Icon;
/**
* Optional flag to either show the optional environment selector (false) or just a readonly hostname (true).
*/
showReadonlyHostname?: boolean;
/**
* Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
*/
maxWidth?: "md" | "3xl";
}
@ -71,11 +85,11 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
}
if (firstChildRouteData["pageTitle"] !== undefined) {
this.pageTitle = this.i18nService.t(firstChildRouteData["pageTitle"]);
this.pageTitle = this.handleStringOrTranslation(firstChildRouteData["pageTitle"]);
}
if (firstChildRouteData["pageSubtitle"] !== undefined) {
this.pageSubtitle = this.i18nService.t(firstChildRouteData["pageSubtitle"]);
this.pageSubtitle = this.handleStringOrTranslation(firstChildRouteData["pageSubtitle"]);
}
if (firstChildRouteData["pageIcon"] !== undefined) {
@ -101,19 +115,11 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
}
if (data.pageTitle) {
this.pageTitle = this.i18nService.t(data.pageTitle);
this.pageTitle = this.handleStringOrTranslation(data.pageTitle);
}
if (data.pageSubtitle) {
// If you pass just a string, we translate it by default
if (typeof data.pageSubtitle === "string") {
this.pageSubtitle = this.i18nService.t(data.pageSubtitle);
} else {
// if you pass an object, you can specify if you want to translate it or not
this.pageSubtitle = data.pageSubtitle.translate
? this.i18nService.t(data.pageSubtitle.subtitle)
: data.pageSubtitle.subtitle;
}
this.pageSubtitle = this.handleStringOrTranslation(data.pageSubtitle);
}
if (data.pageIcon) {
@ -129,6 +135,16 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
this.changeDetectorRef.detectChanges();
}
private handleStringOrTranslation(value: string | Translation): string {
if (typeof value === "string") {
// If it's a string, return it as is
return value;
}
// If it's a Translation object, translate it
return this.i18nService.t(value.key, ...(value.placeholders ?? []));
}
private resetPageData() {
this.pageTitle = null;
this.pageSubtitle = null;

15
libs/auth/src/angular/anon-layout/anon-layout-wrapper.stories.ts
View File

@ -163,17 +163,20 @@ export const DefaultContentExample: Story = {
// Dynamic Content Example
const initialData: AnonLayoutWrapperData = {
pageTitle: "setAStrongPassword",
pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
pageTitle: {
key: "setAStrongPassword",
},
pageSubtitle: {
key: "finishCreatingYourAccountBySettingAPassword",
},
pageIcon: LockIcon,
};
const changedData: AnonLayoutWrapperData = {
pageTitle: "enterpriseSingleSignOn",
pageSubtitle: {
subtitle: "user@email.com (non-translated)",
translate: false,
pageTitle: {
key: "enterpriseSingleSignOn",
},
pageSubtitle: "user@email.com (non-translated)",
pageIcon: RegistrationCheckEmailIcon,
};

5
libs/auth/src/angular/lock/lock.component.ts
View File

@ -233,10 +233,7 @@ export class LockV2Component implements OnInit, OnDestroy {
private setEmailAsPageSubtitle(email: string) {
this.anonLayoutWrapperDataService.setAnonLayoutWrapperData({
pageSubtitle: {
subtitle: email,
translate: false,
},
pageSubtitle: email,
});
}