[PM-18721] setup dialog template

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>

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

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"
   },