Stub out dialog

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

@@ -4,7 +4,7 @@
   <app-profile></app-profile>
 
   <div *ngIf="showChangeEmail$ | async" class="tw-mt-16">
-    <h1 bitTypography="h1">{{ "changeEmail" | i18n }}</h1>
+    <h1 bitTypography="h1">{{ "areYouTryingtoLogin" | i18n }}</h1>
     <app-change-email></app-change-email>
   </div>
 
@@ -29,4 +29,11 @@
   <ng-template #deauthorizeSessionsTemplate></ng-template>
   <ng-template #viewUserApiKeyTemplate></ng-template>
   <ng-template #rotateUserApiKeyTemplate></ng-template>
+
+  <!-- TODO: remove this - for testing only -->
+  <div class="tw-mt-4">
+    <button type="button" buttonType="secondary" bitButton (click)="openLoginApproval()">
+      Open Login Approval
+    </button>
+  </div>
 </bit-container>

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

@@ -2,6 +2,7 @@ import { Component, OnInit, ViewChild, ViewContainerRef } from "@angular/core";
 import { combineLatest, from, lastValueFrom, map, Observable } from "rxjs";
 
 import { ModalService } from "@bitwarden/angular/services/modal.service";
+import { LoginApprovalComponent } from "@bitwarden/auth/angular";
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
@@ -78,4 +79,15 @@ export class AccountComponent implements OnInit {
     const dialogRef = DeleteAccountDialogComponent.open(this.dialogService);
     await lastValueFrom(dialogRef.closed);
   };
+
+  // TODO: remove this - for testing only
+  openLoginApproval() {
+    LoginApprovalComponent.open(this.dialogService, {
+      data: {
+        name: "test name",
+        userId: "yourUserId",
+        fingerprint: "test fingerprint",
+      },
+    });
+  }
 }

apps/web/src/locales/en/messages.json

@@ -86,6 +86,12 @@
   "atRiskApplications": {
     "message": "At-risk applications"
   },
+  "deviceType": {
+    "message": "Device type"
+  },
+  "ipAddress": {
+    "message": "IP address"
+  },
   "totalApplications": {
     "message": "Total applications"
   },

libs/auth/src/angular/index.ts

@@ -58,3 +58,6 @@ export * from "./vault-timeout-input/vault-timeout-input.component";
 
 // self hosted environment configuration dialog
 export * from "./self-hosted-env-config-dialog/self-hosted-env-config-dialog.component";
+
+// login approval
+export * from "./login/login-approval.component";

libs/auth/src/angular/login/login-approval.component.html

@@ -0,0 +1,28 @@
+<form [formGroup]="formGroup" [bitSubmit]="submit">
+  <bit-dialog dialogSize="default">
+    <span bitDialogTitle>
+      {{ "areYouTryingtoLogin" | i18n }}
+      <span class="tw-text-muted" bitTypography="body1">{{ name }}</span>
+    </span>
+    <ng-container bitDialogContent>
+      <h3 bitTypography="h3" class="tw-mt-4">{{ "fingerprintPhraseHeader" | i18n }}</h3>
+      <p bitTypography="body1">
+        <code>{{ fingerprint }}</code>
+      </p>
+      <h3 bitTypography="h3" class="tw-mt-4">{{ "deviceType" | i18n }}</h3>
+      <p bitTypography="body1">test</p>
+      <h3 bitTypography="h3" class="tw-mt-4">{{ "ipAddress" | i18n }}</h3>
+      <p bitTypography="body1">test</p>
+      <h3 bitTypography="h3" class="tw-mt-4">{{ "time" | i18n }}</h3>
+      <p bitTypography="body1">test</p>
+    </ng-container>
+    <ng-container bitDialogFooter>
+      <button bitButton bitFormButton type="submit" buttonType="primary">
+        {{ "confirm" | i18n }}
+      </button>
+      <button bitButton bitFormButton type="button" buttonType="secondary" bitDialogClose>
+        {{ "cancel" | i18n }}
+      </button>
+    </ng-container>
+  </bit-dialog>
+</form>

libs/auth/src/angular/login/login-approval.component.ts

@@ -0,0 +1,70 @@
+import { DIALOG_DATA, DialogConfig, DialogRef } from "@angular/cdk/dialog";
+import { CommonModule } from "@angular/common";
+import { Component, Inject, OnInit } from "@angular/core";
+import { FormGroup, ReactiveFormsModule } from "@angular/forms";
+import { RouterLink } from "@angular/router";
+
+import { JslibModule } from "@bitwarden/angular/jslib.module";
+import {
+  AsyncActionsModule,
+  ButtonModule,
+  DialogModule,
+  DialogService,
+  FormFieldModule,
+} from "@bitwarden/components";
+
+export type LoginApprovalDialogData = {
+  name: string;
+  userId: string;
+  fingerprint: string;
+};
+
+@Component({
+  selector: "login-approval",
+  templateUrl: "login-approval.component.html",
+  standalone: true,
+  imports: [
+    CommonModule,
+    JslibModule,
+    ReactiveFormsModule,
+    FormFieldModule,
+    AsyncActionsModule,
+    RouterLink,
+    ButtonModule,
+    DialogModule,
+  ],
+})
+export class LoginApprovalComponent implements OnInit {
+  name: string;
+  userId: string;
+  fingerprint: string;
+
+  loading = true;
+  formPromise: Promise<any>;
+
+  formGroup = new FormGroup({});
+
+  constructor(
+    @Inject(DIALOG_DATA) protected data: LoginApprovalDialogData,
+    private dialogRef: DialogRef,
+  ) {
+    this.name = data.name;
+    this.userId = data.userId;
+  }
+
+  async ngOnInit() {
+    this.loading = false;
+  }
+
+  submit = async () => {
+    if (this.loading) {
+      return;
+    }
+
+    this.dialogRef.close();
+  };
+
+  static open(dialogService: DialogService, config: DialogConfig<LoginApprovalDialogData>) {
+    return dialogService.open(LoginApprovalComponent, config);
+  }
+}