-
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/layout.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.ts
similarity index 100%
rename from bitwarden_license/bit-web/src/app/sm/layout/layout.component.ts
rename to bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.component.ts
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts
new file mode 100644
index 0000000000..419de00875
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.stories.ts
@@ -0,0 +1,68 @@
+import { Component } from "@angular/core";
+import { RouterModule } from "@angular/router";
+import { Meta, Story, moduleMetadata } from "@storybook/angular";
+
+import { NavigationModule, IconModule } from "@bitwarden/components";
+import { PreloadedEnglishI18nModule } from "@bitwarden/web-vault/app/tests/preloaded-english-i18n.module";
+
+import { LayoutComponent } from "./layout.component";
+import { NavigationComponent } from "./navigation.component";
+
+@Component({
+ selector: "story-content",
+ template: ` Content
`, +}) +class StoryContentComponent {} + +export default { + title: "Web/Layout", + component: LayoutComponent, + decorators: [ + moduleMetadata({ + imports: [ + RouterModule.forRoot( + [ + { + path: "", + component: LayoutComponent, + children: [ + { + path: "", + redirectTo: "secrets", + pathMatch: "full", + }, + { + path: "secrets", + component: StoryContentComponent, + data: { + title: "secrets", + searchTitle: "searchSecrets", + }, + }, + { + outlet: "sidebar", + path: "", + component: NavigationComponent, + }, + ], + }, + ], + { useHash: true } + ), + IconModule, + NavigationModule, + PreloadedEnglishI18nModule, + ], + declarations: [LayoutComponent, NavigationComponent, StoryContentComponent], + }), + ], +} as Meta; + +const Template: Story = (args) => ({ + props: args, + template: ` +
+
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/no-items.component.ts b/bitwarden_license/bit-web/src/app/secrets-manager/layout/no-items.component.ts
new file mode 100644
index 0000000000..bc516b5995
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/no-items.component.ts
@@ -0,0 +1,11 @@
+import { Component } from "@angular/core";
+
+import { Icons } from "@bitwarden/components";
+
+@Component({
+ selector: "sm-no-items",
+ templateUrl: "./no-items.component.html",
+})
+export class NoItemsComponent {
+ protected icon = Icons.Search;
+}
diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html
new file mode 100644
index 0000000000..9b678157ca
--- /dev/null
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ "softDeleteSecretWarning" | i18n }}
+
+ {{ "deleteItemConfirmation" | i18n }}
+
+
+
+
+
+
+
+
+
+
+
+ {{ "downloadAccessToken" | i18n }}
+ {{ "expiresOnAccessToken" | i18n }} + {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date: "medium") }} +
+
+
+ {{ "accessToken" | i18n }}
+
+
+ {{ "expiresOnAccessToken" | i18n }}
+ {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date: "medium") }}
+
+
+ + {{ "expiresOnAccessToken" | i18n }} + {{ data.expirationDate === null ? ("never" | i18n) : (data.expirationDate | date: "medium") }} +
+
+
+
+
+
+
+
+
+
+
+
-
-
diff --git a/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts b/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts
deleted file mode 100644
index 8814d8490d..0000000000
--- a/bitwarden_license/bit-web/src/app/sm/layout/navigation.component.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Component } from "@angular/core";
-
-@Component({
- selector: "sm-navigation",
- templateUrl: "./navigation.component.html",
-})
-export class NavigationComponent {}
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html
deleted file mode 100644
index e17c4fdbc1..0000000000
--- a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.html
+++ /dev/null
@@ -1 +0,0 @@
-Secrets
diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts deleted file mode 100644 index 9b12584e52..0000000000 --- a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.component.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { Component } from "@angular/core"; - -@Component({ - selector: "sm-secrets", - templateUrl: "./secrets.component.html", -}) -export class SecretsComponent {} diff --git a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts b/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts deleted file mode 100644 index b98e2a8f7f..0000000000 --- a/bitwarden_license/bit-web/src/app/sm/secrets/secrets.module.ts +++ /dev/null @@ -1,12 +0,0 @@ -import { CommonModule } from "@angular/common"; -import { NgModule } from "@angular/core"; - -import { SecretsRoutingModule } from "./secrets-routing.module"; -import { SecretsComponent } from "./secrets.component"; - -@NgModule({ - imports: [CommonModule, SecretsRoutingModule], - declarations: [SecretsComponent], - providers: [], -}) -export class SecretsModule {} diff --git a/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts b/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts deleted file mode 100644 index 040efdb16f..0000000000 --- a/bitwarden_license/bit-web/src/app/sm/sm-routing.module.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { NgModule } from "@angular/core"; -import { RouterModule, Routes } from "@angular/router"; - -import { LayoutComponent } from "./layout/layout.component"; -import { NavigationComponent } from "./layout/navigation.component"; -import { SecretsModule } from "./secrets/secrets.module"; -import { SMGuard } from "./sm.guard"; - -const routes: Routes = [ - { - path: "", - component: LayoutComponent, - canActivate: [SMGuard], - children: [ - { - path: "", - component: NavigationComponent, - outlet: "sidebar", - }, - { - path: "secrets", - loadChildren: () => SecretsModule, - }, - { - path: "", - redirectTo: "secrets", - pathMatch: "full", - }, - ], - }, -]; - -@NgModule({ - imports: [RouterModule.forChild(routes)], - exports: [RouterModule], -}) -export class SecretsManagerRoutingModule {} diff --git a/libs/common/src/models/data/organization.data.ts b/libs/common/src/models/data/organization.data.ts index 85658d9764..feb8036ed6 100644 --- a/libs/common/src/models/data/organization.data.ts +++ b/libs/common/src/models/data/organization.data.ts @@ -22,6 +22,7 @@ export class OrganizationData { useScim: boolean; useCustomPermissions: boolean; useResetPassword: boolean; + useSecretsManager: boolean; selfHost: boolean; usersGetPremium: boolean; seats: number; @@ -63,6 +64,7 @@ export class OrganizationData { this.useScim = response.useScim; this.useCustomPermissions = response.useCustomPermissions; this.useResetPassword = response.useResetPassword; + this.useSecretsManager = response.useSecretsManager; this.selfHost = response.selfHost; this.usersGetPremium = response.usersGetPremium; this.seats = response.seats; diff --git a/libs/common/src/models/domain/organization.ts b/libs/common/src/models/domain/organization.ts index ef87b3dee1..b0fdfeb036 100644 --- a/libs/common/src/models/domain/organization.ts +++ b/libs/common/src/models/domain/organization.ts @@ -24,6 +24,7 @@ export class Organization { useScim: boolean; useCustomPermissions: boolean; useResetPassword: boolean; + useSecretsManager: boolean; selfHost: boolean; usersGetPremium: boolean; seats: number; @@ -69,6 +70,7 @@ export class Organization { this.useScim = obj.useScim; this.useCustomPermissions = obj.useCustomPermissions; this.useResetPassword = obj.useResetPassword; + this.useSecretsManager = obj.useSecretsManager; this.selfHost = obj.selfHost; this.usersGetPremium = obj.usersGetPremium; this.seats = obj.seats; @@ -206,6 +208,10 @@ export class Organization { return this.providerId != null || this.providerName != null; } + get canAccessSecretsManager() { + return this.useSecretsManager; + } + static fromJSON(json: Jsonify
+
diff --git a/libs/components/src/navigation/nav-group.component.ts b/libs/components/src/navigation/nav-group.component.ts
new file mode 100644
index 0000000000..5829701c9f
--- /dev/null
+++ b/libs/components/src/navigation/nav-group.component.ts
@@ -0,0 +1,62 @@
+import {
+ AfterContentInit,
+ Component,
+ ContentChildren,
+ EventEmitter,
+ Input,
+ Output,
+ QueryList,
+} from "@angular/core";
+
+import { NavBaseComponent } from "./nav-base.component";
+import { NavItemComponent } from "./nav-item.component";
+
+@Component({
+ selector: "bit-nav-group",
+ templateUrl: "./nav-group.component.html",
+})
+export class NavGroupComponent extends NavBaseComponent implements AfterContentInit {
+ @ContentChildren(NavGroupComponent, {
+ descendants: true,
+ })
+ nestedGroups!: QueryList
+
+
diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts
new file mode 100644
index 0000000000..634aa7e763
--- /dev/null
+++ b/libs/components/src/navigation/nav-item.component.ts
@@ -0,0 +1,48 @@
+import { Component, HostListener } from "@angular/core";
+import { IsActiveMatchOptions } from "@angular/router";
+import { BehaviorSubject, map } from "rxjs";
+
+import { NavBaseComponent } from "./nav-base.component";
+
+@Component({
+ selector: "bit-nav-item",
+ templateUrl: "./nav-item.component.html",
+})
+export class NavItemComponent extends NavBaseComponent {
+ /**
+ * Is `true` if `to` matches the current route
+ */
+ private _active = false;
+ protected setActive(isActive: boolean) {
+ this._active = isActive;
+ }
+ protected get showActiveStyles() {
+ return this._active && !this.hideActiveStyles;
+ }
+ protected readonly rlaOptions: IsActiveMatchOptions = {
+ paths: "exact",
+ queryParams: "exact",
+ fragment: "ignored",
+ matrixParams: "ignored",
+ };
+
+ /**
+ * The design spec calls for the an outline to wrap the entire element when the template's anchor/button has :focus-visible.
+ * Usually, we would use :focus-within for this. However, that matches when a child element has :focus instead of :focus-visible.
+ *
+ * Currently, the browser does not have a pseudo selector that combines these two, e.g. :focus-visible-within (WICG/focus-visible#151)
+ * To make our own :focus-visible-within functionality, we use event delegation on the host and manually check if the focus target (denoted with the .fvw class) matches :focus-visible. We then map that state to some styles, so the entire component can have an outline.
+ */
+ protected focusVisibleWithin$ = new BehaviorSubject(false);
+ protected fvwStyles$ = this.focusVisibleWithin$.pipe(
+ map((value) => (value ? "tw-z-10 tw-rounded tw-outline-none tw-ring tw-ring-text-alt2" : ""))
+ );
+ @HostListener("focusin", ["$event.target"])
+ onFocusIn(target: HTMLElement) {
+ this.focusVisibleWithin$.next(target.matches(".fvw:focus-visible"));
+ }
+ @HostListener("focusout")
+ onFocusOut() {
+ this.focusVisibleWithin$.next(false);
+ }
+}
diff --git a/libs/components/src/navigation/nav-item.stories.ts b/libs/components/src/navigation/nav-item.stories.ts
new file mode 100644
index 0000000000..e1a7128922
--- /dev/null
+++ b/libs/components/src/navigation/nav-item.stories.ts
@@ -0,0 +1,93 @@
+import { RouterTestingModule } from "@angular/router/testing";
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { IconButtonModule } from "../icon-button";
+
+import { NavItemComponent } from "./nav-item.component";
+import { NavigationModule } from "./navigation.module";
+
+export default {
+ title: "Component Library/Nav/Nav Item",
+ component: NavItemComponent,
+ decorators: [
+ moduleMetadata({
+ declarations: [],
+ imports: [RouterTestingModule, IconButtonModule, NavigationModule],
+ }),
+ ],
+ parameters: {
+ design: {
+ type: "figma",
+ url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=4687%3A86642",
+ },
+ },
+} as Meta;
+
+const Template: Story