mirror of
https://github.com/bitwarden/browser
synced 2025-12-14 23:33:31 +00:00
118 lines
3.5 KiB
Plaintext
118 lines
3.5 KiB
Plaintext
import { Meta, Story, Controls } from "@storybook/addon-docs";
|
|
|
|
import * as stories from "./anon-layout.stories";
|
|
|
|
<Meta of={stories} />
|
|
|
|
# AnonLayout Component
|
|
|
|
The Auth-owned AnonLayoutComponent is to be used for unauthenticated pages, where we don't know who
|
|
the user is (this includes viewing a Send).
|
|
|
|
---
|
|
|
|
### Incorrect Usage ❌
|
|
|
|
The AnonLayoutComponent is **not** to be implemented by every component that uses it in that
|
|
component's template directly. For example, if you have a component template called
|
|
`example.component.html`, and you want it to use the AnonLayoutComponent, you will **not** be
|
|
writing:
|
|
|
|
```html
|
|
<!-- File: example.component.html -->
|
|
|
|
<auth-anon-layout>
|
|
<div>Example component content</div>
|
|
</auth-anon-layout>
|
|
```
|
|
|
|
### 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 also provides an AnonLayout**Wrapper**Component which embeds
|
|
the AnonLayoutComponent.
|
|
|
|
For clarity:
|
|
|
|
- AnonLayoutComponent = the base, Auth-owned library component - `<auth-anon-layout>`
|
|
- AnonLayout**Wrapper**Component = the wrapper to be used in client routing modules
|
|
|
|
The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the router outlets:
|
|
|
|
```html
|
|
<!-- File: anon-layout-wrapper.component.html -->
|
|
|
|
<auth-anon-layout>
|
|
<router-outlet></router-outlet>
|
|
<router-outlet slot="secondary" name="secondary"></router-outlet>
|
|
</auth-anon-layout>
|
|
```
|
|
|
|
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
|
|
} satisfies AnonLayoutWrapperData,
|
|
},
|
|
],
|
|
},
|
|
```
|
|
|
|
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 { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
|
|
|
|
// ...
|
|
|
|
{
|
|
// ...
|
|
data: {
|
|
pageTitle: "logIn",
|
|
pageSubtitle: "loginWithMasterPassword",
|
|
pageIcon: LockIcon,
|
|
} satisfies AnonLayoutWrapperData,
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
<Story of={stories.WithSecondaryContent} />
|