From 6fd81fa4d0ee0fcf57ef75dccaf04af685626146 Mon Sep 17 00:00:00 2001 From: rr-bw <102181210+rr-bw@users.noreply.github.com> Date: Mon, 20 May 2024 11:12:01 -0700 Subject: [PATCH] [PM-8236] Move AnonLayoutWrapperComponent to Libs (#9272) * move to libs/auth * add tw-max-w-md to anonlayout --- .../anon-layout-wrapper.component.html | 0 .../anon-layout}/anon-layout-wrapper.component.ts | 6 ++++++ .../anon-layout/anon-layout.component.html | 2 +- libs/auth/src/angular/anon-layout/anon-layout.mdx | 15 +++++++-------- .../angular/anon-layout/anon-layout.stories.ts | 12 ++++++------ libs/auth/src/angular/index.ts | 1 + 6 files changed, 21 insertions(+), 15 deletions(-) rename {apps/web/src/app/auth => libs/auth/src/angular/anon-layout}/anon-layout-wrapper.component.html (100%) rename {apps/web/src/app/auth => libs/auth/src/angular/anon-layout}/anon-layout-wrapper.component.ts (89%) diff --git a/apps/web/src/app/auth/anon-layout-wrapper.component.html b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.html similarity index 100% rename from apps/web/src/app/auth/anon-layout-wrapper.component.html rename to libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.html diff --git a/apps/web/src/app/auth/anon-layout-wrapper.component.ts b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts similarity index 89% rename from apps/web/src/app/auth/anon-layout-wrapper.component.ts rename to libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts index c89b05a3c6..a9ba1054ab 100644 --- a/apps/web/src/app/auth/anon-layout-wrapper.component.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout-wrapper.component.ts @@ -5,6 +5,12 @@ import { AnonLayoutComponent } from "@bitwarden/auth/angular"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { Icon } from "@bitwarden/components"; +export interface AnonLayoutWrapperData { + pageTitle: string; + pageSubtitle: string; + pageIcon: Icon; +} + @Component({ standalone: true, templateUrl: "anon-layout-wrapper.component.html", diff --git a/libs/auth/src/angular/anon-layout/anon-layout.component.html b/libs/auth/src/angular/anon-layout/anon-layout.component.html index 6483048a23..1152d2efbb 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.component.html +++ b/libs/auth/src/angular/anon-layout/anon-layout.component.html @@ -13,7 +13,7 @@

{{ subtitle }}

-
+
diff --git a/libs/auth/src/angular/anon-layout/anon-layout.mdx b/libs/auth/src/angular/anon-layout/anon-layout.mdx index c604c02f03..b98523bba1 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.mdx +++ b/libs/auth/src/angular/anon-layout/anon-layout.mdx @@ -31,14 +31,13 @@ writing: Instead the AnonLayoutComponent is implemented solely in the router via routable composition, which gives us the advantages of nested routes in Angular. -To allow for routable composition, Auth will also provide a wrapper component in each client, called -AnonLayout**Wrapper**Component. +To allow for routable composition, Auth also provides an AnonLayout**Wrapper**Component which embeds +the AnonLayoutComponent. For clarity: -- AnonLayoutComponent = the Auth-owned library component - `` -- AnonLayout**Wrapper**Component = the client-specific wrapper component to be used in a client - routing module +- AnonLayoutComponent = the base, Auth-owned library component - `` +- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets: @@ -79,7 +78,7 @@ example) to construct the page via routable composition: pageTitle: "logIn", // example of a translation key from messages.json pageSubtitle: "loginWithMasterPassword", // example of a translation key from messages.json pageIcon: LockIcon, // example of an icon to pass in - }, + } satisfies AnonLayoutWrapperData, }, ], }, @@ -99,7 +98,7 @@ In the `oss-routing.module.ts` example above, notice the data properties being p All 3 of these properties are optional. ```javascript -import { LockIcon } from "@bitwarden/auth/angular"; +import { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular"; // ... @@ -109,7 +108,7 @@ import { LockIcon } from "@bitwarden/auth/angular"; pageTitle: "logIn", pageSubtitle: "loginWithMasterPassword", pageIcon: LockIcon, - }, + } satisfies AnonLayoutWrapperData, } ``` diff --git a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts index 61a395b155..103098349a 100644 --- a/libs/auth/src/angular/anon-layout/anon-layout.stories.ts +++ b/libs/auth/src/angular/anon-layout/anon-layout.stories.ts @@ -41,7 +41,7 @@ export const WithPrimaryContent: Story = { // Projected content (the
) and styling is just a sample and can be replaced with any content/styling. ` -
+
Primary Projected Content Area (customizable)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?
@@ -58,12 +58,12 @@ export const WithSecondaryContent: Story = { // Notice that slot="secondary" is requred to project any secondary content. ` -
+
Primary Projected Content Area (customizable)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?
-
+
Secondary Projected Content (optional)
@@ -79,12 +79,12 @@ export const WithLongContent: Story = { // Projected content (the
's) and styling is just a sample and can be replaced with any content/styling. ` -
+
Primary Projected Content Area (customizable)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam? Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
+
Secondary Projected Content (optional)

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias laborum nostrum natus. Expedita, quod est?

@@ -101,7 +101,7 @@ export const WithIcon: Story = { // Projected content (the
) and styling is just a sample and can be replaced with any content/styling. ` -
+
Primary Projected Content Area (customizable)
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus illum vero, placeat recusandae esse ratione eius minima veniam nemo, quas beatae! Impedit molestiae alias sapiente explicabo. Sapiente corporis ipsa numquam?
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts index 067ed63b8e..474ef17d93 100644 --- a/libs/auth/src/angular/index.ts +++ b/libs/auth/src/angular/index.ts @@ -6,6 +6,7 @@ export * from "./icons"; export * from "./anon-layout/anon-layout.component"; +export * from "./anon-layout/anon-layout-wrapper.component"; export * from "./fingerprint-dialog/fingerprint-dialog.component"; export * from "./password-callout/password-callout.component";