From c20b99730b6cd186870d77966126cb472bdaa274 Mon Sep 17 00:00:00 2001
From: rr-bw <102181210+rr-bw@users.noreply.github.com>
Date: Sat, 3 May 2025 15:26:08 -0700
Subject: [PATCH] [PM-18721] setup dialog template

---
 ...ency-access-takeover-dialog.component.html | 23 ++++++++++++++++++
 ...rgency-access-takeover-dialog.component.ts | 24 +++++++++++++++++--
 apps/web/src/locales/en/messages.json         |  9 +++++++
 3 files changed, 54 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html

diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
new file mode 100644
index 00000000000..56469d363eb
--- /dev/null
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.html
@@ -0,0 +1,23 @@
+<bit-dialog dialogSize="large">
+  <span bitDialogTitle>
+    {{ "takeover" | i18n }}
+    <small class="tw-text-muted" *ngIf="dialogData.grantorName">{{ dialogData.grantorName }}</small>
+  </span>
+
+  <div bitDialogContent>
+    <bit-callout type="warning">{{
+      "emergencyAccessLoggedOutWarning" | i18n: dialogData.grantorName
+    }}</bit-callout>
+
+    <auth-change-password></auth-change-password>
+  </div>
+
+  <ng-container bitDialogFooter>
+    <button type="submit" bitButton bitFormButton buttonType="primary">
+      {{ "save" | i18n }}
+    </button>
+    <button type="button" bitButton bitFormButton buttonType="secondary" bitDialogClose>
+      {{ "cancel" | i18n }}
+    </button>
+  </ng-container>
+</bit-dialog>
diff --git a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
index 3e3f8d7bcf2..1f80e91ff5c 100644
--- a/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
+++ b/apps/web/src/app/auth/settings/emergency-access/takeover/emergency-access-takeover-dialog.component.ts
@@ -1,6 +1,17 @@
+import { CommonModule } from "@angular/common";
 import { Component, Inject } from "@angular/core";
 
-import { DIALOG_DATA, DialogConfig, DialogService } from "@bitwarden/components";
+import { ChangePasswordComponent } from "@bitwarden/auth/angular";
+import {
+  ButtonModule,
+  CalloutModule,
+  DIALOG_DATA,
+  DialogConfig,
+  DialogModule,
+  DialogService,
+  FormFieldModule,
+} from "@bitwarden/components";
+import { I18nPipe } from "@bitwarden/ui-common";
 
 type EmergencyAccessTakeoverDialogData = {
   grantorName: string;
@@ -24,9 +35,18 @@ export enum EmergencyAccessTakeoverDialogResultType {
   standalone: true,
   selector: "auth-emergency-access-takeover-dialog",
   templateUrl: "./emergency-access-takeover-dialog.component.html",
+  imports: [
+    ButtonModule,
+    CommonModule,
+    CalloutModule,
+    ChangePasswordComponent,
+    DialogModule,
+    FormFieldModule,
+    I18nPipe,
+  ],
 })
 export class EmergencyAccessTakeoverDialogComponent {
-  constructor(@Inject(DIALOG_DATA) private dialogData: EmergencyAccessTakeoverDialogData) {}
+  constructor(@Inject(DIALOG_DATA) protected dialogData: EmergencyAccessTakeoverDialogData) {}
 
   /**
    * Strongly typed helper to open a EmergencyAccessTakeoverDialogComponent
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index a170612fab2..af30943dcd7 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -5770,6 +5770,15 @@
       }
     }
   },
+  "emergencyAccessLoggedOutWarning": {
+    "message": "Proceeding will log $NAME$ out of their current session, requiring them to log back in. Active sessions on other devices may continue to remain active for up to one hour.",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "John Smith"
+      }
+    }
+  },
   "thisUser": {
     "message": "this user"
   },