bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 08:43:33 +00:00
Code Issues Releases Wiki Activity

Auth/PM-9603 - AnonLayoutWrapper Dynamic content support (#10216)

Browse Source 
* PM-9603 - WIP - Untested DefaultAnonLayoutWrapperDataService

* PM-9603 - DefaultAnonLayoutWrapperSvc needs constructor

* PM-9603 - Good progress on getting storybook setup for the anon-layout-wrapper component - having issues with getting dummy component to display.

* PM-9603 - AnonLayoutWrapper Story working with default and dynamic content.

* PM-9603 - Tweak verbiage

* PM-9603 - Tweak stories; add mdx

* PM-9603 - Export AnonLayoutWrapperDataService and DefaultAnonLayoutWrapperDataService from libs/auth and wire up as default implementation in jslib-services.module

* PM-9603 - Address PR feedback
This commit is contained in:
Jared Snider
2024-07-25 16:16:54 -04:00
committed by GitHub
parent 0bf0d1ac96
commit 96648b4897
7 changed files with 357 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,6 +6,8 @@ import { AnonLayoutComponent } from "@bitwarden/auth/angular";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { Icon } from "@bitwarden/components";
import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
export interface AnonLayoutWrapperData {
pageTitle?: string;
pageSubtitle?: string;
@@ -30,13 +32,18 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
private router: Router,
private route: ActivatedRoute,
private i18nService: I18nService,
private anonLayoutWrapperDataService: AnonLayoutWrapperDataService,
) {}
ngOnInit(): void {
// Set the initial page data on load
this.setAnonLayoutWrapperData(this.route.snapshot.firstChild?.data);
this.setAnonLayoutWrapperDataFromRouteData(this.route.snapshot.firstChild?.data);
// Listen for page changes and update the page data appropriately
this.listenForPageDataChanges();
this.listenForServiceDataChanges();
}
private listenForPageDataChanges() {
this.router.events
.pipe(
filter((event) => event instanceof NavigationEnd),
@@ -46,11 +53,11 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
takeUntil(this.destroy$),
)
.subscribe((firstChildRouteData: Data | null) => {
this.setAnonLayoutWrapperData(firstChildRouteData);
this.setAnonLayoutWrapperDataFromRouteData(firstChildRouteData);
});
}
private setAnonLayoutWrapperData(firstChildRouteData: Data | null) {
private setAnonLayoutWrapperDataFromRouteData(firstChildRouteData: Data | null) {
if (!firstChildRouteData) {
return;
}
@@ -63,8 +70,42 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
this.pageSubtitle = this.i18nService.t(firstChildRouteData["pageSubtitle"]);
}
this.pageIcon = firstChildRouteData["pageIcon"];
this.showReadonlyHostname = firstChildRouteData["showReadonlyHostname"];
if (firstChildRouteData["pageIcon"] !== undefined) {
this.pageIcon = firstChildRouteData["pageIcon"];
}
this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
}
private listenForServiceDataChanges() {
this.anonLayoutWrapperDataService
.anonLayoutWrapperData$()
.pipe(takeUntil(this.destroy$))
.subscribe((data: AnonLayoutWrapperData) => {
this.setAnonLayoutWrapperData(data);
});
}
private setAnonLayoutWrapperData(data: AnonLayoutWrapperData) {
if (!data) {
return;
}
if (data.pageTitle) {
this.pageTitle = this.i18nService.t(data.pageTitle);
}
if (data.pageSubtitle) {
this.pageSubtitle = this.i18nService.t(data.pageSubtitle);
}
if (data.pageIcon) {
this.pageIcon = data.pageIcon;
}
if (data.showReadonlyHostname) {
this.showReadonlyHostname = data.showReadonlyHostname;
}
}
private resetPageData() {