@@ -13,8 +13,10 @@
- {{ subtitle }}
-
+
+
+
+```
+
+### Correct Usage ✅
+
+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.
+
+For clarity:
+
+- AnonLayoutComponent = the Auth-owned library component - ``
+- AnonLayout**Wrapper**Component = the client-specific wrapper component to be used in a client
+ routing module
+
+The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets:
+
+```html
+
+
+
+
+```
+
+To implement, the developer does not need to work with the base AnonLayoutComponent directly. The
+devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` (for Web, for
+example) to construct the page via routable composition:
+
+```javascript
+// File: oss-routing.module.ts
+
+{
+ path: "",
+ component: AnonLayoutWrapperComponent, // Wrapper component
+ children: [
+ {
+ path: "sample-route", // replace with your route
+ children: [
+ {
+ path: "",
+ component: MyPrimaryComponent, // replace with your component
+ },
+ {
+ path: "",
+ component: MySecondaryComponent, // replace with your component (or remove this secondary outlet object entirely if not needed)
+ outlet: "secondary",
+ },
+ ],
+ data: {
+ 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
+ },
+ },
+ ],
+ },
+```
+
+And if the AnonLayout**Wrapper**Component is already being used in your client's routing module,
+then your work will be as simple as just adding another child route under the `children` array.
+
+### Data Properties
+
+In the `oss-routing.module.ts` example above, notice the data properties being passed in:
+
+- For the `pageTitle` and `pageSubtitle` - pass in a translation key from `messages.json`.
+- For the `pageIcon` - import an icon (of type `Icon`) into the router file and use the icon
+ directly.
+
+All 3 of these properties are optional.
+
+```javascript
+import { LockIcon } from "@bitwarden/auth/angular";
+
+// ...
+
+{
+ // ...
+ data: {
+ pageTitle: "logIn",
+ pageSubtitle: "loginWithMasterPassword",
+ pageIcon: LockIcon,
+ },
+}
+```
+
+---
+
+ {
- getApplicationVersion = () => Promise.resolve("Version 2023.1.1");
+ getApplicationVersion = () => Promise.resolve("Version 2024.1.1");
}
export default {
@@ -28,7 +28,7 @@ export default {
args: {
title: "The Page Title",
subtitle: "The subtitle (optional)",
- icon: IconLock,
+ icon: LockIcon,
},
} as Meta;
@@ -38,14 +38,13 @@ export const WithPrimaryContent: Story = {
render: (args) => ({
props: args,
template:
- /**
- * The projected content (i.e. the
Example component content
+ ) and styling below is just a
- * sample and could be replaced with any content and styling
- */
+ // Projected content (the
) and styling is just a sample and can be replaced with any content/styling.
`
-
`,
}),
@@ -55,15 +54,16 @@ export const WithSecondaryContent: Story = {
render: (args) => ({
props: args,
template:
- // Notice that slot="secondary" is requred to project any secondary content:
+ // Projected content (the
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?
+
+
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?
+ 's) and styling is just a sample and can be replaced with any content/styling.
+ // 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?
+
@@ -75,14 +75,16 @@ export const WithSecondaryContent: Story = {
export const WithLongContent: Story = {
render: (args) => ({
props: args,
- template: `
+ template:
+ // Projected content (the
Secondary Projected Content (optional)
'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?
@@ -95,9 +97,11 @@ export const WithLongContent: Story = { export const WithIcon: Story = { render: (args) => ({ props: args, - template: ` + template: + // Projected content (the) and styling is just a sample and can be replaced with any content/styling.
+ `
-
+
diff --git a/libs/auth/src/icons/bitwarden-logo.ts b/libs/auth/src/angular/icons/bitwarden-logo.icon.ts
similarity index 100%
rename from libs/auth/src/icons/bitwarden-logo.ts
rename to libs/auth/src/angular/icons/bitwarden-logo.icon.ts
diff --git a/libs/auth/src/angular/icons/index.ts b/libs/auth/src/angular/icons/index.ts
index 7bb3f57579..d71e2e6efd 100644
--- a/libs/auth/src/angular/icons/index.ts
+++ b/libs/auth/src/angular/icons/index.ts
@@ -1 +1,3 @@
+export * from "./bitwarden-logo.icon";
+export * from "./lock.icon";
export * from "./user-verification-biometrics-fingerprint.icon";
diff --git a/libs/auth/src/icons/icon-lock.ts b/libs/auth/src/angular/icons/lock.icon.ts
similarity index 98%
rename from libs/auth/src/icons/icon-lock.ts
rename to libs/auth/src/angular/icons/lock.icon.ts
index 61330fe0df..b567c213f7 100644
--- a/libs/auth/src/icons/icon-lock.ts
+++ b/libs/auth/src/angular/icons/lock.icon.ts
@@ -1,6 +1,6 @@
import { svgIcon } from "@bitwarden/components";
-export const IconLock = svgIcon`
+export const LockIcon = svgIcon`
diff --git a/libs/auth/src/angular/index.ts b/libs/auth/src/angular/index.ts
index c93bf1c1d3..067ed63b8e 100644
--- a/libs/auth/src/angular/index.ts
+++ b/libs/auth/src/angular/index.ts
@@ -5,6 +5,7 @@
// icons
export * from "./icons";
+export * from "./anon-layout/anon-layout.component";
export * from "./fingerprint-dialog/fingerprint-dialog.component";
export * from "./password-callout/password-callout.component";
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?