[PM-5299] Extract a danger-zone component (#7220)

Extract a re-useable danger-zone component instead of needing to duplicate the code.

apps/web/src/app/admin-console/organizations/settings/account.component.html

@@ -78,16 +78,16 @@
     {{ "save" | i18n }}
   </button>
 </form>
-<h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
-<div class="tw-rounded tw-border tw-border-solid tw-border-danger-500 tw-bg-background tw-p-5">
-  <p>{{ "dangerZoneDesc" | i18n }}</p>
+
+<app-danger-zone>
   <button type="button" bitButton buttonType="danger" (click)="deleteOrganization()">
     {{ "deleteOrganization" | i18n }}
   </button>
   <button type="button" bitButton buttonType="danger" (click)="purgeVault()">
     {{ "purgeVault" | i18n }}
   </button>
-</div>
+</app-danger-zone>
+
 <ng-template #purgeOrganizationTemplate></ng-template>
 <ng-template #apiKeyTemplate></ng-template>
 <ng-template #rotateApiKeyTemplate></ng-template>

apps/web/src/app/auth/settings/account/account.component.html

@@ -2,29 +2,24 @@
   <h1>{{ "myAccount" | i18n }}</h1>
 </div>
 <app-profile></app-profile>
-<ng-container *ngIf="showChangeEmail">
-  <div class="secondary-header">
-    <h1>{{ "changeEmail" | i18n }}</h1>
-  </div>
+
+<div *ngIf="showChangeEmail" class="tw-mt-16">
+  <h1 bitTypography="h1">{{ "changeEmail" | i18n }}</h1>
   <app-change-email></app-change-email>
-</ng-container>
-<div class="secondary-header text-danger border-0 mb-0">
-  <h1>{{ "dangerZone" | i18n }}</h1>
-</div>
-<div class="card border-danger">
-  <div class="card-body">
-    <p>{{ "dangerZoneDesc" | i18n }}</p>
-    <button type="button" bitButton buttonType="danger" (click)="deauthorizeSessions()">
-      {{ "deauthorizeSessions" | i18n }}
-    </button>
-    <button type="button" bitButton buttonType="danger" (click)="purgeVault()">
-      {{ "purgeVault" | i18n }}
-    </button>
-    <button type="button" bitButton buttonType="danger" (click)="deleteAccount()">
-      {{ "deleteAccount" | i18n }}
-    </button>
-  </div>
 </div>
+
+<app-danger-zone>
+  <button type="button" bitButton buttonType="danger" (click)="deauthorizeSessions()">
+    {{ "deauthorizeSessions" | i18n }}
+  </button>
+  <button type="button" bitButton buttonType="danger" (click)="purgeVault()">
+    {{ "purgeVault" | i18n }}
+  </button>
+  <button type="button" bitButton buttonType="danger" (click)="deleteAccount()">
+    {{ "deleteAccount" | i18n }}
+  </button>
+</app-danger-zone>
+
 <ng-template #deauthorizeSessionsTemplate></ng-template>
 <ng-template #purgeVaultTemplate></ng-template>
 <ng-template #deleteAccountTemplate></ng-template>

apps/web/src/app/auth/settings/account/danger-zone.component.html

@@ -0,0 +1,9 @@
+<h1 bitTypography="h1" class="tw-mt-16 tw-pb-2.5 !tw-text-danger">{{ "dangerZone" | i18n }}</h1>
+
+<div class="tw-rounded tw-border tw-border-solid tw-border-danger-500 tw-p-5">
+  <p>{{ "dangerZoneDesc" | i18n }}</p>
+
+  <div class="tw-flex tw-flex-row tw-gap-2">
+    <ng-content></ng-content>
+  </div>
+</div>

apps/web/src/app/auth/settings/account/danger-zone.component.ts

@@ -0,0 +1,15 @@
+import { Component } from "@angular/core";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { TypographyModule } from "@bitwarden/components";
+
+/**
+ * Component for the Danger Zone section of the Account/Organization Settings page.
+ */
+@Component({
+  selector: "app-danger-zone",
+  templateUrl: "danger-zone.component.html",
+  standalone: true,
+  imports: [TypographyModule, JslibModule],
+})
+export class DangerZoneComponent {}

apps/web/src/app/auth/settings/account/danger-zone.stories.ts

@@ -0,0 +1,36 @@
+import { importProvidersFrom } from "@angular/core";
+import { Meta, StoryObj, applicationConfig, moduleMetadata } from "@storybook/angular";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import { ButtonModule } from "@bitwarden/components";
+
+import { PreloadedEnglishI18nModule } from "../../../core/tests";
+
+import { DangerZoneComponent } from "./danger-zone.component";
+
+export default {
+  title: "Web/Danger Zone",
+  component: DangerZoneComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [ButtonModule, JslibModule],
+    }),
+    applicationConfig({
+      providers: [importProvidersFrom(PreloadedEnglishI18nModule)],
+    }),
+  ],
+} as Meta;
+
+type Story = StoryObj<DangerZoneComponent>;
+
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <app-danger-zone>
+        <button type="button" bitButton buttonType="danger">Danger A</button>
+        <button type="button" bitButton buttonType="danger">Danger B</button>
+      </app-danger-zone>
+      `,
+  }),
+};

apps/web/src/app/shared/loose-components.module.ts

@@ -27,6 +27,7 @@ import { SetPasswordComponent } from "../auth/set-password.component";
 import { AccountComponent } from "../auth/settings/account/account.component";
 import { ChangeAvatarComponent } from "../auth/settings/account/change-avatar.component";
 import { ChangeEmailComponent } from "../auth/settings/account/change-email.component";
+import { DangerZoneComponent } from "../auth/settings/account/danger-zone.component";
 import { DeauthorizeSessionsComponent } from "../auth/settings/account/deauthorize-sessions.component";
 import { DeleteAccountComponent } from "../auth/settings/account/delete-account.component";
 import { ProfileComponent } from "../auth/settings/account/profile.component";
@@ -107,6 +108,7 @@ import { SharedModule } from "./shared.module";
     OrganizationBadgeModule,
     PipesModule,
     PasswordCalloutComponent,
+    DangerZoneComponent,
   ],
   declarations: [
     AcceptFamilySponsorshipComponent,
@@ -271,6 +273,7 @@ import { SharedModule } from "./shared.module";
     VerifyEmailTokenComponent,
     VerifyRecoverDeleteComponent,
     LowKdfComponent,
+    DangerZoneComponent,
   ],
 })
 export class LooseComponentsModule {}