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

[PM-8368] AnonLayout Footer Updates (#9397)

Browse Source 
* add hostname to footer via env service

* add logic for showing/hiding environment

* add docs

* add web env-selector

* refactor to use one slot for env-selector

* add storybook docs

* add env hostname to stories

* remove sample route
This commit is contained in:
rr-bw
2024-05-29 13:31:04 -07:00
committed by GitHub
parent 05f5d632aa
commit 828e26f93c
7 changed files with 155 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
libs/auth/src/angular/anon-layout/anon-layout.mdx
View File

@@ -44,9 +44,15 @@ The AnonLayout**Wrapper**Component embeds the AnonLayoutComponent along with the
```html
<!-- File: anon-layout-wrapper.component.html -->
<auth-anon-layout>
<auth-anon-layout
[title]="pageTitle"
[subtitle]="pageSubtitle"
[icon]="pageIcon"
[showReadonlyHostname]="showReadonlyHostname"
>
<router-outlet></router-outlet>
<router-outlet slot="secondary" name="secondary"></router-outlet>
<router-outlet slot="environment-selector" name="environment-selector"></router-outlet>
</auth-anon-layout>
```
@@ -54,53 +60,60 @@ To implement, the developer does not need to work with the base AnonLayoutCompon
devoloper simply uses the AnonLayout**Wrapper**Component in `oss-routing.module.ts` (for Web, for
example) to construct the page via routable composition:
```javascript
```typescript
// File: oss-routing.module.ts
import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
{
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,
},
],
},
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.
(Notice that you can optionally add an `outlet: "secondary"` if you want to project secondary
content below the primary content).
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.
<br />
### Data Properties
In the `oss-routing.module.ts` example above, notice the data properties being passed in:
Routes that use the AnonLayou**tWrapper**Component can take several unique data properties defined
in the `AnonLayoutWrapperData` interface:
- 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.
- `showReadonlyHostname` - set to `true` if you want to show the hostname in the footer (ex:
"Accessing bitwarden.com")
All 3 of these properties are optional.
All of these properties are optional.
```javascript
import { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
// ...
```typescript
import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
{
// ...
@@ -108,10 +121,45 @@ import { AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
pageTitle: "logIn",
pageSubtitle: "loginWithMasterPassword",
pageIcon: LockIcon,
showReadonlyHostname: true,
} satisfies AnonLayoutWrapperData,
}
```
### Environment Selector
For some routes, you may want to display the environment selector in the footer of the
AnonLayoutComponent. To do so, add the relevant environment selector (Web or Libs version, depending
on your client) as a component with `outlet: "environment-selector"`.
```javascript
// File: oss-routing.module.ts
import { AnonLayoutWrapperComponent, AnonLayoutWrapperData, LockIcon } from "@bitwarden/auth/angular";
import { EnvironmentSelectorComponent } from "./components/environment-selector/environment-selector.component";
{
path: "",
component: AnonLayoutWrapperComponent,
children: [
{
path: "sample-route",
children: [
{
path: "",
component: MyPrimaryComponent,
},
{
path: "",
component: EnvironmentSelectorComponent, // use Web or Libs component depending on your client
outlet: "environment-selector",
},
],
// ...
},
],
},
```
---
<Story of={stories.WithSecondaryContent} />