From 21539e6e9563d0454b2e929d66fd0b820753633a Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 18 Dec 2023 18:34:44 +0100
Subject: [PATCH] [PM-5299] Extract a danger-zone component (#7220)

Extract a re-useable danger-zone component instead of needing to duplicate the code.
---
 .../settings/account.component.html           |  8 ++--
 .../settings/account/account.component.html   | 37 ++++++++-----------
 .../account/danger-zone.component.html        |  9 +++++
 .../settings/account/danger-zone.component.ts | 15 ++++++++
 .../settings/account/danger-zone.stories.ts   | 36 ++++++++++++++++++
 .../src/app/shared/loose-components.module.ts |  3 ++
 6 files changed, 83 insertions(+), 25 deletions(-)
 create mode 100644 apps/web/src/app/auth/settings/account/danger-zone.component.html
 create mode 100644 apps/web/src/app/auth/settings/account/danger-zone.component.ts
 create mode 100644 apps/web/src/app/auth/settings/account/danger-zone.stories.ts

diff --git a/apps/web/src/app/admin-console/organizations/settings/account.component.html b/apps/web/src/app/admin-console/organizations/settings/account.component.html
index 300d8003a1..83e0e35cf3 100644
--- a/apps/web/src/app/admin-console/organizations/settings/account.component.html
+++ b/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>
diff --git a/apps/web/src/app/auth/settings/account/account.component.html b/apps/web/src/app/auth/settings/account/account.component.html
index 687a78290a..84c0507e1a 100644
--- a/apps/web/src/app/auth/settings/account/account.component.html
+++ b/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>
diff --git a/apps/web/src/app/auth/settings/account/danger-zone.component.html b/apps/web/src/app/auth/settings/account/danger-zone.component.html
new file mode 100644
index 0000000000..b6f5300cb2
--- /dev/null
+++ b/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>
diff --git a/apps/web/src/app/auth/settings/account/danger-zone.component.ts b/apps/web/src/app/auth/settings/account/danger-zone.component.ts
new file mode 100644
index 0000000000..42f198f4f0
--- /dev/null
+++ b/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 {}
diff --git a/apps/web/src/app/auth/settings/account/danger-zone.stories.ts b/apps/web/src/app/auth/settings/account/danger-zone.stories.ts
new file mode 100644
index 0000000000..67e7f195f1
--- /dev/null
+++ b/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>
+      `,
+  }),
+};
diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts
index 604d7dcada..1f0bbe1659 100644
--- a/apps/web/src/app/shared/loose-components.module.ts
+++ b/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 {}